@zanichelli/albe-web-components 19.2.5 → 19.2.6-RC1

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ButtonVariant, ControlSize, Device, KeyboardCode, ListDividerType, } from "../../beans";
 import { getDevice, handleEnterKeydSubmit, randomId } from "../../utils/utils";
 /**
@@ -8,29 +8,32 @@ import { getDevice, handleEnterKeydSubmit, randomId } from "../../utils/utils";
  */
 export class ZSearchbar {
     constructor() {
-        this.resultsItemsList = null;
-        this.items = [];
+        /** the id of the searchbar element */
         this.htmlid = `searchbar-${randomId()}`;
+        /** Prevent submit action */
         this.preventSubmit = false;
-        this.label = undefined;
-        this.htmlAriaLabel = undefined;
-        this.value = undefined;
-        this.placeholder = undefined;
+        /** Show autocomplete results */
         this.autocomplete = false;
+        /** Minimun number of characters to dispatch typing event */
         this.autocompleteMinChars = 3;
-        this.resultsCount = undefined;
+        /** Search helper text */
         this.searchHelperLabel = "Cerca {searchString}";
-        this.resultsItems = undefined;
+        /** Sort autocomplete results items */
         this.sortResultsItems = false;
+        /** Show submit button */
         this.showSearchButton = false;
+        /** Set button icon without label*/
         this.searchButtonIconOnly = false;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
+        /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
         this.variant = ButtonVariant.PRIMARY;
         this.searchString = this.value;
         this.currResultsCount = 0;
         this.showResults = false;
         this.isMobile = false;
-        this.selectedItem = undefined;
+        this.resultsItemsList = null;
+        this.items = [];
     }
     emitSearchSubmit() {
         this.searchSubmit.emit(this.inputRef.value);
@@ -225,7 +228,9 @@ export class ZSearchbar {
             }
             this.items = Array.from(list.querySelectorAll(".list-element"));
         }
-        this.items.forEach((item) => item.classList.contains("focused") && item.classList.remove("focused"));
+        this.items.forEach((item) => {
+            item.classList.toggle("focused", false);
+        });
         const currentIndex = this.items.indexOf(currentElement);
         if (e.key === KeyboardCode.ARROW_DOWN) {
             e.preventDefault();
@@ -256,7 +261,7 @@ export class ZSearchbar {
                 currentElement.classList.add("hovered");
             }, onMouseLeave: (e) => {
                 const currentElement = e.target;
-                currentElement.classList.contains("hovered") && currentElement.classList.remove("hovered");
+                currentElement.classList.toggle("hovered", false);
             } }, h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
     }
     renderItemLabel(label) {
@@ -288,7 +293,7 @@ export class ZSearchbar {
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: '0364ab12f13469240465abf3fa7688c764406d17', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '80f78bac48913d4ca1f692ef0576eeac16bafb61', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '6ccdb51d39d0e211de9b79cbbed90f4597b2c25b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '90e51c50fe4b06429aad4d222cb26e5789183c30', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }
@@ -318,8 +323,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "the id of the searchbar element"
                 },
-                "attribute": "htmlid",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "htmlid",
                 "defaultValue": "`searchbar-${randomId()}`"
             },
             "preventSubmit": {
@@ -336,8 +343,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Prevent submit action"
                 },
-                "attribute": "prevent-submit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "prevent-submit",
                 "defaultValue": "false"
             },
             "label": {
@@ -354,8 +363,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "the input label"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "htmlAriaLabel": {
                 "type": "string",
@@ -371,8 +382,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "the input aria-label"
                 },
-                "attribute": "html-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             },
             "value": {
                 "type": "string",
@@ -388,8 +401,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Input search string"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "placeholder": {
                 "type": "string",
@@ -405,8 +420,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Search input placeholder"
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "autocomplete": {
                 "type": "boolean",
@@ -422,8 +439,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Show autocomplete results"
                 },
-                "attribute": "autocomplete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete",
                 "defaultValue": "false"
             },
             "autocompleteMinChars": {
@@ -440,8 +459,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Minimun number of characters to dispatch typing event"
                 },
-                "attribute": "autocomplete-min-chars",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete-min-chars",
                 "defaultValue": "3"
             },
             "resultsCount": {
@@ -458,8 +479,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Number of results shown - default all"
                 },
-                "attribute": "results-count",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "results-count"
             },
             "searchHelperLabel": {
                 "type": "string",
@@ -475,8 +498,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Search helper text"
                 },
-                "attribute": "search-helper-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-helper-label",
                 "defaultValue": "\"Cerca {searchString}\""
             },
             "resultsItems": {
@@ -489,7 +514,8 @@ export class ZSearchbar {
                         "SearchbarItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SearchbarItem"
+                            "id": "src/beans/index.tsx::SearchbarItem",
+                            "referenceLocation": "SearchbarItem"
                         }
                     }
                 },
@@ -499,8 +525,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Autocomplete results items"
                 },
-                "attribute": "results-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "results-items"
             },
             "sortResultsItems": {
                 "type": "boolean",
@@ -516,8 +544,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Sort autocomplete results items"
                 },
-                "attribute": "sort-results-items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sort-results-items",
                 "defaultValue": "false"
             },
             "showSearchButton": {
@@ -534,8 +564,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Show submit button"
                 },
-                "attribute": "show-search-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-search-button",
                 "defaultValue": "false"
             },
             "searchButtonIconOnly": {
@@ -552,8 +584,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Set button icon without label"
                 },
-                "attribute": "search-button-icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-button-icon-only",
                 "defaultValue": "false"
             },
             "size": {
@@ -566,7 +600,8 @@ export class ZSearchbar {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -576,8 +611,10 @@ export class ZSearchbar {
                     "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"
             },
             "variant": {
@@ -590,7 +627,8 @@ export class ZSearchbar {
                         "ButtonVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonVariant"
+                            "id": "src/beans/index.tsx::ButtonVariant",
+                            "referenceLocation": "ButtonVariant"
                         }
                     }
                 },
@@ -600,8 +638,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "ButtonVariant.PRIMARY"
             }
         };
@@ -663,7 +703,8 @@ export class ZSearchbar {
                         "SearchbarItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SearchbarItem"
+                            "id": "src/beans/index.tsx::SearchbarItem",
+                            "referenceLocation": "SearchbarItem"
                         }
                     }
                 }
@@ -698,4 +739,3 @@ export class ZSearchbar {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

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

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";
 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);
     }
@@ -470,7 +469,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: '85aeff414269872f796631044ffcafe9e500d6e6', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '375b2aba49331cc572cb884f41f2d37c94c7f920', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }
@@ -500,8 +499,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 +515,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 +526,10 @@ export class ZSelect {
                     "tags": [],
                     "text": "the input select options"
                 },
-                "attribute": "items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "items",
                 "defaultValue": "[]"
             },
             "name": {
@@ -542,8 +546,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 +565,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 +584,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 +604,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 +624,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 +644,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 +663,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 +678,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 +689,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 +708,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 +728,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 +748,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 +768,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 +787,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 +806,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 +825,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 +845,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 +860,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 +871,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 +934,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 +993,3 @@ export class ZSelect {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

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