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

package/dist/components/z-toast-notification-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { s as ToastNotificationPosition } from './index2.js';
 
-const stylesCss = ":host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
+const stylesCss = ":host{position:fixed;z-index:10000;display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
 const ZToastNotificationListStyle0 = stylesCss;
 
 const ZToastNotificationList$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotificationList extends HTMLElement {

package/dist/components/z-toast-notification-list.js.map

@@ -1 +1 @@
-{"file":"z-toast-notification-list.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,0/CAA0/C,CAAC;AAC7gD,qCAAe,SAAS;;MCOXA,wBAAsB;;;;;wBAKK,yBAAyB,CAAC,SAAS;2BAIjD,IAAI;;IAK5B,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACpF;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACvF;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC/F;IAEO,iBAAiB;QACvB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAClH,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI;gBACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aACnC,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,OAAO,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToastNotificationList"],"sources":["src/components/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"version":3}
+{"file":"z-toast-notification-list.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,46DAA46D,CAAC;AAC/7D,qCAAe,SAAS;;MCOXA,wBAAsB;;;;;wBAKK,yBAAyB,CAAC,SAAS;2BAIjD,IAAI;;IAK5B,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACpF;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACvF;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC/F;IAEO,iBAAiB;QACvB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAClH,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI;gBACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aACnC,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,OAAO,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToastNotificationList"],"sources":["src/components/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"version":3}

package/dist/components/z-toast-notification.js

@@ -2653,7 +2653,7 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
 
 const Hammer = hammer.exports;
 
-const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;min-height:52px;box-sizing:border-box;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}z-icon{display:inline-block;vertical-align:0}z-icon:focus{padding:calc(var(--space-unit) / 4);border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
+const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){-webkit-animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-right){-webkit-animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-down){-webkit-animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-up){-webkit-animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-left){-webkit-animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-right){-webkit-animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-down){-webkit-animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-up){-webkit-animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}:host>#external-container{display:-ms-flexbox;display:flex;min-height:52px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{-ms-flex-item-align:start;align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}z-icon{display:inline-block;vertical-align:0}z-icon:focus{padding:calc(var(--space-unit) / 4);border-radius:50%;-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
 const ZToastNotificationStyle0 = stylesCss;
 
 const ZToastNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotification extends HTMLElement {