@zanichelli/albe-web-components 15.0.1 → 15.0.2

package/www/build/p-93f6a3ca.system.entry.js

@@ -1,2 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(t,n,r){if(r||arguments.length===2)for(var i=0,e=n.length,a;i<e;i++){if(a||!(i in n)){if(!a)a=Array.prototype.slice.call(n,0,i);a[i]=n[i]}}return t.concat(a||Array.prototype.slice.call(n))};System.register(["./p-d8fcaf1f.system.js","./p-c39f227f.system.js"],(function(t){"use strict";var n,r,i,e;return{setters:[function(t){n=t.r;r=t.c;i=t.h},function(t){e=t.f}],execute:function(){var a=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";var o=a;var s=t("z_otp",function(){function t(t){n(this,t);this.otpChange=r(this,"otpChange",7);this.inputNum=6;this.status=undefined;this.message=undefined}t.prototype.emitInputChange=function(t){this.otpChange.emit({value:t})};t.prototype.componentWillLoad=function(){this.otp=__spreadArray([],Array(this.inputNum),true);this.otpRef=__spreadArray([],Array(this.inputNum),true)};t.prototype.render=function(){var t=this;return i("div",{key:"9e28959418f6f1b382f16836935e12b3acddfa8f",class:"otp-container"},i("div",{key:"9348bd6807e797441789a465ebdae3a03d1a7534",class:"digits-container"},this.otp.map((function(n,r){return i("input",{class:t.status==e.ERROR?"error":null,onKeyDown:function(n){if(n.keyCode>47){t.otpRef[r].value=""}},onKeyUp:function(n){if(n.keyCode>47){r<t.inputNum-1&&t.otpRef[r+1].focus()}},onInput:function(n){t.otp[r]=n.target.value;t.emitInputChange(t.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:function(n){return t.otpRef[r]=n}})}))),i("z-input-message",{key:"87ee18c72daec6c0c903aa91e5a717c4d5a729b5",message:this.message,status:this.status}))};return t}());s.style=o}}}));
-//# sourceMappingURL=p-93f6a3ca.system.entry.js.map

package/www/build/p-93f6a3ca.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZOtpStyle0","ZOtp","exports","class_1","prototype","emitInputChange","value","this","otpChange","emit","componentWillLoad","otp","__spreadArray","Array","inputNum","otpRef","render","_this","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-error01);\n  background-color: var(--color-error-inverse);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"mappings":"kbAAA,IAAMA,EAAY,4xBAClB,IAAAC,EAAeD,E,ICOFE,EAAIC,EAAA,mB,2EAGK,E,6CAkBZC,EAAAC,UAAAC,gBAAA,SAAgBC,GACtBC,KAAKC,UAAUC,KAAK,CAACH,MAAKA,G,EAG5BH,EAAAC,UAAAM,kBAAA,WACEH,KAAKI,IAAGC,cAAA,GAAOC,MAAMN,KAAKO,UAAS,MACnCP,KAAKQ,OAAMH,cAAA,GAAOC,MAAMN,KAAKO,UAAS,K,EAGxCX,EAAAC,UAAAY,OAAA,eAAAC,EAAAV,KACE,OACEW,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRb,KAAKI,IAAIU,KAAI,SAACC,EAAMC,GAAC,OACpBL,EAAA,SACEE,MAAOH,EAAKO,QAAUC,EAAYC,MAAQ,QAAU,KACpDC,UAAW,SAACC,GACV,GAAIA,EAAEC,QAAU,GAAI,CAClBZ,EAAKF,OAAOQ,GAAGjB,MAAQ,E,GAG3BwB,QAAS,SAACF,GACR,GAAIA,EAAEC,QAAU,GAAI,CAClBN,EAAIN,EAAKH,SAAW,GAAKG,EAAKF,OAAOQ,EAAI,GAAGQ,O,GAGhDC,QAAS,SAACJ,GACRX,EAAKN,IAAIY,GAAMK,EAAEK,OAA4B3B,MAC7CW,EAAKZ,gBAAgBY,EAAKN,IAAIuB,KAAK,I,EAErCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAK,SAACC,GAAE,OAAMvB,EAAKF,OAAOQ,GAAKiB,CAAvB,GArBU,KAyBxBtB,EAAA,mBAAAC,IAAA,2CACEsB,QAASlC,KAAKkC,QACdjB,OAAQjB,KAAKiB,S,WA7DN,I","ignoreList":[]}

package/www/build/p-94bfd79b.system.entry.js

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

package/www/build/p-94bfd79b.system.entry.js.map

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

package/www/build/p-9bae8b1c.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-d8fcaf1f.system.js","./p-c39f227f.system.js","./p-ad6b3f77.system.js","./p-1fe56b25.system.js"],(function(t){"use strict";var i,e,r,a,o,s,n;return{setters:[function(t){i=t.r;e=t.c;r=t.h;a=t.g},function(t){o=t.Y},function(t){s=t.m},function(t){n=t.r}],execute:function(){var c=':host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;-webkit-box-sizing:border-box;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:-ms-flexbox;display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;-ms-flex-item-align:end;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:-ms-flexbox;display:flex;max-width:100%;height:calc(var(--space-unit) * 4);-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:""}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:-ms-flexbox;display:flex;height:100%;-ms-flex-item-align:center;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:-ms-flexbox;display:flex;overflow:hidden;max-height:32px;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot="tags"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot="header-cta"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:top;align-items:top;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:-ms-flexbox;display:flex;width:100%;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:-ms-flexbox;display:flex;height:24px;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);-webkit-box-sizing:border-box;box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:-ms-flexbox;display:flex;height:100%;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.compact div.content{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:356px;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}';var l=c;var d=t("z_book_card",function(){function t(t){i(this,t);this.ribbonClick=e(this,"ribbonClick",7);this.variant=undefined;this.cover=undefined;this.operaTitle=undefined;this.volumeTitle=undefined;this.authors=undefined;this.isbn=undefined;this.isbnLabel="";this.ribbon=undefined;this.ribbonIcon=undefined;this.ribbonInteractive=undefined;this.borderless=undefined;this.fallbackCover=undefined;this.operaTitleTag=undefined;this.isMobile=false;this.hasResources=false;this.showResources=false}t.prototype.emitRibbonClick=function(){this.ribbonClick.emit()};t.prototype.componentWillLoad=function(){var t=this;this.id="id-".concat(n());var i=window.matchMedia("(max-width: ".concat(s,"px)"));this.isMobile=i.matches;i.onchange=function(i){return t.isMobile=i.matches}};t.prototype.componentDidLoad=function(){this.handleResources()};t.prototype.handleResources=function(){var t;if(this.variant!==o.EXPANDED||!this.isMobile){return}this.hasResources=((t=this.hostElement.querySelectorAll("[slot=resources]"))===null||t===void 0?void 0:t.length)>0};t.prototype.toggleResources=function(){this.showResources=!this.showResources};t.prototype.renderCard=function(){switch(this.variant){case o.EXPANDED:return this.isMobile?this.renderMobileExpandedCard():this.renderExpandedCard();case o.COMPACT:return this.renderCompactCard();case o.SEARCH:return this.renderSearchCard()}};t.prototype.renderExpandedCard=function(){return r("div",{class:"wrapper"},this.renderCover(),r("div",{class:"content"},r("div",{class:"top"},r("div",{class:"info"},r("div",{class:"left"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),r("div",{class:"right"},this.renderHeaderCtaSlot())),this.renderTagsSlot()),r("div",{class:"bottom"},this.renderResourcesSlot())))};t.prototype.renderMobileExpandedCard=function(){return r("div",{class:"wrapper"},r("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),r("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn()),this.hasResources&&r("div",{class:{footer:true,open:this.showResources,close:!this.showResources}},!this.showResources&&this.renderShowResources(),this.renderResourcesSlot(),this.showResources&&this.renderShowResources()))};t.prototype.renderSearchCard=function(){return r("div",{class:"wrapper-container"},r("div",{class:"wrapper"},r("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),r("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn())),this.renderFooterCtaSlot())};t.prototype.renderCompactCard=function(){return r("div",{class:"wrapper"},this.renderCover(),r("div",{class:"content"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),this.renderFooterCtaSlot())};t.prototype.renderCover=function(){var t=this;return r("div",{class:"cover"},this.ribbon&&this.variant!==o.COMPACT&&this.renderRibbon(),r("div",{class:"img-wrapper"},r("img",{src:this.cover,onError:function(){if(t.fallbackCover){t.cover=t.fallbackCover}},"aria-hidden":"true"})))};t.prototype.renderRibbon=function(){var t=this;var i=[this.ribbonIcon&&r("z-icon",{name:this.ribbonIcon,width:16,height:16,fill:"color-inverse-icon"}),r("span",null,this.ribbon)];return this.ribbonInteractive?r("button",{class:"ribbon interactive",onClick:function(){return t.emitRibbonClick()}},i):r("div",{class:"ribbon"},i)};t.prototype.renderOperaTitle=function(){var t=this.operaTitleTag?"<".concat(this.operaTitleTag,">").concat(this.operaTitle,"</").concat(this.operaTitleTag,">"):this.operaTitle;return r("div",{class:"title",innerHTML:t})};t.prototype.renderVolumeTitle=function(){return this.volumeTitle?r("div",{class:"subtitle"},this.volumeTitle):null};t.prototype.renderAuthors=function(){return this.authors?r("div",{class:"authors","aria-description":"Autori"},this.authors):null};t.prototype.renderIsbn=function(){return this.isbn?r("div",{class:"isbn"},r("span",{class:"code","aria-description":"ISBN ".concat(this.isbnLabel)},this.isbn),this.isbnLabel?r("span",{class:"label"}," ",this.isbnLabel):null):null};t.prototype.renderShowResources=function(){var t=this;return r("button",{class:"show-resources","aria-label":"Risorse del libro ".concat(this.operaTitle),"aria-expanded":this.showResources.toString(),"aria-controls":"resources-".concat(this.id),onClick:function(){return t.toggleResources()}},this.showResources?"Chiudi":"Vedi tutto",r("z-icon",{name:this.showResources?"chevron-up":"chevron-down"}))};t.prototype.renderTagsSlot=function(){return r("div",{class:"tags"},r("slot",{name:"tags"}))};t.prototype.renderHeaderCtaSlot=function(){return r("slot",{name:"header-cta"})};t.prototype.renderResourcesSlot=function(){var t=this;return r("div",{id:"resources-".concat(this.id),class:"resources"},r("slot",{name:"resources",onSlotchange:function(){return t.handleResources()}}))};t.prototype.renderFooterCtaSlot=function(){return r("div",{class:"action-container"},r("slot",{name:"footer-cta"}))};t.prototype.render=function(){var t;return r("article",{key:"93b847b7f5067c69880ea8ba283a207c8b691a2a",class:(t={},t[this.variant]=true,t.borderless=!!this.borderless,t)},this.renderCard())};Object.defineProperty(t.prototype,"hostElement",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());d.style=l}}}));
-//# sourceMappingURL=p-9bae8b1c.system.entry.js.map

package/www/build/p-9bae8b1c.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZBookCardStyle0","ZBookCard","exports","class_1","prototype","emitRibbonClick","this","ribbonClick","emit","componentWillLoad","_this","id","concat","randomId","mobileMediaQuery","window","matchMedia","mobileBreakpoint","isMobile","matches","onchange","mql","componentDidLoad","handleResources","variant","BookCardVariant","EXPANDED","hasResources","_a","hostElement","querySelectorAll","length","toggleResources","showResources","renderCard","renderMobileExpandedCard","renderExpandedCard","COMPACT","renderCompactCard","SEARCH","renderSearchCard","h","class","renderCover","renderAuthors","renderOperaTitle","renderVolumeTitle","renderIsbn","renderHeaderCtaSlot","renderTagsSlot","renderResourcesSlot","footer","open","close","renderShowResources","renderFooterCtaSlot","ribbon","renderRibbon","src","cover","onError","fallbackCover","content","ribbonIcon","name","width","height","fill","ribbonInteractive","onClick","title","operaTitleTag","operaTitle","innerHTML","volumeTitle","authors","isbn","isbnLabel","toString","onSlotchange","render","key","_b","borderless"],"sources":["src/components/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/z-book-card/index.tsx"],"sourcesContent":["/* COMMON STYLES */\n\n:host {\n  --z-book-card-ribbon-background-color: var(--avatar-C08);\n  --z-book-card-ribbon-shadow-color: var(--green950);\n  --z-book-card-compact-width: 262px;\n  --z-book-card-compact-height: 568px;\n}\n\n:host > article {\n  display: block;\n  width: 100%;\n  max-width: 360px;\n  box-sizing: border-box;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > article div.cover {\n  position: relative;\n}\n\n:host > article div.cover div.img-wrapper {\n  display: flex;\n  overflow: hidden;\n  border: var(--border-size-small) solid var(--color-surface03);\n  line-height: 0;\n}\n\n:host > article div.cover div.img-wrapper img {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  max-height: 100%;\n  align-self: flex-end;\n}\n\n:host > article div.cover .ribbon {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  left: calc(var(--space-unit) * -2);\n  display: flex;\n  max-width: 100%;\n  height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 2);\n  border: var(--border-size-medium) solid var(--color-surface01);\n  background: var(--z-book-card-ribbon-background-color);\n  border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  line-height: initial;\n}\n\n:host > article div.cover .ribbon.interactive:hover {\n  cursor: pointer;\n}\n\n:host > article div.cover .ribbon span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: nowrap;\n}\n\n:host > article div.cover .ribbon::before {\n  position: absolute;\n  bottom: -12px;\n  left: -2px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid var(--z-book-card-ribbon-shadow-color);\n  border-left: 16px solid transparent;\n  content: \"\";\n}\n\n:host > article div.cover .ribbon z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host > article div.content {\n  margin: var(--space-unit) 0;\n  border-radius: var(--border-radius);\n}\n\n:host > article .title {\n  display: flex;\n  height: 100%;\n  align-self: center;\n  color: var(--color-default-text);\n  font-size: var(--font-size-4);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n:host > article .title * {\n  all: unset;\n}\n\n:host > article div.subtitle {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n:host > article div.authors {\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  line-height: 1.33;\n}\n\n:host > article div.isbn {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  line-height: 1.33;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: nowrap;\n}\n\n:host > article div.isbn > .code {\n  font-weight: var(--font-sb);\n}\n\n:host > article div.tags {\n  display: flex;\n  overflow: hidden;\n  max-height: 32px;\n  flex-flow: row wrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host > article ::slotted([slot=\"tags\"]) {\n  margin-bottom: var(--space-unit);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]) {\n  --z-icon-width: 20px;\n  --z-icon-height: 20px;\n\n  padding: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01-icon);\n}\n\n/* EXPANDED STYLES */\n\n:host > article.expanded {\n  width: 100%;\n  min-width: 328px;\n  padding: calc(var(--space-unit) * 2);\n  padding-bottom: 0;\n}\n\n:host > article.expanded div.header {\n  display: flex;\n  flex-flow: row nowrap;\n  align-content: stretch;\n  align-items: top;\n  justify-content: space-between;\n  margin-bottom: var(--space-unit);\n  white-space: nowrap;\n}\n\n:host > article.expanded div.cover div.img-wrapper {\n  border-radius: var(--border-radius);\n}\n\n:host > article.expanded div.cover div.img-wrapper img {\n  width: 100%;\n}\n\n:host > article.expanded .title,\n:host > article.expanded .subtitle,\n:host > article.expanded .authors {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  white-space: initial;\n}\n\n:host > article.expanded div.footer {\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open {\n  padding-top: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open div.resources {\n  display: initial;\n}\n\n:host > article.expanded div.footer.close div.resources {\n  display: none;\n}\n\n:host > article.expanded button.show-resources {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n\n  all: unset;\n  display: flex;\n  width: 100%;\n  flex-flow: row nowrap;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 1) 0;\n  color: var(--color-link-primary);\n  cursor: pointer;\n  fill: var(--color-link-primary);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  gap: var(--space-unit);\n}\n\n:host > article.expanded button.show-resources:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* SEARCH STYLES */\n\n:host > article.search {\n  width: 262px;\n  height: 616px;\n  padding: calc(var(--space-unit) * 2);\n  padding-bottom: 0;\n}\n\n:host > article.search .wrapper-container {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n:host > article.search .wrapper-container .wrapper {\n  height: 451px;\n}\n\n:host > article.search .wrapper-container .action-container {\n  padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.search div.header {\n  display: flex;\n  height: 24px;\n  flex-flow: row nowrap;\n  align-content: stretch;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: calc(var(--space-unit) * 1.5);\n  white-space: nowrap;\n}\n\n:host > article.search div.cover div.img-wrapper {\n  height: 314px;\n  border-radius: var(--border-radius);\n}\n\n:host > article.search .title {\n  display: block;\n  height: initial;\n  align-self: unset;\n  font-size: var(--font-size-3);\n}\n\n:host > article.search .title,\n:host > article.search .subtitle,\n:host > article.search .authors {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* COMPACT STYLES */\n\n:host > article.compact {\n  width: var(--z-book-card-compact-width);\n  height: var(--z-book-card-compact-height);\n}\n\n:host > article.compact.borderless {\n  border: none;\n}\n\n:host > article.compact div.cover div.img-wrapper {\n  width: 100%;\n  height: calc(var(--z-book-card-compact-width) * 1.36);\n  box-sizing: border-box;\n  border: none;\n  background: var(--color-white);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  box-shadow: var(--shadow-2);\n}\n\n:host > article.compact div.wrapper {\n  display: flex;\n  height: 100%;\n  flex-flow: column nowrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: flex-start;\n}\n\n:host > article.compact div.content {\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: column nowrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 2);\n  padding-top: var(--space-unit);\n  margin: 0;\n}\n\n:host > article.compact div.action-container {\n  padding: calc(var(--space-unit) * 2);\n  padding-top: 0;\n  margin-top: auto;\n}\n\n:host > article.compact.borderless div.cover div.img-wrapper {\n  width: var(--z-book-card-compact-width);\n}\n\n:host > article.compact.borderless div.content {\n  padding: 0;\n  padding-top: var(--space-unit);\n}\n\n:host > article.compact.borderless div.action-container {\n  padding: 0;\n  padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.compact .title {\n  display: block;\n  height: initial;\n  align-self: unset;\n}\n\n:host > article.compact .title,\n:host > article.compact .subtitle,\n:host > article.compact .authors {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  white-space: initial;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host > article {\n    width: 100%;\n    max-width: initial;\n  }\n\n  :host > article .title {\n    display: block;\n    height: initial;\n    align-self: unset;\n  }\n\n  /* EXPANDED STYLES */\n\n  :host > article.expanded {\n    width: 100%;\n    min-width: initial;\n    max-width: initial;\n    height: 360px;\n    padding: 0;\n    border: 0;\n  }\n\n  :host > article.expanded div.wrapper {\n    display: flex;\n    flex-flow: row nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: flex-start;\n  }\n\n  :host > article.expanded div.cover div.img-wrapper {\n    width: 262px;\n    height: 356px;\n    border: 0;\n    border: var(--border-size-medium) solid var(--color-surface03);\n    border-right: none;\n    background: var(--color-surface01);\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n\n  :host > article.expanded div.cover div.img-wrapper img {\n    width: auto;\n    border-radius: 0;\n  }\n\n  :host > article.expanded div.content {\n    display: flex;\n    overflow: hidden;\n    width: 100%;\n    height: 356px;\n    flex-flow: column nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: space-between;\n    border: var(--border-size-medium) solid var(--color-surface03);\n    border-left: none;\n    margin: 0;\n    background: var(--color-surface01);\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n\n  :host > article.expanded div.content div.top {\n    padding: calc(var(--space-unit) * 2);\n    padding-bottom: 0;\n  }\n\n  :host > article.expanded div.content div.top div.info {\n    display: flex;\n    flex-flow: row nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: space-between;\n    margin-bottom: calc(var(--space-unit) / 2);\n  }\n\n  :host > article.expanded div.content div.top div.info > div.left {\n    width: 100%;\n  }\n\n  :host > article.expanded div.content div.bottom {\n    padding: calc(var(--space-unit) * 2);\n    padding-bottom: 0;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media (min-width: 1152px) {\n  :host > article {\n    width: fit-content;\n    max-width: initial;\n  }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n  :host > article.expanded {\n    width: 635px;\n  }\n\n  :host > article.expanded div.content {\n    width: 369px;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /**\n   * Card variant: expanded, compact, search\n   */\n  @Prop()\n  variant: BookCardVariant;\n\n  /**\n   * Cover URL\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Card main title\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * [optional] Card subtitle\n   */\n  @Prop()\n  volumeTitle?: string;\n\n  /**\n   * [optional] Authors\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * [optional] Main ISBN\n   */\n  @Prop()\n  isbn?: string;\n\n  /**\n   * [optional] ISBN label\n   */\n  @Prop()\n  isbnLabel = \"\";\n\n  /**\n   * [optional] Ribbon label - expanded and search variant only\n   */\n  @Prop()\n  ribbon?: string;\n\n  /**\n   * [optional] Ribbon icon - expanded and search variant only\n   */\n  @Prop()\n  ribbonIcon?: string;\n\n  /**\n   * [optional] Ribbon interactive - expanded and search variant only\n   */\n  @Prop()\n  ribbonInteractive?: boolean;\n\n  /**\n   * [optional] Borderless card - compact variant only\n   */\n  @Prop()\n  borderless?: boolean;\n\n  /**\n   * [optional] Fallback cover URL\n   */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * [optional] [accessibility] Card title HTML tag\n   */\n  @Prop()\n  operaTitleTag?: string;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  hasResources = false;\n\n  @State()\n  showResources = false;\n\n  /** click on interactive ribbon */\n  @Event()\n  ribbonClick: EventEmitter;\n\n  private emitRibbonClick(): void {\n    this.ribbonClick.emit();\n  }\n\n  private id: string;\n\n  componentWillLoad(): void {\n    this.id = `id-${randomId()}`;\n\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n  }\n\n  componentDidLoad(): void {\n    this.handleResources();\n  }\n\n  private handleResources(): void {\n    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {\n      return;\n    }\n    this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n  }\n\n  private toggleResources(): void {\n    this.showResources = !this.showResources;\n  }\n\n  private renderCard(): HTMLDivElement {\n    switch (this.variant) {\n      case BookCardVariant.EXPANDED:\n        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n      case BookCardVariant.COMPACT:\n        return this.renderCompactCard();\n      case BookCardVariant.SEARCH:\n        return this.renderSearchCard();\n    }\n  }\n\n  private renderExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          <div class=\"top\">\n            <div class=\"info\">\n              <div class=\"left\">\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n            </div>\n            {this.renderTagsSlot()}\n          </div>\n          <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMobileExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          {this.renderOperaTitle()}\n          {this.renderHeaderCtaSlot()}\n        </div>\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderTagsSlot()}\n          {this.renderAuthors()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.hasResources && (\n          <div\n            class={{\n              footer: true,\n              open: this.showResources,\n              close: !this.showResources,\n            }}\n          >\n            {!this.showResources && this.renderShowResources()}\n            {this.renderResourcesSlot()}\n            {this.showResources && this.renderShowResources()}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderSearchCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper-container\">\n        <div class=\"wrapper\">\n          <div class=\"header\">\n            {this.renderOperaTitle()}\n            {this.renderHeaderCtaSlot()}\n          </div>\n          {this.renderCover()}\n          <div class=\"content\">\n            {this.renderTagsSlot()}\n            {this.renderAuthors()}\n            {this.renderVolumeTitle()}\n            {this.renderIsbn()}\n          </div>\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCompactCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderAuthors()}\n          {this.renderOperaTitle()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n        <div class=\"img-wrapper\">\n          <img\n            src={this.cover}\n            onError={() => {\n              if (this.fallbackCover) {\n                this.cover = this.fallbackCover;\n              }\n            }}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  private renderRibbon(): HTMLElement {\n    const content = [\n      this.ribbonIcon && (\n        <z-icon\n          name={this.ribbonIcon}\n          width={16}\n          height={16}\n          fill={\"color-inverse-icon\"}\n        />\n      ),\n      <span>{this.ribbon}</span>,\n    ];\n\n    return this.ribbonInteractive ? (\n      <button\n        class=\"ribbon interactive\"\n        onClick={() => this.emitRibbonClick()}\n      >\n        {content}\n      </button>\n    ) : (\n      <div class=\"ribbon\">{content}</div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.operaTitleTag\n      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n      : this.operaTitle;\n\n    return (\n      <div\n        class=\"title\"\n        innerHTML={title}\n      />\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    return this.authors ? (\n      <div\n        class=\"authors\"\n        aria-description=\"Autori\"\n      >\n        {this.authors}\n      </div>\n    ) : null;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    return this.isbn ? (\n      <div class=\"isbn\">\n        <span\n          class=\"code\"\n          aria-description={`ISBN ${this.isbnLabel}`}\n        >\n          {this.isbn}\n        </span>\n        {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderShowResources(): HTMLButtonElement {\n    return (\n      <button\n        class=\"show-resources\"\n        aria-label={`Risorse del libro ${this.operaTitle}`}\n        aria-expanded={this.showResources.toString()}\n        aria-controls={`resources-${this.id}`}\n        onClick={() => this.toggleResources()}\n      >\n        {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n        <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n      </button>\n    );\n  }\n\n  private renderTagsSlot(): HTMLDivElement {\n    return (\n      <div class=\"tags\">\n        <slot name=\"tags\" />\n      </div>\n    );\n  }\n\n  private renderHeaderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"header-cta\" />;\n  }\n\n  private renderResourcesSlot(): HTMLDivElement {\n    return (\n      <div\n        id={`resources-${this.id}`}\n        class=\"resources\"\n      >\n        <slot\n          name=\"resources\"\n          onSlotchange={() => this.handleResources()}\n        />\n      </div>\n    );\n  }\n\n  private renderFooterCtaSlot(): HTMLDivElement {\n    return (\n      <div class=\"action-container\">\n        <slot name=\"footer-cta\" />\n      </div>\n    );\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <article\n        class={{\n          [this.variant]: true,\n          borderless: !!this.borderless,\n        }}\n      >\n        {this.renderCard()}\n      </article>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-a0893037.entry.js

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

package/www/build/p-a0893037.entry.js.map

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

package/www/build/p-a8d78db5.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-d8fcaf1f.system.js","./p-c39f227f.system.js","./p-ad6b3f77.system.js","./p-6204aa99.system.js"],(function(t){"use strict";var e,a,i,n,r,s,o,l;return{setters:[function(t){e=t.r;a=t.c;i=t.h;n=t.a;r=t.g},function(t){s=t.s},function(t){o=t.m},function(t){l=t.H}],execute:function(){var c=":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}}";var f=c;var u=t("z_toast_notification",function(){function t(t){e(this,t);this.toastClose=a(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}t.prototype.watchPropIsdraggable=function(t){if(t){this.sliderManager.get("pan").set({enable:true})}else{this.sliderManager.get("pan").set({enable:false})}};t.prototype.watchPropAutoclose=function(t){clearTimeout(this.timeoutHandle);this.startClosingTimeout(t)};t.prototype.watchPropPauseonfocusloss=function(t){if(this.autoclose){if(t){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}else{document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler)}}};t.prototype.emitToastClose=function(t){this.timeoutHandle=null;this.elapsedTime=null;this.hostElement.classList.add(t);this.toastClose.emit()};t.prototype.componentWillLoad=function(){this.isMobile=window.innerWidth<=o;this.validateAutoclose();this.percentage=0};t.prototype.componentDidLoad=function(){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()};t.prototype.visibilityChangeEventHandler=function(){if(document.visibilityState==="hidden"){this.timeoutHandle&&this.onBlur()}else{this.elapsedTime&&this.onFocus()}};t.prototype.validateAutoclose=function(){if(!this.autoclose&&!this.closebutton){console.error("At least one between autoclose and closebutton must be present")}};t.prototype.mapSlideOutClass=function(){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}};t.prototype.calculateDraggedPercentage=function(t){var e=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/e.width)};t.prototype.handleSlideOutDragAnimation=function(){var t=this;this.sliderManager=new l(this.hostElement);this.sliderManager.get("pan").set({direction:l.DIRECTION_HORIZONTAL});this.sliderManager.on("pan",(function(e){t.percentage=t.calculateDraggedPercentage(e);t.hostElement.style.transition="none";t.hostElement.classList.remove(t.transition);var a={translate:"translateX(".concat(t.percentage,"%)"),translateBack:"translateX(0)"};t.hostElement.style.opacity="".concat(100-Math.abs(t.percentage),"%");if(e.eventType===l.DIRECTION_LEFT||e.eventType===l.DIRECTION_RIGHT){t.hostElement.style.transform=a.translate;if(Math.abs(t.percentage)>t.draggablepercentage&&!t.isCloseEventCalled){t.isCloseEventCalled=true;t.emitToastClose(e.direction===l.DIRECTION_LEFT?"slide-out-left":"slide-out-right")}}if(e.isFinal&&Math.abs(t.percentage)<t.draggablepercentage){t.hostElement.style.transform=a.translateBack;t.hostElement.style.transition="all 1s";t.hostElement.style.opacity="100%";t.percentage=0}}))};t.prototype.onFocus=function(){var t=this.autoclose;if(this.elapsedTime){t=this.autoclose-this.elapsedTime}if(t>0){this.startClosingTimeout(t)}};t.prototype.onBlur=function(){this.elapsedTime=Date.now()-this.startTime;clearTimeout(this.timeoutHandle)};t.prototype.startClosingTimeout=function(t){var e=this;this.timeoutHandle=window.setTimeout((function(){return e.emitToastClose(e.mapSlideOutClass())}),t)};t.prototype.detectWrap=function(){var t=this.container.offsetWidth;var e=this.container.children;var a=0;for(var i=0;i<e.length;i++){a+=e[i].offsetWidth}return a>t};t.prototype.renderText=function(){var t=this;return i("div",{id:"text",ref:function(e){return t.toastText=e}},i("span",{class:"title"},this.heading),i("span",{class:"message"},this.message))};t.prototype.renderButton=function(){return i("div",{id:"button"},i("slot",{name:"button"}))};t.prototype.renderCloseIcon=function(){var t=this;if(!this.closebutton){return}return i("div",{id:"icon"},i("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:function(){return t.emitToastClose(t.mapSlideOutClass())},onKeyPress:function(e){if(e.keyCode==32||e.keyCode==13){e.preventDefault();t.emitToastClose(t.mapSlideOutClass())}}}))};t.prototype.renderContainer=function(){var t;var e=this;return i("div",{tabIndex:0,id:"external-container",class:(t={},t[this.type]=!!this.type,t["several-lines-padding"]=this.isTextLong,t),ref:function(t){return e.container=t}},this.renderText(),this.renderButton(),this.renderCloseIcon())};t.prototype.renderMobileContainer=function(){var t;var e=this;return i("div",{id:"external-container",class:(t={},t[this.type]=!!this.type,t["several-lines-padding"]=this.isTextLong,t["mobile-wrapped"]=this.isTextLong,t)},i("div",{id:"flex-container",ref:function(t){return e.container=t}},this.renderText(),this.renderButton()),this.renderCloseIcon())};t.prototype.render=function(){var t=this;return i(n,{key:"bf20c69f253b702092fe078443eedb9e86fe223a",style:{"--percentuale":"".concat(this.percentage,"%")},class:this.transition?this.transition:s.SLIDE_IN_DOWN,onAnimationEnd:function(e){if(t.autoclose&&e.animationName.includes("slidein")){t.startClosingTimeout(t.autoclose)}if(e.animationName.includes("slideout")){t.hostElement.parentNode.removeChild(t.hostElement)}}},this.isMobile?this.renderMobileContainer():this.renderContainer())};Object.defineProperty(t.prototype,"hostElement",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}},enumerable:false,configurable:true});return t}());u.style=f}}}));
-//# sourceMappingURL=p-a8d78db5.system.entry.js.map

package/www/build/p-a8d78db5.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZToastNotificationStyle0","ZToastNotification","exports","this","isCloseEventCalled","class_1","prototype","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","_this","Hammer","direction","DIRECTION_HORIZONTAL","on","style","remove","translateObj","translate","concat","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","_a","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-c012f19c.entry.js

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

package/www/build/p-c012f19c.entry.js.map

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

package/www/build/p-df6ef4b4.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,a,g as e}from"./p-cc3c02fe.js";import{C as r}from"./p-025f494e.js";const i=':host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){-webkit-box-sizing:border-box;box-sizing:border-box}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot="title"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;text-decoration:none}::slotted([slot="text"]){margin:0;-webkit-line-clamp:3}.actions{position:relative;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){-webkit-box-shadow:none !important;box-shadow:none !important;outline:none !important}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]) .actions,:host([variant="shadow"]) .actions{margin-top:auto}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){-webkit-box-shadow:var(--shadow-4);box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){-webkit-box-shadow:none;box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;-ms-flex-pack:end;justify-content:flex-end;padding:var(--space-unit);background-image:-webkit-gradient(linear, left bottom, left top, from(rgb(0 0 0 / 100%)), to(rgb(0 0 0 / 0%)));background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}';const s=i;const n=class{constructor(t){o(this,t);this.variant=undefined;this.coverIcon=undefined;this.showShadow=false;this.clickable=false;this.hasCoverImage=undefined}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[t("div",{class:"cover-container"},t("div",{class:"color-cover"},t("div",{class:"cover-content"},t("slot",{name:"metadata"}),t("slot",{name:"title"})))),t("div",{class:"content"},t("slot",{name:"text"}),t("div",{class:"actions"},t("slot",{name:"action"})))]}renderContentDiv(){return t("div",{class:"content"},t("slot",{name:"metadata"}),t("slot",{name:"title"}),t("slot",{name:"text"}),t("div",{class:"actions"},t("slot",{name:"action"})))}render(){if(this.variant===r.TEXT){return t(a,null,this.renderContentDiv())}if(this.variant===r.OVERLAY||this.hasCoverImage){return t(a,null,t("div",{class:"cover-container"},this.hasCoverImage&&[t("slot",{name:"cover"}),this.variant!==r.OVERLAY&&this.coverIcon&&t("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&t("div",{class:"color-cover"})),this.renderContentDiv())}return t(a,null,this.renderColorCoverCard())}get host(){return e(this)}};n.style=s;export{n as z_card};
-//# sourceMappingURL=p-df6ef4b4.entry.js.map

package/www/build/p-efda4ff7.system.entry.js

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

package/www/build/p-efda4ff7.system.entry.js.map

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

package/www/build/p-fc1e9ce0.entry.js

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

package/www/build/p-fc1e9ce0.entry.js.map

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

package/www/build/p-ffcf7250.entry.js

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

package/www/build/p-ffcf7250.entry.js.map

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

package/www/build/p-ffeb3d1b.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-d8fcaf1f.system.js"],(function(t){"use strict";var e,i,n,o;return{setters:[function(t){e=t.r;i=t.c;n=t.h;o=t.a}],execute:function(){var s=':host{--z-notification--top-offset:0;display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:start;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:-webkit-sticky;position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-success-inverse)}:host([type="warning"]){background:var(--color-warning-inverse)}:host([type="error"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:-ms-flexbox;display:flex;height:20px;-ms-flex-align:center;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-success01)}:host([type="warning"]) .status-icon{fill:var(--color-warning02)}:host([type="error"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media and (min-width: 768px){.content-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}';var a=s;var c=t("z_notification",function(){function t(t){e(this,t);this.notificationAction=i(this,"notificationAction",7);this.notificationClose=i(this,"notificationClose",7);this.contenticonname=undefined;this.actiontext=undefined;this.type=undefined;this.showclose=false;this.showshadow=false;this.sticky=false;this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}t.prototype.handleActionButtonClick=function(t){t.preventDefault();this.notificationAction.emit()};t.prototype.handleCloseButtonClick=function(t){t.preventDefault();this.notificationClose.emit()};t.prototype.render=function(){var t;return n(o,{key:"49e877c8628f367adc596b40d5f12d5e66f78ed0"},this.contenticonname&&n("z-icon",{key:"56257c6011f6b5b17c8bbd6250ec99b8d1e41ee2",class:"status-icon",name:this.contenticonname,width:16,height:16}),n("div",{key:"dc56b45ea4f7d52bb193f8d3c22bb5910be9eeea",class:"content-container"},n("div",{key:"2637553cf2f72a948014110e96559d15c45513fa",class:"content-text"},n("slot",{key:"1e60cbb429a9620b88d7cb90df90874d3e454f48"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&n("button",{key:"844e0ba5cef8b13f9d91d5c09472893de5127cc4",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&n("button",{key:"8761fc65bd1b44b38a219e80d8f12b10a898cefe",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},n("z-icon",{key:"7bd949a2c0abf7431765f28542443c9110097ab3",name:"multiply-circle",width:16,height:16})))};return t}());c.style=a}}}));
-//# sourceMappingURL=p-ffeb3d1b.system.entry.js.map