@angular/material 18.0.3 → 18.0.5
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/autocomplete/index.d.ts +3 -0
- package/bottom-sheet/index.d.ts +0 -1
- package/button/_button-base.scss +3 -1
- package/button/index.d.ts +7 -1
- package/button-toggle/index.d.ts +2 -2
- package/checkbox/index.d.ts +5 -3
- package/chips/index.d.ts +9 -5
- package/core/_core-theme.scss +8 -14
- package/core/_core.scss +18 -4
- package/core/style/_vendor-prefixes.scss +5 -0
- package/core/tokens/_density.scss +2 -1
- package/core/tokens/m2/_index.scss +2 -2
- package/core/tokens/m2/mat/_app.scss +13 -1
- package/core/tokens/m2/mat/_menu.scss +3 -0
- package/core/tokens/m2/mat/_paginator.scss +1 -0
- package/core/tokens/m2/mdc/{_tab.scss → _secondary-navigation-tab.scss} +1 -1
- package/core/tokens/m3/_index.scss +2 -2
- package/core/tokens/m3/mat/_app.scss +9 -0
- package/core/tokens/m3/mat/_menu.scss +3 -0
- package/core/tokens/m3/mdc/{_tab.scss → _secondary-navigation-tab.scss} +1 -1
- package/datepicker/index.d.ts +17 -1
- package/esm2022/autocomplete/autocomplete-trigger.mjs +28 -1
- package/esm2022/bottom-sheet/bottom-sheet-container.mjs +6 -7
- package/esm2022/button/button-base.mjs +1 -1
- package/esm2022/button/button.mjs +4 -4
- package/esm2022/button/fab.mjs +8 -8
- package/esm2022/button/icon-button.mjs +4 -4
- package/esm2022/button-toggle/button-toggle.mjs +30 -21
- package/esm2022/checkbox/checkbox.mjs +1 -1
- package/esm2022/chips/chip-grid.mjs +11 -4
- package/esm2022/chips/chip-row.mjs +8 -13
- package/esm2022/chips/chip-set.mjs +7 -3
- package/esm2022/chips/chip.mjs +1 -1
- package/esm2022/core/option/optgroup.mjs +2 -2
- package/esm2022/core/option/option.mjs +3 -3
- package/esm2022/core/version.mjs +1 -1
- package/esm2022/datepicker/calendar.mjs +6 -3
- package/esm2022/datepicker/date-range-input-parts.mjs +14 -10
- package/esm2022/datepicker/date-range-input.mjs +17 -7
- package/esm2022/datepicker/datepicker-base.mjs +5 -1
- package/esm2022/datepicker/datepicker-input.mjs +16 -5
- package/esm2022/form-field/form-field.mjs +12 -6
- package/esm2022/icon/icon.mjs +8 -2
- package/esm2022/list/list-option.mjs +10 -4
- package/esm2022/list/selection-list.mjs +9 -2
- package/esm2022/menu/menu.mjs +13 -4
- package/esm2022/paginator/paginator.mjs +3 -3
- package/esm2022/progress-bar/progress-bar.mjs +10 -4
- package/esm2022/progress-spinner/progress-spinner.mjs +8 -2
- package/esm2022/radio/radio.mjs +12 -6
- package/esm2022/sidenav/drawer.mjs +4 -1
- package/esm2022/slide-toggle/slide-toggle-config.mjs +1 -1
- package/esm2022/slide-toggle/slide-toggle.mjs +1 -1
- package/esm2022/slider/slider.mjs +1 -1
- package/esm2022/stepper/step-header.mjs +1 -1
- package/esm2022/stepper/stepper.mjs +1 -1
- package/esm2022/tabs/tab-group.mjs +9 -4
- package/esm2022/tabs/tab-header.mjs +3 -3
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +19 -7
- package/esm2022/toolbar/toolbar.mjs +1 -1
- package/esm2022/tooltip/tooltip.mjs +3 -3
- package/fesm2022/autocomplete.mjs +27 -0
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +5 -6
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +29 -20
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +16 -16
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +15 -9
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +5 -5
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +42 -10
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/form-field.mjs +9 -3
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/icon.mjs +7 -1
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/list.mjs +17 -4
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +12 -3
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +2 -2
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +9 -3
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +7 -1
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +11 -5
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +4 -1
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/tabs.mjs +28 -11
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +2 -2
- package/fesm2022/tooltip.mjs.map +1 -1
- package/form-field/index.d.ts +12 -2
- package/icon/index.d.ts +14 -2
- package/list/_list-theme.scss +8 -5
- package/list/index.d.ts +15 -2
- package/package.json +2 -2
- package/paginator/index.d.ts +7 -1
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +10 -7
- package/progress-bar/index.d.ts +14 -2
- package/progress-spinner/index.d.ts +14 -2
- package/radio/_radio-common.scss +238 -0
- package/radio/_radio-theme.scss +25 -32
- package/radio/index.d.ts +21 -2
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-generate/m3-theme/index_bundled.js +2 -2
- package/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +1 -1
- package/schematics/ng-update/index_bundled.js +31 -31
- package/sidenav/index.d.ts +1 -0
- package/slide-toggle/index.d.ts +14 -2
- package/slider/index.d.ts +7 -1
- package/stepper/index.d.ts +21 -3
- package/tabs/_tabs-common.scss +94 -36
- package/tabs/_tabs-theme.scss +33 -25
- package/tabs/index.d.ts +27 -4
- package/toolbar/index.d.ts +7 -1
- package/tooltip/_tooltip-theme.scss +18 -16
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
|
|
2
|
+
@use '../core/tokens/token-utils';
|
|
3
|
+
|
|
4
|
+
$_icon-size: 20px;
|
|
5
|
+
|
|
6
|
+
@function _enter-transition($name) {
|
|
7
|
+
@return $name 90ms cubic-bezier(0, 0, 0.2, 1);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@function _exit-transition($name) {
|
|
11
|
+
@return $name 90ms cubic-bezier(0.4, 0, 0.6, 1);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// Structural styles for a radio button. Shared with the selection list.
|
|
15
|
+
@mixin radio-structure($is-interactive) {
|
|
16
|
+
$tokens: tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots();
|
|
17
|
+
|
|
18
|
+
.mdc-radio {
|
|
19
|
+
display: inline-block;
|
|
20
|
+
position: relative;
|
|
21
|
+
flex: 0 0 auto;
|
|
22
|
+
box-sizing: content-box;
|
|
23
|
+
width: $_icon-size;
|
|
24
|
+
height: $_icon-size;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
|
|
27
|
+
// This is something we inherited from MDC, but it shouldn't be necessary.
|
|
28
|
+
// Removing it will likely lead to screenshot diffs.
|
|
29
|
+
will-change: opacity, transform, border-color, color;
|
|
30
|
+
|
|
31
|
+
@include token-utils.use-tokens($tokens...) {
|
|
32
|
+
$size-token: var(#{token-utils.get-token-variable(state-layer-size)});
|
|
33
|
+
padding: calc((#{$size-token} - #{$_icon-size}) / 2);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@if ($is-interactive) {
|
|
37
|
+
// MDC's hover indication comes from their ripple which we don't use.
|
|
38
|
+
&:hover .mdc-radio__native-control:not([disabled]):not(:focus) {
|
|
39
|
+
& ~ .mdc-radio__background::before {
|
|
40
|
+
opacity: 0.04;
|
|
41
|
+
transform: scale(1);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:hover .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {
|
|
46
|
+
.mdc-radio__outer-circle {
|
|
47
|
+
@include token-utils.use-tokens($tokens...) {
|
|
48
|
+
@include token-utils.create-token-slot(border-color, unselected-hover-icon-color);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:hover .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
|
|
54
|
+
.mdc-radio__outer-circle,
|
|
55
|
+
.mdc-radio__inner-circle {
|
|
56
|
+
@include token-utils.use-tokens($tokens...) {
|
|
57
|
+
@include token-utils.create-token-slot(border-color, selected-hover-icon-color);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:active .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {
|
|
63
|
+
.mdc-radio__outer-circle {
|
|
64
|
+
@include token-utils.use-tokens($tokens...) {
|
|
65
|
+
@include token-utils.create-token-slot(border-color, unselected-pressed-icon-color);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:active .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
|
|
71
|
+
.mdc-radio__outer-circle,
|
|
72
|
+
.mdc-radio__inner-circle {
|
|
73
|
+
@include token-utils.use-tokens($tokens...) {
|
|
74
|
+
@include token-utils.create-token-slot(border-color, selected-pressed-icon-color);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.mdc-radio__background {
|
|
82
|
+
display: inline-block;
|
|
83
|
+
position: relative;
|
|
84
|
+
box-sizing: border-box;
|
|
85
|
+
width: $_icon-size;
|
|
86
|
+
height: $_icon-size;
|
|
87
|
+
|
|
88
|
+
&::before {
|
|
89
|
+
position: absolute;
|
|
90
|
+
transform: scale(0, 0);
|
|
91
|
+
border-radius: 50%;
|
|
92
|
+
opacity: 0;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
content: '';
|
|
95
|
+
transition: _exit-transition(opacity), _exit-transition(transform);
|
|
96
|
+
|
|
97
|
+
@include token-utils.use-tokens($tokens...) {
|
|
98
|
+
$size-token: var(#{token-utils.get-token-variable(state-layer-size)});
|
|
99
|
+
$offset: calc(-1 * (#{$size-token} - #{$_icon-size}) / 2);
|
|
100
|
+
width: $size-token;
|
|
101
|
+
height: $size-token;
|
|
102
|
+
top: $offset;
|
|
103
|
+
left: $offset;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.mdc-radio__outer-circle {
|
|
109
|
+
position: absolute;
|
|
110
|
+
top: 0;
|
|
111
|
+
left: 0;
|
|
112
|
+
box-sizing: border-box;
|
|
113
|
+
width: 100%;
|
|
114
|
+
height: 100%;
|
|
115
|
+
border-width: 2px;
|
|
116
|
+
border-style: solid;
|
|
117
|
+
border-radius: 50%;
|
|
118
|
+
transition: _exit-transition(border-color);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.mdc-radio__inner-circle {
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: 0;
|
|
124
|
+
left: 0;
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
width: 100%;
|
|
127
|
+
height: 100%;
|
|
128
|
+
transform: scale(0, 0);
|
|
129
|
+
border-width: 10px;
|
|
130
|
+
border-style: solid;
|
|
131
|
+
border-radius: 50%;
|
|
132
|
+
transition: _exit-transition(transform), _exit-transition(border-color);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.mdc-radio__native-control {
|
|
136
|
+
position: absolute;
|
|
137
|
+
margin: 0;
|
|
138
|
+
padding: 0;
|
|
139
|
+
opacity: 0;
|
|
140
|
+
top: 0;
|
|
141
|
+
right: 0;
|
|
142
|
+
left: 0;
|
|
143
|
+
cursor: inherit;
|
|
144
|
+
z-index: 1;
|
|
145
|
+
|
|
146
|
+
@include token-utils.use-tokens($tokens...) {
|
|
147
|
+
@include token-utils.create-token-slot(width, state-layer-size);
|
|
148
|
+
@include token-utils.create-token-slot(height, state-layer-size);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&:checked, &:disabled {
|
|
152
|
+
+ .mdc-radio__background {
|
|
153
|
+
transition: _enter-transition(opacity), _enter-transition(transform);
|
|
154
|
+
|
|
155
|
+
.mdc-radio__outer-circle {
|
|
156
|
+
transition: _enter-transition(border-color);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.mdc-radio__inner-circle {
|
|
160
|
+
transition: _enter-transition(transform), _enter-transition(border-color);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@if ($is-interactive) {
|
|
166
|
+
&:focus + .mdc-radio__background::before {
|
|
167
|
+
transform: scale(1);
|
|
168
|
+
opacity: 0.12;
|
|
169
|
+
transition: _enter-transition(opacity), _enter-transition(transform);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&:disabled {
|
|
174
|
+
@include token-utils.use-tokens($tokens...) {
|
|
175
|
+
&:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
|
|
176
|
+
@include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
|
|
177
|
+
@include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
+ .mdc-radio__background {
|
|
181
|
+
cursor: default;
|
|
182
|
+
|
|
183
|
+
.mdc-radio__inner-circle,
|
|
184
|
+
.mdc-radio__outer-circle {
|
|
185
|
+
@include token-utils.create-token-slot(border-color, disabled-selected-icon-color);
|
|
186
|
+
@include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&:enabled {
|
|
193
|
+
@include token-utils.use-tokens($tokens...) {
|
|
194
|
+
&:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
|
|
195
|
+
@include token-utils.create-token-slot(border-color, unselected-icon-color);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&:checked + .mdc-radio__background {
|
|
199
|
+
.mdc-radio__outer-circle,
|
|
200
|
+
.mdc-radio__inner-circle {
|
|
201
|
+
@include token-utils.create-token-slot(border-color, selected-icon-color);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@if ($is-interactive) {
|
|
206
|
+
&:focus:checked + .mdc-radio__background {
|
|
207
|
+
.mdc-radio__inner-circle,
|
|
208
|
+
.mdc-radio__outer-circle {
|
|
209
|
+
@include token-utils.create-token-slot(border-color, selected-focus-icon-color);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
&:checked + .mdc-radio__background .mdc-radio__inner-circle {
|
|
217
|
+
transform: scale(0.5);
|
|
218
|
+
transition: _enter-transition(transform), _enter-transition(border-color);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.mdc-radio--disabled {
|
|
223
|
+
cursor: default;
|
|
224
|
+
pointer-events: none;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// Conditionally disables the animations of the radio button.
|
|
229
|
+
@mixin radio-noop-animations() {
|
|
230
|
+
&._mat-animation-noopable {
|
|
231
|
+
.mdc-radio__background::before,
|
|
232
|
+
.mdc-radio__outer-circle,
|
|
233
|
+
.mdc-radio__inner-circle {
|
|
234
|
+
// Needs to be `!important`, because MDC's selectors are really specific.
|
|
235
|
+
transition: none !important;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
package/radio/_radio-theme.scss
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@use '@material/radio/radio-theme' as mdc-radio-theme;
|
|
2
1
|
@use '../core/style/sass-utils';
|
|
3
2
|
@use '../core/theming/theming';
|
|
4
3
|
@use '../core/theming/inspection';
|
|
@@ -16,11 +15,10 @@
|
|
|
16
15
|
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
|
|
17
16
|
} @else {
|
|
18
17
|
@include sass-utils.current-selector-or-root() {
|
|
19
|
-
@include
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
tokens-mat-radio.get-unthemable-tokens()
|
|
23
|
-
);
|
|
18
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix,
|
|
19
|
+
tokens-mdc-radio.get-unthemable-tokens());
|
|
20
|
+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
|
|
21
|
+
tokens-mat-radio.get-unthemable-tokens());
|
|
24
22
|
}
|
|
25
23
|
}
|
|
26
24
|
}
|
|
@@ -36,27 +34,24 @@
|
|
|
36
34
|
} @else {
|
|
37
35
|
.mat-mdc-radio-button {
|
|
38
36
|
&.mat-primary {
|
|
39
|
-
@include
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
tokens-mat-radio.get-color-tokens($theme, primary)
|
|
43
|
-
);
|
|
37
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix,
|
|
38
|
+
tokens-mdc-radio.get-color-tokens($theme, primary));
|
|
39
|
+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
|
|
40
|
+
tokens-mat-radio.get-color-tokens($theme, primary));
|
|
44
41
|
}
|
|
45
42
|
|
|
46
43
|
&.mat-accent {
|
|
47
|
-
@include
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
tokens-mat-radio.get-color-tokens($theme)
|
|
51
|
-
);
|
|
44
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix,
|
|
45
|
+
tokens-mdc-radio.get-color-tokens($theme));
|
|
46
|
+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
|
|
47
|
+
tokens-mat-radio.get-color-tokens($theme));
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
&.mat-warn {
|
|
55
|
-
@include
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
tokens-mat-radio.get-color-tokens($theme, warn)
|
|
59
|
-
);
|
|
51
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix,
|
|
52
|
+
tokens-mdc-radio.get-color-tokens($theme, warn));
|
|
53
|
+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
|
|
54
|
+
tokens-mat-radio.get-color-tokens($theme, warn));
|
|
60
55
|
}
|
|
61
56
|
}
|
|
62
57
|
}
|
|
@@ -69,11 +64,10 @@
|
|
|
69
64
|
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
|
|
70
65
|
} @else {
|
|
71
66
|
@include sass-utils.current-selector-or-root() {
|
|
72
|
-
@include
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
tokens-mat-radio.get-typography-tokens($theme)
|
|
76
|
-
);
|
|
67
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix,
|
|
68
|
+
tokens-mdc-radio.get-typography-tokens($theme));
|
|
69
|
+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
|
|
70
|
+
tokens-mat-radio.get-typography-tokens($theme));
|
|
77
71
|
}
|
|
78
72
|
}
|
|
79
73
|
}
|
|
@@ -87,11 +81,10 @@
|
|
|
87
81
|
$density-scale: inspection.get-theme-density($theme);
|
|
88
82
|
|
|
89
83
|
@include sass-utils.current-selector-or-root() {
|
|
90
|
-
@include
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
tokens-mat-radio.get-density-tokens($theme)
|
|
94
|
-
);
|
|
84
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix,
|
|
85
|
+
tokens-mdc-radio.get-density-tokens($theme));
|
|
86
|
+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
|
|
87
|
+
tokens-mat-radio.get-density-tokens($theme));
|
|
95
88
|
}
|
|
96
89
|
}
|
|
97
90
|
}
|
|
@@ -142,6 +135,6 @@
|
|
|
142
135
|
);
|
|
143
136
|
$mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...);
|
|
144
137
|
$mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...);
|
|
145
|
-
@include mdc-radio
|
|
138
|
+
@include token-utils.create-token-values(tokens-mdc-radio.$prefix, $mdc-radio-tokens);
|
|
146
139
|
@include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens);
|
|
147
140
|
}
|
package/radio/index.d.ts
CHANGED
|
@@ -85,7 +85,13 @@ export declare class MatRadioButton implements OnInit, AfterViewInit, DoCheck, O
|
|
|
85
85
|
/** Whether the radio button is required. */
|
|
86
86
|
get required(): boolean;
|
|
87
87
|
set required(value: boolean);
|
|
88
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* Theme color of the radio button. This API is supported in M2 themes only, it
|
|
90
|
+
* has no effect in M3 themes.
|
|
91
|
+
*
|
|
92
|
+
* For information on applying color variants in M3, see
|
|
93
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
94
|
+
*/
|
|
89
95
|
get color(): ThemePalette;
|
|
90
96
|
set color(newValue: ThemePalette);
|
|
91
97
|
private _color;
|
|
@@ -166,6 +172,13 @@ export declare class MatRadioChange {
|
|
|
166
172
|
}
|
|
167
173
|
|
|
168
174
|
export declare interface MatRadioDefaultOptions {
|
|
175
|
+
/**
|
|
176
|
+
* Theme color of the radio button. This API is supported in M2 themes only, it
|
|
177
|
+
* has no effect in M3 themes.
|
|
178
|
+
*
|
|
179
|
+
* For information on applying color variants in M3, see
|
|
180
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
181
|
+
*/
|
|
169
182
|
color: ThemePalette;
|
|
170
183
|
}
|
|
171
184
|
|
|
@@ -205,7 +218,13 @@ export declare class MatRadioGroup implements AfterContentInit, OnDestroy, Contr
|
|
|
205
218
|
readonly change: EventEmitter<MatRadioChange>;
|
|
206
219
|
/** Child radio buttons. */
|
|
207
220
|
_radios: QueryList<MatRadioButton>;
|
|
208
|
-
/**
|
|
221
|
+
/**
|
|
222
|
+
* Theme color of the radio buttons in the group. This API is supported in M2
|
|
223
|
+
* themes only, it has no effect in M3 themes.
|
|
224
|
+
*
|
|
225
|
+
* For information on applying color variants in M3, see
|
|
226
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
227
|
+
*/
|
|
209
228
|
color: ThemePalette;
|
|
210
229
|
/** Name of the radio button group. All radio buttons inside this group will use this name. */
|
|
211
230
|
get name(): string;
|
|
@@ -18,7 +18,7 @@ const package_config_1 = require("./package-config");
|
|
|
18
18
|
* Note that the fallback version range does not use caret, but tilde because that is
|
|
19
19
|
* the default for Angular framework dependencies in CLI projects.
|
|
20
20
|
*/
|
|
21
|
-
const fallbackMaterialVersionRange = `~18.0.
|
|
21
|
+
const fallbackMaterialVersionRange = `~18.0.5`;
|
|
22
22
|
/**
|
|
23
23
|
* Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
|
|
24
24
|
* automatically executed if developers run `ng add @angular/material`.
|
|
@@ -18,7 +18,7 @@ const package_config_1 = require("./package-config");
|
|
|
18
18
|
* Note that the fallback version range does not use caret, but tilde because that is
|
|
19
19
|
* the default for Angular framework dependencies in CLI projects.
|
|
20
20
|
*/
|
|
21
|
-
const fallbackMaterialVersionRange = `~18.0.
|
|
21
|
+
const fallbackMaterialVersionRange = `~18.0.5`;
|
|
22
22
|
/**
|
|
23
23
|
* Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
|
|
24
24
|
* automatically executed if developers run `ng add @angular/material`.
|
|
@@ -50,7 +50,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
50
50
|
});
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
-
// bazel-out/
|
|
53
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
|
|
54
54
|
var m3_theme_exports = {};
|
|
55
55
|
__export(m3_theme_exports, {
|
|
56
56
|
default: () => m3_theme_default,
|
|
@@ -2513,7 +2513,7 @@ function customColor(source, color) {
|
|
|
2513
2513
|
};
|
|
2514
2514
|
}
|
|
2515
2515
|
|
|
2516
|
-
// bazel-out/
|
|
2516
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
|
|
2517
2517
|
var HUE_TONES = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
|
|
2518
2518
|
var NEUTRAL_HUES = /* @__PURE__ */ new Map([
|
|
2519
2519
|
[4, { prev: 0, next: 10 }],
|
|
@@ -454,9 +454,9 @@ var require_tslib = __commonJS({
|
|
|
454
454
|
}
|
|
455
455
|
});
|
|
456
456
|
|
|
457
|
-
// bazel-out/
|
|
457
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js
|
|
458
458
|
var require_attribute_selectors = __commonJS({
|
|
459
|
-
"bazel-out/
|
|
459
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js"(exports) {
|
|
460
460
|
"use strict";
|
|
461
461
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
462
462
|
exports.attributeSelectors = void 0;
|
|
@@ -464,9 +464,9 @@ var require_attribute_selectors = __commonJS({
|
|
|
464
464
|
}
|
|
465
465
|
});
|
|
466
466
|
|
|
467
|
-
// bazel-out/
|
|
467
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js
|
|
468
468
|
var require_class_names = __commonJS({
|
|
469
|
-
"bazel-out/
|
|
469
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js"(exports) {
|
|
470
470
|
"use strict";
|
|
471
471
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
472
472
|
exports.classNames = void 0;
|
|
@@ -474,9 +474,9 @@ var require_class_names = __commonJS({
|
|
|
474
474
|
}
|
|
475
475
|
});
|
|
476
476
|
|
|
477
|
-
// bazel-out/
|
|
477
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js
|
|
478
478
|
var require_constructor_checks = __commonJS({
|
|
479
|
-
"bazel-out/
|
|
479
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js"(exports) {
|
|
480
480
|
"use strict";
|
|
481
481
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
482
482
|
exports.constructorChecks = void 0;
|
|
@@ -484,9 +484,9 @@ var require_constructor_checks = __commonJS({
|
|
|
484
484
|
}
|
|
485
485
|
});
|
|
486
486
|
|
|
487
|
-
// bazel-out/
|
|
487
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js
|
|
488
488
|
var require_css_selectors = __commonJS({
|
|
489
|
-
"bazel-out/
|
|
489
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js"(exports) {
|
|
490
490
|
"use strict";
|
|
491
491
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
492
492
|
exports.cssSelectors = void 0;
|
|
@@ -494,9 +494,9 @@ var require_css_selectors = __commonJS({
|
|
|
494
494
|
}
|
|
495
495
|
});
|
|
496
496
|
|
|
497
|
-
// bazel-out/
|
|
497
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-tokens.js
|
|
498
498
|
var require_css_tokens = __commonJS({
|
|
499
|
-
"bazel-out/
|
|
499
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-tokens.js"(exports) {
|
|
500
500
|
"use strict";
|
|
501
501
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
502
502
|
exports.cssTokens = void 0;
|
|
@@ -537,9 +537,9 @@ var require_css_tokens = __commonJS({
|
|
|
537
537
|
}
|
|
538
538
|
});
|
|
539
539
|
|
|
540
|
-
// bazel-out/
|
|
540
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js
|
|
541
541
|
var require_element_selectors = __commonJS({
|
|
542
|
-
"bazel-out/
|
|
542
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js"(exports) {
|
|
543
543
|
"use strict";
|
|
544
544
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
545
545
|
exports.elementSelectors = void 0;
|
|
@@ -547,9 +547,9 @@ var require_element_selectors = __commonJS({
|
|
|
547
547
|
}
|
|
548
548
|
});
|
|
549
549
|
|
|
550
|
-
// bazel-out/
|
|
550
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js
|
|
551
551
|
var require_input_names = __commonJS({
|
|
552
|
-
"bazel-out/
|
|
552
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js"(exports) {
|
|
553
553
|
"use strict";
|
|
554
554
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
555
555
|
exports.inputNames = void 0;
|
|
@@ -557,9 +557,9 @@ var require_input_names = __commonJS({
|
|
|
557
557
|
}
|
|
558
558
|
});
|
|
559
559
|
|
|
560
|
-
// bazel-out/
|
|
560
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js
|
|
561
561
|
var require_method_call_checks = __commonJS({
|
|
562
|
-
"bazel-out/
|
|
562
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js"(exports) {
|
|
563
563
|
"use strict";
|
|
564
564
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
565
565
|
exports.methodCallChecks = void 0;
|
|
@@ -567,9 +567,9 @@ var require_method_call_checks = __commonJS({
|
|
|
567
567
|
}
|
|
568
568
|
});
|
|
569
569
|
|
|
570
|
-
// bazel-out/
|
|
570
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js
|
|
571
571
|
var require_output_names = __commonJS({
|
|
572
|
-
"bazel-out/
|
|
572
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js"(exports) {
|
|
573
573
|
"use strict";
|
|
574
574
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
575
575
|
exports.outputNames = void 0;
|
|
@@ -577,9 +577,9 @@ var require_output_names = __commonJS({
|
|
|
577
577
|
}
|
|
578
578
|
});
|
|
579
579
|
|
|
580
|
-
// bazel-out/
|
|
580
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js
|
|
581
581
|
var require_property_names = __commonJS({
|
|
582
|
-
"bazel-out/
|
|
582
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js"(exports) {
|
|
583
583
|
"use strict";
|
|
584
584
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
585
585
|
exports.propertyNames = void 0;
|
|
@@ -587,9 +587,9 @@ var require_property_names = __commonJS({
|
|
|
587
587
|
}
|
|
588
588
|
});
|
|
589
589
|
|
|
590
|
-
// bazel-out/
|
|
590
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js
|
|
591
591
|
var require_symbol_removal = __commonJS({
|
|
592
|
-
"bazel-out/
|
|
592
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js"(exports) {
|
|
593
593
|
"use strict";
|
|
594
594
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
595
595
|
exports.symbolRemoval = void 0;
|
|
@@ -597,9 +597,9 @@ var require_symbol_removal = __commonJS({
|
|
|
597
597
|
}
|
|
598
598
|
});
|
|
599
599
|
|
|
600
|
-
// bazel-out/
|
|
600
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/index.js
|
|
601
601
|
var require_data = __commonJS({
|
|
602
|
-
"bazel-out/
|
|
602
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/index.js"(exports) {
|
|
603
603
|
"use strict";
|
|
604
604
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
605
605
|
var tslib_1 = require_tslib();
|
|
@@ -617,9 +617,9 @@ var require_data = __commonJS({
|
|
|
617
617
|
}
|
|
618
618
|
});
|
|
619
619
|
|
|
620
|
-
// bazel-out/
|
|
620
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js
|
|
621
621
|
var require_upgrade_data = __commonJS({
|
|
622
|
-
"bazel-out/
|
|
622
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js"(exports) {
|
|
623
623
|
"use strict";
|
|
624
624
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
625
625
|
exports.materialUpgradeData = void 0;
|
|
@@ -640,9 +640,9 @@ var require_upgrade_data = __commonJS({
|
|
|
640
640
|
}
|
|
641
641
|
});
|
|
642
642
|
|
|
643
|
-
// bazel-out/
|
|
643
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/migration.js
|
|
644
644
|
var require_migration = __commonJS({
|
|
645
|
-
"bazel-out/
|
|
645
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/migration.js"(exports) {
|
|
646
646
|
"use strict";
|
|
647
647
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
648
648
|
exports.migrateM2ThemingApiUsages = void 0;
|
|
@@ -818,9 +818,9 @@ var require_migration = __commonJS({
|
|
|
818
818
|
}
|
|
819
819
|
});
|
|
820
820
|
|
|
821
|
-
// bazel-out/
|
|
821
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/index.js
|
|
822
822
|
var require_m2_theming_v18 = __commonJS({
|
|
823
|
-
"bazel-out/
|
|
823
|
+
"bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/index.js"(exports) {
|
|
824
824
|
"use strict";
|
|
825
825
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
826
826
|
exports.M2ThemingMigration = void 0;
|
|
@@ -852,7 +852,7 @@ var require_m2_theming_v18 = __commonJS({
|
|
|
852
852
|
}
|
|
853
853
|
});
|
|
854
854
|
|
|
855
|
-
// bazel-out/
|
|
855
|
+
// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/index.mjs
|
|
856
856
|
var ng_update_exports = {};
|
|
857
857
|
__export(ng_update_exports, {
|
|
858
858
|
updateToV18: () => updateToV18
|
package/sidenav/index.d.ts
CHANGED
|
@@ -145,6 +145,7 @@ export declare class MatDrawer implements AfterViewInit, AfterContentChecked, On
|
|
|
145
145
|
*/
|
|
146
146
|
readonly _modeChanged: Subject<void>;
|
|
147
147
|
private _injector;
|
|
148
|
+
private _changeDetectorRef;
|
|
148
149
|
constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _interactivityChecker: InteractivityChecker, _doc: any, _container?: MatDrawerContainer | undefined);
|
|
149
150
|
/**
|
|
150
151
|
* Focuses the provided element. If the element is not focusable, it will add a tabIndex
|
package/slide-toggle/index.d.ts
CHANGED
|
@@ -89,7 +89,13 @@ export declare class MatSlideToggle implements OnDestroy, AfterContentInit, OnCh
|
|
|
89
89
|
ariaDescribedby: string;
|
|
90
90
|
/** Whether the slide-toggle is required. */
|
|
91
91
|
required: boolean;
|
|
92
|
-
/**
|
|
92
|
+
/**
|
|
93
|
+
* Theme color of the slide toggle. This API is supported in M2 themes only,
|
|
94
|
+
* it has no effect in M3 themes.
|
|
95
|
+
*
|
|
96
|
+
* For information on applying color variants in M3, see
|
|
97
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
98
|
+
*/
|
|
93
99
|
color: string | undefined;
|
|
94
100
|
/** Whether the slide toggle is disabled. */
|
|
95
101
|
disabled: boolean;
|
|
@@ -164,7 +170,13 @@ export declare class MatSlideToggleChange {
|
|
|
164
170
|
export declare interface MatSlideToggleDefaultOptions {
|
|
165
171
|
/** Whether toggle action triggers value changes in slide toggle. */
|
|
166
172
|
disableToggleValue?: boolean;
|
|
167
|
-
/**
|
|
173
|
+
/**
|
|
174
|
+
* Default theme color of the slide toggle. This API is supported in M2 themes only,
|
|
175
|
+
* it has no effect in M3 themes.
|
|
176
|
+
*
|
|
177
|
+
* For information on applying color variants in M3, see
|
|
178
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
179
|
+
*/
|
|
168
180
|
color?: ThemePalette;
|
|
169
181
|
/** Whether to hide the icon inside the slide toggle. */
|
|
170
182
|
hideIcon?: boolean;
|
package/slider/index.d.ts
CHANGED
|
@@ -80,7 +80,13 @@ export declare class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
|
|
|
80
80
|
get min(): number;
|
|
81
81
|
set min(v: number);
|
|
82
82
|
private _min;
|
|
83
|
-
/**
|
|
83
|
+
/**
|
|
84
|
+
* Theme color of the slider. This API is supported in M2 themes only, it
|
|
85
|
+
* has no effect in M3 themes.
|
|
86
|
+
*
|
|
87
|
+
* For information on applying color variants in M3, see
|
|
88
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
89
|
+
*/
|
|
84
90
|
color: ThemePalette;
|
|
85
91
|
/** Whether ripples are disabled in the slider. */
|
|
86
92
|
disableRipple: boolean;
|