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

package/dist/collection/components/z-result-card/index.js

@@ -5,6 +5,10 @@ import { Host, h } from "@stencil/core";
  */
 export class ZResultCard {
     constructor() {
+        /** Whether to show a stack of covers to represent multiple books. */
+        this.hasMultipleCovers = false;
+        /** Enables the "info" variant of the card. */
+        this.isInfoCard = false;
         this.resizeHandler = () => {
             this.setTooltipTitle(this.authorsRef);
             this.setTooltipTitle(this.titleRef);
@@ -23,14 +27,6 @@ export class ZResultCard {
         this.renderInfoCard = () => {
             return (h(Host, { class: "info-card" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link" })), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
         };
-        this.cardTitle = undefined;
-        this.cardSubtitle = undefined;
-        this.authors = undefined;
-        this.cover = undefined;
-        this.fallbackCover = undefined;
-        this.hasMultipleCovers = false;
-        this.isInfoCard = false;
-        this.titleHtmlTag = undefined;
     }
     setTooltipTitle(el) {
         if (!el) {
@@ -100,8 +96,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The title of the card."
                 },
-                "attribute": "card-title",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-title"
             },
             "cardSubtitle": {
                 "type": "string",
@@ -117,8 +115,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The subtitle of the card."
                 },
-                "attribute": "card-subtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-subtitle"
             },
             "authors": {
                 "type": "string",
@@ -134,8 +134,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The authors of the opera."
                 },
-                "attribute": "authors",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "authors"
             },
             "cover": {
                 "type": "string",
@@ -151,8 +153,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The URL of the cover image of the opera."
                 },
-                "attribute": "cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover"
             },
             "fallbackCover": {
                 "type": "string",
@@ -168,8 +172,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "[optional] Fallback cover URL."
                 },
-                "attribute": "fallback-cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-cover"
             },
             "hasMultipleCovers": {
                 "type": "boolean",
@@ -185,8 +191,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "Whether to show a stack of covers to represent multiple books."
                 },
-                "attribute": "has-multiple-covers",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "has-multiple-covers",
                 "defaultValue": "false"
             },
             "isInfoCard": {
@@ -203,8 +211,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "Enables the \"info\" variant of the card."
                 },
-                "attribute": "is-info-card",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "is-info-card",
                 "defaultValue": "false"
             },
             "titleHtmlTag": {
@@ -221,11 +231,12 @@ export class ZResultCard {
                     "tags": [],
                     "text": "[optional] Set a specific heading level as html tag for the title."
                 },
-                "attribute": "title-html-tag",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-html-tag"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-result-card/z-result-card.stories.js

@@ -145,4 +145,3 @@ export const InfoCard = {
     />
   `,
 };
-//# sourceMappingURL=z-result-card.stories.js.map

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: '80709d742a085bb3045a2a8795e5e77ce8aa9e3e', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'fb03a352402836b09da8b315e84a37c8bee98583', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '7532b012de14cd7acaccfbd2cbd8e6a6a29f5021', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '6130a0e70c687dca53744d2d370ccbd2db79f1a6', 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-searchbar/styles.css

@@ -246,7 +246,7 @@ z-list > div.children-node {
   }
 
   .results .item.ellipsis > .item-label {
-    height: 24px;
+    height: 1.5rem;
   }
 
   .results z-list-element > .list-element > z-tag {