@zanichelli/albe-web-components 15.0.1 → 15.0.2

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZNotificationStyle0","ZNotification","exports","class_1","hostRef","this","handleActionButtonClick","bind","handleCloseButtonClick","prototype","e","preventDefault","notificationAction","emit","notificationClose","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":"0JAAA,IAAMA,EAAY,0+DAClB,IAAAC,EAAeD,E,ICYFE,EAAaC,EAAA,4BA8CxB,SAAAC,EAAAC,G,kNA/BsB,M,gBAOC,M,YAIJ,MAqBjBC,KAAKC,wBAA0BD,KAAKC,wBAAwBC,KAAKF,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBD,KAAKF,K,CAhBzDF,EAAAM,UAAAH,wBAAA,SAAwBI,GAC9BA,EAAEC,iBACFN,KAAKO,mBAAmBC,M,EAOlBV,EAAAM,UAAAD,uBAAA,SAAuBE,GAC7BA,EAAEC,iBACFN,KAAKS,kBAAkBD,M,EAQzBV,EAAAM,UAAAM,OAAA,W,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFb,KAAKc,iBACJH,EAAA,UAAAE,IAAA,2CACEE,MAAM,cACNC,KAAMhB,KAAKc,gBACXG,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,qBACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACTJ,EAAA,QAAAE,IAAA,kDAECM,EAAAnB,KAAKoB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEE,MAAM,gBACNO,KAAK,SACLC,QAASvB,KAAKC,yBAEbD,KAAKoB,aAIXpB,KAAKwB,WACJb,EAAA,UAAAE,IAAA,2CACEE,MAAM,eACNO,KAAK,SACLC,QAASvB,KAAKG,wBAEdQ,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,M,WArFI,I","ignoreList":[]}

package/dist/web-components-library/p-ffee2568.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-d8fcaf1f.system.js","./p-c39f227f.system.js"],(function(t){"use strict";var o,e,a,i,r;return{setters:[function(t){o=t.r;e=t.h;a=t.a;i=t.g},function(t){r=t.C}],execute:function(){var s=':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)}';var n=s;var c=t("z_card",function(){function t(t){o(this,t);this.variant=undefined;this.coverIcon=undefined;this.showShadow=false;this.clickable=false;this.hasCoverImage=undefined}t.prototype.componentWillLoad=function(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null};t.prototype.renderColorCoverCard=function(){return[e("div",{class:"cover-container"},e("div",{class:"color-cover"},e("div",{class:"cover-content"},e("slot",{name:"metadata"}),e("slot",{name:"title"})))),e("div",{class:"content"},e("slot",{name:"text"}),e("div",{class:"actions"},e("slot",{name:"action"})))]};t.prototype.renderContentDiv=function(){return e("div",{class:"content"},e("slot",{name:"metadata"}),e("slot",{name:"title"}),e("slot",{name:"text"}),e("div",{class:"actions"},e("slot",{name:"action"})))};t.prototype.render=function(){if(this.variant===r.TEXT){return e(a,null,this.renderContentDiv())}if(this.variant===r.OVERLAY||this.hasCoverImage){return e(a,null,e("div",{class:"cover-container"},this.hasCoverImage&&[e("slot",{name:"cover"}),this.variant!==r.OVERLAY&&this.coverIcon&&e("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&e("div",{class:"color-cover"})),this.renderContentDiv())}return e(a,null,this.renderColorCoverCard())};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());c.style=n}}}));
-//# sourceMappingURL=p-ffee2568.system.entry.js.map

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

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

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

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,n,i,e){function r(t){return t instanceof i?t:new i((function(n){n(t)}))}return new(i||(i=Promise))((function(i,a){function s(t){try{c(e.next(t))}catch(t){a(t)}}function o(t){try{c(e["throw"](t))}catch(t){a(t)}}function c(t){t.done?i(t.value):r(t.value).then(s,o)}c((e=e.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},e,r,a,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(t){return function(n){return c([t,n])}}function c(o){if(e)throw new TypeError("Generator is already executing.");while(s&&(s=0,o[0]&&(i=0)),i)try{if(e=1,r&&(a=o[0]&2?r["return"]:o[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;if(r=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;r=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(o[0]===6&&i.label<a[1]){i.label=a[1];a=o;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(o);break}if(a[2])i.ops.pop();i.trys.pop();continue}o=n.call(t,i)}catch(t){o=[6,t];r=0}finally{e=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,n,i){if(i||arguments.length===2)for(var e=0,r=n.length,a;e<r;e++){if(a||!(e in n)){if(!a)a=Array.prototype.slice.call(n,0,e);a[e]=n[e]}}return t.concat(a||Array.prototype.slice.call(n))};System.register(["./p-d8fcaf1f.system.js","./p-c39f227f.system.js","./p-1fe56b25.system.js","./p-ad6b3f77.system.js"],(function(t){"use strict";var n,i,e,r,a,s,o,c,l;return{setters:[function(t){n=t.r;i=t.c;e=t.h;r=t.a;a=t.g},function(t){s=t.w;o=t.p;c=t.D},function(t){l=t.g},function(){}],execute:function(){var u=':host{color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .modal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 2)}:host .modal-wrapper>.files-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin:calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);font-size:calc(var(--space-unit) * 3);font-weight:var(--font-sb)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0;font-size:calc(var(--space-unit) * 2);font-weight:var(--font-sb)}:host([type="dragdrop"])>.container>.files-container>.heading-4-sb{margin-top:0;margin-bottom:calc(var(--space-unit) * 3)}:host>.container>.files-container>.files-wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}:host([type="dragdrop"])>.container>.files-container>z-divider{margin:calc(var(--space-unit) * 3) 0}:host .error-message{font-size:14px;font-weight:400;letter-spacing:0.16%;line-height:20px;text-align:left}:host .error-message>.file-name{font-weight:600}@media only screen and (min-width: 768px){:host>.container>z-button{-ms-flex-item-align:start;align-self:flex-start}:host .modal-wrapper{padding:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){:host .modal-wrapper{padding:calc(var(--space-unit) * 4)}}';var f=u;var h=t("z_file_upload",function(){function t(t){n(this,t);this.fileInput=i(this,"fileInput",7);this.inputAttributes={type:"file",id:"file-elem",multiple:true};this.type=s.DEFAULT;this.buttonVariant=undefined;this.acceptedFormat=undefined;this.fileMaxSize=undefined;this.mainTitle=undefined;this.description=undefined;this.files=[];this.uploadBtnLabel="allega";this.dragAndDropLabel="Rilascia i file in questa area per allegarli.";this.allowedFilesMessage=undefined;this.uploadClickableMessage="Carica";this.uploadMessage="o trascina dal tuo computer";this.errorModalTitle="Errore di caricamento";this.errorModalMessage=undefined;this.uploadedFilesLabel="File appena caricati";this.hasFileSection=true;this.invalidFiles=undefined}t.prototype.removeFileListener=function(t){this.removeFileHandler(t.detail)};t.prototype.fileDroppedListener=function(t){this.input.files=t.detail;this.fileInputHandler()};t.prototype.componentDidUpdate=function(){this.handleAccessibility();this.invalidFiles.size&&this.errorModal.focus()};t.prototype.componentWillLoad=function(){this.invalidFiles=new Map};t.prototype.fileInputHandler=function(){if(this.input.files.length){this.invalidFiles=this.checkFiles(Array.from(this.input.files))}};t.prototype.getFiles=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.files]}))}))};t.prototype.removeFile=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.removeFileHandler(t);return[2]}))}))};t.prototype.removeFileHandler=function(t){var n=this.files;var i=n.find((function(n){return n.name===t}));if(i){var e=n.indexOf(i);if(e>=0){n.splice(e,1);this.files=__spreadArray([],n,true)}}};t.prototype.getType=function(){if(l()!==o.DESKTOP&&l()!==o.DESKTOP_WIDE){return s.DEFAULT}return this.type};t.prototype.handleAccessibility=function(){var t=this.el.querySelector("z-file:last-child z-chip button");if(this.files.length>0&&t){t.focus()}else{this.getType()===s.DEFAULT?this.button.querySelector("button").focus():this.uploadLink.focus()}};t.prototype.checkFiles=function(t){var n=this;var i=new Map;var e="supera il limite di ".concat(this.fileMaxSize,"MB");var r=" ha un formato non supportato";t.forEach((function(t){var a=t.size/1024/1024;var s=n.acceptedFormat.split(",").some((function(n){return t.name.toLowerCase().endsWith(n.trim())}));var o=a<=n.fileMaxSize;if(o&&s){if(!n.files.find((function(n){return n.name===t.name}))){n.files.push(t);n.fileInput.emit(t);n.input.value=""}return}i.set(t.name,[]);if(!o){i.get(t.name).push(e)}if(!s){i.get(t.name).push(r)}}));return i};t.prototype.renderTitle=function(){return e("span",{id:"title"},this.mainTitle)};t.prototype.renderDescription=function(t){return e("span",{class:t},this.description)};t.prototype.renderAllowedFileExtensions=function(){var t="";var n="";if(this.acceptedFormat){var i=this.acceptedFormat.split(", ").map((function(t){return t.substring(1).toUpperCase()})).join(", ");t=" nei formati ".concat(i)}if(this.fileMaxSize){n=" per un massimo di ".concat(this.fileMaxSize,"MB di peso")}var r="Puoi allegare file".concat(t).concat(n,".");return e("span",{class:"body-3"},this.allowedFilesMessage?this.allowedFilesMessage:t||n?r:null)};t.prototype.renderFileSection=function(){if(!this.hasFileSection){return}return e("section",{class:"files-container ".concat(!this.files.length?"hidden":"")},e("span",{class:"heading-4-sb"},this.uploadedFilesLabel),e("div",{class:"files-wrapper"},e("slot",{name:"files"})),e("z-divider",{size:c.MEDIUM}))};t.prototype.renderInput=function(){var t=this;return e("input",Object.assign({},this.inputAttributes,{onChange:function(){return t.fileInputHandler()},accept:this.acceptedFormat,ref:function(n){return t.input=n}}))};t.prototype.renderUploadButton=function(){var t=this;return[this.renderInput(),e("z-button",{onClick:function(){return t.input.click()},onKeyPress:function(n){if(n.code=="Space"||n.code=="Enter"){n.preventDefault();t.input.click()}},id:"fileSelect",variant:this.buttonVariant,icon:"upload",ref:function(n){return t.button=n}},this.uploadBtnLabel)]};t.prototype.renderUploadLink=function(){var t=this;return[this.renderInput(),e("span",{class:"body-1 upload-link-text"},e("span",{tabIndex:0,class:"body-1-sb upload-link",onClick:function(){return t.input.click()},onKeyPress:function(n){if(n.code=="Space"||n.code=="Enter"){n.preventDefault();t.input.click()}},ref:function(n){return t.uploadLink=n}},this.uploadClickableMessage)," ",this.uploadMessage)]};t.prototype.renderDefaultMode=function(){return[this.renderDescription("body-3-sb"),this.renderAllowedFileExtensions(),this.renderFileSection(),this.renderUploadButton()]};t.prototype.renderDragDropMode=function(){return[this.renderFileSection(),e("z-dragdrop-area",{"drag-and-drop-label":this.dragAndDropLabel},e("div",{class:"text-container"},this.renderDescription("body-1"),this.renderUploadLink(),this.renderAllowedFileExtensions()))]};t.prototype.formatErrorString=function(t,n){var i,r;var a=n[0]&&n[1]?" e ":"";return e("span",{class:"error-message"},"Il file ",e("span",{class:"file-name"},t)," ",(i=n[1])!==null&&i!==void 0?i:"",a,(r=n[0])!==null&&r!==void 0?r:"",".")};t.prototype.handleErrorModalContent=function(){var t=this;return e("div",{slot:"modalContent"},e("div",{class:"modal-wrapper"},e("div",{class:"files"},this.errorModalMessage?e("span",{class:"body-3"},this.errorModalMessage):Array.from(this.invalidFiles).map((function(n){var i=n[0],r=n[1];return e("span",{class:"body-3"},t.formatErrorString(i,r))})))))};t.prototype.render=function(){var t=this;return e(r,{key:"30d78f7ce88aa6e994de1355cf4bb8bbc79e6f85"},e("div",{key:"95a606aeda5279d50acb1b127f2d4784ccd95411",tabIndex:0,class:"container ".concat(this.getType())},this.mainTitle&&this.renderTitle(),this.getType()==s.DEFAULT?this.renderDefaultMode():this.renderDragDropMode()),!!this.invalidFiles.size&&e("z-modal",{key:"576e0e283b6fc92d6099a94178fde4c4eaa280b9",modalid:"file-upload-".concat(this.type,"-error-modal"),tabIndex:0,ref:function(n){return t.errorModal=n},modaltitle:this.errorModalTitle,onModalClose:function(){return t.invalidFiles=new Map},onModalBackgroundClick:function(){return t.invalidFiles=new Map}},this.handleErrorModalContent()))};Object.defineProperty(t.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());h.style=f}}}));
-//# sourceMappingURL=p-2c986164.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZFileUploadStyle0","ZFileUpload","exports","this","inputAttributes","type","id","multiple","ZFileUploadType","DEFAULT","class_1","prototype","removeFileListener","e","removeFileHandler","detail","fileDroppedListener","input","files","fileInputHandler","componentDidUpdate","handleAccessibility","invalidFiles","size","errorModal","focus","componentWillLoad","Map","length","checkFiles","Array","from","getFiles","removeFile","fileName","file","find","name","index","indexOf","splice","__spreadArray","getType","getDevice","Device","DESKTOP","DESKTOP_WIDE","lastFile","el","querySelector","button","uploadLink","_this","errors","sizeErrorString","concat","fileMaxSize","formatErrorString","forEach","fileSize","fileFormatOk","acceptedFormat","split","some","ext","toLowerCase","endsWith","trim","fileSizeOk","f","push","fileInput","emit","value","set","get","renderTitle","h","mainTitle","renderDescription","cssClass","class","description","renderAllowedFileExtensions","fileFormatString","fileWeightString","fileFormat","map","string","substring","toUpperCase","join","finalString","allowedFilesMessage","renderFileSection","hasFileSection","uploadedFilesLabel","DividerSize","MEDIUM","renderInput","Object","assign","onChange","accept","ref","val","renderUploadButton","onClick","click","onKeyPress","code","preventDefault","variant","buttonVariant","icon","uploadBtnLabel","renderUploadLink","tabIndex","uploadClickableMessage","uploadMessage","renderDefaultMode","renderDragDropMode","dragAndDropLabel","key","bothErrors","_a","_b","handleErrorModalContent","slot","errorModalMessage","_c","render","Host","modalid","modaltitle","errorModalTitle","onModalClose","onModalBackgroundClick"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=shadow","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .container {\n  display: flex;\n  flex-direction: column;\n}\n\n:host .modal-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n  display: flex;\n  flex-direction: column;\n  margin: calc(var(--space-unit) * 4);\n  gap: var(--space-unit);\n}\n\n:host .text-container {\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n}\n\n:host .text-container .body-1 {\n  text-align: center;\n}\n\n:host .text-container .upload-link {\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n:host .text-container .upload-link-text {\n  margin-bottom: var(--space-unit);\n}\n\ninput#file-elem {\n  display: none;\n}\n\n#title {\n  display: inline-block;\n  margin: calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);\n  font-size: calc(var(--space-unit) * 3);\n  font-weight: var(--font-sb);\n}\n\n:host > .container > z-button {\n  display: inline-block;\n  margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container.hidden {\n  display: none;\n}\n\n:host > .container > .files-container > .heading-4-sb {\n  display: inline-block;\n  margin: calc(var(--space-unit) * 3) 0;\n  font-size: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > .heading-4-sb {\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container > .files-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: calc(var(--space-unit) * 2);\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n:host > .container > .files-container > z-divider {\n  margin-top: calc(var(--space-unit) * 3);\n  margin-bottom: 0;\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > z-divider {\n  margin: calc(var(--space-unit) * 3) 0;\n}\n\n:host .error-message {\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0.16%;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host .error-message > .file-name {\n  font-weight: 600;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > .container > z-button {\n    align-self: flex-start;\n  }\n\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 3);\n  }\n}\n\n@media only screen and (min-width: 1152px) {\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 4);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** List of files not allowed to be uploaded */\n  @State()\n  invalidFiles: Map<string, string[]>;\n\n  @Element() el: HTMLZFileUploadElement;\n\n  private input: HTMLInputElement;\n\n  private button: HTMLZButtonElement;\n\n  private errorModal: HTMLZModalElement;\n\n  private uploadLink: HTMLSpanElement;\n\n  private inputAttributes = {\n    type: \"file\",\n    id: \"file-elem\",\n    multiple: true,\n  };\n\n  /** Listen removeFile event sent from z-file component */\n  @Listen(\"removeFile\")\n  removeFileListener(e: CustomEvent): void {\n    this.removeFileHandler(e.detail);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.fileInputHandler();\n  }\n\n  componentDidUpdate(): void {\n    this.handleAccessibility();\n    this.invalidFiles.size && this.errorModal.focus();\n  }\n\n  componentWillLoad(): void {\n    this.invalidFiles = new Map<string, string[]>();\n  }\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter;\n\n  private fileInputHandler(): void {\n    if (this.input.files.length) {\n      this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n    }\n  }\n\n  /** get array of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** remove file from the array */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    this.removeFileHandler(fileName);\n  }\n\n  private removeFileHandler(fileName: string): void {\n    const files = this.files;\n    const file = files.find((file) => file.name === fileName);\n    if (file) {\n      const index = files.indexOf(file);\n      if (index >= 0) {\n        files.splice(index, 1);\n        this.files = [...files];\n      }\n    }\n  }\n\n  private getType(): ZFileUploadType {\n    if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n      return ZFileUploadType.DEFAULT;\n    }\n\n    return this.type;\n  }\n\n  private handleAccessibility(): void {\n    const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n    if (this.files.length > 0 && lastFile) {\n      (lastFile as HTMLElement).focus();\n    } else {\n      this.getType() === ZFileUploadType.DEFAULT\n        ? this.button.querySelector(\"button\").focus()\n        : this.uploadLink.focus();\n    }\n  }\n\n  private checkFiles(files: File[]): Map<string, string[]> {\n    const errors = new Map<string, string[]>();\n    const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n    const formatErrorString = \" ha un formato non supportato\";\n    files.forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk) {\n        if (!this.files.find((f) => f.name === file.name)) {\n          this.files.push(file);\n          this.fileInput.emit(file);\n          this.input.value = \"\";\n        }\n\n        return;\n      }\n      errors.set(file.name, []);\n      if (!fileSizeOk) {\n        errors.get(file.name).push(sizeErrorString);\n      }\n      if (!fileFormatOk) {\n        errors.get(file.name).push(formatErrorString);\n      }\n    });\n\n    return errors;\n  }\n\n  private renderTitle(): HTMLElement {\n    return <span id=\"title\">{this.mainTitle}</span>;\n  }\n\n  private renderDescription(cssClass): HTMLElement {\n    return <span class={cssClass}>{this.description}</span>;\n  }\n\n  private renderAllowedFileExtensions(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n    return (\n      <span class=\"body-3\">\n        {this.allowedFilesMessage\n          ? this.allowedFilesMessage\n          : fileFormatString || fileWeightString\n            ? finalString\n            : null}\n      </span>\n    );\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n        <span class=\"heading-4-sb\">{this.uploadedFilesLabel}</span>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n        <z-divider size={DividerSize.MEDIUM} />\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        {...this.inputAttributes}\n        onChange={() => this.fileInputHandler()}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      this.renderInput(),\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n        ref={(val) => (this.button = val)}\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n          ref={(val) => (this.uploadLink = val)}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFileExtensions(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFileExtensions()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private formatErrorString(key, value): string {\n    const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n    return (\n      <span class=\"error-message\">\n        Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n        {bothErrors}\n        {value[0] ?? \"\"}.\n      </span>\n    );\n  }\n\n  private handleErrorModalContent(): HTMLDivElement {\n    return (\n      <div slot=\"modalContent\">\n        <div class=\"modal-wrapper\">\n          <div class=\"files\">\n            {this.errorModalMessage ? (\n              <span class=\"body-3\">{this.errorModalMessage}</span>\n            ) : (\n              Array.from(this.invalidFiles).map(([key, value]) => {\n                return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n              })\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          class={`container ${this.getType()}`}\n        >\n          {this.mainTitle && this.renderTitle()}\n          {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        </div>\n        {!!this.invalidFiles.size && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            tabIndex={0}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n            onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n          >\n            {this.handleErrorModalContent()}\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-353c9666.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as i}from"./p-cc3c02fe.js";import{p as r}from"./p-025f494e.js";import{f as s,g as n,a as o}from"./p-955da62e.js";import"./p-2c886e8b.js";const a=':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}}';const l=a;function d(e){return Array.isArray(e)&&e.every((e=>typeof e==="string"))}const h=class{constructor(t){e(this,t);this.slideshowid=undefined;this.data=undefined;this.device=undefined;this.currentSlide=0}watchData(){this.parseLinks()}componentWillLoad(){this.parseLinks();this.setDevice();window.addEventListener("resize",this.handleResize.bind(this))}componentDidRender(){this.setStyle()}handleResize(){this.setDevice();this.setStyle()}parseLinks(){var e;switch(typeof this.data){case"string":{const t=(e=s(this.data))!==null&&e!==void 0?e:[];if(!d(t)){throw new Error("Passed data is invalid")}this.links=t;break}default:this.links=this.data;break}}setStyle(){const e=this.el.shadowRoot.querySelector("#slides");if(!e){return}const t=this.el.shadowRoot.querySelectorAll(".slide");const i=this.el.offsetWidth;const r=i*this.links.length;e.style.width=`${r}px`;e.style.transform=`translate(-${i*this.currentSlide}px)`;t.forEach((e=>{const t=e.querySelector("img");t.style.width=`${i}px`}))}setDevice(){this.device=n()}setCurrentSlide(e){this.currentSlide=e}getBulletDimension(){switch(this.device){case r.MOBILE:return 24;case r.TABLET:return 32;default:return 40}}renderSlides(e){return t("div",{id:"slides"},e.map(((e,i)=>t("div",{id:"slide"+i,class:`slide ${this.currentSlide!==i&&"hide"}`},t("img",{src:e})))))}renderScroll(e){let i=false,r=this.currentSlide;if(e==="left"){i=this.currentSlide===0;r--}else if(e==="right"){i=this.currentSlide===this.links.length-1;r++}return t("z-icon",{class:`scroll ${e} ${i&&"disabled"}`,width:this.getBulletDimension(),height:this.getBulletDimension(),name:`chevron-${e}-circle`,onClick:()=>{!i&&this.setCurrentSlide(r)},onKeyUp:e=>!i&&o(e,(()=>{this.setCurrentSlide(r)})),tabindex:0,role:"button"})}renderSlideshowMain(){return t("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))}renderBullet(e){return t("a",{class:`bullet ${this.currentSlide===e&&"selected"}`,onClick:()=>this.setCurrentSlide(e),onKeyUp:t=>o(t,(()=>this.setCurrentSlide(e))),tabindex:0,role:"button"})}renderSlideshowFooter(){return t("footer",null,t("div",{class:"footer-left"},t("slot",{name:"footer-left"})),t("div",{class:"footer-center"},t("div",{class:"bullet-container"},Object.keys(this.links).map((e=>this.renderBullet(parseInt(e)))))),t("div",{class:"footer-right"},t("slot",{name:"footer-right"})))}render(){if(!this.links||!this.links.length){return t("div",null)}return t("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter())}get el(){return i(this)}static get watchers(){return{data:["watchData"]}}};h.style=l;export{h as z_slideshow};
-//# sourceMappingURL=p-353c9666.entry.js.map

package/www/build/p-353c9666.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSlideshowStyle0","isStringArray","data","Array","isArray","every","datum","ZSlideshow","watchData","this","parseLinks","componentWillLoad","setDevice","window","addEventListener","handleResize","bind","componentDidRender","setStyle","parsed","_a","convertJson","Error","links","refSlides","el","shadowRoot","querySelector","allImages","querySelectorAll","width","offsetWidth","fullwidth","length","style","transform","currentSlide","forEach","item","img","device","getDevice","setCurrentSlide","index","getBulletDimension","Device","MOBILE","TABLET","renderSlides","items","h","id","map","i","class","src","renderScroll","direction","disabled","nextSlide","height","name","onClick","onKeyUp","e","handleKeyboardSubmit","tabindex","role","renderSlideshowMain","renderBullet","renderSlideshowFooter","Object","keys","parseInt","render","slideshowid"],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  flex-direction: column;\n}\n\nmain {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\nmain z-icon.scroll {\n  position: absolute;\n  z-index: 10;\n  top: 50%;\n  width: auto;\n  margin: 0 var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\nmain .scroll.right {\n  right: 0;\n}\n\n#slides {\n  display: flex;\n  flex-wrap: wrap;\n  line-height: 0px;\n  overflow-y: hidden;\n  transition: all 300ms;\n}\n\nfooter {\n  display: grid;\n  width: 100%;\n  height: 56px;\n  align-items: center;\n  border-top: var(--border-size-medium) solid var(--color-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-3970d479.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,g as r}from"./p-cc3c02fe.js";import{Y as a}from"./p-025f494e.js";import{m as o}from"./p-2c886e8b.js";import{r as s}from"./p-955da62e.js";const n=':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}}';const l=n;const c=class{constructor(i){e(this,i);this.ribbonClick=t(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}emitRibbonClick(){this.ribbonClick.emit()}componentWillLoad(){this.id=`id-${s()}`;const e=window.matchMedia(`(max-width: ${o}px)`);this.isMobile=e.matches;e.onchange=e=>this.isMobile=e.matches}componentDidLoad(){this.handleResources()}handleResources(){var e;if(this.variant!==a.EXPANDED||!this.isMobile){return}this.hasResources=((e=this.hostElement.querySelectorAll("[slot=resources]"))===null||e===void 0?void 0:e.length)>0}toggleResources(){this.showResources=!this.showResources}renderCard(){switch(this.variant){case a.EXPANDED:return this.isMobile?this.renderMobileExpandedCard():this.renderExpandedCard();case a.COMPACT:return this.renderCompactCard();case a.SEARCH:return this.renderSearchCard()}}renderExpandedCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},i("div",{class:"top"},i("div",{class:"info"},i("div",{class:"left"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),i("div",{class:"right"},this.renderHeaderCtaSlot())),this.renderTagsSlot()),i("div",{class:"bottom"},this.renderResourcesSlot())))}renderMobileExpandedCard(){return i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn()),this.hasResources&&i("div",{class:{footer:true,open:this.showResources,close:!this.showResources}},!this.showResources&&this.renderShowResources(),this.renderResourcesSlot(),this.showResources&&this.renderShowResources()))}renderSearchCard(){return i("div",{class:"wrapper-container"},i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn())),this.renderFooterCtaSlot())}renderCompactCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),this.renderFooterCtaSlot())}renderCover(){return i("div",{class:"cover"},this.ribbon&&this.variant!==a.COMPACT&&this.renderRibbon(),i("div",{class:"img-wrapper"},i("img",{src:this.cover,onError:()=>{if(this.fallbackCover){this.cover=this.fallbackCover}},"aria-hidden":"true"})))}renderRibbon(){const e=[this.ribbonIcon&&i("z-icon",{name:this.ribbonIcon,width:16,height:16,fill:"color-inverse-icon"}),i("span",null,this.ribbon)];return this.ribbonInteractive?i("button",{class:"ribbon interactive",onClick:()=>this.emitRibbonClick()},e):i("div",{class:"ribbon"},e)}renderOperaTitle(){const e=this.operaTitleTag?`<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`:this.operaTitle;return i("div",{class:"title",innerHTML:e})}renderVolumeTitle(){return this.volumeTitle?i("div",{class:"subtitle"},this.volumeTitle):null}renderAuthors(){return this.authors?i("div",{class:"authors","aria-description":"Autori"},this.authors):null}renderIsbn(){return this.isbn?i("div",{class:"isbn"},i("span",{class:"code","aria-description":`ISBN ${this.isbnLabel}`},this.isbn),this.isbnLabel?i("span",{class:"label"}," ",this.isbnLabel):null):null}renderShowResources(){return i("button",{class:"show-resources","aria-label":`Risorse del libro ${this.operaTitle}`,"aria-expanded":this.showResources.toString(),"aria-controls":`resources-${this.id}`,onClick:()=>this.toggleResources()},this.showResources?"Chiudi":"Vedi tutto",i("z-icon",{name:this.showResources?"chevron-up":"chevron-down"}))}renderTagsSlot(){return i("div",{class:"tags"},i("slot",{name:"tags"}))}renderHeaderCtaSlot(){return i("slot",{name:"header-cta"})}renderResourcesSlot(){return i("div",{id:`resources-${this.id}`,class:"resources"},i("slot",{name:"resources",onSlotchange:()=>this.handleResources()}))}renderFooterCtaSlot(){return i("div",{class:"action-container"},i("slot",{name:"footer-cta"}))}render(){return i("article",{key:"93b847b7f5067c69880ea8ba283a207c8b691a2a",class:{[this.variant]:true,borderless:!!this.borderless}},this.renderCard())}get hostElement(){return r(this)}};c.style=l;export{c as z_book_card};
-//# sourceMappingURL=p-3970d479.entry.js.map

package/www/build/p-3970d479.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZBookCardStyle0","ZBookCard","emitRibbonClick","this","ribbonClick","emit","componentWillLoad","id","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","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-52290ecc.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,a as s,g as n}from"./p-cc3c02fe.js";import{w as a,p as r,D as o}from"./p-025f494e.js";import{g as l}from"./p-955da62e.js";import"./p-2c886e8b.js";const c=':host{color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .modal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 2)}:host .modal-wrapper>.files-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin:calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);font-size:calc(var(--space-unit) * 3);font-weight:var(--font-sb)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0;font-size:calc(var(--space-unit) * 2);font-weight:var(--font-sb)}:host([type="dragdrop"])>.container>.files-container>.heading-4-sb{margin-top:0;margin-bottom:calc(var(--space-unit) * 3)}:host>.container>.files-container>.files-wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}:host([type="dragdrop"])>.container>.files-container>z-divider{margin:calc(var(--space-unit) * 3) 0}:host .error-message{font-size:14px;font-weight:400;letter-spacing:0.16%;line-height:20px;text-align:left}:host .error-message>.file-name{font-weight:600}@media only screen and (min-width: 768px){:host>.container>z-button{-ms-flex-item-align:start;align-self:flex-start}:host .modal-wrapper{padding:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){:host .modal-wrapper{padding:calc(var(--space-unit) * 4)}}';const d=c;const h=class{constructor(e){i(this,e);this.fileInput=t(this,"fileInput",7);this.inputAttributes={type:"file",id:"file-elem",multiple:true};this.type=a.DEFAULT;this.buttonVariant=undefined;this.acceptedFormat=undefined;this.fileMaxSize=undefined;this.mainTitle=undefined;this.description=undefined;this.files=[];this.uploadBtnLabel="allega";this.dragAndDropLabel="Rilascia i file in questa area per allegarli.";this.allowedFilesMessage=undefined;this.uploadClickableMessage="Carica";this.uploadMessage="o trascina dal tuo computer";this.errorModalTitle="Errore di caricamento";this.errorModalMessage=undefined;this.uploadedFilesLabel="File appena caricati";this.hasFileSection=true;this.invalidFiles=undefined}removeFileListener(i){this.removeFileHandler(i.detail)}fileDroppedListener(i){this.input.files=i.detail;this.fileInputHandler()}componentDidUpdate(){this.handleAccessibility();this.invalidFiles.size&&this.errorModal.focus()}componentWillLoad(){this.invalidFiles=new Map}fileInputHandler(){if(this.input.files.length){this.invalidFiles=this.checkFiles(Array.from(this.input.files))}}async getFiles(){return this.files}async removeFile(i){this.removeFileHandler(i)}removeFileHandler(i){const t=this.files;const e=t.find((t=>t.name===i));if(e){const i=t.indexOf(e);if(i>=0){t.splice(i,1);this.files=[...t]}}}getType(){if(l()!==r.DESKTOP&&l()!==r.DESKTOP_WIDE){return a.DEFAULT}return this.type}handleAccessibility(){const i=this.el.querySelector("z-file:last-child z-chip button");if(this.files.length>0&&i){i.focus()}else{this.getType()===a.DEFAULT?this.button.querySelector("button").focus():this.uploadLink.focus()}}checkFiles(i){const t=new Map;const e=`supera il limite di ${this.fileMaxSize}MB`;const s=" ha un formato non supportato";i.forEach((i=>{const n=i.size/1024/1024;const a=this.acceptedFormat.split(",").some((t=>i.name.toLowerCase().endsWith(t.trim())));const r=n<=this.fileMaxSize;if(r&&a){if(!this.files.find((t=>t.name===i.name))){this.files.push(i);this.fileInput.emit(i);this.input.value=""}return}t.set(i.name,[]);if(!r){t.get(i.name).push(e)}if(!a){t.get(i.name).push(s)}}));return t}renderTitle(){return e("span",{id:"title"},this.mainTitle)}renderDescription(i){return e("span",{class:i},this.description)}renderAllowedFileExtensions(){let i="";let t="";if(this.acceptedFormat){const t=this.acceptedFormat.split(", ").map((i=>i.substring(1).toUpperCase())).join(", ");i=` nei formati ${t}`}if(this.fileMaxSize){t=` per un massimo di ${this.fileMaxSize}MB di peso`}const s=`Puoi allegare file${i}${t}.`;return e("span",{class:"body-3"},this.allowedFilesMessage?this.allowedFilesMessage:i||t?s:null)}renderFileSection(){if(!this.hasFileSection){return}return e("section",{class:`files-container ${!this.files.length?"hidden":""}`},e("span",{class:"heading-4-sb"},this.uploadedFilesLabel),e("div",{class:"files-wrapper"},e("slot",{name:"files"})),e("z-divider",{size:o.MEDIUM}))}renderInput(){return e("input",Object.assign({},this.inputAttributes,{onChange:()=>this.fileInputHandler(),accept:this.acceptedFormat,ref:i=>this.input=i}))}renderUploadButton(){return[this.renderInput(),e("z-button",{onClick:()=>this.input.click(),onKeyPress:i=>{if(i.code=="Space"||i.code=="Enter"){i.preventDefault();this.input.click()}},id:"fileSelect",variant:this.buttonVariant,icon:"upload",ref:i=>this.button=i},this.uploadBtnLabel)]}renderUploadLink(){return[this.renderInput(),e("span",{class:"body-1 upload-link-text"},e("span",{tabIndex:0,class:"body-1-sb upload-link",onClick:()=>this.input.click(),onKeyPress:i=>{if(i.code=="Space"||i.code=="Enter"){i.preventDefault();this.input.click()}},ref:i=>this.uploadLink=i},this.uploadClickableMessage)," ",this.uploadMessage)]}renderDefaultMode(){return[this.renderDescription("body-3-sb"),this.renderAllowedFileExtensions(),this.renderFileSection(),this.renderUploadButton()]}renderDragDropMode(){return[this.renderFileSection(),e("z-dragdrop-area",{"drag-and-drop-label":this.dragAndDropLabel},e("div",{class:"text-container"},this.renderDescription("body-1"),this.renderUploadLink(),this.renderAllowedFileExtensions()))]}formatErrorString(i,t){var s,n;const a=t[0]&&t[1]?" e ":"";return e("span",{class:"error-message"},"Il file ",e("span",{class:"file-name"},i)," ",(s=t[1])!==null&&s!==void 0?s:"",a,(n=t[0])!==null&&n!==void 0?n:"",".")}handleErrorModalContent(){return e("div",{slot:"modalContent"},e("div",{class:"modal-wrapper"},e("div",{class:"files"},this.errorModalMessage?e("span",{class:"body-3"},this.errorModalMessage):Array.from(this.invalidFiles).map((([i,t])=>e("span",{class:"body-3"},this.formatErrorString(i,t)))))))}render(){return e(s,{key:"30d78f7ce88aa6e994de1355cf4bb8bbc79e6f85"},e("div",{key:"95a606aeda5279d50acb1b127f2d4784ccd95411",tabIndex:0,class:`container ${this.getType()}`},this.mainTitle&&this.renderTitle(),this.getType()==a.DEFAULT?this.renderDefaultMode():this.renderDragDropMode()),!!this.invalidFiles.size&&e("z-modal",{key:"576e0e283b6fc92d6099a94178fde4c4eaa280b9",modalid:`file-upload-${this.type}-error-modal`,tabIndex:0,ref:i=>this.errorModal=i,modaltitle:this.errorModalTitle,onModalClose:()=>this.invalidFiles=new Map,onModalBackgroundClick:()=>this.invalidFiles=new Map},this.handleErrorModalContent()))}get el(){return n(this)}};h.style=d;export{h as z_file_upload};
-//# sourceMappingURL=p-52290ecc.entry.js.map

package/www/build/p-52290ecc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZFileUploadStyle0","ZFileUpload","this","inputAttributes","type","id","multiple","ZFileUploadType","DEFAULT","removeFileListener","e","removeFileHandler","detail","fileDroppedListener","input","files","fileInputHandler","componentDidUpdate","handleAccessibility","invalidFiles","size","errorModal","focus","componentWillLoad","Map","length","checkFiles","Array","from","getFiles","removeFile","fileName","file","find","name","index","indexOf","splice","getType","getDevice","Device","DESKTOP","DESKTOP_WIDE","lastFile","el","querySelector","button","uploadLink","errors","sizeErrorString","fileMaxSize","formatErrorString","forEach","fileSize","fileFormatOk","acceptedFormat","split","some","ext","toLowerCase","endsWith","trim","fileSizeOk","f","push","fileInput","emit","value","set","get","renderTitle","h","mainTitle","renderDescription","cssClass","class","description","renderAllowedFileExtensions","fileFormatString","fileWeightString","fileFormat","map","string","substring","toUpperCase","join","finalString","allowedFilesMessage","renderFileSection","hasFileSection","uploadedFilesLabel","DividerSize","MEDIUM","renderInput","Object","assign","onChange","accept","ref","val","renderUploadButton","onClick","click","onKeyPress","code","preventDefault","variant","buttonVariant","icon","uploadBtnLabel","renderUploadLink","tabIndex","uploadClickableMessage","uploadMessage","renderDefaultMode","renderDragDropMode","dragAndDropLabel","key","bothErrors","_a","_b","handleErrorModalContent","slot","errorModalMessage","render","Host","modalid","modaltitle","errorModalTitle","onModalClose","onModalBackgroundClick"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=shadow","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .container {\n  display: flex;\n  flex-direction: column;\n}\n\n:host .modal-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n  display: flex;\n  flex-direction: column;\n  margin: calc(var(--space-unit) * 4);\n  gap: var(--space-unit);\n}\n\n:host .text-container {\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n}\n\n:host .text-container .body-1 {\n  text-align: center;\n}\n\n:host .text-container .upload-link {\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n:host .text-container .upload-link-text {\n  margin-bottom: var(--space-unit);\n}\n\ninput#file-elem {\n  display: none;\n}\n\n#title {\n  display: inline-block;\n  margin: calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);\n  font-size: calc(var(--space-unit) * 3);\n  font-weight: var(--font-sb);\n}\n\n:host > .container > z-button {\n  display: inline-block;\n  margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container.hidden {\n  display: none;\n}\n\n:host > .container > .files-container > .heading-4-sb {\n  display: inline-block;\n  margin: calc(var(--space-unit) * 3) 0;\n  font-size: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > .heading-4-sb {\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container > .files-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: calc(var(--space-unit) * 2);\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n:host > .container > .files-container > z-divider {\n  margin-top: calc(var(--space-unit) * 3);\n  margin-bottom: 0;\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > z-divider {\n  margin: calc(var(--space-unit) * 3) 0;\n}\n\n:host .error-message {\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0.16%;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host .error-message > .file-name {\n  font-weight: 600;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > .container > z-button {\n    align-self: flex-start;\n  }\n\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 3);\n  }\n}\n\n@media only screen and (min-width: 1152px) {\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 4);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** List of files not allowed to be uploaded */\n  @State()\n  invalidFiles: Map<string, string[]>;\n\n  @Element() el: HTMLZFileUploadElement;\n\n  private input: HTMLInputElement;\n\n  private button: HTMLZButtonElement;\n\n  private errorModal: HTMLZModalElement;\n\n  private uploadLink: HTMLSpanElement;\n\n  private inputAttributes = {\n    type: \"file\",\n    id: \"file-elem\",\n    multiple: true,\n  };\n\n  /** Listen removeFile event sent from z-file component */\n  @Listen(\"removeFile\")\n  removeFileListener(e: CustomEvent): void {\n    this.removeFileHandler(e.detail);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.fileInputHandler();\n  }\n\n  componentDidUpdate(): void {\n    this.handleAccessibility();\n    this.invalidFiles.size && this.errorModal.focus();\n  }\n\n  componentWillLoad(): void {\n    this.invalidFiles = new Map<string, string[]>();\n  }\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter;\n\n  private fileInputHandler(): void {\n    if (this.input.files.length) {\n      this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n    }\n  }\n\n  /** get array of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** remove file from the array */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    this.removeFileHandler(fileName);\n  }\n\n  private removeFileHandler(fileName: string): void {\n    const files = this.files;\n    const file = files.find((file) => file.name === fileName);\n    if (file) {\n      const index = files.indexOf(file);\n      if (index >= 0) {\n        files.splice(index, 1);\n        this.files = [...files];\n      }\n    }\n  }\n\n  private getType(): ZFileUploadType {\n    if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n      return ZFileUploadType.DEFAULT;\n    }\n\n    return this.type;\n  }\n\n  private handleAccessibility(): void {\n    const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n    if (this.files.length > 0 && lastFile) {\n      (lastFile as HTMLElement).focus();\n    } else {\n      this.getType() === ZFileUploadType.DEFAULT\n        ? this.button.querySelector(\"button\").focus()\n        : this.uploadLink.focus();\n    }\n  }\n\n  private checkFiles(files: File[]): Map<string, string[]> {\n    const errors = new Map<string, string[]>();\n    const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n    const formatErrorString = \" ha un formato non supportato\";\n    files.forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk) {\n        if (!this.files.find((f) => f.name === file.name)) {\n          this.files.push(file);\n          this.fileInput.emit(file);\n          this.input.value = \"\";\n        }\n\n        return;\n      }\n      errors.set(file.name, []);\n      if (!fileSizeOk) {\n        errors.get(file.name).push(sizeErrorString);\n      }\n      if (!fileFormatOk) {\n        errors.get(file.name).push(formatErrorString);\n      }\n    });\n\n    return errors;\n  }\n\n  private renderTitle(): HTMLElement {\n    return <span id=\"title\">{this.mainTitle}</span>;\n  }\n\n  private renderDescription(cssClass): HTMLElement {\n    return <span class={cssClass}>{this.description}</span>;\n  }\n\n  private renderAllowedFileExtensions(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n    return (\n      <span class=\"body-3\">\n        {this.allowedFilesMessage\n          ? this.allowedFilesMessage\n          : fileFormatString || fileWeightString\n            ? finalString\n            : null}\n      </span>\n    );\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n        <span class=\"heading-4-sb\">{this.uploadedFilesLabel}</span>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n        <z-divider size={DividerSize.MEDIUM} />\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        {...this.inputAttributes}\n        onChange={() => this.fileInputHandler()}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      this.renderInput(),\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n        ref={(val) => (this.button = val)}\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n          ref={(val) => (this.uploadLink = val)}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFileExtensions(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFileExtensions()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private formatErrorString(key, value): string {\n    const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n    return (\n      <span class=\"error-message\">\n        Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n        {bothErrors}\n        {value[0] ?? \"\"}.\n      </span>\n    );\n  }\n\n  private handleErrorModalContent(): HTMLDivElement {\n    return (\n      <div slot=\"modalContent\">\n        <div class=\"modal-wrapper\">\n          <div class=\"files\">\n            {this.errorModalMessage ? (\n              <span class=\"body-3\">{this.errorModalMessage}</span>\n            ) : (\n              Array.from(this.invalidFiles).map(([key, value]) => {\n                return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n              })\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          class={`container ${this.getType()}`}\n        >\n          {this.mainTitle && this.renderTitle()}\n          {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        </div>\n        {!!this.invalidFiles.size && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            tabIndex={0}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n            onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n          >\n            {this.handleErrorModalContent()}\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAY,g2EAClB,MAAAC,EAAeD,E,MCQFE,EAAW,M,8DA+EdC,KAAAC,gBAAkB,CACxBC,KAAM,OACNC,GAAI,YACJC,SAAU,M,UA/EYC,EAAgBC,Q,qJAwBxB,G,oBAIU,S,sBAIE,gD,+DAQM,S,mBAIT,8B,qBAIE,wB,yDAQG,uB,oBAIH,K,4BAwB3B,kBAAAC,CAAmBC,GACjBR,KAAKS,kBAAkBD,EAAEE,O,CAK3B,mBAAAC,CAAoBH,GAClBR,KAAKY,MAAMC,MAAQL,EAAEE,OACrBV,KAAKc,kB,CAGP,kBAAAC,GACEf,KAAKgB,sBACLhB,KAAKiB,aAAaC,MAAQlB,KAAKmB,WAAWC,O,CAG5C,iBAAAC,GACErB,KAAKiB,aAAe,IAAIK,G,CAOlB,gBAAAR,GACN,GAAId,KAAKY,MAAMC,MAAMU,OAAQ,CAC3BvB,KAAKiB,aAAejB,KAAKwB,WAAWC,MAAMC,KAAK1B,KAAKY,MAAMC,O,EAM9D,cAAMc,GACJ,OAAO3B,KAAKa,K,CAKd,gBAAMe,CAAWC,GACf7B,KAAKS,kBAAkBoB,E,CAGjB,iBAAApB,CAAkBoB,GACxB,MAAMhB,EAAQb,KAAKa,MACnB,MAAMiB,EAAOjB,EAAMkB,MAAMD,GAASA,EAAKE,OAASH,IAChD,GAAIC,EAAM,CACR,MAAMG,EAAQpB,EAAMqB,QAAQJ,GAC5B,GAAIG,GAAS,EAAG,CACdpB,EAAMsB,OAAOF,EAAO,GACpBjC,KAAKa,MAAQ,IAAIA,E,GAKf,OAAAuB,GACN,GAAIC,MAAgBC,EAAOC,SAAWF,MAAgBC,EAAOE,aAAc,CACzE,OAAOnC,EAAgBC,O,CAGzB,OAAON,KAAKE,I,CAGN,mBAAAc,GACN,MAAMyB,EAAWzC,KAAK0C,GAAGC,cAAc,mCACvC,GAAI3C,KAAKa,MAAMU,OAAS,GAAKkB,EAAU,CACpCA,EAAyBrB,O,KACrB,CACLpB,KAAKoC,YAAc/B,EAAgBC,QAC/BN,KAAK4C,OAAOD,cAAc,UAAUvB,QACpCpB,KAAK6C,WAAWzB,O,EAIhB,UAAAI,CAAWX,GACjB,MAAMiC,EAAS,IAAIxB,IACnB,MAAMyB,EAAkB,uBAAuB/C,KAAKgD,gBACpD,MAAMC,EAAoB,gCAC1BpC,EAAMqC,SAASpB,IACb,MAAMqB,EAAWrB,EAAKZ,KAAO,KAAO,KACpC,MAAMkC,EAAepD,KAAKqD,eACvBC,MAAM,KACNC,MAAMC,GAAgB1B,EAAKE,KAAKyB,cAAcC,SAASF,EAAIG,UAC9D,MAAMC,EAAaT,GAAYnD,KAAKgD,YACpC,GAAIY,GAAcR,EAAc,CAC9B,IAAKpD,KAAKa,MAAMkB,MAAM8B,GAAMA,EAAE7B,OAASF,EAAKE,OAAO,CACjDhC,KAAKa,MAAMiD,KAAKhC,GAChB9B,KAAK+D,UAAUC,KAAKlC,GACpB9B,KAAKY,MAAMqD,MAAQ,E,CAGrB,M,CAEFnB,EAAOoB,IAAIpC,EAAKE,KAAM,IACtB,IAAK4B,EAAY,CACfd,EAAOqB,IAAIrC,EAAKE,MAAM8B,KAAKf,E,CAE7B,IAAKK,EAAc,CACjBN,EAAOqB,IAAIrC,EAAKE,MAAM8B,KAAKb,E,KAI/B,OAAOH,C,CAGD,WAAAsB,GACN,OAAOC,EAAA,QAAMlE,GAAG,SAASH,KAAKsE,U,CAGxB,iBAAAC,CAAkBC,GACxB,OAAOH,EAAA,QAAMI,MAAOD,GAAWxE,KAAK0E,Y,CAG9B,2BAAAC,GACN,IAAIC,EAAmB,GACvB,IAAIC,EAAmB,GAEvB,GAAI7E,KAAKqD,eAAgB,CACvB,MAAMyB,EAAa9E,KAAKqD,eACrBC,MAAM,MACNyB,KAAKC,GAAWA,EAAOC,UAAU,GAAGC,gBACpCC,KAAK,MACRP,EAAmB,gBAAgBE,G,CAGrC,GAAI9E,KAAKgD,YAAa,CACpB6B,EAAmB,sBAAsB7E,KAAKgD,uB,CAGhD,MAAMoC,EAAc,qBAAqBR,IAAmBC,KAE5D,OACER,EAAA,QAAMI,MAAM,UACTzE,KAAKqF,oBACFrF,KAAKqF,oBACLT,GAAoBC,EAClBO,EACA,K,CAKJ,iBAAAE,GACN,IAAKtF,KAAKuF,eAAgB,CACxB,M,CAGF,OACElB,EAAA,WAASI,MAAO,oBAAoBzE,KAAKa,MAAMU,OAAS,SAAW,MACjE8C,EAAA,QAAMI,MAAM,gBAAgBzE,KAAKwF,oBACjCnB,EAAA,OAAKI,MAAM,iBACTJ,EAAA,QAAMrC,KAAK,WAEbqC,EAAA,aAAWnD,KAAMuE,EAAYC,S,CAK3B,WAAAC,GACN,OACEtB,EAAA,QAAAuB,OAAAC,OAAA,GACM7F,KAAKC,gBAAe,CACxB6F,SAAU,IAAM9F,KAAKc,mBACrBiF,OAAQ/F,KAAKqD,eACb2C,IAAMC,GAASjG,KAAKY,MAAQqF,I,CAK1B,kBAAAC,GACN,MAAO,CACLlG,KAAK2F,cACLtB,EAAA,YACE8B,QAAS,IAAMnG,KAAKY,MAAMwF,QAC1BC,WAAa7F,IACX,GAAIA,EAAE8F,MAAQ,SAAW9F,EAAE8F,MAAQ,QAAS,CAC1C9F,EAAE+F,iBACFvG,KAAKY,MAAMwF,O,GAGfjG,GAAG,aACHqG,QAASxG,KAAKyG,cACdC,KAAK,SACLV,IAAMC,GAASjG,KAAK4C,OAASqD,GAE5BjG,KAAK2G,gB,CAKJ,gBAAAC,GACN,MAAO,CACL5G,KAAK2F,cACLtB,EAAA,QAAMI,MAAM,2BACVJ,EAAA,QACEwC,SAAU,EACVpC,MAAM,wBACN0B,QAAS,IAAMnG,KAAKY,MAAMwF,QAC1BC,WAAa7F,IACX,GAAIA,EAAE8F,MAAQ,SAAW9F,EAAE8F,MAAQ,QAAS,CAC1C9F,EAAE+F,iBACFvG,KAAKY,MAAMwF,O,GAGfJ,IAAMC,GAASjG,KAAK6C,WAAaoD,GAEhCjG,KAAK8G,wBACA,IACP9G,KAAK+G,e,CAKJ,iBAAAC,GACN,MAAO,CACLhH,KAAKuE,kBAAkB,aACvBvE,KAAK2E,8BACL3E,KAAKsF,oBACLtF,KAAKkG,qB,CAID,kBAAAe,GACN,MAAO,CACLjH,KAAKsF,oBACLjB,EAAA,yCAAsCrE,KAAKkH,kBACzC7C,EAAA,OAAKI,MAAM,kBACRzE,KAAKuE,kBAAkB,UACvBvE,KAAK4G,mBACL5G,KAAK2E,gC,CAMN,iBAAA1B,CAAkBkE,EAAKlD,G,QAC7B,MAAMmD,EAAanD,EAAM,IAAMA,EAAM,GAAK,MAAQ,GAElD,OACEI,EAAA,QAAMI,MAAM,iBAAe,WACjBJ,EAAA,QAAMI,MAAM,aAAa0C,GAAW,KAAEE,EAAApD,EAAM,MAAE,MAAAoD,SAAA,EAAAA,EAAI,GACzDD,GACAE,EAAArD,EAAM,MAAE,MAAAqD,SAAA,EAAAA,EAAI,GAAE,I,CAKb,uBAAAC,GACN,OACElD,EAAA,OAAKmD,KAAK,gBACRnD,EAAA,OAAKI,MAAM,iBACTJ,EAAA,OAAKI,MAAM,SACRzE,KAAKyH,kBACJpD,EAAA,QAAMI,MAAM,UAAUzE,KAAKyH,mBAE3BhG,MAAMC,KAAK1B,KAAKiB,cAAc8D,KAAI,EAAEoC,EAAKlD,KAChCI,EAAA,QAAMI,MAAM,UAAUzE,KAAKiD,kBAAkBkE,EAAKlD,Q,CASvE,MAAAyD,GACE,OACErD,EAACsD,EAAI,CAAAR,IAAA,4CACH9C,EAAA,OAAA8C,IAAA,2CACEN,SAAU,EACVpC,MAAO,aAAazE,KAAKoC,aAExBpC,KAAKsE,WAAatE,KAAKoE,cACvBpE,KAAKoC,WAAa/B,EAAgBC,QAAUN,KAAKgH,oBAAsBhH,KAAKiH,wBAE5EjH,KAAKiB,aAAaC,MACnBmD,EAAA,WAAA8C,IAAA,2CACES,QAAS,eAAe5H,KAAKE,mBAC7B2G,SAAU,EACVb,IAAMC,GAASjG,KAAKmB,WAAa8E,EACjC4B,WAAY7H,KAAK8H,gBACjBC,aAAc,IAAO/H,KAAKiB,aAAe,IAAIK,IAC7C0G,uBAAwB,IAAOhI,KAAKiB,aAAe,IAAIK,KAEtDtB,KAAKuH,2B","ignoreList":[]}