@zanichelli/albe-web-components 12.4.1-RC1 → 12.4.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, State, Listen, Watch, Event, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, KeyboardKeyCode, ListDividerType, ControlSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCombobox {\n  /** input unique id */\n  @Prop()\n  inputid: string;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** close combobox list text */\n  @Prop()\n  closesearchtext?: string = \"Chiudi\";\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n  }\n\n  @Listen(\"inputCheck\")\n  inputCheckListener(e: CustomEvent): void {\n    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, \"\");\n\n    if (id === \"check-all\" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {\n      return this.checkAll(e.detail.checked);\n    }\n\n    this.itemsList = this.itemsList.map((item: ComboItem) => {\n      if (item.id === id) {\n        item.checked = e.detail.checked;\n      }\n\n      return item;\n    });\n    this.updateRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        item.name.substring(start, end).bold() +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private checkAll(checked = true): void {\n    this.itemsList = this.itemsList.map((item: ComboItem) => ({\n      ...item,\n      checked: checked,\n    }));\n    this.resetRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private renderHeader(): HTMLDivElement {\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(ev: KeyboardEvent) => {\n          if (ev.keyCode === KeyboardKeyCode.SPACE) {\n            ev.preventDefault();\n          }\n        }}\n        onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n        role=\"button\"\n        tabindex={0}\n      >\n        <p class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </p>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div class=\"open-combo-data\">\n        {this.hassearch && this.renderSearchInput()}\n        {this.hascheckall && this.renderCheckAll()}\n        {this.renderItems()}\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div\n        class={this.searchValue && \"search\"}\n        tabindex={-1}\n      >\n        {this.renderList(this.renderItemsList)}\n        {this.searchValue && this.renderCloseButton()}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n    return (\n      <z-myz-list-item\n        id={item.id}\n        listitemid={item.id}\n        action={`combo-li-${this.inputid}`}\n        underlined={index !== length - 1}\n        class={this.size}\n      >\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={item.checked}\n          htmlid={`combo-checkbox-${this.inputid}-${item.id}`}\n          label={item.name}\n          disabled={!item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n        />\n      </z-myz-list-item>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(this.itemsList);\n    }\n\n    return (\n      <ul>\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const {category} = item;\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n\n    return <ul>{listGroups}</ul>;\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <ul>\n        <z-myz-list-item\n          id=\"no-results\"\n          text={this.noresultslabel}\n          listitemid=\"no-results\"\n          icon=\"multiply-circle\"\n          class={this.size}\n        />\n      </ul>\n    );\n  }\n\n  private renderCloseButton(): HTMLDivElement {\n    return (\n      <div>\n        <a\n          onClick={() => this.closeFilterItems()}\n          onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n          role=\"button\"\n          tabindex={0}\n        >\n          {this.closesearchtext}\n        </a>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        onInputChange={(e: CustomEvent) => {\n          if (e.detail.keycode === 27) {\n            return this.closeFilterItems();\n          }\n          this.searchValue = e.detail.value;\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (this.searchValue) {\n      return;\n    }\n\n    const allChecked = this.selectedCounter === this.itemsList.length;\n\n    return (\n      <div class=\"check-all-wrapper\">\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={allChecked}\n          htmlid={`combo-checkbox-${this.inputid}-check-all`}\n          label={allChecked ? this.uncheckalltext : this.checkalltext}\n          disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,445 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZCombobox } from "./index";
+describe("Suite test ZCombobox", () => {
+    it("Test render ZCombobox chiusa", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox items='[]'></z-combobox>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-combobox items='[]'>
+        <mock:shadow-root>
+          <div data-action="combo-undefined">
+            <div class="header" role="button" tabindex="0">
+            <p class="body-3"><span></span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox disabilitata", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox items='[]' disabled='true'></z-combobox>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-combobox disabled='' items='[]'>
+        <mock:shadow-root>
+          <div class="disabled" data-action="combo-undefined">
+            <div class="header" role="button" tabindex="0">
+            <p class="body-3"><span></span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox chiusa con attributi", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox items='[]' inputid="combobox" label="label" isfixed></z-combobox>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-combobox items='[]' inputid="combobox" label="label" isfixed>
+        <mock:shadow-root>
+          <div class="fixed" id="combobox" data-action="combo-combobox">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">
+                label
+                <span></span>
+              </p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox chiusa con attributi ed elemento selezionato", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' inputid="combobox" label="label"></z-combobox>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-combobox items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' inputid="combobox" label="label">
+        <mock:shadow-root>
+          <div data-action="combo-combobox" id="combobox">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">
+                label
+                <span>(1)</span>
+              </p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta vuota", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox items='[]' noresultslabel='non ci sono risultati'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox items='[]' noresultslabel='non ci sono risultati'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-undefined">
+            <div class="header" role="button" tabindex="0">
+           <p class="body-3"><span></span></p>
+              <z-icon class="big" name="caret-down" ></z-icon>
+            </div>
+            <div class="open-combo-data">
+              <div tabindex="-1">
+                <ul></ul>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con elementi", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+            <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con ricerca", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+            <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text"></z-input>
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con ricerca attiva e risultati", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        page.rootInstance.searchValue = "primo";
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+            <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text" value="primo"></z-input>
+              <div class="search" tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo">
+                    <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="<b>primo</b> elemento"></z-input>
+                  </z-myz-list-item>
+                </ul>
+                <div>
+                  <a role="button" tabindex="0">CHIUDI</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con ricerca attiva senza testo di chiusura della ricerca testuale", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        page.rootInstance.searchValue = "primo";
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+            <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text" value="primo"></z-input>
+              <div class="search" tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo">
+                    <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="<b>primo</b> elemento"></z-input>
+                  </z-myz-list-item>
+                </ul>
+                <div>
+                  <a role="button" tabindex="0">Chiudi</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con ricerca attiva senza risultati", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        page.rootInstance.searchValue = "prova";
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' noresultslabel='non ci sono risultati'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text" value="prova"></z-input>
+              <div class="search" tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>
+                </ul>
+                <div>
+                  <a role="button" tabindex="0">CHIUDI</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con check all", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <div class="check-all-wrapper">
+                <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-check-all" label="CHECK" disabled="0" />
+              </div>
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con uncheck all", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">combo<span>(2)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <div class="check-all-wrapper">
+                <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-check-all" label="UNCHECK" checked disabled="0" />
+              </div>
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento" checked></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con max checkable items", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" maxcheckableitems="1" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" maxcheckableitems="1" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+             <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input disabled="" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con maxcheckableitems + check all", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" maxcheckableitems="3" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" maxcheckableitems="3" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <div class="check-all-wrapper">
+                <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-check-all" label="CHECK" />
+              </div>
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item id="item_1" class="big" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento" checked></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item id="item_2" class="big" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento"></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+    it("Test render ZCombobox aperta con maxcheckableitems + check all (disabled)", async () => {
+        const page = await newSpecPage({
+            components: [ZCombobox],
+            html: `<z-combobox inputid="combo" label="combo" maxcheckableitems="1" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'></z-combobox>`,
+        });
+        page.rootInstance.isopen = true;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-combobox inputid="combo" label="combo" maxcheckableitems="1" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'>
+        <mock:shadow-root>
+          <div class="open" data-action="combo-combo" id="combo">
+            <div class="header" role="button" tabindex="0">
+              <p class="body-3">combo<span>(1)</span></p>
+              <z-icon class="big" name="caret-down" />
+            </div>
+            <div class="open-combo-data">
+              <div class="check-all-wrapper">
+                <z-input type="checkbox" size="big" disabled htmlid="combo-checkbox-combo-check-all" label="CHECK" />
+              </div>
+              <div tabindex="-1">
+                <ul>
+                  <z-myz-list-item id="item_1" class="big" listitemid="item_1" action="combo-li-combo" underlined="">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento" checked></z-input>
+                  </z-myz-list-item>
+                  <z-myz-list-item id="item_2" class="big" listitemid="item_2" action="combo-li-combo">
+                    <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" disabled></z-input>
+                  </z-myz-list-item>
+                </ul>
+              </div
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-combobox>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCombobox} from \"./index\";\n\ndescribe(\"Suite test ZCombobox\", () => {\n  it(\"Test render ZCombobox chiusa\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]'></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]'>\n        <mock:shadow-root>\n          <div data-action=\"combo-undefined\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox disabilitata\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' disabled='true'></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox disabled='' items='[]'>\n        <mock:shadow-root>\n          <div class=\"disabled\" data-action=\"combo-undefined\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox chiusa con attributi\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed>\n        <mock:shadow-root>\n          <div class=\"fixed\" id=\"combobox\" data-action=\"combo-combobox\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">\n                label\n                <span></span>\n              </p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox chiusa con attributi ed elemento selezionato\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\"></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\">\n        <mock:shadow-root>\n          <div data-action=\"combo-combobox\" id=\"combobox\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">\n                label\n                <span>(1)</span>\n              </p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta vuota\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' noresultslabel='non ci sono risultati'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' noresultslabel='non ci sono risultati'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-undefined\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n           <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" ></z-icon>\n            </div>\n            <div class=\"open-combo-data\">\n              <div tabindex=\"-1\">\n                <ul></ul>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con elementi\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\"></z-input>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva e risultati\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"primo\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"primo\"></z-input>\n              <div class=\"search\" tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"<b>primo</b> elemento\"></z-input>\n                  </z-myz-list-item>\n                </ul>\n                <div>\n                  <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva senza testo di chiusura della ricerca testuale\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"primo\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"primo\"></z-input>\n              <div class=\"search\" tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"<b>primo</b> elemento\"></z-input>\n                  </z-myz-list-item>\n                </ul>\n                <div>\n                  <a role=\"button\" tabindex=\"0\">Chiudi</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva senza risultati\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"prova\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"prova\"></z-input>\n              <div class=\"search\" tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>\n                </ul>\n                <div>\n                  <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con check all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" disabled=\"0\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con uncheck all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(2)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"UNCHECK\" checked disabled=\"0\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con max checkable items\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n             <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con maxcheckableitems + check all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item id=\"item_1\" class=\"big\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item id=\"item_2\" class=\"big\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\"></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con maxcheckableitems + check all (disabled)\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" disabled htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item id=\"item_1\" class=\"big\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item id=\"item_2\" class=\"big\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" disabled></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n});\n"]}