@zanichelli/albe-web-components 14.5.3-rc7 → 14.6.0

package/www/build/p-1fe56b25.system.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["boolean","value","randomId","Math","random","toString","replace","handleKeyboardSubmit","ev","callback","args","_i","arguments","length","code","KeyboardCode","ENTER","SPACE","preventDefault","apply","handleEnterKeydSubmit","getClickedElement","elem","document","activeElement","shadowRoot","getElementTree","tree","push","parentElement","parentNode","host","getDevice","window","innerWidth","mobileBreakpoint","Device","MOBILE","tabletBreakpoint","TABLET","desktopBreakpoint","DESKTOP","DESKTOP_WIDE","convertJson","data","JSON","parse","_a","colorFromId","id","prefix","colorsCount","seed","ceil","pow","parseFloat","concat","color","padStart"],"sources":["src/utils/utils.ts"],"sourcesContent":["import {ChildNode} from \"@stencil/core\";\nimport {Device, KeyboardCode} from \"../beans/index\";\nimport {desktopBreakpoint, mobileBreakpoint, tabletBreakpoint} from \"../constants/breakpoints\";\n\nexport function format(first: string, middle: string, last: string): string {\n  return (first || \"\") + (middle ? ` ${middle}` : \"\") + (last ? ` ${last}` : \"\");\n}\n\n/**\n * Return boolean value for passed value if a boolean corresponding value is found\n * Return passed value otherwise\n */\nexport function boolean(value: string | number | boolean): boolean | string | number {\n  switch (value) {\n    case true:\n    case \"true\":\n    case 1:\n    case \"1\":\n    case \"on\":\n    case \"yes\":\n      return true;\n    case false:\n    case \"false\":\n    case 0:\n    case \"0\":\n    case \"off\":\n    case \"no\":\n      return false;\n    default:\n      return value;\n  }\n}\n\nexport function retrieveAsset(assetName: string): string {\n  return assetName && \"assets/images/png/\" + assetName;\n}\n\nexport function randomId(): string {\n  return Math.random().toString(36).replace(\"0.\", \"\");\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleKeyboardSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {\n    ev.preventDefault();\n    callback(...args);\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleEnterKeydSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n  if (ev.code === KeyboardCode.ENTER) {\n    ev.preventDefault();\n    callback(...args);\n  }\n}\n\nexport function getClickedElement(elem: null | Element = null): null | Element {\n  if (!elem) {\n    elem = document.activeElement;\n  }\n\n  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {\n    elem = elem.shadowRoot.activeElement;\n\n    return getClickedElement(elem);\n  }\n\n  return elem;\n}\n\nexport function getElementTree(elem: Element, tree: Element[] = []): null | Element[] {\n  tree.push(elem);\n\n  if (elem.parentElement) {\n    elem = elem.parentElement;\n\n    return getElementTree(elem, tree);\n  } else if (elem.parentNode && (elem.parentNode as ShadowRoot).host) {\n    elem = (elem.parentNode as ShadowRoot).host;\n\n    return getElementTree(elem, tree);\n  }\n\n  return tree;\n}\n\nexport function getSiblings(elem: HTMLElement): ChildNode[] {\n  const siblings = [];\n  if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {\n    return siblings;\n  }\n\n  elem.parentNode.childNodes.forEach((child) => {\n    if (child.nodeType === 1 && child !== elem) {\n      siblings.push(child);\n    }\n  });\n\n  return siblings;\n}\n\nexport function getDevice(): Device {\n  switch (true) {\n    case window.innerWidth <= mobileBreakpoint:\n      return Device.MOBILE;\n    case window.innerWidth <= tabletBreakpoint:\n      return Device.TABLET;\n    case window.innerWidth <= desktopBreakpoint:\n      return Device.DESKTOP;\n    default:\n      return Device.DESKTOP_WIDE;\n  }\n}\n\ntype JSONValue = string | number | boolean | JSONObject | JSONArray;\ninterface JSONObject {\n  [x: string]: JSONValue;\n}\ntype JSONArray = JSONValue[];\n\nexport function convertJson(data: string): JSONValue {\n  try {\n    return JSON.parse(data);\n  } catch {\n    return false;\n  }\n}\n\nexport function colorFromId(id: number): string {\n  const prefix = \"avatar-C\"; // prefix for color vars name\n  const colorsCount = 19; // available colors\n  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);\n  let color = Math.ceil(colorsCount * (seed % 1));\n\n  // if result of mc is 0\n  // es.: 3895229\n  if (color === 0) {\n    color = 1;\n  }\n\n  return `${prefix}${color.toString().padStart(2, \"0\")}`;\n}\n\n/**\n * Check if the passed CSS selector is valid.\n * @param selector CSS selector to validate\n */\nexport function isSelectorValid(selector: string): boolean {\n  try {\n    document.createDocumentFragment().querySelector(selector);\n\n    return true;\n  } catch {\n    return false;\n  }\n}\n"],"mappings":"0PAYgBA,EAAQC,GACtB,OAAQA,GACN,KAAK,KACL,IAAK,OACL,KAAK,EACL,IAAK,IACL,IAAK,KACL,IAAK,MACH,OAAO,KACT,KAAK,MACL,IAAK,QACL,KAAK,EACL,IAAK,IACL,IAAK,MACL,IAAK,KACH,OAAO,MACT,QACE,OAAOA,EAEb,C,SAMgBC,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,QAAQ,KAAM,GAClD,C,SAGgBC,EAAqBC,EAAmBC,GAA6B,IAAAC,EAAA,G,IAAA,IAAAC,EAAA,EAAAA,EAAAC,UAAAC,OAAAF,IAAc,CAAdD,EAAAC,EAAA,GAAAC,UAAAD,E,CACnF,GAAIH,EAAGM,OAASC,EAAaC,OAASR,EAAGM,OAASC,EAAaE,MAAO,CACpET,EAAGU,iBACHT,EAAQU,WAAA,EAAIT,E,CAEhB,C,SAGgBU,EAAsBZ,EAAmBC,GAA6B,IAAAC,EAAA,G,IAAA,IAAAC,EAAA,EAAAA,EAAAC,UAAAC,OAAAF,IAAc,CAAdD,EAAAC,EAAA,GAAAC,UAAAD,E,CACpF,GAAIH,EAAGM,OAASC,EAAaC,MAAO,CAClCR,EAAGU,iBACHT,EAAQU,WAAA,EAAIT,E,CAEhB,C,SAEgBW,EAAkBC,GAAA,GAAAA,SAAA,GAAAA,EAAA,IAA2B,CAC3D,IAAKA,EAAM,CACTA,EAAOC,SAASC,a,CAGlB,GAAIF,GAAQA,EAAKG,YAAcH,EAAKG,WAAWD,cAAe,CAC5DF,EAAOA,EAAKG,WAAWD,cAEvB,OAAOH,EAAkBC,E,CAG3B,OAAOA,CACT,C,SAEgBI,EAAeJ,EAAeK,GAAA,GAAAA,SAAA,GAAAA,EAAA,EAAoB,CAChEA,EAAKC,KAAKN,GAEV,GAAIA,EAAKO,cAAe,CACtBP,EAAOA,EAAKO,cAEZ,OAAOH,EAAeJ,EAAMK,E,MACvB,GAAIL,EAAKQ,YAAeR,EAAKQ,WAA0BC,KAAM,CAClET,EAAQA,EAAKQ,WAA0BC,KAEvC,OAAOL,EAAeJ,EAAMK,E,CAG9B,OAAOA,CACT,C,SAiBgBK,IACd,OAAQ,MACN,KAAKC,OAAOC,YAAcC,EACxB,OAAOC,EAAOC,OAChB,KAAKJ,OAAOC,YAAcI,EACxB,OAAOF,EAAOG,OAChB,KAAKN,OAAOC,YAAcM,EACxB,OAAOJ,EAAOK,QAChB,QACE,OAAOL,EAAOM,aAEpB,C,SAQgBC,EAAYC,GAC1B,IACE,OAAOC,KAAKC,MAAMF,E,CAClB,MAAAG,GACA,OAAO,K,CAEX,C,SAEgBC,EAAYC,GAC1B,IAAMC,EAAS,WACf,IAAMC,EAAc,GACpB,IAAMC,EAAOjD,KAAKkD,KAAKlD,KAAAmD,IAAA,EAAK,IAAK,GAAKC,WAAW,KAAAC,OAAKP,IACtD,IAAIQ,EAAQtD,KAAKkD,KAAKF,GAAeC,EAAO,IAI5C,GAAIK,IAAU,EAAG,CACfA,EAAQ,C,CAGV,MAAO,GAAAD,OAAGN,GAAMM,OAAGC,EAAMpD,WAAWqD,SAAS,EAAG,KAClD,C","ignoreList":[]}

package/www/build/p-22610d00.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as a,a as i,g as r}from"./p-cc3c02fe.js";import{s}from"./p-025f494e.js";import{m as n}from"./p-2c886e8b.js";import{H as o}from"./p-54b0b04e.js";const l=":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){-webkit-animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-right){-webkit-animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-down){-webkit-animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-up){-webkit-animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-left){-webkit-animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-right){-webkit-animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-down){-webkit-animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-up){-webkit-animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}:host>#external-container{display:-ms-flexbox;display:flex;min-height:52px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{-ms-flex-item-align:start;align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";const c=l;const h=class{constructor(a){t(this,a);this.toastClose=e(this,"toastClose",7);this.isCloseEventCalled=false;this.heading=undefined;this.message=undefined;this.closebutton=undefined;this.autoclose=undefined;this.pauseonfocusloss=true;this.type=undefined;this.isdraggable=true;this.draggablepercentage=80;this.transition=undefined;this.percentage=undefined}watchPropIsdraggable(t){if(t){this.sliderManager.get("pan").set({enable:true})}else{this.sliderManager.get("pan").set({enable:false})}}watchPropAutoclose(t){clearTimeout(this.timeoutHandle);this.startClosingTimeout(t)}watchPropPauseonfocusloss(t){if(this.autoclose){if(t){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}else{document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler)}}}emitToastClose(t){this.timeoutHandle=null;this.elapsedTime=null;this.hostElement.classList.add(t);this.toastClose.emit()}componentWillLoad(){this.isMobile=window.innerWidth<=n;this.validateAutoclose();this.percentage=0}componentDidLoad(){this.isTextLong=this.detectWrap()||this.toastText.offsetHeight>20;this.startTime=Date.now();if(this.autoclose&&this.pauseonfocusloss){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}this.isdraggable&&this.handleSlideOutDragAnimation()}visibilityChangeEventHandler(){if(document.visibilityState==="hidden"){this.timeoutHandle&&this.onBlur()}else{this.elapsedTime&&this.onFocus()}}validateAutoclose(){if(!this.autoclose&&!this.closebutton){console.error("At least one between autoclose and closebutton must be present")}}mapSlideOutClass(){switch(this.transition){case s.SLIDE_IN_DOWN:return s.SLIDE_OUT_UP;case s.SLIDE_IN_UP:return s.SLIDE_OUT_DOWN;case s.SLIDE_IN_LEFT:return s.SLIDE_OUT_RIGHT;case s.SLIDE_IN_RIGHT:return s.SLIDE_OUT_LEFT}}calculateDraggedPercentage(t){const e=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/e.width)}handleSlideOutDragAnimation(){this.sliderManager=new o(this.hostElement);this.sliderManager.get("pan").set({direction:o.DIRECTION_HORIZONTAL});this.sliderManager.on("pan",(t=>{this.percentage=this.calculateDraggedPercentage(t);this.hostElement.style.transition="none";this.hostElement.classList.remove(this.transition);const e={translate:`translateX(${this.percentage}%)`,translateBack:"translateX(0)"};this.hostElement.style.opacity=`${100-Math.abs(this.percentage)}%`;if(t.eventType===o.DIRECTION_LEFT||t.eventType===o.DIRECTION_RIGHT){this.hostElement.style.transform=e.translate;if(Math.abs(this.percentage)>this.draggablepercentage&&!this.isCloseEventCalled){this.isCloseEventCalled=true;this.emitToastClose(t.direction===o.DIRECTION_LEFT?"slide-out-left":"slide-out-right")}}if(t.isFinal&&Math.abs(this.percentage)<this.draggablepercentage){this.hostElement.style.transform=e.translateBack;this.hostElement.style.transition="all 1s";this.hostElement.style.opacity="100%";this.percentage=0}}))}onFocus(){let t=this.autoclose;if(this.elapsedTime){t=this.autoclose-this.elapsedTime}if(t>0){this.startClosingTimeout(t)}}onBlur(){this.elapsedTime=Date.now()-this.startTime;clearTimeout(this.timeoutHandle)}startClosingTimeout(t){this.timeoutHandle=window.setTimeout((()=>this.emitToastClose(this.mapSlideOutClass())),t)}detectWrap(){const t=this.container.offsetWidth;const e=this.container.children;let a=0;for(let t=0;t<e.length;t++){a+=e[t].offsetWidth}return a>t}renderText(){return a("div",{id:"text",ref:t=>this.toastText=t},a("span",{class:"title"},this.heading),a("span",{class:"message"},this.message))}renderButton(){return a("div",{id:"button"},a("slot",{name:"button"}))}renderCloseIcon(){if(!this.closebutton){return}return a("div",{id:"icon"},a("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:()=>this.emitToastClose(this.mapSlideOutClass()),onKeyPress:t=>{if(t.keyCode==32||t.keyCode==13){t.preventDefault();this.emitToastClose(this.mapSlideOutClass())}}}))}renderContainer(){return a("div",{tabIndex:0,id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong},ref:t=>this.container=t},this.renderText(),this.renderButton(),this.renderCloseIcon())}renderMobileContainer(){return a("div",{id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong,"mobile-wrapped":this.isTextLong}},a("div",{id:"flex-container",ref:t=>this.container=t},this.renderText(),this.renderButton()),this.renderCloseIcon())}render(){return a(i,{key:"bf20c69f253b702092fe078443eedb9e86fe223a",style:{"--percentuale":`${this.percentage}%`},class:this.transition?this.transition:s.SLIDE_IN_DOWN,onAnimationEnd:t=>{if(this.autoclose&&t.animationName.includes("slidein")){this.startClosingTimeout(this.autoclose)}if(t.animationName.includes("slideout")){this.hostElement.parentNode.removeChild(this.hostElement)}}},this.isMobile?this.renderMobileContainer():this.renderContainer())}get hostElement(){return r(this)}static get watchers(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}}};h.style=c;export{h as z_toast_notification};
+//# sourceMappingURL=p-22610d00.entry.js.map

package/www/build/p-22610d00.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToastNotificationStyle0","ZToastNotification","this","isCloseEventCalled","watchPropIsdraggable","newValue","sliderManager","get","set","enable","watchPropAutoclose","clearTimeout","timeoutHandle","startClosingTimeout","watchPropPauseonfocusloss","autoclose","document","addEventListener","visibilityChangeEventHandler","removeEventListener","emitToastClose","cssClass","elapsedTime","hostElement","classList","add","toastClose","emit","componentWillLoad","isMobile","window","innerWidth","mobileBreakpoint","validateAutoclose","percentage","componentDidLoad","isTextLong","detectWrap","toastText","offsetHeight","startTime","Date","now","pauseonfocusloss","isdraggable","handleSlideOutDragAnimation","visibilityState","onBlur","onFocus","closebutton","console","error","mapSlideOutClass","transition","ToastNotificationTransition","SLIDE_IN_DOWN","SLIDE_OUT_UP","SLIDE_IN_UP","SLIDE_OUT_DOWN","SLIDE_IN_LEFT","SLIDE_OUT_RIGHT","SLIDE_IN_RIGHT","SLIDE_OUT_LEFT","calculateDraggedPercentage","e","bounding","getBoundingClientRect","Math","round","deltaX","width","Hammer","direction","DIRECTION_HORIZONTAL","on","style","remove","translateObj","translate","translateBack","opacity","abs","eventType","DIRECTION_LEFT","DIRECTION_RIGHT","transform","draggablepercentage","isFinal","time","setTimeout","parentWidth","container","offsetWidth","children","totalWidth","i","length","renderText","h","id","ref","el","class","heading","message","renderButton","name","renderCloseIcon","tabIndex","height","onClick","onKeyPress","keyCode","preventDefault","renderContainer","type","renderMobileContainer","render","Host","key","onAnimationEnd","animationName","includes","parentNode","removeChild"],"sources":["src/components/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100vw;\n  min-width: 200px;\n\n  --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n  0% {\n    transform: translateX(100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinright {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinup {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideindown {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideoutleft {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slideoutright {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n}\n\n@keyframes slideoutup {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideoutdown {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n:host > #external-container {\n  display: flex;\n  min-height: 52px;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);\n  border-radius: 4px;\n  box-shadow: var(--shadow-3);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n  align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n\n:host > #external-container #text {\n  margin-right: calc(var(--space-unit) * 2);\n  color: var(--color-white);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host > #external-container #text > .title {\n  margin-right: 4px;\n  font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n  margin-left: calc(var(--space-unit) * 2);\n  cursor: pointer;\n  fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n  background: var(--gray800);\n}\n\n:host > #external-container.light {\n  background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n  fill: var(--color-primary01-icon);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n  color: var(--gray800);\n}\n\n:host > #external-container.accent {\n  background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n  background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n  background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n  background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    width: unset;\n    max-width: 50vw;\n  }\n\n  :host > #external-container > #flex-container {\n    flex-wrap: nowrap;\n  }\n\n  :host > #external-container #text {\n    width: 100%;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    width: unset;\n    max-width: 33vw;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-22b108f0.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-cc3c02fe.js";import{q as o}from"./p-025f494e.js";import{H as a}from"./p-54b0b04e.js";import{a as n}from"./p-955da62e.js";import"./p-2c886e8b.js";const r=":host{width:inherit;height:100%;margin:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:0;height:0}:host>div>div.background.open{width:100%;height:100%}:host>div>div.content-wrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.content-wrapper>div{margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);border-radius:var(--space-unit) var(--space-unit) 0 0;-webkit-box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%);box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%)}";const c=r;const d=class{constructor(i){t(this,i);this.pocketToggle=e(this,"pocketToggle",7);this.pocketid=undefined;this.status=o.PREVIEW}async open(){this.status=o.OPEN}async close(){this.status=o.CLOSED}emitPocketToggle(t,e){this.pocketToggle.emit({id:t,status:e})}handlePocketHeaderClick(t){if(t.detail.id&&t.detail.id===this.pocketid){switch(this.status){case o.PREVIEW:case o.CLOSED:this.status=o.OPEN;break;case o.OPEN:this.status=o.CLOSED;break}}}handlePocketHeaderPan(t){if(t.detail.id&&t.detail.id===this.pocketid){if(t.detail.direction==="up"){this.status=o.OPEN}else if(t.detail.direction==="down"){this.status=o.CLOSED}}}watchStatusHandler(t){this.emitPocketToggle(this.pocketid,t)}componentWillLoad(){this.emitPocketToggle(this.pocketid,this.status)}handleBackgroundClick(t){if(t.target.dataset.action=="pocketBackground"){this.close()}}render(){return i("div",{key:"45e8cd09d2390cda3ef219256245868d2c96a970"},i("div",{key:"3eb0f5af6a61188321d4258eaa8201f7ee24a607","data-action":"pocketBackground","data-pocket":this.pocketid,class:`background ${this.status}`,onClick:t=>this.handleBackgroundClick(t)}),i("div",{key:"453fc771bb812749b02687a4acf43eb60c8a32ec",id:this.pocketid,class:"content-wrapper"},i("div",{key:"d84500c28a276e0e30eb3eef88d8141dd047f290"},i("slot",{key:"dcd5b7827d6fc211ce38300af4aaa7efcbe71ef2"}))))}get hostElement(){return s(this)}static get watchers(){return{status:["watchStatusHandler"]}}};d.style=c;const h=":host{display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>main{overflow:auto;border-right:var(--border-size-small) solid var(--color-surface03);border-left:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);scrollbar-width:none}:host>main.preview{max-height:225px;-webkit-transition:all 200ms ease-in-out,\n    top 200ms ease-in-out;transition:all 200ms ease-in-out,\n    top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);-webkit-transition:all 200ms ease-in-out,\n    top 200ms ease-in-out;transition:all 200ms ease-in-out,\n    top 200ms ease-in-out}:host>main.closed{height:0;-webkit-transition:all 200ms ease-in-out,\n    top 200ms ease-in-out;transition:all 200ms ease-in-out,\n    top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";const l=h;const f=class{constructor(e){t(this,e);this.pocketid=undefined;this.status=o.PREVIEW}handlePocketToggle(t){if(t.detail.id&&t.detail.id===this.pocketid){this.status=t.detail.status}}render(){return i("main",{key:"b617d3b45b165732ac7f354c52e789b141eef47a",class:this.status},i("slot",{key:"bfed72b7529e4ee7f05e929d332a5913f46445bf"}))}};f.style=l;const b=":host{display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>header{display:-ms-flexbox;display:flex;height:36px;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);border-radius:var(--space-unit) var(--space-unit) 0 0;cursor:pointer}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";const p=b;const u=class{emitPocketHeaderClick(){this.pocketHeaderClick.emit({id:this.pocketid})}emitPocketHeaderPan(t){this.pocketHeaderPan.emit({id:this.pocketid,direction:t})}constructor(i){t(this,i);this.pocketHeaderClick=e(this,"pocketHeaderClick",7);this.pocketHeaderPan=e(this,"pocketHeaderPan",7);this.pocketid=undefined;this.emitPocketHeaderClick=this.emitPocketHeaderClick.bind(this)}componentDidLoad(){const t=new a(this.swipeWrap);t.get("pan").set({direction:a.DIRECTION_VERTICAL});t.on("panup",(()=>this.emitPocketHeaderPan("up")));t.on("pandown",(()=>this.emitPocketHeaderPan("down")))}render(){return i("header",{key:"e7f1ed78dd4b33c701d5bd0f648c9401d8a38313",role:"button",tabindex:0,onClick:()=>this.emitPocketHeaderClick(),onKeyPress:t=>n(t,this.emitPocketHeaderClick),ref:t=>this.swipeWrap=t},i("slot",{key:"1d8bb012ac6dcdf3337d0c70df59b3b098e9de56"}))}};u.style=p;export{d as z_pocket,f as z_pocket_body,u as z_pocket_header};
+//# sourceMappingURL=p-22b108f0.entry.js.map

package/www/build/p-22b108f0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZPocketStyle0","ZPocket","PocketStatus","PREVIEW","open","this","status","OPEN","close","CLOSED","emitPocketToggle","id","pocketToggle","emit","handlePocketHeaderClick","e","detail","pocketid","handlePocketHeaderPan","direction","watchStatusHandler","newVal","componentWillLoad","handleBackgroundClick","target","dataset","action","render","h","key","class","onClick","ZPocketBodyStyle0","ZPocketBody","handlePocketToggle","ZPocketHeaderStyle0","ZPocketHeader","emitPocketHeaderClick","pocketHeaderClick","emitPocketHeaderPan","pocketHeaderPan","constructor","hostRef","bind","componentDidLoad","mc","Hammer","swipeWrap","get","set","DIRECTION_VERTICAL","on","role","tabindex","onKeyPress","ev","handleKeyboardSubmit","ref","el"],"sources":["src/snowflakes/myz/pocket/z-pocket/styles.css?tag=z-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket/index.tsx","src/snowflakes/myz/pocket/z-pocket-body/styles.css?tag=z-pocket-body&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-body/index.tsx","src/snowflakes/myz/pocket/z-pocket-header/styles.css?tag=z-pocket-header&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-header/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  height: 100%;\n  margin: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  width: inherit;\n  height: 100%;\n  margin: inherit;\n}\n\n:host > div > div.background {\n  position: fixed;\n  z-index: 998;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\n:host > div > div.background.open {\n  width: 100%;\n  height: 100%;\n}\n\n:host > div > div.content-wrapper {\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  left: 0;\n  width: inherit;\n  margin: inherit;\n}\n\n:host > div > div.content-wrapper > div {\n  margin: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);\n  border-radius: var(--space-unit) var(--space-unit) 0 0;\n  box-shadow: 0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%);\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch, h} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot - pocket content\n */\n@Component({\n  tag: \"z-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocket {\n  @Element() hostElement: HTMLZPocketElement;\n\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  /** open z-pocket */\n  @Method()\n  async open(): Promise<void> {\n    this.status = PocketStatus.OPEN;\n  }\n\n  /** close z-pocket */\n  @Method()\n  async close(): Promise<void> {\n    this.status = PocketStatus.CLOSED;\n  }\n\n  /** Emitted on pocket toggle, returns pocket id and status */\n  @Event()\n  pocketToggle: EventEmitter;\n\n  private emitPocketToggle(id: string, status: PocketStatus): void {\n    this.pocketToggle.emit({id, status});\n  }\n\n  @Listen(\"pocketHeaderClick\")\n  handlePocketHeaderClick(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      switch (this.status) {\n        case PocketStatus.PREVIEW:\n        case PocketStatus.CLOSED:\n          this.status = PocketStatus.OPEN;\n          break;\n        case PocketStatus.OPEN:\n          this.status = PocketStatus.CLOSED;\n          break;\n      }\n    }\n  }\n\n  @Listen(\"pocketHeaderPan\")\n  handlePocketHeaderPan(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      if (e.detail.direction === \"up\") {\n        this.status = PocketStatus.OPEN;\n      } else if (e.detail.direction === \"down\") {\n        this.status = PocketStatus.CLOSED;\n      }\n    }\n  }\n\n  @Watch(\"status\")\n  watchStatusHandler(newVal: PocketStatus): void {\n    this.emitPocketToggle(this.pocketid, newVal);\n  }\n\n  componentWillLoad(): void {\n    this.emitPocketToggle(this.pocketid, this.status);\n  }\n\n  private handleBackgroundClick(e: MouseEvent): void {\n    if ((e.target as HTMLElement).dataset.action == \"pocketBackground\") {\n      this.close();\n    }\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <div\n          data-action=\"pocketBackground\"\n          data-pocket={this.pocketid}\n          class={`background ${this.status}`}\n          onClick={(e: MouseEvent) => this.handleBackgroundClick(e)}\n        />\n        <div\n          id={this.pocketid}\n          class=\"content-wrapper\"\n        >\n          <div>\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > main {\n  overflow: auto;\n  border-right: var(--border-size-small) solid var(--color-surface03);\n  border-left: var(--border-size-small) solid var(--color-surface03);\n  background: var(--color-surface01);\n  scrollbar-width: none;\n}\n\n:host > main.preview {\n  max-height: 225px;\n  transition:\n    all 200ms ease-in-out,\n    top 200ms ease-in-out;\n}\n\n:host > main.open {\n  max-height: calc(100vh - 48px);\n  transition:\n    all 200ms ease-in-out,\n    top 200ms ease-in-out;\n}\n\n:host > main.closed {\n  height: 0;\n  transition:\n    all 200ms ease-in-out,\n    top 200ms ease-in-out;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > main.preview {\n    max-height: 157px;\n  }\n}\n","import {Component, Listen, Prop, h} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-pocket-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketBody {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  render(): HTMLElement {\n    return (\n      <main class={this.status}>\n        <slot />\n      </main>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > header {\n  display: flex;\n  height: 36px;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background: var(--color-surface01);\n  border-radius: var(--space-unit) var(--space-unit) 0 0;\n  cursor: pointer;\n}\n\n:host > header:focus {\n  outline: none;\n}\n\n:host > header::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport Hammer from \"hammerjs\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - pocket header content\n */\n@Component({\n  tag: \"z-pocket-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketHeader {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  private swipeWrap: HTMLElement;\n\n  /** Emitted on pocket header click */\n  @Event()\n  pocketHeaderClick: EventEmitter;\n\n  private emitPocketHeaderClick(): void {\n    this.pocketHeaderClick.emit({id: this.pocketid});\n  }\n\n  /** Emitted on pocket header pan */\n  @Event()\n  pocketHeaderPan: EventEmitter;\n\n  private emitPocketHeaderPan(direction: string): void {\n    this.pocketHeaderPan.emit({id: this.pocketid, direction});\n  }\n\n  constructor() {\n    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);\n  }\n\n  componentDidLoad(): void {\n    // INFO: swipe handling\n    const mc = new Hammer(this.swipeWrap);\n    mc.get(\"pan\").set({direction: Hammer.DIRECTION_VERTICAL});\n    mc.on(\"panup\", () => this.emitPocketHeaderPan(\"up\"));\n    mc.on(\"pandown\", () => this.emitPocketHeaderPan(\"down\"));\n  }\n\n  render(): HTMLElement {\n    return (\n      <header\n        role=\"button\"\n        tabindex={0}\n        onClick={() => this.emitPocketHeaderClick()}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick)}\n        ref={(el) => (this.swipeWrap = el as HTMLElement)}\n      >\n        <slot />\n      </header>\n    );\n  }\n}\n"],"mappings":"6LAAA,MAAMA,EAAY,ivBAClB,MAAAC,EAAeD,E,MCUFE,EAAO,M,wGASKC,EAAaC,O,CAIpC,UAAMC,GACJC,KAAKC,OAASJ,EAAaK,I,CAK7B,WAAMC,GACJH,KAAKC,OAASJ,EAAaO,M,CAOrB,gBAAAC,CAAiBC,EAAYL,GACnCD,KAAKO,aAAaC,KAAK,CAACF,KAAIL,U,CAI9B,uBAAAQ,CAAwBC,GACtB,GAAIA,EAAEC,OAAOL,IAAMI,EAAEC,OAAOL,KAAON,KAAKY,SAAU,CAChD,OAAQZ,KAAKC,QACX,KAAKJ,EAAaC,QAClB,KAAKD,EAAaO,OAChBJ,KAAKC,OAASJ,EAAaK,KAC3B,MACF,KAAKL,EAAaK,KAChBF,KAAKC,OAASJ,EAAaO,OAC3B,M,EAMR,qBAAAS,CAAsBH,GACpB,GAAIA,EAAEC,OAAOL,IAAMI,EAAEC,OAAOL,KAAON,KAAKY,SAAU,CAChD,GAAIF,EAAEC,OAAOG,YAAc,KAAM,CAC/Bd,KAAKC,OAASJ,EAAaK,I,MACtB,GAAIQ,EAAEC,OAAOG,YAAc,OAAQ,CACxCd,KAAKC,OAASJ,EAAaO,M,GAMjC,kBAAAW,CAAmBC,GACjBhB,KAAKK,iBAAiBL,KAAKY,SAAUI,E,CAGvC,iBAAAC,GACEjB,KAAKK,iBAAiBL,KAAKY,SAAUZ,KAAKC,O,CAGpC,qBAAAiB,CAAsBR,GAC5B,GAAKA,EAAES,OAAuBC,QAAQC,QAAU,mBAAoB,CAClErB,KAAKG,O,EAIT,MAAAmB,GACE,OACEC,EAAA,OAAAC,IAAA,4CACED,EAAA,OAAAC,IAAA,yDACc,mBAAkB,cACjBxB,KAAKY,SAClBa,MAAO,cAAczB,KAAKC,SAC1ByB,QAAUhB,GAAkBV,KAAKkB,sBAAsBR,KAEzDa,EAAA,OAAAC,IAAA,2CACElB,GAAIN,KAAKY,SACTa,MAAM,mBAENF,EAAA,OAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,+C,0GCjGZ,MAAM9B,EAAY,88BAClB,MAAAiC,EAAejC,E,MCUFkC,EAAW,M,6DAOC/B,EAAaC,O,CAGpC,kBAAA+B,CAAmBnB,GACjB,GAAIA,EAAEC,OAAOL,IAAMI,EAAEC,OAAOL,KAAON,KAAKY,SAAU,CAChDZ,KAAKC,OAASS,EAAEC,OAAOV,M,EAI3B,MAAAqB,GACE,OACEC,EAAA,QAAAC,IAAA,2CAAMC,MAAOzB,KAAKC,QAChBsB,EAAA,QAAAC,IAAA,6C,aC9BR,MAAM9B,EAAY,8jBAClB,MAAAoC,EAAepC,E,MCWFqC,EAAa,MAWhB,qBAAAC,GACNhC,KAAKiC,kBAAkBzB,KAAK,CAACF,GAAIN,KAAKY,U,CAOhC,mBAAAsB,CAAoBpB,GAC1Bd,KAAKmC,gBAAgB3B,KAAK,CAACF,GAAIN,KAAKY,SAAUE,a,CAGhD,WAAAsB,CAAAC,G,wIACErC,KAAKgC,sBAAwBhC,KAAKgC,sBAAsBM,KAAKtC,K,CAG/D,gBAAAuC,GAEE,MAAMC,EAAK,IAAIC,EAAOzC,KAAK0C,WAC3BF,EAAGG,IAAI,OAAOC,IAAI,CAAC9B,UAAW2B,EAAOI,qBACrCL,EAAGM,GAAG,SAAS,IAAM9C,KAAKkC,oBAAoB,QAC9CM,EAAGM,GAAG,WAAW,IAAM9C,KAAKkC,oBAAoB,S,CAGlD,MAAAZ,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEuB,KAAK,SACLC,SAAU,EACVtB,QAAS,IAAM1B,KAAKgC,wBACpBiB,WAAaC,GAAsBC,EAAqBD,EAAIlD,KAAKgC,uBACjEoB,IAAMC,GAAQrD,KAAK0C,UAAYW,GAE/B9B,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/www/build/p-254c85c4.entry.js

@@ -0,0 +1,2 @@
+import{r,c as t,h as o}from"./p-cc3c02fe.js";import{t as i}from"./p-2c886e8b.js";const s="button{display:-ms-flexbox;display:flex;max-width:100%;height:36px;-ms-flex-align:center;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{border-color:var(--color-primary01);-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button.selected{border-color:var(--color-active-primary);background-color:var(--color-active-primary);color:var(--color-text-inverse);fill:var(--color-text-inverse)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}";const a=s;const e=class{constructor(o){r(this,o);this.buttonSortClick=t(this,"buttonSortClick",7);this.buttonid=undefined;this.label=undefined;this.desclabel=undefined;this.counter=undefined;this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>i){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return o("button",{key:"ec1021febf46cd3a012af1142e74157e16e6b363",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},o("span",{key:"84013f6114589408dc62323285a1441c94fc9ddf",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),o("span",{key:"bc938175d5453e7c59f577b92452d63658417e0a",class:"counter"},this.counter&&` (${this.counter})`),o("span",{key:"10fba0801dcbc47569e79c81179d7a485dc3582e",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),o("z-icon",{key:"51035628c557620d4681db63a6a1b6080b57275a",name:"caret-up-down",width:16,height:16}))}};e.style=a;export{e as z_button_sort};
+//# sourceMappingURL=p-254c85c4.entry.js.map

package/www/build/p-254c85c4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZButtonSortStyle0","ZButtonSort","emitButtonSortClick","this","isselected","sortasc","buttonSortClick","emit","buttonid","sortAsc","componentDidLoad","elementHasEllipsis","window","innerWidth","tabletBreakpoint","allowTooltip","setButtonTitle","label","desclabel","ellipsis","offsetWidth","scrollWidth","render","h","key","title","id","class","selected","onClick","ref","el","counter","sortlabelasc","sortlabeldesc","name","width","height"],"sources":["src/components/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton.selected {\n  border-color: var(--color-active-primary);\n  background-color: var(--color-active-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {tabletBreakpoint} from \"../../constants/breakpoints\";\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,6hDAClB,MAAAC,EAAeD,E,MCMFE,EAAW,M,yLAmBE,M,mBAIC,M,gBAIF,M,aAIH,K,kBAGL,K,CAQP,mBAAAC,GACN,IAAKC,KAAKC,WAAY,CACpBD,KAAKC,WAAa,I,KACb,CACLD,KAAKE,SAAWF,KAAKE,O,CAEvBF,KAAKG,gBAAgBC,KAAK,CACxBC,SAAUL,KAAKK,SACfC,QAASN,KAAKE,S,CAIlB,gBAAAK,GACE,GAAIP,KAAKQ,sBAAwBC,OAAOC,WAAaC,EAAkB,CACrEX,KAAKY,aAAe,I,EAIhB,cAAAC,GACN,OAAOb,KAAKY,aAAe,GAAGZ,KAAKE,QAAUF,KAAKc,MAAQd,KAAKe,YAAc,E,CAGvE,kBAAAP,GACN,OAAOR,KAAKgB,SAASC,YAAcjB,KAAKgB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAOtB,KAAKa,iBACZU,GAAIvB,KAAKK,SACTmB,MAAO,CAACC,SAAUzB,KAAKC,YACvByB,QAAS,IAAM1B,KAAKD,uBAEpBqB,EAAA,QAAAC,IAAA,2CACEM,IAAMC,GAAQ5B,KAAKgB,SAAWY,EAC9BJ,MAAM,aAEJxB,KAAKE,SAAWF,KAAKe,UAAYf,KAAKe,UAAYf,KAAKc,OAE3DM,EAAA,QAAAC,IAAA,2CAAMG,MAAM,WAAWxB,KAAK6B,SAAW,KAAK7B,KAAK6B,YACjDT,EAAA,QAAAC,IAAA,2CAAMG,MAAM,QAAQxB,KAAKE,QAAUF,KAAK8B,aAAe9B,KAAK+B,eAC5DX,EAAA,UAAAC,IAAA,2CACEW,KAAK,gBACLC,MAAO,GACPC,OAAQ,K","ignoreList":[]}

package/www/build/p-2737e3dd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,g as i}from"./p-cc3c02fe.js";import{L as o}from"./p-025f494e.js";const a='footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);-webkit-transition:height 500ms ease-in-out,\n    top 500ms ease-in-out;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--blue100)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;-webkit-transition:all 200ms linear;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);-webkit-transition:all 200ms linear;transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--blue100)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;-ms-flex-direction:column;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;-webkit-transition:height 500ms ease-in-out,\n    top 500ms ease-in-out;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;-webkit-transition:height 500ms ease-in-out,\n    top 500ms ease-in-out;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot="content"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot="content"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--blue100)}';const s=a;const n=class{constructor(t){e(this,t);this.titolo=undefined;this.autori=undefined;this.isbn=undefined;this.faded=undefined;this.cardtype=undefined;this.opened=false;this.customContent=false;this.isOpen=false;this.allowTooltipAuthors=false}handleToggle(){this.isOpen=!this.isOpen;if(this.isOpen){const e=this.getFirstListItem();if(e){requestAnimationFrame((()=>{e.focus()}))}}}getTitleAuthors(){return this.allowTooltipAuthors?this.autori:""}componentWillLoad(){if(this.opened){this.isOpen=true}}elementsEllipsis(){this.allowTooltipAuthors=this.elementAuthorsHasEllipsis()?true:false}elementAuthorsHasEllipsis(){return this.ellipsisAuthors.offsetWidth<this.ellipsisAuthors.scrollWidth}retrieveClass(){return{isopen:this.isOpen,real:this.cardtype===o.REAL,trial:this.cardtype===o.TRIAL,temp:this.cardtype===o.TEMP,"custom-content":this.customContent}}footerTransitionHandler(e){if(["visibility","height"].includes(e.propertyName)){this.elementsEllipsis()}}getFirstListItem(){return this.host.querySelector("[slot=list] > li a")}render(){return t("div",{key:"e5711063557dce84367650a81a3313e4d4755ca7",class:Object.assign(Object.assign({},this.retrieveClass()),{wrapper:true})},t("footer",{key:"81fe8ba76037d6aabf6a34123ef7e16b9fdcf6bf",class:this.retrieveClass(),onTransitionEnd:e=>this.footerTransitionHandler(e)},t("span",{key:"fe8a8eb5e9668ef98052aa77ea006e36e1da4362",class:"toggle"},t("slot",{key:"1b31d051074a5c49783adced5ab8a08ffce34c2c",name:"toggle"})),this.titolo&&t("p",{key:"fd5184ba3211dcaec0fbbada7e66c2424e8683a1",class:{"custom-content":this.customContent}},this.titolo),t("div",{key:"eb56f5377d285fa66090865f3750267827a55b30",class:{content:true,"custom-content":this.customContent}},t("div",{key:"73df88cb7871a4aeb47414cdfb2c248f4cae0454"},t("p",{key:"bcee7b1836e87540bb9ea7a0dae9b20717acb84b",class:"authors",ref:e=>this.ellipsisAuthors=e},t("span",{key:"1a2741b228850ea9b438e2d0d3bbe161f1c58223",title:this.getTitleAuthors()},t("span",{key:"78e8afea170e944a119670a1f3ff35d9b1e68cca","aria-description":"Autori",class:"bold"},this.autori))),t("p",{key:"46339663289bca4d4c0d18f5a8a1e5c7f967a2c7",class:"year-isbn"},t("span",{key:"885b4e716717a5e7faf0b2cdd0eb0a120c6b02a5",class:"isbn"},t("span",{key:"8eb8fe819c2208bcd85a4ff75bcea45d126bbcfd"},t("span",{key:"adce63e9a8982d61692c899da383374914db342d","aria-description":"ISBN edizione cartacea",class:"bold"},this.isbn)," ","(ed. cartacea)")))),t("div",{key:"b36ed0288ce7e14a3c8770cd097f712440d10c5b",class:`slot-handler ${this.isOpen?"visible":"hidden"}`},t("slot",{key:"f7eca7603fd10d49a68f7c41505d50ee185e206f",name:"list"})))),this.customContent&&t("slot",{key:"4f80af2d5fe5bba71f5d1704f4816aa395effe88",name:"content"}))}get host(){return i(this)}};n.style=s;export{n as z_myz_card_footer};
+//# sourceMappingURL=p-2737e3dd.entry.js.map

package/www/build/p-2737e3dd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardFooterStyle0","ZMyzCardFooter","handleToggle","this","isOpen","firstElem","getFirstListItem","requestAnimationFrame","focus","getTitleAuthors","allowTooltipAuthors","autori","componentWillLoad","opened","elementsEllipsis","elementAuthorsHasEllipsis","ellipsisAuthors","offsetWidth","scrollWidth","retrieveClass","isopen","real","cardtype","LicenseType","REAL","trial","TRIAL","temp","TEMP","customContent","footerTransitionHandler","e","includes","propertyName","host","querySelector","render","h","key","class","Object","assign","wrapper","onTransitionEnd","name","titolo","content","ref","el","title","isbn"],"sources":["src/snowflakes/myz/card/z-myz-card-footer/styles.css?tag=z-myz-card-footer&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer/index.tsx"],"sourcesContent":["footer {\n  position: relative;\n  z-index: 5;\n  top: 0;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  padding: 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  transition:\n    height 500ms ease-in-out,\n    top 500ms ease-in-out;\n}\n\nfooter.real,\nfooter.trial,\nfooter.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n}\n\nfooter .bold {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-sb);\n}\n\nfooter > p {\n  overflow: hidden;\n  height: 40px;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);\n  margin: 0;\n  background-color: var(--color-surface01);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  line-height: 22px;\n  transition: all 200ms linear;\n}\n\nfooter.isopen > p {\n  background-color: var(--gray200);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  transition: all 200ms linear;\n}\n\nfooter.isopen.real > p,\nfooter.isopen.trial > p,\nfooter.isopen.temp > p {\n  background-color: var(--blue100);\n}\n\nfooter .visible {\n  display: block;\n}\n\nfooter .hidden {\n  display: none;\n}\n\nfooter > div.content {\n  overflow: hidden;\n  height: 60px;\n}\n\nfooter > div.content > div:not(.slot-handler) {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nfooter > div.content > div > p {\n  overflow: hidden;\n  height: 20px;\n  padding: 0;\n  margin: 0;\n  font-size: 14px;\n  line-height: 20px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nfooter > div.content > div > p.year-isbn {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: var(--space-unit);\n}\n\nfooter > div.content > div > p.year-isbn > span.isbn {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nfooter.isopen > div.content > div:not(.slot-handler) {\n  height: 68px;\n}\n\nfooter.isopen > div.content > div > p.authors {\n  height: 40px;\n  text-overflow: initial;\n  white-space: initial;\n}\n\nfooter.isopen > div.content > div > p.year-isbn {\n  height: 50px;\n  flex-direction: column;\n  padding-left: 0;\n}\n\nfooter.isopen > div.content > div > p.year-isbn > span.isbn {\n  display: inline-grid;\n  padding-left: 0;\n}\n\nfooter.isopen {\n  top: -212px;\n  height: 295px;\n  transition:\n    height 500ms ease-in-out,\n    top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content {\n  top: -292px;\n}\n\nfooter.isopen > div.content {\n  height: 280px;\n  transition:\n    height 500ms ease-in-out,\n    top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content > div.content {\n  height: 230px;\n}\n\n.toggle {\n  position: absolute;\n  z-index: 10;\n  top: -24px;\n  left: 16px;\n}\n\n.faded {\n  opacity: 0.3;\n  pointer-events: none;\n}\n\nfooter > p.custom-content,\nfooter .content.custom-content {\n  display: none;\n}\n\nfooter.isopen > p.custom-content,\nfooter.isopen .content.custom-content {\n  display: block;\n}\n\ndiv.wrapper {\n  position: relative;\n  height: 100%;\n}\n\ndiv.wrapper ::slotted([slot=\"content\"]) {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  display: block;\n  width: 100%;\n  height: 112px;\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 2);\n  border-top: var(--border-size-medium) solid transparent;\n  background: var(--color-white);\n}\n\ndiv.wrapper.isopen ::slotted([slot=\"content\"]) {\n  top: 0;\n  bottom: 0;\n  height: 128px;\n  padding: calc(var(--space-unit) * 2);\n  border-color: var(--blue100);\n}\n","import {Component, Element, Listen, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot toggle - toggle button slot\n * @slot list - card resources list slot\n */\n@Component({\n  tag: \"z-myz-card-footer\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooter {\n  @Element() host: HTMLZMyzCardFooterElement;\n\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** authors name text */\n  @Prop()\n  autori: string;\n\n  /** volume isbn */\n  @Prop()\n  isbn: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** footer opened by default (optional) */\n  @Prop()\n  opened?: boolean = false;\n\n  /** display footer custom slotted content */\n  @Prop()\n  customContent = false;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  allowTooltipAuthors = false;\n\n  private ellipsisAuthors?: HTMLElement;\n\n  @Listen(\"toggleClick\")\n  handleToggle(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      const firstElem = this.getFirstListItem();\n      if (firstElem) {\n        requestAnimationFrame(() => {\n          firstElem.focus();\n        });\n      }\n    }\n  }\n\n  private getTitleAuthors(): string {\n    return this.allowTooltipAuthors ? this.autori : \"\";\n  }\n\n  componentWillLoad(): void {\n    if (this.opened) {\n      this.isOpen = true;\n    }\n  }\n\n  private elementsEllipsis(): void {\n    this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;\n  }\n\n  private elementAuthorsHasEllipsis(): boolean {\n    return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      \"isopen\": this.isOpen,\n      \"real\": this.cardtype === LicenseType.REAL,\n      \"trial\": this.cardtype === LicenseType.TRIAL,\n      \"temp\": this.cardtype === LicenseType.TEMP,\n      \"custom-content\": this.customContent,\n    };\n  }\n\n  private footerTransitionHandler(e: TransitionEvent): void {\n    if ([\"visibility\", \"height\"].includes(e.propertyName)) {\n      this.elementsEllipsis();\n    }\n  }\n\n  private getFirstListItem(): HTMLElement {\n    return this.host.querySelector(\"[slot=list] > li a\");\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={{...(this.retrieveClass() as Record<string, boolean>), wrapper: true}}>\n        <footer\n          class={this.retrieveClass()}\n          onTransitionEnd={(e: TransitionEvent) => this.footerTransitionHandler(e)}\n        >\n          <span class=\"toggle\">\n            <slot name=\"toggle\" />\n          </span>\n          {this.titolo && <p class={{\"custom-content\": this.customContent}}>{this.titolo}</p>}\n          <div class={{\"content\": true, \"custom-content\": this.customContent}}>\n            <div>\n              <p\n                class=\"authors\"\n                ref={(el) => (this.ellipsisAuthors = el as HTMLElement)}\n              >\n                <span title={this.getTitleAuthors()}>\n                  <span\n                    aria-description=\"Autori\"\n                    class=\"bold\"\n                  >\n                    {this.autori}\n                  </span>\n                </span>\n              </p>\n              <p class=\"year-isbn\">\n                <span class=\"isbn\">\n                  <span>\n                    <span\n                      aria-description=\"ISBN edizione cartacea\"\n                      class=\"bold\"\n                    >\n                      {this.isbn}\n                    </span>{\" \"}\n                    (ed. cartacea)\n                  </span>\n                </span>\n              </p>\n            </div>\n            <div class={`slot-handler ${this.isOpen ? \"visible\" : \"hidden\"}`}>\n              <slot name=\"list\" />\n            </div>\n          </div>\n        </footer>\n        {this.customContent && <slot name=\"content\" />}\n      </div>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,s3GAClB,MAAAC,EAAeD,E,MCYFE,EAAc,M,kJAyBN,M,mBAIH,M,YAGP,M,yBAGa,K,CAKtB,YAAAC,GACEC,KAAKC,QAAUD,KAAKC,OACpB,GAAID,KAAKC,OAAQ,CACf,MAAMC,EAAYF,KAAKG,mBACvB,GAAID,EAAW,CACbE,uBAAsB,KACpBF,EAAUG,OAAO,G,GAMjB,eAAAC,GACN,OAAON,KAAKO,oBAAsBP,KAAKQ,OAAS,E,CAGlD,iBAAAC,GACE,GAAIT,KAAKU,OAAQ,CACfV,KAAKC,OAAS,I,EAIV,gBAAAU,GACNX,KAAKO,oBAAsBP,KAAKY,4BAA8B,KAAO,K,CAG/D,yBAAAA,GACN,OAAOZ,KAAKa,gBAAgBC,YAAcd,KAAKa,gBAAgBE,W,CAGzD,aAAAC,GACN,MAAO,CACLC,OAAUjB,KAAKC,OACfiB,KAAQlB,KAAKmB,WAAaC,EAAYC,KACtCC,MAAStB,KAAKmB,WAAaC,EAAYG,MACvCC,KAAQxB,KAAKmB,WAAaC,EAAYK,KACtC,iBAAkBzB,KAAK0B,c,CAInB,uBAAAC,CAAwBC,GAC9B,GAAI,CAAC,aAAc,UAAUC,SAASD,EAAEE,cAAe,CACrD9B,KAAKW,kB,EAID,gBAAAR,GACN,OAAOH,KAAK+B,KAAKC,cAAc,qB,CAGjC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAOtC,KAAKgB,iBAA2C,CAAEuB,QAAS,QAC1EL,EAAA,UAAAC,IAAA,2CACEC,MAAOpC,KAAKgB,gBACZwB,gBAAkBZ,GAAuB5B,KAAK2B,wBAAwBC,IAEtEM,EAAA,QAAAC,IAAA,2CAAMC,MAAM,UACVF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,YAEZzC,KAAK0C,QAAUR,EAAA,KAAAC,IAAA,2CAAGC,MAAO,CAAC,iBAAkBpC,KAAK0B,gBAAiB1B,KAAK0C,QACxER,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAACO,QAAW,KAAM,iBAAkB3C,KAAK0B,gBACnDQ,EAAA,OAAAC,IAAA,4CACED,EAAA,KAAAC,IAAA,2CACEC,MAAM,UACNQ,IAAMC,GAAQ7C,KAAKa,gBAAkBgC,GAErCX,EAAA,QAAAC,IAAA,2CAAMW,MAAO9C,KAAKM,mBAChB4B,EAAA,QAAAC,IAAA,8DACmB,SACjBC,MAAM,QAELpC,KAAKQ,UAIZ0B,EAAA,KAAAC,IAAA,2CAAGC,MAAM,aACPF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,QACVF,EAAA,QAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,8DACmB,yBACjBC,MAAM,QAELpC,KAAK+C,MACA,IAAG,qBAMnBb,EAAA,OAAAC,IAAA,2CAAKC,MAAO,gBAAgBpC,KAAKC,OAAS,UAAY,YACpDiC,EAAA,QAAAC,IAAA,2CAAMM,KAAK,YAIhBzC,KAAK0B,eAAiBQ,EAAA,QAAAC,IAAA,2CAAMM,KAAK,Y","ignoreList":[]}

package/www/build/p-28dfd13f.system.entry.js

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

package/www/build/p-28dfd13f.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","exports","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","class_1","prototype","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","__spreadArray","length","maxNodesToShow","splice","i","text","truncateChar","_a","push","apply","_b","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","_this","h","class","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","popoverEllipsisOpen","onMouseOver","onMouseLeave","render","Host","style","concat","overflowMenuItemRows","semibold","pathStyle","SEMIBOLD","underlined"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-link-primary);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-link-primary);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-surface02);\n  --z-popover-padding: 0;\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n      this.hasOverflow = true;\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-29a1577c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,a as e,g as o}from"./p-cc3c02fe.js";import{R as r,U as a,B as n}from"./p-025f494e.js";const l=':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([single]) .z-carousel-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%}.z-carousel-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-direction:row;flex-direction:row;margin:0;-webkit-box-shadow:var(--z-carousel-items-shadow, none);box-shadow:var(--z-carousel-items-shadow, none);-webkit-column-gap:var(--z-carousel-gutter);-moz-column-gap:var(--z-carousel-gutter);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;-webkit-padding-start:0;padding-inline-start:0;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;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%;-webkit-transform:translateY(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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:calc(var(--space-unit) * 3);-moz-column-gap:calc(var(--space-unit) * 3);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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.z-carousel-footer .dots-progress{-webkit-column-gap:calc(var(--space-unit) * 3);-moz-column-gap:calc(var(--space-unit) * 3);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:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);-ms-flex-align:center;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{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{-webkit-column-gap:calc(var(--space-unit) / 2);-moz-column-gap:calc(var(--space-unit) / 2);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:-ms-flexbox;display:flex}}';const c=l;const h=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("role","group");t.setAttribute("aria-roledescription","slide")}))}componentDidLoad(){var t;(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));this.resizeObserver.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",role:"group","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"]}}};h.style=c;export{h as z_carousel};
+//# sourceMappingURL=p-29a1577c.entry.js.map

package/www/build/p-29a1577c.entry.js.map

@@ -0,0 +1 @@
+{"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","disconnectedCallback","disconnect","render","isLoading","h","class","label","style","height","ghostLoadingHeight","Host","role","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(\"role\", \"group\");\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          role=\"group\"\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/www/build/p-2a374812.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_td}from"./p-65ff940e.js";import"./p-cc3c02fe.js";import"./p-025f494e.js";
+//# sourceMappingURL=p-2a374812.entry.js.map

package/www/build/p-2a374812.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/www/build/p-2bf1edba.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as s}from"./p-cc3c02fe.js";import{I as o,e as r,i as a,g as n,l as h}from"./p-025f494e.js";import{r as d,a as l}from"./p-955da62e.js";import"./p-2c886e8b.js";const c=':host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:-ms-flexbox;display:flex;min-height:42px;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);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([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{-webkit-box-shadow:none;box-shadow:none}:host>div>div.header:focus:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-default-text)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-default-icon);-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 200ms linear;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-primary01);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-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-default-icon);-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}: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 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;-webkit-box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%);box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}: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);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);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.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);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=c;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)}watchCheckboxes(){this.checkboxes.forEach(((t,i)=>t.setAttribute("tabindex",i===0?"0":"-1")))}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){t(this,e);this.comboboxChange=i(this,"comboboxChange",7);this.itemsList=[];this.inputType=o.TEXT;this.inputid=`combo-${d()}`;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.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=r.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];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}componentDidRender(){const t=this.getAllCheckboxes();if(JSON.stringify(t)!==JSON.stringify(this.checkboxes)){this.checkboxes=t}}getItemId(t){return`combo-checkbox-${this.inputid}-${t.id}`}getCheckboxClass(){return`combo-item-checkbox-input-${this.inputid}`}getAllCheckboxes(){return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`))}getControlToListSize(){switch(this.size){case r.X_SMALL:return a.SMALL;case r.SMALL:return a.MEDIUM;default:return a.LARGE}}handleSelectArrowsNavigation(t,i){if(![n.ARROW_DOWN,n.ARROW_UP].includes(t.key)||!this.isopen){return}t.preventDefault();t.stopPropagation();const e=this.element.shadowRoot.querySelector(`#${i}`);if(!e){return}const s=this.checkboxes;if(!s.length){return}const o=s.indexOf(e);const r=0;const a=s.length-1;let h=null;if(t.key===n.ARROW_DOWN){h=o===a?s[r]:s[o+1]}else if(t.key===n.ARROW_UP){h=o===r?s[a]:s[o-1]}this.focusComboboxItem(h)}handleHeaderKeyboardEvent(t){if(t.key===n.SPACE){t.preventDefault()}if(t.key===n.ARROW_DOWN&&!this.isopen||t.key===n.ARROW_UP&&this.isopen){this.toggleComboBox()}}handleCheckboxFocus(t){this.focusedItemId=t}focusComboboxItem(t){this.checkboxes.forEach((function(t){t.setAttribute("tabindex","-1")}));t.setAttribute("tabindex","0");t.focus()}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((i=>{t.push(Object.assign({},i))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((i=>{const e=i.name.toUpperCase().indexOf(t.toUpperCase());const s=e+t.length;const o=i.name.substring(0,e)+"<strong>"+i.name.substring(e,s)+"</strong>"+i.name.substring(s,i.name.length);i.name=o;return e>=0}))}checkAll(t=true){this.itemsList=this.itemsList.map((i=>Object.assign(Object.assign({},i),{checked:t})));this.resetRenderItemsList();this.emitComboboxChange()}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":`${this.inputid}_list`}}renderHeader(){return e("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{this.handleHeaderKeyboardEvent(t)},onKeyUp:t=>l(t,this.toggleComboBox),role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},e("p",{class:"body-3"},this.label,e("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),e("z-icon",{name:"caret-down",class:this.size}))}renderContent(){if(!this.isopen){return}return e("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?e("span",Object.assign({},this.getComboboxA11yAttributes())):null,e("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:`${this.inputid}_list`,"aria-owns":`${this.checkboxes.map((t=>t.id)).join(" ")}`},this.hascheckall&&this.renderCheckAll(),this.renderItems()))}renderItems(){return e("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,i,s){return e("z-list-element",{id:t.id,htmlTabindex:null,dividerType:i!==s-1?h.ELEMENT:h.NONE,size:this.getControlToListSize()},e("z-input",{type:o.CHECKBOX,checked:t.checked,htmlid:this.getItemId(t),label:t.name,class:this.getCheckboxClass(),disabled:!t.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":t.checked?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,this.getItemId(t)),onInputCheck:i=>{this.itemsList=this.itemsList.map((e=>{if(t.id===e.id){e.checked=i.detail.checked}return e}));this.updateRenderItemsList();this.emitComboboxChange()},onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return e("ul",{role:"none"},t.map(((i,e)=>this.renderItem(i,e,t.length))))}renderGroups(t){const i=t.reduce(((i,e,s)=>{var o;const{category:r}=e;const a=this.renderItem(e,s,t.length);i[r]=(o=i[r])!==null&&o!==void 0?o:[];i[r].push(a);return i}),{});const s=Object.entries(i).map((([t,i])=>e("z-list-group",{"divider-type":h.ELEMENT},e("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),i.map((t=>t)))));return e("ul",{role:"none"},s)}renderNoSearchResults(){return e("ul",{role:"none"},e("z-myz-list-item",{id:"no-results",text:this.noresultslabel,listitemid:"no-results",icon:"multiply-circle",class:this.size}))}renderCloseButton(){return e("div",null,e("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>l(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){return e("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,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:t=>{if(t.key===n.ESC){this.closeFilterItems()}},onInputChange:t=>{this.searchValue=t.detail.value}}))}renderCheckAll(){if(this.searchValue){return}const t=`combo-checkbox-${this.inputid}-check-all`;const i=this.selectedCounter===this.itemsList.length;return e("div",{class:"check-all-wrapper"},e("z-input",{type:o.CHECKBOX,checked:i,htmlid:t,class:this.getCheckboxClass(),label:i?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":i?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,t),onInputCheck:t=>this.checkAll(t.detail.checked),onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}render(){return e("div",{key:"118ffd4229b6b7f060d9b28ace7d5a59796620b9","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 s(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}}};u.style=p;export{u as z_combobox};
+//# sourceMappingURL=p-2bf1edba.entry.js.map

package/www/build/p-2bf1edba.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","watchCheckboxes","checkboxes","forEach","index","setAttribute","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","inputType","InputType","TEXT","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","componentDidRender","getAllCheckboxes","stringify","getItemId","getCheckboxClass","Array","from","element","shadowRoot","querySelectorAll","getControlToListSize","size","X_SMALL","ListSize","SMALL","MEDIUM","LARGE","handleSelectArrowsNavigation","e","currId","KeyboardCode","ARROW_DOWN","ARROW_UP","includes","key","isopen","preventDefault","stopPropagation","currElem","querySelector","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","focusComboboxItem","handleHeaderKeyboardEvent","ev","SPACE","handleCheckboxFocus","focusedItemId","elem","focus","resetRenderItemsList","renderItemsList","push","Object","assign","value","start","name","toUpperCase","end","newName","substring","checkAll","map","getComboboxA11yAttributes","role","label","renderHeader","h","class","onClick","onKeyDown","onKeyUp","handleKeyboardSubmit","tabindex","renderContent","hassearch","renderSearchInput","join","hascheckall","renderCheckAll","renderItems","renderList","renderCloseButton","renderItem","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","type","CHECKBOX","htmlid","disabled","maxcheckableitems","onInputCheck","i","detail","onInputFocus","renderNoSearchResults","hasgroupitems","renderGroups","newData","reduce","group","category","zListItem","_a","listGroups","entries","slot","text","noresultslabel","listitemid","icon","closesearchtext","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","message","ESC","onInputChange","checkAllId","allChecked","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":[":host {\n  display: block;\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-surface04);\n  margin: 0;\n  background-color: var(--color-input-field01);\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([size=\"x-small\"]) > div > .header p.body-3 {\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n  outline: var(--border-size-medium) solid var(--color-surface04);\n  outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n  box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div > .header > p.body-3 {\n  padding: var(--space-unit) 0;\n  margin: 0;\n  color: var(--color-default-text);\n}\n\n:host > div > .header > p.body-3 > span {\n  font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n  fill: var(--color-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-primary01);\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-disabled01);\n  fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n  color: var(--color-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n  fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n  fill: var(--color-default-icon);\n  transform: rotate(180deg);\n  transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n  position: relative;\n  z-index: 12;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: 0;\n  background-color: var(--color-input-field01);\n  border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n  overflow: auto;\n  max-height: 235px;\n  padding: 0;\n  scrollbar-color: var(--color-primary01) transparent;\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 3px; /* needed for checkbox focus shadow */\n  margin: 0;\n}\n\n::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\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-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n  overflow: hidden;\n  max-height: auto;\n  margin-top: 0;\n  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\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  scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n  display: flex;\n  justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n  display: inline-block;\n  height: 44px;\n  color: var(--color-primary01);\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.check-all-wrapper {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--gray800);\n  margin-bottom: var(--space-unit);\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 {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, 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  /** close combobox list text */\n  @Prop()\n  closesearchtext?: string = \"Chiudi\";\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  checkboxes: HTMLInputElement[] = [];\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  @Watch(\"checkboxes\")\n  watchCheckboxes(): void {\n    this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\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  componentDidRender(): void {\n    const checkboxes = this.getAllCheckboxes();\n    if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n      this.checkboxes = checkboxes;\n    }\n  }\n\n  private getItemId(item: ComboItem): string {\n    return `combo-checkbox-${this.inputid}-${item.id}`;\n  }\n\n  private getCheckboxClass(): string {\n    return `combo-item-checkbox-input-${this.inputid}`;\n  }\n\n  private getAllCheckboxes(): HTMLInputElement[] {\n    return Array.from(\n      this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n    ) as HTMLInputElement[];\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 handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n    if (!currElem) {\n      return;\n    }\n\n    const checkboxes = this.checkboxes;\n    if (!checkboxes.length) {\n      return;\n    }\n\n    const currElemIndex = checkboxes.indexOf(currElem);\n    const firstElemIndex = 0;\n    const lastElemIndex = checkboxes.length - 1;\n\n    let nextElem = null;\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n    } else if (e.key === KeyboardCode.ARROW_UP) {\n      nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n    }\n\n    this.focusComboboxItem(nextElem);\n  }\n\n  private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n    }\n    if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n      this.toggleComboBox();\n    }\n  }\n\n  private handleCheckboxFocus(id: string): void {\n    this.focusedItemId = id;\n  }\n\n  private focusComboboxItem(elem): void {\n    this.checkboxes.forEach(function (item) {\n      item.setAttribute(\"tabindex\", \"-1\");\n    });\n\n    elem.setAttribute(\"tabindex\", \"0\");\n    elem.focus();\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 checkAll(checked = true): void {\n    this.itemsList = this.itemsList.map((item: ComboItem) => ({\n      ...item,\n      checked: checked,\n    }));\n    this.resetRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private getComboboxA11yAttributes(): Record<string, unknown> {\n    return {\n      \"role\": \"combobox\",\n      \"aria-label\": this.label,\n      \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n      \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n      \"aria-controls\": `${this.inputid}_list`,\n    };\n  }\n\n  private renderHeader(): HTMLDivElement {\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(ev: KeyboardEvent) => {\n          this.handleHeaderKeyboardEvent(ev);\n        }}\n        onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n        role=\"button\"\n        tabindex={0}\n        aria-expanded={this.isopen ? \"true\" : \"false\"}\n      >\n        <p class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </p>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div class=\"open-combo-data\">\n        {this.hassearch && this.renderSearchInput()}\n        {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n        <div\n          role=\"listbox\"\n          aria-label={this.label}\n          aria-multiselectable={true}\n          id={`${this.inputid}_list`}\n          aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n        >\n          {this.hascheckall && this.renderCheckAll()}\n          {this.renderItems()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    return (\n      <div class={this.searchValue && \"search\"}>\n        {this.renderList(this.renderItemsList)}\n        {this.searchValue && this.renderCloseButton()}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n    return (\n      <z-list-element\n        id={item.id}\n        htmlTabindex={null}\n        dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n        size={this.getControlToListSize()}\n      >\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={item.checked}\n          htmlid={this.getItemId(item)}\n          label={item.name}\n          class={this.getCheckboxClass()}\n          disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={item.checked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n          onInputCheck={(e: CustomEvent) => {\n            this.itemsList = this.itemsList.map((i: ComboItem) => {\n              if (item.id === i.id) {\n                i.checked = e.detail.checked;\n              }\n\n              return i;\n            });\n            this.updateRenderItemsList();\n            this.emitComboboxChange();\n          }}\n          onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n        />\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=\"none\">\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const {category} = item;\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n\n    return <ul role=\"none\">{listGroups}</ul>;\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <ul role=\"none\">\n        <z-myz-list-item\n          id=\"no-results\"\n          text={this.noresultslabel}\n          listitemid=\"no-results\"\n          icon=\"multiply-circle\"\n          class={this.size}\n        />\n      </ul>\n    );\n  }\n\n  private renderCloseButton(): HTMLDivElement {\n    return (\n      <div>\n        <a\n          onClick={() => this.closeFilterItems()}\n          onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n          role=\"button\"\n          tabindex={0}\n        >\n          {this.closesearchtext}\n        </a>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    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        aria-autocomplete=\"list\"\n        {...this.getComboboxA11yAttributes()}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.key === KeyboardCode.ESC) {\n            this.closeFilterItems();\n          }\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.searchValue = e.detail.value;\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (this.searchValue) {\n      return;\n    }\n\n    const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n    const allChecked = this.selectedCounter === this.itemsList.length;\n\n    return (\n      <div class=\"check-all-wrapper\">\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={allChecked}\n          htmlid={checkAllId}\n          class={this.getCheckboxClass()}\n          label={allChecked ? this.uncheckalltext : this.checkalltext}\n          disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={allChecked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n          onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n          onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"],"mappings":"4LAAA,MAAMA,EAAY,uuIAClB,MAAAC,EAAeD,E,MCUFE,EAAS,MA+FpB,UAAAC,GACEC,KAAKC,iBAAmBD,KAAKE,QAAU,SAAWC,KAAKC,MAAMJ,KAAKE,OAASF,KAAKE,MAChFF,KAAKK,gBAAkBL,KAAKC,UAAUK,QAAQC,GAASA,EAAKC,UAASC,OACrET,KAAKU,uB,CAIP,gBAAAC,GACEX,KAAKY,YAAYZ,KAAKa,Y,CAIxB,eAAAC,GACEd,KAAKe,WAAWC,SAAQ,CAACT,EAAMU,IAAUV,EAAKW,aAAa,WAAYD,IAAU,EAAI,IAAM,O,CAOrF,kBAAAE,GACNnB,KAAKoB,eAAeC,KAAK,CAACC,GAAItB,KAAKuB,QAASrB,MAAOF,KAAKC,W,CAG1D,WAAAuB,CAAAC,G,yDA7BQzB,KAAAC,UAAyB,GAEzBD,KAAA0B,UAAuBC,EAAUC,K,aAvF/B,SAASC,M,wDAYE,M,eAIC,M,2GAgBI,mB,YAIjB,M,aAIC,M,qBAIiB,S,iBAIH,M,kBAIA,kB,oBAIE,oB,uBAIN,E,uCAQCC,EAAYC,I,+EASF,G,6CAME,GAgC/B/B,KAAKgC,eAAiBhC,KAAKgC,eAAeC,KAAKjC,MAC/CA,KAAKkC,iBAAmBlC,KAAKkC,iBAAiBD,KAAKjC,K,CAGrD,iBAAAmC,GACEnC,KAAKD,Y,CAGP,mBAAAqC,GACEpC,KAAKK,gBAAkBL,KAAKC,UAAUK,QAAQC,GAASA,EAAKC,UAASC,M,CAGvE,kBAAA4B,GACE,MAAMtB,EAAaf,KAAKsC,mBACxB,GAAInC,KAAKoC,UAAUxB,KAAgBZ,KAAKoC,UAAUvC,KAAKe,YAAa,CAClEf,KAAKe,WAAaA,C,EAId,SAAAyB,CAAUjC,GAChB,MAAO,kBAAkBP,KAAKuB,WAAWhB,EAAKe,I,CAGxC,gBAAAmB,GACN,MAAO,6BAA6BzC,KAAKuB,S,CAGnC,gBAAAe,GACN,OAAOI,MAAMC,KACX3C,KAAK4C,QAAQC,WAAWC,iBAAiB,IAAI9C,KAAKyC,4C,CAI9C,oBAAAM,GACN,OAAQ/C,KAAKgD,MACX,KAAKlB,EAAYmB,QACf,OAAOC,EAASC,MAClB,KAAKrB,EAAYqB,MACf,OAAOD,EAASE,OAClB,QACE,OAAOF,EAASG,M,CAId,4BAAAC,CAA6BC,EAAkBC,GACrD,IAAK,CAACC,EAAaC,WAAYD,EAAaE,UAAUC,SAASL,EAAEM,OAAyB7D,KAAK8D,OAAQ,CACrG,M,CAGFP,EAAEQ,iBACFR,EAAES,kBAEF,MAAMC,EAAWjE,KAAK4C,QAAQC,WAAWqB,cAAc,IAAIV,KAC3D,IAAKS,EAAU,CACb,M,CAGF,MAAMlD,EAAaf,KAAKe,WACxB,IAAKA,EAAWN,OAAQ,CACtB,M,CAGF,MAAM0D,EAAgBpD,EAAWqD,QAAQH,GACzC,MAAMI,EAAiB,EACvB,MAAMC,EAAgBvD,EAAWN,OAAS,EAE1C,IAAI8D,EAAW,KACf,GAAIhB,EAAEM,MAAQJ,EAAaC,WAAY,CACrCa,EAAWJ,IAAkBG,EAAgBvD,EAAWsD,GAAkBtD,EAAWoD,EAAgB,E,MAChG,GAAIZ,EAAEM,MAAQJ,EAAaE,SAAU,CAC1CY,EAAWJ,IAAkBE,EAAiBtD,EAAWuD,GAAiBvD,EAAWoD,EAAgB,E,CAGvGnE,KAAKwE,kBAAkBD,E,CAGjB,yBAAAE,CAA0BC,GAChC,GAAIA,EAAGb,MAAQJ,EAAakB,MAAO,CACjCD,EAAGX,gB,CAEL,GAAKW,EAAGb,MAAQJ,EAAaC,aAAe1D,KAAK8D,QAAYY,EAAGb,MAAQJ,EAAaE,UAAY3D,KAAK8D,OAAS,CAC7G9D,KAAKgC,gB,EAID,mBAAA4C,CAAoBtD,GAC1BtB,KAAK6E,cAAgBvD,C,CAGf,iBAAAkD,CAAkBM,GACxB9E,KAAKe,WAAWC,SAAQ,SAAUT,GAChCA,EAAKW,aAAa,WAAY,K,IAGhC4D,EAAK5D,aAAa,WAAY,KAC9B4D,EAAKC,O,CAGC,qBAAArE,GACN,GAAIV,KAAKa,YAAa,CACpBb,KAAKY,YAAYZ,KAAKa,Y,KACjB,CACLb,KAAKgF,sB,EAID,oBAAAA,GACN,MAAMC,EAAkB,GACxBjF,KAAKC,UAAUe,SAAST,IACtB0E,EAAgBC,KAAIC,OAAAC,OAAA,GAAK7E,GAAM,IAEjCP,KAAKiF,gBAAkBA,C,CAGjB,WAAArE,CAAYyE,GAClB,IAAKA,EAAO,CACV,OAAOrF,KAAKkC,kB,CAGdlC,KAAKgF,uBACLhF,KAAKiF,gBAAkBjF,KAAKiF,gBAAgB3E,QAAQC,IAClD,MAAM+E,EAAQ/E,EAAKgF,KAAKC,cAAcpB,QAAQiB,EAAMG,eACpD,MAAMC,EAAMH,EAAQD,EAAM5E,OAC1B,MAAMiF,EACJnF,EAAKgF,KAAKI,UAAU,EAAGL,GACvB,WACA/E,EAAKgF,KAAKI,UAAUL,EAAOG,GAC3B,YACAlF,EAAKgF,KAAKI,UAAUF,EAAKlF,EAAKgF,KAAK9E,QAErCF,EAAKgF,KAAOG,EAEZ,OAAOJ,GAAS,CAAC,G,CAIb,QAAAM,CAASpF,EAAU,MACzBR,KAAKC,UAAYD,KAAKC,UAAU4F,KAAKtF,GAAe4E,OAAAC,OAAAD,OAAAC,OAAA,GAC/C7E,GAAI,CACPC,QAASA,MAEXR,KAAKgF,uBACLhF,KAAKmB,oB,CAGC,gBAAAe,GACNlC,KAAKa,YAAc,GACnBb,KAAKgF,sB,CAGC,cAAAhD,GACNhC,KAAK8D,QAAU9D,KAAK8D,M,CAGd,yBAAAgC,GACN,MAAO,CACLC,KAAQ,WACR,aAAc/F,KAAKgG,MACnB,gBAAiBhG,KAAK8D,OAAS,OAAS,QACxC,wBAAyB9D,KAAK8D,OAAS9D,KAAK6E,cAAgB,GAC5D,gBAAiB,GAAG7E,KAAKuB,e,CAIrB,YAAA0E,GACN,OACEC,EAAA,OACEC,MAAM,SACNC,QAAS,IAAMpG,KAAKgC,iBACpBqE,UAAY3B,IACV1E,KAAKyE,0BAA0BC,EAAG,EAEpC4B,QAAU5B,GAAsB6B,EAAqB7B,EAAI1E,KAAKgC,gBAC9D+D,KAAK,SACLS,SAAU,EAAC,gBACIxG,KAAK8D,OAAS,OAAS,SAEtCoC,EAAA,KAAGC,MAAM,UACNnG,KAAKgG,MACNE,EAAA,YAAOlG,KAAKK,gBAAkB,GAAK,KAAKL,KAAKK,qBAE/C6F,EAAA,UACEX,KAAK,aACLY,MAAOnG,KAAKgD,O,CAMZ,aAAAyD,GACN,IAAKzG,KAAK8D,OAAQ,CAChB,M,CAGF,OACEoC,EAAA,OAAKC,MAAM,mBACRnG,KAAK0G,WAAa1G,KAAK2G,qBACtB3G,KAAK0G,UAAYR,EAAA,OAAAf,OAAAC,OAAA,GAAUpF,KAAK8F,8BAAkC,KACpEI,EAAA,OACEH,KAAK,UAAS,aACF/F,KAAKgG,MAAK,uBACA,KACtB1E,GAAI,GAAGtB,KAAKuB,eAAc,YACf,GAAGvB,KAAKe,WAAW8E,KAAKtF,GAASA,EAAKe,KAAIsF,KAAK,QAEzD5G,KAAK6G,aAAe7G,KAAK8G,iBACzB9G,KAAK+G,e,CAMN,WAAAA,GACN,OACEb,EAAA,OAAKC,MAAOnG,KAAKa,aAAe,UAC7Bb,KAAKgH,WAAWhH,KAAKiF,iBACrBjF,KAAKa,aAAeb,KAAKiH,oB,CAKxB,UAAAC,CAAW3G,EAAiBU,EAAeR,GACjD,OACEyF,EAAA,kBACE5E,GAAIf,EAAKe,GACT6F,aAAc,KACdC,YAAanG,IAAUR,EAAS,EAAI4G,EAAgBC,QAAUD,EAAgBE,KAC9EvE,KAAMhD,KAAK+C,wBAEXmD,EAAA,WACEsB,KAAM7F,EAAU8F,SAChBjH,QAASD,EAAKC,QACdkH,OAAQ1H,KAAKwC,UAAUjC,GACvByF,MAAOzF,EAAKgF,KACZY,MAAOnG,KAAKyC,mBACZkF,UAAWpH,EAAKC,SAAWR,KAAK4H,mBAAqB5H,KAAKK,iBAAmBL,KAAK4H,kBAClF5E,KAAMhD,KAAKgD,OAASlB,EAAYmB,QAAUnB,EAAYqB,MAAQnD,KAAKgD,KACnE+C,KAAK,SAAQ,gBACExF,EAAKC,QAAU,OAAS,QACvC6F,UAAY9C,GAAqBvD,KAAKsD,6BAA6BC,EAAGvD,KAAKwC,UAAUjC,IACrFsH,aAAetE,IACbvD,KAAKC,UAAYD,KAAKC,UAAU4F,KAAKiC,IACnC,GAAIvH,EAAKe,KAAOwG,EAAExG,GAAI,CACpBwG,EAAEtH,QAAU+C,EAAEwE,OAAOvH,O,CAGvB,OAAOsH,CAAC,IAEV9H,KAAKU,wBACLV,KAAKmB,oBAAoB,EAE3B6G,aAAezE,GAAmBvD,KAAK4E,oBAAoBrB,EAAEwE,OAAOzG,M,CAMpE,UAAA0F,CAAW9G,GACjB,IAAKA,EAAO,CACV,M,CAEF,IAAKA,EAAMO,QAAUT,KAAKa,YAAa,CACrC,OAAOb,KAAKiI,uB,CAGd,GAAIjI,KAAKkI,cAAe,CACtB,OAAOlI,KAAKmI,aAAajI,E,CAG3B,OACEgG,EAAA,MAAIH,KAAK,QACN7F,EAAM2F,KAAI,CAACtF,EAAMuH,IACT9H,KAAKkH,WAAW3G,EAAMuH,EAAG5H,EAAMO,U,CAMtC,YAAA0H,CAAajI,GACnB,MAAMkI,EAAUlI,EAAMmI,QAAO,CAACC,EAAO/H,EAAMU,K,MACzC,MAAMsH,SAACA,GAAYhI,EACnB,MAAMiI,EAAYxI,KAAKkH,WAAW3G,EAAMU,EAAOf,EAAMO,QAErD6H,EAAMC,IAAYE,EAAAH,EAAMC,MAAS,MAAAE,SAAA,EAAAA,EAAI,GACrCH,EAAMC,GAAUrD,KAAKsD,GAErB,OAAOF,CAAK,GACX,IAEH,MAAMI,EAAavD,OAAOwD,QAAQP,GAAuDvC,KAAI,EAAEhC,EAAKwB,KAEhGa,EAAA,+BAA4BmB,EAAgBC,SAC1CpB,EAAA,QACEC,MAAM,+BACNyC,KAAK,gBAEJ/E,GAEFwB,EAAMQ,KAAKtF,GAASA,OAK3B,OAAO2F,EAAA,MAAIH,KAAK,QAAQ2C,E,CAGlB,qBAAAT,GACN,OACE/B,EAAA,MAAIH,KAAK,QACPG,EAAA,mBACE5E,GAAG,aACHuH,KAAM7I,KAAK8I,eACXC,WAAW,aACXC,KAAK,kBACL7C,MAAOnG,KAAKgD,O,CAMZ,iBAAAiE,GACN,OACEf,EAAA,WACEA,EAAA,KACEE,QAAS,IAAMpG,KAAKkC,mBACpBoE,QAAU/C,GAAqBgD,EAAqBhD,EAAGvD,KAAKkC,kBAC5D6D,KAAK,SACLS,SAAU,GAETxG,KAAKiJ,iB,CAMN,iBAAAtC,GACN,OACET,EAAA,UAAAf,OAAAC,OAAA,CACEsC,OAAQ,GAAG1H,KAAKuB,iBAChByE,MAAOhG,KAAKkJ,YACZC,YAAanJ,KAAKoJ,kBAClBC,UAAWrJ,KAAKsJ,YAChB9B,KAAMxH,KAAK0B,UACX2D,MAAOrF,KAAKa,YACZ0I,QAAS,MACTvG,KAAMhD,KAAKgD,KAAI,oBACG,QACdhD,KAAK8F,4BAA2B,CACpCQ,QAAU/C,IACR,GAAIA,EAAEM,MAAQJ,EAAa+F,IAAK,CAC9BxJ,KAAKkC,kB,GAGTuH,cAAgBlG,IACdvD,KAAKa,YAAc0C,EAAEwE,OAAO1C,KAAK,I,CAMjC,cAAAyB,GACN,GAAI9G,KAAKa,YAAa,CACpB,M,CAGF,MAAM6I,EAAa,kBAAkB1J,KAAKuB,oBAC1C,MAAMoI,EAAa3J,KAAKK,kBAAoBL,KAAKC,UAAUQ,OAE3D,OACEyF,EAAA,OAAKC,MAAM,qBACTD,EAAA,WACEsB,KAAM7F,EAAU8F,SAChBjH,QAASmJ,EACTjC,OAAQgC,EACRvD,MAAOnG,KAAKyC,mBACZuD,MAAO2D,EAAa3J,KAAK4J,eAAiB5J,KAAK6J,aAC/ClC,SAAU3H,KAAK4H,mBAAqB5H,KAAK4H,kBAAoB5H,KAAKC,UAAUQ,OAC5EuC,KAAMhD,KAAKgD,OAASlB,EAAYmB,QAAUnB,EAAYqB,MAAQnD,KAAKgD,KACnE+C,KAAK,SAAQ,gBACE4D,EAAa,OAAS,QACrCtD,UAAY9C,GAAqBvD,KAAKsD,6BAA6BC,EAAGmG,GACtE7B,aAAetE,GAAmBvD,KAAK4F,SAASrC,EAAEwE,OAAOvH,SACzDwH,aAAezE,GAAmBvD,KAAK4E,oBAAoBrB,EAAEwE,OAAOzG,M,CAM5E,MAAAwI,GACE,OACE5D,EAAA,OAAArC,IAAA,yDACe,SAAS7D,KAAKuB,UAC3B4E,MAAO,CAAC4D,KAAM/J,KAAK8D,OAAQkG,MAAOhK,KAAKiK,QAAStC,SAAU3H,KAAK2H,UAC/DrG,GAAItB,KAAKuB,SAERvB,KAAKiG,gBACJjG,KAAK2H,UAAY3H,KAAKyG,gB","ignoreList":[]}

package/www/build/p-2c8e725a.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-d8fcaf1f.system.js","./p-c39f227f.system.js"],(function(o){"use strict";var t,e,r;return{setters:[function(o){t=o.r;e=o.h},function(o){r=o.q}],execute:function(){var a=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:-webkit-gradient(linear, left top, left bottom, from(rgb(255 0 0 / 0%)), to(white));background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--border-radius)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--border-radius)}}";var i=a;var c=o("z_messages_pocket",function(){function o(o){t(this,o);this.pocketid=undefined;this.messages=undefined;this.status=r.PREVIEW}o.prototype.handlePocketToggle=function(o){if(o.detail.id===this.pocketid){this.status=o.detail.status}};o.prototype.renderHeader=function(){var o;var t;switch(this.status){case r.PREVIEW:case r.CLOSED:o=e("span",null,"Messaggi ",e("span",{class:"badge"},this.messages));t="chevron-up";break;case r.OPEN:o=e("span",null,"Riduci");t="chevron-down";break}return e("z-pocket-header",{pocketid:this.pocketid},o,e("z-icon",{name:t,width:14,height:14}))};o.prototype.renderBody=function(){return e("z-pocket-body",{pocketid:this.pocketid},e("div",{class:"body"},e("slot",null)),e("div",{class:"gradient"}))};o.prototype.render=function(){return e("z-pocket",{key:"5be608e84b6e356a29b5f1d7b96a36646ee0299a",pocketid:this.pocketid,status:this.status,class:this.status},this.renderHeader(),this.renderBody())};return o}());c.style=i}}}));
+//# sourceMappingURL=p-2c8e725a.system.entry.js.map

package/www/build/p-2c8e725a.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMessagesPocketStyle0","ZMessagesPocket","exports","PocketStatus","PREVIEW","class_1","prototype","handlePocketToggle","e","detail","id","this","pocketid","status","renderHeader","message","icon","CLOSED","h","class","messages","OPEN","name","width","height","renderBody","render","key"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n  width: 100%;\n}\n\n:host > z-pocket.closed {\n  width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n  display: inline-block;\n  padding: 0 calc(var(--space-unit) * 0.5);\n  margin-left: var(--space-unit);\n  background: var(--color-secondary02);\n  border-radius: 50%;\n  color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n  overflow: hidden;\n  padding: var(--space-unit);\n  margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n  position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n  overflow: auto;\n  max-height: calc(100vh - 166px);\n  scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > z-pocket {\n    width: 768px;\n    margin: 0 calc((100% - 768px) / 2);\n  }\n\n  :host > z-pocket.closed {\n    margin: 0 calc((100% - 158px) / 2);\n  }\n\n  :host > z-pocket.open > z-pocket-body > div.body {\n    max-height: 326px;\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1152px) {\n  :host > z-pocket.open > z-pocket-body > div.body {\n    scrollbar-color: var(--color-primary01) var(--color-surface03);\n    scrollbar-width: thin;\n  }\n\n  :host ::-webkit-scrollbar {\n    width: 10px;\n    background: linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );\n    border-radius: var(--border-radius);\n  }\n\n  :host ::-webkit-scrollbar-thumb {\n    width: var(--space-unit);\n    background-color: var(--color-primary01);\n    border-radius: var(--border-radius);\n  }\n}\n","import {Component, Listen /* , State */, Prop, h} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-messages-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMessagesPocket {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** number of messages */\n  @Prop()\n  messages: number;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  private renderHeader(): HTMLZPocketHeaderElement {\n    let message: HTMLElement;\n    let icon: string;\n    switch (this.status) {\n      case PocketStatus.PREVIEW:\n      case PocketStatus.CLOSED:\n        message = (\n          <span>\n            Messaggi <span class=\"badge\">{this.messages}</span>\n          </span>\n        );\n        icon = \"chevron-up\";\n        break;\n      case PocketStatus.OPEN:\n        message = <span>Riduci</span>;\n        icon = \"chevron-down\";\n        break;\n    }\n\n    return (\n      <z-pocket-header pocketid={this.pocketid}>\n        {message}\n        <z-icon\n          name={icon}\n          width={14}\n          height={14}\n        />\n      </z-pocket-header>\n    );\n  }\n\n  private renderBody(): HTMLZPocketBodyElement {\n    return (\n      <z-pocket-body pocketid={this.pocketid}>\n        <div class=\"body\">\n          <slot />\n        </div>\n        <div class=\"gradient\" />\n      </z-pocket-body>\n    );\n  }\n\n  render(): HTMLZPocketElement {\n    return (\n      <z-pocket\n        pocketid={this.pocketid}\n        status={this.status}\n        class={this.status}\n      >\n        {this.renderHeader()}\n        {this.renderBody()}\n      </z-pocket>\n    );\n  }\n}\n"],"mappings":"wLAAA,IAAMA,EAAY,+zDAClB,IAAAC,EAAeD,E,ICUFE,EAAeC,EAAA,+B,oFAWHC,EAAaC,O,CAGpCC,EAAAC,UAAAC,mBAAA,SAAmBC,GACjB,GAAIA,EAAEC,OAAOC,KAAOC,KAAKC,SAAU,CACjCD,KAAKE,OAASL,EAAEC,OAAOI,M,GAInBR,EAAAC,UAAAQ,aAAA,WACN,IAAIC,EACJ,IAAIC,EACJ,OAAQL,KAAKE,QACX,KAAKV,EAAaC,QAClB,KAAKD,EAAac,OAChBF,EACEG,EAAA,wBACWA,EAAA,QAAMC,MAAM,SAASR,KAAKS,WAGvCJ,EAAO,aACP,MACF,KAAKb,EAAakB,KAChBN,EAAUG,EAAA,sBACVF,EAAO,eACP,MAGJ,OACEE,EAAA,mBAAiBN,SAAUD,KAAKC,UAC7BG,EACDG,EAAA,UACEI,KAAMN,EACNO,MAAO,GACPC,OAAQ,K,EAMRnB,EAAAC,UAAAmB,WAAA,WACN,OACEP,EAAA,iBAAeN,SAAUD,KAAKC,UAC5BM,EAAA,OAAKC,MAAM,QACTD,EAAA,cAEFA,EAAA,OAAKC,MAAM,a,EAKjBd,EAAAC,UAAAoB,OAAA,WACE,OACER,EAAA,YAAAS,IAAA,2CACEf,SAAUD,KAAKC,SACfC,OAAQF,KAAKE,OACbM,MAAOR,KAAKE,QAEXF,KAAKG,eACLH,KAAKc,a,WAtEc,I","ignoreList":[]}

package/www/build/p-2c9f0119.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a}from"./p-cc3c02fe.js";const o=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:grid;padding-top:calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--color-surface03);color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;grid-template-columns:36px auto;grid-template-rows:auto auto}:host>div>z-icon{grid-column:1 / 2;grid-row:1 / 2}:host>div>div.content{margin-bottom:var(--space-unit);grid-column:2 / 3;grid-row:1 / 2}:host>div>div.cta-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:var(--space-unit);grid-column:1 / 3;grid-row:2 / 3}@media only screen and (min-width: 768px){:host>div>div.cta-wrapper{-ms-flex-direction:row;flex-direction:row;grid-column:2 / 3}}";const r=o;const t=class{constructor(a){e(this,a)}render(){return a("div",{key:"94fdc25ba4ed0c5f5e84c009b28349a659a35e7d"},a("z-icon",{key:"dbfe2f3bde1476afa7b852e3e53f1150477e9992",name:"exclamation-circle"}),a("div",{key:"7391e3e79397acaf1d8ef706549403f33ff4e649",class:"content"},a("slot",{key:"7a54d609a2d40de9df327b3a73bc9a9e01eddc27"})),a("div",{key:"dd97a4204d0ab7668b3ef6847b18ae578bb4aeea",class:"cta-wrapper"},a("slot",{key:"7bdc0e8253113f03976d151baefaf7b8bcbf777f",name:"cta"})))}};t.style=r;export{t as z_pocket_message};
+//# sourceMappingURL=p-2c9f0119.entry.js.map

package/www/build/p-2c9f0119.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZPocketMessageStyle0","ZPocketMessage","render","h","key","name","class"],"sources":["src/snowflakes/myz/pocket/z-pocket-message/styles.css?tag=z-pocket-message&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-message/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: grid;\n  padding-top: calc(var(--space-unit) * 1.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  color: var(--color-surface05);\n  fill: var(--color-surface05);\n  font-size: 14px;\n  grid-template-columns: 36px auto;\n  grid-template-rows: auto auto;\n}\n\n:host > div > z-icon {\n  grid-column: 1 / 2;\n  grid-row: 1 / 2;\n}\n\n:host > div > div.content {\n  margin-bottom: var(--space-unit);\n  grid-column: 2 / 3;\n  grid-row: 1 / 2;\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin-bottom: var(--space-unit);\n  grid-column: 1 / 3;\n  grid-row: 2 / 3;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > div > div.cta-wrapper {\n    flex-direction: row;\n    grid-column: 2 / 3;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot  - message body\n * @slot cta - message CTAs\n */\n@Component({\n  tag: \"z-pocket-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketMessage {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-icon name=\"exclamation-circle\" />\n        <div class=\"content\">\n          <slot />\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot name=\"cta\" />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,o2BAClB,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,4CACED,EAAA,UAAAC,IAAA,2CAAQC,KAAK,uBACbF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,WACTH,EAAA,QAAAC,IAAA,8CAEFD,EAAA,OAAAC,IAAA,2CAAKE,MAAM,eACTH,EAAA,QAAAC,IAAA,2CAAMC,KAAK,S","ignoreList":[]}