@zanichelli/albe-web-components 19.2.0 → 19.2.1

package/dist/collection/components/z-tag/index.js

@@ -13,10 +13,10 @@ export class ZTag {
     render() {
         var _a;
         const hasText = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
-        return (h(Host, { key: '1414ca0881e2a62586b1e093e1fef75f1f74f6fe', class: {
+        return (h(Host, { key: 'ed05949bf1f4fb03fdbecfaa7acb43bfbb6f8841', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": hasText,
-            } }, this.icon && h("z-icon", { key: '1be6964fc0121d351bbdebdfe255d26702e81f8f', name: this.icon }), h("div", { key: 'a7dac7e78d2cbc4a6d779a683e1d2b820af0fe6a' }, h("slot", { key: '95de2b4d5958f7af33015e887ac854c472979ae3' }))));
+            } }, this.icon && h("z-icon", { key: '72ebeed5930725102f4131acedeabc536d887a44', name: this.icon }), h("div", { key: '7528424efc94fad4b910f54365a20dd644962936' }, h("slot", { key: '951b325ae2b157d343fd6fbed8bc8d40fcdd9e37' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

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

@@ -2,6 +2,13 @@ import { Host, h } from "@stencil/core";
 import { KeyboardCode, ToastNotificationTransition } from "../../beans";
 import DOMPurify from "dompurify";
 import Hammer from "hammerjs";
+/** Map of slide-in transitions to their corresponding slide-out transitions */
+const SLIDE_OUT_TRANSITION_MAP = {
+    [ToastNotificationTransition.SLIDE_IN_DOWN]: ToastNotificationTransition.SLIDE_OUT_UP,
+    [ToastNotificationTransition.SLIDE_IN_UP]: ToastNotificationTransition.SLIDE_OUT_DOWN,
+    [ToastNotificationTransition.SLIDE_IN_LEFT]: ToastNotificationTransition.SLIDE_OUT_RIGHT,
+    [ToastNotificationTransition.SLIDE_IN_RIGHT]: ToastNotificationTransition.SLIDE_OUT_LEFT,
+};
 /**
  * ZToastNotification component.
  * @slot message - Custom HTML message
@@ -20,6 +27,7 @@ export class ZToastNotification {
         this.draggablepercentage = 80;
         this.transition = undefined;
         this.percentage = undefined;
+        this.hasSlottedButton = undefined;
     }
     watchPropIsdraggable(newValue) {
         if (newValue) {
@@ -43,36 +51,20 @@ export class ZToastNotification {
             }
         }
     }
-    emitToastClose(cssClass, stopTimer) {
+    close(closingTransition, stopTimer) {
         if (stopTimer && this.timeoutHandle) {
             clearTimeout(this.timeoutHandle);
         }
         this.timeoutHandle = null;
         this.elapsedTime = null;
         this.toastClose.emit();
-        if (cssClass) {
-            this.hostElement.classList.add(cssClass);
+        if (closingTransition) {
+            this.hostElement.classList.add(closingTransition);
         }
         else {
             this.hostElement.parentNode.removeChild(this.hostElement);
         }
     }
-    componentWillLoad() {
-        this.validateAutoclose();
-        this.percentage = 0;
-    }
-    componentDidLoad() {
-        this.startTime = Date.now();
-        if (this.autoclose) {
-            if (this.pauseonfocusloss) {
-                document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
-            }
-            if (!this.transition) {
-                this.startClosingTimeout(this.autoclose);
-            }
-        }
-        this.isdraggable && this.handleSlideOutDragAnimation();
-    }
     visibilityChangeEventHandler() {
         if (document.visibilityState === "hidden") {
             this.timeoutHandle && this.onBlur();
@@ -86,20 +78,6 @@ export class ZToastNotification {
             console.error("At least one between autoclose and closebutton must be present");
         }
     }
-    mapSlideOutClass() {
-        switch (this.transition) {
-            case ToastNotificationTransition.SLIDE_IN_DOWN:
-                return ToastNotificationTransition.SLIDE_OUT_UP;
-            case ToastNotificationTransition.SLIDE_IN_UP:
-                return ToastNotificationTransition.SLIDE_OUT_DOWN;
-            case ToastNotificationTransition.SLIDE_IN_LEFT:
-                return ToastNotificationTransition.SLIDE_OUT_RIGHT;
-            case ToastNotificationTransition.SLIDE_IN_RIGHT:
-                return ToastNotificationTransition.SLIDE_OUT_LEFT;
-            default:
-                return null;
-        }
-    }
     calculateDraggedPercentage(e) {
         const bounding = this.hostElement.getBoundingClientRect();
         return Math.round((100 * e.deltaX) / bounding.width);
@@ -124,7 +102,9 @@ export class ZToastNotification {
                 this.hostElement.style.transform = translateObj.translate;
                 if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {
                     this.isCloseEventCalled = true;
-                    this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? "slide-out-left" : "slide-out-right", true);
+                    this.close(e.direction === Hammer.DIRECTION_LEFT
+                        ? ToastNotificationTransition.SLIDE_OUT_LEFT
+                        : ToastNotificationTransition.SLIDE_OUT_RIGHT, true);
                 }
             }
             if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {
@@ -149,25 +129,42 @@ export class ZToastNotification {
         clearTimeout(this.timeoutHandle);
     }
     startClosingTimeout(time) {
-        this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);
+        this.timeoutHandle = window.setTimeout(() => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], false), time);
     }
-    renderContent() {
-        return (h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, h("div", { id: "inner-container" }, h("div", { id: "text" }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, h("slot", { name: "message" }, h("span", { innerHTML: DOMPurify.sanitize(this.message || " ") })))), h("div", { id: "button" }, h("slot", { name: "button" }))), h("div", { id: "icon" }, this.closebutton && (h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass(), true), onKeyPress: (e) => {
-                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
-                    e.preventDefault();
-                    this.emitToastClose(this.mapSlideOutClass(), true);
-                }
-            } })))));
+    checkSlottedButton() {
+        this.hasSlottedButton = !!this.hostElement.querySelector("[slot='button']");
+    }
+    componentWillLoad() {
+        this.validateAutoclose();
+        this.checkSlottedButton();
+        this.percentage = 0;
+    }
+    componentDidLoad() {
+        this.startTime = Date.now();
+        if (this.autoclose) {
+            if (this.pauseonfocusloss) {
+                document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
+            }
+            if (!this.transition) {
+                this.startClosingTimeout(this.autoclose);
+            }
+        }
+        this.isdraggable && this.handleSlideOutDragAnimation();
     }
     render() {
-        return (h(Host, { key: '9961ade1e0cb9ac345293770938cb7540656282c', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
+        return (h(Host, { key: '4dddb200f4671bbd69e8d1470d0d441678da3039', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, 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.renderContent()));
+            } }, h("div", { key: '424761a172e8f139e35d9c1b2139a4093e5ac48d', class: "toast-notification-container" }, h("div", { key: 'f1f8f3b2cfb8dde84ba0e136ac94631b47993975', class: "toast-notification-content" }, h("div", { key: '75c17b6a15c05dea66744ddb08a9abfcda21be28', class: "toast-notification-text" }, this.heading && h("span", { key: '94eda50ee38a39cec7056ee113b9863b54ed1555', class: "title" }, this.heading), h("span", { key: 'def713dd54fac1d0332c82c12ec4878672dddf1f', class: "message" }, h("slot", { key: '30cd97c7a2381c5a25e1b184524cb2fce29a549c', name: "message" }, this.message && h("span", { key: 'fc4c5cf459f595cb3727d5328ecb12419d1ea405', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '994505f881dbe43ab69eb42c449afb0dc4d46336', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'b4a78b86c8d3b98750bcafee88d43bb47712558c', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '6658b9fe87e402ad434afe3bc50d4bf99f19b7a4', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
+                    e.preventDefault();
+                    this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
+                }
+            } }, h("z-icon", { key: '2edf589b7755c20c21217a8161736eeee5859cc9', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -355,7 +352,8 @@ export class ZToastNotification {
     }
     static get states() {
         return {
-            "percentage": {}
+            "percentage": {},
+            "hasSlottedButton": {}
         };
     }
     static get events() {

package/dist/collection/components/z-toast-notification/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport DOMPurify from \"dompurify\";\nimport Hammer from \"hammerjs\";\n\n/**\n * ZToastNotification component.\n * @slot message - Custom HTML message\n * @slot button - Custom button\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 sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\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, stopTimer: boolean): void {\n    if (stopTimer && this.timeoutHandle) {\n      clearTimeout(this.timeoutHandle);\n    }\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.toastClose.emit();\n    if (cssClass) {\n      this.hostElement.classList.add(cssClass);\n    } else {\n      this.hostElement.parentNode.removeChild(this.hostElement);\n    }\n  }\n\n  componentWillLoad(): void {\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.startTime = Date.now();\n    if (this.autoclose) {\n      if (this.pauseonfocusloss) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n      if (!this.transition) {\n        this.startClosingTimeout(this.autoclose);\n      }\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      default:\n        return null;\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      if (this.transition) {\n        this.hostElement.classList.remove(this.transition);\n      }\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\", true);\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(), false), time);\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        tabIndex={0}\n        class={{[this.type]: !!this.type}}\n      >\n        <div id=\"inner-container\">\n          <div id=\"text\">\n            {this.heading && <span class=\"title\">{this.heading}</span>}\n            <span class=\"message\">\n              <slot name=\"message\">\n                <span innerHTML={DOMPurify.sanitize(this.message || \" \")} />\n              </slot>\n            </span>\n          </div>\n          <div id=\"button\">\n            <slot name=\"button\" />\n          </div>\n        </div>\n        <div id=\"icon\">\n          {this.closebutton && (\n            <z-icon\n              tabIndex={0}\n              name=\"multiply-circled\"\n              width={15}\n              height={15}\n              onClick={() => this.emitToastClose(this.mapSlideOutClass(), true)}\n              onKeyPress={(e) => {\n                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {\n                  e.preventDefault();\n                  this.emitToastClose(this.mapSlideOutClass(), true);\n                }\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\"--percentuale\": `${this.percentage}%`}}\n        class={this.transition ? this.transition : \"\"}\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.renderContent()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport DOMPurify from \"dompurify\";\nimport Hammer from \"hammerjs\";\n\n/** Map of slide-in transitions to their corresponding slide-out transitions */\nconst SLIDE_OUT_TRANSITION_MAP = {\n  [ToastNotificationTransition.SLIDE_IN_DOWN]: ToastNotificationTransition.SLIDE_OUT_UP,\n  [ToastNotificationTransition.SLIDE_IN_UP]: ToastNotificationTransition.SLIDE_OUT_DOWN,\n  [ToastNotificationTransition.SLIDE_IN_LEFT]: ToastNotificationTransition.SLIDE_OUT_RIGHT,\n  [ToastNotificationTransition.SLIDE_IN_RIGHT]: ToastNotificationTransition.SLIDE_OUT_LEFT,\n};\n\n/**\n * ZToastNotification component.\n * @slot message - Custom HTML message\n * @slot button - Custom button\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  /** Indicates if the toast notification has a slotted button. */\n  @State()\n  hasSlottedButton: boolean;\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\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  private close(closingTransition: string, stopTimer: boolean): void {\n    if (stopTimer && this.timeoutHandle) {\n      clearTimeout(this.timeoutHandle);\n    }\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.toastClose.emit();\n    if (closingTransition) {\n      this.hostElement.classList.add(closingTransition);\n    } else {\n      this.hostElement.parentNode.removeChild(this.hostElement);\n    }\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 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      if (this.transition) {\n        this.hostElement.classList.remove(this.transition);\n      }\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.close(\n            e.direction === Hammer.DIRECTION_LEFT\n              ? ToastNotificationTransition.SLIDE_OUT_LEFT\n              : ToastNotificationTransition.SLIDE_OUT_RIGHT,\n            true\n          );\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.close(SLIDE_OUT_TRANSITION_MAP[this.transition], false), time);\n  }\n\n  private checkSlottedButton(): void {\n    this.hasSlottedButton = !!this.hostElement.querySelector(\"[slot='button']\");\n  }\n\n  componentWillLoad(): void {\n    this.validateAutoclose();\n    this.checkSlottedButton();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.startTime = Date.now();\n    if (this.autoclose) {\n      if (this.pauseonfocusloss) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n      if (!this.transition) {\n        this.startClosingTimeout(this.autoclose);\n      }\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\"--percentuale\": `${this.percentage}%`}}\n        class={{[this.transition]: !!this.transition, [this.type]: !!this.type}}\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        <div class=\"toast-notification-container\">\n          <div class=\"toast-notification-content\">\n            <div class=\"toast-notification-text\">\n              {this.heading && <span class=\"title\">{this.heading}</span>}\n              <span class=\"message\">\n                <slot name=\"message\">{this.message && <span innerHTML={DOMPurify.sanitize(this.message)} />}</slot>\n              </span>\n            </div>\n            <div\n              class=\"button-container\"\n              hidden={!this.hasSlottedButton}\n            >\n              <slot\n                name=\"button\"\n                onSlotchange={() => this.checkSlottedButton()}\n              />\n            </div>\n          </div>\n          {this.closebutton && (\n            <button\n              class=\"close-button\"\n              aria-label=\"Chiudi notifica\"\n              onClick={() => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true)}\n              onKeyDown={(e) => {\n                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {\n                  e.preventDefault();\n                  this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);\n                }\n              }}\n            >\n              <z-icon name=\"multiply-circled\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-toast-notification/index.stories.js

@@ -22,7 +22,7 @@ const StoryMeta = {
     argTypes: {
         type: {
             control: {
-                type: "select",
+                type: "inline-radio",
             },
             options: Object.values(ToastNotification),
         },
@@ -125,6 +125,7 @@ export const SlottedButtonLongText = {
 };
 export const SlottedMessage = {
     args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
+    parameters: { controls: { exclude: ["message"] } },
     render: (args) => html `<div class="toast-container">
       <z-toast-notification
         heading="${args.heading}"
@@ -150,6 +151,7 @@ export const SlottedMessage = {
 };
 export const SlottedMessageLongText = {
     args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
+    parameters: { controls: { exclude: ["message"] } },
     render: (args) => html `<div class="toast-container">
       <z-toast-notification
         heading="Titolo abbastanza lungo"

package/dist/collection/components/z-toast-notification/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst longText =\n  \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst template = (args): TemplateResult =>\n  html`<div class=\"toast-container\">\n    <z-toast-notification\n      heading=\"${args.heading}\"\n      message=\"${args.message}\"\n      closebutton=\"${args.closebutton}\"\n      autoclose=\"${args.autoclose}\"\n      pauseonfocusloss=\"${args.pauseonfocusloss}\"\n      type=\"${args.type}\"\n      isdraggable=\"${args.isdraggable}\"\n      draggablepercentage=\"${args.draggablepercentage}\"\n      transition=\"${args.transition}\"\n    ></z-toast-notification>\n  </div>`;\n\nconst StoryMeta = {\n  title: \"ZToastNotification\",\n  component: \"z-toast-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotification),\n    },\n    transition: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotificationTransition),\n    },\n  },\n  args: {\n    heading: \"Titolo\",\n    message: \"Questo è un messaggio di prova.\",\n    closebutton: true,\n    autoclose: null,\n    pauseonfocusloss: false,\n    type: ToastNotification.DARK,\n    isdraggable: true,\n    draggablepercentage: 80,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const NoSlideIn = {\n  args: {\n    message: \"Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato\",\n  },\n} satisfies Story;\n\nexport const SlideInRight = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n  },\n} satisfies Story;\n\nexport const SlideInLeft = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n  },\n} satisfies Story;\n\nexport const SlideInDownNoCloseButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n    closebutton: false,\n  },\n} satisfies Story;\n\nexport const SlideInUpLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_UP,\n    message: longText,\n  },\n} satisfies Story;\n\nexport const SlottedButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        message=\"${args.message}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedButtonLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        message=${longText}\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessage = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >Messaggio con\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          >\n          e <b>grassetto</b></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessageLongText = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >${longText}\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          ></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst longText =\n  \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst template = (args): TemplateResult =>\n  html`<div class=\"toast-container\">\n    <z-toast-notification\n      heading=\"${args.heading}\"\n      message=\"${args.message}\"\n      closebutton=\"${args.closebutton}\"\n      autoclose=\"${args.autoclose}\"\n      pauseonfocusloss=\"${args.pauseonfocusloss}\"\n      type=\"${args.type}\"\n      isdraggable=\"${args.isdraggable}\"\n      draggablepercentage=\"${args.draggablepercentage}\"\n      transition=\"${args.transition}\"\n    ></z-toast-notification>\n  </div>`;\n\nconst StoryMeta = {\n  title: \"ZToastNotification\",\n  component: \"z-toast-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ToastNotification),\n    },\n    transition: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotificationTransition),\n    },\n  },\n  args: {\n    heading: \"Titolo\",\n    message: \"Questo è un messaggio di prova.\",\n    closebutton: true,\n    autoclose: null,\n    pauseonfocusloss: false,\n    type: ToastNotification.DARK,\n    isdraggable: true,\n    draggablepercentage: 80,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const NoSlideIn = {\n  args: {\n    message: \"Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato\",\n  },\n} satisfies Story;\n\nexport const SlideInRight = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n  },\n} satisfies Story;\n\nexport const SlideInLeft = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n  },\n} satisfies Story;\n\nexport const SlideInDownNoCloseButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n    closebutton: false,\n  },\n} satisfies Story;\n\nexport const SlideInUpLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_UP,\n    message: longText,\n  },\n} satisfies Story;\n\nexport const SlottedButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        message=\"${args.message}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedButtonLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        message=${longText}\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessage = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  parameters: {controls: {exclude: [\"message\"]}},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >Messaggio con\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          >\n          e <b>grassetto</b></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessageLongText = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  parameters: {controls: {exclude: [\"message\"]}},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >${longText}\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          ></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-toast-notification/styles.css

@@ -1,9 +1,19 @@
 :host {
-  display: inline-block;
-  width: 100vw;
-  min-width: 200px;
-
   --percentuale: 0;
+
+  display: flex;
+  width: 100%;
+  min-width: 200px;
+  max-width: 100dvw;
+  box-sizing: border-box;
+  background: var(--color-surface01);
+  border-radius: var(--border-size-large);
+  box-shadow: var(--shadow-3);
+  color: var(--color-default-text);
+  fill: var(--color-primary01-icon);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
 }
 
 :host(.slide-in-left) {
@@ -46,6 +56,116 @@
   animation-fill-mode: forwards;
 }
 
+.toast-notification-container {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 2);
+  border-radius: var(--border-radius);
+  gap: calc(var(--space-unit) * 2);
+}
+
+.toast-notification-content {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: calc(var(--space-unit) * 2);
+}
+
+.toast-notification-content .toast-notification-text {
+  color: inherit;
+  letter-spacing: 0.16px;
+  line-height: 1.25rem;
+}
+
+.toast-notification-content .toast-notification-text .title {
+  margin-right: calc(var(--space-unit) / 2);
+  font-weight: var(--font-sb);
+}
+
+.close-button {
+  height: 1.125rem; /* same height of the icon */
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.close-button z-icon {
+  --z-icon-width: 1.125rem;
+  --z-icon-height: 1.125rem;
+
+  display: inline-block;
+  height: 1.25rem;
+}
+
+.close-button:focus:focus-visible {
+  border-radius: 50%;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host(.dark) {
+  background: var(--color-surface05);
+  color: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
+}
+
+:host(.dark) .close-button:focus:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--gray900),
+    0 0 2px 5px var(--blue25);
+}
+
+:host(.accent) {
+  background: var(--color-primary01);
+}
+
+:host(.error) {
+  background: var(--color-default-error);
+}
+
+:host(.success) {
+  background: var(--color-default-success);
+}
+
+:host(.warning) {
+  background: var(--color-default-warning);
+}
+
+:host(.accent),
+:host(.error),
+:host(.success) {
+  color: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
+}
+
+:host(.warning) .close-button {
+  fill: var(--color-default-icon);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host {
+    width: fit-content;
+    max-width: 50vw;
+  }
+
+  .toast-notification-content {
+    flex-wrap: nowrap;
+  }
+}
+
+/* Wide breakpoint */
+@media (min-width: 1366px) {
+  :host {
+    max-width: 33vw;
+  }
+}
+
 @keyframes slideinleft {
   0% {
     transform: translateX(100%);
@@ -139,123 +259,3 @@
     transform: translateY(100%);
   }
 }
-
-:host > #external-container {
-  display: flex;
-  min-height: calc(var(--space-unit) * 8.5);
-  box-sizing: border-box;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 2) 14px calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
-  border-radius: var(--border-size-large);
-  box-shadow: var(--shadow-3);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  letter-spacing: 0.16px;
-}
-
-:host > #external-container > #inner-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-:host > #external-container #inner-container #text {
-  padding: var(--space-unit) 0;
-  color: var(--color-text-inverse);
-  letter-spacing: 0.16px;
-  line-height: 20px;
-  text-align: start;
-}
-
-:host > #external-container #inner-container #text > .title {
-  margin-right: calc(var(--space-unit) / 2);
-  font-weight: var(--font-sb);
-}
-
-:host > #external-container #inner-container ::slotted([slot="button"]) {
-  margin-top: var(--space-unit);
-}
-
-:host > #external-container #icon {
-  padding-top: var(--space-unit);
-  margin: 0 calc(var(--space-unit) / 4);
-  cursor: pointer;
-  fill: var(--color-inverse-icon);
-}
-
-:host > #external-container #icon:focus-within {
-  margin: 0;
-}
-
-:host > #external-container #icon z-icon {
-  margin: 0 0 0 14px;
-}
-
-:host > #external-container #icon z-icon:focus {
-  display: inline-block;
-  padding: calc(var(--space-unit) / 4);
-  border-radius: 50%;
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host > #external-container.dark {
-  background: var(--color-surface05);
-}
-
-:host > #external-container.light {
-  background: var(--color-surface01);
-}
-
-:host > #external-container.light #icon {
-  fill: var(--color-primary01-icon);
-}
-
-:host > #external-container.light #inner-container #text,
-:host > #external-container.warning #inner-container #text {
-  color: var(--color-default-text);
-}
-
-:host > #external-container.accent {
-  background: var(--color-primary01);
-}
-
-:host > #external-container.error {
-  background: var(--color-default-error);
-}
-
-:host > #external-container.success {
-  background: var(--color-default-success);
-}
-
-:host > #external-container.warning {
-  background: var(--color-default-warning);
-}
-
-:host > #external-container.warning #icon {
-  fill: var(--color-default-icon);
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host {
-    width: unset;
-    max-width: 50vw;
-  }
-
-  :host > #external-container #inner-container {
-    flex-direction: row;
-  }
-
-  :host > #external-container #inner-container ::slotted([slot="button"]) {
-    margin: 0 0 0 calc(var(--space-unit) * 2);
-  }
-}
-
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-  :host {
-    max-width: 33vw;
-  }
-}

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

@@ -36,7 +36,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: '79ec79d2c335ec8426f1c7938351edc8b731058b', name: "toasts" });
+        return h("slot", { key: 'fcca8c71a9eca7ada8de9d23d4930ec6796b2925', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-button/index.js

@@ -15,10 +15,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: 'bb5204888ed781929850a5c094cab99a24a6cb1c', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'efdc08be8758803884a56014e724b6a3eb315784', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get is() { return "z-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-switch/index.js

@@ -22,14 +22,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '9120676414a277bcb8e4065053b0aaad1d409ec8' }, h("input", { key: '740b199120f448f225068f6a927ae392d5eb909f', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'fcb131a2e4a88c821fd3e9d6f4d0aae7e0ea690d', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'b572a91e4ed2f91cbe0b7a393371425a5b9b896a' }, h("input", { key: 'acff3447044eba6dd7622feb954a03d5503111f1', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '58b70932d34e39bb1c078947eea614d6384b9660', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '2b9f61e89130980eefabb651d0c9c906322092f3' }, h("slot", { key: 'b99547f1dbdaa8cc212c0949307ae1c61b234d40' })), h("span", { key: '010e9e4b9a47e58a14b54a540bb0b07d5d5b6c50', class: {
+            } }, h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: 'c42cc68eb1f57de72a035e32f1cff8dcbc7f736b', class: "circle" }, this.checked && (h("z-icon", { key: '497788b7e87823921ea47973be378c74138d8f48', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-tool/index.js

@@ -181,10 +181,10 @@ export class ZTool {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (h(Host, { key: '81b929ee3738e7533405c8ea47535d7fb52bfb92', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '1b68af441ac69dbdf805b823b852c093b944e586', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, h("z-icon", { key: '580cf2210393974cb2300ea6e50018149f6ef123', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '9b0e197d25135e1a0016fbbdca48751e8350be7b', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: 'd6580708f0b79853cc3644cb6ea61b64cbe73a21', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '121b6662678738de67739beb733edfe94a6df3f6', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (h(Host, { key: '206a8594f395b3be01956358cb59968c69cc1317', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '0ad3f51d384386005f5cd4ca2bdf9e9c9b49c7d2', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, h("z-icon", { key: '67a9360a49a09d6cb715314a610af87aec542608', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '7c66f173dc55e4757302c659d56f8d0acf310b76', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: '7ceeeb537eb0292e629952da4aa932644a7468cf', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '27fde7bbc6dddb8f081bd47491dc91a70538271a', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
             /* disable auto-close to prevent unwanted close behaviors on mobile,
             when the bound element is the main toolbar */
-            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: '6bb4815374940bd0ce6dc21bf38a1372454bf830' })))));
+            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'e31fd30c100e732f4aca6b038d277d99b6543589' })))));
     }
     static get is() { return "z-tool"; }
     static get encapsulation() { return "shadow"; }