@universal-material/web 3.0.74 → 3.0.75
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/custom-elements.json +2138 -2138
- package/package.json +1 -1
- package/tab-bar/tab.js +2 -2
- package/tab-bar/tab.js.map +1 -1
- package/tab-bar/tab.styles.d.ts.map +1 -1
- package/tab-bar/tab.styles.js +6 -2
- package/tab-bar/tab.styles.js.map +1 -1
package/package.json
CHANGED
package/tab-bar/tab.js
CHANGED
|
@@ -38,12 +38,12 @@ let UmTab = class UmTab extends UmButtonWrapper {
|
|
|
38
38
|
renderContent() {
|
|
39
39
|
return html `
|
|
40
40
|
<div class="tab-content ${this.active ? 'active' : ''} ${this.hasIcon ? 'has-icon' : ''}">
|
|
41
|
-
<div class="icon">
|
|
41
|
+
<div class="icon" part="icon">
|
|
42
42
|
<slot
|
|
43
43
|
name="icon"
|
|
44
44
|
@slotchange=${this.#iconSlotChange}></slot>
|
|
45
45
|
</div>
|
|
46
|
-
<div class="label">
|
|
46
|
+
<div class="label" part="label">
|
|
47
47
|
<slot></slot>
|
|
48
48
|
</div>
|
|
49
49
|
</div>`;
|
package/tab-bar/tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { styles } from './tab.styles.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.js';\n\n@customElement('u-tab')\nexport class UmTab extends UmButtonWrapper {\n static override styles = [UmButtonWrapper.styles, styles];\n\n _bar: UmTabBar | null = null;\n\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n if (this.active) {\n this._bar?._updateTabIndicator();\n }\n });\n\n @state()\n get active(): boolean {\n return this._bar?.activeTab === this;\n }\n set active(active: boolean) {\n\n if (!this._bar) {\n return;\n }\n\n if (active) {\n this._bar.activeTab = this;\n return;\n }\n\n this._bar.activeTabIndex = 0;\n }\n\n @property({type: Boolean}) hasIcon = false;\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n protected override renderContent(): HTMLTemplateResult {\n return html`\n <div class=\"tab-content ${this.active ? 'active' : ''} ${this.hasIcon ? 'has-icon' : ''}\">\n <div class=\"icon\">\n <slot\n name=\"icon\"\n @slotchange=${this.#iconSlotChange}></slot>\n </div>\n <div class=\"label\">\n <slot></slot>\n </div>\n </div>`;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._bar?._updateTabIndicator();\n this._bar?._setScrollIndicatorsActive();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n if (!this._bar) {\n return;\n }\n\n if (this._bar.activeTab === this) {\n this._bar.activeTabIndex = 0;\n }\n\n this._bar._updateTabIndicator();\n this._bar._setScrollIndicatorsActive();\n\n this._bar = null;\n }\n\n protected override handleClick(_: UIEvent) {\n super.handleClick(_);\n\n if (!this._bar) {\n return;\n }\n\n const changePrevented = !this._bar.dispatchEvent(new Event('changing', {bubbles: true, cancelable: true}));\n\n if (changePrevented) {\n return;\n }\n\n this._bar.activeTab = this;\n this._bar.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n #iconSlotChange(e: Event) {\n const slot = <HTMLSlotElement>e.target;\n this.hasIcon = !!slot.assignedElements({flatten: true}).length;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab': UmTab;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { styles } from './tab.styles.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.js';\n\n@customElement('u-tab')\nexport class UmTab extends UmButtonWrapper {\n static override styles = [UmButtonWrapper.styles, styles];\n\n _bar: UmTabBar | null = null;\n\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n if (this.active) {\n this._bar?._updateTabIndicator();\n }\n });\n\n @state()\n get active(): boolean {\n return this._bar?.activeTab === this;\n }\n set active(active: boolean) {\n\n if (!this._bar) {\n return;\n }\n\n if (active) {\n this._bar.activeTab = this;\n return;\n }\n\n this._bar.activeTabIndex = 0;\n }\n\n @property({type: Boolean}) hasIcon = false;\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n protected override renderContent(): HTMLTemplateResult {\n return html`\n <div class=\"tab-content ${this.active ? 'active' : ''} ${this.hasIcon ? 'has-icon' : ''}\">\n <div class=\"icon\" part=\"icon\">\n <slot\n name=\"icon\"\n @slotchange=${this.#iconSlotChange}></slot>\n </div>\n <div class=\"label\" part=\"label\">\n <slot></slot>\n </div>\n </div>`;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._bar?._updateTabIndicator();\n this._bar?._setScrollIndicatorsActive();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n if (!this._bar) {\n return;\n }\n\n if (this._bar.activeTab === this) {\n this._bar.activeTabIndex = 0;\n }\n\n this._bar._updateTabIndicator();\n this._bar._setScrollIndicatorsActive();\n\n this._bar = null;\n }\n\n protected override handleClick(_: UIEvent) {\n super.handleClick(_);\n\n if (!this._bar) {\n return;\n }\n\n const changePrevented = !this._bar.dispatchEvent(new Event('changing', {bubbles: true, cancelable: true}));\n\n if (changePrevented) {\n return;\n }\n\n this._bar.activeTab = this;\n this._bar.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n #iconSlotChange(e: Event) {\n const slot = <HTMLSlotElement>e.target;\n this.hasIcon = !!slot.assignedElements({flatten: true}).length;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab': UmTab;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqDlB,CAAC"}
|
package/tab-bar/tab.styles.js
CHANGED
|
@@ -4,9 +4,8 @@ export const styles = css `
|
|
|
4
4
|
--u-focus-ring-outline-offset: -4px;
|
|
5
5
|
--_tab-height: var(--u-tab-height, 48px);
|
|
6
6
|
display: block;
|
|
7
|
-
flex:
|
|
7
|
+
flex: 0.5;
|
|
8
8
|
padding-inline: var(--u-tab-padding, 16px);
|
|
9
|
-
max-width: var(--u-tab-max-width, 360px);
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
.tab-content {
|
|
@@ -14,6 +13,7 @@ export const styles = css `
|
|
|
14
13
|
flex-direction: var(--_tab-content-direction, column);
|
|
15
14
|
align-items: center;
|
|
16
15
|
justify-content: center;
|
|
16
|
+
max-width: 100%;
|
|
17
17
|
height: var(--_tab-height);
|
|
18
18
|
gap: var(--_tab-content-gap, 0);
|
|
19
19
|
}
|
|
@@ -34,6 +34,10 @@ export const styles = css `
|
|
|
34
34
|
letter-spacing: var(--u-tab-label-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));
|
|
35
35
|
font-weight: var(--u-tab-label-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));
|
|
36
36
|
color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
37
|
+
max-width: 100%;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
text-overflow: ellipsis;
|
|
40
|
+
overflow: hidden;
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
.icon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../src/tab-bar/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../src/tab-bar/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-focus-ring-outline-offset: -4px;\n --_tab-height: var(--u-tab-height, 48px);\n display: block;\n flex: 0.5;\n padding-inline: var(--u-tab-padding, 16px);\n }\n\n .tab-content {\n display: flex;\n flex-direction: var(--_tab-content-direction, column);\n align-items: center;\n justify-content: center;\n max-width: 100%;\n height: var(--_tab-height);\n gap: var(--_tab-content-gap, 0);\n }\n\n .has-icon {\n --_tab-height: var(--u-tab-with-icon-height, 64px);\n }\n\n :host(.force-focus-ring) .button,\n .button:focus-visible {\n border-radius: var(--u-spacing-small, 8px);\n }\n\n .label {\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-tab-label-line-height, var(--u-title-s-line-height, 1.25rem));\n font-size: var(--u-tab-label-font-size, var(--u-title-s-font-size, 0.875rem));\n letter-spacing: var(--u-tab-label-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-tab-label-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));\n color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n max-width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .active .icon,\n .active .label {\n color: var(--_active-label-color);\n }\n`;\n"]}
|