@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

package/dist/types/components.d.ts

@@ -88,6 +88,44 @@ export namespace Components {
          */
         "hideUnselected": boolean;
     }
+    /**
+     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+     * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
+     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
+     */
+    interface ZAppHeader {
+        /**
+          * the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+         */
+        "enableOffcanvas": boolean;
+        /**
+          * Enable the search bar.
+         */
+        "enableSearch": boolean;
+        /**
+          * Enable laZ logo.
+         */
+        "enableZLogo": boolean;
+        /**
+          * Url to the search page. Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar. The link will also appear on the sticky header.
+         */
+        "searchPageUrl": string;
+        /**
+          * Placeholder text for the search bar.
+         */
+        "searchPlaceholder": string;
+        /**
+          * Search string for the search bar.
+         */
+        "searchString": string;
+        /**
+          * Stuck mode for the header. You can programmatically set it using an IntersectionObserver.
+         */
+        "stuck": boolean;
+    }
     /**
      * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
      * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
@@ -143,7 +181,7 @@ export namespace Components {
      * Defaults to `--app-header-typography-3-tracking`.
      * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
      */
-    interface ZAppHeader {
+    interface ZAppHeaderDeprecated {
         /**
           * The opening state of the drawer.
          */
@@ -1018,6 +1056,27 @@ export namespace Components {
          */
         "verticalContext": boolean;
     }
+    /**
+     * @cssprop --z-menu-label-color - Color of the label's text.
+     */
+    interface ZMenuDeprecated {
+        /**
+          * Flag to set the active status of the menu.
+         */
+        "active"?: boolean;
+        /**
+          * Flag to set the display mode of the list. If true, the list will be absolutely positioned under the menu label, stacked beneath it otherwise.
+         */
+        "floating"?: boolean;
+        /**
+          * The opening state of the menu.
+         */
+        "open": boolean;
+        /**
+          * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas). A small border is placed under it as a separator from other elements.
+         */
+        "verticalContext": boolean;
+    }
     /**
      * A component to create submenus inside the ZMenu.
      */
@@ -1027,6 +1086,15 @@ export namespace Components {
          */
         "active"?: boolean;
     }
+    /**
+     * A component to create submenus inside the ZMenu.
+     */
+    interface ZMenuSectionDeprecated {
+        /**
+          * Active state
+         */
+        "active"?: boolean;
+    }
     /**
      * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px
      */
@@ -1750,10 +1818,6 @@ export namespace Components {
           * Number of columns that the cell should span.
          */
         "colspan": number;
-        /**
-          * Set a the popover default position.
-         */
-        "defaultPopoverPosition"?: PopoverPosition;
         /**
           * Enables the contextual menu. Can be set to "hover" or "always" to show the button only on cell hover or always. Set a nullish value to hide the menu button.
          */
@@ -1945,6 +2009,10 @@ export interface ZAppHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZAppHeaderElement;
 }
+export interface ZAppHeaderDeprecatedCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZAppHeaderDeprecatedElement;
+}
 export interface ZBookCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZBookCardElement;
@@ -2001,10 +2069,18 @@ export interface ZMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZMenuElement;
 }
+export interface ZMenuDeprecatedCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZMenuDeprecatedElement;
+}
 export interface ZMenuSectionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZMenuSectionElement;
 }
+export interface ZMenuSectionDeprecatedCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZMenuSectionDeprecatedElement;
+}
 export interface ZModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZModalElement;
@@ -2144,6 +2220,31 @@ declare global {
     interface HTMLZAppHeaderElementEventMap {
         "sticking": any;
     }
+    /**
+     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+     * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
+     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
+     */
+    interface HTMLZAppHeaderElement extends Components.ZAppHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZAppHeaderElementEventMap>(type: K, listener: (this: HTMLZAppHeaderElement, ev: ZAppHeaderCustomEvent<HTMLZAppHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZAppHeaderElementEventMap>(type: K, listener: (this: HTMLZAppHeaderElement, ev: ZAppHeaderCustomEvent<HTMLZAppHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLZAppHeaderElement: {
+        prototype: HTMLZAppHeaderElement;
+        new (): HTMLZAppHeaderElement;
+    };
+    interface HTMLZAppHeaderDeprecatedElementEventMap {
+        "sticking": any;
+    }
     /**
      * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
      * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
@@ -2199,19 +2300,19 @@ declare global {
      * Defaults to `--app-header-typography-3-tracking`.
      * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
      */
-    interface HTMLZAppHeaderElement extends Components.ZAppHeader, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLZAppHeaderElementEventMap>(type: K, listener: (this: HTMLZAppHeaderElement, ev: ZAppHeaderCustomEvent<HTMLZAppHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLZAppHeaderDeprecatedElement extends Components.ZAppHeaderDeprecated, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZAppHeaderDeprecatedElementEventMap>(type: K, listener: (this: HTMLZAppHeaderDeprecatedElement, ev: ZAppHeaderDeprecatedCustomEvent<HTMLZAppHeaderDeprecatedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLZAppHeaderElementEventMap>(type: K, listener: (this: HTMLZAppHeaderElement, ev: ZAppHeaderCustomEvent<HTMLZAppHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZAppHeaderDeprecatedElementEventMap>(type: K, listener: (this: HTMLZAppHeaderDeprecatedElement, ev: ZAppHeaderDeprecatedCustomEvent<HTMLZAppHeaderDeprecatedElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLZAppHeaderElement: {
-        prototype: HTMLZAppHeaderElement;
-        new (): HTMLZAppHeaderElement;
+    var HTMLZAppHeaderDeprecatedElement: {
+        prototype: HTMLZAppHeaderDeprecatedElement;
+        new (): HTMLZAppHeaderDeprecatedElement;
     };
     interface HTMLZAriaAlertElement extends Components.ZAriaAlert, HTMLStencilElement {
     }
@@ -2572,6 +2673,27 @@ declare global {
         prototype: HTMLZMenuElement;
         new (): HTMLZMenuElement;
     };
+    interface HTMLZMenuDeprecatedElementEventMap {
+        "opened": any;
+        "closed": any;
+    }
+    /**
+     * @cssprop --z-menu-label-color - Color of the label's text.
+     */
+    interface HTMLZMenuDeprecatedElement extends Components.ZMenuDeprecated, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZMenuDeprecatedElementEventMap>(type: K, listener: (this: HTMLZMenuDeprecatedElement, ev: ZMenuDeprecatedCustomEvent<HTMLZMenuDeprecatedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZMenuDeprecatedElementEventMap>(type: K, listener: (this: HTMLZMenuDeprecatedElement, ev: ZMenuDeprecatedCustomEvent<HTMLZMenuDeprecatedElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLZMenuDeprecatedElement: {
+        prototype: HTMLZMenuDeprecatedElement;
+        new (): HTMLZMenuDeprecatedElement;
+    };
     interface HTMLZMenuSectionElementEventMap {
         "opened": any;
         "closed": any;
@@ -2593,6 +2715,27 @@ declare global {
         prototype: HTMLZMenuSectionElement;
         new (): HTMLZMenuSectionElement;
     };
+    interface HTMLZMenuSectionDeprecatedElementEventMap {
+        "opened": any;
+        "closed": any;
+    }
+    /**
+     * A component to create submenus inside the ZMenu.
+     */
+    interface HTMLZMenuSectionDeprecatedElement extends Components.ZMenuSectionDeprecated, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZMenuSectionDeprecatedElementEventMap>(type: K, listener: (this: HTMLZMenuSectionDeprecatedElement, ev: ZMenuSectionDeprecatedCustomEvent<HTMLZMenuSectionDeprecatedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZMenuSectionDeprecatedElementEventMap>(type: K, listener: (this: HTMLZMenuSectionDeprecatedElement, ev: ZMenuSectionDeprecatedCustomEvent<HTMLZMenuSectionDeprecatedElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLZMenuSectionDeprecatedElement: {
+        prototype: HTMLZMenuSectionDeprecatedElement;
+        new (): HTMLZMenuSectionDeprecatedElement;
+    };
     interface HTMLZModalElementEventMap {
         "modalClose": any;
         "modalHeaderActive": any;
@@ -3156,6 +3299,7 @@ declare global {
         "z-alert": HTMLZAlertElement;
         "z-anchor-navigation": HTMLZAnchorNavigationElement;
         "z-app-header": HTMLZAppHeaderElement;
+        "z-app-header-deprecated": HTMLZAppHeaderDeprecatedElement;
         "z-aria-alert": HTMLZAriaAlertElement;
         "z-avatar": HTMLZAvatarElement;
         "z-book-card": HTMLZBookCardElement;
@@ -3183,7 +3327,9 @@ declare global {
         "z-list-group": HTMLZListGroupElement;
         "z-logo": HTMLZLogoElement;
         "z-menu": HTMLZMenuElement;
+        "z-menu-deprecated": HTMLZMenuDeprecatedElement;
         "z-menu-section": HTMLZMenuSectionElement;
+        "z-menu-section-deprecated": HTMLZMenuSectionDeprecatedElement;
         "z-modal": HTMLZModalElement;
         "z-myz-card": HTMLZMyzCardElement;
         "z-myz-card-alert": HTMLZMyzCardAlertElement;
@@ -3310,6 +3456,48 @@ declare namespace LocalJSX {
          */
         "hideUnselected"?: boolean;
     }
+    /**
+     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+     * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
+     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
+     */
+    interface ZAppHeader {
+        /**
+          * the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+         */
+        "enableOffcanvas"?: boolean;
+        /**
+          * Enable the search bar.
+         */
+        "enableSearch"?: boolean;
+        /**
+          * Enable laZ logo.
+         */
+        "enableZLogo"?: boolean;
+        /**
+          * Emitted when the `stuck` state of the header changes
+         */
+        "onSticking"?: (event: ZAppHeaderCustomEvent<any>) => void;
+        /**
+          * Url to the search page. Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar. The link will also appear on the sticky header.
+         */
+        "searchPageUrl"?: string;
+        /**
+          * Placeholder text for the search bar.
+         */
+        "searchPlaceholder"?: string;
+        /**
+          * Search string for the search bar.
+         */
+        "searchString"?: string;
+        /**
+          * Stuck mode for the header. You can programmatically set it using an IntersectionObserver.
+         */
+        "stuck"?: boolean;
+    }
     /**
      * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
      * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
@@ -3365,7 +3553,7 @@ declare namespace LocalJSX {
      * Defaults to `--app-header-typography-3-tracking`.
      * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
      */
-    interface ZAppHeader {
+    interface ZAppHeaderDeprecated {
         /**
           * The opening state of the drawer.
          */
@@ -3385,7 +3573,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the `stuck` state of the header changes
          */
-        "onSticking"?: (event: ZAppHeaderCustomEvent<any>) => void;
+        "onSticking"?: (event: ZAppHeaderDeprecatedCustomEvent<any>) => void;
         /**
           * Should place an overlay over the hero image. Useful for legibility purpose.
          */
@@ -4320,6 +4508,35 @@ declare namespace LocalJSX {
          */
         "verticalContext"?: boolean;
     }
+    /**
+     * @cssprop --z-menu-label-color - Color of the label's text.
+     */
+    interface ZMenuDeprecated {
+        /**
+          * Flag to set the active status of the menu.
+         */
+        "active"?: boolean;
+        /**
+          * Flag to set the display mode of the list. If true, the list will be absolutely positioned under the menu label, stacked beneath it otherwise.
+         */
+        "floating"?: boolean;
+        /**
+          * The menu has been closed.
+         */
+        "onClosed"?: (event: ZMenuDeprecatedCustomEvent<any>) => void;
+        /**
+          * The menu has been opened.
+         */
+        "onOpened"?: (event: ZMenuDeprecatedCustomEvent<any>) => void;
+        /**
+          * The opening state of the menu.
+         */
+        "open"?: boolean;
+        /**
+          * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas). A small border is placed under it as a separator from other elements.
+         */
+        "verticalContext"?: boolean;
+    }
     /**
      * A component to create submenus inside the ZMenu.
      */
@@ -4337,6 +4554,23 @@ declare namespace LocalJSX {
          */
         "onOpened"?: (event: ZMenuSectionCustomEvent<any>) => void;
     }
+    /**
+     * A component to create submenus inside the ZMenu.
+     */
+    interface ZMenuSectionDeprecated {
+        /**
+          * Active state
+         */
+        "active"?: boolean;
+        /**
+          * The section has been closed.
+         */
+        "onClosed"?: (event: ZMenuSectionDeprecatedCustomEvent<any>) => void;
+        /**
+          * The section has been opened.
+         */
+        "onOpened"?: (event: ZMenuSectionDeprecatedCustomEvent<any>) => void;
+    }
     /**
      * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px
      */
@@ -5128,10 +5362,6 @@ declare namespace LocalJSX {
           * Number of columns that the cell should span.
          */
         "colspan"?: number;
-        /**
-          * Set a the popover default position.
-         */
-        "defaultPopoverPosition"?: PopoverPosition;
         /**
           * Emitted when the value of the `colspan` changes.
          */
@@ -5343,6 +5573,7 @@ declare namespace LocalJSX {
         "z-alert": ZAlert;
         "z-anchor-navigation": ZAnchorNavigation;
         "z-app-header": ZAppHeader;
+        "z-app-header-deprecated": ZAppHeaderDeprecated;
         "z-aria-alert": ZAriaAlert;
         "z-avatar": ZAvatar;
         "z-book-card": ZBookCard;
@@ -5370,7 +5601,9 @@ declare namespace LocalJSX {
         "z-list-group": ZListGroup;
         "z-logo": ZLogo;
         "z-menu": ZMenu;
+        "z-menu-deprecated": ZMenuDeprecated;
         "z-menu-section": ZMenuSection;
+        "z-menu-section-deprecated": ZMenuSectionDeprecated;
         "z-modal": ZModal;
         "z-myz-card": ZMyzCard;
         "z-myz-card-alert": ZMyzCardAlert;
@@ -5449,6 +5682,15 @@ declare module "@stencil/core" {
              * ```
              */
             "z-anchor-navigation": LocalJSX.ZAnchorNavigation & JSXBase.HTMLAttributes<HTMLZAnchorNavigationElement>;
+            /**
+             * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+             * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+             * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
+             * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+             * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+             * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
+             */
+            "z-app-header": LocalJSX.ZAppHeader & JSXBase.HTMLAttributes<HTMLZAppHeaderElement>;
             /**
              * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
              * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
@@ -5504,7 +5746,7 @@ declare module "@stencil/core" {
              * Defaults to `--app-header-typography-3-tracking`.
              * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
              */
-            "z-app-header": LocalJSX.ZAppHeader & JSXBase.HTMLAttributes<HTMLZAppHeaderElement>;
+            "z-app-header-deprecated": LocalJSX.ZAppHeaderDeprecated & JSXBase.HTMLAttributes<HTMLZAppHeaderDeprecatedElement>;
             "z-aria-alert": LocalJSX.ZAriaAlert & JSXBase.HTMLAttributes<HTMLZAriaAlertElement>;
             "z-avatar": LocalJSX.ZAvatar & JSXBase.HTMLAttributes<HTMLZAvatarElement>;
             /**
@@ -5567,10 +5809,18 @@ declare module "@stencil/core" {
              * @cssprop --z-menu-label-color - Color of the label's text.
              */
             "z-menu": LocalJSX.ZMenu & JSXBase.HTMLAttributes<HTMLZMenuElement>;
+            /**
+             * @cssprop --z-menu-label-color - Color of the label's text.
+             */
+            "z-menu-deprecated": LocalJSX.ZMenuDeprecated & JSXBase.HTMLAttributes<HTMLZMenuDeprecatedElement>;
             /**
              * A component to create submenus inside the ZMenu.
              */
             "z-menu-section": LocalJSX.ZMenuSection & JSXBase.HTMLAttributes<HTMLZMenuSectionElement>;
+            /**
+             * A component to create submenus inside the ZMenu.
+             */
+            "z-menu-section-deprecated": LocalJSX.ZMenuSectionDeprecated & JSXBase.HTMLAttributes<HTMLZMenuSectionDeprecatedElement>;
             /**
              * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px
              */

package/dist/web-components-library/index.esm.js

@@ -1,2 +1,2 @@
-import{c as $}from"./p-66d70fb4.js";export{Y as AccordionVariant,o as AlertType,A as AvatarSize,X as BookCardVariant,V as BreadcrumbHomepageVariant,U as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,e as ControlSize,M as CoverHeroContentPosition,J as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,H as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,W as VisibilityCondition,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-3de034cf.js";import"./p-2c886e8b.js";const _={colorFromId:$};export{_ as Utils};
+import{c as $}from"./p-2c184714.js";export{Y as AccordionVariant,o as AlertType,A as AvatarSize,X as BookCardVariant,V as BreadcrumbHomepageVariant,U as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,e as ControlSize,M as CoverHeroContentPosition,J as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,H as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,W as VisibilityCondition,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-6037cdf3.js";import"./p-2c886e8b.js";const _={colorFromId:$};export{_ as Utils};
 //# sourceMappingURL=index.esm.js.map

package/dist/web-components-library/{p-5e0acf57.entry.js → p-054484d4.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as s,a as t,g as o}from"./p-cc3c02fe.js";import{w as f,P as a}from"./p-3de034cf.js";import{t as c}from"./p-2c886e8b.js";const n=".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";const l=n;const r=class{constructor(s){e(this,s);this.removeFile=i(this,"removeFile",7);this.fileNumber=undefined;this.fileName=undefined;this.allowPopover=false;this.popoverVisible=false}removeFileHandler(){this.removeFile.emit({fileName:this.fileName});this.el.remove()}onMouseOver(){this.popoverVisible=true}onMouseLeave(){this.popoverVisible=false}onInteractiveIconClick(){this.removeFileHandler()}componentDidLoad(){var e,i;if(this.elementHasEllipsis()&&window.innerWidth>c){this.allowPopover=true}(i=(e=this.icon)===null||e===void 0?void 0:e.focus)===null||i===void 0?void 0:i.call(e)}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return s(t,{key:"03c2efd6f2abf7ba920eb9ac47f268ade6ec1404"},this.allowPopover&&s("z-popover",{key:"f916e0f4aed0a9c7d2a8ff59ee0a073baff02ad5",open:this.popoverVisible,position:a.AUTO,bindTo:this.chip},s("span",{key:"1f364c21b8bd45ff52c23a40df45ee1684271122",class:"body-5 tooltip-content"},this.ellipsis.innerText)),s("z-chip",{key:"0c69ec654a4fb7f251bdd904ffec476c911e545a",ref:e=>this.chip=e,id:`chip-${this.fileNumber}`,interactiveIcon:"multiply-circled",type:f.DEFAULT},s("span",{key:"b71ea54ee7156bfb324f7d5f2fa71d9b50c167bf",ref:e=>this.ellipsis=e,tabIndex:-1},this.fileName)))}get el(){return o(this)}};r.style=l;export{r as z_file};
-//# sourceMappingURL=p-5e0acf57.entry.js.map
+import{r as e,c as i,h as s,a as t,g as o}from"./p-cfa39bd3.js";import{w as a,P as n}from"./p-6037cdf3.js";import{t as c}from"./p-2c886e8b.js";const f=".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";const l=f;const r=class{constructor(s){e(this,s);this.removeFile=i(this,"removeFile",7);this.fileNumber=undefined;this.fileName=undefined;this.allowPopover=false;this.popoverVisible=false}removeFileHandler(){this.removeFile.emit({fileName:this.fileName});this.el.remove()}onMouseOver(){this.popoverVisible=true}onMouseLeave(){this.popoverVisible=false}onInteractiveIconClick(){this.removeFileHandler()}componentDidLoad(){var e,i;if(this.elementHasEllipsis()&&window.innerWidth>c){this.allowPopover=true}(i=(e=this.icon)===null||e===void 0?void 0:e.focus)===null||i===void 0?void 0:i.call(e)}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return s(t,{key:"fd8490c60c3266c39e2b4fa7b3cc4097da8222cf"},this.allowPopover&&s("z-popover",{key:"af7c9370bdaa644ecfb50e1ae69fd425b1347b36",open:this.popoverVisible,position:n.AUTO,bindTo:this.chip},s("span",{key:"faa8e08ffbae25222396effe24db44e53ccfb892",class:"body-5 tooltip-content"},this.ellipsis.innerText)),s("z-chip",{key:"ed790fdb2b1639e4f44cde4da98daa101a44abb0",ref:e=>this.chip=e,id:`chip-${this.fileNumber}`,interactiveIcon:"multiply-circled",type:a.DEFAULT},s("span",{key:"0bae3bda90db4e3793a22629b30439017e3543a3",ref:e=>this.ellipsis=e,tabIndex:-1},this.fileName)))}get el(){return o(this)}};r.style=l;export{r as z_file};
+//# sourceMappingURL=p-054484d4.entry.js.map

package/dist/web-components-library/{p-bd75bef4.entry.js → p-05e9ae1e.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as a,a as n,g as e}from"./p-cc3c02fe.js";import{N as o,a as s,b as r}from"./p-3de034cf.js";const l='z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-secondary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';const h=l;const c=class{constructor(a){t(this,a);this.selected=i(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=o.HORIZONTAL;this.size=s.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}get direction(){return this.orientation==o.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==o.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=this.orientation===o.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};t.scrollIntoView(Object.assign({behavior:"smooth"},i))}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(r).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.getAttribute("name").replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;a===null||a===void 0?void 0:a.setAttribute("name",n);return}a===null||a===void 0?void 0:a.setAttribute("name",`${n}-filled`);t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===r.RIGHT&&this.orientation==o.HORIZONTAL||t.key===r.DOWN&&this.orientation==o.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===r.LEFT&&this.orientation==o.HORIZONTAL||t.key===r.UP&&this.orientation==o.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(n,{key:"0dfbe739542add5d05e82462f9ca115734f75ab7",class:{"interactive-2":this.size===s.SMALL,"interactive-1":this.size!==s.SMALL},scrollable:this.canNavigate},a("button",{key:"a679c4104ef79c5245a205e634872992ad6b7702",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},a("z-icon",{key:"13b64410e78d66d28b9a2a870535a393b5361f06",name:this.orientation===o.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),a("nav",{key:"ae01aa47ea6620209017d612b3b6e1b0664efcba",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},a("slot",{key:"bd1f92fef8fde67a415964efd61b89d9895192a7"})),a("button",{key:"0b7a9b4ecf5773f576f25468a8f64118b57c4480",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},a("z-icon",{key:"91686040ca32ff9136c6a96ce70ed3ca20a6b753",name:this.orientation===o.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return e(this)}static get watchers(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}}};c.style=h;export{c as z_navigation_tabs};
-//# sourceMappingURL=p-bd75bef4.entry.js.map
+import{r as t,c as i,h as a,a as n,g as e}from"./p-cfa39bd3.js";import{N as o,a as s,b as r}from"./p-6037cdf3.js";const l='z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-secondary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';const c=l;const h=class{constructor(a){t(this,a);this.selected=i(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=o.HORIZONTAL;this.size=s.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}get direction(){return this.orientation==o.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==o.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=this.orientation===o.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};t.scrollIntoView(Object.assign({behavior:"smooth"},i))}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(r).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.getAttribute("name").replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;a===null||a===void 0?void 0:a.setAttribute("name",n);return}a===null||a===void 0?void 0:a.setAttribute("name",`${n}-filled`);t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===r.RIGHT&&this.orientation==o.HORIZONTAL||t.key===r.DOWN&&this.orientation==o.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===r.LEFT&&this.orientation==o.HORIZONTAL||t.key===r.UP&&this.orientation==o.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(n,{key:"16294d384c48cb2380178445630240fcc6f085cc",class:{"interactive-2":this.size===s.SMALL,"interactive-1":this.size!==s.SMALL},scrollable:this.canNavigate},a("button",{key:"98eae832700569a7f2539aa51cee7c07ac2f3815",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},a("z-icon",{key:"21ddd942ac5c9a7cfdf53e1c31788268b7932f03",name:this.orientation===o.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),a("nav",{key:"d2582f956ec466d672bdf43494f96d1b2ee73485",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},a("slot",{key:"3cfbaf5ef02b8964b1b497deef2b8e95b6ef94e0"})),a("button",{key:"6cc204b98252d19cdd79bdf2f9f1824c2f69d559",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},a("z-icon",{key:"7bc36b5cdb865c759e0bb37362a820557e079be4",name:this.orientation===o.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return e(this)}static get watchers(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}}};h.style=c;export{h as z_navigation_tabs};
+//# sourceMappingURL=p-05e9ae1e.entry.js.map