/** * @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 { __extends } from 'tslib'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { Directive, EventEmitter, Input, isDevMode, Output, Injectable, SkipSelf, Optional, NgModule, ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewEncapsulation, Inject, ɵɵdefineInjectable } from '@angular/core'; import { mixinDisabled, mixinInitialized, AnimationCurves, AnimationDurations } from '@angular/material/core'; import { Subject, merge } from 'rxjs'; import { animate, state, style, transition, trigger, keyframes, query, animateChild } from '@angular/animations'; import { CommonModule } from '@angular/common'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * \@docs-private * @param {?} id * @return {?} */ function getSortDuplicateSortableIdError(id) { return Error("Cannot have two MatSortables with the same id (" + id + ")."); } /** * \@docs-private * @return {?} */ function getSortHeaderNotContainedWithinSortError() { return Error("MatSortHeader must be placed within a parent element with the MatSort directive."); } /** * \@docs-private * @return {?} */ function getSortHeaderMissingIdError() { return Error("MatSortHeader must be provided with a unique id."); } /** * \@docs-private * @param {?} direction * @return {?} */ function getSortInvalidDirectionError(direction) { return Error(direction + " is not a valid sort direction ('asc' or 'desc')."); } /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ // Boilerplate for applying mixins to MatSort. /** * \@docs-private */ var // Boilerplate for applying mixins to MatSort. /** * \@docs-private */ MatSortBase = /** @class */ (function () { function MatSortBase() { } return MatSortBase; }()); /** @type {?} */ var _MatSortMixinBase = mixinInitialized(mixinDisabled(MatSortBase)); /** * Container for MatSortables to manage the sort state and provide default sort parameters. */ var MatSort = /** @class */ (function (_super) { __extends(MatSort, _super); function MatSort() { var _this = _super !== null && _super.apply(this, arguments) || this; /** * Collection of all registered sortables that this directive manages. */ _this.sortables = new Map(); /** * Used to notify any child components listening to state changes. */ _this._stateChanges = new Subject(); /** * The direction to set when an MatSortable is initially sorted. * May be overriden by the MatSortable's sort start. */ _this.start = 'asc'; _this._direction = ''; /** * Event emitted when the user changes either the active sort or sort direction. */ _this.sortChange = new EventEmitter(); return _this; } Object.defineProperty(MatSort.prototype, "direction", { /** The sort direction of the currently active MatSortable. */ get: /** * The sort direction of the currently active MatSortable. * @return {?} */ function () { return this._direction; }, set: /** * @param {?} direction * @return {?} */ function (direction) { if (isDevMode() && direction && direction !== 'asc' && direction !== 'desc') { throw getSortInvalidDirectionError(direction); } this._direction = direction; }, enumerable: true, configurable: true }); Object.defineProperty(MatSort.prototype, "disableClear", { /** * Whether to disable the user from clearing the sort by finishing the sort direction cycle. * May be overriden by the MatSortable's disable clear input. */ get: /** * Whether to disable the user from clearing the sort by finishing the sort direction cycle. * May be overriden by the MatSortable's disable clear input. * @return {?} */ function () { return this._disableClear; }, set: /** * @param {?} v * @return {?} */ function (v) { this._disableClear = coerceBooleanProperty(v); }, enumerable: true, configurable: true }); /** * Register function to be used by the contained MatSortables. Adds the MatSortable to the * collection of MatSortables. */ /** * Register function to be used by the contained MatSortables. Adds the MatSortable to the * collection of MatSortables. * @param {?} sortable * @return {?} */ MatSort.prototype.register = /** * Register function to be used by the contained MatSortables. Adds the MatSortable to the * collection of MatSortables. * @param {?} sortable * @return {?} */ function (sortable) { if (!sortable.id) { throw getSortHeaderMissingIdError(); } if (this.sortables.has(sortable.id)) { throw getSortDuplicateSortableIdError(sortable.id); } this.sortables.set(sortable.id, sortable); }; /** * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the * collection of contained MatSortables. */ /** * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the * collection of contained MatSortables. * @param {?} sortable * @return {?} */ MatSort.prototype.deregister = /** * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the * collection of contained MatSortables. * @param {?} sortable * @return {?} */ function (sortable) { this.sortables.delete(sortable.id); }; /** Sets the active sort id and determines the new sort direction. */ /** * Sets the active sort id and determines the new sort direction. * @param {?} sortable * @return {?} */ MatSort.prototype.sort = /** * Sets the active sort id and determines the new sort direction. * @param {?} sortable * @return {?} */ function (sortable) { if (this.active != sortable.id) { this.active = sortable.id; this.direction = sortable.start ? sortable.start : this.start; } else { this.direction = this.getNextSortDirection(sortable); } this.sortChange.emit({ active: this.active, direction: this.direction }); }; /** Returns the next sort direction of the active sortable, checking for potential overrides. */ /** * Returns the next sort direction of the active sortable, checking for potential overrides. * @param {?} sortable * @return {?} */ MatSort.prototype.getNextSortDirection = /** * Returns the next sort direction of the active sortable, checking for potential overrides. * @param {?} sortable * @return {?} */ function (sortable) { if (!sortable) { return ''; } // Get the sort direction cycle with the potential sortable overrides. /** @type {?} */ var disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear; /** @type {?} */ var sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear); // Get and return the next direction in the cycle /** @type {?} */ var nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1; if (nextDirectionIndex >= sortDirectionCycle.length) { nextDirectionIndex = 0; } return sortDirectionCycle[nextDirectionIndex]; }; /** * @return {?} */ MatSort.prototype.ngOnInit = /** * @return {?} */ function () { this._markInitialized(); }; /** * @return {?} */ MatSort.prototype.ngOnChanges = /** * @return {?} */ function () { this._stateChanges.next(); }; /** * @return {?} */ MatSort.prototype.ngOnDestroy = /** * @return {?} */ function () { this._stateChanges.complete(); }; MatSort.decorators = [ { type: Directive, args: [{ selector: '[matSort]', exportAs: 'matSort', inputs: ['disabled: matSortDisabled'] },] }, ]; MatSort.propDecorators = { active: [{ type: Input, args: ['matSortActive',] }], start: [{ type: Input, args: ['matSortStart',] }], direction: [{ type: Input, args: ['matSortDirection',] }], disableClear: [{ type: Input, args: ['matSortDisableClear',] }], sortChange: [{ type: Output, args: ['matSortChange',] }] }; return MatSort; }(_MatSortMixinBase)); /** * Returns the sort direction cycle to use given the provided parameters of order and clear. * @param {?} start * @param {?} disableClear * @return {?} */ function getSortDirectionCycle(start, disableClear) { /** @type {?} */ var sortOrder = ['asc', 'desc']; if (start == 'desc') { sortOrder.reverse(); } if (!disableClear) { sortOrder.push(''); } return sortOrder; } /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE; /** * Animations used by MatSort. * \@docs-private * @type {?} */ var matSortAnimations = { /** * Animation that moves the sort indicator. */ indicator: trigger('indicator', [ state('active-asc, asc', style({ transform: 'translateY(0px)' })), // 10px is the height of the sort indicator, minus the width of the pointers state('active-desc, desc', style({ transform: 'translateY(10px)' })), transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)) ]), /** * Animation that rotates the left pointer of the indicator based on the sorting direction. */ leftPointer: trigger('leftPointer', [ state('active-asc, asc', style({ transform: 'rotate(-45deg)' })), state('active-desc, desc', style({ transform: 'rotate(45deg)' })), transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)) ]), /** * Animation that rotates the right pointer of the indicator based on the sorting direction. */ rightPointer: trigger('rightPointer', [ state('active-asc, asc', style({ transform: 'rotate(45deg)' })), state('active-desc, desc', style({ transform: 'rotate(-45deg)' })), transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)) ]), /** * Animation that controls the arrow opacity. */ arrowOpacity: trigger('arrowOpacity', [ state('desc-to-active, asc-to-active, active', style({ opacity: 1 })), state('desc-to-hint, asc-to-hint, hint', style({ opacity: .54 })), state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', style({ opacity: 0 })), // Transition between all states except for immediate transitions transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')), transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)), ]), /** * Animation for the translation of the arrow as a whole. States are separated into two * groups: ones with animations and others that are immediate. Immediate states are asc, desc, * peek, and active. The other states define a specific animation (source-to-destination) * and are determined as a function of their prev user-perceived state and what the next state * should be. */ arrowPosition: trigger('arrowPosition', [ // Hidden Above => Hint Center transition('* => desc-to-hint, * => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([ style({ transform: 'translateY(-25%)' }), style({ transform: 'translateY(0)' }) ]))), // Hint Center => Hidden Below transition('* => hint-to-desc, * => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([ style({ transform: 'translateY(0)' }), style({ transform: 'translateY(25%)' }) ]))), // Hidden Below => Hint Center transition('* => asc-to-hint, * => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([ style({ transform: 'translateY(25%)' }), style({ transform: 'translateY(0)' }) ]))), // Hint Center => Hidden Above transition('* => hint-to-asc, * => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([ style({ transform: 'translateY(0)' }), style({ transform: 'translateY(-25%)' }) ]))), state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', style({ transform: 'translateY(0)' })), state('hint-to-desc, active-to-desc, desc', style({ transform: 'translateY(-25%)' })), state('hint-to-asc, active-to-asc, asc', style({ transform: 'translateY(25%)' })), ]), /** * Necessary trigger that calls animate on children animations. */ allowChildren: trigger('allowChildren', [ transition('* <=> *', [ query('@*', animateChild(), { optional: true }) ]) ]), }; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and * include it in a custom provider. */ var MatSortHeaderIntl = /** @class */ (function () { function MatSortHeaderIntl() { /** * Stream that emits whenever the labels here are changed. Use this to notify * components if the labels have changed after initialization. */ this.changes = new Subject(); /** * ARIA label for the sorting button. */ this.sortButtonLabel = (/** * @param {?} id * @return {?} */ function (id) { return "Change sorting for " + id; }); } MatSortHeaderIntl.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] }, ]; /** @nocollapse */ MatSortHeaderIntl.ngInjectableDef = ɵɵdefineInjectable({ factory: function MatSortHeaderIntl_Factory() { return new MatSortHeaderIntl(); }, token: MatSortHeaderIntl, providedIn: "root" }); return MatSortHeaderIntl; }()); /** * \@docs-private * @param {?} parentIntl * @return {?} */ function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) { return parentIntl || new MatSortHeaderIntl(); } /** * \@docs-private * @type {?} */ var MAT_SORT_HEADER_INTL_PROVIDER = { // If there is already an MatSortHeaderIntl available, use that. Otherwise, provide a new one. provide: MatSortHeaderIntl, deps: [[new Optional(), new SkipSelf(), MatSortHeaderIntl]], useFactory: MAT_SORT_HEADER_INTL_PROVIDER_FACTORY }; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ // Boilerplate for applying mixins to the sort header. /** * \@docs-private */ var // Boilerplate for applying mixins to the sort header. /** * \@docs-private */ MatSortHeaderBase = /** @class */ (function () { function MatSortHeaderBase() { } return MatSortHeaderBase; }()); /** @type {?} */ var _MatSortHeaderMixinBase = mixinDisabled(MatSortHeaderBase); /** * Applies sorting behavior (click to change sort) and styles to an element, including an * arrow to display the current sort direction. * * Must be provided with an id and contained within a parent MatSort directive. * * If used on header cells in a CdkTable, it will automatically default its id from its containing * column definition. */ var MatSortHeader = /** @class */ (function (_super) { __extends(MatSortHeader, _super); function MatSortHeader(_intl, changeDetectorRef, _sort, _columnDef) { var _this = // Note that we use a string token for the `_columnDef`, because the value is provided both by // `material/table` and `cdk/table` and we can't have the CDK depending on Material, // and we want to avoid having the sort header depending on the CDK table because // of this single reference. _super.call(this) || this; _this._intl = _intl; _this._sort = _sort; _this._columnDef = _columnDef; /** * Flag set to true when the indicator should be displayed while the sort is not active. Used to * provide an affordance that the header is sortable by showing on focus and hover. */ _this._showIndicatorHint = false; /** * The direction the arrow should be facing according to the current state. */ _this._arrowDirection = ''; /** * Whether the view state animation should show the transition between the `from` and `to` states. */ _this._disableViewStateAnimation = false; /** * Sets the position of the arrow that displays when sorted. */ _this.arrowPosition = 'after'; if (!_sort) { throw getSortHeaderNotContainedWithinSortError(); } _this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges, _intl.changes) .subscribe((/** * @return {?} */ function () { if (_this._isSorted()) { _this._updateArrowDirection(); } // If this header was recently active and now no longer sorted, animate away the arrow. if (!_this._isSorted() && _this._viewState && _this._viewState.toState === 'active') { _this._disableViewStateAnimation = false; _this._setAnimationTransitionState({ fromState: 'active', toState: _this._arrowDirection }); } changeDetectorRef.markForCheck(); })); return _this; } Object.defineProperty(MatSortHeader.prototype, "disableClear", { /** Overrides the disable clear value of the containing MatSort for this MatSortable. */ get: /** * Overrides the disable clear value of the containing MatSort for this MatSortable. * @return {?} */ function () { return this._disableClear; }, set: /** * @param {?} v * @return {?} */ function (v) { this._disableClear = coerceBooleanProperty(v); }, enumerable: true, configurable: true }); /** * @return {?} */ MatSortHeader.prototype.ngOnInit = /** * @return {?} */ function () { if (!this.id && this._columnDef) { this.id = this._columnDef.name; } // Initialize the direction of the arrow and set the view state to be immediately that state. this._updateArrowDirection(); this._setAnimationTransitionState({ toState: this._isSorted() ? 'active' : this._arrowDirection }); this._sort.register(this); }; /** * @return {?} */ MatSortHeader.prototype.ngOnDestroy = /** * @return {?} */ function () { this._sort.deregister(this); this._rerenderSubscription.unsubscribe(); }; /** * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the * user showing what the active sort will become. If set to false, the arrow will fade away. */ /** * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the * user showing what the active sort will become. If set to false, the arrow will fade away. * @param {?} visible * @return {?} */ MatSortHeader.prototype._setIndicatorHintVisible = /** * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the * user showing what the active sort will become. If set to false, the arrow will fade away. * @param {?} visible * @return {?} */ function (visible) { // No-op if the sort header is disabled - should not make the hint visible. if (this._isDisabled() && visible) { return; } this._showIndicatorHint = visible; if (!this._isSorted()) { this._updateArrowDirection(); if (this._showIndicatorHint) { this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' }); } else { this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection }); } } }; /** * Sets the animation transition view state for the arrow's position and opacity. If the * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that * no animation appears. */ /** * Sets the animation transition view state for the arrow's position and opacity. If the * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that * no animation appears. * @param {?} viewState * @return {?} */ MatSortHeader.prototype._setAnimationTransitionState = /** * Sets the animation transition view state for the arrow's position and opacity. If the * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that * no animation appears. * @param {?} viewState * @return {?} */ function (viewState) { this._viewState = viewState; // If the animation for arrow position state (opacity/translation) should be disabled, // remove the fromState so that it jumps right to the toState. if (this._disableViewStateAnimation) { this._viewState = { toState: viewState.toState }; } }; /** Triggers the sort on this sort header and removes the indicator hint. */ /** * Triggers the sort on this sort header and removes the indicator hint. * @return {?} */ MatSortHeader.prototype._handleClick = /** * Triggers the sort on this sort header and removes the indicator hint. * @return {?} */ function () { if (this._isDisabled()) { return; } this._sort.sort(this); // Do not show the animation if the header was already shown in the right position. if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') { this._disableViewStateAnimation = true; } // If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into // the direction it is facing. /** @type {?} */ var viewState = this._isSorted() ? { fromState: this._arrowDirection, toState: 'active' } : { fromState: 'active', toState: this._arrowDirection }; this._setAnimationTransitionState(viewState); this._showIndicatorHint = false; }; /** Whether this MatSortHeader is currently sorted in either ascending or descending order. */ /** * Whether this MatSortHeader is currently sorted in either ascending or descending order. * @return {?} */ MatSortHeader.prototype._isSorted = /** * Whether this MatSortHeader is currently sorted in either ascending or descending order. * @return {?} */ function () { return this._sort.active == this.id && (this._sort.direction === 'asc' || this._sort.direction === 'desc'); }; /** Returns the animation state for the arrow direction (indicator and pointers). */ /** * Returns the animation state for the arrow direction (indicator and pointers). * @return {?} */ MatSortHeader.prototype._getArrowDirectionState = /** * Returns the animation state for the arrow direction (indicator and pointers). * @return {?} */ function () { return "" + (this._isSorted() ? 'active-' : '') + this._arrowDirection; }; /** Returns the arrow position state (opacity, translation). */ /** * Returns the arrow position state (opacity, translation). * @return {?} */ MatSortHeader.prototype._getArrowViewState = /** * Returns the arrow position state (opacity, translation). * @return {?} */ function () { /** @type {?} */ var fromState = this._viewState.fromState; return (fromState ? fromState + "-to-" : '') + this._viewState.toState; }; /** * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently * active sorted direction. The reason this is updated through a function is because the direction * should only be changed at specific times - when deactivated but the hint is displayed and when * the sort is active and the direction changes. Otherwise the arrow's direction should linger * in cases such as the sort becoming deactivated but we want to animate the arrow away while * preserving its direction, even though the next sort direction is actually different and should * only be changed once the arrow displays again (hint or activation). */ /** * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently * active sorted direction. The reason this is updated through a function is because the direction * should only be changed at specific times - when deactivated but the hint is displayed and when * the sort is active and the direction changes. Otherwise the arrow's direction should linger * in cases such as the sort becoming deactivated but we want to animate the arrow away while * preserving its direction, even though the next sort direction is actually different and should * only be changed once the arrow displays again (hint or activation). * @return {?} */ MatSortHeader.prototype._updateArrowDirection = /** * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently * active sorted direction. The reason this is updated through a function is because the direction * should only be changed at specific times - when deactivated but the hint is displayed and when * the sort is active and the direction changes. Otherwise the arrow's direction should linger * in cases such as the sort becoming deactivated but we want to animate the arrow away while * preserving its direction, even though the next sort direction is actually different and should * only be changed once the arrow displays again (hint or activation). * @return {?} */ function () { this._arrowDirection = this._isSorted() ? this._sort.direction : (this.start || this._sort.start); }; /** * @return {?} */ MatSortHeader.prototype._isDisabled = /** * @return {?} */ function () { return this._sort.disabled || this.disabled; }; /** * Gets the aria-sort attribute that should be applied to this sort header. If this header * is not sorted, returns null so that the attribute is removed from the host element. Aria spec * says that the aria-sort property should only be present on one header at a time, so removing * ensures this is true. */ /** * Gets the aria-sort attribute that should be applied to this sort header. If this header * is not sorted, returns null so that the attribute is removed from the host element. Aria spec * says that the aria-sort property should only be present on one header at a time, so removing * ensures this is true. * @return {?} */ MatSortHeader.prototype._getAriaSortAttribute = /** * Gets the aria-sort attribute that should be applied to this sort header. If this header * is not sorted, returns null so that the attribute is removed from the host element. Aria spec * says that the aria-sort property should only be present on one header at a time, so removing * ensures this is true. * @return {?} */ function () { if (!this._isSorted()) { return null; } return this._sort.direction == 'asc' ? 'ascending' : 'descending'; }; /** Whether the arrow inside the sort header should be rendered. */ /** * Whether the arrow inside the sort header should be rendered. * @return {?} */ MatSortHeader.prototype._renderArrow = /** * Whether the arrow inside the sort header should be rendered. * @return {?} */ function () { return !this._isDisabled() || this._isSorted(); }; MatSortHeader.decorators = [ { type: Component, args: [{selector: '[mat-sort-header]', exportAs: 'matSortHeader', template: "