@zanichelli/albe-web-components 16.0.0-rc3 → 16.1.0

package/dist/components/index23.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$3 } from './index13.js';
 import { d as defineCustomElement$2 } from './index14.js';
 import { d as defineCustomElement$1 } from './index24.js';
 
-const stylesCss = ":host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-default-text);text-transform:uppercase}.results z-list-element{display:block}.results z-list-element>.list-element{display:flex;justify-content:space-between}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-default-text);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon);font-size:var(--font-size-2);line-height:var(--font-size-3)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size=\"x-small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}";
+const stylesCss = ":host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:44px;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host::part(list-item-container){display:block;min-height:unset;padding:0}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-default-text);text-transform:uppercase}.results z-list-element{position:relative;display:block}z-list-element>.item-search{padding:var(--space-unit) 0}z-list z-list-element::before{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:1em;border-bottom:1px solid var(--color-disabled01-icon);border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element::after{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:100%;border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element:last-child::after{display:none}z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 3)}.results z-list-element>.list-element{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}.results z-list-element>.list-element .item.ellipsis{overflow:hidden}.results z-list-element .list-element::after{position:absolute;top:0;right:0;display:block;width:100%;height:44px;content:\"\";transform:translateX(-100%)}.results z-list-element>.list-element:hover,.results z-list-element>.list-element:hover::after{background-color:var(--color-surface02);cursor:pointer}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-default-text);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon);font-size:var(--font-size-2);line-height:var(--font-size-6)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}.results z-list-element>.list-element>z-tag{min-width:max-content}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"]) z-list-element>.list-element,:host([size=\"small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) * 0.75) 0}:host([size=\"x-small\"]) z-list-element>.list-element,:host([size=\"x-small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) / 2) 0}:host([size=\"small\"]) z-list-element .list-element::after{height:36px}:host([size=\"x-small\"]) z-list-element .list-element::after{height:32px}";
 const ZSearchbarStyle0 = stylesCss;
 
 const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTMLElement {
@@ -30,7 +30,6 @@ const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTM
         this.autocomplete = false;
         this.autocompleteMinChars = 3;
         this.resultsCount = undefined;
-        this.resultsEllipsis = true;
         this.searchHelperLabel = "Cerca {searchString}";
         this.resultsItems = undefined;
         this.sortResultsItems = false;
@@ -206,7 +205,7 @@ const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTM
         return listGroups;
     }
     renderItem(item, key, divider) {
-        return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option", tabindex: 0, dividerType: divider ? ListDividerType.ELEMENT : undefined, clickable: true, onClickItem: () => this.emitSearchItemClick(item) }, h("div", { class: "list-element" }, h("span", { class: { "item": true, "ellipsis": this.resultsEllipsis, "has-category": !!item.category } }, (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 : ""))));
+        return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option", tabindex: 0, dividerType: divider ? ListDividerType.ELEMENT : undefined }, h("div", { class: "list-element", onClick: () => this.emitSearchItemClick(item) }, 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) {
         if (!this.searchString) {
@@ -237,7 +236,7 @@ const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTM
         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: 'af318a5b693c0048c368776744d9090bdebe6c8c', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'aba6d0bd87ba308a8f664ca5f86e5d0b96c734af', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '9e8e62ecafdfd6f8a26c88ae89de0af9ae888bb3', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '19ea613b5434d4ceb27402c47f00e58ba2661859', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -255,7 +254,6 @@ const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTM
         "autocomplete": [4],
         "autocompleteMinChars": [2, "autocomplete-min-chars"],
         "resultsCount": [2, "results-count"],
-        "resultsEllipsis": [4, "results-ellipsis"],
         "searchHelperLabel": [1, "search-helper-label"],
         "resultsItems": [1, "results-items"],
         "sortResultsItems": [4, "sort-results-items"],

package/dist/components/index23.js.map

@@ -1 +1 @@
-{"file":"index23.js","mappings":"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","names":[],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n\n  z-index: 15;\n  display: flex;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.results-wrapper {\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  width: 100%;\n  padding: calc(var(--space-unit) / 4);\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-top: none;\n  background: var(--color-surface01);\n}\n\n.results {\n  overflow: auto;\n  max-height: var(--z-searchbar-results-height, 540px);\n  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.results .category-heading {\n  display: block;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n  display: block;\n}\n\n.results .category-heading > .category {\n  color: var(--color-text05);\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  text-transform: uppercase;\n}\n\n.results z-list-element {\n  display: block;\n}\n\n.results z-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n}\n\n.results z-list-element > .list-element > z-tag {\n  border: 1px solid var(--gray800);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n  --z-icon-height: 12px;\n  --z-icon-width: 12px;\n\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  color: var(--color-default-text);\n  column-gap: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n  font-size: var(--font-size-2);\n  line-height: var(--font-size-3);\n}\n\n.results .item.ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n  background: var(--color-primary03);\n}\n\n.results .item.has-category {\n  padding-left: calc(var(--space-unit) * 3);\n}\n\n.results .item.item-search {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  font-size: var(--font-size-2);\n  font-style: italic;\n  line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .results .category-heading {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item.item-search {\n    --z-icon-height: 18px;\n    --z-icon-width: 18px;\n  }\n\n  .results .item.ellipsis > .item-label {\n    height: 24px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  .results .item {\n    cursor: pointer;\n  }\n\n  .results .item-no-results {\n    cursor: default;\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n:host([size=\"small\"])::part(list-item-container) {\n  min-height: calc(var(--space-unit) * 4.5);\n  padding: 0;\n}\n\n:host([size=\"x-small\"])::part(list-item-container) {\n  min-height: calc(var(--space-unit) * 4);\n  padding: 0;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  Device,\n  ListDividerType,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/**\n * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n */\n@Component({\n  tag: \"z-searchbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSearchbar {\n  /** the id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown - default all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Truncate results to single row */\n  @Prop()\n  resultsEllipsis?: boolean = true;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Set button icon without label*/\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount = 0;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @Element() element: HTMLZSearchbarElement;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  private resizeObserver: ResizeObserver;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  private emitSearchTyping(search: string): void {\n    this.searchTyping.emit(search);\n  }\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.emitSearchTyping(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (getDevice() === Device.MOBILE && !this.isMobile) {\n        this.isMobile = true;\n      }\n      if (getDevice() !== Device.MOBILE && this.isMobile) {\n        this.isMobile = false;\n      }\n    });\n    this.resizeObserver.observe(this.element);\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n    this.currResultsCount = this.resultsCount;\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n    const groupedItems = {};\n    items.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private checkResultsCount(counter: number): boolean {\n    if (!this.currResultsCount || counter < this.currResultsCount) {\n      return true;\n    }\n\n    return false;\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n\n    const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n    if (!searchbar || (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n      this.showResults = false;\n\n      return;\n    }\n\n    if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" || elem?.classList?.contains(\"results\"))) {\n      this.showResults = true;\n\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        ref={(val) => {\n          this.inputRef = val;\n        }}\n        message={false}\n        placeholder={this.placeholder}\n        onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n        onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n        value={this.value}\n        ariaLabel={this.placeholder}\n        size={this.size}\n      />\n    );\n  }\n\n  private renderButton(): HTMLZButtonElement | null {\n    if (!this.showSearchButton) {\n      return null;\n    }\n\n    const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n    const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n    const defaultProps = {\n      disabled: this.preventSubmit,\n      variant: this.variant,\n      size: this.size,\n      onClick: () => this.handleSubmit(),\n      ...iconProp,\n    };\n\n    return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n  }\n\n  private renderResults(): HTMLDivElement | null {\n    if (\n      !this.showResults ||\n      !this.autocomplete ||\n      !this.searchString ||\n      this.searchString.length < this.autocompleteMinChars ||\n      !this.resultsItemsList\n    ) {\n      return null;\n    }\n\n    return (\n      <div class=\"results-wrapper\">\n        <div class=\"results\">{this.renderResultsList()}</div>\n      </div>\n    );\n  }\n\n  private renderResultsList(): HTMLZListElement | HTMLSpanElement {\n    if (this.preventSubmit && !this.resultsItemsList?.length) {\n      return (\n        <span class=\"item item-no-results\">\n          Non abbiamo trovato risultati per <b>{this.searchString}</b>\n          <br />\n          <br />\n          Cosa puoi fare?\n          <ul>\n            <li>Verificare di aver scritto bene</li>\n            <li>Provare a cercare un'altra parola</li>\n            <li>Provare a cercare qualcosa di più generico</li>\n          </ul>\n        </span>\n      );\n    }\n\n    return (\n      <z-list\n        role=\"listbox\"\n        id={`list-${this.htmlid}`}\n      >\n        {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n        {this.renderItems()}\n        {this.renderShowAllResults()}\n      </z-list>\n    );\n  }\n\n  private renderItems(): HTMLZListGroupElement[] {\n    if (!this.resultsItemsList?.length) {\n      return [];\n    }\n\n    const groupedItems = this.getGroupedItems(this.resultsItemsList);\n    const listGroups: HTMLZListGroupElement[] = [];\n    let counter = 0;\n\n    Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n      if (this.checkResultsCount(counter)) {\n        const listGroupsElements: HTMLZListElement[] = [];\n        groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n          if (this.checkResultsCount(counter)) {\n            const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n            listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n          }\n          counter++;\n        });\n\n        if (listGroupsElements.length) {\n          listGroups.push(\n            <z-list-group divider-type={ListDividerType.ELEMENT}>\n              {this.renderItemCategory(groupItem)}\n              {listGroupsElements}\n            </z-list-group>\n          );\n        }\n      }\n    });\n\n    return listGroups;\n  }\n\n  private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${key}`}\n        role=\"option\"\n        tabindex={0}\n        dividerType={divider ? ListDividerType.ELEMENT : undefined}\n        clickable\n        onClickItem={() => this.emitSearchItemClick(item)}\n      >\n        <div class=\"list-element\">\n          <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\n            {item?.icon && (\n              <z-icon\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class=\"item-label\"\n              title={item.label}\n              innerHTML={this.renderItemLabel(item.label)}\n            />\n          </span>\n          {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement | null {\n    if (!groupItem?.category) {\n      return null;\n    }\n\n    return (\n      <span\n        class=\"category-heading\"\n        slot=\"header-title\"\n      >\n        <span class=\"category\">{groupItem.category}</span>\n        {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n      </span>\n    );\n  }\n\n  private renderSearchHelper(hasDivider = true): HTMLZListElement | null {\n    if (!this.autocomplete || this.preventSubmit || !this.searchString) {\n      return null;\n    }\n\n    return (\n      <z-list-element\n        role=\"option\"\n        tabindex={0}\n        dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n        clickable\n        id={`list-item-${this.htmlid}-search`}\n        onClickItem={() => this.emitSearchSubmit()}\n      >\n        <span class=\"item item-search\">\n          <z-icon\n            class=\"search-icon\"\n            name=\"left-magnifying-glass\"\n          />\n          <span\n            class=\"item-label\"\n            innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n          />\n        </span>\n      </z-list-element>\n    );\n  }\n\n  private renderShowAllResults(): HTMLZListElement | null {\n    if (\n      !this.currResultsCount ||\n      !this.searchString ||\n      !this.resultsItemsList?.length ||\n      this.currResultsCount >= this.resultsItemsList?.length\n    ) {\n      return null;\n    }\n\n    return (\n      <z-list-element\n        role=\"option\"\n        tabindex={0}\n        clickable\n        id={`list-item-${this.htmlid}-show-all`}\n        onClickItem={() => (this.currResultsCount = 0)}\n        color=\"color-primary01\"\n      >\n        <div class=\"item-show-all\">Vedi tutti i risultati</div>\n      </z-list-element>\n    );\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          {this.renderInput()}\n          {this.renderResults()}\n        </div>\n        {this.renderButton()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index23.js","mappings":"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","names":[],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 44px;\n\n  z-index: 15;\n  display: flex;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host::part(list-item-container) {\n  display: block;\n  min-height: unset;\n  padding: 0;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.results-wrapper {\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  width: 100%;\n  padding: calc(var(--space-unit) / 4);\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-top: none;\n  background: var(--color-surface01);\n}\n\n.results {\n  overflow: auto;\n  max-height: var(--z-searchbar-results-height, 540px);\n  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.results .category-heading {\n  display: block;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n  display: block;\n}\n\n.results .category-heading > .category {\n  color: var(--color-text05);\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  text-transform: uppercase;\n}\n\n.results z-list-element {\n  position: relative;\n  display: block;\n}\n\nz-list-element > .item-search {\n  padding: var(--space-unit) 0;\n}\n\nz-list z-list-element::before {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -20px;\n  width: 8px;\n  height: 1em;\n  border-bottom: 1px solid var(--color-disabled01-icon);\n  border-left: 1px solid var(--color-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -20px;\n  width: 8px;\n  height: 100%;\n  border-left: 1px solid var(--color-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element:last-child::after {\n  display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 3);\n}\n\n.results z-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1.25) 0;\n  cursor: pointer;\n}\n\n.results z-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\n.results z-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: block;\n  width: 100%;\n  height: 44px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.results z-list-element > .list-element:hover,\n.results z-list-element > .list-element:hover::after {\n  background-color: var(--color-surface02);\n  cursor: pointer;\n}\n\n.results z-list-element > .list-element > z-tag {\n  border: 1px solid var(--gray800);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n  --z-icon-height: 12px;\n  --z-icon-width: 12px;\n\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  color: var(--color-default-text);\n  column-gap: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n  font-size: var(--font-size-2);\n  line-height: var(--font-size-6);\n}\n\n.results .item.ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n  background: var(--color-primary03);\n}\n\n.results .item.item-search {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  font-size: var(--font-size-2);\n  font-style: italic;\n  line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .results .category-heading {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item.item-search {\n    --z-icon-height: 18px;\n    --z-icon-width: 18px;\n  }\n\n  .results .item.ellipsis > .item-label {\n    height: 24px;\n  }\n\n  .results z-list-element > .list-element > z-tag {\n    min-width: max-content;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  .results .item {\n    cursor: pointer;\n  }\n\n  .results .item-no-results {\n    cursor: default;\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n:host([size=\"small\"]) z-list-element > .list-element,\n:host([size=\"small\"]) z-list-element > .item-search {\n  padding: calc(var(--space-unit) * 0.75) 0;\n}\n\n:host([size=\"x-small\"]) z-list-element > .list-element,\n:host([size=\"x-small\"]) z-list-element > .item-search {\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"small\"]) z-list-element .list-element::after {\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) z-list-element .list-element::after {\n  height: 32px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  Device,\n  ListDividerType,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/**\n * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n */\n@Component({\n  tag: \"z-searchbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSearchbar {\n  /** the id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown - default all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Set button icon without label*/\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount = 0;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @Element() element: HTMLZSearchbarElement;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  private resizeObserver: ResizeObserver;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  private emitSearchTyping(search: string): void {\n    this.searchTyping.emit(search);\n  }\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.emitSearchTyping(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (getDevice() === Device.MOBILE && !this.isMobile) {\n        this.isMobile = true;\n      }\n      if (getDevice() !== Device.MOBILE && this.isMobile) {\n        this.isMobile = false;\n      }\n    });\n    this.resizeObserver.observe(this.element);\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n    this.currResultsCount = this.resultsCount;\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n    const groupedItems = {};\n    items.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private checkResultsCount(counter: number): boolean {\n    if (!this.currResultsCount || counter < this.currResultsCount) {\n      return true;\n    }\n\n    return false;\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n\n    const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n    if (!searchbar || (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n      this.showResults = false;\n\n      return;\n    }\n\n    if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" || elem?.classList?.contains(\"results\"))) {\n      this.showResults = true;\n\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        ref={(val) => {\n          this.inputRef = val;\n        }}\n        message={false}\n        placeholder={this.placeholder}\n        onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n        onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n        value={this.value}\n        ariaLabel={this.placeholder}\n        size={this.size}\n      />\n    );\n  }\n\n  private renderButton(): HTMLZButtonElement | null {\n    if (!this.showSearchButton) {\n      return null;\n    }\n\n    const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n    const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n    const defaultProps = {\n      disabled: this.preventSubmit,\n      variant: this.variant,\n      size: this.size,\n      onClick: () => this.handleSubmit(),\n      ...iconProp,\n    };\n\n    return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n  }\n\n  private renderResults(): HTMLDivElement | null {\n    if (\n      !this.showResults ||\n      !this.autocomplete ||\n      !this.searchString ||\n      this.searchString.length < this.autocompleteMinChars ||\n      !this.resultsItemsList\n    ) {\n      return null;\n    }\n\n    return (\n      <div class=\"results-wrapper\">\n        <div class=\"results\">{this.renderResultsList()}</div>\n      </div>\n    );\n  }\n\n  private renderResultsList(): HTMLZListElement | HTMLSpanElement {\n    if (this.preventSubmit && !this.resultsItemsList?.length) {\n      return (\n        <span class=\"item item-no-results\">\n          Non abbiamo trovato risultati per <b>{this.searchString}</b>\n          <br />\n          <br />\n          Cosa puoi fare?\n          <ul>\n            <li>Verificare di aver scritto bene</li>\n            <li>Provare a cercare un'altra parola</li>\n            <li>Provare a cercare qualcosa di più generico</li>\n          </ul>\n        </span>\n      );\n    }\n\n    return (\n      <z-list\n        role=\"listbox\"\n        id={`list-${this.htmlid}`}\n      >\n        {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n        {this.renderItems()}\n        {this.renderShowAllResults()}\n      </z-list>\n    );\n  }\n\n  private renderItems(): HTMLZListGroupElement[] {\n    if (!this.resultsItemsList?.length) {\n      return [];\n    }\n\n    const groupedItems = this.getGroupedItems(this.resultsItemsList);\n    const listGroups: HTMLZListGroupElement[] = [];\n    let counter = 0;\n\n    Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n      if (this.checkResultsCount(counter)) {\n        const listGroupsElements: HTMLZListElement[] = [];\n        groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n          if (this.checkResultsCount(counter)) {\n            const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n            listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n          }\n          counter++;\n        });\n\n        if (listGroupsElements.length) {\n          listGroups.push(\n            <z-list-group divider-type={ListDividerType.ELEMENT}>\n              {this.renderItemCategory(groupItem)}\n              {listGroupsElements}\n            </z-list-group>\n          );\n        }\n      }\n    });\n\n    return listGroups;\n  }\n\n  private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${key}`}\n        role=\"option\"\n        tabindex={0}\n        dividerType={divider ? ListDividerType.ELEMENT : undefined}\n      >\n        <div\n          class=\"list-element\"\n          onClick={() => this.emitSearchItemClick(item)}\n        >\n          <span class=\"item ellipsis\">\n            {item?.icon && (\n              <z-icon\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class=\"item-label\"\n              title={item.label}\n              innerHTML={this.renderItemLabel(item.label)}\n            />\n          </span>\n          {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {item.children && item.children.length > 0 ? (\n          <z-list>\n            <div class=\"children-node\">{item.children.map((child, index) => this.renderItem(child, index, false))}</div>\n          </z-list>\n        ) : null}\n      </z-list-element>\n    );\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement | null {\n    if (!groupItem?.category) {\n      return null;\n    }\n\n    return (\n      <span\n        class=\"category-heading\"\n        slot=\"header-title\"\n      >\n        <span class=\"category\">{groupItem.category}</span>\n        {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n      </span>\n    );\n  }\n\n  private renderSearchHelper(hasDivider = true): HTMLZListElement | null {\n    if (!this.autocomplete || this.preventSubmit || !this.searchString) {\n      return null;\n    }\n\n    return (\n      <z-list-element\n        role=\"option\"\n        tabindex={0}\n        dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n        clickable\n        id={`list-item-${this.htmlid}-search`}\n        onClickItem={() => this.emitSearchSubmit()}\n      >\n        <span class=\"item item-search\">\n          <z-icon\n            class=\"search-icon\"\n            name=\"left-magnifying-glass\"\n          />\n          <span\n            class=\"item-label\"\n            innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n          />\n        </span>\n      </z-list-element>\n    );\n  }\n\n  private renderShowAllResults(): HTMLZListElement | null {\n    if (\n      !this.currResultsCount ||\n      !this.searchString ||\n      !this.resultsItemsList?.length ||\n      this.currResultsCount >= this.resultsItemsList?.length\n    ) {\n      return null;\n    }\n\n    return (\n      <z-list-element\n        role=\"option\"\n        tabindex={0}\n        clickable\n        id={`list-item-${this.htmlid}-show-all`}\n        onClickItem={() => (this.currResultsCount = 0)}\n        color=\"color-primary01\"\n      >\n        <div class=\"item-show-all\">Vedi tutti i risultati</div>\n      </z-list-element>\n    );\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          {this.renderInput()}\n          {this.renderResults()}\n        </div>\n        {this.renderButton()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index24.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './index9.js';
 
-const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.expandable.sc-z-tag-h>z-icon.sc-z-tag{transition:margin-right 0.3s ease-out}.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag,.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
+const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.expandable.sc-z-tag-h>z-icon.sc-z-tag{transition:margin-right 0.3s ease-out}.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag,.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}.sc-z-tag-h>z-icon.sc-z-tag:has(+div.sc-z-tag:empty){margin-right:0}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
 const ZTagStyle0 = stylesCss;
 
 const ZTag = /*@__PURE__*/ proxyCustomElement(class ZTag extends HTMLElement {

package/dist/components/index24.js.map

@@ -1 +1 @@
-{"file":"index24.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,q5BAAq5B,CAAC;AACx6B,mBAAe,SAAS;;MCaX,IAAI;;;;;;;IASf,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC3C,IAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DACE,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n\n  display: flex;\n  width: fit-content;\n  max-width: inherit;\n  height: fit-content;\n  max-height: inherit;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) / 2);\n  background-color: var(--z-tag-bg, var(--color-hover-primary));\n  border-radius: var(--border-radius);\n  color: var(--z-tag-text-color, var(--color-text-inverse));\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 14px;\n  text-transform: uppercase;\n}\n\n:host(.expandable) > z-icon {\n  transition: margin-right 0.3s ease-out;\n}\n\n:host(:not(.expandable)) > z-icon,\n:host(.expandable:hover) > z-icon {\n  margin-right: var(--space-unit);\n  transition: margin-right 0.3s ease-out 0s;\n}\n\n:host(.expandable) > div {\n  overflow: hidden;\n  max-width: 0;\n  max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n  max-width: 100%;\n  max-height: 100%;\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag {\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    return (\n      <Host\n        class={{\n          expandable: this.expandable && !!this.icon,\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index24.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,y9BAAy9B,CAAC;AAC5+B,mBAAe,SAAS;;MCaX,IAAI;;;;;;;IASf,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC3C,IAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DACE,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n\n  display: flex;\n  width: fit-content;\n  max-width: inherit;\n  height: fit-content;\n  max-height: inherit;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) / 2);\n  background-color: var(--z-tag-bg, var(--color-hover-primary));\n  border-radius: var(--border-radius);\n  color: var(--z-tag-text-color, var(--color-text-inverse));\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 14px;\n  text-transform: uppercase;\n}\n\n:host(.expandable) > z-icon {\n  transition: margin-right 0.3s ease-out;\n}\n\n:host(:not(.expandable)) > z-icon,\n:host(.expandable:hover) > z-icon {\n  margin-right: var(--space-unit);\n  transition: margin-right 0.3s ease-out 0s;\n}\n\n:host > z-icon:has(+ div:empty) {\n  margin-right: 0;\n}\n\n:host(.expandable) > div {\n  overflow: hidden;\n  max-width: 0;\n  max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n  max-width: 100%;\n  max-height: 100%;\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag {\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    return (\n      <Host\n        class={{\n          expandable: this.expandable && !!this.icon,\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-card.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { C as CardVariant } from './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
 
-const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
+const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 const ZCardStyle0 = stylesCss;
 
 const ZCard$1 = /*@__PURE__*/ proxyCustomElement(class ZCard extends HTMLElement {
@@ -30,20 +30,20 @@ const ZCard$1 = /*@__PURE__*/ proxyCustomElement(class ZCard extends HTMLElement
         ];
     }
     /**
-     * Template for the content div.
+     * Template for the content.
      */
-    renderContentDiv() {
+    renderContent() {
         return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
     }
     render() {
         if (this.variant === CardVariant.TEXT) {
-            return h(Host, null, this.renderContentDiv());
+            return h(Host, null, this.renderContent());
         }
         if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
             return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
                 h("slot", { name: "cover" }),
                 this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
+            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContent()));
         }
         return h(Host, null, this.renderColorCoverCard());
     }

package/dist/components/z-card.js.map

@@ -1 +1 @@
-{"file":"z-card.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wiIAAwiI,CAAC;AAC3jI,oBAAe,SAAS;;MCsBXA,OAAK;;;;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,gBAAgB;QACtB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAQ,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,gBAAgB,EAAE,CACnB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCard"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  color: inherit;\n  font-size: inherit;\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable 'clickable' style like hover and focus style. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content div.\n   */\n  private renderContentDiv(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContentDiv()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContentDiv()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"version":3}
+{"file":"z-card.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,4pIAA4pI,CAAC;AAC/qI,oBAAe,SAAS;;MCsBXA,OAAK;;;;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,aAAa;QACnB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCard"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  color: inherit;\n  font-size: inherit;\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"version":3}

package/dist/components/z-select.js

@@ -1,15 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { e as ControlSize, g as KeyboardCode, l as ListDividerType, i as ListSize } from './index2.js';
 import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, d as getClickedElement } from './utils.js';
-import { d as defineCustomElement$8 } from './index6.js';
-import { d as defineCustomElement$7 } from './index9.js';
-import { d as defineCustomElement$6 } from './index10.js';
-import { d as defineCustomElement$5 } from './index11.js';
-import { d as defineCustomElement$4 } from './index12.js';
-import { d as defineCustomElement$3 } from './index13.js';
-import { d as defineCustomElement$2 } from './index14.js';
+import { d as defineCustomElement$9 } from './index6.js';
+import { d as defineCustomElement$8 } from './index9.js';
+import { d as defineCustomElement$7 } from './index10.js';
+import { d as defineCustomElement$6 } from './index11.js';
+import { d as defineCustomElement$5 } from './index12.js';
+import { d as defineCustomElement$4 } from './index13.js';
+import { d as defineCustomElement$3 } from './index14.js';
+import { d as defineCustomElement$2 } from './index24.js';
 
-const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size=\"small\"].sc-z-select-h,[size=\"x-small\"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding-left:calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) 0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size=\"small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}";
+const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size=\"small\"].sc-z-select-h,[size=\"x-small\"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;justify-content:space-between;padding-left:calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) 0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-tag.sc-z-select{margin-right:calc(var(--space-unit))}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size=\"small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}";
 const ZSelectStyle0 = stylesCss;
 
 const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLElement {
@@ -280,10 +281,10 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
             }, onKeyDown: (e) => this.arrowsSelectNav(e, 0) }, h("div", { class: "reset-item-content" }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
     }
     renderItem(item, key, lastItem) {
-        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": item.selected ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, item.icon && h("z-icon", { name: item.icon }), h("span", { class: {
+        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": item.selected ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, h("span", { class: {
                 "selected": !!item.selected,
                 "list-element-content": true,
-            }, innerHTML: item.name }))));
+            }, innerHTML: item.name }), item.icon && h("z-tag", { icon: item.icon }))));
     }
     listSizeType() {
         if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {
@@ -329,7 +330,7 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
     }
     render() {
-        return (h("div", { key: '7cff5f68badfbedf3c8f6e9a5d8bbdaa89ed8a98', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '16a8b264460cb21cd19258694e04f7c58ca5bc26', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -368,7 +369,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-select", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group"];
+    const components = ["z-select", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group", "z-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "z-select":
             if (!customElements.get(tagName)) {
@@ -377,35 +378,40 @@ function defineCustomElement$1() {
             break;
         case "z-divider":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "z-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "z-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "z-input-message":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "z-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "z-list-element":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "z-list-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-tag":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }