@zanichelli/albe-web-components 17.0.3 → 17.0.5-RC1

package/dist/web-components-library/p-972098a5.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,g as i}from"./p-75c4a726.js";import{e as l,g as c,l as r,i as n}from"./p-b34993de.js";import{r as a,b as o,e as h,d as p,f as z}from"./p-10607a39.js";import"./p-5145a606.js";const d='.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;justify-content:space-between;padding-left:calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) 0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-tag.sc-z-select{margin-right:calc(var(--space-unit))}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size="small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}';const u=d;const m=class{constructor(s){e(this,s);this.optionSelect=t(this,"optionSelect",7);this.resetSelect=t(this,"resetSelect",7);this.itemsList=[];this.htmlid=`id-${a()}`;this.items=undefined;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.isfixed=false;this.resetItem=undefined;this.size=l.BIG;this.isOpen=false;this.selectedItem=null;this.focusedItemId=undefined;this.searchString=undefined;this.toggleSelectUl=this.toggleSelectUl.bind(this);this.selectItem=this.selectItem.bind(this);this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray();this.selectedItem=this.itemsList.find((e=>e.selected))}getFocusedItemHandler(e){this.focusedItemId=e.target.id}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(e){let t=[];if(typeof e==="string"){t.push(e)}else{t=e}this.selectedItem=this.itemsList.find((e=>t.includes(e.id)))}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(){const e=this.getInitialItemsArray();return e.map((e=>{var t;e.selected=e.id===((t=this.selectedItem)===null||t===void 0?void 0:t.id);return e}))}getSelectedValue(){var e;return(e=this.selectedItem)===null||e===void 0?void 0:e.id}filterItems(e){const t=this.mapSelectedItemToItemsArray();if(!(e===null||e===void 0?void 0:e.length)){this.itemsList=t}else{this.itemsList=t.filter((t=>t.name.toUpperCase().includes(e.toUpperCase()))).map((t=>{const s=t.name.toUpperCase().indexOf(e.toUpperCase());const i=s+e.length;const l=t.name.substring(0,s)+`<strong>${t.name.substring(s,i)}</strong>`+t.name.substring(i,t.name.length);t.name=l;return t}))}}hasAutocomplete(){return o(this.autocomplete)===true}handleInputChange(e){this.searchString=e.detail.value;if(!this.isOpen){this.toggleSelectUl()}}selectItem(e,t){if(e&&e.disabled){return}this.itemsList=this.mapSelectedItemToItemsArray();this.itemsList=this.itemsList.map((s=>{s.selected=false;if(s.id===(e===null||e===void 0?void 0:e.id)){s.selected=t}return s}));this.selectedItem=this.itemsList.find((e=>e.selected));this.emitOptionSelect();if(this.searchString){this.searchString=null}}arrowsSelectNav(e,t){const s=this.resetItem&&!!this.selectedItem;const i=[c.ARROW_DOWN,c.ARROW_UP];if(!i.includes(e.key)){return}e.preventDefault();e.stopPropagation();if(!this.isOpen){this.toggleSelectUl()}let l;if(this.resetItem){if(e.key===c.ARROW_DOWN){l=t+1===this.itemsList.length+1?+!s:t+1}else if(e.key===c.ARROW_UP){l=t<=+!s?this.itemsList.length:t-1}}if(!this.resetItem){if(e.key===c.ARROW_DOWN){l=t+1===this.itemsList.length?0:t+1}else if(e.key===c.ARROW_UP){l=t<=0?this.itemsList.length-1:t-1}}this.focusSelectItem(l)}focusSelectItem(e){const t=this.element.querySelector(`#${this.htmlid}_${e}`);if(t){t.focus()}}toggleSelectUl(e=false){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(e){this.element.querySelector(`#${this.htmlid}_input`).focus()}}this.focusedItemId="";this.isOpen=!this.isOpen}handleInputClick(e){const t=e.composedPath();const s=t.find((e=>e.classList&&e.classList.contains("reset-icon")));if(s){e.stopPropagation();return}this.toggleSelectUl()}handleSelectFocus(e){if(e instanceof KeyboardEvent&&e.key===c.ESC){e.stopPropagation();return this.toggleSelectUl(true)}if(e instanceof KeyboardEvent&&e.key!==c.TAB&&e.key!==c.ENTER){return}const t=h(z());const s=t.find((e=>e.nodeName.toLowerCase()==="z-input"&&e.id===`${this.htmlid}_input`));if(!s){this.toggleSelectUl(e instanceof MouseEvent?true:false)}}scrollToLetter(e){const t=this.itemsList.find((t=>t.name.charAt(0)===e));if(t){this.focusSelectItem(this.itemsList.indexOf(t))}}renderInput(){return s("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:`${this.htmlid}_input`,htmlid:`${this.htmlid}_select_input`,placeholder:this.placeholder,value:!this.isOpen&&this.selectedItem?this.selectedItem.name.replace(/<[^>]+>/g,""):null,label:this.label,"aria-expanded":this.isOpen?"true":"false","aria-label":this.ariaLabel,"aria-controls":`${this.htmlid}_list`,"aria-autocomplete":this.hasAutocomplete()?"list":"none","aria-activedescendant":this.isOpen?this.focusedItemId:"",icon:this.isOpen?"caret-up":"caret-down",hasclearicon:this.hasAutocomplete(),message:false,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?undefined:this.status,role:"combobox",size:this.size,onClick:e=>{this.handleInputClick(e)},onKeyUp:e=>{if(e.keyCode!==13){e.preventDefault()}p(e,this.toggleSelectUl)},onKeyDown:e=>this.arrowsSelectNav(e,this.selectedItem?this.itemsList.indexOf(this.selectedItem):this.resetItem?0:-1),onInputChange:e=>{this.handleInputChange(e)},onKeyPress:e=>{if(!this.hasAutocomplete()){e.preventDefault();this.scrollToLetter(String.fromCharCode(e.keyCode))}}})}renderSelectUl(){return s("div",{class:this.isOpen?"open":"closed",tabindex:"-1"},s("div",{class:{"ul-scroll-wrapper":true,fixed:this.isfixed},tabindex:"-1"},s("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,filled:!!this.selectedItem,[`input-${this.status}`]:!this.isOpen&&!!this.status}},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))}renderResetItem(){return s("z-list-element",{class:{hide:!this.selectedItem||!this.resetItem,"reset-item":true,"reset-item-margin":!this.hasGroupItems},clickable:true,disabled:false,dividerType:r.ELEMENT,role:"option",tabindex:"0","aria-selected":"false",id:`${this.htmlid}_${this.resetItem?"0":"none"}`,size:this.listSizeType(),onClickItem:()=>{this.selectedItem=null;this.searchString=null;this.emitResetSelect()},onKeyDown:e=>this.arrowsSelectNav(e,0)},s("div",{class:"reset-item-content"},s("z-icon",{name:"multiply-circled"}),s("span",null,this.resetItem)))}renderItem(e,t,i){return s("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:i?r.HEADER:r.ELEMENT,role:"option",tabindex:e.disabled||!this.isOpen?-1:0,"aria-selected":e.selected?"true":"false",id:`${this.htmlid}_${t}`,size:this.listSizeType(),onClickItem:()=>this.selectItem(e,true),onKeyDown:e=>this.arrowsSelectNav(e,t)},s("div",{class:"list-element-container"},s("span",{class:{selected:!!e.selected,"list-element-content":true},innerHTML:e.name}),e.icon&&s("z-tag",{icon:e.icon})))}listSizeType(){if(this.size===l.SMALL||this.size===l.X_SMALL){return n.SMALL}return n.MEDIUM}renderSelectUlItems(){if(!this.itemsList.length){return this.renderNoSearchResults()}if(this.hasGroupItems){return this.renderSelectGroupItems()}return this.itemsList.map(((e,t,s)=>{const i=s.length===t+1;const l=this.resetItem?t+1:t;return this.renderItem(e,l,i)}))}renderSelectGroupItems(){const e=this.itemsList.reduce(((e,t,s,i)=>{var l;const{category:c}=t;const r=i.length===s+1;const n=this.resetItem?s+1:s;const a=this.renderItem(t,n,r);e[c]=(l=e[c])!==null&&l!==void 0?l:[];e[c].push(a);return e}),{});return Object.entries(e).map((([e,t])=>s("z-list-group",{"divider-type":r.ELEMENT},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},e),t.map((e=>e)))))}renderNoSearchResults(){return s("z-list-element",{color:"blue500",class:"no-results",size:this.listSizeType()},s("z-icon",{name:"multiply-circle",fill:"blue500"}),this.noresultslabel)}renderMessage(){if(o(this.message)===false){return}return s("z-input-message",{message:o(this.message)===true?undefined:this.message,status:this.status,class:this.size})}render(){return s("div",{key:"1ad24c71d6838f434592d96047388b0fb3886127",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get element(){return i(this)}static get watchers(){return{items:["watchItems"]}}};m.style=u;export{m as z_select};
-//# sourceMappingURL=p-972098a5.entry.js.map

package/dist/web-components-library/p-972098a5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSelectStyle0","ZSelect","constructor","hostRef","this","itemsList","randomId","ControlSize","BIG","toggleSelectUl","bind","selectItem","handleSelectFocus","watchItems","getInitialItemsArray","selectedItem","find","item","selected","getFocusedItemHandler","e","focusedItemId","target","id","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","includes","emitOptionSelect","optionSelect","emit","htmlid","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","items","JSON","parse","mapSelectedItemToItemsArray","initialItemsList","map","_a","prevList","length","filter","name","toUpperCase","start","indexOf","end","newName","substring","hasAutocomplete","boolean","autocomplete","handleInputChange","detail","isOpen","disabled","i","arrowsSelectNav","key","showResetIcon","resetItem","arrows","KeyboardCode","ARROW_DOWN","ARROW_UP","preventDefault","stopPropagation","index","focusSelectItem","focusElem","element","querySelector","focus","selfFocusOnClose","readonly","document","addEventListener","removeEventListener","handleInputClick","cp","composedPath","clearIcon","classList","contains","KeyboardEvent","ESC","TAB","ENTER","tree","getElementTree","getClickedElement","parent","elem","nodeName","toLowerCase","MouseEvent","scrollToLetter","letter","foundItem","charAt","renderInput","h","class","placeholder","replace","label","ariaLabel","icon","hasclearicon","message","status","undefined","role","size","onClick","onKeyUp","keyCode","handleKeyboardSubmit","onKeyDown","onInputChange","onKeyPress","String","fromCharCode","renderSelectUl","tabindex","fixed","isfixed","listSizeType","filled","renderResetItem","renderSelectUlItems","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","onClickItem","renderItem","lastItem","HEADER","innerHTML","SMALL","X_SMALL","ListSize","MEDIUM","renderNoSearchResults","renderSelectGroupItems","array","itemKey","newData","reduce","group","category","zListItem","Object","entries","slot","color","fill","noresultslabel","renderMessage","render"],"sources":["src/components/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]),\n:host([size=\"x-small\"]) {\n  font-size: var(--font-size-2);\n}\n\n.select-wrapper > z-input {\n  width: 100%;\n}\n\n.select-wrapper > div {\n  position: relative;\n}\n\n.select-wrapper > div.closed {\n  overflow: hidden;\n  height: 0;\n}\n\n.select-wrapper .ul-scroll-wrapper {\n  position: absolute;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: none;\n  background: var(--color-surface01);\n  outline: none;\n}\n\n.select-wrapper .closed .ul-scroll-wrapper {\n  z-index: 10;\n}\n\n.select-wrapper .open .ul-scroll-wrapper {\n  z-index: 20;\n}\n\n.select-wrapper .ul-scroll-wrapper.fixed {\n  position: static;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: calc(var(--space-unit) * 0.5);\n  outline: none;\n\n  /* Firefox scrollbar */\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: calc(var(--space-unit) * 1.5);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-tag {\n  margin-right: calc(var(--space-unit));\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  .list-element-content {\n  padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  > z-icon\n  + .list-element-content {\n  padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n  font-weight: bold;\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n  margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n  color: var(--gray800);\n}\n\n.reset-item {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n.reset-item-content {\n  display: flex;\n  align-items: center;\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n  margin-left: calc(var(--space-unit));\n}\n\n.reset-item .reset-item-content > z-icon {\n  margin-right: var(--space-unit);\n}\n\n.reset-item.hide {\n  display: none;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, getClickedElement, getElementTree, handleKeyboardSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-select\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSelect {\n  @Element() element: HTMLZSelectElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** the input select options */\n  @Prop()\n  items: SelectItem[] | string;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional) */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional) - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input has autocomplete option */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** */\n  @Prop()\n  hasGroupItems?: boolean;\n\n  /** When fixed, it occupies space and pushes down next elements. */\n  @Prop()\n  isfixed?: boolean = false;\n\n  /** */\n  @Prop()\n  resetItem?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  selectedItem: null | SelectItem = null;\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  searchString: null | string;\n\n  private itemsList: SelectItem[] = [];\n\n  constructor() {\n    this.toggleSelectUl = this.toggleSelectUl.bind(this);\n    this.selectItem = this.selectItem.bind(this);\n    this.handleSelectFocus = this.handleSelectFocus.bind(this);\n  }\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = this.getInitialItemsArray();\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n  }\n\n  @Listen(\"ariaDescendantFocus\")\n  getFocusedItemHandler(e: CustomEvent): void {\n    this.focusedItemId = (e.target as Element).id;\n  }\n\n  /** get the input selected options */\n  @Method()\n  async getSelectedItem(): Promise<SelectItem> {\n    return this.selectedItem;\n  }\n\n  /** get the input value */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.getSelectedValue();\n  }\n\n  /** set the input value */\n  @Method()\n  async setValue(value: string | string[]): Promise<void> {\n    let values: string[] = [];\n    if (typeof value === \"string\") {\n      values.push(value);\n    } else {\n      values = value;\n    }\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => values.includes(item.id));\n  }\n\n  /** Emitted on select option selection, returns select id, selected item id */\n  @Event()\n  optionSelect: EventEmitter;\n\n  private emitOptionSelect(): void {\n    this.optionSelect.emit({\n      id: this.htmlid,\n      selected: this.getSelectedValue(),\n    });\n  }\n\n  /** Emitted on reset selected item, returns select id, selected item id */\n  @Event()\n  resetSelect: EventEmitter;\n\n  private emitResetSelect(): void {\n    this.resetSelect.emit({\n      id: this.htmlid,\n    });\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.filterItems(this.searchString);\n  }\n\n  private getInitialItemsArray(): SelectItem[] {\n    return typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  private mapSelectedItemToItemsArray(): SelectItem[] {\n    const initialItemsList = this.getInitialItemsArray();\n\n    return initialItemsList.map((item: SelectItem) => {\n      item.selected = item.id === this.selectedItem?.id;\n\n      return item;\n    });\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private filterItems(searchString: string): void {\n    const prevList = this.mapSelectedItemToItemsArray();\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n    } else {\n      this.itemsList = prevList\n        .filter((item: SelectItem) => {\n          return item.name.toUpperCase().includes(searchString.toUpperCase());\n        })\n        .map((item: SelectItem) => {\n          const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());\n          const end = start + searchString.length;\n          const newName =\n            item.name.substring(0, start) +\n            `<strong>${item.name.substring(start, end)}</strong>` +\n            item.name.substring(end, item.name.length);\n          item.name = newName;\n\n          return item;\n        });\n    }\n  }\n\n  private hasAutocomplete(): boolean {\n    return boolean(this.autocomplete) === true;\n  }\n\n  private handleInputChange(e: CustomEvent): void {\n    this.searchString = e.detail.value;\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n  }\n\n  private selectItem(item: null | SelectItem, selected: boolean): void {\n    if (item && item.disabled) {\n      return;\n    }\n\n    this.itemsList = this.mapSelectedItemToItemsArray();\n    this.itemsList = this.itemsList.map((i: SelectItem) => {\n      i.selected = false;\n      if (i.id === item?.id) {\n        i.selected = selected;\n      }\n\n      return i;\n    });\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n\n    this.emitOptionSelect();\n\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent, key: number): void {\n    const showResetIcon = this.resetItem && !!this.selectedItem;\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n\n    let index: number;\n\n    if (this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length + 1 ? +!showResetIcon : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= +!showResetIcon ? this.itemsList.length : key - 1;\n      }\n    }\n\n    if (!this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length ? 0 : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= 0 ? this.itemsList.length - 1 : key - 1;\n      }\n    }\n\n    this.focusSelectItem(index);\n  }\n\n  private focusSelectItem(index: number): void {\n    const focusElem: HTMLLIElement = this.element.querySelector(`#${this.htmlid}_${index}`);\n    if (focusElem) {\n      focusElem.focus();\n    }\n  }\n\n  private toggleSelectUl(selfFocusOnClose = false): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      document.addEventListener(\"click\", this.handleSelectFocus);\n      document.addEventListener(\"keyup\", this.handleSelectFocus);\n    } else {\n      document.removeEventListener(\"click\", this.handleSelectFocus);\n      document.removeEventListener(\"keyup\", this.handleSelectFocus);\n      if (selfFocusOnClose) {\n        (this.element.querySelector(`#${this.htmlid}_input`) as HTMLInputElement).focus();\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    const cp = e.composedPath();\n    const clearIcon = cp.find((item: HTMLElement) => item.classList && item.classList.contains(\"reset-icon\"));\n    if (clearIcon) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n\n      return this.toggleSelectUl(true);\n    }\n\n    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {\n      return;\n    }\n\n    const tree = getElementTree(getClickedElement());\n    const parent = tree.find((elem: HTMLElement) => {\n      return elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`;\n    });\n\n    if (!parent) {\n      this.toggleSelectUl(e instanceof MouseEvent ? true : false);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    const foundItem = this.itemsList.find((item: SelectItem) => item.name.charAt(0) === letter);\n    if (foundItem) {\n      this.focusSelectItem(this.itemsList.indexOf(foundItem));\n    }\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        class={{\n          \"active-select\": this.isOpen,\n          \"cursor-select\": !this.autocomplete,\n        }}\n        id={`${this.htmlid}_input`}\n        htmlid={`${this.htmlid}_select_input`}\n        placeholder={this.placeholder}\n        value={!this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, \"\") : null}\n        label={this.label}\n        aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        aria-controls={`${this.htmlid}_list`}\n        aria-autocomplete={this.hasAutocomplete() ? \"list\" : \"none\"}\n        aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={this.hasAutocomplete()}\n        message={false}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        status={this.isOpen ? undefined : this.status}\n        role=\"combobox\"\n        size={this.size}\n        onClick={(e: MouseEvent) => {\n          this.handleInputClick(e);\n        }}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.keyCode !== 13) {\n            e.preventDefault();\n          }\n          handleKeyboardSubmit(e, this.toggleSelectUl);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          return this.arrowsSelectNav(\n            e,\n            this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : this.resetItem ? 0 : -1\n          );\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.handleInputChange(e);\n        }}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(String.fromCharCode(e.keyCode));\n          }\n        }}\n      />\n    );\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div\n        class={this.isOpen ? \"open\" : \"closed\"}\n        tabindex=\"-1\"\n      >\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\n          tabindex=\"-1\"\n        >\n          <z-list\n            role=\"listbox\"\n            aria-label={this.ariaLabel || this.label}\n            tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n            id={`${this.htmlid}_list`}\n            aria-multiselectable={false}\n            size={this.listSizeType()}\n            class={{\n              disabled: this.disabled,\n              readonly: this.readonly,\n              filled: !!this.selectedItem,\n              [`input-${this.status}`]: !this.isOpen && !!this.status,\n            }}\n          >\n            {this.resetItem && this.renderResetItem()}\n            {this.renderSelectUlItems()}\n          </z-list>\n        </div>\n      </div>\n    );\n  }\n\n  private renderResetItem(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        class={{\n          \"hide\": !this.selectedItem || !this.resetItem,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected=\"false\"\n        id={`${this.htmlid}_${this.resetItem ? \"0\" : \"none\"}`}\n        size={this.listSizeType()}\n        onClickItem={() => {\n          this.selectedItem = null;\n          this.searchString = null;\n          this.emitResetSelect();\n        }}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, 0)}\n      >\n        <div class=\"reset-item-content\">\n          <z-icon name=\"multiply-circled\" />\n          <span>{this.resetItem}</span>\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderItem(item: SelectItem, key: number, lastItem: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={item.disabled}\n        dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex={item.disabled || !this.isOpen ? -1 : 0}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        id={`${this.htmlid}_${key}`}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item, true)}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, key)}\n      >\n        <div class=\"list-element-container\">\n          <span\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n\n          {item.icon && <z-tag icon={item.icon}></z-tag>}\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private listSizeType(): ListSize {\n    if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {\n      return ListSize.SMALL;\n    }\n\n    return ListSize.MEDIUM;\n  }\n\n  private renderSelectUlItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems) {\n      return this.renderSelectGroupItems();\n    }\n\n    return this.itemsList.map((item: SelectItem, key, array) => {\n      const lastItem = array.length === key + 1;\n      const itemKey = this.resetItem ? key + 1 : key;\n\n      return this.renderItem(item, itemKey, lastItem);\n    });\n  }\n\n  private renderSelectGroupItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    const newData = this.itemsList.reduce((group, item, index, array) => {\n      const {category} = item;\n      const lastItem = array.length === index + 1;\n      const itemKey = this.resetItem ? index + 1 : index;\n      const zListItem = this.renderItem(item, itemKey, lastItem);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    return 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\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        color=\"blue500\"\n        class=\"no-results\"\n        size={this.listSizeType()}\n      >\n        <z-icon\n          name=\"multiply-circle\"\n          fill=\"blue500\"\n        />\n        {this.noresultslabel}\n      </z-list-element>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n      />\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"select-wrapper\">\n        {this.renderInput()}\n        {this.renderSelectUl()}\n        {this.renderMessage()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-9f0a3d88.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s}from"./p-75c4a726.js";import{d as e}from"./p-10607a39.js";import"./p-b34993de.js";import"./p-5145a606.js";const a=":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--color-primary01);fill:var(--color-primary01)}";const n=a;const o=class{emitZListItemLinkClick(i,t){this.zListItemLinkClick.emit({e:i,linkId:t})}emitZListItemClick(i,t){this.zListItemClick.emit({e:i,listitemid:t})}constructor(s){i(this,s);this.zListItemLinkClick=t(this,"zListItemLinkClick",7);this.zListItemClick=t(this,"zListItemClick",7);this.text=undefined;this.link=undefined;this.linktarget="_self";this.icon=undefined;this.listitemid=undefined;this.action=undefined;this.underlined=true;this.emitZListItemLinkClick=this.emitZListItemLinkClick.bind(this);this.emitZListItemClick=this.emitZListItemClick.bind(this)}render(){const i=this.listitemid?`link_${this.listitemid}`:"";return s("li",{key:"b96b5f850ed4f955ef40eafdedfabe71c942e886",role:"button",id:this.listitemid,"data-action":this.action,onClick:i=>this.emitZListItemClick(i,this.listitemid),onKeyPress:i=>e(i,this.emitZListItemClick,this.listitemid)},s("span",{key:"2ca05ec788e9ff591ad7b1cdbb5517b32d5681a9",class:this.underlined&&"border"},this.icon&&s("z-icon",{key:"e573f22f4797e9420e9a460a4aa4c793be06c14f",name:this.icon}),this.link?s("a",{href:this.link?this.link:null,target:this.linktarget,id:i,onClick:t=>this.emitZListItemLinkClick(t,i),onKeyPress:t=>e(t,this.emitZListItemLinkClick,i),role:this.link?"link":"button",tabindex:"0"},this.text):s("span",{innerHTML:this.text}),s("slot",{key:"6efed7b8ca33c2dcb7402555330443244340bae5"})))}};o.style=n;export{o as z_myz_list_item};
-//# sourceMappingURL=p-9f0a3d88.entry.js.map

package/dist/web-components-library/p-9f0a3d88.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzListItemStyle0","ZMyzListItem","emitZListItemLinkClick","e","linkId","this","zListItemLinkClick","emit","emitZListItemClick","listitemid","zListItemClick","constructor","hostRef","bind","render","h","key","role","id","action","onClick","onKeyPress","ev","handleKeyboardSubmit","class","underlined","icon","name","link","href","target","linktarget","tabindex","text","innerHTML"],"sources":["src/snowflakes/myz/list/z-myz-list-item/styles.css?tag=z-myz-list-item&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list-item/index.tsx"],"sourcesContent":[":host li {\n  all: unset;\n  all: reset;\n  width: 100%;\n  line-height: 14px;\n  list-style-type: none;\n}\n\n:host li > span {\n  display: flex;\n  padding: calc(var(--space-unit) * 2) 0;\n  color: var(--color-default-text);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.23px;\n  line-height: 14px;\n}\n\n:host(.small) li > span {\n  padding: calc(var(--space-unit) * 1.5) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.x-small) li > span {\n  padding: var(--space-unit) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.small) li > span > z-icon,\n:host(.x-small) li > span > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n\n  padding: 0;\n}\n\n:host li > span.border {\n  border-bottom: 2px solid var(--color-surface03);\n}\n\n:host li span:hover,\na:hover {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\na,\na:visited,\na:active {\n  color: inherit;\n  fill: inherit;\n  text-decoration: none;\n}\n\n:host li span z-icon {\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  padding: 0 calc(var(--space-unit) * 1.5) 0 0;\n  background-repeat: no-repeat;\n  background-size: contain;\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n@Component({\n  tag: \"z-myz-list-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzListItem {\n  /** content text */\n  @Prop()\n  text: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target (optional) */\n  @Prop()\n  linktarget?: string = \"_self\";\n\n  /** icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** id (optional) */\n  @Prop()\n  listitemid?: string;\n\n  /** data-action attribute (optional) */\n  @Prop()\n  action?: string;\n\n  /** underlined style flag */\n  @Prop()\n  underlined = true;\n\n  /** emitted on list item link click, returns linkId */\n  @Event()\n  zListItemLinkClick: EventEmitter;\n\n  private emitZListItemLinkClick(e: MouseEvent, linkId): void {\n    this.zListItemLinkClick.emit({e, linkId});\n  }\n\n  /** emitted on list item click, returns listitemid */\n  @Event()\n  zListItemClick: EventEmitter;\n\n  private emitZListItemClick(e: MouseEvent, listitemid): void {\n    this.zListItemClick.emit({e, listitemid});\n  }\n\n  constructor() {\n    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);\n    this.emitZListItemClick = this.emitZListItemClick.bind(this);\n  }\n\n  render(): HTMLLIElement {\n    const linkId = this.listitemid ? `link_${this.listitemid}` : \"\";\n\n    return (\n      <li\n        role=\"button\"\n        id={this.listitemid}\n        data-action={this.action}\n        onClick={(e: MouseEvent) => this.emitZListItemClick(e, this.listitemid)}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid)}\n      >\n        <span class={this.underlined && \"border\"}>\n          {this.icon && <z-icon name={this.icon} />}\n          {this.link ? (\n            <a\n              href={this.link ? this.link : null}\n              target={this.linktarget}\n              id={linkId}\n              onClick={(e: MouseEvent) => this.emitZListItemLinkClick(e, linkId)}\n              onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId)}\n              role={this.link ? \"link\" : \"button\"}\n              tabindex=\"0\"\n            >\n              {this.text}\n            </a>\n          ) : (\n            <span innerHTML={this.text}></span>\n          )}\n          <slot />\n        </span>\n      </li>\n    );\n  }\n}\n"],"mappings":"sIAAA,MAAMA,EAAY,smCAClB,MAAAC,EAAeD,E,MCOFE,EAAY,MAiCf,sBAAAC,CAAuBC,EAAeC,GAC5CC,KAAKC,mBAAmBC,KAAK,CAACJ,IAAGC,U,CAO3B,kBAAAI,CAAmBL,EAAeM,GACxCJ,KAAKK,eAAeH,KAAK,CAACJ,IAAGM,c,CAG/B,WAAAE,CAAAC,G,wKAlCsB,Q,oFAgBT,KAmBXP,KAAKH,uBAAyBG,KAAKH,uBAAuBW,KAAKR,MAC/DA,KAAKG,mBAAqBH,KAAKG,mBAAmBK,KAAKR,K,CAGzD,MAAAS,GACE,MAAMV,EAASC,KAAKI,WAAa,QAAQJ,KAAKI,aAAe,GAE7D,OACEM,EAAA,MAAAC,IAAA,2CACEC,KAAK,SACLC,GAAIb,KAAKI,WAAU,cACNJ,KAAKc,OAClBC,QAAUjB,GAAkBE,KAAKG,mBAAmBL,EAAGE,KAAKI,YAC5DY,WAAaC,GAAsBC,EAAqBD,EAAIjB,KAAKG,mBAAoBH,KAAKI,aAE1FM,EAAA,QAAAC,IAAA,2CAAMQ,MAAOnB,KAAKoB,YAAc,UAC7BpB,KAAKqB,MAAQX,EAAA,UAAAC,IAAA,2CAAQW,KAAMtB,KAAKqB,OAChCrB,KAAKuB,KACJb,EAAA,KACEc,KAAMxB,KAAKuB,KAAOvB,KAAKuB,KAAO,KAC9BE,OAAQzB,KAAK0B,WACbb,GAAId,EACJgB,QAAUjB,GAAkBE,KAAKH,uBAAuBC,EAAGC,GAC3DiB,WAAaC,GAAsBC,EAAqBD,EAAIjB,KAAKH,uBAAwBE,GACzFa,KAAMZ,KAAKuB,KAAO,OAAS,SAC3BI,SAAS,KAER3B,KAAK4B,MAGRlB,EAAA,QAAMmB,UAAW7B,KAAK4B,OAExBlB,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/web-components-library/p-a90027c2.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as a,a as n,g as t}from"./p-75c4a726.js";import{B as i}from"./p-b34993de.js";const r="html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;color:inherit;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface05);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-text-link-blue);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-hover-surface);color:var(--color-text-link-blue-hover)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}";const e=r;const c=class{constructor(a){o(this,a);this.hideUnselected=false;this.autoCurrent=true;this.collapsed=false}setCurrent(){const o=Array.from(this.nav.querySelectorAll("a")).find((o=>o.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((a=>{const n=a instanceof HTMLAnchorElement?a:a.querySelector("a");const t=n===o;n.setAttribute("aria-current",t.toString());a.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return a(n,{key:"13b73e5270d20ed2fe6993c36bcc67b462e906c6",collapsed:this.collapsed},a("z-button",{key:"e30c82721fc47924bcea1d16d0df1809ce8bf9e5",class:"toggle",variant:i.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},"salta a"),a("nav",{key:"2947b460bbaa7df8d2a8a9a50c51d1b4aa9230d4",ref:o=>this.nav=o},a("slot",{key:"9db93583f854c9a6ca57da4d7efeebca6c88836e"})))}get host(){return t(this)}};c.style=e;export{c as z_anchor_navigation};
-//# sourceMappingURL=p-a90027c2.entry.js.map

package/dist/web-components-library/p-a90027c2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setCurrent","currentElement","Array","from","this","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","autoCurrent","window","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n  scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n  display: none;\n  flex-direction: column;\n  justify-content: flex-start;\n  row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n  display: flex;\n  margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n  display: -webkit-box;\n  overflow: clip;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  -webkit-box-orient: vertical;\n  color: inherit;\n  font-weight: inherit;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  overflow-clip-margin: content-box;\n  text-decoration: none;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n  padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n  z-anchor-navigation nav a {\n    display: inline-block;\n    overflow: hidden;\n    -webkit-line-clamp: none;\n    line-clamp: none;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\nz-anchor-navigation nav > * {\n  position: relative;\n  border-left: var(--border-size-large) solid var(--color-surface05);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  transition:\n    background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n  border-left-color: var(--color-primary01);\n  color: var(--color-text-link-blue);\n  font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nz-anchor-navigation nav button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\n@media (min-width: 768px) {\n  z-anchor-navigation z-button.toggle {\n    display: none !important;\n  }\n\n  z-anchor-navigation nav {\n    display: flex;\n  }\n\n  /* hide anchor actions by default... */\n  z-anchor-navigation nav > * > :is(z-button, button) {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    /* ...show them only hovering/focusing the anchor */\n    z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n      opacity: 1;\n      pointer-events: unset;\n    }\n\n    z-anchor-navigation nav > *:hover {\n      border-left-color: var(--color-hover-primary);\n      background-color: var(--color-hover-surface);\n      color: var(--color-text-link-blue-hover);\n    }\n  }\n\n  z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n    color: transparent;\n    fill: transparent;\n  }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Enables automatic inference of the current item, listening for hash change\n   * and checking the `href` of the slotted anchors.\n   * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n   * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n   */\n  @Prop()\n  autoCurrent = true;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  @Element() host: HTMLZAnchorNavigationElement;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set `aria-current` attribute to the anchors.\n   */\n  private setCurrent(): void {\n    const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n      (anchor) => anchor.href === this.host.ownerDocument.location.href\n    );\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = anchor === currentElement;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    if (this.autoCurrent) {\n      window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n      this.setCurrent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host collapsed={this.collapsed}>\n        <z-button\n          class=\"toggle\"\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          salta a\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,4tEAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,iBASH,K,eAMF,K,CAUJ,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKC,KAAKC,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASL,KAAKM,KAAKC,cAAcC,SAASH,OAE/DP,MAAMC,KAAKC,KAAKC,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWP,EAC7BO,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACNlB,KAAKmB,WAAanB,KAAKmB,S,CAGzB,gBAAAC,GACE,GAAIpB,KAAKqB,YAAa,CACpBC,OAAOC,iBAAiB,aAAcvB,KAAKJ,WAAW4B,KAAKxB,OAC3DA,KAAKJ,Y,EAIT,oBAAA6B,GACEH,OAAOI,oBAAoB,aAAc1B,KAAKJ,W,CAGhD,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACX,UAAWnB,KAAKmB,WACpBS,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAMnC,KAAKmB,UAAY,aAAe,eACtCiB,QAASpC,KAAKkB,gBAAgBM,KAAKxB,OAAK,WAI1C4B,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQtC,KAAKC,IAAMqC,GAC5BV,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/web-components-library/p-aa0b3e7a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as a,a as n,g as e}from"./p-75c4a726.js";import{N as o,a as s,b as r}from"./p-b34993de.js";const l='z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';const h=l;const c=class{constructor(a){t(this,a);this.selected=i(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=o.HORIZONTAL;this.size=s.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}get direction(){return this.orientation==o.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==o.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=this.orientation===o.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};t.scrollIntoView(Object.assign({behavior:"smooth"},i))}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(r).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.name.replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;if(a){a.name=n}return}if(a){a.name=`${n}-filled`}t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===r.RIGHT&&this.orientation==o.HORIZONTAL||t.key===r.DOWN&&this.orientation==o.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===r.LEFT&&this.orientation==o.HORIZONTAL||t.key===r.UP&&this.orientation==o.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(n,{key:"8f134ce69da30cd0a053700a95c39a4ec9d588ed",class:{"interactive-2":this.size===s.SMALL,"interactive-1":this.size!==s.SMALL},scrollable:this.canNavigate},a("button",{key:"231f97991908054d424dbcc83fd7e65e6651e767",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},a("z-icon",{key:"145b4e6220e14acfbe6c13d1da095128096064c1",name:this.orientation===o.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),a("nav",{key:"111d66f763a80c52fdd21a906028cb7aa4817ee7",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},a("slot",{key:"ea3edcae8daaa4b5ad1124957d47d05f899f3bc2"})),a("button",{key:"b5329374d042f246c785b868a87bcf5a39d2c712",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},a("z-icon",{key:"373978c44182a33ca9d844eb3fa6c6991511d63f",name:this.orientation===o.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return e(this)}static get watchers(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}}};c.style=h;export{c as z_navigation_tabs};
-//# sourceMappingURL=p-aa0b3e7a.entry.js.map

package/dist/web-components-library/p-aa0b3e7a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZNavigationTabsStyle0","ZNavigationTabs","this","focusedTab","undefined","NavigationTabsOrientation","HORIZONTAL","NavigationTabsSize","BIG","direction","orientation","dimension","tabs","Array","from","nav","children","scrollToTab","tabElement","scrollOptions","block","inline","scrollIntoView","Object","assign","behavior","navigateBackwards","scrollBy","toLowerCase","navigateForward","isArrowNavigation","e","values","NavigationTabsKeyboardEvents","includes","key","checkScrollVisible","canNavigate","checkScrollEnabled","canNavigateNext","canNavigatePrev","onTabSelected","forEach","tab","i","zicon","querySelector","strokeIcon","name","replace","selectedTab","setAttribute","tabIndex","selected","emit","handleTabClick","event","clickedTab","target","closest","some","child","contains","indexOf","onTabFocusIn","focused","findIndex","navigateThroughTabs","preventDefault","RIGHT","DOWN","VERTICAL","length","LEFT","UP","hasAttribute","getAttribute","focus","onTabFocusOut","relatedTarget","_a","connectedCallback","resizeObserver","ResizeObserver","componentDidLoad","preselectedTab","ariaSelected","observe","disconnectedCallback","disconnect","render","h","Host","class","size","SMALL","scrollable","onClick","bind","disabled","hidden","width","height","role","ariaLabel","ref","el","onScroll"],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--blue800);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-background);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-primary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    tabElement.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-aa42f01d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as n}from"./p-75c4a726.js";import{f as r}from"./p-b34993de.js";const e="input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";const o=e;const s=class{constructor(n){t(this,n);this.otpChange=i(this,"otpChange",7);this.inputNum=6;this.status=undefined;this.message=undefined}emitInputChange(t){this.otpChange.emit({value:t})}componentWillLoad(){this.otp=[...Array(this.inputNum)];this.otpRef=[...Array(this.inputNum)]}render(){return n("div",{key:"94853e28f7436d7d36a714903652859b8946d815",class:"otp-container"},n("div",{key:"064503a5920f0b6db493b0a0514019674647ce65",class:"digits-container"},this.otp.map(((t,i)=>n("input",{class:this.status==r.ERROR?"error":null,onKeyDown:t=>{if(t.keyCode>47){this.otpRef[i].value=""}},onKeyUp:t=>{if(t.keyCode>47){i<this.inputNum-1&&this.otpRef[i+1].focus()}},onInput:t=>{this.otp[i]=t.target.value;this.emitInputChange(this.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:t=>this.otpRef[i]=t})))),n("z-input-message",{key:"915a9e80bb6c9e775e029fa6c2680f9fe4720f4b",message:this.message,status:this.status}))}};s.style=o;export{s as z_otp};
-//# sourceMappingURL=p-aa42f01d.entry.js.map

package/dist/web-components-library/p-aa42f01d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZOtpStyle0","ZOtp","emitInputChange","value","this","otpChange","emit","componentWillLoad","otp","Array","inputNum","otpRef","render","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-error01);\n  background-color: var(--color-error-inverse);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,iyBAClB,MAAAC,EAAeD,E,MCOFE,EAAI,M,4EAGK,E,6CAkBZ,eAAAC,CAAgBC,GACtBC,KAAKC,UAAUC,KAAK,CAACH,S,CAGvB,iBAAAI,GACEH,KAAKI,IAAM,IAAIC,MAAML,KAAKM,WAC1BN,KAAKO,OAAS,IAAIF,MAAML,KAAKM,U,CAG/B,MAAAE,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRX,KAAKI,IAAIQ,KAAI,CAACC,EAAMC,IACnBL,EAAA,SACEE,MAAOX,KAAKe,QAAUC,EAAYC,MAAQ,QAAU,KACpDC,UAAYC,IACV,GAAIA,EAAEC,QAAU,GAAI,CAClBpB,KAAKO,OAAOO,GAAGf,MAAQ,E,GAG3BsB,QAAUF,IACR,GAAIA,EAAEC,QAAU,GAAI,CAClBN,EAAId,KAAKM,SAAW,GAAKN,KAAKO,OAAOO,EAAI,GAAGQ,O,GAGhDC,QAAUJ,IACRnB,KAAKI,IAAIU,GAAMK,EAAEK,OAA4BzB,MAC7CC,KAAKF,gBAAgBE,KAAKI,IAAIqB,KAAK,IAAI,EAEzCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAMC,GAAQ/B,KAAKO,OAAOO,GAAKiB,OAIrCtB,EAAA,mBAAAC,IAAA,2CACEsB,QAAShC,KAAKgC,QACdjB,OAAQf,KAAKe,S","ignoreList":[]}

package/dist/web-components-library/p-ad825740.entry.js

@@ -1,2 +0,0 @@
-export{Z as z_th}from"./p-123739cb.js";import"./p-75c4a726.js";import"./p-b34993de.js";
-//# sourceMappingURL=p-ad825740.entry.js.map

package/dist/web-components-library/p-b309bd71.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,a as s,g as o}from"./p-75c4a726.js";import{U as n,V as r,p as a,g as l,P as h,i as p}from"./p-b34993de.js";import{g as c,d}from"./p-10607a39.js";import"./p-5145a606.js";const u=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";const f=u;const m=class{constructor(e){t(this,e);this.clickOnNode=i(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=n.UNDERLINED;this.homepageVariant=r.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(t,i){if(t===a.MOBILE||i===a.MOBILE&&t===a.TABLET||i===a.MOBILE&&t===a.DESKTOP||i===a.MOBILE&&t===a.DESKTOP_WIDE||i===a.TABLET&&t===a.DESKTOP||i===a.TABLET&&t===a.DESKTOP_WIDE||i===a.DESKTOP&&t===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==a.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==a.MOBILE&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}initializeBreadcrumb(){if(this.viewPortWidth===a.MOBILE){this.pathsList=this.getPathsItemsList().filter((t=>!!t.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let t=0;t<this.pathsList.length;t++){if(this.pathsList[t].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(t!==this.pathsList.length-1){const i=this.truncateWithEllipsis(this.pathsList[t].text,this.truncateChar);this.currentEllipsisText=this.pathsList[t].text;this.pathsList[t].text=i;this.pathsList[t].hasTooltip=true;this.truncatePosition=t;return}}}truncateWithEllipsis(t,i){if(t.length<=i){return t}return t.substring(0,i-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((t=>({text:t.textContent,path:t.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===r.TEXT},href:this.homepageNode.path,onClick:t=>this.handlePreventFollowUrl(t,this.homepageNode),innerHTML:this.homepageVariant===r.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(t,i){if(this.preventFollowUrl){t.preventDefault();this.clickOnNode.emit(i.path)}}handleOverflowMenuAccessibility(t){const i=this.anchorElements.length;if(t.key===l.TAB){t.preventDefault();return}t.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(t.key)){t.preventDefault();if(t.key===l.ARROW_DOWN){this.currentIndex=i===this.currentIndex+1?0:this.currentIndex+1}if(t.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?i-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(t.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:t=>this.collapsedElementsRef=t,bindTo:this.triggerButton,position:h.BOTTOM_RIGHT,closable:true,showArrow:true},e("div",{class:"popover-content"},e("z-list",null,e("z-list-group",{size:p.SMALL},this.collapsedElements.map(((t,i,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onKeyDown:t=>this.handleOverflowMenuAccessibility(t),innerHTML:t.text})),i<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:t=>this.triggerButton=t,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:t=>{d(t,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}renderMobileItems(){const t=this.pathsList[this.pathsList.length-1];if(!t){return}return e("li",null,e("a",{"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!t.path,"text-ellipsis":true}},t.text)))}renderItems(){let t;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((i,s)=>e("li",null,i.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:t,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!i.path},ref:i=>t=i,"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onMouseOver:()=>{if(i.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(i.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:i.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right"}))))]}render(){return e(s,{key:"3d0996a611fe483de9a015c3ac5b25b06d5e302c",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"8c45a561fcdebb6c7685010dc7105b6c756025e1",ref:t=>this.wrapElement=t,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},e("ol",{key:"5cbdbcb8a14a471ae6dbad1d5d7eeb4ca3c8482b"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=f;export{m as z_breadcrumb};
-//# sourceMappingURL=p-b309bd71.entry.js.map

package/dist/web-components-library/p-b309bd71.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","length","maxNodesToShow","splice","i","text","truncateChar","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","h","class","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","popoverEllipsisOpen","onMouseOver","onMouseLeave","render","Host","style","overflowMenuItemRows","semibold","pathStyle","SEMIBOLD","underlined"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-text-link-blue);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-text-link-blue);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-background);\n  --z-popover-padding: 0;\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n      this.hasOverflow = true;\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qMAAA,MAAMA,EAAY,skEAClB,MAAAC,EAAeD,E,MCgBFE,EAAW,M,kEAmDdC,KAAAC,kBAAsC,GAQtCD,KAAAE,aAAe,EAQfF,KAAAG,iBAAmB,K,eAzDOC,EAAoBC,W,qBAIRC,EAA0BC,K,oBAItD,E,sBAIE,M,0BAII,E,kBAIR,G,8CAQF,M,yBAGQ,K,CA6BtB,YAAAC,GACER,KAAKS,cAAgBC,IACrB,GACEV,KAAKS,gBAAkBE,EAAOC,QAC9BZ,KAAKa,aACLb,KAAKa,YAAYC,YAAcd,KAAKa,YAAYE,YAChD,CACAf,KAAKgB,YAAc,I,EAKvB,gBAAAC,GACEjB,KAAKkB,sB,CAIP,cAAAC,CAAeC,EAAkBC,GAC/B,GACED,IAAaT,EAAOC,QACnBS,IAAaV,EAAOC,QAAUQ,IAAaT,EAAOW,QAClDD,IAAaV,EAAOC,QAAUQ,IAAaT,EAAOY,SAClDF,IAAaV,EAAOC,QAAUQ,IAAaT,EAAOa,cAClDH,IAAaV,EAAOW,QAAUF,IAAaT,EAAOY,SAClDF,IAAaV,EAAOW,QAAUF,IAAaT,EAAOa,cAClDH,IAAaV,EAAOY,SAAWH,IAAaT,EAAOa,aACpD,CACAxB,KAAKkB,sB,EAIT,iBAAAO,GACEzB,KAAKS,cAAgBC,IACrBV,KAAKkB,sB,CAGP,mBAAAQ,GACE,GAAI1B,KAAKS,gBAAkBE,EAAOC,QAAUZ,KAAKgB,YAAa,CAC5DhB,KAAK2B,8BACL3B,KAAKgB,YAAc,K,EAIvB,kBAAAY,GACE,GAAI5B,KAAK6B,qBAAsB,CAC7B7B,KAAK8B,eAAiBC,MAAMC,KAAKhC,KAAKiC,YAAYC,WAAWC,iBAAiB,kB,CAGhF,GAAInC,KAAKS,gBAAkBE,EAAOC,QAAUZ,KAAKa,YAAYC,YAAcd,KAAKa,YAAYE,YAAa,CACvGf,KAAKgB,YAAc,I,EAIf,oBAAAE,GACN,GAAIlB,KAAKS,gBAAkBE,EAAOC,OAAQ,CACxCZ,KAAKoC,UAAYpC,KAAKqC,oBAAoBC,QAAQC,KAAWA,EAAKC,M,KAC7D,CACLxC,KAAKoC,UAAYpC,KAAKqC,mB,CAExBrC,KAAKyC,aAAezC,KAAKoC,UAAUM,QACnC1C,KAAK2C,aAAe,IAAI3C,KAAKoC,WAC7BpC,KAAKC,kBAAoB,GACzB,GAAID,KAAKoC,UAAUQ,OAAS5C,KAAK6C,eAAgB,CAC/C7C,KAAKC,kBAAoBD,KAAKoC,UAAUU,OAAO,EAAG9C,KAAKoC,UAAUQ,OAAS,E,EAItE,2BAAAjB,GACN,IAAK,IAAIoB,EAAI,EAAGA,EAAI/C,KAAKoC,UAAUQ,OAAQG,IAAK,CAC9C,GAAI/C,KAAKoC,UAAUW,GAAGC,KAAKJ,QAAU5C,KAAKiD,aAAc,CACtD,Q,CAGF,GAAIjD,KAAKG,iBAAmB,EAAG,CAC7BH,KAAKC,kBAAkBiD,QAAQlD,KAAK2C,aAAaG,OAAO,EAAG9C,KAAKG,mBAChEH,KAAKoC,UAAUU,OAAO,EAAG9C,KAAKG,kBAC9BH,KAAKG,iBAAmB,EAExB,M,MACK,GAAIH,KAAKG,mBAAqB,EAAG,CACtCH,KAAKC,kBAAkBiD,QAAQlD,KAAK2C,aAAaG,OAAO,EAAG9C,KAAKG,iBAAmB,IACnFH,KAAKoC,UAAUU,OAAO,EAAG9C,KAAKG,iBAAmB,GACjDH,KAAKG,iBAAmB,KAExB,M,CAGF,GAAI4C,IAAM/C,KAAKoC,UAAUQ,OAAS,EAAG,CACnC,MAAMO,EAAkBnD,KAAKoD,qBAAqBpD,KAAKoC,UAAUW,GAAGC,KAAMhD,KAAKiD,cAC/EjD,KAAKqD,oBAAsBrD,KAAKoC,UAAUW,GAAGC,KAC7ChD,KAAKoC,UAAUW,GAAGC,KAAOG,EACzBnD,KAAKoC,UAAUW,GAAGO,WAAa,KAC/BtD,KAAKG,iBAAmB4C,EAExB,M,GAKE,oBAAAK,CAAqBG,EAAaC,GACxC,GAAID,EAAIX,QAAUY,EAAW,CAC3B,OAAOD,C,CAGT,OAAOA,EAAIE,UAAU,EAAGD,EAAY,GAAK,Q,CAGnC,iBAAAnB,GACN,OAAON,MAAMC,KAAKhC,KAAKiC,YAAYyB,UAAUC,KAAKpB,IACzC,CACLS,KAAMT,EAAKqB,YACXpB,KAAMD,EAAKsB,KACXP,WAAY,S,CAKV,kBAAAQ,GACN,OACEC,EAAA,UACEA,EAAA,KACEC,MAAO,CACL,gBAAiBhE,KAAKiE,kBAAoB3D,EAA0B4D,MAEtEL,KAAM7D,KAAKyC,aAAaD,KACxB2B,QAAUC,GAAMpE,KAAKqE,uBAAuBD,EAAGpE,KAAKyC,cACpD6B,UACEtE,KAAKiE,kBAAoB3D,EAA0BC,KAC/C,yBACAP,KAAKyC,aAAaO,MAAQ,SAGjChD,KAAKoC,UAAUQ,OAAS,GACvBmB,EAAA,UACEC,MAAM,YACNO,KAAK,kB,CAOP,aAAAC,GACN,IAAKxE,KAAK6B,qBAAqB4C,KAAM,CACnCzE,KAAK6B,qBAAqB4C,KAAO,I,EAI7B,sBAAAJ,CAAuBD,EAAe7B,GAC5C,GAAIvC,KAAK0E,iBAAkB,CACzBN,EAAEO,iBACF3E,KAAK4E,YAAYC,KAAKtC,EAAKC,K,EAIvB,+BAAAsC,CAAgCV,GACtC,MAAMW,EAAuB/E,KAAK8B,eAAec,OACjD,GAAIwB,EAAEY,MAAQC,EAAaC,IAAK,CAC9Bd,EAAEO,iBAEF,M,CAEFP,EAAEe,kBACF,MAAMC,EAAS,CAACH,EAAaI,WAAYJ,EAAaK,UACtD,GAAIF,EAAOG,SAASnB,EAAEY,KAAsB,CAC1CZ,EAAEO,iBAEF,GAAIP,EAAEY,MAAQC,EAAaI,WAAY,CACrCrF,KAAKE,aAAe6E,IAAyB/E,KAAKE,aAAe,EAAI,EAAIF,KAAKE,aAAe,C,CAE/F,GAAIkE,EAAEY,MAAQC,EAAaK,SAAU,CACnCtF,KAAKE,aAAeF,KAAKE,cAAgB,EAAI6E,EAAuB,EAAI/E,KAAKE,aAAe,C,CAG9FF,KAAK8B,eAAe9B,KAAKE,cAAcsF,O,CAGzC,GAAIpB,EAAEY,MAAQC,EAAaQ,IAAK,CAC9BzF,KAAK0F,cAAcF,O,EAIf,kBAAAG,GACN,OACE5B,EAAA,UACEA,EAAA,aACEC,MAAM,uBACN4B,IAAMC,GAAS7F,KAAK6B,qBAAuBgE,EAC3CC,OAAQ9F,KAAK0F,cACbK,SAAUC,EAAgBC,aAC1BC,SAAQ,KACRC,UAAS,MAETpC,EAAA,OAAKC,MAAM,mBACTD,EAAA,cACEA,EAAA,gBAAcqC,KAAMC,EAASC,OAC1BtG,KAAKC,kBAAkB0D,KAAI,CAACpB,EAAMgE,EAAOC,IAEtCzC,EAAA,WACEA,EAAA,kBAAgB0C,UAAS,MACvB1C,EAAA,KACEC,MAAM,gBACNH,KAAMtB,EAAKC,KACX2B,QAAUC,GAAMpE,KAAKqE,uBAAuBD,EAAG7B,GAC/CmE,UAAYtC,GAAMpE,KAAK8E,gCAAgCV,GACvDE,UAAW/B,EAAKS,QAGnBuD,EAAQC,EAAM5D,OAAS,GAAKmB,EAAA,aAAW4C,MAAM,2BAQ5D5C,EAAA,UACEC,MAAM,OACN4B,IAAMgB,GAAQ5G,KAAK0F,cAAgBkB,EAAG,aAC3B,wBAAuB,gBACpB,OACdzC,QAAS,KACPnE,KAAKwE,eAAe,EAEtBkC,UAAYtC,IACVyC,EAAqBzC,EAAGpE,KAAKwE,cAAcsC,KAAK9G,OAChD+G,YAAW,KACT/G,KAAK8B,eAAe,GAAG0D,OAAO,GAC7B,IAAI,EAETlB,UAAU,WAEXtE,KAAKoC,UAAUQ,OAAS,GACvBmB,EAAA,UACEC,MAAM,YACNO,KAAK,kB,CAOP,iBAAAyC,GAEN,MAAMC,EAAmBjH,KAAKoC,UAAUpC,KAAKoC,UAAUQ,OAAS,GAEhE,IAAKqE,EAAkB,CACrB,M,CAGF,OACElD,EAAA,UACEA,EAAA,oBACgBkD,EAAiBzE,KAAO0E,UAAY,OAClDrD,KAAMoD,EAAiBzE,KACvB2B,QAAUC,GAAMpE,KAAKqE,uBAAuBD,EAAG6C,IAE/ClD,EAAA,UAAQQ,KAAK,iBACbR,EAAA,QACEC,MAAO,CACL,gBAAiBiD,EAAiBzE,KAClC,gBAAiB,OAGlByE,EAAiBjE,O,CAOpB,WAAAmE,GACN,IAAIC,EAEJ,MAAO,CACLpH,KAAK8D,qBACL9D,KAAKC,kBAAkB2C,OAAS,GAAK5C,KAAK2F,wBACvC3F,KAAKoC,UAAUuB,KAAI,CAACpB,EAAMgE,IAC3BxC,EAAA,UACGxB,EAAKe,YACJS,EAAA,aACEC,MAAM,oBACN8B,OAAQsB,EACR3C,KAAMzE,KAAKqH,oBACXtB,SAAUC,EAAgBC,aAC1BC,SAAU,MACVC,UAAS,MAETpC,EAAA,QAAMC,MAAM,mBAAmBhE,KAAKqD,sBAGxCU,EAAA,KACEC,MAAO,CAAC,gBAAiBzB,EAAKC,MAC9BoD,IAAMC,GAASuB,EAAUvB,EAAI,eACftD,EAAKC,KAAO0E,UAAY,OACtCrD,KAAMtB,EAAKC,KACX2B,QAAUC,GAAMpE,KAAKqE,uBAAuBD,EAAG7B,GAC/C+E,YAAa,KACX,GAAI/E,EAAKe,WAAY,CACnBtD,KAAKqH,oBAAsB,I,GAG/BE,aAAc,KACZ,GAAIhF,EAAKe,WAAY,CACnBtD,KAAKqH,oBAAsB,K,GAG/B/C,UAAW/B,EAAKS,OAEjBuD,IAAUvG,KAAKoC,UAAUQ,OAAS,GACjCmB,EAAA,UACEC,MAAM,YACNO,KAAK,qB,CAQjB,MAAAiD,GACE,OACEzD,EAAC0D,EAAI,CAAAzC,IAAA,2CAAC0C,MAAO,CAAC,uBAAwB,GAAG1H,KAAK2H,yBAC5C5D,EAAA,OAAAiB,IAAA,2CACEY,IAAMC,GAAS7F,KAAKa,YAAcgF,EAAI,aAC3B,aACX7B,MAAO,CACL4D,SAAU5H,KAAK6H,YAAczH,EAAoB0H,SACjDC,WAAY/H,KAAK6H,YAAczH,EAAoBC,aAGrD0D,EAAA,MAAAiB,IAAA,4CAAKhF,KAAKS,gBAAkBE,EAAOC,OAASZ,KAAKgH,oBAAsBhH,KAAKmH,gB","ignoreList":[]}

package/dist/web-components-library/p-b38be247.entry.js

@@ -1,2 +0,0 @@
-export{Z as z_tbody}from"./p-feb84d36.js";import"./p-75c4a726.js";
-//# sourceMappingURL=p-b38be247.entry.js.map

package/dist/web-components-library/p-bbd492d3.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as n,a as e}from"./p-75c4a726.js";const i=':host{--z-notification--top-offset:0;display:flex;width:100%;box-sizing:border-box;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-success-inverse)}:host([type="warning"]){background:var(--color-warning-inverse)}:host([type="error"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-success01)}:host([type="warning"]) .status-icon{fill:var(--color-warning02)}:host([type="error"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}';const a=i;const s=class{handleActionButtonClick(t){t.preventDefault();this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault();this.notificationClose.emit()}constructor(n){t(this,n);this.notificationAction=o(this,"notificationAction",7);this.notificationClose=o(this,"notificationClose",7);this.contenticonname=undefined;this.actiontext=undefined;this.type=undefined;this.showclose=false;this.showshadow=false;this.sticky=false;this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return n(e,{key:"a9024960c6f2dc0ece7aa520041ca72c8b57a480"},this.contenticonname&&n("z-icon",{key:"8e03da23ac3ea16294466b45cf571003299e12ff",class:"status-icon",name:this.contenticonname,width:16,height:16}),n("div",{key:"65872d76a4f4be94181a60eede48ba8729be6fe4",class:"content-container"},n("div",{key:"6f1abfbd2e8f86f4cfdf63f3ffaa87fb7d0abcd7",class:"content-text"},n("slot",{key:"8537004a8679d3e1fb5eed9ca4fc36611b7355a3"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&n("button",{key:"8fff1a74d49404718d7b9e160a26fb659ded1855",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&n("button",{key:"1969d8f6609b65444366b5b757729a7930d91630",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},n("z-icon",{key:"ebfb4631d790f2406c7475b8adc123872db7e145",name:"multiply-circle",width:16,height:16})))}};s.style=a;export{s as z_notification};
-//# sourceMappingURL=p-bbd492d3.entry.js.map

package/dist/web-components-library/p-bbd492d3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZNotificationStyle0","ZNotification","handleActionButtonClick","e","preventDefault","this","notificationAction","emit","handleCloseButtonClick","notificationClose","constructor","hostRef","bind","render","h","Host","key","contenticonname","class","name","width","height","_a","actiontext","trim","type","onClick","showclose"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  outline: none;\n}\n\n:host[sticky] {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host[sticky],\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-success-inverse);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-warning-inverse);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-error-inverse);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-success01);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-warning02);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-error01);\n}\n\n:host > button,\n.content-container > button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  max-width: 800px;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.action-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,oyDAClB,MAAAC,EAAeD,E,MCYFE,EAAa,MAgChB,uBAAAC,CAAwBC,GAC9BA,EAAEC,iBACFC,KAAKC,mBAAmBC,M,CAOlB,sBAAAC,CAAuBL,GAC7BA,EAAEC,iBACFC,KAAKI,kBAAkBF,M,CAGzB,WAAAG,CAAAC,G,kNA/BsB,M,gBAOC,M,YAIJ,MAqBjBN,KAAKH,wBAA0BG,KAAKH,wBAAwBU,KAAKP,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBI,KAAKP,K,CAGjE,MAAAQ,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFX,KAAKY,iBACJH,EAAA,UAAAE,IAAA,2CACEE,MAAM,cACNC,KAAMd,KAAKY,gBACXG,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,qBACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACTJ,EAAA,QAAAE,IAAA,kDAECM,EAAAjB,KAAKkB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEE,MAAM,gBACNO,KAAK,SACLC,QAASrB,KAAKH,yBAEbG,KAAKkB,aAIXlB,KAAKsB,WACJb,EAAA,UAAAE,IAAA,2CACEE,MAAM,eACNO,KAAK,SACLC,QAASrB,KAAKG,wBAEdM,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,M","ignoreList":[]}

package/dist/web-components-library/p-c13ef624.js

@@ -1,2 +0,0 @@
-import{r as o,h as r,a as s}from"./p-75c4a726.js";const t=":host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";const c=t;const e=class{constructor(r){o(this,r);this.sticky=false}render(){return r(s,{key:"86efe92f23250e482ef7e9c0b646d28f294214c6",role:"rowgroup"},r("slot",{key:"07ff4d3ad791419325d865160a229b228d9f0626"}))}};e.style=c;export{e as Z};
-//# sourceMappingURL=p-c13ef624.js.map

package/dist/web-components-library/p-c13ef624.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTfootStyle0","ZTfoot","render","h","Host","key","role"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,mOAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,qCAKR,K,CAET,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/web-components-library/p-c2af9a71.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,a as o,g as s}from"./p-75c4a726.js";const a=':host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot="item"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const l=a;const n=class{constructor(i){t(this,i);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.open=undefined;this.hasContent=undefined}toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(t){if(!this.open||this.hostElement.contains(t.target)){return}this.open=false;this.closed.emit()}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=(e===null||e===void 0?void 0:e.innerText)||null}componentWillLoad(){this.checkContent()}render(){return i(o,{key:"683c1153c92167f03d2324765485f0c42d9e088e",role:"menu",open:this.open},i("button",{key:"774e5b28393d489684864d4e3ad3e5f2f9ad8ffe",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},i("slot",{key:"f27ceb99398725734be2027e191c7bba8e3bf593",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&i("z-icon",{key:"a5a2a175c5ec52579d184afbed86135f0c43ea8e",name:this.open?"chevron-up":"chevron-down"})),this.open&&i("div",{key:"d27cf75d9481eae65039adc296246776b09fbc3a",class:"items"},i("slot",{key:"dbb67c5b4f7587a4f83a4ffe8a8af6d91d1180c8",name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return s(this)}};n.style=l;export{n as z_menu_section_deprecated};
-//# sourceMappingURL=p-c2af9a71.entry.js.map

package/dist/web-components-library/p-c2af9a71.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMenuSectionDeprecatedStyle0","ZMenuSectionDeprecated","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","hostElement","contains","target","checkContent","querySelectorAll","length","onLabelSlotChange","labelElement","assignedElements","dataset","text","innerText","componentWillLoad","render","h","Host","key","role","class","onClick","bind","onSlotchange","name"],"sources":["src/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-section-deprecated/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,67DAClB,MAAAC,EAAeD,E,MCWFE,EAAsB,M,2JAqBzB,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClBF,KAAKE,KAAOF,KAAKG,OAAOC,OAASJ,KAAKK,OAAOD,M,CAK/C,WAAAE,CAAYC,GACV,IAAKP,KAAKE,MAAQF,KAAKQ,YAAYC,SAASF,EAAGG,QAAiB,CAC9D,M,CAGFV,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAMN,YAAAO,GACNX,KAAKC,WAAaD,KAAKQ,YAAYI,iBAAiB,iBAAiBC,OAAS,C,CAOxE,iBAAAC,CAAkBP,GACxB,MAAMQ,EAAgBR,EAAGG,OAA2BM,mBAAmB,GACvED,EAAaE,QAAQC,MAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,YAAa,I,CAGzD,iBAAAC,GACEpB,KAAKW,c,CAGP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OACLvB,KAAMF,KAAKE,MAEXoB,EAAA,UAAAE,IAAA,2CACEE,MAAM,QAAO,eACC1B,KAAKE,KAAO,OAAS,QACnCyB,QAAS3B,KAAKD,OAAO6B,KAAK5B,OAE1BsB,EAAA,QAAAE,IAAA,2CAAMK,aAAc7B,KAAKc,kBAAkBc,KAAK5B,QAC/CA,KAAKC,YAAcqB,EAAA,UAAAE,IAAA,2CAAQM,KAAM9B,KAAKE,KAAO,aAAe,kBAE9DF,KAAKE,MACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACTJ,EAAA,QAAAE,IAAA,2CACEM,KAAK,OACLD,aAAc7B,KAAKW,aAAaiB,KAAK5B,S","ignoreList":[]}

package/dist/web-components-library/p-c7df6a63.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as n,a as i,g as o}from"./p-75c4a726.js";const a=':host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-default-text)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:"";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-primary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}';const s=a;const l=class{toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(e){if(!this.floating||!this.open||this.hostElement.contains(e.target)){return}this.reflow();this.open=false;this.closed.emit()}onOpenChanged(){if(this.open){this.reflow(true)}else{cancelAnimationFrame(this.raf)}}constructor(n){e(this,n);this.opened=t(this,"opened",7);this.closed=t(this,"closed",7);this.active=undefined;this.floating=false;this.open=false;this.verticalContext=false;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onItemsChange=this.onItemsChange.bind(this)}componentWillLoad(){this.checkContent()}onLabelSlotChange(e){const t=e.target.assignedElements()[0];t.dataset.text=t===null||t===void 0?void 0:t.textContent}reflow(e=false){if(this.content){const{style:e}=this.content;const{left:t}=this.hostElement.getBoundingClientRect();const n=getComputedStyle(this.content).width;const i=n?parseFloat(n.replace("px","")):375;const o=30;e.left=`${Math.min(window.innerWidth-t-i-o,0)}px`}if(e){this.raf=requestAnimationFrame(this.reflow.bind(this,e))}}checkContent(){this.hasHeader=!!this.hostElement.querySelectorAll("[slot=header]").length;this.hasContent=!!this.hostElement.querySelectorAll("[slot=item]").length||this.hasHeader}onItemsChange(){this.checkContent();const e=this.hostElement.querySelectorAll("[slot=item]");e.forEach((e=>{e.setAttribute("role","menuitem");e.dataset.text=e.textContent}))}renderMenuLabel(){if(this.hasContent){return n("button",{class:"menu-label","aria-expanded":this.open?"true":"false","aria-label":this.open?"Chiudi menù":"Apri menù",onClick:this.toggle},n("div",{class:"menu-label-content"},n("slot",{onSlotchange:this.onLabelSlotChange}),n("z-icon",{name:this.open?"chevron-up":"chevron-down"})))}return n("div",{class:"menu-label"},n("div",{class:"menu-label-content"},n("slot",{onSlotchange:this.onLabelSlotChange})))}render(){return n(i,{key:"b85eb4e974d6e49d326f637e96f467d867588cc4"},this.renderMenuLabel(),this.hasContent&&n("div",{key:"36e4f36123dd6e49f334a6f5e98cce0875df158c",class:"content",ref:e=>this.content=e},this.hasHeader&&n("header",{key:"d8d980f037bd593ca7388946f27f08372d19f7e8",class:"header"},n("slot",{key:"1d40e062cc0d24b5c7adcb707341d438e0089cb7",name:"header",onSlotchange:this.checkContent})),n("div",{key:"93cdd787bb371624be8311ca32539a576ee1fcb7",class:"items",role:"menu"},n("slot",{key:"2d1ffad0d4c6fec04d202e371118535f5454eaef",name:"item",onSlotchange:this.onItemsChange}))))}get hostElement(){return o(this)}static get watchers(){return{open:["onOpenChanged"]}}};l.style=s;export{l as z_menu_deprecated};
-//# sourceMappingURL=p-c7df6a63.entry.js.map

package/dist/web-components-library/p-c7df6a63.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMenuDeprecatedStyle0","ZMenuDeprecated","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","floating","hostElement","contains","target","reflow","onOpenChanged","cancelAnimationFrame","raf","constructor","hostRef","bind","checkContent","onLabelSlotChange","onItemsChange","componentWillLoad","labelElement","assignedElements","dataset","text","textContent","live","content","style","left","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","requestAnimationFrame","hasHeader","querySelectorAll","length","items","forEach","item","setAttribute","renderMenuLabel","h","class","onClick","onSlotchange","name","render","Host","key","ref","el","role"],"sources":["src/components/deprecated/z-menu-deprecated/styles.css?tag=z-menu-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-deprecated/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n\n  --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  outline: none;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-within {\n  z-index: 1;\n  padding-right: calc(var(--space-unit) * 0.5);\n  padding-left: calc(var(--space-unit) * 0.5);\n  margin-right: calc(var(--space-unit) * -0.5);\n  margin-left: calc(var(--space-unit) * -0.5);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n  font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(*),\n.menu-label:focus-within .menu-label-content ::slotted(*) {\n  letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {\n  box-shadow: none !important;\n}\n\n/* border */\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  content: \"\";\n  pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n  height: var(--border-size-small);\n  background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-5);\n  font-weight: inherit;\n  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n  line-height: 1.2;\n  outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(*),\n.menu-label .menu-label-content z-icon {\n  padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: currentcolor;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuDeprecated {\n  @Element() hostElement: HTMLZMenuDeprecatedElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = false;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  private content: HTMLElement;\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the floating list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n      return;\n    }\n\n    this.reflow();\n    this.open = false;\n    this.closed.emit();\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (this.open) {\n      this.reflow(true);\n    } else {\n      cancelAnimationFrame(this.raf);\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (this.content) {\n      const {style} = this.content;\n      const {left} = this.hostElement.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  /**\n   * Set `menuitem` role to all menu items.\n   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n   */\n  private onItemsChange(): void {\n    this.checkContent();\n    const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n    items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.dataset.text = item.textContent;\n    });\n  }\n\n  private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n    if (this.hasContent) {\n      return (\n        <button\n          class=\"menu-label\"\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          onClick={this.toggle}\n        >\n          <div class=\"menu-label-content\">\n            <slot onSlotchange={this.onLabelSlotChange}></slot>\n            <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n          </div>\n        </button>\n      );\n    }\n\n    return (\n      <div class=\"menu-label\">\n        <div class=\"menu-label-content\">\n          <slot onSlotchange={this.onLabelSlotChange}></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZMenuElement {\n    return (\n      <Host>\n        {this.renderMenuLabel()}\n\n        {this.hasContent && (\n          <div\n            class=\"content\"\n            ref={(el) => (this.content = el)}\n          >\n            {this.hasHeader && (\n              <header class=\"header\">\n                <slot\n                  name=\"header\"\n                  onSlotchange={this.checkContent}\n                ></slot>\n              </header>\n            )}\n\n            <div\n              class=\"items\"\n              role=\"menu\"\n            >\n              <slot\n                name=\"item\"\n                onSlotchange={this.onItemsChange}\n              ></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}