@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-rc1

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

@@ -17,6 +17,8 @@ const StoryMeta = {
         "--app-header-content-max-width": "100%",
         "enableSearch": false,
         "searchPageUrl": "",
+        "searchPlaceholder": "Digita qui quello che vuoi",
+        "searchButtonLabel": "Cliccami",
         "enableZLogo": false,
         "enableOffcanvas": false,
     },
@@ -98,7 +100,7 @@ const menuTemplate = () => {
 export const Title = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -113,7 +115,7 @@ export const Title = {
 export const ProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -132,7 +134,7 @@ export const ProductLogo = {
 export const TopTitle = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo"],
+            exclude: ["enableOffcanvas", "enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -147,7 +149,7 @@ export const TopTitle = {
 export const TopTitleWithProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo"],
+            exclude: ["enableOffcanvas", "enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -167,7 +169,7 @@ export const TopTitleWithProductLogo = {
 export const CustomMenuButton = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -183,7 +185,7 @@ export const CustomMenuButton = {
 export const MenuWithTopTitle = {
     parameters: {
         controls: {
-            exclude: ["enableZLogo"],
+            exclude: ["enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -200,7 +202,7 @@ export const MenuWithTopTitle = {
 export const MenuWithTopTitleAndProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableZLogo"],
+            exclude: ["enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -222,7 +224,14 @@ export const MenuWithTopTitleAndProductLogo = {
 export const LongTitle = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo", "enableSearch", "searchPageUrl"],
+            exclude: [
+                "enableOffcanvas",
+                "enableZLogo",
+                "enableSearch",
+                "searchPageUrl",
+                "searchPlaceholder",
+                "searchButtonLabel",
+            ],
         },
     },
     render: (args) => html `<z-app-header style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}">
@@ -235,6 +244,11 @@ export const OffcanvasMenu = {
     args: {
         enableOffcanvas: true,
     },
+    parameters: {
+        controls: {
+            exclude: ["searchPlaceholder", "searchButtonLabel"],
+        },
+    },
     render: (args) => html `<z-app-header
       .enableOffcanvas=${args.enableOffcanvas}
       .enableSearch=${args.enableSearch}
@@ -261,7 +275,7 @@ export const Stuck = {
             },
         },
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -292,6 +306,8 @@ export const SearchPageButton = {
     render: (args) => html `<z-app-header
       enable-search
       .enableZLogo=${args.enableZLogo}
+      .searchPlaceholder=${args.searchPlaceholder}
+      .searchButtonLabel=${args.searchButtonLabel}
       search-page-url="https://www.zanichelli.it"
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >
@@ -300,4 +316,3 @@ export const SearchPageButton = {
       ${menuTemplate()}
     </z-app-header>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-aria-alert/index.js

@@ -2,10 +2,11 @@ import { Host, h } from "@stencil/core";
 import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
     constructor() {
+        /** Aria live mode */
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '14f0e24e89aba53c3ef6147cc371f3123f5ff688', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '1e1f8ef102be9d3f3302059f74e170c43158855b' })));
+        return (h(Host, { key: '13857c631b48af312fa399d224dd299d24ad7026', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b5f4501e8230e2d669eb24d431a39e58232eab20' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {
@@ -20,7 +21,8 @@ export class ZAriaAlert {
                         "ZAriaAlertMode": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ZAriaAlertMode"
+                            "id": "src/beans/index.tsx::ZAriaAlertMode",
+                            "referenceLocation": "ZAriaAlertMode"
                         }
                     }
                 },
@@ -30,11 +32,12 @@ export class ZAriaAlert {
                     "tags": [],
                     "text": "Aria live mode"
                 },
-                "attribute": "mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode",
                 "defaultValue": "ZAriaAlertMode.POLITE"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-aria-alert/index.stories.js

@@ -73,4 +73,3 @@ export const VisuallyHidden = {
         </z-visually-hidden>
       </div>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -3,11 +3,12 @@ import { AvatarSize } from "../../beans";
 export class ZAvatar {
     constructor() {
         var _a, _b;
+        /** [optional] Avatar size */
         this.size = AvatarSize.MEDIUM;
-        this.text = undefined;
+        /** [optional] Avatar text color */
         this.textColor = "color-white";
+        /** [optional] Avatar background color */
         this.backgroundColor = "gray700";
-        this.image = undefined;
         if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             console.warn("z-avatar must contain at least one prop between text and image");
         }
@@ -24,10 +25,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'dc2adbb87d2c5f77e364434c7567612e0ad2328d', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '0193c1b81b0b8770c8bd1f807d128a110e6bdce9', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '3fe07d541e5afe7116066e8e18bdaa844d06b170' }, this.text.substring(0, 2)), this.image && (h("img", { key: '8e4154861822c5811f8dbe561f9ae01b88d5329e', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'c14637da56b4861d00a40d3b976293b3d9580dab' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'bfda459b40de8ece37f6fb3457d9b90d2986b7f0', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -53,7 +54,8 @@ export class ZAvatar {
                         "AvatarSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::AvatarSize"
+                            "id": "src/beans/index.tsx::AvatarSize",
+                            "referenceLocation": "AvatarSize"
                         }
                     }
                 },
@@ -63,8 +65,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar size"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "AvatarSize.MEDIUM"
             },
             "text": {
@@ -81,8 +85,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar text"
                 },
-                "attribute": "text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
             },
             "textColor": {
                 "type": "string",
@@ -98,8 +104,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar text color"
                 },
-                "attribute": "text-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "text-color",
                 "defaultValue": "\"color-white\""
             },
             "backgroundColor": {
@@ -116,8 +124,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar background color"
                 },
-                "attribute": "background-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "background-color",
                 "defaultValue": "\"gray700\""
             },
             "image": {
@@ -134,10 +144,11 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar image"
                 },
-                "attribute": "image",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

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

package/dist/collection/components/z-book-cover/index.js

@@ -14,14 +14,14 @@ import defaultFallbackCover from "../../assets/images/png/placeholder-cover.png"
  */
 export class ZBookCover {
     constructor() {
-        this.cover = undefined;
-        this.fallbackCover = undefined;
+        /** Whether to show a stack of covers to represent multiple books. */
         this.multiple = false;
+        /** Whether to apply a border around the cover image (always applied when `multiple` is enabled). */
         this.bordered = false;
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cb9ca394ffb718b1ee17b30de51d1ef4d18bb284' }, this.multiple && (h(Fragment, { key: 'd4dc53f421ea3ca6b10c2a5e2462eb650788d0a1' }, h("div", { key: 'fd2f7bb51d5f9d1e7d56b09826b699cbc31a6e9f', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '9a6330bc9f4475779b202dcb243b39e94a0b3d93', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '98e5002bfdc0bd0de7d8099e6e492cd6c6ad1d50', class: "cover-container" }, h("img", { key: 'a2ade090738ddfc7997bfd3b398714cd030b94bd', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '903b917bb54fe41da063606f2848390b168e3ccd', name: "coverOverlay" }))));
+        return (h(Host, { key: '2d26511d2f6c57adf2b20c0a98b86b5c18ca3b55' }, this.multiple && (h(Fragment, { key: '79279147bd5526ec381ee54681e70f2601f7d606' }, h("div", { key: 'a58d293a70ae353b24deda1917ba06b46cd6cb69', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '34496473686299a655126cd1222d1ae88eadada8', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: 'd3ffeff92bfcb9a4cfc8a1d250e03bcbb8de8aa1', class: "cover-container" }, h("img", { key: '9e05370d50d32cdcf7c0ffed6f0c9db11219b393', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: 'dc7b2f10a9762234f43cd0857bbd6471f1d061e8', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }
@@ -51,8 +51,10 @@ export class ZBookCover {
                     "tags": [],
                     "text": "URL of the cover image."
                 },
-                "attribute": "cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover"
             },
             "fallbackCover": {
                 "type": "string",
@@ -68,8 +70,10 @@ export class ZBookCover {
                     "tags": [],
                     "text": "URL of the fallback cover image."
                 },
-                "attribute": "fallback-cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-cover"
             },
             "multiple": {
                 "type": "boolean",
@@ -85,8 +89,10 @@ export class ZBookCover {
                     "tags": [],
                     "text": "Whether to show a stack of covers to represent multiple books."
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "multiple",
                 "defaultValue": "false"
             },
             "bordered": {
@@ -103,11 +109,12 @@ export class ZBookCover {
                     "tags": [],
                     "text": "Whether to apply a border around the cover image (always applied when `multiple` is enabled)."
                 },
-                "attribute": "bordered",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "bordered",
                 "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-book-cover/index.stories.js

@@ -28,4 +28,3 @@ export const Default = {
     })}
     ></z-book-cover>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -1,20 +1,26 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { BreadcrumbHomepageVariant, BreadcrumbPathStyle, Device, KeyboardCode, ListSize, PopoverPosition, } from "../../beans";
 import { getDevice, handleKeyboardSubmit } from "../../utils/utils";
 export class ZBreadcrumb {
     constructor() {
-        this.collapsedElements = [];
-        this.currentIndex = 0;
-        this.truncatePosition = null;
+        /** [optional] Sets the path style */
         this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
+        /** [optional] Variant of first node */
         this.homepageVariant = BreadcrumbHomepageVariant.ICON;
+        /** [optional] Sets max number of element to show */
         this.maxNodesToShow = 5;
+        /** [optional] Controls the behaviour on <a> tag click/enter */
         this.preventFollowUrl = false;
+        /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
         this.overflowMenuItemRows = 0;
+        /** [optional] Sets the maximun number of chars per single node */
         this.truncateChar = 30;
-        this.viewPortWidth = undefined;
+        /** Detect whether the length of the nodes shown exceeds the container length */
         this.hasOverflow = false;
         this.popoverEllipsisOpen = false;
+        this.collapsedElements = [];
+        this.currentIndex = 0;
+        this.truncatePosition = null;
     }
     handleResize() {
         this.viewPortWidth = getDevice();
@@ -124,7 +130,7 @@ export class ZBreadcrumb {
                 "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
             }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === BreadcrumbHomepageVariant.ICON
                 ? `<z-icon name="home" />`
-                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     togglePopover() {
         if (!this.collapsedElementsRef.open) {
@@ -169,7 +175,7 @@ export class ZBreadcrumb {
                 setTimeout(() => {
                     this.anchorElements[0].focus();
                 }, 100);
-            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     renderMobileItems() {
         // show only the second to last element
@@ -195,14 +201,14 @@ export class ZBreadcrumb {
                     if (item.hasTooltip) {
                         this.popoverEllipsisOpen = false;
                     }
-                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
+                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))))),
         ];
     }
     render() {
-        return (h(Host, { key: '0033a685e96e73ad2f8be9a47a6967177c4c0506', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'bddeff377a61b25a391791cd5114e64a3499fbeb', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '78ee363186910bdb6563e459cac4958a4a5a1862', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ea14aa3cc66e2b925b859c48f234ac4c19504191', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '14f0af6e35def828015eea1f2e3960b7345a08ef' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '5b15b47dbcadf31f3a933156a29e4c08f39df662' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -228,7 +234,8 @@ export class ZBreadcrumb {
                         "BreadcrumbPathStyle": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::BreadcrumbPathStyle"
+                            "id": "src/beans/index.tsx::BreadcrumbPathStyle",
+                            "referenceLocation": "BreadcrumbPathStyle"
                         }
                     }
                 },
@@ -238,8 +245,10 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets the path style"
                 },
-                "attribute": "path-style",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "path-style",
                 "defaultValue": "BreadcrumbPathStyle.UNDERLINED"
             },
             "homepageVariant": {
@@ -252,7 +261,8 @@ export class ZBreadcrumb {
                         "BreadcrumbHomepageVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::BreadcrumbHomepageVariant"
+                            "id": "src/beans/index.tsx::BreadcrumbHomepageVariant",
+                            "referenceLocation": "BreadcrumbHomepageVariant"
                         }
                     }
                 },
@@ -262,8 +272,10 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Variant of first node"
                 },
-                "attribute": "homepage-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "homepage-variant",
                 "defaultValue": "BreadcrumbHomepageVariant.ICON"
             },
             "maxNodesToShow": {
@@ -280,8 +292,10 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets max number of element to show"
                 },
-                "attribute": "max-nodes-to-show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "max-nodes-to-show",
                 "defaultValue": "5"
             },
             "preventFollowUrl": {
@@ -298,8 +312,10 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Controls the behaviour on <a> tag click/enter"
                 },
-                "attribute": "prevent-follow-url",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "prevent-follow-url",
                 "defaultValue": "false"
             },
             "overflowMenuItemRows": {
@@ -316,8 +332,10 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets max number of row for each path inside the popover. Zero equals unlimited"
                 },
-                "attribute": "overflow-menu-item-rows",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "overflow-menu-item-rows",
                 "defaultValue": "0"
             },
             "truncateChar": {
@@ -334,8 +352,10 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets the maximun number of chars per single node"
                 },
-                "attribute": "truncate-char",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "truncate-char",
                 "defaultValue": "30"
             }
         };
@@ -365,7 +385,8 @@ export class ZBreadcrumb {
                         "BreadcrumbPath": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::BreadcrumbPath"
+                            "id": "src/beans/index.tsx::BreadcrumbPath",
+                            "referenceLocation": "BreadcrumbPath"
                         }
                     }
                 }
@@ -391,4 +412,3 @@ export class ZBreadcrumb {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

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