material-sort.umd.js 37 KB

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