@umbraco-ui/uui-tabs 1.6.0 → 1.7.0-rc.0

package/lib/index.js

@@ -102,7 +102,8 @@ UUITabElement.styles = [
       }
 
       :host(:not([active]):not([disabled])) #button:active {
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
+        box-shadow:
+          inset 0 2px 4px rgba(0, 0, 0, 0.15),
           0 1px 2px rgba(0, 0, 0, 0.05);
       }
 
@@ -139,7 +140,8 @@ UUITabElement.styles = [
         height: 0px;
         width: calc(100% - 15px);
         bottom: 0;
-        transition: opacity ease-in-out var(--transitionDuration),
+        transition:
+          opacity ease-in-out var(--transitionDuration),
           height ease-in-out var(--transitionDuration);
       }
       :host([active][orientation='horizontal']) #button::before {
@@ -154,7 +156,8 @@ UUITabElement.styles = [
         height: calc(100% - 12px);
         width: 0px;
         left: 0;
-        transition: opacity ease-in-out var(--transitionDuration),
+        transition:
+          opacity ease-in-out var(--transitionDuration),
           width ease-in-out var(--transitionDuration);
       }
       :host([active][orientation='vertical']) #button::before {
@@ -235,10 +238,11 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _onResize, onResize_fn, _cleanupTabs, cleanupTabs_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _isElementTabLike, isElementTabLike_fn;
+var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _initialize, initialize_fn, _onResize, onResize_fn, _cleanupTabs, cleanupTabs_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _isElementTabLike, isElementTabLike_fn;
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _initialize);
     __privateAdd(this, _onResize);
     __privateAdd(this, _cleanupTabs);
     __privateAdd(this, _onSlotChange);
@@ -282,12 +286,7 @@ let UUITabGroupElement = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    demandCustomElement(this, "uui-button");
-    demandCustomElement(this, "uui-popover-container");
-    demandCustomElement(this, "uui-symbol-more");
-    __privateGet(this, _resizeObserver).observe(this);
-    if (!this.hasAttribute("role"))
-      this.setAttribute("role", "tablist");
+    __privateMethod(this, _initialize, initialize_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -328,6 +327,16 @@ _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
 _tabResizeObservers = new WeakMap();
 _breakPointCalculationInProgress = new WeakMap();
+_initialize = new WeakSet();
+initialize_fn = async function() {
+  demandCustomElement(this, "uui-button");
+  demandCustomElement(this, "uui-popover-container");
+  demandCustomElement(this, "uui-symbol-more");
+  if (!this.hasAttribute("role"))
+    this.setAttribute("role", "tablist");
+  await this.updateComplete;
+  __privateGet(this, _resizeObserver).observe(this._mainElement);
+};
 _onResize = new WeakSet();
 onResize_fn = function(entries) {
   const gapCSSVar = Number.parseFloat(
@@ -384,8 +393,8 @@ calculateBreakPoints_fn = async function() {
     childrenWidth += gap;
   }
   const tolerance = 2;
-  this.style.maxWidth = childrenWidth - gap + tolerance + "px";
-  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
+  this._mainElement.style.width = childrenWidth - gap + tolerance + "px";
+  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this._mainElement.offsetWidth);
 };
 _setTabArray = new WeakSet();
 setTabArray_fn = function() {
@@ -439,12 +448,15 @@ isElementTabLike_fn = function(el) {
 UUITabGroupElement.styles = [
   css`
       :host {
-        width: 100%;
+        min-width: 0;
+        display: flex;
+        height: 100%;
       }
 
       #main {
         display: flex;
         justify-content: space-between;
+        overflow: hidden;
       }
 
       #grid {
@@ -511,12 +523,16 @@ UUITabGroupElement.styles = [
         height: 0px;
         border-radius: 3px 3px 0 0;
         opacity: 0;
-        transition: opacity ease-in 120ms, height ease-in 120ms;
+        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;
+        transition:
+          opacity 120ms,
+          height ease-out 120ms;
       }
     `
 ];
@@ -526,6 +542,9 @@ __decorateClass([
 __decorateClass([
   query("#popover-container")
 ], UUITabGroupElement.prototype, "_popoverContainerElement", 2);
+__decorateClass([
+  query("#main")
+], UUITabGroupElement.prototype, "_mainElement", 2);
 __decorateClass([
   queryAssignedElements({
     flatten: true,

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

@@ -12,6 +12,7 @@ export declare class UUITabGroupElement extends LitElement {
     #private;
     private _moreButtonElement;
     private _popoverContainerElement;
+    private _mainElement;
     private _slottedNodes?;
     /**
      * Set the flex direction of the content of the dropdown.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.6.0",
+  "version": "1.7.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,13 +30,13 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0",
-    "@umbraco-ui/uui-button": "1.6.0",
-    "@umbraco-ui/uui-popover-container": "1.6.0",
-    "@umbraco-ui/uui-symbol-more": "1.6.0"
+    "@umbraco-ui/uui-base": "1.7.0-rc.0",
+    "@umbraco-ui/uui-button": "1.7.0-rc.0",
+    "@umbraco-ui/uui-popover-container": "1.7.0-rc.0",
+    "@umbraco-ui/uui-symbol-more": "1.7.0-rc.0"
   },
   "scripts": {
-    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
     "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "b06aebbb67ff67c9611a19927ec3ef484edcb1cc"
+  "gitHead": "a7166e62b37b609e74b96821d397c694a5f42458"
 }