@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/table/table-row.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.element.js","sources":["../../../src/components/table/table-row.element.ts"],"sourcesContent":["import {\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\n/**\n *  Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.\n *  @element uui-table-row\n *  @slot for <uui-table-cell> elements that should be in the row.\n *  @cssprop --uui-table-row-color-selected - overwrite the color of the selected row\n */\nexport class UUITableRowElement extends SelectOnlyMixin(\n  SelectableMixin(LitElement),\n) {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-table-cell, [uui-table-cell], [role=cell]',\n  })\n  private readonly slotCellNodes?: unknown[];\n\n  protected updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('selectOnly')) {\n      this.updateChildSelectOnly();\n    }\n  }\n\n  private updateChildSelectOnly() {\n    if (this.slotCellNodes) {\n      this.slotCellNodes.forEach((el: any) => {\n        if (el.disableChildInteraction !== undefined) {\n          el.disableChildInteraction = this.selectOnly;\n        }\n      });\n    }\n  }\n\n  render() {\n    return html` <slot @slotchanged=${this.updateChildSelectOnly}></slot> `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: table-row;\n        position: relative;\n        outline-offset: -3px;\n        border-radius: var(--uui-border-radius);\n      }\n\n      :host([selectable]) {\n        cursor: pointer;\n      }\n\n      :host(:focus-visible) {\n        outline: 2px solid var(--uui-color-focus);\n      }\n      :host([selected]) {\n        outline: 2px solid\n          var(--uui-table-row-color-selected, var(--uui-color-selected));\n      }\n      :host([selected]:focus) {\n        outline-color: var(--uui-color-focus);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaO,MAAM,sBAAN,MAAM,4BAA2B;AAAA,EACtC,gBAAgB,UAAU;AAC5B,EAAE;AAAA,EACA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAQU,QAAQ,mBAA2D;AAC3E,QAAI,kBAAkB,IAAI,YAAY,GAAG;AACvC,WAAK,sBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,wBAAwB;AAC9B,QAAI,KAAK,eAAe;AACtB,WAAK,cAAc,QAAQ,CAAC,OAAY;AACtC,YAAI,GAAG,4BAA4B,QAAW;AAC5C,aAAG,0BAA0B,KAAK;AAAA,QACpC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO,2BAA2B,KAAK,qBAAqB;AAAA,EAC9D;AA2BF;AAzBE,oBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAnCG,IAAM,qBAAN;AAYY,gBAAA;AAAA,EAJhB,sBAAsB;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,CACX;AAAA,GAXU,mBAYM,WAAA,eAAA;"}

package/dist/components/table/table.d.ts

@@ -0,0 +1,23 @@
+import { UUITableCellElement } from './table-cell.element.js';
+import { UUITableColumnElement } from './table-column.element.js';
+import { UUITableHeadCellElement } from './table-head-cell.element.js';
+import { UUITableHeadElement } from './table-head.element.js';
+import { UUITableRowElement } from './table-row.element.js';
+import { UUITableElement } from './table.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-table-cell': UUITableCellElement;
+        'uui-table-column': UUITableColumnElement;
+        'uui-table-head-cell': UUITableHeadCellElement;
+        'uui-table-head': UUITableHeadElement;
+        'uui-table-row': UUITableRowElement;
+        'uui-table': UUITableElement;
+    }
+}
+export * from './table-cell.element.js';
+export * from './table-column.element.js';
+export * from './table-head-cell.element.js';
+export * from './table-head.element.js';
+export * from './table-row.element.js';
+export * from './table.element.js';
+export { UUITableElement as default } from './table.element.js';

package/dist/components/table/table.element.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/**
+ *  Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.
+ *  @element uui-table
+ *  @slot - slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them.
+ */
+export declare class UUITableElement extends LitElement {
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/table/table.element.js

@@ -0,0 +1,27 @@
+import { LitElement, html, css } from "lit";
+const _UUITableElement = class _UUITableElement extends LitElement {
+  /* consider select-only attribute on this level? */
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "table");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUITableElement.styles = [
+  css`
+      :host {
+        display: table;
+        width: 100%;
+        border-radius: var(--uui-border-radius);
+        background-color: var(--uui-color-surface);
+        cursor: default;
+      }
+    `
+];
+let UUITableElement = _UUITableElement;
+export {
+  UUITableElement
+};
+//# sourceMappingURL=table.element.js.map

package/dist/components/table/table.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.element.js","sources":["../../../src/components/table/table.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.\n *  @element uui-table\n *  @slot - slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them.\n */\nexport class UUITableElement extends LitElement {\n  /* consider select-only attribute on this level? */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: table;\n        width: 100%;\n        border-radius: var(--uui-border-radius);\n        background-color: var(--uui-color-surface);\n        cursor: default;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA;AAAA,EAG9C,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAaF;AAXE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAbG,IAAM,kBAAN;"}

package/dist/components/table/table.js

@@ -0,0 +1,23 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUITableCellElement } from "./table-cell.element.js";
+import { UUITableColumnElement } from "./table-column.element.js";
+import { UUITableHeadCellElement } from "./table-head-cell.element.js";
+import { UUITableHeadElement } from "./table-head.element.js";
+import { UUITableRowElement } from "./table-row.element.js";
+import { UUITableElement } from "./table.element.js";
+defineElement("uui-table-cell", UUITableCellElement);
+defineElement("uui-table-column", UUITableColumnElement);
+defineElement("uui-table-head-cell", UUITableHeadCellElement);
+defineElement("uui-table-head", UUITableHeadElement);
+defineElement("uui-table-row", UUITableRowElement);
+defineElement("uui-table", UUITableElement);
+export {
+  UUITableCellElement,
+  UUITableColumnElement,
+  UUITableElement,
+  UUITableHeadCellElement,
+  UUITableHeadElement,
+  UUITableRowElement,
+  UUITableElement as default
+};
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUITableCellElement } from './table-cell.element.js';\nimport { UUITableColumnElement } from './table-column.element.js';\nimport { UUITableHeadCellElement } from './table-head-cell.element.js';\nimport { UUITableHeadElement } from './table-head.element.js';\nimport { UUITableRowElement } from './table-row.element.js';\nimport { UUITableElement } from './table.element.js';\n\ndefineElement('uui-table-cell', UUITableCellElement);\ndefineElement('uui-table-column', UUITableColumnElement);\ndefineElement('uui-table-head-cell', UUITableHeadCellElement);\ndefineElement('uui-table-head', UUITableHeadElement);\ndefineElement('uui-table-row', UUITableRowElement);\ndefineElement('uui-table', UUITableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-table-cell': UUITableCellElement;\n    'uui-table-column': UUITableColumnElement;\n    'uui-table-head-cell': UUITableHeadCellElement;\n    'uui-table-head': UUITableHeadElement;\n    'uui-table-row': UUITableRowElement;\n    'uui-table': UUITableElement;\n  }\n}\n\nexport * from './table-cell.element.js';\nexport * from './table-column.element.js';\nexport * from './table-head-cell.element.js';\nexport * from './table-head.element.js';\nexport * from './table-row.element.js';\nexport * from './table.element.js';\nexport { UUITableElement as default } from './table.element.js';\n"],"names":[],"mappings":";;;;;;;AAQA,cAAc,kBAAkB,mBAAmB;AACnD,cAAc,oBAAoB,qBAAqB;AACvD,cAAc,uBAAuB,uBAAuB;AAC5D,cAAc,kBAAkB,mBAAmB;AACnD,cAAc,iBAAiB,kBAAkB;AACjD,cAAc,aAAa,eAAe;"}

package/dist/components/tabs/UUITabEvent.d.ts

@@ -0,0 +1,6 @@
+import type { UUITabElement } from './tab.element.js';
+import { UUIEvent } from '../../internal/events/index.js';
+type DetailType = {};
+export declare class UUITabEvent extends UUIEvent<DetailType, UUITabElement> {
+}
+export {};

package/dist/components/tabs/UUITabEvent.js

@@ -0,0 +1,7 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+class UUITabEvent extends UUIEvent {
+}
+export {
+  UUITabEvent
+};
+//# sourceMappingURL=UUITabEvent.js.map

package/dist/components/tabs/UUITabEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUITabEvent.js","sources":["../../../src/components/tabs/UUITabEvent.ts"],"sourcesContent":["import type { UUITabElement } from './tab.element.js';\nimport { UUIEvent } from '../../internal/events/index.js';\n\ntype DetailType = {};\n\nexport class UUITabEvent extends UUIEvent<DetailType, UUITabElement> {}\n"],"names":[],"mappings":";AAKO,MAAM,oBAAoB,SAAoC;AAAC;"}

package/dist/components/tabs/UUITabGroupEvent.d.ts

@@ -0,0 +1,6 @@
+import type { UUITabGroupElement } from './tab-group.element.js';
+import { UUIEvent } from '../../internal/events/index.js';
+type DetailType = {};
+export declare class UUITabGroupEvent extends UUIEvent<DetailType, UUITabGroupElement> {
+}
+export {};

package/dist/components/tabs/UUITabGroupEvent.js

@@ -0,0 +1,7 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+class UUITabGroupEvent extends UUIEvent {
+}
+export {
+  UUITabGroupEvent
+};
+//# sourceMappingURL=UUITabGroupEvent.js.map

package/dist/components/tabs/UUITabGroupEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUITabGroupEvent.js","sources":["../../../src/components/tabs/UUITabGroupEvent.ts"],"sourcesContent":["import type { UUITabGroupElement } from './tab-group.element.js';\nimport { UUIEvent } from '../../internal/events/index.js';\n\ntype DetailType = {};\n\nexport class UUITabGroupEvent extends UUIEvent<\n  DetailType,\n  UUITabGroupElement\n> {}\n"],"names":[],"mappings":";AAKO,MAAM,yBAAyB,SAGpC;AAAC;"}

package/dist/components/tabs/tab-group.element.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import '../button/button.js';
+import '../symbol-more/symbol-more.js';
+import '../popover-container/popover-container.js';
+/**
+ * @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
+ */
+export declare class UUITabGroupElement extends LitElement {
+    #private;
+    private readonly _moreButtonElement;
+    private readonly _popoverContainerElement;
+    private readonly _mainElement;
+    private readonly _slottedNodes?;
+    /**
+     * Set the flex direction of the content of the dropdown.
+     * @type {string}
+     * @attr
+     * @default vertical
+     */
+    dropdownContentDirection: 'vertical' | 'horizontal';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,345 @@
+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;
+import { LitElement, html, css } from "lit";
+import { query, queryAssignedElements, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.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;
+      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`
+      <div id="main">
+        <div id="grid" role="tablist">
+          <slot @slotchange=${__privateMethod(this, _UUITabGroupElement_instances, onSlotChange_fn)}></slot>
+        </div>
+        <uui-button
+          popovertarget="popover-container"
+          style="display: none"
+          id="more-button"
+          label="More"
+          compact>
+          <uui-symbol-more></uui-symbol-more>
+        </uui-button>
+      </div>
+      <uui-popover-container
+        id="popover-container"
+        popover
+        placement="bottom-end">
+        <div id="hidden-tabs-container" role="tablist">
+          ${repeat(__privateGet(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";
+};
+_UUITabGroupElement.styles = [
+  css`
+      :host {
+        min-width: 0;
+        display: flex;
+        height: 100%;
+      }
+
+      #main {
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+      }
+
+      #grid {
+        width: 1fr;
+        display: flex;
+        height: 100%;
+        min-height: 48px;
+        overflow: hidden;
+        text-wrap: nowrap;
+        color: var(--uui-tab-text);
+        gap: var(--uui-tab-group-gap, 0);
+      }
+
+      #popover-container {
+        --uui-tab-text: var(--uui-tab-group-dropdown-tab-text, unset);
+        --uui-tab-text-hover: var(
+          --uui-tab-group-dropdown-tab-text-hover,
+          unset
+        );
+        --uui-tab-text-active: var(
+          --uui-tab-group-dropdown-tab-text-active,
+          unset
+        );
+      }
+
+      ::slotted(*:not(:last-of-type)) {
+        border-right: 1px solid var(--uui-tab-divider, none);
+      }
+
+      .hidden-tab {
+        width: 100%;
+      }
+
+      #hidden-tabs-container {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        background-color: var(
+          --uui-tab-group-dropdown-background,
+          var(--uui-color-surface)
+        );
+        border-radius: var(--uui-border-radius);
+        box-shadow: var(--uui-shadow-depth-3);
+        overflow: hidden;
+      }
+      :host([dropdown-direction='horizontal']) #hidden-tabs-container {
+        flex-direction: row;
+      }
+
+      #more-button {
+        position: relative;
+
+        --uui-button-contrast: var(--uui-tab-text);
+        --uui-button-contrast-hover: var(--uui-tab-text-hover);
+        --uui-button-background-color: transparent;
+        --uui-button-background-color-hover: transparent;
+      }
+      #more-button::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: var(--uui-color-current);
+        height: 0px;
+        border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;
+        opacity: 0;
+        transition:
+          opacity ease-in 120ms,
+          height ease-in 120ms;
+      }
+      #more-button.active-inside::before {
+        opacity: 1;
+        height: 4px;
+        transition:
+          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

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

@@ -0,0 +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    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  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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"}

package/dist/components/tabs/tab.element.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+declare const UUITabElement_base: (new (...args: any[]) => import("../../index.js").UUIActiveMixinInterface) & (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ * A single tab. Should be put into `<uui-tab-group>`,
+ * @element uui-tabs
+ * @slot - for label
+ * @slot icon - for icon
+ * @slot extra - for extra
+ * @description - All-round tab-button
+ * @cssprop --uui-tab-text - Define the tab text color
+ * @cssprop --uui-tab-text-hover - Define the tab text hover color
+ * @cssprop --uui-tab-text-active - Define the tab text active color
+ * @cssprop --uui-tab-divider - Define the tab dividers color
+ * @cssprop --uui-tab-padding-horizontal - Define the tab horizontal padding
+ */
+export declare class UUITabElement extends UUITabElement_base {
+    /**
+     * Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Set an href, this will turns the inner button into a anchor tag.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Set an anchor tag target, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Set the rel attribute for an anchor tag, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    rel?: string;
+    /**
+     * Set the visual orientation of this tab, this changes the look and placement of the active indication.
+     * @type {string}
+     * @attr
+     * @default horizontal
+     */
+    orientation?: 'horizontal' | 'vertical';
+    constructor();
+    private onHostClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};