@angular/material 21.0.0-next.0 → 21.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/_index.scss +1 -1
  2. package/autocomplete/index.d.ts +1 -23
  3. package/bottom-sheet/index.d.ts +1 -10
  4. package/button/index.d.ts +1 -7
  5. package/button-toggle/index.d.ts +1 -1
  6. package/button-toggle.d.d.ts +1 -7
  7. package/checkbox/index.d.ts +1 -7
  8. package/chips/_m3-chip.scss +5 -2
  9. package/chips/index.d.ts +19 -18
  10. package/core/index.d.ts +1 -1
  11. package/core/tokens/_classes.scss +40 -38
  12. package/date-adapter.d.d.ts +1 -7
  13. package/datepicker/index.d.ts +2 -55
  14. package/dialog/index.d.ts +1 -23
  15. package/expansion/index.d.ts +1 -36
  16. package/fesm2022/animation.mjs.map +1 -1
  17. package/fesm2022/autocomplete/testing.mjs.map +1 -1
  18. package/fesm2022/autocomplete.mjs +17 -45
  19. package/fesm2022/autocomplete.mjs.map +1 -1
  20. package/fesm2022/badge/testing.mjs.map +1 -1
  21. package/fesm2022/badge.mjs +10 -10
  22. package/fesm2022/badge.mjs.map +1 -1
  23. package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
  24. package/fesm2022/bottom-sheet.mjs +11 -92
  25. package/fesm2022/bottom-sheet.mjs.map +1 -1
  26. package/fesm2022/button/testing.mjs.map +1 -1
  27. package/fesm2022/button-toggle/testing.mjs.map +1 -1
  28. package/fesm2022/button-toggle.mjs +15 -23
  29. package/fesm2022/button-toggle.mjs.map +1 -1
  30. package/fesm2022/button.mjs +19 -27
  31. package/fesm2022/button.mjs.map +1 -1
  32. package/fesm2022/card/testing.mjs.map +1 -1
  33. package/fesm2022/card.mjs +46 -46
  34. package/fesm2022/card.mjs.map +1 -1
  35. package/fesm2022/checkbox/testing.mjs.map +1 -1
  36. package/fesm2022/checkbox.mjs +17 -26
  37. package/fesm2022/checkbox.mjs.map +1 -1
  38. package/fesm2022/chips/testing.mjs.map +1 -1
  39. package/fesm2022/chips.mjs +123 -111
  40. package/fesm2022/chips.mjs.map +1 -1
  41. package/fesm2022/common-module.mjs +4 -4
  42. package/fesm2022/common-module.mjs.map +1 -1
  43. package/fesm2022/core/testing.mjs.map +1 -1
  44. package/fesm2022/core.mjs +12 -13
  45. package/fesm2022/core.mjs.map +1 -1
  46. package/fesm2022/date-formats.mjs +2 -10
  47. package/fesm2022/date-formats.mjs.map +1 -1
  48. package/fesm2022/date-range-input-harness.mjs.map +1 -1
  49. package/fesm2022/datepicker/testing.mjs.map +1 -1
  50. package/fesm2022/datepicker.mjs +109 -260
  51. package/fesm2022/datepicker.mjs.map +1 -1
  52. package/fesm2022/dialog/testing.mjs +5 -5
  53. package/fesm2022/dialog/testing.mjs.map +1 -1
  54. package/fesm2022/dialog.mjs +882 -114
  55. package/fesm2022/dialog.mjs.map +1 -1
  56. package/fesm2022/divider/testing.mjs.map +1 -1
  57. package/fesm2022/divider.mjs +7 -7
  58. package/fesm2022/divider.mjs.map +1 -1
  59. package/fesm2022/error-options.mjs +6 -6
  60. package/fesm2022/error-options.mjs.map +1 -1
  61. package/fesm2022/error-state.mjs.map +1 -1
  62. package/fesm2022/expansion/testing.mjs.map +1 -1
  63. package/fesm2022/expansion.mjs +26 -128
  64. package/fesm2022/expansion.mjs.map +1 -1
  65. package/fesm2022/form-field/testing/control.mjs.map +1 -1
  66. package/fesm2022/form-field/testing.mjs.map +1 -1
  67. package/fesm2022/form-field.mjs +37 -49
  68. package/fesm2022/form-field.mjs.map +1 -1
  69. package/fesm2022/form-field2.mjs +30 -30
  70. package/fesm2022/form-field2.mjs.map +1 -1
  71. package/fesm2022/grid-list/testing.mjs.map +1 -1
  72. package/fesm2022/grid-list.mjs +22 -22
  73. package/fesm2022/grid-list.mjs.map +1 -1
  74. package/fesm2022/icon/testing.mjs +7 -7
  75. package/fesm2022/icon/testing.mjs.map +1 -1
  76. package/fesm2022/icon-button.mjs +6 -6
  77. package/fesm2022/icon-button.mjs.map +1 -1
  78. package/fesm2022/icon-registry.mjs +5 -32
  79. package/fesm2022/icon-registry.mjs.map +1 -1
  80. package/fesm2022/icon.mjs +18 -24
  81. package/fesm2022/icon.mjs.map +1 -1
  82. package/fesm2022/input/testing.mjs.map +1 -1
  83. package/fesm2022/input-harness.mjs.map +1 -1
  84. package/fesm2022/input-value-accessor.mjs.map +1 -1
  85. package/fesm2022/input.mjs +8 -8
  86. package/fesm2022/input.mjs.map +1 -1
  87. package/fesm2022/internal-form-field.mjs +3 -3
  88. package/fesm2022/internal-form-field.mjs.map +1 -1
  89. package/fesm2022/line.mjs +7 -7
  90. package/fesm2022/line.mjs.map +1 -1
  91. package/fesm2022/list/testing.mjs.map +1 -1
  92. package/fesm2022/list.mjs +49 -49
  93. package/fesm2022/list.mjs.map +1 -1
  94. package/fesm2022/material.mjs.map +1 -1
  95. package/fesm2022/menu/testing.mjs.map +1 -1
  96. package/fesm2022/menu.mjs +26 -173
  97. package/fesm2022/menu.mjs.map +1 -1
  98. package/fesm2022/option-harness.mjs.map +1 -1
  99. package/fesm2022/option-module.mjs +4 -4
  100. package/fesm2022/option-module.mjs.map +1 -1
  101. package/fesm2022/option.mjs +6 -6
  102. package/fesm2022/option.mjs.map +1 -1
  103. package/fesm2022/paginator/testing.mjs.map +1 -1
  104. package/fesm2022/paginator.mjs +18 -37
  105. package/fesm2022/paginator.mjs.map +1 -1
  106. package/fesm2022/progress-bar/testing.mjs.map +1 -1
  107. package/fesm2022/progress-bar.mjs +20 -23
  108. package/fesm2022/progress-bar.mjs.map +1 -1
  109. package/fesm2022/progress-spinner/testing.mjs.map +1 -1
  110. package/fesm2022/progress-spinner.mjs +9 -17
  111. package/fesm2022/progress-spinner.mjs.map +1 -1
  112. package/fesm2022/pseudo-checkbox-module.mjs +4 -4
  113. package/fesm2022/pseudo-checkbox-module.mjs.map +1 -1
  114. package/fesm2022/pseudo-checkbox.mjs +3 -3
  115. package/fesm2022/pseudo-checkbox.mjs.map +1 -1
  116. package/fesm2022/public-api.mjs.map +1 -1
  117. package/fesm2022/radio/testing.mjs.map +1 -1
  118. package/fesm2022/radio.mjs +14 -22
  119. package/fesm2022/radio.mjs.map +1 -1
  120. package/fesm2022/ripple-loader.mjs +3 -3
  121. package/fesm2022/ripple-loader.mjs.map +1 -1
  122. package/fesm2022/ripple-module.mjs +4 -4
  123. package/fesm2022/ripple-module.mjs.map +1 -1
  124. package/fesm2022/ripple.mjs +8 -8
  125. package/fesm2022/ripple.mjs.map +1 -1
  126. package/fesm2022/select/testing.mjs.map +1 -1
  127. package/fesm2022/select.mjs +1293 -90
  128. package/fesm2022/select.mjs.map +1 -1
  129. package/fesm2022/sidenav/testing.mjs.map +1 -1
  130. package/fesm2022/sidenav.mjs +24 -110
  131. package/fesm2022/sidenav.mjs.map +1 -1
  132. package/fesm2022/slide-toggle/testing.mjs.map +1 -1
  133. package/fesm2022/slide-toggle.mjs +7 -7
  134. package/fesm2022/slide-toggle.mjs.map +1 -1
  135. package/fesm2022/slider/testing.mjs.map +1 -1
  136. package/fesm2022/slider.mjs +16 -16
  137. package/fesm2022/slider.mjs.map +1 -1
  138. package/fesm2022/snack-bar/testing.mjs.map +1 -1
  139. package/fesm2022/snack-bar.mjs +24 -102
  140. package/fesm2022/snack-bar.mjs.map +1 -1
  141. package/fesm2022/sort/testing.mjs.map +1 -1
  142. package/fesm2022/sort.mjs +20 -344
  143. package/fesm2022/sort.mjs.map +1 -1
  144. package/fesm2022/stepper/testing.mjs.map +1 -1
  145. package/fesm2022/stepper.mjs +34 -201
  146. package/fesm2022/stepper.mjs.map +1 -1
  147. package/fesm2022/structural-styles.mjs +3 -3
  148. package/fesm2022/structural-styles.mjs.map +1 -1
  149. package/fesm2022/table/testing.mjs.map +1 -1
  150. package/fesm2022/table.mjs +55 -55
  151. package/fesm2022/table.mjs.map +1 -1
  152. package/fesm2022/tabs/testing.mjs.map +1 -1
  153. package/fesm2022/tabs.mjs +51 -196
  154. package/fesm2022/tabs.mjs.map +1 -1
  155. package/fesm2022/timepicker/testing.mjs.map +1 -1
  156. package/fesm2022/timepicker.mjs +13 -13
  157. package/fesm2022/timepicker.mjs.map +1 -1
  158. package/fesm2022/toolbar/testing.mjs.map +1 -1
  159. package/fesm2022/toolbar.mjs +10 -10
  160. package/fesm2022/toolbar.mjs.map +1 -1
  161. package/fesm2022/tooltip/testing.mjs.map +1 -1
  162. package/fesm2022/tooltip.mjs +21 -52
  163. package/fesm2022/tooltip.mjs.map +1 -1
  164. package/fesm2022/{tooltip-module.mjs → tooltip2.mjs} +17 -60
  165. package/fesm2022/tooltip2.mjs.map +1 -0
  166. package/fesm2022/tree/testing.mjs.map +1 -1
  167. package/fesm2022/tree.mjs +25 -25
  168. package/fesm2022/tree.mjs.map +1 -1
  169. package/form-field/index.d.ts +1 -11
  170. package/icon/index.d.ts +2 -2
  171. package/icon-module.d.d.ts +1 -7
  172. package/icon-registry.d.d.ts +2 -18
  173. package/menu/index.d.ts +1 -42
  174. package/package.json +2 -2
  175. package/paginator/index.d.ts +3 -3
  176. package/paginator.d.d.ts +2 -18
  177. package/progress-bar/index.d.ts +1 -7
  178. package/progress-spinner/index.d.ts +1 -1
  179. package/progress-spinner.d.d.ts +3 -9
  180. package/radio/index.d.ts +1 -7
  181. package/ripple.d.d.ts +3 -3
  182. package/schematics/ng-add/index.js +1 -1
  183. package/schematics/ng-update/index_bundled.js +7 -3
  184. package/schematics/ng-update/index_bundled.js.map +1 -1
  185. package/select/index.d.ts +439 -27
  186. package/sidenav/index.d.ts +1 -17
  187. package/snack-bar/index.d.ts +1 -17
  188. package/sort/index.d.ts +2 -33
  189. package/stepper/index.d.ts +2 -29
  190. package/tabs/index.d.ts +1 -18
  191. package/tooltip/index.d.ts +302 -16
  192. package/fesm2022/dialog-module.mjs +0 -891
  193. package/fesm2022/dialog-module.mjs.map +0 -1
  194. package/fesm2022/form-field-module.mjs +0 -39
  195. package/fesm2022/form-field-module.mjs.map +0 -1
  196. package/fesm2022/select-module.mjs +0 -1318
  197. package/fesm2022/select-module.mjs.map +0 -1
  198. package/fesm2022/tooltip-module.mjs.map +0 -1
  199. package/select-module.d.d.ts +0 -456
  200. package/tooltip-module.d.d.ts +0 -329
package/fesm2022/sort.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, EventEmitter, booleanAttribute, Directive, Optional, Inject, Input, Output, Injectable, SkipSelf, inject, ChangeDetectorRef, ElementRef, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
2
+ import { InjectionToken, EventEmitter, booleanAttribute, Directive, Optional, Inject, Input, Output, Injectable, inject, ChangeDetectorRef, ElementRef, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
3
3
  import { FocusMonitor, AriaDescriber } from '@angular/cdk/a11y';
4
4
  import { SPACE, ENTER } from '@angular/cdk/keycodes';
5
5
  import { ReplaySubject, Subject, merge } from 'rxjs';
@@ -130,10 +130,10 @@ class MatSort {
130
130
  this._stateChanges.complete();
131
131
  this._initializedStream.complete();
132
132
  }
133
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSort, deps: [{ token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
134
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.0-rc.1", type: MatSort, isStandalone: true, selector: "[matSort]", inputs: { active: ["matSortActive", "active"], start: ["matSortStart", "start"], direction: ["matSortDirection", "direction"], disableClear: ["matSortDisableClear", "disableClear", booleanAttribute], disabled: ["matSortDisabled", "disabled", booleanAttribute] }, outputs: { sortChange: "matSortChange" }, host: { classAttribute: "mat-sort" }, exportAs: ["matSort"], usesOnChanges: true, ngImport: i0 });
133
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSort, deps: [{ token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
134
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.0-next.2", type: MatSort, isStandalone: true, selector: "[matSort]", inputs: { active: ["matSortActive", "active"], start: ["matSortStart", "start"], direction: ["matSortDirection", "direction"], disableClear: ["matSortDisableClear", "disableClear", booleanAttribute], disabled: ["matSortDisabled", "disabled", booleanAttribute] }, outputs: { sortChange: "matSortChange" }, host: { classAttribute: "mat-sort" }, exportAs: ["matSort"], usesOnChanges: true, ngImport: i0 });
135
135
  }
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSort, decorators: [{
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSort, decorators: [{
137
137
  type: Directive,
138
138
  args: [{
139
139
  selector: '[matSort]',
@@ -188,32 +188,13 @@ class MatSortHeaderIntl {
188
188
  * components if the labels have changed after initialization.
189
189
  */
190
190
  changes = new Subject();
191
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortHeaderIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
192
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortHeaderIntl, providedIn: 'root' });
191
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortHeaderIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
192
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortHeaderIntl, providedIn: 'root' });
193
193
  }
194
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortHeaderIntl, decorators: [{
194
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortHeaderIntl, decorators: [{
195
195
  type: Injectable,
196
196
  args: [{ providedIn: 'root' }]
197
197
  }] });
198
- /**
199
- * @docs-private
200
- * @deprecated No longer used, will be removed.
201
- * @breaking-change 21.0.0
202
- */
203
- function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) {
204
- return parentIntl || new MatSortHeaderIntl();
205
- }
206
- /**
207
- * @docs-private
208
- * @deprecated No longer used, will be removed.
209
- * @breaking-change 21.0.0
210
- */
211
- const MAT_SORT_HEADER_INTL_PROVIDER = {
212
- // If there is already an MatSortHeaderIntl available, use that. Otherwise, provide a new one.
213
- provide: MatSortHeaderIntl,
214
- deps: [[new Optional(), new SkipSelf(), MatSortHeaderIntl]],
215
- useFactory: MAT_SORT_HEADER_INTL_PROVIDER_FACTORY,
216
- };
217
198
 
218
199
  /**
219
200
  * Applies sorting behavior (click to change sort) and styles to an element, including an
@@ -301,9 +282,11 @@ class MatSortHeader {
301
282
  ngAfterViewInit() {
302
283
  // We use the focus monitor because we also want to style
303
284
  // things differently based on the focus origin.
304
- this._focusMonitor
305
- .monitor(this._elementRef, true)
306
- .subscribe(() => this._recentlyCleared.set(null));
285
+ this._focusMonitor.monitor(this._elementRef, true).subscribe(() => {
286
+ // We need the delay here, because we can trigger a signal write error if the header
287
+ // has a signal bound to `disabled` which causes it to be blurred (see #31723.)
288
+ Promise.resolve().then(() => this._recentlyCleared.set(null));
289
+ });
307
290
  }
308
291
  ngOnDestroy() {
309
292
  this._focusMonitor.stopMonitoring(this._elementRef);
@@ -366,10 +349,10 @@ class MatSortHeader {
366
349
  }
367
350
  this._sortActionDescription = newDescription;
368
351
  }
369
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
370
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0-rc.1", type: MatSortHeader, isStandalone: true, selector: "[mat-sort-header]", inputs: { id: ["mat-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", disabled: ["disabled", "disabled", booleanAttribute], sortActionDescription: "sortActionDescription", disableClear: ["disableClear", "disableClear", booleanAttribute] }, host: { listeners: { "click": "_toggleOnInteraction()", "keydown": "_handleKeydown($event)", "mouseleave": "_recentlyCleared.set(null)" }, properties: { "attr.aria-sort": "_getAriaSortAttribute()", "class.mat-sort-header-disabled": "_isDisabled()" }, classAttribute: "mat-sort-header" }, exportAs: ["matSortHeader"], ngImport: i0, template: "<!--\n We set the `tabindex` on an element inside the table header, rather than the header itself,\n because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n over having a button with an `aria-label` inside the header, because the button's `aria-label`\n will be read out as the user is navigating the table's cell (see #13012).\n\n The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div class=\"mat-sort-header-container mat-focus-indicator\"\n [class.mat-sort-header-sorted]=\"_isSorted()\"\n [class.mat-sort-header-position-before]=\"arrowPosition === 'before'\"\n [class.mat-sort-header-descending]=\"this._sort.direction === 'desc'\"\n [class.mat-sort-header-ascending]=\"this._sort.direction === 'asc'\"\n [class.mat-sort-header-recently-cleared-ascending]=\"_recentlyCleared() === 'asc'\"\n [class.mat-sort-header-recently-cleared-descending]=\"_recentlyCleared() === 'desc'\"\n [class.mat-sort-header-animations-disabled]=\"_animationsDisabled\"\n [attr.tabindex]=\"_isDisabled() ? null : 0\"\n [attr.role]=\"_isDisabled() ? null : 'button'\">\n\n <!--\n TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\n number of screenshot diff failures. It should be removed eventually. Note that the difference\n isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n causes it to be center-aligned, whereas removing it will keep the text to the left.\n -->\n <div class=\"mat-sort-header-content\">\n <ng-content></ng-content>\n </div>\n\n <!-- Disable animations while a current animation is running -->\n @if (_renderArrow()) {\n <div class=\"mat-sort-header-arrow\">\n <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\"/>\n </svg>\n </div>\n }\n</div>\n", styles: [".mat-sort-header{cursor:pointer}.mat-sort-header-disabled{cursor:default}.mat-sort-header-container{display:flex;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-sort-header-content{display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}@keyframes _mat-sort-header-recently-cleared-ascending{from{transform:translateY(0);opacity:1}to{transform:translateY(-25%);opacity:0}}@keyframes _mat-sort-header-recently-cleared-descending{from{transform:translateY(0) rotate(180deg);opacity:1}to{transform:translateY(25%) rotate(180deg);opacity:0}}.mat-sort-header-arrow{height:12px;width:12px;position:relative;transition:transform 225ms cubic-bezier(0.4, 0, 0.2, 1),opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;overflow:visible;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}.mat-sort-header.cdk-keyboard-focused .mat-sort-header-arrow,.mat-sort-header.cdk-program-focused .mat-sort-header-arrow,.mat-sort-header:hover .mat-sort-header-arrow{opacity:.54}.mat-sort-header .mat-sort-header-sorted .mat-sort-header-arrow{opacity:1}.mat-sort-header-descending .mat-sort-header-arrow{transform:rotate(180deg)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transform:translateY(-25%)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-ascending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-recently-cleared-descending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-descending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-animations-disabled .mat-sort-header-arrow{transition-duration:0ms;animation-duration:0ms}.mat-sort-header-arrow svg{width:24px;height:24px;fill:currentColor;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;transform:translateZ(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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
352
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
353
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0-next.2", type: MatSortHeader, isStandalone: true, selector: "[mat-sort-header]", inputs: { id: ["mat-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", disabled: ["disabled", "disabled", booleanAttribute], sortActionDescription: "sortActionDescription", disableClear: ["disableClear", "disableClear", booleanAttribute] }, host: { listeners: { "click": "_toggleOnInteraction()", "keydown": "_handleKeydown($event)", "mouseleave": "_recentlyCleared.set(null)" }, properties: { "attr.aria-sort": "_getAriaSortAttribute()", "class.mat-sort-header-disabled": "_isDisabled()" }, classAttribute: "mat-sort-header" }, exportAs: ["matSortHeader"], ngImport: i0, template: "<!--\n We set the `tabindex` on an element inside the table header, rather than the header itself,\n because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n over having a button with an `aria-label` inside the header, because the button's `aria-label`\n will be read out as the user is navigating the table's cell (see #13012).\n\n The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div class=\"mat-sort-header-container mat-focus-indicator\"\n [class.mat-sort-header-sorted]=\"_isSorted()\"\n [class.mat-sort-header-position-before]=\"arrowPosition === 'before'\"\n [class.mat-sort-header-descending]=\"this._sort.direction === 'desc'\"\n [class.mat-sort-header-ascending]=\"this._sort.direction === 'asc'\"\n [class.mat-sort-header-recently-cleared-ascending]=\"_recentlyCleared() === 'asc'\"\n [class.mat-sort-header-recently-cleared-descending]=\"_recentlyCleared() === 'desc'\"\n [class.mat-sort-header-animations-disabled]=\"_animationsDisabled\"\n [attr.tabindex]=\"_isDisabled() ? null : 0\"\n [attr.role]=\"_isDisabled() ? null : 'button'\">\n\n <!--\n TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\n number of screenshot diff failures. It should be removed eventually. Note that the difference\n isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n causes it to be center-aligned, whereas removing it will keep the text to the left.\n -->\n <div class=\"mat-sort-header-content\">\n <ng-content></ng-content>\n </div>\n\n <!-- Disable animations while a current animation is running -->\n @if (_renderArrow()) {\n <div class=\"mat-sort-header-arrow\">\n <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\"/>\n </svg>\n </div>\n }\n</div>\n", styles: [".mat-sort-header{cursor:pointer}.mat-sort-header-disabled{cursor:default}.mat-sort-header-container{display:flex;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-sort-header-content{display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}@keyframes _mat-sort-header-recently-cleared-ascending{from{transform:translateY(0);opacity:1}to{transform:translateY(-25%);opacity:0}}@keyframes _mat-sort-header-recently-cleared-descending{from{transform:translateY(0) rotate(180deg);opacity:1}to{transform:translateY(25%) rotate(180deg);opacity:0}}.mat-sort-header-arrow{height:12px;width:12px;position:relative;transition:transform 225ms cubic-bezier(0.4, 0, 0.2, 1),opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;overflow:visible;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}.mat-sort-header.cdk-keyboard-focused .mat-sort-header-arrow,.mat-sort-header.cdk-program-focused .mat-sort-header-arrow,.mat-sort-header:hover .mat-sort-header-arrow{opacity:.54}.mat-sort-header .mat-sort-header-sorted .mat-sort-header-arrow{opacity:1}.mat-sort-header-descending .mat-sort-header-arrow{transform:rotate(180deg)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transform:translateY(-25%)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-ascending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-recently-cleared-descending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-descending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-animations-disabled .mat-sort-header-arrow{transition-duration:0ms;animation-duration:0ms}.mat-sort-header-arrow svg{width:24px;height:24px;fill:currentColor;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;transform:translateZ(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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
371
354
  }
372
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortHeader, decorators: [{
355
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortHeader, decorators: [{
373
356
  type: Component,
374
357
  args: [{ selector: '[mat-sort-header]', exportAs: 'matSortHeader', host: {
375
358
  'class': 'mat-sort-header',
@@ -397,324 +380,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ng
397
380
  }] } });
398
381
 
399
382
  class MatSortModule {
400
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
401
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortModule, imports: [MatCommonModule, MatSort, MatSortHeader], exports: [MatSort, MatSortHeader] });
402
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortModule, providers: [MAT_SORT_HEADER_INTL_PROVIDER], imports: [MatCommonModule] });
383
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
384
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortModule, imports: [MatCommonModule, MatSort, MatSortHeader], exports: [MatSort, MatSortHeader] });
385
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortModule, imports: [MatCommonModule] });
403
386
  }
404
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: MatSortModule, decorators: [{
387
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatSortModule, decorators: [{
405
388
  type: NgModule,
406
389
  args: [{
407
390
  imports: [MatCommonModule, MatSort, MatSortHeader],
408
391
  exports: [MatSort, MatSortHeader],
409
- providers: [MAT_SORT_HEADER_INTL_PROVIDER],
410
392
  }]
411
393
  }] });
412
394
 
413
- /**
414
- * Animations used by MatSort.
415
- * @docs-private
416
- * @deprecated No longer being used, to be removed.
417
- * @breaking-change 21.0.0
418
- */
419
- const matSortAnimations = {
420
- // Represents:
421
- // trigger('indicator', [
422
- // state('active-asc, asc', style({transform: 'translateY(0px)'})),
423
- // // 10px is the height of the sort indicator, minus the width of the pointers
424
- // state('active-desc, desc', style({transform: 'translateY(10px)'})),
425
- // transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
426
- // ])
427
- /** Animation that moves the sort indicator. */
428
- indicator: {
429
- type: 7,
430
- name: 'indicator',
431
- definitions: [
432
- {
433
- type: 0,
434
- name: 'active-asc, asc',
435
- styles: { type: 6, styles: { transform: 'translateY(0px)' }, offset: null },
436
- },
437
- {
438
- type: 0,
439
- name: 'active-desc, desc',
440
- styles: { type: 6, styles: { transform: 'translateY(10px)' }, offset: null },
441
- },
442
- {
443
- type: 1,
444
- expr: 'active-asc <=> active-desc',
445
- animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
446
- options: null,
447
- },
448
- ],
449
- options: {},
450
- },
451
- // Represents:
452
- // trigger('leftPointer', [
453
- // state('active-asc, asc', style({transform: 'rotate(-45deg)'})),
454
- // state('active-desc, desc', style({transform: 'rotate(45deg)'})),
455
- // transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
456
- // ])
457
- /** Animation that rotates the left pointer of the indicator based on the sorting direction. */
458
- leftPointer: {
459
- type: 7,
460
- name: 'leftPointer',
461
- definitions: [
462
- {
463
- type: 0,
464
- name: 'active-asc, asc',
465
- styles: { type: 6, styles: { transform: 'rotate(-45deg)' }, offset: null },
466
- },
467
- {
468
- type: 0,
469
- name: 'active-desc, desc',
470
- styles: { type: 6, styles: { transform: 'rotate(45deg)' }, offset: null },
471
- },
472
- {
473
- type: 1,
474
- expr: 'active-asc <=> active-desc',
475
- animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
476
- options: null,
477
- },
478
- ],
479
- options: {},
480
- },
481
- // Represents:
482
- // trigger('rightPointer', [
483
- // state('active-asc, asc', style({transform: 'rotate(45deg)'})),
484
- // state('active-desc, desc', style({transform: 'rotate(-45deg)'})),
485
- // transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
486
- // ])
487
- /** Animation that rotates the right pointer of the indicator based on the sorting direction. */
488
- rightPointer: {
489
- type: 7,
490
- name: 'rightPointer',
491
- definitions: [
492
- {
493
- type: 0,
494
- name: 'active-asc, asc',
495
- styles: { type: 6, styles: { transform: 'rotate(45deg)' }, offset: null },
496
- },
497
- {
498
- type: 0,
499
- name: 'active-desc, desc',
500
- styles: { type: 6, styles: { transform: 'rotate(-45deg)' }, offset: null },
501
- },
502
- {
503
- type: 1,
504
- expr: 'active-asc <=> active-desc',
505
- animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
506
- options: null,
507
- },
508
- ],
509
- options: {},
510
- },
511
- // Represents:
512
- // trigger('arrowOpacity', [
513
- // state('desc-to-active, asc-to-active, active', style({opacity: 1})),
514
- // state('desc-to-hint, asc-to-hint, hint', style({opacity: 0.54})),
515
- // state(
516
- // 'hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void',
517
- // style({opacity: 0}),
518
- // ),
519
- // // Transition between all states except for immediate transitions
520
- // transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
521
- // transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
522
- // ])
523
- /** Animation that controls the arrow opacity. */
524
- arrowOpacity: {
525
- type: 7,
526
- name: 'arrowOpacity',
527
- definitions: [
528
- {
529
- type: 0,
530
- name: 'desc-to-active, asc-to-active, active',
531
- styles: { type: 6, styles: { 'opacity': 1 }, offset: null },
532
- },
533
- {
534
- type: 0,
535
- name: 'desc-to-hint, asc-to-hint, hint',
536
- styles: { type: 6, styles: { 'opacity': 0.54 }, offset: null },
537
- },
538
- {
539
- type: 0,
540
- name: 'hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void',
541
- styles: { type: 6, styles: { 'opacity': 0 }, offset: null },
542
- },
543
- {
544
- type: 1,
545
- expr: '* => asc, * => desc, * => active, * => hint, * => void',
546
- animation: { type: 4, styles: null, timings: '0ms' },
547
- options: null,
548
- },
549
- {
550
- type: 1,
551
- expr: '* <=> *',
552
- animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
553
- options: null,
554
- },
555
- ],
556
- options: {},
557
- },
558
- // Represents:
559
- // trigger('arrowPosition', [
560
- // // Hidden Above => Hint Center
561
- // transition(
562
- // '* => desc-to-hint, * => desc-to-active',
563
- // animate(
564
- // SORT_ANIMATION_TRANSITION,
565
- // keyframes([style({transform: 'translateY(-25%)'}), style({transform: 'translateY(0)'})]),
566
- // ),
567
- // ),
568
- // // Hint Center => Hidden Below
569
- // transition(
570
- // '* => hint-to-desc, * => active-to-desc',
571
- // animate(
572
- // SORT_ANIMATION_TRANSITION,
573
- // keyframes([style({transform: 'translateY(0)'}), style({transform: 'translateY(25%)'})]),
574
- // ),
575
- // ),
576
- // // Hidden Below => Hint Center
577
- // transition(
578
- // '* => asc-to-hint, * => asc-to-active',
579
- // animate(
580
- // SORT_ANIMATION_TRANSITION,
581
- // keyframes([style({transform: 'translateY(25%)'}), style({transform: 'translateY(0)'})]),
582
- // ),
583
- // ),
584
- // // Hint Center => Hidden Above
585
- // transition(
586
- // '* => hint-to-asc, * => active-to-asc',
587
- // animate(
588
- // SORT_ANIMATION_TRANSITION,
589
- // keyframes([style({transform: 'translateY(0)'}), style({transform: 'translateY(-25%)'})]),
590
- // ),
591
- // ),
592
- // state(
593
- // 'desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active',
594
- // style({transform: 'translateY(0)'}),
595
- // ),
596
- // state('hint-to-desc, active-to-desc, desc', style({transform: 'translateY(-25%)'})),
597
- // state('hint-to-asc, active-to-asc, asc', style({transform: 'translateY(25%)'})),
598
- // ])
599
- /**
600
- * Animation for the translation of the arrow as a whole. States are separated into two
601
- * groups: ones with animations and others that are immediate. Immediate states are asc, desc,
602
- * peek, and active. The other states define a specific animation (source-to-destination)
603
- * and are determined as a function of their prev user-perceived state and what the next state
604
- * should be.
605
- */
606
- arrowPosition: {
607
- type: 7,
608
- name: 'arrowPosition',
609
- definitions: [
610
- {
611
- type: 1,
612
- expr: '* => desc-to-hint, * => desc-to-active',
613
- animation: {
614
- type: 4,
615
- styles: {
616
- type: 5,
617
- 'steps': [
618
- { type: 6, styles: { transform: 'translateY(-25%)' }, offset: null },
619
- { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
620
- ],
621
- },
622
- timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
623
- },
624
- options: null,
625
- },
626
- {
627
- type: 1,
628
- expr: '* => hint-to-desc, * => active-to-desc',
629
- animation: {
630
- type: 4,
631
- styles: {
632
- type: 5,
633
- 'steps': [
634
- { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
635
- { type: 6, styles: { transform: 'translateY(25%)' }, offset: null },
636
- ],
637
- },
638
- timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
639
- },
640
- options: null,
641
- },
642
- {
643
- type: 1,
644
- expr: '* => asc-to-hint, * => asc-to-active',
645
- animation: {
646
- type: 4,
647
- styles: {
648
- type: 5,
649
- 'steps': [
650
- { type: 6, styles: { transform: 'translateY(25%)' }, offset: null },
651
- { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
652
- ],
653
- },
654
- timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
655
- },
656
- options: null,
657
- },
658
- {
659
- type: 1,
660
- expr: '* => hint-to-asc, * => active-to-asc',
661
- animation: {
662
- type: 4,
663
- styles: {
664
- type: 5,
665
- 'steps': [
666
- { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
667
- { type: 6, styles: { transform: 'translateY(-25%)' }, offset: null },
668
- ],
669
- },
670
- timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
671
- },
672
- options: null,
673
- },
674
- {
675
- type: 0,
676
- name: 'desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active',
677
- styles: { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
678
- },
679
- {
680
- type: 0,
681
- name: 'hint-to-desc, active-to-desc, desc',
682
- styles: { type: 6, styles: { transform: 'translateY(-25%)' }, offset: null },
683
- },
684
- {
685
- type: 0,
686
- name: 'hint-to-asc, active-to-asc, asc',
687
- styles: { type: 6, styles: { transform: 'translateY(25%)' }, offset: null },
688
- },
689
- ],
690
- options: {},
691
- },
692
- // Represents:
693
- // trigger('allowChildren', [
694
- // transition('* <=> *', [query('@*', animateChild(), {optional: true})]),
695
- // ])
696
- /** Necessary trigger that calls animate on children animations. */
697
- allowChildren: {
698
- type: 7,
699
- name: 'allowChildren',
700
- definitions: [
701
- {
702
- type: 1,
703
- expr: '* <=> *',
704
- animation: [
705
- {
706
- type: 11,
707
- selector: '@*',
708
- animation: { type: 9, options: null },
709
- options: { optional: true },
710
- },
711
- ],
712
- options: null,
713
- },
714
- ],
715
- options: {},
716
- },
717
- };
718
-
719
- export { MAT_SORT_DEFAULT_OPTIONS, MAT_SORT_HEADER_INTL_PROVIDER, MAT_SORT_HEADER_INTL_PROVIDER_FACTORY, MatSort, MatSortHeader, MatSortHeaderIntl, MatSortModule, matSortAnimations };
395
+ export { MAT_SORT_DEFAULT_OPTIONS, MatSort, MatSortHeader, MatSortHeaderIntl, MatSortModule };
720
396
  //# sourceMappingURL=sort.mjs.map