@universal-material/web 3.5.0 → 3.5.1
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/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 +3245 -3206
- 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 +194 -194
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":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,KAAK,EACL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,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;IACvB,eAAe,CAGrB;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;IAED,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;IAED,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,IACE,CAAC,SAAS;eACP,IAAI,CAAC,UAAU,KAAK,SAAS;eAC7B,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,EAClC,CAAC;YACD,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,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnE,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,CAAgB,EAChB,EAAiB;QAEjB,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,MAAM,OAAO,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QAE5D,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;2BAeR,QAAQ,CAAC,OAAO,CAAC;qBACvB,IAAI,CAAC,yBAAyB;4BACvB,IAAI,CAAC,iBAAiB;;;;;iBAKjC,IAAI,CAAC,cAAc;;;;;;;;;;;;;;KAc/B,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAvHV,UAAK,GAAY,EAAE,CAAC;QACpB,eAAU,GAAiB,IAAI,CAAC;QACvB,oBAAe,GAAmB,IAAI,cAAc,CAAC,GAAG,EAAE;YACjE,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;QAE0B,YAAO,GAA4B,SAAS,CAAC;QAoHjE,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACxC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,KAAK,CAAC,CAAC;YAEvF,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;QAEO,8BAAyB,GAAG,GAAG,EAAE;YACxC,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC,CAAC;QAuBO,kBAAa,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACvB,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC;gBACtC,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QAEO,mBAAc,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACvB,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC;gBACrC,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QAxDA,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEQ,iBAAiB,CAcxB;IAEO,yBAAyB,CAEhC;IAEF,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,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS;YACxC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,CAAC;YAC7C,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,GAC/B,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,OAAO,GAAG,CACzC,IAAI,CAAC;IACP,CAAC;IAEQ,aAAa,CAKpB;IAEO,cAAc,CAKrB;IAEF,0BAA0B;QACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;QAE3B,MAAM,YAAY,GAChB,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;QAE5D,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,CAAC;IACpC,CAAC;;AAxM4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA8C;AAElC;IAAvC,KAAK,CAAC,cAAc,CAAC;6CAA4C;AACzB;IAAxC,KAAK,CAAC,eAAe,CAAC;8CAA6C;AAC9B;IAArC,KAAK,CAAC,YAAY,CAAC;4CAA2C;AACrB;IAAzC,KAAK,CAAC,gBAAgB,CAAC;+CAA8C;AAE5B;IAAzC,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkC;AAjBhE,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmNpB","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"]}
|