@cas-smartdesign/tab-bar 4.1.0 → 4.1.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/dist/docs/doc.mjs +71 -72
- package/dist/tab-bar-with-externals.js +47 -40
- package/dist/tab-bar-with-externals.js.map +4 -4
- package/dist/tab-bar.mjs +16 -12
- package/dist/tab-bar.mjs.map +1 -1
- package/npm-third-party-licenses.json +10 -0
- package/package.json +3 -3
package/dist/tab-bar.mjs
CHANGED
|
@@ -2,13 +2,13 @@ import { LitElement as f, unsafeCSS as x, css as g, html as l } from "lit";
|
|
|
2
2
|
import { property as h } from "lit/decorators/property.js";
|
|
3
3
|
import { createPopper as y } from "@popperjs/core";
|
|
4
4
|
import m, { ListDataProvider as S, SelectionType as E } from "@cas-smartdesign/virtual-list";
|
|
5
|
-
const L = ":host{contain:content;outline:none}:host(:not([selected])) .text{opacity:.8}:host(:hover),:host(:focus),:host([anchors-shown]){background-color:var(--sd-tab-bar-hover-color, #e7f1fa);cursor:pointer}.root{position:relative;overflow:hidden;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:var(--sd-tab-bar-padding, 8px) calc(2 * var(--sd-tab-bar-padding, 8px));box-sizing:border-box}.counter{text-align:center;background-color:#d9d9d9;min-width:24px;height:24px;line-height:24px;margin-left:calc(-.5 * var(--sd-tab-bar-padding, 8px));margin-right:var(--sd-tab-bar-padding, 8px)}:host([selected]) .counter{color:var(--sd-tab-bar-selected-counter-color, white);background-color:var(--sd-tab-bar-selected-counter-background-color, #3b85d1)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1}.down-arrow{padding-left:calc(1.5 * var(--sd-tab-bar-padding, 8px));margin-right:calc(-1 * var(--sd-tab-bar-padding, 8px));outline:none;fill:var(--sd-tab-bar-color, #1467ba);flex:0 0 auto}.ripple{position:absolute;background:var(--sd-tab-bar-color, #1467ba);border-radius:50%;width:5px;height:5px;animation:rippleEffect .88s 1;opacity:0}@keyframes rippleEffect{0%{transform:scale(1);opacity:.4}to{transform:scale(100);opacity:0}}";
|
|
5
|
+
const L = ":host{contain:content;outline:none}:host(:not([selected])) .text{opacity:.8}:host(:hover),:host(:focus),:host([anchors-shown]){background-color:var(--sd-tab-bar-hover-color, #e7f1fa);cursor:pointer}:host(:focus-visible){box-shadow:0 0 0 1px var(--sd-tab-bar-focus-color, #1467ba) inset}.root{position:relative;overflow:hidden;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:var(--sd-tab-bar-padding, 8px) calc(2 * var(--sd-tab-bar-padding, 8px));box-sizing:border-box}.counter{text-align:center;background-color:#d9d9d9;min-width:24px;height:24px;line-height:24px;margin-left:calc(-.5 * var(--sd-tab-bar-padding, 8px));margin-right:var(--sd-tab-bar-padding, 8px)}:host([selected]) .counter{color:var(--sd-tab-bar-selected-counter-color, white);background-color:var(--sd-tab-bar-selected-counter-background-color, #3b85d1)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1}.down-arrow{padding-left:calc(1.5 * var(--sd-tab-bar-padding, 8px));margin-right:calc(-1 * var(--sd-tab-bar-padding, 8px));outline:none;fill:var(--sd-tab-bar-color, #1467ba);flex:0 0 auto}.ripple{position:absolute;background:var(--sd-tab-bar-color, #1467ba);border-radius:50%;width:5px;height:5px;animation:rippleEffect .88s 1;opacity:0}@keyframes rippleEffect{0%{transform:scale(1);opacity:.4}to{transform:scale(100);opacity:0}}";
|
|
6
6
|
var C = Object.defineProperty, p = (c, t, e, o) => {
|
|
7
7
|
for (var s = void 0, i = c.length - 1, n; i >= 0; i--)
|
|
8
8
|
(n = c[i]) && (s = n(t, e, s) || s);
|
|
9
9
|
return s && C(t, e, s), s;
|
|
10
10
|
};
|
|
11
|
-
const
|
|
11
|
+
const v = navigator.userAgent.indexOf("Trident") !== -1, b = class b extends f {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.minimumOverlayWidth = 150, this.handleKeyDown = (t) => {
|
|
14
14
|
this.hasAnchors ? (this.vertical ? ["Left", "ArrowLeft", "Right", "ArrowRight", "Enter"] : ["Down", "ArrowDown", "Up", "ArrowUp", "Enter"]).indexOf(t.key) === -1 ? (this.hideAnchors(), this.focus()) : (this.anchorsShown || (this.showAnchors(), window.requestAnimationFrame(() => {
|
|
@@ -17,7 +17,7 @@ const w = navigator.userAgent.indexOf("Trident") !== -1, b = class b extends f {
|
|
|
17
17
|
}, this.handleListSelection = (t) => {
|
|
18
18
|
this.hideAnchors(), t.stopPropagation(), this.dispatchSelectionEvent(this.anchors[t.detail.index]), this.focus();
|
|
19
19
|
}, this.handlePointerLeave = (t) => {
|
|
20
|
-
(
|
|
20
|
+
(v || this.list && !this.list.contains(t.target)) && window.addEventListener("pointermove", this.handlePointerMove);
|
|
21
21
|
}, this.handlePointerMove = (t) => {
|
|
22
22
|
!this.isPointerAbove(t, this) && !this.isPointerAbove(t, this.list) && (this.hideAnchors(), window.removeEventListener("pointermove", this.handlePointerMove));
|
|
23
23
|
};
|
|
@@ -27,8 +27,8 @@ const w = navigator.userAgent.indexOf("Trident") !== -1, b = class b extends f {
|
|
|
27
27
|
}
|
|
28
28
|
set selected(t) {
|
|
29
29
|
if (t)
|
|
30
|
-
this.setAttribute("selected", "");
|
|
31
|
-
else if (this.removeAttribute("selected"), this.shadowRoot && this.showRipple) {
|
|
30
|
+
this.setAttribute("selected", ""), this.setAttribute("aria-selected", "true");
|
|
31
|
+
else if (this.removeAttribute("selected"), this.setAttribute("aria-selected", "false"), this.shadowRoot && this.showRipple) {
|
|
32
32
|
const e = this.shadowRoot.querySelector(".ripple");
|
|
33
33
|
e.style.display = "none", this.showRipple = !1;
|
|
34
34
|
}
|
|
@@ -55,7 +55,7 @@ const w = navigator.userAgent.indexOf("Trident") !== -1, b = class b extends f {
|
|
|
55
55
|
}
|
|
56
56
|
}), this.addEventListener("click", (s) => {
|
|
57
57
|
s.composedPath().indexOf(this.list) === -1 && (this.dispatchSelectionEvent(), s.preventDefault(), s.stopPropagation());
|
|
58
|
-
}), this.addEventListener("keydown", this.handleKeyDown), this.
|
|
58
|
+
}), this.addEventListener("keydown", this.handleKeyDown), this.setAttribute("tabindex", "-1"), this.role = "tab";
|
|
59
59
|
}
|
|
60
60
|
disconnectedCallback() {
|
|
61
61
|
super.disconnectedCallback(), this.hideAnchors();
|
|
@@ -106,7 +106,7 @@ const w = navigator.userAgent.indexOf("Trident") !== -1, b = class b extends f {
|
|
|
106
106
|
{
|
|
107
107
|
name: "computeStyles",
|
|
108
108
|
options: {
|
|
109
|
-
gpuAcceleration: !
|
|
109
|
+
gpuAcceleration: !v
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
112
|
{
|
|
@@ -181,7 +181,7 @@ var B = Object.defineProperty, d = (c, t, e, o) => {
|
|
|
181
181
|
(n = c[i]) && (s = n(t, e, s) || s);
|
|
182
182
|
return s && B(t, e, s), s;
|
|
183
183
|
};
|
|
184
|
-
const
|
|
184
|
+
const w = 40, u = class u extends f {
|
|
185
185
|
constructor() {
|
|
186
186
|
super(...arguments), this.handleSlotChange = () => {
|
|
187
187
|
this.tabElements = this.shadowRoot.querySelector("slot").assignedNodes().filter((e) => e instanceof r);
|
|
@@ -227,7 +227,11 @@ const v = 40, u = class u extends f {
|
|
|
227
227
|
e.adoptedStyleSheets && (this.shadowRoot.adoptedStyleSheets = [
|
|
228
228
|
...this.shadowRoot.adoptedStyleSheets,
|
|
229
229
|
...e.adoptedStyleSheets
|
|
230
|
-
]), this.shadowRoot.querySelector("slot").addEventListener("slotchange", this.handleSlotChange), this.addEventListener("keydown", this.handleKeyDown), this.
|
|
230
|
+
]), this.shadowRoot.querySelector("slot").addEventListener("slotchange", this.handleSlotChange), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("focusin", (s) => {
|
|
231
|
+
this.contains(s.relatedTarget) || (this.focusedIndex = this.selectedIndex, this.updateFocusedState(), this.shadowRoot.querySelector(".root").tabIndex = -1);
|
|
232
|
+
}), this.addEventListener("focusout", (s) => {
|
|
233
|
+
this.contains(s.relatedTarget) || (this.shadowRoot.querySelector(".root").tabIndex = 0);
|
|
234
|
+
}), this.tabButtonContainer.addEventListener("wheel", (s) => {
|
|
231
235
|
if (this.tabButtonContainer.scrollWidth > this.tabButtonContainer.offsetWidth) {
|
|
232
236
|
const i = document.elementsFromPoint(s.x, s.y)[0];
|
|
233
237
|
this.tabButtonContainer.scrollLeft += s.deltaY;
|
|
@@ -246,10 +250,10 @@ const v = 40, u = class u extends f {
|
|
|
246
250
|
// prettier-ignore
|
|
247
251
|
render() {
|
|
248
252
|
return l`
|
|
249
|
-
<div class="root">
|
|
253
|
+
<div class="root" tabindex="0" role="tablist" aria-orientation="${this.vertical ? "vertical" : "horizontal"}">
|
|
250
254
|
${!this.vertical && this.showLeftScrollButton ? l`
|
|
251
255
|
<div class="scroll-button left" @pointerdown="${() => {
|
|
252
|
-
this.tabButtonContainer.scrollLeft -=
|
|
256
|
+
this.tabButtonContainer.scrollLeft -= w;
|
|
253
257
|
}}">
|
|
254
258
|
<div class="ripple"></div>
|
|
255
259
|
<svg><g><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g></svg>
|
|
@@ -260,7 +264,7 @@ const v = 40, u = class u extends f {
|
|
|
260
264
|
</div>
|
|
261
265
|
${!this.vertical && this.showRightScrollButton ? l`
|
|
262
266
|
<div class="scroll-button right" @pointerdown="${() => {
|
|
263
|
-
this.tabButtonContainer.scrollLeft +=
|
|
267
|
+
this.tabButtonContainer.scrollLeft += w;
|
|
264
268
|
}}">
|
|
265
269
|
<div class="ripple"></div>
|
|
266
270
|
<svg><g><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g></svg>
|
package/dist/tab-bar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-bar.mjs","sources":["../tab.ts","../tab-bar.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, PropertyValues, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { createPopper, Instance as Popper } from \"@popperjs/core\";\nimport \"@cas-smartdesign/virtual-list\";\nimport VirtualList, { ListDataProvider, SelectionType } from \"@cas-smartdesign/virtual-list\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Tab.ID]: Tab;\n }\n}\nimport style from \"./tab-style.scss?inline\";\n\nconst isIE11 = navigator.userAgent.indexOf(\"Trident\") !== -1;\n\nexport interface ISelectionEvent {\n anchor: string;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n selection: CustomEvent<ISelectionEvent>;\n}\n\nexport default interface Tab {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class Tab extends LitElement {\n public static readonly ID = \"sd-tab\";\n\n @property({ type: String })\n public text: string;\n @property({ type: Array })\n public anchors: string[];\n @property()\n public index: number;\n @property()\n public showCounter: boolean;\n\n @property({ type: Boolean, reflect: true, attribute: \"anchors-shown\" })\n private anchorsShown: boolean;\n\n public noInk: boolean;\n public vertical: boolean;\n\n public minimumOverlayWidth = 150;\n\n private showRipple: boolean;\n private popper: Popper;\n private list: VirtualList;\n private dataProvider: ListDataProvider;\n private _cssMathMaxSupported: boolean;\n\n get selected(): boolean {\n return this.hasAttribute(\"selected\");\n }\n\n set selected(newValue: boolean) {\n if (newValue) {\n this.setAttribute(\"selected\", \"\");\n } else {\n this.removeAttribute(\"selected\");\n if (this.shadowRoot && this.showRipple) {\n const rippleElement = this.shadowRoot.querySelector(\".ripple\") as HTMLElement;\n rippleElement.style.display = \"none\";\n this.showRipple = false;\n }\n }\n }\n\n public firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n const supportsCSS = window.CSS && window.CSS.supports;\n this._cssMathMaxSupported = supportsCSS && CSS.supports(\"max-width\", \"max(50vw)\");\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const ownerDocument = this.ownerDocument as any;\n if (ownerDocument.adoptedStyleSheets) {\n (this.shadowRoot as any).adoptedStyleSheets = [\n ...(this.shadowRoot as any).adoptedStyleSheets,\n ...ownerDocument.adoptedStyleSheets,\n ];\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n\n this.addEventListener(\"pointerdown\", (event: PointerEvent) => {\n if (!this.noInk && !this.showRipple) {\n this.showRipple = true;\n const rect: DOMRect = this.getBoundingClientRect();\n const rippleElement = this.shadowRoot.querySelector(\".ripple\") as HTMLElement;\n rippleElement.style.left = `${event.clientX - rect.left}px`;\n rippleElement.style.top = `${event.clientY - rect.top}px`;\n rippleElement.style.display = \"\";\n rippleElement.addEventListener(\n \"animationend\",\n () => {\n rippleElement.style.display = \"none\";\n this.showRipple = false;\n },\n { once: true },\n );\n }\n });\n this.addEventListener(\"click\", (event: MouseEvent) => {\n if (event.composedPath().indexOf(this.list) === -1) {\n this.dispatchSelectionEvent();\n event.preventDefault();\n event.stopPropagation();\n }\n });\n this.addEventListener(\"keydown\", this.handleKeyDown);\n if (!this.hasAttribute(\"tabindex\")) {\n this.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.hideAnchors();\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n public render() {\n return html`\n <div class=\"root\" @pointerover=${this.showAnchors} @pointerdown=${this.showAnchors}>\n ${this.showCounter ? html` <span class=\"counter\">${this.index + 1}</span> ` : \"\"}\n <div class=\"text\">${this.text}</div>\n <div class=\"ripple\" style=\"display: none\"></div>\n ${this.hasAnchors\n ? html`\n <svg class=\"down-arrow\" tabindex=\"-1\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">\n <path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>\n </svg>\n `\n : \"\"}\n </div>\n `;\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.hasAnchors) {\n const anchorTriggerKeys = this.vertical\n ? [\"Left\", \"ArrowLeft\", \"Right\", \"ArrowRight\", \"Enter\"]\n : [\"Down\", \"ArrowDown\", \"Up\", \"ArrowUp\", \"Enter\"];\n if (anchorTriggerKeys.indexOf(event.key) === -1) {\n this.hideAnchors();\n this.focus();\n } else {\n if (!this.anchorsShown) {\n this.showAnchors();\n window.requestAnimationFrame(() => {\n // IE would scroll down to bottom because the anchor list has not yet positioned there.\n this.list.focusIndex = 0;\n this.list.focus();\n\n this.updateDropdownSizes();\n });\n }\n event.preventDefault();\n event.stopPropagation();\n }\n } else if (event.key === \"Enter\") {\n this.dispatchSelectionEvent();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private updateDropdownSizes(): void {\n const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n const overlayMaxHeight = (viewportHeight - this.offsetHeight) * 0.5;\n Object.assign(this.list.style, {\n maxHeight: `${overlayMaxHeight}px`,\n minWidth: `${Math.max(this.offsetWidth, this.minimumOverlayWidth)}px`,\n maxWidth: this._cssMathMaxSupported\n ? `max(50vw, ${this.offsetWidth}px)`\n : Math.max((window.innerWidth || document.documentElement.clientWidth) / 2, this.offsetWidth) + \"px\",\n });\n }\n\n private handleListSelection = (event: CustomEvent) => {\n this.hideAnchors();\n event.stopPropagation();\n this.dispatchSelectionEvent(this.anchors[event.detail.index]);\n this.focus();\n };\n\n private dispatchSelectionEvent(selectedAnchor?: string): void {\n this.dispatchEvent(new CustomEvent<ISelectionEvent>(\"selection\", { detail: { anchor: selectedAnchor } }));\n }\n\n private handlePointerLeave = (event: PointerEvent) => {\n if (isIE11 || (this.list && !this.list.contains(event.target as HTMLElement))) {\n window.addEventListener(\"pointermove\", this.handlePointerMove);\n }\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n if (!this.isPointerAbove(event, this) && !this.isPointerAbove(event, this.list)) {\n this.hideAnchors();\n window.removeEventListener(\"pointermove\", this.handlePointerMove);\n }\n };\n\n private isPointerAbove(event: PointerEvent, element: HTMLElement): boolean {\n const rect = element.getBoundingClientRect();\n return (\n rect.left <= event.clientX &&\n rect.right >= event.clientX &&\n rect.top <= event.clientY &&\n rect.bottom >= event.clientY\n );\n }\n\n public showAnchors() {\n if (!this.anchorsShown && this.hasAnchors) {\n this.root.addEventListener(\"pointerleave\", this.handlePointerLeave);\n if (!this.list) {\n this.createList();\n }\n this.dataProvider.items = this.anchors.map((anchor, index) => {\n return {\n caption: anchor,\n index,\n };\n });\n\n this.updateDropdownSizes();\n this.ownerDocument.body.appendChild(this.list);\n if (!this.popper) {\n this.popper = createPopper(this, this.list, {\n placement: this.vertical ? \"right-start\" : \"bottom-start\",\n modifiers: [\n {\n name: \"computeStyles\",\n options: {\n gpuAcceleration: !isIE11,\n },\n },\n {\n name: \"hide\",\n enabled: false,\n },\n {\n name: \"preventOverflow\",\n options: {\n padding: 0,\n },\n },\n {\n name: \"adjustWidthIfNeeded\",\n enabled: true,\n phase: \"read\",\n fn({ state }) {\n const list = state.elements.popper as VirtualList;\n list.increaseWidthOnNextRenderIfNeeded();\n },\n },\n ],\n });\n }\n\n window.requestAnimationFrame(() => {\n if (this.popper) {\n this.popper.update();\n }\n });\n\n this.anchorsShown = true;\n }\n }\n\n private createList(): void {\n this.list = document.createElement(VirtualList.ID) as VirtualList;\n this.dataProvider = new ListDataProvider();\n this.dataProvider.finalSizeIsKnown = true;\n this.dataProvider.connectList(this.list);\n this.list.classList.add(\"anchor-list\");\n this.list.tabIndex = 0;\n this.list.selectionType = SelectionType.TriggerOnly;\n this.list.addEventListener(\"selection\", this.handleListSelection);\n this.list.addEventListener(\"keydown\", (e) => {\n if (e.key == \"Escape\") {\n this.hideAnchors();\n this.focus();\n }\n });\n this.list.addEventListener(\"focusout\", () => {\n this.hideAnchors();\n });\n this.list.setAttribute(\"slot\", \"anchors\");\n this.list.itemHeight = 50;\n Object.assign(this.list.style, {\n zIndex: \"21000\",\n boxShadow: `rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,\n rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,\n rgba(0, 0, 0, 0.2) 0px 3px 1px -2px`,\n background: \"white\",\n overflowY: \"auto\",\n });\n }\n\n hideAnchors(): void {\n if (this.anchorsShown) {\n this.anchorsShown = false;\n this.root.removeEventListener(\"pointerleave\", this.handlePointerLeave);\n if (this.list) {\n this.list.focusIndex = -1;\n this.list.parentElement.removeChild(this.list);\n }\n }\n if (this.popper) {\n this.popper.destroy();\n this.popper = null;\n }\n }\n\n private get hasAnchors(): boolean {\n return !!(this.anchors && this.anchors.length);\n }\n\n private get root(): HTMLElement {\n if (this.shadowRoot) {\n return this.shadowRoot.querySelector(\".root\");\n }\n return null;\n }\n}\n\nVirtualList.ensureDefined();\nif (!customElements.get(Tab.ID)) {\n customElements.define(Tab.ID, Tab);\n}\n","import { LitElement, html, PropertyValues, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport \"./tab\";\nimport Tab from \"./tab\";\nexport { default as Tab } from \"./tab\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [TabBar.ID]: TabBar;\n }\n}\nimport style from \"./tab-bar-style.scss?inline\";\n\nconst SCROLL_STEP = 40;\n\nexport interface ISelectionEvent {\n selectedTab: {\n index: number;\n tabElement: Tab;\n };\n anchor: string;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n selection: CustomEvent<ISelectionEvent>;\n}\n\nexport default interface TabBar {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class TabBar extends LitElement {\n public static readonly ID = \"sd-tab-bar\";\n\n @property({ type: Boolean, reflect: true, attribute: \"no-bar\" })\n public noBar: boolean;\n @property({ type: Boolean, reflect: true, attribute: \"no-slide\" })\n public noSlide: boolean;\n @property({ type: Boolean, reflect: true })\n public vertical: boolean;\n @property({ type: Boolean, reflect: true, attribute: \"show-counter\" })\n public showCounter: boolean;\n\n public tabElements: Tab[];\n\n @property()\n private showLeftScrollButton: boolean;\n @property()\n private showRightScrollButton: boolean;\n\n private _focusedIndex: number;\n private _selectedIndex: number;\n private resizeObserver: ResizeObserver;\n private lastKnownWidth: number;\n private _tabButtonContainer: HTMLElement;\n\n static shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n public connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => {\n this.debounce(\"update-scroll-button-visibility\", () => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n this.updateScrollButtonVisibility();\n }\n });\n });\n this.resizeObserver.observe(this);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.disconnect();\n }\n\n public firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const ownerDocument = this.ownerDocument as any;\n if (ownerDocument.adoptedStyleSheets) {\n (this.shadowRoot as any).adoptedStyleSheets = [\n ...(this.shadowRoot as any).adoptedStyleSheets,\n ...ownerDocument.adoptedStyleSheets,\n ];\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n\n const slot = this.shadowRoot.querySelector(\"slot\");\n slot.addEventListener(\"slotchange\", this.handleSlotChange);\n\n this.addEventListener(\"keydown\", this.handleKeyDown);\n\n this.tabButtonContainer.addEventListener(\"wheel\", (e) => {\n if (this.tabButtonContainer.scrollWidth > this.tabButtonContainer.offsetWidth) {\n const oldTab = document.elementsFromPoint(e.x, e.y)[0];\n\n this.tabButtonContainer.scrollLeft += e.deltaY;\n\n const newTab = document.elementsFromPoint(e.x, e.y)[0];\n\n if (oldTab != newTab) {\n if (oldTab instanceof Tab) {\n oldTab.hideAnchors();\n }\n if (newTab instanceof Tab) {\n newTab.showAnchors();\n }\n }\n\n e.preventDefault();\n }\n });\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n // prettier-ignore\n public render() {\n return html`\n <div class=\"root\">\n ${!this.vertical && this.showLeftScrollButton ? html`\n <div class=\"scroll-button left\" @pointerdown=\"${() => {\n this.tabButtonContainer.scrollLeft -= SCROLL_STEP;\n }}\">\n <div class=\"ripple\"></div>\n <svg><g><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path></g></svg>\n </div>` : \"\"}\n <div class=\"tab-button-container\" @scroll=\"${this.updateScrollButtonVisibility}\">\n <slot></slot>\n ${this.noBar ? \"\" : html` <div class=\"slider\"></div>`}\n </div>\n ${!this.vertical && this.showRightScrollButton ? html`\n <div class=\"scroll-button right\" @pointerdown=\"${() => {\n this.tabButtonContainer.scrollLeft += SCROLL_STEP;\n }}\">\n <div class=\"ripple\"></div>\n <svg><g><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path></g></svg>\n </div>` : \"\"}\n </div>\n `;\n }\n\n public set selectedIndex(newValue: number) {\n if (this._selectedIndex !== newValue) {\n this.focusedIndex = newValue;\n this._selectedIndex = newValue;\n this.updateSelectionState();\n }\n }\n\n public get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n private updateSelectionState(): void {\n if (this.tabElements) {\n this.tabElements.forEach((node: HTMLElement, ind: number) => {\n if (ind === this._selectedIndex) {\n (node as Tab).selected = true;\n if (this.slider) {\n window.requestAnimationFrame(() => {\n let offsetLeft = node.offsetLeft;\n let offsetTop = node.offsetTop;\n\n if (node.offsetParent != this._tabButtonContainer) {\n offsetLeft -= this._tabButtonContainer.offsetLeft;\n offsetTop -= this._tabButtonContainer.offsetTop;\n }\n\n const slider = this.slider;\n if (this.vertical) {\n slider.style.height = node.offsetHeight + \"px\";\n slider.style.transform = `translateY(${offsetTop}px)`;\n } else {\n slider.style.width = node.offsetWidth + \"px\";\n slider.style.transform = `translateX(${offsetLeft}px)`;\n }\n });\n }\n } else {\n (node as Tab).selected = false;\n }\n });\n }\n }\n\n public set focusedIndex(newValue: number) {\n if (this._focusedIndex !== newValue) {\n this._focusedIndex = newValue;\n this.updateFocusedState();\n }\n }\n\n public get focusedIndex(): number {\n return this._focusedIndex;\n }\n\n private updateFocusedState() {\n if (this.tabElements && this.focusedIndex >= 0 && this.focusedIndex < this.tabElements.length) {\n this.scrollToFocusedIfNeeded();\n this.tabElements[this.focusedIndex].focus();\n }\n }\n\n private get slider(): HTMLElement {\n return this.shadowRoot.querySelector(\".slider\");\n }\n\n private get tabButtonContainer(): HTMLElement {\n if (!this._tabButtonContainer) {\n this._tabButtonContainer = this.shadowRoot.querySelector(\".tab-button-container\");\n }\n return this._tabButtonContainer;\n }\n\n private scrollToFocusedIfNeeded(): void {\n if (this.tabElements && this.focusedIndex >= 0 && this.focusedIndex < this.tabElements.length) {\n const selectedNode = this.tabElements[this.focusedIndex] as HTMLElement;\n let nodeLeft: number = selectedNode.offsetLeft;\n if (selectedNode.offsetParent != this._tabButtonContainer) {\n nodeLeft -= this._tabButtonContainer.offsetLeft;\n }\n const nodeWidth: number = selectedNode.offsetWidth;\n const nodeRight: number = nodeLeft + nodeWidth;\n if (\n nodeLeft > this.tabButtonContainer.scrollLeft &&\n nodeRight < this.tabButtonContainer.scrollLeft + this.tabButtonContainer.offsetWidth\n ) {\n return;\n }\n if (this.tabButtonContainer.scrollLeft < nodeLeft) {\n this.tabButtonContainer.scrollLeft = nodeRight - this.tabButtonContainer.offsetWidth;\n } else if (this.tabButtonContainer.scrollLeft + this.tabButtonContainer.offsetWidth > nodeRight) {\n this.tabButtonContainer.scrollLeft = nodeLeft;\n }\n }\n }\n\n private handleSlotChange = () => {\n this.tabElements = this.shadowRoot\n .querySelector(\"slot\")\n .assignedNodes()\n .filter((node) => node instanceof Tab) as Tab[];\n let index = 0;\n this.tabElements.forEach((tab) => {\n tab.vertical = this.vertical;\n tab.showCounter = this.showCounter;\n tab.index = index++;\n tab.addEventListener(\"focus\", this.handleTabFocus);\n tab.addEventListener(\"selection\", this.handleTabSelection);\n });\n this.updateScrollButtonVisibility();\n if (this.selectedIndex == null) {\n this._focusedIndex = 0;\n this._selectedIndex = 0;\n }\n this.updateSelectionState();\n };\n\n private handleTabFocus = (event: FocusEvent) => {\n const index = (event.target as Tab).index;\n if (this.focusedIndex !== index) {\n this._focusedIndex = index;\n this.scrollToFocusedIfNeeded();\n }\n };\n\n private handleTabSelection = (event: CustomEvent) => {\n this.selectedIndex = (event.target as Tab).index;\n this.dispatchSelectionEvent(event.detail.anchor);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"Up\":\n case \"ArrowUp\":\n case \"Left\":\n case \"ArrowLeft\":\n event.preventDefault();\n this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\n break;\n case \"Down\":\n case \"ArrowDown\":\n case \"Right\":\n case \"ArrowRight\":\n event.preventDefault();\n this.focusedIndex = Math.min(this.focusedIndex + 1, this.tabElements.length - 1);\n break;\n }\n };\n\n private updateScrollButtonVisibility(): void {\n this.showLeftScrollButton = this.tabButtonContainer.scrollLeft !== 0;\n this.showRightScrollButton =\n this.tabButtonContainer.scrollLeft <\n this.tabButtonContainer.scrollWidth - this.tabButtonContainer.offsetWidth;\n }\n\n private dispatchSelectionEvent(selectedAnchor?: string): void {\n this.dispatchEvent(\n new CustomEvent<ISelectionEvent>(\"selection\", {\n detail: {\n selectedTab: {\n index: this.selectedIndex,\n tabElement: this.tabElements[this.selectedIndex],\n },\n anchor: selectedAnchor,\n },\n }),\n );\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) {\n return;\n }\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n}\n\nif (!customElements.get(TabBar.ID)) {\n customElements.define(TabBar.ID, TabBar);\n}\n"],"names":["isIE11","_Tab","LitElement","event","newValue","rippleElement","changedProperties","supportsCSS","ownerDocument","rect","css","unsafeCSS","style","html","overlayMaxHeight","selectedAnchor","element","anchor","index","createPopper","state","VirtualList","ListDataProvider","SelectionType","e","Tab","__decorateClass","property","SCROLL_STEP","_TabBar","node","tab","oldTab","newTab","ind","offsetLeft","offsetTop","slider","selectedNode","nodeLeft","nodeWidth","nodeRight","id","actor","TabBar"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAS,UAAU,UAAU,QAAQ,SAAS,MAAM,IAkCrCC,IAArB,MAAqBA,UAAYC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBI,KAAO,sBAAsB,KAqG7B,KAAQ,gBAAgB,CAACC,MAAyB;AAC9C,MAAI,KAAK,cACqB,KAAK,WACzB,CAAC,QAAQ,aAAa,SAAS,cAAc,OAAO,IACpD,CAAC,QAAQ,aAAa,MAAM,WAAW,OAAO,GAC9B,QAAQA,EAAM,GAAG,MAAM,MACzC,KAAK,YAAA,GACL,KAAK,MAAA,MAEA,KAAK,iBACN,KAAK,YAAA,GACL,OAAO,sBAAsB,MAAM;AAE/B,aAAK,KAAK,aAAa,GACvB,KAAK,KAAK,MAAA,GAEV,KAAK,oBAAA;AAAA,MACT,CAAC,IAELA,EAAM,eAAA,GACNA,EAAM,gBAAA,KAEHA,EAAM,QAAQ,YACrB,KAAK,uBAAA,GACLA,EAAM,eAAA,GACNA,EAAM,gBAAA;AAAA,IAEd,GAcA,KAAQ,sBAAsB,CAACA,MAAuB;AAClD,WAAK,YAAA,GACLA,EAAM,gBAAA,GACN,KAAK,uBAAuB,KAAK,QAAQA,EAAM,OAAO,KAAK,CAAC,GAC5D,KAAK,MAAA;AAAA,IACT,GAMA,KAAQ,qBAAqB,CAACA,MAAwB;AAClD,OAAIH,KAAW,KAAK,QAAQ,CAAC,KAAK,KAAK,SAASG,EAAM,MAAqB,MACvE,OAAO,iBAAiB,eAAe,KAAK,iBAAiB;AAAA,IAErE,GAEA,KAAQ,oBAAoB,CAACA,MAAwB;AACjD,MAAI,CAAC,KAAK,eAAeA,GAAO,IAAI,KAAK,CAAC,KAAK,eAAeA,GAAO,KAAK,IAAI,MAC1E,KAAK,YAAA,GACL,OAAO,oBAAoB,eAAe,KAAK,iBAAiB;AAAA,IAExE;AAAA,EAAA;AAAA,EA5JA,IAAI,WAAoB;AACpB,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA,EAEA,IAAI,SAASC,GAAmB;AAC5B,QAAIA;AACA,WAAK,aAAa,YAAY,EAAE;AAAA,aAEhC,KAAK,gBAAgB,UAAU,GAC3B,KAAK,cAAc,KAAK,YAAY;AACpC,YAAMC,IAAgB,KAAK,WAAW,cAAc,SAAS;AAC7D,MAAAA,EAAc,MAAM,UAAU,QAC9B,KAAK,aAAa;AAAA,IACtB;AAAA,EAER;AAAA,EAEO,aAAaC,GAAyC;AACzD,UAAM,aAAaA,CAAiB;AACpC,UAAMC,IAAc,OAAO,OAAO,OAAO,IAAI;AAC7C,SAAK,uBAAuBA,KAAe,IAAI,SAAS,aAAa,WAAW;AAGhF,UAAMC,IAAgB,KAAK;AAC3B,IAAIA,EAAc,uBACb,KAAK,WAAmB,qBAAqB;AAAA,MAC1C,GAAI,KAAK,WAAmB;AAAA,MAC5B,GAAGA,EAAc;AAAA,IAAA,IAKzB,KAAK,iBAAiB,eAAe,CAACL,MAAwB;AAC1D,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,YAAY;AACjC,aAAK,aAAa;AAClB,cAAMM,IAAgB,KAAK,sBAAA,GACrBJ,IAAgB,KAAK,WAAW,cAAc,SAAS;AAC7D,QAAAA,EAAc,MAAM,OAAO,GAAGF,EAAM,UAAUM,EAAK,IAAI,MACvDJ,EAAc,MAAM,MAAM,GAAGF,EAAM,UAAUM,EAAK,GAAG,MACrDJ,EAAc,MAAM,UAAU,IAC9BA,EAAc;AAAA,UACV;AAAA,UACA,MAAM;AACF,YAAAA,EAAc,MAAM,UAAU,QAC9B,KAAK,aAAa;AAAA,UACtB;AAAA,UACA,EAAE,MAAM,GAAA;AAAA,QAAK;AAAA,MAErB;AAAA,IACJ,CAAC,GACD,KAAK,iBAAiB,SAAS,CAACF,MAAsB;AAClD,MAAIA,EAAM,eAAe,QAAQ,KAAK,IAAI,MAAM,OAC5C,KAAK,uBAAA,GACLA,EAAM,eAAA,GACNA,EAAM,gBAAA;AAAA,IAEd,CAAC,GACD,KAAK,iBAAiB,WAAW,KAAK,aAAa,GAC9C,KAAK,aAAa,UAAU,KAC7B,KAAK,aAAa,YAAY,GAAG;AAAA,EAEzC;AAAA,EAEO,uBAA6B;AAChC,UAAM,qBAAA,GACN,KAAK,YAAA;AAAA,EACT;AAAA,EAEA,WAAW,SAAS;AAChB,WAAO;AAAA,MACHO;AAAA,kBACMC,EAAUC,CAAK,CAAC;AAAA;AAAA,IAAA;AAAA,EAG9B;AAAA,EAEO,SAAS;AACZ,WAAOC;AAAA,6CAC8B,KAAK,WAAW,iBAAiB,KAAK,WAAW;AAAA,kBAC5E,KAAK,cAAcA,2BAA8B,KAAK,QAAQ,CAAC,aAAa,EAAE;AAAA,oCAC5D,KAAK,IAAI;AAAA;AAAA,kBAE3B,KAAK,aACDA;AAAA;AAAA;AAAA;AAAA,0BAKA,EAAE;AAAA;AAAA;AAAA,EAGpB;AAAA,EA+BQ,sBAA4B;AAEhC,UAAMC,MADiB,OAAO,eAAe,SAAS,gBAAgB,gBAC3B,KAAK,gBAAgB;AAChE,WAAO,OAAO,KAAK,KAAK,OAAO;AAAA,MAC3B,WAAW,GAAGA,CAAgB;AAAA,MAC9B,UAAU,GAAG,KAAK,IAAI,KAAK,aAAa,KAAK,mBAAmB,CAAC;AAAA,MACjE,UAAU,KAAK,uBACT,aAAa,KAAK,WAAW,QAC7B,KAAK,KAAK,OAAO,cAAc,SAAS,gBAAgB,eAAe,GAAG,KAAK,WAAW,IAAI;AAAA,IAAA,CACvG;AAAA,EACL;AAAA,EASQ,uBAAuBC,GAA+B;AAC1D,SAAK,cAAc,IAAI,YAA6B,aAAa,EAAE,QAAQ,EAAE,QAAQA,EAAA,EAAe,CAAG,CAAC;AAAA,EAC5G;AAAA,EAeQ,eAAeZ,GAAqBa,GAA+B;AACvE,UAAMP,IAAOO,EAAQ,sBAAA;AACrB,WACIP,EAAK,QAAQN,EAAM,WACnBM,EAAK,SAASN,EAAM,WACpBM,EAAK,OAAON,EAAM,WAClBM,EAAK,UAAUN,EAAM;AAAA,EAE7B;AAAA,EAEO,cAAc;AACjB,IAAI,CAAC,KAAK,gBAAgB,KAAK,eAC3B,KAAK,KAAK,iBAAiB,gBAAgB,KAAK,kBAAkB,GAC7D,KAAK,QACN,KAAK,WAAA,GAET,KAAK,aAAa,QAAQ,KAAK,QAAQ,IAAI,CAACc,GAAQC,OACzC;AAAA,MACH,SAASD;AAAA,MACT,OAAAC;AAAA,IAAA,EAEP,GAED,KAAK,oBAAA,GACL,KAAK,cAAc,KAAK,YAAY,KAAK,IAAI,GACxC,KAAK,WACN,KAAK,SAASC,EAAa,MAAM,KAAK,MAAM;AAAA,MACxC,WAAW,KAAK,WAAW,gBAAgB;AAAA,MAC3C,WAAW;AAAA,QACP;AAAA,UACI,MAAM;AAAA,UACN,SAAS;AAAA,YACL,iBAAiB,CAACnB;AAAA,UAAA;AAAA,QACtB;AAAA,QAEJ;AAAA,UACI,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,QAEb;AAAA,UACI,MAAM;AAAA,UACN,SAAS;AAAA,YACL,SAAS;AAAA,UAAA;AAAA,QACb;AAAA,QAEJ;AAAA,UACI,MAAM;AAAA,UACN,SAAS;AAAA,UACT,OAAO;AAAA,UACP,GAAG,EAAE,OAAAoB,KAAS;AAEV,YADaA,EAAM,SAAS,OACvB,kCAAA;AAAA,UACT;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ,CACH,IAGL,OAAO,sBAAsB,MAAM;AAC/B,MAAI,KAAK,UACL,KAAK,OAAO,OAAA;AAAA,IAEpB,CAAC,GAED,KAAK,eAAe;AAAA,EAE5B;AAAA,EAEQ,aAAmB;AACvB,SAAK,OAAO,SAAS,cAAcC,EAAY,EAAE,GACjD,KAAK,eAAe,IAAIC,EAAA,GACxB,KAAK,aAAa,mBAAmB,IACrC,KAAK,aAAa,YAAY,KAAK,IAAI,GACvC,KAAK,KAAK,UAAU,IAAI,aAAa,GACrC,KAAK,KAAK,WAAW,GACrB,KAAK,KAAK,gBAAgBC,EAAc,aACxC,KAAK,KAAK,iBAAiB,aAAa,KAAK,mBAAmB,GAChE,KAAK,KAAK,iBAAiB,WAAW,CAACC,MAAM;AACzC,MAAIA,EAAE,OAAO,aACT,KAAK,YAAA,GACL,KAAK,MAAA;AAAA,IAEb,CAAC,GACD,KAAK,KAAK,iBAAiB,YAAY,MAAM;AACzC,WAAK,YAAA;AAAA,IACT,CAAC,GACD,KAAK,KAAK,aAAa,QAAQ,SAAS,GACxC,KAAK,KAAK,aAAa,IACvB,OAAO,OAAO,KAAK,KAAK,OAAO;AAAA,MAC3B,QAAQ;AAAA,MACR,WAAW;AAAA;AAAA;AAAA,MAGX,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA,CACd;AAAA,EACL;AAAA,EAEA,cAAoB;AAChB,IAAI,KAAK,iBACL,KAAK,eAAe,IACpB,KAAK,KAAK,oBAAoB,gBAAgB,KAAK,kBAAkB,GACjE,KAAK,SACL,KAAK,KAAK,aAAa,IACvB,KAAK,KAAK,cAAc,YAAY,KAAK,IAAI,KAGjD,KAAK,WACL,KAAK,OAAO,QAAA,GACZ,KAAK,SAAS;AAAA,EAEtB;AAAA,EAEA,IAAY,aAAsB;AAC9B,WAAO,CAAC,EAAE,KAAK,WAAW,KAAK,QAAQ;AAAA,EAC3C;AAAA,EAEA,IAAY,OAAoB;AAC5B,WAAI,KAAK,aACE,KAAK,WAAW,cAAc,OAAO,IAEzC;AAAA,EACX;AACJ;AAlTIvB,EAAuB,KAAK;AADhC,IAAqBwB,IAArBxB;AAIWyB,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHTF,EAIV,WAAA,MAAA;AAEAC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GALRF,EAMV,WAAA,SAAA;AAEAC,EAAA;AAAA,EADNC,EAAA;AAAS,GAPOF,EAQV,WAAA,OAAA;AAEAC,EAAA;AAAA,EADNC,EAAA;AAAS,GATOF,EAUV,WAAA,aAAA;AAGCC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,iBAAiB;AAAA,GAZrDF,EAaT,WAAA,cAAA;AAwSZJ,EAAY,cAAA;AACP,eAAe,IAAII,EAAI,EAAE,KAC1B,eAAe,OAAOA,EAAI,IAAIA,CAAG;;;;;;;ACzVrC,MAAMG,IAAc,IAsCCC,IAArB,MAAqBA,UAAe3B,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GA0NI,KAAQ,mBAAmB,MAAM;AAC7B,WAAK,cAAc,KAAK,WACnB,cAAc,MAAM,EACpB,cAAA,EACA,OAAO,CAAC4B,MAASA,aAAgBL,CAAG;AACzC,UAAIP,IAAQ;AACZ,WAAK,YAAY,QAAQ,CAACa,MAAQ;AAC9B,QAAAA,EAAI,WAAW,KAAK,UACpBA,EAAI,cAAc,KAAK,aACvBA,EAAI,QAAQb,KACZa,EAAI,iBAAiB,SAAS,KAAK,cAAc,GACjDA,EAAI,iBAAiB,aAAa,KAAK,kBAAkB;AAAA,MAC7D,CAAC,GACD,KAAK,6BAAA,GACD,KAAK,iBAAiB,SACtB,KAAK,gBAAgB,GACrB,KAAK,iBAAiB,IAE1B,KAAK,qBAAA;AAAA,IACT,GAEA,KAAQ,iBAAiB,CAAC5B,MAAsB;AAC5C,YAAMe,IAASf,EAAM,OAAe;AACpC,MAAI,KAAK,iBAAiBe,MACtB,KAAK,gBAAgBA,GACrB,KAAK,wBAAA;AAAA,IAEb,GAEA,KAAQ,qBAAqB,CAACf,MAAuB;AACjD,WAAK,gBAAiBA,EAAM,OAAe,OAC3C,KAAK,uBAAuBA,EAAM,OAAO,MAAM;AAAA,IACnD,GAEA,KAAQ,gBAAgB,CAACA,MAAyB;AAC9C,cAAQA,EAAM,KAAA;AAAA,QACV,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACD,UAAAA,EAAM,eAAA,GACN,KAAK,eAAe,KAAK,IAAI,KAAK,eAAe,GAAG,CAAC;AACrD;AAAA,QACJ,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACD,UAAAA,EAAM,eAAA,GACN,KAAK,eAAe,KAAK,IAAI,KAAK,eAAe,GAAG,KAAK,YAAY,SAAS,CAAC;AAC/E;AAAA,MAAA;AAAA,IAEZ,GAuBA,KAAQ,YAAY,CAAA;AAAA,EAAC;AAAA,EAtQd,oBAAoB;AACvB,UAAM,kBAAA,GACN,KAAK,iBAAiB,IAAI,eAAe,MAAM;AAC3C,WAAK,SAAS,mCAAmC,MAAM;AACnD,QAAI,KAAK,mBAAmB,KAAK,gBAC7B,KAAK,iBAAiB,KAAK,aAC3B,KAAK,6BAAA;AAAA,MAEb,CAAC;AAAA,IACL,CAAC,GACD,KAAK,eAAe,QAAQ,IAAI;AAAA,EACpC;AAAA,EAEO,uBAAuB;AAC1B,UAAM,qBAAA,GACN,KAAK,eAAe,WAAA;AAAA,EACxB;AAAA,EAEO,aAAaG,GAAyC;AACzD,UAAM,aAAaA,CAAiB;AAGpC,UAAME,IAAgB,KAAK;AAC3B,IAAIA,EAAc,uBACb,KAAK,WAAmB,qBAAqB;AAAA,MAC1C,GAAI,KAAK,WAAmB;AAAA,MAC5B,GAAGA,EAAc;AAAA,IAAA,IAKZ,KAAK,WAAW,cAAc,MAAM,EAC5C,iBAAiB,cAAc,KAAK,gBAAgB,GAEzD,KAAK,iBAAiB,WAAW,KAAK,aAAa,GAEnD,KAAK,mBAAmB,iBAAiB,SAAS,CAACgB,MAAM;AACrD,UAAI,KAAK,mBAAmB,cAAc,KAAK,mBAAmB,aAAa;AAC3E,cAAMQ,IAAS,SAAS,kBAAkBR,EAAE,GAAGA,EAAE,CAAC,EAAE,CAAC;AAErD,aAAK,mBAAmB,cAAcA,EAAE;AAExC,cAAMS,IAAS,SAAS,kBAAkBT,EAAE,GAAGA,EAAE,CAAC,EAAE,CAAC;AAErD,QAAIQ,KAAUC,MACND,aAAkBP,KAClBO,EAAO,YAAA,GAEPC,aAAkBR,KAClBQ,EAAO,YAAA,IAIfT,EAAE,eAAA;AAAA,MACN;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEA,WAAW,SAAS;AAChB,WAAO;AAAA,MACHd;AAAA,kBACMC,EAAUC,CAAK,CAAC;AAAA;AAAA,IAAA;AAAA,EAG9B;AAAA;AAAA,EAGO,SAAS;AACZ,WAAOC;AAAA;AAAA,kBAEG,CAAC,KAAK,YAAY,KAAK,uBAAuBA;AAAA,oEACI,MAAM;AAC9C,WAAK,mBAAmB,cAAce;AAAA,IAC1C,CAAC;AAAA;AAAA;AAAA,8BAGK,EAAE;AAAA,6DAC6B,KAAK,4BAA4B;AAAA;AAAA,sBAExE,KAAK,QAAQ,KAAKf,8BAAiC;AAAA;AAAA,kBAEvD,CAAC,KAAK,YAAY,KAAK,wBAAwBA;AAAA,qEACI,MAAM;AAC/C,WAAK,mBAAmB,cAAce;AAAA,IAC1C,CAAC;AAAA;AAAA;AAAA,8BAGK,EAAE;AAAA;AAAA;AAAA,EAG5B;AAAA,EAEA,IAAW,cAAcxB,GAAkB;AACvC,IAAI,KAAK,mBAAmBA,MACxB,KAAK,eAAeA,GACpB,KAAK,iBAAiBA,GACtB,KAAK,qBAAA;AAAA,EAEb;AAAA,EAEA,IAAW,gBAAwB;AAC/B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEQ,uBAA6B;AACjC,IAAI,KAAK,eACL,KAAK,YAAY,QAAQ,CAAC0B,GAAmBI,MAAgB;AACzD,MAAIA,MAAQ,KAAK,kBACZJ,EAAa,WAAW,IACrB,KAAK,UACL,OAAO,sBAAsB,MAAM;AAC/B,YAAIK,IAAaL,EAAK,YAClBM,IAAYN,EAAK;AAErB,QAAIA,EAAK,gBAAgB,KAAK,wBAC1BK,KAAc,KAAK,oBAAoB,YACvCC,KAAa,KAAK,oBAAoB;AAG1C,cAAMC,IAAS,KAAK;AACpB,QAAI,KAAK,YACLA,EAAO,MAAM,SAASP,EAAK,eAAe,MAC1CO,EAAO,MAAM,YAAY,cAAcD,CAAS,UAEhDC,EAAO,MAAM,QAAQP,EAAK,cAAc,MACxCO,EAAO,MAAM,YAAY,cAAcF,CAAU;AAAA,MAEzD,CAAC,KAGJL,EAAa,WAAW;AAAA,IAEjC,CAAC;AAAA,EAET;AAAA,EAEA,IAAW,aAAa1B,GAAkB;AACtC,IAAI,KAAK,kBAAkBA,MACvB,KAAK,gBAAgBA,GACrB,KAAK,mBAAA;AAAA,EAEb;AAAA,EAEA,IAAW,eAAuB;AAC9B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEQ,qBAAqB;AACzB,IAAI,KAAK,eAAe,KAAK,gBAAgB,KAAK,KAAK,eAAe,KAAK,YAAY,WACnF,KAAK,wBAAA,GACL,KAAK,YAAY,KAAK,YAAY,EAAE,MAAA;AAAA,EAE5C;AAAA,EAEA,IAAY,SAAsB;AAC9B,WAAO,KAAK,WAAW,cAAc,SAAS;AAAA,EAClD;AAAA,EAEA,IAAY,qBAAkC;AAC1C,WAAK,KAAK,wBACN,KAAK,sBAAsB,KAAK,WAAW,cAAc,uBAAuB,IAE7E,KAAK;AAAA,EAChB;AAAA,EAEQ,0BAAgC;AACpC,QAAI,KAAK,eAAe,KAAK,gBAAgB,KAAK,KAAK,eAAe,KAAK,YAAY,QAAQ;AAC3F,YAAMkC,IAAe,KAAK,YAAY,KAAK,YAAY;AACvD,UAAIC,IAAmBD,EAAa;AACpC,MAAIA,EAAa,gBAAgB,KAAK,wBAClCC,KAAY,KAAK,oBAAoB;AAEzC,YAAMC,IAAoBF,EAAa,aACjCG,IAAoBF,IAAWC;AACrC,UACID,IAAW,KAAK,mBAAmB,cACnCE,IAAY,KAAK,mBAAmB,aAAa,KAAK,mBAAmB;AAEzE;AAEJ,MAAI,KAAK,mBAAmB,aAAaF,IACrC,KAAK,mBAAmB,aAAaE,IAAY,KAAK,mBAAmB,cAClE,KAAK,mBAAmB,aAAa,KAAK,mBAAmB,cAAcA,MAClF,KAAK,mBAAmB,aAAaF;AAAA,IAE7C;AAAA,EACJ;AAAA,EAuDQ,+BAAqC;AACzC,SAAK,uBAAuB,KAAK,mBAAmB,eAAe,GACnE,KAAK,wBACD,KAAK,mBAAmB,aACxB,KAAK,mBAAmB,cAAc,KAAK,mBAAmB;AAAA,EACtE;AAAA,EAEQ,uBAAuBxB,GAA+B;AAC1D,SAAK;AAAA,MACD,IAAI,YAA6B,aAAa;AAAA,QAC1C,QAAQ;AAAA,UACJ,aAAa;AAAA,YACT,OAAO,KAAK;AAAA,YACZ,YAAY,KAAK,YAAY,KAAK,aAAa;AAAA,UAAA;AAAA,UAEnD,QAAQA;AAAA,QAAA;AAAA,MACZ,CACH;AAAA,IAAA;AAAA,EAET;AAAA,EAGQ,SAAS2B,GAAYC,GAAmB;AAC5C,IAAI,KAAK,UAAUD,CAAE,MAGrB,KAAK,UAAUA,CAAE,IAAI,IACrB,sBAAsB,MAAM;AACxB,aAAO,KAAK,UAAUA,CAAE,GACxBC,EAAA;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AA9SId,EAAuB,KAAK,cAwB5BA,EAAO,oBAAoC;AAAA,EACvC,GAAG3B,EAAW;AAAA,EACd,gBAAgB;AAAA;AA3BxB,IAAqB0C,IAArBf;AAIWH,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,UAAU;AAAA,GAH9CiB,EAIV,WAAA,OAAA;AAEAlB,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,YAAY;AAAA,GALhDiB,EAMV,WAAA,SAAA;AAEAlB,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAPzBiB,EAQV,WAAA,UAAA;AAEAlB,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,gBAAgB;AAAA,GATpDiB,EAUV,WAAA,aAAA;AAKClB,EAAA;AAAA,EADPC,EAAA;AAAS,GAdOiB,EAeT,WAAA,sBAAA;AAEAlB,EAAA;AAAA,EADPC,EAAA;AAAS,GAhBOiB,EAiBT,WAAA,uBAAA;AAgSP,eAAe,IAAIA,EAAO,EAAE,KAC7B,eAAe,OAAOA,EAAO,IAAIA,CAAM;"}
|
|
1
|
+
{"version":3,"file":"tab-bar.mjs","sources":["../tab.ts","../tab-bar.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, PropertyValues, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { createPopper, Instance as Popper } from \"@popperjs/core\";\nimport \"@cas-smartdesign/virtual-list\";\nimport VirtualList, { ListDataProvider, SelectionType } from \"@cas-smartdesign/virtual-list\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Tab.ID]: Tab;\n }\n}\nimport style from \"./tab-style.scss?inline\";\n\nconst isIE11 = navigator.userAgent.indexOf(\"Trident\") !== -1;\n\nexport interface ISelectionEvent {\n anchor: string;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n selection: CustomEvent<ISelectionEvent>;\n}\n\nexport default interface Tab {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class Tab extends LitElement {\n public static readonly ID = \"sd-tab\";\n\n @property({ type: String })\n public text: string;\n @property({ type: Array })\n public anchors: string[];\n @property()\n public index: number;\n @property()\n public showCounter: boolean;\n\n @property({ type: Boolean, reflect: true, attribute: \"anchors-shown\" })\n private anchorsShown: boolean;\n\n public noInk: boolean;\n public vertical: boolean;\n\n public minimumOverlayWidth = 150;\n\n private showRipple: boolean;\n private popper: Popper;\n private list: VirtualList;\n private dataProvider: ListDataProvider;\n private _cssMathMaxSupported: boolean;\n\n get selected(): boolean {\n return this.hasAttribute(\"selected\");\n }\n\n set selected(newValue: boolean) {\n if (newValue) {\n this.setAttribute(\"selected\", \"\");\n this.setAttribute(\"aria-selected\", \"true\");\n } else {\n this.removeAttribute(\"selected\");\n this.setAttribute(\"aria-selected\", \"false\");\n if (this.shadowRoot && this.showRipple) {\n const rippleElement = this.shadowRoot.querySelector(\".ripple\") as HTMLElement;\n rippleElement.style.display = \"none\";\n this.showRipple = false;\n }\n }\n }\n\n public firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n const supportsCSS = window.CSS && window.CSS.supports;\n this._cssMathMaxSupported = supportsCSS && CSS.supports(\"max-width\", \"max(50vw)\");\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const ownerDocument = this.ownerDocument as any;\n if (ownerDocument.adoptedStyleSheets) {\n (this.shadowRoot as any).adoptedStyleSheets = [\n ...(this.shadowRoot as any).adoptedStyleSheets,\n ...ownerDocument.adoptedStyleSheets,\n ];\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n\n this.addEventListener(\"pointerdown\", (event: PointerEvent) => {\n if (!this.noInk && !this.showRipple) {\n this.showRipple = true;\n const rect: DOMRect = this.getBoundingClientRect();\n const rippleElement = this.shadowRoot.querySelector(\".ripple\") as HTMLElement;\n rippleElement.style.left = `${event.clientX - rect.left}px`;\n rippleElement.style.top = `${event.clientY - rect.top}px`;\n rippleElement.style.display = \"\";\n rippleElement.addEventListener(\n \"animationend\",\n () => {\n rippleElement.style.display = \"none\";\n this.showRipple = false;\n },\n { once: true },\n );\n }\n });\n this.addEventListener(\"click\", (event: MouseEvent) => {\n if (event.composedPath().indexOf(this.list) === -1) {\n this.dispatchSelectionEvent();\n event.preventDefault();\n event.stopPropagation();\n }\n });\n this.addEventListener(\"keydown\", this.handleKeyDown);\n\n this.setAttribute(\"tabindex\", \"-1\");\n this.role = \"tab\";\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.hideAnchors();\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n public render() {\n return html`\n <div class=\"root\" @pointerover=${this.showAnchors} @pointerdown=${this.showAnchors}>\n ${this.showCounter ? html` <span class=\"counter\">${this.index + 1}</span> ` : \"\"}\n <div class=\"text\">${this.text}</div>\n <div class=\"ripple\" style=\"display: none\"></div>\n ${this.hasAnchors\n ? html`\n <svg class=\"down-arrow\" tabindex=\"-1\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">\n <path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>\n </svg>\n `\n : \"\"}\n </div>\n `;\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.hasAnchors) {\n const anchorTriggerKeys = this.vertical\n ? [\"Left\", \"ArrowLeft\", \"Right\", \"ArrowRight\", \"Enter\"]\n : [\"Down\", \"ArrowDown\", \"Up\", \"ArrowUp\", \"Enter\"];\n if (anchorTriggerKeys.indexOf(event.key) === -1) {\n this.hideAnchors();\n this.focus();\n } else {\n if (!this.anchorsShown) {\n this.showAnchors();\n window.requestAnimationFrame(() => {\n // IE would scroll down to bottom because the anchor list has not yet positioned there.\n this.list.focusIndex = 0;\n this.list.focus();\n\n this.updateDropdownSizes();\n });\n }\n event.preventDefault();\n event.stopPropagation();\n }\n } else if (event.key === \"Enter\") {\n this.dispatchSelectionEvent();\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private updateDropdownSizes(): void {\n const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n const overlayMaxHeight = (viewportHeight - this.offsetHeight) * 0.5;\n Object.assign(this.list.style, {\n maxHeight: `${overlayMaxHeight}px`,\n minWidth: `${Math.max(this.offsetWidth, this.minimumOverlayWidth)}px`,\n maxWidth: this._cssMathMaxSupported\n ? `max(50vw, ${this.offsetWidth}px)`\n : Math.max((window.innerWidth || document.documentElement.clientWidth) / 2, this.offsetWidth) + \"px\",\n });\n }\n\n private handleListSelection = (event: CustomEvent) => {\n this.hideAnchors();\n event.stopPropagation();\n this.dispatchSelectionEvent(this.anchors[event.detail.index]);\n this.focus();\n };\n\n private dispatchSelectionEvent(selectedAnchor?: string): void {\n this.dispatchEvent(new CustomEvent<ISelectionEvent>(\"selection\", { detail: { anchor: selectedAnchor } }));\n }\n\n private handlePointerLeave = (event: PointerEvent) => {\n if (isIE11 || (this.list && !this.list.contains(event.target as HTMLElement))) {\n window.addEventListener(\"pointermove\", this.handlePointerMove);\n }\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n if (!this.isPointerAbove(event, this) && !this.isPointerAbove(event, this.list)) {\n this.hideAnchors();\n window.removeEventListener(\"pointermove\", this.handlePointerMove);\n }\n };\n\n private isPointerAbove(event: PointerEvent, element: HTMLElement): boolean {\n const rect = element.getBoundingClientRect();\n return (\n rect.left <= event.clientX &&\n rect.right >= event.clientX &&\n rect.top <= event.clientY &&\n rect.bottom >= event.clientY\n );\n }\n\n public showAnchors() {\n if (!this.anchorsShown && this.hasAnchors) {\n this.root.addEventListener(\"pointerleave\", this.handlePointerLeave);\n if (!this.list) {\n this.createList();\n }\n this.dataProvider.items = this.anchors.map((anchor, index) => {\n return {\n caption: anchor,\n index,\n };\n });\n\n this.updateDropdownSizes();\n this.ownerDocument.body.appendChild(this.list);\n if (!this.popper) {\n this.popper = createPopper(this, this.list, {\n placement: this.vertical ? \"right-start\" : \"bottom-start\",\n modifiers: [\n {\n name: \"computeStyles\",\n options: {\n gpuAcceleration: !isIE11,\n },\n },\n {\n name: \"hide\",\n enabled: false,\n },\n {\n name: \"preventOverflow\",\n options: {\n padding: 0,\n },\n },\n {\n name: \"adjustWidthIfNeeded\",\n enabled: true,\n phase: \"read\",\n fn({ state }) {\n const list = state.elements.popper as VirtualList;\n list.increaseWidthOnNextRenderIfNeeded();\n },\n },\n ],\n });\n }\n\n window.requestAnimationFrame(() => {\n if (this.popper) {\n this.popper.update();\n }\n });\n\n this.anchorsShown = true;\n }\n }\n\n private createList(): void {\n this.list = document.createElement(VirtualList.ID) as VirtualList;\n this.dataProvider = new ListDataProvider();\n this.dataProvider.finalSizeIsKnown = true;\n this.dataProvider.connectList(this.list);\n this.list.classList.add(\"anchor-list\");\n this.list.tabIndex = 0;\n this.list.selectionType = SelectionType.TriggerOnly;\n this.list.addEventListener(\"selection\", this.handleListSelection);\n this.list.addEventListener(\"keydown\", (e) => {\n if (e.key == \"Escape\") {\n this.hideAnchors();\n this.focus();\n }\n });\n this.list.addEventListener(\"focusout\", () => {\n this.hideAnchors();\n });\n this.list.setAttribute(\"slot\", \"anchors\");\n this.list.itemHeight = 50;\n Object.assign(this.list.style, {\n zIndex: \"21000\",\n boxShadow: `rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,\n rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,\n rgba(0, 0, 0, 0.2) 0px 3px 1px -2px`,\n background: \"white\",\n overflowY: \"auto\",\n });\n }\n\n hideAnchors(): void {\n if (this.anchorsShown) {\n this.anchorsShown = false;\n this.root.removeEventListener(\"pointerleave\", this.handlePointerLeave);\n if (this.list) {\n this.list.focusIndex = -1;\n this.list.parentElement.removeChild(this.list);\n }\n }\n if (this.popper) {\n this.popper.destroy();\n this.popper = null;\n }\n }\n\n private get hasAnchors(): boolean {\n return !!(this.anchors && this.anchors.length);\n }\n\n private get root(): HTMLElement {\n if (this.shadowRoot) {\n return this.shadowRoot.querySelector(\".root\");\n }\n return null;\n }\n}\n\nVirtualList.ensureDefined();\nif (!customElements.get(Tab.ID)) {\n customElements.define(Tab.ID, Tab);\n}\n","import { LitElement, html, PropertyValues, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport \"./tab\";\nimport Tab from \"./tab\";\nexport { default as Tab } from \"./tab\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [TabBar.ID]: TabBar;\n }\n}\nimport style from \"./tab-bar-style.scss?inline\";\n\nconst SCROLL_STEP = 40;\n\nexport interface ISelectionEvent {\n selectedTab: {\n index: number;\n tabElement: Tab;\n };\n anchor: string;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n selection: CustomEvent<ISelectionEvent>;\n}\n\nexport default interface TabBar {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class TabBar extends LitElement {\n public static readonly ID = \"sd-tab-bar\";\n\n @property({ type: Boolean, reflect: true, attribute: \"no-bar\" })\n public noBar: boolean;\n @property({ type: Boolean, reflect: true, attribute: \"no-slide\" })\n public noSlide: boolean;\n @property({ type: Boolean, reflect: true })\n public vertical: boolean;\n @property({ type: Boolean, reflect: true, attribute: \"show-counter\" })\n public showCounter: boolean;\n\n public tabElements: Tab[];\n\n @property()\n private showLeftScrollButton: boolean;\n @property()\n private showRightScrollButton: boolean;\n\n private _focusedIndex: number;\n private _selectedIndex: number;\n private resizeObserver: ResizeObserver;\n private lastKnownWidth: number;\n private _tabButtonContainer: HTMLElement;\n\n static shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n public connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => {\n this.debounce(\"update-scroll-button-visibility\", () => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n this.updateScrollButtonVisibility();\n }\n });\n });\n this.resizeObserver.observe(this);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.disconnect();\n }\n\n public firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const ownerDocument = this.ownerDocument as any;\n if (ownerDocument.adoptedStyleSheets) {\n (this.shadowRoot as any).adoptedStyleSheets = [\n ...(this.shadowRoot as any).adoptedStyleSheets,\n ...ownerDocument.adoptedStyleSheets,\n ];\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n\n const slot = this.shadowRoot.querySelector(\"slot\");\n slot.addEventListener(\"slotchange\", this.handleSlotChange);\n\n this.addEventListener(\"keydown\", this.handleKeyDown);\n\n this.addEventListener(\"focusin\", (e) => {\n if (!this.contains(e.relatedTarget as Node)) {\n this.focusedIndex = this.selectedIndex;\n this.updateFocusedState();\n (this.shadowRoot.querySelector(\".root\") as HTMLElement).tabIndex = -1;\n }\n });\n this.addEventListener(\"focusout\", (e) => {\n if (!this.contains(e.relatedTarget as Node)) {\n (this.shadowRoot.querySelector(\".root\") as HTMLElement).tabIndex = 0;\n }\n });\n\n this.tabButtonContainer.addEventListener(\"wheel\", (e) => {\n if (this.tabButtonContainer.scrollWidth > this.tabButtonContainer.offsetWidth) {\n const oldTab = document.elementsFromPoint(e.x, e.y)[0];\n\n this.tabButtonContainer.scrollLeft += e.deltaY;\n\n const newTab = document.elementsFromPoint(e.x, e.y)[0];\n\n if (oldTab != newTab) {\n if (oldTab instanceof Tab) {\n oldTab.hideAnchors();\n }\n if (newTab instanceof Tab) {\n newTab.showAnchors();\n }\n }\n\n e.preventDefault();\n }\n });\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n // prettier-ignore\n public render() {\n return html`\n <div class=\"root\" tabindex=\"0\" role=\"tablist\" aria-orientation=\"${this.vertical ? \"vertical\" : \"horizontal\"}\">\n ${!this.vertical && this.showLeftScrollButton ? html`\n <div class=\"scroll-button left\" @pointerdown=\"${() => {\n this.tabButtonContainer.scrollLeft -= SCROLL_STEP;\n }}\">\n <div class=\"ripple\"></div>\n <svg><g><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path></g></svg>\n </div>` : \"\"}\n <div class=\"tab-button-container\" @scroll=\"${this.updateScrollButtonVisibility}\">\n <slot></slot>\n ${this.noBar ? \"\" : html` <div class=\"slider\"></div>`}\n </div>\n ${!this.vertical && this.showRightScrollButton ? html`\n <div class=\"scroll-button right\" @pointerdown=\"${() => {\n this.tabButtonContainer.scrollLeft += SCROLL_STEP;\n }}\">\n <div class=\"ripple\"></div>\n <svg><g><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path></g></svg>\n </div>` : \"\"}\n </div>\n `;\n }\n\n public set selectedIndex(newValue: number) {\n if (this._selectedIndex !== newValue) {\n this.focusedIndex = newValue;\n this._selectedIndex = newValue;\n this.updateSelectionState();\n }\n }\n\n public get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n private updateSelectionState(): void {\n if (this.tabElements) {\n this.tabElements.forEach((node: HTMLElement, ind: number) => {\n if (ind === this._selectedIndex) {\n (node as Tab).selected = true;\n if (this.slider) {\n window.requestAnimationFrame(() => {\n let offsetLeft = node.offsetLeft;\n let offsetTop = node.offsetTop;\n\n if (node.offsetParent != this._tabButtonContainer) {\n offsetLeft -= this._tabButtonContainer.offsetLeft;\n offsetTop -= this._tabButtonContainer.offsetTop;\n }\n\n const slider = this.slider;\n if (this.vertical) {\n slider.style.height = node.offsetHeight + \"px\";\n slider.style.transform = `translateY(${offsetTop}px)`;\n } else {\n slider.style.width = node.offsetWidth + \"px\";\n slider.style.transform = `translateX(${offsetLeft}px)`;\n }\n });\n }\n } else {\n (node as Tab).selected = false;\n }\n });\n }\n }\n\n public set focusedIndex(newValue: number) {\n if (this._focusedIndex !== newValue) {\n this._focusedIndex = newValue;\n this.updateFocusedState();\n }\n }\n\n public get focusedIndex(): number {\n return this._focusedIndex;\n }\n\n private updateFocusedState() {\n if (this.tabElements && this.focusedIndex >= 0 && this.focusedIndex < this.tabElements.length) {\n this.scrollToFocusedIfNeeded();\n this.tabElements[this.focusedIndex].focus();\n }\n }\n\n private get slider(): HTMLElement {\n return this.shadowRoot.querySelector(\".slider\");\n }\n\n private get tabButtonContainer(): HTMLElement {\n if (!this._tabButtonContainer) {\n this._tabButtonContainer = this.shadowRoot.querySelector(\".tab-button-container\");\n }\n return this._tabButtonContainer;\n }\n\n private scrollToFocusedIfNeeded(): void {\n if (this.tabElements && this.focusedIndex >= 0 && this.focusedIndex < this.tabElements.length) {\n const selectedNode = this.tabElements[this.focusedIndex] as HTMLElement;\n let nodeLeft: number = selectedNode.offsetLeft;\n if (selectedNode.offsetParent != this._tabButtonContainer) {\n nodeLeft -= this._tabButtonContainer.offsetLeft;\n }\n const nodeWidth: number = selectedNode.offsetWidth;\n const nodeRight: number = nodeLeft + nodeWidth;\n if (\n nodeLeft > this.tabButtonContainer.scrollLeft &&\n nodeRight < this.tabButtonContainer.scrollLeft + this.tabButtonContainer.offsetWidth\n ) {\n return;\n }\n if (this.tabButtonContainer.scrollLeft < nodeLeft) {\n this.tabButtonContainer.scrollLeft = nodeRight - this.tabButtonContainer.offsetWidth;\n } else if (this.tabButtonContainer.scrollLeft + this.tabButtonContainer.offsetWidth > nodeRight) {\n this.tabButtonContainer.scrollLeft = nodeLeft;\n }\n }\n }\n\n private handleSlotChange = () => {\n this.tabElements = this.shadowRoot\n .querySelector(\"slot\")\n .assignedNodes()\n .filter((node) => node instanceof Tab) as Tab[];\n let index = 0;\n this.tabElements.forEach((tab) => {\n tab.vertical = this.vertical;\n tab.showCounter = this.showCounter;\n tab.index = index++;\n tab.addEventListener(\"focus\", this.handleTabFocus);\n tab.addEventListener(\"selection\", this.handleTabSelection);\n });\n this.updateScrollButtonVisibility();\n if (this.selectedIndex == null) {\n this._focusedIndex = 0;\n this._selectedIndex = 0;\n }\n this.updateSelectionState();\n };\n\n private handleTabFocus = (event: FocusEvent) => {\n const index = (event.target as Tab).index;\n if (this.focusedIndex !== index) {\n this._focusedIndex = index;\n this.scrollToFocusedIfNeeded();\n }\n };\n\n private handleTabSelection = (event: CustomEvent) => {\n this.selectedIndex = (event.target as Tab).index;\n this.dispatchSelectionEvent(event.detail.anchor);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"Up\":\n case \"ArrowUp\":\n case \"Left\":\n case \"ArrowLeft\":\n event.preventDefault();\n this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\n break;\n case \"Down\":\n case \"ArrowDown\":\n case \"Right\":\n case \"ArrowRight\":\n event.preventDefault();\n this.focusedIndex = Math.min(this.focusedIndex + 1, this.tabElements.length - 1);\n break;\n }\n };\n\n private updateScrollButtonVisibility(): void {\n this.showLeftScrollButton = this.tabButtonContainer.scrollLeft !== 0;\n this.showRightScrollButton =\n this.tabButtonContainer.scrollLeft <\n this.tabButtonContainer.scrollWidth - this.tabButtonContainer.offsetWidth;\n }\n\n private dispatchSelectionEvent(selectedAnchor?: string): void {\n this.dispatchEvent(\n new CustomEvent<ISelectionEvent>(\"selection\", {\n detail: {\n selectedTab: {\n index: this.selectedIndex,\n tabElement: this.tabElements[this.selectedIndex],\n },\n anchor: selectedAnchor,\n },\n }),\n );\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) {\n return;\n }\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n}\n\nif (!customElements.get(TabBar.ID)) {\n customElements.define(TabBar.ID, TabBar);\n}\n"],"names":["isIE11","_Tab","LitElement","event","newValue","rippleElement","changedProperties","supportsCSS","ownerDocument","rect","css","unsafeCSS","style","html","overlayMaxHeight","selectedAnchor","element","anchor","index","createPopper","state","VirtualList","ListDataProvider","SelectionType","e","Tab","__decorateClass","property","SCROLL_STEP","_TabBar","node","tab","oldTab","newTab","ind","offsetLeft","offsetTop","slider","selectedNode","nodeLeft","nodeWidth","nodeRight","id","actor","TabBar"],"mappings":"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"}
|
|
@@ -64,6 +64,11 @@
|
|
|
64
64
|
"repository": "https://github.com/cypress-io/cypress",
|
|
65
65
|
"licenseUrl": "https://cypress.io"
|
|
66
66
|
},
|
|
67
|
+
"d3-color@3.1.0": {
|
|
68
|
+
"licenses": "ISC",
|
|
69
|
+
"repository": "https://github.com/d3/d3-color",
|
|
70
|
+
"licenseUrl": "https://github.com/d3/d3-color/raw/HEAD/LICENSE"
|
|
71
|
+
},
|
|
67
72
|
"esbuild@0.25.9": {
|
|
68
73
|
"licenses": "MIT",
|
|
69
74
|
"repository": "https://github.com/evanw/esbuild",
|
|
@@ -104,6 +109,11 @@
|
|
|
104
109
|
"repository": "https://github.com/lint-staged/lint-staged",
|
|
105
110
|
"licenseUrl": "https://github.com/lint-staged/lint-staged/raw/HEAD/LICENSE"
|
|
106
111
|
},
|
|
112
|
+
"lit-html@3.3.1": {
|
|
113
|
+
"licenses": "BSD-3-Clause",
|
|
114
|
+
"repository": "https://github.com/lit/lit",
|
|
115
|
+
"licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
|
|
116
|
+
},
|
|
107
117
|
"lit@3.3.1": {
|
|
108
118
|
"licenses": "BSD-3-Clause",
|
|
109
119
|
"repository": "https://github.com/lit/lit",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cas-smartdesign/tab-bar",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.2",
|
|
4
4
|
"description": "A TabBar element with SmartDesign look & feel",
|
|
5
5
|
"main": "dist/tab-bar-with-externals.js",
|
|
6
6
|
"module": "dist/tab-bar.mjs",
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@popperjs/core": "^2.11.8",
|
|
11
11
|
"lit": "^3.3.1",
|
|
12
|
-
"@cas-smartdesign/virtual-list": "^6.3.
|
|
12
|
+
"@cas-smartdesign/virtual-list": "^6.3.1"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@cas-smartdesign/element-preview": "^0.3.0",
|
|
16
|
-
"@cas-smartdesign/license-generator": "^1.
|
|
16
|
+
"@cas-smartdesign/license-generator": "^1.8.0"
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
19
|
"dist",
|