import * as i0 from '@angular/core'; import { InjectionToken, EventEmitter, Directive, Optional, Inject, Input, Output, Injectable, SkipSelf, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core'; import * as i3 from '@angular/cdk/a11y'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { SPACE, ENTER } from '@angular/cdk/keycodes'; import { mixinInitialized, mixinDisabled, AnimationDurations, AnimationCurves, MatCommonModule } from '@angular/material/core'; import { Subject, merge } from 'rxjs'; import { trigger, state, style, transition, animate, keyframes, query, animateChild } from '@angular/animations'; import * as i4 from '@angular/common'; import { CommonModule } from '@angular/common'; /** @docs-private */ function getSortDuplicateSortableIdError(id) { return Error(`Cannot have two MatSortables with the same id (${id}).`); } /** @docs-private */ function getSortHeaderNotContainedWithinSortError() { return Error(`MatSortHeader must be placed within a parent element with the MatSort directive.`); } /** @docs-private */ function getSortHeaderMissingIdError() { return Error(`MatSortHeader must be provided with a unique id.`); } /** @docs-private */ function getSortInvalidDirectionError(direction) { return Error(`${direction} is not a valid sort direction ('asc' or 'desc').`); } /** Injection token to be used to override the default options for `mat-sort`. */ const MAT_SORT_DEFAULT_OPTIONS = new InjectionToken('MAT_SORT_DEFAULT_OPTIONS'); // Boilerplate for applying mixins to MatSort. /** @docs-private */ const _MatSortBase = mixinInitialized(mixinDisabled(class { })); /** Container for MatSortables to manage the sort state and provide default sort parameters. */ class MatSort extends _MatSortBase { /** The sort direction of the currently active MatSortable. */ get direction() { return this._direction; } set direction(direction) { if (direction && direction !== 'asc' && direction !== 'desc' && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw getSortInvalidDirectionError(direction); } this._direction = direction; } /** * Whether to disable the user from clearing the sort by finishing the sort direction cycle. * May be overridden by the MatSortable's disable clear input. */ get disableClear() { return this._disableClear; } set disableClear(v) { this._disableClear = coerceBooleanProperty(v); } constructor(_defaultOptions) { super(); this._defaultOptions = _defaultOptions; /** 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 overridden 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(); } /** * Register function to be used by the contained MatSortables. Adds the MatSortable to the * collection of MatSortables. */ register(sortable) { if (typeof ngDevMode === 'undefined' || ngDevMode) { 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. */ deregister(sortable) { this.sortables.delete(sortable.id); } /** Sets the active sort id and determines the new sort direction. */ sort(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. */ getNextSortDirection(sortable) { if (!sortable) { return ''; } // Get the sort direction cycle with the potential sortable overrides. const disableClear = sortable?.disableClear ?? this.disableClear ?? !!this._defaultOptions?.disableClear; let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear); // Get and return the next direction in the cycle let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1; if (nextDirectionIndex >= sortDirectionCycle.length) { nextDirectionIndex = 0; } return sortDirectionCycle[nextDirectionIndex]; } ngOnInit() { this._markInitialized(); } ngOnChanges() { this._stateChanges.next(); } ngOnDestroy() { this._stateChanges.complete(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSort, deps: [{ token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatSort, selector: "[matSort]", inputs: { disabled: ["matSortDisabled", "disabled"], active: ["matSortActive", "active"], start: ["matSortStart", "start"], direction: ["matSortDirection", "direction"], disableClear: ["matSortDisableClear", "disableClear"] }, outputs: { sortChange: "matSortChange" }, host: { classAttribute: "mat-sort" }, exportAs: ["matSort"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSort, decorators: [{ type: Directive, args: [{ selector: '[matSort]', exportAs: 'matSort', host: { 'class': 'mat-sort', }, inputs: ['disabled: matSortDisabled'], }] }], ctorParameters: function () { return [{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_SORT_DEFAULT_OPTIONS] }] }]; }, 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'] }] } }); /** Returns the sort direction cycle to use given the provided parameters of order and clear. */ function getSortDirectionCycle(start, disableClear) { let sortOrder = ['asc', 'desc']; if (start == 'desc') { sortOrder.reverse(); } if (!disableClear) { sortOrder.push(''); } return sortOrder; } const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE; /** * Animations used by MatSort. * @docs-private */ const 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: 0.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 })]), ]), }; /** * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and * include it in a custom provider. */ class MatSortHeaderIntl { constructor() { /** * 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(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortHeaderIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortHeaderIntl, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortHeaderIntl, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }] }); /** @docs-private */ function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) { return parentIntl || new MatSortHeaderIntl(); } /** @docs-private */ const 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, }; // Boilerplate for applying mixins to the sort header. /** @docs-private */ const _MatSortHeaderBase = mixinDisabled(class { }); /** * 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. */ class MatSortHeader extends _MatSortHeaderBase { /** * Description applied to MatSortHeader's button element with aria-describedby. This text should * describe the action that will occur when the user clicks the sort header. */ get sortActionDescription() { return this._sortActionDescription; } set sortActionDescription(value) { this._updateSortActionDescription(value); } /** Overrides the disable clear value of the containing MatSort for this MatSortable. */ get disableClear() { return this._disableClear; } set disableClear(v) { this._disableClear = coerceBooleanProperty(v); } constructor( /** * @deprecated `_intl` parameter isn't being used anymore and it'll be removed. * @breaking-change 13.0.0 */ _intl, _changeDetectorRef, // `MatSort` is not optionally injected, but just asserted manually w/ better error. // tslint:disable-next-line: lightweight-tokens _sort, _columnDef, _focusMonitor, _elementRef, /** @breaking-change 14.0.0 _ariaDescriber will be required. */ _ariaDescriber, defaultOptions) { // 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(); this._intl = _intl; this._changeDetectorRef = _changeDetectorRef; this._sort = _sort; this._columnDef = _columnDef; this._focusMonitor = _focusMonitor; this._elementRef = _elementRef; this._ariaDescriber = _ariaDescriber; /** * 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 view transition state of the arrow (translation/ opacity) - indicates its `from` and `to` * position through the animation. If animations are currently disabled, the fromState is removed * so that there is no animation displayed. */ this._viewState = {}; /** 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'; // Default the action description to "Sort" because it's better than nothing. // Without a description, the button's label comes from the sort header text content, // which doesn't give any indication that it performs a sorting operation. this._sortActionDescription = 'Sort'; if (!_sort && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw getSortHeaderNotContainedWithinSortError(); } if (defaultOptions?.arrowPosition) { this.arrowPosition = defaultOptions?.arrowPosition; } this._handleStateChanges(); } ngOnInit() { 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); this._sortButton = this._elementRef.nativeElement.querySelector('.mat-sort-header-container'); this._updateSortActionDescription(this._sortActionDescription); } ngAfterViewInit() { // We use the focus monitor because we also want to style // things differently based on the focus origin. this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => { const newState = !!origin; if (newState !== this._showIndicatorHint) { this._setIndicatorHintVisible(newState); this._changeDetectorRef.markForCheck(); } }); } ngOnDestroy() { this._focusMonitor.stopMonitoring(this._elementRef); 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. */ _setIndicatorHintVisible(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. */ _setAnimationTransitionState(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. */ _toggleOnInteraction() { 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; } } _handleClick() { if (!this._isDisabled()) { this._sort.sort(this); } } _handleKeydown(event) { if (!this._isDisabled() && (event.keyCode === SPACE || event.keyCode === ENTER)) { event.preventDefault(); this._toggleOnInteraction(); } } /** Whether this MatSortHeader is currently sorted in either ascending or descending order. */ _isSorted() { 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). */ _getArrowDirectionState() { return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`; } /** Returns the arrow position state (opacity, translation). */ _getArrowViewState() { const 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). */ _updateArrowDirection() { this._arrowDirection = this._isSorted() ? this._sort.direction : this.start || this._sort.start; } _isDisabled() { 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. */ _getAriaSortAttribute() { if (!this._isSorted()) { return 'none'; } return this._sort.direction == 'asc' ? 'ascending' : 'descending'; } /** Whether the arrow inside the sort header should be rendered. */ _renderArrow() { return !this._isDisabled() || this._isSorted(); } _updateSortActionDescription(newDescription) { // We use AriaDescriber for the sort button instead of setting an `aria-label` because some // screen readers (notably VoiceOver) will read both the column header *and* the button's label // for every *cell* in the table, creating a lot of unnecessary noise. // If _sortButton is undefined, the component hasn't been initialized yet so there's // nothing to update in the DOM. if (this._sortButton) { // removeDescription will no-op if there is no existing message. // TODO(jelbourn): remove optional chaining when AriaDescriber is required. this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription); this._ariaDescriber?.describe(this._sortButton, newDescription); } this._sortActionDescription = newDescription; } /** Handles changes in the sorting state. */ _handleStateChanges() { this._rerenderSubscription = merge(this._sort.sortChange, this._sort._stateChanges, this._intl.changes).subscribe(() => { if (this._isSorted()) { this._updateArrowDirection(); // 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; } this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'active' }); this._showIndicatorHint = false; } // 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 }); } this._changeDetectorRef.markForCheck(); }); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortHeader, deps: [{ token: MatSortHeaderIntl }, { token: i0.ChangeDetectorRef }, { token: MatSort, optional: true }, { token: 'MAT_SORT_HEADER_COLUMN_DEF', optional: true }, { token: i3.FocusMonitor }, { token: i0.ElementRef }, { token: i3.AriaDescriber, optional: true }, { token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatSortHeader, selector: "[mat-sort-header]", inputs: { disabled: "disabled", id: ["mat-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortActionDescription: "sortActionDescription", disableClear: "disableClear" }, host: { listeners: { "click": "_handleClick()", "keydown": "_handleKeydown($event)", "mouseenter": "_setIndicatorHintVisible(true)", "mouseleave": "_setIndicatorHintVisible(false)" }, properties: { "attr.aria-sort": "_getAriaSortAttribute()", "class.mat-sort-header-disabled": "_isDisabled()" }, classAttribute: "mat-sort-header" }, exportAs: ["matSortHeader"], usesInheritance: true, ngImport: i0, template: "\n
\n\n \n
\n \n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n", styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-sort-header-content{text-align:center;display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}.mat-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}.cdk-high-contrast-active .mat-sort-header-stem{width:0;border-left:solid 2px}.mat-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.mat-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}.cdk-high-contrast-active .mat-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}.cdk-high-contrast-active .mat-sort-header-pointer-left,.cdk-high-contrast-active .mat-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}.mat-sort-header-pointer-left{transform-origin:right;left:0}.mat-sort-header-pointer-right{transform-origin:left;right:0}"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [ matSortAnimations.indicator, matSortAnimations.leftPointer, matSortAnimations.rightPointer, matSortAnimations.arrowOpacity, matSortAnimations.arrowPosition, matSortAnimations.allowChildren, ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortHeader, decorators: [{ type: Component, args: [{ selector: '[mat-sort-header]', exportAs: 'matSortHeader', host: { 'class': 'mat-sort-header', '(click)': '_handleClick()', '(keydown)': '_handleKeydown($event)', '(mouseenter)': '_setIndicatorHintVisible(true)', '(mouseleave)': '_setIndicatorHintVisible(false)', '[attr.aria-sort]': '_getAriaSortAttribute()', '[class.mat-sort-header-disabled]': '_isDisabled()', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], animations: [ matSortAnimations.indicator, matSortAnimations.leftPointer, matSortAnimations.rightPointer, matSortAnimations.arrowOpacity, matSortAnimations.arrowPosition, matSortAnimations.allowChildren, ], template: "\n
\n\n \n
\n \n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n", styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-sort-header-content{text-align:center;display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}.mat-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}.cdk-high-contrast-active .mat-sort-header-stem{width:0;border-left:solid 2px}.mat-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.mat-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}.cdk-high-contrast-active .mat-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}.cdk-high-contrast-active .mat-sort-header-pointer-left,.cdk-high-contrast-active .mat-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}.mat-sort-header-pointer-left{transform-origin:right;left:0}.mat-sort-header-pointer-right{transform-origin:left;right:0}"] }] }], ctorParameters: function () { return [{ type: MatSortHeaderIntl }, { type: i0.ChangeDetectorRef }, { type: MatSort, decorators: [{ type: Optional }] }, { type: undefined, decorators: [{ type: Inject, args: ['MAT_SORT_HEADER_COLUMN_DEF'] }, { type: Optional }] }, { type: i3.FocusMonitor }, { type: i0.ElementRef }, { type: i3.AriaDescriber, decorators: [{ type: Optional }] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_SORT_DEFAULT_OPTIONS] }] }]; }, propDecorators: { id: [{ type: Input, args: ['mat-sort-header'] }], arrowPosition: [{ type: Input }], start: [{ type: Input }], sortActionDescription: [{ type: Input }], disableClear: [{ type: Input }] } }); class MatSortModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: MatSortModule, declarations: [MatSort, MatSortHeader], imports: [CommonModule, MatCommonModule], exports: [MatSort, MatSortHeader] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortModule, providers: [MAT_SORT_HEADER_INTL_PROVIDER], imports: [CommonModule, MatCommonModule] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatSortModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, MatCommonModule], exports: [MatSort, MatSortHeader], declarations: [MatSort, MatSortHeader], providers: [MAT_SORT_HEADER_INTL_PROVIDER], }] }] }); /** * Generated bundle index. Do not edit. */ export { MAT_SORT_DEFAULT_OPTIONS, MAT_SORT_HEADER_INTL_PROVIDER, MAT_SORT_HEADER_INTL_PROVIDER_FACTORY, MatSort, MatSortHeader, MatSortHeaderIntl, MatSortModule, matSortAnimations }; //# sourceMappingURL=sort.mjs.map