@zanichelli/albe-web-components 18.7.7 → 18.8.1-RC1

package/dist/collection/components/{result-card/z-result-card → z-result-card}/styles.css

@@ -1,85 +1,27 @@
+:host,
+* {
+  box-sizing: border-box;
+}
+
 :host {
   display: flex;
   overflow: hidden;
   min-width: 0;
-  height: 9.875rem;
+  height: 11.125rem;
   padding: var(--space-unit);
   border: var(--border-size-medium) solid var(--color-surface02);
-  background-color: var(--color-white);
+  background-color: var(--color-surface01);
   border-radius: var(--border-size-large);
   cursor: pointer;
   font-family: var(--font-family-sans);
+  gap: calc(var(--space-unit) * 2);
 }
 
-.z-cover-container {
-  position: relative;
-  display: flex;
-  width: 119px;
-  height: 158px;
-  align-items: center;
-  justify-items: center;
-}
-
-.z-cover-stack {
-  width: 100%;
-  height: 100%;
-}
-
-/* Base sizes for single cover */
-.z-cover-shadow,
-.z-cover-img {
-  width: 117px;
-  height: 156px;
-}
-
-/* Scaled sizes for multiple covers */
-.z-cover-container.has-multiple .z-cover-shadow,
-.z-cover-container.has-multiple .z-cover-img {
-  width: 105px;
-  height: 140px;
-}
-
-.z-cover-shadow {
-  position: absolute;
-  z-index: 1;
-  background-color: var(--color-white);
-}
-
-.z-shadow-1 {
-  z-index: 0;
-  top: var(--space-unit);
-  right: 6px;
-  border: var(--border-size-small) solid black;
-}
-
-.z-shadow-2 {
-  z-index: 0;
-  top: calc(var(--space-unit) * 2);
-  right: 12px;
-  border: var(--border-size-small) solid black;
-}
-
-.z-cover-img {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: start;
-  justify-content: center;
-  border: var(--border-size-small) solid black;
-  background-color: var(--color-white);
-  object-fit: cover;
-  object-position: left;
-}
-
-.z-cover-img > img {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.z-cover-container.has-multiple .z-cover-img {
-  left: 12px;
+z-book-cover {
+  --z-book-cover-stack-shift-x: 6px;
+  --z-book-cover-stack-shift-y: 8px;
+  --z-book-cover-height: 158px;
+  --z-book-cover-border-radius: 0;
 }
 
 .info-container {
@@ -88,7 +30,6 @@
   min-width: 0;
   flex: 1;
   flex-direction: column;
-  padding-left: calc(var(--space-unit) * 2);
 }
 
 .authors-label {
@@ -103,6 +44,7 @@
 .card-title {
   display: -webkit-box;
   overflow: hidden;
+  margin: 0;
   -webkit-box-orient: vertical;
   font-size: var(--font-size-3);
   font-weight: var(--font-bd);
@@ -112,10 +54,6 @@
   word-break: break-word;
 }
 
-.card-title > * {
-  all: unset;
-}
-
 .card-subtitle {
   overflow: hidden;
   color: var(--color-default-text);
@@ -123,17 +61,6 @@
   white-space: nowrap;
 }
 
-.card-subtitle.info-card-subtitle {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  line-height: 1.2;
-  white-space: normal;
-  word-break: break-word;
-}
-
 .tags-container {
   display: flex;
   max-width: 100%;
@@ -152,30 +79,36 @@
 
 /* info-card */
 :host(.info-card) {
-  display: flex;
-  height: 3.75rem;
+  height: 5rem;
   gap: calc(var(--space-unit) * 1.5);
 }
 
-:host(.info-card) .info-container {
-  padding-left: 0;
-}
-
-.info-icon-container {
+:host(.info-card) .info-icon-container {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  justify-content: center;
   padding: var(--space-unit);
   margin-bottom: calc(var(--space-unit) * 3);
   background-color: var(--gray50);
   border-radius: var(--border-size-large);
 }
 
-.card-title.info-card-title {
+:host(.info-card) .info-icon {
+  --z-icon-width: 1.125rem;
+  --z-icon-height: 1.125rem;
+
+  fill: var(--color-default-icon);
+}
+
+:host(.info-card) .card-title {
   display: -webkit-box;
   overflow: hidden;
   min-width: 0;
   max-width: 100%;
   max-height: 2.4em;
   margin-top: 0;
-  margin-bottom: 4px;
+  margin-bottom: calc(var(--space-unit) / 2);
   -webkit-box-orient: vertical;
   font-size: var(--font-size-3);
   font-weight: var(--font-bd);
@@ -185,20 +118,18 @@
   word-break: break-word;
 }
 
-.info-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--color-default-text);
-}
-
-/* Focus */
-:host(:focus:focus-visible) {
-  z-index: 1;
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+:host(.info-card) .card-subtitle {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.2;
+  white-space: normal;
+  word-break: break-word;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .card-title {
     display: block;
     overflow: hidden;

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-result-card.stories.js","sourceRoot":"","sources":["../../../../src/components/z-result-card/z-result-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"./index\";\n\nconst StoryMeta: Meta = {\n  title: \"ZResultCard\",\n  component: \"z-result-card\",\n  argTypes: {\n    cardTitle: {control: \"text\"},\n    cardSubtitle: {control: \"text\"},\n    authors: {control: \"text\"},\n    cover: {control: \"text\"},\n    fallbackCover: {control: \"text\"},\n    hasMultipleCovers: {control: \"boolean\"},\n    isInfoCard: {control: \"boolean\"},\n  },\n};\n\nexport default StoryMeta;\n\ntype Story = StoryObj;\n\nconst args = {\n  cardTitle: \"Title\",\n  cardSubtitle: \"Subtitle\",\n  authors: \"John Doe\",\n  cover: \"https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG\",\n  fallbackCover: \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n  hasMultipleCovers: false,\n  isInfoCard: false,\n  titleHtmlTag: \"h2\",\n};\n\nexport const SingleCover: Story = {\n  args: {\n    ...args,\n  },\n\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .authors=${args.authors}\n      .cover=${args.cover}\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    >\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"volumes\">2 volumes</span>\n    </z-result-card>\n  `,\n};\n\nexport const SingleCoverLateralSpaces: Story = {\n  args: {\n    ...args,\n  },\n\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .authors=${args.authors}\n      cover=\"https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg\"\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    >\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"volumes\">2 volumes</span>\n    </z-result-card>\n  `,\n};\n\nexport const MultipleCovers: Story = {\n  args: {\n    ...args,\n    hasMultipleCovers: true,\n  },\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .authors=${args.authors}\n      .cover=${args.cover}\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    >\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"volumes\">2 volumes</span>\n    </z-result-card>\n  `,\n};\n\nexport const MultipleCoversLateralSpaces: Story = {\n  args: {\n    ...args,\n    hasMultipleCovers: true,\n  },\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .authors=${args.authors}\n      cover=https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    >\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"volumes\">2 volumes</span>\n    </z-result-card>\n  `,\n};\n\nexport const LongTitleAndSubtitle: Story = {\n  args: {\n    ...args,\n    cardTitle:\n      \"This is a very long title that should wrap to the next line if it exceeds the width of the card, it goes on two rows for desktop devices and one row for mobile\",\n    cardSubtitle:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis. Nunc volutpat viverra felis, eu iaculis ipsum tempus mattis. Phasellus euismod quam eget nisl pellentesque.\",\n    hasMultipleCovers: true,\n  },\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .authors=${args.authors}\n      .cover=${args.cover}\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    >\n      <span slot=\"tags\">Example tag</span>\n      <span slot=\"volumes\">2 volumes</span>\n    </z-result-card>\n  `,\n};\n\nexport const OnlyTitleAndSubtitle: Story = {\n  args: {\n    ...args,\n    author: undefined,\n  },\n\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .cover=${args.cover}\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    />\n  `,\n};\n\nexport const InfoCard: Story = {\n  args: {\n    ...args,\n    cardTitle: \"Info Card Title\",\n    cardSubtitle:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis.\",\n    isInfoCard: true,\n  },\n  render: (args) => html`\n    <z-result-card\n      .cardTitle=${args.cardTitle}\n      .cardSubtitle=${args.cardSubtitle}\n      .authors=${args.authors}\n      .cover=${args.cover}\n      fallback-cover=${args.fallbackCover}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      .isInfoCard=${args.isInfoCard}\n      .titleHtmlTag=${args.titleHtmlTag}\n    />\n  `,\n};\n"]}

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

@@ -286,7 +286,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: '00f8f6cf495b9e24936e74f78dcc1f15cd3448fd', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '3b0898cda0fa9093cfe53493cb97fb7a5bc37d96', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '5403ffd56eec6183988bb502b0df4a9fc6fb5548', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'b989afbcde29949cf713bacf31bee58cdb33230a', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,6 @@ export class ZSelect {
     watchItems() {
         this.itemsList = this.getInitialItemsArray();
         this.selectedItem = this.findSelectedItem(this.itemsList);
-        this.flattenedList = this.flattenTreeItems(this.itemsList);
-        this.itemIdKeyMap = {};
-        this.flattenedList.forEach(({ item, key }) => {
-            this.itemIdKeyMap[item.id] = key;
-        });
     }
     getFocusedItemHandler(e) {
         this.focusedItemId = e.target.id;
@@ -84,6 +79,7 @@ export class ZSelect {
     }
     componentWillRender() {
         this.filterItems(this.searchString);
+        this.updateFlattenedList();
     }
     getInitialItemsArray() {
         return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -100,6 +96,27 @@ export class ZSelect {
         var _a;
         return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
     }
+    getGroupedItems() {
+        return Object.entries(this.itemsList.reduce((group, item) => {
+            const category = item.category || "Altra categoria";
+            group[category] = group[category] || [];
+            group[category].push(item);
+            return group;
+        }, {}));
+    }
+    updateFlattenedList() {
+        let orderedItems = this.itemsList;
+        if (this.hasGroupItems) {
+            orderedItems = this.getGroupedItems()
+                .map((item) => item[1])
+                .flat();
+        }
+        this.flattenedList = this.flattenTreeItems(orderedItems);
+        this.itemIdKeyMap = {};
+        this.flattenedList.forEach(({ item, key }) => {
+            this.itemIdKeyMap[item.id] = key;
+        });
+    }
     filterItems(searchString) {
         const prevList = this.mapSelectedItemToItemsArray();
         if (!(searchString === null || searchString === void 0 ? void 0 : searchString.length)) {
@@ -117,11 +134,6 @@ export class ZSelect {
                 return item;
             });
         }
-        this.flattenedList = this.flattenTreeItems(this.itemsList);
-        this.itemIdKeyMap = {};
-        this.flattenedList.forEach(({ item, key }) => {
-            this.itemIdKeyMap[item.id] = key;
-        });
     }
     filterTree(items, searchString, matchingParent) {
         if (!items) {
@@ -316,7 +328,7 @@ export class ZSelect {
         }
     }
     scrollToLetter(letter) {
-        const foundItem = this.itemsList.findIndex((item) => item.name.charAt(0) === letter);
+        const foundItem = this.itemsList.findIndex((item) => item.name.toLowerCase().charAt(0) === letter.toLowerCase());
         if (foundItem > -1) {
             this.focusSelectItem(this.itemIdKeyMap[this.itemsList[foundItem].id]);
         }
@@ -325,7 +337,7 @@ export class ZSelect {
         return (h("z-input", { class: {
                 "active-select": this.isOpen,
                 "cursor-select": !this.autocomplete,
-            }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, autocomplete: "off", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.ariaLabel, "aria-controls": `${this.htmlid}_list`, "aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
+            }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
                 this.handleInputClick(e);
             }, onKeyUp: (e) => {
                 e.preventDefault();
@@ -346,7 +358,7 @@ export class ZSelect {
             }, onKeyPress: (e) => {
                 if (!this.hasAutocomplete()) {
                     e.preventDefault();
-                    this.scrollToLetter(String.fromCharCode(e.keyCode));
+                    this.scrollToLetter(e.key);
                 }
             } }));
     }
@@ -391,17 +403,16 @@ export class ZSelect {
         }
         return ListSize.MEDIUM;
     }
-    //eslint-disable-next-line
     renderSelectUlItems() {
         if (!this.itemsList.length) {
             return this.renderNoSearchResults();
         }
-        if (this.hasGroupItems && !this.hasTreeItems) {
+        if (this.hasGroupItems) {
+            if (this.hasTreeItems) {
+                return this.renderGroupedTree();
+            }
             return this.renderSelectGroupItems();
         }
-        else if (this.hasGroupItems && this.hasTreeItems) {
-            return this.renderGroupedTree();
-        }
         return this.itemsList.map((item, index, array) => {
             const isLastItem = index === array.length - 1;
             const parentHasSiblings = array.length > 1;
@@ -426,7 +437,7 @@ export class ZSelect {
         return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, class: {
                 "grouped-tree-parent-node": this.hasGroupItems && !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length),
                 "tree-search-item": this.hasGroupItems && isTopLevel && !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) && !!this.searchString,
-            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems }, h("div", { id: `${this.htmlid}_key_${thisItemKey}`, role: "option", class: "list-element", tabIndex: 0, onClick: () => this.selectItem(item), onKeyDown: (e) => {
+            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems }, h("div", { id: `${this.htmlid}_key_${thisItemKey}`, role: "option", class: "list-element", tabIndex: !this.isOpen ? -1 : 0, onClick: () => this.selectItem(item), onKeyDown: (e) => {
                 this.arrowsSelectNav(e, thisItemKey);
                 if (e.key === KeyboardCode.ENTER) {
                     this.selectItem(item);
@@ -438,14 +449,9 @@ export class ZSelect {
         ))))) : null));
     }
     renderGroupedTree() {
-        const grouped = this.itemsList.reduce((acc, item) => {
-            const category = item.category || "Altra categoria";
-            acc[category] = acc[category] || [];
-            acc[category].push(item);
-            return acc;
-        }, {});
-        return Object.entries(grouped).map(([category, items], index, entries) => {
-            const parentHasSiblings = Object.values(grouped).some((groupItems) => groupItems.length > 1);
+        const groupedItems = this.getGroupedItems();
+        return groupedItems.map(([category, items], index, entries) => {
+            const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);
             // const parentHasSiblings = items.length > 1;
             return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, category), h("z-list", null, items.map((item, i, arr) => [
                 this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true),
@@ -454,17 +460,13 @@ export class ZSelect {
         });
     }
     renderSelectGroupItems() {
-        const newData = this.itemsList.reduce((group, item, index, array) => {
-            var _a;
-            const { category } = item;
-            const lastItem = array.length === index + 1;
-            const zListItem = this.renderItem(item, lastItem);
-            group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
-            group[category].push(zListItem);
-            return group;
-        }, {});
-        return Object.entries(newData).map(([key, value]) => {
-            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
+        const groupedItems = this.getGroupedItems();
+        return groupedItems.map(([key, items], index) => {
+            const isLastGroup = groupedItems.length === index + 1;
+            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), items.map((item, subindex) => {
+                const isLastItem = items.length === subindex + 1;
+                return this.renderItem(item, isLastGroup && isLastItem);
+            })));
         });
     }
     renderNoSearchResults() {
@@ -477,7 +479,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: '62cfb836de118bfcdc98864dcc47a798a8f90e1a', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '77bc9e436df78a7609f78d7b263df95d0b897efb', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }