@universal-material/web 3.5.0 → 3.5.2
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/app-bar/top-app-bar.d.ts.map +1 -1
- package/app-bar/top-app-bar.js +10 -1
- package/app-bar/top-app-bar.js.map +1 -1
- package/app-bar/top-app-bar.styles.d.ts.map +1 -1
- package/app-bar/top-app-bar.styles.js +16 -13
- package/app-bar/top-app-bar.styles.js.map +1 -1
- package/badge/badge.d.ts +2 -0
- package/badge/badge.d.ts.map +1 -1
- package/badge/badge.js +19 -2
- package/badge/badge.js.map +1 -1
- package/badge/badge.styles.d.ts.map +1 -1
- package/badge/badge.styles.js +3 -5
- package/badge/badge.styles.js.map +1 -1
- package/custom-elements.json +12858 -12819
- package/package.json +1 -1
- package/tab-bar/tab-bar.js +3 -2
- package/tab-bar/tab-bar.js.map +1 -1
- package/tab-bar/tab.d.ts +2 -0
- package/tab-bar/tab.d.ts.map +1 -1
- package/tab-bar/tab.js +15 -7
- package/tab-bar/tab.js.map +1 -1
- package/tab-bar/tab.styles.d.ts.map +1 -1
- package/tab-bar/tab.styles.js +1 -4
- package/tab-bar/tab.styles.js.map +1 -1
- package/vscode.html-custom-data.json +87 -87
package/package.json
CHANGED
package/tab-bar/tab-bar.js
CHANGED
|
@@ -141,8 +141,9 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
141
141
|
this._tabIndicator.style.width = '0';
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
|
-
const
|
|
145
|
-
|
|
144
|
+
const padding = this.variant === 'primary'
|
|
145
|
+
? parseInt(this.activeTab._paddingInline, 10)
|
|
146
|
+
: 0;
|
|
146
147
|
this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;
|
|
147
148
|
this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;
|
|
148
149
|
}
|
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 {\n customElement,\n property,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\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 readonly #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 readonly _scrollLeft!: HTMLElement;\n @query('.scroll-right') private readonly _scrollRight!: HTMLElement;\n @query('.container') private readonly _container!: HTMLElement;\n @query('.tab-indicator') private readonly _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\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\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 (\n !activeTab\n || this.#activeTab === activeTab\n || !this.#tabs.includes(activeTab)\n ) {\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(\n name: string,\n _: string | null,\n __: string | null,\n ) {\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 const classes = { secondary: this.variant === 'secondary' };\n\n return html`\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\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=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${classMap(classes)}\"\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\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=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </slot>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n readonly #handleSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement;\n this.#tabs =\n slot.assignedElements({ flatten: true }).filter(element => element 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 readonly #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 tabStyles = getComputedStyle(this.activeTab);\n const padding =\n this.variant === 'primary' ? parseInt(tabStyles.paddingInline, 10) : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${\n this.activeTab.offsetWidth - padding * 2\n }px`;\n }\n\n readonly #scrollToLeft = () => {\n this._container.scrollBy({\n left: this._container.offsetWidth / -2,\n behavior: 'smooth',\n });\n };\n\n readonly #scrollToRight = () => {\n this._container.scrollBy({\n left: this._container.offsetWidth / 2,\n behavior: 'smooth',\n });\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength =\n 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"]}
|
|
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 {\n customElement,\n property,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\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 readonly #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 readonly _scrollLeft!: HTMLElement;\n @query('.scroll-right') private readonly _scrollRight!: HTMLElement;\n @query('.container') private readonly _container!: HTMLElement;\n @query('.tab-indicator') private readonly _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\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\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 (\n !activeTab\n || this.#activeTab === activeTab\n || !this.#tabs.includes(activeTab)\n ) {\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(\n name: string,\n _: string | null,\n __: string | null,\n ) {\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 const classes = { secondary: this.variant === 'secondary' };\n\n return html`\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\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=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${classMap(classes)}\"\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\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=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </slot>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n readonly #handleSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement;\n this.#tabs =\n slot.assignedElements({ flatten: true }).filter(element => element 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 readonly #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 padding = this.variant === 'primary'\n ? parseInt(this.activeTab._paddingInline, 10)\n : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${\n this.activeTab.offsetWidth - padding * 2\n }px`;\n }\n\n readonly #scrollToLeft = () => {\n this._container.scrollBy({\n left: this._container.offsetWidth / -2,\n behavior: 'smooth',\n });\n };\n\n readonly #scrollToRight = () => {\n this._container.scrollBy({\n left: this._container.offsetWidth / 2,\n behavior: 'smooth',\n });\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength =\n 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"]}
|
package/tab-bar/tab.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ export declare class UmTab extends UmButtonWrapper {
|
|
|
8
8
|
get active(): boolean;
|
|
9
9
|
set active(active: boolean);
|
|
10
10
|
hasIcon: boolean;
|
|
11
|
+
private readonly _container;
|
|
12
|
+
get _paddingInline(): string;
|
|
11
13
|
constructor();
|
|
12
14
|
protected _renderContent(): HTMLTemplateResult;
|
|
13
15
|
connectedCallback(): void;
|
package/tab-bar/tab.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,qBACa,KAAM,SAAQ,eAAe;;IACxC,OAAgB,MAAM,iCAAoC;IAE1D,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAQ7B,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAWzB;IAE4B,OAAO,UAAS;;
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,qBACa,KAAM,SAAQ,eAAe;;IACxC,OAAgB,MAAM,iCAAoC;IAE1D,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAQ7B,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAWzB;IAE4B,OAAO,UAAS;IACxB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAE/D,IAAI,cAAc,IAAI,MAAM,CAE3B;;cAOkB,cAAc,IAAI,kBAAkB;IAiB9C,iBAAiB;IAMjB,oBAAoB;cAiBV,YAAY,CAAC,CAAC,EAAE,OAAO;CAuB3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}
|
package/tab-bar/tab.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
|
3
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { UmButtonWrapper } from '../shared/button-wrapper.js';
|
|
6
6
|
import { styles } from './tab.styles.js';
|
|
@@ -20,6 +20,9 @@ let UmTab = class UmTab extends UmButtonWrapper {
|
|
|
20
20
|
}
|
|
21
21
|
this._bar.activeTabIndex = 0;
|
|
22
22
|
}
|
|
23
|
+
get _paddingInline() {
|
|
24
|
+
return getComputedStyle(this._container).paddingInline;
|
|
25
|
+
}
|
|
23
26
|
constructor() {
|
|
24
27
|
super();
|
|
25
28
|
this._bar = null;
|
|
@@ -34,12 +37,14 @@ let UmTab = class UmTab extends UmButtonWrapper {
|
|
|
34
37
|
_renderContent() {
|
|
35
38
|
const classes = { active: this.active, ['has-icon']: this.hasIcon };
|
|
36
39
|
return html `
|
|
37
|
-
<div class="
|
|
38
|
-
<div class="
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<
|
|
40
|
+
<div class="container">
|
|
41
|
+
<div class="tab-content ${classMap(classes)}">
|
|
42
|
+
<div class="icon" part="icon">
|
|
43
|
+
<slot name="icon" @slotchange=${this.#iconSlotChange}></slot>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="label" part="label">
|
|
46
|
+
<slot></slot>
|
|
47
|
+
</div>
|
|
43
48
|
</div>
|
|
44
49
|
</div>
|
|
45
50
|
`;
|
|
@@ -84,6 +89,9 @@ __decorate([
|
|
|
84
89
|
__decorate([
|
|
85
90
|
property({ type: Boolean })
|
|
86
91
|
], UmTab.prototype, "hasIcon", void 0);
|
|
92
|
+
__decorate([
|
|
93
|
+
query('.container')
|
|
94
|
+
], UmTab.prototype, "_container", void 0);
|
|
87
95
|
UmTab = __decorate([
|
|
88
96
|
customElement('u-tab')
|
|
89
97
|
], UmTab);
|
package/tab-bar/tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;
|
|
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, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.js';\nimport { styles } from './tab.styles.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 readonly #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\n set active(active: boolean) {\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 @query('.container') private readonly _container!: HTMLElement;\n\n get _paddingInline(): string {\n return getComputedStyle(this._container).paddingInline;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n protected override _renderContent(): HTMLTemplateResult {\n const classes = { active: this.active, ['has-icon']: this.hasIcon };\n\n return html`\n <div class=\"container\">\n <div class=\"tab-content ${classMap(classes)}\">\n <div class=\"icon\" part=\"icon\">\n <slot name=\"icon\" @slotchange=${this.#iconSlotChange}></slot>\n </div>\n <div class=\"label\" part=\"label\">\n <slot></slot>\n </div>\n </div>\n </div>\n `;\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(\n new Event('changing', { bubbles: true, cancelable: true }),\n );\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 = e.target as HTMLSlotElement;\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
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
|
-
|
|
3
|
+
.container {
|
|
4
4
|
--u-focus-ring-outline-offset: -4px;
|
|
5
5
|
--_tab-height: var(--u-tab-height, 48px);
|
|
6
6
|
display: block;
|
|
7
7
|
flex: 0.5;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.container {
|
|
11
8
|
padding-inline: var(--u-tab-padding, 16px);
|
|
12
9
|
}
|
|
13
10
|
|
|
@@ -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 .container {\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 .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"]}
|
|
@@ -508,6 +508,17 @@
|
|
|
508
508
|
],
|
|
509
509
|
"references": []
|
|
510
510
|
},
|
|
511
|
+
{
|
|
512
|
+
"name": "u-badge",
|
|
513
|
+
"description": "\n---\n",
|
|
514
|
+
"attributes": [
|
|
515
|
+
{
|
|
516
|
+
"name": "static",
|
|
517
|
+
"values": []
|
|
518
|
+
}
|
|
519
|
+
],
|
|
520
|
+
"references": []
|
|
521
|
+
},
|
|
511
522
|
{
|
|
512
523
|
"name": "u-button-field",
|
|
513
524
|
"description": "\n---\n",
|
|
@@ -586,17 +597,6 @@
|
|
|
586
597
|
],
|
|
587
598
|
"references": []
|
|
588
599
|
},
|
|
589
|
-
{
|
|
590
|
-
"name": "u-badge",
|
|
591
|
-
"description": "\n---\n",
|
|
592
|
-
"attributes": [
|
|
593
|
-
{
|
|
594
|
-
"name": "static",
|
|
595
|
-
"values": []
|
|
596
|
-
}
|
|
597
|
-
],
|
|
598
|
-
"references": []
|
|
599
|
-
},
|
|
600
600
|
{
|
|
601
601
|
"name": "u-calendar",
|
|
602
602
|
"description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
|
|
@@ -824,27 +824,6 @@
|
|
|
824
824
|
],
|
|
825
825
|
"references": []
|
|
826
826
|
},
|
|
827
|
-
{
|
|
828
|
-
"name": "u-dialog",
|
|
829
|
-
"description": "\n---\n\n\n### **Events:**\n - **close**\n- **closed**\n- **cancel**",
|
|
830
|
-
"attributes": [
|
|
831
|
-
{
|
|
832
|
-
"name": "open",
|
|
833
|
-
"values": []
|
|
834
|
-
},
|
|
835
|
-
{
|
|
836
|
-
"name": "has-headline",
|
|
837
|
-
"description": "Whether dialog has headline or not\n\n_Note:_ Readonly",
|
|
838
|
-
"values": []
|
|
839
|
-
},
|
|
840
|
-
{
|
|
841
|
-
"name": "has-icon",
|
|
842
|
-
"description": "Whether dialog has icon\n\n_Note:_ Readonly",
|
|
843
|
-
"values": []
|
|
844
|
-
}
|
|
845
|
-
],
|
|
846
|
-
"references": []
|
|
847
|
-
},
|
|
848
827
|
{
|
|
849
828
|
"name": "u-chip-field",
|
|
850
829
|
"description": "\n---\n\n\n### **Events:**\n - **change**",
|
|
@@ -928,12 +907,39 @@
|
|
|
928
907
|
],
|
|
929
908
|
"references": []
|
|
930
909
|
},
|
|
910
|
+
{
|
|
911
|
+
"name": "u-dialog",
|
|
912
|
+
"description": "\n---\n\n\n### **Events:**\n - **close**\n- **closed**\n- **cancel**",
|
|
913
|
+
"attributes": [
|
|
914
|
+
{
|
|
915
|
+
"name": "open",
|
|
916
|
+
"values": []
|
|
917
|
+
},
|
|
918
|
+
{
|
|
919
|
+
"name": "has-headline",
|
|
920
|
+
"description": "Whether dialog has headline or not\n\n_Note:_ Readonly",
|
|
921
|
+
"values": []
|
|
922
|
+
},
|
|
923
|
+
{
|
|
924
|
+
"name": "has-icon",
|
|
925
|
+
"description": "Whether dialog has icon\n\n_Note:_ Readonly",
|
|
926
|
+
"values": []
|
|
927
|
+
}
|
|
928
|
+
],
|
|
929
|
+
"references": []
|
|
930
|
+
},
|
|
931
931
|
{
|
|
932
932
|
"name": "u-elevation",
|
|
933
933
|
"description": "\n---\n",
|
|
934
934
|
"attributes": [],
|
|
935
935
|
"references": []
|
|
936
936
|
},
|
|
937
|
+
{
|
|
938
|
+
"name": "u-icon",
|
|
939
|
+
"description": "\n---\n",
|
|
940
|
+
"attributes": [],
|
|
941
|
+
"references": []
|
|
942
|
+
},
|
|
937
943
|
{
|
|
938
944
|
"name": "u-field",
|
|
939
945
|
"description": "\n---\n",
|
|
@@ -1009,7 +1015,18 @@
|
|
|
1009
1015
|
"references": []
|
|
1010
1016
|
},
|
|
1011
1017
|
{
|
|
1012
|
-
"name": "u-
|
|
1018
|
+
"name": "u-list-item",
|
|
1019
|
+
"description": "\n---\n",
|
|
1020
|
+
"attributes": [
|
|
1021
|
+
{
|
|
1022
|
+
"name": "selectable",
|
|
1023
|
+
"values": []
|
|
1024
|
+
}
|
|
1025
|
+
],
|
|
1026
|
+
"references": []
|
|
1027
|
+
},
|
|
1028
|
+
{
|
|
1029
|
+
"name": "u-list",
|
|
1013
1030
|
"description": "\n---\n",
|
|
1014
1031
|
"attributes": [],
|
|
1015
1032
|
"references": []
|
|
@@ -1131,18 +1148,22 @@
|
|
|
1131
1148
|
"references": []
|
|
1132
1149
|
},
|
|
1133
1150
|
{
|
|
1134
|
-
"name": "u-
|
|
1151
|
+
"name": "u-overflow-menu-item",
|
|
1135
1152
|
"description": "\n---\n",
|
|
1136
1153
|
"attributes": [
|
|
1137
1154
|
{
|
|
1138
|
-
"name": "
|
|
1155
|
+
"name": "label",
|
|
1156
|
+
"values": []
|
|
1157
|
+
},
|
|
1158
|
+
{
|
|
1159
|
+
"name": "priority",
|
|
1139
1160
|
"values": []
|
|
1140
1161
|
}
|
|
1141
1162
|
],
|
|
1142
1163
|
"references": []
|
|
1143
1164
|
},
|
|
1144
1165
|
{
|
|
1145
|
-
"name": "u-
|
|
1166
|
+
"name": "u-overflow-menu",
|
|
1146
1167
|
"description": "\n---\n",
|
|
1147
1168
|
"attributes": [],
|
|
1148
1169
|
"references": []
|
|
@@ -1207,27 +1228,6 @@
|
|
|
1207
1228
|
],
|
|
1208
1229
|
"references": []
|
|
1209
1230
|
},
|
|
1210
|
-
{
|
|
1211
|
-
"name": "u-overflow-menu-item",
|
|
1212
|
-
"description": "\n---\n",
|
|
1213
|
-
"attributes": [
|
|
1214
|
-
{
|
|
1215
|
-
"name": "label",
|
|
1216
|
-
"values": []
|
|
1217
|
-
},
|
|
1218
|
-
{
|
|
1219
|
-
"name": "priority",
|
|
1220
|
-
"values": []
|
|
1221
|
-
}
|
|
1222
|
-
],
|
|
1223
|
-
"references": []
|
|
1224
|
-
},
|
|
1225
|
-
{
|
|
1226
|
-
"name": "u-overflow-menu",
|
|
1227
|
-
"description": "\n---\n",
|
|
1228
|
-
"attributes": [],
|
|
1229
|
-
"references": []
|
|
1230
|
-
},
|
|
1231
1231
|
{
|
|
1232
1232
|
"name": "u-circular-progress",
|
|
1233
1233
|
"description": "\n---\n",
|
|
@@ -1258,18 +1258,6 @@
|
|
|
1258
1258
|
],
|
|
1259
1259
|
"references": []
|
|
1260
1260
|
},
|
|
1261
|
-
{
|
|
1262
|
-
"name": "u-ripple",
|
|
1263
|
-
"description": "\n---\n",
|
|
1264
|
-
"attributes": [
|
|
1265
|
-
{
|
|
1266
|
-
"name": "disabled",
|
|
1267
|
-
"description": "Disables the ripple.",
|
|
1268
|
-
"values": []
|
|
1269
|
-
}
|
|
1270
|
-
],
|
|
1271
|
-
"references": []
|
|
1272
|
-
},
|
|
1273
1261
|
{
|
|
1274
1262
|
"name": "u-radio-list-item",
|
|
1275
1263
|
"description": "\n---\n",
|
|
@@ -1330,6 +1318,18 @@
|
|
|
1330
1318
|
],
|
|
1331
1319
|
"references": []
|
|
1332
1320
|
},
|
|
1321
|
+
{
|
|
1322
|
+
"name": "u-ripple",
|
|
1323
|
+
"description": "\n---\n",
|
|
1324
|
+
"attributes": [
|
|
1325
|
+
{
|
|
1326
|
+
"name": "disabled",
|
|
1327
|
+
"description": "Disables the ripple.",
|
|
1328
|
+
"values": []
|
|
1329
|
+
}
|
|
1330
|
+
],
|
|
1331
|
+
"references": []
|
|
1332
|
+
},
|
|
1333
1333
|
{
|
|
1334
1334
|
"name": "u-search",
|
|
1335
1335
|
"description": "\n---\n",
|
|
@@ -1569,32 +1569,37 @@
|
|
|
1569
1569
|
"references": []
|
|
1570
1570
|
},
|
|
1571
1571
|
{
|
|
1572
|
-
"name": "u-
|
|
1572
|
+
"name": "u-switch-list-item",
|
|
1573
1573
|
"description": "\n---\n",
|
|
1574
1574
|
"attributes": [
|
|
1575
1575
|
{
|
|
1576
|
-
"name": "
|
|
1576
|
+
"name": "leading",
|
|
1577
1577
|
"values": []
|
|
1578
1578
|
},
|
|
1579
1579
|
{
|
|
1580
|
-
"name": "
|
|
1580
|
+
"name": "name",
|
|
1581
1581
|
"values": []
|
|
1582
1582
|
},
|
|
1583
1583
|
{
|
|
1584
|
-
"name": "
|
|
1584
|
+
"name": "disabled",
|
|
1585
|
+
"values": []
|
|
1586
|
+
},
|
|
1587
|
+
{
|
|
1588
|
+
"name": "value",
|
|
1589
|
+
"description": "The element value to use in form submission when checked.",
|
|
1590
|
+
"values": []
|
|
1591
|
+
},
|
|
1592
|
+
{
|
|
1593
|
+
"name": "checked",
|
|
1585
1594
|
"values": []
|
|
1586
1595
|
}
|
|
1587
1596
|
],
|
|
1588
1597
|
"references": []
|
|
1589
1598
|
},
|
|
1590
1599
|
{
|
|
1591
|
-
"name": "u-switch
|
|
1600
|
+
"name": "u-switch",
|
|
1592
1601
|
"description": "\n---\n",
|
|
1593
1602
|
"attributes": [
|
|
1594
|
-
{
|
|
1595
|
-
"name": "leading",
|
|
1596
|
-
"values": []
|
|
1597
|
-
},
|
|
1598
1603
|
{
|
|
1599
1604
|
"name": "name",
|
|
1600
1605
|
"values": []
|
|
@@ -1616,24 +1621,19 @@
|
|
|
1616
1621
|
"references": []
|
|
1617
1622
|
},
|
|
1618
1623
|
{
|
|
1619
|
-
"name": "u-
|
|
1624
|
+
"name": "u-snackbar",
|
|
1620
1625
|
"description": "\n---\n",
|
|
1621
1626
|
"attributes": [
|
|
1622
1627
|
{
|
|
1623
|
-
"name": "
|
|
1624
|
-
"values": []
|
|
1625
|
-
},
|
|
1626
|
-
{
|
|
1627
|
-
"name": "disabled",
|
|
1628
|
+
"name": "message",
|
|
1628
1629
|
"values": []
|
|
1629
1630
|
},
|
|
1630
1631
|
{
|
|
1631
|
-
"name": "
|
|
1632
|
-
"description": "The element value to use in form submission when checked.",
|
|
1632
|
+
"name": "action",
|
|
1633
1633
|
"values": []
|
|
1634
1634
|
},
|
|
1635
1635
|
{
|
|
1636
|
-
"name": "
|
|
1636
|
+
"name": "show-close",
|
|
1637
1637
|
"values": []
|
|
1638
1638
|
}
|
|
1639
1639
|
],
|