@zanichelli/albe-web-components 12.4.1-RC1 → 12.4.1

package/dist/cjs/z-th.cjs.entry.js

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e78caf11.js');
-require('./index-195ca522.js');
-require('./index-cf9497bc.js');
+const index = require('./index-fe277fa1.js');
+require('./index-dc60bee7.js');
+require('./index-39ce4edf.js');
 
 
 
 exports.z_th = index.ZTh;
+
+//# sourceMappingURL=z-th.cjs.entry.js.map

package/dist/cjs/z-th.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-th.entry.cjs.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/z-thead.cjs.entry.js

@@ -2,9 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4e41767c.js');
-require('./index-195ca522.js');
+const index = require('./index-66168a3e.js');
+require('./index-dc60bee7.js');
 
 
 
 exports.z_thead = index.ZThead;
+
+//# sourceMappingURL=z-thead.cjs.entry.js.map

package/dist/cjs/z-thead.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-thead.entry.cjs.js","mappings":";;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -2,55 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-195ca522.js');
-const index$1 = require('./index-cf9497bc.js');
+const index = require('./index-dc60bee7.js');
+const index$1 = require('./index-39ce4edf.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 ZToastNotificationListStyle0 = stylesCss;
 
 const ZToastNotificationList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
-    this.position = index$1.ToastNotificationPosition.TOP_RIGHT;
-    /**Set the entry position of new notification in the list */
-    this.newestontop = true;
-  }
-  watchPropNewestontop(newValue) {
-    this.hostElement.append(...this.notificationArray.reverse());
-    if (newValue) {
-      this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.position = index$1.ToastNotificationPosition.TOP_RIGHT;
+        this.newestontop = true;
     }
-    else {
-      this.hostElement.shadowRoot.removeEventListener("slotchange", this.slotChangeHandler);
+    watchPropNewestontop(newValue) {
+        this.hostElement.append(...this.notificationArray.reverse());
+        if (newValue) {
+            this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
+        }
+        else {
+            this.hostElement.shadowRoot.removeEventListener("slotchange", this.slotChangeHandler);
+        }
     }
-  }
-  componentWillLoad() {
-    this.newestontop && this.handleNewestOnTop();
-  }
-  handleNewestOnTop() {
-    this.notificationArray = Array.from(this.hostElement.children);
-    this.hostElement.append(...this.notificationArray.reverse());
-    this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
-  }
-  slotChangeHandler() {
-    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));
-    if (difference) {
-      difference.forEach((elem) => {
-        this.notificationArray.push(elem);
-        const newElem = elem;
-        elem.remove();
-        this.hostElement.prepend(newElem);
-      });
+    componentWillLoad() {
+        if (this.newestontop) {
+            this.handleNewestOnTop();
+        }
     }
-  }
-  render() {
-    return index.h("slot", { name: "toasts" });
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "newestontop": ["watchPropNewestontop"]
-  }; }
+    handleNewestOnTop() {
+        this.notificationArray = Array.from(this.hostElement.children);
+        this.hostElement.append(...this.notificationArray.reverse());
+        this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler.bind(this));
+    }
+    slotChangeHandler() {
+        const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));
+        if (difference) {
+            difference.forEach((elem) => {
+                this.notificationArray.push(elem);
+                const newElem = elem;
+                elem.remove();
+                this.hostElement.prepend(newElem);
+            });
+        }
+    }
+    render() {
+        return index.h("slot", { key: '43f93b7edca0a4245d9c79d63004617ad21063b0', name: "toasts" });
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "newestontop": ["watchPropNewestontop"]
+    }; }
 };
-ZToastNotificationList.style = stylesCss;
+ZToastNotificationList.style = ZToastNotificationListStyle0;
 
 exports.z_toast_notification_list = ZToastNotificationList;
+
+//# sourceMappingURL=z-toast-notification-list.cjs.entry.js.map

package/dist/cjs/z-toast-notification-list.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-toast-notification-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0/CAA0/C,CAAC;AAC7gD,qCAAe,SAAS;;MCOX,sBAAsB;;;wBAKKA,iCAAyB,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,OAAOC,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;KACpC;;;;;;;;;;","names":["ToastNotificationPosition","h"],"sources":["src/components/list/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/list/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, Prop, h, Element, Watch} 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/cjs/z-toast-notification.cjs.entry.js

@@ -2,199 +2,205 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-195ca522.js');
-const index$1 = require('./index-cf9497bc.js');
-const breakpoints = require('./breakpoints-ebe1a437.js');
-const hammer = require('./hammer-4f20813e.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-dc60bee7.js');
+const index$1 = require('./index-39ce4edf.js');
+const breakpoints = require('./breakpoints-5c22092a.js');
+const hammer = require('./hammer-eaf294be.js');
 
 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)}: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-icon01)}: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 ZToastNotificationStyle0 = stylesCss;
 
 const ZToastNotification = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.toastClose = index.createEvent(this, "toastClose", 7);
-    /** toast notification autoclose can be paused */
-    this.pauseonfocusloss = true;
-    /** toast notification can be draggable*/
-    this.isdraggable = true;
-    /** toast notification draggable percentage*/
-    this.draggablepercentage = 80;
-    this.isCloseEventCalled = false;
-  }
-  watchPropIsdraggable(newValue) {
-    if (newValue) {
-      this.sliderManager.get("pan").set({ enable: true });
-    }
-    else {
-      this.sliderManager.get("pan").set({ enable: false });
-    }
-  }
-  watchPropAutoclose(newValue) {
-    clearTimeout(this.timeoutHandle);
-    this.startClosingTimeout(newValue);
-  }
-  watchPropPauseonfocusloss(newValue) {
-    if (this.autoclose) {
-      if (newValue) {
-        document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
-      }
-      else {
-        document.removeEventListener("visibilitychange", this.visibilityChangeEventHandler);
-      }
-    }
-  }
-  emitToastClose(cssClass) {
-    this.timeoutHandle = null;
-    this.elapsedTime = null;
-    this.hostElement.classList.add(cssClass);
-    this.toastClose.emit();
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
-    this.validateAutoclose();
-    this.percentage = 0;
-  }
-  componentDidLoad() {
-    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
-    this.startTime = Date.now();
-    if (this.autoclose && this.pauseonfocusloss) {
-      document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
-    }
-    this.isdraggable && this.handleSlideOutDragAnimation();
-  }
-  visibilityChangeEventHandler() {
-    if (document.visibilityState === "hidden") {
-      this.timeoutHandle && this.onBlur();
-    }
-    else {
-      this.elapsedTime && this.onFocus();
-    }
-  }
-  validateAutoclose() {
-    if (!this.autoclose && !this.closebutton) {
-      console.error("At least one between autoclose and closebutton must be present");
-    }
-  }
-  mapSlideOutClass() {
-    switch (this.transition) {
-      case index$1.ToastNotificationTransition.SLIDE_IN_DOWN:
-        return index$1.ToastNotificationTransition.SLIDE_OUT_UP;
-      case index$1.ToastNotificationTransition.SLIDE_IN_UP:
-        return index$1.ToastNotificationTransition.SLIDE_OUT_DOWN;
-      case index$1.ToastNotificationTransition.SLIDE_IN_LEFT:
-        return index$1.ToastNotificationTransition.SLIDE_OUT_RIGHT;
-      case index$1.ToastNotificationTransition.SLIDE_IN_RIGHT:
-        return index$1.ToastNotificationTransition.SLIDE_OUT_LEFT;
-    }
-  }
-  calculateDraggedPercentage(e) {
-    const bounding = this.hostElement.getBoundingClientRect();
-    return Math.round((100 * e.deltaX) / bounding.width);
-  }
-  handleSlideOutDragAnimation() {
-    this.sliderManager = new hammer.hammer(this.hostElement);
-    this.sliderManager.get("pan").set({
-      direction: hammer.hammer.DIRECTION_HORIZONTAL,
-    });
-    this.sliderManager.on("pan", (e) => {
-      this.percentage = this.calculateDraggedPercentage(e);
-      this.hostElement.style.transition = "none";
-      this.hostElement.classList.remove(this.transition);
-      const translateObj = {
-        translate: `translateX(${this.percentage}%)`,
-        translateBack: "translateX(0)",
-      };
-      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;
-      if (e.eventType === hammer.hammer.DIRECTION_LEFT || e.eventType === hammer.hammer.DIRECTION_RIGHT) {
-        this.hostElement.style.transform = translateObj.translate;
-        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {
-          this.isCloseEventCalled = true;
-          this.emitToastClose(e.direction === hammer.hammer.DIRECTION_LEFT ? "slide-out-left" : "slide-out-right");
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toastClose = index.createEvent(this, "toastClose", 7);
+        this.isCloseEventCalled = false;
+        this.heading = undefined;
+        this.message = undefined;
+        this.closebutton = undefined;
+        this.autoclose = undefined;
+        this.pauseonfocusloss = true;
+        this.type = undefined;
+        this.isdraggable = true;
+        this.draggablepercentage = 80;
+        this.transition = undefined;
+        this.percentage = undefined;
+    }
+    watchPropIsdraggable(newValue) {
+        if (newValue) {
+            this.sliderManager.get("pan").set({ enable: true });
+        }
+        else {
+            this.sliderManager.get("pan").set({ enable: false });
+        }
+    }
+    watchPropAutoclose(newValue) {
+        clearTimeout(this.timeoutHandle);
+        this.startClosingTimeout(newValue);
+    }
+    watchPropPauseonfocusloss(newValue) {
+        if (this.autoclose) {
+            if (newValue) {
+                document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
+            }
+            else {
+                document.removeEventListener("visibilitychange", this.visibilityChangeEventHandler);
+            }
         }
-      }
-      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {
-        this.hostElement.style.transform = translateObj.translateBack;
-        this.hostElement.style.transition = "all 1s";
-        this.hostElement.style.opacity = "100%";
+    }
+    emitToastClose(cssClass) {
+        this.timeoutHandle = null;
+        this.elapsedTime = null;
+        this.hostElement.classList.add(cssClass);
+        this.toastClose.emit();
+    }
+    componentWillLoad() {
+        this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
+        this.validateAutoclose();
         this.percentage = 0;
-      }
-    });
-  }
-  onFocus() {
-    let time = this.autoclose;
-    if (this.elapsedTime) {
-      time = this.autoclose - this.elapsedTime;
-    }
-    if (time > 0) {
-      this.startClosingTimeout(time);
-    }
-  }
-  onBlur() {
-    this.elapsedTime = Date.now() - this.startTime;
-    clearTimeout(this.timeoutHandle);
-  }
-  startClosingTimeout(time) {
-    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
-  }
-  detectWrap() {
-    const parentWidth = this.container.offsetWidth;
-    const children = this.container.children;
-    let totalWidth = 0;
-    for (let i = 0; i < children.length; i++) {
-      totalWidth += children[i].offsetWidth;
-    }
-    return totalWidth > parentWidth;
-  }
-  renderText() {
-    return (index.h("div", { id: "text", ref: (el) => (this.toastText = el) }, index.h("span", { class: "title" }, this.heading), index.h("span", { class: "message" }, this.message)));
-  }
-  renderButton() {
-    return (index.h("div", { id: "button" }, index.h("slot", { name: "button" })));
-  }
-  renderCloseIcon() {
-    if (!this.closebutton) {
-      return;
-    }
-    return (index.h("div", { id: "icon" }, index.h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
-        if (e.keyCode == 32 || e.keyCode == 13) {
-          e.preventDefault();
-          this.emitToastClose(this.mapSlideOutClass());
+    }
+    componentDidLoad() {
+        this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
+        this.startTime = Date.now();
+        if (this.autoclose && this.pauseonfocusloss) {
+            document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
         }
-      } })));
-  }
-  renderContainer() {
-    return (index.h("div", { tabIndex: 0, id: "external-container", class: {
-        [this.type]: !!this.type,
-        "several-lines-padding": this.isTextLong,
-      }, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
-  }
-  renderMobileContainer() {
-    return (index.h("div", { id: "external-container", class: {
-        [this.type]: !!this.type,
-        "several-lines-padding": this.isTextLong,
-        "mobile-wrapped": this.isTextLong,
-      } }, index.h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
-  }
-  render() {
-    return (index.h(index.Host, { style: {
-        "--percentuale": `${this.percentage}%`,
-      }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
-        if (this.autoclose && e.animationName.includes("slidein")) {
-          this.startClosingTimeout(this.autoclose);
+        this.isdraggable && this.handleSlideOutDragAnimation();
+    }
+    visibilityChangeEventHandler() {
+        if (document.visibilityState === "hidden") {
+            this.timeoutHandle && this.onBlur();
+        }
+        else {
+            this.elapsedTime && this.onFocus();
+        }
+    }
+    validateAutoclose() {
+        if (!this.autoclose && !this.closebutton) {
+            console.error("At least one between autoclose and closebutton must be present");
         }
-        if (e.animationName.includes("slideout")) {
-          this.hostElement.parentNode.removeChild(this.hostElement);
+    }
+    mapSlideOutClass() {
+        switch (this.transition) {
+            case index$1.ToastNotificationTransition.SLIDE_IN_DOWN:
+                return index$1.ToastNotificationTransition.SLIDE_OUT_UP;
+            case index$1.ToastNotificationTransition.SLIDE_IN_UP:
+                return index$1.ToastNotificationTransition.SLIDE_OUT_DOWN;
+            case index$1.ToastNotificationTransition.SLIDE_IN_LEFT:
+                return index$1.ToastNotificationTransition.SLIDE_OUT_RIGHT;
+            case index$1.ToastNotificationTransition.SLIDE_IN_RIGHT:
+                return index$1.ToastNotificationTransition.SLIDE_OUT_LEFT;
         }
-      } }, this.isMobile ? this.renderMobileContainer() : this.renderContainer()));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "isdraggable": ["watchPropIsdraggable"],
-    "autoclose": ["watchPropAutoclose"],
-    "pauseonfocusloss": ["watchPropPauseonfocusloss"]
-  }; }
+    }
+    calculateDraggedPercentage(e) {
+        const bounding = this.hostElement.getBoundingClientRect();
+        return Math.round((100 * e.deltaX) / bounding.width);
+    }
+    handleSlideOutDragAnimation() {
+        this.sliderManager = new hammer.Hammer(this.hostElement);
+        this.sliderManager.get("pan").set({
+            direction: hammer.Hammer.DIRECTION_HORIZONTAL,
+        });
+        this.sliderManager.on("pan", (e) => {
+            this.percentage = this.calculateDraggedPercentage(e);
+            this.hostElement.style.transition = "none";
+            this.hostElement.classList.remove(this.transition);
+            const translateObj = {
+                translate: `translateX(${this.percentage}%)`,
+                translateBack: "translateX(0)",
+            };
+            this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;
+            if (e.eventType === hammer.Hammer.DIRECTION_LEFT || e.eventType === hammer.Hammer.DIRECTION_RIGHT) {
+                this.hostElement.style.transform = translateObj.translate;
+                if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {
+                    this.isCloseEventCalled = true;
+                    this.emitToastClose(e.direction === hammer.Hammer.DIRECTION_LEFT ? "slide-out-left" : "slide-out-right");
+                }
+            }
+            if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {
+                this.hostElement.style.transform = translateObj.translateBack;
+                this.hostElement.style.transition = "all 1s";
+                this.hostElement.style.opacity = "100%";
+                this.percentage = 0;
+            }
+        });
+    }
+    onFocus() {
+        let time = this.autoclose;
+        if (this.elapsedTime) {
+            time = this.autoclose - this.elapsedTime;
+        }
+        if (time > 0) {
+            this.startClosingTimeout(time);
+        }
+    }
+    onBlur() {
+        this.elapsedTime = Date.now() - this.startTime;
+        clearTimeout(this.timeoutHandle);
+    }
+    startClosingTimeout(time) {
+        this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
+    }
+    detectWrap() {
+        const parentWidth = this.container.offsetWidth;
+        const children = this.container.children;
+        let totalWidth = 0;
+        for (let i = 0; i < children.length; i++) {
+            totalWidth += children[i].offsetWidth;
+        }
+        return totalWidth > parentWidth;
+    }
+    renderText() {
+        return (index.h("div", { id: "text", ref: (el) => (this.toastText = el) }, index.h("span", { class: "title" }, this.heading), index.h("span", { class: "message" }, this.message)));
+    }
+    renderButton() {
+        return (index.h("div", { id: "button" }, index.h("slot", { name: "button" })));
+    }
+    renderCloseIcon() {
+        if (!this.closebutton) {
+            return;
+        }
+        return (index.h("div", { id: "icon" }, index.h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
+                if (e.keyCode == 32 || e.keyCode == 13) {
+                    e.preventDefault();
+                    this.emitToastClose(this.mapSlideOutClass());
+                }
+            } })));
+    }
+    renderContainer() {
+        return (index.h("div", { tabIndex: 0, id: "external-container", class: {
+                [this.type]: !!this.type,
+                "several-lines-padding": this.isTextLong,
+            }, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
+    }
+    renderMobileContainer() {
+        return (index.h("div", { id: "external-container", class: {
+                [this.type]: !!this.type,
+                "several-lines-padding": this.isTextLong,
+                "mobile-wrapped": this.isTextLong,
+            } }, index.h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd6ea4a44c85076f5db4dca3513e6f659f3405d13', style: {
+                "--percentuale": `${this.percentage}%`,
+            }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
+                if (this.autoclose && e.animationName.includes("slidein")) {
+                    this.startClosingTimeout(this.autoclose);
+                }
+                if (e.animationName.includes("slideout")) {
+                    this.hostElement.parentNode.removeChild(this.hostElement);
+                }
+            } }, this.isMobile ? this.renderMobileContainer() : this.renderContainer()));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "isdraggable": ["watchPropIsdraggable"],
+        "autoclose": ["watchPropAutoclose"],
+        "pauseonfocusloss": ["watchPropPauseonfocusloss"]
+    }; }
 };
-ZToastNotification.style = stylesCss;
+ZToastNotification.style = ZToastNotificationStyle0;
 
 exports.z_toast_notification = ZToastNotification;
+
+//# sourceMappingURL=z-toast-notification.cjs.entry.js.map

package/dist/cjs/z-toast-notification.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-toast-notification.entry.cjs.js","mappings":"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","names":["mobileBreakpoint","ToastNotificationTransition","Hammer","h","Host"],"sources":["src/components/notification/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/notification/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-icon01);\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, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} 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"],"version":3}