@angular/material
Version:
Angular Material
592 lines (577 loc) • 23.7 kB
JavaScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, Host, Input, NgModule, Optional, TemplateRef, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { UNIQUE_SELECTION_DISPATCHER_PROVIDER, UniqueSelectionDispatcher } from '@angular/cdk/collections';
import { CdkAccordion, CdkAccordionItem, CdkAccordionModule } from '@angular/cdk/accordion';
import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
import { __extends } from 'tslib';
import * as tslib_1 from 'tslib';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Subject } from 'rxjs/Subject';
import { take } from 'rxjs/operators/take';
import { filter } from 'rxjs/operators/filter';
import { startWith } from 'rxjs/operators/startWith';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ENTER, SPACE } from '@angular/cdk/keycodes';
import { merge } from 'rxjs/observable/merge';
import { Subscription } from 'rxjs/Subscription';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Directive for a Material Design Accordion.
*/
var MatAccordion = /** @class */ (function (_super) {
__extends(MatAccordion, _super);
function MatAccordion() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._hideToggle = false;
/**
* The display mode used for all expansion panels in the accordion. Currently two display
* modes exist:
* default - a gutter-like spacing is placed around any expanded panel, placing the expanded
* panel at a different elevation from the reset of the accordion.
* flat - no spacing is placed around expanded panels, showing all panels at the same
* elevation.
*/
_this.displayMode = 'default';
return _this;
}
Object.defineProperty(MatAccordion.prototype, "hideToggle", {
get: /**
* Whether the expansion indicator should be hidden.
* @return {?}
*/
function () { return this._hideToggle; },
set: /**
* @param {?} show
* @return {?}
*/
function (show) { this._hideToggle = coerceBooleanProperty(show); },
enumerable: true,
configurable: true
});
MatAccordion.decorators = [
{ type: Directive, args: [{
selector: 'mat-accordion',
exportAs: 'matAccordion',
host: {
class: 'mat-accordion'
}
},] },
];
/** @nocollapse */
MatAccordion.ctorParameters = function () { return []; };
MatAccordion.propDecorators = {
"hideToggle": [{ type: Input },],
"displayMode": [{ type: Input },],
};
return MatAccordion;
}(CdkAccordion));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Expansion panel content that will be rendered lazily
* after the panel is opened for the first time.
*/
var MatExpansionPanelContent = /** @class */ (function () {
function MatExpansionPanelContent(_template) {
this._template = _template;
}
MatExpansionPanelContent.decorators = [
{ type: Directive, args: [{
selector: 'ng-template[matExpansionPanelContent]'
},] },
];
/** @nocollapse */
MatExpansionPanelContent.ctorParameters = function () { return [
{ type: TemplateRef, },
]; };
return MatExpansionPanelContent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Time and timing curve for expansion panel animations.
*/
var EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
/**
* Animations used by the Material expansion panel.
*/
var matExpansionAnimations = {
/** Animation that rotates the indicator arrow. */
indicatorRotate: trigger('indicatorRotate', [
state('collapsed', style({ transform: 'rotate(0deg)' })),
state('expanded', style({ transform: 'rotate(180deg)' })),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
/** Animation that expands and collapses the panel header height. */
expansionHeaderHeight: trigger('expansionHeight', [
state('collapsed', style({
height: '{{collapsedHeight}}',
}), {
params: { collapsedHeight: '48px' },
}),
state('expanded', style({
height: '{{expandedHeight}}'
}), {
params: { expandedHeight: '64px' }
}),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
/** Animation that expands and collapses the panel content. */
bodyExpansion: trigger('bodyExpansion', [
state('collapsed', style({ height: '0px', visibility: 'hidden' })),
state('expanded', style({ height: '*', visibility: 'visible' })),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Counter for generating unique element ids.
*/
var uniqueId = 0;
/**
* `<mat-expansion-panel>`
*
* This component can be used as a single element to show expandable content, or as one of
* multiple children of an element with the MdAccordion directive attached.
*/
var MatExpansionPanel = /** @class */ (function (_super) {
__extends(MatExpansionPanel, _super);
function MatExpansionPanel(accordion, _changeDetectorRef, _uniqueSelectionDispatcher, _viewContainerRef) {
var _this = _super.call(this, accordion, _changeDetectorRef, _uniqueSelectionDispatcher) || this;
_this._viewContainerRef = _viewContainerRef;
_this._hideToggle = false;
/**
* Stream that emits for changes in `\@Input` properties.
*/
_this._inputChanges = new Subject();
/**
* ID for the associated header element. Used for a11y labelling.
*/
_this._headerId = "mat-expansion-panel-header-" + uniqueId++;
_this.accordion = accordion;
return _this;
}
Object.defineProperty(MatExpansionPanel.prototype, "hideToggle", {
get: /**
* Whether the toggle indicator should be hidden.
* @return {?}
*/
function () { return this._hideToggle; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._hideToggle = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/** Whether the expansion indicator should be hidden. */
/**
* Whether the expansion indicator should be hidden.
* @return {?}
*/
MatExpansionPanel.prototype._getHideToggle = /**
* Whether the expansion indicator should be hidden.
* @return {?}
*/
function () {
if (this.accordion) {
return this.accordion.hideToggle;
}
return this.hideToggle;
};
/** Determines whether the expansion panel should have spacing between it and its siblings. */
/**
* Determines whether the expansion panel should have spacing between it and its siblings.
* @return {?}
*/
MatExpansionPanel.prototype._hasSpacing = /**
* Determines whether the expansion panel should have spacing between it and its siblings.
* @return {?}
*/
function () {
if (this.accordion) {
return (this.expanded ? this.accordion.displayMode : this._getExpandedState()) === 'default';
}
return false;
};
/** Gets the expanded state string. */
/**
* Gets the expanded state string.
* @return {?}
*/
MatExpansionPanel.prototype._getExpandedState = /**
* Gets the expanded state string.
* @return {?}
*/
function () {
return this.expanded ? 'expanded' : 'collapsed';
};
/**
* @return {?}
*/
MatExpansionPanel.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._lazyContent) {
// Render the content as soon as the panel becomes open.
this.opened.pipe(startWith(/** @type {?} */ ((null))), filter(function () { return _this.expanded && !_this._portal; }), take(1)).subscribe(function () {
_this._portal = new TemplatePortal(_this._lazyContent._template, _this._viewContainerRef);
});
}
};
/**
* @param {?} changes
* @return {?}
*/
MatExpansionPanel.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
this._inputChanges.next(changes);
};
/**
* @return {?}
*/
MatExpansionPanel.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
_super.prototype.ngOnDestroy.call(this);
this._inputChanges.complete();
};
/**
* @param {?} event
* @return {?}
*/
MatExpansionPanel.prototype._bodyAnimation = /**
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ classList = event.element.classList;
var /** @type {?} */ cssClass = 'mat-expanded';
var phaseName = event.phaseName, toState = event.toState;
// Toggle the body's `overflow: hidden` class when closing starts or when expansion ends in
// order to prevent the cases where switching too early would cause the animation to jump.
// Note that we do it directly on the DOM element to avoid the slight delay that comes
// with doing it via change detection.
if (phaseName === 'done' && toState === 'expanded') {
classList.add(cssClass);
}
else if (phaseName === 'start' && toState === 'collapsed') {
classList.remove(cssClass);
}
};
MatExpansionPanel.decorators = [
{ type: Component, args: [{styles: [".mat-expansion-panel{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);box-sizing:content-box;display:block;margin:0;transition:margin 225ms cubic-bezier(.4,0,.2,1)}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-expansion-panel-content{overflow:hidden}.mat-expansion-panel-content.mat-expanded{overflow:visible}.mat-expansion-panel-body{padding:0 24px 16px}.mat-expansion-panel-spacing{margin:16px 0}.mat-accordion .mat-expansion-panel-spacing:first-child{margin-top:0}.mat-accordion .mat-expansion-panel-spacing:last-child{margin-bottom:0}.mat-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.mat-action-row button.mat-button{margin-left:8px}[dir=rtl] .mat-action-row button.mat-button{margin-left:0;margin-right:8px}"],
selector: 'mat-expansion-panel',
exportAs: 'matExpansionPanel',
template: "<ng-content select=\"mat-expansion-panel-header\"></ng-content><div class=\"mat-expansion-panel-content\" role=\"region\" [@bodyExpansion]=\"_getExpandedState()\" (@bodyExpansion.done)=\"_bodyAnimation($event)\" (@bodyExpansion.start)=\"_bodyAnimation($event)\" [class.mat-expanded]=\"expanded\" [attr.aria-labelledby]=\"_headerId\" [id]=\"id\" #body><div class=\"mat-expansion-panel-body\"><ng-content></ng-content><ng-template [cdkPortalOutlet]=\"_portal\"></ng-template></div><ng-content select=\"mat-action-row\"></ng-content></div>",
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
inputs: ['disabled', 'expanded'],
outputs: ['opened', 'closed', 'expandedChange'],
animations: [matExpansionAnimations.bodyExpansion],
host: {
'class': 'mat-expansion-panel',
'[class.mat-expanded]': 'expanded',
'[class.mat-expansion-panel-spacing]': '_hasSpacing()',
}
},] },
];
/** @nocollapse */
MatExpansionPanel.ctorParameters = function () { return [
{ type: MatAccordion, decorators: [{ type: Optional }, { type: Host },] },
{ type: ChangeDetectorRef, },
{ type: UniqueSelectionDispatcher, },
{ type: ViewContainerRef, },
]; };
MatExpansionPanel.propDecorators = {
"hideToggle": [{ type: Input },],
"_lazyContent": [{ type: ContentChild, args: [MatExpansionPanelContent,] },],
};
return MatExpansionPanel;
}(CdkAccordionItem));
var MatExpansionPanelActionRow = /** @class */ (function () {
function MatExpansionPanelActionRow() {
}
MatExpansionPanelActionRow.decorators = [
{ type: Directive, args: [{
selector: 'mat-action-row',
host: {
class: 'mat-action-row'
}
},] },
];
/** @nocollapse */
MatExpansionPanelActionRow.ctorParameters = function () { return []; };
return MatExpansionPanelActionRow;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* `<mat-expansion-panel-header>`
*
* This component corresponds to the header element of an `<mat-expansion-panel>`.
*/
var MatExpansionPanelHeader = /** @class */ (function () {
function MatExpansionPanelHeader(panel, _element, _focusMonitor, _changeDetectorRef) {
var _this = this;
this.panel = panel;
this._element = _element;
this._focusMonitor = _focusMonitor;
this._changeDetectorRef = _changeDetectorRef;
this._parentChangeSubscription = Subscription.EMPTY;
// Since the toggle state depends on an @Input on the panel, we
// need to subscribe and trigger change detection manually.
this._parentChangeSubscription = merge(panel.opened, panel.closed, panel._inputChanges.pipe(filter(function (changes) { return !!(changes["hideToggle"] || changes["disabled"]); })))
.subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
_focusMonitor.monitor(_element.nativeElement);
}
/** Toggles the expanded state of the panel. */
/**
* Toggles the expanded state of the panel.
* @return {?}
*/
MatExpansionPanelHeader.prototype._toggle = /**
* Toggles the expanded state of the panel.
* @return {?}
*/
function () {
this.panel.toggle();
};
/** Gets whether the panel is expanded. */
/**
* Gets whether the panel is expanded.
* @return {?}
*/
MatExpansionPanelHeader.prototype._isExpanded = /**
* Gets whether the panel is expanded.
* @return {?}
*/
function () {
return this.panel.expanded;
};
/** Gets the expanded state string of the panel. */
/**
* Gets the expanded state string of the panel.
* @return {?}
*/
MatExpansionPanelHeader.prototype._getExpandedState = /**
* Gets the expanded state string of the panel.
* @return {?}
*/
function () {
return this.panel._getExpandedState();
};
/** Gets the panel id. */
/**
* Gets the panel id.
* @return {?}
*/
MatExpansionPanelHeader.prototype._getPanelId = /**
* Gets the panel id.
* @return {?}
*/
function () {
return this.panel.id;
};
/** Gets whether the expand indicator should be shown. */
/**
* Gets whether the expand indicator should be shown.
* @return {?}
*/
MatExpansionPanelHeader.prototype._showToggle = /**
* Gets whether the expand indicator should be shown.
* @return {?}
*/
function () {
return !this.panel.hideToggle && !this.panel.disabled;
};
/** Handle keydown event calling to toggle() if appropriate. */
/**
* Handle keydown event calling to toggle() if appropriate.
* @param {?} event
* @return {?}
*/
MatExpansionPanelHeader.prototype._keydown = /**
* Handle keydown event calling to toggle() if appropriate.
* @param {?} event
* @return {?}
*/
function (event) {
switch (event.keyCode) {
// Toggle for space and enter keys.
case SPACE:
case ENTER:
event.preventDefault();
this._toggle();
break;
default:
return;
}
};
/**
* @return {?}
*/
MatExpansionPanelHeader.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._parentChangeSubscription.unsubscribe();
this._focusMonitor.stopMonitoring(this._element.nativeElement);
};
MatExpansionPanelHeader.decorators = [
{ type: Component, args: [{selector: 'mat-expansion-panel-header',
styles: [".mat-expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px}.mat-expansion-panel-header:focus,.mat-expansion-panel-header:hover{outline:0}.mat-expansion-panel-header.mat-expanded:focus,.mat-expansion-panel-header.mat-expanded:hover{background:inherit}.mat-expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.mat-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.mat-expansion-panel-header-description,.mat-expansion-panel-header-title{display:flex;flex-grow:1;margin-right:16px}[dir=rtl] .mat-expansion-panel-header-description,[dir=rtl] .mat-expansion-panel-header-title{margin-right:0;margin-left:16px}.mat-expansion-panel-header-description{flex-grow:2}.mat-expansion-indicator::after{border-style:solid;border-width:0 2px 2px 0;content:'';display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}"],
template: "<span class=\"mat-content\"><ng-content select=\"mat-panel-title\"></ng-content><ng-content select=\"mat-panel-description\"></ng-content><ng-content></ng-content></span><span [@indicatorRotate]=\"_getExpandedState()\" *ngIf=\"_showToggle()\" class=\"mat-expansion-indicator\"></span>",
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
matExpansionAnimations.indicatorRotate,
matExpansionAnimations.expansionHeaderHeight
],
host: {
'class': 'mat-expansion-panel-header',
'role': 'button',
'[attr.id]': 'panel._headerId',
'[attr.tabindex]': 'panel.disabled ? -1 : 0',
'[attr.aria-controls]': '_getPanelId()',
'[attr.aria-expanded]': '_isExpanded()',
'[attr.aria-disabled]': 'panel.disabled',
'[class.mat-expanded]': '_isExpanded()',
'(click)': '_toggle()',
'(keydown)': '_keydown($event)',
'[@expansionHeight]': "{\n value: _getExpandedState(),\n params: {\n collapsedHeight: collapsedHeight,\n expandedHeight: expandedHeight\n }\n }",
},
},] },
];
/** @nocollapse */
MatExpansionPanelHeader.ctorParameters = function () { return [
{ type: MatExpansionPanel, decorators: [{ type: Host },] },
{ type: ElementRef, },
{ type: FocusMonitor, },
{ type: ChangeDetectorRef, },
]; };
MatExpansionPanelHeader.propDecorators = {
"expandedHeight": [{ type: Input },],
"collapsedHeight": [{ type: Input },],
};
return MatExpansionPanelHeader;
}());
/**
* `<mat-panel-description>`
*
* This direction is to be used inside of the MatExpansionPanelHeader component.
*/
var MatExpansionPanelDescription = /** @class */ (function () {
function MatExpansionPanelDescription() {
}
MatExpansionPanelDescription.decorators = [
{ type: Directive, args: [{
selector: 'mat-panel-description',
host: {
class: 'mat-expansion-panel-header-description'
}
},] },
];
/** @nocollapse */
MatExpansionPanelDescription.ctorParameters = function () { return []; };
return MatExpansionPanelDescription;
}());
/**
* `<mat-panel-title>`
*
* This direction is to be used inside of the MatExpansionPanelHeader component.
*/
var MatExpansionPanelTitle = /** @class */ (function () {
function MatExpansionPanelTitle() {
}
MatExpansionPanelTitle.decorators = [
{ type: Directive, args: [{
selector: 'mat-panel-title',
host: {
class: 'mat-expansion-panel-header-title'
}
},] },
];
/** @nocollapse */
MatExpansionPanelTitle.ctorParameters = function () { return []; };
return MatExpansionPanelTitle;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatExpansionModule = /** @class */ (function () {
function MatExpansionModule() {
}
MatExpansionModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, A11yModule, CdkAccordionModule, PortalModule],
exports: [
MatAccordion,
MatExpansionPanel,
MatExpansionPanelActionRow,
MatExpansionPanelHeader,
MatExpansionPanelTitle,
MatExpansionPanelDescription,
MatExpansionPanelContent,
],
declarations: [
MatAccordion,
MatExpansionPanel,
MatExpansionPanelActionRow,
MatExpansionPanelHeader,
MatExpansionPanelTitle,
MatExpansionPanelDescription,
MatExpansionPanelContent,
],
providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
},] },
];
/** @nocollapse */
MatExpansionModule.ctorParameters = function () { return []; };
return MatExpansionModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { MatExpansionModule, MatAccordion, MatExpansionPanel, MatExpansionPanelActionRow, MatExpansionPanelHeader, MatExpansionPanelDescription, MatExpansionPanelTitle, MatExpansionPanelContent, EXPANSION_PANEL_ANIMATION_TIMING, matExpansionAnimations };
//# sourceMappingURL=expansion.es5.js.map