npm - @zanichelli/albe-web-components - Versions diffs - 12.4.2-rc2 → 12.5.0 - Mend

@zanichelli/albe-web-components 12.4.2-rc2 → 12.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/dist/collection/components/inputs/z-searchbar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-searchbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch, Element} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n ControlSize,\n Device,\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 /\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 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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-searchbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n ControlSize,\n} from \"../../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\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 private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\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 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 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 <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 </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"]}

package/dist/collection/components/inputs/z-searchbar/index.spec.js CHANGED Viewed

@@ -1,10 +1,5 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { ZSearchbar } from "./index";
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
 describe("Suite test ZSearchbar", () => {
     it("Simple searchbar", async () => {
         const page = await newSpecPage({
@@ -140,12 +135,10 @@ describe("Suite test ZSearchbar", () => {
                       dividerType="element"
                       clickable
                     >
-                    <div class="list-element">
                       <span class="item ellipsis">
                         <z-icon class="item-icon" name="download"></z-icon>
                         <span class="item-label" title="item 1"><mark>item</mark> 1</span>
                       </span>
-                    </div>
                     </z-list-element>
                   </z-list-group>
                   ${showAllResults()}
@@ -338,12 +331,10 @@ const resultsItems = () => `
       dividerType="element"
       clickable
     >
-    <div class="list-element">
       <span class="item ellipsis">
         <z-icon class="item-icon" name="download"></z-icon>
         <span class="item-label" title="item 1"><mark>item</mark> 1</span>
       </span>
-    </div>
     </z-list-element>
     <z-list-element
       id="list-item-my-id-1"
@@ -352,11 +343,9 @@ const resultsItems = () => `
       dividerType="element"
       clickable
     >
-    <div class="list-element">
       <span class="item ellipsis">
         <span class="item-label" title="item 2"><mark>item</mark> 2</span>
       </span>
-    </div>
     </z-list-element>
     <z-list-element
       id="list-item-my-id-2"
@@ -364,11 +353,9 @@ const resultsItems = () => `
       tabindex="0"
       clickable
     >
-    <div class="list-element">
       <span class="item ellipsis">
         <span class="item-label" title="item 3"><mark>item</mark> 3</span>
       </span>
-    </div>
     </z-list-element>
   </z-list-group>`;
 const searchHelper = (divider = true) => `

package/dist/collection/components/inputs/z-searchbar/index.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-searchbar/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSearchbar} from \"./index\";\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n}));\n\ndescribe(\"Suite test ZSearchbar\", () => {\n it(\"Simple searchbar\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-results\" htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - no input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </div>\n </z-list-element>\n </z-list-group>\n ${showAllResults()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results (show all) - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items='[]'\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items=\"[]\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>item</b>\n <br /><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 </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper(false)}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change size\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" size=\"small\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" size=\"small\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"small\"></z-input>\n </div>\n <z-button size=\"small\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change button variant\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"secondary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar only icon button\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button icon=\"search\" size=\"big\" variant=\"primary\"></z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n});\n\nconst getItems = () => [{label: \"item 1\", icon: \"download\"}, {label: \"item 2\"}, {label: \"item 3\"}];\n\nconst resultsItems = () => `\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </div>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-1\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 2\"><mark>item</mark> 2</span>\n </span>\n </div>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-2\"\n role=\"option\"\n tabindex=\"0\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 3\"><mark>item</mark> 3</span>\n </span>\n </div>\n </z-list-element>\n </z-list-group>`;\n\nconst searchHelper = (divider: boolean = true) => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n ${divider ? `dividerType=\"element\"` : ``}\n id=\"list-item-my-id-search\"\n clickable\n >\n <span class=\"item item-search\">\n <z-icon class=\"search-icon\" name=\"left-magnifying-glass\"></z-icon>\n <span class=\"item-label\">Cerca <mark>item</mark></span>\n </span>\n </z-list-element>\n`;\n\nconst showAllResults = () => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n id=\"list-item-my-id-show-all\"\n clickable\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n`;\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-searchbar/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSearchbar} from \"./index\";\n\ndescribe(\"Suite test ZSearchbar\", () => {\n it(\"Simple searchbar\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-results\" htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - no input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </z-list-element>\n </z-list-group>\n ${showAllResults()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results (show all) - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items='[]'\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items=\"[]\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>item</b>\n <br /><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 </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper(false)}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change size\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" size=\"small\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" size=\"small\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"small\"></z-input>\n </div>\n <z-button size=\"small\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change button variant\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"secondary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar only icon button\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button icon=\"search\" size=\"big\" variant=\"primary\"></z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n});\n\nconst getItems = () => [{label: \"item 1\", icon: \"download\"}, {label: \"item 2\"}, {label: \"item 3\"}];\n\nconst resultsItems = () => `\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-1\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 2\"><mark>item</mark> 2</span>\n </span>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-2\"\n role=\"option\"\n tabindex=\"0\"\n clickable\n >\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 3\"><mark>item</mark> 3</span>\n </span>\n </z-list-element>\n </z-list-group>`;\n\nconst searchHelper = (divider: boolean = true) => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n ${divider ? `dividerType=\"element\"` : ``}\n id=\"list-item-my-id-search\"\n clickable\n >\n <span class=\"item item-search\">\n <z-icon class=\"search-icon\" name=\"left-magnifying-glass\"></z-icon>\n <span class=\"item-label\">Cerca <mark>item</mark></span>\n </span>\n </z-list-element>\n`;\n\nconst showAllResults = () => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n id=\"list-item-my-id-show-all\"\n clickable\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n`;\n"]}

package/dist/collection/components/inputs/z-searchbar/styles.css CHANGED Viewed

@@ -78,20 +78,6 @@
   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: white;
-  --z-tag-text-color: var(--color-text01);
-}
 .results .item {
   --z-icon-height: 12px;
   --z-icon-width: 12px;

package/dist/collection/components/z-carousel/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { h, Host } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ControlSize } from "../../beans";
+import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant } from "../../beans";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
- * @slot - carousel items. use `<li>` elements inside this slot as it is wrapped inside an `<ul>`
+ * @slot - Carousel items. Use `<li>` elements inside this slot.
  */
 export class ZCarousel {
     constructor() {
@@ -14,7 +14,9 @@ export class ZCarousel {
         this.single = false;
         this.arrowsPosition = undefined;
         this.progressMode = undefined;
+        this.fixedArrows = true;
         this.ghostLoadingHeight = 100;
+        this.infinite = false;
         this.current = 0;
         this.items = undefined;
         this.highlightedIndicator = undefined;
@@ -29,14 +31,17 @@ export class ZCarousel {
             this.setIntersectionObserver();
         }
     }
+    onInfiniteModeChange() {
+        this.checkNavigationValidity();
+    }
     /**
      * Set an intersection observer to:
      * - highlight the indicator of the intersecting item during scroll
      * - set the current item to the last intersecting item
      */
     setIntersectionObserver() {
-        this.intersectionObserver = new window.IntersectionObserver((entries) => {
-            const entry = entries.find((entry) => entry.isIntersecting);
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            const entry = entries.find(({ isIntersecting }) => isIntersecting);
             if (!entry) {
                 return;
             }
@@ -55,38 +60,49 @@ export class ZCarousel {
         });
         this.items.forEach((element) => this.intersectionObserver.observe(element));
     }
+    /** Update items' list and check conditions to allow navigation */
+    onSlotChange() {
+        this.items = Array.from(this.host.children);
+        this.checkNavigationValidity();
+        this.setIntersectionObserver();
+        this.goTo(this.current);
+    }
     onPrev() {
         if (this.single) {
-            this.goTo(Math.max(0, this.current - 1));
+            this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));
             return;
         }
-        const scroller = this.itemsContainer;
-        if (!scroller) {
-            return;
-        }
-        scroller.scrollBy({
-            left: -scroller.clientWidth / 2,
+        this.itemsContainer.scrollBy({
+            left: this.infinite && this.itemsContainer.scrollLeft == 0
+                ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+                : -this.itemsContainer.clientWidth / 2,
             behavior: "smooth",
         });
     }
     onNext() {
         if (this.single) {
-            this.goTo(Math.min(this.current + 1, this.items.length - 1));
-            return;
+            const next = this.infinite && this.current + 1 > this.items.length - 1
+                ? 0
+                : Math.min(this.current + 1, this.items.length - 1);
+            return this.goTo(next);
         }
-        const scroller = this.itemsContainer;
-        if (!scroller) {
-            return;
-        }
-        scroller.scrollBy({
-            left: scroller.clientWidth / 2,
+        this.itemsContainer.scrollBy({
+            left: this.infinite &&
+                this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+                ? -this.itemsContainer.scrollWidth
+                : this.itemsContainer.clientWidth / 2,
             behavior: "smooth",
         });
     }
     /**
-     * Check if navigation buttons can be enabled or not and set local states.
+     * Check if navigation buttons can be enabled and set the relative local states.
      */
     checkNavigationValidity() {
+        if (this.infinite) {
+            this.canNavigateNext = true;
+            this.canNavigatePrev = true;
+            return;
+        }
         if (this.single) {
             this.canNavigatePrev = this.current > 1;
             this.canNavigateNext = this.current < this.items.length - 1;
@@ -96,51 +112,65 @@ export class ZCarousel {
             this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
     }
     /**
-     * Check if footer can be rendered.
+     * Check if footer has to be rendered.
      */
     canShowFooter() {
+        if (!this.canNavigatePrev && !this.canNavigateNext) {
+            return false;
+        }
         return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
             this.progressMode === CarouselProgressMode.DOTS ||
             this.progressMode === CarouselProgressMode.NUMBERS);
     }
     /**
      * Set current item to passed index.
-     * @param {number} index Index to set
+     * @param index Index to set
      */
     goTo(index) {
         if (this.current === index) {
             return;
         }
         this.scrollingTo = index;
+        const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);
         // the scroll will trigger the IntersectionObserver and set the current item
         this.itemsContainer.scroll({
-            left: this.items[index].offsetLeft,
+            left,
             behavior: "smooth",
         });
     }
+    /** Check if navigation of at least one direction is enabled */
+    get canNavigate() {
+        return this.canNavigatePrev || this.canNavigateNext;
+    }
+    setupItems() {
+        this.items = Array.from(this.host.children);
+        this.items.forEach((item) => {
+            item.setAttribute("role", "group");
+            item.setAttribute("aria-roledescription", "slide");
+        });
+    }
     componentDidLoad() {
-        this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
-        if (!this.itemsContainer) {
-            return;
-        }
-        this.items = Array.from(this.itemsContainer.querySelectorAll(":scope > li"));
+        this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+        this.resizeObserver.observe(this.itemsContainer);
+        this.setupItems();
         if (this.single) {
             this.setIntersectionObserver();
         }
-        this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
         this.checkNavigationValidity();
-        this.items.forEach((item) => {
-            item.setAttribute("role", "group");
-            item.setAttribute("aria-roledescription", "slide");
-        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         if (this.isLoading) {
-            return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
+            return (h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-3-sb z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null))));
         }
-        return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
+        return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "z-carousel-title heading-3-sb" }, this.label), h("div", { class: "z-carousel-wrapper" }, h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.SECONDARY, "data-direction": "prev", icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" }), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite", ref: (el) => (this.itemsContainer = el) }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })), h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.SECONDARY, "data-direction": "next", icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, hidden: this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.TERTIARY, icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_, index) => (h("button", { type: "button", class: { current: this.highlightedIndicator === index }, "aria-label": this.highlightedIndicator === index ? "Elemento corrente" : `Spostati all'elemento ${index + 1}`, onClick: () => this.goTo(index) }))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-1" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { class: "z-carousel-navigation-arrow", variant: ButtonVariant.TERTIARY, icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
     }
     static get is() { return "z-carousel"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["styles.css"]
@@ -182,7 +212,7 @@ export class ZCarousel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The z-carousel title, if given."
+                    "text": "The z-carousel title"
                 },
                 "attribute": "label",
                 "reflect": false
@@ -202,7 +232,7 @@ export class ZCarousel {
                     "text": "Shows only one content at a time"
                 },
                 "attribute": "single",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "arrowsPosition": {
@@ -226,7 +256,7 @@ export class ZCarousel {
                     "text": "Arrow buttons position"
                 },
                 "attribute": "arrows-position",
-                "reflect": false
+                "reflect": true
             },
             "progressMode": {
                 "type": "string",
@@ -246,11 +276,29 @@ export class ZCarousel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Progress indicator. Only available for `single` mode"
+                    "text": "Progress indicator type. Only available for `single` mode"
                 },
                 "attribute": "progress-mode",
                 "reflect": false
             },
+            "fixedArrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\nIf set to `false`, the arrows will not be visible on mobile.\nOnly meaningful with `arrowsPosition` set to `OVER`."
+                },
+                "attribute": "fixed-arrows",
+                "reflect": true,
+                "defaultValue": "true"
+            },
             "ghostLoadingHeight": {
                 "type": "number",
                 "mutable": false,
@@ -263,11 +311,29 @@ export class ZCarousel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
+                    "text": "The height of the ghost loader (only visible when `isLoading` is set to `true`)"
                 },
                 "attribute": "ghost-loading-height",
                 "reflect": false,
                 "defaultValue": "100"
+            },
+            "infinite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, navigating next the last item will go back to the first item and vice versa."
+                },
+                "attribute": "infinite",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -292,13 +358,13 @@ export class ZCarousel {
                     "text": "Emitted on index change and only in `single` mode."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "{currentItem: number}",
+                    "resolved": "{ currentItem: number; }",
                     "references": {}
                 }
             }];
     }
-    static get elementRef() { return "hostElement"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "current",
@@ -306,6 +372,9 @@ export class ZCarousel {
             }, {
                 "propName": "single",
                 "methodName": "onSingleModeChange"
+            }, {
+                "propName": "infinite",
+                "methodName": "onInfiniteModeChange"
             }];
     }
 }