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

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: '84c8968de32dd42b1c186c3e21ef455ed3419b1b', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'a33b0ec178cf876482c3c598be9b08f3af192e74', 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: 'b73a28050ec43c5441b675b497236ae0210b6657' }, 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-button/index.js

@@ -5,26 +5,35 @@ import { ButtonType, ButtonVariant, ControlSize, IconPosition } from "../../bean
  */
 export class ZButton {
     constructor() {
+        /** defines a string value that labels the internal interactive element. Used for accessibility. */
         this.ariaLabel = undefined;
+        /**
+         * Use `htmlrole` instead.
+         * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
+         */
         this.role = "";
-        this.htmlrole = undefined;
-        this.href = undefined;
-        this.target = undefined;
-        this.htmlid = undefined;
-        this.name = undefined;
+        /** HTML button disabled attribute. */
         this.disabled = false;
+        /** HTML button type attribute. */
         this.type = ButtonType.BUTTON;
+        /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
         this.variant = ButtonVariant.PRIMARY;
-        this.icon = undefined;
+        /** the button icon position. Defaults to `left` */
         this.iconPosition = IconPosition.LEFT;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
+        this.hasText = false;
     }
-    getAttributes() {
+    componentWillLoad() {
+        var _a;
+        this.hasText = !!((_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+    }
+    get attributes() {
         return {
             id: this.htmlid,
             class: {
                 "z-button--container": true,
-                "z-button--has-text": !!this.hostElement.textContent.trim(),
+                "z-button--has-text": this.hasText,
             },
         };
     }
@@ -32,10 +41,13 @@ export class ZButton {
         return this.icon && h("z-icon", { name: this.icon });
     }
     render() {
+        var _a, _b;
+        const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
+        const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
         if (this.href) {
-            return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel || undefined, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
-        return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel || undefined, name: this.name, type: this.type, disabled: this.disabled, role: this.htmlrole || this.role || undefined }), this.renderIcon(), h("slot", null)));
+        return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }
     static get is() { return "z-button"; }
     static get encapsulation() { return "scoped"; }
@@ -65,8 +77,10 @@ export class ZButton {
                     "tags": [],
                     "text": "defines a string value that labels the internal interactive element. Used for accessibility."
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "undefined"
             },
             "role": {
@@ -84,10 +98,12 @@ export class ZButton {
                             "name": "deprecated",
                             "text": "This prop has been deprecated in favor of `htmlrole` for better accessibility."
                         }],
-                    "text": "**Deprecated:** Use `htmlrole` instead."
+                    "text": "Use `htmlrole` instead."
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "role",
                 "defaultValue": "\"\""
             },
             "htmlrole": {
@@ -104,8 +120,10 @@ export class ZButton {
                     "tags": [],
                     "text": "defines role attribute, used for accessibility."
                 },
-                "attribute": "htmlrole",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmlrole"
             },
             "href": {
                 "type": "string",
@@ -121,8 +139,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML <a> href attribute. If it is set, it renders an HTML <a> tag."
                 },
-                "attribute": "href",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
             },
             "target": {
                 "type": "string",
@@ -138,8 +158,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML a target attribute."
                 },
-                "attribute": "target",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
             },
             "htmlid": {
                 "type": "string",
@@ -155,8 +177,10 @@ export class ZButton {
                     "tags": [],
                     "text": "Identifier, should be unique."
                 },
-                "attribute": "htmlid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmlid"
             },
             "name": {
                 "type": "string",
@@ -172,8 +196,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button name attribute."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "disabled": {
                 "type": "boolean",
@@ -189,8 +215,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button disabled attribute."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "type": {
@@ -203,7 +231,8 @@ export class ZButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonType"
+                            "id": "src/beans/index.tsx::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -213,8 +242,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button type attribute."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "ButtonType.BUTTON"
             },
             "variant": {
@@ -227,7 +258,8 @@ export class ZButton {
                         "ButtonVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonVariant"
+                            "id": "src/beans/index.tsx::ButtonVariant",
+                            "referenceLocation": "ButtonVariant"
                         }
                     }
                 },
@@ -237,8 +269,10 @@ export class ZButton {
                     "tags": [],
                     "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "ButtonVariant.PRIMARY"
             },
             "icon": {
@@ -255,8 +289,10 @@ export class ZButton {
                     "tags": [],
                     "text": "`z-icon` name to use (optional)."
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "iconPosition": {
                 "type": "string",
@@ -268,7 +304,8 @@ export class ZButton {
                         "IconPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::IconPosition"
+                            "id": "src/beans/index.tsx::IconPosition",
+                            "referenceLocation": "IconPosition"
                         }
                     }
                 },
@@ -278,8 +315,10 @@ export class ZButton {
                     "tags": [],
                     "text": "the button icon position. Defaults to `left`"
                 },
-                "attribute": "icon-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "icon-position",
                 "defaultValue": "IconPosition.LEFT"
             },
             "size": {
@@ -292,12 +331,14 @@ export class ZButton {
                         "ButtonSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonSize"
+                            "id": "src/beans/index.tsx::ButtonSize",
+                            "referenceLocation": "ButtonSize"
                         },
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -307,12 +348,13 @@ export class ZButton {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-button-sort/index.js

@@ -2,13 +2,13 @@ import { h } from "@stencil/core";
 import { Breakpoints } from "../../constants/breakpoints";
 export class ZButtonSort {
     constructor() {
-        this.buttonid = undefined;
-        this.label = undefined;
-        this.desclabel = undefined;
-        this.counter = undefined;
+        /** sort label content (ascending) (optional) */
         this.sortlabelasc = "A-Z";
+        /** sort label content (descending) (optional) */
         this.sortlabeldesc = "Z-A";
+        /** selected flag (optional) */
         this.isselected = false;
+        /** sortable flag (optional) */
         this.sortasc = true;
         this.allowTooltip = false;
     }
@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6aebfeebb2882a1207aa32859e4c463f785360c2', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: 'c7a7a840ef0365ad7d56bf8fa8a0a81b421f4bed', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '76768e04bdb9409dbbc954da9097ce3d5bf2fd1b', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '932bc97f8c6cd54907de7e970d3f0a1895026fde', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'b91e6422c7325bb5646211e2013a5a3226b30a7c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '8bb124d8ffcce4ac1d7c01bc31f9256da769a90b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '6ab1b449e4d9c539683353cdcf8a4c8b3bdfa578', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'd67c255b32c814e0b6afec14c79ba422b8b2a57d', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '77ea4b67643b28db4737dc301bc416595581b93f', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '098881514d797b081e36f7ad66c9f60ea2423b27', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }
@@ -66,8 +66,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "id, should be unique"
                 },
-                "attribute": "buttonid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "buttonid"
             },
             "label": {
                 "type": "string",
@@ -83,8 +85,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (ascending)"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "desclabel": {
                 "type": "string",
@@ -100,8 +104,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (descending)"
                 },
-                "attribute": "desclabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "desclabel"
             },
             "counter": {
                 "type": "number",
@@ -117,8 +123,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "occurrences counter (optional)"
                 },
-                "attribute": "counter",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter"
             },
             "sortlabelasc": {
                 "type": "string",
@@ -134,8 +142,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (ascending) (optional)"
                 },
-                "attribute": "sortlabelasc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortlabelasc",
                 "defaultValue": "\"A-Z\""
             },
             "sortlabeldesc": {
@@ -152,8 +162,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (descending) (optional)"
                 },
-                "attribute": "sortlabeldesc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortlabeldesc",
                 "defaultValue": "\"Z-A\""
             },
             "isselected": {
@@ -170,8 +182,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "selected flag (optional)"
                 },
-                "attribute": "isselected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isselected",
                 "defaultValue": "false"
             },
             "sortasc": {
@@ -188,8 +202,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sortable flag (optional)"
                 },
-                "attribute": "sortasc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortasc",
                 "defaultValue": "true"
             }
         };
@@ -218,4 +234,3 @@ export class ZButtonSort {
             }];
     }
 }
-//# sourceMappingURL=index.js.map