@angular/material 15.0.2 → 15.1.0-next.1
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 +8 -1
- package/chips/index.d.ts +3 -1
- package/datepicker/index.d.ts +60 -5
- package/esm2020/autocomplete/autocomplete-trigger.mjs +7 -5
- package/esm2020/autocomplete/autocomplete.mjs +13 -1
- package/esm2020/chips/chip-option.mjs +5 -4
- package/esm2020/chips/chip-row.mjs +5 -4
- package/esm2020/chips/chip.mjs +7 -2
- package/esm2020/core/version.mjs +1 -1
- package/esm2020/datepicker/calendar-body.mjs +124 -11
- package/esm2020/datepicker/calendar.mjs +25 -3
- package/esm2020/datepicker/date-range-selection-strategy.mjs +28 -1
- package/esm2020/datepicker/datepicker-base.mjs +11 -4
- package/esm2020/datepicker/datepicker-input-base.mjs +6 -3
- package/esm2020/datepicker/month-view.mjs +59 -7
- package/esm2020/datepicker/multi-year-view.mjs +1 -1
- package/esm2020/datepicker/year-view.mjs +1 -1
- package/esm2020/legacy-list/selection-list.mjs +1 -1
- package/esm2020/legacy-tabs/testing/tab-harness-filters.mjs +1 -1
- package/esm2020/legacy-tabs/testing/tab-harness.mjs +4 -2
- package/esm2020/list/list-item-sections.mjs +10 -10
- package/esm2020/list/list-option-types.mjs +1 -1
- package/esm2020/list/list-option.mjs +36 -19
- package/esm2020/list/public-api.mjs +1 -1
- package/esm2020/list/testing/selection-list-harness.mjs +6 -1
- package/esm2020/tabs/testing/tab-harness-filters.mjs +1 -1
- package/esm2020/tabs/testing/tab-harness.mjs +4 -2
- package/fesm2015/autocomplete.mjs +20 -5
- package/fesm2015/autocomplete.mjs.map +1 -1
- package/fesm2015/chips.mjs +14 -7
- package/fesm2015/chips.mjs.map +1 -1
- package/fesm2015/core.mjs +1 -1
- package/fesm2015/core.mjs.map +1 -1
- package/fesm2015/datepicker.mjs +252 -24
- package/fesm2015/datepicker.mjs.map +1 -1
- package/fesm2015/legacy-list.mjs.map +1 -1
- package/fesm2015/legacy-tabs/testing.mjs +3 -1
- package/fesm2015/legacy-tabs/testing.mjs.map +1 -1
- package/fesm2015/list/testing.mjs +7 -0
- package/fesm2015/list/testing.mjs.map +1 -1
- package/fesm2015/list.mjs +44 -27
- package/fesm2015/list.mjs.map +1 -1
- package/fesm2015/tabs/testing.mjs +3 -1
- package/fesm2015/tabs/testing.mjs.map +1 -1
- package/fesm2020/autocomplete.mjs +18 -3
- package/fesm2020/autocomplete.mjs.map +1 -1
- package/fesm2020/chips.mjs +14 -7
- package/fesm2020/chips.mjs.map +1 -1
- package/fesm2020/core.mjs +1 -1
- package/fesm2020/core.mjs.map +1 -1
- package/fesm2020/datepicker.mjs +248 -24
- package/fesm2020/datepicker.mjs.map +1 -1
- package/fesm2020/legacy-list.mjs.map +1 -1
- package/fesm2020/legacy-tabs/testing.mjs +3 -1
- package/fesm2020/legacy-tabs/testing.mjs.map +1 -1
- package/fesm2020/list/testing.mjs +5 -0
- package/fesm2020/list/testing.mjs.map +1 -1
- package/fesm2020/list.mjs +44 -27
- package/fesm2020/list.mjs.map +1 -1
- package/fesm2020/tabs/testing.mjs +3 -1
- package/fesm2020/tabs/testing.mjs.map +1 -1
- package/legacy-list/index.d.ts +1 -1
- package/legacy-tabs/testing/index.d.ts +2 -0
- package/list/_interactive-list-theme.scss +0 -17
- package/list/_list-option-theme.scss +6 -3
- package/list/index.d.ts +25 -13
- package/list/testing/index.d.ts +5 -2
- package/package.json +2 -2
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/radio/_radio-private.scss +60 -0
- package/radio/_radio-theme.scss +7 -45
- package/tabs/testing/index.d.ts +5 -3
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@use '@material/radio/radio-theme' as mdc-radio-theme;
|
|
2
|
+
@use '@material/theme/theme-color' as mdc-theme-color;
|
|
3
|
+
@use '../core/theming/palette';
|
|
4
|
+
@use '../core/theming/theming';
|
|
5
|
+
@use 'sass:map';
|
|
6
|
+
|
|
7
|
+
$private-radio-theme-config: map.merge(mdc-radio-theme.$light-theme, (
|
|
8
|
+
// Exclude the styles we don't need.
|
|
9
|
+
selected-focus-state-layer-color: null,
|
|
10
|
+
selected-focus-state-layer-opacity: null,
|
|
11
|
+
selected-hover-state-layer-color: null,
|
|
12
|
+
selected-hover-state-layer-opacity: null,
|
|
13
|
+
selected-pressed-state-layer-color: null,
|
|
14
|
+
selected-pressed-state-layer-opacity: null,
|
|
15
|
+
unselected-focus-icon-color: null,
|
|
16
|
+
unselected-focus-state-layer-color: null,
|
|
17
|
+
unselected-focus-state-layer-opacity: null,
|
|
18
|
+
unselected-hover-state-layer-color: null,
|
|
19
|
+
unselected-hover-state-layer-opacity: null,
|
|
20
|
+
unselected-pressed-state-layer-color: null,
|
|
21
|
+
unselected-pressed-state-layer-opacity: null,
|
|
22
|
+
));
|
|
23
|
+
|
|
24
|
+
@mixin private-radio-color($color-config, $color-palette) {
|
|
25
|
+
$foreground: map.get($color-config, foreground);
|
|
26
|
+
|
|
27
|
+
$on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
|
|
28
|
+
$is-dark: map.get($color-config, is-dark);
|
|
29
|
+
$active-border-color: if(
|
|
30
|
+
$is-dark,
|
|
31
|
+
theming.get-color-from-palette(palette.$gray-palette, 200),
|
|
32
|
+
theming.get-color-from-palette(palette.$gray-palette, 900)
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
& {
|
|
36
|
+
@include mdc-radio-theme.theme((
|
|
37
|
+
// The disabled colors don't use the `rgba` version, because
|
|
38
|
+
// MDC applies a separate opacity to disabled buttons.
|
|
39
|
+
disabled-selected-icon-color: mdc-theme-color.$on-surface,
|
|
40
|
+
disabled-unselected-icon-color: mdc-theme-color.$on-surface,
|
|
41
|
+
unselected-focus-icon-color: $active-border-color,
|
|
42
|
+
unselected-hover-icon-color: $active-border-color,
|
|
43
|
+
unselected-icon-color: $on-surface,
|
|
44
|
+
unselected-pressed-icon-color: $on-surface,
|
|
45
|
+
selected-focus-icon-color: $color-palette,
|
|
46
|
+
selected-hover-icon-color: $color-palette,
|
|
47
|
+
selected-icon-color: $color-palette,
|
|
48
|
+
selected-pressed-icon-color: $color-palette,
|
|
49
|
+
));
|
|
50
|
+
|
|
51
|
+
--mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
|
|
52
|
+
|
|
53
|
+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
|
|
54
|
+
.mdc-radio--disabled + label {
|
|
55
|
+
color: theming.get-color-from-palette($foreground, disabled-text);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
--mat-mdc-radio-checked-ripple-color: #{$color-palette};
|
|
59
|
+
}
|
|
60
|
+
}
|
package/radio/_radio-theme.scss
CHANGED
|
@@ -1,70 +1,32 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@material/theme/theme-color' as mdc-theme-color;
|
|
3
|
-
@use '@material/radio/radio-theme' as mdc-radio-theme;
|
|
4
1
|
@use '@material/radio/radio' as mdc-radio;
|
|
2
|
+
@use '@material/radio/radio-theme' as mdc-radio-theme;
|
|
5
3
|
@use '@material/form-field' as mdc-form-field;
|
|
6
|
-
@use '../core/theming/theming';
|
|
7
4
|
@use '../core/mdc-helpers/mdc-helpers';
|
|
5
|
+
@use '../core/theming/theming';
|
|
8
6
|
@use '../core/typography/typography';
|
|
9
|
-
@use '
|
|
10
|
-
|
|
11
|
-
@mixin _color-palette($color-palette) {
|
|
12
|
-
@include mdc-radio-theme.theme((
|
|
13
|
-
selected-focus-icon-color: $color-palette,
|
|
14
|
-
selected-hover-icon-color: $color-palette,
|
|
15
|
-
selected-icon-color: $color-palette,
|
|
16
|
-
selected-pressed-icon-color: $color-palette,
|
|
17
|
-
));
|
|
18
|
-
|
|
19
|
-
--mat-mdc-radio-checked-ripple-color: #{$color-palette};
|
|
20
|
-
}
|
|
7
|
+
@use './radio-private';
|
|
8
|
+
@use 'sass:map';
|
|
21
9
|
|
|
22
10
|
@mixin color($config-or-theme) {
|
|
23
11
|
$config: theming.get-color-config($config-or-theme);
|
|
24
12
|
$primary: theming.get-color-from-palette(map.get($config, primary));
|
|
25
13
|
$accent: theming.get-color-from-palette(map.get($config, accent));
|
|
26
14
|
$warn: theming.get-color-from-palette(map.get($config, warn));
|
|
27
|
-
$foreground: map.get($config, foreground);
|
|
28
15
|
|
|
29
16
|
@include mdc-helpers.using-mdc-theme($config) {
|
|
30
|
-
$on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
|
|
31
|
-
$is-dark: map.get($config, is-dark);
|
|
32
|
-
$active-border-color: if(
|
|
33
|
-
$is-dark,
|
|
34
|
-
theming.get-color-from-palette(palette.$gray-palette, 200),
|
|
35
|
-
theming.get-color-from-palette(palette.$gray-palette, 900)
|
|
36
|
-
);
|
|
37
|
-
|
|
38
17
|
.mat-mdc-radio-button {
|
|
39
18
|
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
|
|
40
|
-
@include mdc-radio-theme.theme((
|
|
41
|
-
// The disabled colors don't use the `rgba` version, because
|
|
42
|
-
// MDC applies a separate opacity to disabled buttons.
|
|
43
|
-
disabled-selected-icon-color: mdc-theme-color.$on-surface,
|
|
44
|
-
disabled-unselected-icon-color: mdc-theme-color.$on-surface,
|
|
45
|
-
unselected-focus-icon-color: $active-border-color,
|
|
46
|
-
unselected-hover-icon-color: $active-border-color,
|
|
47
|
-
unselected-icon-color: $on-surface,
|
|
48
|
-
unselected-pressed-icon-color: $on-surface,
|
|
49
|
-
));
|
|
50
|
-
|
|
51
|
-
--mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
|
|
52
|
-
|
|
53
|
-
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
|
|
54
|
-
.mdc-radio--disabled + label {
|
|
55
|
-
color: theming.get-color-from-palette($foreground, disabled-text);
|
|
56
|
-
}
|
|
57
19
|
|
|
58
20
|
&.mat-primary {
|
|
59
|
-
@include
|
|
21
|
+
@include radio-private.private-radio-color($config, $primary);
|
|
60
22
|
}
|
|
61
23
|
|
|
62
24
|
&.mat-accent {
|
|
63
|
-
@include
|
|
25
|
+
@include radio-private.private-radio-color($config, $accent);
|
|
64
26
|
}
|
|
65
27
|
|
|
66
28
|
&.mat-warn {
|
|
67
|
-
@include
|
|
29
|
+
@include radio-private.private-radio-color($config, $warn);
|
|
68
30
|
}
|
|
69
31
|
}
|
|
70
32
|
}
|
package/tabs/testing/index.d.ts
CHANGED
|
@@ -122,16 +122,18 @@ declare class MatTabNavPanelHarness extends ContentContainerComponentHarness {
|
|
|
122
122
|
getTextContent(): Promise<string>;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
/** A set of criteria that can be used to filter a list of `
|
|
125
|
+
/** A set of criteria that can be used to filter a list of `MatTabGroupHarness` instances. */
|
|
126
126
|
export declare interface TabGroupHarnessFilters extends BaseHarnessFilters {
|
|
127
127
|
/** Only find instances whose selected tab label matches the given value. */
|
|
128
128
|
selectedTabLabel?: string | RegExp;
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
/** A set of criteria that can be used to filter a list of `
|
|
131
|
+
/** A set of criteria that can be used to filter a list of `MatTabHarness` instances. */
|
|
132
132
|
export declare interface TabHarnessFilters extends BaseHarnessFilters {
|
|
133
133
|
/** Only find instances whose label matches the given value. */
|
|
134
134
|
label?: string | RegExp;
|
|
135
|
+
/** Only find instances whose selected state matches the given value. */
|
|
136
|
+
selected?: boolean;
|
|
135
137
|
}
|
|
136
138
|
|
|
137
139
|
/** A set of criteria that can be used to filter a list of `MatTabLinkHarness` instances. */
|
|
@@ -144,7 +146,7 @@ export declare interface TabLinkHarnessFilters extends BaseHarnessFilters {
|
|
|
144
146
|
export declare interface TabNavBarHarnessFilters extends BaseHarnessFilters {
|
|
145
147
|
}
|
|
146
148
|
|
|
147
|
-
/** A set of criteria that can be used to filter a list of `
|
|
149
|
+
/** A set of criteria that can be used to filter a list of `MatTabNavPanelHarness` instances. */
|
|
148
150
|
export declare interface TabNavPanelHarnessFilters extends BaseHarnessFilters {
|
|
149
151
|
}
|
|
150
152
|
|