@zanichelli/albe-web-components 19.2.4 → 19.2.6-RC1

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as i}from"./p-75c4a726.js";import{p as r}from"./p-86618221.js";import{j as s,g as o,d as n}from"./p-061e28d6.js";import"./p-5145a606.js";const a=':host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-background);grid-template:2 / 2;grid-template-areas:"center center" "left right"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-background);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:"left center right"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}';const l=a;function d(t){return Array.isArray(t)&&t.every((t=>typeof t==="string"))}const h=class{constructor(e){t(this,e);this.slideshowid=undefined;this.data=undefined;this.device=undefined;this.currentSlide=0}watchData(){this.parseLinks()}componentWillLoad(){this.parseLinks();this.setDevice();window.addEventListener("resize",this.handleResize.bind(this))}componentDidRender(){this.setStyle()}handleResize(){this.setDevice();this.setStyle()}parseLinks(){var t;switch(typeof this.data){case"string":{const e=(t=s(this.data))!==null&&t!==void 0?t:[];if(!d(e)){throw new Error("Passed data is invalid")}this.links=e;break}default:this.links=this.data;break}}setStyle(){const t=this.el.shadowRoot.querySelector("#slides");if(!t){return}const e=this.el.shadowRoot.querySelectorAll(".slide");const i=this.el.offsetWidth;const r=i*this.links.length;t.style.width=`${r}px`;t.style.transform=`translate(-${i*this.currentSlide}px)`;e.forEach((t=>{const e=t.querySelector("img");e.style.width=`${i}px`}))}setDevice(){this.device=o()}setCurrentSlide(t){this.currentSlide=t}getBulletDimension(){switch(this.device){case r.MOBILE:return 24;case r.TABLET:return 32;default:return 40}}renderSlides(t){return e("div",{id:"slides"},t.map(((t,i)=>e("div",{id:"slide"+i,class:`slide ${this.currentSlide!==i&&"hide"}`},e("img",{src:t})))))}renderScroll(t){let i=false,r=this.currentSlide;if(t==="left"){i=this.currentSlide===0;r--}else if(t==="right"){i=this.currentSlide===this.links.length-1;r++}return e("z-icon",{class:`scroll ${t} ${i&&"disabled"}`,width:this.getBulletDimension(),height:this.getBulletDimension(),name:`chevron-${t}-circle`,onClick:()=>{!i&&this.setCurrentSlide(r)},onKeyUp:t=>!i&&n(t,(()=>{this.setCurrentSlide(r)})),tabindex:0,role:"button"})}renderSlideshowMain(){return e("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))}renderBullet(t){return e("a",{class:`bullet ${this.currentSlide===t&&"selected"}`,onClick:()=>this.setCurrentSlide(t),onKeyUp:e=>n(e,(()=>this.setCurrentSlide(t))),tabindex:0,role:"button"})}renderSlideshowFooter(){return e("footer",null,e("div",{class:"footer-left"},e("slot",{name:"footer-left"})),e("div",{class:"footer-center"},e("div",{class:"bullet-container"},Object.keys(this.links).map((t=>this.renderBullet(parseInt(t)))))),e("div",{class:"footer-right"},e("slot",{name:"footer-right"})))}render(){if(!this.links||!this.links.length){return e("div",null)}return e("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter())}get el(){return i(this)}static get watchers(){return{data:["watchData"]}}};h.style=l;export{h as z_slideshow};
-//# sourceMappingURL=p-b0324c7d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSlideshowStyle0","isStringArray","data","Array","isArray","every","datum","ZSlideshow","watchData","this","parseLinks","componentWillLoad","setDevice","window","addEventListener","handleResize","bind","componentDidRender","setStyle","parsed","_a","convertJson","Error","links","refSlides","el","shadowRoot","querySelector","allImages","querySelectorAll","width","offsetWidth","fullwidth","length","style","transform","currentSlide","forEach","item","img","device","getDevice","setCurrentSlide","index","getBulletDimension","Device","MOBILE","TABLET","renderSlides","items","h","id","map","i","class","src","renderScroll","direction","disabled","nextSlide","height","name","onClick","onKeyUp","e","handleKeyboardSubmit","tabindex","role","renderSlideshowMain","renderBullet","renderSlideshowFooter","Object","keys","parseInt","render","slideshowid"],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  flex-direction: column;\n}\n\nmain {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\nmain z-icon.scroll {\n  position: absolute;\n  z-index: 10;\n  top: 50%;\n  width: auto;\n  margin: 0 var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\nmain .scroll.right {\n  right: 0;\n}\n\n#slides {\n  display: flex;\n  flex-wrap: wrap;\n  line-height: 0px;\n  overflow-y: hidden;\n  transition: all 300ms;\n}\n\nfooter {\n  display: grid;\n  width: 100%;\n  height: 56px;\n  align-items: center;\n  border-top: var(--border-size-medium) solid var(--color-background);\n  grid-template: 2 / 2;\n  grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n  width: 100%;\n  align-items: center;\n}\n\nfooter .footer-center {\n  grid-area: center;\n}\n\nfooter .footer-left {\n  grid-area: left;\n}\n\nfooter .footer-right {\n  grid-area: right;\n}\n\nfooter .bullet-container {\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n  width: 8px;\n  height: 8px;\n  margin: var(--space-unit) 2px;\n  background-color: var(--gray200);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n  background-color: var(--gray400);\n}\n\nmain z-icon:focus,\nfooter .bullet-container .bullet:focus {\n  border-radius: 50%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* Tablet breakpoint */\n\n@media only screen and (min-width: 768px) {\n  footer {\n    height: 76px;\n    border-top: var(--border-size-medium) solid var(--color-background);\n    grid-template: 1 / 1fr 2fr 1fr;\n    grid-template-areas: \"left center right\";\n  }\n\n  footer .bullet-container .bullet {\n    width: 10px;\n    height: 10px;\n    margin: var(--space-unit) 3px;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media only screen and (min-width: 1025px) {\n  main z-icon.scroll {\n    margin: 0 10px;\n  }\n\n  footer .bullet-container .bullet {\n    width: 16px;\n    height: 16px;\n    margin: var(--space-unit) calc(var(--space-unit) * 0.5);\n    cursor: pointer;\n    pointer-events: auto;\n  }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          !disabled && this.setCurrentSlide(nextSlide);\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,a as e,g as o}from"./p-75c4a726.js";import{Q as r,R as a,B as n}from"./p-86618221.js";const l=':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction="next"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position="bottom"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position="bottom"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position="bottom"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}';const h=l;const c=class{constructor(i){t(this,i);this.indexChange=s(this,"indexChange",7);this.scrollingTo=null;this.isLoading=undefined;this.label=undefined;this.single=false;this.arrowsPosition=undefined;this.progressMode=undefined;this.fixedArrows=true;this.ghostLoadingHeight=100;this.infinite=false;this.current=0;this.items=undefined;this.highlightedIndicator=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}onIndexChange(){this.indexChange.emit({currentItem:this.current})}onSingleModeChange(){if(this.single&&!this.intersectionObserver){this.setIntersectionObserver()}}onInfiniteModeChange(){this.checkNavigationValidity()}setIntersectionObserver(){this.intersectionObserver=new IntersectionObserver((t=>{const s=t.find((({isIntersecting:t})=>t));if(!s){return}const i=this.items.findIndex((t=>t===s.target));this.highlightedIndicator=i;if(this.scrollingTo!==null&&i!==this.scrollingTo){return}this.scrollingTo=null;this.current=i}),{root:this.itemsContainer,threshold:.5});this.items.forEach((t=>this.intersectionObserver.observe(t)))}onSlotChange(){this.items=Array.from(this.host.children);this.checkNavigationValidity();this.setIntersectionObserver();this.goTo(this.current)}onPrev(){if(this.single){this.goTo(this.infinite&&this.current-1<0?this.items.length-1:Math.max(0,this.current-1));return}this.itemsContainer.scrollBy({left:this.infinite&&this.itemsContainer.scrollLeft==0?this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth:-this.itemsContainer.clientWidth/2,behavior:"smooth"})}onNext(){if(this.single){const t=this.infinite&&this.current+1>this.items.length-1?0:Math.min(this.current+1,this.items.length-1);return this.goTo(t)}this.itemsContainer.scrollBy({left:this.infinite&&this.itemsContainer.scrollLeft==this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth?-this.itemsContainer.scrollWidth:this.itemsContainer.clientWidth/2,behavior:"smooth"})}checkNavigationValidity(){if(this.single){this.canNavigatePrev=this.current>0;this.canNavigateNext=this.current<this.items.length-1;return}this.canNavigatePrev=this.itemsContainer.scrollLeft>0;this.canNavigateNext=this.itemsContainer.scrollLeft<this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth}canShowFooter(){if(!this.canNavigatePrev&&!this.canNavigateNext){return false}return this.arrowsPosition===r.BOTTOM||this.progressMode===a.DOTS||this.progressMode===a.NUMBERS}goTo(t){if(this.current===t){return}this.scrollingTo=t;const s=this.items.slice(0,t).reduce(((t,s)=>t+=s.clientWidth),0);this.itemsContainer.scroll({left:s,behavior:"smooth"})}get canNavigate(){return this.canNavigatePrev||this.canNavigateNext}setupItems(){this.items=Array.from(this.host.children);this.items.forEach((t=>{t.setAttribute("aria-roledescription","slide")}))}componentDidLoad(){var t,s;(t=this.itemsContainer)===null||t===void 0?void 0:t.addEventListener("scroll",this.checkNavigationValidity.bind(this),{passive:true});this.resizeObserver=new ResizeObserver(this.checkNavigationValidity.bind(this));(s=this.resizeObserver)===null||s===void 0?void 0:s.observe(this.itemsContainer);this.setupItems();if(this.single){this.setIntersectionObserver()}this.checkNavigationValidity()}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){if(this.isLoading){return i("div",{class:"z-carousel-container"},this.label&&i("div",{class:"heading-3-sb z-carousel-title"},this.label),i("div",{style:{height:`${this.ghostLoadingHeight}px`}},i("z-ghost-loading",null)))}return i(e,null,i("div",{class:"z-carousel-container","aria-roledescription":"carousel","aria-label":this.label||"Carousel"},this.label&&i("div",{class:"z-carousel-title heading-3-sb"},this.label),i("div",{class:"z-carousel-wrapper"},i("z-button",{class:"z-carousel-navigation-arrow",variant:n.SECONDARY,"data-direction":"prev",icon:"arrow-left",onClick:this.onPrev.bind(this),disabled:!this.infinite&&!this.canNavigatePrev,hidden:this.arrowsPosition!==r.OVER||!this.canNavigate,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),i("ul",{class:"z-carousel-items-container","aria-atomic":"false","aria-live":"polite",ref:t=>this.itemsContainer=t},i("slot",{onSlotchange:this.onSlotChange.bind(this)})),i("z-button",{class:"z-carousel-navigation-arrow",variant:n.SECONDARY,"data-direction":"next",icon:"arrow-right",onClick:this.onNext.bind(this),disabled:!this.infinite&&!this.canNavigateNext,hidden:this.arrowsPosition!==r.OVER||!this.canNavigate,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"}))),this.canShowFooter()&&i("div",{class:"z-carousel-footer"},this.arrowsPosition===r.BOTTOM&&i("z-button",{class:"z-carousel-navigation-arrow",variant:n.TERTIARY,icon:"arrow-left",onClick:this.onPrev.bind(this),disabled:!this.infinite&&!this.canNavigatePrev,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),this.progressMode===a.DOTS&&this.single&&this.items&&i("div",{class:"dots-progress"},this.items.map(((t,s)=>i("button",{type:"button",class:{current:this.highlightedIndicator===s},"aria-label":this.highlightedIndicator===s?"Elemento corrente":`Spostati all'elemento ${s+1}`,onClick:()=>this.goTo(s)})))),this.progressMode===a.NUMBERS&&this.single&&this.items&&i("div",{class:"numbers-progress interactive-1"},i("span",{class:"current"},this.current+1),i("span",null,"di"),i("span",null,this.items.length)),this.arrowsPosition===r.BOTTOM&&i("z-button",{class:"z-carousel-navigation-arrow",variant:n.TERTIARY,icon:"arrow-right",onClick:this.onNext.bind(this),disabled:!this.infinite&&!this.canNavigateNext,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"})))}get host(){return o(this)}static get watchers(){return{current:["onIndexChange"],single:["onSingleModeChange"],infinite:["onInfiniteModeChange"]}}};c.style=h;export{c as z_carousel};
-//# sourceMappingURL=p-b421424f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCarouselStyle0","ZCarousel","this","scrollingTo","onIndexChange","indexChange","emit","currentItem","current","onSingleModeChange","single","intersectionObserver","setIntersectionObserver","onInfiniteModeChange","checkNavigationValidity","IntersectionObserver","entries","entry","find","isIntersecting","entryIndex","items","findIndex","item","target","highlightedIndicator","root","itemsContainer","threshold","forEach","element","observe","onSlotChange","Array","from","host","children","goTo","onPrev","infinite","length","Math","max","scrollBy","left","scrollLeft","scrollWidth","clientWidth","behavior","onNext","next","min","canNavigatePrev","canNavigateNext","canShowFooter","arrowsPosition","CarouselArrowsPosition","BOTTOM","progressMode","CarouselProgressMode","DOTS","NUMBERS","index","slice","reduce","acc","scroll","canNavigate","setupItems","setAttribute","componentDidLoad","_a","addEventListener","bind","passive","resizeObserver","ResizeObserver","_b","disconnectedCallback","disconnect","render","isLoading","h","class","label","style","height","ghostLoadingHeight","Host","variant","ButtonVariant","SECONDARY","icon","onClick","disabled","hidden","OVER","ariaLabel","ref","el","onSlotchange","TERTIARY","map","_","type"],"sources":["src/components/z-carousel/styles.css?tag=z-carousel&encapsulation=shadow","src/components/z-carousel/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-carousel-gutter: 0;\n  --z-carousel-items-shadow: ;\n}\n\n:host([single]) {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([single]) .z-carousel-container {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.z-carousel-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.z-carousel-title {\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-wrapper {\n  position: relative;\n}\n\n.z-carousel-items-container {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  margin: 0;\n  box-shadow: var(--z-carousel-items-shadow, none);\n  column-gap: var(--z-carousel-gutter);\n  list-style: none;\n  -ms-overflow-style: none; /* IE and Edge */\n  overflow-x: scroll;\n  padding-inline-start: 0;\n  scroll-behavior: smooth;\n  scroll-snap-type: x mandatory;\n\n  /* Hide scrollbar for IE, Edge and Firefox */\n  scrollbar-width: none; /* Firefox */\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.z-carousel-items-container::-webkit-scrollbar {\n  display: none;\n}\n\n.z-carousel-items-container ::slotted(*) {\n  scroll-snap-align: center;\n}\n\n.z-carousel-navigation-arrow[hidden] {\n  display: none;\n}\n\n.z-carousel-navigation-arrow[data-direction] {\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  transform: translateY(50%);\n}\n\n.z-carousel-navigation-arrow[data-direction=\"next\"] {\n  right: 0;\n}\n\n:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {\n  display: none;\n}\n\n.z-carousel-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host([arrows-position=\"bottom\"]) .z-carousel-footer {\n  margin-top: calc(var(--space-unit) * 0.75);\n}\n\n.z-carousel-footer .numbers-progress,\n.z-carousel-footer .dots-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.z-carousel-footer .dots-progress {\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-footer .dots-progress button {\n  display: flex;\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  align-items: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface03);\n  border-radius: calc(var(--space-unit) * 3);\n}\n\n.z-carousel-footer .dots-progress button.current {\n  background-color: var(--color-primary01);\n}\n\n.z-carousel-footer .dots-progress button:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-carousel-footer .dots-progress button:not(.current) {\n  cursor: pointer;\n}\n\n.z-carousel-footer .numbers-progress {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress {\n  margin-top: var(--space-unit);\n}\n\n.z-carousel-footer .numbers-progress .current {\n  font-weight: var(--font-sb);\n}\n\n@media (min-width: 768px) {\n  :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {\n    display: flex;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCarousel {\n  @Element() host: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop({reflect: true})\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop({reflect: true})\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator type. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /**\n   * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n   * If set to `false`, the arrows will not be visible on mobile.\n   * Only meaningful with `arrowsPosition` set to `OVER`.\n   */\n  @Prop({reflect: true})\n  fixedArrows = true;\n\n  /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n  @Prop()\n  ghostLoadingHeight = 100;\n\n  /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n  @Prop()\n  infinite = false;\n\n  /** Current item index for single mode. */\n  @State()\n  current = 0;\n\n  /** Items on the slider. */\n  @State()\n  items: HTMLLIElement[];\n\n  /** Index of the indicator to highlight. */\n  @State()\n  highlightedIndicator: number;\n\n  @State()\n  canNavigatePrev: boolean;\n\n  @State()\n  canNavigateNext: boolean;\n\n  /** Reference for the items container element. */\n  protected itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\n\n  /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n  private resizeObserver: ResizeObserver;\n\n  /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n  private scrollingTo: number = null;\n\n  /** Emitted on index change and only in `single` mode. */\n  @Event()\n  indexChange: EventEmitter<{currentItem: number}>;\n\n  @Watch(\"current\")\n  onIndexChange(): void {\n    this.indexChange.emit({currentItem: this.current});\n  }\n\n  @Watch(\"single\")\n  onSingleModeChange(): void {\n    if (this.single && !this.intersectionObserver) {\n      this.setIntersectionObserver();\n    }\n  }\n\n  @Watch(\"infinite\")\n  onInfiniteModeChange(): void {\n    this.checkNavigationValidity();\n  }\n\n  /**\n   * Set an intersection observer to:\n   * - highlight the indicator of the intersecting item during scroll\n   * - set the current item to the last intersecting item\n   */\n  private setIntersectionObserver(): void {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries.find(({isIntersecting}) => isIntersecting);\n        if (!entry) {\n          return;\n        }\n\n        const entryIndex = this.items.findIndex((item) => item === entry.target);\n        this.highlightedIndicator = entryIndex;\n\n        /* skip setting the current item if intersection has been triggered by a programmatic scroll\n        (@see `goTo` function) and the final index has not been reached */\n        if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n          return;\n        }\n\n        this.scrollingTo = null;\n        this.current = entryIndex;\n      },\n      {\n        root: this.itemsContainer,\n        threshold: 0.5,\n      }\n    );\n\n    this.items.forEach((element) => this.intersectionObserver.observe(element));\n  }\n\n  /** Update items' list and check conditions to allow navigation */\n  private onSlotChange(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.checkNavigationValidity();\n    this.setIntersectionObserver();\n    this.goTo(this.current);\n  }\n\n  private onPrev(): void {\n    if (this.single) {\n      this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite && this.itemsContainer.scrollLeft == 0\n          ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          : -this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      const next =\n        this.infinite && this.current + 1 > this.items.length - 1\n          ? 0\n          : Math.min(this.current + 1, this.items.length - 1);\n\n      return this.goTo(next);\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite &&\n        this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          ? -this.itemsContainer.scrollWidth\n          : this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled and set the related local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 0;\n      this.canNavigateNext = this.current < this.items.length - 1;\n\n      return;\n    }\n\n    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n    this.canNavigateNext =\n      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n  }\n\n  /**\n   * Check if footer has to be rendered.\n   */\n  private canShowFooter(): boolean {\n    if (!this.canNavigatePrev && !this.canNavigateNext) {\n      return false;\n    }\n\n    return (\n      this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n      this.progressMode === CarouselProgressMode.DOTS ||\n      this.progressMode === CarouselProgressMode.NUMBERS\n    );\n  }\n\n  /**\n   * Set current item to passed index.\n   * @param index Index to set\n   */\n  private goTo(index: number): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left,\n      behavior: \"smooth\",\n    });\n  }\n\n  /** Check if navigation of at least one direction is enabled */\n  private get canNavigate(): boolean {\n    return this.canNavigatePrev || this.canNavigateNext;\n  }\n\n  private setupItems(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.items.forEach((item) => {\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n    this.resizeObserver?.observe(this.itemsContainer);\n    this.setupItems();\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n    this.checkNavigationValidity();\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLDivElement | HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <div class=\"z-carousel-container\">\n          {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div\n          class=\"z-carousel-container\"\n          aria-roledescription=\"carousel\"\n          aria-label={this.label || \"Carousel\"}\n        >\n          {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"prev\"\n              icon=\"arrow-left\"\n              onClick={this.onPrev.bind(this)}\n              disabled={!this.infinite && !this.canNavigatePrev}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n            />\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n              ref={(el) => (this.itemsContainer = el)}\n            >\n              <slot onSlotchange={this.onSlotChange.bind(this)} />\n            </ul>\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"next\"\n              icon=\"arrow-right\"\n              onClick={this.onNext.bind(this)}\n              disabled={!this.infinite && !this.canNavigateNext}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n            />\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.infinite && !this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n              <div class=\"dots-progress\">\n                {this.items.map((_, index) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === index}}\n                    aria-label={\n                      this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n                    }\n                    onClick={() => this.goTo(index)}\n                  />\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-1\">\n                <span class=\"current\">{this.current + 1}</span>\n                <span>di</span>\n                <span>{this.items.length}</span>\n              </div>\n            )}\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.infinite && !this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r,h as o}from"./p-75c4a726.js";const a="button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";const e=a;const t=class{constructor(o){r(this,o);this.icon=undefined;this.isdisabled=false;this.ariaLabel=""}render(){return o("button",{key:"6c7bbcbde5d35a54fafe344f2c1e4be78f8b2d29",disabled:this.isdisabled,"aria-label":this.ariaLabel},o("span",{key:"81c38638c37f57c5e68e8d2db9f16db83752bc15"},o("z-icon",{key:"8d1b8d34c61411f7079c4a492294fde70cd923e2",name:this.icon,width:16,height:16})))}};t.style=e;export{t as z_myz_card_icon};
-//# sourceMappingURL=p-bbc20250.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzCardIconStyle0","ZMyzCardIcon","render","h","key","disabled","this","isdisabled","ariaLabel","name","icon","width","height"],"sources":["src/snowflakes/myz/card/z-myz-card-icon/styles.css?tag=z-myz-card-icon&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-icon/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  width: 42px;\n  width: calc(var(--space-unit) * 6);\n  height: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 6);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-left: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background: none;\n  border-radius: 0 var(--border-radius) 0 0;\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  outline: none;\n}\n\nbutton:active,\nbutton:focus {\n  color: var(--blue700);\n  fill: var(--blue700);\n}\n\nbutton > span {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--border-radius);\n}\n\nbutton:hover > span {\n  background: var(--color-primary03);\n}\n\nbutton:focus > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n}\n\nbutton:disabled > span {\n  background: none;\n  box-shadow: var(--shadow-0);\n  pointer-events: none;\n}\n\nbutton:disabled > span > z-icon {\n  fill: var(--color-surface03);\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardIcon {\n  /** icon name */\n  @Prop()\n  icon: string;\n\n  /** disabled status flag */\n  @Prop()\n  isdisabled = false;\n\n  /** description of the icon*/\n  @Prop()\n  ariaLabel = \"\";\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        disabled={this.isdisabled}\n        aria-label={this.ariaLabel}\n      >\n        <span>\n          <z-icon\n            name={this.icon}\n            width={16}\n            height={16}\n          />\n        </span>\n      </button>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAY,omCAClB,MAAAC,EAAeD,E,MCMFE,EAAY,M,6DAOV,M,eAID,E,CAEZ,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,SAAUC,KAAKC,WAAU,aACbD,KAAKE,WAEjBL,EAAA,QAAAC,IAAA,4CACED,EAAA,UAAAC,IAAA,2CACEK,KAAMH,KAAKI,KACXC,MAAO,GACPC,OAAQ,M","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as e,a as s,g as r}from"./p-75c4a726.js";import{P as i,g as n,p as a}from"./p-86618221.js";import{a as h,k as c,l as f,g as p,m as l}from"./p-061e28d6.js";import"./p-5145a606.js";const u=':host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open="false"])[current-position]){display:block}:host([center][current-position="top"]),:host([center][current-position="bottom"]){transform:translateX(-50%)}:host([center][current-position="right"]),:host([center][current-position="left"]){transform:translateY(-50%)}:host([current-position^="top"]){margin:0 0 var(--space-unit)}:host([current-position^="bottom"]){margin:var(--space-unit) 0 0}:host([current-position^="left"]){margin:0 var(--space-unit) 0 0}:host([current-position^="right"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:"";transform:rotate(45deg)}:host([show-arrow="false"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^="top"])::before{top:var(--arrow-center-y-offset)}:host([current-position^="bottom"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position="top"])::before,:host([current-position="bottom"])::before{right:var(--arrow-edge-offset)}:host([current-position="right"])::before,:host([current-position="left"])::before{bottom:var(--arrow-edge-offset)}:host([current-position="right"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left"])::before{left:var(--arrow-center-y-offset)}:host([current-position="top_right"])::before,:host([current-position="bottom_right"])::before{right:var(--arrow-edge-offset)}:host([current-position="top_left"])::before,:host([current-position="bottom_left"])::before{left:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="left_top"])::before{top:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="right_bottom"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left_top"])::before,:host([current-position="left_bottom"])::before{left:var(--arrow-center-y-offset)}:host([current-position="right_bottom"])::before,:host([current-position="left_bottom"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position="top"])::before,:host([center][current-position="bottom"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position="right"])::before,:host([center][current-position="left"])::before{top:var(--arrow-center-x-offset);bottom:auto}';const b=u;const d=class{constructor(e){t(this,e);this.positionChange=o(this,"positionChange",7);this.openChange=o(this,"openChange",7);this.spaceTolerance=3;this.position=i.TOP;this.open=false;this.bindTo=undefined;this.showArrow=false;this.center=false;this.closable=true;this.currentPosition=undefined}closePopoverWithKeyboard(t){if(this.closable&&t.key===n.ESC){t.stopPropagation();this.open=false}}handleOutsideClick(t){const o=t.target;if(!this.closable||!this.open||h(this.host,o)){return}if(h(this.boundElement,o)){t.stopPropagation()}this.open=false}validatePosition(t){if(!Object.values(i).includes(t)||t===i.AUTO){t=i.TOP;this.position=t}this.currentPosition=t;if(this.open){this.setPosition()}}onOpen(){cancelAnimationFrame(this.animationFrameRequestId);this.openChange.emit({open:this.open});if(!this.open){Object.assign(this.host.style,{top:"auto",right:"auto",bottom:"auto",left:"auto",maxWidth:"",maxHeight:"",visibility:"hidden"});this.currentPosition=undefined;return}const t=()=>{if(!this.open){return}this.setPosition();this.animationFrameRequestId=requestAnimationFrame(t)};setTimeout((()=>{t()}),0)}onBindingChange(){this.findBoundElement()}get offsetModifier(){return this.center?.5:0}findBoundElement(){if(typeof this.bindTo==="string"){this.boundElement=this.host.ownerDocument.querySelector(this.bindTo)}else if(this.bindTo){this.boundElement=this.bindTo}else{this.boundElement=c(this.host);if(this.boundElement.tagName.toLowerCase()==="z-tooltip"){this.boundElement=c(this.boundElement)}}}hasCenteredHorizontalSpace(t,o,e,s){const r=(e-s)*(1-this.offsetModifier);if(!this.center){return o>=r-this.spaceTolerance}return o>=r-this.spaceTolerance&&t>=r-this.spaceTolerance}hasCenteredVerticalSpace(t,o,e,s){const r=(e-s)*(1-this.offsetModifier);if(!this.center){return o>=r-this.spaceTolerance}return t>=r-this.spaceTolerance&&o>=r-this.spaceTolerance}hasEnoughSideSpace(t,o,e,s){return t>=o-e*(1-s)-this.spaceTolerance}getOptimalPopoverPosition(t,o){const e=this.host.offsetWidth;const s=this.host.offsetHeight;const r=this.boundElement.getBoundingClientRect().width;const n=this.boundElement.getBoundingClientRect().height;const a=this.offsetModifier;const h=t=>{switch(t){case i.TOP:return o.top>=s-this.spaceTolerance&&this.hasCenteredHorizontalSpace(o.left,o.right,e,r);case i.TOP_RIGHT:return o.top>=s&&this.hasEnoughSideSpace(o.right,e,r,a);case i.TOP_LEFT:return o.top>=s&&this.hasEnoughSideSpace(o.left,e,r,a);case i.RIGHT:return o.right>=e&&this.hasCenteredVerticalSpace(o.top,o.bottom,s,n);case i.RIGHT_BOTTOM:return o.right>=e&&this.hasEnoughSideSpace(o.bottom,s,n,a);case i.RIGHT_TOP:return o.right>=e&&this.hasEnoughSideSpace(o.top,s,n,a);case i.BOTTOM:return o.bottom>=s&&this.hasCenteredHorizontalSpace(o.left,o.right,e,r);case i.BOTTOM_LEFT:return o.bottom>=s&&this.hasEnoughSideSpace(o.left,e,r,a);case i.BOTTOM_RIGHT:return o.bottom>=s&&this.hasEnoughSideSpace(o.right,e,r,a);case i.LEFT:return o.left>=e&&this.hasCenteredVerticalSpace(o.top,o.bottom,s,n);case i.LEFT_TOP:return o.left>=e&&this.hasEnoughSideSpace(o.top,s,n,a);case i.LEFT_BOTTOM:return o.left>=e&&this.hasEnoughSideSpace(o.bottom,s,n,a);default:return false}};if(h(t)){return t}const c=d.positionOrder;const f=c.indexOf(t);if(f===-1){return t}for(let t=1;t<c.length;t++){const o=(f+t)%c.length;const e=c[o];if(h(e)){return e}}return this.findBestFallbackPosition(o)}findBestFallbackPosition(t){const o=t.right>=t.left?i.RIGHT:i.LEFT;const e=t.bottom>=t.top?i.BOTTOM:i.TOP;const s=Math.max(t.right,t.left);const r=Math.max(t.bottom,t.top);const n=r>=s?e:o;let a=false;if(n===e){const o=Math.min(t.right,t.left);a=s>=o*2}else{const o=Math.min(t.bottom,t.top);a=r>=o*2}if(!a){return n}const h=n===e?o:e;return`${n}_${h}`}findScrollableAncestor(t){let o=c(t);while(o){if(o===t.ownerDocument.documentElement){return o}const e=getComputedStyle(o);const{overflow:s,overflowX:r,overflowY:i}=e;const n=s==="hidden"||i==="hidden"||r==="hidden";const a=o.scrollHeight>o.clientHeight&&s!=="visible"&&i!=="visible"||o.scrollWidth>o.clientWidth&&s!=="visible"&&r!=="visible";if(!n&&a){return o}o=c(o)}return t.ownerDocument.documentElement}calculateAvailableSpace(){const t=this.boundElement.getBoundingClientRect();if(this.lastBoundRect&&this.lastBoundRect.x===t.x&&this.lastBoundRect.y===t.y&&this.lastBoundRect.width===t.width&&this.lastBoundRect.height===t.height&&this.cachedAvailableSpace){return this.cachedAvailableSpace}this.lastBoundRect=t;const o=this.findScrollableAncestor(this.boundElement);const e=o.getBoundingClientRect();const s=o!==this.boundElement.ownerDocument.documentElement;const r=this.boundElement.ownerDocument.documentElement.clientWidth;const i=this.boundElement.ownerDocument.documentElement.clientHeight;const n=8;const a=s?e.top:0;const h=s?r-e.right:0;const c=s?i-e.bottom:0;const f=s?e.left:0;this.cachedAvailableSpace={top:t.top-a-n,right:r-t.right-h-n,bottom:i-t.bottom-c-n,left:t.left-f-n};return this.cachedAvailableSpace}getBoundElementOffsets(){const t=this.boundElement.getBoundingClientRect();const o=this.boundElement.ownerDocument.documentElement.clientWidth;const e=this.boundElement.ownerDocument.documentElement.clientHeight;return{top:t.top,right:o-t.right,bottom:e-t.bottom,left:t.left}}computePositionOffsets(){const t=this.getBoundElementOffsets();const o=f(this.host);const e=o===this.host.ownerDocument.documentElement;if(e){return t}const s=o.getBoundingClientRect();const r=getComputedStyle(o);const i={top:s.top+parseFloat(r.borderTopWidth),right:s.right-parseFloat(r.borderRightWidth),bottom:s.bottom-parseFloat(r.borderBottomWidth),left:s.left+parseFloat(r.borderLeftWidth)};const n=this.boundElement.getBoundingClientRect();const a={top:n.top-i.top,right:i.right-n.right,bottom:i.bottom-n.bottom,left:n.left-i.left};return{top:a.top+o.scrollTop,right:a.right-o.scrollLeft,bottom:a.bottom-o.scrollTop,left:a.left+o.scrollLeft}}applyPositionStyles(t,o){const e=this.boundElement.offsetWidth;const s=this.boundElement.offsetHeight;const r=this.offsetModifier;const n=this.showArrow&&this.center?8:0;const h=this.host.style;const c=parseFloat(getComputedStyle(this.host).marginTop.replace("px",""))||0;const f=this.computePositionOffsets();const l=f.left+e*r;const u=f.right+e*r;const b=f.top+s;const d=f.bottom+s;const g=f.top+s*r;const m=f.bottom+s*r;let v;let w;switch(t){case i.TOP:case i.TOP_RIGHT:h.bottom=`${d}px`;h.left=`${l-(t===i.TOP_RIGHT?n:0)}px`;w=o.top-c;if(t===i.TOP_RIGHT){v=o.right+e*r}break;case i.TOP_LEFT:h.right=`${u-n}px`;h.bottom=`${d}px`;v=o.left+e*r;w=o.top-c;break;case i.BOTTOM:case i.BOTTOM_RIGHT:h.top=`${b}px`;h.left=`${l-(t===i.BOTTOM_RIGHT?n:0)}px`;w=o.bottom-c;if(t===i.BOTTOM_RIGHT){v=o.right+e*r}break;case i.BOTTOM_LEFT:h.top=`${b}px`;h.right=`${u-n}px`;v=o.left+e*r;w=o.bottom-c;break;case i.RIGHT:case i.RIGHT_BOTTOM:h.top=`${g-(t===i.RIGHT_BOTTOM?n:0)}px`;h.left=`${f.left+e}px`;v=o.right-c;if(t===i.RIGHT){w=o.top+o.bottom+s}else{w=o.bottom+s*r}break;case i.RIGHT_TOP:h.bottom=`${m-n}px`;h.left=`${f.left+e}px`;v=o.right-c;w=o.top+s*r;break;case i.LEFT:case i.LEFT_BOTTOM:h.top=`${g-(t===i.LEFT_BOTTOM?n:0)}px`;h.right=`${f.right+e}px`;v=o.left-c;if(t===i.LEFT_BOTTOM){w=o.bottom+s*r}break;case i.LEFT_TOP:h.right=`${f.right+e}px`;h.bottom=`${m-n}px`;v=o.left-c;w=o.top+s*r;break}if(p()!==a.MOBILE){Object.assign(h,{maxWidth:v?`${v}px`:"",maxHeight:w?`${w}px`:""})}}setPosition(){if(!this.boundElement){return}if(!l(this.boundElement,this.findScrollableAncestor(this.boundElement))){this.open=false;return}Object.assign(this.host.style,{top:"auto",right:"auto",bottom:"auto",left:"auto",maxWidth:"",maxHeight:"",visibility:"hidden"});const t=this.calculateAvailableSpace();const o=this.getOptimalPopoverPosition(this.position,t);this.applyPositionStyles(o,t);this.currentPosition=o;this.positionChange.emit({position:this.currentPosition});this.host.style.visibility="visible"}componentWillLoad(){this.validatePosition(this.position)}componentDidLoad(){this.findBoundElement();if(this.open){this.onOpen()}}disconnectedCallback(){cancelAnimationFrame(this.animationFrameRequestId)}render(){return e(s,{key:"0a8cd5736765d61bf31b6f19f6fd6b3b61ffb414","current-position":this.currentPosition},e("slot",{key:"269e9c027b0636583b199d91e724ca2093aac615"}))}get host(){return r(this)}static get watchers(){return{position:["validatePosition"],open:["onOpen"],bindTo:["onBindingChange"]}}};d.positionOrder=[i.TOP,i.TOP_RIGHT,i.TOP_LEFT,i.RIGHT,i.RIGHT_BOTTOM,i.RIGHT_TOP,i.BOTTOM,i.BOTTOM_LEFT,i.BOTTOM_RIGHT,i.LEFT,i.LEFT_TOP,i.LEFT_BOTTOM];d.style=b;export{d as z_popover};
-//# sourceMappingURL=p-bd2156cc.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZPopoverStyle0","ZPopover","this","spaceTolerance","PopoverPosition","TOP","closePopoverWithKeyboard","e","closable","key","KeyboardCode","ESC","stopPropagation","open","handleOutsideClick","target","containsElement","host","boundElement","validatePosition","newValue","Object","values","includes","AUTO","position","currentPosition","setPosition","onOpen","cancelAnimationFrame","animationFrameRequestId","openChange","emit","assign","style","top","right","bottom","left","maxWidth","maxHeight","visibility","undefined","updatePositionLoop","requestAnimationFrame","setTimeout","onBindingChange","findBoundElement","offsetModifier","center","bindTo","ownerDocument","querySelector","getParentElement","tagName","toLowerCase","hasCenteredHorizontalSpace","availableLeft","availableRight","hostWidth","boundElementWidth","requiredSideSpace","hasCenteredVerticalSpace","availableTop","availableBottom","hostHeight","boundElementHeight","hasEnoughSideSpace","availableSpace","hostSize","boundElementSize","getOptimalPopoverPosition","desiredPosition","offsetWidth","offsetHeight","getBoundingClientRect","width","height","fits","pos","TOP_RIGHT","TOP_LEFT","RIGHT","RIGHT_BOTTOM","RIGHT_TOP","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","LEFT","LEFT_TOP","LEFT_BOTTOM","positions","positionOrder","startIndex","indexOf","i","length","posIndex","findBestFallbackPosition","bestHorizontalDirection","bestVerticalDirection","maxHorizontalSpace","Math","max","maxVerticalSpace","mainDirection","needsSecondaryDirection","minHorizontalSpace","min","minVerticalSpace","secondaryDirection","findScrollableAncestor","element","parent","documentElement","getComputedStyle","overflow","overflowX","overflowY","hasHiddenOverflow","isScrollable","scrollHeight","clientHeight","scrollWidth","clientWidth","calculateAvailableSpace","boundElementRect","lastBoundRect","x","y","cachedAvailableSpace","scrollableAncestor","scrollableAncestorRect","isScrollableAncestorNested","documentWidth","documentHeight","safeSpace","deltaTop","deltaRight","deltaBottom","deltaLeft","getBoundElementOffsets","elementRect","computePositionOffsets","boundElementOffsets","containingBlockAncestor","findContainingBlockAncestor","isDocumentElement","containingBlockRect","containingBlockStyle","paddingBox","parseFloat","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","relativeOffsets","scrollTop","scrollLeft","applyPositionStyles","arrowModifier","showArrow","hostStyle","distanceFromBound","marginTop","replace","positionOffsets","leftBase","rightBase","topBase","bottomBase","sideTopBase","sideBottomBase","getDevice","Device","MOBILE","isElementVisibleInContainer","positionChange","componentWillLoad","componentDidLoad","disconnectedCallback","render","h","Host"],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n  --z-popover-theme--surface: ;\n  --z-popover-theme--text: ;\n  --z-popover-padding: ;\n  --z-popover-shadow-filter: ;\n\n  position: fixed;\n  display: none;\n  max-width: calc(100dvw - var(--grid-margin) * 2);\n  max-height: calc(100dvh - var(--grid-margin) * 2);\n  padding: var(--z-popover-padding, 0);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  border-radius: var(--border-radius-small);\n  color: var(--z-popover-theme--text, var(--color-default-text));\n  fill: currentcolor;\n  filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n  text-align: center;\n  visibility: hidden; /* hidden by default. the positioning algorithm will set it to 'visible' when needed */\n}\n\n:host([open]:not([open=\"false\"])[current-position]) {\n  display: block;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n  transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n  transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n  margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n  margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n  margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n  margin: 0 0 0 var(--space-unit);\n}\n\n/* Arrow style */\n:host([current-position])::before {\n  --arrow-size: 6px;\n  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  content: \"\";\n  transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n  display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n  top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n  bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n  left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n  top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n  right: auto;\n  left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n  top: var(--arrow-center-x-offset);\n  bottom: auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {\n  containsElement,\n  findContainingBlockAncestor,\n  getDevice,\n  getParentElement,\n  isElementVisibleInContainer,\n} from \"../../utils/utils\";\n\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/**\n * Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n *\n * Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n  tag: \"z-popover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPopover {\n  /**\n   * The preferred position to render the popover.\n   * The popover will automatically search another position if not enough space is available for the preferred position.\n   * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n   */\n  @Prop({reflect: true, mutable: true})\n  position?: PopoverPosition = PopoverPosition.TOP;\n\n  /**\n   * The initial open state of the popover.\n   * Internal changes of this prop are emitted through the `openChange` event.\n   * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the popover.\n   * If string css selector is provided make sure to use a valid selector.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /** Whether to show popover's arrow. */\n  @Prop({reflect: true})\n  showArrow = false;\n\n  /** Whether to center the popup on the main side (according to \"position\"). */\n  @Prop({reflect: true})\n  center = false;\n\n  /**\n   * Whether the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n   * Default: `true`.\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * The current position of the popover.\n   * It differs from `position` only when calculated automatically for space reasons.\n   */\n  @State()\n  currentPosition?: PopoverPosition;\n\n  @Element() host: HTMLZPopoverElement;\n\n  // Clockwise order of positions.\n  private static readonly positionOrder: PopoverPosition[] = [\n    PopoverPosition.TOP,\n    PopoverPosition.TOP_RIGHT,\n    PopoverPosition.TOP_LEFT,\n    PopoverPosition.RIGHT,\n    PopoverPosition.RIGHT_BOTTOM,\n    PopoverPosition.RIGHT_TOP,\n    PopoverPosition.BOTTOM,\n    PopoverPosition.BOTTOM_LEFT,\n    PopoverPosition.BOTTOM_RIGHT,\n    PopoverPosition.LEFT,\n    PopoverPosition.LEFT_TOP,\n    PopoverPosition.LEFT_BOTTOM,\n  ] as const;\n\n  private animationFrameRequestId?: number;\n\n  /** space tolerance for space calculations */\n  private readonly spaceTolerance = 3;\n\n  /** The element bound to the popover. */\n  private boundElement?: HTMLElement;\n\n  /** Cached available space around the bound element to avoid unnecessary recalculations */\n  private cachedAvailableSpace?: Offsets;\n\n  /** Last bounding rect of the bound element to detect changes and eventually invalidate the caches. */\n  private lastBoundRect?: DOMRect;\n\n  /** Fired when the position changes. */\n  @Event()\n  positionChange: EventEmitter<{position: PopoverPosition}>;\n\n  /** Event emitted when the open state of the popover changes (e.g. when the user clicks outside the popover to close it, if `closable` is true). */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\n\n  @Listen(\"keyup\", {target: \"window\", capture: true})\n  closePopoverWithKeyboard(e: KeyboardEvent): void {\n    if (this.closable && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n      this.open = false;\n    }\n  }\n\n  /**\n   * Close the popover when clicking outside of its content.\n   * Stop event propagation if the click was fired by popover's trigger element,\n   * to prevent close and reopen glitches.\n   */\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    const target = e.target as Element;\n    if (!this.closable || !this.open || containsElement(this.host, target)) {\n      return;\n    }\n\n    if (containsElement(this.boundElement, target)) {\n      // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n      e.stopPropagation();\n    }\n    this.open = false;\n  }\n\n  @Watch(\"position\")\n  validatePosition(newValue: PopoverPosition): void {\n    if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n      newValue = PopoverPosition.TOP;\n      this.position = newValue;\n    }\n    this.currentPosition = newValue;\n    if (this.open) {\n      this.setPosition();\n    }\n  }\n\n  /** Setup popover behaviors when `open` changes. */\n  @Watch(\"open\")\n  onOpen(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n    this.openChange.emit({open: this.open});\n    if (!this.open) {\n      Object.assign(this.host.style, {\n        // Reset all positioning properties\n        top: \"auto\",\n        right: \"auto\",\n        bottom: \"auto\",\n        left: \"auto\",\n        maxWidth: \"\",\n        maxHeight: \"\",\n        // Set initial visibility to hidden while calculating position...\n        visibility: \"hidden\",\n      });\n      this.currentPosition = undefined;\n\n      return;\n    }\n\n    const updatePositionLoop = (): void => {\n      if (!this.open) {\n        return;\n      }\n\n      this.setPosition();\n      this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n    };\n\n    // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n    setTimeout(() => {\n      updatePositionLoop();\n    }, 0);\n  }\n\n  @Watch(\"bindTo\")\n  onBindingChange(): void {\n    this.findBoundElement();\n  }\n\n  /** Returns the offset modifier to use in calculations to align the popover with the bound element. */\n  private get offsetModifier(): OffsetModifier {\n    return this.center ? 0.5 : 0;\n  }\n\n  private findBoundElement(): void {\n    if (typeof this.bindTo === \"string\") {\n      this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n    } else if (this.bindTo) {\n      this.boundElement = this.bindTo;\n    } else {\n      this.boundElement = getParentElement(this.host) as HTMLElement;\n      if (this.boundElement.tagName.toLowerCase() === \"z-tooltip\") {\n        // If the popover is used inside a tooltip without a specified `bindTo`, bind it to the parent of the tooltip.\n        this.boundElement = getParentElement(this.boundElement) as HTMLElement;\n      }\n    }\n  }\n\n  /**\n   * Check if element has enough space to the right and left to be centered.\n   * Used for `TOP` and `BOTTOM` position.\n   * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n   */\n  private hasCenteredHorizontalSpace(\n    availableLeft: number,\n    availableRight: number,\n    hostWidth: number,\n    boundElementWidth: number\n  ): boolean {\n    const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);\n\n    if (!this.center) {\n      return availableRight >= requiredSideSpace - this.spaceTolerance;\n    }\n\n    return (\n      availableRight >= requiredSideSpace - this.spaceTolerance &&\n      availableLeft >= requiredSideSpace - this.spaceTolerance\n    );\n  }\n\n  /**\n   * Check if element has enough space to the top and bottom to be centered.\n   * Used for `RIGHT` and `LEFT` position.\n   * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n   */\n  private hasCenteredVerticalSpace(\n    availableTop: number,\n    availableBottom: number,\n    hostHeight: number,\n    boundElementHeight: number\n  ): boolean {\n    const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);\n\n    if (!this.center) {\n      return availableBottom >= requiredSideSpace - this.spaceTolerance;\n    }\n\n    return (\n      availableTop >= requiredSideSpace - this.spaceTolerance &&\n      availableBottom >= requiredSideSpace - this.spaceTolerance\n    );\n  }\n\n  /**\n   * Check if there is enough space in the given direction to fit the popover.\n   * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n   */\n  private hasEnoughSideSpace(\n    availableSpace: number,\n    hostSize: number,\n    boundElementSize: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    return availableSpace >= hostSize - boundElementSize * (1 - offsetModifier) - this.spaceTolerance;\n  }\n\n  /**\n   * Given a desired position and available space around the bound element, returns the best position\n   * that fits the popover, trying all positions if needed.\n   * Takes into account offsetModifier for centering.\n   * @param desiredPosition The desired position of the popover.\n   * @param availableSpace The available space around the bound element.\n   */\n  private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n    const hostWidth = this.host.offsetWidth;\n    const hostHeight = this.host.offsetHeight;\n    const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n    const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n    const offsetModifier = this.offsetModifier;\n\n    /** Check if there is enough space to fit the popover in the desired position */\n    const fits = (pos: PopoverPosition): boolean => {\n      switch (pos) {\n        case PopoverPosition.TOP:\n          return (\n            availableSpace.top >= hostHeight - this.spaceTolerance &&\n            this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n          );\n        case PopoverPosition.TOP_RIGHT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.TOP_LEFT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.RIGHT:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n          );\n        case PopoverPosition.RIGHT_BOTTOM:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.RIGHT_TOP:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.BOTTOM:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n          );\n        case PopoverPosition.BOTTOM_LEFT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.BOTTOM_RIGHT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.LEFT:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n          );\n        case PopoverPosition.LEFT_TOP:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.LEFT_BOTTOM:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n          );\n\n        default:\n          return false;\n      }\n    };\n\n    // Check desired position first\n    if (fits(desiredPosition)) {\n      return desiredPosition;\n    }\n\n    // Find position index and create rotation starting from next position\n    const positions = ZPopover.positionOrder;\n    const startIndex = positions.indexOf(desiredPosition);\n\n    if (startIndex === -1) {\n      return desiredPosition; // fallback if position not found\n    }\n\n    // Try all other positions starting from the next one\n    for (let i = 1; i < positions.length; i++) {\n      const posIndex = (startIndex + i) % positions.length;\n      const pos = positions[posIndex];\n      if (fits(pos)) {\n        return pos;\n      }\n    }\n\n    return this.findBestFallbackPosition(availableSpace);\n  }\n\n  /** Find the best fallback position based on available space when no position fits perfectly. */\n  private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n    // Determine which horizontal and vertical direction has the most available space\n    const bestHorizontalDirection =\n      availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n    const bestVerticalDirection =\n      availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n    // Choose the main direction based on which axis has more space overall\n    const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n    const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n    const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n    // Decide if a secondary direction is needed\n    // Only add a secondary direction if the difference between min and max in that axis is at least double\n    let needsSecondaryDirection = false;\n\n    if (mainDirection === bestVerticalDirection) {\n      // If main direction is vertical, check horizontal space difference\n      const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n      needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n    } else {\n      // If main direction is horizontal, check vertical space difference\n      const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n      needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n    }\n\n    if (!needsSecondaryDirection) {\n      return mainDirection;\n    }\n\n    const secondaryDirection =\n      mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n    // Return a combined position (e.g., \"bottom_right\")\n    return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n  }\n\n  /**\n   * Find the nearest scrollable ancestor of an element to take as a reference for positioning.\n   * The ancestor is considered scrollable if it doesn't have `overflow` property set to `hidden` and its scroll size is bigger than its client size.\n   */\n  private findScrollableAncestor(element: HTMLElement): HTMLElement {\n    let parent = getParentElement(element);\n\n    while (parent) {\n      if (parent === element.ownerDocument.documentElement) {\n        return parent as HTMLElement;\n      }\n\n      const style = getComputedStyle(parent);\n      const {overflow, overflowX, overflowY} = style;\n      const hasHiddenOverflow = overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\";\n      const isScrollable =\n        (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n        (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\");\n\n      if (!hasHiddenOverflow && isScrollable) {\n        return parent as HTMLElement;\n      }\n\n      parent = getParentElement(parent);\n    }\n\n    return element.ownerDocument.documentElement;\n  }\n\n  /**\n   * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n   *\n   * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n   * For more information see the explanation in the docs.\n   * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n   */\n  private calculateAvailableSpace(): Offsets {\n    const boundElementRect = this.boundElement.getBoundingClientRect();\n\n    if (\n      this.lastBoundRect &&\n      this.lastBoundRect.x === boundElementRect.x &&\n      this.lastBoundRect.y === boundElementRect.y &&\n      this.lastBoundRect.width === boundElementRect.width &&\n      this.lastBoundRect.height === boundElementRect.height &&\n      this.cachedAvailableSpace\n    ) {\n      // If the bound element's rect hasn't changed, return the cached rect\n      return this.cachedAvailableSpace;\n    }\n\n    this.lastBoundRect = boundElementRect;\n    const scrollableAncestor = this.findScrollableAncestor(this.boundElement);\n    const scrollableAncestorRect = scrollableAncestor.getBoundingClientRect();\n    const isScrollableAncestorNested = scrollableAncestor !== this.boundElement.ownerDocument.documentElement;\n    const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n    const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n    const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n    // These deltas represent the offset between the scrollable ancestor and the viewport.\n    // They are used to adjust the available space calculations when the scrollable ancestor is not the document or body,\n    // to try to fit the popover inside the scrollable ancestor.\n    const deltaTop = isScrollableAncestorNested ? scrollableAncestorRect.top : 0;\n    const deltaRight = isScrollableAncestorNested ? documentWidth - scrollableAncestorRect.right : 0;\n    const deltaBottom = isScrollableAncestorNested ? documentHeight - scrollableAncestorRect.bottom : 0;\n    const deltaLeft = isScrollableAncestorNested ? scrollableAncestorRect.left : 0;\n\n    this.cachedAvailableSpace = {\n      top: boundElementRect.top - deltaTop - safeSpace,\n      right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n      bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n      left: boundElementRect.left - deltaLeft - safeSpace,\n    };\n\n    return this.cachedAvailableSpace;\n  }\n\n  /** Calculate the space around the bound element relative to the viewport. */\n  private getBoundElementOffsets(): Offsets {\n    const elementRect = this.boundElement.getBoundingClientRect();\n    const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n    const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n\n    return {\n      top: elementRect.top,\n      right: documentWidth - elementRect.right,\n      bottom: documentHeight - elementRect.bottom,\n      left: elementRect.left,\n    };\n  }\n\n  /** Compute positioning offsets in the appropriate coordinate space, accounting for transformed containing blocks and scroll. */\n  private computePositionOffsets(): Offsets {\n    const boundElementOffsets = this.getBoundElementOffsets();\n    const containingBlockAncestor = findContainingBlockAncestor(this.host);\n    const isDocumentElement = containingBlockAncestor === this.host.ownerDocument.documentElement;\n\n    if (isDocumentElement) {\n      return boundElementOffsets;\n    }\n\n    const containingBlockRect = containingBlockAncestor.getBoundingClientRect();\n    const containingBlockStyle = getComputedStyle(containingBlockAncestor);\n    /** Padding box of the containing block, accounting for borders. */\n    const paddingBox = {\n      top: containingBlockRect.top + parseFloat(containingBlockStyle.borderTopWidth),\n      right: containingBlockRect.right - parseFloat(containingBlockStyle.borderRightWidth),\n      bottom: containingBlockRect.bottom - parseFloat(containingBlockStyle.borderBottomWidth),\n      left: containingBlockRect.left + parseFloat(containingBlockStyle.borderLeftWidth),\n    };\n\n    const boundElementRect = this.boundElement.getBoundingClientRect();\n    /** Bound element offsets relative to the containing block padding box. */\n    const relativeOffsets = {\n      top: boundElementRect.top - paddingBox.top,\n      right: paddingBox.right - boundElementRect.right,\n      bottom: paddingBox.bottom - boundElementRect.bottom,\n      left: boundElementRect.left - paddingBox.left,\n    };\n\n    /** Account for scroll to keep the popover aligned while the containing block scrolls. */\n    return {\n      top: relativeOffsets.top + containingBlockAncestor.scrollTop,\n      right: relativeOffsets.right - containingBlockAncestor.scrollLeft,\n      bottom: relativeOffsets.bottom - containingBlockAncestor.scrollTop,\n      left: relativeOffsets.left + containingBlockAncestor.scrollLeft,\n    };\n  }\n\n  /** Apply positioning styles based on `position` parameter. */\n  private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n    const boundElementWidth = this.boundElement.offsetWidth;\n    const boundElementHeight = this.boundElement.offsetHeight;\n    const offsetModifier = this.offsetModifier;\n    /**\n     * Distance between the arrow center and the popover edge.\n     * Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled.\n     */\n    const arrowModifier = this.showArrow && this.center ? 8 : 0;\n    const hostStyle = this.host.style;\n    /** Gap between the popover and the bound element, set as margin in CSS. */\n    const distanceFromBound = parseFloat(getComputedStyle(this.host).marginTop.replace(\"px\", \"\")) || 0;\n    const positionOffsets = this.computePositionOffsets();\n\n    /**\n     * Precomputed bases to reduce repeated arithmetic in the switch below.\n     * They represent the bound element edges plus optional centering offsets.\n     */\n    const leftBase = positionOffsets.left + boundElementWidth * offsetModifier;\n    const rightBase = positionOffsets.right + boundElementWidth * offsetModifier;\n    const topBase = positionOffsets.top + boundElementHeight;\n    const bottomBase = positionOffsets.bottom + boundElementHeight;\n    const sideTopBase = positionOffsets.top + boundElementHeight * offsetModifier;\n    const sideBottomBase = positionOffsets.bottom + boundElementHeight * offsetModifier;\n\n    let maxWidth: number;\n    let maxHeight: number;\n\n    switch (position) {\n      case PopoverPosition.TOP:\n      case PopoverPosition.TOP_RIGHT:\n        hostStyle.bottom = `${bottomBase}px`;\n        hostStyle.left = `${leftBase - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n        maxHeight = availableSpace.top - distanceFromBound;\n        if (position === PopoverPosition.TOP_RIGHT) {\n          maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.TOP_LEFT:\n        hostStyle.right = `${rightBase - arrowModifier}px`;\n        hostStyle.bottom = `${bottomBase}px`;\n        maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n        maxHeight = availableSpace.top - distanceFromBound;\n        break;\n\n      case PopoverPosition.BOTTOM:\n      case PopoverPosition.BOTTOM_RIGHT:\n        hostStyle.top = `${topBase}px`;\n        hostStyle.left = `${leftBase - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n        maxHeight = availableSpace.bottom - distanceFromBound;\n        if (position === PopoverPosition.BOTTOM_RIGHT) {\n          maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.BOTTOM_LEFT:\n        hostStyle.top = `${topBase}px`;\n        hostStyle.right = `${rightBase - arrowModifier}px`;\n        maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n        maxHeight = availableSpace.bottom - distanceFromBound;\n        break;\n\n      case PopoverPosition.RIGHT:\n      case PopoverPosition.RIGHT_BOTTOM:\n        hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n        hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n        maxWidth = availableSpace.right - distanceFromBound;\n        if (position === PopoverPosition.RIGHT) {\n          maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n        } else {\n          maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.RIGHT_TOP:\n        hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n        hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n        maxWidth = availableSpace.right - distanceFromBound;\n        maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n        break;\n\n      case PopoverPosition.LEFT:\n      case PopoverPosition.LEFT_BOTTOM:\n        hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n        hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n        maxWidth = availableSpace.left - distanceFromBound;\n        if (position === PopoverPosition.LEFT_BOTTOM) {\n          maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.LEFT_TOP:\n        hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n        hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n        maxWidth = availableSpace.left - distanceFromBound;\n        maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n        break;\n    }\n\n    if (getDevice() !== Device.MOBILE) {\n      // Only force max sizes on non-mobile viewports\n      Object.assign(hostStyle, {\n        maxWidth: maxWidth ? `${maxWidth}px` : \"\",\n        maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n      });\n    }\n  }\n\n  /** Set the position of the popover. */\n  private setPosition(): void {\n    if (!this.boundElement) {\n      return;\n    }\n\n    if (!isElementVisibleInContainer(this.boundElement, this.findScrollableAncestor(this.boundElement))) {\n      // If the bound element is not visible, hide the popover too\n      this.open = false;\n\n      return;\n    }\n\n    Object.assign(this.host.style, {\n      // Reset all positioning properties\n      top: \"auto\",\n      right: \"auto\",\n      bottom: \"auto\",\n      left: \"auto\",\n      maxWidth: \"\",\n      maxHeight: \"\",\n      // Set initial visibility to hidden while calculating position...\n      visibility: \"hidden\",\n    });\n\n    const availableSpace = this.calculateAvailableSpace();\n    const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n    this.applyPositionStyles(position, availableSpace);\n    this.currentPosition = position;\n    this.positionChange.emit({position: this.currentPosition});\n\n    // ...then restore the visibility\n    this.host.style.visibility = \"visible\";\n  }\n\n  componentWillLoad(): void {\n    this.validatePosition(this.position);\n  }\n\n  componentDidLoad(): void {\n    this.findBoundElement();\n    if (this.open) {\n      this.onOpen();\n    }\n  }\n\n  disconnectedCallback(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <Host current-position={this.currentPosition}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as r,a as e,g as a}from"./p-75c4a726.js";import{a0 as s}from"./p-86618221.js";import{a as i}from"./p-061e28d6.js";import"./p-5145a606.js";const c=':host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}';const n=c;const l={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}};const d=5;const h=9;const u=class{constructor(r){t(this,r);this.colorSelected=o(this,"colorSelected",7);this.colorKeysByRow=[];this._colorButtons=[];this.selectedColor=undefined;this.lng="it";this.htmlAriaLabel=undefined;this.disableTransparent=false}get colorButtons(){if(!this._colorButtons.length){this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))}return this._colorButtons}sortColorKeysByRow(){const t=Object.keys(s);const o=[];for(let r=0;r<d;r++){for(let e=0;e<h;e++){const a=e*d+r;if(a<t.length){o.push(t[a])}}}return o}moveFocusTo(t){this.colorButtons.forEach(((o,r)=>o.tabIndex=r===t?0:-1));this.colorButtons[t].focus()}validateTransparentSelection(){if(this.disableTransparent&&this.selectedColor==="#FFFFFF00"){this.selectedColor="#333333"}}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>t.ariaSelected==="true"))||this.colorButtons.find((t=>!t.disabled));if(!t){return}t.tabIndex=0;setTimeout((()=>{t.focus()}),50);this.host.tabIndex=-1}getNextIndexByKey(t,o,r){const e=Math.floor(t/h);const a=t%h;let s=t;switch(o){case"ArrowRight":{const t=a+1;const o=t>=h?(e+1)%d:e;s=o*h+t%h;if(s>=r){s=0}break}case"ArrowLeft":{const t=a-1;const o=t<0?(e-1+d)%d:e;s=o*h+(t+h)%h;if(s>=r){s=r-1}break}case"ArrowDown":{let t=e+1;let o=a;if(t>=d){t=0;o=(a+1)%h}s=t*h+o;if(s>=r){s=0}break}case"ArrowUp":{let t=e-1;let o=a;if(t<0){t=d-1;o=(a-1+h)%h}s=t*h+o;if(s>=r){s=r-1}break}}return s}handleKeyDown(t){var o,r;const e=t.composedPath()[0];if(!e.dataset.color){return}const a=this.colorButtons.indexOf(e);const s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key)){return}let i=a;let c=0;do{i=this.getNextIndexByKey(i,t.key,s);c++}while(c<s&&((o=this.colorButtons[i])===null||o===void 0?void 0:o.disabled));if(i!==a&&i>=0&&i<s&&!((r=this.colorButtons[i])===null||r===void 0?void 0:r.disabled)){this.moveFocusTo(i);t.preventDefault();t.stopPropagation()}}handleBlur(t){const o=t.relatedTarget;if(!i(this.host,o)){this.host.tabIndex=0;this.colorButtons.forEach((t=>t.tabIndex=-1))}}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return r(e,{key:"24f0e76aecda9731ed826e8228f49ca5e08a14a5",role:"listbox","aria-label":this.htmlAriaLabel||l[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var o;return r("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":((o=this.selectedColor)===null||o===void 0?void 0:o.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&t==="#FFFFFF00"},r("div",{class:"color-swatch",role:"img","aria-roledescription":l[this.lng]["Color swatch"],"aria-label":s[t][this.lng],title:s[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return a(this)}static get watchers(){return{disableTransparent:["validateTransparentSelection"],selectedColor:["validateTransparentSelection","emitColorSelected"]}}};u.style=n;export{u as z_color_picker};
-//# sourceMappingURL=p-bd76ca35.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZColorPickerStyle0","LOCALES","it","en","COLOR_GROUP_SIZE","COLOR_GROUPS","ZColorPicker","this","colorKeysByRow","_colorButtons","colorButtons","length","Array","from","host","shadowRoot","querySelectorAll","sortColorKeysByRow","allKeys","Object","keys","ColorPickerPalette","ordered","row","col","columnMajorIndex","push","moveFocusTo","index","forEach","btn","i","tabIndex","focus","validateTransparentSelection","disableTransparent","selectedColor","emitColorSelected","colorSelected","emit","setFocus","firstSelectedOrEnabled","find","ariaSelected","disabled","setTimeout","getNextIndexByKey","currentIndex","key","totalColors","Math","floor","newIndex","newCol","newRow","handleKeyDown","event","target","composedPath","dataset","color","indexOf","includes","attempts","_a","_b","preventDefault","stopPropagation","handleBlur","relatedTarget","containsElement","componentWillLoad","render","h","Host","role","htmlAriaLabel","lng","map","colorKey","class","toUpperCase","onClick","title","style","backgroundColor"],"sources":["src/components/z-color-picker/styles.css?tag=z-color-picker&encapsulation=shadow","src/components/z-color-picker/index.tsx"],"sourcesContent":[":host {\n  display: grid;\n  width: fit-content;\n  padding: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  gap: var(--space-unit);\n  grid-template-columns: repeat(9, calc(var(--space-unit) * 3));\n  grid-template-rows: repeat(5, calc(var(--space-unit) * 3));\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  --border-color: var(--color-surface05);\n\n  padding: 0;\n  border: none;\n  appearance: none;\n  background: none;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\nbutton[data-color=\"#FFFFFF00\"] {\n  position: relative;\n}\n\n/* draw a diagonal line from top right corner */\nbutton[data-color=\"#FFFFFF00\"]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );\n  border-radius: var(--border-radius);\n  content: \"\";\n}\n\nbutton[aria-selected=\"true\"] {\n  box-shadow:\n    0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary);\n}\n\nbutton:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton .color-swatch {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--border-color);\n  border-radius: var(--border-radius);\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled {\n  --border-color: var(--color-disabled01-icon);\n\n  cursor: not-allowed;\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled .color-swatch {\n  background-color: var(--color-disabled02);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n  it: {\n    \"Select a color\": \"Seleziona un colore\",\n    \"Color swatch\": \"Campione di colore\",\n  },\n  en: {\n    \"Select a color\": \"Select a color\",\n    \"Color swatch\": \"Color swatch\",\n  },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n  tag: \"z-color-picker\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZColorPicker {\n  @Element() host: HTMLZColorPickerElement;\n\n  /**\n   * The selected color to highlight.\n   */\n  @Prop({mutable: true})\n  selectedColor: ColorPickerPalette;\n\n  /**\n   * The language for the aria labels inside the color picker.\n   */\n  @Prop()\n  lng: \"it\" | \"en\" = \"it\";\n\n  /**\n   * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /**\n   * Disables the transparent color option.\n   * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n   */\n  @Prop()\n  disableTransparent = false;\n\n  /**\n   * Event emitted when a color is selected.\n   */\n  @Event()\n  colorSelected: EventEmitter<ColorPickerPalette>;\n\n  /**\n   * The color keys arranged in row-major order for rendering and navigation.\n   */\n  private colorKeysByRow: ColorPickerPalette[] = [];\n\n  private _colorButtons: HTMLButtonElement[] = [];\n\n  private get colorButtons(): HTMLButtonElement[] {\n    if (!this._colorButtons.length) {\n      this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n    }\n\n    return this._colorButtons;\n  }\n\n  /**\n   * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n   * This ensures button indices in the DOM match their visual position in the grid.\n   */\n  private sortColorKeysByRow(): ColorPickerPalette[] {\n    const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n    const ordered: ColorPickerPalette[] = [];\n\n    // Iterate through visual positions (row by row, left to right)\n    for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n      for (let col = 0; col < COLOR_GROUPS; col++) {\n        const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n        if (columnMajorIndex < allKeys.length) {\n          ordered.push(allKeys[columnMajorIndex]);\n        }\n      }\n    }\n\n    return ordered;\n  }\n\n  /** Move focus to the specified color button by index. */\n  private moveFocusTo(index: number): void {\n    // Reset tabindex of other buttons and set tabindex to 0 on selected button\n    this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n    this.colorButtons[index].focus();\n  }\n\n  @Watch(\"disableTransparent\")\n  @Watch(\"selectedColor\")\n  validateTransparentSelection(): void {\n    if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n      this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n    }\n  }\n\n  @Watch(\"selectedColor\")\n  emitColorSelected(): void {\n    this.colorSelected.emit(this.selectedColor);\n  }\n\n  /**\n   * Focuses the selected or first enabled color button and makes the container non-tabbable.\n   */\n  @Listen(\"focus\")\n  @Method()\n  async setFocus(): Promise<void> {\n    // Reset tabindex of all buttons\n    this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    const firstSelectedOrEnabled =\n      this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n    if (!firstSelectedOrEnabled) {\n      return;\n    }\n\n    firstSelectedOrEnabled.tabIndex = 0;\n    setTimeout(() => {\n      firstSelectedOrEnabled.focus();\n    }, 50);\n    // Set container as non-tabbable\n    this.host.tabIndex = -1;\n  }\n\n  /**\n   * Compute next index in row-major grid according to keyboard direction.\n   */\n  private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n    const row = Math.floor(currentIndex / COLOR_GROUPS);\n    const col = currentIndex % COLOR_GROUPS;\n    let newIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowRight\": {\n        const newCol = col + 1;\n        const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowLeft\": {\n        const newCol = col - 1;\n        const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n      case \"ArrowDown\": {\n        let newRow = row + 1;\n        let newCol = col;\n        if (newRow >= COLOR_GROUP_SIZE) {\n          // Wrap to first item of next column\n          newRow = 0;\n          newCol = (col + 1) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowUp\": {\n        let newRow = row - 1;\n        let newCol = col;\n        if (newRow < 0) {\n          // Wrap to last item of previous column\n          newRow = COLOR_GROUP_SIZE - 1;\n          newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n    }\n\n    return newIndex;\n  }\n\n  /**\n   * Handle keyboard navigation within the color picker.\n   * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!target.dataset.color) {\n      return;\n    }\n\n    const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n    const totalColors = this.colorButtons.length;\n    if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n      return;\n    }\n\n    let newIndex = currentIndex;\n    let attempts = 0;\n\n    do {\n      newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n      attempts++;\n    } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n    if (\n      newIndex !== currentIndex &&\n      newIndex >= 0 &&\n      newIndex < totalColors &&\n      !this.colorButtons[newIndex]?.disabled\n    ) {\n      this.moveFocusTo(newIndex);\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n   */\n  @Listen(\"blur\")\n  handleBlur(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (!containsElement(this.host, relatedTarget)) {\n      this.host.tabIndex = 0;\n      this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    }\n  }\n\n  componentWillLoad(): void {\n    this.colorKeysByRow = this.sortColorKeysByRow();\n  }\n\n  render(): HTMLZColorPickerElement {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n        tabIndex={0}\n      >\n        {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n          <button\n            class=\"color-swatch\"\n            data-color={colorKey}\n            role=\"option\"\n            aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n            tabIndex={-1}\n            onClick={() => (this.selectedColor = colorKey)}\n            disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n          >\n            <div\n              class=\"color-swatch\"\n              role=\"img\"\n              aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n              aria-label={ColorPickerPalette[colorKey][this.lng]}\n              title={ColorPickerPalette[colorKey][this.lng]}\n              style={{backgroundColor: colorKey}}\n            ></div>\n          </button>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as e,a as i}from"./p-75c4a726.js";const n=':host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2);margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}: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-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host([borderposition="bottom"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition="top"]){border-top:var(--border-size-medium) solid var(--color-surface03)}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{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=n;const s=class{handleActionButtonClick(t){t.preventDefault();this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault();this.notificationClose.emit()}constructor(e){t(this,e);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.borderposition="bottom";this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return e(i,{key:"7a717d8687d3e8e6de06c25192f9e2f14b6563c1"},e("div",{key:"eee4aa9a69678e7f353ead6ef4e805544e55426e",class:"main-container"},this.contenticonname&&e("z-icon",{key:"8d582f822e1e4ad440c65002d9a4abb5e0294040",class:"status-icon",name:this.contenticonname,width:16,height:16}),e("div",{key:"2779b5f3d772ee729c67b1616523ccac1b4646f0",class:"content-container"},e("div",{key:"1e622f63cc7d8523ab52561360a9de5e8829e976",class:"content-text"},e("slot",{key:"f0c65317530288e6ddeb9b604d21243858f25220"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&e("button",{key:"2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&e("button",{key:"1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},e("z-icon",{key:"33377e8438a076a2c3eee32ab9f513885e15fbcf",name:"multiply-circle",width:16,height:16}))))}};s.style=a;export{s as z_notification};
-//# sourceMappingURL=p-be1c414e.entry.js.map

package/dist/web-components-library/p-be1c414e.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","class","contenticonname","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  --z-notification--content-max-width: 100%;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\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-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\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-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\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  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 * @cssprop --z-notification--content-max-width - The max width of the notification content.\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  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\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        <div class=\"main-container\">\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        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,6gEAClB,MAAAC,EAAeD,E,MCaFE,EAAa,MAoChB,uBAAAC,CAAwBC,GAC9BA,EAAEC,iBACFC,KAAKC,mBAAmBC,M,CAOlB,sBAAAC,CAAuBL,GAC7BA,EAAEC,iBACFC,KAAKI,kBAAkBF,M,CAGzB,WAAAG,CAAAC,G,kNAnCsB,M,gBAOC,M,YAIJ,M,oBAIiB,SAqBlCN,KAAKH,wBAA0BG,KAAKH,wBAAwBU,KAAKP,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBI,KAAKP,K,CAGjE,MAAAQ,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACRZ,KAAKa,iBACJJ,EAAA,UAAAE,IAAA,2CACEC,MAAM,cACNE,KAAMd,KAAKa,gBACXE,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,kDAECM,EAAAjB,KAAKkB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEC,MAAM,gBACNQ,KAAK,SACLC,QAASrB,KAAKH,yBAEbG,KAAKkB,aAIXlB,KAAKsB,WACJb,EAAA,UAAAE,IAAA,2CACEC,MAAM,eACNQ,KAAK,SACLC,QAASrB,KAAKG,wBAEdM,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,O","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as o}from"./p-75c4a726.js";import{I as s,e as a,i as r,g as n,l}from"./p-86618221.js";import{r as c,e as h}from"./p-061e28d6.js";import"./p-5145a606.js";const d='.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';const p=d;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(i){t(this,i);this.comboboxChange=e(this,"comboboxChange",7);this.itemsList=[];this.inputType=s.TEXT;this.inputid=`combo-${c()}`;this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=a.BIG;this.htmlAriaLabel=undefined;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId="";this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}getControlToListSize(){switch(this.size){case a.X_SMALL:return r.SMALL;case a.SMALL:return r.MEDIUM;default:return r.LARGE}}getOptionId(t){return`${this.inputid}-option-${t}`}getCheckAllOptionId(){return`${this.inputid}-check-all`}allOptionsSelected(){return this.selectedCounter===this.itemsList.length}hasReachedMaxSelections(){return!!(this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems)}handleHeaderKeyDown(t){if(t.code===n.ENTER&&!this.focusedItemId){this.toggleComboBox()}if(!this.isopen||this.hassearch){return}switch(t.code){case n.SPACE:case n.ENTER:if(this.focusedItemId){t.preventDefault();this.checkOption(this.focusedItemId)}break;case n.ESC:if(this.focusedItemId){this.focusedItemId=""}break;case n.ARROW_DOWN:case n.ARROW_UP:this.handleArrowsNavigation(t);break}}handleInputKeyDown(t){switch(t.code){case n.ENTER:case n.SPACE:if(this.focusedItemId){t.preventDefault();this.checkOption(this.focusedItemId);break}break;case n.ARROW_DOWN:case n.ARROW_UP:this.handleArrowsNavigation(t);break;case n.ESC:if(this.focusedItemId){this.focusedItemId="";break}this.closeFilterItems();break;case n.TAB:this.focusedItemId="";break}}checkOption(t){if(t===this.getCheckAllOptionId()){this.itemsList=this.itemsList.map((t=>Object.assign(Object.assign({},t),{checked:!this.allOptionsSelected()})));this.focusedItemId=this.getCheckAllOptionId()}else{this.itemsList=this.itemsList.map((e=>{if(t===this.getOptionId(e.id)){e.checked=!e.checked}return e}))}this.updateRenderItemsList();this.emitComboboxChange()}handleArrowsNavigation(t){if(![n.ARROW_DOWN,n.ARROW_UP].includes(t.code)||!this.isopen){return}t.preventDefault();t.stopPropagation();const e=this.focusedItemId?this.element.shadowRoot.querySelector(`#${this.focusedItemId}`):null;const i=Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));if(!i.length){return}const o=e?i.indexOf(e):null;const s=0;const a=i.length-1;let r=null;if(t.code===n.ARROW_DOWN){r=o===null?i[s]:i[o+1]||i[a]}else if(t.code===n.ARROW_UP){r=o===null?i[a]:i[o-1]||i[s]}this.focusedItemId=r.id;r.scrollIntoView({block:"nearest",container:"nearest"})}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((e=>{t.push(Object.assign({},e))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((e=>{const i=e.name.toUpperCase().indexOf(t.toUpperCase());const o=i+t.length;const s=e.name.substring(0,i)+"<strong>"+e.name.substring(i,o)+"</strong>"+e.name.substring(o,e.name.length);e.name=s;return i>=0}))}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(t){const e="combobox";const i=this.htmlAriaLabel;const o=this.isopen?"true":"false";const s=this.isopen?this.focusedItemId:"";const a=`${this.inputid}_list`;if(t){return{role:e,"aria-label":i,"html-aria-expanded":o,"html-aria-activedescendant":s,"html-aria-controls":a}}return{role:e,"aria-label":i,"aria-expanded":o,"aria-activedescendant":s,"aria-controls":a}}renderHeader(){const t=!this.hassearch?this.getComboboxA11yAttributes(false):{};return i("div",Object.assign({class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>this.handleHeaderKeyDown(t),role:"button",tabindex:0,"aria-controls":"open-combo-data","aria-expanded":this.isopen?"true":"false"},t),i("span",{class:"body-3","aria-label":this.label?`${this.label}${this.selectedCounter>0?` - ${this.selectedCounter} selezionati`:``}`:undefined},this.label,i("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),i("z-icon",{name:"caret-down",class:this.size}))}renderContent(){return i("div",{id:"open-combo-data",class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),i("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":"true",id:`${this.inputid}_list`,"aria-owns":`${this.hascheckall?`${this.getCheckAllOptionId()} `:``}${this.itemsList.map((t=>this.getOptionId(t.id))).join(" ")}`},this.renderItems()))}renderItems(){return i("div",{class:this.searchValue&&"search",tabIndex:-1,role:"presentation"},this.renderList(this.renderItemsList))}renderItem(t,e,o){const s=this.getOptionId(t.id);const a=!t.checked&&this.hasReachedMaxSelections();return i("z-list-element",{htmlTabindex:-1,dividerType:e!==o-1?l.ELEMENT:l.NONE,size:this.getControlToListSize(),role:"presentation",disabled:!!a},i("span",{class:"option-wrap",role:"presentation",onClick:()=>{this.focusedItemId="";this.checkOption(s)}},i("z-icon",{name:t.checked?"checkbox-checked":"checkbox",class:this.focusedItemId===s?"focused":""}),i("span",{id:s,role:a?"presentation":"option","aria-selected":t.checked?"true":"false","aria-label":a?undefined:h(t.name)},i("span",{"aria-hidden":"true",innerHTML:t.name}))))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return i("ul",{role:"presentation"},this.renderCheckAll(),t.map(((e,i)=>this.renderItem(e,i,t.length))))}renderGroups(t){const e=t.reduce(((e,i,o)=>{var s;const a=i.category||"Altra categoria";const r=this.renderItem(i,o,t.length);e[a]=(s=e[a])!==null&&s!==void 0?s:[];e[a].push(r);return e}),{});const o=Object.entries(e).map((([t,e],o)=>i("z-list-group",{size:this.getControlToListSize(),"divider-type":l.ELEMENT,"aria-labelledby":`${this.inputid}_list_group_${o}`},i("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.inputid}_list_group_${o}`,"aria-hidden":"true"},t),e.map((t=>t)))));return i("ul",{role:"presentation"},this.renderCheckAll(),o)}renderNoSearchResults(){return i("div",{class:"no-results"},i("span",null,this.noresultslabel))}renderSearchInput(){return i("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"html-aria-autocomplete":"list"},this.getComboboxA11yAttributes(true),{onKeyDown:t=>this.handleInputKeyDown(t),onInputChange:t=>{this.searchValue=t.detail.value;this.focusedItemId=""}}))}renderCheckAll(){if(!this.hascheckall||this.searchValue){return}const t=this.getCheckAllOptionId();const e=this.allOptionsSelected();const o=this.hasReachedMaxSelections()||this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length;return i("z-list-element",{class:"check-all-wrapper",role:"presentation",htmlTabindex:-1,dividerType:l.ELEMENT,dividerColor:"gray800",size:this.getControlToListSize(),disabled:!!o},i("span",{class:"option-wrap",role:"presentation",onClick:()=>this.checkOption(t)},i("z-icon",{name:e?"checkbox-checked":"checkbox",class:this.focusedItemId===t?"focused":""}),i("span",{id:t,role:o?"presentation":"option","aria-selected":e?"true":"false"},e?this.uncheckalltext:this.checkalltext)))}render(){return i("div",{key:"3d2a5f02bd730efb2ff1390c4e21e96224a4e552","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return o(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"]}}};u.style=p;export{u as z_combobox};
-//# sourceMappingURL=p-c3e03e41.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","inputType","InputType","TEXT","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","getControlToListSize","size","X_SMALL","ListSize","SMALL","MEDIUM","LARGE","getOptionId","itemId","getCheckAllOptionId","allOptionsSelected","hasReachedMaxSelections","maxcheckableitems","handleHeaderKeyDown","e","code","KeyboardCode","ENTER","focusedItemId","isopen","hassearch","SPACE","preventDefault","checkOption","ESC","ARROW_DOWN","ARROW_UP","handleArrowsNavigation","handleInputKeyDown","TAB","optionId","map","Object","assign","i","includes","stopPropagation","currElem","element","shadowRoot","querySelector","options","Array","from","querySelectorAll","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","scrollIntoView","block","container","resetRenderItemsList","renderItemsList","forEach","push","value","start","name","toUpperCase","end","newName","substring","getComboboxA11yAttributes","isZInput","role","ariaLabel","htmlAriaLabel","ariaExpanded","ariaActivedescendant","ariaControls","renderHeader","comboboxA11yAttributes","h","class","onClick","onKeyDown","tabindex","label","undefined","renderContent","renderSearchInput","hascheckall","join","renderItems","tabIndex","renderList","renderItem","index","isDisabled","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","disabled","getPlainText","innerHTML","renderNoSearchResults","hasgroupitems","renderGroups","renderCheckAll","newData","reduce","group","category","zListItem","_a","listGroups","entries","key","slot","noresultslabel","htmlid","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","type","message","onInputChange","detail","allChecked","dividerColor","uncheckalltext","checkalltext","render","open","fixed","isfixed"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":["@import \"../css-components/z-label/styles.css\";\n\n:host {\n  display: block;\n  min-width: 290px;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n  position: relative;\n}\n\n:host > div > .header {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  min-height: 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--color-form-surface04);\n  margin: 0;\n  background-color: var(--color-form-background);\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n  min-height: 34px;\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n  min-height: 30px;\n  font-size: var(--font-size-2);\n}\n\n:host > div > .header:hover {\n  outline: var(--border-size-medium) solid var(--color-form-surface04);\n  outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n  z-index: 16;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n  font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n  fill: var(--color-form-default-icon);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n  border: var(--border-size-small) solid var(--color-form-active-primary);\n  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n  pointer-events: none;\n}\n\n:host > div.disabled .header {\n  border-color: var(--color-form-disabled03);\n  fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n  color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n  fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n  fill: var(--color-form-default-icon);\n  transform: rotate(180deg);\n  transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n  display: none;\n}\n\n:host > div.open > div.open-combo-data {\n  position: relative;\n  z-index: 12;\n  display: block;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: 0;\n  background-color: var(--color-form-background);\n  border-radius: 0;\n  box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n  color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n  overflow: auto;\n  max-height: 235px;\n  padding: 0;\n  padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus */\n  margin-left: calc(var(--space-unit) * -1); /* padding left and negative margin in order to enable focus */\n}\n\n:host > div.open > div.open-combo-data > z-input {\n  width: 100%;\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n  max-height: 235px;\n  padding: 0 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow */\n  margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n  --background-color-list-element: var(--color-form-background);\n  --background-hover-color-list-element: var(--color-form-surface03);\n  --background-active-color-list-element: var(--color-form-surface03);\n}\n\n:host .open-combo-data z-list-element[disabled] {\n  pointer-events: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  gap: var(--space-unit);\n}\n\n:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,\n:host .open-combo-data z-list-element[size=\"small\"] .option-wrap {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  font-size: var(--font-size-2);\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon {\n  fill: var(--color-primary01);\n}\n\n:host .open-combo-data z-list-element[disabled] .option-wrap > z-icon {\n  fill: var(--color-disabled01);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon.focused {\n  border-radius: var(--border-radius-small);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus,\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus-visible {\n  outline: none;\n}\n\n::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(::-webkit-scrollbar-track) {\n  :host {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n:host > div.open > z-input {\n  position: relative;\n  z-index: 1;\n  width: 238px;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n  overflow: hidden;\n  max-height: none;\n  margin-top: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n  overflow: auto;\n  max-height: 180px;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host .open .open-combo-data .search .no-results {\n  display: flex;\n  align-items: center;\n  column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n  display: flex;\n  justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n  display: inline-block;\n  height: 44px;\n  color: var(--color-form-active-primary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 44px;\n  text-align: center;\n  text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  /* padding left and negative margin in order to enable focus */\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);\n  border-bottom: var(--border-size-small) solid var(--gray800);\n  margin-bottom: var(--space-unit);\n  margin-left: calc(var(--space-unit) * -1);\n  text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCombobox {\n  @Element() element: HTMLZComboboxElement;\n\n  /** input unique id */\n  @Prop()\n  inputid = `combo-${randomId()}`;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** the combobox aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  @State()\n  focusedItemId = \"\";\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  private getControlToListSize(): ListSize {\n    switch (this.size) {\n      case ControlSize.X_SMALL:\n        return ListSize.SMALL;\n      case ControlSize.SMALL:\n        return ListSize.MEDIUM;\n      default:\n        return ListSize.LARGE;\n    }\n  }\n\n  private getOptionId(itemId: string): string {\n    return `${this.inputid}-option-${itemId}`;\n  }\n\n  private getCheckAllOptionId(): string {\n    return `${this.inputid}-check-all`;\n  }\n\n  private allOptionsSelected(): boolean {\n    return this.selectedCounter === this.itemsList.length;\n  }\n\n  private hasReachedMaxSelections(): boolean {\n    return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n  }\n\n  private handleHeaderKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n      this.toggleComboBox();\n    }\n\n    if (!this.isopen || this.hassearch) {\n      return;\n    }\n\n    switch (e.code as KeyboardCode) {\n      case KeyboardCode.SPACE:\n      case KeyboardCode.ENTER:\n        if (this.focusedItemId) {\n          e.preventDefault();\n          this.checkOption(this.focusedItemId);\n        }\n        break;\n      case KeyboardCode.ESC:\n        if (this.focusedItemId) {\n          this.focusedItemId = \"\";\n        }\n        break;\n      case KeyboardCode.ARROW_DOWN:\n      case KeyboardCode.ARROW_UP:\n        this.handleArrowsNavigation(e);\n        break;\n    }\n  }\n\n  private handleInputKeyDown(e: KeyboardEvent): void {\n    switch (e.code as KeyboardCode) {\n      case KeyboardCode.ENTER:\n      case KeyboardCode.SPACE:\n        if (this.focusedItemId) {\n          e.preventDefault();\n          this.checkOption(this.focusedItemId);\n          break;\n        }\n        break;\n      case KeyboardCode.ARROW_DOWN:\n      case KeyboardCode.ARROW_UP:\n        this.handleArrowsNavigation(e);\n        break;\n      case KeyboardCode.ESC:\n        if (this.focusedItemId) {\n          this.focusedItemId = \"\";\n          break;\n        }\n        this.closeFilterItems();\n        break;\n      case KeyboardCode.TAB:\n        this.focusedItemId = \"\";\n        break;\n    }\n  }\n\n  private checkOption(optionId: string): void {\n    if (optionId === this.getCheckAllOptionId()) {\n      this.itemsList = this.itemsList.map((item: ComboItem) => ({\n        ...item,\n        checked: !this.allOptionsSelected(),\n      }));\n\n      this.focusedItemId = this.getCheckAllOptionId();\n    } else {\n      this.itemsList = this.itemsList.map((i: ComboItem) => {\n        if (optionId === this.getOptionId(i.id)) {\n          i.checked = !i.checked;\n        }\n\n        return i;\n      });\n    }\n\n    this.updateRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) || !this.isopen) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n    const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n    if (!options.length) {\n      return;\n    }\n\n    const currElemIndex = currElem ? options.indexOf(currElem) : null;\n    const firstElemIndex = 0;\n    const lastElemIndex = options.length - 1;\n\n    let nextElem = null;\n    if (e.code === KeyboardCode.ARROW_DOWN) {\n      nextElem =\n        currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];\n    } else if (e.code === KeyboardCode.ARROW_UP) {\n      nextElem =\n        currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];\n    }\n\n    this.focusedItemId = nextElem.id;\n    nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        \"<strong>\" +\n        item.name.substring(start, end) +\n        \"</strong>\" +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n    const role = \"combobox\";\n    const ariaLabel = this.htmlAriaLabel;\n    const ariaExpanded = this.isopen ? \"true\" : \"false\";\n    const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n    const ariaControls = `${this.inputid}_list`;\n\n    if (isZInput) {\n      return {\n        \"role\": role,\n        \"aria-label\": ariaLabel,\n        \"html-aria-expanded\": ariaExpanded,\n        \"html-aria-activedescendant\": ariaActivedescendant,\n        \"html-aria-controls\": ariaControls,\n      };\n    }\n\n    return {\n      \"role\": role,\n      \"aria-label\": ariaLabel,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-activedescendant\": ariaActivedescendant,\n      \"aria-controls\": ariaControls,\n    };\n  }\n\n  private renderHeader(): HTMLDivElement {\n    const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n        role=\"button\"\n        tabindex={0}\n        aria-controls=\"open-combo-data\"\n        aria-expanded={this.isopen ? \"true\" : \"false\"}\n        {...comboboxA11yAttributes}\n      >\n        <span\n          class=\"body-3\"\n          aria-label={\n            this.label\n              ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`\n              : undefined\n          }\n        >\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </span>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        id=\"open-combo-data\"\n        class=\"open-combo-data\"\n      >\n        {this.hassearch && this.renderSearchInput()}\n        <div\n          role=\"listbox\"\n          aria-label={this.label}\n          aria-multiselectable=\"true\"\n          id={`${this.inputid}_list`}\n          aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(\" \")}`}\n        >\n          {this.renderItems()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    return (\n      <div\n        class={this.searchValue && \"search\"}\n        tabIndex={-1}\n        role=\"presentation\"\n      >\n        {this.renderList(this.renderItemsList)}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n    const optionId = this.getOptionId(item.id);\n    const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n    return (\n      <z-list-element\n        htmlTabindex={-1}\n        dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n        size={this.getControlToListSize()}\n        role=\"presentation\"\n        disabled={!!isDisabled}\n      >\n        <span\n          class=\"option-wrap\"\n          role=\"presentation\"\n          onClick={() => {\n            this.focusedItemId = \"\";\n            this.checkOption(optionId);\n          }}\n        >\n          <z-icon\n            name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n          />\n          <span\n            id={optionId}\n            role={isDisabled ? \"presentation\" : \"option\"}\n            aria-selected={item.checked ? \"true\" : \"false\"}\n            aria-label={isDisabled ? undefined : getPlainText(item.name)}\n          >\n            <span\n              aria-hidden=\"true\"\n              innerHTML={item.name}\n            />\n          </span>\n        </span>\n      </z-list-element>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(items);\n    }\n\n    return (\n      <ul role=\"presentation\">\n        {this.renderCheckAll()}\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const category = item.category || \"Altra categoria\";\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n      ([key, value], index) => {\n        return (\n          <z-list-group\n            size={this.getControlToListSize()}\n            divider-type={ListDividerType.ELEMENT}\n            aria-labelledby={`${this.inputid}_list_group_${index}`}\n          >\n            <span\n              class=\"body-3-sb z-list-group-title\"\n              slot=\"header-title\"\n              id={`${this.inputid}_list_group_${index}`}\n              aria-hidden=\"true\"\n            >\n              {key}\n            </span>\n            {value.map((item) => item)}\n          </z-list-group>\n        );\n      }\n    );\n\n    return (\n      <ul role=\"presentation\">\n        {this.renderCheckAll()}\n        {listGroups}\n      </ul>\n    );\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <div class=\"no-results\">\n        <span>{this.noresultslabel}</span>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        html-aria-autocomplete=\"list\"\n        {...this.getComboboxA11yAttributes(true)}\n        onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n        onInputChange={(e: CustomEvent) => {\n          this.searchValue = e.detail.value;\n          this.focusedItemId = \"\";\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (!this.hascheckall || this.searchValue) {\n      return;\n    }\n\n    const optionId = this.getCheckAllOptionId();\n    const allChecked = this.allOptionsSelected();\n    const isDisabled =\n      this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n    return (\n      <z-list-element\n        class=\"check-all-wrapper\"\n        role=\"presentation\"\n        htmlTabindex={-1}\n        dividerType={ListDividerType.ELEMENT}\n        dividerColor=\"gray800\"\n        size={this.getControlToListSize()}\n        disabled={!!isDisabled}\n      >\n        <span\n          class=\"option-wrap\"\n          role=\"presentation\"\n          onClick={() => this.checkOption(optionId)}\n        >\n          <z-icon\n            name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n          />\n          <span\n            id={optionId}\n            role={isDisabled ? \"presentation\" : \"option\"}\n            aria-selected={allChecked ? \"true\" : \"false\"}\n          >\n            {allChecked ? this.uncheckalltext : this.checkalltext}\n          </span>\n        </span>\n      </z-list-element>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as s,a as i}from"./p-75c4a726.js";import{A as e}from"./p-86618221.js";const a=":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";const r=a;const c=class{constructor(s){t(this,s);var i,a;this.size=e.MEDIUM;this.text=undefined;this.textColor="color-white";this.backgroundColor="gray700";this.image=undefined;if(((i=this.text)===null||i===void 0?void 0:i.length)===0&&((a=this.image)===null||a===void 0?void 0:a.length)===0){console.warn("z-avatar must contain at least one prop between text and image")}}getTextSize(){if(this.size===e.SMALL){return"5"}else if(this.size===e.MEDIUM){return"4"}else if(this.size===e.LARGE){return"2"}}render(){return s(i,{key:"8ce8c6ffe56b55036f9f47146041fcb91051ad36",class:{[this.size]:true,[`body-${this.getTextSize()}-sb`]:true},style:{color:`var(--${this.textColor})`,backgroundColor:`var(--${this.backgroundColor})`}},this.text&&!this.image&&s("span",{key:"b989378860518c05074dcf3cf445df062679f3c1"},this.text.substring(0,2)),this.image&&s("img",{key:"56a3a248fe3f88b2ed285f6a7c133b542ca21940",src:this.image,onError:()=>this.image=""}))}};c.style=r;export{c as z_avatar};
-//# sourceMappingURL=p-c9b81cab.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZAvatarStyle0","ZAvatar","constructor","hostRef","AvatarSize","MEDIUM","_a","this","text","length","_b","image","console","warn","getTextSize","size","SMALL","LARGE","render","h","Host","key","class","style","color","textColor","backgroundColor","substring","src","onError"],"sources":["src/components/z-avatar/styles.css?tag=z-avatar&encapsulation=shadow","src/components/z-avatar/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gray700);\n  border-radius: 50%;\n  font-family: var(--font-family-sans);\n  text-transform: uppercase;\n}\n\n:host(.small),\n:host(.small) > img {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n}\n\n:host(.medium),\n:host(.medium) > img {\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n}\n\n:host(.large),\n:host(.large) > img {\n  width: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 5);\n}\n\n:host > img {\n  object-fit: cover;\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,khBAClB,MAAAC,EAAeD,E,MCOFE,EAAO,MAqBlB,WAAAC,CAAAC,G,4BAlBoBC,EAAWC,O,mCAQV,c,qBAIM,U,qBAOzB,KAAIC,EAAAC,KAAKC,QAAI,MAAAF,SAAA,SAAAA,EAAEG,UAAW,KAAKC,EAAAH,KAAKI,SAAK,MAAAD,SAAA,SAAAA,EAAED,UAAW,EAAG,CACvDG,QAAQC,KAAK,iE,EAIT,WAAAC,GACN,GAAIP,KAAKQ,OAASX,EAAWY,MAAO,CAClC,MAAO,G,MACF,GAAIT,KAAKQ,OAASX,EAAWC,OAAQ,CAC1C,MAAO,G,MACF,GAAIE,KAAKQ,OAASX,EAAWa,MAAO,CACzC,MAAO,G,EAIX,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAC,CAACf,KAAKQ,MAAO,KAAM,CAAC,QAAQR,KAAKO,oBAAqB,MAC9DS,MAAO,CACLC,MAAO,SAASjB,KAAKkB,aACrBC,gBAAiB,SAASnB,KAAKmB,qBAGhCnB,KAAKC,OAASD,KAAKI,OAASQ,EAAA,QAAAE,IAAA,4CAAOd,KAAKC,KAAKmB,UAAU,EAAG,IAC1DpB,KAAKI,OACJQ,EAAA,OAAAE,IAAA,2CACEO,IAAKrB,KAAKI,MACVkB,QAAS,IAAOtB,KAAKI,MAAQ,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as n}from"./p-75c4a726.js";const a='*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}';const e=a;const i=class{constructor(n){t(this,n);this.listdata=undefined;this.renderList=this.renderList.bind(this)}handleSpaceKeyPress(t,n){if(t.keyCode==32||t.keyCode==13){t.preventDefault();window.open(n,"_blank")}}formatListContent(t){const{value:a,isLink:e,url:i}=t;if(!e){return n("span",null,a)}return n("a",{role:"button",onKeyPress:t=>this.handleSpaceKeyPress(t,i),href:i,target:"_blank"},a)}renderList(t){return t.map((t=>n("li",null,this.formatListContent(t))))}render(){return n("ul",{key:"aa9fc5633a56ebb91f157bc65cb8cfb20cf1bacb"},this.renderList(JSON.parse(this.listdata)))}};i.style=e;export{i as z_myz_card_list};
-//# sourceMappingURL=p-caced575.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzCardListStyle0","ZMyzCardList","constructor","hostRef","this","renderList","bind","handleSpaceKeyPress","e","url","keyCode","preventDefault","window","open","formatListContent","data","value","isLink","h","role","onKeyPress","href","target","dataArray","map","render","key","JSON","parse","listdata"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\nul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,qvBAClB,MAAAC,EAAeD,E,MCOFE,EAAY,MAKvB,WAAAC,CAAAC,G,kCACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,K,CAGjC,mBAAAG,CAAoBC,EAAkBC,GAC5C,GAAID,EAAEE,SAAW,IAAMF,EAAEE,SAAW,GAAI,CACtCF,EAAEG,iBACFC,OAAOC,KAAKJ,EAAK,S,EAIb,iBAAAK,CAAkBC,GACxB,MAAMC,MAACA,EAAKC,OAAEA,EAAMR,IAAEA,GAAOM,EAC7B,IAAKE,EAAQ,CACX,OAAOC,EAAA,YAAOF,E,CAGhB,OACEE,EAAA,KACEC,KAAK,SACLC,WAAaZ,GAAqBJ,KAAKG,oBAAoBC,EAAGC,GAC9DY,KAAMZ,EACNa,OAAO,UAENN,E,CAKC,UAAAX,CAAWkB,GACjB,OAAOA,EAAUC,KAAKT,GACbG,EAAA,UAAKd,KAAKU,kBAAkBC,K,CAIvC,MAAAU,GACE,OAAOP,EAAA,MAAAQ,IAAA,4CAAKtB,KAAKC,WAAWsB,KAAKC,MAAMxB,KAAKyB,W","ignoreList":[]}