@umbraco-ui/uui 2.0.0 → 2.0.1

package/dist/components/tabs/tab-group.element.js

@@ -1,104 +1,173 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _UUITabGroupElement_instances, initialize_fn, onResize_fn, cleanupTabs_fn, onSlotChange_fn, _onTabClicked, calculateBreakPoints_fn, setTabArray_fn, updateCollapsibleTabs_fn, isElementTabLike_fn, isElementHrefLike_fn;
-import { LitElement, html, css } from "lit";
-import { query, queryAssignedElements, property } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import "../button/button.js";
-import "../symbol-more/symbol-more.js";
 import "../popover-container/popover-container.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUITabGroupElement = class _UUITabGroupElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUITabGroupElement_instances);
-    __privateAdd(this, _currentGap);
-    __privateAdd(this, _tabElements);
-    __privateAdd(this, _hiddenTabElements);
-    __privateAdd(this, _hiddenTabElementsMap);
-    __privateAdd(this, _visibilityBreakpoints);
-    __privateAdd(this, _resizeObserver);
-    __privateAdd(this, _tabResizeObservers);
-    __privateAdd(this, _breakPointCalculationInProgress);
-    __privateAdd(this, _onTabClicked);
-    __privateSet(this, _currentGap, 0);
-    this.dropdownContentDirection = "vertical";
-    __privateSet(this, _tabElements, []);
-    __privateSet(this, _hiddenTabElements, []);
-    __privateSet(this, _hiddenTabElementsMap, /* @__PURE__ */ new Map());
-    __privateSet(this, _visibilityBreakpoints, []);
-    __privateSet(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _UUITabGroupElement_instances, onResize_fn).bind(this)));
-    __privateSet(this, _tabResizeObservers, []);
-    __privateSet(this, _breakPointCalculationInProgress, false);
-    __privateSet(this, _onTabClicked, (e) => {
-      const selectedElement = e.currentTarget;
-      const isCtrlClick = e.ctrlKey || e.metaKey;
-      if (__privateMethod(this, _UUITabGroupElement_instances, isElementHrefLike_fn).call(this, selectedElement) && isCtrlClick) {
-        return;
-      }
-      if (selectedElement.classList.contains("hidden-tab") && __privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, selectedElement)) {
-        const original = __privateGet(this, _hiddenTabElementsMap).get(selectedElement);
-        if (original) {
-          original.click();
-          this._moreButtonElement.classList.add("active-inside");
-          this._popoverContainerElement.hidePopover();
-        }
-        return;
-      }
-      if (__privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, selectedElement)) {
-        selectedElement.active = true;
-        const linkedElement = __privateGet(this, _hiddenTabElementsMap).get(selectedElement);
-        if (linkedElement) {
-          linkedElement.active = true;
-        }
-        const filtered = [
-          ...__privateGet(this, _tabElements),
-          ...__privateGet(this, _hiddenTabElements)
-        ].filter((el) => el !== selectedElement && el !== linkedElement);
-        filtered.forEach((el) => {
-          if (__privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, el)) {
-            el.active = false;
-          }
-        });
-        const hasActiveHidden = __privateGet(this, _hiddenTabElements).some(
-          (el) => el.active && el !== linkedElement
-        );
-        if (hasActiveHidden) {
-          this._moreButtonElement.classList.add("active-inside");
-        } else {
-          this._moreButtonElement.classList.remove("active-inside");
-        }
-      }
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateMethod(this, _UUITabGroupElement_instances, initialize_fn).call(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _resizeObserver).unobserve(this);
-    __privateMethod(this, _UUITabGroupElement_instances, cleanupTabs_fn).call(this);
-  }
-  render() {
-    return html`
+import "../symbol-more/symbol-more.js";
+import { LitElement, css, html } from "lit";
+import { property, query, queryAssignedElements } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/tabs/tab-group.element.ts
+/**
+* @element uui-tab-group
+* @slot - Default slot for the tab group
+* @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown
+* @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown
+* @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown
+* @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown
+* @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid
+*/
+var UUITabGroupElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.#currentGap = 0;
+		this.dropdownContentDirection = "vertical";
+		this.#tabElements = [];
+		this.#hiddenTabElements = [];
+		this.#hiddenTabElementsMap = /* @__PURE__ */ new Map();
+		this.#visibilityBreakpoints = [];
+		this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this));
+		this.#tabResizeObservers = [];
+		this.#breakPointCalculationInProgress = false;
+		this.#onTabClicked = (e) => {
+			const selectedElement = e.currentTarget;
+			const isCtrlClick = e.ctrlKey || e.metaKey;
+			if (this.#isElementHrefLike(selectedElement) && isCtrlClick) return;
+			if (selectedElement.classList.contains("hidden-tab") && this.#isElementTabLike(selectedElement)) {
+				const original = this.#hiddenTabElementsMap.get(selectedElement);
+				if (original) {
+					original.click();
+					this._moreButtonElement.classList.add("active-inside");
+					this._popoverContainerElement.hidePopover();
+				}
+				return;
+			}
+			if (this.#isElementTabLike(selectedElement)) {
+				selectedElement.active = true;
+				const linkedElement = this.#hiddenTabElementsMap.get(selectedElement);
+				if (linkedElement) linkedElement.active = true;
+				[...this.#tabElements, ...this.#hiddenTabElements].filter((el) => el !== selectedElement && el !== linkedElement).forEach((el) => {
+					if (this.#isElementTabLike(el)) el.active = false;
+				});
+				if (this.#hiddenTabElements.some((el) => el.active && el !== linkedElement)) this._moreButtonElement.classList.add("active-inside");
+				else this._moreButtonElement.classList.remove("active-inside");
+			}
+		};
+	}
+	/** Stores the current gap used in the breakpoints */
+	#currentGap;
+	#tabElements;
+	#hiddenTabElements;
+	#hiddenTabElementsMap;
+	#visibilityBreakpoints;
+	#resizeObserver;
+	#tabResizeObservers;
+	#breakPointCalculationInProgress;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#initialize();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver.unobserve(this);
+		this.#cleanupTabs();
+	}
+	async #initialize() {
+		await this.updateComplete;
+		this.#resizeObserver.observe(this._mainElement);
+	}
+	#onResize(entries) {
+		const gapCSSVar = Number.parseFloat(this.style.getPropertyValue("--uui-tab-group-gap"));
+		if ((Number.isNaN(gapCSSVar) ? 0 : gapCSSVar) === this.#currentGap) this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize);
+		else this.#calculateBreakPoints();
+	}
+	#cleanupTabs() {
+		this.#tabElements.forEach((el) => {
+			el.removeEventListener("click", this.#onTabClicked);
+			this.#tabResizeObservers.forEach((observer) => observer.disconnect());
+		});
+		this.#tabResizeObservers.length = 0;
+		this.#visibilityBreakpoints.length = 0;
+	}
+	#onSlotChange() {
+		this.#cleanupTabs();
+		this.#setTabArray();
+		this.#tabElements.forEach((el) => {
+			el.addEventListener("click", this.#onTabClicked);
+			const observer = new ResizeObserver(this.#calculateBreakPoints.bind(this));
+			observer.observe(el);
+			this.#tabResizeObservers.push(observer);
+		});
+	}
+	#onTabClicked;
+	async #calculateBreakPoints() {
+		if (this.#breakPointCalculationInProgress) return;
+		this.#breakPointCalculationInProgress = true;
+		requestAnimationFrame(() => {
+			this.#breakPointCalculationInProgress = false;
+		});
+		await this.updateComplete;
+		const gapCSSVar = Number.parseFloat(this.style.getPropertyValue("--uui-tab-group-gap"));
+		const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;
+		this.#currentGap = gap;
+		let childrenWidth = 0;
+		for (let i = 0; i < this.#tabElements.length; i++) {
+			this.#tabElements[i].style.display = "";
+			childrenWidth += this.#tabElements[i].offsetWidth;
+			this.#visibilityBreakpoints[i] = childrenWidth;
+			childrenWidth += gap;
+		}
+		const tolerance = 2;
+		this._mainElement.style.width = childrenWidth - gap + tolerance + "px";
+		this.#updateCollapsibleTabs(this._mainElement.offsetWidth);
+	}
+	#setTabArray() {
+		this.#tabElements = this._slottedNodes ?? [];
+		this.#calculateBreakPoints();
+	}
+	#updateCollapsibleTabs(containerWidth) {
+		const containerWithoutButtonWidth = containerWidth - (this._moreButtonElement.offsetWidth || 0);
+		this.#hiddenTabElements.forEach((el) => {
+			el.removeEventListener("click", this.#onTabClicked);
+		});
+		this.#hiddenTabElements = [];
+		this.#hiddenTabElementsMap.clear();
+		let hasActiveTabInDropdown = false;
+		const len = this.#visibilityBreakpoints.length;
+		for (let i = 0; i < len; i++) {
+			const breakpoint = this.#visibilityBreakpoints[i];
+			const tab = this.#tabElements[i];
+			if (breakpoint <= (i === len - 1 ? containerWidth : containerWithoutButtonWidth)) tab.style.display = "";
+			else {
+				const proxyTab = tab.cloneNode(true);
+				proxyTab.addEventListener("click", this.#onTabClicked);
+				proxyTab.classList.add("hidden-tab");
+				proxyTab.style.display = "";
+				proxyTab.orientation = this.dropdownContentDirection;
+				this.#hiddenTabElementsMap.set(proxyTab, tab);
+				this.#hiddenTabElementsMap.set(tab, proxyTab);
+				this.#hiddenTabElements.push(proxyTab);
+				tab.style.display = "none";
+				if (tab.active) hasActiveTabInDropdown = true;
+			}
+		}
+		if (this.#hiddenTabElements.length === 0) {
+			this._moreButtonElement.style.display = "none";
+			this._popoverContainerElement.hidePopover();
+		} else this._moreButtonElement.style.display = "";
+		if (hasActiveTabInDropdown) this._moreButtonElement.classList.add("active-inside");
+		else this._moreButtonElement.classList.remove("active-inside");
+		this.requestUpdate();
+	}
+	#isElementTabLike(el) {
+		return typeof el === "object" && "active" in el && typeof el.active === "boolean";
+	}
+	#isElementHrefLike(el) {
+		return typeof el === "object" && "href" in el && typeof el.href === "string" && el.href;
+	}
+	render() {
+		return html`
       <div id="main">
         <div id="grid" role="tablist">
-          <slot @slotchange=${__privateMethod(this, _UUITabGroupElement_instances, onSlotChange_fn)}></slot>
+          <slot @slotchange=${this.#onSlotChange}></slot>
         </div>
         <uui-button
           popovertarget="popover-container"
@@ -114,135 +183,13 @@ const _UUITabGroupElement = class _UUITabGroupElement extends LitElement {
         popover
         placement="bottom-end">
         <div id="hidden-tabs-container" role="tablist">
-          ${repeat(__privateGet(this, _hiddenTabElements), (el) => html`${el}`)}
+          ${repeat(this.#hiddenTabElements, (el) => html`${el}`)}
         </div>
       </uui-popover-container>
     `;
-  }
-};
-_currentGap = new WeakMap();
-_tabElements = new WeakMap();
-_hiddenTabElements = new WeakMap();
-_hiddenTabElementsMap = new WeakMap();
-_visibilityBreakpoints = new WeakMap();
-_resizeObserver = new WeakMap();
-_tabResizeObservers = new WeakMap();
-_breakPointCalculationInProgress = new WeakMap();
-_UUITabGroupElement_instances = new WeakSet();
-initialize_fn = async function() {
-  await this.updateComplete;
-  __privateGet(this, _resizeObserver).observe(this._mainElement);
-};
-onResize_fn = function(entries) {
-  const gapCSSVar = Number.parseFloat(
-    this.style.getPropertyValue("--uui-tab-group-gap")
-  );
-  const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;
-  if (newGap === __privateGet(this, _currentGap)) {
-    __privateMethod(this, _UUITabGroupElement_instances, updateCollapsibleTabs_fn).call(this, entries[0].contentBoxSize[0].inlineSize);
-  } else {
-    __privateMethod(this, _UUITabGroupElement_instances, calculateBreakPoints_fn).call(this);
-  }
-};
-cleanupTabs_fn = function() {
-  __privateGet(this, _tabElements).forEach((el) => {
-    el.removeEventListener("click", __privateGet(this, _onTabClicked));
-    __privateGet(this, _tabResizeObservers).forEach((observer) => observer.disconnect());
-  });
-  __privateGet(this, _tabResizeObservers).length = 0;
-  __privateGet(this, _visibilityBreakpoints).length = 0;
-};
-onSlotChange_fn = function() {
-  __privateMethod(this, _UUITabGroupElement_instances, cleanupTabs_fn).call(this);
-  __privateMethod(this, _UUITabGroupElement_instances, setTabArray_fn).call(this);
-  __privateGet(this, _tabElements).forEach((el) => {
-    el.addEventListener("click", __privateGet(this, _onTabClicked));
-    const observer = new ResizeObserver(
-      __privateMethod(this, _UUITabGroupElement_instances, calculateBreakPoints_fn).bind(this)
-    );
-    observer.observe(el);
-    __privateGet(this, _tabResizeObservers).push(observer);
-  });
-};
-_onTabClicked = new WeakMap();
-calculateBreakPoints_fn = async function() {
-  if (__privateGet(this, _breakPointCalculationInProgress)) return;
-  __privateSet(this, _breakPointCalculationInProgress, true);
-  requestAnimationFrame(() => {
-    __privateSet(this, _breakPointCalculationInProgress, false);
-  });
-  await this.updateComplete;
-  const gapCSSVar = Number.parseFloat(
-    this.style.getPropertyValue("--uui-tab-group-gap")
-  );
-  const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;
-  __privateSet(this, _currentGap, gap);
-  let childrenWidth = 0;
-  for (let i = 0; i < __privateGet(this, _tabElements).length; i++) {
-    __privateGet(this, _tabElements)[i].style.display = "";
-    childrenWidth += __privateGet(this, _tabElements)[i].offsetWidth;
-    __privateGet(this, _visibilityBreakpoints)[i] = childrenWidth;
-    childrenWidth += gap;
-  }
-  const tolerance = 2;
-  this._mainElement.style.width = childrenWidth - gap + tolerance + "px";
-  __privateMethod(this, _UUITabGroupElement_instances, updateCollapsibleTabs_fn).call(this, this._mainElement.offsetWidth);
-};
-setTabArray_fn = function() {
-  __privateSet(this, _tabElements, this._slottedNodes ?? []);
-  __privateMethod(this, _UUITabGroupElement_instances, calculateBreakPoints_fn).call(this);
-};
-updateCollapsibleTabs_fn = function(containerWidth) {
-  const moreButtonWidth = this._moreButtonElement.offsetWidth;
-  const containerWithoutButtonWidth = containerWidth - (moreButtonWidth || 0);
-  __privateGet(this, _hiddenTabElements).forEach((el) => {
-    el.removeEventListener("click", __privateGet(this, _onTabClicked));
-  });
-  __privateSet(this, _hiddenTabElements, []);
-  __privateGet(this, _hiddenTabElementsMap).clear();
-  let hasActiveTabInDropdown = false;
-  const len = __privateGet(this, _visibilityBreakpoints).length;
-  for (let i = 0; i < len; i++) {
-    const breakpoint = __privateGet(this, _visibilityBreakpoints)[i];
-    const tab = __privateGet(this, _tabElements)[i];
-    if (breakpoint <= (i === len - 1 ? containerWidth : containerWithoutButtonWidth)) {
-      tab.style.display = "";
-    } else {
-      const proxyTab = tab.cloneNode(true);
-      proxyTab.addEventListener("click", __privateGet(this, _onTabClicked));
-      proxyTab.classList.add("hidden-tab");
-      proxyTab.style.display = "";
-      proxyTab.orientation = this.dropdownContentDirection;
-      __privateGet(this, _hiddenTabElementsMap).set(proxyTab, tab);
-      __privateGet(this, _hiddenTabElementsMap).set(tab, proxyTab);
-      __privateGet(this, _hiddenTabElements).push(proxyTab);
-      tab.style.display = "none";
-      if (tab.active) {
-        hasActiveTabInDropdown = true;
-      }
-    }
-  }
-  if (__privateGet(this, _hiddenTabElements).length === 0) {
-    this._moreButtonElement.style.display = "none";
-    this._popoverContainerElement.hidePopover();
-  } else {
-    this._moreButtonElement.style.display = "";
-  }
-  if (hasActiveTabInDropdown) {
-    this._moreButtonElement.classList.add("active-inside");
-  } else {
-    this._moreButtonElement.classList.remove("active-inside");
-  }
-  this.requestUpdate();
-};
-isElementTabLike_fn = function(el) {
-  return typeof el === "object" && "active" in el && typeof el.active === "boolean";
-};
-isElementHrefLike_fn = function(el) {
-  return typeof el === "object" && "href" in el && typeof el.href === "string" && el.href;
-};
-_UUITabGroupElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         min-width: 0;
         display: flex;
@@ -330,32 +277,22 @@ _UUITabGroupElement.styles = [
           opacity 120ms,
           height ease-out 120ms;
       }
-    `
-];
-let UUITabGroupElement = _UUITabGroupElement;
-__decorateClass([
-  query("#more-button")
-], UUITabGroupElement.prototype, "_moreButtonElement");
-__decorateClass([
-  query("#popover-container")
-], UUITabGroupElement.prototype, "_popoverContainerElement");
-__decorateClass([
-  query("#main")
-], UUITabGroupElement.prototype, "_mainElement");
-__decorateClass([
-  queryAssignedElements({
-    flatten: true,
-    selector: "uui-tab, [uui-tab], [role=tab]"
-  })
-], UUITabGroupElement.prototype, "_slottedNodes");
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "dropdown-content-direction"
-  })
-], UUITabGroupElement.prototype, "dropdownContentDirection");
-export {
-  UUITabGroupElement
+    `];
+	}
 };
-//# sourceMappingURL=tab-group.element.js.map
+__decorate([query("#more-button")], UUITabGroupElement.prototype, "_moreButtonElement", void 0);
+__decorate([query("#popover-container")], UUITabGroupElement.prototype, "_popoverContainerElement", void 0);
+__decorate([query("#main")], UUITabGroupElement.prototype, "_mainElement", void 0);
+__decorate([queryAssignedElements({
+	flatten: true,
+	selector: "uui-tab, [uui-tab], [role=tab]"
+})], UUITabGroupElement.prototype, "_slottedNodes", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "dropdown-content-direction"
+})], UUITabGroupElement.prototype, "dropdownContentDirection", void 0);
+//#endregion
+export { UUITabGroupElement };
+
+//# sourceMappingURL=tab-group.element.js.map

package/dist/components/tabs/tab-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.element.js","sources":["../../../src/components/tabs/tab-group.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport type { UUITabElement } from './tab.element.js';\n\nimport '../button/button.js';\nimport '../symbol-more/symbol-more.js';\nimport '../popover-container/popover-container.js';\n\n/**\n * @element uui-tab-group\n * @slot - Default slot for the tab group\n * @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown\n * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown\n * @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid\n */\nexport class UUITabGroupElement extends LitElement {\n  @query('#more-button')\n  private readonly _moreButtonElement!: UUIButtonElement;\n\n  @query('#popover-container')\n  private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n  @query('#main') private readonly _mainElement!: HTMLElement;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-tab, [uui-tab], [role=tab]',\n  })\n  private readonly _slottedNodes?: HTMLElement[];\n\n  /** Stores the current gap used in the breakpoints */\n  #currentGap = 0;\n\n  /**\n   * Set the flex direction of the content of the dropdown.\n   * @type {string}\n   * @attr\n   * @default vertical\n   */\n  @property({\n    type: String,\n    reflect: true,\n    attribute: 'dropdown-content-direction',\n  })\n  dropdownContentDirection: 'vertical' | 'horizontal' = 'vertical';\n\n  #tabElements: HTMLElement[] = [];\n\n  #hiddenTabElements: UUITabElement[] = [];\n  readonly #hiddenTabElementsMap: Map<UUITabElement, UUITabElement> = new Map();\n\n  #visibilityBreakpoints: number[] = [];\n\n  readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n  readonly #tabResizeObservers: ResizeObserver[] = [];\n\n  #breakPointCalculationInProgress = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#initialize();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#resizeObserver.unobserve(this);\n    this.#cleanupTabs();\n  }\n\n  async #initialize() {\n    await this.updateComplete;\n    this.#resizeObserver.observe(this._mainElement);\n  }\n\n  #onResize(entries: ResizeObserverEntry[]) {\n    // Check if the gap css custom property has changed.\n    const gapCSSVar = Number.parseFloat(\n      this.style.getPropertyValue('--uui-tab-group-gap'),\n    );\n    const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n    if (newGap === this.#currentGap) {\n      this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize);\n    } else {\n      this.#calculateBreakPoints();\n    }\n  }\n\n  #cleanupTabs() {\n    this.#tabElements.forEach(el => {\n      el.removeEventListener('click', this.#onTabClicked);\n      this.#tabResizeObservers.forEach(observer => observer.disconnect());\n    });\n    this.#tabResizeObservers.length = 0;\n    this.#visibilityBreakpoints.length = 0;\n  }\n\n  #onSlotChange() {\n    this.#cleanupTabs();\n\n    this.#setTabArray();\n\n    this.#tabElements.forEach(el => {\n      el.addEventListener('click', this.#onTabClicked);\n      const observer = new ResizeObserver(\n        this.#calculateBreakPoints.bind(this),\n      );\n      observer.observe(el);\n      this.#tabResizeObservers.push(observer);\n    });\n  }\n\n  readonly #onTabClicked = (e: MouseEvent) => {\n    const selectedElement = e.currentTarget as HTMLElement;\n\n    // Don't switch active tabs when a href is being opened in a new browser tab\n    const isCtrlClick = e.ctrlKey || e.metaKey;\n    if (this.#isElementHrefLike(selectedElement) && isCtrlClick) {\n      return;\n    }\n\n    // If hidden, forward to the original — external listeners fire there\n    if (\n      selectedElement.classList.contains('hidden-tab') &&\n      this.#isElementTabLike(selectedElement)\n    ) {\n      const original = this.#hiddenTabElementsMap.get(selectedElement);\n      if (original) {\n        original.click();\n        this._moreButtonElement.classList.add('active-inside');\n        this._popoverContainerElement.hidePopover();\n      }\n      return;\n    }\n\n    if (this.#isElementTabLike(selectedElement)) {\n      selectedElement.active = true;\n      const linkedElement = this.#hiddenTabElementsMap.get(selectedElement);\n\n      if (linkedElement) {\n        linkedElement.active = true;\n      }\n\n      // Reset all other tabs\n      const filtered = [\n        ...this.#tabElements,\n        ...this.#hiddenTabElements,\n      ].filter(el => el !== selectedElement && el !== linkedElement);\n\n      filtered.forEach(el => {\n        if (this.#isElementTabLike(el)) {\n          el.active = false;\n        }\n      });\n\n      // Check if there are any active tabs in the dropdown\n      const hasActiveHidden = this.#hiddenTabElements.some(\n        el => el.active && el !== linkedElement,\n      );\n\n      if (hasActiveHidden) {\n        this._moreButtonElement.classList.add('active-inside');\n      } else {\n        this._moreButtonElement.classList.remove('active-inside');\n      }\n    }\n  };\n\n  async #calculateBreakPoints() {\n    if (this.#breakPointCalculationInProgress) return;\n\n    // Prevent multiple calculations from happening in the same frame\n    this.#breakPointCalculationInProgress = true;\n    requestAnimationFrame(() => {\n      this.#breakPointCalculationInProgress = false;\n    });\n\n    // Whenever a tab is added or removed, we need to recalculate the breakpoints\n\n    await this.updateComplete; // Wait for the tabs to be rendered\n\n    const gapCSSVar = Number.parseFloat(\n      this.style.getPropertyValue('--uui-tab-group-gap'),\n    );\n    const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n    this.#currentGap = gap;\n    let childrenWidth = 0;\n\n    for (let i = 0; i < this.#tabElements.length; i++) {\n      this.#tabElements[i].style.display = '';\n      childrenWidth += this.#tabElements[i].offsetWidth;\n      this.#visibilityBreakpoints[i] = childrenWidth;\n      // Add the gap, which will then be included in the next breakpoint:\n      childrenWidth += gap;\n    }\n\n    const tolerance = 2;\n    this._mainElement.style.width = childrenWidth - gap + tolerance + 'px';\n\n    this.#updateCollapsibleTabs(this._mainElement.offsetWidth);\n  }\n\n  #setTabArray() {\n    this.#tabElements = this._slottedNodes ?? [];\n    this.#calculateBreakPoints();\n  }\n\n  #updateCollapsibleTabs(containerWidth: number) {\n    const moreButtonWidth = this._moreButtonElement.offsetWidth;\n\n    const containerWithoutButtonWidth = containerWidth - (moreButtonWidth || 0);\n\n    // Do the update\n    // Reset the hidden tabs\n    this.#hiddenTabElements.forEach(el => {\n      el.removeEventListener('click', this.#onTabClicked);\n    });\n    this.#hiddenTabElements = [];\n    this.#hiddenTabElementsMap.clear();\n\n    let hasActiveTabInDropdown = false;\n\n    const len = this.#visibilityBreakpoints.length;\n    for (let i = 0; i < len; i++) {\n      const breakpoint = this.#visibilityBreakpoints[i];\n      const tab = this.#tabElements[i] as UUITabElement;\n\n      // If breakpoint is smaller than the container width, then show the tab.\n      // If last breakpoint, then we will use the containerWidth, as we do not want to include the more-button in that calculation.\n      if (\n        breakpoint <=\n        (i === len - 1 ? containerWidth : containerWithoutButtonWidth)\n      ) {\n        // Show this tab:\n        tab.style.display = '';\n      } else {\n        // Make a proxy tab to put in the hidden tabs container and link it to the original tab\n        const proxyTab = tab.cloneNode(true) as UUITabElement;\n        proxyTab.addEventListener('click', this.#onTabClicked);\n        proxyTab.classList.add('hidden-tab');\n        proxyTab.style.display = '';\n        proxyTab.orientation = this.dropdownContentDirection;\n\n        // Link the proxy tab to the original tab\n        this.#hiddenTabElementsMap.set(proxyTab, tab);\n        this.#hiddenTabElementsMap.set(tab, proxyTab);\n\n        this.#hiddenTabElements.push(proxyTab);\n\n        tab.style.display = 'none';\n        if (tab.active) {\n          hasActiveTabInDropdown = true;\n        }\n      }\n    }\n\n    if (this.#hiddenTabElements.length === 0) {\n      // Hide more button:\n      this._moreButtonElement.style.display = 'none';\n      // close the popover\n      this._popoverContainerElement.hidePopover();\n    } else {\n      // Show more button:\n      this._moreButtonElement.style.display = '';\n    }\n\n    if (hasActiveTabInDropdown) {\n      this._moreButtonElement.classList.add('active-inside');\n    } else {\n      this._moreButtonElement.classList.remove('active-inside');\n    }\n\n    this.requestUpdate();\n  }\n\n  #isElementTabLike(el: any): el is UUITabElement {\n    return (\n      typeof el === 'object' && 'active' in el && typeof el.active === 'boolean'\n    );\n  }\n\n  #isElementHrefLike(el: any): el is UUITabElement {\n    return (\n      typeof el === 'object' &&\n      'href' in el &&\n      typeof el.href === 'string' &&\n      el.href\n    );\n  }\n\n  render() {\n    return html`\n      <div id=\"main\">\n        <div id=\"grid\" role=\"tablist\">\n          <slot @slotchange=${this.#onSlotChange}></slot>\n        </div>\n        <uui-button\n          popovertarget=\"popover-container\"\n          style=\"display: none\"\n          id=\"more-button\"\n          label=\"More\"\n          compact>\n          <uui-symbol-more></uui-symbol-more>\n        </uui-button>\n      </div>\n      <uui-popover-container\n        id=\"popover-container\"\n        popover\n        placement=\"bottom-end\">\n        <div id=\"hidden-tabs-container\" role=\"tablist\">\n          ${repeat(this.#hiddenTabElements, el => html`${el}`)}\n        </div>\n      </uui-popover-container>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        min-width: 0;\n        display: flex;\n        height: 100%;\n      }\n\n      #main {\n        display: flex;\n        justify-content: space-between;\n        overflow: hidden;\n      }\n\n      #grid {\n        width: 1fr;\n        display: flex;\n        height: 100%;\n        min-height: 48px;\n        overflow: hidden;\n        text-wrap: nowrap;\n        color: var(--uui-tab-text);\n        gap: var(--uui-tab-group-gap, 0);\n      }\n\n      #popover-container {\n        --uui-tab-text: var(--uui-tab-group-dropdown-tab-text, unset);\n        --uui-tab-text-hover: var(\n          --uui-tab-group-dropdown-tab-text-hover,\n          unset\n        );\n        --uui-tab-text-active: var(\n          --uui-tab-group-dropdown-tab-text-active,\n          unset\n        );\n      }\n\n      ::slotted(*:not(:last-of-type)) {\n        border-right: 1px solid var(--uui-tab-divider, none);\n      }\n\n      .hidden-tab {\n        width: 100%;\n      }\n\n      #hidden-tabs-container {\n        width: fit-content;\n        display: flex;\n        flex-direction: column;\n        background-color: var(\n          --uui-tab-group-dropdown-background,\n          var(--uui-color-surface)\n        );\n        border-radius: var(--uui-border-radius);\n        box-shadow: var(--uui-shadow-depth-3);\n        overflow: hidden;\n      }\n      :host([dropdown-direction='horizontal']) #hidden-tabs-container {\n        flex-direction: row;\n      }\n\n      #more-button {\n        position: relative;\n\n        --uui-button-contrast: var(--uui-tab-text);\n        --uui-button-contrast-hover: var(--uui-tab-text-hover);\n        --uui-button-background-color: transparent;\n        --uui-button-background-color-hover: transparent;\n      }\n      #more-button::before {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        background-color: var(--uui-color-current);\n        height: 0px;\n        border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n        opacity: 0;\n        transition:\n          opacity ease-in 120ms,\n          height ease-in 120ms;\n      }\n      #more-button.active-inside::before {\n        opacity: 1;\n        height: 4px;\n        transition:\n          opacity 120ms,\n          height ease-out 120ms;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab-group.element.js","names":["#onResize","#isElementHrefLike","#isElementTabLike","#hiddenTabElementsMap","#tabElements","#hiddenTabElements","#resizeObserver","#tabResizeObservers","#initialize","#cleanupTabs","#currentGap","#updateCollapsibleTabs","#calculateBreakPoints","#onTabClicked","#visibilityBreakpoints","#setTabArray","#breakPointCalculationInProgress","#onSlotChange"],"sources":["../../../src/components/tabs/tab-group.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport type { UUITabElement } from './tab.element.js';\n\nimport '../button/button.js';\nimport '../symbol-more/symbol-more.js';\nimport '../popover-container/popover-container.js';\n\n/**\n * @element uui-tab-group\n * @slot - Default slot for the tab group\n * @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown\n * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown\n * @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid\n */\nexport class UUITabGroupElement extends LitElement {\n  @query('#more-button')\n  private readonly _moreButtonElement!: UUIButtonElement;\n\n  @query('#popover-container')\n  private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n  @query('#main') private readonly _mainElement!: HTMLElement;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-tab, [uui-tab], [role=tab]',\n  })\n  private readonly _slottedNodes?: HTMLElement[];\n\n  /** Stores the current gap used in the breakpoints */\n  #currentGap = 0;\n\n  /**\n   * Set the flex direction of the content of the dropdown.\n   * @type {string}\n   * @attr\n   * @default vertical\n   */\n  @property({\n    type: String,\n    reflect: true,\n    attribute: 'dropdown-content-direction',\n  })\n  dropdownContentDirection: 'vertical' | 'horizontal' = 'vertical';\n\n  #tabElements: HTMLElement[] = [];\n\n  #hiddenTabElements: UUITabElement[] = [];\n  readonly #hiddenTabElementsMap: Map<UUITabElement, UUITabElement> = new Map();\n\n  #visibilityBreakpoints: number[] = [];\n\n  readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n  readonly #tabResizeObservers: ResizeObserver[] = [];\n\n  #breakPointCalculationInProgress = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#initialize();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#resizeObserver.unobserve(this);\n    this.#cleanupTabs();\n  }\n\n  async #initialize() {\n    await this.updateComplete;\n    this.#resizeObserver.observe(this._mainElement);\n  }\n\n  #onResize(entries: ResizeObserverEntry[]) {\n    // Check if the gap css custom property has changed.\n    const gapCSSVar = Number.parseFloat(\n      this.style.getPropertyValue('--uui-tab-group-gap'),\n    );\n    const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n    if (newGap === this.#currentGap) {\n      this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize);\n    } else {\n      this.#calculateBreakPoints();\n    }\n  }\n\n  #cleanupTabs() {\n    this.#tabElements.forEach(el => {\n      el.removeEventListener('click', this.#onTabClicked);\n      this.#tabResizeObservers.forEach(observer => observer.disconnect());\n    });\n    this.#tabResizeObservers.length = 0;\n    this.#visibilityBreakpoints.length = 0;\n  }\n\n  #onSlotChange() {\n    this.#cleanupTabs();\n\n    this.#setTabArray();\n\n    this.#tabElements.forEach(el => {\n      el.addEventListener('click', this.#onTabClicked);\n      const observer = new ResizeObserver(\n        this.#calculateBreakPoints.bind(this),\n      );\n      observer.observe(el);\n      this.#tabResizeObservers.push(observer);\n    });\n  }\n\n  readonly #onTabClicked = (e: MouseEvent) => {\n    const selectedElement = e.currentTarget as HTMLElement;\n\n    // Don't switch active tabs when a href is being opened in a new browser tab\n    const isCtrlClick = e.ctrlKey || e.metaKey;\n    if (this.#isElementHrefLike(selectedElement) && isCtrlClick) {\n      return;\n    }\n\n    // If hidden, forward to the original — external listeners fire there\n    if (\n      selectedElement.classList.contains('hidden-tab') &&\n      this.#isElementTabLike(selectedElement)\n    ) {\n      const original = this.#hiddenTabElementsMap.get(selectedElement);\n      if (original) {\n        original.click();\n        this._moreButtonElement.classList.add('active-inside');\n        this._popoverContainerElement.hidePopover();\n      }\n      return;\n    }\n\n    if (this.#isElementTabLike(selectedElement)) {\n      selectedElement.active = true;\n      const linkedElement = this.#hiddenTabElementsMap.get(selectedElement);\n\n      if (linkedElement) {\n        linkedElement.active = true;\n      }\n\n      // Reset all other tabs\n      const filtered = [\n        ...this.#tabElements,\n        ...this.#hiddenTabElements,\n      ].filter(el => el !== selectedElement && el !== linkedElement);\n\n      filtered.forEach(el => {\n        if (this.#isElementTabLike(el)) {\n          el.active = false;\n        }\n      });\n\n      // Check if there are any active tabs in the dropdown\n      const hasActiveHidden = this.#hiddenTabElements.some(\n        el => el.active && el !== linkedElement,\n      );\n\n      if (hasActiveHidden) {\n        this._moreButtonElement.classList.add('active-inside');\n      } else {\n        this._moreButtonElement.classList.remove('active-inside');\n      }\n    }\n  };\n\n  async #calculateBreakPoints() {\n    if (this.#breakPointCalculationInProgress) return;\n\n    // Prevent multiple calculations from happening in the same frame\n    this.#breakPointCalculationInProgress = true;\n    requestAnimationFrame(() => {\n      this.#breakPointCalculationInProgress = false;\n    });\n\n    // Whenever a tab is added or removed, we need to recalculate the breakpoints\n\n    await this.updateComplete; // Wait for the tabs to be rendered\n\n    const gapCSSVar = Number.parseFloat(\n      this.style.getPropertyValue('--uui-tab-group-gap'),\n    );\n    const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n    this.#currentGap = gap;\n    let childrenWidth = 0;\n\n    for (let i = 0; i < this.#tabElements.length; i++) {\n      this.#tabElements[i].style.display = '';\n      childrenWidth += this.#tabElements[i].offsetWidth;\n      this.#visibilityBreakpoints[i] = childrenWidth;\n      // Add the gap, which will then be included in the next breakpoint:\n      childrenWidth += gap;\n    }\n\n    const tolerance = 2;\n    this._mainElement.style.width = childrenWidth - gap + tolerance + 'px';\n\n    this.#updateCollapsibleTabs(this._mainElement.offsetWidth);\n  }\n\n  #setTabArray() {\n    this.#tabElements = this._slottedNodes ?? [];\n    this.#calculateBreakPoints();\n  }\n\n  #updateCollapsibleTabs(containerWidth: number) {\n    const moreButtonWidth = this._moreButtonElement.offsetWidth;\n\n    const containerWithoutButtonWidth = containerWidth - (moreButtonWidth || 0);\n\n    // Do the update\n    // Reset the hidden tabs\n    this.#hiddenTabElements.forEach(el => {\n      el.removeEventListener('click', this.#onTabClicked);\n    });\n    this.#hiddenTabElements = [];\n    this.#hiddenTabElementsMap.clear();\n\n    let hasActiveTabInDropdown = false;\n\n    const len = this.#visibilityBreakpoints.length;\n    for (let i = 0; i < len; i++) {\n      const breakpoint = this.#visibilityBreakpoints[i];\n      const tab = this.#tabElements[i] as UUITabElement;\n\n      // If breakpoint is smaller than the container width, then show the tab.\n      // If last breakpoint, then we will use the containerWidth, as we do not want to include the more-button in that calculation.\n      if (\n        breakpoint <=\n        (i === len - 1 ? containerWidth : containerWithoutButtonWidth)\n      ) {\n        // Show this tab:\n        tab.style.display = '';\n      } else {\n        // Make a proxy tab to put in the hidden tabs container and link it to the original tab\n        const proxyTab = tab.cloneNode(true) as UUITabElement;\n        proxyTab.addEventListener('click', this.#onTabClicked);\n        proxyTab.classList.add('hidden-tab');\n        proxyTab.style.display = '';\n        proxyTab.orientation = this.dropdownContentDirection;\n\n        // Link the proxy tab to the original tab\n        this.#hiddenTabElementsMap.set(proxyTab, tab);\n        this.#hiddenTabElementsMap.set(tab, proxyTab);\n\n        this.#hiddenTabElements.push(proxyTab);\n\n        tab.style.display = 'none';\n        if (tab.active) {\n          hasActiveTabInDropdown = true;\n        }\n      }\n    }\n\n    if (this.#hiddenTabElements.length === 0) {\n      // Hide more button:\n      this._moreButtonElement.style.display = 'none';\n      // close the popover\n      this._popoverContainerElement.hidePopover();\n    } else {\n      // Show more button:\n      this._moreButtonElement.style.display = '';\n    }\n\n    if (hasActiveTabInDropdown) {\n      this._moreButtonElement.classList.add('active-inside');\n    } else {\n      this._moreButtonElement.classList.remove('active-inside');\n    }\n\n    this.requestUpdate();\n  }\n\n  #isElementTabLike(el: any): el is UUITabElement {\n    return (\n      typeof el === 'object' && 'active' in el && typeof el.active === 'boolean'\n    );\n  }\n\n  #isElementHrefLike(el: any): el is UUITabElement {\n    return (\n      typeof el === 'object' &&\n      'href' in el &&\n      typeof el.href === 'string' &&\n      el.href\n    );\n  }\n\n  render() {\n    return html`\n      <div id=\"main\">\n        <div id=\"grid\" role=\"tablist\">\n          <slot @slotchange=${this.#onSlotChange}></slot>\n        </div>\n        <uui-button\n          popovertarget=\"popover-container\"\n          style=\"display: none\"\n          id=\"more-button\"\n          label=\"More\"\n          compact>\n          <uui-symbol-more></uui-symbol-more>\n        </uui-button>\n      </div>\n      <uui-popover-container\n        id=\"popover-container\"\n        popover\n        placement=\"bottom-end\">\n        <div id=\"hidden-tabs-container\" role=\"tablist\">\n          ${repeat(this.#hiddenTabElements, el => html`${el}`)}\n        </div>\n      </uui-popover-container>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        min-width: 0;\n        display: flex;\n        height: 100%;\n      }\n\n      #main {\n        display: flex;\n        justify-content: space-between;\n        overflow: hidden;\n      }\n\n      #grid {\n        width: 1fr;\n        display: flex;\n        height: 100%;\n        min-height: 48px;\n        overflow: hidden;\n        text-wrap: nowrap;\n        color: var(--uui-tab-text);\n        gap: var(--uui-tab-group-gap, 0);\n      }\n\n      #popover-container {\n        --uui-tab-text: var(--uui-tab-group-dropdown-tab-text, unset);\n        --uui-tab-text-hover: var(\n          --uui-tab-group-dropdown-tab-text-hover,\n          unset\n        );\n        --uui-tab-text-active: var(\n          --uui-tab-group-dropdown-tab-text-active,\n          unset\n        );\n      }\n\n      ::slotted(*:not(:last-of-type)) {\n        border-right: 1px solid var(--uui-tab-divider, none);\n      }\n\n      .hidden-tab {\n        width: 100%;\n      }\n\n      #hidden-tabs-container {\n        width: fit-content;\n        display: flex;\n        flex-direction: column;\n        background-color: var(\n          --uui-tab-group-dropdown-background,\n          var(--uui-color-surface)\n        );\n        border-radius: var(--uui-border-radius);\n        box-shadow: var(--uui-shadow-depth-3);\n        overflow: hidden;\n      }\n      :host([dropdown-direction='horizontal']) #hidden-tabs-container {\n        flex-direction: row;\n      }\n\n      #more-button {\n        position: relative;\n\n        --uui-button-contrast: var(--uui-tab-text);\n        --uui-button-contrast-hover: var(--uui-tab-text-hover);\n        --uui-button-background-color: transparent;\n        --uui-button-background-color-hover: transparent;\n      }\n      #more-button::before {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        background-color: var(--uui-color-current);\n        height: 0px;\n        border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n        opacity: 0;\n        transition:\n          opacity ease-in 120ms,\n          height ease-in 120ms;\n      }\n      #more-button.active-inside::before {\n        opacity: 1;\n        height: 4px;\n        transition:\n          opacity 120ms,\n          height ease-out 120ms;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}