@angular/material 21.0.0-next.9 → 21.0.0-rc.0
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.
- package/core/tokens/_classes.scss +1 -1
- package/core/tokens/m2/_md-sys-color.scss +17 -17
- package/fesm2022/_animation-chunk.mjs +10 -16
- package/fesm2022/_animation-chunk.mjs.map +1 -1
- package/fesm2022/_date-formats-chunk.mjs +68 -164
- package/fesm2022/_date-formats-chunk.mjs.map +1 -1
- package/fesm2022/_date-range-input-harness-chunk.mjs +284 -463
- package/fesm2022/_date-range-input-harness-chunk.mjs.map +1 -1
- package/fesm2022/_error-options-chunk.mjs +56 -19
- package/fesm2022/_error-options-chunk.mjs.map +1 -1
- package/fesm2022/_error-state-chunk.mjs +24 -31
- package/fesm2022/_error-state-chunk.mjs.map +1 -1
- package/fesm2022/_form-field-chunk.mjs +1224 -1017
- package/fesm2022/_form-field-chunk.mjs.map +1 -1
- package/fesm2022/_icon-button-chunk.mjs +243 -187
- package/fesm2022/_icon-button-chunk.mjs.map +1 -1
- package/fesm2022/_icon-registry-chunk.mjs +350 -575
- package/fesm2022/_icon-registry-chunk.mjs.map +1 -1
- package/fesm2022/_input-harness-chunk.mjs +56 -107
- package/fesm2022/_input-harness-chunk.mjs.map +1 -1
- package/fesm2022/_input-value-accessor-chunk.mjs +0 -6
- package/fesm2022/_input-value-accessor-chunk.mjs.map +1 -1
- package/fesm2022/_internal-form-field-chunk.mjs +59 -19
- package/fesm2022/_internal-form-field-chunk.mjs.map +1 -1
- package/fesm2022/_line-chunk.mjs +83 -43
- package/fesm2022/_line-chunk.mjs.map +1 -1
- package/fesm2022/_option-chunk.mjs +348 -311
- package/fesm2022/_option-chunk.mjs.map +1 -1
- package/fesm2022/_option-harness-chunk.mjs +23 -39
- package/fesm2022/_option-harness-chunk.mjs.map +1 -1
- package/fesm2022/_option-module-chunk.mjs +36 -10
- package/fesm2022/_option-module-chunk.mjs.map +1 -1
- package/fesm2022/_pseudo-checkbox-chunk.mjs +79 -44
- package/fesm2022/_pseudo-checkbox-chunk.mjs.map +1 -1
- package/fesm2022/_pseudo-checkbox-module-chunk.mjs +36 -10
- package/fesm2022/_pseudo-checkbox-module-chunk.mjs.map +1 -1
- package/fesm2022/_public-api-chunk.mjs +71 -134
- package/fesm2022/_public-api-chunk.mjs.map +1 -1
- package/fesm2022/_ripple-chunk.mjs +504 -600
- package/fesm2022/_ripple-chunk.mjs.map +1 -1
- package/fesm2022/_ripple-loader-chunk.mjs +120 -138
- package/fesm2022/_ripple-loader-chunk.mjs.map +1 -1
- package/fesm2022/_ripple-module-chunk.mjs +36 -10
- package/fesm2022/_ripple-module-chunk.mjs.map +1 -1
- package/fesm2022/_structural-styles-chunk.mjs +37 -10
- package/fesm2022/_structural-styles-chunk.mjs.map +1 -1
- package/fesm2022/_tooltip-chunk.mjs +810 -888
- package/fesm2022/_tooltip-chunk.mjs.map +1 -1
- package/fesm2022/autocomplete-testing.mjs +62 -86
- package/fesm2022/autocomplete-testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +965 -1126
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge-testing.mjs +38 -54
- package/fesm2022/badge-testing.mjs.map +1 -1
- package/fesm2022/badge.mjs +321 -272
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet-testing.mjs +10 -24
- package/fesm2022/bottom-sheet-testing.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +349 -344
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-testing.mjs +60 -94
- package/fesm2022/button-testing.mjs.map +1 -1
- package/fesm2022/button-toggle-testing.mjs +76 -125
- package/fesm2022/button-toggle-testing.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +752 -662
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +263 -158
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card-testing.mjs +19 -33
- package/fesm2022/card-testing.mjs.map +1 -1
- package/fesm2022/card.mjs +576 -272
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox-testing.mjs +71 -123
- package/fesm2022/checkbox-testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +515 -477
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips-testing.mjs +201 -344
- package/fesm2022/chips-testing.mjs.map +1 -1
- package/fesm2022/chips.mjs +2552 -2289
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core-testing.mjs +14 -28
- package/fesm2022/core-testing.mjs.map +1 -1
- package/fesm2022/core.mjs +357 -328
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker-testing.mjs +15 -25
- package/fesm2022/datepicker-testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +4826 -4563
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog-testing.mjs +93 -129
- package/fesm2022/dialog-testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +810 -829
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider-testing.mjs +10 -11
- package/fesm2022/divider-testing.mjs.map +1 -1
- package/fesm2022/divider.mjs +119 -43
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion-testing.mjs +74 -130
- package/fesm2022/expansion-testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +703 -515
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field-testing-control.mjs +16 -33
- package/fesm2022/form-field-testing-control.mjs.map +1 -1
- package/fesm2022/form-field-testing.mjs +118 -179
- package/fesm2022/form-field-testing.mjs.map +1 -1
- package/fesm2022/form-field.mjs +36 -10
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list-testing.mjs +65 -113
- package/fesm2022/grid-list-testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +559 -494
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon-testing.mjs +148 -127
- package/fesm2022/icon-testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +325 -351
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input-testing.mjs +59 -99
- package/fesm2022/input-testing.mjs.map +1 -1
- package/fesm2022/input.mjs +457 -520
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list-testing.mjs +251 -434
- package/fesm2022/list-testing.mjs.map +1 -1
- package/fesm2022/list.mjs +1522 -1204
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/material.mjs +0 -5
- package/fesm2022/material.mjs.map +1 -1
- package/fesm2022/menu-testing.mjs +159 -228
- package/fesm2022/menu-testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +1338 -1343
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator-testing.mjs +55 -79
- package/fesm2022/paginator-testing.mjs.map +1 -1
- package/fesm2022/paginator.mjs +381 -309
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar-testing.mjs +12 -21
- package/fesm2022/progress-bar-testing.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +224 -169
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner-testing.mjs +13 -23
- package/fesm2022/progress-spinner-testing.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +235 -160
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio-testing.mjs +133 -208
- package/fesm2022/radio-testing.mjs.map +1 -1
- package/fesm2022/radio.mjs +712 -679
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select-testing.mjs +83 -117
- package/fesm2022/select-testing.mjs.map +1 -1
- package/fesm2022/select.mjs +1116 -1246
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav-testing.mjs +54 -120
- package/fesm2022/sidenav-testing.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +1078 -995
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle-testing.mjs +57 -92
- package/fesm2022/slide-toggle-testing.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +369 -279
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider-testing.mjs +90 -138
- package/fesm2022/slider-testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +1651 -1716
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar-testing.mjs +40 -87
- package/fesm2022/snack-bar-testing.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +763 -714
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort-testing.mjs +45 -66
- package/fesm2022/sort-testing.mjs.map +1 -1
- package/fesm2022/sort.mjs +419 -344
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper-testing.mjs +78 -154
- package/fesm2022/stepper-testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +790 -498
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table-testing.mjs +120 -213
- package/fesm2022/table-testing.mjs.map +1 -1
- package/fesm2022/table.mjs +1026 -684
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs-testing.mjs +125 -197
- package/fesm2022/tabs-testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +2351 -2028
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker-testing.mjs +113 -172
- package/fesm2022/timepicker-testing.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +1019 -826
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar-testing.mjs +16 -27
- package/fesm2022/toolbar-testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +163 -78
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip-testing.mjs +41 -52
- package/fesm2022/tooltip-testing.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +36 -10
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree-testing.mjs +86 -162
- package/fesm2022/tree-testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +638 -466
- package/fesm2022/tree.mjs.map +1 -1
- package/package.json +2 -2
- package/schematics/ng-add/index.js +1 -1
- package/types/expansion.d.ts +4 -2
- package/types/menu-testing.d.ts +2 -0
- package/types/select.d.ts +1 -1
- package/types/timepicker.d.ts +1 -0
package/fesm2022/sort.mjs
CHANGED
|
@@ -9,387 +9,462 @@ import { _animationsDisabled } from './_animation-chunk.mjs';
|
|
|
9
9
|
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
|
|
10
10
|
import '@angular/cdk/layout';
|
|
11
11
|
|
|
12
|
-
/** @docs-private */
|
|
13
12
|
function getSortDuplicateSortableIdError(id) {
|
|
14
|
-
|
|
13
|
+
return Error(`Cannot have two MatSortables with the same id (${id}).`);
|
|
15
14
|
}
|
|
16
|
-
/** @docs-private */
|
|
17
15
|
function getSortHeaderNotContainedWithinSortError() {
|
|
18
|
-
|
|
16
|
+
return Error(`MatSortHeader must be placed within a parent element with the MatSort directive.`);
|
|
19
17
|
}
|
|
20
|
-
/** @docs-private */
|
|
21
18
|
function getSortHeaderMissingIdError() {
|
|
22
|
-
|
|
19
|
+
return Error(`MatSortHeader must be provided with a unique id.`);
|
|
23
20
|
}
|
|
24
|
-
/** @docs-private */
|
|
25
21
|
function getSortInvalidDirectionError(direction) {
|
|
26
|
-
|
|
22
|
+
return Error(`${direction} is not a valid sort direction ('asc' or 'desc').`);
|
|
27
23
|
}
|
|
28
24
|
|
|
29
|
-
/** Injection token to be used to override the default options for `mat-sort`. */
|
|
30
25
|
const MAT_SORT_DEFAULT_OPTIONS = new InjectionToken('MAT_SORT_DEFAULT_OPTIONS');
|
|
31
|
-
/** Container for MatSortables to manage the sort state and provide default sort parameters. */
|
|
32
26
|
class MatSort {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
start = 'asc';
|
|
46
|
-
/** The sort direction of the currently active MatSortable. */
|
|
47
|
-
get direction() {
|
|
48
|
-
return this._direction;
|
|
27
|
+
_defaultOptions;
|
|
28
|
+
_initializedStream = new ReplaySubject(1);
|
|
29
|
+
sortables = new Map();
|
|
30
|
+
_stateChanges = new Subject();
|
|
31
|
+
active;
|
|
32
|
+
start = 'asc';
|
|
33
|
+
get direction() {
|
|
34
|
+
return this._direction;
|
|
35
|
+
}
|
|
36
|
+
set direction(direction) {
|
|
37
|
+
if (direction && direction !== 'asc' && direction !== 'desc' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
38
|
+
throw getSortInvalidDirectionError(direction);
|
|
49
39
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
40
|
+
this._direction = direction;
|
|
41
|
+
}
|
|
42
|
+
_direction = '';
|
|
43
|
+
disableClear;
|
|
44
|
+
disabled = false;
|
|
45
|
+
sortChange = new EventEmitter();
|
|
46
|
+
initialized = this._initializedStream;
|
|
47
|
+
constructor(_defaultOptions) {
|
|
48
|
+
this._defaultOptions = _defaultOptions;
|
|
49
|
+
}
|
|
50
|
+
register(sortable) {
|
|
51
|
+
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
52
|
+
if (!sortable.id) {
|
|
53
|
+
throw getSortHeaderMissingIdError();
|
|
54
|
+
}
|
|
55
|
+
if (this.sortables.has(sortable.id)) {
|
|
56
|
+
throw getSortDuplicateSortableIdError(sortable.id);
|
|
57
|
+
}
|
|
58
58
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
initialized = this._initializedStream;
|
|
71
|
-
constructor(_defaultOptions) {
|
|
72
|
-
this._defaultOptions = _defaultOptions;
|
|
59
|
+
this.sortables.set(sortable.id, sortable);
|
|
60
|
+
}
|
|
61
|
+
deregister(sortable) {
|
|
62
|
+
this.sortables.delete(sortable.id);
|
|
63
|
+
}
|
|
64
|
+
sort(sortable) {
|
|
65
|
+
if (this.active != sortable.id) {
|
|
66
|
+
this.active = sortable.id;
|
|
67
|
+
this.direction = sortable.start ? sortable.start : this.start;
|
|
68
|
+
} else {
|
|
69
|
+
this.direction = this.getNextSortDirection(sortable);
|
|
73
70
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
if (this.sortables.has(sortable.id)) {
|
|
84
|
-
throw getSortDuplicateSortableIdError(sortable.id);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
this.sortables.set(sortable.id, sortable);
|
|
88
|
-
}
|
|
89
|
-
/**
|
|
90
|
-
* Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
|
|
91
|
-
* collection of contained MatSortables.
|
|
92
|
-
*/
|
|
93
|
-
deregister(sortable) {
|
|
94
|
-
this.sortables.delete(sortable.id);
|
|
95
|
-
}
|
|
96
|
-
/** Sets the active sort id and determines the new sort direction. */
|
|
97
|
-
sort(sortable) {
|
|
98
|
-
if (this.active != sortable.id) {
|
|
99
|
-
this.active = sortable.id;
|
|
100
|
-
this.direction = sortable.start ? sortable.start : this.start;
|
|
101
|
-
}
|
|
102
|
-
else {
|
|
103
|
-
this.direction = this.getNextSortDirection(sortable);
|
|
104
|
-
}
|
|
105
|
-
this.sortChange.emit({ active: this.active, direction: this.direction });
|
|
106
|
-
}
|
|
107
|
-
/** Returns the next sort direction of the active sortable, checking for potential overrides. */
|
|
108
|
-
getNextSortDirection(sortable) {
|
|
109
|
-
if (!sortable) {
|
|
110
|
-
return '';
|
|
111
|
-
}
|
|
112
|
-
// Get the sort direction cycle with the potential sortable overrides.
|
|
113
|
-
const disableClear = sortable?.disableClear ?? this.disableClear ?? !!this._defaultOptions?.disableClear;
|
|
114
|
-
let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
|
|
115
|
-
// Get and return the next direction in the cycle
|
|
116
|
-
let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
|
|
117
|
-
if (nextDirectionIndex >= sortDirectionCycle.length) {
|
|
118
|
-
nextDirectionIndex = 0;
|
|
119
|
-
}
|
|
120
|
-
return sortDirectionCycle[nextDirectionIndex];
|
|
121
|
-
}
|
|
122
|
-
ngOnInit() {
|
|
123
|
-
this._initializedStream.next();
|
|
124
|
-
}
|
|
125
|
-
ngOnChanges() {
|
|
126
|
-
this._stateChanges.next();
|
|
71
|
+
this.sortChange.emit({
|
|
72
|
+
active: this.active,
|
|
73
|
+
direction: this.direction
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
getNextSortDirection(sortable) {
|
|
77
|
+
if (!sortable) {
|
|
78
|
+
return '';
|
|
127
79
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
80
|
+
const disableClear = sortable?.disableClear ?? this.disableClear ?? !!this._defaultOptions?.disableClear;
|
|
81
|
+
let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
|
|
82
|
+
let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
|
|
83
|
+
if (nextDirectionIndex >= sortDirectionCycle.length) {
|
|
84
|
+
nextDirectionIndex = 0;
|
|
131
85
|
}
|
|
132
|
-
|
|
133
|
-
|
|
86
|
+
return sortDirectionCycle[nextDirectionIndex];
|
|
87
|
+
}
|
|
88
|
+
ngOnInit() {
|
|
89
|
+
this._initializedStream.next();
|
|
90
|
+
}
|
|
91
|
+
ngOnChanges() {
|
|
92
|
+
this._stateChanges.next();
|
|
93
|
+
}
|
|
94
|
+
ngOnDestroy() {
|
|
95
|
+
this._stateChanges.complete();
|
|
96
|
+
this._initializedStream.complete();
|
|
97
|
+
}
|
|
98
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
99
|
+
minVersion: "12.0.0",
|
|
100
|
+
version: "20.2.0-next.2",
|
|
101
|
+
ngImport: i0,
|
|
102
|
+
type: MatSort,
|
|
103
|
+
deps: [{
|
|
104
|
+
token: MAT_SORT_DEFAULT_OPTIONS,
|
|
105
|
+
optional: true
|
|
106
|
+
}],
|
|
107
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
108
|
+
});
|
|
109
|
+
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
110
|
+
minVersion: "16.1.0",
|
|
111
|
+
version: "20.2.0-next.2",
|
|
112
|
+
type: MatSort,
|
|
113
|
+
isStandalone: true,
|
|
114
|
+
selector: "[matSort]",
|
|
115
|
+
inputs: {
|
|
116
|
+
active: ["matSortActive", "active"],
|
|
117
|
+
start: ["matSortStart", "start"],
|
|
118
|
+
direction: ["matSortDirection", "direction"],
|
|
119
|
+
disableClear: ["matSortDisableClear", "disableClear", booleanAttribute],
|
|
120
|
+
disabled: ["matSortDisabled", "disabled", booleanAttribute]
|
|
121
|
+
},
|
|
122
|
+
outputs: {
|
|
123
|
+
sortChange: "matSortChange"
|
|
124
|
+
},
|
|
125
|
+
host: {
|
|
126
|
+
classAttribute: "mat-sort"
|
|
127
|
+
},
|
|
128
|
+
exportAs: ["matSort"],
|
|
129
|
+
usesOnChanges: true,
|
|
130
|
+
ngImport: i0
|
|
131
|
+
});
|
|
134
132
|
}
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
134
|
+
minVersion: "12.0.0",
|
|
135
|
+
version: "20.2.0-next.2",
|
|
136
|
+
ngImport: i0,
|
|
137
|
+
type: MatSort,
|
|
138
|
+
decorators: [{
|
|
139
|
+
type: Directive,
|
|
140
|
+
args: [{
|
|
141
|
+
selector: '[matSort]',
|
|
142
|
+
exportAs: 'matSort',
|
|
143
|
+
host: {
|
|
144
|
+
'class': 'mat-sort'
|
|
145
|
+
}
|
|
146
|
+
}]
|
|
147
|
+
}],
|
|
148
|
+
ctorParameters: () => [{
|
|
149
|
+
type: undefined,
|
|
150
|
+
decorators: [{
|
|
151
|
+
type: Optional
|
|
152
|
+
}, {
|
|
153
|
+
type: Inject,
|
|
154
|
+
args: [MAT_SORT_DEFAULT_OPTIONS]
|
|
155
|
+
}]
|
|
156
|
+
}],
|
|
157
|
+
propDecorators: {
|
|
158
|
+
active: [{
|
|
159
|
+
type: Input,
|
|
160
|
+
args: ['matSortActive']
|
|
161
|
+
}],
|
|
162
|
+
start: [{
|
|
163
|
+
type: Input,
|
|
164
|
+
args: ['matSortStart']
|
|
165
|
+
}],
|
|
166
|
+
direction: [{
|
|
167
|
+
type: Input,
|
|
168
|
+
args: ['matSortDirection']
|
|
169
|
+
}],
|
|
170
|
+
disableClear: [{
|
|
171
|
+
type: Input,
|
|
172
|
+
args: [{
|
|
173
|
+
alias: 'matSortDisableClear',
|
|
174
|
+
transform: booleanAttribute
|
|
175
|
+
}]
|
|
176
|
+
}],
|
|
177
|
+
disabled: [{
|
|
178
|
+
type: Input,
|
|
179
|
+
args: [{
|
|
180
|
+
alias: 'matSortDisabled',
|
|
181
|
+
transform: booleanAttribute
|
|
182
|
+
}]
|
|
183
|
+
}],
|
|
184
|
+
sortChange: [{
|
|
185
|
+
type: Output,
|
|
186
|
+
args: ['matSortChange']
|
|
187
|
+
}]
|
|
188
|
+
}
|
|
189
|
+
});
|
|
169
190
|
function getSortDirectionCycle(start, disableClear) {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
191
|
+
let sortOrder = ['asc', 'desc'];
|
|
192
|
+
if (start == 'desc') {
|
|
193
|
+
sortOrder.reverse();
|
|
194
|
+
}
|
|
195
|
+
if (!disableClear) {
|
|
196
|
+
sortOrder.push('');
|
|
197
|
+
}
|
|
198
|
+
return sortOrder;
|
|
178
199
|
}
|
|
179
200
|
|
|
180
|
-
/**
|
|
181
|
-
* To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
|
|
182
|
-
* include it in a custom provider.
|
|
183
|
-
*/
|
|
184
201
|
class MatSortHeaderIntl {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
202
|
+
changes = new Subject();
|
|
203
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
204
|
+
minVersion: "12.0.0",
|
|
205
|
+
version: "20.2.0-next.2",
|
|
206
|
+
ngImport: i0,
|
|
207
|
+
type: MatSortHeaderIntl,
|
|
208
|
+
deps: [],
|
|
209
|
+
target: i0.ɵɵFactoryTarget.Injectable
|
|
210
|
+
});
|
|
211
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
212
|
+
minVersion: "12.0.0",
|
|
213
|
+
version: "20.2.0-next.2",
|
|
214
|
+
ngImport: i0,
|
|
215
|
+
type: MatSortHeaderIntl,
|
|
216
|
+
providedIn: 'root'
|
|
217
|
+
});
|
|
192
218
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
220
|
+
minVersion: "12.0.0",
|
|
221
|
+
version: "20.2.0-next.2",
|
|
222
|
+
ngImport: i0,
|
|
223
|
+
type: MatSortHeaderIntl,
|
|
224
|
+
decorators: [{
|
|
225
|
+
type: Injectable,
|
|
226
|
+
args: [{
|
|
227
|
+
providedIn: 'root'
|
|
228
|
+
}]
|
|
229
|
+
}]
|
|
230
|
+
});
|
|
197
231
|
|
|
198
|
-
/**
|
|
199
|
-
* Applies sorting behavior (click to change sort) and styles to an element, including an
|
|
200
|
-
* arrow to display the current sort direction.
|
|
201
|
-
*
|
|
202
|
-
* Must be provided with an id and contained within a parent MatSort directive.
|
|
203
|
-
*
|
|
204
|
-
* If used on header cells in a CdkTable, it will automatically default its id from its containing
|
|
205
|
-
* column definition.
|
|
206
|
-
*/
|
|
207
232
|
class MatSortHeader {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
233
|
+
_intl = inject(MatSortHeaderIntl);
|
|
234
|
+
_sort = inject(MatSort, {
|
|
235
|
+
optional: true
|
|
236
|
+
});
|
|
237
|
+
_columnDef = inject('MAT_SORT_HEADER_COLUMN_DEF', {
|
|
238
|
+
optional: true
|
|
239
|
+
});
|
|
240
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
241
|
+
_focusMonitor = inject(FocusMonitor);
|
|
242
|
+
_elementRef = inject(ElementRef);
|
|
243
|
+
_ariaDescriber = inject(AriaDescriber, {
|
|
244
|
+
optional: true
|
|
245
|
+
});
|
|
246
|
+
_renderChanges;
|
|
247
|
+
_animationsDisabled = _animationsDisabled();
|
|
248
|
+
_recentlyCleared = signal(null, ...(ngDevMode ? [{
|
|
249
|
+
debugName: "_recentlyCleared"
|
|
250
|
+
}] : []));
|
|
251
|
+
_sortButton;
|
|
252
|
+
id;
|
|
253
|
+
arrowPosition = 'after';
|
|
254
|
+
start;
|
|
255
|
+
disabled = false;
|
|
256
|
+
get sortActionDescription() {
|
|
257
|
+
return this._sortActionDescription;
|
|
258
|
+
}
|
|
259
|
+
set sortActionDescription(value) {
|
|
260
|
+
this._updateSortActionDescription(value);
|
|
261
|
+
}
|
|
262
|
+
_sortActionDescription = 'Sort';
|
|
263
|
+
disableClear;
|
|
264
|
+
constructor() {
|
|
265
|
+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
266
|
+
const defaultOptions = inject(MAT_SORT_DEFAULT_OPTIONS, {
|
|
267
|
+
optional: true
|
|
212
268
|
});
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
_elementRef = inject(ElementRef);
|
|
216
|
-
_ariaDescriber = inject(AriaDescriber, { optional: true });
|
|
217
|
-
_renderChanges;
|
|
218
|
-
_animationsDisabled = _animationsDisabled();
|
|
219
|
-
/**
|
|
220
|
-
* Indicates which state was just cleared from the sort header.
|
|
221
|
-
* Will be reset on the next interaction. Used for coordinating animations.
|
|
222
|
-
*/
|
|
223
|
-
_recentlyCleared = signal(null, ...(ngDevMode ? [{ debugName: "_recentlyCleared" }] : []));
|
|
224
|
-
/**
|
|
225
|
-
* The element with role="button" inside this component's view. We need this
|
|
226
|
-
* in order to apply a description with AriaDescriber.
|
|
227
|
-
*/
|
|
228
|
-
_sortButton;
|
|
229
|
-
/**
|
|
230
|
-
* ID of this sort header. If used within the context of a CdkColumnDef, this will default to
|
|
231
|
-
* the column's name.
|
|
232
|
-
*/
|
|
233
|
-
id;
|
|
234
|
-
/** Sets the position of the arrow that displays when sorted. */
|
|
235
|
-
arrowPosition = 'after';
|
|
236
|
-
/** Overrides the sort start value of the containing MatSort for this MatSortable. */
|
|
237
|
-
start;
|
|
238
|
-
/** whether the sort header is disabled. */
|
|
239
|
-
disabled = false;
|
|
240
|
-
/**
|
|
241
|
-
* Description applied to MatSortHeader's button element with aria-describedby. This text should
|
|
242
|
-
* describe the action that will occur when the user clicks the sort header.
|
|
243
|
-
*/
|
|
244
|
-
get sortActionDescription() {
|
|
245
|
-
return this._sortActionDescription;
|
|
246
|
-
}
|
|
247
|
-
set sortActionDescription(value) {
|
|
248
|
-
this._updateSortActionDescription(value);
|
|
249
|
-
}
|
|
250
|
-
// Default the action description to "Sort" because it's better than nothing.
|
|
251
|
-
// Without a description, the button's label comes from the sort header text content,
|
|
252
|
-
// which doesn't give any indication that it performs a sorting operation.
|
|
253
|
-
_sortActionDescription = 'Sort';
|
|
254
|
-
/** Overrides the disable clear value of the containing MatSort for this MatSortable. */
|
|
255
|
-
disableClear;
|
|
256
|
-
constructor() {
|
|
257
|
-
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
258
|
-
const defaultOptions = inject(MAT_SORT_DEFAULT_OPTIONS, {
|
|
259
|
-
optional: true,
|
|
260
|
-
});
|
|
261
|
-
// Note that we use a string token for the `_columnDef`, because the value is provided both by
|
|
262
|
-
// `material/table` and `cdk/table` and we can't have the CDK depending on Material,
|
|
263
|
-
// and we want to avoid having the sort header depending on the CDK table because
|
|
264
|
-
// of this single reference.
|
|
265
|
-
if (!this._sort && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
266
|
-
throw getSortHeaderNotContainedWithinSortError();
|
|
267
|
-
}
|
|
268
|
-
if (defaultOptions?.arrowPosition) {
|
|
269
|
-
this.arrowPosition = defaultOptions?.arrowPosition;
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
ngOnInit() {
|
|
273
|
-
if (!this.id && this._columnDef) {
|
|
274
|
-
this.id = this._columnDef.name;
|
|
275
|
-
}
|
|
276
|
-
this._sort.register(this);
|
|
277
|
-
this._renderChanges = merge(this._sort._stateChanges, this._sort.sortChange).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
278
|
-
this._sortButton = this._elementRef.nativeElement.querySelector('.mat-sort-header-container');
|
|
279
|
-
this._updateSortActionDescription(this._sortActionDescription);
|
|
269
|
+
if (!this._sort && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
270
|
+
throw getSortHeaderNotContainedWithinSortError();
|
|
280
271
|
}
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
// things differently based on the focus origin.
|
|
284
|
-
this._focusMonitor.monitor(this._elementRef, true).subscribe(() => {
|
|
285
|
-
// We need the delay here, because we can trigger a signal write error if the header
|
|
286
|
-
// has a signal bound to `disabled` which causes it to be blurred (see #31723.)
|
|
287
|
-
Promise.resolve().then(() => this._recentlyCleared.set(null));
|
|
288
|
-
});
|
|
272
|
+
if (defaultOptions?.arrowPosition) {
|
|
273
|
+
this.arrowPosition = defaultOptions?.arrowPosition;
|
|
289
274
|
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
if (this._sortButton) {
|
|
295
|
-
this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
|
|
296
|
-
}
|
|
275
|
+
}
|
|
276
|
+
ngOnInit() {
|
|
277
|
+
if (!this.id && this._columnDef) {
|
|
278
|
+
this.id = this._columnDef.name;
|
|
297
279
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
_isSorted() {
|
|
315
|
-
return (this._sort.active == this.id &&
|
|
316
|
-
(this._sort.direction === 'asc' || this._sort.direction === 'desc'));
|
|
280
|
+
this._sort.register(this);
|
|
281
|
+
this._renderChanges = merge(this._sort._stateChanges, this._sort.sortChange).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
282
|
+
this._sortButton = this._elementRef.nativeElement.querySelector('.mat-sort-header-container');
|
|
283
|
+
this._updateSortActionDescription(this._sortActionDescription);
|
|
284
|
+
}
|
|
285
|
+
ngAfterViewInit() {
|
|
286
|
+
this._focusMonitor.monitor(this._elementRef, true).subscribe(() => {
|
|
287
|
+
Promise.resolve().then(() => this._recentlyCleared.set(null));
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
ngOnDestroy() {
|
|
291
|
+
this._focusMonitor.stopMonitoring(this._elementRef);
|
|
292
|
+
this._sort.deregister(this);
|
|
293
|
+
this._renderChanges?.unsubscribe();
|
|
294
|
+
if (this._sortButton) {
|
|
295
|
+
this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
|
|
317
296
|
}
|
|
318
|
-
|
|
319
|
-
|
|
297
|
+
}
|
|
298
|
+
_toggleOnInteraction() {
|
|
299
|
+
if (!this._isDisabled()) {
|
|
300
|
+
const wasSorted = this._isSorted();
|
|
301
|
+
const prevDirection = this._sort.direction;
|
|
302
|
+
this._sort.sort(this);
|
|
303
|
+
this._recentlyCleared.set(wasSorted && !this._isSorted() ? prevDirection : null);
|
|
320
304
|
}
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
*/
|
|
327
|
-
_getAriaSortAttribute() {
|
|
328
|
-
if (!this._isSorted()) {
|
|
329
|
-
return 'none';
|
|
330
|
-
}
|
|
331
|
-
return this._sort.direction == 'asc' ? 'ascending' : 'descending';
|
|
305
|
+
}
|
|
306
|
+
_handleKeydown(event) {
|
|
307
|
+
if (event.keyCode === SPACE || event.keyCode === ENTER) {
|
|
308
|
+
event.preventDefault();
|
|
309
|
+
this._toggleOnInteraction();
|
|
332
310
|
}
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
311
|
+
}
|
|
312
|
+
_isSorted() {
|
|
313
|
+
return this._sort.active == this.id && (this._sort.direction === 'asc' || this._sort.direction === 'desc');
|
|
314
|
+
}
|
|
315
|
+
_isDisabled() {
|
|
316
|
+
return this._sort.disabled || this.disabled;
|
|
317
|
+
}
|
|
318
|
+
_getAriaSortAttribute() {
|
|
319
|
+
if (!this._isSorted()) {
|
|
320
|
+
return 'none';
|
|
336
321
|
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
|
|
347
|
-
this._ariaDescriber?.describe(this._sortButton, newDescription);
|
|
348
|
-
}
|
|
349
|
-
this._sortActionDescription = newDescription;
|
|
322
|
+
return this._sort.direction == 'asc' ? 'ascending' : 'descending';
|
|
323
|
+
}
|
|
324
|
+
_renderArrow() {
|
|
325
|
+
return !this._isDisabled() || this._isSorted();
|
|
326
|
+
}
|
|
327
|
+
_updateSortActionDescription(newDescription) {
|
|
328
|
+
if (this._sortButton) {
|
|
329
|
+
this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
|
|
330
|
+
this._ariaDescriber?.describe(this._sortButton, newDescription);
|
|
350
331
|
}
|
|
351
|
-
|
|
352
|
-
|
|
332
|
+
this._sortActionDescription = newDescription;
|
|
333
|
+
}
|
|
334
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
335
|
+
minVersion: "12.0.0",
|
|
336
|
+
version: "20.2.0-next.2",
|
|
337
|
+
ngImport: i0,
|
|
338
|
+
type: MatSortHeader,
|
|
339
|
+
deps: [],
|
|
340
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
341
|
+
});
|
|
342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
343
|
+
minVersion: "17.0.0",
|
|
344
|
+
version: "20.2.0-next.2",
|
|
345
|
+
type: MatSortHeader,
|
|
346
|
+
isStandalone: true,
|
|
347
|
+
selector: "[mat-sort-header]",
|
|
348
|
+
inputs: {
|
|
349
|
+
id: ["mat-sort-header", "id"],
|
|
350
|
+
arrowPosition: "arrowPosition",
|
|
351
|
+
start: "start",
|
|
352
|
+
disabled: ["disabled", "disabled", booleanAttribute],
|
|
353
|
+
sortActionDescription: "sortActionDescription",
|
|
354
|
+
disableClear: ["disableClear", "disableClear", booleanAttribute]
|
|
355
|
+
},
|
|
356
|
+
host: {
|
|
357
|
+
listeners: {
|
|
358
|
+
"click": "_toggleOnInteraction()",
|
|
359
|
+
"keydown": "_handleKeydown($event)",
|
|
360
|
+
"mouseleave": "_recentlyCleared.set(null)"
|
|
361
|
+
},
|
|
362
|
+
properties: {
|
|
363
|
+
"attr.aria-sort": "_getAriaSortAttribute()",
|
|
364
|
+
"class.mat-sort-header-disabled": "_isDisabled()"
|
|
365
|
+
},
|
|
366
|
+
classAttribute: "mat-sort-header"
|
|
367
|
+
},
|
|
368
|
+
exportAs: ["matSortHeader"],
|
|
369
|
+
ngImport: i0,
|
|
370
|
+
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]=\"_sort.direction === 'desc'\"\n [class.mat-sort-header-ascending]=\"_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 <ng-content select=\"[matSortHeaderIcon]\">\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 </ng-content>\n </div>\n }\n</div>\n",
|
|
371
|
+
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,.mat-sort-header-arrow [matSortHeaderIcon]{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"],
|
|
372
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
373
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
374
|
+
});
|
|
353
375
|
}
|
|
354
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
376
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
377
|
+
minVersion: "12.0.0",
|
|
378
|
+
version: "20.2.0-next.2",
|
|
379
|
+
ngImport: i0,
|
|
380
|
+
type: MatSortHeader,
|
|
381
|
+
decorators: [{
|
|
382
|
+
type: Component,
|
|
383
|
+
args: [{
|
|
384
|
+
selector: '[mat-sort-header]',
|
|
385
|
+
exportAs: 'matSortHeader',
|
|
386
|
+
host: {
|
|
387
|
+
'class': 'mat-sort-header',
|
|
388
|
+
'(click)': '_toggleOnInteraction()',
|
|
389
|
+
'(keydown)': '_handleKeydown($event)',
|
|
390
|
+
'(mouseleave)': '_recentlyCleared.set(null)',
|
|
391
|
+
'[attr.aria-sort]': '_getAriaSortAttribute()',
|
|
392
|
+
'[class.mat-sort-header-disabled]': '_isDisabled()'
|
|
393
|
+
},
|
|
394
|
+
encapsulation: ViewEncapsulation.None,
|
|
395
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
396
|
+
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]=\"_sort.direction === 'desc'\"\n [class.mat-sort-header-ascending]=\"_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 <ng-content select=\"[matSortHeaderIcon]\">\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 </ng-content>\n </div>\n }\n</div>\n",
|
|
397
|
+
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,.mat-sort-header-arrow [matSortHeaderIcon]{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"]
|
|
398
|
+
}]
|
|
399
|
+
}],
|
|
400
|
+
ctorParameters: () => [],
|
|
401
|
+
propDecorators: {
|
|
402
|
+
id: [{
|
|
403
|
+
type: Input,
|
|
404
|
+
args: ['mat-sort-header']
|
|
405
|
+
}],
|
|
406
|
+
arrowPosition: [{
|
|
407
|
+
type: Input
|
|
408
|
+
}],
|
|
409
|
+
start: [{
|
|
410
|
+
type: Input
|
|
411
|
+
}],
|
|
412
|
+
disabled: [{
|
|
413
|
+
type: Input,
|
|
414
|
+
args: [{
|
|
415
|
+
transform: booleanAttribute
|
|
416
|
+
}]
|
|
417
|
+
}],
|
|
418
|
+
sortActionDescription: [{
|
|
419
|
+
type: Input
|
|
420
|
+
}],
|
|
421
|
+
disableClear: [{
|
|
422
|
+
type: Input,
|
|
423
|
+
args: [{
|
|
424
|
+
transform: booleanAttribute
|
|
425
|
+
}]
|
|
426
|
+
}]
|
|
427
|
+
}
|
|
428
|
+
});
|
|
380
429
|
|
|
381
430
|
class MatSortModule {
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
431
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
432
|
+
minVersion: "12.0.0",
|
|
433
|
+
version: "20.2.0-next.2",
|
|
434
|
+
ngImport: i0,
|
|
435
|
+
type: MatSortModule,
|
|
436
|
+
deps: [],
|
|
437
|
+
target: i0.ɵɵFactoryTarget.NgModule
|
|
438
|
+
});
|
|
439
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({
|
|
440
|
+
minVersion: "14.0.0",
|
|
441
|
+
version: "20.2.0-next.2",
|
|
442
|
+
ngImport: i0,
|
|
443
|
+
type: MatSortModule,
|
|
444
|
+
imports: [MatSort, MatSortHeader],
|
|
445
|
+
exports: [MatSort, MatSortHeader, BidiModule]
|
|
446
|
+
});
|
|
447
|
+
static ɵinj = i0.ɵɵngDeclareInjector({
|
|
448
|
+
minVersion: "12.0.0",
|
|
449
|
+
version: "20.2.0-next.2",
|
|
450
|
+
ngImport: i0,
|
|
451
|
+
type: MatSortModule,
|
|
452
|
+
imports: [BidiModule]
|
|
453
|
+
});
|
|
385
454
|
}
|
|
386
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
456
|
+
minVersion: "12.0.0",
|
|
457
|
+
version: "20.2.0-next.2",
|
|
458
|
+
ngImport: i0,
|
|
459
|
+
type: MatSortModule,
|
|
460
|
+
decorators: [{
|
|
461
|
+
type: NgModule,
|
|
462
|
+
args: [{
|
|
463
|
+
imports: [MatSort, MatSortHeader],
|
|
464
|
+
exports: [MatSort, MatSortHeader, BidiModule]
|
|
465
|
+
}]
|
|
466
|
+
}]
|
|
467
|
+
});
|
|
393
468
|
|
|
394
469
|
export { MAT_SORT_DEFAULT_OPTIONS, MatSort, MatSortHeader, MatSortHeaderIntl, MatSortModule };
|
|
395
470
|
//# sourceMappingURL=sort.mjs.map
|