@zanichelli/albe-web-components 12.4.0 → 12.4.1

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

@@ -0,0 +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

@@ -0,0 +1,386 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZSearchbar } from "./index";
+describe("Suite test ZSearchbar", () => {
+    it("Simple searchbar", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar htmlid="my-id" show-search-button="true"></z-searchbar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-searchbar class="has-submit" htmlid="my-id" show-search-button="true">
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+          </div>
+          <z-button size="big" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar without search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar htmlid="my-id" autocomplete="true" prevent-submit="true"></z-searchbar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-searchbar class="has-results" htmlid="my-id" autocomplete="true" prevent-submit="true">
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+          </div>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar with search and results - no input search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        show-search-button="true"
+      ></z-searchbar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-searchbar
+        class="has-submit has-results"
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        show-search-button="true"
+      >
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+          </div>
+          <z-button size="big" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar with search and results - with input search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        show-search-button="true"
+      ></z-searchbar>`,
+        });
+        page.rootInstance.searchString = "item";
+        page.rootInstance.showResults = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-searchbar
+        class="has-submit has-results"
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        show-search-button="true"
+      >
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+            <div class="results-wrapper">
+              <div class="results">
+                <z-list role="listbox" id="list-my-id">
+                  ${searchHelper()}
+                  ${resultsItems()}
+                </z-list>
+              </div>
+            </div>
+          </div>
+          <z-button size="big" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar with search and limited results - with input search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        results-count="1"
+        show-search-button="true"
+      ></z-searchbar>`,
+        });
+        page.rootInstance.searchString = "item";
+        page.rootInstance.showResults = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-searchbar
+        class="has-submit has-results"
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        results-count="1"
+        show-search-button="true"
+      >
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+            <div class="results-wrapper">
+              <div class="results">
+                <z-list role="listbox" id="list-my-id">
+                  ${searchHelper()}
+                  <z-list-group divider-type="element">
+                    <z-list-element
+                      id="list-item-my-id-0"
+                      role="option"
+                      tabindex="0"
+                      dividerType="element"
+                      clickable
+                    >
+                      <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>
+                    </z-list-element>
+                  </z-list-group>
+                  ${showAllResults()}
+                </z-list>
+              </div>
+            </div>
+          </div>
+          <z-button size="big" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar with search and limited results (show all) - with input search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        show-search-button="true"
+      ></z-searchbar>`,
+        });
+        page.rootInstance.searchString = "item";
+        page.rootInstance.showResults = true;
+        page.rootInstance.currResultsCount = 0;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-searchbar
+        class="has-submit has-results"
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='${JSON.stringify(getItems())}'
+        show-search-button="true"
+      >
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+            <div class="results-wrapper">
+              <div class="results">
+                <z-list role="listbox" id="list-my-id">
+                  ${searchHelper()}
+                  ${resultsItems()}
+                </z-list>
+              </div>
+            </div>
+          </div>
+          <z-button size="big" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar without search and no results - with input search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar
+        htmlid="my-id"
+        autocomplete="true"
+        prevent-submit="true"
+        results-items='[]'
+      ></z-searchbar>`,
+        });
+        page.rootInstance.searchString = "item";
+        page.rootInstance.showResults = true;
+        page.rootInstance.currResultsCount = 0;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-searchbar
+        class="has-results"
+        htmlid="my-id"
+        autocomplete="true"
+        prevent-submit="true"
+        results-items="[]"
+      >
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+            <div class="results-wrapper">
+              <div class="results">
+                <span class="item item-no-results">
+                  Non abbiamo trovato risultati per <b>item</b>
+                  <br /><br />
+                  Cosa puoi fare?
+                  <ul>
+                    <li>Verificare di aver scritto bene</li>
+                    <li>Provare a cercare un'altra parola</li>
+                    <li>Provare a cercare qualcosa di più generico</li>
+                  </ul>
+                </span>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Autocomplete searchbar with search and no results - with input search", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='[]'
+        show-search-button="true"
+      ></z-searchbar>`,
+        });
+        page.rootInstance.searchString = "item";
+        page.rootInstance.showResults = true;
+        page.rootInstance.currResultsCount = 0;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-searchbar
+        class="has-submit has-results"
+        htmlid="my-id"
+        autocomplete="true"
+        results-items='[]'
+        show-search-button="true"
+      >
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+            <div class="results-wrapper">
+              <div class="results">
+                <z-list role="listbox" id="list-my-id">
+                  ${searchHelper(false)}
+                </z-list>
+              </div>
+            </div>
+          </div>
+          <z-button size="big" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Simple searchbar change size", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar htmlid="my-id" show-search-button="true" size="small"></z-searchbar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-searchbar class="has-submit" htmlid="my-id" show-search-button="true" size="small">
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="small"></z-input>
+          </div>
+          <z-button size="small" variant="primary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Simple searchbar change button variant", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar htmlid="my-id" show-search-button="true" variant="secondary"></z-searchbar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-searchbar class="has-submit" htmlid="my-id" show-search-button="true" variant="secondary">
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+          </div>
+          <z-button size="big" variant="secondary">CERCA</z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+    it("Simple searchbar only icon button", async () => {
+        const page = await newSpecPage({
+            components: [ZSearchbar],
+            html: `<z-searchbar htmlid="my-id" show-search-button="true" search-button-icon-only="true"></z-searchbar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-searchbar class="has-submit" htmlid="my-id" show-search-button="true" search-button-icon-only="true">
+        <mock:shadow-root>
+          <div class="input-container">
+            <z-input size="big"></z-input>
+          </div>
+          <z-button icon="search" size="big" variant="primary"></z-button>
+        </mock:shadow-root>
+      </z-searchbar>
+    `);
+    });
+});
+const getItems = () => [{ label: "item 1", icon: "download" }, { label: "item 2" }, { label: "item 3" }];
+const resultsItems = () => `
+  <z-list-group divider-type="element">
+    <z-list-element
+      id="list-item-my-id-0"
+      role="option"
+      tabindex="0"
+      dividerType="element"
+      clickable
+    >
+      <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>
+    </z-list-element>
+    <z-list-element
+      id="list-item-my-id-1"
+      role="option"
+      tabindex="0"
+      dividerType="element"
+      clickable
+    >
+      <span class="item ellipsis">
+        <span class="item-label" title="item 2"><mark>item</mark> 2</span>
+      </span>
+    </z-list-element>
+    <z-list-element
+      id="list-item-my-id-2"
+      role="option"
+      tabindex="0"
+      clickable
+    >
+      <span class="item ellipsis">
+        <span class="item-label" title="item 3"><mark>item</mark> 3</span>
+      </span>
+    </z-list-element>
+  </z-list-group>`;
+const searchHelper = (divider = true) => `
+  <z-list-element
+    role="option"
+    tabindex="0"
+    ${divider ? `dividerType="element"` : ``}
+    id="list-item-my-id-search"
+    clickable
+  >
+    <span class="item item-search">
+      <z-icon class="search-icon" name="left-magnifying-glass"></z-icon>
+      <span class="item-label">Cerca <mark>item</mark></span>
+    </span>
+  </z-list-element>
+`;
+const showAllResults = () => `
+  <z-list-element
+    role="option"
+    tabindex="0"
+    id="list-item-my-id-show-all"
+    clickable
+    color="color-primary01"
+  >
+    <div class="item-show-all">Vedi tutti i risultati</div>
+  </z-list-element>
+`;
+//# sourceMappingURL=index.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-searchbar/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sFAAsF;SAC7F,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;yBAGa,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;sBAE7B;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;yBAKT,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;;;;;;;;KAU9C,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;yBAGa,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;sBAE7B;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,MAAM,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC;QACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;yBAKT,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;;;;;;;oBAS/B,YAAY,EAAE;oBACd,YAAY,EAAE;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;yBAGa,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;sBAG7B;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,MAAM,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC;QACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;yBAKT,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;;;;;;;;oBAU/B,YAAY,EAAE;;;;;;;;;;;;;;;oBAed,cAAc,EAAE;;;;;;;;KAQ/B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uFAAuF,EAAE,KAAK,IAAI,EAAE;QACrG,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;yBAGa,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;sBAE7B;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,MAAM,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC;QACrC,IAAI,CAAC,YAAY,CAAC,gBAAgB,GAAG,CAAC,CAAC;QACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;yBAKT,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;;;;;;;;;oBAS/B,YAAY,EAAE;oBACd,YAAY,EAAE;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,KAAK,IAAI,EAAE;QACxF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;sBAKU;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,MAAM,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC;QACrC,IAAI,CAAC,YAAY,CAAC,gBAAgB,GAAG,CAAC,CAAC;QACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;sBAKU;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,MAAM,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC;QACrC,IAAI,CAAC,YAAY,CAAC,gBAAgB,GAAG,CAAC,CAAC;QACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;oBAcd,YAAY,CAAC,KAAK,CAAC;;;;;;;;KAQlC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,mFAAmF;SAC1F,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,0FAA0F;SACjG,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,qGAAqG;SAC5G,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAC,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;AAEnG,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmCT,CAAC;AAEnB,MAAM,YAAY,GAAG,CAAC,UAAmB,IAAI,EAAE,EAAE,CAAC;;;;MAI5C,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;CAS3C,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;;;;;;;;;;CAU5B,CAAC","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"]}