@material/web 1.0.0-pre.14 → 1.0.0-pre.16
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 +24 -19
- package/all.d.ts +4 -8
- package/all.js +4 -8
- package/all.js.map +1 -1
- package/button/{_tonal-button.scss → _filled-tonal-button.scss} +1 -1
- package/button/{tonal-button.d.ts → filled-tonal-button.d.ts} +3 -3
- package/button/{tonal-button.js → filled-tonal-button.js} +9 -9
- package/button/filled-tonal-button.js.map +1 -0
- package/button/internal/_filled-button.scss +0 -1
- package/button/internal/{_tonal-button.scss → _filled-tonal-button.scss} +7 -7
- package/button/internal/_outlined-button.scss +6 -0
- package/button/internal/_shared.scss +19 -8
- package/button/internal/_touch-target.scss +5 -1
- package/button/internal/button.d.ts +19 -22
- package/button/internal/button.js +48 -79
- package/button/internal/button.js.map +1 -1
- package/button/internal/elevated-styles.css.js +1 -1
- package/button/internal/elevated-styles.css.js.map +1 -1
- package/button/internal/filled-styles.css.js +1 -1
- package/button/internal/filled-styles.css.js.map +1 -1
- package/button/internal/{tonal-button.d.ts → filled-tonal-button.d.ts} +2 -2
- package/button/internal/{tonal-button.js → filled-tonal-button.js} +3 -3
- package/button/internal/filled-tonal-button.js.map +1 -0
- package/button/internal/filled-tonal-styles.css.js +9 -0
- package/button/internal/filled-tonal-styles.css.js.map +1 -0
- package/button/internal/{tonal-styles.scss → filled-tonal-styles.scss} +2 -2
- package/button/internal/outlined-styles.css.js +1 -1
- package/button/internal/outlined-styles.css.js.map +1 -1
- package/button/internal/shared-elevation-styles.css.js +1 -1
- package/button/internal/shared-elevation-styles.css.js.map +1 -1
- package/button/internal/shared-styles.css.js +1 -1
- package/button/internal/shared-styles.css.js.map +1 -1
- package/button/internal/text-styles.css.js +1 -1
- package/button/internal/text-styles.css.js.map +1 -1
- package/checkbox/internal/_checkbox.scss +23 -78
- package/checkbox/internal/checkbox-styles.css.js +1 -1
- package/checkbox/internal/checkbox-styles.css.js.map +1 -1
- package/checkbox/internal/checkbox.d.ts +78 -7
- package/checkbox/internal/checkbox.js +136 -23
- package/checkbox/internal/checkbox.js.map +1 -1
- package/chips/assist-chip.js +1 -2
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.js +1 -3
- package/chips/filter-chip.js.map +1 -1
- package/chips/input-chip.js +1 -5
- package/chips/input-chip.js.map +1 -1
- package/chips/internal/_assist-chip.scss +6 -0
- package/chips/internal/_elevated.scss +1 -1
- package/chips/internal/_filter-chip.scss +6 -0
- package/chips/internal/_input-chip.scss +32 -0
- package/chips/internal/_selectable.scss +17 -13
- package/chips/internal/_shared.scss +25 -10
- package/chips/internal/_suggestion-chip.scss +6 -0
- package/chips/internal/_trailing-icon.scss +24 -24
- package/chips/internal/assist-styles.css.js +1 -1
- package/chips/internal/assist-styles.css.js.map +1 -1
- package/chips/internal/chip-set.js +1 -3
- package/chips/internal/chip-set.js.map +1 -1
- package/chips/internal/chip.js +1 -3
- package/chips/internal/chip.js.map +1 -1
- package/chips/internal/elevated-styles.css.js +1 -1
- package/chips/internal/elevated-styles.css.js.map +1 -1
- package/chips/internal/filter-chip.d.ts +1 -0
- package/chips/internal/filter-chip.js +12 -6
- package/chips/internal/filter-chip.js.map +1 -1
- package/chips/internal/filter-styles.css.js +1 -1
- package/chips/internal/filter-styles.css.js.map +1 -1
- package/chips/internal/input-styles.css.js +1 -1
- package/chips/internal/input-styles.css.js.map +1 -1
- package/chips/internal/selectable-styles.css.js +1 -1
- package/chips/internal/selectable-styles.css.js.map +1 -1
- package/chips/internal/shared-styles.css.js +1 -1
- package/chips/internal/shared-styles.css.js.map +1 -1
- package/chips/internal/suggestion-styles.css.js +1 -1
- package/chips/internal/suggestion-styles.css.js.map +1 -1
- package/chips/internal/trailing-icon-styles.css.js +1 -1
- package/chips/internal/trailing-icon-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +1 -2
- package/chips/suggestion-chip.js.map +1 -1
- package/common.d.ts +2 -6
- package/common.js +2 -6
- package/common.js.map +1 -1
- package/dialog/harness.d.ts +1 -6
- package/dialog/harness.js +2 -43
- package/dialog/harness.js.map +1 -1
- package/dialog/internal/_dialog.scss +165 -281
- package/dialog/internal/animations.d.ts +47 -0
- package/dialog/internal/animations.js +117 -0
- package/dialog/internal/animations.js.map +1 -0
- package/dialog/internal/dialog-styles.css.js +1 -1
- package/dialog/internal/dialog-styles.css.js.map +1 -1
- package/dialog/internal/dialog.d.ts +76 -169
- package/dialog/internal/dialog.js +251 -475
- package/dialog/internal/dialog.js.map +1 -1
- package/elevation/internal/_elevation.scss +14 -7
- package/elevation/internal/elevation-styles.css.js +1 -1
- package/elevation/internal/elevation-styles.css.js.map +1 -1
- package/fab/branded-fab.d.ts +0 -1
- package/fab/internal/_fab.scss +15 -10
- package/fab/internal/_shared.scss +16 -1
- package/fab/internal/fab-styles.css.js +1 -1
- package/fab/internal/fab-styles.css.js.map +1 -1
- package/fab/internal/fab.d.ts +0 -1
- package/fab/internal/shared-styles.css.js +1 -1
- package/fab/internal/shared-styles.css.js.map +1 -1
- package/fab/internal/shared.d.ts +0 -13
- package/fab/internal/shared.js +5 -31
- package/fab/internal/shared.js.map +1 -1
- package/field/internal/filled-styles.css.js +1 -1
- package/field/internal/filled-styles.css.js.map +1 -1
- package/field/internal/outlined-styles.css.js +1 -1
- package/field/internal/outlined-styles.css.js.map +1 -1
- package/focus/internal/_focus-ring.scss +52 -48
- package/focus/internal/focus-ring-styles.css.js +1 -1
- package/focus/internal/focus-ring-styles.css.js.map +1 -1
- package/focus/internal/focus-ring.d.ts +2 -1
- package/focus/internal/focus-ring.js +10 -0
- package/focus/internal/focus-ring.js.map +1 -1
- package/icon/internal/_icon.scss +26 -20
- package/icon/internal/icon-styles.css.js +1 -1
- package/icon/internal/icon-styles.css.js.map +1 -1
- package/icon/internal/icon.d.ts +1 -0
- package/icon/internal/icon.js +9 -0
- package/icon/internal/icon.js.map +1 -1
- package/iconbutton/{_standard-icon-button.scss → _icon-button.scss} +1 -1
- package/iconbutton/{standard-icon-button.d.ts → icon-button.d.ts} +2 -2
- package/iconbutton/{standard-icon-button.js → icon-button.js} +7 -7
- package/iconbutton/icon-button.js.map +1 -0
- package/iconbutton/internal/_filled-icon-button.scss +8 -6
- package/iconbutton/internal/_filled-tonal-icon-button.scss +8 -6
- package/iconbutton/internal/{_standard-icon-button.scss → _icon-button.scss} +12 -8
- package/iconbutton/internal/_outlined-icon-button.scss +14 -14
- package/iconbutton/internal/_shared.scss +15 -9
- package/iconbutton/internal/filled-styles.css.js +1 -1
- package/iconbutton/internal/filled-styles.css.js.map +1 -1
- package/iconbutton/internal/filled-tonal-styles.css.js +1 -1
- package/iconbutton/internal/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/internal/icon-button.d.ts +25 -3
- package/iconbutton/internal/icon-button.js +45 -6
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/iconbutton/internal/outlined-styles.css.js +1 -1
- package/iconbutton/internal/outlined-styles.css.js.map +1 -1
- package/iconbutton/internal/shared-styles.css.js +1 -1
- package/iconbutton/internal/shared-styles.css.js.map +1 -1
- package/iconbutton/internal/standard-styles.css.js +1 -1
- package/iconbutton/internal/standard-styles.css.js.map +1 -1
- package/iconbutton/internal/standard-styles.scss +2 -2
- package/internal/aria/delegate.d.ts +1 -1
- package/internal/aria/delegate.js +1 -1
- package/internal/aria/delegate.js.map +1 -1
- package/internal/controller/element-internals.d.ts +35 -0
- package/internal/controller/element-internals.js +24 -0
- package/internal/controller/element-internals.js.map +1 -0
- package/internal/controller/form-submitter.d.ts +72 -0
- package/internal/controller/form-submitter.js +71 -0
- package/internal/controller/form-submitter.js.map +1 -0
- package/labs/badge/internal/_badge.scss +11 -8
- package/labs/navigationbar/internal/_navigation-bar.scss +11 -9
- package/labs/navigationbar/internal/navigation-bar-styles.css.js +1 -1
- package/labs/navigationbar/internal/navigation-bar-styles.css.js.map +1 -1
- package/labs/navigationbar/internal/navigation-bar.js +1 -3
- package/labs/navigationbar/internal/navigation-bar.js.map +1 -1
- package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss +11 -8
- package/labs/navigationdrawer/internal/_navigation-drawer.scss +11 -8
- package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js +1 -3
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer.js +1 -3
- package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -1
- package/labs/navigationtab/internal/_navigation-tab.scss +10 -10
- package/labs/navigationtab/internal/navigation-tab.js +1 -3
- package/labs/navigationtab/internal/navigation-tab.js.map +1 -1
- package/labs/segmentedbutton/internal/_outlined-segmented-button.scss +1 -3
- package/labs/segmentedbutton/internal/outlined-styles.css.js +1 -1
- package/labs/segmentedbutton/internal/outlined-styles.css.js.map +1 -1
- package/labs/segmentedbutton/internal/segmented-button.js +1 -3
- package/labs/segmentedbutton/internal/segmented-button.js.map +1 -1
- package/labs/segmentedbuttonset/internal/outlined-styles.css.js +1 -1
- package/labs/segmentedbuttonset/internal/outlined-styles.css.js.map +1 -1
- package/labs/segmentedbuttonset/internal/segmented-button-set.js +1 -3
- package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -1
- package/list/internal/_list.scss +6 -2
- package/list/internal/list-styles.css.js +1 -1
- package/list/internal/list-styles.css.js.map +1 -1
- package/list/internal/list.d.ts +2 -2
- package/list/internal/list.js +1 -3
- package/list/internal/list.js.map +1 -1
- package/list/internal/listitem/_list-item.scss +87 -131
- package/list/internal/listitem/forced-colors-styles.css.js +1 -1
- package/list/internal/listitem/forced-colors-styles.css.js.map +1 -1
- package/list/internal/listitem/forced-colors-styles.scss +6 -6
- package/list/internal/listitem/list-item-styles.css.js +1 -1
- package/list/internal/listitem/list-item-styles.css.js.map +1 -1
- package/list/internal/listitem/list-item.d.ts +15 -3
- package/list/internal/listitem/list-item.js +43 -10
- package/list/internal/listitem/list-item.js.map +1 -1
- package/menu/internal/_menu.scss +6 -3
- package/menu/internal/menu-styles.css.js +1 -1
- package/menu/internal/menu-styles.css.js.map +1 -1
- package/menu/internal/menu.js +9 -10
- package/menu/internal/menu.js.map +1 -1
- package/menu/internal/menuitem/_menu-item.scss +8 -5
- package/menu/internal/menuitem/forced-colors-styles.css.js +1 -1
- package/menu/internal/menuitem/forced-colors-styles.css.js.map +1 -1
- package/menu/internal/menuitem/forced-colors-styles.scss +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
- package/menu/internal/menuitem/menu-item.d.ts +9 -0
- package/menu/internal/menuitem/menu-item.js +18 -4
- package/menu/internal/menuitem/menu-item.js.map +1 -1
- package/menu/internal/shared.d.ts +45 -38
- package/menu/internal/shared.js +29 -40
- package/menu/internal/shared.js.map +1 -1
- package/menu/internal/submenuitem/sub-menu-item.d.ts +22 -12
- package/menu/internal/submenuitem/sub-menu-item.js +39 -24
- package/menu/internal/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/menu-item.d.ts +1 -1
- package/menu/menu-item.js +0 -1
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.d.ts +1 -1
- package/menu/menu.js +0 -1
- package/menu/menu.js.map +1 -1
- package/menu/sub-menu-item.d.ts +1 -1
- package/menu/sub-menu-item.js +0 -1
- package/menu/sub-menu-item.js.map +1 -1
- package/package.json +1 -3
- package/progress/harness.js +2 -4
- package/progress/harness.js.map +1 -1
- package/progress/internal/_circular-progress.scss +4 -4
- package/progress/internal/_linear-progress.scss +93 -132
- package/progress/internal/circular-progress-styles.css.js +1 -1
- package/progress/internal/circular-progress-styles.css.js.map +1 -1
- package/progress/internal/circular-progress.js +1 -1
- package/progress/internal/circular-progress.js.map +1 -1
- package/progress/internal/linear-progress-styles.css.js +1 -1
- package/progress/internal/linear-progress-styles.css.js.map +1 -1
- package/progress/internal/linear-progress.d.ts +0 -11
- package/progress/internal/linear-progress.js +4 -48
- package/progress/internal/linear-progress.js.map +1 -1
- package/progress/internal/progress.js +1 -3
- package/progress/internal/progress.js.map +1 -1
- package/radio/internal/_radio.scss +38 -24
- package/radio/internal/forced-colors-styles.css.js +1 -1
- package/radio/internal/forced-colors-styles.css.js.map +1 -1
- package/radio/internal/forced-colors-styles.scss +4 -4
- package/radio/internal/radio-styles.css.js +1 -1
- package/radio/internal/radio-styles.css.js.map +1 -1
- package/radio/internal/radio.d.ts +1 -1
- package/radio/internal/radio.js +7 -6
- package/radio/internal/radio.js.map +1 -1
- package/ripple/internal/_ripple.scss +1 -1
- package/ripple/internal/ripple-styles.css.js +1 -1
- package/ripple/internal/ripple-styles.css.js.map +1 -1
- package/select/internal/_filled-select.scss +2 -3
- package/select/internal/_outlined-select.scss +2 -3
- package/select/internal/_shared.scss +30 -1
- package/select/internal/filled-select-styles.css.js +1 -1
- package/select/internal/filled-select-styles.css.js.map +1 -1
- package/select/internal/outlined-select-styles.css.js +1 -1
- package/select/internal/outlined-select-styles.css.js.map +1 -1
- package/select/internal/select.d.ts +0 -5
- package/select/internal/select.js +11 -16
- package/select/internal/select.js.map +1 -1
- package/select/internal/selectoption/select-option.d.ts +5 -6
- package/select/internal/selectoption/select-option.js +8 -9
- package/select/internal/selectoption/select-option.js.map +1 -1
- package/select/internal/shared-styles.css.js +1 -1
- package/select/internal/shared-styles.css.js.map +1 -1
- package/select/internal/shared.d.ts +5 -9
- package/select/internal/shared.js +13 -11
- package/select/internal/shared.js.map +1 -1
- package/slider/internal/_slider.scss +33 -28
- package/slider/internal/forced-colors-styles.css.js +1 -1
- package/slider/internal/forced-colors-styles.css.js.map +1 -1
- package/slider/internal/slider-styles.css.js +1 -1
- package/slider/internal/slider-styles.css.js.map +1 -1
- package/slider/internal/slider.d.ts +22 -8
- package/slider/internal/slider.js +114 -25
- package/slider/internal/slider.js.map +1 -1
- package/switch/internal/_handle.scss +12 -12
- package/switch/internal/_icon.scss +8 -8
- package/switch/internal/_switch.scss +9 -1
- package/switch/internal/_track.scss +10 -10
- package/switch/internal/forced-colors-styles.css.js +1 -1
- package/switch/internal/forced-colors-styles.css.js.map +1 -1
- package/switch/internal/forced-colors-styles.scss +12 -12
- package/switch/internal/switch-styles.css.js +1 -1
- package/switch/internal/switch-styles.css.js.map +1 -1
- package/switch/internal/switch.d.ts +1 -1
- package/switch/internal/switch.js +3 -5
- package/switch/internal/switch.js.map +1 -1
- package/tabs/internal/_tab.scss +77 -21
- package/tabs/internal/_tabs.scss +1 -0
- package/tabs/internal/tab-styles.css.js +1 -1
- package/tabs/internal/tab-styles.css.js.map +1 -1
- package/tabs/internal/tab.d.ts +3 -9
- package/tabs/internal/tab.js +4 -8
- package/tabs/internal/tab.js.map +1 -1
- package/tabs/internal/tabs.d.ts +1 -4
- package/tabs/internal/tabs.js +5 -10
- package/tabs/internal/tabs.js.map +1 -1
- package/textfield/harness.js +4 -0
- package/textfield/harness.js.map +1 -1
- package/textfield/internal/filled-styles.css.js +1 -1
- package/textfield/internal/filled-styles.css.js.map +1 -1
- package/textfield/internal/outlined-styles.css.js +1 -1
- package/textfield/internal/outlined-styles.css.js.map +1 -1
- package/textfield/internal/text-field.d.ts +11 -10
- package/textfield/internal/text-field.js +60 -35
- package/textfield/internal/text-field.js.map +1 -1
- package/tokens/_index.scss +1 -0
- package/tokens/_md-comp-checkbox.scss +16 -16
- package/tokens/_md-comp-dialog.scss +2 -1
- package/tokens/_md-comp-elevated-button.scss +14 -12
- package/tokens/_md-comp-filled-button.scss +14 -12
- package/tokens/_md-comp-filled-field.scss +2 -2
- package/tokens/_md-comp-filled-icon-button.scss +23 -8
- package/tokens/_md-comp-filled-select.scss +22 -1
- package/tokens/_md-comp-filled-text-field.scss +3 -1
- package/tokens/_md-comp-filled-tonal-button.scss +14 -12
- package/tokens/_md-comp-filled-tonal-icon-button.scss +23 -8
- package/tokens/_md-comp-icon-button.scss +24 -11
- package/tokens/_md-comp-icon.scss +32 -0
- package/tokens/_md-comp-list-item.scss +117 -103
- package/tokens/_md-comp-menu-item.scss +3 -3
- package/tokens/_md-comp-outlined-button.scss +14 -12
- package/tokens/_md-comp-outlined-field.scss +2 -1
- package/tokens/_md-comp-outlined-icon-button.scss +26 -12
- package/tokens/_md-comp-outlined-segmented-button.scss +2 -2
- package/tokens/_md-comp-outlined-select.scss +8 -0
- package/tokens/_md-comp-outlined-text-field.scss +3 -1
- package/tokens/_md-comp-radio-button.scss +20 -9
- package/tokens/_md-comp-switch.scss +66 -32
- package/tokens/_md-comp-text-button.scss +14 -12
- package/button/internal/tonal-button.js.map +0 -1
- package/button/internal/tonal-styles.css.js +0 -9
- package/button/internal/tonal-styles.css.js.map +0 -1
- package/button/tonal-button.js.map +0 -1
- package/chips/internal/assist-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/assist-forced-colors-styles.css.js +0 -9
- package/chips/internal/assist-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/assist-forced-colors-styles.scss +0 -27
- package/chips/internal/filter-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/filter-forced-colors-styles.css.js +0 -9
- package/chips/internal/filter-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/filter-forced-colors-styles.scss +0 -34
- package/chips/internal/input-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/input-forced-colors-styles.css.js +0 -9
- package/chips/internal/input-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/input-forced-colors-styles.scss +0 -39
- package/chips/internal/suggestion-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/suggestion-forced-colors-styles.css.js +0 -9
- package/chips/internal/suggestion-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/suggestion-forced-colors-styles.scss +0 -27
- package/dialog/internal/_tokens.scss +0 -66
- package/icon/internal/_md-comp-icon.scss +0 -18
- package/iconbutton/standard-icon-button.js.map +0 -1
- package/internal/sass/_theme.scss +0 -249
- package/list/internal/listitemlink/list-item-link-only.d.ts +0 -23
- package/list/internal/listitemlink/list-item-link-only.js +0 -36
- package/list/internal/listitemlink/list-item-link-only.js.map +0 -1
- package/list/internal/listitemlink/list-item-link.d.ts +0 -18
- package/list/internal/listitemlink/list-item-link.js +0 -42
- package/list/internal/listitemlink/list-item-link.js.map +0 -1
- package/list/list-item-link.d.ts +0 -53
- package/list/list-item-link.js +0 -57
- package/list/list-item-link.js.map +0 -1
- package/menu/internal/menuitemlink/menu-item-link.d.ts +0 -23
- package/menu/internal/menuitemlink/menu-item-link.js +0 -49
- package/menu/internal/menuitemlink/menu-item-link.js.map +0 -1
- package/menu/menu-item-link.d.ts +0 -33
- package/menu/menu-item-link.js +0 -38
- package/menu/menu-item-link.js.map +0 -1
- /package/button/internal/{tonal-styles.css.d.ts → filled-tonal-styles.css.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\n/**\n * A checkbox component.\n */\nexport class Checkbox extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n /** @nocollapse */\n static formAssociated = true;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether or not the checkbox is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Whether or not the checkbox is invalid.\n */\n @property({type: Boolean}) error = false;\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n @state() private prevChecked = false;\n @state() private prevDisabled = false;\n @state() private prevIndeterminate = false;\n @query('input') private readonly input!: HTMLInputElement|null;\n private readonly internals =\n (this as HTMLElement /* needed for closure */).attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input!);\n });\n }\n }\n\n override focus() {\n this.input?.focus();\n }\n\n protected override update(changed: PropertyValues<Checkbox>) {\n if (changed.has('checked') || changed.has('disabled') ||\n changed.has('indeterminate')) {\n this.prevChecked = changed.get('checked') ?? this.checked;\n this.prevDisabled = changed.get('disabled') ?? this.disabled;\n this.prevIndeterminate =\n changed.get('indeterminate') ?? this.indeterminate;\n }\n\n const shouldAddFormValue = this.checked && !this.indeterminate;\n const state = String(this.checked);\n this.internals.setFormValue(shouldAddFormValue ? this.value : null, state);\n super.update(changed);\n }\n\n protected override render() {\n const prevNone = !this.prevChecked && !this.prevIndeterminate;\n const prevChecked = this.prevChecked && !this.prevIndeterminate;\n const prevIndeterminate = this.prevIndeterminate;\n const isChecked = this.checked && !this.indeterminate;\n const isIndeterminate = this.indeterminate;\n\n const containerClasses = classMap({\n 'disabled': this.disabled,\n 'selected': isChecked || isIndeterminate,\n 'unselected': !isChecked && !isIndeterminate,\n 'checked': isChecked,\n 'indeterminate': isIndeterminate,\n 'error': this.error && !this.disabled,\n 'prev-unselected': prevNone,\n 'prev-checked': prevChecked,\n 'prev-indeterminate': prevIndeterminate,\n 'prev-disabled': this.prevDisabled,\n });\n\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <div class=\"container ${containerClasses}\">\n <div class=\"outline\"></div>\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <rect class=\"mark short\" />\n <rect class=\"mark long\" />\n </svg>\n\n <input type=\"checkbox\"\n id=\"input\"\n aria-checked=${isIndeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${this.error || nothing}\n ?disabled=${this.disabled}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @change=${this.handleChange}\n >\n </div>\n `;\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n\n redispatchEvent(this, event);\n }\n\n /** @private */\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n /** @private */\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAEhH;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;IA8CtC;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IACD,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;;;;;;;OAQG;IACH,IAAI,QAAQ;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IASD;QACE,KAAK,EAAE,CAAC;QAnGV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;;;WAIG;QACwB,kBAAa,GAAG,KAAK,CAAC;QAEjD;;;;;WAKG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;;;WAIG;QACS,UAAK,GAAG,IAAI,CAAC;QA6DR,gBAAW,GAAG,KAAK,CAAC;QACpB,iBAAY,GAAG,KAAK,CAAC;QACrB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,cAAS,GACrB,IAAmB,CAAC,wBAAyB,CAAC,eAAe,EAAE,CAAC;QAInE,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBACnD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;oBAC7B,OAAO;iBACR;gBACD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED;;;;;;;;;OASG;IACH,aAAa;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,cAAc;QACZ,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAED;;;;;;;;;;OAUG;IACH,iBAAiB,CAAC,KAAa;QAC7B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAC,WAAW,EAAE,CAAC,CAAC,KAAK,EAAC,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;IAEkB,MAAM,CAAC,OAA6B;QACrD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;YACjD,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;YAC7D,IAAI,CAAC,iBAAiB;gBAClB,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC;SACxD;QAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC3E,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;QAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;QAChE,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACjD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACtD,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC;QAE3C,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,UAAU,EAAE,SAAS,IAAI,eAAe;YACxC,YAAY,EAAE,CAAC,SAAS,IAAI,CAAC,eAAe;YAC5C,SAAS,EAAE,SAAS;YACpB,eAAe,EAAE,eAAe;YAChC,iBAAiB,EAAE,QAAQ;YAC3B,cAAc,EAAE,WAAW;YAC3B,oBAAoB,EAAE,iBAAiB;YACvC,eAAe,EAAE,IAAI,CAAC,YAAY;SACnC,CAAC,CAAC;QAEH,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,WAAW,EAAC,GAAG,IAAuB,CAAC;QACzD,0DAA0D;QAC1D,2CAA2C;QAC3C,OAAO,IAAI,CAAA;8BACe,gBAAgB;;;yBAGrB,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;uBACrC,SAAS,IAAI,OAAO;yBAClB,WAAW,IAAI,OAAO;sBACzB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;2BACR,IAAI,CAAC,aAAa;qBACxB,IAAI,CAAC,OAAO;oBACb,IAAI,CAAC,YAAY;;;;;;2CAMM,IAAI,CAAC,QAAQ;;;;;;KAMnD,CAAC;IACJ,CAAC;IAEkB,OAAO;QACxB,wEAAwE;QACxE,gBAAgB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;QAE1C,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEO,YAAY;QAClB,uEAAuE;QACvE,uEAAuE;QACvE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE;YACvC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;SAC3D;aAAM;YACL,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;SAC7B;QAED,IAAI,CAAC,SAAS,CAAC,WAAW,CACtB,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChE,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,yDAAyD;YACzD,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAED,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,yEAAyE;YACzE,qEAAqE;YACrE,0DAA0D;YAC1D,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;QAED,OAAO,IAAI,CAAC,KAAM,CAAC;IACrB,CAAC;IAED,eAAe;IACf,iBAAiB;QACf,0EAA0E;QAC1E,mDAAmD;QACnD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC;IAED,eAAe;IACf,wBAAwB,CAAC,KAAa;QACpC,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC;IAClC,CAAC;;AAnSD;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,kBAAkB;AACF,uBAAc,GAAG,IAAI,CAAC;AAKX;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAiB;AAKD;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAkB;AAOhC;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CAAuB;AAQtB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAkB;AAOhC;IAAX,QAAQ,EAAE;uCAAc;AA6DhB;IAAR,KAAK,EAAE;6CAA6B;AAC5B;IAAR,KAAK,EAAE;8CAA8B;AAC7B;IAAR,KAAK,EAAE;mDAAmC;AAC3B;IAAf,KAAK,CAAC,OAAO,CAAC;uCAAgD","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\n/**\n * A checkbox component.\n */\nexport class Checkbox extends LitElement {\n static {\n requestUpdateOnAriaChange(Checkbox);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether or not the checkbox is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * Returns a ValidityState object that represents the validity states of the\n * checkbox.\n *\n * Note that checkboxes will only set `valueMissing` if `required` and not\n * checked.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n /**\n * Returns the native validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n */\n get willValidate() {\n this.syncValidity();\n return this.internals.willValidate;\n }\n\n @state() private prevChecked = false;\n @state() private prevDisabled = false;\n @state() private prevIndeterminate = false;\n @query('input') private readonly input!: HTMLInputElement|null;\n private readonly internals =\n (this as HTMLElement /* needed for closure */).attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.input!);\n });\n }\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n /**\n * Checks the checkbox's native validation and returns whether or not the\n * element is valid.\n *\n * If invalid, this method will dispatch the `invalid` event.\n *\n * The `validationMessage` is reported to the user by the browser. Use\n * `setCustomValidity()` to customize the `validationMessage`.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n *\n * @return true if the checkbox is valid, or false if not.\n */\n reportValidity() {\n this.syncValidity();\n return this.internals.reportValidity();\n }\n\n /**\n * Sets the checkbox's native validation error message. This is used to\n * customize `validationMessage`.\n *\n * When the error is not an empty string, the checkbox is considered invalid\n * and `validity.customError` will be true.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n *\n * @param error The error message to display.\n */\n setCustomValidity(error: string) {\n this.internals.setValidity({customError: !!error}, error, this.getInput());\n }\n\n protected override update(changed: PropertyValues<this>) {\n if (changed.has('checked') || changed.has('disabled') ||\n changed.has('indeterminate')) {\n this.prevChecked = changed.get('checked') ?? this.checked;\n this.prevDisabled = changed.get('disabled') ?? this.disabled;\n this.prevIndeterminate =\n changed.get('indeterminate') ?? this.indeterminate;\n }\n\n const shouldAddFormValue = this.checked && !this.indeterminate;\n const state = String(this.checked);\n this.internals.setFormValue(shouldAddFormValue ? this.value : null, state);\n super.update(changed);\n }\n\n protected override render() {\n const prevNone = !this.prevChecked && !this.prevIndeterminate;\n const prevChecked = this.prevChecked && !this.prevIndeterminate;\n const prevIndeterminate = this.prevIndeterminate;\n const isChecked = this.checked && !this.indeterminate;\n const isIndeterminate = this.indeterminate;\n\n const containerClasses = classMap({\n 'disabled': this.disabled,\n 'selected': isChecked || isIndeterminate,\n 'unselected': !isChecked && !isIndeterminate,\n 'checked': isChecked,\n 'indeterminate': isIndeterminate,\n 'prev-unselected': prevNone,\n 'prev-checked': prevChecked,\n 'prev-indeterminate': prevIndeterminate,\n 'prev-disabled': this.prevDisabled,\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n // Note: <input> needs to be rendered before the <svg> for\n // form.reportValidity() to work in Chrome.\n return html`\n <div class=\"container ${containerClasses}\">\n <input type=\"checkbox\"\n id=\"input\"\n aria-checked=${isIndeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @change=${this.handleChange}\n >\n\n <div class=\"outline\"></div>\n <div class=\"background\"></div>\n <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <rect class=\"mark short\" />\n <rect class=\"mark long\" />\n </svg>\n </div>\n `;\n }\n\n protected override updated() {\n // Sync validity when properties change, since validation properties may\n // have changed.\n this.syncValidity();\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n\n redispatchEvent(this, event);\n }\n\n private syncValidity() {\n // Sync the internal <input>'s validity and the host's ElementInternals\n // validity. We do this to re-use native `<input>` validation messages.\n const input = this.getInput();\n if (this.internals.validity.customError) {\n input.setCustomValidity(this.internals.validationMessage);\n } else {\n input.setCustomValidity('');\n }\n\n this.internals.setValidity(\n input.validity, input.validationMessage, this.getInput());\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n this.connectedCallback();\n this.performUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n /** @private */\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n /** @private */\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
|
package/chips/assist-chip.js
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { customElement } from 'lit/decorators.js';
|
|
8
8
|
import { AssistChip } from './internal/assist-chip.js';
|
|
9
|
-
import { styles as forcedColorsStyles } from './internal/assist-forced-colors-styles.css.js';
|
|
10
9
|
import { styles } from './internal/assist-styles.css.js';
|
|
11
10
|
import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
|
|
12
11
|
import { styles as sharedStyles } from './internal/shared-styles.css.js';
|
|
@@ -18,7 +17,7 @@ import { styles as sharedStyles } from './internal/shared-styles.css.js';
|
|
|
18
17
|
*/
|
|
19
18
|
let MdAssistChip = class MdAssistChip extends AssistChip {
|
|
20
19
|
};
|
|
21
|
-
MdAssistChip.styles = [sharedStyles, elevatedStyles, styles
|
|
20
|
+
MdAssistChip.styles = [sharedStyles, elevatedStyles, styles];
|
|
22
21
|
MdAssistChip = __decorate([
|
|
23
22
|
customElement('md-assist-chip')
|
|
24
23
|
], MdAssistChip);
|
package/chips/assist-chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB;SAFY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {AssistChip} from './internal/assist-chip.js';\nimport {styles} from './internal/assist-styles.css.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-assist-chip': MdAssistChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-assist-chip')\nexport class MdAssistChip extends AssistChip {\n static override styles = [sharedStyles, elevatedStyles, styles];\n}\n"]}
|
package/chips/filter-chip.js
CHANGED
|
@@ -7,7 +7,6 @@ import { __decorate } from "tslib";
|
|
|
7
7
|
import { customElement } from 'lit/decorators.js';
|
|
8
8
|
import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
|
|
9
9
|
import { FilterChip } from './internal/filter-chip.js';
|
|
10
|
-
import { styles as forcedColorsStyles } from './internal/filter-forced-colors-styles.css.js';
|
|
11
10
|
import { styles } from './internal/filter-styles.css.js';
|
|
12
11
|
import { styles as selectableStyles } from './internal/selectable-styles.css.js';
|
|
13
12
|
import { styles as sharedStyles } from './internal/shared-styles.css.js';
|
|
@@ -21,8 +20,7 @@ import { styles as trailingIconStyles } from './internal/trailing-icon-styles.cs
|
|
|
21
20
|
let MdFilterChip = class MdFilterChip extends FilterChip {
|
|
22
21
|
};
|
|
23
22
|
MdFilterChip.styles = [
|
|
24
|
-
sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles
|
|
25
|
-
forcedColorsStyles
|
|
23
|
+
sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles
|
|
26
24
|
];
|
|
27
25
|
MdFilterChip = __decorate([
|
|
28
26
|
customElement('md-filter-chip')
|
package/chips/filter-chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG;IACvB,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM;CAC3E,CAAC;AAHS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAIxB;SAJY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {FilterChip} from './internal/filter-chip.js';\nimport {styles} from './internal/filter-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filter-chip': MdFilterChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filter-chip')\nexport class MdFilterChip extends FilterChip {\n static override styles = [\n sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles\n ];\n}\n"]}
|
package/chips/input-chip.js
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { customElement } from 'lit/decorators.js';
|
|
8
8
|
import { InputChip } from './internal/input-chip.js';
|
|
9
|
-
import { styles as forcedColorsStyles } from './internal/input-forced-colors-styles.css.js';
|
|
10
9
|
import { styles } from './internal/input-styles.css.js';
|
|
11
10
|
import { styles as selectableStyles } from './internal/selectable-styles.css.js';
|
|
12
11
|
import { styles as sharedStyles } from './internal/shared-styles.css.js';
|
|
@@ -19,10 +18,7 @@ import { styles as trailingIconStyles } from './internal/trailing-icon-styles.cs
|
|
|
19
18
|
*/
|
|
20
19
|
let MdInputChip = class MdInputChip extends InputChip {
|
|
21
20
|
};
|
|
22
|
-
MdInputChip.styles = [
|
|
23
|
-
sharedStyles, trailingIconStyles, selectableStyles, styles,
|
|
24
|
-
forcedColorsStyles
|
|
25
|
-
];
|
|
21
|
+
MdInputChip.styles = [sharedStyles, trailingIconStyles, selectableStyles, styles];
|
|
26
22
|
MdInputChip = __decorate([
|
|
27
23
|
customElement('md-input-chip')
|
|
28
24
|
], MdInputChip);
|
package/chips/input-chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAClB,CAAC,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAFtD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAGvB;SAHY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles} from './internal/input-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-input-chip': MdInputChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n static override styles =\n [sharedStyles, trailingIconStyles, selectableStyles, styles];\n}\n"]}
|
|
@@ -59,6 +59,28 @@
|
|
|
59
59
|
);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
:host([avatar]) {
|
|
63
|
+
// Use a rounded border by default for avatar chips. Recreating the
|
|
64
|
+
// fallbacks allows `--md-input-chip-container-shape` to cascade and
|
|
65
|
+
// override this without needing to add more specificity for avatar chips.
|
|
66
|
+
--_container-shape-start-start: var(
|
|
67
|
+
--md-input-chip-container-shape-start-start,
|
|
68
|
+
var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
|
|
69
|
+
);
|
|
70
|
+
--_container-shape-start-end: var(
|
|
71
|
+
--md-input-chip-container-shape-start-end,
|
|
72
|
+
var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
|
|
73
|
+
);
|
|
74
|
+
--_container-shape-end-end: var(
|
|
75
|
+
--md-input-chip-container-shape-end-end,
|
|
76
|
+
var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
|
|
77
|
+
);
|
|
78
|
+
--_container-shape-end-start: var(
|
|
79
|
+
--md-input-chip-container-shape-end-start,
|
|
80
|
+
var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
62
84
|
.avatar .primary.action {
|
|
63
85
|
padding-inline-start: 4px;
|
|
64
86
|
}
|
|
@@ -72,4 +94,14 @@
|
|
|
72
94
|
.disabled.avatar .leading.icon {
|
|
73
95
|
opacity: var(--_disabled-avatar-opacity);
|
|
74
96
|
}
|
|
97
|
+
|
|
98
|
+
@media (forced-colors: active) {
|
|
99
|
+
.link .outline {
|
|
100
|
+
border-color: ActiveText;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.disabled.avatar .leading.icon {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
75
107
|
}
|
|
@@ -19,56 +19,60 @@
|
|
|
19
19
|
);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.selected::before {
|
|
22
|
+
:where(.selected)::before {
|
|
23
23
|
background: var(--_selected-container-color);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.selected .outline {
|
|
26
|
+
:where(.selected) .outline {
|
|
27
27
|
border-width: var(--_selected-outline-width);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.selected.disabled::before {
|
|
30
|
+
:where(.selected.disabled)::before {
|
|
31
31
|
background: var(--_disabled-selected-container-color);
|
|
32
32
|
opacity: var(--_disabled-selected-container-opacity);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.selected .label {
|
|
35
|
+
:where(.selected) .label {
|
|
36
36
|
color: var(--_selected-label-text-color);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.selected:hover .label {
|
|
39
|
+
:where(.selected:hover) .label {
|
|
40
40
|
color: var(--_selected-hover-label-text-color);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.selected:focus .label {
|
|
43
|
+
:where(.selected:focus) .label {
|
|
44
44
|
color: var(--_selected-focus-label-text-color);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.selected:active .label {
|
|
47
|
+
:where(.selected:active) .label {
|
|
48
48
|
color: var(--_selected-pressed-label-text-color);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.selected .leading.icon {
|
|
51
|
+
:where(.selected) .leading.icon {
|
|
52
52
|
color: var(--_selected-leading-icon-color);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.selected:hover .leading.icon {
|
|
55
|
+
:where(.selected:hover) .leading.icon {
|
|
56
56
|
color: var(--_selected-hover-leading-icon-color);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
.selected:focus .leading.icon {
|
|
59
|
+
:where(.selected:focus) .leading.icon {
|
|
60
60
|
color: var(--_selected-focus-leading-icon-color);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.selected:active .leading.icon {
|
|
63
|
+
:where(.selected:active) .leading.icon {
|
|
64
64
|
color: var(--_selected-pressed-leading-icon-color);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
@media (forced-colors: active) {
|
|
68
|
-
.selected:not(.elevated)::before {
|
|
68
|
+
:where(.selected:not(.elevated))::before {
|
|
69
69
|
// for forced-colors. Don't add it to elevated containers since elevation
|
|
70
70
|
// already have a border added.
|
|
71
|
-
border: 1px solid
|
|
71
|
+
border: 1px solid CanvasText;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:where(.selected) .outline {
|
|
75
|
+
border-width: 1px;
|
|
72
76
|
}
|
|
73
77
|
}
|
|
74
78
|
}
|
|
@@ -31,6 +31,10 @@
|
|
|
31
31
|
);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
:host([touch-target='wrapper']) {
|
|
35
|
+
margin: max(0px, (48px - var(--_container-height)) / 2) 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
34
38
|
md-focus-ring {
|
|
35
39
|
@include focus-ring.theme(
|
|
36
40
|
(
|
|
@@ -99,6 +103,10 @@
|
|
|
99
103
|
width: 100%;
|
|
100
104
|
}
|
|
101
105
|
|
|
106
|
+
:host([touch-target='none']) .touch {
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
102
110
|
// Outline, separate node for disabled opacity changes
|
|
103
111
|
.outline {
|
|
104
112
|
border: var(--_outline-width) solid var(--_outline-color);
|
|
@@ -108,11 +116,11 @@
|
|
|
108
116
|
position: absolute;
|
|
109
117
|
}
|
|
110
118
|
|
|
111
|
-
:focus .outline {
|
|
119
|
+
:where(:focus) .outline {
|
|
112
120
|
border-color: var(--_focus-outline-color);
|
|
113
121
|
}
|
|
114
122
|
|
|
115
|
-
.disabled .outline {
|
|
123
|
+
:where(.disabled) .outline {
|
|
116
124
|
border-color: var(--_disabled-outline-color);
|
|
117
125
|
opacity: var(--_disabled-outline-opacity);
|
|
118
126
|
}
|
|
@@ -139,19 +147,19 @@
|
|
|
139
147
|
white-space: nowrap;
|
|
140
148
|
}
|
|
141
149
|
|
|
142
|
-
:hover .label {
|
|
150
|
+
:where(:hover) .label {
|
|
143
151
|
color: var(--_hover-label-text-color);
|
|
144
152
|
}
|
|
145
153
|
|
|
146
|
-
:focus .label {
|
|
154
|
+
:where(:focus) .label {
|
|
147
155
|
color: var(--_focus-label-text-color);
|
|
148
156
|
}
|
|
149
157
|
|
|
150
|
-
:active .label {
|
|
158
|
+
:where(:active) .label {
|
|
151
159
|
color: var(--_pressed-label-text-color);
|
|
152
160
|
}
|
|
153
161
|
|
|
154
|
-
.disabled .label {
|
|
162
|
+
:where(.disabled) .label {
|
|
155
163
|
color: var(--_disabled-label-text-color);
|
|
156
164
|
opacity: var(--_disabled-label-text-opacity);
|
|
157
165
|
}
|
|
@@ -173,20 +181,27 @@
|
|
|
173
181
|
color: var(--_leading-icon-color);
|
|
174
182
|
}
|
|
175
183
|
|
|
176
|
-
:hover .leading.icon {
|
|
184
|
+
:where(:hover) .leading.icon {
|
|
177
185
|
color: var(--_hover-leading-icon-color);
|
|
178
186
|
}
|
|
179
187
|
|
|
180
|
-
:focus .leading.icon {
|
|
188
|
+
:where(:focus) .leading.icon {
|
|
181
189
|
color: var(--_focus-leading-icon-color);
|
|
182
190
|
}
|
|
183
191
|
|
|
184
|
-
:active .leading.icon {
|
|
192
|
+
:where(:active) .leading.icon {
|
|
185
193
|
color: var(--_pressed-leading-icon-color);
|
|
186
194
|
}
|
|
187
195
|
|
|
188
|
-
.disabled .leading.icon {
|
|
196
|
+
:where(.disabled) .leading.icon {
|
|
189
197
|
color: var(--_disabled-leading-icon-color);
|
|
190
198
|
opacity: var(--_disabled-leading-icon-opacity);
|
|
191
199
|
}
|
|
200
|
+
|
|
201
|
+
@media (forced-colors: active) {
|
|
202
|
+
:where(.disabled) :is(.label, .outline, .leading.icon) {
|
|
203
|
+
color: GrayText;
|
|
204
|
+
opacity: 1;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
192
207
|
}
|
|
@@ -14,27 +14,16 @@
|
|
|
14
14
|
padding: 0 8px;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.trailing.action md-focus-ring {
|
|
18
|
-
// Note: the trailing action's shape only follows the trailing end of the
|
|
19
|
-
// chip. For example, if the leading end is rounded, but the trailing is end
|
|
20
|
-
// squared, then the focus ring will be squared (not rounded+squared).
|
|
21
|
-
@include focus-ring.theme(
|
|
22
|
-
(
|
|
23
|
-
'shape-start-start': var(--_container-shape-start-end),
|
|
24
|
-
'shape-end-start': var(--_container-shape-end-end),
|
|
25
|
-
'shape-end-end': var(--_container-shape-end-end),
|
|
26
|
-
'shape-start-end': var(--_container-shape-start-end),
|
|
27
|
-
'outward-offset': -2px,
|
|
28
|
-
)
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.trailing.action md-ripple {
|
|
17
|
+
.trailing.action :is(md-ripple, md-focus-ring) {
|
|
33
18
|
border-radius: 50%;
|
|
34
19
|
height: calc(4 / 3 * var(--_icon-size)); // 24px default
|
|
35
20
|
width: calc(4 / 3 * var(--_icon-size)); // 24px default
|
|
36
21
|
}
|
|
37
22
|
|
|
23
|
+
.trailing.action md-focus-ring {
|
|
24
|
+
inset: unset;
|
|
25
|
+
}
|
|
26
|
+
|
|
38
27
|
.has-trailing .primary.action {
|
|
39
28
|
padding-inline-end: 0;
|
|
40
29
|
}
|
|
@@ -45,36 +34,47 @@
|
|
|
45
34
|
width: var(--_icon-size);
|
|
46
35
|
}
|
|
47
36
|
|
|
48
|
-
:hover .trailing.icon {
|
|
37
|
+
:where(:hover) .trailing.icon {
|
|
49
38
|
color: var(--_hover-trailing-icon-color);
|
|
50
39
|
}
|
|
51
40
|
|
|
52
|
-
:focus .trailing.icon {
|
|
41
|
+
:where(:focus) .trailing.icon {
|
|
53
42
|
color: var(--_focus-trailing-icon-color);
|
|
54
43
|
}
|
|
55
44
|
|
|
56
|
-
:active .trailing.icon {
|
|
45
|
+
:where(:active) .trailing.icon {
|
|
57
46
|
color: var(--_pressed-trailing-icon-color);
|
|
58
47
|
}
|
|
59
48
|
|
|
60
|
-
.disabled .trailing.icon {
|
|
49
|
+
:where(.disabled) .trailing.icon {
|
|
61
50
|
color: var(--_disabled-trailing-icon-color);
|
|
62
51
|
opacity: var(--_disabled-trailing-icon-opacity);
|
|
63
52
|
}
|
|
64
53
|
|
|
65
|
-
.selected .trailing.icon {
|
|
54
|
+
:where(.selected) .trailing.icon {
|
|
66
55
|
color: var(--_selected-trailing-icon-color);
|
|
67
56
|
}
|
|
68
57
|
|
|
69
|
-
.selected:hover .trailing.icon {
|
|
58
|
+
:where(.selected:hover) .trailing.icon {
|
|
70
59
|
color: var(--_selected-hover-trailing-icon-color);
|
|
71
60
|
}
|
|
72
61
|
|
|
73
|
-
.selected:focus .trailing.icon {
|
|
62
|
+
:where(.selected:focus) .trailing.icon {
|
|
74
63
|
color: var(--_selected-focus-trailing-icon-color);
|
|
75
64
|
}
|
|
76
65
|
|
|
77
|
-
.selected:active .trailing.icon {
|
|
66
|
+
:where(.selected:active) .trailing.icon {
|
|
78
67
|
color: var(--_selected-pressed-trailing-icon-color);
|
|
79
68
|
}
|
|
69
|
+
|
|
70
|
+
@media (forced-colors: active) {
|
|
71
|
+
.trailing.icon {
|
|
72
|
+
color: ButtonText;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
:where(.disabled) .trailing.icon {
|
|
76
|
+
color: GrayText;
|
|
77
|
+
opacity: 1;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
80
|
}
|
|
@@ -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-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=assist-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# sourceMappingURL=assist-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=assist-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assist-styles.css.js","sourceRoot":"","sources":["assist-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-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"assist-styles.css.js","sourceRoot":"","sources":["assist-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-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright 2023 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
var _a;
|
|
7
6
|
import { __decorate } from "tslib";
|
|
8
7
|
import { html, isServer, LitElement, nothing } from 'lit';
|
|
9
8
|
import { property, queryAssignedElements } from 'lit/decorators.js';
|
|
@@ -149,9 +148,8 @@ export class ChipSet extends LitElement {
|
|
|
149
148
|
}
|
|
150
149
|
}
|
|
151
150
|
}
|
|
152
|
-
_a = ChipSet;
|
|
153
151
|
(() => {
|
|
154
|
-
requestUpdateOnAriaChange(
|
|
152
|
+
requestUpdateOnAriaChange(ChipSet);
|
|
155
153
|
})();
|
|
156
154
|
__decorate([
|
|
157
155
|
property()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-set.js","sourceRoot":"","sources":["chip-set.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 {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * The type of chip a chip set controls.\n */\nexport type ChipSetType = 'assist'|'suggestion'|'filter'|'input'|'';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n get chips() {\n return this.childElements.filter(\n (child): child is Chip => child instanceof Chip);\n }\n\n @property() type: ChipSetType = '';\n @property({type: Boolean, attribute: 'single-select'}) singleSelect = false;\n\n @queryAssignedElements() private readonly childElements!: HTMLElement[];\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('focusin', this.updateTabIndices.bind(this));\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n this.addEventListener('selected', this.handleSelected.bind(this));\n }\n }\n\n protected override updated(changed: PropertyValues<this>) {\n if (changed.has('singleSelect') && this.singleSelect) {\n let hasSelectedChip = false;\n for (const chip of this.chips as MaybeSelectableChip[]) {\n if (chip.selected === true) {\n if (!hasSelectedChip) {\n hasSelectedChip = true;\n continue;\n }\n\n chip.selected = false;\n }\n }\n }\n }\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n const isFilter = this.type === 'filter';\n const role = isFilter ? 'listbox' : 'grid';\n const multiselectable = isFilter ? !this.singleSelect : nothing;\n return html`\n <div class=\"content\"\n role=${role}\n aria-label=${ariaLabel || nothing}\n aria-multiselectable=${multiselectable}>\n <slot @slotchange=${this.updateTabIndices}></slot>\n </div>\n `;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n const isHome = event.key === 'Home';\n const isEnd = event.key === 'End';\n // Ignore non-navigation keys\n if (!isLeft && !isRight && !isDown && !isUp && !isHome && !isEnd) {\n return;\n }\n\n const {chips} = this as {chips: MaybeMultiActionChip[]};\n // Don't try to select another chip if there aren't any.\n if (chips.length < 2) {\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n\n if (isHome || isEnd) {\n const index = isHome ? 0 : chips.length - 1;\n chips[index].focus({trailing: isEnd});\n this.updateTabIndices();\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft || isUp : isRight || isDown;\n const focusedChip = chips.find(chip => chip.matches(':focus-within'));\n if (!focusedChip) {\n // If there is not already a chip focused, select the first or last chip\n // based on the direction we're traveling.\n const nextChip = forwards ? chips[0] : chips[chips.length - 1];\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n return;\n }\n\n const currentIndex = chips.indexOf(focusedChip);\n let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;\n // Search for the next sibling that is not disabled to select.\n // If we return to the host index, there is nothing to select.\n while (nextIndex !== currentIndex) {\n if (nextIndex >= chips.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = chips.length - 1;\n }\n\n // Check if the next sibling is disabled. If so,\n // move the index and continue searching.\n const nextChip = chips[nextIndex];\n if (nextChip.disabled) {\n if (forwards) {\n nextIndex++;\n } else {\n nextIndex--;\n }\n\n continue;\n }\n\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n break;\n }\n }\n\n private updateTabIndices() {\n const {chips} = this;\n let hasFocusedChip = false;\n for (const chip of chips) {\n if (chip.matches(':focus-within')) {\n chip.removeAttribute('tabindex');\n hasFocusedChip = true;\n } else {\n chip.tabIndex = -1;\n }\n }\n\n if (!hasFocusedChip) {\n chips[0]?.removeAttribute('tabindex');\n }\n }\n\n private handleSelected(event: Event) {\n if (!this.singleSelect) {\n return;\n }\n\n if ((event.target as MaybeSelectableChip).selected === true) {\n for (const chip of this.chips as MaybeSelectableChip[]) {\n if (chip !== event.target && chip.selected) {\n chip.selected = false;\n }\n }\n }\n }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n focus(options?: FocusOptions&{trailing?: boolean}): void;\n}\n\ninterface MaybeSelectableChip extends Chip {\n selected?: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"chip-set.js","sourceRoot":"","sources":["chip-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAGlE,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAO/B;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;IAKrC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,CAC5B,CAAC,KAAK,EAAiB,EAAE,CAAC,KAAK,YAAY,IAAI,CAAC,CAAC;IACvD,CAAC;IAOD;QACE,KAAK,EAAE,CAAC;QANE,SAAI,GAAgB,EAAE,CAAC;QACoB,iBAAY,GAAG,KAAK,CAAC;QAM1E,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACnE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAChE,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SACnE;IACH,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE;YACpD,IAAI,eAAe,GAAG,KAAK,CAAC;YAC5B,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAA8B,EAAE;gBACtD,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;oBAC1B,IAAI,CAAC,eAAe,EAAE;wBACpB,eAAe,GAAG,IAAI,CAAC;wBACvB,SAAS;qBACV;oBAED,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACvB;aACF;SACF;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;QACxC,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3C,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;QAChE,OAAO,IAAI,CAAA;;iBAEE,IAAI;uBACE,SAAS,IAAI,OAAO;iCACV,eAAe;4BACpB,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;QACzC,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC;QACrC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;QACzC,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;QAC3C,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,MAAM,CAAC;QACpC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;QAClC,6BAA6B;QAC7B,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;YAChE,OAAO;SACR;QAED,MAAM,EAAC,KAAK,EAAC,GAAG,IAAuC,CAAC;QACxD,wDAAwD;QACxD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,OAAO;SACR;QAED,mDAAmD;QACnD,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,MAAM,IAAI,KAAK,EAAE;YACnB,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC5C,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC,CAAC,CAAC;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,OAAO;SACR;QAED,wCAAwC;QACxC,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;QACzD,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC;QAC5D,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,WAAW,EAAE;YAChB,wEAAwE;YACxE,0CAA0C;YAC1C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC/D,QAAQ,CAAC,KAAK,CAAC,EAAC,QAAQ,EAAE,CAAC,QAAQ,EAAC,CAAC,CAAC;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,OAAO;SACR;QAED,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAChD,IAAI,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;QAC/D,8DAA8D;QAC9D,8DAA8D;QAC9D,OAAO,SAAS,KAAK,YAAY,EAAE;YACjC,IAAI,SAAS,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC7B,gDAAgD;gBAChD,SAAS,GAAG,CAAC,CAAC;aACf;iBAAM,IAAI,SAAS,GAAG,CAAC,EAAE;gBACxB,6CAA6C;gBAC7C,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;aAC9B;YAED,gDAAgD;YAChD,yCAAyC;YACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;YAClC,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,IAAI,QAAQ,EAAE;oBACZ,SAAS,EAAE,CAAC;iBACb;qBAAM;oBACL,SAAS,EAAE,CAAC;iBACb;gBAED,SAAS;aACV;YAED,QAAQ,CAAC,KAAK,CAAC,EAAC,QAAQ,EAAE,CAAC,QAAQ,EAAC,CAAC,CAAC;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,MAAM;SACP;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,EAAC,KAAK,EAAC,GAAG,IAAI,CAAC;QACrB,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;gBACjC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACjC,cAAc,GAAG,IAAI,CAAC;aACvB;iBAAM;gBACL,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACpB;SACF;QAED,IAAI,CAAC,cAAc,EAAE;YACnB,KAAK,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;SACvC;IACH,CAAC;IAEO,cAAc,CAAC,KAAY;QACjC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO;SACR;QAED,IAAK,KAAK,CAAC,MAA8B,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC3D,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAA8B,EAAE;gBACtD,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;oBAC1C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACvB;aACF;SACF;IACH,CAAC;CACF;AA7JC;IACE,yBAAyB,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC,GAAA,CAAA;AAOW;IAAX,QAAQ,EAAE;qCAAwB;AACoB;IAAtD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAC,CAAC;6CAAsB;AAEnD;IAAxB,qBAAqB,EAAE;8CAAgD","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * The type of chip a chip set controls.\n */\nexport type ChipSetType = 'assist'|'suggestion'|'filter'|'input'|'';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n static {\n requestUpdateOnAriaChange(ChipSet);\n }\n\n get chips() {\n return this.childElements.filter(\n (child): child is Chip => child instanceof Chip);\n }\n\n @property() type: ChipSetType = '';\n @property({type: Boolean, attribute: 'single-select'}) singleSelect = false;\n\n @queryAssignedElements() private readonly childElements!: HTMLElement[];\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('focusin', this.updateTabIndices.bind(this));\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n this.addEventListener('selected', this.handleSelected.bind(this));\n }\n }\n\n protected override updated(changed: PropertyValues<this>) {\n if (changed.has('singleSelect') && this.singleSelect) {\n let hasSelectedChip = false;\n for (const chip of this.chips as MaybeSelectableChip[]) {\n if (chip.selected === true) {\n if (!hasSelectedChip) {\n hasSelectedChip = true;\n continue;\n }\n\n chip.selected = false;\n }\n }\n }\n }\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n const isFilter = this.type === 'filter';\n const role = isFilter ? 'listbox' : 'grid';\n const multiselectable = isFilter ? !this.singleSelect : nothing;\n return html`\n <div class=\"content\"\n role=${role}\n aria-label=${ariaLabel || nothing}\n aria-multiselectable=${multiselectable}>\n <slot @slotchange=${this.updateTabIndices}></slot>\n </div>\n `;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n const isHome = event.key === 'Home';\n const isEnd = event.key === 'End';\n // Ignore non-navigation keys\n if (!isLeft && !isRight && !isDown && !isUp && !isHome && !isEnd) {\n return;\n }\n\n const {chips} = this as {chips: MaybeMultiActionChip[]};\n // Don't try to select another chip if there aren't any.\n if (chips.length < 2) {\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n\n if (isHome || isEnd) {\n const index = isHome ? 0 : chips.length - 1;\n chips[index].focus({trailing: isEnd});\n this.updateTabIndices();\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft || isUp : isRight || isDown;\n const focusedChip = chips.find(chip => chip.matches(':focus-within'));\n if (!focusedChip) {\n // If there is not already a chip focused, select the first or last chip\n // based on the direction we're traveling.\n const nextChip = forwards ? chips[0] : chips[chips.length - 1];\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n return;\n }\n\n const currentIndex = chips.indexOf(focusedChip);\n let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;\n // Search for the next sibling that is not disabled to select.\n // If we return to the host index, there is nothing to select.\n while (nextIndex !== currentIndex) {\n if (nextIndex >= chips.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = chips.length - 1;\n }\n\n // Check if the next sibling is disabled. If so,\n // move the index and continue searching.\n const nextChip = chips[nextIndex];\n if (nextChip.disabled) {\n if (forwards) {\n nextIndex++;\n } else {\n nextIndex--;\n }\n\n continue;\n }\n\n nextChip.focus({trailing: !forwards});\n this.updateTabIndices();\n break;\n }\n }\n\n private updateTabIndices() {\n const {chips} = this;\n let hasFocusedChip = false;\n for (const chip of chips) {\n if (chip.matches(':focus-within')) {\n chip.removeAttribute('tabindex');\n hasFocusedChip = true;\n } else {\n chip.tabIndex = -1;\n }\n }\n\n if (!hasFocusedChip) {\n chips[0]?.removeAttribute('tabindex');\n }\n }\n\n private handleSelected(event: Event) {\n if (!this.singleSelect) {\n return;\n }\n\n if ((event.target as MaybeSelectableChip).selected === true) {\n for (const chip of this.chips as MaybeSelectableChip[]) {\n if (chip !== event.target && chip.selected) {\n chip.selected = false;\n }\n }\n }\n }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n focus(options?: FocusOptions&{trailing?: boolean}): void;\n}\n\ninterface MaybeSelectableChip extends Chip {\n selected?: boolean;\n}\n"]}
|
package/chips/internal/chip.js
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright 2023 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
var _a;
|
|
7
6
|
import { __decorate } from "tslib";
|
|
8
7
|
import '../../focus/md-focus-ring.js';
|
|
9
8
|
import '../../ripple/ripple.js';
|
|
@@ -74,9 +73,8 @@ export class Chip extends LitElement {
|
|
|
74
73
|
return html `<slot name="icon"></slot>`;
|
|
75
74
|
}
|
|
76
75
|
}
|
|
77
|
-
_a = Chip;
|
|
78
76
|
(() => {
|
|
79
|
-
requestUpdateOnAriaChange(
|
|
77
|
+
requestUpdateOnAriaChange(Chip);
|
|
80
78
|
})();
|
|
81
79
|
/** @nocollapse */
|
|
82
80
|
Chip.shadowRootOptions = {
|