@material/web 1.0.0-pre.4 → 1.0.0-pre.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/badge/lib/_badge.scss +2 -10
- package/button/lib/_elevated-button.scss +5 -30
- package/button/lib/_elevation.scss +1 -16
- package/button/lib/_filled-button.scss +4 -31
- package/button/lib/_icon.scss +1 -0
- package/button/lib/_outlined-button.scss +6 -23
- package/button/lib/_shared.scss +20 -54
- package/button/lib/_text-button.scss +8 -34
- package/button/lib/_tonal-button.scss +5 -28
- package/button/lib/button.d.ts +2 -0
- package/button/lib/button.js +5 -1
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-styles.css.js +1 -1
- package/button/lib/elevated-styles.css.js.map +1 -1
- package/button/lib/filled-styles.css.js +1 -1
- package/button/lib/filled-styles.css.js.map +1 -1
- package/button/lib/outlined-styles.css.js +1 -1
- package/button/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/shared-styles.css.js +1 -1
- package/button/lib/shared-styles.css.js.map +1 -1
- package/button/lib/text-styles.css.js +1 -1
- package/button/lib/text-styles.css.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/checkbox/lib/_checkbox.scss +1 -2
- package/checkbox/lib/checkbox-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/chips/_assist-chip.scss +6 -0
- package/chips/_suggestion-chip.scss +6 -0
- package/chips/assist-chip.d.ts +20 -0
- package/chips/assist-chip.js +24 -0
- package/chips/assist-chip.js.map +1 -0
- package/chips/lib/_assist-chip.scss +27 -0
- package/chips/lib/_shared.scss +183 -0
- package/chips/lib/_suggestion-chip.scss +30 -0
- package/chips/lib/assist-chip.d.ts +11 -0
- package/chips/lib/assist-chip.js +12 -0
- package/chips/lib/assist-chip.js.map +1 -0
- package/chips/lib/assist-styles.css.js +9 -0
- package/chips/lib/assist-styles.css.js.map +1 -0
- package/{menusurface/lib/menu-surface-styles.scss → chips/lib/assist-styles.scss} +3 -3
- package/chips/lib/chip.d.ts +29 -0
- package/chips/lib/chip.js +110 -0
- package/chips/lib/chip.js.map +1 -0
- package/chips/lib/shared-styles.css.js +9 -0
- package/chips/lib/shared-styles.css.js.map +1 -0
- package/{autocomplete → chips}/lib/shared-styles.scss +1 -1
- package/chips/lib/suggestion-chip.d.ts +11 -0
- package/chips/lib/suggestion-chip.js +12 -0
- package/chips/lib/suggestion-chip.js.map +1 -0
- package/chips/lib/suggestion-styles.css.js +9 -0
- package/chips/lib/suggestion-styles.css.js.map +1 -0
- package/{autocomplete/lib/autocompletelist/autocomplete-list-styles.scss → chips/lib/suggestion-styles.scss} +3 -3
- package/chips/suggestion-chip.d.ts +20 -0
- package/chips/suggestion-chip.js +24 -0
- package/chips/suggestion-chip.js.map +1 -0
- package/dialog/lib/_dialog.scss +7 -5
- package/dialog/lib/_tokens.scss +1 -2
- package/dialog/lib/dialog-styles.css.js +1 -1
- package/dialog/lib/dialog-styles.css.js.map +1 -1
- package/dialog/lib/dialog.js +1 -1
- package/dialog/lib/dialog.js.map +1 -1
- package/elevation/lib/_elevation.scss +1 -21
- package/elevation/lib/elevation-styles.css.js +1 -1
- package/elevation/lib/elevation-styles.css.js.map +1 -1
- package/fab/lib/_fab-extended.scss +3 -10
- package/fab/lib/_fab.scss +0 -3
- package/fab/lib/_shared.scss +3 -25
- package/fab/lib/fab-extended-styles.css.js +1 -1
- package/fab/lib/fab-extended-styles.css.js.map +1 -1
- package/fab/lib/fab-shared-styles.css.js +1 -1
- package/fab/lib/fab-shared-styles.css.js.map +1 -1
- package/fab/lib/fab-shared.d.ts +0 -1
- package/fab/lib/fab-shared.js +1 -7
- package/fab/lib/fab-shared.js.map +1 -1
- package/field/lib/field.d.ts +4 -1
- package/field/lib/field.js +7 -0
- package/field/lib/field.js.map +1 -1
- package/focus/lib/_focus-ring.scss +13 -7
- package/focus/lib/_md-comp-focus-ring.scss +1 -2
- package/focus/lib/focus-ring-styles.css.js +1 -1
- package/focus/lib/focus-ring-styles.css.js.map +1 -1
- package/iconbutton/lib/_filled-icon-button.scss +1 -12
- package/iconbutton/lib/_filled-tonal-icon-button.scss +1 -12
- package/iconbutton/lib/_outlined-icon-button.scss +1 -13
- package/iconbutton/lib/_shared.scss +10 -6
- package/iconbutton/lib/_standard-icon-button.scss +5 -12
- package/iconbutton/lib/filled-styles.css.js +1 -1
- package/iconbutton/lib/filled-styles.css.js.map +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button.js +0 -2
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/iconbutton/lib/outlined-styles.css.js +1 -1
- package/iconbutton/lib/outlined-styles.css.js.map +1 -1
- package/iconbutton/lib/shared-styles.css.js +1 -1
- package/iconbutton/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.js.map +1 -1
- package/list/lib/_list.scss +15 -8
- package/list/lib/list-styles.css.js +1 -1
- package/list/lib/list-styles.css.js.map +1 -1
- package/list/lib/listitem/_list-item.scss +41 -44
- package/list/lib/listitem/list-item-styles.css.js +1 -1
- package/list/lib/listitem/list-item-styles.css.js.map +1 -1
- package/list/lib/listitem/list-item.d.ts +1 -0
- package/list/lib/listitem/list-item.js +4 -1
- package/list/lib/listitem/list-item.js.map +1 -1
- package/menu/lib/_menu.scss +6 -9
- package/menu/lib/menu-styles.css.js +1 -1
- package/menu/lib/menu-styles.css.js.map +1 -1
- package/menu/lib/menu.d.ts +22 -9
- package/menu/lib/menu.js +74 -26
- package/menu/lib/menu.js.map +1 -1
- package/menu/lib/menuitem/menu-item.js +1 -1
- package/menu/lib/menuitem/menu-item.js.map +1 -1
- package/menu/lib/menuitemlink/menu-item-link.js +2 -1
- package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
- package/menu/lib/shared.d.ts +16 -0
- package/menu/lib/shared.js +16 -0
- package/menu/lib/shared.js.map +1 -1
- package/menu/lib/submenuitem/sub-menu-item.d.ts +4 -0
- package/menu/lib/submenuitem/sub-menu-item.js +9 -2
- package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/lib/surfacePositionController.d.ts +10 -2
- package/menu/lib/surfacePositionController.js +6 -2
- package/menu/lib/surfacePositionController.js.map +1 -1
- package/menu/lib/typeaheadController.d.ts +5 -0
- package/menu/lib/typeaheadController.js +7 -3
- package/menu/lib/typeaheadController.js.map +1 -1
- package/navigationbar/lib/_navigation-bar.scss +1 -4
- package/navigationdrawer/lib/_navigation-drawer-modal.scss +0 -3
- package/navigationdrawer/lib/_navigation-drawer.scss +0 -3
- package/navigationdrawer/lib/_shared.scss +0 -9
- package/navigationtab/lib/_navigation-tab.scss +4 -10
- package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
- package/package.json +1 -1
- package/radio/lib/_radio.scss +1 -2
- package/radio/lib/radio-styles.css.js +1 -1
- package/radio/lib/radio-styles.css.js.map +1 -1
- package/segmentedbutton/lib/_shared.scss +0 -2
- package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/slider/lib/_slider.scss +1 -4
- package/slider/lib/_tokens.scss +2 -8
- package/slider/lib/slider-styles.css.js +1 -1
- package/slider/lib/slider-styles.css.js.map +1 -1
- package/textfield/lib/_filled-text-field.scss +1 -7
- package/textfield/lib/_outlined-text-field.scss +1 -7
- package/tokens/_index.scss +101 -2
- package/tokens/_md-comp-assist-chip.scss +68 -0
- package/tokens/_md-comp-badge.scss +34 -0
- package/tokens/_md-comp-banner.scss +23 -0
- package/tokens/_md-comp-bottom-app-bar.scss +21 -0
- package/tokens/_md-comp-carousel-item.scss +23 -0
- package/tokens/_md-comp-checkbox.scss +21 -0
- package/tokens/_md-comp-circular-progress-indicator.scss +22 -0
- package/tokens/_md-comp-data-table.scss +23 -0
- package/tokens/_md-comp-date-input-modal.scss +23 -0
- package/tokens/_md-comp-date-picker-docked.scss +25 -0
- package/tokens/_md-comp-date-picker-modal.scss +25 -0
- package/tokens/_md-comp-dialog.scss +43 -0
- package/tokens/_md-comp-divider.scss +17 -0
- package/tokens/_md-comp-elevated-button.scss +58 -0
- package/tokens/_md-comp-elevated-card.scss +23 -0
- package/tokens/_md-comp-extended-fab-branded.scss +38 -0
- package/tokens/_md-comp-extended-fab-primary.scss +38 -0
- package/tokens/_md-comp-extended-fab-secondary.scss +41 -0
- package/tokens/_md-comp-extended-fab-surface.scss +38 -0
- package/tokens/_md-comp-extended-fab-tertiary.scss +41 -0
- package/tokens/_md-comp-fab-branded-large.scss +23 -0
- package/tokens/_md-comp-fab-branded.scss +23 -0
- package/tokens/_md-comp-fab-primary-large.scss +23 -0
- package/tokens/_md-comp-fab-primary-small.scss +23 -0
- package/tokens/_md-comp-fab-primary.scss +23 -0
- package/tokens/_md-comp-fab-secondary-large.scss +23 -0
- package/tokens/_md-comp-fab-secondary-small.scss +23 -0
- package/tokens/_md-comp-fab-secondary.scss +23 -0
- package/tokens/_md-comp-fab-surface-large.scss +23 -0
- package/tokens/_md-comp-fab-surface-small.scss +23 -0
- package/tokens/_md-comp-fab-surface.scss +23 -0
- package/tokens/_md-comp-fab-tertiary-large.scss +23 -0
- package/tokens/_md-comp-fab-tertiary-small.scss +23 -0
- package/tokens/_md-comp-fab-tertiary.scss +23 -0
- package/tokens/_md-comp-filled-autocomplete.scss +25 -0
- package/tokens/_md-comp-filled-button.scss +58 -0
- package/tokens/_md-comp-filled-card.scss +23 -0
- package/tokens/_md-comp-filled-icon-button.scss +21 -0
- package/tokens/_md-comp-filled-menu-button.scss +25 -0
- package/tokens/_md-comp-filled-select.scss +25 -0
- package/tokens/_md-comp-filled-text-field.scss +46 -0
- package/tokens/_md-comp-filled-tonal-button.scss +59 -0
- package/tokens/_md-comp-filled-tonal-icon-button.scss +24 -0
- package/tokens/_md-comp-filter-chip.scss +38 -0
- package/tokens/_md-comp-full-screen-dialog.scss +25 -0
- package/tokens/_md-comp-icon-button.scss +21 -0
- package/tokens/_md-comp-input-chip.scss +38 -0
- package/tokens/_md-comp-linear-progress-indicator.scss +22 -0
- package/tokens/_md-comp-list.scss +58 -0
- package/tokens/_md-comp-menu.scss +21 -0
- package/tokens/_md-comp-navigation-bar.scss +25 -0
- package/tokens/_md-comp-navigation-drawer.scss +25 -0
- package/tokens/_md-comp-navigation-rail.scss +25 -0
- package/tokens/_md-comp-outlined-autocomplete.scss +28 -0
- package/tokens/_md-comp-outlined-button.scss +56 -0
- package/tokens/_md-comp-outlined-card.scss +23 -0
- package/tokens/_md-comp-outlined-icon-button.scss +21 -0
- package/tokens/_md-comp-outlined-menu-button.scss +23 -0
- package/tokens/_md-comp-outlined-segmented-button.scss +38 -0
- package/tokens/_md-comp-outlined-select.scss +25 -0
- package/tokens/_md-comp-outlined-text-field.scss +44 -0
- package/tokens/_md-comp-plain-tooltip.scss +21 -0
- package/tokens/_md-comp-primary-navigation-tab.scss +41 -0
- package/tokens/_md-comp-radio-button.scss +19 -0
- package/tokens/_md-comp-rich-tooltip.scss +25 -0
- package/tokens/_md-comp-scrim.scss +17 -0
- package/tokens/_md-comp-search-bar.scss +25 -0
- package/tokens/_md-comp-search-view.scss +23 -0
- package/tokens/_md-comp-secondary-navigation-tab.scss +41 -0
- package/tokens/_md-comp-sheet-bottom.scss +21 -0
- package/tokens/_md-comp-sheet-floating.scss +21 -0
- package/tokens/_md-comp-sheet-side.scss +25 -0
- package/tokens/_md-comp-slider.scss +38 -0
- package/tokens/_md-comp-snackbar.scss +25 -0
- package/tokens/_md-comp-standard-menu-button.scss +23 -0
- package/tokens/_md-comp-suggestion-chip.scss +72 -0
- package/tokens/_md-comp-switch.scss +21 -0
- package/tokens/_md-comp-text-button.scss +56 -0
- package/tokens/_md-comp-time-input.scss +25 -0
- package/tokens/_md-comp-time-picker.scss +25 -0
- package/tokens/_md-comp-top-app-bar-large.scss +23 -0
- package/tokens/_md-comp-top-app-bar-medium.scss +23 -0
- package/tokens/_md-comp-top-app-bar-small-centered.scss +26 -0
- package/tokens/_md-comp-top-app-bar-small.scss +23 -0
- package/tokens/_md-ref-palette.scss +12 -0
- package/tokens/_md-ref-typeface.scss +12 -0
- package/tokens/_md-sys-color.scss +25 -0
- package/tokens/_md-sys-elevation.scss +30 -0
- package/tokens/_md-sys-motion.scss +12 -0
- package/tokens/_md-sys-shape.scss +12 -0
- package/tokens/_md-sys-state.scss +12 -0
- package/tokens/_md-sys-typescale.scss +17 -0
- package/autocomplete/_filled-autocomplete.scss +0 -6
- package/autocomplete/_outlined-autocomplete.scss +0 -6
- package/autocomplete/autocomplete-item.d.ts +0 -19
- package/autocomplete/autocomplete-item.js +0 -22
- package/autocomplete/autocomplete-item.js.map +0 -1
- package/autocomplete/autocomplete-list.d.ts +0 -19
- package/autocomplete/autocomplete-list.js +0 -23
- package/autocomplete/autocomplete-list.js.map +0 -1
- package/autocomplete/autocomplete-surface.d.ts +0 -19
- package/autocomplete/autocomplete-surface.js +0 -23
- package/autocomplete/autocomplete-surface.js.map +0 -1
- package/autocomplete/filled-autocomplete.d.ts +0 -28
- package/autocomplete/filled-autocomplete.js +0 -46
- package/autocomplete/filled-autocomplete.js.map +0 -1
- package/autocomplete/lib/_filled-autocomplete.scss +0 -189
- package/autocomplete/lib/_outlined-autocomplete.scss +0 -178
- package/autocomplete/lib/_shared.scss +0 -25
- package/autocomplete/lib/autocomplete.d.ts +0 -54
- package/autocomplete/lib/autocomplete.js +0 -265
- package/autocomplete/lib/autocomplete.js.map +0 -1
- package/autocomplete/lib/autocompleteitem/autocomplete-item.d.ts +0 -11
- package/autocomplete/lib/autocompleteitem/autocomplete-item.js +0 -14
- package/autocomplete/lib/autocompleteitem/autocomplete-item.js.map +0 -1
- package/autocomplete/lib/autocompleteitem/harness.d.ts +0 -11
- package/autocomplete/lib/autocompleteitem/harness.js +0 -12
- package/autocomplete/lib/autocompleteitem/harness.js.map +0 -1
- package/autocomplete/lib/autocompletelist/_autocomplete-list.scss +0 -13
- package/autocomplete/lib/autocompletelist/autocomplete-list-styles.css.js +0 -9
- package/autocomplete/lib/autocompletelist/autocomplete-list-styles.css.js.map +0 -1
- package/autocomplete/lib/autocompletelist/autocomplete-list.d.ts +0 -14
- package/autocomplete/lib/autocompletelist/autocomplete-list.js +0 -21
- package/autocomplete/lib/autocompletelist/autocomplete-list.js.map +0 -1
- package/autocomplete/lib/autocompletelist/harness.d.ts +0 -11
- package/autocomplete/lib/autocompletelist/harness.js +0 -12
- package/autocomplete/lib/autocompletelist/harness.js.map +0 -1
- package/autocomplete/lib/autocompletesurface/_autocomplete-surface.scss +0 -13
- package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.css.js +0 -9
- package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.css.js.map +0 -1
- package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss +0 -10
- package/autocomplete/lib/autocompletesurface/autocomplete-surface.d.ts +0 -13
- package/autocomplete/lib/autocompletesurface/autocomplete-surface.js +0 -21
- package/autocomplete/lib/autocompletesurface/autocomplete-surface.js.map +0 -1
- package/autocomplete/lib/filled-styles.css.d.ts +0 -1
- package/autocomplete/lib/filled-styles.css.js +0 -9
- package/autocomplete/lib/filled-styles.css.js.map +0 -1
- package/autocomplete/lib/filled-styles.scss +0 -10
- package/autocomplete/lib/outlined-styles.css.d.ts +0 -1
- package/autocomplete/lib/outlined-styles.css.js +0 -9
- package/autocomplete/lib/outlined-styles.css.js.map +0 -1
- package/autocomplete/lib/outlined-styles.scss +0 -10
- package/autocomplete/lib/shared-styles.css.js +0 -9
- package/autocomplete/lib/shared-styles.css.js.map +0 -1
- package/autocomplete/outlined-autocomplete.d.ts +0 -28
- package/autocomplete/outlined-autocomplete.js +0 -46
- package/autocomplete/outlined-autocomplete.js.map +0 -1
- package/chips/action/delete-action.d.ts +0 -18
- package/chips/action/delete-action.js +0 -20
- package/chips/action/delete-action.js.map +0 -1
- package/chips/action/lib/action.d.ts +0 -47
- package/chips/action/lib/action.js +0 -162
- package/chips/action/lib/action.js.map +0 -1
- package/chips/action/lib/constants.d.ts +0 -62
- package/chips/action/lib/constants.js +0 -69
- package/chips/action/lib/constants.js.map +0 -1
- package/chips/action/lib/delete-action.d.ts +0 -20
- package/chips/action/lib/delete-action.js +0 -65
- package/chips/action/lib/delete-action.js.map +0 -1
- package/chips/action/lib/events.d.ts +0 -14
- package/chips/action/lib/events.js +0 -16
- package/chips/action/lib/events.js.map +0 -1
- package/chips/action/lib/link-action.d.ts +0 -19
- package/chips/action/lib/link-action.js +0 -55
- package/chips/action/lib/link-action.js.map +0 -1
- package/chips/action/lib/presentational-action.d.ts +0 -15
- package/chips/action/lib/presentational-action.js +0 -30
- package/chips/action/lib/presentational-action.js.map +0 -1
- package/chips/action/lib/primary-action.d.ts +0 -28
- package/chips/action/lib/primary-action.js +0 -88
- package/chips/action/lib/primary-action.js.map +0 -1
- package/chips/action/lib/selectable-action.d.ts +0 -17
- package/chips/action/lib/selectable-action.js +0 -67
- package/chips/action/lib/selectable-action.js.map +0 -1
- package/chips/action/lib/types.d.ts +0 -23
- package/chips/action/lib/types.js +0 -7
- package/chips/action/lib/types.js.map +0 -1
- package/chips/action/link-action.d.ts +0 -18
- package/chips/action/link-action.js +0 -20
- package/chips/action/link-action.js.map +0 -1
- package/chips/action/presentational-action.d.ts +0 -18
- package/chips/action/presentational-action.js +0 -20
- package/chips/action/presentational-action.js.map +0 -1
- package/chips/action/primary-action.d.ts +0 -18
- package/chips/action/primary-action.js +0 -20
- package/chips/action/primary-action.js.map +0 -1
- package/chips/action/selectable-action.d.ts +0 -18
- package/chips/action/selectable-action.js +0 -20
- package/chips/action/selectable-action.js.map +0 -1
- package/chips/chip/lib/_assist-chip-theme.scss +0 -99
- package/chips/chip/lib/_chip-theme.scss +0 -1285
- package/chips/chip/lib/_chip.scss +0 -444
- package/chips/chip/lib/_filter-chip-theme.scss +0 -130
- package/chips/chip/lib/_input-chip-theme.scss +0 -91
- package/chips/chip/lib/_suggestion-chip-theme.scss +0 -92
- package/chips/chip/lib/action-chip.d.ts +0 -18
- package/chips/chip/lib/action-chip.js +0 -39
- package/chips/chip/lib/action-chip.js.map +0 -1
- package/chips/chip/lib/adapter.d.ts +0 -50
- package/chips/chip/lib/adapter.js +0 -7
- package/chips/chip/lib/adapter.js.map +0 -1
- package/chips/chip/lib/animationframe.d.ts +0 -31
- package/chips/chip/lib/animationframe.js +0 -66
- package/chips/chip/lib/animationframe.js.map +0 -1
- package/chips/chip/lib/chip.d.ts +0 -43
- package/chips/chip/lib/chip.js +0 -134
- package/chips/chip/lib/chip.js.map +0 -1
- package/chips/chip/lib/constants.d.ts +0 -43
- package/chips/chip/lib/constants.js +0 -48
- package/chips/chip/lib/constants.js.map +0 -1
- package/chips/chip/lib/foundation.d.ts +0 -41
- package/chips/chip/lib/foundation.js +0 -255
- package/chips/chip/lib/foundation.js.map +0 -1
- package/chips/chip/lib/link-chip.d.ts +0 -21
- package/chips/chip/lib/link-chip.js +0 -53
- package/chips/chip/lib/link-chip.js.map +0 -1
- package/chips/chip/lib/presentational-chip.d.ts +0 -18
- package/chips/chip/lib/presentational-chip.js +0 -39
- package/chips/chip/lib/presentational-chip.js.map +0 -1
- package/chips/chip/lib/selectable-chip.d.ts +0 -22
- package/chips/chip/lib/selectable-chip.js +0 -57
- package/chips/chip/lib/selectable-chip.js.map +0 -1
- package/chips/chip/lib/types.d.ts +0 -42
- package/chips/chip/lib/types.js +0 -7
- package/chips/chip/lib/types.js.map +0 -1
- package/chips/chipset/lib/_chip-set-theme.scss +0 -50
- package/chips/chipset/lib/_chip-set.scss +0 -48
- package/chips/chipset/lib/adapter.d.ts +0 -45
- package/chips/chipset/lib/adapter.js +0 -7
- package/chips/chipset/lib/adapter.js.map +0 -1
- package/chips/chipset/lib/constants.d.ts +0 -26
- package/chips/chipset/lib/constants.js +0 -30
- package/chips/chipset/lib/constants.js.map +0 -1
- package/chips/chipset/lib/foundation.d.ts +0 -68
- package/chips/chipset/lib/foundation.js +0 -314
- package/chips/chipset/lib/foundation.js.map +0 -1
- package/chips/chipset/lib/types.d.ts +0 -41
- package/chips/chipset/lib/types.js +0 -7
- package/chips/chipset/lib/types.js.map +0 -1
- package/menusurface/_menu-surface.scss +0 -6
- package/menusurface/lib/_md-comp-menu-surface.scss +0 -31
- package/menusurface/lib/_menu-surface.scss +0 -122
- package/menusurface/lib/adapter.d.ts +0 -46
- package/menusurface/lib/adapter.js +0 -7
- package/menusurface/lib/adapter.js.map +0 -1
- package/menusurface/lib/constants.d.ts +0 -71
- package/menusurface/lib/constants.js +0 -83
- package/menusurface/lib/constants.js.map +0 -1
- package/menusurface/lib/foundation.d.ts +0 -176
- package/menusurface/lib/foundation.js +0 -544
- package/menusurface/lib/foundation.js.map +0 -1
- package/menusurface/lib/menu-surface-styles.css.d.ts +0 -1
- package/menusurface/lib/menu-surface-styles.css.js +0 -9
- package/menusurface/lib/menu-surface-styles.css.js.map +0 -1
- package/menusurface/lib/menu-surface.d.ts +0 -62
- package/menusurface/lib/menu-surface.js +0 -347
- package/menusurface/lib/menu-surface.js.map +0 -1
- package/menusurface/lib/types.d.ts +0 -19
- package/menusurface/lib/types.js +0 -7
- package/menusurface/lib/types.js.map +0 -1
- package/menusurface/menu-surface.d.ts +0 -14
- package/menusurface/menu-surface.js +0 -17
- package/menusurface/menu-surface.js.map +0 -1
- package/sass/_elevation.scss +0 -159
- package/sass/_resolvers.scss +0 -16
- package/sass/_typography.scss +0 -39
- package/tokens/v0_160/_index.scss +0 -107
- package/tokens/v0_160/_md-comp-assist-chip.scss +0 -109
- package/tokens/v0_160/_md-comp-badge.scss +0 -58
- package/tokens/v0_160/_md-comp-banner.scss +0 -75
- package/tokens/v0_160/_md-comp-bottom-app-bar.scss +0 -35
- package/tokens/v0_160/_md-comp-carousel-item.scss +0 -65
- package/tokens/v0_160/_md-comp-checkbox.scss +0 -126
- package/tokens/v0_160/_md-comp-circular-progress-indicator.scss +0 -39
- package/tokens/v0_160/_md-comp-data-table.scss +0 -96
- package/tokens/v0_160/_md-comp-date-input-modal.scss +0 -89
- package/tokens/v0_160/_md-comp-date-picker-docked.scss +0 -246
- package/tokens/v0_160/_md-comp-date-picker-modal.scss +0 -305
- package/tokens/v0_160/_md-comp-dialog.scss +0 -123
- package/tokens/v0_160/_md-comp-divider.scss +0 -25
- package/tokens/v0_160/_md-comp-elevated-button.scss +0 -91
- package/tokens/v0_160/_md-comp-elevated-card.scss +0 -59
- package/tokens/v0_160/_md-comp-extended-fab-branded.scss +0 -86
- package/tokens/v0_160/_md-comp-extended-fab-primary.scss +0 -94
- package/tokens/v0_160/_md-comp-extended-fab-secondary.scss +0 -95
- package/tokens/v0_160/_md-comp-extended-fab-surface.scss +0 -90
- package/tokens/v0_160/_md-comp-extended-fab-tertiary.scss +0 -95
- package/tokens/v0_160/_md-comp-fab-branded-large.scss +0 -60
- package/tokens/v0_160/_md-comp-fab-branded.scss +0 -60
- package/tokens/v0_160/_md-comp-fab-primary-large.scss +0 -65
- package/tokens/v0_160/_md-comp-fab-primary-small.scss +0 -65
- package/tokens/v0_160/_md-comp-fab-primary.scss +0 -65
- package/tokens/v0_160/_md-comp-fab-secondary-large.scss +0 -66
- package/tokens/v0_160/_md-comp-fab-secondary-small.scss +0 -66
- package/tokens/v0_160/_md-comp-fab-secondary.scss +0 -66
- package/tokens/v0_160/_md-comp-fab-surface-large.scss +0 -64
- package/tokens/v0_160/_md-comp-fab-surface-small.scss +0 -64
- package/tokens/v0_160/_md-comp-fab-surface.scss +0 -64
- package/tokens/v0_160/_md-comp-fab-tertiary-large.scss +0 -66
- package/tokens/v0_160/_md-comp-fab-tertiary-small.scss +0 -66
- package/tokens/v0_160/_md-comp-fab-tertiary.scss +0 -66
- package/tokens/v0_160/_md-comp-filled-autocomplete.scss +0 -267
- package/tokens/v0_160/_md-comp-filled-button.scss +0 -89
- package/tokens/v0_160/_md-comp-filled-card.scss +0 -58
- package/tokens/v0_160/_md-comp-filled-icon-button.scss +0 -79
- package/tokens/v0_160/_md-comp-filled-menu-button.scss +0 -98
- package/tokens/v0_160/_md-comp-filled-select.scss +0 -272
- package/tokens/v0_160/_md-comp-filled-text-field.scss +0 -189
- package/tokens/v0_160/_md-comp-filled-tonal-button.scss +0 -99
- package/tokens/v0_160/_md-comp-filled-tonal-icon-button.scss +0 -86
- package/tokens/v0_160/_md-comp-filter-chip.scss +0 -209
- package/tokens/v0_160/_md-comp-full-screen-dialog.scss +0 -111
- package/tokens/v0_160/_md-comp-icon-button.scss +0 -70
- package/tokens/v0_160/_md-comp-input-chip.scss +0 -184
- package/tokens/v0_160/_md-comp-linear-progress-indicator.scss +0 -41
- package/tokens/v0_160/_md-comp-list.scss +0 -248
- package/tokens/v0_160/_md-comp-menu.scss +0 -121
- package/tokens/v0_160/_md-comp-navigation-bar.scss +0 -114
- package/tokens/v0_160/_md-comp-navigation-drawer.scss +0 -162
- package/tokens/v0_160/_md-comp-navigation-rail.scss +0 -131
- package/tokens/v0_160/_md-comp-outlined-autocomplete.scss +0 -257
- package/tokens/v0_160/_md-comp-outlined-button.scss +0 -84
- package/tokens/v0_160/_md-comp-outlined-card.scss +0 -65
- package/tokens/v0_160/_md-comp-outlined-icon-button.scss +0 -79
- package/tokens/v0_160/_md-comp-outlined-menu-button.scss +0 -94
- package/tokens/v0_160/_md-comp-outlined-segmented-button.scss +0 -112
- package/tokens/v0_160/_md-comp-outlined-select.scss +0 -262
- package/tokens/v0_160/_md-comp-outlined-text-field.scss +0 -171
- package/tokens/v0_160/_md-comp-plain-tooltip.scss +0 -55
- package/tokens/v0_160/_md-comp-primary-navigation-tab.scss +0 -121
- package/tokens/v0_160/_md-comp-radio-button.scss +0 -68
- package/tokens/v0_160/_md-comp-rich-tooltip.scss +0 -121
- package/tokens/v0_160/_md-comp-scrim.scss +0 -25
- package/tokens/v0_160/_md-comp-search-bar.scss +0 -99
- package/tokens/v0_160/_md-comp-search-view.scss +0 -93
- package/tokens/v0_160/_md-comp-secondary-navigation-tab.scss +0 -84
- package/tokens/v0_160/_md-comp-sheet-bottom.scss +0 -45
- package/tokens/v0_160/_md-comp-sheet-floating.scss +0 -34
- package/tokens/v0_160/_md-comp-sheet-side.scss +0 -91
- package/tokens/v0_160/_md-comp-slider.scss +0 -114
- package/tokens/v0_160/_md-comp-snackbar.scss +0 -127
- package/tokens/v0_160/_md-comp-standard-menu-button.scss +0 -98
- package/tokens/v0_160/_md-comp-suggestion-chip.scss +0 -125
- package/tokens/v0_160/_md-comp-switch.scss +0 -136
- package/tokens/v0_160/_md-comp-text-button.scss +0 -77
- package/tokens/v0_160/_md-comp-time-input.scss +0 -218
- package/tokens/v0_160/_md-comp-time-picker.scss +0 -264
- package/tokens/v0_160/_md-comp-top-app-bar-large.scss +0 -63
- package/tokens/v0_160/_md-comp-top-app-bar-medium.scss +0 -63
- package/tokens/v0_160/_md-comp-top-app-bar-small-centered.scss +0 -66
- package/tokens/v0_160/_md-comp-top-app-bar-small.scss +0 -64
- package/tokens/v0_160/_md-ref-palette.scss +0 -107
- package/tokens/v0_160/_md-ref-typeface.scss +0 -21
- package/tokens/v0_160/_md-sys-color.scss +0 -904
- package/tokens/v0_160/_md-sys-elevation.scss +0 -21
- package/tokens/v0_160/_md-sys-motion.scss +0 -53
- package/tokens/v0_160/_md-sys-shape.scss +0 -30
- package/tokens/v0_160/_md-sys-state.scss +0 -19
- package/tokens/v0_160/_md-sys-typescale.scss +0 -284
- package/tokens/v0_160/index.test.css.d.ts +0 -1
- package/tokens/v0_160/index.test.css.js +0 -9
- package/tokens/v0_160/index.test.css.js.map +0 -1
- package/tokens/v0_160/index.test.scss +0 -584
- package/tokens/v0_160/lib.test.css.d.ts +0 -1
- package/tokens/v0_160/lib.test.css.js +0 -9
- package/tokens/v0_160/lib.test.css.js.map +0 -1
- package/tokens/v0_160/lib.test.scss +0 -663
- /package/{autocomplete/lib/autocompletelist/autocomplete-list-styles.css.d.ts → chips/lib/assist-styles.css.d.ts} +0 -0
- /package/{autocomplete → chips}/lib/shared-styles.css.d.ts +0 -0
- /package/{autocomplete/lib/autocompletesurface/autocomplete-surface-styles.css.d.ts → chips/lib/suggestion-styles.css.d.ts} +0 -0
|
@@ -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, #fffbfe));--_container-elevation: var(--md-dialog-container-elevation,
|
|
7
|
+
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_container-surface-tint-layer-color: var(--md-dialog-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1c1b1f));--_headline-type: var(--md-dialog-headline-type, 400 1.5rem / 2rem Roboto);--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_with-icon-icon-color: var(--md-dialog-with-icon-icon-color, var(--md-sys-color-secondary, #625b71));--_with-icon-icon-size: var(--md-dialog-with-icon-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100vh;inline-size:100vw;max-block-size:100vh;max-inline-size:100vw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:"";position:absolute;z-index:-1;inset:0;block-size:100vh;inline-size:100vw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{position:absolute;inset:0;border-radius:inherit;--md-elevation-level:var(--_container-elevation);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100vh;inline-size:100vw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_with-icon-icon-color);font-size:var(--_with-icon-icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# 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, #fffbfe));--_container-elevation: var(--md-dialog-container-elevation, 6);--_container-shape: var(--md-dialog-container-shape, 28px);--_container-surface-tint-layer-color: var(--md-dialog-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1c1b1f));--_headline-type: var(--md-dialog-headline-type, 400 1.5rem / 2rem Roboto);--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_with-icon-icon-color: var(--md-dialog-with-icon-icon-color, var(--md-sys-color-secondary, #625b71));--_with-icon-icon-size: var(--md-dialog-with-icon-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100vh;inline-size:100vw;max-block-size:100vh;max-inline-size:100vw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:\"\";position:absolute;z-index:-1;inset:0;block-size:100vh;inline-size:100vw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{position:absolute;inset:0;pointer-events:none;border-radius:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-surface-tine-color: var( --_container-surface-tint-layer-color )}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100vh;inline-size:100vw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_with-icon-icon-color);font-size:var(--_with-icon-icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}
|
|
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, #fffbfe));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_container-surface-tint-layer-color: var(--md-dialog-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1c1b1f));--_headline-type: var(--md-dialog-headline-type, 400 1.5rem / 2rem Roboto);--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_with-icon-icon-color: var(--md-dialog-with-icon-icon-color, var(--md-sys-color-secondary, #625b71));--_with-icon-icon-size: var(--md-dialog-with-icon-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100vh;inline-size:100vw;max-block-size:100vh;max-inline-size:100vw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:\"\";position:absolute;z-index:-1;inset:0;block-size:100vh;inline-size:100vw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{position:absolute;inset:0;border-radius:inherit;--md-elevation-level:var(--_container-elevation);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100vh;inline-size:100vw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_with-icon-icon-color);font-size:var(--_with-icon-icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}
|
package/dialog/lib/dialog.js
CHANGED
|
@@ -229,6 +229,7 @@ export class Dialog extends LitElement {
|
|
|
229
229
|
@pointermove=${this.handlePointerMove}
|
|
230
230
|
@pointerup=${this.handleDragEnd}
|
|
231
231
|
>
|
|
232
|
+
<md-elevation surface></md-elevation>
|
|
232
233
|
<header class="header">
|
|
233
234
|
<slot name="header">
|
|
234
235
|
<slot name="headline-prefix"></slot>
|
|
@@ -242,7 +243,6 @@ export class Dialog extends LitElement {
|
|
|
242
243
|
<footer class="footer">
|
|
243
244
|
<slot name="footer"></slot>
|
|
244
245
|
</footer>
|
|
245
|
-
<md-elevation surface></md-elevation>
|
|
246
246
|
</div>
|
|
247
247
|
</dialog>`;
|
|
248
248
|
}
|
package/dialog/lib/dialog.js.map
CHANGED
|
@@ -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 '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {createThrottle, msFromTimeCSSValue} from '../../motion/animation.js';\n\n// This is required for decorators.\n// tslint:disable:no-new-decorators\n\n/**\n * Default close action.\n */\nexport const CLOSE_ACTION = 'close';\n\nconst OPENING_TRANSITION_PROP = '--_opening-transition-duration';\nconst CLOSING_TRANSITION_PROP = '--_closing-transition-duration';\n\n/**\n * A dialog component.\n */\nexport class Dialog extends LitElement {\n private static preventedScrollingCount = 0;\n private static scrollbarTester: HTMLDivElement;\n\n private static setDocumentScrollingDisabled(disabled = false) {\n let {preventedScrollingCount, scrollbarTester} = Dialog;\n Dialog.preventedScrollingCount = preventedScrollingCount =\n Math.max(preventedScrollingCount + (Number(disabled) || -1), 0);\n const shouldPrevent = Boolean(preventedScrollingCount);\n const {style} = document.body;\n if (shouldPrevent && style.overflow === 'hidden') {\n return;\n }\n if (scrollbarTester === undefined) {\n Dialog.scrollbarTester = scrollbarTester = document.createElement('div');\n scrollbarTester.style.cssText =\n `position: absolute; height: 0; width: 100%; visibility: hidden; pointer-events: none;`;\n }\n // Appends an element to see if its offsetWidth changes when overflow is\n // altered. If it does, then add end inline padding to restore the width to\n // avoid a visible layout shift.\n document.body.append(scrollbarTester);\n const {offsetWidth} = scrollbarTester;\n style.overflow = shouldPrevent ? 'hidden' : '';\n const scrollbarWidth = scrollbarTester.offsetWidth - offsetWidth;\n scrollbarTester.remove();\n style.paddingInlineEnd = shouldPrevent ? `${scrollbarWidth}px` : '';\n }\n\n /**\n * Opens the dialog when set to `true` and closes it when set to `false`.\n */\n @property({type: Boolean}) open = false;\n\n /**\n * Setting fullscreen displays the dialog fullscreen on small screens.\n * This can be customized via the `fullscreenBreakpoint` property.\n * When showing fullscreen, the header will take up less vertical space, and\n * the dialog will have a `showing-fullscreen`attribute, allowing content to\n * be styled in this state.\n *\n * Dialogs can be sized by setting:\n *\n * * --md-dialog-container-min-block-size\n * * --md-dialog-container-max-block-size\n * * --md-dialog-container-min-inline-size\n * * --md-dialog-container-max-inline-size\n *\n * These are typically configured via media queries and are independent of the\n * fullscreen setting.\n */\n @property({type: Boolean}) fullscreen = false;\n\n /**\n * A media query string specifying the breakpoint at which the dialog\n * should be shown fullscreen. Note, this only applies when the `fullscreen`\n * property is set.\n *\n * By default, the dialog is shown fullscreen on screens less than 600px wide\n * or 400px tall.\n */\n @property({type: String})\n fullscreenBreakpoint = '(max-width: 600px), (max-height: 400px)';\n\n /**\n * Hides the dialog footer, making any content slotted into the footer\n * inaccessible.\n */\n @property({type: Boolean}) footerHidden = false;\n\n /**\n * Renders footer content in a vertically stacked alignment rather than the\n * normal horizontal alignment.\n */\n @property({type: Boolean}) stacked = false;\n\n /**\n * When the dialog is closed it disptaches `closing` and `closed` events.\n * These events have an action property which has a default value of\n * the value of this property. Specific actions have explicit values but when\n * a value is not specified, the default is used. For example, clicking the\n * scrim, pressing escape, or clicking a button with an action attribute set\n * produce an explicit action.\n *\n * Defaults to `close`.\n */\n @property() defaultAction = CLOSE_ACTION;\n\n /**\n * The name of an attribute which can be placed on any element slotted into\n * the dialog. If an element has an action attribute set, clicking it will\n * close the dialog and the `closing` and `closed` events dispatched will\n * have their action property set the the value of this attribute on the\n * clicked element.The default valus is `dialogAction`. For example,\n *\n * <md-dialog>\n * Content\n * <md-filled-button slot=\"footer\"dialogAction=\"buy\">\n * Buy\n * </md-filled-button>\n * </md-dialog>\n */\n @property() actionAttribute = 'dialogAction';\n\n /**\n * When the dialog is opened, it will focus the first element which has\n * an attribute name matching this property. The default value is\n * `dialogFocus`. For example:\n *\n * <md-dialog>\n * <md-filled-text-field\n * label=\"Enter some text\"\n * dialogFocus\n * >\n * </md-filled-text-field>\n * </md-dialog>\n */\n @property() focusAttribute = 'dialogFocus';\n\n /**\n * Clicking on the scrim surrounding the dialog closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n */\n @property({type: String}) scrimClickAction = CLOSE_ACTION;\n\n /**\n * Pressing the `escape` key while the dialog is open closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n */\n @property({type: String}) escapeKeyAction = CLOSE_ACTION;\n\n /**\n * When opened, the dialog is displayed modeless or non-modal. This\n * allows users to interact with content outside the dialog without\n * closing the dialog and does not display the scrim around the dialog.\n */\n @property({type: Boolean, reflect: true}) modeless = false;\n\n /**\n * Set to make the dialog position draggable.\n */\n @property({type: Boolean}) override draggable = false;\n\n private readonly throttle = createThrottle();\n\n @query('.dialog', true) private readonly dialogElement!: HTMLDialogElement;\n\n // slots tracked to find focusable elements.\n @query('slot[name=footer]', true)\n private readonly footerSlot!: HTMLSlotElement;\n @query('slot:not([name])', true)\n private readonly contentSlot!: HTMLSlotElement;\n // for scrolling related styling\n @query(`.content`, true) private readonly contentElement!: HTMLDivElement;\n // used to determine container size for dragging\n @query(`.container`, true) private readonly containerElement!: HTMLDivElement;\n // used to determin where users can drag from.\n @query(`.header`, true) private readonly headerElement!: HTMLDivElement;\n\n /**\n * Private properties that reflect for styling manually in `updated`.\n */\n @state() private showingFullscreen = false;\n @state() private showingOpen = false;\n @state() private opening = false;\n @state() private closing = false;\n\n /**\n * Transition kind. Supported options include: grow, shrink, grow-down,\n * grow-up, grow-left, and grow-right.\n *\n * Defaults to grow-down.\n */\n @property({reflect: true}) transition = 'grow-down';\n\n private currentAction: string|undefined;\n\n @state() private dragging = false;\n private readonly dragMargin = 8;\n private dragInfo?: [number, number, number, number]|undefined;\n\n /**\n * Opens and shows the dialog. This is equivalent to setting the `open`\n * property to true.\n */\n show() {\n this.open = true;\n }\n\n /**\n * Closes the dialog. This is equivalent to setting the `open`\n * property to false.\n */\n close(action = '') {\n this.currentAction = action;\n this.open = false;\n }\n\n /**\n * Opens and shows the dialog if it is closed; otherwise closes it.\n */\n toggleShow() {\n if (this.open) {\n this.close(this.currentAction);\n } else {\n this.show();\n }\n }\n\n private getContentScrollInfo() {\n if (!this.hasUpdated) {\n return {isScrollable: false, isAtScrollTop: true, isAtScrollBottom: true};\n }\n const {scrollTop, scrollHeight, offsetHeight, clientHeight} =\n this.contentElement;\n return {\n isScrollable: scrollHeight > offsetHeight,\n isAtScrollTop: scrollTop === 0,\n isAtScrollBottom:\n Math.abs(Math.round(scrollHeight - scrollTop) - clientHeight) <= 2\n };\n }\n\n protected override render() {\n const {isScrollable, isAtScrollTop, isAtScrollBottom} =\n this.getContentScrollInfo();\n return html`\n <dialog\n @close=${this.handleDialogDismiss}\n @cancel=${this.handleDialogDismiss}\n @click=${this.handleDialogClick}\n class=\"dialog ${classMap({\n 'stacked': this.stacked,\n 'scrollable': isScrollable,\n 'scroll-divider-header': !isAtScrollTop,\n 'scroll-divider-footer': !isAtScrollBottom,\n 'footerHidden': this.footerHidden\n })}\"\n aria-labelledby=\"header\"\n aria-describedby=\"content\"\n >\n <div class=\"container ${classMap({\n 'dragging': this.dragging\n })}\"\n @pointermove=${this.handlePointerMove}\n @pointerup=${this.handleDragEnd}\n >\n <header class=\"header\">\n <slot name=\"header\">\n <slot name=\"headline-prefix\"></slot>\n <slot name=\"headline\"></slot>\n <slot name=\"headline-suffix\"></slot>\n </slot>\n </header>\n <section class=\"content\" @scroll=${this.handleContentScroll}>\n <slot></slot>\n </section>\n <footer class=\"footer\">\n <slot name=\"footer\"></slot>\n </footer>\n <md-elevation surface></md-elevation>\n </div>\n </dialog>`;\n }\n\n protected override willUpdate(changed: PropertyValues) {\n if (changed.has('open')) {\n this.opening = this.open;\n // only closing if was opened previously...\n this.closing = !this.open && changed.get('open');\n }\n if (changed.has('fullscreen') || changed.has('fullscreenBreakpoint')) {\n this.updateFullscreen();\n }\n }\n\n protected override firstUpdated() {\n // Update when content size changes to show/hide scroll dividers.\n new ResizeObserver(() => {\n if (this.showingOpen) {\n this.requestUpdate();\n }\n }).observe(this.contentElement);\n }\n\n protected override updated(changed: PropertyValues) {\n if (changed.get('draggable') && !this.draggable) {\n this.style.removeProperty('--_container-drag-inline-start');\n this.style.removeProperty('--_container-drag-block-start');\n }\n // Reflect internal state to facilitate styling.\n this.reflectStateProp(changed, 'opening', this.opening);\n this.reflectStateProp(changed, 'closing', this.closing);\n this.reflectStateProp(\n changed, 'showingFullscreen', this.showingFullscreen,\n 'showing-fullscreen');\n this.reflectStateProp(\n changed, 'showingOpen', this.showingOpen, 'showing-open');\n if (!changed.has('open')) {\n return;\n }\n // prevent body scrolling early only when opening to avoid layout\n // shift when closing.\n if (!this.modeless && this.open) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n if (this.open) {\n this.contentElement.scrollTop = 0;\n if (this.modeless) {\n this.dialogElement.show();\n } else {\n // Note, native focus handling fails when focused element is in an\n // overflow: auto container.\n this.dialogElement.showModal();\n }\n }\n // Avoids dispatching initial state.\n const shouldDispatchAction = changed.get('open') !== undefined;\n this.performTransition(shouldDispatchAction);\n }\n\n /**\n * Internal state is reflected here as attributes to effect styling. This\n * could be done via internal classes, but it's published on the host\n * to facilitate the (currently undocumented) possibility of customizing\n * styling of user content based on these states.\n * Note, in the future this could be done with `:state(...)` when browser\n * support improves.\n */\n private reflectStateProp(\n changed: PropertyValues, key: string, value: unknown,\n attribute?: string) {\n attribute ??= key;\n if (!changed.has(key)) {\n return;\n }\n if (value) {\n this.setAttribute(attribute, '');\n } else {\n this.removeAttribute(attribute);\n }\n }\n\n private dialogClosedResolver?: () => void;\n\n protected async performTransition(shouldDispatchAction: boolean) {\n // TODO: pause here only to avoid a double update warning.\n await this.updateComplete;\n this.showingOpen = this.open;\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opening' : 'closing');\n }\n // Compute desired transition duration.\n const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(\n this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));\n let promise = this.updateComplete;\n if (duration > 0) {\n promise = new Promise((r) => {\n setTimeout(r, duration);\n });\n }\n await promise;\n this.opening = false;\n this.closing = false;\n if (!this.open && this.dialogElement.open) {\n // Closing the dialog triggers an asynchronous `close` event.\n // It's important to wait for this event to fire since it changes the\n // state of `open` to false.\n // Without waiting, this element's `closed` event can be called before\n // the dialog's `close` event, which is problematic since the user\n // can set `open` in the `closed` event.\n // The timing of the event appears to vary via browser and does *not*\n // seem to resolve by \"task\" timing; therefore an explicit promise is\n // used.\n const closedPromise = new Promise<void>(resolve => {\n this.dialogClosedResolver = resolve;\n });\n this.dialogElement.close(this.currentAction || this.defaultAction);\n await closedPromise;\n // enable scrolling late to avoid layout shift when closing\n if (!this.modeless) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n }\n // Focus initial element.\n if (this.open) {\n this.focus();\n }\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opened' : 'closed');\n }\n this.currentAction = undefined;\n }\n\n protected dispatchActionEvent(type: string) {\n const detail = {action: this.open ? 'none' : this.currentAction};\n this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true}));\n }\n\n /* Live media query for matching user specified fullscreen breakpoint. */\n private fullscreenQuery?: MediaQueryList;\n private fullscreenQueryListener:\n ((e: MediaQueryListEvent) => void)|undefined = undefined;\n protected updateFullscreen() {\n if (this.fullscreenQuery !== undefined) {\n this.fullscreenQuery.removeEventListener(\n 'change', this.fullscreenQueryListener!);\n this.fullscreenQuery = this.fullscreenQueryListener = undefined;\n }\n if (!this.fullscreen) {\n this.showingFullscreen = false;\n return;\n }\n this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint);\n this.fullscreenQuery.addEventListener(\n 'change',\n (this.fullscreenQueryListener = (event: MediaQueryListEvent) => {\n this.showingFullscreen = event.matches;\n }));\n this.showingFullscreen = this.fullscreenQuery.matches;\n }\n\n // handles native close/cancel events and we just ensure\n // internal state is in sync.\n protected handleDialogDismiss(e: Event) {\n if (e.type === 'cancel') {\n this.currentAction = this.escapeKeyAction;\n }\n this.dialogClosedResolver?.();\n this.dialogClosedResolver = undefined;\n this.open = false;\n this.opening = false;\n this.closing = false;\n }\n\n protected handleDialogClick(e: Event) {\n if (!this.open) {\n return;\n }\n this.currentAction =\n (e.target as Element).getAttribute(this.actionAttribute) ??\n (!this.modeless && !e.composedPath().includes(this.containerElement) ?\n this.scrimClickAction :\n '');\n if (this.currentAction !== '') {\n this.close(this.currentAction);\n }\n }\n\n /* This allows the dividers to dynamically show based on scrolling. */\n protected handleContentScroll() {\n this.throttle('scroll', () => {\n this.requestUpdate();\n });\n }\n\n protected getFocusElement(): HTMLElement|null {\n const selector = `[${this.focusAttribute}]`;\n const slotted = [this.footerSlot, this.contentSlot].flatMap(\n slot => slot.assignedElements({flatten: true}));\n for (const el of slotted) {\n const focusEl = el.matches(selector) ? el : el.querySelector(selector);\n if (focusEl) {\n return focusEl as HTMLElement;\n }\n }\n return null;\n }\n\n override focus() {\n this.getFocusElement()?.focus();\n }\n\n override blur() {\n this.getFocusElement()?.blur();\n }\n\n protected canStartDrag(e: PointerEvent) {\n if (this.draggable === false || e.defaultPrevented || !(e.buttons & 1) ||\n !e.composedPath().includes(this.headerElement)) {\n return false;\n }\n return true;\n }\n\n protected handlePointerMove(e: PointerEvent) {\n if (!this.dragging && !this.canStartDrag(e)) {\n return;\n }\n const {top, left, height, width} =\n this.containerElement.getBoundingClientRect();\n if (!this.dragging) {\n this.containerElement.setPointerCapture(e.pointerId);\n this.dragging = true;\n const {x, y} = e;\n this.dragInfo = [x, y, top, left];\n }\n const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];\n const dx = e.x - sx;\n const dy = e.y - sy;\n const ml = window.innerWidth - width - this.dragMargin;\n const mt = window.innerHeight - height - this.dragMargin;\n const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));\n const t = Math.max(this.dragMargin, Math.min(mt, dy + st));\n this.style.setProperty('--_container-drag-inline-start', `${l}px`);\n this.style.setProperty('--_container-drag-block-start', `${t}px`);\n }\n\n protected handleDragEnd(e: PointerEvent) {\n if (!this.dragging) {\n return;\n }\n this.containerElement.releasePointerCapture(e.pointerId);\n this.dragging = false;\n this.dragInfo = undefined;\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 '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {createThrottle, msFromTimeCSSValue} from '../../motion/animation.js';\n\n// This is required for decorators.\n// tslint:disable:no-new-decorators\n\n/**\n * Default close action.\n */\nexport const CLOSE_ACTION = 'close';\n\nconst OPENING_TRANSITION_PROP = '--_opening-transition-duration';\nconst CLOSING_TRANSITION_PROP = '--_closing-transition-duration';\n\n/**\n * A dialog component.\n */\nexport class Dialog extends LitElement {\n private static preventedScrollingCount = 0;\n private static scrollbarTester: HTMLDivElement;\n\n private static setDocumentScrollingDisabled(disabled = false) {\n let {preventedScrollingCount, scrollbarTester} = Dialog;\n Dialog.preventedScrollingCount = preventedScrollingCount =\n Math.max(preventedScrollingCount + (Number(disabled) || -1), 0);\n const shouldPrevent = Boolean(preventedScrollingCount);\n const {style} = document.body;\n if (shouldPrevent && style.overflow === 'hidden') {\n return;\n }\n if (scrollbarTester === undefined) {\n Dialog.scrollbarTester = scrollbarTester = document.createElement('div');\n scrollbarTester.style.cssText =\n `position: absolute; height: 0; width: 100%; visibility: hidden; pointer-events: none;`;\n }\n // Appends an element to see if its offsetWidth changes when overflow is\n // altered. If it does, then add end inline padding to restore the width to\n // avoid a visible layout shift.\n document.body.append(scrollbarTester);\n const {offsetWidth} = scrollbarTester;\n style.overflow = shouldPrevent ? 'hidden' : '';\n const scrollbarWidth = scrollbarTester.offsetWidth - offsetWidth;\n scrollbarTester.remove();\n style.paddingInlineEnd = shouldPrevent ? `${scrollbarWidth}px` : '';\n }\n\n /**\n * Opens the dialog when set to `true` and closes it when set to `false`.\n */\n @property({type: Boolean}) open = false;\n\n /**\n * Setting fullscreen displays the dialog fullscreen on small screens.\n * This can be customized via the `fullscreenBreakpoint` property.\n * When showing fullscreen, the header will take up less vertical space, and\n * the dialog will have a `showing-fullscreen`attribute, allowing content to\n * be styled in this state.\n *\n * Dialogs can be sized by setting:\n *\n * * --md-dialog-container-min-block-size\n * * --md-dialog-container-max-block-size\n * * --md-dialog-container-min-inline-size\n * * --md-dialog-container-max-inline-size\n *\n * These are typically configured via media queries and are independent of the\n * fullscreen setting.\n */\n @property({type: Boolean}) fullscreen = false;\n\n /**\n * A media query string specifying the breakpoint at which the dialog\n * should be shown fullscreen. Note, this only applies when the `fullscreen`\n * property is set.\n *\n * By default, the dialog is shown fullscreen on screens less than 600px wide\n * or 400px tall.\n */\n @property({type: String})\n fullscreenBreakpoint = '(max-width: 600px), (max-height: 400px)';\n\n /**\n * Hides the dialog footer, making any content slotted into the footer\n * inaccessible.\n */\n @property({type: Boolean}) footerHidden = false;\n\n /**\n * Renders footer content in a vertically stacked alignment rather than the\n * normal horizontal alignment.\n */\n @property({type: Boolean}) stacked = false;\n\n /**\n * When the dialog is closed it disptaches `closing` and `closed` events.\n * These events have an action property which has a default value of\n * the value of this property. Specific actions have explicit values but when\n * a value is not specified, the default is used. For example, clicking the\n * scrim, pressing escape, or clicking a button with an action attribute set\n * produce an explicit action.\n *\n * Defaults to `close`.\n */\n @property() defaultAction = CLOSE_ACTION;\n\n /**\n * The name of an attribute which can be placed on any element slotted into\n * the dialog. If an element has an action attribute set, clicking it will\n * close the dialog and the `closing` and `closed` events dispatched will\n * have their action property set the the value of this attribute on the\n * clicked element.The default valus is `dialogAction`. For example,\n *\n * <md-dialog>\n * Content\n * <md-filled-button slot=\"footer\"dialogAction=\"buy\">\n * Buy\n * </md-filled-button>\n * </md-dialog>\n */\n @property() actionAttribute = 'dialogAction';\n\n /**\n * When the dialog is opened, it will focus the first element which has\n * an attribute name matching this property. The default value is\n * `dialogFocus`. For example:\n *\n * <md-dialog>\n * <md-filled-text-field\n * label=\"Enter some text\"\n * dialogFocus\n * >\n * </md-filled-text-field>\n * </md-dialog>\n */\n @property() focusAttribute = 'dialogFocus';\n\n /**\n * Clicking on the scrim surrounding the dialog closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n */\n @property({type: String}) scrimClickAction = CLOSE_ACTION;\n\n /**\n * Pressing the `escape` key while the dialog is open closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n */\n @property({type: String}) escapeKeyAction = CLOSE_ACTION;\n\n /**\n * When opened, the dialog is displayed modeless or non-modal. This\n * allows users to interact with content outside the dialog without\n * closing the dialog and does not display the scrim around the dialog.\n */\n @property({type: Boolean, reflect: true}) modeless = false;\n\n /**\n * Set to make the dialog position draggable.\n */\n @property({type: Boolean}) override draggable = false;\n\n private readonly throttle = createThrottle();\n\n @query('.dialog', true) private readonly dialogElement!: HTMLDialogElement;\n\n // slots tracked to find focusable elements.\n @query('slot[name=footer]', true)\n private readonly footerSlot!: HTMLSlotElement;\n @query('slot:not([name])', true)\n private readonly contentSlot!: HTMLSlotElement;\n // for scrolling related styling\n @query(`.content`, true) private readonly contentElement!: HTMLDivElement;\n // used to determine container size for dragging\n @query(`.container`, true) private readonly containerElement!: HTMLDivElement;\n // used to determin where users can drag from.\n @query(`.header`, true) private readonly headerElement!: HTMLDivElement;\n\n /**\n * Private properties that reflect for styling manually in `updated`.\n */\n @state() private showingFullscreen = false;\n @state() private showingOpen = false;\n @state() private opening = false;\n @state() private closing = false;\n\n /**\n * Transition kind. Supported options include: grow, shrink, grow-down,\n * grow-up, grow-left, and grow-right.\n *\n * Defaults to grow-down.\n */\n @property({reflect: true}) transition = 'grow-down';\n\n private currentAction: string|undefined;\n\n @state() private dragging = false;\n private readonly dragMargin = 8;\n private dragInfo?: [number, number, number, number]|undefined;\n\n /**\n * Opens and shows the dialog. This is equivalent to setting the `open`\n * property to true.\n */\n show() {\n this.open = true;\n }\n\n /**\n * Closes the dialog. This is equivalent to setting the `open`\n * property to false.\n */\n close(action = '') {\n this.currentAction = action;\n this.open = false;\n }\n\n /**\n * Opens and shows the dialog if it is closed; otherwise closes it.\n */\n toggleShow() {\n if (this.open) {\n this.close(this.currentAction);\n } else {\n this.show();\n }\n }\n\n private getContentScrollInfo() {\n if (!this.hasUpdated) {\n return {isScrollable: false, isAtScrollTop: true, isAtScrollBottom: true};\n }\n const {scrollTop, scrollHeight, offsetHeight, clientHeight} =\n this.contentElement;\n return {\n isScrollable: scrollHeight > offsetHeight,\n isAtScrollTop: scrollTop === 0,\n isAtScrollBottom:\n Math.abs(Math.round(scrollHeight - scrollTop) - clientHeight) <= 2\n };\n }\n\n protected override render() {\n const {isScrollable, isAtScrollTop, isAtScrollBottom} =\n this.getContentScrollInfo();\n return html`\n <dialog\n @close=${this.handleDialogDismiss}\n @cancel=${this.handleDialogDismiss}\n @click=${this.handleDialogClick}\n class=\"dialog ${classMap({\n 'stacked': this.stacked,\n 'scrollable': isScrollable,\n 'scroll-divider-header': !isAtScrollTop,\n 'scroll-divider-footer': !isAtScrollBottom,\n 'footerHidden': this.footerHidden\n })}\"\n aria-labelledby=\"header\"\n aria-describedby=\"content\"\n >\n <div class=\"container ${classMap({\n 'dragging': this.dragging\n })}\"\n @pointermove=${this.handlePointerMove}\n @pointerup=${this.handleDragEnd}\n >\n <md-elevation surface></md-elevation>\n <header class=\"header\">\n <slot name=\"header\">\n <slot name=\"headline-prefix\"></slot>\n <slot name=\"headline\"></slot>\n <slot name=\"headline-suffix\"></slot>\n </slot>\n </header>\n <section class=\"content\" @scroll=${this.handleContentScroll}>\n <slot></slot>\n </section>\n <footer class=\"footer\">\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n </dialog>`;\n }\n\n protected override willUpdate(changed: PropertyValues) {\n if (changed.has('open')) {\n this.opening = this.open;\n // only closing if was opened previously...\n this.closing = !this.open && changed.get('open');\n }\n if (changed.has('fullscreen') || changed.has('fullscreenBreakpoint')) {\n this.updateFullscreen();\n }\n }\n\n protected override firstUpdated() {\n // Update when content size changes to show/hide scroll dividers.\n new ResizeObserver(() => {\n if (this.showingOpen) {\n this.requestUpdate();\n }\n }).observe(this.contentElement);\n }\n\n protected override updated(changed: PropertyValues) {\n if (changed.get('draggable') && !this.draggable) {\n this.style.removeProperty('--_container-drag-inline-start');\n this.style.removeProperty('--_container-drag-block-start');\n }\n // Reflect internal state to facilitate styling.\n this.reflectStateProp(changed, 'opening', this.opening);\n this.reflectStateProp(changed, 'closing', this.closing);\n this.reflectStateProp(\n changed, 'showingFullscreen', this.showingFullscreen,\n 'showing-fullscreen');\n this.reflectStateProp(\n changed, 'showingOpen', this.showingOpen, 'showing-open');\n if (!changed.has('open')) {\n return;\n }\n // prevent body scrolling early only when opening to avoid layout\n // shift when closing.\n if (!this.modeless && this.open) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n if (this.open) {\n this.contentElement.scrollTop = 0;\n if (this.modeless) {\n this.dialogElement.show();\n } else {\n // Note, native focus handling fails when focused element is in an\n // overflow: auto container.\n this.dialogElement.showModal();\n }\n }\n // Avoids dispatching initial state.\n const shouldDispatchAction = changed.get('open') !== undefined;\n this.performTransition(shouldDispatchAction);\n }\n\n /**\n * Internal state is reflected here as attributes to effect styling. This\n * could be done via internal classes, but it's published on the host\n * to facilitate the (currently undocumented) possibility of customizing\n * styling of user content based on these states.\n * Note, in the future this could be done with `:state(...)` when browser\n * support improves.\n */\n private reflectStateProp(\n changed: PropertyValues, key: string, value: unknown,\n attribute?: string) {\n attribute ??= key;\n if (!changed.has(key)) {\n return;\n }\n if (value) {\n this.setAttribute(attribute, '');\n } else {\n this.removeAttribute(attribute);\n }\n }\n\n private dialogClosedResolver?: () => void;\n\n protected async performTransition(shouldDispatchAction: boolean) {\n // TODO: pause here only to avoid a double update warning.\n await this.updateComplete;\n this.showingOpen = this.open;\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opening' : 'closing');\n }\n // Compute desired transition duration.\n const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(\n this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));\n let promise = this.updateComplete;\n if (duration > 0) {\n promise = new Promise((r) => {\n setTimeout(r, duration);\n });\n }\n await promise;\n this.opening = false;\n this.closing = false;\n if (!this.open && this.dialogElement.open) {\n // Closing the dialog triggers an asynchronous `close` event.\n // It's important to wait for this event to fire since it changes the\n // state of `open` to false.\n // Without waiting, this element's `closed` event can be called before\n // the dialog's `close` event, which is problematic since the user\n // can set `open` in the `closed` event.\n // The timing of the event appears to vary via browser and does *not*\n // seem to resolve by \"task\" timing; therefore an explicit promise is\n // used.\n const closedPromise = new Promise<void>(resolve => {\n this.dialogClosedResolver = resolve;\n });\n this.dialogElement.close(this.currentAction || this.defaultAction);\n await closedPromise;\n // enable scrolling late to avoid layout shift when closing\n if (!this.modeless) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n }\n // Focus initial element.\n if (this.open) {\n this.focus();\n }\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opened' : 'closed');\n }\n this.currentAction = undefined;\n }\n\n protected dispatchActionEvent(type: string) {\n const detail = {action: this.open ? 'none' : this.currentAction};\n this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true}));\n }\n\n /* Live media query for matching user specified fullscreen breakpoint. */\n private fullscreenQuery?: MediaQueryList;\n private fullscreenQueryListener:\n ((e: MediaQueryListEvent) => void)|undefined = undefined;\n protected updateFullscreen() {\n if (this.fullscreenQuery !== undefined) {\n this.fullscreenQuery.removeEventListener(\n 'change', this.fullscreenQueryListener!);\n this.fullscreenQuery = this.fullscreenQueryListener = undefined;\n }\n if (!this.fullscreen) {\n this.showingFullscreen = false;\n return;\n }\n this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint);\n this.fullscreenQuery.addEventListener(\n 'change',\n (this.fullscreenQueryListener = (event: MediaQueryListEvent) => {\n this.showingFullscreen = event.matches;\n }));\n this.showingFullscreen = this.fullscreenQuery.matches;\n }\n\n // handles native close/cancel events and we just ensure\n // internal state is in sync.\n protected handleDialogDismiss(e: Event) {\n if (e.type === 'cancel') {\n this.currentAction = this.escapeKeyAction;\n }\n this.dialogClosedResolver?.();\n this.dialogClosedResolver = undefined;\n this.open = false;\n this.opening = false;\n this.closing = false;\n }\n\n protected handleDialogClick(e: Event) {\n if (!this.open) {\n return;\n }\n this.currentAction =\n (e.target as Element).getAttribute(this.actionAttribute) ??\n (!this.modeless && !e.composedPath().includes(this.containerElement) ?\n this.scrimClickAction :\n '');\n if (this.currentAction !== '') {\n this.close(this.currentAction);\n }\n }\n\n /* This allows the dividers to dynamically show based on scrolling. */\n protected handleContentScroll() {\n this.throttle('scroll', () => {\n this.requestUpdate();\n });\n }\n\n protected getFocusElement(): HTMLElement|null {\n const selector = `[${this.focusAttribute}]`;\n const slotted = [this.footerSlot, this.contentSlot].flatMap(\n slot => slot.assignedElements({flatten: true}));\n for (const el of slotted) {\n const focusEl = el.matches(selector) ? el : el.querySelector(selector);\n if (focusEl) {\n return focusEl as HTMLElement;\n }\n }\n return null;\n }\n\n override focus() {\n this.getFocusElement()?.focus();\n }\n\n override blur() {\n this.getFocusElement()?.blur();\n }\n\n protected canStartDrag(e: PointerEvent) {\n if (this.draggable === false || e.defaultPrevented || !(e.buttons & 1) ||\n !e.composedPath().includes(this.headerElement)) {\n return false;\n }\n return true;\n }\n\n protected handlePointerMove(e: PointerEvent) {\n if (!this.dragging && !this.canStartDrag(e)) {\n return;\n }\n const {top, left, height, width} =\n this.containerElement.getBoundingClientRect();\n if (!this.dragging) {\n this.containerElement.setPointerCapture(e.pointerId);\n this.dragging = true;\n const {x, y} = e;\n this.dragInfo = [x, y, top, left];\n }\n const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];\n const dx = e.x - sx;\n const dy = e.y - sy;\n const ml = window.innerWidth - width - this.dragMargin;\n const mt = window.innerHeight - height - this.dragMargin;\n const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));\n const t = Math.max(this.dragMargin, Math.min(mt, dy + st));\n this.style.setProperty('--_container-drag-inline-start', `${l}px`);\n this.style.setProperty('--_container-drag-block-start', `${t}px`);\n }\n\n protected handleDragEnd(e: PointerEvent) {\n if (!this.dragging) {\n return;\n }\n this.containerElement.releasePointerCapture(e.pointerId);\n this.dragging = false;\n this.dragInfo = undefined;\n }\n}\n"]}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
// go/keep-sorted start
|
|
7
|
-
@use 'sass:list';
|
|
8
7
|
@use 'sass:map';
|
|
9
8
|
// go/keep-sorted end
|
|
10
9
|
// go/keep-sorted start
|
|
@@ -13,34 +12,14 @@
|
|
|
13
12
|
@use './md-comp-elevation';
|
|
14
13
|
// go/keep-sorted end
|
|
15
14
|
|
|
16
|
-
// TODO(b/261603279): remove once tokens are updated to use level instead of dp
|
|
17
|
-
@function resolve-tokens($tokens, $elevation-keys...) {
|
|
18
|
-
@each $elevation-key in $elevation-keys {
|
|
19
|
-
$dp: map.get($tokens, $elevation-key);
|
|
20
|
-
@if $dp != null and not var.is-var($dp) {
|
|
21
|
-
$valid-dps: (0, 1, 3, 6, 8, 12);
|
|
22
|
-
@if list.index($valid-dps, $dp) == null {
|
|
23
|
-
@error '#{$elevation-key} must be expressed in dp values (#{$valid-dps}), but received #{$dp}. See b/261603279.';
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
$dp-to-level: list.index($valid-dps, $dp) - 1;
|
|
27
|
-
$tokens: map.set($tokens, $elevation-key, $dp-to-level);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@return $tokens;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
15
|
@mixin theme($tokens) {
|
|
35
16
|
$tokens: theme.validate-theme(md-comp-elevation.values(), $tokens);
|
|
36
|
-
$tokens: resolve-tokens($tokens, 'level');
|
|
37
17
|
$tokens: theme.create-theme-vars($tokens, 'elevation');
|
|
38
18
|
@include theme.emit-theme-vars($tokens);
|
|
39
19
|
}
|
|
40
20
|
|
|
41
21
|
@mixin styles() {
|
|
42
22
|
$tokens: md-comp-elevation.values();
|
|
43
|
-
$tokens: resolve-tokens($tokens, 'level');
|
|
44
23
|
$tokens: theme.create-theme-vars($tokens, 'elevation');
|
|
45
24
|
|
|
46
25
|
:host {
|
|
@@ -50,6 +29,7 @@
|
|
|
50
29
|
|
|
51
30
|
border-radius: inherit;
|
|
52
31
|
display: flex;
|
|
32
|
+
pointer-events: none;
|
|
53
33
|
position: relative;
|
|
54
34
|
}
|
|
55
35
|
|
|
@@ -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{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:"";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{opacity:.15;box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;pointer-events:none;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:"";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{opacity:.15;box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=elevation-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevation-styles.css.js","sourceRoot":"","sources":["elevation-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{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:\"\";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{opacity:.15;box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"elevation-styles.css.js","sourceRoot":"","sources":["elevation-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{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;pointer-events:none;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:\"\";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{opacity:.15;box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */\n`;\n "]}
|
|
@@ -12,17 +12,15 @@
|
|
|
12
12
|
// go/keep-sorted start
|
|
13
13
|
@use '../../sass/shape';
|
|
14
14
|
@use '../../sass/theme';
|
|
15
|
-
@use '../../sass/typography';
|
|
16
15
|
@use '../../tokens';
|
|
17
16
|
@use './shared';
|
|
18
17
|
// go/keep-sorted end
|
|
19
18
|
|
|
20
19
|
@mixin theme($tokens) {
|
|
21
20
|
$tokens: theme.validate-theme(
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
tokens.md-comp-extended-fab-surface-values(),
|
|
22
|
+
$tokens
|
|
24
23
|
);
|
|
25
|
-
$tokens: shared.resolve-tokens($tokens);
|
|
26
24
|
$tokens: theme.create-theme-vars($tokens, 'fab-extended');
|
|
27
25
|
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
|
28
26
|
|
|
@@ -30,8 +28,7 @@
|
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
@mixin styles() {
|
|
33
|
-
$tokens:
|
|
34
|
-
$tokens: shared.resolve-tokens($tokens);
|
|
31
|
+
$tokens: tokens.md-comp-extended-fab-surface-values();
|
|
35
32
|
$tokens: theme.create-theme-vars($tokens, 'fab-extended');
|
|
36
33
|
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
|
37
34
|
|
|
@@ -74,7 +71,3 @@
|
|
|
74
71
|
}
|
|
75
72
|
}
|
|
76
73
|
}
|
|
77
|
-
|
|
78
|
-
@function _resolve-typography($tokens) {
|
|
79
|
-
@return typography.resolve-tokens($tokens, 'label-text');
|
|
80
|
-
}
|
package/fab/lib/_fab.scss
CHANGED
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
|
|
16
16
|
@mixin theme($tokens) {
|
|
17
17
|
$tokens: theme.validate-theme(tokens.md-comp-fab-surface-values(), $tokens);
|
|
18
|
-
$tokens: shared.resolve-tokens($tokens);
|
|
19
18
|
$tokens: theme.create-theme-vars($tokens, 'fab');
|
|
20
19
|
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
|
21
20
|
|
|
@@ -24,8 +23,6 @@
|
|
|
24
23
|
|
|
25
24
|
@mixin styles() {
|
|
26
25
|
$tokens: tokens.md-comp-fab-surface-values();
|
|
27
|
-
|
|
28
|
-
$tokens: shared.resolve-tokens($tokens);
|
|
29
26
|
$tokens: theme.create-theme-vars($tokens, 'fab');
|
|
30
27
|
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
|
31
28
|
|
package/fab/lib/_shared.scss
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
@use 'sass:meta';
|
|
12
12
|
// go/keep-sorted end
|
|
13
13
|
// go/keep-sorted start
|
|
14
|
-
@use '../../elevation/
|
|
14
|
+
@use '../../elevation/elevation';
|
|
15
15
|
@use '../../focus/focus-ring';
|
|
16
16
|
@use '../../ripple/ripple';
|
|
17
17
|
@use '../../sass/shape';
|
|
@@ -32,11 +32,6 @@
|
|
|
32
32
|
vertical-align: top;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
:host([disabled]) {
|
|
36
|
-
cursor: default;
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
35
|
.md3-fab {
|
|
41
36
|
display: inline-flex;
|
|
42
37
|
border: none;
|
|
@@ -53,7 +48,7 @@
|
|
|
53
48
|
|
|
54
49
|
@include focus-ring.theme(
|
|
55
50
|
(
|
|
56
|
-
shape: shape.corners-to-shape-token(--_container-shape),
|
|
51
|
+
shape: shape.corners-to-shape-token('--_container-shape'),
|
|
57
52
|
)
|
|
58
53
|
);
|
|
59
54
|
|
|
@@ -193,27 +188,10 @@
|
|
|
193
188
|
// Adjust the focus ring padding to account for the 1px border in HCM.
|
|
194
189
|
@include focus-ring.theme(
|
|
195
190
|
(
|
|
196
|
-
offset
|
|
197
|
-
offset-horizontal: 3px,
|
|
191
|
+
offset: 3px,
|
|
198
192
|
)
|
|
199
193
|
);
|
|
200
194
|
border: 1px solid ButtonText;
|
|
201
195
|
}
|
|
202
196
|
}
|
|
203
197
|
}
|
|
204
|
-
|
|
205
|
-
@function resolve-tokens($tokens) {
|
|
206
|
-
$tokens: elevation.resolve-tokens(
|
|
207
|
-
$tokens,
|
|
208
|
-
'container-elevation',
|
|
209
|
-
'focus-container-elevation',
|
|
210
|
-
'hover-container-elevation',
|
|
211
|
-
'pressed-container-elevation',
|
|
212
|
-
'lowered-container-elevation',
|
|
213
|
-
'lowered-focus-container-elevation',
|
|
214
|
-
'lowered-hover-container-elevation',
|
|
215
|
-
'lowered-pressed-container-elevation'
|
|
216
|
-
);
|
|
217
|
-
|
|
218
|
-
@return $tokens;
|
|
219
|
-
}
|
|
@@ -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-shape-start-start: var(--md-fab-extended-container-shape-start-start, var(--md-fab-extended-container-shape, 16px));--_container-shape-start-end: var(--md-fab-extended-container-shape-start-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-end: var(--md-fab-extended-container-shape-end-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-start: var(--md-fab-extended-container-shape-end-start, var(--md-fab-extended-container-shape, 16px));--_container-color: var(--md-fab-extended-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-fab-extended-container-elevation, 3);--_container-height: var(--md-fab-extended-container-height, 56px);--_container-shadow-color: var(--md-fab-extended-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-fab-extended-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-container-elevation: var(--md-fab-extended-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-extended-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-fab-extended-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-fab-extended-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-extended-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-extended-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-extended-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-extended-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-extended-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-extended-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-extended-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-extended-icon-size, 24px);--_label-text-color: var(--md-fab-extended-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-extended-label-text-type, 500 0.875rem / 1.25rem Roboto);--_lowered-container-elevation: var(--md-fab-extended-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-extended-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-extended-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-extended-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-extended-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-extended-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-label-text-color: var(--md-fab-extended-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-extended-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-extended-pressed-state-layer-opacity, 0.12)}.md3-fab--extended{box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px;height:var(--_container-height);font:var(--_label-text-type)}.md3-fab__label{padding-inline-start:12px;color:var(--_label-text-color)}.md3-fab:hover .md3-fab__label{color:var(--_hover-label-text-color)}.md3-fab:focus .md3-fab__label{color:var(--_focus-label-text-color)}.md3-fab:active .md3-fab__label{color:var(--_pressed-label-text-color)}@media(forced-colors: active){.md3-fab--extended{padding-inline-start:15px;padding-inline-end:19px}}/*# sourceMappingURL=fab-extended-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-fab-extended-container-shape-start-start, var(--md-fab-extended-container-shape, 16px));--_container-shape-start-end: var(--md-fab-extended-container-shape-start-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-end: var(--md-fab-extended-container-shape-end-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-start: var(--md-fab-extended-container-shape-end-start, var(--md-fab-extended-container-shape, 16px));--_container-color: var(--md-fab-extended-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-fab-extended-container-elevation, 3);--_container-height: var(--md-fab-extended-container-height, 56px);--_container-shadow-color: var(--md-fab-extended-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-fab-extended-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-container-elevation: var(--md-fab-extended-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-extended-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-fab-extended-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-fab-extended-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-extended-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-extended-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-extended-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-extended-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-extended-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-extended-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-extended-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-extended-icon-size, 24px);--_label-text-color: var(--md-fab-extended-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-extended-label-text-font, Roboto);--_label-text-line-height: var(--md-fab-extended-label-text-line-height, 1.25rem);--_label-text-size: var(--md-fab-extended-label-text-size, 0.875rem);--_label-text-tracking: var(--md-fab-extended-label-text-tracking, 0.006rem);--_label-text-type: var(--md-fab-extended-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-fab-extended-label-text-weight, 500);--_lowered-container-elevation: var(--md-fab-extended-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-extended-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-extended-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-extended-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-extended-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-extended-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-label-text-color: var(--md-fab-extended-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-extended-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-extended-pressed-state-layer-opacity, 0.12)}.md3-fab--extended{box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px;height:var(--_container-height);font:var(--_label-text-type)}.md3-fab__label{padding-inline-start:12px;color:var(--_label-text-color)}.md3-fab:hover .md3-fab__label{color:var(--_hover-label-text-color)}.md3-fab:focus .md3-fab__label{color:var(--_focus-label-text-color)}.md3-fab:active .md3-fab__label{color:var(--_pressed-label-text-color)}@media(forced-colors: active){.md3-fab--extended{padding-inline-start:15px;padding-inline-end:19px}}/*# sourceMappingURL=fab-extended-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=fab-extended-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fab-extended-styles.css.js","sourceRoot":"","sources":["fab-extended-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-shape-start-start: var(--md-fab-extended-container-shape-start-start, var(--md-fab-extended-container-shape, 16px));--_container-shape-start-end: var(--md-fab-extended-container-shape-start-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-end: var(--md-fab-extended-container-shape-end-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-start: var(--md-fab-extended-container-shape-end-start, var(--md-fab-extended-container-shape, 16px));--_container-color: var(--md-fab-extended-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-fab-extended-container-elevation, 3);--_container-height: var(--md-fab-extended-container-height, 56px);--_container-shadow-color: var(--md-fab-extended-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-fab-extended-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-container-elevation: var(--md-fab-extended-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-extended-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-fab-extended-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-fab-extended-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-extended-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-extended-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-extended-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-extended-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-extended-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-extended-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-extended-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-extended-icon-size, 24px);--_label-text-color: var(--md-fab-extended-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-extended-label-text-type, 500 0.875rem / 1.25rem Roboto);--_lowered-container-elevation: var(--md-fab-extended-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-extended-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-extended-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-extended-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-extended-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-extended-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-label-text-color: var(--md-fab-extended-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-extended-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-extended-pressed-state-layer-opacity, 0.12)}.md3-fab--extended{box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px;height:var(--_container-height);font:var(--_label-text-type)}.md3-fab__label{padding-inline-start:12px;color:var(--_label-text-color)}.md3-fab:hover .md3-fab__label{color:var(--_hover-label-text-color)}.md3-fab:focus .md3-fab__label{color:var(--_focus-label-text-color)}.md3-fab:active .md3-fab__label{color:var(--_pressed-label-text-color)}@media(forced-colors: active){.md3-fab--extended{padding-inline-start:15px;padding-inline-end:19px}}/*# sourceMappingURL=fab-extended-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"fab-extended-styles.css.js","sourceRoot":"","sources":["fab-extended-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-shape-start-start: var(--md-fab-extended-container-shape-start-start, var(--md-fab-extended-container-shape, 16px));--_container-shape-start-end: var(--md-fab-extended-container-shape-start-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-end: var(--md-fab-extended-container-shape-end-end, var(--md-fab-extended-container-shape, 16px));--_container-shape-end-start: var(--md-fab-extended-container-shape-end-start, var(--md-fab-extended-container-shape, 16px));--_container-color: var(--md-fab-extended-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-fab-extended-container-elevation, 3);--_container-height: var(--md-fab-extended-container-height, 56px);--_container-shadow-color: var(--md-fab-extended-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-fab-extended-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-container-elevation: var(--md-fab-extended-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-extended-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-fab-extended-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-fab-extended-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-extended-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-extended-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-extended-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-extended-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-extended-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-extended-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-extended-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-extended-icon-size, 24px);--_label-text-color: var(--md-fab-extended-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-extended-label-text-font, Roboto);--_label-text-line-height: var(--md-fab-extended-label-text-line-height, 1.25rem);--_label-text-size: var(--md-fab-extended-label-text-size, 0.875rem);--_label-text-tracking: var(--md-fab-extended-label-text-tracking, 0.006rem);--_label-text-type: var(--md-fab-extended-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-fab-extended-label-text-weight, 500);--_lowered-container-elevation: var(--md-fab-extended-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-extended-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-extended-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-extended-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-extended-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-extended-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-label-text-color: var(--md-fab-extended-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-extended-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-extended-pressed-state-layer-opacity, 0.12)}.md3-fab--extended{box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px;height:var(--_container-height);font:var(--_label-text-type)}.md3-fab__label{padding-inline-start:12px;color:var(--_label-text-color)}.md3-fab:hover .md3-fab__label{color:var(--_hover-label-text-color)}.md3-fab:focus .md3-fab__label{color:var(--_focus-label-text-color)}.md3-fab:active .md3-fab__label{color:var(--_pressed-label-text-color)}@media(forced-colors: active){.md3-fab--extended{padding-inline-start:15px;padding-inline-end:19px}}/*# sourceMappingURL=fab-extended-styles.css.map */\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{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top}
|
|
7
|
+
export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top}.md3-fab{display:inline-flex;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;align-items:center;justify-content:center;position:relative;z-index:0;background-color:var(--_container-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start));--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}.md3-fab.md3-fab--lowered{--md-elevation-level:var(--_lowered-container-elevation)}.md3-fab:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-fab:focus.md3-fab--lowered{--md-elevation-level:var(--_lowered-focus-container-elevation)}.md3-fab:hover{cursor:pointer;--md-elevation-level:var(--_hover-container-elevation)}.md3-fab:hover.md3-fab--lowered{--md-elevation-level:var(--_lowered-hover-container-elevation)}.md3-fab:active{outline:none;--md-elevation-level:var(--_pressed-container-elevation)}.md3-fab:active.md3-fab--lowered{--md-elevation-level:var(--_lowered-pressed-container-elevation)}md-elevation{inset:0;position:absolute;z-index:-1}.md3-fab__ripple{overflow:hidden;z-index:-1}.md3-fab,.md3-fab__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-fab__icon{display:inline-flex}.md3-fab__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-fab__icon ::slotted(*),.md3-fab__icon{color:var(--_icon-color);font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.md3-fab:hover .md3-fab__icon ::slotted(*),.md3-fab:hover .md3-fab__icon{color:var(--_hover-icon-color)}.md3-fab:focus .md3-fab__icon ::slotted(*),.md3-fab:focus .md3-fab__icon{color:var(--_focus-icon-color)}.md3-fab:active .md3-fab__icon ::slotted(*),.md3-fab:active .md3-fab__icon{color:var(--_pressed-icon-color)}@media(forced-colors: active){.md3-fab{--md-focus-ring-offset:3px;border:1px solid ButtonText}}/*# sourceMappingURL=fab-shared-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=fab-shared-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fab-shared-styles.css.js","sourceRoot":"","sources":["fab-shared-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{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top}
|
|
1
|
+
{"version":3,"file":"fab-shared-styles.css.js","sourceRoot":"","sources":["fab-shared-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{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top}.md3-fab{display:inline-flex;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;align-items:center;justify-content:center;position:relative;z-index:0;background-color:var(--_container-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start));--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-elevation-duration:280ms;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}.md3-fab.md3-fab--lowered{--md-elevation-level:var(--_lowered-container-elevation)}.md3-fab:focus{--md-elevation-level:var(--_focus-container-elevation)}.md3-fab:focus.md3-fab--lowered{--md-elevation-level:var(--_lowered-focus-container-elevation)}.md3-fab:hover{cursor:pointer;--md-elevation-level:var(--_hover-container-elevation)}.md3-fab:hover.md3-fab--lowered{--md-elevation-level:var(--_lowered-hover-container-elevation)}.md3-fab:active{outline:none;--md-elevation-level:var(--_pressed-container-elevation)}.md3-fab:active.md3-fab--lowered{--md-elevation-level:var(--_lowered-pressed-container-elevation)}md-elevation{inset:0;position:absolute;z-index:-1}.md3-fab__ripple{overflow:hidden;z-index:-1}.md3-fab,.md3-fab__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-fab__icon{display:inline-flex}.md3-fab__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-fab__icon ::slotted(*),.md3-fab__icon{color:var(--_icon-color);font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.md3-fab:hover .md3-fab__icon ::slotted(*),.md3-fab:hover .md3-fab__icon{color:var(--_hover-icon-color)}.md3-fab:focus .md3-fab__icon ::slotted(*),.md3-fab:focus .md3-fab__icon{color:var(--_focus-icon-color)}.md3-fab:active .md3-fab__icon ::slotted(*),.md3-fab:active .md3-fab__icon{color:var(--_pressed-icon-color)}@media(forced-colors: active){.md3-fab{--md-focus-ring-offset:3px;border:1px solid ButtonText}}/*# sourceMappingURL=fab-shared-styles.css.map */\n`;\n "]}
|
package/fab/lib/fab-shared.d.ts
CHANGED
package/fab/lib/fab-shared.js
CHANGED
|
@@ -19,7 +19,6 @@ import { ripple } from '../../ripple/directive.js';
|
|
|
19
19
|
export class FabShared extends LitElement {
|
|
20
20
|
constructor() {
|
|
21
21
|
super(...arguments);
|
|
22
|
-
this.disabled = false;
|
|
23
22
|
this.icon = '';
|
|
24
23
|
this.label = '';
|
|
25
24
|
this.lowered = false;
|
|
@@ -27,7 +26,7 @@ export class FabShared extends LitElement {
|
|
|
27
26
|
this.showFocusRing = false;
|
|
28
27
|
this.showRipple = false;
|
|
29
28
|
this.renderRipple = () => {
|
|
30
|
-
return html `<md-ripple class="md3-fab__ripple"
|
|
29
|
+
return html `<md-ripple class="md3-fab__ripple"></md-ripple>`;
|
|
31
30
|
};
|
|
32
31
|
}
|
|
33
32
|
/**
|
|
@@ -43,7 +42,6 @@ export class FabShared extends LitElement {
|
|
|
43
42
|
return html `
|
|
44
43
|
<button
|
|
45
44
|
class="md3-fab md3-surface ${classMap(this.getRenderClasses())}"
|
|
46
|
-
?disabled="${this.disabled}"
|
|
47
45
|
aria-label="${ariaLabel}"
|
|
48
46
|
@focus="${this.handleFocus}"
|
|
49
47
|
@blur="${this.handleBlur}"
|
|
@@ -92,10 +90,6 @@ export class FabShared extends LitElement {
|
|
|
92
90
|
}
|
|
93
91
|
}
|
|
94
92
|
FabShared.shadowRootOptions = { mode: 'open', delegatesFocus: true };
|
|
95
|
-
__decorate([
|
|
96
|
-
property({ type: Boolean }),
|
|
97
|
-
__metadata("design:type", Object)
|
|
98
|
-
], FabShared.prototype, "disabled", void 0);
|
|
99
93
|
__decorate([
|
|
100
94
|
property(),
|
|
101
95
|
__metadata("design:type", Object)
|