@universal-material/web 3.0.146 → 3.0.147
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/button/button-base.d.ts +2 -1
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js.map +1 -1
- package/button/button-base.styles.d.ts.map +1 -1
- package/button/button-base.styles.js +5 -0
- package/button/button-base.styles.js.map +1 -1
- package/button/button.d.ts +12 -6
- package/button/button.d.ts.map +1 -1
- package/button/button.js +48 -14
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +154 -30
- package/button/button.styles.js.map +1 -1
- package/button/fab.d.ts +1 -1
- package/button/fab.d.ts.map +1 -1
- package/button/icon-button.d.ts +3 -23
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +11 -54
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.js +38 -38
- package/button/icon-button.styles.js.map +1 -1
- package/button/toggle-button.d.ts +37 -0
- package/button/toggle-button.d.ts.map +1 -0
- package/button/toggle-button.js +66 -0
- package/button/toggle-button.js.map +1 -0
- package/button/toggle-button.styles.d.ts +2 -0
- package/button/toggle-button.styles.d.ts.map +1 -0
- package/button/toggle-button.styles.js +92 -0
- package/button/toggle-button.styles.js.map +1 -0
- package/chip/chip.js +2 -2
- package/chip/chip.js.map +1 -1
- package/custom-elements.json +9780 -8787
- package/package.json +1 -1
package/button/icon-button.js
CHANGED
|
@@ -1,73 +1,30 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { customElement, property
|
|
4
|
-
import { UmButtonBase } from './button-base.js';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
4
|
import { styles } from './icon-button.styles.js';
|
|
6
|
-
|
|
5
|
+
import { UmToggleButton } from './toggle-button.js';
|
|
6
|
+
let UmIconButton = class UmIconButton extends UmToggleButton {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.variant = 'standard';
|
|
10
|
-
/**
|
|
11
|
-
* When true, the button will toggle between selected and unselected
|
|
12
|
-
* states
|
|
13
|
-
*/
|
|
14
|
-
this.toggle = false;
|
|
15
|
-
this.hasSelectionIcon = false;
|
|
16
|
-
/**
|
|
17
|
-
* Sets the selected state. When false, displays the default icon. When true,
|
|
18
|
-
* displays the selected icon, or the default icon If no `slot="selected"`
|
|
19
|
-
* icon is provided.
|
|
20
|
-
*/
|
|
21
|
-
this.selected = false;
|
|
22
|
-
/**
|
|
23
|
-
* The `aria-label` of the button when the button is toggleable and selected.
|
|
24
|
-
*/
|
|
25
|
-
this.ariaLabelSelected = '';
|
|
26
10
|
}
|
|
27
|
-
static { this.styles = [
|
|
11
|
+
static { this.styles = [UmToggleButton.styles, styles]; }
|
|
28
12
|
renderContent() {
|
|
29
13
|
return html `
|
|
30
|
-
<span class="icon" aria-hidden="true"
|
|
31
|
-
|
|
32
|
-
|
|
14
|
+
<span class="icon-container" aria-hidden="true">
|
|
15
|
+
<span class="icon icon-default">
|
|
16
|
+
<slot></slot>
|
|
17
|
+
</span>
|
|
18
|
+
<span class="icon icon-selected">
|
|
19
|
+
<slot name="selected" @slotchange="${this.handleSelectedIconSlotChange}"></slot>
|
|
20
|
+
</span>
|
|
33
21
|
</span>
|
|
34
22
|
`;
|
|
35
23
|
}
|
|
36
|
-
handleClick(event) {
|
|
37
|
-
super.handleClick(event);
|
|
38
|
-
if (!this.toggle) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
this.selected = !this.selected;
|
|
42
|
-
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
43
|
-
}
|
|
44
|
-
getAriaLabel() {
|
|
45
|
-
return this.selected
|
|
46
|
-
? this.ariaLabelSelected || super.getAriaLabel()
|
|
47
|
-
: super.getAriaLabel();
|
|
48
|
-
}
|
|
49
|
-
handleSlotChange() {
|
|
50
|
-
this.hasSelectionIcon = this.selectedIcons.length > 0;
|
|
51
|
-
}
|
|
52
24
|
};
|
|
53
25
|
__decorate([
|
|
54
26
|
property({ reflect: true })
|
|
55
27
|
], UmIconButton.prototype, "variant", void 0);
|
|
56
|
-
__decorate([
|
|
57
|
-
property({ type: Boolean })
|
|
58
|
-
], UmIconButton.prototype, "toggle", void 0);
|
|
59
|
-
__decorate([
|
|
60
|
-
property({ type: Boolean, attribute: 'has-selection-icon', reflect: true })
|
|
61
|
-
], UmIconButton.prototype, "hasSelectionIcon", void 0);
|
|
62
|
-
__decorate([
|
|
63
|
-
property({ type: Boolean, reflect: true })
|
|
64
|
-
], UmIconButton.prototype, "selected", void 0);
|
|
65
|
-
__decorate([
|
|
66
|
-
property({ attribute: 'aria-label-selected' })
|
|
67
|
-
], UmIconButton.prototype, "ariaLabelSelected", void 0);
|
|
68
|
-
__decorate([
|
|
69
|
-
queryAssignedElements({ slot: 'selected', flatten: true })
|
|
70
|
-
], UmIconButton.prototype, "selectedIcons", void 0);
|
|
71
28
|
UmIconButton = __decorate([
|
|
72
29
|
customElement('u-icon-button')
|
|
73
30
|
], UmIconButton);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAK7C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAAzC;;QAIwB,YAAO,GAAwB,UAAU,CAAC;IAezE,CAAC;aAjBiB,WAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IAItC,aAAa;QAE9B,OAAO,IAAI,CAAA;;;;;;+CAMgC,IAAI,CAAC,4BAA4B;;;KAG3E,CAAC;IACJ,CAAC;;AAd4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAA2C;AAJ5D,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmBxB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './icon-button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nexport type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\n\n@customElement('u-icon-button')\nexport class UmIconButton extends UmToggleButton {\n\n static override styles = [UmToggleButton.styles, styles];\n\n @property({ reflect: true }) variant: UmIconButtonVariant = 'standard';\n\n protected override renderContent(): HTMLTemplateResult {\n\n return html`\n <span class=\"icon-container\" aria-hidden=\"true\">\n <span class=\"icon icon-default\">\n <slot></slot>\n </span>\n <span class=\"icon icon-selected\">\n <slot name=\"selected\" @slotchange=\"${this.handleSelectedIconSlotChange}\"></slot>\n </span>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-icon-button': UmIconButton;\n }\n}\n"]}
|
|
@@ -1,72 +1,72 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
--_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));
|
|
5
|
+
--_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);
|
|
6
|
+
--_extra-small-size: var(--u-icon-button-extra-small-height, 32px);
|
|
7
|
+
--_small-size: var(--u-icon-button-small-height, 40px);
|
|
8
|
+
--_medium-size: var(--u-icon-button-medium-height, 56px);
|
|
9
|
+
--_large-size: var(--u-icon-button-large-height, 96px);
|
|
10
|
+
--_extra-large-size: var(--u-icon-button-extra-large-height, 136px);
|
|
11
|
+
--_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);
|
|
12
|
+
--_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);
|
|
13
|
+
--_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);
|
|
14
|
+
--_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);
|
|
15
|
+
--_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);
|
|
16
|
+
--_extra-small-square-shape-corner: var(--u-icon-button-extra-small-square-shape-corner, 12px);
|
|
17
|
+
--_small-square-shape-corner: var(--u-icon-button-small-square-shape-corner, 12px);
|
|
18
|
+
--_medium-square-shape-corner: var(--u-icon-button-medium-square-shape-corner, 16px);
|
|
19
|
+
--_large-square-shape-corner: var(--u-icon-button-large-square-shape-corner, 28px);
|
|
20
|
+
--_extra-large-square-shape-corner: var(--u-icon-button-extra-large-square-shape-corner, 28px);
|
|
21
|
+
--_extra-small-pressed-shape-corner: var(--u-icon-button-extra-small-pressed-shape-corner, 8px);
|
|
22
|
+
--_small-pressed-shape-corner: var(--u-icon-button-small-pressed-shape-corner, 8px);
|
|
23
|
+
--_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);
|
|
24
|
+
--_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);
|
|
25
|
+
--_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);
|
|
26
|
+
width: var(--_size);
|
|
27
|
+
height: var(--_size);
|
|
9
28
|
font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
10
29
|
}
|
|
11
30
|
|
|
12
|
-
.icon {
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
font-size: var(--u-icon-button-icon-size, 1.5rem);
|
|
17
|
-
}
|
|
18
|
-
.icon.icon-selected {
|
|
19
|
-
display: none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([selected][has-selection-icon]) .icon:not(.icon-selected) {
|
|
23
|
-
display: none;
|
|
24
|
-
}
|
|
25
|
-
:host([selected][has-selection-icon]) .icon.icon-selected {
|
|
26
|
-
display: inline-block;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
31
|
:host([variant=filled]) {
|
|
30
|
-
background-color: var(--u-filled-icon-button-unselected-
|
|
31
|
-
color: var(--u-filled-icon-button-unselected-text-color, var(--
|
|
32
|
+
background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));
|
|
33
|
+
color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
:host([variant=tonal]) {
|
|
35
|
-
background-color: var(--u-total-icon-button-unselected-
|
|
36
|
-
color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-
|
|
37
|
+
background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
|
|
38
|
+
color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
:host([selected][variant=filled]),
|
|
40
|
-
:host([variant=filled]:not([
|
|
41
|
-
background-color: var(--u-filled-icon-button-
|
|
42
|
+
:host([variant=filled]:not([toggle])) {
|
|
43
|
+
background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
42
44
|
color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
:host([selected][variant=tonal])
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
|
|
47
|
+
:host([selected][variant=tonal]) {
|
|
48
|
+
background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));
|
|
49
|
+
color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
:host([variant=standard])
|
|
52
|
-
:host([variant=outlined]) {
|
|
52
|
+
:host([variant=standard]) {
|
|
53
53
|
color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
:host([variant=outlined]) {
|
|
57
57
|
border: 1px solid var(--u-color-outline, rgb(121, 116, 126));
|
|
58
|
-
color: var(--u-outlined-icon-button-color, var(--u-
|
|
58
|
+
color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
:host([selected][variant=outlined]) {
|
|
62
62
|
border: none;
|
|
63
|
-
background-color: var(--u-outlined-icon-button-selected-
|
|
63
|
+
background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
|
|
64
64
|
color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
:host([selected][variant=standard]) {
|
|
68
|
-
color: var(--u-standard-icon-button-selected-text-color, var(--
|
|
69
|
-
background-color: var(--u-standard-icon-button-selected-
|
|
68
|
+
color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
69
|
+
background-color: var(--u-standard-icon-button-selected-container-color, transparent);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
:host([disabled][variant=outlined]) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --
|
|
1
|
+
{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n --_extra-small-size: var(--u-icon-button-extra-small-height, 32px);\n --_small-size: var(--u-icon-button-small-height, 40px);\n --_medium-size: var(--u-icon-button-medium-height, 56px);\n --_large-size: var(--u-icon-button-large-height, 96px);\n --_extra-large-size: var(--u-icon-button-extra-large-height, 136px);\n --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n --_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);\n --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n --_extra-small-square-shape-corner: var(--u-icon-button-extra-small-square-shape-corner, 12px);\n --_small-square-shape-corner: var(--u-icon-button-small-square-shape-corner, 12px);\n --_medium-square-shape-corner: var(--u-icon-button-medium-square-shape-corner, 16px);\n --_large-square-shape-corner: var(--u-icon-button-large-square-shape-corner, 28px);\n --_extra-large-square-shape-corner: var(--u-icon-button-extra-large-square-shape-corner, 28px);\n --_extra-small-pressed-shape-corner: var(--u-icon-button-extra-small-pressed-shape-corner, 8px);\n --_small-pressed-shape-corner: var(--u-icon-button-small-pressed-shape-corner, 8px);\n --_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);\n --_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);\n --_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);\n width: var(--_size);\n height: var(--_size);\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n }\n\n :host([variant=filled]) {\n background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([selected][variant=filled]),\n :host([variant=filled]:not([toggle])) {\n background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([selected][variant=tonal]) {\n background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=standard]) {\n color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([selected][variant=outlined]) {\n border: none;\n background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n }\n\n :host([selected][variant=standard]) {\n color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n background-color: var(--u-standard-icon-button-selected-container-color, transparent);\n }\n\n :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-icon-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 12%), transparent)) !important;\n }\n`;\n"]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
2
|
+
import { UmButtonBase } from './button-base.js';
|
|
3
|
+
export type UmButtonShape = 'round' | 'square' | undefined;
|
|
4
|
+
export type UmButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | undefined;
|
|
5
|
+
export declare abstract class UmToggleButton extends UmButtonBase {
|
|
6
|
+
static styles: CSSResultGroup;
|
|
7
|
+
/**
|
|
8
|
+
* When true, the button will toggle between selected and unselected
|
|
9
|
+
* states
|
|
10
|
+
*/
|
|
11
|
+
toggle: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* When true, the button will toggle between round and square shapes
|
|
14
|
+
*/
|
|
15
|
+
toggleShape: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Sets the selected state
|
|
18
|
+
*/
|
|
19
|
+
selected: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Sets the shape of the button
|
|
22
|
+
*/
|
|
23
|
+
shape: UmButtonShape;
|
|
24
|
+
/**
|
|
25
|
+
* Sets the size of the button
|
|
26
|
+
*/
|
|
27
|
+
size: UmButtonSize;
|
|
28
|
+
/**
|
|
29
|
+
* The `aria-label` of the button when the button is toggleable and selected.
|
|
30
|
+
*/
|
|
31
|
+
ariaLabelSelected: string;
|
|
32
|
+
hasSelectionIcon: boolean;
|
|
33
|
+
protected handleClick(event: UIEvent): void;
|
|
34
|
+
getAriaLabel(): string | null;
|
|
35
|
+
protected handleSelectedIconSlotChange(e: Event): void;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=toggle-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../src/button/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC3D,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpG,8BAAsB,cAAe,SAAQ,YAAY;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAEvE;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;OAEG;IACoE,WAAW,UAAS;IAE3F;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IAC0B,KAAK,EAAE,aAAa,CAAC;IAElD;;OAEG;IAC0B,IAAI,EAAE,YAAY,CAAC;IAEhD;;OAEG;IAC6C,iBAAiB,SAAM;IAEM,gBAAgB,UAAS;cAEnF,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW3C,YAAY,IAAI,MAAM,GAAG,IAAI;IAMtC,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAGvD"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { UmButtonBase } from './button-base.js';
|
|
4
|
+
import { styles } from './toggle-button.styles.js';
|
|
5
|
+
export class UmToggleButton extends UmButtonBase {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
/**
|
|
9
|
+
* When true, the button will toggle between selected and unselected
|
|
10
|
+
* states
|
|
11
|
+
*/
|
|
12
|
+
this.toggle = false;
|
|
13
|
+
/**
|
|
14
|
+
* When true, the button will toggle between round and square shapes
|
|
15
|
+
*/
|
|
16
|
+
this.toggleShape = false;
|
|
17
|
+
/**
|
|
18
|
+
* Sets the selected state
|
|
19
|
+
*/
|
|
20
|
+
this.selected = false;
|
|
21
|
+
/**
|
|
22
|
+
* The `aria-label` of the button when the button is toggleable and selected.
|
|
23
|
+
*/
|
|
24
|
+
this.ariaLabelSelected = '';
|
|
25
|
+
this.hasSelectionIcon = false;
|
|
26
|
+
}
|
|
27
|
+
static { this.styles = [UmButtonBase.styles, styles]; }
|
|
28
|
+
handleClick(event) {
|
|
29
|
+
super.handleClick(event);
|
|
30
|
+
if (!this.toggle) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
this.selected = !this.selected;
|
|
34
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
35
|
+
}
|
|
36
|
+
getAriaLabel() {
|
|
37
|
+
return this.selected
|
|
38
|
+
? this.ariaLabelSelected || super.getAriaLabel()
|
|
39
|
+
: super.getAriaLabel();
|
|
40
|
+
}
|
|
41
|
+
handleSelectedIconSlotChange(e) {
|
|
42
|
+
this.hasSelectionIcon = e.target.assignedElements({ flatten: true }).length > 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
__decorate([
|
|
46
|
+
property({ type: Boolean, reflect: true })
|
|
47
|
+
], UmToggleButton.prototype, "toggle", void 0);
|
|
48
|
+
__decorate([
|
|
49
|
+
property({ attribute: 'toggle-shape', type: Boolean, reflect: true })
|
|
50
|
+
], UmToggleButton.prototype, "toggleShape", void 0);
|
|
51
|
+
__decorate([
|
|
52
|
+
property({ type: Boolean, reflect: true })
|
|
53
|
+
], UmToggleButton.prototype, "selected", void 0);
|
|
54
|
+
__decorate([
|
|
55
|
+
property({ reflect: true })
|
|
56
|
+
], UmToggleButton.prototype, "shape", void 0);
|
|
57
|
+
__decorate([
|
|
58
|
+
property({ reflect: true })
|
|
59
|
+
], UmToggleButton.prototype, "size", void 0);
|
|
60
|
+
__decorate([
|
|
61
|
+
property({ attribute: 'aria-label-selected' })
|
|
62
|
+
], UmToggleButton.prototype, "ariaLabelSelected", void 0);
|
|
63
|
+
__decorate([
|
|
64
|
+
property({ type: Boolean, attribute: 'has-selection-icon', reflect: true })
|
|
65
|
+
], UmToggleButton.prototype, "hasSelectionIcon", void 0);
|
|
66
|
+
//# sourceMappingURL=toggle-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../src/button/toggle-button.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAKnD,MAAM,OAAgB,cAAe,SAAQ,YAAY;IAAzD;;QAIE;;;WAGG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACoE,gBAAW,GAAG,KAAK,CAAC;QAE3F;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAY7D;;WAEG;QAC6C,sBAAiB,GAAG,EAAE,CAAC;QAEM,qBAAgB,GAAG,KAAK,CAAC;IAsBxG,CAAC;aAvDiB,WAAM,GAAmB,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhD,CAAiD;IAmCpD,WAAW,CAAC,KAAc;QAC3C,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEzB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEQ,YAAY;QACnB,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,KAAK,CAAC,YAAY,EAAE;YAChD,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC;IAES,4BAA4B,CAAC,CAAQ;QAC7C,IAAI,CAAC,gBAAgB,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACvG,CAAC;;AAhD2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAKY;IAAtE,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAqB;AAK/C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAKhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAsB;AAKrB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAoB;AAKA;IAA/C,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;yDAAwB;AAEM;IAA5E,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAA0B","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './toggle-button.styles.js';\n\nexport type UmButtonShape = 'round' | 'square' | undefined;\nexport type UmButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | undefined;\n\nexport abstract class UmToggleButton extends UmButtonBase {\n\n static override styles: CSSResultGroup = [UmButtonBase.styles, styles];\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean, reflect: true }) toggle = false;\n\n /**\n * When true, the button will toggle between round and square shapes\n */\n @property({ attribute: 'toggle-shape', type: Boolean, reflect: true }) toggleShape = false;\n\n /**\n * Sets the selected state\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Sets the shape of the button\n */\n @property({ reflect: true }) shape: UmButtonShape;\n\n /**\n * Sets the size of the button\n */\n @property({ reflect: true }) size: UmButtonSize;\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({ attribute: 'aria-label-selected' }) ariaLabelSelected = '';\n\n @property({ type: Boolean, attribute: 'has-selection-icon', reflect: true }) hasSelectionIcon = false;\n\n protected override handleClick(event: UIEvent): void {\n super.handleClick(event);\n\n if (!this.toggle) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n override getAriaLabel(): string | null {\n return this.selected\n ? this.ariaLabelSelected || super.getAriaLabel()\n : super.getAriaLabel();\n }\n\n protected handleSelectedIconSlotChange(e: Event): void {\n this.hasSelectionIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.styles.d.ts","sourceRoot":"","sources":["../../src/button/toggle-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyFlB,CAAC"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
--_size: var(--_small-size);
|
|
5
|
+
--_square-shape-corner: var(--_small-square-shape-corner);
|
|
6
|
+
--_pressed-shape-corner: var(--_small-pressed-shape-corner);
|
|
7
|
+
--_icon-size: var(--_small-icon-size);
|
|
8
|
+
border-radius: var(--_round-shape-corner);
|
|
9
|
+
height: var(--_size);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:host([size=extra-small]) {
|
|
13
|
+
--_size: var(--_extra-small-size);
|
|
14
|
+
--_icon-size: var(--_extra-small-icon-size);
|
|
15
|
+
--_square-shape-corner: var(--_extra-small-square-shape-corner);
|
|
16
|
+
--_pressed-shape-corner: var(--_extra-small-pressed-shape-corner);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([size=medium]) {
|
|
20
|
+
--_size: var(--_medium-size);
|
|
21
|
+
--_icon-size: var(--_medium-icon-size);
|
|
22
|
+
--_square-shape-corner: var(--_medium-square-shape-corner);
|
|
23
|
+
--_pressed-shape-corner: var(--_medium-pressed-shape-corner);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:host([size=large]) {
|
|
27
|
+
--_size: var(--_large-size);
|
|
28
|
+
--_icon-size: var(--_large-icon-size);
|
|
29
|
+
--_square-shape-corner: var(--_large-square-shape-corner);
|
|
30
|
+
--_pressed-shape-corner: var(--_large-pressed-shape-corner);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host([size=extra-large]) {
|
|
34
|
+
--_size: var(--_extra-large-size);
|
|
35
|
+
--_icon-size: var(--_extra-large-icon-size);
|
|
36
|
+
--_square-shape-corner: var(--_extra-large-square-shape-corner);
|
|
37
|
+
--_pressed-shape-corner: var(--_extra-large-pressed-shape-corner);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host([selected][toggle-shape]) {
|
|
41
|
+
border-radius: var(--_square-shape-corner);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host([shape=square]) {
|
|
45
|
+
border-radius: var(--_square-shape-corner);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([shape=square][selected][toggle-shape]) {
|
|
49
|
+
border-radius: var(--_round-shape-corner);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([toggle-shape]:not([disabled]):active) {
|
|
53
|
+
border-radius: var(--_pressed-shape-corner);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.icon-container {
|
|
57
|
+
position: relative;
|
|
58
|
+
width: var(--_icon-size);
|
|
59
|
+
height: 1px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.icon-default {
|
|
63
|
+
opacity: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.icon-selected {
|
|
67
|
+
opacity: 0;
|
|
68
|
+
transition-delay: calc(var(--_morph-duration) / 2);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([selected][has-selection-icon]) .icon-default {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
transition-delay: 0ms;
|
|
74
|
+
}
|
|
75
|
+
:host([selected][has-selection-icon]) .icon-selected {
|
|
76
|
+
opacity: 1;
|
|
77
|
+
transition-delay: calc(var(--_morph-duration) / 2);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.icon {
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 50%;
|
|
83
|
+
left: 50%;
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
font-size: var(--_icon-size);
|
|
88
|
+
transform: translate3d(-50%, -50%, 0);
|
|
89
|
+
transition: opacity var(--_morph-duration) linear;
|
|
90
|
+
}
|
|
91
|
+
`;
|
|
92
|
+
//# sourceMappingURL=toggle-button.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../src/button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_size: var(--_small-size);\n --_square-shape-corner: var(--_small-square-shape-corner);\n --_pressed-shape-corner: var(--_small-pressed-shape-corner);\n --_icon-size: var(--_small-icon-size);\n border-radius: var(--_round-shape-corner);\n height: var(--_size);\n }\n\n :host([size=extra-small]) {\n --_size: var(--_extra-small-size);\n --_icon-size: var(--_extra-small-icon-size);\n --_square-shape-corner: var(--_extra-small-square-shape-corner);\n --_pressed-shape-corner: var(--_extra-small-pressed-shape-corner);\n }\n\n :host([size=medium]) {\n --_size: var(--_medium-size);\n --_icon-size: var(--_medium-icon-size);\n --_square-shape-corner: var(--_medium-square-shape-corner);\n --_pressed-shape-corner: var(--_medium-pressed-shape-corner);\n }\n\n :host([size=large]) {\n --_size: var(--_large-size);\n --_icon-size: var(--_large-icon-size);\n --_square-shape-corner: var(--_large-square-shape-corner);\n --_pressed-shape-corner: var(--_large-pressed-shape-corner);\n }\n\n :host([size=extra-large]) {\n --_size: var(--_extra-large-size);\n --_icon-size: var(--_extra-large-icon-size);\n --_square-shape-corner: var(--_extra-large-square-shape-corner);\n --_pressed-shape-corner: var(--_extra-large-pressed-shape-corner);\n }\n\n :host([selected][toggle-shape]) {\n border-radius: var(--_square-shape-corner);\n }\n\n :host([shape=square]) {\n border-radius: var(--_square-shape-corner);\n }\n\n :host([shape=square][selected][toggle-shape]) {\n border-radius: var(--_round-shape-corner);\n }\n\n :host([toggle-shape]:not([disabled]):active) {\n border-radius: var(--_pressed-shape-corner);\n }\n\n .icon-container {\n position: relative;\n width: var(--_icon-size);\n height: 1px;\n }\n\n .icon-default {\n opacity: 1;\n }\n\n .icon-selected {\n opacity: 0;\n transition-delay: calc(var(--_morph-duration) / 2);\n }\n\n :host([selected][has-selection-icon]) .icon-default {\n opacity: 0;\n transition-delay: 0ms;\n }\n :host([selected][has-selection-icon]) .icon-selected {\n opacity: 1;\n transition-delay: calc(var(--_morph-duration) / 2);\n }\n\n .icon {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_icon-size);\n transform: translate3d(-50%, -50%, 0);\n transition: opacity var(--_morph-duration) linear;\n }\n`;\n"]}
|
package/chip/chip.js
CHANGED
|
@@ -117,7 +117,7 @@ let UmChip = class UmChip extends UmButtonWrapper {
|
|
|
117
117
|
<slot name="leading-icon" @slotchange="${this.#handleLeadingIconSlotChange}"></slot>
|
|
118
118
|
</span>
|
|
119
119
|
<span class="icon selected" part="icon selected">
|
|
120
|
-
<slot name="selected
|
|
120
|
+
<slot name="icon-selected" @slotchange="${this.#handleSelectedIconSlotChange}">
|
|
121
121
|
<svg
|
|
122
122
|
xmlns="http://www.w3.org/2000/svg"
|
|
123
123
|
height="1em"
|
|
@@ -172,7 +172,7 @@ __decorate([
|
|
|
172
172
|
queryAssignedElements({ slot: 'leading-icon', flatten: true })
|
|
173
173
|
], UmChip.prototype, "assignedLeadingIcons", void 0);
|
|
174
174
|
__decorate([
|
|
175
|
-
queryAssignedElements({ slot: 'selected
|
|
175
|
+
queryAssignedElements({ slot: 'icon-selected', flatten: true })
|
|
176
176
|
], UmChip.prototype, "assignedSelectedIcons", void 0);
|
|
177
177
|
__decorate([
|
|
178
178
|
queryAssignedElements({ slot: 'trailing-icon', flatten: true })
|
package/chip/chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './chip.styles.js';\n\nimport '../ripple/ripple.js';\nimport '../elevation/elevation.js';\n\n@customElement('u-chip')\nexport class UmChip extends UmButtonWrapper {\n static override styles = [UmButtonWrapper.styles, styles];\n\n #clickable = false;\n #toggle = false;\n\n /**\n * Whether the chip is selected or not\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property({ type: Boolean, reflect: true })\n get clickable(): boolean {\n return this.#clickable;\n }\n\n set clickable(value: boolean) {\n this.#clickable = value;\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n /**\n * Adds elevation to the chip\n */\n @property({ type: Boolean, reflect: true }) elevated = false;\n\n /**\n * When true, the chip will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean, reflect: true })\n get toggle(): boolean {\n return this.#toggle;\n }\n\n set toggle(value: boolean) {\n this.#toggle = value;\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n /**\n * Add the remove icon\n */\n @property({ type: Boolean, reflect: true }) removable = false;\n\n /**\n * Hide the selected icon\n */\n @property({ type: Boolean, attribute: 'hide-selected-icon', reflect: true }) hideSelectedIcon = false;\n\n /**\n * Whether the chip has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true }) hasLeadingIcon = false;\n\n /**\n * Whether the chip has a selected icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-selected-icon', reflect: true }) hasSelectedIcon = false;\n\n /**\n * Whether the chip has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true }) hasTrailingIcon = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'selected
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './chip.styles.js';\n\nimport '../ripple/ripple.js';\nimport '../elevation/elevation.js';\n\n@customElement('u-chip')\nexport class UmChip extends UmButtonWrapper {\n static override styles = [UmButtonWrapper.styles, styles];\n\n #clickable = false;\n #toggle = false;\n\n /**\n * Whether the chip is selected or not\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property({ type: Boolean, reflect: true })\n get clickable(): boolean {\n return this.#clickable;\n }\n\n set clickable(value: boolean) {\n this.#clickable = value;\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n /**\n * Adds elevation to the chip\n */\n @property({ type: Boolean, reflect: true }) elevated = false;\n\n /**\n * When true, the chip will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean, reflect: true })\n get toggle(): boolean {\n return this.#toggle;\n }\n\n set toggle(value: boolean) {\n this.#toggle = value;\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n /**\n * Add the remove icon\n */\n @property({ type: Boolean, reflect: true }) removable = false;\n\n /**\n * Hide the selected icon\n */\n @property({ type: Boolean, attribute: 'hide-selected-icon', reflect: true }) hideSelectedIcon = false;\n\n /**\n * Whether the chip has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true }) hasLeadingIcon = false;\n\n /**\n * Whether the chip has a selected icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-selected-icon', reflect: true }) hasSelectedIcon = false;\n\n /**\n * Whether the chip has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true }) hasTrailingIcon = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'icon-selected', flatten: true })\n private readonly assignedSelectedIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('#remove-ripple') removeRipple!: UmRipple;\n\n override connectedCallback() {\n super.connectedCallback();\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n #handleRemoveClick(e: Event) {\n e.stopPropagation();\n\n if (!(e as PointerEvent).pointerType) {\n this.removeRipple.createRipple();\n }\n\n const removeEvent = new Event('remove', { cancelable: true });\n this.dispatchEvent(removeEvent);\n\n if (!removeEvent.defaultPrevented) {\n this.remove();\n }\n }\n\n #handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n #handleLeadingIconSlotChange() {\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n #handleSelectedIconSlotChange() {\n this.hasSelectedIcon = this.assignedSelectedIcons.length > 0;\n }\n\n protected override handleClick(event: UIEvent): void {\n super.handleClick(event);\n\n if (!this.toggle) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n protected override renderContent(): HTMLTemplateResult {\n const remove = html`\n <button class=\"icon remove-button focus-ring\" ?disabled=${this.disabled} @click=${this.#handleRemoveClick}>\n <u-ripple id=\"remove-ripple\" ?disabled=${this.disabled}></u-ripple>\n <slot name=\"remove-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n </svg>\n </slot>\n </button>\n `;\n\n return html`\n <div class=\"container\">\n <div class=\"outline\"></div>\n <span class=\"icon leading\" part=\"icon leading\">\n <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n </span>\n <span class=\"icon selected\" part=\"icon selected\">\n <slot name=\"icon-selected\" @slotchange=\"${this.#handleSelectedIconSlotChange}\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\n </svg>\n </slot>\n </span>\n <div class=\"label\">\n <slot></slot>\n </div>\n <slot\n class=\"icon trailing\"\n part=\"icon trailing\"\n name=\"trailing-icon\"\n @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n ${this.removable ? remove : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-chip': UmChip;\n }\n}\n"]}
|