@material/web 1.0.1 → 1.0.2-nightly.8eb1f30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.d.ts +2 -0
- package/all.js +2 -0
- package/all.js.map +1 -1
- package/button/elevated-button.js +5 -1
- package/button/elevated-button.js.map +1 -1
- package/button/internal/_elevation.scss +32 -32
- package/button/internal/_icon.scss +22 -23
- package/button/internal/_outlined-button.scss +21 -19
- package/button/internal/_shared.scss +84 -77
- package/button/internal/_touch-target.scss +4 -0
- package/button/internal/button.d.ts +7 -11
- package/button/internal/button.js +52 -38
- package/button/internal/button.js.map +1 -1
- package/button/internal/elevated-button.d.ts +1 -1
- package/button/internal/elevated-button.js +1 -1
- package/button/internal/elevated-button.js.map +1 -1
- package/button/internal/filled-button.d.ts +1 -1
- package/button/internal/filled-button.js +1 -1
- package/button/internal/filled-button.js.map +1 -1
- package/button/internal/filled-tonal-button.d.ts +1 -1
- package/button/internal/filled-tonal-button.js +1 -1
- package/button/internal/filled-tonal-button.js.map +1 -1
- package/button/internal/outlined-button.d.ts +1 -1
- package/button/internal/outlined-button.js +2 -2
- package/button/internal/outlined-button.js.map +1 -1
- package/button/internal/outlined-styles.css.js +1 -1
- package/button/internal/outlined-styles.css.js.map +1 -1
- package/button/internal/shared-elevation-styles.css.js +1 -1
- package/button/internal/shared-elevation-styles.css.js.map +1 -1
- package/button/internal/shared-styles.css.js +1 -1
- package/button/internal/shared-styles.css.js.map +1 -1
- package/checkbox/internal/checkbox.d.ts +18 -25
- package/checkbox/internal/checkbox.js +43 -74
- package/checkbox/internal/checkbox.js.map +1 -1
- package/chips/filter-chip.js +5 -1
- package/chips/filter-chip.js.map +1 -1
- package/chips/harness.js.map +1 -1
- package/chips/input-chip.js +6 -1
- package/chips/input-chip.js.map +1 -1
- package/chips/internal/assist-chip.js +8 -4
- package/chips/internal/assist-chip.js.map +1 -1
- package/chips/internal/chip-set.js +6 -4
- package/chips/internal/chip-set.js.map +1 -1
- package/chips/internal/chip.d.ts +3 -0
- package/chips/internal/chip.js +7 -5
- package/chips/internal/chip.js.map +1 -1
- package/chips/internal/filter-chip.d.ts +2 -0
- package/chips/internal/filter-chip.js +11 -5
- package/chips/internal/filter-chip.js.map +1 -1
- package/chips/internal/input-chip.d.ts +2 -0
- package/chips/internal/input-chip.js +10 -4
- package/chips/internal/input-chip.js.map +1 -1
- package/chips/internal/multi-action-chip.js.map +1 -1
- package/chips/internal/trailing-icons.d.ts +1 -1
- package/chips/internal/trailing-icons.js +6 -5
- package/chips/internal/trailing-icons.js.map +1 -1
- package/common.d.ts +2 -0
- package/common.js +2 -0
- package/common.js.map +1 -1
- package/dialog/harness.js +1 -2
- package/dialog/harness.js.map +1 -1
- package/dialog/internal/_dialog.scss +1 -1
- package/dialog/internal/animations.js +14 -12
- package/dialog/internal/animations.js.map +1 -1
- package/dialog/internal/dialog-styles.css.js +1 -1
- package/dialog/internal/dialog-styles.css.js.map +1 -1
- package/dialog/internal/dialog.d.ts +6 -6
- package/dialog/internal/dialog.js +24 -24
- package/dialog/internal/dialog.js.map +1 -1
- package/fab/harness.js.map +1 -1
- package/fab/internal/fab.js.map +1 -1
- package/fab/internal/shared.js +10 -11
- package/fab/internal/shared.js.map +1 -1
- package/field/harness.js.map +1 -1
- package/field/internal/_content.scss +185 -174
- package/field/internal/_filled-field.scss +147 -136
- package/field/internal/_label.scss +83 -72
- package/field/internal/_outlined-field.scss +276 -262
- package/field/internal/_supporting-text.scss +53 -42
- package/field/internal/field.js +26 -22
- package/field/internal/field.js.map +1 -1
- package/field/internal/filled-styles.css.js +1 -1
- package/field/internal/filled-styles.css.js.map +1 -1
- package/field/internal/outlined-styles.css.js +1 -1
- package/field/internal/outlined-styles.css.js.map +1 -1
- package/field/internal/shared-styles.css.js +1 -1
- package/field/internal/shared-styles.css.js.map +1 -1
- package/focus/internal/focus-ring.d.ts +2 -0
- package/focus/internal/focus-ring.js +3 -3
- package/focus/internal/focus-ring.js.map +1 -1
- package/icon/internal/_icon.scss +7 -4
- package/icon/internal/icon-styles.css.js +1 -1
- package/icon/internal/icon-styles.css.js.map +1 -1
- package/iconbutton/internal/icon-button.d.ts +9 -4
- package/iconbutton/internal/icon-button.js +35 -22
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/internal/aria/aria.d.ts +4 -26
- package/internal/aria/aria.js +10 -28
- package/internal/aria/aria.js.map +1 -1
- package/internal/aria/delegate.js +2 -2
- package/internal/aria/delegate.js.map +1 -1
- package/internal/controller/attachable-controller.js +3 -5
- package/internal/controller/attachable-controller.js.map +1 -1
- package/internal/controller/form-submitter.d.ts +3 -5
- package/internal/controller/form-submitter.js +5 -7
- package/internal/controller/form-submitter.js.map +1 -1
- package/internal/controller/is-rtl.js +2 -2
- package/internal/controller/is-rtl.js.map +1 -1
- package/internal/controller/string-converter.js +1 -1
- package/internal/controller/string-converter.js.map +1 -1
- package/internal/motion/animation.js.map +1 -1
- package/labs/behaviors/element-internals.d.ts +45 -0
- package/labs/behaviors/element-internals.js +50 -0
- package/labs/behaviors/element-internals.js.map +1 -0
- package/labs/behaviors/focusable.d.ts +39 -0
- package/labs/behaviors/focusable.js +82 -0
- package/labs/behaviors/focusable.js.map +1 -0
- package/labs/behaviors/form-associated.d.ts +199 -0
- package/labs/behaviors/form-associated.js +155 -0
- package/labs/behaviors/form-associated.js.map +1 -0
- package/labs/behaviors/mixin.d.ts +54 -0
- package/labs/behaviors/mixin.js +7 -0
- package/labs/behaviors/mixin.js.map +1 -0
- package/labs/behaviors/validators/checkbox-validator.d.ts +32 -0
- package/labs/behaviors/validators/checkbox-validator.js +32 -0
- package/labs/behaviors/validators/checkbox-validator.js.map +1 -0
- package/labs/behaviors/validators/validator.d.ts +92 -0
- package/labs/behaviors/validators/validator.js +73 -0
- package/labs/behaviors/validators/validator.js.map +1 -0
- package/labs/card/_elevated-card.scss +6 -0
- package/labs/card/_filled-card.scss +6 -0
- package/labs/card/_outlined-card.scss +6 -0
- package/labs/card/elevated-card.d.ts +18 -0
- package/labs/card/elevated-card.js +21 -0
- package/labs/card/elevated-card.js.map +1 -0
- package/labs/card/filled-card.d.ts +18 -0
- package/labs/card/filled-card.js +21 -0
- package/labs/card/filled-card.js.map +1 -0
- package/labs/card/internal/_elevated-card.scss +35 -0
- package/labs/card/internal/_filled-card.scss +35 -0
- package/labs/card/internal/_outlined-card.scss +39 -0
- package/labs/card/internal/_shared.scss +40 -0
- package/labs/card/internal/card.d.ts +13 -0
- package/labs/card/internal/card.js +20 -0
- package/labs/card/internal/card.js.map +1 -0
- package/labs/card/internal/elevated-styles.css.js +9 -0
- package/labs/card/internal/elevated-styles.css.js.map +1 -0
- package/labs/card/internal/elevated-styles.scss +10 -0
- package/labs/card/internal/filled-styles.css.js +9 -0
- package/labs/card/internal/filled-styles.css.js.map +1 -0
- package/labs/card/internal/filled-styles.scss +10 -0
- package/labs/card/internal/outlined-styles.css.js +9 -0
- package/labs/card/internal/outlined-styles.css.js.map +1 -0
- package/labs/card/internal/outlined-styles.scss +10 -0
- package/labs/card/internal/shared-styles.css.js +9 -0
- package/labs/card/internal/shared-styles.css.js.map +1 -0
- package/labs/card/internal/shared-styles.scss +10 -0
- package/labs/card/outlined-card.d.ts +18 -0
- package/labs/card/outlined-card.js +21 -0
- package/labs/card/outlined-card.js.map +1 -0
- package/labs/item/internal/item.js +8 -8
- package/labs/item/internal/item.js.map +1 -1
- package/labs/navigationbar/internal/constants.js.map +1 -1
- package/labs/navigationbar/internal/navigation-bar.d.ts +3 -0
- package/labs/navigationbar/internal/navigation-bar.js +18 -11
- package/labs/navigationbar/internal/navigation-bar.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-modal.d.ts +3 -0
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js +10 -3
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer.d.ts +3 -0
- package/labs/navigationdrawer/internal/navigation-drawer.js +8 -1
- package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -1
- package/labs/navigationtab/harness.js.map +1 -1
- package/labs/navigationtab/internal/navigation-tab.d.ts +6 -0
- package/labs/navigationtab/internal/navigation-tab.js +43 -27
- package/labs/navigationtab/internal/navigation-tab.js.map +1 -1
- package/labs/navigationtab/internal/state.js.map +1 -1
- package/labs/segmentedbutton/internal/segmented-button.d.ts +3 -0
- package/labs/segmentedbutton/internal/segmented-button.js +26 -12
- package/labs/segmentedbutton/internal/segmented-button.js.map +1 -1
- package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts +5 -0
- package/labs/segmentedbuttonset/internal/segmented-button-set.js +14 -9
- package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -1
- package/list/harness.d.ts +1 -1
- package/list/harness.js.map +1 -1
- package/list/internal/list-controller.d.ts +1 -1
- package/list/internal/list-controller.js +7 -3
- package/list/internal/list-controller.js.map +1 -1
- package/list/internal/list-navigation-helpers.js.map +1 -1
- package/list/internal/list.d.ts +2 -2
- package/list/internal/list.js +8 -6
- package/list/internal/list.js.map +1 -1
- package/list/internal/listitem/harness.d.ts +1 -1
- package/list/internal/listitem/harness.js.map +1 -1
- package/list/internal/listitem/list-item.d.ts +3 -2
- package/list/internal/listitem/list-item.js +19 -20
- package/list/internal/listitem/list-item.js.map +1 -1
- package/list/list-item.d.ts +4 -12
- package/list/list-item.js +4 -12
- package/list/list-item.js.map +1 -1
- package/menu/harness.js.map +1 -1
- package/menu/internal/_menu.scss +12 -1
- package/menu/internal/controllers/menuItemController.js +9 -4
- package/menu/internal/controllers/menuItemController.js.map +1 -1
- package/menu/internal/controllers/shared.d.ts +9 -1
- package/menu/internal/controllers/shared.js +4 -4
- package/menu/internal/controllers/shared.js.map +1 -1
- package/menu/internal/controllers/surfacePositionController.d.ts +15 -2
- package/menu/internal/controllers/surfacePositionController.js +124 -54
- package/menu/internal/controllers/surfacePositionController.js.map +1 -1
- package/menu/internal/controllers/typeaheadController.js +19 -14
- package/menu/internal/controllers/typeaheadController.js.map +1 -1
- package/menu/internal/menu-styles.css.js +1 -1
- package/menu/internal/menu-styles.css.js.map +1 -1
- package/menu/internal/menu.d.ts +43 -12
- package/menu/internal/menu.js +124 -57
- package/menu/internal/menu.js.map +1 -1
- package/menu/internal/menuitem/harness.js.map +1 -1
- package/menu/internal/menuitem/menu-item.d.ts +3 -2
- package/menu/internal/menuitem/menu-item.js +18 -19
- package/menu/internal/menuitem/menu-item.js.map +1 -1
- package/menu/internal/submenu/sub-menu.d.ts +8 -8
- package/menu/internal/submenu/sub-menu.js +31 -22
- package/menu/internal/submenu/sub-menu.js.map +1 -1
- package/menu/internal/types.js.map +1 -1
- package/package.json +1 -1
- package/progress/internal/_circular-progress.scss +2 -2
- package/progress/internal/_linear-progress.scss +1 -1
- package/progress/internal/circular-progress-styles.css.js +1 -1
- package/progress/internal/circular-progress-styles.css.js.map +1 -1
- package/progress/internal/circular-progress.js +11 -10
- package/progress/internal/circular-progress.js.map +1 -1
- package/progress/internal/linear-progress-styles.css.js +1 -1
- package/progress/internal/linear-progress-styles.css.js.map +1 -1
- package/progress/internal/linear-progress.d.ts +1 -1
- package/progress/internal/linear-progress.js +3 -3
- package/progress/internal/linear-progress.js.map +1 -1
- package/progress/internal/progress.js +4 -2
- package/progress/internal/progress.js.map +1 -1
- package/radio/internal/radio.d.ts +11 -27
- package/radio/internal/radio.js +30 -54
- package/radio/internal/radio.js.map +1 -1
- package/radio/internal/single-selection-controller.js +1 -1
- package/radio/internal/single-selection-controller.js.map +1 -1
- package/ripple/internal/ripple.js +14 -9
- package/ripple/internal/ripple.js.map +1 -1
- package/select/filled-select.js +1 -2
- package/select/filled-select.js.map +1 -1
- package/select/harness.js +1 -1
- package/select/harness.js.map +1 -1
- package/select/internal/select.d.ts +25 -34
- package/select/internal/select.js +101 -91
- package/select/internal/select.js.map +1 -1
- package/select/internal/selectoption/select-option.d.ts +8 -6
- package/select/internal/selectoption/select-option.js +23 -22
- package/select/internal/selectoption/select-option.js.map +1 -1
- package/select/internal/selectoption/selectOptionController.js +1 -1
- package/select/internal/selectoption/selectOptionController.js.map +1 -1
- package/select/outlined-select.js +1 -2
- package/select/outlined-select.js.map +1 -1
- package/slider/harness.js +5 -5
- package/slider/harness.js.map +1 -1
- package/slider/internal/slider.d.ts +16 -25
- package/slider/internal/slider.js +110 -114
- package/slider/internal/slider.js.map +1 -1
- package/switch/internal/switch.d.ts +11 -27
- package/switch/internal/switch.js +40 -80
- package/switch/internal/switch.js.map +1 -1
- package/tabs/harness.js +3 -3
- package/tabs/harness.js.map +1 -1
- package/tabs/internal/_tab.scss +27 -35
- package/tabs/internal/primary-tab.d.ts +0 -2
- package/tabs/internal/tab-styles.css.js +1 -1
- package/tabs/internal/tab-styles.css.js.map +1 -1
- package/tabs/internal/tab.d.ts +4 -5
- package/tabs/internal/tab.js +34 -22
- package/tabs/internal/tab.js.map +1 -1
- package/tabs/internal/tabs.d.ts +6 -2
- package/tabs/internal/tabs.js +18 -11
- package/tabs/internal/tabs.js.map +1 -1
- package/textfield/filled-text-field.js +1 -2
- package/textfield/filled-text-field.js.map +1 -1
- package/textfield/harness.js +3 -2
- package/textfield/harness.js.map +1 -1
- package/textfield/internal/text-field.d.ts +26 -18
- package/textfield/internal/text-field.js +81 -58
- package/textfield/internal/text-field.js.map +1 -1
- package/textfield/outlined-text-field.js +1 -2
- package/textfield/outlined-text-field.js.map +1 -1
- package/tokens/_index.scss +3 -0
- package/tokens/_md-comp-elevated-card.scss +63 -0
- package/tokens/_md-comp-filled-card.scss +63 -0
- package/tokens/_md-comp-icon.scss +2 -0
- package/tokens/_md-comp-outlined-card.scss +69 -0
- package/tokens/_md-comp-test-table.scss +1 -0
- package/internal/controller/element-internals.d.ts +0 -35
- package/internal/controller/element-internals.js +0 -24
- package/internal/controller/element-internals.js.map +0 -1
- package/select/internal/filled-forced-colors-styles.css.js +0 -9
- package/select/internal/filled-forced-colors-styles.css.js.map +0 -1
- package/select/internal/filled-forced-colors-styles.scss +0 -29
- package/select/internal/outlined-forced-colors-styles.css.js +0 -9
- package/select/internal/outlined-forced-colors-styles.css.js.map +0 -1
- package/select/internal/outlined-forced-colors-styles.scss +0 -29
- package/textfield/internal/filled-forced-colors-styles.css.js +0 -9
- package/textfield/internal/filled-forced-colors-styles.css.js.map +0 -1
- package/textfield/internal/filled-forced-colors-styles.scss +0 -29
- package/textfield/internal/outlined-forced-colors-styles.css.js +0 -9
- package/textfield/internal/outlined-forced-colors-styles.css.js.map +0 -1
- package/textfield/internal/outlined-forced-colors-styles.scss +0 -29
- /package/{select/internal/filled-forced-colors-styles.css.d.ts → labs/card/internal/elevated-styles.css.d.ts} +0 -0
- /package/{select/internal/outlined-forced-colors-styles.css.d.ts → labs/card/internal/filled-styles.css.d.ts} +0 -0
- /package/{textfield/internal/filled-forced-colors-styles.css.d.ts → labs/card/internal/outlined-styles.css.d.ts} +0 -0
- /package/{textfield/internal/outlined-forced-colors-styles.css.d.ts → labs/card/internal/shared-styles.css.d.ts} +0 -0
|
@@ -12,6 +12,8 @@ import { MultiActionChip } from './multi-action-chip.js';
|
|
|
12
12
|
import { renderRemoveButton } from './trailing-icons.js';
|
|
13
13
|
/**
|
|
14
14
|
* A filter chip component.
|
|
15
|
+
*
|
|
16
|
+
* @fires remove {Event} Dispatched when the remove button is clicked.
|
|
15
17
|
*/
|
|
16
18
|
export class FilterChip extends MultiActionChip {
|
|
17
19
|
constructor() {
|
|
@@ -34,13 +36,15 @@ export class FilterChip extends MultiActionChip {
|
|
|
34
36
|
renderPrimaryAction(content) {
|
|
35
37
|
const { ariaLabel } = this;
|
|
36
38
|
return html `
|
|
37
|
-
<button
|
|
39
|
+
<button
|
|
40
|
+
class="primary action"
|
|
38
41
|
id="button"
|
|
39
42
|
aria-label=${ariaLabel || nothing}
|
|
40
43
|
aria-pressed=${this.selected}
|
|
41
44
|
?disabled=${this.disabled && !this.alwaysFocusable}
|
|
42
45
|
@click=${this.handleClick}
|
|
43
|
-
|
|
46
|
+
>${content}</button
|
|
47
|
+
>
|
|
44
48
|
`;
|
|
45
49
|
}
|
|
46
50
|
renderLeadingIcon() {
|
|
@@ -49,7 +53,8 @@ export class FilterChip extends MultiActionChip {
|
|
|
49
53
|
}
|
|
50
54
|
return html `
|
|
51
55
|
<svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
|
|
52
|
-
<path
|
|
56
|
+
<path
|
|
57
|
+
d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
|
|
53
58
|
</svg>
|
|
54
59
|
`;
|
|
55
60
|
}
|
|
@@ -58,7 +63,7 @@ export class FilterChip extends MultiActionChip {
|
|
|
58
63
|
return renderRemoveButton({
|
|
59
64
|
focusListener,
|
|
60
65
|
ariaLabel: this.ariaLabelRemove,
|
|
61
|
-
disabled: this.disabled
|
|
66
|
+
disabled: this.disabled,
|
|
62
67
|
});
|
|
63
68
|
}
|
|
64
69
|
return nothing;
|
|
@@ -73,11 +78,12 @@ export class FilterChip extends MultiActionChip {
|
|
|
73
78
|
if (this.disabled) {
|
|
74
79
|
return;
|
|
75
80
|
}
|
|
81
|
+
this.selected = !this.selected;
|
|
76
82
|
const preventDefault = !redispatchEvent(this, event);
|
|
77
83
|
if (preventDefault) {
|
|
84
|
+
this.selected = !this.selected;
|
|
78
85
|
return;
|
|
79
86
|
}
|
|
80
|
-
this.selected = !this.selected;
|
|
81
87
|
}
|
|
82
88
|
}
|
|
83
89
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAC,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAEpE,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AAEvD
|
|
1
|
+
{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAC,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAEpE,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AAEvD;;;;GAIG;AACH,MAAM,OAAO,UAAW,SAAQ,eAAe;IAA/C;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QACH,aAAQ,GAAG,KAAK,CAAC;IAiF7D,CAAC;IA/EC,IAAc,SAAS;QACrB,OAAO,QAAQ,CAAC;IAClB,CAAC;IAOkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,IAAI,CAAC,SAAS;SAC/B,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;uBAClB,IAAI,CAAC,QAAQ;oBAChB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;iBACzC,IAAI,CAAC,WAAW;WACtB,OAAO;;KAEb,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;IAEkB,oBAAoB,CAAC,aAA4B;QAClE,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,kBAAkB,CAAC;gBACxB,aAAa;gBACb,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;SACJ;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,MAAM,cAAc,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrD,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,OAAO;SACR;IACH,CAAC;CACF;AAnF4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CAAmB;AACH;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAOxC;IADlB,KAAK,CAAC,iBAAiB,CAAC;iDAC6B;AAEnC;IADlB,KAAK,CAAC,kBAAkB,CAAC;kDAC6B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n @property({type: Boolean}) elevated = false;\n @property({type: Boolean}) removable = false;\n @property({type: Boolean, reflect: true}) selected = false;\n\n protected get primaryId() {\n return 'button';\n }\n\n @query('.primary.action')\n protected readonly primaryAction!: HTMLElement | null;\n @query('.trailing.action')\n protected readonly trailingAction!: HTMLElement | null;\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n elevated: this.elevated,\n selected: this.selected,\n 'has-trailing': this.removable,\n };\n }\n\n protected override renderPrimaryAction(content: unknown) {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button\n class=\"primary action\"\n id=\"button\"\n aria-label=${ariaLabel || nothing}\n aria-pressed=${this.selected}\n ?disabled=${this.disabled && !this.alwaysFocusable}\n @click=${this.handleClick}\n >${content}</button\n >\n `;\n }\n\n protected override renderLeadingIcon() {\n if (!this.selected) {\n return super.renderLeadingIcon();\n }\n\n return html`\n <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path\n d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n </svg>\n `;\n }\n\n protected override renderTrailingAction(focusListener: EventListener) {\n if (this.removable) {\n return renderRemoveButton({\n focusListener,\n ariaLabel: this.ariaLabelRemove,\n disabled: this.disabled,\n });\n }\n\n return nothing;\n }\n\n protected override renderOutline() {\n if (this.elevated) {\n return html`<md-elevation></md-elevation>`;\n }\n\n return super.renderOutline();\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n\n const preventDefault = !redispatchEvent(this, event);\n if (preventDefault) {\n this.selected = !this.selected;\n return;\n }\n }\n}\n"]}
|
|
@@ -10,6 +10,8 @@ import { MultiActionChip } from './multi-action-chip.js';
|
|
|
10
10
|
import { renderRemoveButton } from './trailing-icons.js';
|
|
11
11
|
/**
|
|
12
12
|
* An input chip component.
|
|
13
|
+
*
|
|
14
|
+
* @fires remove {Event} Dispatched when the remove button is clicked.
|
|
13
15
|
*/
|
|
14
16
|
export class InputChip extends MultiActionChip {
|
|
15
17
|
constructor() {
|
|
@@ -56,12 +58,14 @@ export class InputChip extends MultiActionChip {
|
|
|
56
58
|
const { ariaLabel } = this;
|
|
57
59
|
if (this.href) {
|
|
58
60
|
return html `
|
|
59
|
-
<a
|
|
61
|
+
<a
|
|
62
|
+
class="primary action"
|
|
60
63
|
id="link"
|
|
61
64
|
aria-label=${ariaLabel || nothing}
|
|
62
65
|
href=${this.href}
|
|
63
66
|
target=${this.target || nothing}
|
|
64
|
-
|
|
67
|
+
>${content}</a
|
|
68
|
+
>
|
|
65
69
|
`;
|
|
66
70
|
}
|
|
67
71
|
if (this.removeOnly) {
|
|
@@ -72,12 +76,14 @@ export class InputChip extends MultiActionChip {
|
|
|
72
76
|
`;
|
|
73
77
|
}
|
|
74
78
|
return html `
|
|
75
|
-
<button
|
|
79
|
+
<button
|
|
80
|
+
class="primary action"
|
|
76
81
|
id="button"
|
|
77
82
|
aria-label=${ariaLabel || nothing}
|
|
78
83
|
?disabled=${this.disabled && !this.alwaysFocusable}
|
|
79
84
|
type="button"
|
|
80
|
-
|
|
85
|
+
>${content}</button
|
|
86
|
+
>
|
|
81
87
|
`;
|
|
82
88
|
}
|
|
83
89
|
renderTrailingAction(focusListener) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAIlD,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AAEvD
|
|
1
|
+
{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.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, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class InputChip extends MultiActionChip {\n @property({type: Boolean}) avatar = false;\n @property() href = '';\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n @property({type: Boolean, reflect: true}) selected = false;\n\n protected get primaryId() {\n if (this.href) {\n return 'link';\n }\n\n if (this.removeOnly) {\n return '';\n }\n\n return 'button';\n }\n\n protected override get rippleDisabled() {\n // Link chips cannot be disabled\n return !this.href && this.disabled;\n }\n\n protected get primaryAction() {\n // Don't use @query() since a remove-only input chip still has a span that\n // has \"primary action\" classes.\n if (this.removeOnly) {\n return null;\n }\n\n return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n }\n\n @query('.trailing.action')\n protected readonly trailingAction!: HTMLElement | null;\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n avatar: this.avatar,\n // Link chips cannot be disabled\n disabled: !this.href && this.disabled,\n link: !!this.href,\n selected: this.selected,\n 'has-trailing': true,\n };\n }\n\n protected override renderPrimaryAction(content: unknown) {\n const {ariaLabel} = this as ARIAMixinStrict;\n if (this.href) {\n return html`\n <a\n class=\"primary action\"\n id=\"link\"\n aria-label=${ariaLabel || nothing}\n href=${this.href}\n target=${this.target || nothing}\n >${content}</a\n >\n `;\n }\n\n if (this.removeOnly) {\n return html`\n <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n ${content}\n </span>\n `;\n }\n\n return html`\n <button\n class=\"primary action\"\n id=\"button\"\n aria-label=${ariaLabel || nothing}\n ?disabled=${this.disabled && !this.alwaysFocusable}\n type=\"button\"\n >${content}</button\n >\n `;\n }\n\n protected override renderTrailingAction(focusListener: EventListener) {\n return renderRemoveButton({\n focusListener,\n ariaLabel: this.ariaLabelRemove,\n disabled: !this.href && this.disabled,\n tabbable: this.removeOnly,\n });\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-action-chip.js","sourceRoot":"","sources":["multi-action-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,KAAK,CAAC;AAInC,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAgB,eAAgB,SAAQ,IAAI;IAChD,IAAI,eAAe;QACjB,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE;YACxC,OAAO,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAE,CAAC;SAC9C;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,UAAU,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IAC7C,CAAC;IACD,IAAI,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"multi-action-chip.js","sourceRoot":"","sources":["multi-action-chip.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} from 'lit';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\nconst ARIA_LABEL_REMOVE = 'aria-label-remove';\n\n/**\n * A chip component with multiple actions.\n */\nexport abstract class MultiActionChip extends Chip {\n get ariaLabelRemove(): string {\n if (this.hasAttribute(ARIA_LABEL_REMOVE)) {\n return this.getAttribute(ARIA_LABEL_REMOVE)!;\n }\n\n const {ariaLabel} = this as ARIAMixinStrict;\n return `Remove ${ariaLabel || this.label}`;\n }\n set ariaLabelRemove(ariaLabel: string | null) {\n const prev = this.ariaLabelRemove;\n if (ariaLabel === prev) {\n return;\n }\n\n if (ariaLabel === null) {\n this.removeAttribute(ARIA_LABEL_REMOVE);\n } else {\n this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel);\n }\n\n this.requestUpdate();\n }\n\n protected abstract readonly primaryAction: HTMLElement | null;\n protected abstract readonly trailingAction: HTMLElement | null;\n\n constructor() {\n super();\n this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);\n if (!isServer) {\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n }\n }\n\n override focus(options?: FocusOptions & {trailing?: boolean}) {\n const isFocusable = this.alwaysFocusable || !this.disabled;\n if (isFocusable && options?.trailing && this.trailingAction) {\n this.trailingAction.focus(options);\n return;\n }\n\n super.focus(options as FocusOptions);\n }\n\n protected override renderContainerContent() {\n return html`\n ${super.renderContainerContent()}\n ${this.renderTrailingAction(this.handleTrailingActionFocus)}\n `;\n }\n\n protected abstract renderTrailingAction(\n focusListener: EventListener,\n ): unknown;\n\n private handleKeyDown(event: KeyboardEvent) {\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n // Ignore non-navigation keys.\n if (!isLeft && !isRight) {\n return;\n }\n\n if (!this.primaryAction || !this.trailingAction) {\n // Does not have multiple actions.\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const isPrimaryFocused = this.primaryAction?.matches(':focus-within');\n const isTrailingFocused = this.trailingAction?.matches(':focus-within');\n\n if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) {\n // Moving outside of the chip, it will be handled by the chip set.\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n // Don't let the chip set handle this navigation event.\n event.stopPropagation();\n const actionToFocus = forwards ? this.trailingAction : this.primaryAction;\n actionToFocus.focus();\n }\n\n private handleTrailingActionFocus() {\n const {primaryAction, trailingAction} = this;\n if (!primaryAction || !trailingAction) {\n return;\n }\n\n // Temporarily turn off the primary action's focusability. This allows\n // shift+tab from the trailing action to move to the previous chip rather\n // than the primary action in the same chip.\n primaryAction.tabIndex = -1;\n trailingAction.addEventListener(\n 'focusout',\n () => {\n primaryAction.tabIndex = 0;\n },\n {once: true},\n );\n }\n}\n"]}
|
|
@@ -12,5 +12,5 @@ interface RemoveButtonProperties {
|
|
|
12
12
|
tabbable?: boolean;
|
|
13
13
|
}
|
|
14
14
|
/** @protected */
|
|
15
|
-
export declare function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable }: RemoveButtonProperties): import("lit-html").TemplateResult<1>;
|
|
15
|
+
export declare function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable, }: RemoveButtonProperties): import("lit-html").TemplateResult<1>;
|
|
16
16
|
export {};
|
|
@@ -7,18 +7,19 @@ import '../../focus/md-focus-ring.js';
|
|
|
7
7
|
import '../../ripple/ripple.js';
|
|
8
8
|
import { html, nothing } from 'lit';
|
|
9
9
|
/** @protected */
|
|
10
|
-
export function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable = false }) {
|
|
10
|
+
export function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable = false, }) {
|
|
11
11
|
return html `
|
|
12
|
-
<button
|
|
12
|
+
<button
|
|
13
|
+
class="trailing action"
|
|
13
14
|
aria-label=${ariaLabel}
|
|
14
15
|
tabindex=${!tabbable ? -1 : nothing}
|
|
15
16
|
@click=${handleRemoveClick}
|
|
16
|
-
@focus=${focusListener}
|
|
17
|
-
>
|
|
17
|
+
@focus=${focusListener}>
|
|
18
18
|
<md-focus-ring part="trailing-focus-ring"></md-focus-ring>
|
|
19
19
|
<md-ripple ?disabled=${disabled}></md-ripple>
|
|
20
20
|
<svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
|
|
21
|
-
<path
|
|
21
|
+
<path
|
|
22
|
+
d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
|
|
22
23
|
</svg>
|
|
23
24
|
<span class="touch"></span>
|
|
24
25
|
</button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"trailing-icons.js","sourceRoot":"","sources":["trailing-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAWlC,iBAAiB;AACjB,MAAM,UAAU,kBAAkB,
|
|
1
|
+
{"version":3,"file":"trailing-icons.js","sourceRoot":"","sources":["trailing-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAWlC,iBAAiB;AACjB,MAAM,UAAU,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,KAAK,GACO;IACvB,OAAO,IAAI,CAAA;;;mBAGM,SAAS;iBACX,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;eAC1B,iBAAiB;eACjB,aAAa;;6BAEC,QAAQ;;;;;;;GAOlC,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAa,KAAY;IACjD,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;KACR;IAED,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,aAAa,CACxC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACxC,CAAC;IACF,IAAI,cAAc,EAAE;QAClB,OAAO;KACR;IAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAChB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, nothing} from 'lit';\n\nimport {Chip} from './chip.js';\n\ninterface RemoveButtonProperties {\n ariaLabel: string;\n disabled: boolean;\n focusListener: EventListener;\n tabbable?: boolean;\n}\n\n/** @protected */\nexport function renderRemoveButton({\n ariaLabel,\n disabled,\n focusListener,\n tabbable = false,\n}: RemoveButtonProperties) {\n return html`\n <button\n class=\"trailing action\"\n aria-label=${ariaLabel}\n tabindex=${!tabbable ? -1 : nothing}\n @click=${handleRemoveClick}\n @focus=${focusListener}>\n <md-focus-ring part=\"trailing-focus-ring\"></md-focus-ring>\n <md-ripple ?disabled=${disabled}></md-ripple>\n <svg class=\"trailing icon\" viewBox=\"0 96 960 960\" aria-hidden=\"true\">\n <path\n d=\"m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z\" />\n </svg>\n <span class=\"touch\"></span>\n </button>\n `;\n}\n\nfunction handleRemoveClick(this: Chip, event: Event) {\n if (this.disabled) {\n return;\n }\n\n event.stopPropagation();\n const preventDefault = !this.dispatchEvent(\n new Event('remove', {cancelable: true}),\n );\n if (preventDefault) {\n return;\n }\n\n this.remove();\n}\n"]}
|
package/common.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ import './button/outlined-button.js';
|
|
|
16
16
|
import './button/text-button.js';
|
|
17
17
|
import './checkbox/checkbox.js';
|
|
18
18
|
import './chips/assist-chip.js';
|
|
19
|
+
import './chips/chip-set.js';
|
|
19
20
|
import './chips/filter-chip.js';
|
|
20
21
|
import './dialog/dialog.js';
|
|
21
22
|
import './icon/icon.js';
|
|
@@ -38,6 +39,7 @@ export * from './button/outlined-button.js';
|
|
|
38
39
|
export * from './button/text-button.js';
|
|
39
40
|
export * from './checkbox/checkbox.js';
|
|
40
41
|
export * from './chips/assist-chip.js';
|
|
42
|
+
export * from './chips/chip-set.js';
|
|
41
43
|
export * from './chips/filter-chip.js';
|
|
42
44
|
export * from './dialog/dialog.js';
|
|
43
45
|
export * from './icon/icon.js';
|
package/common.js
CHANGED
|
@@ -18,6 +18,7 @@ import './button/outlined-button.js';
|
|
|
18
18
|
import './button/text-button.js';
|
|
19
19
|
import './checkbox/checkbox.js';
|
|
20
20
|
import './chips/assist-chip.js';
|
|
21
|
+
import './chips/chip-set.js';
|
|
21
22
|
import './chips/filter-chip.js';
|
|
22
23
|
import './dialog/dialog.js';
|
|
23
24
|
import './icon/icon.js';
|
|
@@ -44,6 +45,7 @@ export * from './button/outlined-button.js';
|
|
|
44
45
|
export * from './button/text-button.js';
|
|
45
46
|
export * from './checkbox/checkbox.js';
|
|
46
47
|
export * from './chips/assist-chip.js';
|
|
48
|
+
export * from './chips/chip-set.js';
|
|
47
49
|
export * from './chips/filter-chip.js';
|
|
48
50
|
export * from './dialog/dialog.js';
|
|
49
51
|
export * from './icon/icon.js';
|
package/common.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"","sources":["common.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,yBAAyB;AACzB,uBAAuB;AACvB,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,6BAA6B,CAAC;AACrC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,qBAAqB;AACrB,4BAA4B;AAE5B,yBAAyB;AACzB,uBAAuB;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oCAAoC,CAAC;AACnD,qBAAqB;AACrB,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/primary-tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/primary-tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["common.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,yBAAyB;AACzB,uBAAuB;AACvB,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,6BAA6B,CAAC;AACrC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,qBAAqB;AACrB,4BAA4B;AAE5B,yBAAyB;AACzB,uBAAuB;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oCAAoC,CAAC;AACnD,qBAAqB;AACrB,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/chip-set.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/primary-tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/chip-set.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/primary-tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}
|
package/dialog/harness.js
CHANGED
|
@@ -10,8 +10,7 @@ import { Harness } from '../testing/harness.js';
|
|
|
10
10
|
export class DialogHarness extends Harness {
|
|
11
11
|
async getInteractiveElement() {
|
|
12
12
|
await this.element.updateComplete;
|
|
13
|
-
return this.element.querySelector('[autocomplete]') ??
|
|
14
|
-
this.element;
|
|
13
|
+
return (this.element.querySelector('[autocomplete]') ?? this.element);
|
|
15
14
|
}
|
|
16
15
|
}
|
|
17
16
|
//# sourceMappingURL=harness.js.map
|
package/dialog/harness.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,gBAAgB,CAAC
|
|
1
|
+
{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,gBAAgB,CAAC,IAAI,IAAI,CAAC,OAAO,CAC1E,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Dialog} from './internal/dialog.js';\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n override async getInteractiveElement() {\n await this.element.updateComplete;\n return (\n this.element.querySelector<HTMLElement>('[autocomplete]') ?? this.element\n );\n }\n}\n"]}
|
|
@@ -12,20 +12,21 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION = {
|
|
|
12
12
|
[
|
|
13
13
|
// Dialog slide down
|
|
14
14
|
[{ 'transform': 'translateY(-50px)' }, { 'transform': 'translateY(0)' }],
|
|
15
|
-
{ duration: 500, easing: EASING.EMPHASIZED }
|
|
15
|
+
{ duration: 500, easing: EASING.EMPHASIZED },
|
|
16
16
|
],
|
|
17
17
|
],
|
|
18
18
|
scrim: [
|
|
19
19
|
[
|
|
20
20
|
// Scrim fade in
|
|
21
|
-
[{ 'opacity': 0 }, { 'opacity': 0.32 }],
|
|
21
|
+
[{ 'opacity': 0 }, { 'opacity': 0.32 }],
|
|
22
|
+
{ duration: 500, easing: 'linear' },
|
|
22
23
|
],
|
|
23
24
|
],
|
|
24
25
|
container: [
|
|
25
26
|
[
|
|
26
27
|
// Container fade in
|
|
27
28
|
[{ 'opacity': 0 }, { 'opacity': 1 }],
|
|
28
|
-
{ duration: 50, easing: 'linear', pseudoElement: '::before' }
|
|
29
|
+
{ duration: 50, easing: 'linear', pseudoElement: '::before' },
|
|
29
30
|
],
|
|
30
31
|
[
|
|
31
32
|
// Container grow
|
|
@@ -41,21 +42,21 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION = {
|
|
|
41
42
|
[
|
|
42
43
|
// Headline fade in
|
|
43
44
|
[{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
|
|
44
|
-
{ duration: 250, easing: 'linear', fill: 'forwards' }
|
|
45
|
+
{ duration: 250, easing: 'linear', fill: 'forwards' },
|
|
45
46
|
],
|
|
46
47
|
],
|
|
47
48
|
content: [
|
|
48
49
|
[
|
|
49
50
|
// Content fade in
|
|
50
51
|
[{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
|
|
51
|
-
{ duration: 250, easing: 'linear', fill: 'forwards' }
|
|
52
|
+
{ duration: 250, easing: 'linear', fill: 'forwards' },
|
|
52
53
|
],
|
|
53
54
|
],
|
|
54
55
|
actions: [
|
|
55
56
|
[
|
|
56
57
|
// Actions fade in
|
|
57
58
|
[{ 'opacity': 0 }, { 'opacity': 0, offset: 0.5 }, { 'opacity': 1 }],
|
|
58
|
-
{ duration: 300, easing: 'linear', fill: 'forwards' }
|
|
59
|
+
{ duration: 300, easing: 'linear', fill: 'forwards' },
|
|
59
60
|
],
|
|
60
61
|
],
|
|
61
62
|
};
|
|
@@ -67,13 +68,14 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION = {
|
|
|
67
68
|
[
|
|
68
69
|
// Dialog slide up
|
|
69
70
|
[{ 'transform': 'translateY(0)' }, { 'transform': 'translateY(-50px)' }],
|
|
70
|
-
{ duration: 150, easing: EASING.EMPHASIZED_ACCELERATE }
|
|
71
|
+
{ duration: 150, easing: EASING.EMPHASIZED_ACCELERATE },
|
|
71
72
|
],
|
|
72
73
|
],
|
|
73
74
|
scrim: [
|
|
74
75
|
[
|
|
75
76
|
// Scrim fade out
|
|
76
|
-
[{ 'opacity': 0.32 }, { 'opacity': 0 }],
|
|
77
|
+
[{ 'opacity': 0.32 }, { 'opacity': 0 }],
|
|
78
|
+
{ duration: 150, easing: 'linear' },
|
|
77
79
|
],
|
|
78
80
|
],
|
|
79
81
|
container: [
|
|
@@ -90,27 +92,27 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION = {
|
|
|
90
92
|
// Container fade out
|
|
91
93
|
[{ 'opacity': '1' }, { 'opacity': '0' }],
|
|
92
94
|
{ delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' },
|
|
93
|
-
]
|
|
95
|
+
],
|
|
94
96
|
],
|
|
95
97
|
headline: [
|
|
96
98
|
[
|
|
97
99
|
// Headline fade out
|
|
98
100
|
[{ 'opacity': 1 }, { 'opacity': 0 }],
|
|
99
|
-
{ duration: 100, easing: 'linear', fill: 'forwards' }
|
|
101
|
+
{ duration: 100, easing: 'linear', fill: 'forwards' },
|
|
100
102
|
],
|
|
101
103
|
],
|
|
102
104
|
content: [
|
|
103
105
|
[
|
|
104
106
|
// Content fade out
|
|
105
107
|
[{ 'opacity': 1 }, { 'opacity': 0 }],
|
|
106
|
-
{ duration: 100, easing: 'linear', fill: 'forwards' }
|
|
108
|
+
{ duration: 100, easing: 'linear', fill: 'forwards' },
|
|
107
109
|
],
|
|
108
110
|
],
|
|
109
111
|
actions: [
|
|
110
112
|
[
|
|
111
113
|
// Actions fade out
|
|
112
114
|
[{ 'opacity': 1 }, { 'opacity': 0 }],
|
|
113
|
-
{ duration: 100, easing: 'linear', fill: 'forwards' }
|
|
115
|
+
{ duration: 100, easing: 'linear', fill: 'forwards' },
|
|
114
116
|
],
|
|
115
117
|
],
|
|
116
118
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animations.js","sourceRoot":"","sources":["animations.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AA0C1D;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAoB;IAC5D,MAAM,EAAE;QACN;YACE,oBAAoB;YACpB,CAAC,EAAC,WAAW,EAAE,mBAAmB,EAAC,EAAE,EAAC,WAAW,EAAE,eAAe,EAAC,CAAC;YACpE,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,UAAU,EAAC;SAC3C;KACF;IACD,KAAK,EAAE;QACL;YACE,gBAAgB;YAChB,CAAC,EAAC,SAAS,EAAE,CAAC,EAAC,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"animations.js","sourceRoot":"","sources":["animations.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A dialog animation's arguments. See `Element.prototype.animate`.\n */\nexport type DialogAnimationArgs = Parameters<Element['animate']>;\n\n/**\n * A collection of dialog animations. Each element of a dialog may have multiple\n * animations.\n */\nexport interface DialogAnimation {\n /**\n * Animations for the dialog itself.\n */\n dialog?: DialogAnimationArgs[];\n\n /**\n * Animations for the scrim backdrop.\n */\n scrim?: DialogAnimationArgs[];\n\n /**\n * Animations for the container of the dialog.\n */\n container?: DialogAnimationArgs[];\n\n /**\n * Animations for the headline section.\n */\n headline?: DialogAnimationArgs[];\n\n /**\n * Animations for the contents section.\n */\n content?: DialogAnimationArgs[];\n /**\n * Animations for the actions section.\n */\n actions?: DialogAnimationArgs[];\n}\n\n/**\n * The default dialog open animation.\n */\nexport const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {\n dialog: [\n [\n // Dialog slide down\n [{'transform': 'translateY(-50px)'}, {'transform': 'translateY(0)'}],\n {duration: 500, easing: EASING.EMPHASIZED},\n ],\n ],\n scrim: [\n [\n // Scrim fade in\n [{'opacity': 0}, {'opacity': 0.32}],\n {duration: 500, easing: 'linear'},\n ],\n ],\n container: [\n [\n // Container fade in\n [{'opacity': 0}, {'opacity': 1}],\n {duration: 50, easing: 'linear', pseudoElement: '::before'},\n ],\n [\n // Container grow\n // Note: current spec says to grow from 0dp->100% and shrink from\n // 100%->35%. We change this to 35%->100% to simplify the animation that\n // is supposed to clip content as it grows. From 0dp it's possible to see\n // text/actions appear before the container has fully grown.\n [{'height': '35%'}, {'height': '100%'}],\n {duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before'},\n ],\n ],\n headline: [\n [\n // Headline fade in\n [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n {duration: 250, easing: 'linear', fill: 'forwards'},\n ],\n ],\n content: [\n [\n // Content fade in\n [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n {duration: 250, easing: 'linear', fill: 'forwards'},\n ],\n ],\n actions: [\n [\n // Actions fade in\n [{'opacity': 0}, {'opacity': 0, offset: 0.5}, {'opacity': 1}],\n {duration: 300, easing: 'linear', fill: 'forwards'},\n ],\n ],\n};\n\n/**\n * The default dialog close animation.\n */\nexport const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {\n dialog: [\n [\n // Dialog slide up\n [{'transform': 'translateY(0)'}, {'transform': 'translateY(-50px)'}],\n {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE},\n ],\n ],\n scrim: [\n [\n // Scrim fade out\n [{'opacity': 0.32}, {'opacity': 0}],\n {duration: 150, easing: 'linear'},\n ],\n ],\n container: [\n [\n // Container shrink\n [{'height': '100%'}, {'height': '35%'}],\n {\n duration: 150,\n easing: EASING.EMPHASIZED_ACCELERATE,\n pseudoElement: '::before',\n },\n ],\n [\n // Container fade out\n [{'opacity': '1'}, {'opacity': '0'}],\n {delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before'},\n ],\n ],\n headline: [\n [\n // Headline fade out\n [{'opacity': 1}, {'opacity': 0}],\n {duration: 100, easing: 'linear', fill: 'forwards'},\n ],\n ],\n content: [\n [\n // Content fade out\n [{'opacity': 1}, {'opacity': 0}],\n {duration: 100, easing: 'linear', fill: 'forwards'},\n ],\n ],\n actions: [\n [\n // Actions fade out\n [{'opacity': 1}, {'opacity': 0}],\n {duration: 100, easing: 'linear', fill: 'forwards'},\n ],\n ],\n};\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);
|
|
7
|
+
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);margin-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=dialog-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);
|
|
1
|
+
{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);margin-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}
|
|
@@ -9,12 +9,12 @@ import { DialogAnimation } from './animations.js';
|
|
|
9
9
|
/**
|
|
10
10
|
* A dialog component.
|
|
11
11
|
*
|
|
12
|
-
* @fires open Dispatched when the dialog is opening before any animations.
|
|
13
|
-
* @fires opened Dispatched when the dialog has opened after any animations.
|
|
14
|
-
* @fires close Dispatched when the dialog is closing before any animations.
|
|
15
|
-
* @fires closed Dispatched when the dialog has closed after any animations.
|
|
16
|
-
* @fires cancel Dispatched when the dialog has been canceled by clicking
|
|
17
|
-
*
|
|
12
|
+
* @fires open {Event} Dispatched when the dialog is opening before any animations.
|
|
13
|
+
* @fires opened {Event} Dispatched when the dialog has opened after any animations.
|
|
14
|
+
* @fires close {Event} Dispatched when the dialog is closing before any animations.
|
|
15
|
+
* @fires closed {Event} Dispatched when the dialog has closed after any animations.
|
|
16
|
+
* @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
|
|
17
|
+
* on the scrim or pressing Escape.
|
|
18
18
|
*/
|
|
19
19
|
export declare class Dialog extends LitElement {
|
|
20
20
|
/** @nocollapse */
|