| import { CommonModule } from '@angular/common'; |
| import { MatRippleModule } from '@angular/material/core'; |
| import { MatIconModule } from '@angular/material/icon'; |
| import { TemplatePortalDirective, PortalModule } from '@angular/cdk/portal'; |
| import { tdCollapseAnimation, mixinDisabled, mixinDisableRipple, tdRotateAnimation } from '@covalent/core/common'; |
| import { Component, Directive, Input, Output, TemplateRef, ViewContainerRef, ContentChild, ElementRef, Renderer2, EventEmitter, ContentChildren, NgModule } from '@angular/core'; |
| import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
| import { takeUntil } from 'rxjs/operators'; |
| import { Subject } from 'rxjs'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class TdExpansionPanelHeaderDirective extends TemplatePortalDirective { |
| /** |
| * @param {?} templateRef |
| * @param {?} viewContainerRef |
| */ |
| constructor(templateRef, viewContainerRef) { |
| super(templateRef, viewContainerRef); |
| } |
| } |
| TdExpansionPanelHeaderDirective.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[td-expansion-panel-header]ng-template', |
| },] } |
| ]; |
| /** @nocollapse */ |
| TdExpansionPanelHeaderDirective.ctorParameters = () => [ |
| { type: TemplateRef }, |
| { type: ViewContainerRef } |
| ]; |
| class TdExpansionPanelLabelDirective extends TemplatePortalDirective { |
| /** |
| * @param {?} templateRef |
| * @param {?} viewContainerRef |
| */ |
| constructor(templateRef, viewContainerRef) { |
| super(templateRef, viewContainerRef); |
| } |
| } |
| TdExpansionPanelLabelDirective.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[td-expansion-panel-label]ng-template', |
| },] } |
| ]; |
| /** @nocollapse */ |
| TdExpansionPanelLabelDirective.ctorParameters = () => [ |
| { type: TemplateRef }, |
| { type: ViewContainerRef } |
| ]; |
| class TdExpansionPanelSublabelDirective extends TemplatePortalDirective { |
| /** |
| * @param {?} templateRef |
| * @param {?} viewContainerRef |
| */ |
| constructor(templateRef, viewContainerRef) { |
| super(templateRef, viewContainerRef); |
| } |
| } |
| TdExpansionPanelSublabelDirective.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[td-expansion-panel-sublabel]ng-template', |
| },] } |
| ]; |
| /** @nocollapse */ |
| TdExpansionPanelSublabelDirective.ctorParameters = () => [ |
| { type: TemplateRef }, |
| { type: ViewContainerRef } |
| ]; |
| class TdExpansionPanelSummaryComponent { |
| } |
| TdExpansionPanelSummaryComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-expansion-summary', |
| template: '<ng-content></ng-content>' |
| }] } |
| ]; |
| class TdExpansionPanelBase { |
| } |
| /* tslint:disable-next-line */ |
| /** @type {?} */ |
| const _TdExpansionPanelMixinBase = mixinDisableRipple(mixinDisabled(TdExpansionPanelBase)); |
| class TdExpansionPanelComponent extends _TdExpansionPanelMixinBase { |
| /** |
| * @param {?} _renderer |
| * @param {?} _elementRef |
| */ |
| constructor(_renderer, _elementRef) { |
| super(); |
| this._renderer = _renderer; |
| this._elementRef = _elementRef; |
| this._expand = false; |
| /** |
| * expanded?: function |
| * Event emitted when [TdExpansionPanelComponent] is expanded. |
| */ |
| this.expanded = new EventEmitter(); |
| /** |
| * collapsed?: function |
| * Event emitted when [TdExpansionPanelComponent] is collapsed. |
| */ |
| this.collapsed = new EventEmitter(); |
| this._renderer.addClass(this._elementRef.nativeElement, 'td-expansion-panel'); |
| } |
| /** |
| * expand?: boolean |
| * Toggles [TdExpansionPanelComponent] between expand/collapse. |
| * @param {?} expand |
| * @return {?} |
| */ |
| set expand(expand) { |
| this._setExpand(coerceBooleanProperty(expand)); |
| } |
| /** |
| * @return {?} |
| */ |
| get expand() { |
| return this._expand; |
| } |
| /** |
| * Method executed when [TdExpansionPanelComponent] is clicked. |
| * @return {?} |
| */ |
| clickEvent() { |
| this._setExpand(!this._expand); |
| } |
| /** |
| * Toggle expand state of [TdExpansionPanelComponent] |
| * retuns 'true' if successful, else 'false'. |
| * @return {?} |
| */ |
| toggle() { |
| return this._setExpand(!this._expand); |
| } |
| /** |
| * Opens [TdExpansionPanelComponent] |
| * retuns 'true' if successful, else 'false'. |
| * @return {?} |
| */ |
| open() { |
| return this._setExpand(true); |
| } |
| /** |
| * Closes [TdExpansionPanelComponent] |
| * retuns 'true' if successful, else 'false'. |
| * @return {?} |
| */ |
| close() { |
| return this._setExpand(false); |
| } |
| /** |
| * Method executed when the disabled value changes |
| * @param {?} v |
| * @return {?} |
| */ |
| onDisabledChange(v) { |
| if (v && this._expand) { |
| this._expand = false; |
| this._onCollapsed(); |
| } |
| } |
| /** |
| * Method to change expand state internally and emit the [onExpanded] event if 'true' or [onCollapsed] |
| * event if 'false'. (Blocked if [disabled] is 'true') |
| * @param {?} newExpand |
| * @return {?} |
| */ |
| _setExpand(newExpand) { |
| if (this.disabled) { |
| return false; |
| } |
| if (this._expand !== newExpand) { |
| this._expand = newExpand; |
| if (newExpand) { |
| this._renderer.addClass(this._elementRef.nativeElement, 'td-expanded'); |
| this._onExpanded(); |
| } |
| else { |
| this._renderer.removeClass(this._elementRef.nativeElement, 'td-expanded'); |
| this._onCollapsed(); |
| } |
| return true; |
| } |
| return false; |
| } |
| /** |
| * @return {?} |
| */ |
| _onExpanded() { |
| this.expanded.emit(undefined); |
| } |
| /** |
| * @return {?} |
| */ |
| _onCollapsed() { |
| this.collapsed.emit(undefined); |
| } |
| } |
| TdExpansionPanelComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-expansion-panel', |
| template: "<div class=\"td-expansion-panel-header\"\n [class.mat-disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled || disableRipple\"\n [tabIndex]=\"disabled? -1 : 0\"\n (keydown.enter)=\"clickEvent()\"\n (click)=\"clickEvent()\">\n <ng-template [cdkPortalOutlet]=\"expansionPanelHeader\"></ng-template>\n <div class=\"td-expansion-panel-header-content\"\n [class.mat-disabled]=\"disabled\"\n *ngIf=\"!expansionPanelHeader\">\n <div *ngIf=\"label || expansionPanelLabel\" class=\"td-expansion-label\">\n <ng-template [cdkPortalOutlet]=\"expansionPanelLabel\"></ng-template>\n <ng-template [ngIf]=\"!expansionPanelLabel\">{{label}}</ng-template>\n </div>\n <div *ngIf=\"sublabel || expansionPanelSublabel\" class=\"td-expansion-sublabel\">\n <ng-template [cdkPortalOutlet]=\"expansionPanelSublabel\"></ng-template>\n <ng-template [ngIf]=\"!expansionPanelSublabel\">{{sublabel}}</ng-template>\n </div>\n <mat-icon class=\"td-expand-icon\" *ngIf=\"!disabled\" [@tdRotate]=\"expand\">keyboard_arrow_down</mat-icon>\n </div>\n</div>\n<div class=\"td-expansion-content\"\n [@tdCollapse]=\"!expand\">\n <ng-content></ng-content>\n</div>\n<div class=\"td-expansion-summary\"\n [@tdCollapse]=\"expand\">\n <ng-content select=\"td-expansion-summary\"></ng-content>\n</div>\n", |
| inputs: ['disabled', 'disableRipple'], |
| animations: [ |
| tdCollapseAnimation, |
| tdRotateAnimation, |
| ], |
| styles: [":host{display:block}:host .td-expansion-panel-header{position:relative;outline:0}:host .td-expansion-panel-header:focus:not(.mat-disabled),:host .td-expansion-panel-header:hover:not(.mat-disabled){cursor:pointer}:host .td-expansion-panel-header .td-expansion-panel-header-content{height:48px;padding:0 24px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%}:host .td-expansion-panel-header .td-expansion-panel-header-content .td-expansion-label,:host .td-expansion-panel-header .td-expansion-panel-header-content .td-expansion-sublabel{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-expansion-content.ng-animating,:host .td-expansion-summary.ng-animating{overflow:hidden}.td-expansion-label,.td-expansion-sublabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:16px}::ng-deep [dir=rtl] .td-expansion-label,::ng-deep [dir=rtl] .td-expansion-sublabel{margin-left:16px;margin-right:inherit}"] |
| }] } |
| ]; |
| /** @nocollapse */ |
| TdExpansionPanelComponent.ctorParameters = () => [ |
| { type: Renderer2 }, |
| { type: ElementRef } |
| ]; |
| TdExpansionPanelComponent.propDecorators = { |
| expansionPanelHeader: [{ type: ContentChild, args: [TdExpansionPanelHeaderDirective,] }], |
| expansionPanelLabel: [{ type: ContentChild, args: [TdExpansionPanelLabelDirective,] }], |
| expansionPanelSublabel: [{ type: ContentChild, args: [TdExpansionPanelSublabelDirective,] }], |
| label: [{ type: Input }], |
| sublabel: [{ type: Input }], |
| expand: [{ type: Input, args: ['expand',] }], |
| expanded: [{ type: Output }], |
| collapsed: [{ type: Output }] |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class TdExpansionPanelGroupComponent { |
| /** |
| * @param {?} _renderer |
| * @param {?} _elementRef |
| */ |
| constructor(_renderer, _elementRef) { |
| this._renderer = _renderer; |
| this._elementRef = _elementRef; |
| this._multi = false; |
| this._lastOpenedPanels = []; |
| this._destroyed = new Subject(); |
| this._stopWatchingPanels = new Subject(); |
| this._renderer.addClass(this._elementRef.nativeElement, 'td-expansion-panel-group'); |
| } |
| /** |
| * multi?: boolean |
| * Sets whether multiple panels can be opened at a given time. |
| * Set to false for accordion mode. |
| * Defaults to false. |
| * @param {?} multi |
| * @return {?} |
| */ |
| set multi(multi) { |
| this._multi = coerceBooleanProperty(multi); |
| if (this._multi === false && this._lastOpenedPanels.length > 0) { |
| this._closeAllExcept(this._lastOpenedPanels[this._lastOpenedPanels.length - 1]); |
| } |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| this._destroyed.next(true); |
| this._destroyed.unsubscribe(); |
| this._stopWatchingPanels.next(true); |
| this._stopWatchingPanels.unsubscribe(); |
| } |
| /** |
| * @return {?} |
| */ |
| ngAfterContentInit() { |
| if (!this._multi) { |
| /** @type {?} */ |
| const openedPanels = this.expansionPanels.filter((expansionPanel) => expansionPanel.expand); |
| /** @type {?} */ |
| const numOpenedPanels = openedPanels.length; |
| if (numOpenedPanels > 1) { |
| this._closeAllExcept(openedPanels[numOpenedPanels - 1]); |
| } |
| } |
| this._attachListeners(this.expansionPanels); |
| this.expansionPanels.changes |
| .pipe(takeUntil(this._destroyed)) |
| .subscribe((expansionPanels) => { |
| this._stopWatchingPanels.next(true); |
| this._stopWatchingPanels.unsubscribe(); |
| this._stopWatchingPanels = new Subject(); |
| this._attachListeners(expansionPanels); |
| }); |
| } |
| /** |
| * Opens all expansion panels, only if multi set set to true. |
| * @return {?} |
| */ |
| openAll() { |
| if (this._multi) { |
| this.expansionPanels.forEach((expansionPanel) => { |
| expansionPanel.open(); |
| }); |
| } |
| } |
| /** |
| * Closes all expansion panels |
| * @return {?} |
| */ |
| closeAll() { |
| this.expansionPanels.forEach((expansionPanel) => { |
| expansionPanel.close(); |
| }); |
| } |
| /** |
| * @param {?} expansionPanels |
| * @return {?} |
| */ |
| _attachListeners(expansionPanels) { |
| this._lastOpenedPanels = []; |
| expansionPanels.forEach((expansionPanel) => { |
| expansionPanel.expanded |
| .pipe(takeUntil(this._stopWatchingPanels)) |
| .subscribe(() => { |
| /** @type {?} */ |
| const indexOfPanel = this._lastOpenedPanels.indexOf(expansionPanel); |
| if (indexOfPanel !== -1) { |
| this._lastOpenedPanels.splice(indexOfPanel, 1); |
| } |
| this._lastOpenedPanels.push(expansionPanel); |
| if (!this._multi) { |
| this._closeAllExcept(expansionPanel); |
| } |
| }); |
| expansionPanel.collapsed |
| .pipe(takeUntil(this._stopWatchingPanels)) |
| .subscribe(() => { |
| /** @type {?} */ |
| const indexOfPanel = this._lastOpenedPanels.indexOf(expansionPanel); |
| if (indexOfPanel !== -1) { |
| this._lastOpenedPanels.splice(indexOfPanel, 1); |
| } |
| }); |
| }); |
| } |
| /** |
| * @param {?} expansionPanel |
| * @return {?} |
| */ |
| _closeAllExcept(expansionPanel) { |
| this.expansionPanels.forEach((panel) => { |
| if (panel !== expansionPanel) { |
| panel.close(); |
| } |
| }); |
| } |
| } |
| TdExpansionPanelGroupComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-expansion-panel-group', |
| template: "<ng-content></ng-content>", |
| styles: [""] |
| }] } |
| ]; |
| /** @nocollapse */ |
| TdExpansionPanelGroupComponent.ctorParameters = () => [ |
| { type: Renderer2 }, |
| { type: ElementRef } |
| ]; |
| TdExpansionPanelGroupComponent.propDecorators = { |
| multi: [{ type: Input, args: ['multi',] }], |
| expansionPanels: [{ type: ContentChildren, args: [TdExpansionPanelComponent,] }] |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| const TD_EXPANSION_PANEL = [ |
| TdExpansionPanelGroupComponent, |
| TdExpansionPanelComponent, |
| TdExpansionPanelHeaderDirective, |
| TdExpansionPanelLabelDirective, |
| TdExpansionPanelSublabelDirective, |
| TdExpansionPanelSummaryComponent, |
| ]; |
| class CovalentExpansionPanelModule { |
| } |
| CovalentExpansionPanelModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| CommonModule, |
| MatRippleModule, |
| MatIconModule, |
| PortalModule, |
| ], |
| declarations: [ |
| TD_EXPANSION_PANEL, |
| ], |
| exports: [ |
| TD_EXPANSION_PANEL, |
| ], |
| },] } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| export { CovalentExpansionPanelModule, TdExpansionPanelHeaderDirective, TdExpansionPanelLabelDirective, TdExpansionPanelSublabelDirective, TdExpansionPanelSummaryComponent, TdExpansionPanelBase, _TdExpansionPanelMixinBase, TdExpansionPanelComponent, TdExpansionPanelGroupComponent }; |
| |
| //# sourceMappingURL=covalent-core-expansion-panel.js.map |
