sort.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  9. import { Directive, EventEmitter, Input, isDevMode, Output, Injectable, SkipSelf, Optional, NgModule, ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewEncapsulation, Inject, ɵɵdefineInjectable } from '@angular/core';
  10. import { mixinDisabled, mixinInitialized, AnimationCurves, AnimationDurations } from '@angular/material/core';
  11. import { Subject, merge } from 'rxjs';
  12. import { animate, state, style, transition, trigger, keyframes, query, animateChild } from '@angular/animations';
  13. import { CommonModule } from '@angular/common';
  14. /**
  15. * @fileoverview added by tsickle
  16. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  17. */
  18. /**
  19. * \@docs-private
  20. * @param {?} id
  21. * @return {?}
  22. */
  23. function getSortDuplicateSortableIdError(id) {
  24. return Error(`Cannot have two MatSortables with the same id (${id}).`);
  25. }
  26. /**
  27. * \@docs-private
  28. * @return {?}
  29. */
  30. function getSortHeaderNotContainedWithinSortError() {
  31. return Error(`MatSortHeader must be placed within a parent element with the MatSort directive.`);
  32. }
  33. /**
  34. * \@docs-private
  35. * @return {?}
  36. */
  37. function getSortHeaderMissingIdError() {
  38. return Error(`MatSortHeader must be provided with a unique id.`);
  39. }
  40. /**
  41. * \@docs-private
  42. * @param {?} direction
  43. * @return {?}
  44. */
  45. function getSortInvalidDirectionError(direction) {
  46. return Error(`${direction} is not a valid sort direction ('asc' or 'desc').`);
  47. }
  48. /**
  49. * @fileoverview added by tsickle
  50. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  51. */
  52. // Boilerplate for applying mixins to MatSort.
  53. /**
  54. * \@docs-private
  55. */
  56. class MatSortBase {
  57. }
  58. /** @type {?} */
  59. const _MatSortMixinBase = mixinInitialized(mixinDisabled(MatSortBase));
  60. /**
  61. * Container for MatSortables to manage the sort state and provide default sort parameters.
  62. */
  63. class MatSort extends _MatSortMixinBase {
  64. constructor() {
  65. super(...arguments);
  66. /**
  67. * Collection of all registered sortables that this directive manages.
  68. */
  69. this.sortables = new Map();
  70. /**
  71. * Used to notify any child components listening to state changes.
  72. */
  73. this._stateChanges = new Subject();
  74. /**
  75. * The direction to set when an MatSortable is initially sorted.
  76. * May be overriden by the MatSortable's sort start.
  77. */
  78. this.start = 'asc';
  79. this._direction = '';
  80. /**
  81. * Event emitted when the user changes either the active sort or sort direction.
  82. */
  83. this.sortChange = new EventEmitter();
  84. }
  85. /**
  86. * The sort direction of the currently active MatSortable.
  87. * @return {?}
  88. */
  89. get direction() { return this._direction; }
  90. /**
  91. * @param {?} direction
  92. * @return {?}
  93. */
  94. set direction(direction) {
  95. if (isDevMode() && direction && direction !== 'asc' && direction !== 'desc') {
  96. throw getSortInvalidDirectionError(direction);
  97. }
  98. this._direction = direction;
  99. }
  100. /**
  101. * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
  102. * May be overriden by the MatSortable's disable clear input.
  103. * @return {?}
  104. */
  105. get disableClear() { return this._disableClear; }
  106. /**
  107. * @param {?} v
  108. * @return {?}
  109. */
  110. set disableClear(v) { this._disableClear = coerceBooleanProperty(v); }
  111. /**
  112. * Register function to be used by the contained MatSortables. Adds the MatSortable to the
  113. * collection of MatSortables.
  114. * @param {?} sortable
  115. * @return {?}
  116. */
  117. register(sortable) {
  118. if (!sortable.id) {
  119. throw getSortHeaderMissingIdError();
  120. }
  121. if (this.sortables.has(sortable.id)) {
  122. throw getSortDuplicateSortableIdError(sortable.id);
  123. }
  124. this.sortables.set(sortable.id, sortable);
  125. }
  126. /**
  127. * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
  128. * collection of contained MatSortables.
  129. * @param {?} sortable
  130. * @return {?}
  131. */
  132. deregister(sortable) {
  133. this.sortables.delete(sortable.id);
  134. }
  135. /**
  136. * Sets the active sort id and determines the new sort direction.
  137. * @param {?} sortable
  138. * @return {?}
  139. */
  140. sort(sortable) {
  141. if (this.active != sortable.id) {
  142. this.active = sortable.id;
  143. this.direction = sortable.start ? sortable.start : this.start;
  144. }
  145. else {
  146. this.direction = this.getNextSortDirection(sortable);
  147. }
  148. this.sortChange.emit({ active: this.active, direction: this.direction });
  149. }
  150. /**
  151. * Returns the next sort direction of the active sortable, checking for potential overrides.
  152. * @param {?} sortable
  153. * @return {?}
  154. */
  155. getNextSortDirection(sortable) {
  156. if (!sortable) {
  157. return '';
  158. }
  159. // Get the sort direction cycle with the potential sortable overrides.
  160. /** @type {?} */
  161. const disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear;
  162. /** @type {?} */
  163. let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
  164. // Get and return the next direction in the cycle
  165. /** @type {?} */
  166. let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
  167. if (nextDirectionIndex >= sortDirectionCycle.length) {
  168. nextDirectionIndex = 0;
  169. }
  170. return sortDirectionCycle[nextDirectionIndex];
  171. }
  172. /**
  173. * @return {?}
  174. */
  175. ngOnInit() {
  176. this._markInitialized();
  177. }
  178. /**
  179. * @return {?}
  180. */
  181. ngOnChanges() {
  182. this._stateChanges.next();
  183. }
  184. /**
  185. * @return {?}
  186. */
  187. ngOnDestroy() {
  188. this._stateChanges.complete();
  189. }
  190. }
  191. MatSort.decorators = [
  192. { type: Directive, args: [{
  193. selector: '[matSort]',
  194. exportAs: 'matSort',
  195. inputs: ['disabled: matSortDisabled']
  196. },] },
  197. ];
  198. MatSort.propDecorators = {
  199. active: [{ type: Input, args: ['matSortActive',] }],
  200. start: [{ type: Input, args: ['matSortStart',] }],
  201. direction: [{ type: Input, args: ['matSortDirection',] }],
  202. disableClear: [{ type: Input, args: ['matSortDisableClear',] }],
  203. sortChange: [{ type: Output, args: ['matSortChange',] }]
  204. };
  205. /**
  206. * Returns the sort direction cycle to use given the provided parameters of order and clear.
  207. * @param {?} start
  208. * @param {?} disableClear
  209. * @return {?}
  210. */
  211. function getSortDirectionCycle(start, disableClear) {
  212. /** @type {?} */
  213. let sortOrder = ['asc', 'desc'];
  214. if (start == 'desc') {
  215. sortOrder.reverse();
  216. }
  217. if (!disableClear) {
  218. sortOrder.push('');
  219. }
  220. return sortOrder;
  221. }
  222. /**
  223. * @fileoverview added by tsickle
  224. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  225. */
  226. /** @type {?} */
  227. const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' +
  228. AnimationCurves.STANDARD_CURVE;
  229. /**
  230. * Animations used by MatSort.
  231. * \@docs-private
  232. * @type {?}
  233. */
  234. const matSortAnimations = {
  235. /**
  236. * Animation that moves the sort indicator.
  237. */
  238. indicator: trigger('indicator', [
  239. state('active-asc, asc', style({ transform: 'translateY(0px)' })),
  240. // 10px is the height of the sort indicator, minus the width of the pointers
  241. state('active-desc, desc', style({ transform: 'translateY(10px)' })),
  242. transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))
  243. ]),
  244. /**
  245. * Animation that rotates the left pointer of the indicator based on the sorting direction.
  246. */
  247. leftPointer: trigger('leftPointer', [
  248. state('active-asc, asc', style({ transform: 'rotate(-45deg)' })),
  249. state('active-desc, desc', style({ transform: 'rotate(45deg)' })),
  250. transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))
  251. ]),
  252. /**
  253. * Animation that rotates the right pointer of the indicator based on the sorting direction.
  254. */
  255. rightPointer: trigger('rightPointer', [
  256. state('active-asc, asc', style({ transform: 'rotate(45deg)' })),
  257. state('active-desc, desc', style({ transform: 'rotate(-45deg)' })),
  258. transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))
  259. ]),
  260. /**
  261. * Animation that controls the arrow opacity.
  262. */
  263. arrowOpacity: trigger('arrowOpacity', [
  264. state('desc-to-active, asc-to-active, active', style({ opacity: 1 })),
  265. state('desc-to-hint, asc-to-hint, hint', style({ opacity: .54 })),
  266. state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', style({ opacity: 0 })),
  267. // Transition between all states except for immediate transitions
  268. transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
  269. transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
  270. ]),
  271. /**
  272. * Animation for the translation of the arrow as a whole. States are separated into two
  273. * groups: ones with animations and others that are immediate. Immediate states are asc, desc,
  274. * peek, and active. The other states define a specific animation (source-to-destination)
  275. * and are determined as a function of their prev user-perceived state and what the next state
  276. * should be.
  277. */
  278. arrowPosition: trigger('arrowPosition', [
  279. // Hidden Above => Hint Center
  280. transition('* => desc-to-hint, * => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([
  281. style({ transform: 'translateY(-25%)' }),
  282. style({ transform: 'translateY(0)' })
  283. ]))),
  284. // Hint Center => Hidden Below
  285. transition('* => hint-to-desc, * => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([
  286. style({ transform: 'translateY(0)' }),
  287. style({ transform: 'translateY(25%)' })
  288. ]))),
  289. // Hidden Below => Hint Center
  290. transition('* => asc-to-hint, * => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([
  291. style({ transform: 'translateY(25%)' }),
  292. style({ transform: 'translateY(0)' })
  293. ]))),
  294. // Hint Center => Hidden Above
  295. transition('* => hint-to-asc, * => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([
  296. style({ transform: 'translateY(0)' }),
  297. style({ transform: 'translateY(-25%)' })
  298. ]))),
  299. state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', style({ transform: 'translateY(0)' })),
  300. state('hint-to-desc, active-to-desc, desc', style({ transform: 'translateY(-25%)' })),
  301. state('hint-to-asc, active-to-asc, asc', style({ transform: 'translateY(25%)' })),
  302. ]),
  303. /**
  304. * Necessary trigger that calls animate on children animations.
  305. */
  306. allowChildren: trigger('allowChildren', [
  307. transition('* <=> *', [
  308. query('@*', animateChild(), { optional: true })
  309. ])
  310. ]),
  311. };
  312. /**
  313. * @fileoverview added by tsickle
  314. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  315. */
  316. /**
  317. * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
  318. * include it in a custom provider.
  319. */
  320. class MatSortHeaderIntl {
  321. constructor() {
  322. /**
  323. * Stream that emits whenever the labels here are changed. Use this to notify
  324. * components if the labels have changed after initialization.
  325. */
  326. this.changes = new Subject();
  327. /**
  328. * ARIA label for the sorting button.
  329. */
  330. this.sortButtonLabel = (/**
  331. * @param {?} id
  332. * @return {?}
  333. */
  334. (id) => {
  335. return `Change sorting for ${id}`;
  336. });
  337. }
  338. }
  339. MatSortHeaderIntl.decorators = [
  340. { type: Injectable, args: [{ providedIn: 'root' },] },
  341. ];
  342. /** @nocollapse */ MatSortHeaderIntl.ngInjectableDef = ɵɵdefineInjectable({ factory: function MatSortHeaderIntl_Factory() { return new MatSortHeaderIntl(); }, token: MatSortHeaderIntl, providedIn: "root" });
  343. /**
  344. * \@docs-private
  345. * @param {?} parentIntl
  346. * @return {?}
  347. */
  348. function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) {
  349. return parentIntl || new MatSortHeaderIntl();
  350. }
  351. /**
  352. * \@docs-private
  353. * @type {?}
  354. */
  355. const MAT_SORT_HEADER_INTL_PROVIDER = {
  356. // If there is already an MatSortHeaderIntl available, use that. Otherwise, provide a new one.
  357. provide: MatSortHeaderIntl,
  358. deps: [[new Optional(), new SkipSelf(), MatSortHeaderIntl]],
  359. useFactory: MAT_SORT_HEADER_INTL_PROVIDER_FACTORY
  360. };
  361. /**
  362. * @fileoverview added by tsickle
  363. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  364. */
  365. // Boilerplate for applying mixins to the sort header.
  366. /**
  367. * \@docs-private
  368. */
  369. class MatSortHeaderBase {
  370. }
  371. /** @type {?} */
  372. const _MatSortHeaderMixinBase = mixinDisabled(MatSortHeaderBase);
  373. /**
  374. * Applies sorting behavior (click to change sort) and styles to an element, including an
  375. * arrow to display the current sort direction.
  376. *
  377. * Must be provided with an id and contained within a parent MatSort directive.
  378. *
  379. * If used on header cells in a CdkTable, it will automatically default its id from its containing
  380. * column definition.
  381. */
  382. class MatSortHeader extends _MatSortHeaderMixinBase {
  383. /**
  384. * @param {?} _intl
  385. * @param {?} changeDetectorRef
  386. * @param {?} _sort
  387. * @param {?} _columnDef
  388. */
  389. constructor(_intl, changeDetectorRef, _sort, _columnDef) {
  390. // Note that we use a string token for the `_columnDef`, because the value is provided both by
  391. // `material/table` and `cdk/table` and we can't have the CDK depending on Material,
  392. // and we want to avoid having the sort header depending on the CDK table because
  393. // of this single reference.
  394. super();
  395. this._intl = _intl;
  396. this._sort = _sort;
  397. this._columnDef = _columnDef;
  398. /**
  399. * Flag set to true when the indicator should be displayed while the sort is not active. Used to
  400. * provide an affordance that the header is sortable by showing on focus and hover.
  401. */
  402. this._showIndicatorHint = false;
  403. /**
  404. * The direction the arrow should be facing according to the current state.
  405. */
  406. this._arrowDirection = '';
  407. /**
  408. * Whether the view state animation should show the transition between the `from` and `to` states.
  409. */
  410. this._disableViewStateAnimation = false;
  411. /**
  412. * Sets the position of the arrow that displays when sorted.
  413. */
  414. this.arrowPosition = 'after';
  415. if (!_sort) {
  416. throw getSortHeaderNotContainedWithinSortError();
  417. }
  418. this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges, _intl.changes)
  419. .subscribe((/**
  420. * @return {?}
  421. */
  422. () => {
  423. if (this._isSorted()) {
  424. this._updateArrowDirection();
  425. }
  426. // If this header was recently active and now no longer sorted, animate away the arrow.
  427. if (!this._isSorted() && this._viewState && this._viewState.toState === 'active') {
  428. this._disableViewStateAnimation = false;
  429. this._setAnimationTransitionState({ fromState: 'active', toState: this._arrowDirection });
  430. }
  431. changeDetectorRef.markForCheck();
  432. }));
  433. }
  434. /**
  435. * Overrides the disable clear value of the containing MatSort for this MatSortable.
  436. * @return {?}
  437. */
  438. get disableClear() { return this._disableClear; }
  439. /**
  440. * @param {?} v
  441. * @return {?}
  442. */
  443. set disableClear(v) { this._disableClear = coerceBooleanProperty(v); }
  444. /**
  445. * @return {?}
  446. */
  447. ngOnInit() {
  448. if (!this.id && this._columnDef) {
  449. this.id = this._columnDef.name;
  450. }
  451. // Initialize the direction of the arrow and set the view state to be immediately that state.
  452. this._updateArrowDirection();
  453. this._setAnimationTransitionState({ toState: this._isSorted() ? 'active' : this._arrowDirection });
  454. this._sort.register(this);
  455. }
  456. /**
  457. * @return {?}
  458. */
  459. ngOnDestroy() {
  460. this._sort.deregister(this);
  461. this._rerenderSubscription.unsubscribe();
  462. }
  463. /**
  464. * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
  465. * user showing what the active sort will become. If set to false, the arrow will fade away.
  466. * @param {?} visible
  467. * @return {?}
  468. */
  469. _setIndicatorHintVisible(visible) {
  470. // No-op if the sort header is disabled - should not make the hint visible.
  471. if (this._isDisabled() && visible) {
  472. return;
  473. }
  474. this._showIndicatorHint = visible;
  475. if (!this._isSorted()) {
  476. this._updateArrowDirection();
  477. if (this._showIndicatorHint) {
  478. this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' });
  479. }
  480. else {
  481. this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection });
  482. }
  483. }
  484. }
  485. /**
  486. * Sets the animation transition view state for the arrow's position and opacity. If the
  487. * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
  488. * no animation appears.
  489. * @param {?} viewState
  490. * @return {?}
  491. */
  492. _setAnimationTransitionState(viewState) {
  493. this._viewState = viewState;
  494. // If the animation for arrow position state (opacity/translation) should be disabled,
  495. // remove the fromState so that it jumps right to the toState.
  496. if (this._disableViewStateAnimation) {
  497. this._viewState = { toState: viewState.toState };
  498. }
  499. }
  500. /**
  501. * Triggers the sort on this sort header and removes the indicator hint.
  502. * @return {?}
  503. */
  504. _handleClick() {
  505. if (this._isDisabled()) {
  506. return;
  507. }
  508. this._sort.sort(this);
  509. // Do not show the animation if the header was already shown in the right position.
  510. if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
  511. this._disableViewStateAnimation = true;
  512. }
  513. // If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into
  514. // the direction it is facing.
  515. /** @type {?} */
  516. const viewState = this._isSorted() ?
  517. { fromState: this._arrowDirection, toState: 'active' } :
  518. { fromState: 'active', toState: this._arrowDirection };
  519. this._setAnimationTransitionState(viewState);
  520. this._showIndicatorHint = false;
  521. }
  522. /**
  523. * Whether this MatSortHeader is currently sorted in either ascending or descending order.
  524. * @return {?}
  525. */
  526. _isSorted() {
  527. return this._sort.active == this.id &&
  528. (this._sort.direction === 'asc' || this._sort.direction === 'desc');
  529. }
  530. /**
  531. * Returns the animation state for the arrow direction (indicator and pointers).
  532. * @return {?}
  533. */
  534. _getArrowDirectionState() {
  535. return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`;
  536. }
  537. /**
  538. * Returns the arrow position state (opacity, translation).
  539. * @return {?}
  540. */
  541. _getArrowViewState() {
  542. /** @type {?} */
  543. const fromState = this._viewState.fromState;
  544. return (fromState ? `${fromState}-to-` : '') + this._viewState.toState;
  545. }
  546. /**
  547. * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
  548. * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
  549. * active sorted direction. The reason this is updated through a function is because the direction
  550. * should only be changed at specific times - when deactivated but the hint is displayed and when
  551. * the sort is active and the direction changes. Otherwise the arrow's direction should linger
  552. * in cases such as the sort becoming deactivated but we want to animate the arrow away while
  553. * preserving its direction, even though the next sort direction is actually different and should
  554. * only be changed once the arrow displays again (hint or activation).
  555. * @return {?}
  556. */
  557. _updateArrowDirection() {
  558. this._arrowDirection = this._isSorted() ?
  559. this._sort.direction :
  560. (this.start || this._sort.start);
  561. }
  562. /**
  563. * @return {?}
  564. */
  565. _isDisabled() {
  566. return this._sort.disabled || this.disabled;
  567. }
  568. /**
  569. * Gets the aria-sort attribute that should be applied to this sort header. If this header
  570. * is not sorted, returns null so that the attribute is removed from the host element. Aria spec
  571. * says that the aria-sort property should only be present on one header at a time, so removing
  572. * ensures this is true.
  573. * @return {?}
  574. */
  575. _getAriaSortAttribute() {
  576. if (!this._isSorted()) {
  577. return null;
  578. }
  579. return this._sort.direction == 'asc' ? 'ascending' : 'descending';
  580. }
  581. /**
  582. * Whether the arrow inside the sort header should be rendered.
  583. * @return {?}
  584. */
  585. _renderArrow() {
  586. return !this._isDisabled() || this._isSorted();
  587. }
  588. }
  589. MatSortHeader.decorators = [
  590. { type: Component, args: [{selector: '[mat-sort-header]',
  591. exportAs: 'matSortHeader',
  592. template: "<div class=\"mat-sort-header-container\" [class.mat-sort-header-sorted]=\"_isSorted()\" [class.mat-sort-header-position-before]=\"arrowPosition == 'before'\"><button class=\"mat-sort-header-button\" type=\"button\" [attr.disabled]=\"_isDisabled() || null\" [attr.aria-label]=\"_intl.sortButtonLabel(id)\" (focus)=\"_setIndicatorHintVisible(true)\" (blur)=\"_setIndicatorHintVisible(false)\"><ng-content></ng-content></button><div class=\"mat-sort-header-arrow\" *ngIf=\"_renderArrow()\" [@arrowOpacity]=\"_getArrowViewState()\" [@arrowPosition]=\"_getArrowViewState()\" [@allowChildren]=\"_getArrowDirectionState()\" (@arrowPosition.start)=\"_disableViewStateAnimation = true\" (@arrowPosition.done)=\"_disableViewStateAnimation = false\"><div class=\"mat-sort-header-stem\"></div><div class=\"mat-sort-header-indicator\" [@indicator]=\"_getArrowDirectionState()\"><div class=\"mat-sort-header-pointer-left\" [@leftPointer]=\"_getArrowDirectionState()\"></div><div class=\"mat-sort-header-pointer-right\" [@rightPointer]=\"_getArrowDirectionState()\"></div><div class=\"mat-sort-header-pointer-middle\"></div></div></div></div>",
  593. styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-position-before{flex-direction:row-reverse}.mat-sort-header-button{border:none;background:0 0;display:flex;align-items:center;padding:0;cursor:inherit;outline:0;font:inherit;color:currentColor}.mat-sort-header-button::-moz-focus-inner{border:0}.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}@media (-ms-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)}@media (-ms-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}@media (-ms-high-contrast:active){.mat-sort-header-pointer-left,.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}"],
  594. host: {
  595. '(click)': '_handleClick()',
  596. '(mouseenter)': '_setIndicatorHintVisible(true)',
  597. '(longpress)': '_setIndicatorHintVisible(true)',
  598. '(mouseleave)': '_setIndicatorHintVisible(false)',
  599. '[attr.aria-sort]': '_getAriaSortAttribute()',
  600. '[class.mat-sort-header-disabled]': '_isDisabled()',
  601. },
  602. encapsulation: ViewEncapsulation.None,
  603. changeDetection: ChangeDetectionStrategy.OnPush,
  604. inputs: ['disabled'],
  605. animations: [
  606. matSortAnimations.indicator,
  607. matSortAnimations.leftPointer,
  608. matSortAnimations.rightPointer,
  609. matSortAnimations.arrowOpacity,
  610. matSortAnimations.arrowPosition,
  611. matSortAnimations.allowChildren,
  612. ]
  613. },] },
  614. ];
  615. /** @nocollapse */
  616. MatSortHeader.ctorParameters = () => [
  617. { type: MatSortHeaderIntl },
  618. { type: ChangeDetectorRef },
  619. { type: MatSort, decorators: [{ type: Optional }] },
  620. { type: undefined, decorators: [{ type: Inject, args: ['MAT_SORT_HEADER_COLUMN_DEF',] }, { type: Optional }] }
  621. ];
  622. MatSortHeader.propDecorators = {
  623. id: [{ type: Input, args: ['mat-sort-header',] }],
  624. arrowPosition: [{ type: Input }],
  625. start: [{ type: Input }],
  626. disableClear: [{ type: Input }]
  627. };
  628. /**
  629. * @fileoverview added by tsickle
  630. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  631. */
  632. class MatSortModule {
  633. }
  634. MatSortModule.decorators = [
  635. { type: NgModule, args: [{
  636. imports: [CommonModule],
  637. exports: [MatSort, MatSortHeader],
  638. declarations: [MatSort, MatSortHeader],
  639. providers: [MAT_SORT_HEADER_INTL_PROVIDER]
  640. },] },
  641. ];
  642. /**
  643. * @fileoverview added by tsickle
  644. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  645. */
  646. /**
  647. * @fileoverview added by tsickle
  648. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  649. */
  650. /**
  651. * @fileoverview added by tsickle
  652. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  653. */
  654. export { MatSortModule, MatSortHeader, MAT_SORT_HEADER_INTL_PROVIDER_FACTORY, MatSortHeaderIntl, MAT_SORT_HEADER_INTL_PROVIDER, MatSort, matSortAnimations };
  655. //# sourceMappingURL=sort.js.map