| import { Directive, TemplateRef, ViewContainerRef, Component, EventEmitter, Renderer2, ElementRef, ContentChild, Input, Output, ContentChildren, NgModule } from '@angular/core'; |
| import { CommonModule } from '@angular/common'; |
| import { TemplatePortalDirective, PortalModule } from '@angular/cdk/portal'; |
| import { MatRippleModule } from '@angular/material/core'; |
| import { MatIconModule } from '@angular/material/icon'; |
| import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
| import { mixinDisableRipple, mixinDisabled, tdCollapseAnimation, tdRotateAnimation } from '@covalent/core/common'; |
| import { takeUntil } from 'rxjs/operators'; |
| import { Subject } from 'rxjs'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: expansion-panel.component.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,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') |
| * @private |
| * @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; |
| } |
| /** |
| * @private |
| * @return {?} |
| */ |
| _onExpanded() { |
| this.expanded.emit(); |
| } |
| /** |
| * @private |
| * @return {?} |
| */ |
| _onCollapsed() { |
| this.collapsed.emit(); |
| } |
| } |
| TdExpansionPanelComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-expansion-panel', |
| template: "<div\n 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>\n <ng-template [cdkPortalOutlet]=\"expansionPanelHeader\"></ng-template>\n <div class=\"td-expansion-panel-header-content\" [class.mat-disabled]=\"disabled\" *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\" [@tdCollapse]=\"!expand\">\n <ng-content></ng-content>\n</div>\n<div class=\"td-expansion-summary\" [@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{outline:none;position:relative}: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{-ms-flex:1;-ms-flex-align:center;-ms-flex-direction:row;-ms-flex-line-pack:center;-ms-flex-pack:start;align-content:center;align-items:center;box-sizing:border-box;display:-ms-flexbox;display:flex;flex:1;flex-direction:row;height:48px;justify-content:flex-start;max-width:100%;padding:0 24px}: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{-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{margin-right:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::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 }] |
| }; |
| if (false) { |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelComponent.prototype._expand; |
| /** @type {?} */ |
| TdExpansionPanelComponent.prototype.expansionPanelHeader; |
| /** @type {?} */ |
| TdExpansionPanelComponent.prototype.expansionPanelLabel; |
| /** @type {?} */ |
| TdExpansionPanelComponent.prototype.expansionPanelSublabel; |
| /** |
| * label?: string |
| * Sets label of [TdExpansionPanelComponent] header. |
| * Defaults to 'Click to expand' |
| * @type {?} |
| */ |
| TdExpansionPanelComponent.prototype.label; |
| /** |
| * sublabel?: string |
| * Sets sublabel of [TdExpansionPanelComponent] header. |
| * @type {?} |
| */ |
| TdExpansionPanelComponent.prototype.sublabel; |
| /** |
| * expanded?: function |
| * Event emitted when [TdExpansionPanelComponent] is expanded. |
| * @type {?} |
| */ |
| TdExpansionPanelComponent.prototype.expanded; |
| /** |
| * collapsed?: function |
| * Event emitted when [TdExpansionPanelComponent] is collapsed. |
| * @type {?} |
| */ |
| TdExpansionPanelComponent.prototype.collapsed; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelComponent.prototype._renderer; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelComponent.prototype._elementRef; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: expansion-panel-group.component.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,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((/** |
| * @param {?} expansionPanel |
| * @return {?} |
| */ |
| (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((/** |
| * @param {?} expansionPanels |
| * @return {?} |
| */ |
| (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((/** |
| * @param {?} expansionPanel |
| * @return {?} |
| */ |
| (expansionPanel) => { |
| expansionPanel.open(); |
| })); |
| } |
| } |
| /** |
| * Closes all expansion panels |
| * @return {?} |
| */ |
| closeAll() { |
| this.expansionPanels.forEach((/** |
| * @param {?} expansionPanel |
| * @return {?} |
| */ |
| (expansionPanel) => { |
| expansionPanel.close(); |
| })); |
| } |
| /** |
| * @private |
| * @param {?} expansionPanels |
| * @return {?} |
| */ |
| _attachListeners(expansionPanels) { |
| this._lastOpenedPanels = []; |
| expansionPanels.forEach((/** |
| * @param {?} expansionPanel |
| * @return {?} |
| */ |
| (expansionPanel) => { |
| expansionPanel.expanded.pipe(takeUntil(this._stopWatchingPanels)).subscribe((/** |
| * @return {?} |
| */ |
| () => { |
| /** @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((/** |
| * @return {?} |
| */ |
| () => { |
| /** @type {?} */ |
| const indexOfPanel = this._lastOpenedPanels.indexOf(expansionPanel); |
| if (indexOfPanel !== -1) { |
| this._lastOpenedPanels.splice(indexOfPanel, 1); |
| } |
| })); |
| })); |
| } |
| /** |
| * @private |
| * @param {?} expansionPanel |
| * @return {?} |
| */ |
| _closeAllExcept(expansionPanel) { |
| this.expansionPanels.forEach((/** |
| * @param {?} panel |
| * @return {?} |
| */ |
| (panel) => { |
| if (panel !== expansionPanel) { |
| panel.close(); |
| } |
| })); |
| } |
| } |
| TdExpansionPanelGroupComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-expansion-panel-group', |
| template: "<ng-content></ng-content>\n", |
| styles: [""] |
| }] } |
| ]; |
| /** @nocollapse */ |
| TdExpansionPanelGroupComponent.ctorParameters = () => [ |
| { type: Renderer2 }, |
| { type: ElementRef } |
| ]; |
| TdExpansionPanelGroupComponent.propDecorators = { |
| multi: [{ type: Input, args: ['multi',] }], |
| expansionPanels: [{ type: ContentChildren, args: [TdExpansionPanelComponent, { descendants: true },] }] |
| }; |
| if (false) { |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelGroupComponent.prototype._multi; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelGroupComponent.prototype._lastOpenedPanels; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelGroupComponent.prototype._destroyed; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelGroupComponent.prototype._stopWatchingPanels; |
| /** @type {?} */ |
| TdExpansionPanelGroupComponent.prototype.expansionPanels; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelGroupComponent.prototype._renderer; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdExpansionPanelGroupComponent.prototype._elementRef; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: expansion-panel.module.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,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 |
| * Generated from: public-api.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: index.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: covalent-core-expansion-panel.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { CovalentExpansionPanelModule, TdExpansionPanelBase, TdExpansionPanelComponent, TdExpansionPanelGroupComponent, TdExpansionPanelHeaderDirective, TdExpansionPanelLabelDirective, TdExpansionPanelSublabelDirective, TdExpansionPanelSummaryComponent, _TdExpansionPanelMixinBase }; |
| //# sourceMappingURL=covalent-core-expansion-panel.js.map |
