@universal-material/web 3.0.84 → 3.0.86
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/checkbox/checkbox.styles.d.ts.map +1 -1
- package/checkbox/checkbox.styles.js +1 -0
- package/checkbox/checkbox.styles.js.map +1 -1
- package/custom-elements.json +1047 -1038
- package/list/list-item.d.ts.map +1 -1
- package/list/list-item.js +10 -3
- package/list/list-item.js.map +1 -1
- package/list/list-item.styles.d.ts.map +1 -1
- package/list/list-item.styles.js +21 -0
- package/list/list-item.styles.js.map +1 -1
- package/list/list.styles.d.ts.map +1 -1
- package/list/list.styles.js +1 -0
- package/list/list.styles.js.map +1 -1
- package/package.json +1 -1
- package/radio/radio.styles.d.ts.map +1 -1
- package/radio/radio.styles.js +1 -0
- package/radio/radio.styles.js.map +1 -1
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +2 -3
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.d.ts +2 -0
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +4 -1
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/selection-control/selection-control.styles.d.ts.map +1 -1
- package/shared/selection-control/selection-control.styles.js +1 -0
- package/shared/selection-control/selection-control.styles.js.map +1 -1
- package/switch/switch.styles.d.ts.map +1 -1
- package/switch/switch.styles.js +1 -0
- package/switch/switch.styles.js.map +1 -1
- package/tab-bar/tab-bar.d.ts.map +1 -1
- package/tab-bar/tab-bar.js +5 -4
- package/tab-bar/tab-bar.js.map +1 -1
package/list/list-item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAKpE,OAAO,qBAAqB,CAAC;AAE7B,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEU,UAAU,UAAS;IAEpD,MAAM,IAAI,kBAAkB;
|
|
1
|
+
{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAKpE,OAAO,qBAAqB,CAAC;AAE7B,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEU,UAAU,UAAS;IAEpD,MAAM,IAAI,kBAAkB;CAetC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/list/list-item.js
CHANGED
|
@@ -18,9 +18,16 @@ let UmListItem = class UmListItem extends LitElement {
|
|
|
18
18
|
const ripple = html `<u-ripple></u-ripple>`;
|
|
19
19
|
return html `
|
|
20
20
|
${this.selectable ? ripple : nothing}
|
|
21
|
-
<slot name="leading"></slot>
|
|
22
|
-
<
|
|
23
|
-
|
|
21
|
+
<slot name="leading" part="leading"></slot>
|
|
22
|
+
<div class="content" part="content">
|
|
23
|
+
<div class="headline" part="headline">
|
|
24
|
+
<slot></slot>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="supporting-text" part="supporting-text">
|
|
27
|
+
<slot name="supporting-text"></slot>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<slot name="trailing" part="trailing"></slot>`;
|
|
24
31
|
}
|
|
25
32
|
};
|
|
26
33
|
__decorate([
|
package/list/list-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAGtB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAGqC,eAAU,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAGtB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAGqC,eAAU,GAAG,KAAK,CAAC;IAiB/D,CAAC;aAnBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAIvB,MAAM;QACb,MAAM,MAAM,GAAG,IAAI,CAAA,uBAAuB,CAAC;QAC3C,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;oDAUU,CAAC;IACnD,CAAC;;AAhByC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAoB;AAHlD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoBtB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './list-item.styles.js';\n\nimport '../ripple/ripple.js';\n\n@customElement('u-list-item')\nexport class UmListItem extends LitElement {\n static override styles = styles;\n\n @property({type: Boolean, reflect: true}) selectable = false;\n\n override render(): HTMLTemplateResult {\n const ripple = html`<u-ripple></u-ripple>`;\n return html`\n ${this.selectable ? ripple : nothing}\n <slot name=\"leading\" part=\"leading\"></slot>\n <div class=\"content\" part=\"content\">\n <div class=\"headline\" part=\"headline\">\n <slot></slot>\n </div>\n <div class=\"supporting-text\" part=\"supporting-text\">\n <slot name=\"supporting-text\"></slot>\n </div>\n </div>\n <slot name=\"trailing\" part=\"trailing\"></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-list-item': UmListItem;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwClB,CAAC"}
|
package/list/list-item.styles.js
CHANGED
|
@@ -18,5 +18,26 @@ export const styles = css `
|
|
|
18
18
|
slot {
|
|
19
19
|
flex-shrink: 0;
|
|
20
20
|
}
|
|
21
|
+
|
|
22
|
+
.content {
|
|
23
|
+
flex: 1;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.headline {
|
|
27
|
+
font-family: var(--u-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"));
|
|
28
|
+
line-height: var(--u-list-item-headline-line-height, var(--u-body-l-line-height, 1.5rem));
|
|
29
|
+
font-size: var(--u-list-item-headline-font-size, var(--u-body-l-font-size, 1rem));
|
|
30
|
+
letter-spacing: var(--u-list-item-headline-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
|
|
31
|
+
font-weight: var(--u-list-item-headline-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.supporting-text {
|
|
35
|
+
font-family: var(--u-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"));
|
|
36
|
+
line-height: var(--u-list-item-supporting-text-line-height, var(--u-body-m-line-height, 1.25rem));
|
|
37
|
+
font-size: var(--u-list-item-supporting-text-font-size, var(--u-body-m-font-size, 0.875rem));
|
|
38
|
+
letter-spacing: var(--u-list-item-supporting-text-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));
|
|
39
|
+
font-weight: var(--u-list-item-supporting-text-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));
|
|
40
|
+
color: var(--u-list-item-supporting-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
41
|
+
}
|
|
21
42
|
`;
|
|
22
43
|
//# sourceMappingURL=list-item.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n position: relative;\n display: flex;\n align-items: center;\n min-height: var(--u-list-item-min-height, 56px);\n padding-block: var(--u-list-item-block-padding, 8px);\n padding-inline: var(--u-list-item-inline-padding, 16px);\n gap: var(--u-list-item-gap, 16px);\n }\n\n slot:not([name]) {\n display: block;\n margin-inline-end: auto;\n }\n\n slot {\n flex-shrink: 0;\n }\n\n .content {\n flex: 1;\n }\n\n .headline {\n font-family: var(--u-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 line-height: var(--u-list-item-headline-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-list-item-headline-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-list-item-headline-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-list-item-headline-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n }\n\n .supporting-text {\n font-family: var(--u-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 line-height: var(--u-list-item-supporting-text-line-height, var(--u-body-m-line-height, 1.25rem));\n font-size: var(--u-list-item-supporting-text-font-size, var(--u-body-m-font-size, 0.875rem));\n letter-spacing: var(--u-list-item-supporting-text-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));\n font-weight: var(--u-list-item-supporting-text-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));\n color: var(--u-list-item-supporting-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.styles.d.ts","sourceRoot":"","sources":["../../src/list/list.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"list.styles.d.ts","sourceRoot":"","sources":["../../src/list/list.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAKlB,CAAC"}
|
package/list/list.styles.js
CHANGED
package/list/list.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../src/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../src/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;CAKzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n display: block;\n padding-block: var(--u-list-padding, 8px);\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+FlB,CAAC"}
|
package/radio/radio.styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u-radio-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u-radio-disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n :host {\n --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n --_width: var(--u-radio-size, 3rem);\n --_height: var(--_width);\n }\n\n .indicator {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n border-radius: 50%;\n }\n .indicator::before {\n content: \"\";\n width: calc(var(--_indicator-size) / 2);\n height: calc(var(--_indicator-size) / 2);\n background: var(--_indicator-color);\n border-radius: 50%;\n transition: transform 250ms;\n transform: scale3d(0, 0, 1);\n }\n\n input:checked ~ .indicator-container .indicator::before {\n transform: scale3d(1, 1, 1);\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,kDAAmD,CAAC,KAAG,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,kDAAmD,CAAC,KAAG,YAAY,CAAC,CAsB7G,CAAA"}
|
|
@@ -13,10 +13,9 @@ export const mixinSelectionControlListItem = (base) => {
|
|
|
13
13
|
render() {
|
|
14
14
|
return html `
|
|
15
15
|
<u-list-item ?selectable=${!this.disabled}>
|
|
16
|
+
<div slot="trailing">${super.render()}</div>
|
|
16
17
|
<label for="input"><slot></slot></label>
|
|
17
|
-
<
|
|
18
|
-
${super.render()}
|
|
19
|
-
</div>
|
|
18
|
+
<slot name="supporting-text" slot="supporting-text"></slot>
|
|
20
19
|
</u-list-item>`;
|
|
21
20
|
}
|
|
22
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAKhE,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;iBAC3C,WAAM,GAAG;YACb,IAAqC,CAAC,MAAM,IAAI,EAAE;YACnD,GAAG,CAAA;;;QAGD;SACH,CAAC;QAEO,MAAM;YACb,OAAO,IAAI,CAAA;qCACoB,CAAC,IAAI,CAAC,QAAQ
|
|
1
|
+
{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAKhE,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;iBAC3C,WAAM,GAAG;YACb,IAAqC,CAAC,MAAM,IAAI,EAAE;YACnD,GAAG,CAAA;;;QAGD;SACH,CAAC;QAEO,MAAM;YACb,OAAO,IAAI,CAAA;qCACoB,CAAC,IAAI,CAAC,QAAQ;mCAChB,KAAK,CAAC,MAAM,EAAE;;;yBAGxB,CAAC;QACtB,CAAC;;IAGH,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAA","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\n\nimport { MixinBase, MixinReturn } from '../mixin.js';\nimport { UmSelectionControl } from './selection-control.js';\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n // @ts-ignore\n abstract class SelectionControlListItem extends base {\n static styles = [\n (base as unknown as typeof LitElement).styles ?? [],\n css`:host {\n --u-list-item-block-padding: 0;\n display: block;\n }`\n ];\n\n override render(): HTMLTemplateResult {\n return html`\n <u-list-item ?selectable=${!this.disabled}>\n <div slot=\"trailing\">${super.render()}</div>\n <label for=\"input\"><slot></slot></label>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n </u-list-item>`;\n }\n }\n\n return SelectionControlListItem;\n}\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PropertyValues } from '@lit/reactive-element';
|
|
1
2
|
import { HTMLTemplateResult, LitElement } from 'lit';
|
|
2
3
|
import '../../ripple/ripple.js';
|
|
3
4
|
export declare abstract class UmSelectionControl extends LitElement {
|
|
@@ -19,6 +20,7 @@ export declare abstract class UmSelectionControl extends LitElement {
|
|
|
19
20
|
set checked(checked: boolean);
|
|
20
21
|
private _checkedAttribute;
|
|
21
22
|
protected constructor();
|
|
23
|
+
firstUpdated(changedProperties: PropertyValues): void;
|
|
22
24
|
connectedCallback(): void;
|
|
23
25
|
disconnectedCallback(): void;
|
|
24
26
|
protected render(): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAEzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGU,OAAO,CAD3B;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAQ3B;IAEgD,OAAO,CAAC,iBAAiB,CAAS;IAEnF,SAAS;IAKA,iBAAiB;IAMjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAyBhD"}
|
|
1
|
+
{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAEzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGU,OAAO,CAD3B;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAQ3B;IAEgD,OAAO,CAAC,iBAAiB,CAAS;IAEnF,SAAS;IAKA,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAMjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAyBhD"}
|
|
@@ -37,10 +37,13 @@ export class UmSelectionControl extends LitElement {
|
|
|
37
37
|
this._checkedAttribute = false;
|
|
38
38
|
this.elementInternals = this.attachInternals();
|
|
39
39
|
}
|
|
40
|
+
firstUpdated(changedProperties) {
|
|
41
|
+
super.firstUpdated(changedProperties);
|
|
42
|
+
this.input.checked = this.#checked;
|
|
43
|
+
}
|
|
40
44
|
connectedCallback() {
|
|
41
45
|
super.connectedCallback();
|
|
42
46
|
this.addEventListener('click', this.#handleClick);
|
|
43
|
-
this.updateComplete.then(() => this.input.checked = this.#checked);
|
|
44
47
|
}
|
|
45
48
|
disconnectedCallback() {
|
|
46
49
|
super.disconnectedCallback();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n static readonly formAssociated = true;\n\n protected readonly elementInternals: ElementInternals;\n\n @property() name: string | undefined = '';\n @property({type: Boolean, reflect: true}) disabled = false;\n @query('input') input!: HTMLInputElement;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n #checked = false;\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n\n protected abstract renderIndicator(): HTMLTemplateResult;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property({type: Boolean})\n get checked() {\n return this.input ? this.input.checked : this.#checked;\n }\n set checked(checked: boolean) {\n this.#checked = checked;\n\n if (this.input) {\n this.input.checked = checked;\n }\n\n this.elementInternals.setFormValue(checked ? this.value : null);\n }\n\n @property({type: Boolean, attribute: 'checked'}) private _checkedAttribute = false;\n\n protected constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.input.checked = this.#checked;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this.#handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick)\n }\n\n protected override render(): HTMLTemplateResult {\n const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n return html`\n <div class=\"container\">\n ${this.renderRipple ? ripple : nothing}\n <input\n id=\"input\"\n type=${this.inputType}\n class=\"focus-ring\"\n .checked=${this._checkedAttribute}\n .disabled=${this.disabled} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>`;\n }\n\n #handleClick(e: Event) {\n if (e.defaultPrevented) {\n return;\n }\n\n this.checked = this.inputType === 'radio' || !this.checked;\n this.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.styles.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"selection-control.styles.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.styles.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"selection-control.styles.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_state-layer-padding: var(--u--state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u--indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u--indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u--disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u--indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4IlB,CAAC"}
|
package/switch/switch.styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_state-layer-padding: var(--u-switch-state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u-switch-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u-switch-disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u-switch-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n :host {\n --_width: 3.25rem;\n --_height: 2rem;\n --_state-layer-padding: 0;\n --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));\n --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n }\n\n .indicator-container {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n width: var(--_height);\n transition: width 200ms;\n }\n\n .state-layer,\n .indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .indicator {\n width: var(--_height);\n height: var(--_height);\n }\n\n .state-layer {\n flex-shrink: 0;\n width: var(--_state-layer-size);\n height: var(--_state-layer-size);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n .handle {\n width: var(--_unselected-handle-size);\n height: var(--_unselected-handle-size);\n background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n transition: background 200ms, width 200ms, height 200ms;\n }\n\n input {\n border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n transition: background 200ms, border-color 200ms;\n }\n input:checked {\n background-color: var(--_selected-track-background);\n border-color: var(--_selected-track-background);\n }\n input:checked ~ .indicator-container {\n width: 100%;\n }\n input:checked ~ .indicator-container .handle {\n width: var(--_selected-handle-size);\n height: var(--_selected-handle-size);\n background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n @media (hover: hover) {\n :host(:not([disabled]):hover) .state-layer {\n background-color: rgba(var(--u-color-on-surface-rgb, ), var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)));\n }\n }\n :host(:not([disabled]):active) .indicator-container .handle {\n width: var(--_active-handle-size);\n height: var(--_active-handle-size);\n }\n`;\n"]}
|
package/tab-bar/tab-bar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASnB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEjD,OAAO,CAAC,WAAW,CAAe;IACjC,OAAO,CAAC,YAAY,CAAe;IACtC,OAAO,CAAC,UAAU,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAC,CAAc;IAErB,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAEzE,IAAI,cAAc,IAAI,MAAM,CAM3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IACD,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAmBpC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAM1E,iBAAiB;
|
|
1
|
+
{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASnB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEjD,OAAO,CAAC,WAAW,CAAe;IACjC,OAAO,CAAC,YAAY,CAAe;IACtC,OAAO,CAAC,UAAU,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAC,CAAc;IAErB,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAEzE,IAAI,cAAc,IAAI,MAAM,CAM3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IACD,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAmBpC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAM1E,iBAAiB;cAMP,MAAM,IAAI,cAAc;;IA4D3C,mBAAmB;IA4BnB,0BAA0B;CA6B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/tab-bar/tab-bar.js
CHANGED
|
@@ -49,10 +49,7 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
49
49
|
}
|
|
50
50
|
connectedCallback() {
|
|
51
51
|
super.connectedCallback();
|
|
52
|
-
this
|
|
53
|
-
.then(() => {
|
|
54
|
-
this._setScrollIndicatorsActive();
|
|
55
|
-
});
|
|
52
|
+
this.#attach();
|
|
56
53
|
}
|
|
57
54
|
render() {
|
|
58
55
|
return html `
|
|
@@ -161,6 +158,10 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
161
158
|
this._scrollRight.classList.add('active');
|
|
162
159
|
}
|
|
163
160
|
}
|
|
161
|
+
async #attach() {
|
|
162
|
+
await this.updateComplete;
|
|
163
|
+
this._setScrollIndicatorsActive();
|
|
164
|
+
}
|
|
164
165
|
};
|
|
165
166
|
__decorate([
|
|
166
167
|
property({ reflect: true })
|
package/tab-bar/tab-bar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n #tabs: UmTab[] = [];\n #activeTab: UmTab | null = null;\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n this._setScrollIndicatorsActive();\n this._updateTabIndicator();\n });\n\n @property({reflect: true}) variant: 'primary' | 'secondary' = 'primary';\n\n @query('.scroll-left') private _scrollLeft!: HTMLElement;\n @query('.scroll-right') private _scrollRight!: HTMLElement;\n @query('.container') private _container!: HTMLElement;\n @query('.tab-indicator') private _tabIndicator?: HTMLElement;\n\n @queryAssignedElements({flatten: true}) assignedElements!: HTMLElement[];\n\n get activeTabIndex(): number {\n if (!this.activeTab) {\n return -1;\n }\n\n return this.#tabs.indexOf(this.activeTab);\n }\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\n set activeTab(activeTab: UmTab | null) {\n if (!this.#tabs.length) {\n this.#activeTab = null;\n this._updateTabIndicator();\n return;\n }\n\n if (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {\n return;\n }\n\n const previouslyActiveTab = this.#activeTab;\n this.#activeTab = activeTab;\n\n previouslyActiveTab?.requestUpdate();\n\n activeTab.scrollIntoView({block: 'nearest', behavior: 'smooth'});\n activeTab.requestUpdate();\n this._updateTabIndicator();\n }\n\n override attributeChangedCallback(name: string, _: string | null, __: string | null) {\n if (name === 'variant') {\n this._updateTabIndicator();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete\n .then(() => {\n this._setScrollIndicatorsActive();\n });\n }\n\n protected override render(): TemplateResult {\n return html`\n\n <div\n class=\"scroll-indicator scroll-left active\"\n @click=${this.#scrollToLeft}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-left\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${this.variant === 'secondary' ? 'secondary' : ''}\"\n @scrollend=${this.#handleContainerScrollEnd}>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n <div class=\"tab-indicator\"></div>\n </div>\n <div\n class=\"scroll-indicator scroll-right active\"\n @click=${this.#scrollToRight}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-right\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/>\n </svg>\n </slot>\n </div>`;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n #handleSlotChange = (e: Event) => {\n\n const slot = <HTMLSlotElement>e.target;\n this.#tabs = <UmTab[]>slot\n .assignedElements({flatten: true})\n .filter(e => e instanceof UmTab);\n\n for (const tab of this.#tabs) {\n tab._bar = this;\n }\n\n if (this.activeTabIndex > -1) {\n return;\n }\n\n this.activeTab = this.#tabs[0];\n };\n\n #handleContainerScrollEnd = () => {\n this._setScrollIndicatorsActive();\n }\n\n _updateTabIndicator() {\n if (!this._tabIndicator) {\n return;\n }\n\n if (!this.activeTab) {\n this._tabIndicator.style.left = '0';\n this._tabIndicator.style.width = '0';\n return;\n }\n\n const styles = getComputedStyle(this.activeTab);\n const padding = this.variant === 'primary'\n ? parseInt(styles.paddingInline, 10)\n : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;\n }\n\n #scrollToLeft = () => {\n this._container.scrollBy({left: this._container.offsetWidth / -2, behavior: 'smooth'});\n };\n\n #scrollToRight = () => {\n this._container.scrollBy({left: this._container.offsetWidth / 2, behavior: 'smooth'});\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength = this._container.scrollWidth - this._container.offsetWidth;\n\n const isRtl = getComputedStyle(this._container).direction === 'rtl';\n const scrollStart = isRtl\n ? this._container.scrollLeft + scrollLength\n : this._container.scrollLeft;\n\n if (scrollStart - scrollSafeMargin <= 0) {\n this._container.scrollBy(-1, 0);\n this._scrollLeft.classList.remove('active');\n } else {\n this._scrollLeft.classList.add('active');\n }\n\n if (scrollStart >= scrollLength - scrollSafeMargin) {\n this._container.scrollBy(1, 0);\n this._scrollRight.classList.remove('active');\n } else {\n this._scrollRight.classList.add('active');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab-bar': UmTabBar;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1F,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAG1B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;aACtB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAE9C,KAAK,CAAe;IACpB,UAAU,CAAsB;IAChC,eAAe,CAGZ;IAWH,IAAI,cAAc;QAChB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC;IACD,IAAI,cAAc,CAAC,KAAa;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,CAAC,SAAuB;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;YACrF,OAAO;QACT,CAAC;QAED,MAAM,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAE5B,mBAAmB,EAAE,aAAa,EAAE,CAAC;QAErC,SAAS,CAAC,cAAc,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;QACjE,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEQ,wBAAwB,CAAC,IAAY,EAAE,CAAgB,EAAE,EAAiB;QACjF,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,aAAa;;;;;;;;;;2BAUR,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBACrD,IAAI,CAAC,yBAAyB;4BACvB,IAAI,CAAC,iBAAiB;;;;;iBAKjC,IAAI,CAAC,cAAc;;;;;;;;aAQvB,CAAC;IACZ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAjGV,UAAK,GAAY,EAAE,CAAC;QACpB,eAAU,GAAiB,IAAI,CAAC;QAChC,oBAAe,GAAmB,IAAI,cAAc,CAAC,GAAG,EAAE;YACxD,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEwB,YAAO,GAA4B,SAAS,CAAC;QA8FxE,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAE/B,MAAM,IAAI,GAAoB,CAAC,CAAC,MAAM,CAAC;YACvC,IAAI,CAAC,KAAK,GAAY,IAAI;iBACvB,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iBACjC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC;YAEnC,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC7B,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC;gBAC7B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,8BAAyB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC,CAAA;QAsBD,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;QACzF,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;QACxF,CAAC,CAAC;QAnDA,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,iBAAiB,CAgBf;IAEF,yBAAyB,CAExB;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;YACrC,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS;YACxC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;YACpC,CAAC,CAAC,CAAC,CAAC;QAEN,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,GAAG,OAAO,IAAI,CAAC;QAC3E,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC;IACnF,CAAC;IAED,aAAa,CAEX;IAEF,cAAc,CAEZ;IAEF,0BAA0B;QACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;QAE3B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;QAE/E,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;QACpE,MAAM,WAAW,GAAG,KAAK;YACvB,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,YAAY;YAC3C,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;QAE/B,IAAI,WAAW,GAAG,gBAAgB,IAAI,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,WAAW,IAAI,YAAY,GAAG,gBAAgB,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,0BAA0B,EAAE,CAAA;IACnC,CAAC;;AA5K0B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAA8C;AAEzC;IAA9B,KAAK,CAAC,cAAc,CAAC;6CAAmC;AACzB;IAA/B,KAAK,CAAC,eAAe,CAAC;8CAAoC;AAC9B;IAA5B,KAAK,CAAC,YAAY,CAAC;4CAAkC;AACrB;IAAhC,KAAK,CAAC,gBAAgB,CAAC;+CAAqC;AAErB;IAAvC,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;kDAAkC;AAjB9D,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuLpB","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n #tabs: UmTab[] = [];\n #activeTab: UmTab | null = null;\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n this._setScrollIndicatorsActive();\n this._updateTabIndicator();\n });\n\n @property({reflect: true}) variant: 'primary' | 'secondary' = 'primary';\n\n @query('.scroll-left') private _scrollLeft!: HTMLElement;\n @query('.scroll-right') private _scrollRight!: HTMLElement;\n @query('.container') private _container!: HTMLElement;\n @query('.tab-indicator') private _tabIndicator?: HTMLElement;\n\n @queryAssignedElements({flatten: true}) assignedElements!: HTMLElement[];\n\n get activeTabIndex(): number {\n if (!this.activeTab) {\n return -1;\n }\n\n return this.#tabs.indexOf(this.activeTab);\n }\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\n set activeTab(activeTab: UmTab | null) {\n if (!this.#tabs.length) {\n this.#activeTab = null;\n this._updateTabIndicator();\n return;\n }\n\n if (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {\n return;\n }\n\n const previouslyActiveTab = this.#activeTab;\n this.#activeTab = activeTab;\n\n previouslyActiveTab?.requestUpdate();\n\n activeTab.scrollIntoView({block: 'nearest', behavior: 'smooth'});\n activeTab.requestUpdate();\n this._updateTabIndicator();\n }\n\n override attributeChangedCallback(name: string, _: string | null, __: string | null) {\n if (name === 'variant') {\n this._updateTabIndicator();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#attach();\n }\n\n protected override render(): TemplateResult {\n return html`\n\n <div\n class=\"scroll-indicator scroll-left active\"\n @click=${this.#scrollToLeft}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-left\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${this.variant === 'secondary' ? 'secondary' : ''}\"\n @scrollend=${this.#handleContainerScrollEnd}>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n <div class=\"tab-indicator\"></div>\n </div>\n <div\n class=\"scroll-indicator scroll-right active\"\n @click=${this.#scrollToRight}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-right\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/>\n </svg>\n </slot>\n </div>`;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n #handleSlotChange = (e: Event) => {\n\n const slot = <HTMLSlotElement>e.target;\n this.#tabs = <UmTab[]>slot\n .assignedElements({flatten: true})\n .filter(e => e instanceof UmTab);\n\n for (const tab of this.#tabs) {\n tab._bar = this;\n }\n\n if (this.activeTabIndex > -1) {\n return;\n }\n\n this.activeTab = this.#tabs[0];\n };\n\n #handleContainerScrollEnd = () => {\n this._setScrollIndicatorsActive();\n }\n\n _updateTabIndicator() {\n if (!this._tabIndicator) {\n return;\n }\n\n if (!this.activeTab) {\n this._tabIndicator.style.left = '0';\n this._tabIndicator.style.width = '0';\n return;\n }\n\n const styles = getComputedStyle(this.activeTab);\n const padding = this.variant === 'primary'\n ? parseInt(styles.paddingInline, 10)\n : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;\n }\n\n #scrollToLeft = () => {\n this._container.scrollBy({left: this._container.offsetWidth / -2, behavior: 'smooth'});\n };\n\n #scrollToRight = () => {\n this._container.scrollBy({left: this._container.offsetWidth / 2, behavior: 'smooth'});\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength = this._container.scrollWidth - this._container.offsetWidth;\n\n const isRtl = getComputedStyle(this._container).direction === 'rtl';\n const scrollStart = isRtl\n ? this._container.scrollLeft + scrollLength\n : this._container.scrollLeft;\n\n if (scrollStart - scrollSafeMargin <= 0) {\n this._container.scrollBy(-1, 0);\n this._scrollLeft.classList.remove('active');\n } else {\n this._scrollLeft.classList.add('active');\n }\n\n if (scrollStart >= scrollLength - scrollSafeMargin) {\n this._container.scrollBy(1, 0);\n this._scrollRight.classList.remove('active');\n } else {\n this._scrollRight.classList.add('active');\n }\n }\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n this._setScrollIndicatorsActive()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab-bar': UmTabBar;\n }\n}\n"]}
|