@material/web 1.0.0-pre.7 → 1.0.0-pre.8
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 +3 -3
- package/aria/aria.js +37 -13
- package/aria/aria.js.map +1 -1
- package/aria/delegate.d.ts +1 -1
- package/aria/delegate.js +1 -1
- package/aria/delegate.js.map +1 -1
- package/badge/lib/badge.d.ts +0 -3
- package/badge/lib/badge.js +4 -6
- package/badge/lib/badge.js.map +1 -1
- package/button/lib/_elevated-button.scss +35 -6
- package/button/lib/_filled-button.scss +35 -3
- package/button/lib/_outlined-button.scss +35 -6
- package/button/lib/_shared.scss +4 -2
- package/button/lib/_text-button.scss +35 -6
- package/button/lib/_tonal-button.scss +34 -7
- package/button/lib/button.d.ts +23 -26
- package/button/lib/button.js +12 -30
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-button.d.ts +6 -4
- package/button/lib/elevated-button.js.map +1 -1
- package/button/lib/elevated-styles.css.js +1 -1
- package/button/lib/elevated-styles.css.js.map +1 -1
- package/button/lib/filled-button.d.ts +6 -4
- package/button/lib/filled-button.js.map +1 -1
- package/button/lib/filled-styles.css.js +1 -1
- package/button/lib/filled-styles.css.js.map +1 -1
- package/button/lib/outlined-button.d.ts +6 -4
- package/button/lib/outlined-button.js.map +1 -1
- package/button/lib/outlined-styles.css.js +1 -1
- package/button/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/shared-styles.css.js +1 -1
- package/button/lib/shared-styles.css.js.map +1 -1
- package/button/lib/text-button.d.ts +5 -2
- package/button/lib/text-button.js.map +1 -1
- package/button/lib/text-styles.css.js +1 -1
- package/button/lib/text-styles.css.js.map +1 -1
- package/button/lib/tonal-button.d.ts +6 -4
- package/button/lib/tonal-button.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/checkbox/lib/_checkbox.scss +48 -47
- package/checkbox/lib/checkbox-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/checkbox/lib/checkbox.d.ts +2 -6
- package/checkbox/lib/checkbox.js +3 -20
- package/checkbox/lib/checkbox.js.map +1 -1
- package/checkbox/lib/forced-colors-styles.css.js +1 -1
- package/checkbox/lib/forced-colors-styles.css.js.map +1 -1
- package/chips/assist-chip.js +2 -1
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.js +2 -1
- package/chips/filter-chip.js.map +1 -1
- package/chips/lib/_assist-chip.scss +37 -3
- package/chips/lib/_elevated.scss +60 -0
- package/chips/lib/_filter-chip.scss +43 -9
- package/chips/lib/_shared.scss +36 -76
- package/chips/lib/_suggestion-chip.scss +36 -5
- package/chips/lib/assist-chip.d.ts +12 -0
- package/chips/lib/assist-chip.js +64 -0
- package/chips/lib/assist-chip.js.map +1 -1
- package/chips/lib/assist-styles.css.js +1 -1
- package/chips/lib/assist-styles.css.js.map +1 -1
- package/chips/lib/chip.d.ts +19 -16
- package/chips/lib/chip.js +43 -63
- package/chips/lib/chip.js.map +1 -1
- package/chips/lib/elevated-styles.css.d.ts +1 -0
- package/chips/lib/elevated-styles.css.js +9 -0
- package/chips/lib/elevated-styles.css.js.map +1 -0
- package/chips/lib/elevated-styles.scss +10 -0
- package/chips/lib/filter-chip.d.ts +6 -1
- package/chips/lib/filter-chip.js +38 -5
- package/chips/lib/filter-chip.js.map +1 -1
- package/chips/lib/filter-styles.css.js +1 -1
- package/chips/lib/filter-styles.css.js.map +1 -1
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-chip.d.ts +2 -2
- package/chips/lib/suggestion-chip.js +4 -2
- package/chips/lib/suggestion-chip.js.map +1 -1
- package/chips/lib/suggestion-styles.css.js +1 -1
- package/chips/lib/suggestion-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +2 -1
- package/chips/suggestion-chip.js.map +1 -1
- package/circularprogress/lib/_circular-progress.scss +13 -7
- package/circularprogress/lib/circular-progress-styles.css.js +1 -1
- package/circularprogress/lib/circular-progress-styles.css.js.map +1 -1
- package/circularprogress/lib/circular-progress.d.ts +5 -6
- package/circularprogress/lib/circular-progress.js +1 -2
- package/circularprogress/lib/circular-progress.js.map +1 -1
- package/dialog/lib/_dialog.scss +0 -1
- package/dialog/lib/_tokens.scss +0 -1
- package/dialog/lib/dialog.d.ts +10 -10
- package/dialog/lib/dialog.js +8 -7
- package/dialog/lib/dialog.js.map +1 -1
- package/elevation/lib/elevation.d.ts +1 -1
- package/elevation/lib/elevation.js.map +1 -1
- package/fab/branded-fab.d.ts +3 -0
- package/fab/lib/_fab-branded.scss +58 -4
- package/fab/lib/_fab.scss +80 -6
- package/fab/lib/_shared.scss +8 -3
- package/fab/lib/fab-branded-styles.css.js +1 -1
- package/fab/lib/fab-branded-styles.css.js.map +1 -1
- package/fab/lib/fab-styles.css.js +1 -1
- package/fab/lib/fab-styles.css.js.map +1 -1
- package/fab/lib/fab.d.ts +4 -0
- package/fab/lib/forced-colors-styles.css.js +1 -1
- package/fab/lib/forced-colors-styles.css.js.map +1 -1
- package/fab/lib/shared-styles.css.js +1 -1
- package/fab/lib/shared-styles.css.js.map +1 -1
- package/fab/lib/shared.d.ts +12 -15
- package/fab/lib/shared.js +2 -26
- package/fab/lib/shared.js.map +1 -1
- package/field/lib/_filled-field.scss +47 -12
- package/field/lib/_outlined-field.scss +39 -12
- package/field/lib/filled-styles.css.js +1 -1
- package/field/lib/filled-styles.css.js.map +1 -1
- package/field/lib/outlined-styles.css.js +1 -1
- package/field/lib/outlined-styles.css.js.map +1 -1
- package/focus/focus-ring.d.ts +2 -0
- package/focus/focus-ring.js +2 -0
- package/focus/focus-ring.js.map +1 -1
- package/focus/lib/_focus-ring.scss +49 -34
- package/focus/lib/focus-ring-styles.css.js +1 -1
- package/focus/lib/focus-ring-styles.css.js.map +1 -1
- package/focus/lib/focus-ring.d.ts +59 -12
- package/focus/lib/focus-ring.js +116 -11
- package/focus/lib/focus-ring.js.map +1 -1
- package/iconbutton/filled-icon-button.d.ts +6 -2
- package/iconbutton/filled-icon-button.js.map +1 -1
- package/iconbutton/filled-tonal-icon-button.d.ts +6 -2
- package/iconbutton/filled-tonal-icon-button.js.map +1 -1
- package/iconbutton/harness.d.ts +1 -1
- package/iconbutton/harness.js +4 -1
- package/iconbutton/harness.js.map +1 -1
- package/iconbutton/lib/_filled-icon-button.scss +38 -13
- package/iconbutton/lib/_filled-tonal-icon-button.scss +38 -11
- package/iconbutton/lib/_outlined-icon-button.scss +38 -13
- package/iconbutton/lib/_shared.scss +4 -6
- package/iconbutton/lib/_standard-icon-button.scss +14 -14
- package/iconbutton/lib/filled-styles.css.js +1 -1
- package/iconbutton/lib/filled-styles.css.js.map +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button.d.ts +17 -21
- package/iconbutton/lib/icon-button.js +12 -28
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/iconbutton/lib/outlined-styles.css.js +1 -1
- package/iconbutton/lib/outlined-styles.css.js.map +1 -1
- package/iconbutton/lib/shared-styles.css.js +1 -1
- package/iconbutton/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.js.map +1 -1
- package/iconbutton/outlined-icon-button.d.ts +5 -2
- package/iconbutton/outlined-icon-button.js.map +1 -1
- package/iconbutton/standard-icon-button.d.ts +5 -2
- package/iconbutton/standard-icon-button.js.map +1 -1
- package/linearprogress/lib/_linear-progress.scss +78 -72
- package/linearprogress/lib/linear-progress.d.ts +5 -5
- package/linearprogress/lib/linear-progress.js +1 -1
- package/linearprogress/lib/linear-progress.js.map +1 -1
- package/list/lib/_list.scss +4 -2
- package/list/lib/list.d.ts +7 -12
- package/list/lib/list.js +2 -11
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/_list-item.scss +8 -4
- package/list/lib/listitem/list-item-styles.css.js +1 -1
- package/list/lib/listitem/list-item-styles.css.js.map +1 -1
- package/list/lib/listitem/list-item.d.ts +27 -27
- package/list/lib/listitem/list-item.js +4 -29
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link.js +1 -3
- package/list/lib/listitemlink/list-item-link.js.map +1 -1
- package/menu/lib/_menu.scss +4 -2
- package/menu/lib/menu-styles.css.js +1 -1
- package/menu/lib/menu-styles.css.js.map +1 -1
- package/menu/lib/menu.d.ts +31 -39
- package/menu/lib/menu.js +14 -20
- package/menu/lib/menu.js.map +1 -1
- package/menu/lib/menuitem/_menu-item.scss +4 -2
- package/menu/lib/shared.d.ts +14 -0
- package/menu/lib/shared.js +18 -0
- package/menu/lib/shared.js.map +1 -1
- package/menu/lib/submenuitem/sub-menu-item.d.ts +16 -11
- package/menu/lib/submenuitem/sub-menu-item.js +20 -3
- package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/lib/typeaheadController.d.ts +9 -9
- package/menu/lib/typeaheadController.js.map +1 -1
- package/navigationbar/lib/navigation-bar.d.ts +2 -2
- package/navigationbar/lib/navigation-bar.js.map +1 -1
- package/navigationdrawer/lib/_navigation-drawer-modal.scss +0 -3
- package/navigationdrawer/lib/_navigation-drawer.scss +0 -3
- package/navigationdrawer/lib/_shared.scss +1 -4
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal.d.ts +3 -3
- package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer.d.ts +2 -2
- package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
- package/navigationdrawer/lib/shared-styles.css.js +1 -1
- package/navigationdrawer/lib/shared-styles.css.js.map +1 -1
- package/navigationtab/lib/_navigation-tab.scss +2 -2
- package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
- package/navigationtab/lib/navigation-tab.d.ts +9 -17
- package/navigationtab/lib/navigation-tab.js +3 -22
- package/navigationtab/lib/navigation-tab.js.map +1 -1
- package/navigationtab/lib/state.d.ts +1 -1
- package/navigationtab/lib/state.js.map +1 -1
- package/package.json +1 -1
- package/radio/lib/_radio.scss +1 -1
- package/radio/lib/radio-styles.css.js +1 -1
- package/radio/lib/radio-styles.css.js.map +1 -1
- package/radio/lib/radio.d.ts +2 -7
- package/radio/lib/radio.js +2 -22
- package/radio/lib/radio.js.map +1 -1
- package/ripple/lib/ripple.js +4 -0
- package/ripple/lib/ripple.js.map +1 -1
- package/segmentedbutton/lib/segmented-button.d.ts +15 -21
- package/segmentedbutton/lib/segmented-button.js +3 -24
- package/segmentedbutton/lib/segmented-button.js.map +1 -1
- package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +32 -13
- package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/segmentedbuttonset/lib/segmented-button-set.d.ts +1 -1
- package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
- package/select/lib/_filled-select.scss +66 -7
- package/select/lib/_outlined-select.scss +41 -7
- package/select/lib/filled-select-styles.css.js +1 -1
- package/select/lib/filled-select-styles.css.js.map +1 -1
- package/select/lib/outlined-select-styles.css.js +1 -1
- package/select/lib/outlined-select-styles.css.js.map +1 -1
- package/select/lib/select.d.ts +46 -48
- package/select/lib/select.js +21 -19
- package/select/lib/select.js.map +1 -1
- package/slider/harness.d.ts +1 -1
- package/slider/harness.js +9 -9
- package/slider/harness.js.map +1 -1
- package/slider/lib/_slider.scss +6 -6
- package/slider/lib/slider-styles.css.js +1 -1
- package/slider/lib/slider-styles.css.js.map +1 -1
- package/slider/lib/slider.d.ts +22 -51
- package/slider/lib/slider.js +18 -54
- package/slider/lib/slider.js.map +1 -1
- package/switch/lib/_switch.scss +63 -18
- package/switch/lib/switch-styles.css.js +1 -1
- package/switch/lib/switch-styles.css.js.map +1 -1
- package/switch/lib/switch.d.ts +0 -5
- package/switch/lib/switch.js +2 -27
- package/switch/lib/switch.js.map +1 -1
- package/textfield/harness.d.ts +1 -1
- package/textfield/harness.js.map +1 -1
- package/textfield/lib/_filled-text-field.scss +70 -14
- package/textfield/lib/_outlined-text-field.scss +60 -35
- package/textfield/lib/filled-forced-colors-styles.css.js +1 -1
- package/textfield/lib/filled-forced-colors-styles.css.js.map +1 -1
- package/textfield/lib/filled-styles.css.js +1 -1
- package/textfield/lib/filled-styles.css.js.map +1 -1
- package/textfield/lib/outlined-forced-colors-styles.css.js +1 -1
- package/textfield/lib/outlined-forced-colors-styles.css.js.map +1 -1
- package/textfield/lib/outlined-styles.css.js +1 -1
- package/textfield/lib/outlined-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +1 -1
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_index.scss +2 -18
- package/tokens/_md-comp-assist-chip.scss +0 -9
- package/tokens/_md-comp-checkbox.scss +78 -1
- package/tokens/_md-comp-circular-progress-indicator.scss +39 -13
- package/tokens/_md-comp-elevated-button.scss +0 -10
- package/tokens/_md-comp-fab-branded.scss +6 -31
- package/tokens/_md-comp-fab.scss +9 -50
- package/tokens/_md-comp-filled-button.scss +0 -10
- package/{field/lib → tokens}/_md-comp-filled-field.scss +91 -9
- package/tokens/_md-comp-filled-icon-button.scss +46 -1
- package/tokens/_md-comp-filled-select.scss +4 -30
- package/tokens/_md-comp-filled-text-field.scss +93 -9
- package/tokens/_md-comp-filled-tonal-button.scss +0 -11
- package/tokens/_md-comp-filled-tonal-icon-button.scss +45 -3
- package/tokens/_md-comp-filter-chip.scss +0 -10
- package/tokens/_md-comp-focus-ring.scss +23 -24
- package/tokens/_md-comp-icon-button.scss +37 -1
- package/tokens/_md-comp-input-chip.scss +0 -10
- package/tokens/_md-comp-linear-progress-indicator.scss +23 -8
- package/tokens/_md-comp-list-item.scss +0 -27
- package/tokens/_md-comp-list.scss +3 -29
- package/tokens/_md-comp-menu-item.scss +3 -29
- package/tokens/_md-comp-menu.scss +0 -23
- package/tokens/_md-comp-outlined-button.scss +0 -10
- package/{field/lib → tokens}/_md-comp-outlined-field.scss +85 -9
- package/tokens/_md-comp-outlined-icon-button.scss +41 -1
- package/tokens/_md-comp-outlined-segmented-button.scss +57 -11
- package/tokens/_md-comp-outlined-select.scss +1 -28
- package/tokens/_md-comp-outlined-text-field.scss +85 -8
- package/tokens/_md-comp-suggestion-chip.scss +0 -9
- package/tokens/_md-comp-switch.scss +81 -1
- package/tokens/_md-comp-text-button.scss +0 -10
- package/tokens/_values.scss +2 -7
- package/types/aria.d.ts +0 -2
- package/focus/strong-focus.d.ts +0 -56
- package/focus/strong-focus.js +0 -101
- package/focus/strong-focus.js.map +0 -1
- package/sass/_shape.scss +0 -154
- package/tokens/_md-comp-extended-fab-branded.scss +0 -45
- package/tokens/_md-comp-extended-fab-primary.scss +0 -45
- package/tokens/_md-comp-extended-fab-secondary.scss +0 -48
- package/tokens/_md-comp-extended-fab-surface.scss +0 -45
- package/tokens/_md-comp-extended-fab-tertiary.scss +0 -48
- package/tokens/_md-comp-fab-branded-large.scss +0 -23
- package/tokens/_md-comp-fab-primary-large.scss +0 -23
- package/tokens/_md-comp-fab-primary-small.scss +0 -23
- package/tokens/_md-comp-fab-primary.scss +0 -23
- package/tokens/_md-comp-fab-secondary-large.scss +0 -23
- package/tokens/_md-comp-fab-secondary-small.scss +0 -23
- package/tokens/_md-comp-fab-secondary.scss +0 -23
- package/tokens/_md-comp-fab-surface-large.scss +0 -23
- package/tokens/_md-comp-fab-surface-small.scss +0 -23
- package/tokens/_md-comp-fab-surface.scss +0 -23
- package/tokens/_md-comp-fab-tertiary-large.scss +0 -23
- package/tokens/_md-comp-fab-tertiary-small.scss +0 -23
- package/tokens/_md-comp-fab-tertiary.scss +0 -23
package/chips/lib/chip.js
CHANGED
|
@@ -3,16 +3,14 @@
|
|
|
3
3
|
* Copyright 2023 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
var _a;
|
|
6
7
|
import { __decorate } from "tslib";
|
|
7
|
-
import '../../elevation/elevation.js';
|
|
8
8
|
import '../../focus/focus-ring.js';
|
|
9
9
|
import '../../ripple/ripple.js';
|
|
10
10
|
import { html, LitElement, nothing } from 'lit';
|
|
11
11
|
import { property, queryAsync, state } from 'lit/decorators.js';
|
|
12
12
|
import { classMap } from 'lit/directives/class-map.js';
|
|
13
|
-
import {
|
|
14
|
-
import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
|
|
15
|
-
import { ripple } from '../../ripple/directive.js';
|
|
13
|
+
import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
|
|
16
14
|
/**
|
|
17
15
|
* A chip component.
|
|
18
16
|
*/
|
|
@@ -20,90 +18,72 @@ export class Chip extends LitElement {
|
|
|
20
18
|
constructor() {
|
|
21
19
|
super(...arguments);
|
|
22
20
|
this.disabled = false;
|
|
23
|
-
this.elevated = false;
|
|
24
|
-
this.href = '';
|
|
25
21
|
this.label = '';
|
|
26
|
-
this.
|
|
27
|
-
this.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
this.showRipple = true;
|
|
31
|
-
return this.ripple;
|
|
22
|
+
this.showPrimaryRipple = false;
|
|
23
|
+
this.getPrimaryRipple = () => {
|
|
24
|
+
this.showPrimaryRipple = true;
|
|
25
|
+
return this.primaryRipple;
|
|
32
26
|
};
|
|
33
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* Whether or not the primary ripple is disabled (defaults to `disabled`).
|
|
30
|
+
* Some chip actions such as links cannot be disabled.
|
|
31
|
+
*/
|
|
32
|
+
get primaryRippleDisabled() {
|
|
33
|
+
return this.disabled;
|
|
34
|
+
}
|
|
34
35
|
render() {
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
${
|
|
46
|
-
|
|
47
|
-
${this.showRipple ? this.renderRipple() : nothing}
|
|
48
|
-
<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
|
|
49
|
-
<span class="icon leading">
|
|
50
|
-
${this.renderLeadingIcon()}
|
|
51
|
-
</span>
|
|
52
|
-
<span class="label">${this.label}</span>
|
|
53
|
-
<span class="icon trailing">
|
|
54
|
-
${this.renderTrailingIcon()}
|
|
55
|
-
</span>
|
|
56
|
-
</${button}>
|
|
36
|
+
const primaryRipple = this.showPrimaryRipple ?
|
|
37
|
+
html `<md-ripple ?disabled=${this.primaryRippleDisabled}></md-ripple>` :
|
|
38
|
+
nothing;
|
|
39
|
+
const primaryFocus = html `<md-focus-ring for=${this.primaryFocusFor}></md-focus-ring>`;
|
|
40
|
+
return html `
|
|
41
|
+
<div class="container ${classMap(this.getContainerClasses())}">
|
|
42
|
+
${this.renderOutline()}
|
|
43
|
+
${primaryFocus}
|
|
44
|
+
${primaryRipple}
|
|
45
|
+
${this.renderPrimaryAction()}
|
|
46
|
+
${this.renderTrailingAction()}
|
|
47
|
+
</div>
|
|
57
48
|
`;
|
|
58
49
|
}
|
|
59
50
|
getContainerClasses() {
|
|
60
51
|
return {
|
|
61
52
|
disabled: this.disabled,
|
|
62
|
-
elevated: this.elevated,
|
|
63
53
|
};
|
|
64
54
|
}
|
|
65
|
-
|
|
66
|
-
return html
|
|
55
|
+
renderContent() {
|
|
56
|
+
return html `
|
|
57
|
+
<span class="icon">
|
|
58
|
+
${this.renderLeadingIcon()}
|
|
59
|
+
</span>
|
|
60
|
+
<span class="label">${this.label}</span>
|
|
61
|
+
`;
|
|
67
62
|
}
|
|
68
|
-
|
|
63
|
+
renderTrailingAction() {
|
|
69
64
|
return nothing;
|
|
70
65
|
}
|
|
71
|
-
|
|
72
|
-
return html `<
|
|
73
|
-
}
|
|
74
|
-
handleBlur() {
|
|
75
|
-
this.showFocusRing = false;
|
|
66
|
+
renderOutline() {
|
|
67
|
+
return html `<span class="outline"></span>`;
|
|
76
68
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
handlePointerDown() {
|
|
81
|
-
pointerPress();
|
|
82
|
-
this.showFocusRing = shouldShowStrongFocus();
|
|
69
|
+
renderLeadingIcon() {
|
|
70
|
+
return html `<slot name="icon"></slot>`;
|
|
83
71
|
}
|
|
84
72
|
}
|
|
73
|
+
_a = Chip;
|
|
74
|
+
(() => {
|
|
75
|
+
requestUpdateOnAriaChange(_a);
|
|
76
|
+
})();
|
|
85
77
|
__decorate([
|
|
86
78
|
property({ type: Boolean })
|
|
87
79
|
], Chip.prototype, "disabled", void 0);
|
|
88
|
-
__decorate([
|
|
89
|
-
property({ type: Boolean })
|
|
90
|
-
], Chip.prototype, "elevated", void 0);
|
|
91
|
-
__decorate([
|
|
92
|
-
property()
|
|
93
|
-
], Chip.prototype, "href", void 0);
|
|
94
80
|
__decorate([
|
|
95
81
|
property()
|
|
96
82
|
], Chip.prototype, "label", void 0);
|
|
97
|
-
__decorate([
|
|
98
|
-
property()
|
|
99
|
-
], Chip.prototype, "target", void 0);
|
|
100
|
-
__decorate([
|
|
101
|
-
state()
|
|
102
|
-
], Chip.prototype, "showFocusRing", void 0);
|
|
103
83
|
__decorate([
|
|
104
84
|
state()
|
|
105
|
-
], Chip.prototype, "
|
|
85
|
+
], Chip.prototype, "showPrimaryRipple", void 0);
|
|
106
86
|
__decorate([
|
|
107
87
|
queryAsync('md-ripple')
|
|
108
|
-
], Chip.prototype, "
|
|
88
|
+
], Chip.prototype, "primaryRipple", void 0);
|
|
109
89
|
//# sourceMappingURL=chip.js.map
|
package/chips/lib/chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAGjE;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,UAAU;IAA7C;;QAK6B,aAAQ,GAAG,KAAK,CAAC;QAChC,UAAK,GAAG,EAAE,CAAC;QAeN,sBAAiB,GAAG,KAAK,CAAC;QAoDjC,qBAAgB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,OAAO,IAAI,CAAC,aAAa,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC;IAhEC;;;OAGG;IACH,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAMkB,MAAM;QACvB,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC1C,IAAI,CAAA,wBAAwB,IAAI,CAAC,qBAAqB,eAAe,CAAC,CAAC;YACvE,OAAO,CAAC;QAEZ,MAAM,YAAY,GACd,IAAI,CAAA,sBAAsB,IAAI,CAAC,eAAe,mBAAmB,CAAC;QAEtE,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;UACxD,IAAI,CAAC,aAAa,EAAE;UACpB,YAAY;UACZ,aAAa;UACb,IAAI,CAAC,mBAAmB,EAAE;UAC1B,IAAI,CAAC,oBAAoB,EAAE;;KAEhC,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,EAAE;;4BAEN,IAAI,CAAC,KAAK;KACjC,CAAC;IACJ,CAAC;IAIS,oBAAoB;QAC5B,OAAO,OAAO,CAAC;IACjB,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;CAMF;;AA5EC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAChC;IAAX,QAAQ,EAAE;mCAAY;AAed;IAAR,KAAK,EAAE;+CAAmC;AAE3C;IADC,UAAU,CAAC,WAAW,CAAC;2CACgC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A chip component.\n */\nexport abstract class Chip extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n @property({type: Boolean}) disabled = false;\n @property() label = '';\n\n /**\n * The `id` of the action the primary focus ring is for.\n */\n protected abstract readonly primaryFocusFor: string;\n\n /**\n * Whether or not the primary ripple is disabled (defaults to `disabled`).\n * Some chip actions such as links cannot be disabled.\n */\n protected get primaryRippleDisabled() {\n return this.disabled;\n }\n\n @state() private showPrimaryRipple = false;\n @queryAsync('md-ripple')\n private readonly primaryRipple!: Promise<MdRipple|null>;\n\n protected override render() {\n const primaryRipple = this.showPrimaryRipple ?\n html`<md-ripple ?disabled=${this.primaryRippleDisabled}></md-ripple>` :\n nothing;\n\n const primaryFocus =\n html`<md-focus-ring for=${this.primaryFocusFor}></md-focus-ring>`;\n\n return html`\n <div class=\"container ${classMap(this.getContainerClasses())}\">\n ${this.renderOutline()}\n ${primaryFocus}\n ${primaryRipple}\n ${this.renderPrimaryAction()}\n ${this.renderTrailingAction()}\n </div>\n `;\n }\n\n protected getContainerClasses() {\n return {\n disabled: this.disabled,\n };\n }\n\n protected renderContent() {\n return html`\n <span class=\"icon\">\n ${this.renderLeadingIcon()}\n </span>\n <span class=\"label\">${this.label}</span>\n `;\n }\n\n protected abstract renderPrimaryAction(): TemplateResult;\n\n protected renderTrailingAction(): TemplateResult|typeof nothing {\n return nothing;\n }\n\n protected renderOutline() {\n return html`<span class=\"outline\"></span>`;\n }\n\n protected renderLeadingIcon(): TemplateResult {\n return html`<slot name=\"icon\"></slot>`;\n }\n\n protected getPrimaryRipple = () => {\n this.showPrimaryRipple = true;\n return this.primaryRipple;\n };\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2022 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
export const styles = css `.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}/*# sourceMappingURL=elevated-styles.css.map */
|
|
8
|
+
`;
|
|
9
|
+
//# sourceMappingURL=elevated-styles.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-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`.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}
|
|
@@ -3,19 +3,24 @@
|
|
|
3
3
|
* Copyright 2023 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import '../../elevation/elevation.js';
|
|
6
7
|
import { PropertyValues } from 'lit';
|
|
7
8
|
import { Chip } from './chip.js';
|
|
8
9
|
/**
|
|
9
10
|
* A filter chip component.
|
|
10
11
|
*/
|
|
11
12
|
export declare class FilterChip extends Chip {
|
|
13
|
+
elevated: boolean;
|
|
12
14
|
selected: boolean;
|
|
15
|
+
protected get primaryFocusFor(): string;
|
|
13
16
|
constructor();
|
|
14
17
|
protected updated(changedProperties: PropertyValues<FilterChip>): void;
|
|
15
18
|
protected getContainerClasses(): {
|
|
19
|
+
elevated: boolean;
|
|
16
20
|
selected: boolean;
|
|
17
21
|
disabled: boolean;
|
|
18
|
-
elevated: boolean;
|
|
19
22
|
};
|
|
23
|
+
protected renderPrimaryAction(): import("lit-html").TemplateResult<1>;
|
|
20
24
|
protected renderLeadingIcon(): import("lit-html").TemplateResult<2 | 1>;
|
|
25
|
+
protected renderOutline(): import("lit-html").TemplateResult<1>;
|
|
21
26
|
}
|
package/chips/lib/filter-chip.js
CHANGED
|
@@ -4,43 +4,76 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
|
-
import
|
|
7
|
+
import '../../elevation/elevation.js';
|
|
8
|
+
import { html, nothing, svg } from 'lit';
|
|
8
9
|
import { property } from 'lit/decorators.js';
|
|
10
|
+
import { ripple } from '../../ripple/directive.js';
|
|
9
11
|
import { Chip } from './chip.js';
|
|
10
12
|
/**
|
|
11
13
|
* A filter chip component.
|
|
12
14
|
*/
|
|
13
15
|
export class FilterChip extends Chip {
|
|
16
|
+
get primaryFocusFor() {
|
|
17
|
+
return 'option';
|
|
18
|
+
}
|
|
14
19
|
constructor() {
|
|
15
20
|
super();
|
|
21
|
+
this.elevated = false;
|
|
16
22
|
this.selected = false;
|
|
17
23
|
this.addEventListener('click', () => {
|
|
24
|
+
if (this.disabled) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
18
27
|
this.selected = !this.selected;
|
|
19
28
|
});
|
|
20
29
|
}
|
|
21
30
|
updated(changedProperties) {
|
|
22
|
-
if (changedProperties.has('selected')
|
|
31
|
+
if (changedProperties.has('selected') &&
|
|
32
|
+
changedProperties.get('selected') !== undefined) {
|
|
33
|
+
// Dispatch when `selected` changes, except for the first update.
|
|
23
34
|
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
24
35
|
}
|
|
25
36
|
}
|
|
26
37
|
getContainerClasses() {
|
|
27
|
-
const classes = super.getContainerClasses();
|
|
28
38
|
return {
|
|
29
|
-
...
|
|
39
|
+
...super.getContainerClasses(),
|
|
40
|
+
elevated: this.elevated,
|
|
30
41
|
selected: this.selected,
|
|
31
42
|
};
|
|
32
43
|
}
|
|
44
|
+
renderPrimaryAction() {
|
|
45
|
+
const { ariaLabel } = this;
|
|
46
|
+
return html `
|
|
47
|
+
<button class="action"
|
|
48
|
+
id="option"
|
|
49
|
+
aria-label=${ariaLabel || nothing}
|
|
50
|
+
aria-selected=${this.selected}
|
|
51
|
+
?disabled=${this.disabled || nothing}
|
|
52
|
+
role="option"
|
|
53
|
+
${ripple(this.getPrimaryRipple)}
|
|
54
|
+
>${this.renderContent()}</button>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
33
57
|
renderLeadingIcon() {
|
|
34
58
|
if (!this.selected) {
|
|
35
59
|
return super.renderLeadingIcon();
|
|
36
60
|
}
|
|
37
61
|
return svg `
|
|
38
|
-
<svg class="checkmark" viewBox="0 0 18 18">
|
|
62
|
+
<svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
|
|
39
63
|
<path d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
|
|
40
64
|
</svg>
|
|
41
65
|
`;
|
|
42
66
|
}
|
|
67
|
+
renderOutline() {
|
|
68
|
+
if (this.elevated) {
|
|
69
|
+
return html `<md-elevation></md-elevation>`;
|
|
70
|
+
}
|
|
71
|
+
return super.renderOutline();
|
|
72
|
+
}
|
|
43
73
|
}
|
|
74
|
+
__decorate([
|
|
75
|
+
property({ type: Boolean })
|
|
76
|
+
], FilterChip.prototype, "elevated", void 0);
|
|
44
77
|
__decorate([
|
|
45
78
|
property({ type: Boolean })
|
|
46
79
|
], FilterChip.prototype, "selected", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,
|
|
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,EAAkB,GAAG,EAAC,MAAM,KAAK,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAIlC,IAAc,eAAe;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QARiB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAQ1C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBAA6C;QACtE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;YACjC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE;YACnD,iEAAiE;YACjE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAEkB,mBAAmB;QACpC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;wBACjB,IAAI,CAAC,QAAQ;oBACjB,IAAI,CAAC,QAAQ,IAAI,OAAO;;UAElC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC;SAC9B,IAAI,CAAC,aAAa,EAAE;KACxB,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,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;CACF;AAnE4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB","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, PropertyValues, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ripple} from '../../ripple/directive.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A filter chip component.\n */\nexport class FilterChip extends Chip {\n @property({type: Boolean}) elevated = false;\n @property({type: Boolean}) selected = false;\n\n protected get primaryFocusFor() {\n return 'option';\n }\n\n constructor() {\n super();\n this.addEventListener('click', () => {\n if (this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n });\n }\n\n protected override updated(changedProperties: PropertyValues<FilterChip>) {\n if (changedProperties.has('selected') &&\n changedProperties.get('selected') !== undefined) {\n // Dispatch when `selected` changes, except for the first update.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n }\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n elevated: this.elevated,\n selected: this.selected,\n };\n }\n\n protected override renderPrimaryAction() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button class=\"action\"\n id=\"option\"\n aria-label=${ariaLabel || nothing}\n aria-selected=${this.selected}\n ?disabled=${this.disabled || nothing}\n role=\"option\"\n ${ripple(this.getPrimaryRipple)}\n >${this.renderContent()}</button>\n `;\n }\n\n protected override renderLeadingIcon() {\n if (!this.selected) {\n return super.renderLeadingIcon();\n }\n\n return svg`\n <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path 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 renderOutline() {\n if (this.elevated) {\n return html`<md-elevation></md-elevation>`;\n }\n\n return super.renderOutline();\n }\n}\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, 8px));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, 8px));--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon.leading{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon.leading{color:var(--_selected-leading-icon-color)}.selected:hover .icon.leading{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon.leading{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon.leading{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_container-shape: var(--md-filter-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-filter-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filter-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filter-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filter-chip-container-shape-end-start, var(--_container-shape) )}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon{color:var(--_selected-leading-icon-color)}.selected:hover .icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=filter-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-styles.css.js","sourceRoot":"","sources":["filter-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, 8px));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, 8px));--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon.leading{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon.leading{color:var(--_selected-leading-icon-color)}.selected:hover .icon.leading{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon.leading{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon.leading{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"filter-styles.css.js","sourceRoot":"","sources":["filter-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-filter-chip-container-height, 32px);--_container-shape: var(--md-filter-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-filter-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filter-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filter-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filter-chip-container-shape-end-start, var(--_container-shape) )}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon{color:var(--_selected-leading-icon-color)}.selected:hover .icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)
|
|
7
|
+
export const styles = css `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;text-decoration:none}.action:first-of-type{padding-inline-start:8px}.action:last-of-type{padding-inline-end:8px}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;padding:0 8px;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;color:var(--_leading-icon-color);height:var(--_icon-size);position:relative}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}:hover .icon{color:var(--_hover-leading-icon-color)}:focus .icon{color:var(--_focus-leading-icon-color)}:active .icon{color:var(--_pressed-leading-icon-color)}.disabled .icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=shared-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)
|
|
1
|
+
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;text-decoration:none}.action:first-of-type{padding-inline-start:8px}.action:last-of-type{padding-inline-end:8px}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;padding:0 8px;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;color:var(--_leading-icon-color);height:var(--_icon-size);position:relative}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}:hover .icon{color:var(--_hover-leading-icon-color)}:focus .icon{color:var(--_focus-leading-icon-color)}:active .icon{color:var(--_pressed-leading-icon-color)}.disabled .icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
* Copyright 2023 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
import { AssistChip } from './assist-chip.js';
|
|
7
7
|
/**
|
|
8
8
|
* A suggestion chip component.
|
|
9
9
|
*/
|
|
10
|
-
export declare class SuggestionChip extends
|
|
10
|
+
export declare class SuggestionChip extends AssistChip {
|
|
11
11
|
}
|
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
* Copyright 2023 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
import { AssistChip } from './assist-chip.js';
|
|
7
7
|
/**
|
|
8
8
|
* A suggestion chip component.
|
|
9
9
|
*/
|
|
10
|
-
export class SuggestionChip extends
|
|
10
|
+
export class SuggestionChip extends AssistChip {
|
|
11
11
|
}
|
|
12
|
+
// Note: assist and suggestion chips are functionally identical with different
|
|
13
|
+
// tokens.
|
|
12
14
|
//# sourceMappingURL=suggestion-chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;CAAG;AAEjD,8EAA8E;AAC9E,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AssistChip} from './assist-chip.js';\n\n/**\n * A suggestion chip component.\n */\nexport class SuggestionChip extends AssistChip {}\n\n// Note: assist and suggestion chips are functionally identical with different\n// tokens.\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-
|
|
7
|
+
export const styles = css `:host{--_container-height: 32px;--_container-shape: 8px;--_disabled-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-label-text-opacity: 0.38;--_elevated-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);--_elevated-container-elevation: 1;--_elevated-container-shadow-color: var(--md-sys-color-shadow, #000);--_elevated-disabled-container-color: var(--md-sys-color-on-surface, #1d1b20);--_elevated-disabled-container-elevation: 0;--_elevated-disabled-container-opacity: 0.12;--_elevated-focus-container-elevation: 1;--_elevated-hover-container-elevation: 2;--_elevated-pressed-container-elevation: 1;--_focus-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-opacity: 0.12;--_hover-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-opacity: 0.08;--_label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_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-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-opacity: 0.12;--_disabled-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-outline-opacity: 0.12;--_focus-outline-color: var(--md-sys-color-on-surface-variant, #49454f);--_outline-color: var(--md-sys-color-outline, #79747e);--_outline-width: 1px;--_disabled-leading-icon-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-leading-icon-opacity: 0.38;--_focus-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_hover-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_leading-icon-color: var(--md-sys-color-primary, #6750a4);--_pressed-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_icon-size: 18px;--_container-shape-start-start: var( --md-suggestion-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-suggestion-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-suggestion-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-suggestion-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=suggestion-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=suggestion-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion-styles.css.js","sourceRoot":"","sources":["suggestion-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-
|
|
1
|
+
{"version":3,"file":"suggestion-styles.css.js","sourceRoot":"","sources":["suggestion-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: 32px;--_container-shape: 8px;--_disabled-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-label-text-opacity: 0.38;--_elevated-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);--_elevated-container-elevation: 1;--_elevated-container-shadow-color: var(--md-sys-color-shadow, #000);--_elevated-disabled-container-color: var(--md-sys-color-on-surface, #1d1b20);--_elevated-disabled-container-elevation: 0;--_elevated-disabled-container-opacity: 0.12;--_elevated-focus-container-elevation: 1;--_elevated-hover-container-elevation: 2;--_elevated-pressed-container-elevation: 1;--_focus-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-opacity: 0.12;--_hover-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-opacity: 0.08;--_label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_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-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-opacity: 0.12;--_disabled-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-outline-opacity: 0.12;--_focus-outline-color: var(--md-sys-color-on-surface-variant, #49454f);--_outline-color: var(--md-sys-color-outline, #79747e);--_outline-width: 1px;--_disabled-leading-icon-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-leading-icon-opacity: 0.38;--_focus-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_hover-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_leading-icon-color: var(--md-sys-color-primary, #6750a4);--_pressed-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_icon-size: 18px;--_container-shape-start-start: var( --md-suggestion-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-suggestion-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-suggestion-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-suggestion-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=suggestion-styles.css.map */\n`;\n "]}
|
package/chips/suggestion-chip.js
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { customElement } from 'lit/decorators.js';
|
|
8
|
+
import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
|
|
8
9
|
import { styles as sharedStyles } from './lib/shared-styles.css.js';
|
|
9
10
|
import { SuggestionChip } from './lib/suggestion-chip.js';
|
|
10
11
|
import { styles } from './lib/suggestion-styles.css.js';
|
|
@@ -16,7 +17,7 @@ import { styles } from './lib/suggestion-styles.css.js';
|
|
|
16
17
|
*/
|
|
17
18
|
let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip {
|
|
18
19
|
};
|
|
19
|
-
MdSuggestionChip.styles = [sharedStyles, styles];
|
|
20
|
+
MdSuggestionChip.styles = [sharedStyles, elevatedStyles, styles];
|
|
20
21
|
MdSuggestionChip = __decorate([
|
|
21
22
|
customElement('md-suggestion-chip')
|
|
22
23
|
], MdSuggestionChip);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","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 './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles} from './lib/suggestion-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-suggestion-chip': MdSuggestionChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n static override styles = [sharedStyles, elevatedStyles, styles];\n}\n"]}
|