@angular/material 17.1.1 → 17.2.0-next.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/_index.scss +4 -4
- package/badge/_badge-theme.scss +30 -11
- package/button/_button-base.scss +50 -10
- package/button/_button-theme.scss +92 -51
- package/button/_fab-theme.scss +82 -15
- package/button/_icon-button-theme.scss +11 -4
- package/button-toggle/_button-toggle-theme.scss +26 -11
- package/checkbox/_checkbox-theme.scss +41 -23
- package/chips/_chips-theme.scss +25 -9
- package/core/_core-theme.scss +85 -38
- package/core/mdc-helpers/_mdc-helpers.scss +0 -8
- package/core/option/_option-theme.scss +24 -10
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +64 -24
- package/core/tokens/_token-utils.scss +22 -0
- package/core/tokens/m2/_index.scss +16 -0
- package/core/tokens/m2/mat/_badge.scss +27 -1
- package/core/tokens/m2/mat/_checkbox.scss +45 -0
- package/core/tokens/m2/mat/_dialog.scss +49 -0
- package/core/tokens/m2/mat/_fab-small.scss +95 -0
- package/core/tokens/m2/mat/_fab.scss +6 -1
- package/core/tokens/m2/mat/_filled-button.scss +17 -2
- package/core/tokens/m2/mat/_icon-button.scss +6 -1
- package/core/tokens/m2/mat/_outlined-button.scss +17 -2
- package/core/tokens/m2/mat/_protected-button.scss +17 -2
- package/core/tokens/m2/mat/_radio.scss +6 -1
- package/core/tokens/m2/mat/_stepper.scss +6 -1
- package/core/tokens/m2/mat/_text-button.scss +20 -2
- package/core/tokens/m2/mdc/_extended-fab.scss +3 -2
- package/core/tokens/m2/mdc/_fab-small.scss +90 -0
- package/core/tokens/m2/mdc/_fab.scss +0 -11
- package/core/tokens/m2/mdc/_icon-button.scss +15 -7
- package/datepicker/_datepicker-theme.scss +25 -9
- package/dialog/_dialog-theme.scss +10 -0
- package/dialog/index.d.ts +28 -9
- package/esm2022/autocomplete/autocomplete-origin.mjs +4 -4
- package/esm2022/autocomplete/autocomplete-trigger.mjs +4 -4
- package/esm2022/autocomplete/autocomplete.mjs +4 -4
- package/esm2022/autocomplete/module.mjs +5 -5
- package/esm2022/badge/badge-module.mjs +5 -5
- package/esm2022/badge/badge.mjs +8 -8
- package/esm2022/bottom-sheet/bottom-sheet-container.mjs +4 -4
- package/esm2022/bottom-sheet/bottom-sheet-module.mjs +5 -5
- package/esm2022/bottom-sheet/bottom-sheet.mjs +4 -4
- package/esm2022/button/button-base.mjs +7 -7
- package/esm2022/button/button.mjs +9 -9
- package/esm2022/button/fab.mjs +17 -17
- package/esm2022/button/icon-button.mjs +9 -9
- package/esm2022/button/module.mjs +5 -5
- package/esm2022/button-toggle/button-toggle-module.mjs +5 -5
- package/esm2022/button-toggle/button-toggle.mjs +7 -7
- package/esm2022/card/card.mjs +43 -43
- package/esm2022/card/module.mjs +5 -5
- package/esm2022/checkbox/checkbox-required-validator.mjs +4 -4
- package/esm2022/checkbox/checkbox.mjs +6 -6
- package/esm2022/checkbox/module.mjs +9 -9
- package/esm2022/chips/chip-action.mjs +4 -4
- package/esm2022/chips/chip-edit-input.mjs +4 -4
- package/esm2022/chips/chip-grid.mjs +4 -4
- package/esm2022/chips/chip-icons.mjs +10 -10
- package/esm2022/chips/chip-input.mjs +4 -4
- package/esm2022/chips/chip-listbox.mjs +4 -4
- package/esm2022/chips/chip-option.mjs +4 -4
- package/esm2022/chips/chip-row.mjs +4 -4
- package/esm2022/chips/chip-set.mjs +4 -4
- package/esm2022/chips/chip.mjs +4 -4
- package/esm2022/chips/module.mjs +5 -5
- package/esm2022/core/common-behaviors/common-module.mjs +5 -5
- package/esm2022/core/datetime/index.mjs +9 -9
- package/esm2022/core/datetime/native-date-adapter.mjs +4 -4
- package/esm2022/core/error/error-options.mjs +7 -7
- package/esm2022/core/internal-form-field/internal-form-field.mjs +4 -4
- package/esm2022/core/line/line.mjs +8 -8
- package/esm2022/core/option/index.mjs +5 -5
- package/esm2022/core/option/optgroup.mjs +4 -4
- package/esm2022/core/option/option.mjs +4 -4
- package/esm2022/core/private/ripple-loader.mjs +4 -4
- package/esm2022/core/ripple/index.mjs +5 -5
- package/esm2022/core/ripple/ripple.mjs +4 -4
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +5 -5
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +4 -4
- package/esm2022/core/version.mjs +1 -1
- package/esm2022/datepicker/calendar-body.mjs +4 -4
- package/esm2022/datepicker/calendar.mjs +7 -7
- package/esm2022/datepicker/date-range-input-parts.mjs +10 -10
- package/esm2022/datepicker/date-range-input.mjs +4 -4
- package/esm2022/datepicker/date-range-picker.mjs +4 -4
- package/esm2022/datepicker/date-range-selection-strategy.mjs +4 -4
- package/esm2022/datepicker/date-selection-model.mjs +10 -10
- package/esm2022/datepicker/datepicker-actions.mjs +10 -10
- package/esm2022/datepicker/datepicker-base.mjs +7 -7
- package/esm2022/datepicker/datepicker-input-base.mjs +4 -4
- package/esm2022/datepicker/datepicker-input.mjs +4 -4
- package/esm2022/datepicker/datepicker-intl.mjs +4 -4
- package/esm2022/datepicker/datepicker-module.mjs +5 -5
- package/esm2022/datepicker/datepicker-toggle.mjs +7 -7
- package/esm2022/datepicker/datepicker.mjs +4 -4
- package/esm2022/datepicker/month-view.mjs +4 -4
- package/esm2022/datepicker/multi-year-view.mjs +4 -4
- package/esm2022/datepicker/year-view.mjs +4 -4
- package/esm2022/dialog/dialog-config.mjs +1 -3
- package/esm2022/dialog/dialog-container.mjs +16 -5
- package/esm2022/dialog/dialog-content-directives.mjs +49 -31
- package/esm2022/dialog/dialog-ref.mjs +3 -1
- package/esm2022/dialog/dialog.mjs +4 -4
- package/esm2022/dialog/module.mjs +5 -5
- package/esm2022/dialog/public-api.mjs +2 -2
- package/esm2022/divider/divider-module.mjs +5 -5
- package/esm2022/divider/divider.mjs +4 -4
- package/esm2022/expansion/accordion.mjs +4 -4
- package/esm2022/expansion/expansion-module.mjs +5 -5
- package/esm2022/expansion/expansion-panel-content.mjs +4 -4
- package/esm2022/expansion/expansion-panel-header.mjs +10 -10
- package/esm2022/expansion/expansion-panel.mjs +7 -7
- package/esm2022/form-field/directives/error.mjs +4 -4
- package/esm2022/form-field/directives/floating-label.mjs +4 -4
- package/esm2022/form-field/directives/hint.mjs +4 -4
- package/esm2022/form-field/directives/label.mjs +4 -4
- package/esm2022/form-field/directives/line-ripple.mjs +4 -4
- package/esm2022/form-field/directives/notched-outline.mjs +4 -4
- package/esm2022/form-field/directives/prefix.mjs +4 -4
- package/esm2022/form-field/directives/suffix.mjs +4 -4
- package/esm2022/form-field/form-field-control.mjs +4 -4
- package/esm2022/form-field/form-field.mjs +4 -4
- package/esm2022/form-field/module.mjs +5 -5
- package/esm2022/grid-list/grid-list-module.mjs +5 -5
- package/esm2022/grid-list/grid-list.mjs +4 -4
- package/esm2022/grid-list/grid-tile.mjs +16 -16
- package/esm2022/icon/icon-module.mjs +5 -5
- package/esm2022/icon/icon-registry.mjs +4 -4
- package/esm2022/icon/icon.mjs +4 -4
- package/esm2022/icon/testing/fake-icon-registry.mjs +8 -8
- package/esm2022/input/input.mjs +4 -4
- package/esm2022/input/module.mjs +5 -5
- package/esm2022/list/action-list.mjs +4 -4
- package/esm2022/list/list-base.mjs +7 -7
- package/esm2022/list/list-item-sections.mjs +19 -19
- package/esm2022/list/list-module.mjs +5 -5
- package/esm2022/list/list-option.mjs +4 -4
- package/esm2022/list/list.mjs +7 -7
- package/esm2022/list/nav-list.mjs +4 -4
- package/esm2022/list/selection-list.mjs +4 -4
- package/esm2022/list/subheader.mjs +4 -4
- package/esm2022/menu/menu-content.mjs +4 -4
- package/esm2022/menu/menu-item.mjs +4 -4
- package/esm2022/menu/menu-trigger.mjs +4 -4
- package/esm2022/menu/menu.mjs +4 -4
- package/esm2022/menu/module.mjs +5 -5
- package/esm2022/paginator/module.mjs +5 -5
- package/esm2022/paginator/paginator-intl.mjs +4 -4
- package/esm2022/paginator/paginator.mjs +4 -4
- package/esm2022/progress-bar/module.mjs +5 -5
- package/esm2022/progress-bar/progress-bar.mjs +4 -4
- package/esm2022/progress-spinner/module.mjs +5 -5
- package/esm2022/progress-spinner/progress-spinner.mjs +4 -4
- package/esm2022/radio/module.mjs +5 -5
- package/esm2022/radio/radio.mjs +8 -8
- package/esm2022/select/module.mjs +5 -5
- package/esm2022/select/select.mjs +7 -7
- package/esm2022/sidenav/drawer.mjs +10 -10
- package/esm2022/sidenav/sidenav-module.mjs +5 -5
- package/esm2022/sidenav/sidenav.mjs +10 -10
- package/esm2022/slide-toggle/module.mjs +9 -9
- package/esm2022/slide-toggle/slide-toggle-required-validator.mjs +4 -4
- package/esm2022/slide-toggle/slide-toggle.mjs +4 -4
- package/esm2022/slider/module.mjs +5 -5
- package/esm2022/slider/slider-input.mjs +7 -7
- package/esm2022/slider/slider-thumb.mjs +4 -4
- package/esm2022/slider/slider.mjs +4 -4
- package/esm2022/snack-bar/module.mjs +5 -5
- package/esm2022/snack-bar/simple-snack-bar.mjs +4 -4
- package/esm2022/snack-bar/snack-bar-container.mjs +4 -4
- package/esm2022/snack-bar/snack-bar-content.mjs +10 -10
- package/esm2022/snack-bar/snack-bar.mjs +4 -4
- package/esm2022/sort/sort-header-intl.mjs +4 -4
- package/esm2022/sort/sort-header.mjs +4 -4
- package/esm2022/sort/sort-module.mjs +5 -5
- package/esm2022/sort/sort.mjs +4 -4
- package/esm2022/stepper/step-content.mjs +4 -4
- package/esm2022/stepper/step-header.mjs +5 -5
- package/esm2022/stepper/step-label.mjs +4 -4
- package/esm2022/stepper/stepper-button.mjs +7 -7
- package/esm2022/stepper/stepper-icon.mjs +4 -4
- package/esm2022/stepper/stepper-intl.mjs +4 -4
- package/esm2022/stepper/stepper-module.mjs +5 -5
- package/esm2022/stepper/stepper.mjs +7 -7
- package/esm2022/table/cell.mjs +22 -22
- package/esm2022/table/module.mjs +5 -5
- package/esm2022/table/row.mjs +22 -22
- package/esm2022/table/table.mjs +7 -7
- package/esm2022/table/text-column.mjs +4 -4
- package/esm2022/tabs/module.mjs +5 -5
- package/esm2022/tabs/paginated-tab-header.mjs +4 -4
- package/esm2022/tabs/tab-body.mjs +7 -7
- package/esm2022/tabs/tab-content.mjs +4 -4
- package/esm2022/tabs/tab-group.mjs +4 -4
- package/esm2022/tabs/tab-header.mjs +4 -4
- package/esm2022/tabs/tab-label-wrapper.mjs +4 -4
- package/esm2022/tabs/tab-label.mjs +4 -4
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +10 -10
- package/esm2022/tabs/tab.mjs +4 -4
- package/esm2022/toolbar/toolbar-module.mjs +5 -5
- package/esm2022/toolbar/toolbar.mjs +7 -7
- package/esm2022/tooltip/module.mjs +5 -5
- package/esm2022/tooltip/tooltip.mjs +7 -7
- package/esm2022/tree/node.mjs +10 -10
- package/esm2022/tree/outlet.mjs +4 -4
- package/esm2022/tree/padding.mjs +4 -4
- package/esm2022/tree/toggle.mjs +4 -4
- package/esm2022/tree/tree-module.mjs +5 -5
- package/esm2022/tree/tree.mjs +4 -4
- package/fesm2022/autocomplete.mjs +13 -13
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +11 -11
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +10 -10
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +10 -10
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +42 -42
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card.mjs +46 -46
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +16 -16
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +40 -40
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +59 -59
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +82 -82
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog.mjs +72 -43
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider.mjs +7 -7
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion.mjs +25 -25
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field.mjs +34 -34
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +22 -22
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +7 -7
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +10 -10
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input.mjs +7 -7
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list.mjs +49 -49
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +16 -16
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +10 -10
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +7 -7
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +7 -7
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +11 -11
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +10 -10
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +22 -22
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +14 -14
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider.mjs +16 -16
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +22 -22
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort.mjs +13 -13
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper.mjs +32 -32
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +55 -55
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs.mjs +40 -40
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +10 -10
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +10 -10
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree.mjs +25 -25
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +31 -14
- package/icon/_icon-theme.scss +2 -2
- package/package.json +7 -7
- package/paginator/_paginator-theme.scss +10 -16
- 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/progress-bar/_progress-bar-theme.scss +27 -9
- package/progress-spinner/_progress-spinner-theme.scss +38 -17
- package/radio/_radio-theme.scss +34 -18
- package/schematics/ng-add/index.js +2 -2
- package/schematics/ng-add/index.mjs +2 -2
- package/schematics/ng-add/setup-project.js +7 -75
- package/schematics/ng-add/setup-project.mjs +7 -75
- package/schematics/ng-generate/mdc-migration/index_bundled.js +122 -115
- package/schematics/ng-generate/mdc-migration/index_bundled.js.map +4 -4
- package/select/_select-theme.scss +24 -10
- package/slide-toggle/_slide-toggle-theme.scss +29 -9
- package/slider/_slider-theme.scss +28 -11
- package/stepper/_stepper-theme.scss +28 -7
- package/tabs/_tabs-theme.scss +32 -14
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@use '../../../theming/inspection';
|
|
2
|
+
@use '../../token-utils';
|
|
3
|
+
|
|
4
|
+
@use 'sass:map';
|
|
5
|
+
|
|
6
|
+
// The prefix used to generate the fully qualified name for tokens in this file.
|
|
7
|
+
$prefix: (mdc, fab-small);
|
|
8
|
+
|
|
9
|
+
@function get-unthemable-tokens() {
|
|
10
|
+
@return (
|
|
11
|
+
container-shape: 50%,
|
|
12
|
+
icon-size: 24px,
|
|
13
|
+
|
|
14
|
+
// We don't use this token, because it doesn't set the color of any text inside the FAB.
|
|
15
|
+
// We create a custom token for it instead.
|
|
16
|
+
icon-color: null,
|
|
17
|
+
|
|
18
|
+
// =============================================================================================
|
|
19
|
+
// = TOKENS NOT USED IN ANGULAR MATERIAL =
|
|
20
|
+
// =============================================================================================
|
|
21
|
+
container-height: null,
|
|
22
|
+
container-width: null,
|
|
23
|
+
|
|
24
|
+
focus-icon-color: null,
|
|
25
|
+
focus-outline-color: null,
|
|
26
|
+
focus-outline-width: null,
|
|
27
|
+
focus-state-layer-color: null,
|
|
28
|
+
focus-state-layer-opacity: null,
|
|
29
|
+
|
|
30
|
+
hover-icon-color: null,
|
|
31
|
+
hover-state-layer-color: null,
|
|
32
|
+
hover-state-layer-opacity: null,
|
|
33
|
+
|
|
34
|
+
lowered-container-elevation: null,
|
|
35
|
+
lowered-focus-container-elevation: null,
|
|
36
|
+
lowered-hover-container-elevation: null,
|
|
37
|
+
lowered-pressed-container-elevation: null,
|
|
38
|
+
|
|
39
|
+
pressed-icon-color: null,
|
|
40
|
+
pressed-ripple-color: null,
|
|
41
|
+
pressed-ripple-opacity: null,
|
|
42
|
+
pressed-state-layer-color: null,
|
|
43
|
+
pressed-state-layer-opacity: null
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Tokens that can be configured through Angular Material's color theming API.
|
|
48
|
+
@function get-color-tokens($theme) {
|
|
49
|
+
@return (
|
|
50
|
+
// Background color of the FAB.
|
|
51
|
+
container-color: inspection.get-theme-color($theme, background, card),
|
|
52
|
+
container-elevation: 6,
|
|
53
|
+
focus-container-elevation: 8,
|
|
54
|
+
hover-container-elevation: 8,
|
|
55
|
+
pressed-container-elevation: 12,
|
|
56
|
+
container-shadow-color: #000,
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Generates the mapping for the properties that change based on the FAB palette color.
|
|
61
|
+
@function private-get-color-palette-color-tokens($theme, $palette-name) {
|
|
62
|
+
@return (
|
|
63
|
+
container-color: inspection.get-theme-color($theme, $palette-name, default),
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Tokens that can be configured through Angular Material's typography theming API.
|
|
68
|
+
@function get-typography-tokens($theme) {
|
|
69
|
+
@return ();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Tokens that can be configured through Angular Material's density theming API.
|
|
73
|
+
@function get-density-tokens($theme) {
|
|
74
|
+
@return ();
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Combines the tokens generated by the above functions into a single map with placeholder values.
|
|
78
|
+
// This is used to create token slots.
|
|
79
|
+
@function get-token-slots() {
|
|
80
|
+
@return map.merge(
|
|
81
|
+
get-unthemable-tokens(),
|
|
82
|
+
map.merge(
|
|
83
|
+
get-color-tokens(token-utils.$placeholder-color-config),
|
|
84
|
+
map.merge(
|
|
85
|
+
get-typography-tokens(token-utils.$placeholder-typography-config),
|
|
86
|
+
get-density-tokens(token-utils.$placeholder-density-config)
|
|
87
|
+
)
|
|
88
|
+
)
|
|
89
|
+
);
|
|
90
|
+
}
|
|
@@ -6,17 +6,6 @@
|
|
|
6
6
|
// The prefix used to generate the fully qualified name for tokens in this file.
|
|
7
7
|
$prefix: (mdc, fab);
|
|
8
8
|
|
|
9
|
-
// Tokens that can't be configured through Angular Material's current theming API,
|
|
10
|
-
// but may be in a future version of the theming API.
|
|
11
|
-
//
|
|
12
|
-
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
|
|
13
|
-
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
|
|
14
|
-
// our CSS.
|
|
15
|
-
$height: 56px;
|
|
16
|
-
$mini-height: 40px;
|
|
17
|
-
$shape-radius: 50%;
|
|
18
|
-
$ripple-target: '.mdc-fab__ripple';
|
|
19
|
-
|
|
20
9
|
@function get-unthemable-tokens() {
|
|
21
10
|
@return (
|
|
22
11
|
container-shape: 50%,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
1
2
|
@use '../../../style/sass-utils';
|
|
3
|
+
@use '../../../theming/theming';
|
|
2
4
|
@use '../../../theming/inspection';
|
|
3
5
|
@use '../../token-utils';
|
|
4
6
|
|
|
@@ -13,12 +15,6 @@ $prefix: (mdc, icon-button);
|
|
|
13
15
|
// our CSS.
|
|
14
16
|
@function get-unthemable-tokens() {
|
|
15
17
|
@return (
|
|
16
|
-
// =============================================================================================
|
|
17
|
-
// = TOKENS THAT SHOULD NOT BE CUSTOMIZABLE =
|
|
18
|
-
// =============================================================================================
|
|
19
|
-
// Determines the size of the icon. Name is inaccurate - applies to the whole component,
|
|
20
|
-
// not just the state layer.
|
|
21
|
-
state-layer-size: 48px,
|
|
22
18
|
// MDC's icon size applied to svg and img elements inside the component
|
|
23
19
|
icon-size: 24px,
|
|
24
20
|
|
|
@@ -68,7 +64,19 @@ $prefix: (mdc, icon-button);
|
|
|
68
64
|
|
|
69
65
|
// Tokens that can be configured through Angular Material's density theming API.
|
|
70
66
|
@function get-density-tokens($theme) {
|
|
71
|
-
|
|
67
|
+
$scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
|
|
68
|
+
|
|
69
|
+
@return (
|
|
70
|
+
// The diameter of the checkbox's ripple.
|
|
71
|
+
state-layer-size: map.get((
|
|
72
|
+
0: 48px,
|
|
73
|
+
-1: 44px,
|
|
74
|
+
-2: 40px,
|
|
75
|
+
-3: 36px,
|
|
76
|
+
-4: 32px,
|
|
77
|
+
-5: 28px,
|
|
78
|
+
), $scale)
|
|
79
|
+
);
|
|
72
80
|
}
|
|
73
81
|
|
|
74
82
|
// Combines the tokens generated by the above functions into a single map with placeholder values.
|
|
@@ -27,6 +27,9 @@ $calendar-weekday-table-font-size: 11px !default;
|
|
|
27
27
|
map.merge($calendar-tokens, $range-tokens));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
|
|
31
|
+
/// for the mat-datepicker.
|
|
32
|
+
/// @param {Map} $theme The theme to generate base styles for.
|
|
30
33
|
@mixin base($theme) {
|
|
31
34
|
@if inspection.get-theme-version($theme) == 1 {
|
|
32
35
|
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
|
|
@@ -34,9 +37,14 @@ $calendar-weekday-table-font-size: 11px !default;
|
|
|
34
37
|
@else {}
|
|
35
38
|
}
|
|
36
39
|
|
|
37
|
-
|
|
40
|
+
/// Outputs color theme styles for the mat-datepicker.
|
|
41
|
+
/// @param {Map} $theme The theme to generate color styles for.
|
|
42
|
+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
|
|
43
|
+
/// $color-variant: The color variant to use for the main selection: primary, secondary, tertiary,
|
|
44
|
+
/// or error (If not specified, default primary color will be used).
|
|
45
|
+
@mixin color($theme, $options...) {
|
|
38
46
|
@if inspection.get-theme-version($theme) == 1 {
|
|
39
|
-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
|
|
47
|
+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
|
|
40
48
|
}
|
|
41
49
|
@else {
|
|
42
50
|
@include sass-utils.current-selector-or-root() {
|
|
@@ -70,6 +78,8 @@ $calendar-weekday-table-font-size: 11px !default;
|
|
|
70
78
|
}
|
|
71
79
|
}
|
|
72
80
|
|
|
81
|
+
/// Outputs typography theme styles for the mat-datepicker.
|
|
82
|
+
/// @param {Map} $theme The theme to generate typography styles for.
|
|
73
83
|
@mixin typography($theme) {
|
|
74
84
|
@if inspection.get-theme-version($theme) == 1 {
|
|
75
85
|
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
|
|
@@ -100,6 +110,8 @@ $calendar-weekday-table-font-size: 11px !default;
|
|
|
100
110
|
}
|
|
101
111
|
}
|
|
102
112
|
|
|
113
|
+
/// Outputs density theme styles for the mat-datepicker.
|
|
114
|
+
/// @param {Map} $theme The theme to generate density styles for.
|
|
103
115
|
@mixin density($theme) {
|
|
104
116
|
@if inspection.get-theme-version($theme) == 1 {
|
|
105
117
|
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
|
|
@@ -116,10 +128,15 @@ $calendar-weekday-table-font-size: 11px !default;
|
|
|
116
128
|
}
|
|
117
129
|
}
|
|
118
130
|
|
|
119
|
-
|
|
131
|
+
/// Outputs all (base, color, typography, and density) theme styles for the mat-datepicker.
|
|
132
|
+
/// @param {Map} $theme The theme to generate styles for.
|
|
133
|
+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
|
|
134
|
+
/// $color-variant: The color variant to use for the main selection: primary, secondary, tertiary,
|
|
135
|
+
/// or error (If not specified, default primary color will be used).
|
|
136
|
+
@mixin theme($theme, $options...) {
|
|
120
137
|
@include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
|
|
121
138
|
@if inspection.get-theme-version($theme) == 1 {
|
|
122
|
-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
|
|
139
|
+
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
|
|
123
140
|
}
|
|
124
141
|
@else {
|
|
125
142
|
@include base($theme);
|
|
@@ -136,9 +153,8 @@ $calendar-weekday-table-font-size: 11px !default;
|
|
|
136
153
|
}
|
|
137
154
|
}
|
|
138
155
|
|
|
139
|
-
@mixin _theme-from-tokens($tokens) {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
156
|
+
@mixin _theme-from-tokens($tokens, $options...) {
|
|
157
|
+
$mat-datepicker-tokens:
|
|
158
|
+
token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...);
|
|
159
|
+
@include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
|
|
144
160
|
}
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
@use '@material/dialog/dialog-theme' as mdc-dialog-theme;
|
|
3
3
|
@use '../core/style/sass-utils';
|
|
4
4
|
@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
|
|
5
|
+
@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
|
|
6
|
+
@use '../core/tokens/token-utils';
|
|
5
7
|
@use '../core/theming/theming';
|
|
6
8
|
@use '../core/theming/inspection';
|
|
7
9
|
@use '../core/typography/typography';
|
|
@@ -14,6 +16,8 @@
|
|
|
14
16
|
// Add default values for tokens not related to color, typography, or density.
|
|
15
17
|
@include sass-utils.current-selector-or-root() {
|
|
16
18
|
@include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
|
|
19
|
+
@include token-utils.create-token-values(
|
|
20
|
+
tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
|
|
17
21
|
}
|
|
18
22
|
}
|
|
19
23
|
}
|
|
@@ -25,6 +29,8 @@
|
|
|
25
29
|
@else {
|
|
26
30
|
@include sass-utils.current-selector-or-root() {
|
|
27
31
|
@include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme));
|
|
32
|
+
@include token-utils.create-token-values(
|
|
33
|
+
tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
|
|
28
34
|
}
|
|
29
35
|
}
|
|
30
36
|
}
|
|
@@ -36,6 +42,8 @@
|
|
|
36
42
|
@else {
|
|
37
43
|
@include sass-utils.current-selector-or-root() {
|
|
38
44
|
@include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme));
|
|
45
|
+
@include token-utils.create-token-values(
|
|
46
|
+
tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
|
|
39
47
|
}
|
|
40
48
|
}
|
|
41
49
|
}
|
|
@@ -70,5 +78,7 @@
|
|
|
70
78
|
@mixin _theme-from-tokens($tokens) {
|
|
71
79
|
@if ($tokens != ()) {
|
|
72
80
|
@include mdc-dialog-theme.theme(map.get($tokens, tokens-mdc-dialog.$prefix));
|
|
81
|
+
@include token-utils.create-token-values(
|
|
82
|
+
tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix));
|
|
73
83
|
}
|
|
74
84
|
}
|
package/dialog/index.d.ts
CHANGED
|
@@ -85,6 +85,7 @@ declare namespace i5 {
|
|
|
85
85
|
declare namespace i6 {
|
|
86
86
|
export {
|
|
87
87
|
MatDialogClose,
|
|
88
|
+
MatDialogLayoutSection,
|
|
88
89
|
MatDialogTitle,
|
|
89
90
|
MatDialogContent,
|
|
90
91
|
MatDialogActions
|
|
@@ -200,11 +201,13 @@ export declare class MatDialog implements OnDestroy {
|
|
|
200
201
|
* Container for the bottom action buttons in a dialog.
|
|
201
202
|
* Stays fixed to the bottom when scrolling.
|
|
202
203
|
*/
|
|
203
|
-
export declare class MatDialogActions {
|
|
204
|
+
export declare class MatDialogActions extends MatDialogLayoutSection {
|
|
204
205
|
/**
|
|
205
206
|
* Horizontal alignment of action buttons.
|
|
206
207
|
*/
|
|
207
208
|
align?: 'start' | 'center' | 'end';
|
|
209
|
+
protected _onAdd(): void;
|
|
210
|
+
protected _onRemove(): void;
|
|
208
211
|
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
|
|
209
212
|
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
|
|
210
213
|
}
|
|
@@ -336,6 +339,8 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
|
|
|
336
339
|
_animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
|
|
337
340
|
/** Whether animations are enabled. */
|
|
338
341
|
_animationsEnabled: boolean;
|
|
342
|
+
/** Number of actions projected in the dialog. */
|
|
343
|
+
protected _actionSectionCount: number;
|
|
339
344
|
/** Host element of the dialog container component. */
|
|
340
345
|
private _hostElement;
|
|
341
346
|
/** Duration of the dialog open animation. */
|
|
@@ -353,6 +358,11 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
|
|
|
353
358
|
* called by the dialog ref.
|
|
354
359
|
*/
|
|
355
360
|
_startExitAnimation(): void;
|
|
361
|
+
/**
|
|
362
|
+
* Updates the number action sections.
|
|
363
|
+
* @param delta Increase/decrease in the number of sections.
|
|
364
|
+
*/
|
|
365
|
+
_updateActionSectionCount(delta: number): void;
|
|
356
366
|
/**
|
|
357
367
|
* Completes the dialog open by clearing potential animation classes, trapping
|
|
358
368
|
* focus and emitting an opened event.
|
|
@@ -388,6 +398,19 @@ export declare class MatDialogContent {
|
|
|
388
398
|
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, never>;
|
|
389
399
|
}
|
|
390
400
|
|
|
401
|
+
declare abstract class MatDialogLayoutSection implements OnInit, OnDestroy {
|
|
402
|
+
protected _dialogRef: MatDialogRef<any>;
|
|
403
|
+
private _elementRef;
|
|
404
|
+
private _dialog;
|
|
405
|
+
constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
|
|
406
|
+
protected abstract _onAdd(): void;
|
|
407
|
+
protected abstract _onRemove(): void;
|
|
408
|
+
ngOnInit(): void;
|
|
409
|
+
ngOnDestroy(): void;
|
|
410
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogLayoutSection, [{ optional: true; }, null, null]>;
|
|
411
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogLayoutSection, never, never, {}, {}, never, never, true, never>;
|
|
412
|
+
}
|
|
413
|
+
|
|
391
414
|
export declare class MatDialogModule {
|
|
392
415
|
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogModule, never>;
|
|
393
416
|
static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
|
|
@@ -482,15 +505,11 @@ export declare enum MatDialogState {
|
|
|
482
505
|
/**
|
|
483
506
|
* Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
|
|
484
507
|
*/
|
|
485
|
-
export declare class MatDialogTitle
|
|
486
|
-
private _dialogRef;
|
|
487
|
-
private _elementRef;
|
|
488
|
-
private _dialog;
|
|
508
|
+
export declare class MatDialogTitle extends MatDialogLayoutSection {
|
|
489
509
|
id: string;
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
|
|
510
|
+
protected _onAdd(): void;
|
|
511
|
+
protected _onRemove(): void;
|
|
512
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, never>;
|
|
494
513
|
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
|
|
495
514
|
}
|
|
496
515
|
|
|
@@ -17,10 +17,10 @@ export class MatAutocompleteOrigin {
|
|
|
17
17
|
elementRef) {
|
|
18
18
|
this.elementRef = elementRef;
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0-
|
|
21
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0-
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
21
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0-rc.0", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
|
|
24
24
|
type: Directive,
|
|
25
25
|
args: [{
|
|
26
26
|
selector: '[matAutocompleteOrigin]',
|
|
@@ -28,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-next.5",
|
|
|
28
28
|
standalone: true,
|
|
29
29
|
}]
|
|
30
30
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO21IQUpPLHFCQUFxQjt1R0FBckIscUJBQXFCOztnR0FBckIscUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4ge1xuICBjb25zdHJ1Y3RvcihcbiAgICAvKiogUmVmZXJlbmNlIHRvIHRoZSBlbGVtZW50IG9uIHdoaWNoIHRoZSBkaXJlY3RpdmUgaXMgYXBwbGllZC4gKi9cbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICkge31cbn1cbiJdfQ==
|