@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { NavigationTabsSizes, NavigationTabsOrientations } from '../../../../beans';
+import { h, Host } from "@stencil/core";
+import { NavigationTabsSize, NavigationTabsOrientation } 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 = NavigationTabsOrientation.HORIZONTAL;
     /**
      * Navigation tabs size.
      */
-    this.size = NavigationTabsSizes.big;
+    this.size = NavigationTabsSize.BIG;
   }
   /**
    * Getter for the direction to check based on current orientation.
    */
   get direction() {
-    return this.orientation == NavigationTabsOrientations.horizontal ? 'Left' : 'Top';
+    return this.orientation == NavigationTabsOrientation.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 == NavigationTabsOrientation.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,10 +105,10 @@ 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 === NavigationTabsSize.SMALL,
+        "interactive-1": this.size !== NavigationTabsSize.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 === NavigationTabsOrientation.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 === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   static get is() { return "z-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -129,13 +129,8 @@ export class ZNavigationTabs {
         "mutable": false,
         "complexType": {
           "original": "NavigationTabsOrientation",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {
-            "NavigationTabsOrientation": {
-              "location": "import",
-              "path": "../../../../beans"
-            }
-          }
+          "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
+          "references": {}
         },
         "required": false,
         "optional": true,
@@ -145,20 +140,15 @@ export class ZNavigationTabs {
         },
         "attribute": "orientation",
         "reflect": true,
-        "defaultValue": "NavigationTabsOrientations.horizontal"
+        "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "NavigationTabsSize",
-          "resolved": "\"big\" | \"small\"",
-          "references": {
-            "NavigationTabsSize": {
-              "location": "import",
-              "path": "../../../../beans"
-            }
-          }
+          "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
+          "references": {}
         },
         "required": false,
         "optional": true,
@@ -168,7 +158,7 @@ export class ZNavigationTabs {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "NavigationTabsSizes.big"
+        "defaultValue": "NavigationTabsSize.BIG"
       }
     };
   }

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);
 }

package/dist/collection/components/navigation/z-app-header/index.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== 'undefined';
+import { h, Host } from "@stencil/core";
+const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 /**
  * @slot title
  * @slot subtitle
@@ -27,7 +27,7 @@ export class ZAppHeader {
      *
      * **Optional**
      */
-    this.flow = 'auto';
+    this.flow = "auto";
     /**
      * The opening state of the drawer.
      */
@@ -36,13 +36,15 @@ export class ZAppHeader {
      * The stucked state of the bar.
      */
     this.stucked = false;
-    this.observer = SUPPORT_INTERSECTION_OBSERVER && new IntersectionObserver(([entry]) => {
-      this.stucked = !entry.isIntersecting;
-    }, {
-      threshold: 0.5
-    });
+    this.observer = SUPPORT_INTERSECTION_OBSERVER &&
+      new IntersectionObserver(([entry]) => {
+        this.stucked = !entry.isIntersecting;
+      }, {
+        threshold: 0.5,
+      });
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
+    this.collectMenuElements.bind(this);
   }
   emitStickingEvent() {
     this.sticking.emit(this.stucked);
@@ -53,8 +55,8 @@ export class ZAppHeader {
   }
   get title() {
     const titleElement = this.hostElement.querySelector('[slot="title"]');
-    if (!titleElement) {
-      return '';
+    if (titleElement === null) {
+      return "";
     }
     return titleElement.textContent.trim();
   }
@@ -66,7 +68,7 @@ export class ZAppHeader {
     return parent;
   }
   collectMenuElements() {
-    const menuElements = this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]');
+    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
     this.menuLength = menuElements.length;
     this.setMenuFloatingMode();
   }
@@ -97,7 +99,7 @@ export class ZAppHeader {
     this.emitStickingEvent();
   }
   setMenuFloatingMode() {
-    if (!this.menuElements) {
+    if (this.menuElements.length === 0) {
       return;
     }
     const elements = this.menuElements;
@@ -107,7 +109,7 @@ export class ZAppHeader {
     }
   }
   render() {
-    return h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => this.container = el }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && h("img", { alt: "", src: this.hero }))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" })), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== 'offcanvas' && h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), this.stucked && h("div", { class: "heading-stucked" }, this.menuLength > 0 && h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" })), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))));
+    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
   }
   openDrawer() {
     this.drawerOpen = true;
@@ -186,7 +188,7 @@ export class ZAppHeader {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'auto'|'stack'|'offcanvas'",
+          "original": "\"auto\" | \"stack\" | \"offcanvas\"",
           "resolved": "\"auto\" | \"offcanvas\" | \"stack\"",
           "references": {}
         },
@@ -198,7 +200,7 @@ export class ZAppHeader {
         },
         "attribute": "flow",
         "reflect": true,
-        "defaultValue": "'auto'"
+        "defaultValue": "\"auto\""
       },
       "drawerOpen": {
         "type": "boolean",