@umbraco-ui/uui-tabs 1.4.0 → 1.5.0-rc.1

package/README.md

@@ -4,7 +4,7 @@
 
 ### See it in action
 
-Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-tabs)
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/docs/uui-tabs--docs)
 
 ## Installation
 

package/custom-elements.json

@@ -4,7 +4,22 @@
     {
       "name": "uui-tab-group",
       "path": "./lib/uui-tab-group.element.ts",
+      "attributes": [
+        {
+          "name": "dropdown-content-direction",
+          "description": "Set the flex direction of the content of the dropdown.",
+          "type": "string",
+          "default": "\"vertical\""
+        }
+      ],
       "properties": [
+        {
+          "name": "dropdownContentDirection",
+          "attribute": "dropdown-content-direction",
+          "description": "Set the flex direction of the content of the dropdown.",
+          "type": "string",
+          "default": "\"vertical\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -41,6 +56,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "orientation",
+          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
+          "type": "string",
+          "default": "\"horizontal\""
+        },
         {
           "name": "active",
           "description": "Set this boolean to true for then the related composition is sorted.",
@@ -54,11 +75,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "styles",
-          "type": "CSSResult[]",
-          "default": "[null]"
-        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -80,6 +96,18 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "orientation",
+          "attribute": "orientation",
+          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
+          "type": "string",
+          "default": "\"horizontal\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "active",
           "attribute": "active",
@@ -128,6 +156,10 @@
         {
           "name": "--uui-tab-divider",
           "description": "Define the tab dividers color"
+        },
+        {
+          "name": "--uui-tab-padding-horizontal",
+          "description": "Define the tab horizontal padding"
         }
       ]
     },
@@ -154,6 +186,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "orientation",
+          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
+          "type": "string",
+          "default": "\"horizontal\""
+        },
         {
           "name": "active",
           "description": "Set this boolean to true for then the related composition is sorted.",
@@ -167,11 +205,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "styles",
-          "type": "CSSResult[]",
-          "default": "[null]"
-        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -193,6 +226,18 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "orientation",
+          "attribute": "orientation",
+          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
+          "type": "string",
+          "default": "\"horizontal\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "active",
           "attribute": "active",
@@ -241,6 +286,10 @@
         {
           "name": "--uui-tab-divider",
           "description": "Define the tab dividers color"
+        },
+        {
+          "name": "--uui-tab-padding-horizontal",
+          "description": "Define the tab horizontal padding"
         }
       ]
     }

package/lib/index.js

@@ -1,8 +1,12 @@
 import { ActiveMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, html, css } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-popover-container/lib';
+import '@umbraco-ui/uui-symbol-more/lib';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 var __defProp$1 = Object.defineProperty;
@@ -20,6 +24,7 @@ let UUITabElement = class extends ActiveMixin(LabelMixin("", LitElement)) {
   constructor() {
     super();
     this.disabled = false;
+    this.orientation = "horizontal";
     this.addEventListener("click", this.onHostClick);
   }
   onHostClick(e) {
@@ -60,22 +65,24 @@ UUITabElement.styles = [
       :host {
         color: var(--uui-tab-text, var(--uui-color-interactive,#1b264f));
         font-family: inherit;
+        width: fit-content;
       }
 
       #button {
         position: relative;
+        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        text-align: center;
-        padding: var(--uui-size-2,6px) var(--uui-size-4,12px);
-        border: none;
-        box-sizing: border-box;
-        min-height: 32px;
-        font-size: inherit;
+        width: 100%;
         height: 100%;
+        min-height: var(--uui-size-12,36px);
         min-width: 70px;
+        padding: var(--uui-size-2,6px)
+          var(--uui-tab-padding-horizontal, var(--uui-size-5,15px));
+        border: none;
+        font-size: inherit;
         background: none;
         color: inherit;
         cursor: pointer;
@@ -86,6 +93,12 @@ UUITabElement.styles = [
         line-height: normal;
       }
 
+      :host([orientation='vertical']) #button {
+        min-height: var(--uui-size-14,42px);
+        padding: var(--uui-size-2,6px)
+          var(--uui-tab-padding-horizontal, var(--uui-size-5,15px));
+      }
+
       :host(:not([active]):not([disabled])) #button:hover {
         color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis,#3544b1));
       }
@@ -106,26 +119,49 @@ UUITabElement.styles = [
       #button::before {
         content: '';
         position: absolute;
-        height: 0px;
-        /* max-width: 50px; */
-        width: calc(100% - 16px);
-        left: auto;
-        right: auto;
         background-color: var(--uui-color-current,#f5c1bc);
-        bottom: 0;
-        border-radius: 3px 3px 0 0;
         opacity: 0;
-        transition: opacity ease-in 120ms, height ease-in 120ms;
-      }
-      #button:hover::before {
-        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+        --transitionDuration: 120ms;
+        --barWidth: 4px;
+        --borderRadius: 3px;
       }
       :host([active]) #button::before {
         opacity: 1;
-        height: 4px;
-        transition: opacity 120ms, height ease-out 120ms;
       }
 
+      /* HORIZONTAL */
+      :host([orientation='horizontal']) #button::before {
+        left: auto;
+        right: auto;
+        border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+        height: 0px;
+        width: calc(100% - 15px);
+        bottom: 0;
+        transition: opacity ease-in-out var(--transitionDuration),
+          height ease-in-out var(--transitionDuration);
+      }
+      :host([active][orientation='horizontal']) #button::before {
+        height: var(--barWidth);
+      }
+
+      /* VERTICAL */
+      :host([orientation='vertical']) #button::before {
+        top: auto;
+        bottom: auto;
+        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+        height: calc(100% - 12px);
+        width: 0px;
+        left: 0;
+        transition: opacity ease-in-out var(--transitionDuration),
+          width ease-in-out var(--transitionDuration);
+      }
+      :host([active][orientation='vertical']) #button::before {
+        width: var(--barWidth);
+      }
+
+      #button:hover::before {
+        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+      }
       :host([disabled]) #button::before {
         background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
       }
@@ -134,6 +170,18 @@ UUITabElement.styles = [
         font-size: 20px;
         margin-bottom: var(--uui-size-2,6px);
       }
+
+      slot.label {
+        /* TODO: Find a better selector */
+        text-align: center;
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+      }
+
+      :host([orientation='vertical']) slot.label {
+        text-align: left;
+      }
     `
 ];
 __decorateClass$1([
@@ -145,6 +193,9 @@ __decorateClass$1([
 __decorateClass$1([
   property({ type: String })
 ], UUITabElement.prototype, "target", 2);
+__decorateClass$1([
+  property({ type: String, reflect: true })
+], UUITabElement.prototype, "orientation", 2);
 UUITabElement = __decorateClass$1([
   defineElement("uui-tab")
 ], UUITabElement);
@@ -160,46 +211,191 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw 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);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _oldBreakpoint, _resizeObserver, _onResize, onResize_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _isElementTabLike, isElementTabLike_fn;
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
-    this._tabElements = [];
-    this._onTabClicked = (e) => {
+    __privateAdd(this, _onResize);
+    __privateAdd(this, _onSlotChange);
+    __privateAdd(this, _updateCollapsibleTabs);
+    __privateAdd(this, _calculateBreakPoints);
+    __privateAdd(this, _setTabArray);
+    __privateAdd(this, _isElementTabLike);
+    this.dropdownContentDirection = "vertical";
+    __privateAdd(this, _tabElements, []);
+    __privateAdd(this, _hiddenTabElements, []);
+    __privateAdd(this, _hiddenTabElementsMap, /* @__PURE__ */ new Map());
+    __privateAdd(this, _visibilityBreakpoints, []);
+    __privateAdd(this, _oldBreakpoint, 0);
+    __privateAdd(this, _resizeObserver, new ResizeObserver(
+      __privateMethod(this, _onResize, onResize_fn).bind(this)
+    ));
+    __privateAdd(this, _onTabClicked, (e) => {
       const selectedElement = e.currentTarget;
-      if (this._elementIsTabLike(selectedElement)) {
+      if (__privateMethod(this, _isElementTabLike, isElementTabLike_fn).call(this, selectedElement)) {
         selectedElement.active = true;
-        const filtered = this._tabElements.filter((el) => el !== selectedElement);
+        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 (this._elementIsTabLike(el)) {
+          if (__privateMethod(this, _isElementTabLike, isElementTabLike_fn).call(this, el)) {
             el.active = false;
           }
         });
+        const hasActiveHidden = __privateGet(this, _hiddenTabElements).some(
+          (el) => el.active && el !== linkedElement
+        );
+        hasActiveHidden ? this._moreButtonElement.classList.add("active-inside") : this._moreButtonElement.classList.remove("active-inside");
       }
-    };
-  }
-  _setTabArray() {
-    this._tabElements = this._slottedNodes ? this._slottedNodes : [];
-  }
-  _onSlotChange() {
-    this._tabElements.forEach((el) => {
-      el.removeEventListener("click", this._onTabClicked);
     });
-    this._setTabArray();
-    this._tabElements.forEach((el) => {
-      el.addEventListener("click", this._onTabClicked);
-    });
-  }
-  _elementIsTabLike(el) {
-    return el instanceof UUITabElement || "active" in el;
   }
   connectedCallback() {
     super.connectedCallback();
+    __privateGet(this, _resizeObserver).observe(this);
     if (!this.hasAttribute("role"))
       this.setAttribute("role", "tablist");
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).unobserve(this);
+  }
   render() {
-    return html` <slot @slotchange=${this._onSlotChange}></slot> `;
+    return html`
+      <slot @slotchange=${__privateMethod(this, _onSlotChange, onSlotChange_fn)}></slot>
+      <uui-button
+        popovertarget="popover-container"
+        style="display: none"
+        id="more-button"
+        label="More"
+        compact>
+        <uui-symbol-more></uui-symbol-more>
+      </uui-button>
+      <uui-popover-container
+        id="popover-container"
+        popover
+        margin="10"
+        placement="bottom-end">
+        <div id="hidden-tabs-container">
+          ${repeat(__privateGet(this, _hiddenTabElements), (el) => html`${el}`)}
+        </div>
+      </uui-popover-container>
+    `;
+  }
+};
+_tabElements = new WeakMap();
+_hiddenTabElements = new WeakMap();
+_hiddenTabElementsMap = new WeakMap();
+_visibilityBreakpoints = new WeakMap();
+_oldBreakpoint = new WeakMap();
+_resizeObserver = new WeakMap();
+_onResize = new WeakSet();
+onResize_fn = function(entries) {
+  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, entries[0].contentBoxSize[0].inlineSize);
+};
+_onSlotChange = new WeakSet();
+onSlotChange_fn = function() {
+  __privateGet(this, _tabElements).forEach((el) => {
+    el.removeEventListener("click", __privateGet(this, _onTabClicked));
+  });
+  __privateMethod(this, _setTabArray, setTabArray_fn).call(this);
+  __privateGet(this, _tabElements).forEach((el) => {
+    el.addEventListener("click", __privateGet(this, _onTabClicked));
+  });
+};
+_onTabClicked = new WeakMap();
+_updateCollapsibleTabs = new WeakSet();
+updateCollapsibleTabs_fn = function(containerWidth) {
+  const buttonWidth = this._moreButtonElement.offsetWidth;
+  if (__privateGet(this, _visibilityBreakpoints).slice(-1)[0] < containerWidth && __privateGet(this, _hiddenTabElements).length === 0)
+    return;
+  let newBreakpoint = Number.MAX_VALUE;
+  for (let i = __privateGet(this, _visibilityBreakpoints).length - 1; i > -1; i--) {
+    const breakpoint = __privateGet(this, _visibilityBreakpoints)[i];
+    const containerWidthButtonWidth = containerWidth - (i !== __privateGet(this, _visibilityBreakpoints).length - 1 ? buttonWidth : 0);
+    if (breakpoint < containerWidthButtonWidth) {
+      newBreakpoint = i;
+      break;
+    }
   }
+  if (newBreakpoint === __privateGet(this, _oldBreakpoint))
+    return;
+  __privateSet(this, _oldBreakpoint, newBreakpoint);
+  __privateGet(this, _hiddenTabElements).forEach((el) => {
+    el.removeEventListener("click", __privateGet(this, _onTabClicked));
+  });
+  __privateSet(this, _hiddenTabElements, []);
+  __privateGet(this, _hiddenTabElementsMap).clear();
+  let hasActiveTabInDropdown = false;
+  for (let i = 0; i < __privateGet(this, _visibilityBreakpoints).length; i++) {
+    const breakpoint = __privateGet(this, _visibilityBreakpoints)[i];
+    const tab = __privateGet(this, _tabElements)[i];
+    const containerWidthButtonWidth = containerWidth - (i !== __privateGet(this, _visibilityBreakpoints).length - 1 ? buttonWidth : 0);
+    if (breakpoint < containerWidthButtonWidth) {
+      tab.style.display = "";
+      this._moreButtonElement.style.display = "none";
+    } 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";
+      this._moreButtonElement.style.display = "";
+      if (tab.active) {
+        hasActiveTabInDropdown = true;
+      }
+    }
+  }
+  hasActiveTabInDropdown ? this._moreButtonElement.classList.add("active-inside") : this._moreButtonElement.classList.remove("active-inside");
+  this.requestUpdate();
+};
+_calculateBreakPoints = new WeakSet();
+calculateBreakPoints_fn = function() {
+  let childrenWidth = 0;
+  for (let i = 0; i < __privateGet(this, _tabElements).length; i++) {
+    childrenWidth += __privateGet(this, _tabElements)[i].offsetWidth;
+    __privateGet(this, _visibilityBreakpoints)[i] = childrenWidth;
+  }
+  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
+};
+_setTabArray = new WeakSet();
+setTabArray_fn = function() {
+  __privateSet(this, _tabElements, this._slottedNodes ? this._slottedNodes : []);
+  __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).call(this);
+};
+_isElementTabLike = new WeakSet();
+isElementTabLike_fn = function(el) {
+  return el instanceof UUITabElement || "active" in el;
 };
 UUITabGroupElement.styles = [
   css`
@@ -215,14 +411,62 @@ UUITabGroupElement.styles = [
       ::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: var(--uui-color-surface,#fff);
+        border-radius: var(--uui-border-radius,3px);
+        box-shadow: var(--uui-shadow-depth-3,0 10px 20px rgba(0,0,0,0.19) , 0 6px 6px rgba(0,0,0,0.23));
+        overflow: hidden;
+      }
+      :host([dropdown-direction='horizontal']) #hidden-tabs-container {
+        flex-direction: row;
+      }
+
+      #more-button {
+        margin-left: auto;
+        position: relative;
+      }
+      #more-button::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: var(--uui-color-current,#f5c1bc);
+        height: 0px;
+        border-radius: 3px 3px 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;
+      }
     `
 ];
+__decorateClass([
+  query("#more-button")
+], UUITabGroupElement.prototype, "_moreButtonElement", 2);
 __decorateClass([
   queryAssignedElements({
     flatten: true,
     selector: "uui-tab, [uui-tab], [role=tab]"
   })
 ], UUITabGroupElement.prototype, "_slottedNodes", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "dropdown-content-direction"
+  })
+], UUITabGroupElement.prototype, "dropdownContentDirection", 2);
 UUITabGroupElement = __decorateClass([
   defineElement("uui-tab-group")
 ], UUITabGroupElement);

package/lib/uui-tab-group.element.d.ts

@@ -1,18 +1,26 @@
 import { LitElement } from 'lit';
+import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-popover-container/lib';
+import '@umbraco-ui/uui-symbol-more/lib';
 /**
  *  @element uui-tab-group
  *  @slot - Default slot for the tab group
  */
 export declare class UUITabGroupElement extends LitElement {
-    static styles: import("lit").CSSResult[];
+    #private;
+    private _moreButtonElement;
     private _slottedNodes?;
-    private _tabElements;
-    private _setTabArray;
-    private _onSlotChange;
-    private _onTabClicked;
-    private _elementIsTabLike;
+    /**
+     * 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 styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/lib/uui-tab.element.d.ts

@@ -12,9 +12,9 @@ declare const UUITabElement_base: (new (...args: any[]) => import("@umbraco-ui/u
  * @cssprop --uui-tab-text-active - Define the tab text active color
  * @cssprop --uui-tab-background - Define the tab group background 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 {
-    static styles: import("lit").CSSResult[];
     /**
      * Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.
      * @type {boolean}
@@ -36,9 +36,17 @@ export declare class UUITabElement extends UUITabElement_base {
      * @default undefined
      */
     target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * 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 styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.4.0",
+  "version": "1.5.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,10 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.4.0"
+    "@umbraco-ui/uui-base": "1.5.0-rc.1",
+    "@umbraco-ui/uui-button": "1.5.0-rc.1",
+    "@umbraco-ui/uui-popover-container": "1.5.0-rc.1",
+    "@umbraco-ui/uui-symbol-more": "1.5.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "09437426b75b875ea93d7ab61b489d3817d81d96"
+  "gitHead": "2ff35a098ed8a3feb8ebed1bf43b4fbb75950d65"
 }