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

package/dist/components/z-select.js

@@ -1 +1,585 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,transformTag as l}from"@stencil/core/internal/client";import{e as c,g as r,i as n,l as o}from"./index2.js";import{r as a,b as h,d,e as z,f as p}from"./utils.js";import{d as m}from"./index6.js";import{d as u}from"./index3.js";import{d as f}from"./index7.js";import{d as v}from"./index8.js";import{d as b}from"./index9.js";import{d as g}from"./index10.js";import{d as w}from"./index11.js";import{d as x}from"./index14.js";const y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.optionSelect=s(this,"optionSelect",7),this.resetSelect=s(this,"resetSelect",7),this.htmlid="id-"+a(),this.items=[],this.ariaLabel="",this.disabled=!1,this.readonly=!1,this.message=!0,this.autocomplete=!1,this.noresultslabel="Nessun risultato",this.isfixed=!1,this.size=c.BIG,this.isOpen=!1,this.selectedItem=null,this.itemsList=[],this.toggleSelectUl=this.toggleSelectUl.bind(this),this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray(),this.selectedItem=this.findSelectedItem(this.itemsList)}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(e){let t=[];"string"==typeof e?t.push(e):t=e,this.itemsList=this.getInitialItemsArray(),t.length&&this.updateSelection(this.itemsList,t[0]),this.selectedItem=this.findSelectedItem(this.itemsList)}emitOptionSelect(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})}emitResetSelect(){this.resetSelect.emit({id:this.htmlid})}componentWillLoad(){this.watchItems()}componentWillRender(){this.filterItems(this.searchString)}getInitialItemsArray(){return"string"==typeof this.items?JSON.parse(this.items):this.items}mapSelectedItemToItemsArray(){var e;const t=this.getInitialItemsArray();return this.updateSelection(t,null===(e=this.selectedItem)||void 0===e?void 0:e.id),t}getSelectedValue(){var e;return null===(e=this.selectedItem)||void 0===e?void 0:e.id}getOptionId(e){return`${this.htmlid}_key_${e.id}`}getResetOptionId(){return this.htmlid+"_key_reset"}getItemIdFromOptionId(e){return e.replace(this.htmlid+"_key_","")}getGroupedItems(){return this.itemsList.length?Object.entries(this.itemsList.reduce(((e,t)=>{const s=t.category||"Altra categoria";return e[s]=e[s]||[],e[s].push(t),e}),{})):[]}filterItems(e){let t=this.mapSelectedItemToItemsArray();(null==e?void 0:e.length)?(t=t.map((e=>Object.assign(Object.assign({},e),{name:h(e.name)}))),this.itemsList=this.hasTreeItems?this.filterTree(t,e,!1):t.filter((t=>t.name.toUpperCase().includes(e.toUpperCase()))).map((t=>(t.name=this.getHighlightedText(t.name,e),t)))):this.itemsList=t}filterTree(e,t,s){return e?e.map((e=>{const i=e.name.toUpperCase().includes(t.toUpperCase()),l=Object.assign({},e);return l.children&&l.children.length>0&&(l.children=this.filterTree(l.children.map((e=>Object.assign(Object.assign({},e),{name:h(e.name)}))),t,i)),i&&(l.name=this.getHighlightedText(l.name,t)),i||l.children&&l.children.length>0||this.showChildrenOfMatchingParent&&s?l:null})).filter((e=>null!==e)):[]}getHighlightedText(e,t){const s=e.toUpperCase(),i=t.toUpperCase(),l=s.indexOf(i);if(-1===l)return e;const c=l+t.length;return e.substring(0,l)+`<strong>${e.substring(l,c)}</strong>`+e.substring(c)}hasAutocomplete(){return!0===d(this.autocomplete)}handleInputChange(e){this.searchString=e.detail.value,this.isOpen||this.toggleSelectUl()}updateSelection(e,t){e&&e.forEach((e=>{e.selected=e.id===t,e.children&&e.children.length>0&&this.updateSelection(e.children,t)}))}findSelectedItem(e){if(e)for(const t of e){if(t.selected)return t;if(t.children&&t.children.length>0){const e=this.findSelectedItem(t.children);if(e)return e}}return null}selectItem(e){(null==e?void 0:e.disabled)||(this.itemsList=this.getInitialItemsArray(),e&&this.updateSelection(this.itemsList,e.id),this.selectedItem=this.findSelectedItem(this.itemsList),this.emitOptionSelect(),this.toggleSelectUl(),this.searchString&&(this.searchString=null))}handleResetClick(){this.selectedItem=null,this.searchString=null,this.focusedItemId="",this.emitResetSelect(),this.toggleSelectUl()}handleInputKeyDown(e){switch(e.code){case r.ENTER:case r.SPACE:if(this.focusedItemId)if(this.focusedItemId===this.getResetOptionId())this.handleResetClick();else{const e=this.getItemIdFromOptionId(this.focusedItemId),t=this.itemsList.find((t=>t.id===e))||null;t&&(this.selectedItem=t,this.emitOptionSelect(),this.toggleSelectUl())}break;case r.ARROW_DOWN:case r.ARROW_UP:this.arrowsSelectNav(e)}}arrowsSelectNav(e){if(![r.ARROW_DOWN,r.ARROW_UP].includes(e.key))return;e.preventDefault(),e.stopPropagation();const t=this.focusedItemId?this.host.querySelector("#"+this.focusedItemId):null,s=Array.from(this.host.querySelectorAll('[role="option"]'));if(!s.length)return;const i=t?s.indexOf(t):null,l=s.length-1;if(!this.isOpen&&(this.toggleSelectUl(),this.selectedItem))return void this.focusSelectItem(this.getOptionId(this.selectedItem));let c=null;e.code===r.ARROW_DOWN?c=null===i?s[0]:s[i+1]||s[l]:e.code===r.ARROW_UP&&(c=null===i?s[l]:s[i-1]||s[0]),this.focusSelectItem(c.id)}focusSelectItem(e){this.focusedItemId=e,this.host.querySelector("#"+e).scrollIntoView({block:"nearest",container:"nearest"})}toggleSelectUl(e=!1){var t;this.disabled||this.readonly||(this.isOpen?(document.removeEventListener("click",this.handleSelectFocus),document.removeEventListener("keyup",this.handleSelectFocus),e&&(null===(t=this.host.querySelector(`#${this.htmlid}_select_input`))||void 0===t||t.focus()),this.selectedItem&&this.searchString&&(this.searchString=null,this.filterItems(this.searchString))):(document.addEventListener("click",this.handleSelectFocus),document.addEventListener("keyup",this.handleSelectFocus)),this.focusedItemId="",this.isOpen=!this.isOpen)}handleInputClick(e){e.target.closest(".reset-icon")?e.stopPropagation():this.toggleSelectUl()}handleSelectFocus(e){if(e instanceof KeyboardEvent&&e.key===r.ESC)return e.stopPropagation(),this.toggleSelectUl(!0);if(e instanceof KeyboardEvent&&e.key!==r.TAB)return;const t=z();if(!(null==t?void 0:t.hasAttribute("disabled"))&&!p(t).find((e=>"z-input"===e.nodeName.toLowerCase()&&e.id===this.htmlid+"_input"))){const e=p(t).find((e=>"Z-SELECT"===e.nodeName));this.toggleSelectUl(e===this.host)}}scrollToLetter(e){if(!this.itemsList.length)return;const t=this.itemsList.find((t=>t.name.toLowerCase().charAt(0)===e.toLowerCase()));t&&(this.isOpen||this.toggleSelectUl(),this.focusSelectItem(this.getOptionId(t)))}renderInput(){let e=null;return this.selectedItem&&(e=h(this.selectedItem.name)),this.isOpen&&void 0!==this.searchString&&(e=this.searchString),[i("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:this.htmlid+"_input",htmlid:this.htmlid+"_select_input",placeholder:this.placeholder,value:e,label:this.label,autocomplete:"off","aria-label":this.ariaLabel,icon:this.isOpen?"caret-up":"caret-down",hasclearicon:!1,message:!1,name:this.name,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?void 0:this.status,size:this.size,role:"combobox","html-aria-expanded":this.isOpen?"true":"false","html-aria-controls":this.htmlid+"_list","html-aria-activedescendant":this.isOpen?this.focusedItemId:"","html-aria-autocomplete":this.hasAutocomplete()?"list":void 0,onClick:e=>this.handleInputClick(e),onKeyDown:e=>this.handleInputKeyDown(e),onInputChange:e=>this.handleInputChange(e),onKeyPress:e=>{this.hasAutocomplete()||(e.preventDefault(),this.scrollToLetter(e.key))}})]}renderSelectUl(){return i("div",{class:this.isOpen?"open":"closed"},i("div",{class:{"ul-scroll-wrapper":!0,fixed:this.isfixed}},i("z-list",{role:"listbox","aria-label":this.ariaLabel||this.label,tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:this.htmlid+"_list","aria-multiselectable":!1,size:this.listSizeType(),class:{disabled:this.disabled,readonly:this.readonly,["input-"+this.status]:!this.isOpen&&!!this.status,"z-scrollbar":!0}},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))}renderResetItem(){const e=!this.selectedItem||!this.resetItem;return i("z-list-element",{class:{hide:e,"reset-item":!0,"reset-item-margin":!this.hasGroupItems},clickable:!0,disabled:!1,dividerType:o.ELEMENT,role:e?"presentation":"option","html-tabindex":0,"aria-selected":"false","aria-label":e?void 0:this.resetItem,id:this.getResetOptionId(),size:this.hasTreeItems?n.MEDIUM:this.listSizeType(),onClickItem:()=>this.handleResetClick()},i("div",{class:{"reset-item-content":!0,"tree-list-reset-item":this.hasTreeItems,active:this.focusedItemId===this.getResetOptionId()},"aria-hidden":"true"},i("z-icon",{name:"multiply-circled"}),i("span",null,this.resetItem)))}renderItem(e,t){return i("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:t?o.HEADER:o.ELEMENT,role:e.disabled?"presentation":"option","html-tabindex":-1,"aria-selected":e.selected?"true":"false","aria-label":e.disabled?void 0:h(e.name),id:this.getOptionId(e),size:this.listSizeType(),onClickItem:()=>this.selectItem(e)},i("div",{class:{"list-element-container":!0,active:this.focusedItemId===this.getOptionId(e)},"aria-hidden":"true"},i("div",{class:{selected:!!e.selected,"list-element-content":!0},innerHTML:e.name}),e.icon&&i("z-tag",{icon:e.icon})))}listSizeType(){return this.hasTreeItems?n.NONE:this.size===c.SMALL||this.size===c.X_SMALL?n.SMALL:n.MEDIUM}renderSelectUlItems(){return this.itemsList.length?this.hasGroupItems?this.hasTreeItems?this.renderGroupedTree():this.renderSelectGroupItems():this.itemsList.map(((e,t,s)=>{const i=t===s.length-1;return this.hasTreeItems?this.renderTreeItems(e,i,s.length>1,!0,e.disabled):this.renderItem(e,i)})):this.renderNoSearchResults()}renderTreeItems(e,t,s,l,c){var r,n;const a=e.disabled||c,d=this.hasGroupItems?void 0:this.hasGroupItems?t&&!s?o.ELEMENT:void 0:l&&s&&!t?o.ELEMENT:void 0;return i("z-list-element",{clickable:!e.disabled,disabled:a,class:{"grouped-tree-parent-node":this.hasGroupItems&&!!(null===(r=e.children)||void 0===r?void 0:r.length),"tree-search-item":this.hasGroupItems&&l&&!(null===(n=e.children)||void 0===n?void 0:n.length)&&!!this.searchString},size:this.listSizeType(),dividerType:d,hasTreeItems:this.hasTreeItems,"html-tabindex":null,role:"presentation"},i("div",{id:this.getOptionId(e),role:a?"presentation":"option","aria-label":a?void 0:h(e.name),class:{"list-element":!0,active:this.focusedItemId===this.getOptionId(e)},onClick:()=>this.selectItem(e)},i("span",{class:"item ellipsis","aria-hidden":"true"},i("span",{class:{"item-label":!0,selected:!!e.selected},title:e.name,innerHTML:e.name})),e.icon&&i("z-tag",{icon:e.icon})),e.children&&e.children.length>0?i("z-list",{role:"presentation"},i("div",{class:"children-node"},e.children.map(((e,t,s)=>this.renderTreeItems(e,t===s.length-1,s.length>1,!1,a))))):null)}renderGroupedTree(){const e=this.getGroupedItems();return e.map((([t,s],l,c)=>{const r=Object.values(e).some((e=>e.length>1));return i("z-list-group",{"divider-type":l===c.length-1?void 0:o.ELEMENT,hasTreeItems:!0,"aria-labelledby":`${this.htmlid}_tree_${l}`},i("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.htmlid}_tree_${l}`,"aria-hidden":"true"},t),i("z-list",{role:"presentation"},s.map(((e,t,s)=>[this.renderTreeItems(e,t===s.length-1,r,!0,e.disabled),t<s.length-1?i("z-divider",{key:"divider-"+t,style:{zIndex:"100",height:"var(--border-size-small)"}}):null]))),l!==c.length-1&&i("z-divider",{style:{zIndex:"100",height:"var(--border-size-small)"}}))}))}renderSelectGroupItems(){const e=this.getGroupedItems();return e.map((([t,s],l)=>{const c=e.length===l+1;return i("z-list-group",{"divider-type":o.ELEMENT,"aria-labelledby":`${this.htmlid}_group_${l}`},i("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.htmlid}_group_${l}`,"aria-hidden":"true"},t),s.map(((e,t)=>this.renderItem(e,c&&s.length===t+1))))}))}renderNoSearchResults(){return i("z-list-element",{class:"no-results",size:this.hasTreeItems?n.MEDIUM:this.listSizeType(),"html-tabindex":null,role:"presentation"},this.noresultslabel)}renderMessage(){if(!1!==d(this.message))return i("z-input-message",{message:!0===d(this.message)?void 0:this.message,status:this.status,class:this.size,disabled:this.disabled})}render(){return i("div",{key:"375b2aba49331cc572cb884f41f2d37c94c7f920",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get host(){return this}static get watchers(){return{items:[{watchItems:0}]}}static get style(){return'.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-form-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>z-input.sc-z-select .input-icon.sc-z-select{cursor:pointer}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;border-top:none;background:var(--color-form-background);box-shadow:var(--shadow-2);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select z-list.sc-z-select{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:var(--space-unit) calc(var(--space-unit) * 1.5);margin:0;outline:none}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element[disabled].sc-z-select{color:var(--color-form-disabled03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);column-gap:var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{margin-right:auto}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size="small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:var(--font-sb)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--color-form-default-text)}.reset-item.sc-z-select{color:var(--color-form-active-primary);fill:var(--color-form-active-primary)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.sc-z-select .reset-item-content.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:var(--space-unit)}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}.tree-list-reset-item.sc-z-select{padding:var(--space-unit) 0}z-list-element.sc-z-select{position:relative;display:block}z-list.sc-z-select z-list-element.sc-z-select::before{position:absolute;z-index:100;top:3px;left:-8px;width:8px;height:1em;border-bottom:1px solid var(--color-form-disabled01-icon);border-left:1px solid var(--color-form-disabled01-icon);content:"";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select::after{position:absolute;z-index:100;top:5px;left:-8px;width:8px;height:100%;border-left:1px solid var(--color-form-disabled01-icon);content:"";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select:last-child::after{display:none}z-list.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-element.sc-z-select::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::after{display:none}z-list.sc-z-select>div.children-node.sc-z-select{padding-left:calc(var(--space-unit) * 2)}z-list-element.sc-z-select>.list-element.sc-z-select{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.5) var(--space-unit);cursor:pointer}z-list-element.sc-z-select>.list-element.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover,z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover::after{background-color:var(--background-hover-color-list-element, var(--color-background))}z-list-element.sc-z-select>.list-element.sc-z-select .item.ellipsis.sc-z-select{overflow:hidden}z-list-element.sc-z-select .list-element.sc-z-select::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}z-list-element.tree-search-item.sc-z-select{padding-top:0}z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}z-list-element.grouped-tree-parent-node.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}.item-label.selected.sc-z-select{font-weight:bold}.item.ellipsis.sc-z-select{display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}z-list.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after,z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select:hover::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;right:-18px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:0;right:0;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}.children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select>z-list-element.sc-z-select{padding:0}'}},[2,"z-select",{htmlid:[1],items:[1],name:[1],label:[1],ariaLabel:[1,"aria-label"],disabled:[4],readonly:[4],placeholder:[1],htmltitle:[1],status:[1],message:[8],autocomplete:[4],noresultslabel:[1],hasGroupItems:[4,"has-group-items"],hasTreeItems:[4,"has-tree-items"],showChildrenOfMatchingParent:[4,"show-children-of-matching-parent"],isfixed:[4],resetItem:[1,"reset-item"],size:[1],isOpen:[32],selectedItem:[32],focusedItemId:[32],searchString:[32],getSelectedItem:[64],getValue:[64],setValue:[64]},void 0,{items:[{watchItems:0}]}]),k=y,I=function(){"undefined"!=typeof customElements&&["z-select","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"].forEach((e=>{switch(e){case"z-select":customElements.get(l(e))||customElements.define(l(e),y);break;case"z-divider":customElements.get(l(e))||m();break;case"z-icon":customElements.get(l(e))||u();break;case"z-input":customElements.get(l(e))||f();break;case"z-input-message":customElements.get(l(e))||v();break;case"z-list":customElements.get(l(e))||b();break;case"z-list-element":customElements.get(l(e))||g();break;case"z-list-group":customElements.get(l(e))||w();break;case"z-tag":customElements.get(l(e))||x()}}))};export{k as ZSelect,I as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { e as ControlSize, g as KeyboardCode, l as ListDividerType, i as ListSize } from './index2.js';
+import { r as randomId, b as getPlainText, d as boolean, e as getElementTree, f as getClickedElement } from './utils.js';
+import { d as defineCustomElement$9 } from './index7.js';
+import { d as defineCustomElement$8 } from './index10.js';
+import { d as defineCustomElement$7 } from './index12.js';
+import { d as defineCustomElement$6 } from './index13.js';
+import { d as defineCustomElement$5 } from './index14.js';
+import { d as defineCustomElement$4 } from './index15.js';
+import { d as defineCustomElement$3 } from './index16.js';
+import { d as defineCustomElement$2 } from './index26.js';
+
+const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-form-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size=\"small\"].sc-z-select-h,[size=\"x-small\"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>z-input.sc-z-select .input-icon.sc-z-select{cursor:pointer}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;border-top:none;background:var(--color-form-background);box-shadow:var(--shadow-2);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select z-list.sc-z-select{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:var(--space-unit) calc(var(--space-unit) * 1.5);margin:0;outline:none}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element[disabled].sc-z-select{color:var(--color-form-disabled03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);column-gap:var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{margin-right:auto}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size=\"small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:var(--font-sb)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--color-form-default-text)}.reset-item.sc-z-select{color:var(--color-form-active-primary);fill:var(--color-form-active-primary)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.sc-z-select .reset-item-content.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:var(--space-unit)}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}.tree-list-reset-item.sc-z-select{padding:var(--space-unit) 0}z-list-element.sc-z-select{position:relative;display:block}z-list.sc-z-select z-list-element.sc-z-select::before{position:absolute;z-index:100;top:3px;left:-8px;width:8px;height:1em;border-bottom:1px solid var(--color-form-disabled01-icon);border-left:1px solid var(--color-form-disabled01-icon);content:\"\";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select::after{position:absolute;z-index:100;top:5px;left:-8px;width:8px;height:100%;border-left:1px solid var(--color-form-disabled01-icon);content:\"\";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select:last-child::after{display:none}z-list.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-element.sc-z-select::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::after{display:none}z-list.sc-z-select>div.children-node.sc-z-select{padding-left:calc(var(--space-unit) * 2)}z-list-element.sc-z-select>.list-element.sc-z-select{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.5) var(--space-unit);cursor:pointer}z-list-element.sc-z-select>.list-element.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover,z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover::after{background-color:var(--background-hover-color-list-element, var(--color-background))}z-list-element.sc-z-select>.list-element.sc-z-select .item.ellipsis.sc-z-select{overflow:hidden}z-list-element.sc-z-select .list-element.sc-z-select::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}z-list-element.tree-search-item.sc-z-select{padding-top:0}z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}z-list-element.grouped-tree-parent-node.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}.item-label.selected.sc-z-select{font-weight:bold}.item.ellipsis.sc-z-select{display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}z-list.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after,z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select:hover::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;right:-18px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:0;right:0;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}.children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select>z-list-element.sc-z-select{padding:0}";
+const ZSelectStyle0 = stylesCss;
+
+const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.optionSelect = createEvent(this, "optionSelect", 7);
+        this.resetSelect = createEvent(this, "resetSelect", 7);
+        this.itemsList = [];
+        this.htmlid = `id-${randomId()}`;
+        this.items = [];
+        this.name = undefined;
+        this.label = undefined;
+        this.ariaLabel = "";
+        this.disabled = false;
+        this.readonly = false;
+        this.placeholder = undefined;
+        this.htmltitle = undefined;
+        this.status = undefined;
+        this.message = true;
+        this.autocomplete = false;
+        this.noresultslabel = "Nessun risultato";
+        this.hasGroupItems = undefined;
+        this.hasTreeItems = undefined;
+        this.showChildrenOfMatchingParent = undefined;
+        this.isfixed = false;
+        this.resetItem = undefined;
+        this.size = ControlSize.BIG;
+        this.isOpen = false;
+        this.selectedItem = null;
+        this.focusedItemId = undefined;
+        this.searchString = undefined;
+        this.toggleSelectUl = this.toggleSelectUl.bind(this);
+        this.handleSelectFocus = this.handleSelectFocus.bind(this);
+    }
+    watchItems() {
+        this.itemsList = this.getInitialItemsArray();
+        this.selectedItem = this.findSelectedItem(this.itemsList);
+    }
+    /** get the input selected options */
+    async getSelectedItem() {
+        return this.selectedItem;
+    }
+    /** get the input value */
+    async getValue() {
+        return this.getSelectedValue();
+    }
+    /** set the input value */
+    async setValue(value) {
+        let values = [];
+        if (typeof value === "string") {
+            values.push(value);
+        }
+        else {
+            values = value;
+        }
+        this.itemsList = this.getInitialItemsArray();
+        if (values.length) {
+            this.updateSelection(this.itemsList, values[0]);
+        }
+        this.selectedItem = this.findSelectedItem(this.itemsList);
+    }
+    emitOptionSelect() {
+        this.optionSelect.emit({
+            id: this.htmlid,
+            selected: this.getSelectedValue(),
+        });
+    }
+    emitResetSelect() {
+        this.resetSelect.emit({
+            id: this.htmlid,
+        });
+    }
+    componentWillLoad() {
+        this.watchItems();
+    }
+    componentWillRender() {
+        this.filterItems(this.searchString);
+    }
+    getInitialItemsArray() {
+        return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+    }
+    mapSelectedItemToItemsArray() {
+        var _a;
+        const initialItemsList = this.getInitialItemsArray();
+        this.updateSelection(initialItemsList, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id);
+        return initialItemsList;
+    }
+    getSelectedValue() {
+        var _a;
+        return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    getOptionId(item) {
+        return `${this.htmlid}_key_${item.id}`;
+    }
+    getResetOptionId() {
+        return `${this.htmlid}_key_reset`;
+    }
+    getItemIdFromOptionId(optionId) {
+        return optionId.replace(`${this.htmlid}_key_`, ``);
+    }
+    getGroupedItems() {
+        if (!this.itemsList.length) {
+            return [];
+        }
+        return Object.entries(this.itemsList.reduce((group, item) => {
+            const category = item.category || "Altra categoria";
+            group[category] = group[category] || [];
+            group[category].push(item);
+            return group;
+        }, {}));
+    }
+    filterItems(searchString) {
+        let prevList = this.mapSelectedItemToItemsArray();
+        if (!(searchString === null || searchString === void 0 ? void 0 : searchString.length)) {
+            this.itemsList = prevList;
+            return;
+        }
+        prevList = prevList.map((item) => (Object.assign(Object.assign({}, item), { name: getPlainText(item.name) })));
+        if (this.hasTreeItems) {
+            this.itemsList = this.filterTree(prevList, searchString, false);
+        }
+        else {
+            this.itemsList = prevList
+                .filter((item) => item.name.toUpperCase().includes(searchString.toUpperCase()))
+                .map((item) => {
+                item.name = this.getHighlightedText(item.name, searchString);
+                return item;
+            });
+        }
+    }
+    filterTree(items, searchString, matchingParent) {
+        if (!items) {
+            return [];
+        }
+        return items
+            .map((item) => {
+            const match = item.name.toUpperCase().includes(searchString.toUpperCase());
+            const newItem = Object.assign({}, item);
+            if (newItem.children && newItem.children.length > 0) {
+                newItem.children = this.filterTree(newItem.children.map((item) => (Object.assign(Object.assign({}, item), { name: getPlainText(item.name) }))), searchString, match);
+            }
+            if (match) {
+                newItem.name = this.getHighlightedText(newItem.name, searchString);
+            }
+            if (match ||
+                (newItem.children && newItem.children.length > 0) ||
+                (this.showChildrenOfMatchingParent && matchingParent)) {
+                return newItem;
+            }
+            return null;
+        })
+            .filter((item) => item !== null);
+    }
+    getHighlightedText(text, search) {
+        const upperText = text.toUpperCase();
+        const upperSearch = search.toUpperCase();
+        const start = upperText.indexOf(upperSearch);
+        if (start === -1) {
+            return text;
+        }
+        const end = start + search.length;
+        return text.substring(0, start) + `<strong>${text.substring(start, end)}</strong>` + text.substring(end);
+    }
+    hasAutocomplete() {
+        return boolean(this.autocomplete) === true;
+    }
+    handleInputChange(e) {
+        this.searchString = e.detail.value;
+        if (!this.isOpen) {
+            this.toggleSelectUl();
+        }
+    }
+    updateSelection(items, selectedId) {
+        if (items) {
+            items.forEach((item) => {
+                item.selected = item.id === selectedId;
+                if (item.children && item.children.length > 0) {
+                    this.updateSelection(item.children, selectedId);
+                }
+            });
+        }
+    }
+    findSelectedItem(items) {
+        if (items) {
+            for (const item of items) {
+                if (item.selected) {
+                    return item;
+                }
+                if (item.children && item.children.length > 0) {
+                    const found = this.findSelectedItem(item.children);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    selectItem(selected) {
+        if (selected === null || selected === void 0 ? void 0 : selected.disabled) {
+            return;
+        }
+        this.itemsList = this.getInitialItemsArray();
+        if (selected) {
+            this.updateSelection(this.itemsList, selected.id);
+        }
+        this.selectedItem = this.findSelectedItem(this.itemsList);
+        this.emitOptionSelect();
+        this.toggleSelectUl();
+        if (this.searchString) {
+            this.searchString = null;
+        }
+    }
+    handleResetClick() {
+        this.selectedItem = null;
+        this.searchString = null;
+        this.focusedItemId = "";
+        this.emitResetSelect();
+        this.toggleSelectUl();
+    }
+    handleInputKeyDown(e) {
+        switch (e.code) {
+            case KeyboardCode.ENTER:
+            case KeyboardCode.SPACE:
+                if (this.focusedItemId) {
+                    if (this.focusedItemId === this.getResetOptionId()) {
+                        this.handleResetClick();
+                    }
+                    else {
+                        const itemId = this.getItemIdFromOptionId(this.focusedItemId);
+                        const item = this.itemsList.find((e) => e.id === itemId) || null;
+                        if (item) {
+                            this.selectedItem = item;
+                            this.emitOptionSelect();
+                            this.toggleSelectUl();
+                        }
+                    }
+                }
+                break;
+            case KeyboardCode.ARROW_DOWN:
+            case KeyboardCode.ARROW_UP:
+                this.arrowsSelectNav(e);
+                break;
+        }
+    }
+    arrowsSelectNav(e) {
+        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+        if (!arrows.includes(e.key)) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const currElem = this.focusedItemId ? this.host.querySelector(`#${this.focusedItemId}`) : null;
+        const options = Array.from(this.host.querySelectorAll('[role="option"]'));
+        if (!options.length) {
+            return;
+        }
+        const currElemIndex = currElem ? options.indexOf(currElem) : null;
+        const firstElemIndex = 0;
+        const lastElemIndex = options.length - 1;
+        if (!this.isOpen) {
+            this.toggleSelectUl();
+            if (this.selectedItem) {
+                this.focusSelectItem(this.getOptionId(this.selectedItem));
+                return;
+            }
+        }
+        let nextElem = null;
+        if (e.code === KeyboardCode.ARROW_DOWN) {
+            nextElem =
+                currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];
+        }
+        else if (e.code === KeyboardCode.ARROW_UP) {
+            nextElem =
+                currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];
+        }
+        this.focusSelectItem(nextElem.id);
+    }
+    focusSelectItem(optionId) {
+        this.focusedItemId = optionId;
+        const elem = this.host.querySelector(`#${optionId}`);
+        // @ts-expect-error 'container' does not exist in type 'ScrollIntoViewOptions'
+        elem.scrollIntoView({ block: "nearest", container: "nearest" });
+    }
+    toggleSelectUl(selfFocusOnClose = false) {
+        var _a;
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (!this.isOpen) {
+            document.addEventListener("click", this.handleSelectFocus);
+            document.addEventListener("keyup", this.handleSelectFocus);
+        }
+        else {
+            document.removeEventListener("click", this.handleSelectFocus);
+            document.removeEventListener("keyup", this.handleSelectFocus);
+            if (selfFocusOnClose) {
+                (_a = this.host.querySelector(`#${this.htmlid}_select_input`)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            if (this.selectedItem && this.searchString) {
+                this.searchString = null;
+                this.filterItems(this.searchString);
+            }
+        }
+        this.focusedItemId = "";
+        this.isOpen = !this.isOpen;
+    }
+    handleInputClick(e) {
+        if (e.target.closest(".reset-icon")) {
+            e.stopPropagation();
+            return;
+        }
+        this.toggleSelectUl();
+    }
+    handleSelectFocus(e) {
+        if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {
+            e.stopPropagation();
+            return this.toggleSelectUl(true);
+        }
+        if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB) {
+            return;
+        }
+        const clickedElement = getClickedElement();
+        if (clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.hasAttribute("disabled")) {
+            return;
+        }
+        if (!getElementTree(clickedElement).find((elem) => elem.nodeName.toLowerCase() === "z-input" && elem.id === `${this.htmlid}_input`)) {
+            const zSelect = getElementTree(clickedElement).find((e) => e.nodeName === "Z-SELECT");
+            this.toggleSelectUl(zSelect === this.host);
+        }
+    }
+    scrollToLetter(letter) {
+        if (!this.itemsList.length) {
+            return;
+        }
+        const foundItem = this.itemsList.find((item) => item.name.toLowerCase().charAt(0) === letter.toLowerCase());
+        if (foundItem) {
+            if (!this.isOpen) {
+                this.toggleSelectUl();
+            }
+            this.focusSelectItem(this.getOptionId(foundItem));
+        }
+    }
+    renderInput() {
+        let value = null;
+        if (this.selectedItem) {
+            value = getPlainText(this.selectedItem.name);
+        }
+        if (this.isOpen && this.searchString !== undefined) {
+            value = this.searchString;
+        }
+        return [
+            h("z-input", { class: {
+                    "active-select": this.isOpen,
+                    "cursor-select": !this.autocomplete,
+                }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: value, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, size: this.size, role: "combobox", "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", "html-aria-autocomplete": this.hasAutocomplete() ? "list" : undefined, onClick: (e) => this.handleInputClick(e), onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => this.handleInputChange(e), onKeyPress: (e) => {
+                    if (!this.hasAutocomplete()) {
+                        e.preventDefault();
+                        this.scrollToLetter(e.key);
+                    }
+                } }),
+        ];
+    }
+    renderSelectUl() {
+        return (h("div", { class: this.isOpen ? "open" : "closed" }, h("div", { class: {
+                "ul-scroll-wrapper": true,
+                "fixed": this.isfixed,
+            } }, h("z-list", { role: "listbox", "aria-label": this.ariaLabel || this.label, tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: `${this.htmlid}_list`, "aria-multiselectable": false, size: this.listSizeType(), class: {
+                "disabled": this.disabled,
+                "readonly": this.readonly,
+                [`input-${this.status}`]: !this.isOpen && !!this.status,
+                "z-scrollbar": true,
+            } }, this.resetItem && this.renderResetItem(), this.renderSelectUlItems()))));
+    }
+    renderResetItem() {
+        const hidden = !this.selectedItem || !this.resetItem;
+        return (h("z-list-element", { class: {
+                "hide": hidden,
+                "reset-item": true,
+                "reset-item-margin": !this.hasGroupItems,
+            }, clickable: true, disabled: false, dividerType: ListDividerType.ELEMENT, role: hidden ? "presentation" : "option", "html-tabindex": 0, "aria-selected": "false", "aria-label": hidden ? undefined : this.resetItem, id: this.getResetOptionId(), size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), onClickItem: () => this.handleResetClick() }, h("div", { class: {
+                "reset-item-content": true,
+                "tree-list-reset-item": this.hasTreeItems,
+                "active": this.focusedItemId === this.getResetOptionId(),
+            }, "aria-hidden": "true" }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
+    }
+    renderItem(item, lastItem) {
+        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: item.disabled ? "presentation" : "option", "html-tabindex": -1, "aria-selected": item.selected ? "true" : "false", "aria-label": item.disabled ? undefined : getPlainText(item.name), id: this.getOptionId(item), size: this.listSizeType(), onClickItem: () => this.selectItem(item) }, h("div", { class: {
+                "list-element-container": true,
+                "active": this.focusedItemId === this.getOptionId(item),
+            }, "aria-hidden": "true" }, h("div", { class: {
+                "selected": !!item.selected,
+                "list-element-content": true,
+            }, innerHTML: item.name }), item.icon && h("z-tag", { icon: item.icon }))));
+    }
+    listSizeType() {
+        if (this.hasTreeItems) {
+            return ListSize.NONE;
+        }
+        if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {
+            return ListSize.SMALL;
+        }
+        return ListSize.MEDIUM;
+    }
+    renderSelectUlItems() {
+        if (!this.itemsList.length) {
+            return this.renderNoSearchResults();
+        }
+        if (this.hasGroupItems) {
+            if (this.hasTreeItems) {
+                return this.renderGroupedTree();
+            }
+            return this.renderSelectGroupItems();
+        }
+        return this.itemsList.map((item, index, array) => {
+            const isLastItem = index === array.length - 1;
+            const parentHasSiblings = array.length > 1;
+            if (this.hasTreeItems) {
+                return this.renderTreeItems(item, isLastItem, parentHasSiblings, true, item.disabled);
+            }
+            return this.renderItem(item, isLastItem);
+        });
+    }
+    renderTreeItems(item, isLastChild, parentHasSiblings, isTopLevel, disabledAncestor) {
+        var _a, _b;
+        const isDisabled = item.disabled || disabledAncestor;
+        const hasDivider = this.hasGroupItems
+            ? undefined
+            : this.hasGroupItems
+                ? isLastChild && !parentHasSiblings
+                    ? ListDividerType.ELEMENT
+                    : undefined
+                : isTopLevel && parentHasSiblings && !isLastChild
+                    ? ListDividerType.ELEMENT
+                    : undefined;
+        return (h("z-list-element", { clickable: !item.disabled, disabled: isDisabled, class: {
+                "grouped-tree-parent-node": this.hasGroupItems && !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length),
+                "tree-search-item": this.hasGroupItems && isTopLevel && !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) && !!this.searchString,
+            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems, "html-tabindex": null, role: "presentation" }, h("div", { id: this.getOptionId(item), role: isDisabled ? "presentation" : "option", "aria-label": isDisabled ? undefined : getPlainText(item.name), class: { "list-element": true, "active": this.focusedItemId === this.getOptionId(item) }, onClick: () => this.selectItem(item) }, h("span", { class: "item ellipsis", "aria-hidden": "true" }, h("span", { class: {
+                "item-label": true,
+                "selected": !!item.selected,
+            }, title: item.name, innerHTML: item.name })), item.icon && h("z-tag", { icon: item.icon })), item.children && item.children.length > 0 ? (h("z-list", { role: "presentation" }, h("div", { class: "children-node" }, item.children.map((child, index, arr) => this.renderTreeItems(child, index === arr.length - 1, arr.length > 1, false, // isTopLevel = false for children
+        isDisabled))))) : null));
+    }
+    renderGroupedTree() {
+        const groupedItems = this.getGroupedItems();
+        return groupedItems.map(([category, items], index, entries) => {
+            const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);
+            return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true, "aria-labelledby": `${this.htmlid}_tree_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_tree_${index}`, "aria-hidden": "true" }, category), h("z-list", { role: "presentation" }, items.map((item, i, arr) => [
+                this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true, item.disabled),
+                i < arr.length - 1 ? (h("z-divider", { key: `divider-${i}`, style: { zIndex: "100", height: "var(--border-size-small)" } })) : null,
+            ])), index !== entries.length - 1 && h("z-divider", { style: { zIndex: "100", height: "var(--border-size-small)" } })));
+        });
+    }
+    renderSelectGroupItems() {
+        const groupedItems = this.getGroupedItems();
+        return groupedItems.map(([key, items], index) => {
+            const isLastGroup = groupedItems.length === index + 1;
+            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT, "aria-labelledby": `${this.htmlid}_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_group_${index}`, "aria-hidden": "true" }, key), items.map((item, subindex) => {
+                const isLastItem = items.length === subindex + 1;
+                return this.renderItem(item, isLastGroup && isLastItem);
+            })));
+        });
+    }
+    renderNoSearchResults() {
+        return (h("z-list-element", { class: "no-results", size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), "html-tabindex": null, role: "presentation" }, this.noresultslabel));
+    }
+    renderMessage() {
+        if (boolean(this.message) === false) {
+            return;
+        }
+        return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
+    }
+    render() {
+        return (h("div", { key: '85aeff414269872f796631044ffcafe9e500d6e6', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "items": ["watchItems"]
+    }; }
+    static get style() { return ZSelectStyle0; }
+}, [2, "z-select", {
+        "htmlid": [1],
+        "items": [1],
+        "name": [1],
+        "label": [1],
+        "ariaLabel": [1, "aria-label"],
+        "disabled": [4],
+        "readonly": [4],
+        "placeholder": [1],
+        "htmltitle": [1],
+        "status": [1],
+        "message": [8],
+        "autocomplete": [4],
+        "noresultslabel": [1],
+        "hasGroupItems": [4, "has-group-items"],
+        "hasTreeItems": [4, "has-tree-items"],
+        "showChildrenOfMatchingParent": [4, "show-children-of-matching-parent"],
+        "isfixed": [4],
+        "resetItem": [1, "reset-item"],
+        "size": [1],
+        "isOpen": [32],
+        "selectedItem": [32],
+        "focusedItemId": [32],
+        "searchString": [32],
+        "getSelectedItem": [64],
+        "getValue": [64],
+        "setValue": [64]
+    }, undefined, {
+        "items": ["watchItems"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-select", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group", "z-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZSelect$1);
+            }
+            break;
+        case "z-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "z-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "z-input-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "z-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-list-element":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-list-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZSelect = ZSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZSelect, defineCustomElement };
+
+//# sourceMappingURL=z-select.js.map