@material/web 1.0.0 → 1.0.2-nightly.33c1afe.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/all.d.ts +2 -0
- package/all.js +2 -0
- package/all.js.map +1 -1
- package/button/elevated-button.js +5 -1
- package/button/elevated-button.js.map +1 -1
- package/button/internal/_elevation.scss +32 -32
- package/button/internal/_icon.scss +22 -23
- package/button/internal/_outlined-button.scss +21 -19
- package/button/internal/_shared.scss +84 -77
- package/button/internal/_touch-target.scss +4 -0
- package/button/internal/button.d.ts +7 -11
- package/button/internal/button.js +52 -38
- package/button/internal/button.js.map +1 -1
- package/button/internal/elevated-button.d.ts +1 -1
- package/button/internal/elevated-button.js +1 -1
- package/button/internal/elevated-button.js.map +1 -1
- package/button/internal/filled-button.d.ts +1 -1
- package/button/internal/filled-button.js +1 -1
- package/button/internal/filled-button.js.map +1 -1
- package/button/internal/filled-tonal-button.d.ts +1 -1
- package/button/internal/filled-tonal-button.js +1 -1
- package/button/internal/filled-tonal-button.js.map +1 -1
- package/button/internal/outlined-button.d.ts +1 -1
- package/button/internal/outlined-button.js +2 -2
- package/button/internal/outlined-button.js.map +1 -1
- package/button/internal/outlined-styles.css.js +1 -1
- package/button/internal/outlined-styles.css.js.map +1 -1
- package/button/internal/shared-elevation-styles.css.js +1 -1
- package/button/internal/shared-elevation-styles.css.js.map +1 -1
- package/button/internal/shared-styles.css.js +1 -1
- package/button/internal/shared-styles.css.js.map +1 -1
- package/checkbox/internal/_checkbox.scss +6 -0
- package/checkbox/internal/checkbox-styles.css.js +1 -1
- package/checkbox/internal/checkbox-styles.css.js.map +1 -1
- package/checkbox/internal/checkbox.d.ts +20 -87
- package/checkbox/internal/checkbox.js +35 -153
- package/checkbox/internal/checkbox.js.map +1 -1
- package/chips/filter-chip.js +5 -1
- package/chips/filter-chip.js.map +1 -1
- package/chips/harness.js.map +1 -1
- package/chips/input-chip.js +6 -1
- package/chips/input-chip.js.map +1 -1
- package/chips/internal/_shared.scss +1 -0
- package/chips/internal/assist-chip.js +8 -4
- package/chips/internal/assist-chip.js.map +1 -1
- package/chips/internal/chip-set.js +6 -4
- package/chips/internal/chip-set.js.map +1 -1
- package/chips/internal/chip.d.ts +3 -0
- package/chips/internal/chip.js +7 -5
- package/chips/internal/chip.js.map +1 -1
- package/chips/internal/filter-chip.d.ts +2 -0
- package/chips/internal/filter-chip.js +11 -5
- package/chips/internal/filter-chip.js.map +1 -1
- package/chips/internal/input-chip.d.ts +2 -0
- package/chips/internal/input-chip.js +10 -4
- package/chips/internal/input-chip.js.map +1 -1
- package/chips/internal/multi-action-chip.js.map +1 -1
- package/chips/internal/shared-styles.css.js +1 -1
- package/chips/internal/shared-styles.css.js.map +1 -1
- package/chips/internal/trailing-icons.d.ts +1 -1
- package/chips/internal/trailing-icons.js +6 -5
- package/chips/internal/trailing-icons.js.map +1 -1
- package/common.d.ts +2 -0
- package/common.js +2 -0
- package/common.js.map +1 -1
- package/dialog/harness.js +1 -2
- package/dialog/harness.js.map +1 -1
- package/dialog/internal/_dialog.scss +1 -1
- package/dialog/internal/animations.js +14 -12
- package/dialog/internal/animations.js.map +1 -1
- package/dialog/internal/dialog-styles.css.js +1 -1
- package/dialog/internal/dialog-styles.css.js.map +1 -1
- package/dialog/internal/dialog.d.ts +6 -6
- package/dialog/internal/dialog.js +24 -24
- package/dialog/internal/dialog.js.map +1 -1
- package/fab/harness.js.map +1 -1
- package/fab/internal/_fab.scss +4 -0
- package/fab/internal/_shared.scss +1 -0
- package/fab/internal/fab-styles.css.js +1 -1
- package/fab/internal/fab-styles.css.js.map +1 -1
- package/fab/internal/fab.js.map +1 -1
- package/fab/internal/shared-styles.css.js +1 -1
- package/fab/internal/shared-styles.css.js.map +1 -1
- package/fab/internal/shared.js +10 -11
- package/fab/internal/shared.js.map +1 -1
- package/field/harness.js.map +1 -1
- package/field/internal/_content.scss +185 -174
- package/field/internal/_filled-field.scss +147 -135
- package/field/internal/_label.scss +83 -72
- package/field/internal/_outlined-field.scss +276 -261
- package/field/internal/_supporting-text.scss +53 -42
- package/field/internal/field.js +26 -22
- package/field/internal/field.js.map +1 -1
- package/field/internal/filled-styles.css.js +1 -1
- package/field/internal/filled-styles.css.js.map +1 -1
- package/field/internal/outlined-styles.css.js +1 -1
- package/field/internal/outlined-styles.css.js.map +1 -1
- package/field/internal/shared-styles.css.js +1 -1
- package/field/internal/shared-styles.css.js.map +1 -1
- package/focus/internal/focus-ring.d.ts +2 -0
- package/focus/internal/focus-ring.js +3 -3
- package/focus/internal/focus-ring.js.map +1 -1
- package/icon/internal/_icon.scss +7 -4
- package/icon/internal/icon-styles.css.js +1 -1
- package/icon/internal/icon-styles.css.js.map +1 -1
- package/iconbutton/internal/icon-button.d.ts +9 -4
- package/iconbutton/internal/icon-button.js +35 -22
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/internal/aria/aria.d.ts +4 -26
- package/internal/aria/aria.js +10 -28
- package/internal/aria/aria.js.map +1 -1
- package/internal/aria/delegate.js +2 -2
- package/internal/aria/delegate.js.map +1 -1
- package/internal/controller/attachable-controller.js +3 -5
- package/internal/controller/attachable-controller.js.map +1 -1
- package/internal/controller/form-submitter.d.ts +3 -5
- package/internal/controller/form-submitter.js +5 -7
- package/internal/controller/form-submitter.js.map +1 -1
- package/internal/controller/is-rtl.js +2 -2
- package/internal/controller/is-rtl.js.map +1 -1
- package/internal/controller/string-converter.js +1 -1
- package/internal/controller/string-converter.js.map +1 -1
- package/internal/motion/animation.js.map +1 -1
- package/labs/behaviors/constraint-validation.d.ts +133 -0
- package/labs/behaviors/constraint-validation.js +114 -0
- package/labs/behaviors/constraint-validation.js.map +1 -0
- package/labs/behaviors/element-internals.d.ts +45 -0
- package/labs/behaviors/element-internals.js +50 -0
- package/labs/behaviors/element-internals.js.map +1 -0
- package/labs/behaviors/focusable.d.ts +39 -0
- package/labs/behaviors/focusable.js +82 -0
- package/labs/behaviors/focusable.js.map +1 -0
- package/labs/behaviors/form-associated.d.ts +199 -0
- package/labs/behaviors/form-associated.js +155 -0
- package/labs/behaviors/form-associated.js.map +1 -0
- package/labs/behaviors/mixin.d.ts +54 -0
- package/labs/behaviors/mixin.js +7 -0
- package/labs/behaviors/mixin.js.map +1 -0
- package/labs/behaviors/on-report-validity.d.ts +70 -0
- package/labs/behaviors/on-report-validity.js +150 -0
- package/labs/behaviors/on-report-validity.js.map +1 -0
- package/labs/behaviors/validators/checkbox-validator.d.ts +31 -0
- package/labs/behaviors/validators/checkbox-validator.js +29 -0
- package/labs/behaviors/validators/checkbox-validator.js.map +1 -0
- package/labs/behaviors/validators/select-validator.d.ts +31 -0
- package/labs/behaviors/validators/select-validator.js +30 -0
- package/labs/behaviors/validators/select-validator.js.map +1 -0
- package/labs/behaviors/validators/validator.d.ts +92 -0
- package/labs/behaviors/validators/validator.js +83 -0
- package/labs/behaviors/validators/validator.js.map +1 -0
- package/labs/card/_elevated-card.scss +6 -0
- package/labs/card/_filled-card.scss +6 -0
- package/labs/card/_outlined-card.scss +6 -0
- package/labs/card/elevated-card.d.ts +18 -0
- package/labs/card/elevated-card.js +21 -0
- package/labs/card/elevated-card.js.map +1 -0
- package/labs/card/filled-card.d.ts +18 -0
- package/labs/card/filled-card.js +21 -0
- package/labs/card/filled-card.js.map +1 -0
- package/labs/card/internal/_elevated-card.scss +35 -0
- package/labs/card/internal/_filled-card.scss +35 -0
- package/labs/card/internal/_outlined-card.scss +39 -0
- package/labs/card/internal/_shared.scss +40 -0
- package/labs/card/internal/card.d.ts +13 -0
- package/labs/card/internal/card.js +20 -0
- package/labs/card/internal/card.js.map +1 -0
- package/labs/card/internal/elevated-styles.css.js +9 -0
- package/labs/card/internal/elevated-styles.css.js.map +1 -0
- package/labs/card/internal/elevated-styles.scss +10 -0
- package/labs/card/internal/filled-styles.css.js +9 -0
- package/labs/card/internal/filled-styles.css.js.map +1 -0
- package/labs/card/internal/filled-styles.scss +10 -0
- package/labs/card/internal/outlined-styles.css.js +9 -0
- package/labs/card/internal/outlined-styles.css.js.map +1 -0
- package/labs/card/internal/outlined-styles.scss +10 -0
- package/labs/card/internal/shared-styles.css.js +9 -0
- package/labs/card/internal/shared-styles.css.js.map +1 -0
- package/labs/card/internal/shared-styles.scss +10 -0
- package/labs/card/outlined-card.d.ts +18 -0
- package/labs/card/outlined-card.js +21 -0
- package/labs/card/outlined-card.js.map +1 -0
- package/labs/item/internal/_item.scss +1 -1
- package/labs/item/internal/item-styles.css.js +1 -1
- package/labs/item/internal/item-styles.css.js.map +1 -1
- package/labs/item/internal/item.js +8 -8
- package/labs/item/internal/item.js.map +1 -1
- package/labs/navigationbar/internal/constants.js.map +1 -1
- package/labs/navigationbar/internal/navigation-bar.d.ts +3 -0
- package/labs/navigationbar/internal/navigation-bar.js +18 -11
- package/labs/navigationbar/internal/navigation-bar.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-modal.d.ts +3 -0
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js +10 -3
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer.d.ts +3 -0
- package/labs/navigationdrawer/internal/navigation-drawer.js +8 -1
- package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -1
- package/labs/navigationtab/harness.js.map +1 -1
- package/labs/navigationtab/internal/navigation-tab.d.ts +6 -0
- package/labs/navigationtab/internal/navigation-tab.js +43 -27
- package/labs/navigationtab/internal/navigation-tab.js.map +1 -1
- package/labs/navigationtab/internal/state.js.map +1 -1
- package/labs/segmentedbutton/internal/_shared.scss +1 -0
- package/labs/segmentedbutton/internal/segmented-button.d.ts +3 -0
- package/labs/segmentedbutton/internal/segmented-button.js +26 -12
- package/labs/segmentedbutton/internal/segmented-button.js.map +1 -1
- package/labs/segmentedbutton/internal/shared-styles.css.js +1 -1
- package/labs/segmentedbutton/internal/shared-styles.css.js.map +1 -1
- package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts +5 -0
- package/labs/segmentedbuttonset/internal/segmented-button-set.js +14 -9
- package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -1
- package/list/harness.d.ts +3 -2
- package/list/harness.js.map +1 -1
- package/list/internal/list-controller.d.ts +1 -1
- package/list/internal/list-controller.js +7 -3
- package/list/internal/list-controller.js.map +1 -1
- package/list/internal/list-navigation-helpers.js.map +1 -1
- package/list/internal/list.d.ts +2 -2
- package/list/internal/list.js +8 -6
- package/list/internal/list.js.map +1 -1
- package/list/internal/listitem/_list-item.scss +19 -0
- package/list/internal/listitem/harness.d.ts +3 -3
- package/list/internal/listitem/harness.js.map +1 -1
- package/list/internal/listitem/list-item-styles.css.js +1 -1
- package/list/internal/listitem/list-item-styles.css.js.map +1 -1
- package/list/internal/listitem/list-item.d.ts +3 -2
- package/list/internal/listitem/list-item.js +20 -21
- package/list/internal/listitem/list-item.js.map +1 -1
- package/list/list-item.d.ts +4 -12
- package/list/list-item.js +5 -14
- package/list/list-item.js.map +1 -1
- package/menu/harness.js.map +1 -1
- package/menu/internal/_menu.scss +20 -1
- package/menu/internal/controllers/menuItemController.d.ts +7 -0
- package/menu/internal/controllers/menuItemController.js +17 -4
- package/menu/internal/controllers/menuItemController.js.map +1 -1
- package/menu/internal/controllers/shared.d.ts +9 -1
- package/menu/internal/controllers/shared.js +4 -4
- package/menu/internal/controllers/shared.js.map +1 -1
- package/menu/internal/controllers/surfacePositionController.d.ts +16 -2
- package/menu/internal/controllers/surfacePositionController.js +134 -56
- package/menu/internal/controllers/surfacePositionController.js.map +1 -1
- package/menu/internal/controllers/typeaheadController.js +19 -14
- package/menu/internal/controllers/typeaheadController.js.map +1 -1
- package/menu/internal/menu-styles.css.js +1 -1
- package/menu/internal/menu-styles.css.js.map +1 -1
- package/menu/internal/menu.d.ts +55 -17
- package/menu/internal/menu.js +175 -88
- package/menu/internal/menu.js.map +1 -1
- package/menu/internal/menuitem/_menu-item.scss +24 -0
- package/menu/internal/menuitem/harness.d.ts +3 -1
- package/menu/internal/menuitem/harness.js.map +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
- package/menu/internal/menuitem/menu-item.d.ts +3 -2
- package/menu/internal/menuitem/menu-item.js +20 -20
- package/menu/internal/menuitem/menu-item.js.map +1 -1
- package/menu/internal/submenu/sub-menu.d.ts +9 -8
- package/menu/internal/submenu/sub-menu.js +35 -22
- package/menu/internal/submenu/sub-menu.js.map +1 -1
- package/menu/internal/types.js.map +1 -1
- package/menu/menu-item.js +1 -2
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.js +1 -2
- package/menu/menu.js.map +1 -1
- package/package.json +1 -1
- package/progress/internal/_circular-progress.scss +2 -2
- package/progress/internal/_linear-progress.scss +1 -1
- package/progress/internal/circular-progress-styles.css.js +1 -1
- package/progress/internal/circular-progress-styles.css.js.map +1 -1
- package/progress/internal/circular-progress.js +11 -10
- package/progress/internal/circular-progress.js.map +1 -1
- package/progress/internal/linear-progress-styles.css.js +1 -1
- package/progress/internal/linear-progress-styles.css.js.map +1 -1
- package/progress/internal/linear-progress.d.ts +1 -1
- package/progress/internal/linear-progress.js +3 -3
- package/progress/internal/linear-progress.js.map +1 -1
- package/progress/internal/progress.js +4 -2
- package/progress/internal/progress.js.map +1 -1
- package/radio/internal/_radio.scss +144 -123
- package/radio/internal/radio-styles.css.js +1 -1
- package/radio/internal/radio-styles.css.js.map +1 -1
- package/radio/internal/radio.d.ts +12 -23
- package/radio/internal/radio.js +31 -50
- package/radio/internal/radio.js.map +1 -1
- package/radio/internal/single-selection-controller.js +1 -1
- package/radio/internal/single-selection-controller.js.map +1 -1
- package/radio/radio.js +1 -2
- package/radio/radio.js.map +1 -1
- package/ripple/internal/ripple.js +21 -18
- package/ripple/internal/ripple.js.map +1 -1
- package/select/filled-select.js +1 -2
- package/select/filled-select.js.map +1 -1
- package/select/harness.js +1 -1
- package/select/harness.js.map +1 -1
- package/select/internal/_shared.scss +4 -0
- package/select/internal/select.d.ts +26 -99
- package/select/internal/select.js +78 -187
- package/select/internal/select.js.map +1 -1
- package/select/internal/selectoption/select-option.d.ts +8 -6
- package/select/internal/selectoption/select-option.js +25 -23
- package/select/internal/selectoption/select-option.js.map +1 -1
- package/select/internal/selectoption/selectOptionController.js +1 -1
- package/select/internal/selectoption/selectOptionController.js.map +1 -1
- package/select/internal/shared-styles.css.js +1 -1
- package/select/internal/shared-styles.css.js.map +1 -1
- package/select/outlined-select.js +1 -2
- package/select/outlined-select.js.map +1 -1
- package/select/select-option.js +1 -2
- package/select/select-option.js.map +1 -1
- package/slider/harness.js +5 -5
- package/slider/harness.js.map +1 -1
- package/slider/internal/_slider.scss +68 -30
- package/slider/internal/slider-styles.css.js +1 -1
- package/slider/internal/slider-styles.css.js.map +1 -1
- package/slider/internal/slider.d.ts +16 -25
- package/slider/internal/slider.js +111 -115
- package/slider/internal/slider.js.map +1 -1
- package/switch/internal/_handle.scss +159 -141
- package/switch/internal/_icon.scss +95 -72
- package/switch/internal/_switch.scss +90 -95
- package/switch/internal/_track.scss +110 -77
- package/switch/internal/switch-styles.css.js +1 -1
- package/switch/internal/switch-styles.css.js.map +1 -1
- package/switch/internal/switch.d.ts +13 -89
- package/switch/internal/switch.js +32 -159
- package/switch/internal/switch.js.map +1 -1
- package/switch/switch.js +1 -2
- package/switch/switch.js.map +1 -1
- package/tabs/harness.js +3 -3
- package/tabs/harness.js.map +1 -1
- package/tabs/internal/_tab.scss +27 -35
- package/tabs/internal/primary-tab.d.ts +0 -2
- package/tabs/internal/tab-styles.css.js +1 -1
- package/tabs/internal/tab-styles.css.js.map +1 -1
- package/tabs/internal/tab.d.ts +10 -5
- package/tabs/internal/tab.js +43 -22
- package/tabs/internal/tab.js.map +1 -1
- package/tabs/internal/tabs.d.ts +7 -4
- package/tabs/internal/tabs.js +23 -22
- package/tabs/internal/tabs.js.map +1 -1
- package/textfield/filled-text-field.js +1 -2
- package/textfield/filled-text-field.js.map +1 -1
- package/textfield/harness.js +3 -2
- package/textfield/harness.js.map +1 -1
- package/textfield/internal/text-field.d.ts +33 -18
- package/textfield/internal/text-field.js +96 -58
- package/textfield/internal/text-field.js.map +1 -1
- package/textfield/outlined-text-field.js +1 -2
- package/textfield/outlined-text-field.js.map +1 -1
- package/tokens/_index.scss +3 -0
- package/tokens/_md-comp-elevated-card.scss +63 -0
- package/tokens/_md-comp-filled-card.scss +63 -0
- package/tokens/_md-comp-icon.scss +2 -0
- package/tokens/_md-comp-outlined-card.scss +69 -0
- package/tokens/_md-comp-test-table.scss +1 -0
- package/internal/controller/element-internals.d.ts +0 -35
- package/internal/controller/element-internals.js +0 -24
- package/internal/controller/element-internals.js.map +0 -1
- package/list/internal/listitem/forced-colors-styles.css.js +0 -9
- package/list/internal/listitem/forced-colors-styles.css.js.map +0 -1
- package/list/internal/listitem/forced-colors-styles.scss +0 -19
- package/menu/internal/forced-colors-styles.css.js +0 -9
- package/menu/internal/forced-colors-styles.css.js.map +0 -1
- package/menu/internal/forced-colors-styles.scss +0 -12
- package/menu/internal/menuitem/forced-colors-styles.css.js +0 -9
- package/menu/internal/menuitem/forced-colors-styles.css.js.map +0 -1
- package/menu/internal/menuitem/forced-colors-styles.scss +0 -26
- package/radio/internal/forced-colors-styles.css.js +0 -9
- package/radio/internal/forced-colors-styles.css.js.map +0 -1
- package/radio/internal/forced-colors-styles.scss +0 -29
- package/select/internal/filled-forced-colors-styles.css.d.ts +0 -1
- package/select/internal/filled-forced-colors-styles.css.js +0 -9
- package/select/internal/filled-forced-colors-styles.css.js.map +0 -1
- package/select/internal/filled-forced-colors-styles.scss +0 -29
- package/select/internal/outlined-forced-colors-styles.css.d.ts +0 -1
- package/select/internal/outlined-forced-colors-styles.css.js +0 -9
- package/select/internal/outlined-forced-colors-styles.css.js.map +0 -1
- package/select/internal/outlined-forced-colors-styles.scss +0 -29
- package/switch/internal/forced-colors-styles.css.d.ts +0 -1
- package/switch/internal/forced-colors-styles.css.js +0 -9
- package/switch/internal/forced-colors-styles.css.js.map +0 -1
- package/switch/internal/forced-colors-styles.scss +0 -42
- package/textfield/internal/filled-forced-colors-styles.css.d.ts +0 -1
- package/textfield/internal/filled-forced-colors-styles.css.js +0 -9
- package/textfield/internal/filled-forced-colors-styles.css.js.map +0 -1
- package/textfield/internal/filled-forced-colors-styles.scss +0 -29
- package/textfield/internal/outlined-forced-colors-styles.css.d.ts +0 -1
- package/textfield/internal/outlined-forced-colors-styles.css.js +0 -9
- package/textfield/internal/outlined-forced-colors-styles.css.js.map +0 -1
- package/textfield/internal/outlined-forced-colors-styles.scss +0 -29
- /package/{list/internal/listitem/forced-colors-styles.css.d.ts → labs/card/internal/elevated-styles.css.d.ts} +0 -0
- /package/{menu/internal/forced-colors-styles.css.d.ts → labs/card/internal/filled-styles.css.d.ts} +0 -0
- /package/{menu/internal/menuitem/forced-colors-styles.css.d.ts → labs/card/internal/outlined-styles.css.d.ts} +0 -0
- /package/{radio/internal/forced-colors-styles.css.d.ts → labs/card/internal/shared-styles.css.d.ts} +0 -0
|
@@ -12,20 +12,21 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION = {
|
|
|
12
12
|
[
|
|
13
13
|
// Dialog slide down
|
|
14
14
|
[{ 'transform': 'translateY(-50px)' }, { 'transform': 'translateY(0)' }],
|
|
15
|
-
{ duration: 500, easing: EASING.EMPHASIZED }
|
|
15
|
+
{ duration: 500, easing: EASING.EMPHASIZED },
|
|
16
16
|
],
|
|
17
17
|
],
|
|
18
18
|
scrim: [
|
|
19
19
|
[
|
|
20
20
|
// Scrim fade in
|
|
21
|
-
[{ 'opacity': 0 }, { 'opacity': 0.32 }],
|
|
21
|
+
[{ 'opacity': 0 }, { 'opacity': 0.32 }],
|
|
22
|
+
{ duration: 500, easing: 'linear' },
|
|
22
23
|
],
|
|
23
24
|
],
|
|
24
25
|
container: [
|
|
25
26
|
[
|
|
26
27
|
// Container fade in
|
|
27
28
|
[{ 'opacity': 0 }, { 'opacity': 1 }],
|
|
28
|
-
{ duration: 50, easing: 'linear', pseudoElement: '::before' }
|
|
29
|
+
{ duration: 50, easing: 'linear', pseudoElement: '::before' },
|
|
29
30
|
],
|
|
30
31
|
[
|
|
31
32
|
// Container grow
|
|
@@ -41,21 +42,21 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION = {
|
|
|
41
42
|
[
|
|
42
43
|
// Headline fade in
|
|
43
44
|
[{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
|
|
44
|
-
{ duration: 250, easing: 'linear', fill: 'forwards' }
|
|
45
|
+
{ duration: 250, easing: 'linear', fill: 'forwards' },
|
|
45
46
|
],
|
|
46
47
|
],
|
|
47
48
|
content: [
|
|
48
49
|
[
|
|
49
50
|
// Content fade in
|
|
50
51
|
[{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
|
|
51
|
-
{ duration: 250, easing: 'linear', fill: 'forwards' }
|
|
52
|
+
{ duration: 250, easing: 'linear', fill: 'forwards' },
|
|
52
53
|
],
|
|
53
54
|
],
|
|
54
55
|
actions: [
|
|
55
56
|
[
|
|
56
57
|
// Actions fade in
|
|
57
58
|
[{ 'opacity': 0 }, { 'opacity': 0, offset: 0.5 }, { 'opacity': 1 }],
|
|
58
|
-
{ duration: 300, easing: 'linear', fill: 'forwards' }
|
|
59
|
+
{ duration: 300, easing: 'linear', fill: 'forwards' },
|
|
59
60
|
],
|
|
60
61
|
],
|
|
61
62
|
};
|
|
@@ -67,13 +68,14 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION = {
|
|
|
67
68
|
[
|
|
68
69
|
// Dialog slide up
|
|
69
70
|
[{ 'transform': 'translateY(0)' }, { 'transform': 'translateY(-50px)' }],
|
|
70
|
-
{ duration: 150, easing: EASING.EMPHASIZED_ACCELERATE }
|
|
71
|
+
{ duration: 150, easing: EASING.EMPHASIZED_ACCELERATE },
|
|
71
72
|
],
|
|
72
73
|
],
|
|
73
74
|
scrim: [
|
|
74
75
|
[
|
|
75
76
|
// Scrim fade out
|
|
76
|
-
[{ 'opacity': 0.32 }, { 'opacity': 0 }],
|
|
77
|
+
[{ 'opacity': 0.32 }, { 'opacity': 0 }],
|
|
78
|
+
{ duration: 150, easing: 'linear' },
|
|
77
79
|
],
|
|
78
80
|
],
|
|
79
81
|
container: [
|
|
@@ -90,27 +92,27 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION = {
|
|
|
90
92
|
// Container fade out
|
|
91
93
|
[{ 'opacity': '1' }, { 'opacity': '0' }],
|
|
92
94
|
{ delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' },
|
|
93
|
-
]
|
|
95
|
+
],
|
|
94
96
|
],
|
|
95
97
|
headline: [
|
|
96
98
|
[
|
|
97
99
|
// Headline fade out
|
|
98
100
|
[{ 'opacity': 1 }, { 'opacity': 0 }],
|
|
99
|
-
{ duration: 100, easing: 'linear', fill: 'forwards' }
|
|
101
|
+
{ duration: 100, easing: 'linear', fill: 'forwards' },
|
|
100
102
|
],
|
|
101
103
|
],
|
|
102
104
|
content: [
|
|
103
105
|
[
|
|
104
106
|
// Content fade out
|
|
105
107
|
[{ 'opacity': 1 }, { 'opacity': 0 }],
|
|
106
|
-
{ duration: 100, easing: 'linear', fill: 'forwards' }
|
|
108
|
+
{ duration: 100, easing: 'linear', fill: 'forwards' },
|
|
107
109
|
],
|
|
108
110
|
],
|
|
109
111
|
actions: [
|
|
110
112
|
[
|
|
111
113
|
// Actions fade out
|
|
112
114
|
[{ 'opacity': 1 }, { 'opacity': 0 }],
|
|
113
|
-
{ duration: 100, easing: 'linear', fill: 'forwards' }
|
|
115
|
+
{ duration: 100, easing: 'linear', fill: 'forwards' },
|
|
114
116
|
],
|
|
115
117
|
],
|
|
116
118
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animations.js","sourceRoot":"","sources":["animations.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AA0C1D;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAoB;IAC5D,MAAM,EAAE;QACN;YACE,oBAAoB;YACpB,CAAC,EAAC,WAAW,EAAE,mBAAmB,EAAC,EAAE,EAAC,WAAW,EAAE,eAAe,EAAC,CAAC;YACpE,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,UAAU,EAAC;SAC3C;KACF;IACD,KAAK,EAAE;QACL;YACE,gBAAgB;YAChB,CAAC,EAAC,SAAS,EAAE,CAAC,EAAC,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"animations.js","sourceRoot":"","sources":["animations.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A dialog animation's arguments. See `Element.prototype.animate`.\n */\nexport type DialogAnimationArgs = Parameters<Element['animate']>;\n\n/**\n * A collection of dialog animations. Each element of a dialog may have multiple\n * animations.\n */\nexport interface DialogAnimation {\n /**\n * Animations for the dialog itself.\n */\n dialog?: DialogAnimationArgs[];\n\n /**\n * Animations for the scrim backdrop.\n */\n scrim?: DialogAnimationArgs[];\n\n /**\n * Animations for the container of the dialog.\n */\n container?: DialogAnimationArgs[];\n\n /**\n * Animations for the headline section.\n */\n headline?: DialogAnimationArgs[];\n\n /**\n * Animations for the contents section.\n */\n content?: DialogAnimationArgs[];\n /**\n * Animations for the actions section.\n */\n actions?: DialogAnimationArgs[];\n}\n\n/**\n * The default dialog open animation.\n */\nexport const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {\n dialog: [\n [\n // Dialog slide down\n [{'transform': 'translateY(-50px)'}, {'transform': 'translateY(0)'}],\n {duration: 500, easing: EASING.EMPHASIZED},\n ],\n ],\n scrim: [\n [\n // Scrim fade in\n [{'opacity': 0}, {'opacity': 0.32}],\n {duration: 500, easing: 'linear'},\n ],\n ],\n container: [\n [\n // Container fade in\n [{'opacity': 0}, {'opacity': 1}],\n {duration: 50, easing: 'linear', pseudoElement: '::before'},\n ],\n [\n // Container grow\n // Note: current spec says to grow from 0dp->100% and shrink from\n // 100%->35%. We change this to 35%->100% to simplify the animation that\n // is supposed to clip content as it grows. From 0dp it's possible to see\n // text/actions appear before the container has fully grown.\n [{'height': '35%'}, {'height': '100%'}],\n {duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before'},\n ],\n ],\n headline: [\n [\n // Headline fade in\n [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n {duration: 250, easing: 'linear', fill: 'forwards'},\n ],\n ],\n content: [\n [\n // Content fade in\n [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n {duration: 250, easing: 'linear', fill: 'forwards'},\n ],\n ],\n actions: [\n [\n // Actions fade in\n [{'opacity': 0}, {'opacity': 0, offset: 0.5}, {'opacity': 1}],\n {duration: 300, easing: 'linear', fill: 'forwards'},\n ],\n ],\n};\n\n/**\n * The default dialog close animation.\n */\nexport const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {\n dialog: [\n [\n // Dialog slide up\n [{'transform': 'translateY(0)'}, {'transform': 'translateY(-50px)'}],\n {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE},\n ],\n ],\n scrim: [\n [\n // Scrim fade out\n [{'opacity': 0.32}, {'opacity': 0}],\n {duration: 150, easing: 'linear'},\n ],\n ],\n container: [\n [\n // Container shrink\n [{'height': '100%'}, {'height': '35%'}],\n {\n duration: 150,\n easing: EASING.EMPHASIZED_ACCELERATE,\n pseudoElement: '::before',\n },\n ],\n [\n // Container fade out\n [{'opacity': '1'}, {'opacity': '0'}],\n {delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before'},\n ],\n ],\n headline: [\n [\n // Headline fade out\n [{'opacity': 1}, {'opacity': 0}],\n {duration: 100, easing: 'linear', fill: 'forwards'},\n ],\n ],\n content: [\n [\n // Content fade out\n [{'opacity': 1}, {'opacity': 0}],\n {duration: 100, easing: 'linear', fill: 'forwards'},\n ],\n ],\n actions: [\n [\n // Actions fade out\n [{'opacity': 1}, {'opacity': 0}],\n {duration: 100, easing: 'linear', fill: 'forwards'},\n ],\n ],\n};\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);
|
|
7
|
+
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);margin-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=dialog-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);
|
|
1
|
+
{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);margin-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}
|
|
@@ -9,12 +9,12 @@ import { DialogAnimation } from './animations.js';
|
|
|
9
9
|
/**
|
|
10
10
|
* A dialog component.
|
|
11
11
|
*
|
|
12
|
-
* @fires open Dispatched when the dialog is opening before any animations.
|
|
13
|
-
* @fires opened Dispatched when the dialog has opened after any animations.
|
|
14
|
-
* @fires close Dispatched when the dialog is closing before any animations.
|
|
15
|
-
* @fires closed Dispatched when the dialog has closed after any animations.
|
|
16
|
-
* @fires cancel Dispatched when the dialog has been canceled by clicking
|
|
17
|
-
*
|
|
12
|
+
* @fires open {Event} Dispatched when the dialog is opening before any animations.
|
|
13
|
+
* @fires opened {Event} Dispatched when the dialog has opened after any animations.
|
|
14
|
+
* @fires close {Event} Dispatched when the dialog is closing before any animations.
|
|
15
|
+
* @fires closed {Event} Dispatched when the dialog has closed after any animations.
|
|
16
|
+
* @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
|
|
17
|
+
* on the scrim or pressing Escape.
|
|
18
18
|
*/
|
|
19
19
|
export declare class Dialog extends LitElement {
|
|
20
20
|
/** @nocollapse */
|
|
@@ -10,16 +10,16 @@ import { property, query, state } from 'lit/decorators.js';
|
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
11
|
import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
|
|
12
12
|
import { redispatchEvent } from '../../internal/controller/events.js';
|
|
13
|
-
import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION } from './animations.js';
|
|
13
|
+
import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from './animations.js';
|
|
14
14
|
/**
|
|
15
15
|
* A dialog component.
|
|
16
16
|
*
|
|
17
|
-
* @fires open Dispatched when the dialog is opening before any animations.
|
|
18
|
-
* @fires opened Dispatched when the dialog has opened after any animations.
|
|
19
|
-
* @fires close Dispatched when the dialog is closing before any animations.
|
|
20
|
-
* @fires closed Dispatched when the dialog has closed after any animations.
|
|
21
|
-
* @fires cancel Dispatched when the dialog has been canceled by clicking
|
|
22
|
-
*
|
|
17
|
+
* @fires open {Event} Dispatched when the dialog is opening before any animations.
|
|
18
|
+
* @fires opened {Event} Dispatched when the dialog has opened after any animations.
|
|
19
|
+
* @fires close {Event} Dispatched when the dialog is closing before any animations.
|
|
20
|
+
* @fires closed {Event} Dispatched when the dialog has closed after any animations.
|
|
21
|
+
* @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
|
|
22
|
+
* on the scrim or pressing Escape.
|
|
23
23
|
*/
|
|
24
24
|
export class Dialog extends LitElement {
|
|
25
25
|
/**
|
|
@@ -181,18 +181,16 @@ export class Dialog extends LitElement {
|
|
|
181
181
|
role=${this.type === 'alert' ? 'alertdialog' : nothing}
|
|
182
182
|
@cancel=${this.handleCancel}
|
|
183
183
|
@click=${this.handleDialogClick}
|
|
184
|
-
.returnValue=${this.returnValue || nothing}
|
|
185
|
-
|
|
186
|
-
<div class="container"
|
|
187
|
-
@click=${this.handleContentClick}
|
|
188
|
-
>
|
|
184
|
+
.returnValue=${this.returnValue || nothing}>
|
|
185
|
+
<div class="container" @click=${this.handleContentClick}>
|
|
189
186
|
<div class="headline">
|
|
190
187
|
<div class="icon" aria-hidden="true">
|
|
191
188
|
<slot name="icon" @slotchange=${this.handleIconChange}></slot>
|
|
192
189
|
</div>
|
|
193
190
|
<h2 id="headline" aria-hidden=${!this.hasHeadline || nothing}>
|
|
194
|
-
<slot
|
|
195
|
-
|
|
191
|
+
<slot
|
|
192
|
+
name="headline"
|
|
193
|
+
@slotchange=${this.handleHeadlineChange}></slot>
|
|
196
194
|
</h2>
|
|
197
195
|
<md-divider></md-divider>
|
|
198
196
|
</div>
|
|
@@ -205,15 +203,14 @@ export class Dialog extends LitElement {
|
|
|
205
203
|
</div>
|
|
206
204
|
<div class="actions">
|
|
207
205
|
<md-divider></md-divider>
|
|
208
|
-
<slot name="actions"
|
|
209
|
-
@slotchange=${this.handleActionsChange}></slot>
|
|
206
|
+
<slot name="actions" @slotchange=${this.handleActionsChange}></slot>
|
|
210
207
|
</div>
|
|
211
208
|
</div>
|
|
212
209
|
</dialog>
|
|
213
210
|
`;
|
|
214
211
|
}
|
|
215
212
|
firstUpdated() {
|
|
216
|
-
this.intersectionObserver = new IntersectionObserver(entries => {
|
|
213
|
+
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
217
214
|
for (const entry of entries) {
|
|
218
215
|
this.handleAnchorIntersection(entry);
|
|
219
216
|
}
|
|
@@ -268,11 +265,14 @@ export class Dialog extends LitElement {
|
|
|
268
265
|
if (!dialog || !scrim || !container || !headline || !content || !actions) {
|
|
269
266
|
return;
|
|
270
267
|
}
|
|
271
|
-
const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate } = animation;
|
|
268
|
+
const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation;
|
|
272
269
|
const elementAndAnimation = [
|
|
273
|
-
[dialog, dialogAnimate ?? []],
|
|
274
|
-
[
|
|
275
|
-
[
|
|
270
|
+
[dialog, dialogAnimate ?? []],
|
|
271
|
+
[scrim, scrimAnimate ?? []],
|
|
272
|
+
[container, containerAnimate ?? []],
|
|
273
|
+
[headline, headlineAnimate ?? []],
|
|
274
|
+
[content, contentAnimate ?? []],
|
|
275
|
+
[actions, actionsAnimate ?? []],
|
|
276
276
|
];
|
|
277
277
|
const animations = [];
|
|
278
278
|
for (const [element, animation] of elementAndAnimation) {
|
|
@@ -280,7 +280,7 @@ export class Dialog extends LitElement {
|
|
|
280
280
|
animations.push(element.animate(...animateArgs));
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
|
-
await Promise.all(animations.map(animation => animation.finished));
|
|
283
|
+
await Promise.all(animations.map((animation) => animation.finished));
|
|
284
284
|
}
|
|
285
285
|
handleHeadlineChange(event) {
|
|
286
286
|
const slot = event.target;
|
|
@@ -304,7 +304,7 @@ export class Dialog extends LitElement {
|
|
|
304
304
|
}
|
|
305
305
|
}
|
|
306
306
|
getIsConnectedPromise() {
|
|
307
|
-
return new Promise(resolve => {
|
|
307
|
+
return new Promise((resolve) => {
|
|
308
308
|
this.isConnectedPromiseResolve = resolve;
|
|
309
309
|
});
|
|
310
310
|
}
|
|
@@ -315,7 +315,7 @@ export class Dialog extends LitElement {
|
|
|
315
315
|
/** @nocollapse */
|
|
316
316
|
Dialog.shadowRootOptions = {
|
|
317
317
|
...LitElement.shadowRootOptions,
|
|
318
|
-
delegatesFocus: true
|
|
318
|
+
delegatesFocus: true,
|
|
319
319
|
};
|
|
320
320
|
__decorate([
|
|
321
321
|
property({ type: Boolean })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, DialogAnimation, DialogAnimationArgs} from './animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open Dispatched when the dialog is opening before any animations.\n * @fires opened Dispatched when the dialog has opened after any animations.\n * @fires close Dispatched when the dialog is closing before any animations.\n * @fires closed Dispatched when the dialog has closed after any animations.\n * @fires cancel Dispatched when the dialog has been canceled by clicking on the\n * scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n static {\n requestUpdateOnAriaChange(Dialog);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n /**\n * Opens the dialog when set to `true` and closes it when set to `false`.\n */\n @property({type: Boolean})\n get open() {\n return this.isOpen;\n }\n\n set open(open: boolean) {\n if (open === this.isOpen) {\n return;\n }\n\n this.isOpen = open;\n if (open) {\n this.setAttribute('open', '');\n this.show();\n } else {\n this.removeAttribute('open');\n this.close();\n }\n }\n\n /**\n * Gets or sets the dialog's return value, usually to indicate which button\n * a user pressed to close it.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n */\n @property({attribute: false}) returnValue = '';\n\n /**\n * The type of dialog for accessibility. Set this to `alert` to announce a\n * dialog as an alert dialog.\n */\n @property() type?: 'alert';\n\n /**\n * Gets the opening animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n /**\n * Gets the closing animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n private isOpen = false;\n private isOpening = false;\n // getIsConnectedPromise() immediately sets the resolve property.\n private isConnectedPromiseResolve!: () => void;\n private isConnectedPromise = this.getIsConnectedPromise();\n @query('dialog') private readonly dialog!: HTMLDialogElement|null;\n @query('.scrim') private readonly scrim!: HTMLDialogElement|null;\n @query('.container') private readonly container!: HTMLDialogElement|null;\n @query('.headline') private readonly headline!: HTMLDialogElement|null;\n @query('.content') private readonly content!: HTMLDialogElement|null;\n @query('.actions') private readonly actions!: HTMLDialogElement|null;\n @state() private isAtScrollTop = false;\n @state() private isAtScrollBottom = false;\n @query('.scroller') private readonly scroller!: HTMLElement|null;\n @query('.top.anchor') private readonly topAnchor!: HTMLElement|null;\n @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement|null;\n private nextClickIsFromContent = false;\n private intersectionObserver?: IntersectionObserver;\n // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n @state() private hasHeadline = false;\n @state() private hasActions = false;\n @state() private hasIcon = false;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('submit', this.handleSubmit);\n }\n }\n\n /**\n * Opens the dialog and fires a cancelable `open` event. After a dialog's\n * animation, an `opened` event is fired.\n *\n * Add an `autocomplete` attribute to a child of the dialog that should\n * receive focus after opening.\n *\n * @return A Promise that resolves after the animation is finished and the\n * `opened` event was fired.\n */\n async show() {\n this.isOpening = true;\n // Dialogs can be opened before being attached to the DOM, so we need to\n // wait until we're connected before calling `showModal()`.\n await this.isConnectedPromise;\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already opened or if `dialog.close()` was called while awaiting.\n if (dialog.open || !this.isOpening) {\n this.isOpening = false;\n return;\n }\n\n const preventOpen =\n !this.dispatchEvent(new Event('open', {cancelable: true}));\n if (preventOpen) {\n this.open = false;\n return;\n }\n\n // All Material dialogs are modal.\n dialog.showModal();\n this.open = true;\n // Reset scroll position if re-opening a dialog with the same content.\n if (this.scroller) {\n this.scroller.scrollTop = 0;\n }\n // Native modal dialogs ignore autofocus and instead force focus to the\n // first focusable child. Override this behavior if there is a child with\n // an autofocus attribute.\n this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n await this.animateDialog(this.getOpenAnimation());\n this.dispatchEvent(new Event('opened'));\n this.isOpening = false;\n }\n\n /**\n * Closes the dialog and fires a cancelable `close` event. After a dialog's\n * animation, a `closed` event is fired.\n *\n * @param returnValue A return value usually indicating which button was used\n * to close a dialog. If a dialog is canceled by clicking the scrim or\n * pressing Escape, it will not change the return value after closing.\n * @return A Promise that resolves after the animation is finished and the\n * `closed` event was fired.\n */\n async close(returnValue = this.returnValue) {\n this.isOpening = false;\n if (!this.isConnected) {\n // Disconnected dialogs do not fire close events or animate.\n this.open = false;\n return;\n }\n\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already closed or if `dialog.show()` was called while awaiting.\n if (!dialog.open || this.isOpening) {\n this.open = false;\n return;\n }\n\n const prevReturnValue = this.returnValue;\n this.returnValue = returnValue;\n const preventClose =\n !this.dispatchEvent(new Event('close', {cancelable: true}));\n if (preventClose) {\n this.returnValue = prevReturnValue;\n return;\n }\n\n await this.animateDialog(this.getCloseAnimation());\n dialog.close(returnValue);\n this.open = false;\n this.dispatchEvent(new Event('closed'));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.isConnectedPromiseResolve();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.isConnectedPromise = this.getIsConnectedPromise();\n }\n\n protected override render() {\n const scrollable =\n this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n const classes = {\n 'has-headline': this.hasHeadline,\n 'has-actions': this.hasActions,\n 'has-icon': this.hasIcon,\n 'scrollable': scrollable,\n 'show-top-divider': scrollable && !this.isAtScrollTop,\n 'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n };\n\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <div class=\"scrim\"></div>\n <dialog\n class=${classMap(classes)}\n aria-label=${ariaLabel || nothing}\n aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n role=${this.type === 'alert' ? 'alertdialog' : nothing}\n @cancel=${this.handleCancel}\n @click=${this.handleDialogClick}\n .returnValue=${this.returnValue || nothing}\n >\n <div class=\"container\"\n @click=${this.handleContentClick}\n >\n <div class=\"headline\">\n <div class=\"icon\" aria-hidden=\"true\">\n <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n </div>\n <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n <slot name=\"headline\"\n @slotchange=${this.handleHeadlineChange}></slot>\n </h2>\n <md-divider></md-divider>\n </div>\n <div class=\"scroller\">\n <div class=\"content\">\n <div class=\"top anchor\"></div>\n <slot name=\"content\"></slot>\n <div class=\"bottom anchor\"></div>\n </div>\n </div>\n <div class=\"actions\">\n <md-divider></md-divider>\n <slot name=\"actions\"\n @slotchange=${this.handleActionsChange}></slot>\n </div>\n </div>\n </dialog>\n `;\n }\n\n protected override firstUpdated() {\n this.intersectionObserver = new IntersectionObserver(entries => {\n for (const entry of entries) {\n this.handleAnchorIntersection(entry);\n }\n }, {root: this.scroller!});\n\n this.intersectionObserver.observe(this.topAnchor!);\n this.intersectionObserver.observe(this.bottomAnchor!);\n }\n\n private handleDialogClick() {\n if (this.nextClickIsFromContent) {\n // Avoid doing a layout calculation below if we know the click came from\n // content.\n this.nextClickIsFromContent = false;\n return;\n }\n\n // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n // but Material dialogs do.\n const preventDefault =\n !this.dispatchEvent(new Event('cancel', {cancelable: true}));\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private handleContentClick() {\n this.nextClickIsFromContent = true;\n }\n\n private handleSubmit(event: SubmitEvent) {\n const form = event.target as HTMLFormElement;\n const {submitter} = event;\n if (form.method !== 'dialog' || !submitter) {\n return;\n }\n\n // Close reason is the submitter's value attribute, or the dialog's\n // `returnValue` if there is no attribute.\n this.close(submitter.getAttribute('value') ?? this.returnValue);\n }\n\n private handleCancel(event: Event) {\n if (event.target !== this.dialog) {\n // Ignore any cancel events dispatched by content.\n return;\n }\n\n const preventDefault = !redispatchEvent(this, event);\n // We always prevent default on the original dialog event since we'll\n // animate closing it before it actually closes.\n event.preventDefault();\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private async animateDialog(animation: DialogAnimation) {\n const {dialog, scrim, container, headline, content, actions} = this;\n if (!dialog || !scrim || !container || !headline || !content || !actions) {\n return;\n }\n\n const {\n container: containerAnimate,\n dialog: dialogAnimate,\n scrim: scrimAnimate,\n headline: headlineAnimate,\n content: contentAnimate,\n actions: actionsAnimate\n } = animation;\n\n const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []],\n [container, containerAnimate ?? []], [headline, headlineAnimate ?? []],\n [content, contentAnimate ?? []], [actions, actionsAnimate ?? []]\n ];\n\n const animations: Animation[] = [];\n for (const [element, animation] of elementAndAnimation) {\n for (const animateArgs of animation) {\n animations.push(element.animate(...animateArgs));\n }\n }\n\n await Promise.all(animations.map(animation => animation.finished));\n }\n\n private handleHeadlineChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasHeadline = slot.assignedElements().length > 0;\n }\n\n private handleActionsChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasActions = slot.assignedElements().length > 0;\n }\n\n private handleIconChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasIcon = slot.assignedElements().length > 0;\n }\n\n private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n const {target, isIntersecting} = entry;\n if (target === this.topAnchor) {\n this.isAtScrollTop = isIntersecting;\n }\n\n if (target === this.bottomAnchor) {\n this.isAtScrollBottom = isIntersecting;\n }\n }\n\n private getIsConnectedPromise() {\n return new Promise<void>(resolve => {\n this.isConnectedPromiseResolve = resolve;\n });\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {\n DIALOG_DEFAULT_CLOSE_ANIMATION,\n DIALOG_DEFAULT_OPEN_ANIMATION,\n DialogAnimation,\n DialogAnimationArgs,\n} from './animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n static {\n requestUpdateOnAriaChange(Dialog);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Opens the dialog when set to `true` and closes it when set to `false`.\n */\n @property({type: Boolean})\n get open() {\n return this.isOpen;\n }\n\n set open(open: boolean) {\n if (open === this.isOpen) {\n return;\n }\n\n this.isOpen = open;\n if (open) {\n this.setAttribute('open', '');\n this.show();\n } else {\n this.removeAttribute('open');\n this.close();\n }\n }\n\n /**\n * Gets or sets the dialog's return value, usually to indicate which button\n * a user pressed to close it.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n */\n @property({attribute: false}) returnValue = '';\n\n /**\n * The type of dialog for accessibility. Set this to `alert` to announce a\n * dialog as an alert dialog.\n */\n @property() type?: 'alert';\n\n /**\n * Gets the opening animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n /**\n * Gets the closing animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n private isOpen = false;\n private isOpening = false;\n // getIsConnectedPromise() immediately sets the resolve property.\n private isConnectedPromiseResolve!: () => void;\n private isConnectedPromise = this.getIsConnectedPromise();\n @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n @query('.container') private readonly container!: HTMLDialogElement | null;\n @query('.headline') private readonly headline!: HTMLDialogElement | null;\n @query('.content') private readonly content!: HTMLDialogElement | null;\n @query('.actions') private readonly actions!: HTMLDialogElement | null;\n @state() private isAtScrollTop = false;\n @state() private isAtScrollBottom = false;\n @query('.scroller') private readonly scroller!: HTMLElement | null;\n @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n private nextClickIsFromContent = false;\n private intersectionObserver?: IntersectionObserver;\n // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n @state() private hasHeadline = false;\n @state() private hasActions = false;\n @state() private hasIcon = false;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('submit', this.handleSubmit);\n }\n }\n\n /**\n * Opens the dialog and fires a cancelable `open` event. After a dialog's\n * animation, an `opened` event is fired.\n *\n * Add an `autocomplete` attribute to a child of the dialog that should\n * receive focus after opening.\n *\n * @return A Promise that resolves after the animation is finished and the\n * `opened` event was fired.\n */\n async show() {\n this.isOpening = true;\n // Dialogs can be opened before being attached to the DOM, so we need to\n // wait until we're connected before calling `showModal()`.\n await this.isConnectedPromise;\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already opened or if `dialog.close()` was called while awaiting.\n if (dialog.open || !this.isOpening) {\n this.isOpening = false;\n return;\n }\n\n const preventOpen = !this.dispatchEvent(\n new Event('open', {cancelable: true}),\n );\n if (preventOpen) {\n this.open = false;\n return;\n }\n\n // All Material dialogs are modal.\n dialog.showModal();\n this.open = true;\n // Reset scroll position if re-opening a dialog with the same content.\n if (this.scroller) {\n this.scroller.scrollTop = 0;\n }\n // Native modal dialogs ignore autofocus and instead force focus to the\n // first focusable child. Override this behavior if there is a child with\n // an autofocus attribute.\n this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n await this.animateDialog(this.getOpenAnimation());\n this.dispatchEvent(new Event('opened'));\n this.isOpening = false;\n }\n\n /**\n * Closes the dialog and fires a cancelable `close` event. After a dialog's\n * animation, a `closed` event is fired.\n *\n * @param returnValue A return value usually indicating which button was used\n * to close a dialog. If a dialog is canceled by clicking the scrim or\n * pressing Escape, it will not change the return value after closing.\n * @return A Promise that resolves after the animation is finished and the\n * `closed` event was fired.\n */\n async close(returnValue = this.returnValue) {\n this.isOpening = false;\n if (!this.isConnected) {\n // Disconnected dialogs do not fire close events or animate.\n this.open = false;\n return;\n }\n\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already closed or if `dialog.show()` was called while awaiting.\n if (!dialog.open || this.isOpening) {\n this.open = false;\n return;\n }\n\n const prevReturnValue = this.returnValue;\n this.returnValue = returnValue;\n const preventClose = !this.dispatchEvent(\n new Event('close', {cancelable: true}),\n );\n if (preventClose) {\n this.returnValue = prevReturnValue;\n return;\n }\n\n await this.animateDialog(this.getCloseAnimation());\n dialog.close(returnValue);\n this.open = false;\n this.dispatchEvent(new Event('closed'));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.isConnectedPromiseResolve();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.isConnectedPromise = this.getIsConnectedPromise();\n }\n\n protected override render() {\n const scrollable =\n this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n const classes = {\n 'has-headline': this.hasHeadline,\n 'has-actions': this.hasActions,\n 'has-icon': this.hasIcon,\n 'scrollable': scrollable,\n 'show-top-divider': scrollable && !this.isAtScrollTop,\n 'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n };\n\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <div class=\"scrim\"></div>\n <dialog\n class=${classMap(classes)}\n aria-label=${ariaLabel || nothing}\n aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n role=${this.type === 'alert' ? 'alertdialog' : nothing}\n @cancel=${this.handleCancel}\n @click=${this.handleDialogClick}\n .returnValue=${this.returnValue || nothing}>\n <div class=\"container\" @click=${this.handleContentClick}>\n <div class=\"headline\">\n <div class=\"icon\" aria-hidden=\"true\">\n <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n </div>\n <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n <slot\n name=\"headline\"\n @slotchange=${this.handleHeadlineChange}></slot>\n </h2>\n <md-divider></md-divider>\n </div>\n <div class=\"scroller\">\n <div class=\"content\">\n <div class=\"top anchor\"></div>\n <slot name=\"content\"></slot>\n <div class=\"bottom anchor\"></div>\n </div>\n </div>\n <div class=\"actions\">\n <md-divider></md-divider>\n <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n </div>\n </div>\n </dialog>\n `;\n }\n\n protected override firstUpdated() {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n this.handleAnchorIntersection(entry);\n }\n },\n {root: this.scroller!},\n );\n\n this.intersectionObserver.observe(this.topAnchor!);\n this.intersectionObserver.observe(this.bottomAnchor!);\n }\n\n private handleDialogClick() {\n if (this.nextClickIsFromContent) {\n // Avoid doing a layout calculation below if we know the click came from\n // content.\n this.nextClickIsFromContent = false;\n return;\n }\n\n // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n // but Material dialogs do.\n const preventDefault = !this.dispatchEvent(\n new Event('cancel', {cancelable: true}),\n );\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private handleContentClick() {\n this.nextClickIsFromContent = true;\n }\n\n private handleSubmit(event: SubmitEvent) {\n const form = event.target as HTMLFormElement;\n const {submitter} = event;\n if (form.method !== 'dialog' || !submitter) {\n return;\n }\n\n // Close reason is the submitter's value attribute, or the dialog's\n // `returnValue` if there is no attribute.\n this.close(submitter.getAttribute('value') ?? this.returnValue);\n }\n\n private handleCancel(event: Event) {\n if (event.target !== this.dialog) {\n // Ignore any cancel events dispatched by content.\n return;\n }\n\n const preventDefault = !redispatchEvent(this, event);\n // We always prevent default on the original dialog event since we'll\n // animate closing it before it actually closes.\n event.preventDefault();\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private async animateDialog(animation: DialogAnimation) {\n const {dialog, scrim, container, headline, content, actions} = this;\n if (!dialog || !scrim || !container || !headline || !content || !actions) {\n return;\n }\n\n const {\n container: containerAnimate,\n dialog: dialogAnimate,\n scrim: scrimAnimate,\n headline: headlineAnimate,\n content: contentAnimate,\n actions: actionsAnimate,\n } = animation;\n\n const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n [dialog, dialogAnimate ?? []],\n [scrim, scrimAnimate ?? []],\n [container, containerAnimate ?? []],\n [headline, headlineAnimate ?? []],\n [content, contentAnimate ?? []],\n [actions, actionsAnimate ?? []],\n ];\n\n const animations: Animation[] = [];\n for (const [element, animation] of elementAndAnimation) {\n for (const animateArgs of animation) {\n animations.push(element.animate(...animateArgs));\n }\n }\n\n await Promise.all(animations.map((animation) => animation.finished));\n }\n\n private handleHeadlineChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasHeadline = slot.assignedElements().length > 0;\n }\n\n private handleActionsChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasActions = slot.assignedElements().length > 0;\n }\n\n private handleIconChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasIcon = slot.assignedElements().length > 0;\n }\n\n private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n const {target, isIntersecting} = entry;\n if (target === this.topAnchor) {\n this.isAtScrollTop = isIntersecting;\n }\n\n if (target === this.bottomAnchor) {\n this.isAtScrollBottom = isIntersecting;\n }\n }\n\n private getIsConnectedPromise() {\n return new Promise<void>((resolve) => {\n this.isConnectedPromiseResolve = resolve;\n });\n }\n}\n"]}
|
package/fab/harness.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAsB,CAAC;IAC5E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './internal/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n override async getInteractiveElement() {\n await this.element.updateComplete;\n return this.element.renderRoot.querySelector('.fab') as HTMLButtonElement;\n }\n}\n"]}
|
package/fab/internal/_fab.scss
CHANGED
|
@@ -100,6 +100,8 @@
|
|
|
100
100
|
--md-fab-small-container-shape-end-start,
|
|
101
101
|
var(--_small-container-shape)
|
|
102
102
|
);
|
|
103
|
+
|
|
104
|
+
cursor: pointer;
|
|
103
105
|
}
|
|
104
106
|
|
|
105
107
|
:host([size='small'][touch-target='wrapper']) {
|
|
@@ -116,6 +118,8 @@
|
|
|
116
118
|
)
|
|
117
119
|
);
|
|
118
120
|
|
|
121
|
+
cursor: inherit;
|
|
122
|
+
|
|
119
123
|
&.primary {
|
|
120
124
|
@include color(
|
|
121
125
|
(
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-fab-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}:host([size=small][touch-target=wrapper]){margin:max(0px,48px - var(--_small-container-height))}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.extended slot span{padding-inline-start:4px}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-fab-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) );cursor:pointer}:host([size=small][touch-target=wrapper]){margin:max(0px,48px - var(--_small-container-height))}.fab{cursor:inherit}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.extended slot span{padding-inline-start:4px}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=fab-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fab-styles.css.js","sourceRoot":"","sources":["fab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-fab-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}:host([size=small][touch-target=wrapper]){margin:max(0px,48px - var(--_small-container-height))}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.extended slot span{padding-inline-start:4px}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"fab-styles.css.js","sourceRoot":"","sources":["fab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-fab-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) );cursor:pointer}:host([size=small][touch-target=wrapper]){margin:max(0px,48px - var(--_small-container-height))}.fab{cursor:inherit}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.extended slot span{padding-inline-start:4px}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */\n`;\n "]}
|
package/fab/internal/fab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAOtC,gEAAgE;AAChE,MAAM,OAAO,GAAI,SAAQ,SAAS;IAAlC;;QACE;;WAEG;QACS,YAAO,GAAe,SAAS,CAAC;IAU9C,CAAC;IARoB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACxC,CAAC;IACJ,CAAC;CACF;AAVa;IAAX,QAAQ,EAAE;oCAAiC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property} from 'lit/decorators.js';\n\nimport {SharedFab} from './shared.js';\n\n/**\n * The variants available to non-branded FABs.\n */\nexport type FabVariant = 'surface'|'primary'|'secondary'|'tertiary';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class Fab extends SharedFab {\n /**\n * The FAB color variant to render.\n */\n @property() variant: FabVariant = 'surface';\n\n protected override getRenderClasses() {\n return {\n ...super.getRenderClasses(),\n 'primary': this.variant === 'primary',\n 'secondary': this.variant === 'secondary',\n 'tertiary': this.variant === 'tertiary',\n };\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAOtC,gEAAgE;AAChE,MAAM,OAAO,GAAI,SAAQ,SAAS;IAAlC;;QACE;;WAEG;QACS,YAAO,GAAe,SAAS,CAAC;IAU9C,CAAC;IARoB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACxC,CAAC;IACJ,CAAC;CACF;AAVa;IAAX,QAAQ,EAAE;oCAAiC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property} from 'lit/decorators.js';\n\nimport {SharedFab} from './shared.js';\n\n/**\n * The variants available to non-branded FABs.\n */\nexport type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class Fab extends SharedFab {\n /**\n * The FAB color variant to render.\n */\n @property() variant: FabVariant = 'surface';\n\n protected override getRenderClasses() {\n return {\n ...super.getRenderClasses(),\n 'primary': this.variant === 'primary',\n 'secondary': this.variant === 'secondary',\n 'tertiary': this.variant === 'tertiary',\n };\n }\n}\n"]}
|