@material/web 1.0.0-pre.5 → 1.0.0-pre.7
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 +7 -7
- package/aria/aria.d.ts +43 -0
- package/aria/aria.js +56 -0
- package/aria/aria.js.map +1 -0
- package/aria/delegate.d.ts +37 -0
- package/aria/delegate.js +53 -0
- package/aria/delegate.js.map +1 -0
- package/badge/badge.d.ts +0 -1
- package/badge/badge.js +0 -1
- package/badge/badge.js.map +1 -1
- package/badge/lib/badge-styles.css.js +1 -1
- package/badge/lib/badge-styles.css.js.map +1 -1
- package/badge/lib/badge.d.ts +8 -7
- package/badge/lib/badge.js +5 -6
- package/badge/lib/badge.js.map +1 -1
- package/button/lib/_elevation.scss +15 -11
- package/button/lib/_outlined-button.scss +1 -1
- package/button/lib/_shared.scss +5 -0
- package/button/lib/_text-button.scss +1 -1
- package/button/lib/_tonal-button.scss +1 -1
- package/button/lib/button.d.ts +13 -11
- package/button/lib/button.js +51 -60
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-button.d.ts +3 -0
- package/button/lib/elevated-button.js +4 -2
- package/button/lib/elevated-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-button.d.ts +3 -1
- package/button/lib/filled-button.js +4 -3
- package/button/lib/filled-button.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-button.d.ts +3 -0
- package/button/lib/outlined-button.js +3 -1
- package/button/lib/outlined-button.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-elevation-styles.css.js +1 -1
- package/button/lib/shared-elevation-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-button.d.ts +3 -0
- package/button/lib/text-button.js +3 -1
- package/button/lib/text-button.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-button.d.ts +3 -1
- package/button/lib/tonal-button.js +4 -3
- package/button/lib/tonal-button.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-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/checkbox/lib/checkbox.d.ts +0 -1
- package/checkbox/lib/checkbox.js +33 -43
- package/checkbox/lib/checkbox.js.map +1 -1
- package/chips/_filter-chip.scss +6 -0
- package/chips/filter-chip.d.ts +20 -0
- package/chips/filter-chip.js +24 -0
- package/chips/filter-chip.js.map +1 -0
- package/chips/lib/_filter-chip.scss +141 -0
- package/chips/lib/_shared.scss +71 -37
- package/chips/lib/assist-styles.css.js +1 -1
- package/chips/lib/assist-styles.css.js.map +1 -1
- package/chips/lib/chip.d.ts +8 -3
- package/chips/lib/chip.js +30 -31
- package/chips/lib/chip.js.map +1 -1
- package/chips/lib/filter-chip.d.ts +21 -0
- package/chips/lib/filter-chip.js +47 -0
- package/chips/lib/filter-chip.js.map +1 -0
- package/chips/lib/filter-styles.css.js +9 -0
- package/chips/lib/filter-styles.css.js.map +1 -0
- package/{fab/lib/fab-extended-styles.scss → chips/lib/filter-styles.scss} +3 -3
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-styles.css.js +1 -1
- package/chips/lib/suggestion-styles.css.js.map +1 -1
- package/circularprogress/_circular-progress.scss +6 -0
- package/circularprogress/circular-progress.d.ts +24 -0
- package/circularprogress/circular-progress.js +27 -0
- package/circularprogress/circular-progress.js.map +1 -0
- package/circularprogress/harness.d.ts +13 -0
- package/circularprogress/harness.js +16 -0
- package/circularprogress/harness.js.map +1 -0
- package/circularprogress/lib/_circular-progress.scss +282 -0
- package/circularprogress/lib/circular-progress-styles.css.js +9 -0
- package/circularprogress/lib/circular-progress-styles.css.js.map +1 -0
- package/circularprogress/lib/circular-progress-styles.scss +8 -0
- package/circularprogress/lib/circular-progress.d.ts +28 -0
- package/circularprogress/lib/circular-progress.js +95 -0
- package/circularprogress/lib/circular-progress.js.map +1 -0
- package/dialog/lib/_dialog.scss +9 -14
- package/dialog/lib/dialog-styles.css.js +1 -1
- package/dialog/lib/dialog-styles.css.js.map +1 -1
- package/dialog/lib/dialog.js +26 -50
- package/dialog/lib/dialog.js.map +1 -1
- package/divider/lib/divider.js +4 -7
- package/divider/lib/divider.js.map +1 -1
- package/elevation/lib/_elevation.scss +14 -51
- package/elevation/lib/elevation-styles.css.js +1 -1
- package/elevation/lib/elevation-styles.css.js.map +1 -1
- package/elevation/lib/elevation.d.ts +0 -8
- package/elevation/lib/elevation.js +1 -25
- package/elevation/lib/elevation.js.map +1 -1
- package/fab/_fab.scss +1 -0
- package/fab/branded-fab.d.ts +53 -0
- package/fab/branded-fab.js +56 -0
- package/fab/branded-fab.js.map +1 -0
- package/fab/fab.d.ts +25 -5
- package/fab/fab.js +27 -10
- package/fab/fab.js.map +1 -1
- package/fab/harness.d.ts +1 -2
- package/fab/harness.js +1 -1
- package/fab/harness.js.map +1 -1
- package/fab/lib/_fab-branded.scss +27 -0
- package/fab/lib/_fab.scss +144 -16
- package/fab/lib/_shared.scss +153 -131
- package/fab/lib/fab-branded-styles.css.js +9 -0
- package/fab/lib/fab-branded-styles.css.js.map +1 -0
- package/fab/lib/fab-branded-styles.scss +10 -0
- package/fab/lib/fab-styles.css.js +1 -1
- package/fab/lib/fab-styles.css.js.map +1 -1
- package/fab/lib/fab.d.ts +14 -10
- package/fab/lib/fab.js +19 -12
- package/fab/lib/fab.js.map +1 -1
- package/fab/lib/forced-colors-styles.css.js +9 -0
- package/fab/lib/forced-colors-styles.css.js.map +1 -0
- package/fab/lib/forced-colors-styles.scss +26 -0
- package/fab/lib/shared-styles.css.d.ts +1 -0
- package/fab/lib/shared-styles.css.js +9 -0
- package/fab/lib/shared-styles.css.js.map +1 -0
- package/fab/lib/{fab-shared-styles.scss → shared-styles.scss} +1 -1
- package/fab/lib/{fab-shared.d.ts → shared.d.ts} +24 -16
- package/fab/lib/shared.js +137 -0
- package/fab/lib/shared.js.map +1 -0
- package/field/lib/field.js +14 -27
- package/field/lib/field.js.map +1 -1
- package/field/lib/filled-styles.css.js +1 -1
- package/field/lib/filled-styles.css.js.map +1 -1
- package/field/lib/outlined-styles.css.js +1 -1
- package/field/lib/outlined-styles.css.js.map +1 -1
- package/focus/focus-ring.d.ts +0 -1
- package/focus/focus-ring.js +0 -1
- package/focus/focus-ring.js.map +1 -1
- package/focus/lib/_focus-ring.scss +30 -20
- package/focus/lib/focus-ring-styles.css.js +1 -1
- package/focus/lib/focus-ring-styles.css.js.map +1 -1
- package/focus/lib/focus-ring.js +2 -3
- package/focus/lib/focus-ring.js.map +1 -1
- package/focus/strong-focus.d.ts +11 -0
- package/focus/strong-focus.js +16 -1
- package/focus/strong-focus.js.map +1 -1
- package/icon/icon.d.ts +0 -1
- package/icon/icon.js +0 -1
- package/icon/icon.js.map +1 -1
- package/icon/lib/_icon.scss +2 -0
- package/icon/lib/icon-styles.css.js +1 -1
- package/icon/lib/icon-styles.css.js.map +1 -1
- package/icon/lib/icon.d.ts +5 -4
- package/icon/lib/icon.js +3 -2
- package/icon/lib/icon.js.map +1 -1
- package/iconbutton/filled-icon-button.js +1 -0
- package/iconbutton/filled-icon-button.js.map +1 -1
- package/iconbutton/filled-tonal-icon-button.js +1 -0
- package/iconbutton/filled-tonal-icon-button.js.map +1 -1
- package/iconbutton/harness.d.ts +1 -2
- package/iconbutton/harness.js.map +1 -1
- 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.d.ts +31 -4
- package/iconbutton/lib/icon-button.js +105 -37
- 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/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.js.map +1 -1
- package/linearprogress/_linear-progress.scss +6 -0
- package/linearprogress/harness.d.ts +13 -0
- package/linearprogress/harness.js +18 -0
- package/linearprogress/harness.js.map +1 -0
- package/linearprogress/lib/_linear-progress.scss +380 -0
- package/linearprogress/lib/linear-progress-styles.css.d.ts +1 -0
- package/linearprogress/lib/linear-progress-styles.css.js +9 -0
- package/linearprogress/lib/linear-progress-styles.css.js.map +1 -0
- package/linearprogress/lib/linear-progress-styles.scss +8 -0
- package/linearprogress/lib/linear-progress.d.ts +35 -0
- package/linearprogress/lib/linear-progress.js +127 -0
- package/linearprogress/lib/linear-progress.js.map +1 -0
- package/linearprogress/linear-progress.d.ts +23 -0
- package/linearprogress/linear-progress.js +26 -0
- package/linearprogress/linear-progress.js.map +1 -0
- package/list/harness.d.ts +1 -0
- package/list/harness.js +1 -0
- package/list/harness.js.map +1 -1
- package/list/lib/_list.scss +6 -50
- package/list/lib/list-styles.css.js +1 -1
- package/list/lib/list-styles.css.js.map +1 -1
- package/list/lib/list.d.ts +1 -3
- package/list/lib/list.js +20 -34
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/_list-item.scss +19 -82
- package/list/lib/listitem/forced-colors-styles.css.d.ts +1 -0
- package/list/lib/listitem/forced-colors-styles.css.js +9 -0
- package/list/lib/listitem/forced-colors-styles.css.js.map +1 -0
- package/list/lib/listitem/forced-colors-styles.scss +23 -0
- 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 +5 -7
- package/list/lib/listitem/list-item.js +27 -56
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link.js +4 -6
- package/list/lib/listitemlink/list-item-link.js.map +1 -1
- package/list/list-item-link.js +2 -1
- package/list/list-item-link.js.map +1 -1
- package/list/list-item.js +2 -1
- package/list/list-item.js.map +1 -1
- package/menu/harness.d.ts +1 -0
- package/menu/harness.js +1 -0
- package/menu/harness.js.map +1 -1
- package/menu/lib/_menu.scss +10 -37
- package/menu/lib/forced-colors-styles.css.d.ts +1 -0
- package/menu/lib/forced-colors-styles.css.js +9 -0
- package/menu/lib/forced-colors-styles.css.js.map +1 -0
- package/menu/lib/forced-colors-styles.scss +12 -0
- 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 +13 -3
- package/menu/lib/menu.js +78 -65
- package/menu/lib/menu.js.map +1 -1
- package/menu/lib/menuitem/_menu-item.scss +18 -43
- package/menu/lib/menuitem/forced-colors-styles.css.d.ts +1 -0
- package/menu/lib/menuitem/forced-colors-styles.css.js +9 -0
- package/menu/lib/menuitem/forced-colors-styles.css.js.map +1 -0
- package/menu/lib/menuitem/forced-colors-styles.scss +22 -0
- package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
- package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
- package/menu/lib/menuitem/menu-item.d.ts +1 -1
- package/menu/lib/menuitem/menu-item.js +4 -6
- package/menu/lib/menuitem/menu-item.js.map +1 -1
- package/menu/lib/menuitemlink/menu-item-link.d.ts +0 -2
- package/menu/lib/menuitemlink/menu-item-link.js +3 -6
- package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
- package/menu/lib/shared.d.ts +16 -2
- package/menu/lib/shared.js +23 -0
- package/menu/lib/shared.js.map +1 -1
- package/menu/lib/submenuitem/sub-menu-item.d.ts +4 -2
- package/menu/lib/submenuitem/sub-menu-item.js +17 -13
- package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/lib/typeaheadController.d.ts +10 -2
- package/menu/lib/typeaheadController.js +20 -14
- package/menu/lib/typeaheadController.js.map +1 -1
- package/menu/menu-item-link.js +3 -1
- package/menu/menu-item-link.js.map +1 -1
- package/menu/menu-item.js +4 -2
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.js +2 -1
- package/menu/menu.js.map +1 -1
- package/menu/sub-menu-item.js +3 -1
- package/menu/sub-menu-item.js.map +1 -1
- package/navigationbar/lib/_navigation-bar.scss +9 -6
- package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
- package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
- package/navigationbar/lib/navigation-bar.d.ts +5 -5
- package/navigationbar/lib/navigation-bar.js +19 -20
- package/navigationbar/lib/navigation-bar.js.map +1 -1
- package/navigationbar/navigation-bar.d.ts +0 -1
- package/navigationbar/navigation-bar.js +0 -1
- package/navigationbar/navigation-bar.js.map +1 -1
- package/navigationdrawer/lib/_navigation-drawer-modal.scss +10 -11
- package/navigationdrawer/lib/_navigation-drawer.scss +9 -14
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal.d.ts +5 -10
- package/navigationdrawer/lib/navigation-drawer-modal.js +19 -41
- package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer.d.ts +5 -9
- package/navigationdrawer/lib/navigation-drawer.js +18 -39
- package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
- package/navigationdrawer/navigation-drawer-modal.d.ts +0 -1
- package/navigationdrawer/navigation-drawer-modal.js +0 -1
- package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/navigation-drawer.d.ts +0 -1
- package/navigationdrawer/navigation-drawer.js +0 -1
- package/navigationdrawer/navigation-drawer.js.map +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
- package/navigationtab/lib/navigation-tab.d.ts +19 -24
- package/navigationtab/lib/navigation-tab.js +48 -68
- package/navigationtab/lib/navigation-tab.js.map +1 -1
- package/navigationtab/navigation-tab.d.ts +0 -1
- package/navigationtab/navigation-tab.js +0 -1
- package/navigationtab/navigation-tab.js.map +1 -1
- package/package.json +2 -1
- package/radio/lib/radio-styles.css.js +1 -1
- package/radio/lib/radio-styles.css.js.map +1 -1
- package/radio/lib/radio.d.ts +0 -1
- package/radio/lib/radio.js +30 -37
- package/radio/lib/radio.js.map +1 -1
- package/ripple/lib/_md-comp-ripple.scss +3 -3
- package/ripple/lib/ripple-styles.css.js +1 -1
- package/ripple/lib/ripple-styles.css.js.map +1 -1
- package/ripple/lib/ripple.js +7 -13
- package/ripple/lib/ripple.js.map +1 -1
- package/segmentedbutton/lib/outlined-segmented-button.d.ts +16 -7
- package/segmentedbutton/lib/outlined-segmented-button.js +3 -3
- package/segmentedbutton/lib/outlined-segmented-button.js.map +1 -1
- package/segmentedbutton/lib/outlined-styles.css.js +1 -1
- package/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
- package/segmentedbutton/lib/segmented-button.d.ts +27 -33
- package/segmentedbutton/lib/segmented-button.js +42 -75
- package/segmentedbutton/lib/segmented-button.js.map +1 -1
- package/segmentedbutton/outlined-segmented-button.d.ts +0 -1
- package/segmentedbutton/outlined-segmented-button.js +0 -1
- package/segmentedbutton/outlined-segmented-button.js.map +1 -1
- package/segmentedbuttonset/lib/outlined-segmented-button-set.d.ts +6 -4
- package/segmentedbuttonset/lib/outlined-segmented-button-set.js +3 -2
- package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/segmentedbuttonset/lib/segmented-button-set.d.ts +3 -9
- package/segmentedbuttonset/lib/segmented-button-set.js +14 -20
- package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
- package/segmentedbuttonset/outlined-segmented-button-set.d.ts +0 -1
- package/segmentedbuttonset/outlined-segmented-button-set.js +0 -1
- package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
- package/select/_filled-select.scss +6 -0
- package/select/_outlined-select.scss +6 -0
- package/select/filled-select.d.ts +41 -0
- package/select/filled-select.js +46 -0
- package/select/filled-select.js.map +1 -0
- package/select/harness.d.ts +24 -0
- package/select/harness.js +53 -0
- package/select/harness.js.map +1 -0
- package/select/lib/_filled-select.scss +163 -0
- package/select/lib/_outlined-select.scss +146 -0
- package/select/lib/_shared.scss +48 -0
- package/select/lib/filled-forced-colors-styles.css.d.ts +1 -0
- package/select/lib/filled-forced-colors-styles.css.js +9 -0
- package/select/lib/filled-forced-colors-styles.css.js.map +1 -0
- package/select/lib/filled-forced-colors-styles.scss +29 -0
- package/select/lib/filled-select-styles.css.d.ts +1 -0
- package/select/lib/filled-select-styles.css.js +9 -0
- package/select/lib/filled-select-styles.css.js.map +1 -0
- package/select/lib/filled-select-styles.scss +10 -0
- package/select/lib/filled-select.d.ts +10 -0
- package/select/lib/filled-select.js +16 -0
- package/select/lib/filled-select.js.map +1 -0
- package/select/lib/outlined-forced-colors-styles.css.d.ts +1 -0
- package/select/lib/outlined-forced-colors-styles.css.js +9 -0
- package/select/lib/outlined-forced-colors-styles.css.js.map +1 -0
- package/select/lib/outlined-forced-colors-styles.scss +29 -0
- package/select/lib/outlined-select-styles.css.d.ts +1 -0
- package/select/lib/outlined-select-styles.css.js +9 -0
- package/select/lib/outlined-select-styles.css.js.map +1 -0
- package/select/lib/outlined-select-styles.scss +10 -0
- package/select/lib/outlined-select.d.ts +10 -0
- package/select/lib/outlined-select.js +16 -0
- package/select/lib/outlined-select.js.map +1 -0
- package/select/lib/select.d.ts +218 -0
- package/select/lib/select.js +587 -0
- package/select/lib/select.js.map +1 -0
- package/select/lib/selectoption/harness.d.ts +11 -0
- package/select/lib/selectoption/harness.js +12 -0
- package/select/lib/selectoption/harness.js.map +1 -0
- package/select/lib/selectoption/select-option.d.ts +30 -0
- package/select/lib/selectoption/select-option.js +71 -0
- package/select/lib/selectoption/select-option.js.map +1 -0
- package/select/lib/shared-styles.css.d.ts +1 -0
- package/select/lib/shared-styles.css.js +9 -0
- package/select/lib/shared-styles.css.js.map +1 -0
- package/select/lib/shared-styles.scss +10 -0
- package/select/lib/shared.d.ts +52 -0
- package/select/lib/shared.js +41 -0
- package/select/lib/shared.js.map +1 -0
- package/select/outlined-select.d.ts +41 -0
- package/select/outlined-select.js +46 -0
- package/select/outlined-select.js.map +1 -0
- package/select/select-option.d.ts +44 -0
- package/select/select-option.js +51 -0
- package/select/select-option.js.map +1 -0
- package/slider/harness.d.ts +1 -0
- package/slider/harness.js +5 -0
- package/slider/harness.js.map +1 -1
- package/slider/lib/_slider.scss +147 -171
- package/slider/lib/forced-colors-styles.css.js +1 -1
- package/slider/lib/forced-colors-styles.css.js.map +1 -1
- package/slider/lib/forced-colors-styles.scss +2 -2
- package/slider/lib/slider-styles.css.js +1 -1
- package/slider/lib/slider-styles.css.js.map +1 -1
- package/slider/lib/slider.d.ts +2 -7
- package/slider/lib/slider.js +65 -119
- package/slider/lib/slider.js.map +1 -1
- package/switch/lib/switch-styles.css.js +1 -1
- package/switch/lib/switch-styles.css.js.map +1 -1
- package/switch/lib/switch.d.ts +0 -2
- package/switch/lib/switch.js +32 -54
- package/switch/lib/switch.js.map +1 -1
- package/textfield/lib/filled-styles.css.js +1 -1
- package/textfield/lib/filled-styles.css.js.map +1 -1
- package/textfield/lib/outlined-styles.css.js +1 -1
- package/textfield/lib/outlined-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +0 -10
- package/textfield/lib/text-field.js +45 -115
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_index.scss +6 -0
- package/tokens/_md-comp-assist-chip.scss +81 -21
- package/tokens/_md-comp-badge.scss +8 -1
- package/tokens/_md-comp-banner.scss +1 -1
- package/tokens/_md-comp-bottom-app-bar.scss +1 -1
- package/tokens/_md-comp-carousel-item.scss +1 -1
- package/tokens/_md-comp-checkbox.scss +1 -1
- package/tokens/_md-comp-circular-progress-indicator.scss +17 -2
- package/tokens/_md-comp-data-table.scss +1 -1
- package/tokens/_md-comp-date-input-modal.scss +1 -1
- package/tokens/_md-comp-date-picker-docked.scss +1 -1
- package/tokens/_md-comp-date-picker-modal.scss +1 -1
- package/tokens/_md-comp-dialog.scss +10 -1
- package/tokens/_md-comp-divider.scss +1 -1
- package/tokens/_md-comp-elevated-button.scss +80 -20
- package/tokens/_md-comp-elevated-card.scss +1 -1
- package/tokens/_md-comp-elevation.scss +24 -0
- package/tokens/_md-comp-extended-fab-branded.scss +8 -1
- package/tokens/_md-comp-extended-fab-primary.scss +8 -1
- package/tokens/_md-comp-extended-fab-secondary.scss +8 -1
- package/tokens/_md-comp-extended-fab-surface.scss +8 -1
- package/tokens/_md-comp-extended-fab-tertiary.scss +8 -1
- package/tokens/_md-comp-fab-branded-large.scss +1 -1
- package/tokens/_md-comp-fab-branded.scss +110 -2
- package/tokens/_md-comp-fab-primary-large.scss +1 -1
- package/tokens/_md-comp-fab-primary-small.scss +1 -1
- package/tokens/_md-comp-fab-primary.scss +1 -1
- package/tokens/_md-comp-fab-secondary-large.scss +1 -1
- package/tokens/_md-comp-fab-secondary-small.scss +1 -1
- package/tokens/_md-comp-fab-secondary.scss +1 -1
- package/tokens/_md-comp-fab-surface-large.scss +1 -1
- package/tokens/_md-comp-fab-surface-small.scss +1 -1
- package/tokens/_md-comp-fab-surface.scss +1 -1
- package/tokens/_md-comp-fab-tertiary-large.scss +1 -1
- package/tokens/_md-comp-fab-tertiary-small.scss +1 -1
- package/tokens/_md-comp-fab-tertiary.scss +1 -1
- package/tokens/_md-comp-fab.scss +290 -0
- package/tokens/_md-comp-filled-autocomplete.scss +1 -1
- package/tokens/_md-comp-filled-button.scss +80 -20
- package/tokens/_md-comp-filled-card.scss +1 -1
- package/tokens/_md-comp-filled-icon-button.scss +1 -1
- package/tokens/_md-comp-filled-menu-button.scss +1 -1
- package/tokens/_md-comp-filled-select.scss +151 -2
- package/tokens/_md-comp-filled-text-field.scss +10 -1
- package/tokens/_md-comp-filled-tonal-button.scss +80 -20
- package/tokens/_md-comp-filled-tonal-icon-button.scss +1 -1
- package/tokens/_md-comp-filter-chip.scss +211 -11
- package/tokens/_md-comp-focus-ring.scss +46 -0
- package/tokens/_md-comp-full-screen-dialog.scss +1 -1
- package/tokens/_md-comp-icon-button.scss +1 -1
- package/tokens/_md-comp-input-chip.scss +186 -11
- package/tokens/_md-comp-linear-progress-indicator.scss +15 -2
- package/tokens/_md-comp-list-item.scss +201 -0
- package/tokens/_md-comp-list.scss +110 -12
- package/tokens/_md-comp-menu-item.scss +76 -0
- package/tokens/_md-comp-menu.scss +53 -3
- package/tokens/_md-comp-navigation-bar.scss +1 -1
- package/tokens/_md-comp-navigation-drawer.scss +1 -1
- package/tokens/_md-comp-navigation-rail.scss +1 -1
- package/tokens/_md-comp-outlined-autocomplete.scss +1 -1
- package/tokens/_md-comp-outlined-button.scss +77 -19
- package/tokens/_md-comp-outlined-card.scss +1 -1
- package/tokens/_md-comp-outlined-icon-button.scss +1 -1
- package/tokens/_md-comp-outlined-menu-button.scss +1 -1
- package/tokens/_md-comp-outlined-segmented-button.scss +10 -1
- package/tokens/_md-comp-outlined-select.scss +151 -2
- package/tokens/_md-comp-outlined-text-field.scss +10 -1
- package/tokens/_md-comp-plain-tooltip.scss +1 -1
- package/tokens/_md-comp-primary-navigation-tab.scss +10 -1
- package/tokens/_md-comp-radio-button.scss +1 -1
- package/tokens/_md-comp-rich-tooltip.scss +1 -1
- package/tokens/_md-comp-scrim.scss +1 -1
- package/tokens/_md-comp-search-bar.scss +1 -1
- package/tokens/_md-comp-search-view.scss +1 -1
- package/tokens/_md-comp-secondary-navigation-tab.scss +9 -1
- package/tokens/_md-comp-sheet-bottom.scss +1 -1
- package/tokens/_md-comp-sheet-floating.scss +1 -1
- package/tokens/_md-comp-sheet-side.scss +1 -1
- package/tokens/_md-comp-slider.scss +23 -2
- package/tokens/_md-comp-snackbar.scss +1 -1
- package/tokens/_md-comp-standard-menu-button.scss +1 -1
- package/tokens/_md-comp-suggestion-chip.scss +83 -24
- package/tokens/_md-comp-switch.scss +1 -1
- package/tokens/_md-comp-test-table.scss +31 -0
- package/tokens/_md-comp-text-button.scss +70 -19
- package/tokens/_md-comp-time-input.scss +1 -1
- package/tokens/_md-comp-time-picker.scss +1 -1
- package/tokens/_md-comp-top-app-bar-large.scss +1 -1
- package/tokens/_md-comp-top-app-bar-medium.scss +1 -1
- package/tokens/_md-comp-top-app-bar-small-centered.scss +1 -1
- package/tokens/_md-comp-top-app-bar-small.scss +1 -1
- package/tokens/_md-ref-palette.scss +1 -1
- package/tokens/_md-ref-typeface.scss +24 -2
- package/tokens/_md-sys-color.scss +1 -1
- package/tokens/_md-sys-elevation.scss +1 -1
- package/tokens/_md-sys-motion.scss +1 -1
- package/tokens/_md-sys-shape.scss +1 -1
- package/tokens/_md-sys-state.scss +1 -1
- package/tokens/_md-sys-typescale.scss +36 -2
- package/tokens/_values.scss +114 -0
- package/tokens/{v0_161 → v0_172}/_md-comp-assist-chip.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-badge.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-banner.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-bottom-app-bar.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-carousel-item.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-checkbox.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-circular-progress-indicator.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-data-table.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-date-input-modal.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-docked.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-modal.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-dialog.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-divider.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-elevated-button.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-elevated-card.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-branded.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-primary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-secondary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-surface.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-tertiary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-branded-large.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-branded.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary-large.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary-small.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary-large.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary-small.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface-large.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface-small.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary-large.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary-small.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-autocomplete.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-card.scss +3 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-icon-button.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-menu-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-select.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-text-field.scss +3 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-tonal-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-tonal-icon-button.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filter-chip.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-full-screen-dialog.scss +3 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-icon-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-input-chip.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-linear-progress-indicator.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-list.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-menu.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-navigation-bar.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-navigation-drawer.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-navigation-rail.scss +1 -16
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-autocomplete.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-card.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-icon-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-menu-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-segmented-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-select.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-text-field.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-plain-tooltip.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-primary-navigation-tab.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-radio-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-rich-tooltip.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-scrim.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-search-bar.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-search-view.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-secondary-navigation-tab.scss +3 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-sheet-bottom.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-sheet-floating.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-sheet-side.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-slider.scss +3 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-snackbar.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-standard-menu-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-suggestion-chip.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-switch.scss +13 -11
- package/tokens/{v0_161 → v0_172}/_md-comp-text-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-time-input.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-time-picker.scss +5 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-large.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-medium.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-small-centered.scss +3 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-small.scss +3 -3
- package/tokens/{v0_161 → v0_172}/_md-ref-palette.scss +23 -23
- package/tokens/{v0_161 → v0_172}/_md-ref-typeface.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-color.scss +9 -9
- package/tokens/{v0_161 → v0_172}/_md-sys-elevation.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-motion.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-shape.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-state.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-typescale.scss +1 -1
- package/tokens/v0_172/index.test.css.d.ts +1 -0
- package/tokens/v0_172/lib.test.css.d.ts +1 -0
- package/types/aria.d.ts +61 -1
- package/actionelement/action-element.d.ts +0 -79
- package/actionelement/action-element.js +0 -97
- package/actionelement/action-element.js.map +0 -1
- package/button/elevated-link-button.d.ts +0 -36
- package/button/elevated-link-button.js +0 -41
- package/button/elevated-link-button.js.map +0 -1
- package/button/filled-link-button.d.ts +0 -34
- package/button/filled-link-button.js +0 -39
- package/button/filled-link-button.js.map +0 -1
- package/button/lib/elevated-link-button.d.ts +0 -13
- package/button/lib/elevated-link-button.js +0 -21
- package/button/lib/elevated-link-button.js.map +0 -1
- package/button/lib/filled-link-button.d.ts +0 -14
- package/button/lib/filled-link-button.js +0 -22
- package/button/lib/filled-link-button.js.map +0 -1
- package/button/lib/link-button.d.ts +0 -24
- package/button/lib/link-button.js +0 -59
- package/button/lib/link-button.js.map +0 -1
- package/button/lib/outlined-link-button.d.ts +0 -12
- package/button/lib/outlined-link-button.js +0 -20
- package/button/lib/outlined-link-button.js.map +0 -1
- package/button/lib/state.d.ts +0 -10
- package/button/lib/state.js +0 -7
- package/button/lib/state.js.map +0 -1
- package/button/lib/text-link-button.d.ts +0 -10
- package/button/lib/text-link-button.js +0 -16
- package/button/lib/text-link-button.js.map +0 -1
- package/button/lib/tonal-link-button.d.ts +0 -14
- package/button/lib/tonal-link-button.js +0 -22
- package/button/lib/tonal-link-button.js.map +0 -1
- package/button/outlined-link-button.d.ts +0 -36
- package/button/outlined-link-button.js +0 -40
- package/button/outlined-link-button.js.map +0 -1
- package/button/text-link-button.d.ts +0 -34
- package/button/text-link-button.js +0 -38
- package/button/text-link-button.js.map +0 -1
- package/button/tonal-link-button.d.ts +0 -35
- package/button/tonal-link-button.js +0 -40
- package/button/tonal-link-button.js.map +0 -1
- package/controller/action-controller.d.ts +0 -147
- package/controller/action-controller.js +0 -286
- package/controller/action-controller.js.map +0 -1
- package/decorators/aria-property.d.ts +0 -32
- package/decorators/aria-property.js +0 -99
- package/decorators/aria-property.js.map +0 -1
- package/elevation/lib/_md-comp-elevation.scss +0 -27
- package/fab/_fab-extended.scss +0 -6
- package/fab/fab-extended.d.ts +0 -23
- package/fab/fab-extended.js +0 -29
- package/fab/fab-extended.js.map +0 -1
- package/fab/lib/_fab-extended.scss +0 -73
- package/fab/lib/fab-extended-styles.css.js +0 -9
- package/fab/lib/fab-extended-styles.css.js.map +0 -1
- package/fab/lib/fab-extended.d.ts +0 -19
- package/fab/lib/fab-extended.js +0 -28
- package/fab/lib/fab-extended.js.map +0 -1
- package/fab/lib/fab-shared-styles.css.js +0 -9
- package/fab/lib/fab-shared-styles.css.js.map +0 -1
- package/fab/lib/fab-shared.js +0 -121
- package/fab/lib/fab-shared.js.map +0 -1
- package/focus/lib/_md-comp-focus-ring.scss +0 -30
- package/iconbutton/filled-icon-button-toggle.d.ts +0 -31
- package/iconbutton/filled-icon-button-toggle.js +0 -40
- package/iconbutton/filled-icon-button-toggle.js.map +0 -1
- package/iconbutton/filled-link-icon-button.d.ts +0 -31
- package/iconbutton/filled-link-icon-button.js +0 -39
- package/iconbutton/filled-link-icon-button.js.map +0 -1
- package/iconbutton/filled-tonal-icon-button-toggle.d.ts +0 -31
- package/iconbutton/filled-tonal-icon-button-toggle.js +0 -40
- package/iconbutton/filled-tonal-icon-button-toggle.js.map +0 -1
- package/iconbutton/filled-tonal-link-icon-button.d.ts +0 -31
- package/iconbutton/filled-tonal-link-icon-button.js +0 -39
- package/iconbutton/filled-tonal-link-icon-button.js.map +0 -1
- package/iconbutton/lib/icon-button-toggle.d.ts +0 -34
- package/iconbutton/lib/icon-button-toggle.js +0 -87
- package/iconbutton/lib/icon-button-toggle.js.map +0 -1
- package/iconbutton/lib/link-icon-button.d.ts +0 -23
- package/iconbutton/lib/link-icon-button.js +0 -58
- package/iconbutton/lib/link-icon-button.js.map +0 -1
- package/iconbutton/outlined-icon-button-toggle.d.ts +0 -31
- package/iconbutton/outlined-icon-button-toggle.js +0 -39
- package/iconbutton/outlined-icon-button-toggle.js.map +0 -1
- package/iconbutton/outlined-link-icon-button.d.ts +0 -31
- package/iconbutton/outlined-link-icon-button.js +0 -39
- package/iconbutton/outlined-link-icon-button.js.map +0 -1
- package/iconbutton/standard-icon-button-toggle.d.ts +0 -31
- package/iconbutton/standard-icon-button-toggle.js +0 -39
- package/iconbutton/standard-icon-button-toggle.js.map +0 -1
- package/iconbutton/standard-link-icon-button.d.ts +0 -31
- package/iconbutton/standard-link-icon-button.js +0 -39
- package/iconbutton/standard-link-icon-button.js.map +0 -1
- package/slider/lib/_tokens.scss +0 -60
- /package/{fab/lib/fab-extended-styles.css.d.ts → chips/lib/filter-styles.css.d.ts} +0 -0
- /package/{fab/lib/fab-shared-styles.css.d.ts → circularprogress/lib/circular-progress-styles.css.d.ts} +0 -0
- /package/{tokens/v0_161/index.test.css.d.ts → fab/lib/fab-branded-styles.css.d.ts} +0 -0
- /package/{tokens/v0_161/lib.test.css.d.ts → fab/lib/forced-colors-styles.css.d.ts} +0 -0
- /package/tokens/{v0_161 → v0_172}/_index.scss +0 -0
- /package/tokens/{v0_161 → v0_172}/index.test.css.js +0 -0
- /package/tokens/{v0_161 → v0_172}/index.test.css.js.map +0 -0
- /package/tokens/{v0_161 → v0_172}/index.test.scss +0 -0
- /package/tokens/{v0_161 → v0_172}/lib.test.css.js +0 -0
- /package/tokens/{v0_161 → v0_172}/lib.test.css.js.map +0 -0
- /package/tokens/{v0_161 → v0_172}/lib.test.scss +0 -0
|
@@ -3,37 +3,36 @@
|
|
|
3
3
|
* Copyright 2021 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
|
-
import {
|
|
6
|
+
var _a;
|
|
7
|
+
import { __decorate } from "tslib";
|
|
8
|
+
import { html, LitElement, nothing } from 'lit';
|
|
8
9
|
import { property } from 'lit/decorators.js';
|
|
9
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
|
|
12
|
+
/**
|
|
13
|
+
* TODO(b/265346501): add docs
|
|
14
|
+
*/
|
|
13
15
|
export class NavigationDrawerModal extends LitElement {
|
|
14
16
|
constructor() {
|
|
15
17
|
super(...arguments);
|
|
16
|
-
// tslint:disable-next-line:no-new-decorators
|
|
17
|
-
this.ariaModal = 'false';
|
|
18
18
|
this.opened = false;
|
|
19
19
|
this.pivot = 'end';
|
|
20
20
|
}
|
|
21
|
-
/** @soyTemplate */
|
|
22
21
|
render() {
|
|
23
22
|
const ariaExpanded = this.opened ? 'true' : 'false';
|
|
24
23
|
const ariaHidden = !this.opened ? 'true' : 'false';
|
|
24
|
+
// Needed for closure conformance
|
|
25
|
+
const { ariaLabel, ariaModal } = this;
|
|
25
26
|
return html `
|
|
26
27
|
<div
|
|
27
28
|
class="md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}"
|
|
28
29
|
@click="${this.handleScrimClick}">
|
|
29
30
|
</div>
|
|
30
31
|
<div
|
|
31
|
-
aria-
|
|
32
|
-
aria-
|
|
33
|
-
aria-
|
|
34
|
-
aria-
|
|
35
|
-
aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
|
|
36
|
-
aria-modal="${this.ariaModal}"
|
|
32
|
+
aria-expanded=${ariaExpanded}
|
|
33
|
+
aria-hidden=${ariaHidden}
|
|
34
|
+
aria-label=${ariaLabel || nothing}
|
|
35
|
+
aria-modal=${ariaModal || nothing}
|
|
37
36
|
class="md3-navigation-drawer-modal ${this.getRenderClasses()}"
|
|
38
37
|
@keydown="${this.handleKeyDown}"
|
|
39
38
|
role="dialog"><div class="md3-elevation-overlay"
|
|
@@ -44,13 +43,11 @@ export class NavigationDrawerModal extends LitElement {
|
|
|
44
43
|
</div>
|
|
45
44
|
`;
|
|
46
45
|
}
|
|
47
|
-
/** @soyTemplate classMap */
|
|
48
46
|
getScrimClasses() {
|
|
49
47
|
return classMap({
|
|
50
48
|
'md3-navigation-drawer-modal--scrim-visible': this.opened,
|
|
51
49
|
});
|
|
52
50
|
}
|
|
53
|
-
/** @soyTemplate classMap */
|
|
54
51
|
getRenderClasses() {
|
|
55
52
|
return classMap({
|
|
56
53
|
'md3-navigation-drawer-modal--opened': this.opened,
|
|
@@ -73,33 +70,14 @@ export class NavigationDrawerModal extends LitElement {
|
|
|
73
70
|
this.opened = !this.opened;
|
|
74
71
|
}
|
|
75
72
|
}
|
|
73
|
+
_a = NavigationDrawerModal;
|
|
74
|
+
(() => {
|
|
75
|
+
requestUpdateOnAriaChange(_a);
|
|
76
|
+
})();
|
|
76
77
|
__decorate([
|
|
77
|
-
|
|
78
|
-
property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
|
|
79
|
-
__metadata("design:type", String)
|
|
80
|
-
], NavigationDrawerModal.prototype, "ariaDescribedBy", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
ariaProperty,
|
|
83
|
-
property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
|
|
84
|
-
__metadata("design:type", String)
|
|
85
|
-
], NavigationDrawerModal.prototype, "ariaLabel", void 0);
|
|
86
|
-
__decorate([
|
|
87
|
-
ariaProperty,
|
|
88
|
-
property({ attribute: 'data-aria-modal', type: String, noAccessor: true }),
|
|
89
|
-
__metadata("design:type", String)
|
|
90
|
-
], NavigationDrawerModal.prototype, "ariaModal", void 0);
|
|
91
|
-
__decorate([
|
|
92
|
-
ariaProperty,
|
|
93
|
-
property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
|
|
94
|
-
__metadata("design:type", String)
|
|
95
|
-
], NavigationDrawerModal.prototype, "ariaLabelledBy", void 0);
|
|
96
|
-
__decorate([
|
|
97
|
-
property({ type: Boolean }) // tslint:disable-next-line:no-new-decorators
|
|
98
|
-
,
|
|
99
|
-
__metadata("design:type", Object)
|
|
78
|
+
property({ type: Boolean })
|
|
100
79
|
], NavigationDrawerModal.prototype, "opened", void 0);
|
|
101
80
|
__decorate([
|
|
102
|
-
property(
|
|
103
|
-
__metadata("design:type", String)
|
|
81
|
+
property()
|
|
104
82
|
], NavigationDrawerModal.prototype, "pivot", void 0);
|
|
105
83
|
//# sourceMappingURL=navigation-drawer-modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG
|
|
1
|
+
{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAGjE;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAkB,KAAK,CAAC;IA6D3C,CAAC;IA3DU,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;oDAEqC,IAAI,CAAC,eAAe,EAAE;kBACxD,IAAI,CAAC,gBAAgB;;;wBAGf,YAAY;sBACd,UAAU;qBACX,SAAS,IAAI,OAAO;qBACpB,SAAS,IAAI,OAAO;6CACI,IAAI,CAAC,gBAAgB,EAAE;oBAChD,IAAI,CAAC,aAAa;;;;;;;KAOjC,CAAC;IACJ,CAAC;IAES,eAAe;QACvB,OAAO,QAAQ,CAAC;YACd,4CAA4C,EAAE,IAAI,CAAC,MAAM;SAC1D,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB;QACxB,OAAO,QAAQ,CAAC;YACd,qCAAqC,EAAE,IAAI,CAAC,MAAM;YAClD,6CAA6C,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SACtE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBACyC;QAClE,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;YACvE,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,aAAa,CAAC,CAAgB;QACpC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;;AAlEC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;qDAAgB;AAC9B;IAAX,QAAQ,EAAE;oDAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationDrawerModal extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n @property({type: Boolean}) opened = false;\n @property() pivot: 'start'|'end' = 'end';\n\n override render() {\n const ariaExpanded = this.opened ? 'true' : 'false';\n const ariaHidden = !this.opened ? 'true' : 'false';\n // Needed for closure conformance\n const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n return html`\n <div\n class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n @click=\"${this.handleScrimClick}\">\n </div>\n <div\n aria-expanded=${ariaExpanded}\n aria-hidden=${ariaHidden}\n aria-label=${ariaLabel || nothing}\n aria-modal=${ariaModal || nothing}\n class=\"md3-navigation-drawer-modal ${this.getRenderClasses()}\"\n @keydown=\"${this.handleKeyDown}\"\n role=\"dialog\"><div class=\"md3-elevation-overlay\"\n ></div>\n <div class=\"md3-navigation-drawer-modal__slot-content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n protected getScrimClasses() {\n return classMap({\n 'md3-navigation-drawer-modal--scrim-visible': this.opened,\n });\n }\n\n protected getRenderClasses() {\n return classMap({\n 'md3-navigation-drawer-modal--opened': this.opened,\n 'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n });\n }\n\n protected override updated(changedProperties:\n PropertyValues<NavigationDrawerModal>) {\n if (changedProperties.has('opened')) {\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent(\n 'navigation-drawer-changed',\n {detail: {opened: this.opened}, bubbles: true, composed: true}));\n }, 250);\n }\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n if (e.code === 'Escape') {\n this.opened = false;\n }\n }\n\n private handleScrimClick() {\n this.opened = !this.opened;\n }\n}\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, 0));--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, 0));--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, 0));--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, 0));--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level:var(--_standard-container-elevation);--md-elevation-shadow-color:var(--_divider-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=navigation-drawer-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-styles.css.js","sourceRoot":"","sources":["navigation-drawer-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-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, 0));--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, 0));--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-
|
|
1
|
+
{"version":3,"file":"navigation-drawer-styles.css.js","sourceRoot":"","sources":["navigation-drawer-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-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, 0));--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, 0));--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level:var(--_standard-container-elevation);--md-elevation-shadow-color:var(--_divider-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */\n`;\n "]}
|
|
@@ -4,18 +4,14 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import '../../elevation/elevation.js';
|
|
7
|
-
import { LitElement, PropertyValues
|
|
8
|
-
/**
|
|
7
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
8
|
+
/**
|
|
9
|
+
* TODO(b/265346501): add docs
|
|
10
|
+
*/
|
|
9
11
|
export declare class NavigationDrawer extends LitElement {
|
|
10
|
-
ariaDescribedBy: string | undefined;
|
|
11
|
-
ariaLabel: string;
|
|
12
|
-
ariaModal: 'true' | 'false';
|
|
13
|
-
ariaLabelledBy: string | undefined;
|
|
14
12
|
opened: boolean;
|
|
15
13
|
pivot: 'start' | 'end';
|
|
16
|
-
|
|
17
|
-
render(): TemplateResult;
|
|
18
|
-
/** @soyTemplate classMap */
|
|
14
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
19
15
|
protected getRenderClasses(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
|
|
20
16
|
protected updated(changedProperties: PropertyValues<NavigationDrawer>): void;
|
|
21
17
|
}
|
|
@@ -3,44 +3,42 @@
|
|
|
3
3
|
* Copyright 2021 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
|
|
6
|
+
var _a;
|
|
7
|
+
import { __decorate } from "tslib";
|
|
7
8
|
import '../../elevation/elevation.js';
|
|
8
|
-
import { html, LitElement } from 'lit';
|
|
9
|
+
import { html, LitElement, nothing } from 'lit';
|
|
9
10
|
import { property } from 'lit/decorators.js';
|
|
10
11
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
|
|
13
|
+
/**
|
|
14
|
+
* TODO(b/265346501): add docs
|
|
15
|
+
*/
|
|
14
16
|
export class NavigationDrawer extends LitElement {
|
|
15
17
|
constructor() {
|
|
16
18
|
super(...arguments);
|
|
17
|
-
// tslint:disable-next-line:no-new-decorators
|
|
18
|
-
this.ariaModal = 'false';
|
|
19
19
|
this.opened = false;
|
|
20
20
|
this.pivot = 'end';
|
|
21
21
|
}
|
|
22
|
-
/** @soyTemplate */
|
|
23
22
|
render() {
|
|
24
23
|
const ariaExpanded = this.opened ? 'true' : 'false';
|
|
25
24
|
const ariaHidden = !this.opened ? 'true' : 'false';
|
|
25
|
+
// Needed for closure conformance
|
|
26
|
+
const { ariaLabel, ariaModal } = this;
|
|
26
27
|
return html `
|
|
27
28
|
<div
|
|
28
|
-
aria-describedby="${ifDefined(this.ariaDescribedBy)}"
|
|
29
29
|
aria-expanded="${ariaExpanded}"
|
|
30
30
|
aria-hidden="${ariaHidden}"
|
|
31
|
-
aria-label
|
|
32
|
-
aria-
|
|
33
|
-
aria-modal="${this.ariaModal}"
|
|
31
|
+
aria-label=${ariaLabel || nothing}
|
|
32
|
+
aria-modal="${ariaModal || nothing}"
|
|
34
33
|
class="md3-navigation-drawer ${this.getRenderClasses()}"
|
|
35
34
|
role="dialog">
|
|
36
|
-
<md-elevation
|
|
35
|
+
<md-elevation></md-elevation>
|
|
37
36
|
<div class="md3-navigation-drawer__slot-content">
|
|
38
37
|
<slot></slot>
|
|
39
38
|
</div>
|
|
40
39
|
</div>
|
|
41
40
|
`;
|
|
42
41
|
}
|
|
43
|
-
/** @soyTemplate classMap */
|
|
44
42
|
getRenderClasses() {
|
|
45
43
|
return classMap({
|
|
46
44
|
'md3-navigation-drawer--opened': this.opened,
|
|
@@ -55,33 +53,14 @@ export class NavigationDrawer extends LitElement {
|
|
|
55
53
|
}
|
|
56
54
|
}
|
|
57
55
|
}
|
|
56
|
+
_a = NavigationDrawer;
|
|
57
|
+
(() => {
|
|
58
|
+
requestUpdateOnAriaChange(_a);
|
|
59
|
+
})();
|
|
58
60
|
__decorate([
|
|
59
|
-
|
|
60
|
-
property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
|
|
61
|
-
__metadata("design:type", String)
|
|
62
|
-
], NavigationDrawer.prototype, "ariaDescribedBy", void 0);
|
|
63
|
-
__decorate([
|
|
64
|
-
ariaProperty,
|
|
65
|
-
property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
|
|
66
|
-
__metadata("design:type", String)
|
|
67
|
-
], NavigationDrawer.prototype, "ariaLabel", void 0);
|
|
68
|
-
__decorate([
|
|
69
|
-
ariaProperty,
|
|
70
|
-
property({ attribute: 'data-aria-modal', type: String, noAccessor: true }),
|
|
71
|
-
__metadata("design:type", String)
|
|
72
|
-
], NavigationDrawer.prototype, "ariaModal", void 0);
|
|
73
|
-
__decorate([
|
|
74
|
-
ariaProperty,
|
|
75
|
-
property({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
|
|
76
|
-
__metadata("design:type", String)
|
|
77
|
-
], NavigationDrawer.prototype, "ariaLabelledBy", void 0);
|
|
78
|
-
__decorate([
|
|
79
|
-
property({ type: Boolean }) // tslint:disable-next-line:no-new-decorators
|
|
80
|
-
,
|
|
81
|
-
__metadata("design:type", Object)
|
|
61
|
+
property({ type: Boolean })
|
|
82
62
|
], NavigationDrawer.prototype, "opened", void 0);
|
|
83
63
|
__decorate([
|
|
84
|
-
property(
|
|
85
|
-
__metadata("design:type", String)
|
|
64
|
+
property()
|
|
86
65
|
], NavigationDrawer.prototype, "pivot", void 0);
|
|
87
66
|
//# sourceMappingURL=navigation-drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG
|
|
1
|
+
{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAGjE;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAkB,KAAK,CAAC;IAwC3C,CAAC;IAtCU,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;yBAEU,YAAY;uBACd,UAAU;qBACZ,SAAS,IAAI,OAAO;sBACnB,SAAS,IAAI,OAAO;uCACH,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO,QAAQ,CAAC;YACd,+BAA+B,EAAE,IAAI,CAAC,MAAM;YAC5C,uCAAuC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SAChE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBACoC;QAC7D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;YACvE,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;;AA7CC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAgB;AAC9B;IAAX,QAAQ,EAAE;+CAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationDrawer extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n @property({type: Boolean}) opened = false;\n @property() pivot: 'start'|'end' = 'end';\n\n override render() {\n const ariaExpanded = this.opened ? 'true' : 'false';\n const ariaHidden = !this.opened ? 'true' : 'false';\n // Needed for closure conformance\n const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n return html`\n <div\n aria-expanded=\"${ariaExpanded}\"\n aria-hidden=\"${ariaHidden}\"\n aria-label=${ariaLabel || nothing}\n aria-modal=\"${ariaModal || nothing}\"\n class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n role=\"dialog\">\n <md-elevation></md-elevation>\n <div class=\"md3-navigation-drawer__slot-content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n protected getRenderClasses() {\n return classMap({\n 'md3-navigation-drawer--opened': this.opened,\n 'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',\n });\n }\n\n protected override updated(changedProperties:\n PropertyValues<NavigationDrawer>) {\n if (changedProperties.has('opened')) {\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent(\n 'navigation-drawer-changed',\n {detail: {opened: this.opened}, bubbles: true, composed: true}));\n }, 250);\n }\n }\n}\n"]}
|
|
@@ -9,7 +9,6 @@ import { NavigationDrawerModal } from './lib/navigation-drawer-modal.js';
|
|
|
9
9
|
import { styles } from './lib/navigation-drawer-modal-styles.css.js';
|
|
10
10
|
import { styles as sharedStyles } from './lib/shared-styles.css.js';
|
|
11
11
|
/**
|
|
12
|
-
* @soyCompatible
|
|
13
12
|
* @final
|
|
14
13
|
* @suppress {visibility}
|
|
15
14
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE
|
|
1
|
+
{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;GAGG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,qBAAqB;;AACvC,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAD9C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAEnC;SAFY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawerModal} from './lib/navigation-drawer-modal.js';\nimport {styles} from './lib/navigation-drawer-modal-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-navigation-drawer-modal': MdNavigationDrawerModal;\n }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer-modal')\nexport class MdNavigationDrawerModal extends NavigationDrawerModal {\n static override readonly styles = [sharedStyles, styles];\n}\n"]}
|
|
@@ -9,7 +9,6 @@ import { NavigationDrawer } from './lib/navigation-drawer.js';
|
|
|
9
9
|
import { styles } from './lib/navigation-drawer-styles.css.js';
|
|
10
10
|
import { styles as sharedStyles } from './lib/shared-styles.css.js';
|
|
11
11
|
/**
|
|
12
|
-
* @soyCompatible
|
|
13
12
|
* @final
|
|
14
13
|
* @suppress {visibility}
|
|
15
14
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE
|
|
1
|
+
{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;GAGG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AAC7B,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAD9C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawer} from './lib/navigation-drawer.js';\nimport {styles} from './lib/navigation-drawer-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-navigation-drawer': MdNavigationDrawer;\n }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends NavigationDrawer {\n static override readonly styles = [sharedStyles, styles];\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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #
|
|
7
|
+
export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 8px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 8px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 8px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 8px);--md-focus-ring-offset:-2px;display:flex;flex-grow:1}.md3-navigation-tab{align-items:center;appearance:none;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:48px;min-width:48px;outline:none;padding:8px 0px 12px;position:relative;text-align:center;width:100%;font:var(--_label-text-type)}.md3-navigation-tab::-moz-focus-inner{border:0;padding:0}.md3-navigation-tab__icon-content{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative;z-index:1}.md3-navigation-tab__label-text{height:16px;margin-top:4px;opacity:1;transition:opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),height 100ms cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{height:0;opacity:0}.md3-navigation-tab__active-indicator{display:flex;justify-content:center;opacity:0;position:absolute;transition:width 100ms cubic-bezier(0.4, 0, 0.2, 1),opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);width:32px;background-color:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator{opacity:1}.md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{height:var(--_active-indicator-height)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{width:var(--_active-indicator-width)}.md3-navigation-tab__icon{fill:currentColor;align-self:center;display:inline-block;position:relative;width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}.md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:inline-block}.md3-navigation-tab__ripple{z-index:0}.md3-navigation-tab--active{--md-ripple-hover-color:var(--_active-hover-state-layer-color);--md-ripple-focus-color:var(--_active-focus-state-layer-color);--md-ripple-pressed-color:var(--_active-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)}.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--_active-icon-color)}.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--_active-label-text-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__icon{color:var(--_active-hover-icon-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__label-text{color:var(--_active-hover-label-text-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__icon{color:var(--_active-focus-icon-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__label-text{color:var(--_active-focus-label-text-color)}.md3-navigation-tab--active:active .md3-navigation-tab__icon{color:var(--_active-pressed-icon-color)}.md3-navigation-tab--active:active .md3-navigation-tab__label-text{color:var(--_active-pressed-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active){--md-ripple-hover-color:var(--_inactive-hover-state-layer-color);--md-ripple-focus-color:var(--_inactive-focus-state-layer-color);--md-ripple-pressed-color:var(--_inactive-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)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--_inactive-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--_inactive-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__icon{color:var(--_inactive-hover-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__label-text{color:var(--_inactive-hover-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__icon{color:var(--_inactive-focus-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__label-text{color:var(--_inactive-focus-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__icon{color:var(--_inactive-pressed-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__label-text{color:var(--_inactive-pressed-label-text-color)}/*# sourceMappingURL=navigation-tab-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=navigation-tab-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-tab-styles.css.js","sourceRoot":"","sources":["navigation-tab-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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #
|
|
1
|
+
{"version":3,"file":"navigation-tab-styles.css.js","sourceRoot":"","sources":["navigation-tab-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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 8px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 8px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 8px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 8px);--md-focus-ring-offset:-2px;display:flex;flex-grow:1}.md3-navigation-tab{align-items:center;appearance:none;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:48px;min-width:48px;outline:none;padding:8px 0px 12px;position:relative;text-align:center;width:100%;font:var(--_label-text-type)}.md3-navigation-tab::-moz-focus-inner{border:0;padding:0}.md3-navigation-tab__icon-content{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative;z-index:1}.md3-navigation-tab__label-text{height:16px;margin-top:4px;opacity:1;transition:opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),height 100ms cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{height:0;opacity:0}.md3-navigation-tab__active-indicator{display:flex;justify-content:center;opacity:0;position:absolute;transition:width 100ms cubic-bezier(0.4, 0, 0.2, 1),opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);width:32px;background-color:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator{opacity:1}.md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{height:var(--_active-indicator-height)}.md3-navigation-tab--active .md3-navigation-tab__active-indicator,.md3-navigation-tab__icon-content{width:var(--_active-indicator-width)}.md3-navigation-tab__icon{fill:currentColor;align-self:center;display:inline-block;position:relative;width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}.md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon{display:none}.md3-navigation-tab--active .md3-navigation-tab__icon.md3-navigation-tab__icon--active{display:inline-block}.md3-navigation-tab__ripple{z-index:0}.md3-navigation-tab--active{--md-ripple-hover-color:var(--_active-hover-state-layer-color);--md-ripple-focus-color:var(--_active-focus-state-layer-color);--md-ripple-pressed-color:var(--_active-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)}.md3-navigation-tab--active .md3-navigation-tab__icon{color:var(--_active-icon-color)}.md3-navigation-tab--active .md3-navigation-tab__label-text{color:var(--_active-label-text-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__icon{color:var(--_active-hover-icon-color)}.md3-navigation-tab--active:hover .md3-navigation-tab__label-text{color:var(--_active-hover-label-text-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__icon{color:var(--_active-focus-icon-color)}.md3-navigation-tab--active:focus .md3-navigation-tab__label-text{color:var(--_active-focus-label-text-color)}.md3-navigation-tab--active:active .md3-navigation-tab__icon{color:var(--_active-pressed-icon-color)}.md3-navigation-tab--active:active .md3-navigation-tab__label-text{color:var(--_active-pressed-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active){--md-ripple-hover-color:var(--_inactive-hover-state-layer-color);--md-ripple-focus-color:var(--_inactive-focus-state-layer-color);--md-ripple-pressed-color:var(--_inactive-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)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__icon{color:var(--_inactive-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active) .md3-navigation-tab__label-text{color:var(--_inactive-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__icon{color:var(--_inactive-hover-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):hover .md3-navigation-tab__label-text{color:var(--_inactive-hover-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__icon{color:var(--_inactive-focus-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):focus .md3-navigation-tab__label-text{color:var(--_inactive-focus-label-text-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__icon{color:var(--_inactive-pressed-icon-color)}.md3-navigation-tab:not(.md3-navigation-tab--active):active .md3-navigation-tab__label-text{color:var(--_inactive-pressed-label-text-color)}/*# sourceMappingURL=navigation-tab-styles.css.map */\n`;\n "]}
|
|
@@ -5,13 +5,14 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '../../badge/badge.js';
|
|
7
7
|
import '../../focus/focus-ring.js';
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import { ActionElement, BeginPressConfig, EndPressConfig } from '../../actionelement/action-element.js';
|
|
8
|
+
import '../../ripple/ripple.js';
|
|
9
|
+
import { LitElement, nothing, PropertyValues } from 'lit';
|
|
11
10
|
import { MdRipple } from '../../ripple/ripple.js';
|
|
12
11
|
import { NavigationTabState } from './state.js';
|
|
13
|
-
/**
|
|
14
|
-
|
|
12
|
+
/**
|
|
13
|
+
* TODO(b/265346501): add docs
|
|
14
|
+
*/
|
|
15
|
+
export declare class NavigationTab extends LitElement implements NavigationTabState {
|
|
15
16
|
disabled: boolean;
|
|
16
17
|
active: boolean;
|
|
17
18
|
hideInactiveLabel: boolean;
|
|
@@ -19,30 +20,24 @@ export declare class NavigationTab extends ActionElement implements NavigationTa
|
|
|
19
20
|
badgeValue: string;
|
|
20
21
|
showBadge: boolean;
|
|
21
22
|
protected showFocusRing: boolean;
|
|
22
|
-
|
|
23
|
+
protected showRipple: boolean;
|
|
23
24
|
buttonElement: HTMLElement;
|
|
24
|
-
ripple: MdRipple
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
protected renderFocusRing(): TemplateResult
|
|
31
|
-
|
|
32
|
-
protected renderRipple()
|
|
33
|
-
|
|
34
|
-
protected
|
|
35
|
-
/** @soyTemplate */
|
|
36
|
-
protected renderLabel(): TemplateResult | '';
|
|
25
|
+
ripple: Promise<MdRipple | null>;
|
|
26
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
27
|
+
protected getRenderClasses(): {
|
|
28
|
+
'md3-navigation-tab--hide-inactive-label': boolean;
|
|
29
|
+
'md3-navigation-tab--active': boolean;
|
|
30
|
+
};
|
|
31
|
+
protected renderFocusRing(): import("lit-html").TemplateResult<1>;
|
|
32
|
+
protected getRipple: () => Promise<MdRipple>;
|
|
33
|
+
protected renderRipple: () => import("lit-html").TemplateResult<1>;
|
|
34
|
+
protected renderBadge(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
35
|
+
protected renderLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
37
36
|
firstUpdated(changedProperties: PropertyValues): void;
|
|
38
37
|
focus(): void;
|
|
39
38
|
blur(): void;
|
|
40
|
-
|
|
41
|
-
endPress(options: EndPressConfig): void;
|
|
39
|
+
handleClick(): void;
|
|
42
40
|
handlePointerDown(e: PointerEvent): void;
|
|
43
|
-
handlePointerUp(e: PointerEvent): void;
|
|
44
|
-
protected handlePointerEnter(e: PointerEvent): void;
|
|
45
|
-
handlePointerLeave(e: PointerEvent): void;
|
|
46
41
|
protected handleFocus(): void;
|
|
47
42
|
protected handleBlur(): void;
|
|
48
43
|
}
|