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

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

@@ -1,32 +1,31 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { ControlSize, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { boolean, getClickedElement, getElementTree, getPlainText, randomId } from "../../utils/utils";
+import { boolean, encodeString, getClickedElement, getElementTree, getPlainText, randomId } from "../../utils/utils";
 export class ZSelect {
     constructor() {
-        this.itemsList = [];
+        /** the id of the input element */
         this.htmlid = `id-${randomId()}`;
+        /** the input select options */
         this.items = [];
-        this.name = undefined;
-        this.label = undefined;
+        /** the input aria-label */
         this.ariaLabel = "";
+        /** the input is disabled */
         this.disabled = false;
+        /** the input is readonly */
         this.readonly = false;
-        this.placeholder = undefined;
-        this.htmltitle = undefined;
-        this.status = undefined;
+        /** input helper message (optional) - if set to `false` message won't be displayed */
         this.message = true;
+        /** the input has autocomplete option */
         this.autocomplete = false;
+        /** no result text message */
         this.noresultslabel = "Nessun risultato";
-        this.hasGroupItems = undefined;
-        this.hasTreeItems = undefined;
-        this.showChildrenOfMatchingParent = undefined;
+        /** When fixed, it occupies space and pushes down next elements. */
         this.isfixed = false;
-        this.resetItem = undefined;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
         this.isOpen = false;
         this.selectedItem = null;
-        this.focusedItemId = undefined;
-        this.searchString = undefined;
+        this.itemsList = [];
         this.toggleSelectUl = this.toggleSelectUl.bind(this);
         this.handleSelectFocus = this.handleSelectFocus.bind(this);
     }
@@ -88,14 +87,11 @@ export class ZSelect {
         return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
     }
     getOptionId(item) {
-        return `${this.htmlid}_key_${item.id}`;
+        return `${this.htmlid}_key_${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;
     }
     getResetOptionId() {
         return `${this.htmlid}_key_reset`;
     }
-    getItemIdFromOptionId(optionId) {
-        return optionId.replace(`${this.htmlid}_key_`, ``);
-    }
     getGroupedItems() {
         if (!this.itemsList.length) {
             return [];
@@ -225,8 +221,7 @@ export class ZSelect {
                         this.handleResetClick();
                     }
                     else {
-                        const itemId = this.getItemIdFromOptionId(this.focusedItemId);
-                        const item = this.itemsList.find((e) => e.id === itemId) || null;
+                        const item = this.itemsList.find((e) => this.getOptionId(e) === this.focusedItemId) || null;
                         if (item) {
                             this.selectedItem = item;
                             this.emitOptionSelect();
@@ -470,7 +465,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '7f33aceb711450a52e911ee35386561480894e1c', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '75718f2b3021a18a07fe3b4119849480b11dca4a', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }
@@ -500,8 +495,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the id of the input element"
                 },
-                "attribute": "htmlid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "htmlid",
                 "defaultValue": "`id-${randomId()}`"
             },
             "items": {
@@ -514,7 +511,8 @@ export class ZSelect {
                         "SelectItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SelectItem"
+                            "id": "src/beans/index.tsx::SelectItem",
+                            "referenceLocation": "SelectItem"
                         }
                     }
                 },
@@ -524,8 +522,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input select options"
                 },
-                "attribute": "items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "items",
                 "defaultValue": "[]"
             },
             "name": {
@@ -542,8 +542,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input name"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "label": {
                 "type": "string",
@@ -559,8 +561,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input label"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "ariaLabel": {
                 "type": "string",
@@ -576,8 +580,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input aria-label"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "disabled": {
@@ -594,8 +600,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input is disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
@@ -612,8 +620,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input is readonly"
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "placeholder": {
@@ -630,8 +640,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input placeholder (optional)"
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "htmltitle": {
                 "type": "string",
@@ -647,8 +659,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input html title (optional)"
                 },
-                "attribute": "htmltitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmltitle"
             },
             "status": {
                 "type": "string",
@@ -660,7 +674,8 @@ export class ZSelect {
                         "InputStatus": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputStatus"
+                            "id": "src/beans/index.tsx::InputStatus",
+                            "referenceLocation": "InputStatus"
                         }
                     }
                 },
@@ -670,8 +685,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input status (optional)"
                 },
-                "attribute": "status",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
             },
             "message": {
                 "type": "any",
@@ -687,8 +704,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "input helper message (optional) - if set to `false` message won't be displayed"
                 },
-                "attribute": "message",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "message",
                 "defaultValue": "true"
             },
             "autocomplete": {
@@ -705,8 +724,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input has autocomplete option"
                 },
-                "attribute": "autocomplete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete",
                 "defaultValue": "false"
             },
             "noresultslabel": {
@@ -723,8 +744,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "no result text message"
                 },
-                "attribute": "noresultslabel",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "noresultslabel",
                 "defaultValue": "\"Nessun risultato\""
             },
             "hasGroupItems": {
@@ -741,8 +764,10 @@ export class ZSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "has-group-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-group-items"
             },
             "hasTreeItems": {
                 "type": "boolean",
@@ -758,8 +783,10 @@ export class ZSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "has-tree-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-tree-items"
             },
             "showChildrenOfMatchingParent": {
                 "type": "boolean",
@@ -775,8 +802,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "If true and an item matches the search string, children of matching item are shown even if they don't match the search string"
                 },
-                "attribute": "show-children-of-matching-parent",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-children-of-matching-parent"
             },
             "isfixed": {
                 "type": "boolean",
@@ -792,8 +821,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "When fixed, it occupies space and pushes down next elements."
                 },
-                "attribute": "isfixed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isfixed",
                 "defaultValue": "false"
             },
             "resetItem": {
@@ -810,8 +841,10 @@ export class ZSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "reset-item",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reset-item"
             },
             "size": {
                 "type": "string",
@@ -823,7 +856,8 @@ export class ZSelect {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -833,8 +867,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             }
         };
@@ -894,7 +930,8 @@ export class ZSelect {
                         "SelectItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SelectItem"
+                            "id": "src/beans/index.tsx::SelectItem",
+                            "referenceLocation": "SelectItem"
                         }
                     },
                     "return": "Promise<SelectItem>"
@@ -952,4 +989,3 @@ export class ZSelect {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-skip-to-content/index.js

@@ -6,7 +6,7 @@ import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
  */
 export class ZSkipToContent {
     constructor() {
-        this.variant = undefined;
+        /** Array to fill link into skip-content */
         this.links = [];
         this.visible = false;
         this.visibleLink = "";
@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '8b913cd494118ddb3e53d529d40a60693b75a157', class: {
+        return (h(Host, { key: 'f59a9eb487f7e07167a2760cff9d317e43866b8b', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {
@@ -84,7 +84,8 @@ export class ZSkipToContent {
                         "ThemeVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ThemeVariant"
+                            "id": "src/beans/index.tsx::ThemeVariant",
+                            "referenceLocation": "ThemeVariant"
                         }
                     }
                 },
@@ -94,8 +95,10 @@ export class ZSkipToContent {
                     "tags": [],
                     "text": "Graphical variant: `dark`, `light`."
                 },
-                "attribute": "variant",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant"
             },
             "links": {
                 "type": "string",
@@ -107,7 +110,8 @@ export class ZSkipToContent {
                         "SkipToContentLink": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SkipToContentLink"
+                            "id": "src/beans/index.tsx::SkipToContentLink",
+                            "referenceLocation": "SkipToContentLink"
                         }
                     }
                 },
@@ -117,8 +121,10 @@ export class ZSkipToContent {
                     "tags": [],
                     "text": "Array to fill link into skip-content"
                 },
-                "attribute": "links",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "links",
                 "defaultValue": "[]"
             }
         };
@@ -146,4 +152,3 @@ export class ZSkipToContent {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: '1d1f9c22822efd4ff78ada101c84a0989da9f71b', role: "navigation" }, h("slot", { key: 'f6068efbdab8ba800c82f5c89ed1e88e983ef369' })));
+        return (h(Host, { key: '10e061c4cb346cdd60da9a69036627bf96772337', role: "navigation" }, h("slot", { key: '670c077860b774216577c2d3d8b7be29f6c09ecb' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -19,4 +19,3 @@ export class ZStepper {
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-stepper-item/index.js

@@ -1,12 +1,5 @@
 import { Host, h } from "@stencil/core";
 export class ZStepperItem {
-    constructor() {
-        this.index = undefined;
-        this.href = undefined;
-        this.pressed = undefined;
-        this.checked = undefined;
-        this.disabled = undefined;
-    }
     getAttributes() {
         const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
         const role = href ? { role: "link" } : undefined;
@@ -15,7 +8,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: '19c73e3cc4e553720f5fb782f73931737007f7a4', role: "listitem" }, h("button", Object.assign({ key: 'b2bcbd197fe0ba3b90442544f354589394ac0007', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'bc7e3054c6ece39171d65a03360ff16502a46b3c', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e18deeb657c6ff859ba1e6cff18103550bf0a4db' }, h("slot", { key: '7646d57e96b50b8268e5353003a118737687c2b5' })))));
+        return (h(Host, { key: 'bb0ceb975a1380777583fd907c244bb4980fb606', role: "listitem" }, h("button", Object.assign({ key: 'd059cfce75ffd60f0f3d2215aaa639dcdfdbb500', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'ce84b4f682bc3f5a1753f6903493eba8d407bdf0', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '2252ddbf8636b2138f2620a9c1e3ba1eb08aa2b0' }, h("slot", { key: 'a04ee80011c0b71bcce5488f0d5f3594ecd65da1' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }
@@ -45,8 +38,10 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The number of the step item."
                 },
-                "attribute": "index",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "index"
             },
             "href": {
                 "type": "string",
@@ -62,8 +57,10 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The href to navigate on click."
                 },
-                "attribute": "href",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "href"
             },
             "pressed": {
                 "type": "boolean",
@@ -79,8 +76,10 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The pressed state of the item."
                 },
-                "attribute": "pressed",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pressed"
             },
             "checked": {
                 "type": "boolean",
@@ -96,8 +95,10 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The checked state of the item."
                 },
-                "attribute": "checked",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked"
             },
             "disabled": {
                 "type": "boolean",
@@ -113,10 +114,11 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The disabled state of the item."
                 },
-                "attribute": "disabled",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,21 +2,13 @@ import { Host, h } from "@stencil/core";
 /**
  * Ztag component.
  * @slot - The text of the z-tag.
- * @cssprop --z-tag-text-color - text and icon color using tokens.
- * @cssprop --z-tag-bg - background color of the z-tag.
  */
 export class ZTag {
-    constructor() {
-        this.icon = undefined;
-        this.expandable = undefined;
-    }
     render() {
-        var _a;
-        const hasText = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
-        return (h(Host, { key: '1414ca0881e2a62586b1e093e1fef75f1f74f6fe', class: {
+        return (h(Host, { key: 'eafe79f7342455535bc2d0550819506bb5f2417d', class: {
                 "expandable": this.expandable && !!this.icon,
-                "has-text": hasText,
-            } }, this.icon && h("z-icon", { key: '1be6964fc0121d351bbdebdfe255d26702e81f8f', name: this.icon }), h("div", { key: 'a7dac7e78d2cbc4a6d779a683e1d2b820af0fe6a' }, h("slot", { key: '95de2b4d5958f7af33015e887ac854c472979ae3' }))));
+                "has-text": !!this.host.textContent.trim(),
+            } }, this.icon && h("z-icon", { key: 'a0cb672be061f30da008e60acf3d8104faf00e9d', name: this.icon }), h("div", { key: '688919faeafac3d13f92a7a24d0f1a4c54570d79' }, h("slot", { key: '129f3625ee07bfb97a1c23e65b6014427a5d8232' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }
@@ -46,8 +38,10 @@ export class ZTag {
                     "tags": [],
                     "text": "[optional] Tag icon"
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "expandable": {
                 "type": "boolean",
@@ -63,11 +57,12 @@ export class ZTag {
                     "tags": [],
                     "text": "[optional] Hide the text and show it on hover"
                 },
-                "attribute": "expandable",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable"
             }
         };
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-tag/styles.css

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --z-tag-text-color: text and icon color using tokens.
+   * @prop --z-tag-bg: background color of the z-tag.
+   */
+
   --z-icon-width: 14px;
   --z-icon-height: 14px;