sort.es5.js 35 KB

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