@zanichelli/albe-web-components 5.5.5 → 5.5.6-cs1

package/dist/collection/components/navigation/tabs/z-navigation-tabs/index.js

@@ -1,5 +1,5 @@
-import { Component, Prop, h, Listen, Element, State, Watch, Host } from '@stencil/core';
-import { NavigationTabsSizes, NavigationTabsOrientations } from '../../../../beans';
+import { h, Host } from "@stencil/core";
+import { NavigationTabsSizes, NavigationTabsOrientations } from "../../../../beans";
 /**
  * Navigation tabs component.
  * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
@@ -9,23 +9,23 @@ export class ZNavigationTabs {
     /**
      * Navigation tabs orientation.
      */
-    this.orientation = NavigationTabsOrientations.horizontal;
+    this.orientation = NavigationTabsOrientations.HORIZONTAL;
     /**
      * Navigation tabs size.
      */
-    this.size = NavigationTabsSizes.big;
+    this.size = NavigationTabsSizes.BIG;
   }
   /**
    * Getter for the direction to check based on current orientation.
    */
   get direction() {
-    return this.orientation == NavigationTabsOrientations.horizontal ? 'Left' : 'Top';
+    return this.orientation == NavigationTabsOrientations.HORIZONTAL ? "Left" : "Top";
   }
   /**
    * Getter for the dimension to check based on current orientation.
    */
   get dimension() {
-    return this.orientation == NavigationTabsOrientations.horizontal ? 'Width' : 'Height';
+    return this.orientation == NavigationTabsOrientations.HORIZONTAL ? "Width" : "Height";
   }
   /**
    * Set the `size` prop to all `z-navigation-tab` children.
@@ -33,7 +33,7 @@ export class ZNavigationTabs {
   setChildrenSize() {
     const children = Array.from(this.host.children);
     children.forEach((child) => {
-      child.setAttribute('size', this.size);
+      child.setAttribute("size", this.size);
     });
   }
   /**
@@ -42,7 +42,7 @@ export class ZNavigationTabs {
   setChildrenOrientation() {
     const children = Array.from(this.host.children);
     children.forEach((child) => {
-      child.setAttribute('orientation', this.orientation);
+      child.setAttribute("orientation", this.orientation);
     });
   }
   /**
@@ -61,8 +61,9 @@ export class ZNavigationTabs {
     if (!this.tabsNav) {
       return;
     }
-    this.canNavigateNext = (this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`]) <
-      this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigateNext =
+      this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] <
+        this.tabsNav[`scroll${this.dimension}`];
     this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
   }
   /**
@@ -76,7 +77,7 @@ export class ZNavigationTabs {
     const children = Array.from(this.host.children);
     children.forEach((child) => {
       if (child !== tab) {
-        child.removeAttribute('selected');
+        child.removeAttribute("selected");
       }
     });
   }
@@ -85,8 +86,8 @@ export class ZNavigationTabs {
    */
   navigateBackwards() {
     this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
-      behavior: 'smooth',
+      [this.direction.toLowerCase()]: 0 - this.tabsNav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
     });
   }
   /**
@@ -94,9 +95,8 @@ export class ZNavigationTabs {
    */
   navigateForward() {
     this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] +
-        (this.tabsNav[`client${this.dimension}`] / 2),
-      behavior: 'smooth',
+      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
     });
   }
   componentDidRender() {
@@ -105,100 +105,96 @@ export class ZNavigationTabs {
     this.checkScrollVisible();
   }
   render() {
-    return h(Host, { class: {
-        'interactive-2': this.size === NavigationTabsSizes.small,
-        'interactive-1': this.size !== NavigationTabsSizes.small
-      }, scrollable: this.canNavigate },
-      this.canNavigate && h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev },
-        h("z-icon", { name: this.orientation == NavigationTabsOrientations.horizontal ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })),
-      h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) },
-        h("slot", null)),
-      this.canNavigate && h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext },
-        h("z-icon", { name: this.orientation == NavigationTabsOrientations.horizontal ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
+    return (h(Host, { class: {
+        "interactive-2": this.size === NavigationTabsSizes.SMALL,
+        "interactive-1": this.size !== NavigationTabsSizes.SMALL,
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === NavigationTabsOrientations.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientations.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   static get is() { return "z-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "orientation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "NavigationTabsOrientation",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {
-          "NavigationTabsOrientation": {
-            "location": "import",
-            "path": "../../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Navigation tabs orientation."
-      },
-      "attribute": "orientation",
-      "reflect": true,
-      "defaultValue": "NavigationTabsOrientations.horizontal"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "NavigationTabsSize",
-        "resolved": "\"big\" | \"small\"",
-        "references": {
-          "NavigationTabsSize": {
-            "location": "import",
-            "path": "../../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Navigation tabs size."
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsOrientations",
+          "resolved": "NavigationTabsOrientations.HORIZONTAL | NavigationTabsOrientations.VERTICAL",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation tabs orientation."
+        },
+        "attribute": "orientation",
+        "reflect": true,
+        "defaultValue": "NavigationTabsOrientations.HORIZONTAL"
       },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "NavigationTabsSizes.big"
-    }
-  }; }
-  static get states() { return {
-    "canNavigate": {},
-    "canNavigatePrev": {},
-    "canNavigateNext": {}
-  }; }
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsSizes",
+          "resolved": "NavigationTabsSizes.BIG | NavigationTabsSizes.SMALL",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation tabs size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "NavigationTabsSizes.BIG"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "canNavigate": {},
+      "canNavigatePrev": {},
+      "canNavigateNext": {}
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "size",
-      "methodName": "setChildrenSize"
-    }, {
-      "propName": "orientation",
-      "methodName": "setChildrenOrientation"
-    }, {
-      "propName": "canNavigate",
-      "methodName": "checkScrollEnabled"
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "checkScrollVisible",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "selected",
-      "method": "onTabSelected",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "size",
+        "methodName": "setChildrenSize"
+      }, {
+        "propName": "orientation",
+        "methodName": "setChildrenOrientation"
+      }, {
+        "propName": "canNavigate",
+        "methodName": "checkScrollEnabled"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "checkScrollVisible",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "selected",
+        "method": "onTabSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/navigation/tabs/z-navigation-tabs/styles.css

@@ -1,11 +1,11 @@
 :host {
   position: relative;
+  z-index: 0;
   display: flex;
+  overflow: hidden;
   flex-direction: row;
-  z-index: 0;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-  overflow: hidden;
 }
 
 :host,
@@ -20,24 +20,24 @@
 
 .navigation-button {
   position: absolute;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0;
   padding: 0;
-  background: var(--color-white);
   border: none;
-  outline: none;
-  fill: var(--color-primary01);
+  margin: 0;
+  background: var(--color-white);
   border-radius: var(--border-no-radius);
+  box-shadow: 0 0 4px 1px rgb(66 69 72 / 40%);
   cursor: pointer;
-  z-index: 1;
-  box-shadow: 0px 0px 4px 1px rgb(66, 69, 72, 0.40);
+  fill: var(--color-primary01);
+  outline: none;
 }
 
 .navigation-button:focus:focus-visible {
-  fill: var(--color-primary01);
   box-shadow: inset var(--shadow-focus-primary);
+  fill: var(--color-primary01);
 }
 
 .navigation-button:disabled {
@@ -46,59 +46,59 @@
 
 nav {
   display: flex;
+  overflow: auto;
   align-items: center;
   justify-content: flex-start;
-  overflow: auto;
   scroll-behavior: smooth;
 
   /* hide scrollbar in Firefox */
   scrollbar-width: none;
 }
 
-:host([orientation='horizontal']) nav {
+:host([orientation="horizontal"]) nav {
   width: 100%;
 }
 
-:host([orientation='horizontal']) .navigation-button {
+:host([orientation="horizontal"]) .navigation-button {
   top: 0;
-  height: 100%;
   width: calc(var(--space-unit) * 4);
+  height: 100%;
 }
 
-:host([orientation='horizontal']) .navigation-button:first-child {
+:host([orientation="horizontal"]) .navigation-button:first-child {
   left: 0;
 }
 
-:host([orientation='horizontal']) .navigation-button:last-child {
+:host([orientation="horizontal"]) .navigation-button:last-child {
   right: 0;
 }
 
 /* Orientation vertical */
-:host([orientation='vertical']) {
-  flex-direction: column;
+:host([orientation="vertical"]) {
   width: fit-content;
+  flex-direction: column;
 }
 
-:host([orientation='vertical']) nav {
+:host([orientation="vertical"]) nav {
+  height: 100%;
   flex-direction: column;
   align-items: stretch;
-  height: 100%;
 }
 
-:host([orientation='vertical']) .navigation-button {
+:host([orientation="vertical"]) .navigation-button {
   left: 0;
   width: 100%;
   height: calc(var(--space-unit) * 4);
 }
 
-:host([orientation='vertical']) .navigation-button:first-child {
+:host([orientation="vertical"]) .navigation-button:first-child {
   top: 0;
 }
 
-:host([orientation='vertical']) .navigation-button:last-child {
+:host([orientation="vertical"]) .navigation-button:last-child {
   bottom: 0;
 }
 
-:host([size='small'][orientation='vertical']) .navigation-button {
+:host([size="small"][orientation="vertical"]) .navigation-button {
   height: calc(var(--space-unit) * 4);
 }