@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

package/dist/collection/components/z-input-message/index.js

@@ -6,9 +6,6 @@ export class ZInputMessage {
             error: "multiply-circled",
             warning: "exclamation-circle",
         };
-        this.message = undefined;
-        this.status = undefined;
-        this.disabled = undefined;
         this.statusRole = {};
     }
     onMessageChange() {
@@ -18,7 +15,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: 'd3c9ebc08047c7dda297e667f0923025a123c218' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'fd12602621b437c130e82fe747e422fc98b3a87e', name: this.statusIcons[this.status] }), h("span", { key: 'b3af731acdef8e2c890789f158d9db68e426f798', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: '993f9d89fa3b3aaf359a203c3d16d5f512081513' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: '048a39f0dd23a8343d3fa3f61bf05081d9bb09fa', name: this.statusIcons[this.status] }), h("span", { key: '19809d4c387a0ed73d8af548aa89e40f3dc4831e', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }
@@ -48,8 +45,10 @@ export class ZInputMessage {
                     "tags": [],
                     "text": "input helper message"
                 },
-                "attribute": "message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
             },
             "status": {
                 "type": "string",
@@ -61,7 +60,8 @@ export class ZInputMessage {
                         "InputStatus": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputStatus"
+                            "id": "src/beans/index.tsx::InputStatus",
+                            "referenceLocation": "InputStatus"
                         }
                     }
                 },
@@ -71,8 +71,10 @@ export class ZInputMessage {
                     "tags": [],
                     "text": "input status (optional)"
                 },
-                "attribute": "status",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status"
             },
             "disabled": {
                 "type": "boolean",
@@ -88,8 +90,10 @@ export class ZInputMessage {
                     "tags": [],
                     "text": "input disabled status (optional)"
                 },
-                "attribute": "disabled",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled"
             }
         };
     }
@@ -108,4 +112,3 @@ export class ZInputMessage {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-input-message/index.stories.js

@@ -34,4 +34,3 @@ export const Default = {
     ></z-input-message>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-logo/index.js

@@ -1,13 +1,5 @@
 import { Host, h } from "@stencil/core";
 export class ZLogo {
-    constructor() {
-        this.width = undefined;
-        this.height = undefined;
-        this.imageAlt = undefined;
-        this.link = undefined;
-        this.targetBlank = undefined;
-        this.mobileLogo = undefined;
-    }
     render() {
         const style = {};
         if (this.width) {
@@ -16,7 +8,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '75a515faadd75ea3f21ae80ca6a4f579223ad1cd', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '649a64cb6a489dd102212f138c42446b3b1dbd79', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -46,8 +38,10 @@ export class ZLogo {
                     "tags": [],
                     "text": "image width"
                 },
-                "attribute": "width",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             },
             "height": {
                 "type": "number",
@@ -63,8 +57,10 @@ export class ZLogo {
                     "tags": [],
                     "text": "image height"
                 },
-                "attribute": "height",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
             },
             "imageAlt": {
                 "type": "string",
@@ -80,8 +76,10 @@ export class ZLogo {
                     "tags": [],
                     "text": "alternative image text"
                 },
-                "attribute": "image-alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt"
             },
             "link": {
                 "type": "string",
@@ -97,8 +95,10 @@ export class ZLogo {
                     "tags": [],
                     "text": "link url (optional)"
                 },
-                "attribute": "link",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link"
             },
             "targetBlank": {
                 "type": "boolean",
@@ -114,8 +114,10 @@ export class ZLogo {
                     "tags": [],
                     "text": "link target: true means _blank, false means _self"
                 },
-                "attribute": "target-blank",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-blank"
             },
             "mobileLogo": {
                 "type": "boolean",
@@ -131,10 +133,11 @@ export class ZLogo {
                     "tags": [],
                     "text": "if true, the mobile logo is displayed, otherwise the desktop one"
                 },
-                "attribute": "mobile-logo",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-logo"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-logo/index.stories.js

@@ -23,4 +23,3 @@ export const Default = {
       mobile-logo="${args.mobileLogo}"
     ></z-logo>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-menu/index.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { KeyboardCode } from "../../beans";
 import { containsElement } from "../../utils/utils";
 const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";
@@ -277,14 +277,25 @@ export class ZMenu {
         }
     }
     constructor() {
-        this.items = [];
-        this.active = undefined;
+        /**
+         * 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.
+         */
         this.floating = true;
+        /** The opening state of the menu. */
         this.open = false;
+        /**
+         * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).
+         * A small border is placed under it as a separator from other elements.
+         */
         this.verticalContext = false;
+        /**
+         * Tabindex value to set on the menu label.
+         * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).
+         */
         this.htmlTabindex = -1;
-        this.hasHeader = undefined;
-        this.hasContent = undefined;
+        this.items = [];
         this.toggle = this.toggle.bind(this);
         this.checkContent = this.checkContent.bind(this);
         this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
@@ -330,8 +341,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Flag to set the active status of the menu."
                 },
-                "attribute": "active",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
             },
             "floating": {
                 "type": "boolean",
@@ -347,8 +360,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
                 },
-                "attribute": "floating",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "floating",
                 "defaultValue": "true"
             },
             "open": {
@@ -365,8 +380,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "The opening state of the menu."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "verticalContext": {
@@ -383,8 +400,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
                 },
-                "attribute": "vertical-context",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "vertical-context",
                 "defaultValue": "false"
             },
             "htmlTabindex": {
@@ -401,8 +420,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Tabindex value to set on the menu label.\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader)."
                 },
-                "attribute": "html-tabindex",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-tabindex",
                 "defaultValue": "-1"
             }
         };
@@ -514,4 +535,3 @@ export class ZMenu {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-menu/index.stories.js

@@ -120,4 +120,3 @@ export const ActiveWithoutItems = {
     </z-menu>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-menu-section/index.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { KeyboardCode } from "../../beans";
 /**
  * A component to create submenus inside the ZMenu.
@@ -158,11 +158,11 @@ export class ZMenuSection {
         }
     }
     constructor() {
-        this.active = undefined;
+        /**
+         * Tabindex value to set on the label button.
+         * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).
+         */
         this.htmlTabindex = -1;
-        this.open = undefined;
-        this.hasItems = undefined;
-        this.items = undefined;
         this.toggle = this.toggle.bind(this);
         this.onItemsChange = this.onItemsChange.bind(this);
         this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '4dce34f277ab3c8c41171a15a02fd174c45742cd', open: this.open }, h("button", { key: 'b6c535e87dbb5af8808d7a19556ad116cbcca72b', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'fbbba483ca5fe6d45440c01a89f061565ce641aa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'b4c67b7cada94580b4f5853aaa8cbb9818bece74', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '711c085b5d74affb2c23ebd1acdd774b5903e7e5', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'a2fe12f235f6b23a96f2bd3a8a18f3a095fcff2d', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '4e6388d5919ca9010c78ef35df6b1c0b807d2dd6', open: this.open }, h("button", { key: '4093e9a7ce5cb5cf63ca7012bb44c7b49b638e90', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '0c88383d5be4c81aee5a78f89e4706a6b167dccb', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'd32c9dc28048a6d7441075da41cb2f255e5bdc73', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '0c24a7122314391262e640b440f87dce632eb2f3', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'fe79aa30aaa7d3a92621c6725e4d0ddca604726e', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }
@@ -204,8 +204,10 @@ export class ZMenuSection {
                     "tags": [],
                     "text": "Active state"
                 },
-                "attribute": "active",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
             },
             "htmlTabindex": {
                 "type": "number",
@@ -221,8 +223,10 @@ export class ZMenuSection {
                     "tags": [],
                     "text": "Tabindex value to set on the label button.\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu)."
                 },
-                "attribute": "html-tabindex",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-tabindex",
                 "defaultValue": "-1"
             },
             "open": {
@@ -239,8 +243,10 @@ export class ZMenuSection {
                     "tags": [],
                     "text": "The opening state of the section."
                 },
-                "attribute": "open",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
             }
         };
     }
@@ -341,4 +347,3 @@ export class ZMenuSection {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-menu-section/index.stories.js

@@ -38,4 +38,3 @@ export const WithoutItems = {
     </z-menu-section>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-modal/index.js

@@ -9,13 +9,15 @@ const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [conte
  */
 export class ZModal {
     constructor() {
-        this.modalid = undefined;
-        this.modaltitle = undefined;
-        this.modalsubtitle = undefined;
+        /** aria-label for close button (optional) */
         this.closeButtonLabel = "chiudi modale";
+        /** add role "alertdialog" to dialog (optional, default is false) */
         this.alertdialog = false;
+        /** if true, the modal is closable (optional, default is true) */
         this.closable = true;
+        /** if true, the modal can scroll inside, if false the viewport can scroll */
         this.scrollInside = true;
+        /** if true, the page scroll is locked when the modal is open (optional, default is true) */
         this.lockPageScroll = true;
     }
     emitModalClose() {
@@ -123,16 +125,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'ff8e8cf9ce5684a8ca081ab2aec3ef1c8824b6ae', class: {
+        return (h("dialog", { key: 'd958597dcd030d9d837aa27e3d951e58c76d1872', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '94c33c53083aafc4607fcb4b9c099c7d02c035b4', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'f2d88dcae992749e9b26053f58b133ea11f42345', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '0e17ec7ccaa1376b9cdabde14355fc6dcbec4f26', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '09a5a59ca386289939c61e29f79d201454d41165' }, this.modaltitle && h("h1", { key: '0cf7deea5e044b358882ae0e7bfe4502de1318f5', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '2fde62ccc507d999ccd4fd83aa369128e97b9b0c', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'e778555f2d7d88a965e454ee1231004da8d293e7', class: {
+            }, id: this.modalid }, h("header", { key: 'aee9e10e48814e98b334234742b8d9fddc8bd5b4', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '8f8cb63de53e06aba8c24aa775e7462d5c982cab' }, this.modaltitle && h("h1", { key: '7665e53dbf1c7ba2eb9bedc0df36e3b959407f36', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'd069b4cd21e388262db4734e5f19b27b14381d98', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'b7e149a290a5261aaecd47ddc1d53498c182c5dd', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: 'acee4bb3444264df0b26a465c52f2ee282ccca76', name: "modalContent" }))), h("div", { key: '9abb8e64380030960d5669bec37a7f2f64d78693', class: {
+            }, id: "modal-content" }, h("slot", { key: '3b5126b69ec95efe151a424edc24111978a22a5d', name: "modalContent" }))), h("div", { key: 'cd760b0fdb273c8b2166c05834127955c12c6556', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
@@ -168,8 +170,10 @@ export class ZModal {
                     "tags": [],
                     "text": "unique id"
                 },
-                "attribute": "modalid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modalid"
             },
             "modaltitle": {
                 "type": "string",
@@ -185,8 +189,10 @@ export class ZModal {
                     "tags": [],
                     "text": "title text (optional)"
                 },
-                "attribute": "modaltitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modaltitle"
             },
             "modalsubtitle": {
                 "type": "string",
@@ -202,8 +208,10 @@ export class ZModal {
                     "tags": [],
                     "text": "subtitle (optional)"
                 },
-                "attribute": "modalsubtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modalsubtitle"
             },
             "closeButtonLabel": {
                 "type": "string",
@@ -219,8 +227,10 @@ export class ZModal {
                     "tags": [],
                     "text": "aria-label for close button (optional)"
                 },
-                "attribute": "close-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "close-button-label",
                 "defaultValue": "\"chiudi modale\""
             },
             "alertdialog": {
@@ -237,8 +247,10 @@ export class ZModal {
                     "tags": [],
                     "text": "add role \"alertdialog\" to dialog (optional, default is false)"
                 },
-                "attribute": "alertdialog",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "alertdialog",
                 "defaultValue": "false"
             },
             "closable": {
@@ -255,8 +267,10 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the modal is closable (optional, default is true)"
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             },
             "scrollInside": {
@@ -273,8 +287,10 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the modal can scroll inside, if false the viewport can scroll"
                 },
-                "attribute": "scroll-inside",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "scroll-inside",
                 "defaultValue": "true"
             },
             "lockPageScroll": {
@@ -291,8 +307,10 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the page scroll is locked when the modal is open (optional, default is true)"
                 },
-                "attribute": "lock-page-scroll",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "lock-page-scroll",
                 "defaultValue": "true"
             }
         };
@@ -394,4 +412,3 @@ export class ZModal {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-modal/index.stories.js

@@ -199,4 +199,3 @@ export const LongText = {
     <z-button onclick="openZModal()">apri modale</z-button>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
 /**
  * Navigation tabs component.
@@ -10,16 +10,27 @@ import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabs
 export class ZNavigationTabs {
     constructor() {
         /**
-         * Index of the last tab that held focus.
+         * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
          */
-        this.focusedTab = undefined;
         this.ariaLabel = "";
+        /**
+         * Navigation tabs orientation.
+         */
         this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        /**
+         * Navigation tabs size.
+         */
         this.size = NavigationTabsSize.BIG;
+        /**
+         * Index of the selected tab.
+         * Useful to programmatically select a tab.
+         * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
+         */
         this.selectedTab = undefined;
-        this.canNavigate = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
+        /**
+         * Index of the last tab that held focus.
+         */
+        this.focusedTab = undefined;
     }
     /**
      * Getter for the direction to check based on current orientation.
@@ -221,10 +232,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
+        return (h(Host, { key: '761584de624112312c9be881390dac16efd76e80', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '450c0b481e8d776a079244036702521c772a385a', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '354b37e5367bc03ba1d2551793c62c932b0eb5cb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ca1996b8e92beecacb4ce6a9446efa7478f93d79', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '7f0f849a6d5e898c246efe58b4582e6c7320fb48' })), h("button", { key: 'cb2beffc86bfbac8f196cc783648a48020021270', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {
@@ -253,8 +264,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Set `aria-label` attribute to the internal `<nav>` element with `tablist` role."
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "orientation": {
@@ -267,7 +280,8 @@ export class ZNavigationTabs {
                         "NavigationTabsOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsOrientation"
+                            "id": "src/beans/index.tsx::NavigationTabsOrientation",
+                            "referenceLocation": "NavigationTabsOrientation"
                         }
                     }
                 },
@@ -277,8 +291,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs orientation."
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "orientation",
                 "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
             },
             "size": {
@@ -291,7 +307,8 @@ export class ZNavigationTabs {
                         "NavigationTabsSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsSize"
+                            "id": "src/beans/index.tsx::NavigationTabsSize",
+                            "referenceLocation": "NavigationTabsSize"
                         }
                     }
                 },
@@ -301,8 +318,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "NavigationTabsSize.BIG"
             },
             "selectedTab": {
@@ -319,8 +338,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Index of the selected tab.\nUseful to programmatically select a tab.\nThe tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab."
                 },
-                "attribute": "selected-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected-tab",
                 "defaultValue": "undefined"
             }
         };
@@ -388,4 +409,3 @@ export class ZNavigationTabs {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -188,4 +188,3 @@ export const Tabpanels = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map