@zanichelli/albe-web-components 14.5.0 → 14.5.2-rc-anchor-navigation

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

@@ -0,0 +1,406 @@
+import { Host, h } from "@stencil/core";
+import { ToastNotificationTransition } from "../../beans";
+import { mobileBreakpoint } from "../../constants/breakpoints";
+import Hammer from "hammerjs";
+export class ZToastNotification {
+    constructor() {
+        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);
+            }
+        }
+    }
+    emitToastClose(cssClass) {
+        this.timeoutHandle = null;
+        this.elapsedTime = null;
+        this.hostElement.classList.add(cssClass);
+        this.toastClose.emit();
+    }
+    componentWillLoad() {
+        this.isMobile = window.innerWidth <= 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 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;
+        }
+    }
+    calculateDraggedPercentage(e) {
+        const bounding = this.hostElement.getBoundingClientRect();
+        return Math.round((100 * e.deltaX) / bounding.width);
+    }
+    handleSlideOutDragAnimation() {
+        this.sliderManager = new Hammer(this.hostElement);
+        this.sliderManager.get("pan").set({
+            direction: 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.DIRECTION_LEFT || e.eventType === 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.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 (h("div", { id: "text", ref: (el) => (this.toastText = el) }, h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)));
+    }
+    renderButton() {
+        return (h("div", { id: "button" }, h("slot", { name: "button" })));
+    }
+    renderCloseIcon() {
+        if (!this.closebutton) {
+            return;
+        }
+        return (h("div", { id: "icon" }, 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 (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 (h("div", { id: "external-container", class: {
+                [this.type]: !!this.type,
+                "several-lines-padding": this.isTextLong,
+                "mobile-wrapped": this.isTextLong,
+            } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
+    }
+    render() {
+        return (h(Host, { key: 'bf20c69f253b702092fe078443eedb9e86fe223a', style: {
+                "--percentuale": `${this.percentage}%`,
+            }, class: this.transition ? this.transition : 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()));
+    }
+    static get is() { return "z-toast-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification's title"
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification's message"
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "closebutton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "toggles closing button rendering"
+                },
+                "attribute": "closebutton",
+                "reflect": false
+            },
+            "autoclose": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification closing timeout (ms)"
+                },
+                "attribute": "autoclose",
+                "reflect": false
+            },
+            "pauseonfocusloss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification autoclose can be paused"
+                },
+                "attribute": "pauseonfocusloss",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastNotification",
+                    "resolved": "ToastNotification.ACCENT | ToastNotification.DARK | ToastNotification.ERROR | ToastNotification.LIGHT | ToastNotification.SUCCESS | ToastNotification.WARNING",
+                    "references": {
+                        "ToastNotification": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ToastNotification"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification type: dark, light, accent, error, success, warning"
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "isdraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification can be draggable"
+                },
+                "attribute": "isdraggable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "draggablepercentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification draggable percentage"
+                },
+                "attribute": "draggablepercentage",
+                "reflect": false,
+                "defaultValue": "80"
+            },
+            "transition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastNotificationTransition",
+                    "resolved": "ToastNotificationTransition.SLIDE_IN_DOWN | ToastNotificationTransition.SLIDE_IN_LEFT | ToastNotificationTransition.SLIDE_IN_RIGHT | ToastNotificationTransition.SLIDE_IN_UP | ToastNotificationTransition.SLIDE_OUT_DOWN | ToastNotificationTransition.SLIDE_OUT_LEFT | ToastNotificationTransition.SLIDE_OUT_RIGHT | ToastNotificationTransition.SLIDE_OUT_UP",
+                    "references": {
+                        "ToastNotificationTransition": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ToastNotificationTransition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up"
+                },
+                "attribute": "transition",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "percentage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toastClose",
+                "name": "toastClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "notification close event"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "isdraggable",
+                "methodName": "watchPropIsdraggable"
+            }, {
+                "propName": "autoclose",
+                "methodName": "watchPropAutoclose"
+            }, {
+                "propName": "pauseonfocusloss",
+                "methodName": "watchPropPauseonfocusloss"
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAC7C,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,kBAAkB,CAAC;YAChC,IAAI,EAAE,kEAAkE;SACzE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;KAiB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,kBAAkB,CAAC;YAChC,IAAI,EAAE;;;;;;;+BAOmB;SAC1B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;KAqB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,kBAAkB,CAAC;YAChC,IAAI,EAAE;;;;;;;;;8BASkB;SACzB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZToastNotification} from \"./index\";\n\ndescribe(\"Suite test ZToastNotification\", () => {\n  it(\"Test render ZToastNotification vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZToastNotification],\n      html: `<z-toast-notification closebutton=\"true\"></z-toast-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-toast-notification closebutton=\"true\" class=\"slide-in-down\" style=\"--percentuale: 0%; undefined: rgba(0,0,0,0);\">\n      <mock:shadow-root>\n        <div id=\"external-container\" tabindex=\"0\">\n          <div id=\"text\">\n            <span class=\"title\"></span>\n            <span class=\"message\"></span>\n          </div>\n          <div id=\"button\">\n            <slot name=\"button\"></slot>\n          </div>\n          <div id=\"icon\">\n            <z-icon height=\"15\" name=\"multiply-circled\" tabindex=\"0\" width=\"15\"></z-icon>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </z-toast-notification>\n    `);\n  });\n\n  it(\"Test render ZToastNotification con props e closebutton\", async () => {\n    const page = await newSpecPage({\n      components: [ZToastNotification],\n      html: `<z-toast-notification\n        heading=\"Titolo\"\n        type=\"dark\"\n        message=\"descrizione della notifica\"\n        closebutton=\"true\"\n        transition=\"slide-in-down\"\n        draggablepercentage=\"10\"\n      ></z-toast-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-toast-notification class=\"slide-in-down\" closebutton=\"true\" draggablepercentage=\"10\" heading=\"Titolo\" message=\"descrizione della notifica\" transition=\"slide-in-down\" type=\"dark\" style=\"--percentuale: 0%; undefined: rgba(0,0,0,0);\">\n      <mock:shadow-root>\n        <div class=\"dark\" id=\"external-container\" tabindex=\"0\">\n          <div id=\"text\">\n            <span class=\"title\">\n              Titolo\n            </span>\n            <span class=\"message\">\n              descrizione della notifica\n            </span>\n          </div>\n          <div id=\"button\">\n            <slot name=\"button\"></slot>\n          </div>\n          <div id=\"icon\">\n            <z-icon height=\"15\" name=\"multiply-circled\" tabindex=\"0\" width=\"15\"></z-icon>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </z-toast-notification>\n    `);\n  });\n\n  it(\"Test render ZToastNotification con props e slot\", async () => {\n    const page = await newSpecPage({\n      components: [ZToastNotification],\n      html: `<z-toast-notification\n        heading=\"Titolo\"\n        type=\"dark\"\n        message=\"descrizione della notifica\"\n        closebutton=\"true\"\n        transition=\"slide-in-down\"\n        draggablepercentage=\"10\"\n      >\n        <z-button slot=\"button\">button</z-button>\n      </z-toast-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-toast-notification class=\"slide-in-down\" closebutton=\"true\" draggablepercentage=\"10\" heading=\"Titolo\" message=\"descrizione della notifica\" transition=\"slide-in-down\" type=\"dark\" style=\"--percentuale: 0%; undefined: rgba(0,0,0,0);\">\n      <mock:shadow-root>\n        <div class=\"dark\" id=\"external-container\" tabindex=\"0\">\n          <div id=\"text\">\n            <span class=\"title\">\n              Titolo\n            </span>\n            <span class=\"message\">\n              descrizione della notifica\n            </span>\n          </div>\n          <div id=\"button\">\n            <slot name=\"button\"></slot>\n          </div>\n          <div id=\"icon\">\n            <z-icon height=\"15\" name=\"multiply-circled\" tabindex=\"0\" width=\"15\"></z-icon>\n          </div>\n        </div>\n      </mock:shadow-root>\n      <z-button slot=\"button\">\n        button\n      </z-button>\n    </z-toast-notification>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,89 @@
+import { html } from "lit";
+import { ToastNotification, ToastNotificationTransition } from "../../beans";
+import "../z-button/index";
+import "./index";
+const template = (args) => html `<div class="toast-container">
+    <z-toast-notification
+      heading="${args.heading}"
+      message="${args.message}"
+      closebutton="${args.closebutton}"
+      autoclose="${args.autoclose}"
+      pauseonfocusloss="${args.pauseonfocusloss}"
+      type="${args.type}"
+      isdraggable="${args.isdraggable}"
+      draggablepercentage="${args.draggablepercentage}"
+      transition="${args.transition}"
+    ></z-toast-notification>
+  </div>`;
+const StoryMeta = {
+    title: "ZToastNotification",
+    component: "z-toast-notification",
+    argTypes: {
+        type: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(ToastNotification),
+        },
+        transition: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(ToastNotificationTransition),
+        },
+    },
+    args: {
+        heading: "Titolo",
+        message: "Questo è un messaggio di prova.",
+        closebutton: true,
+        autoclose: null,
+        pauseonfocusloss: false,
+        type: ToastNotification.DARK,
+        isdraggable: true,
+        draggablepercentage: 80,
+        transition: ToastNotificationTransition.SLIDE_IN_RIGHT,
+    },
+    render: (args) => template(args),
+};
+export default StoryMeta;
+export const SlideInRight = {};
+export const SlideInLeft = {
+    args: {
+        transition: ToastNotificationTransition.SLIDE_IN_LEFT,
+    },
+};
+export const SlideInDown = {
+    args: {
+        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
+    },
+};
+export const SlideInUp = {
+    args: {
+        transition: ToastNotificationTransition.SLIDE_IN_UP,
+    },
+};
+export const SlottedButton = {
+    args: {
+        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
+    },
+    render: (args) => html `<div class="toast-container slotted-button">
+      <z-toast-notification
+        heading="${args.heading}"
+        message="${args.message}"
+        closebutton="${args.closebutton}"
+        autoclose="${args.autoclose}"
+        pauseonfocusloss="${args.pauseonfocusloss}"
+        type="${args.type}"
+        isdraggable="${args.isdraggable}"
+        draggablepercentage="${args.draggablepercentage}"
+        transition="${args.transition}"
+      >
+        <z-button
+          slot="button"
+          size="small"
+          >button</z-button
+        >
+      </z-toast-notification>
+    </div>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AAEjB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE,CACxC,IAAI,CAAA;;iBAEW,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW;mBAClB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,gBAAgB;cACjC,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;6BACR,IAAI,CAAC,mBAAmB;oBACjC,IAAI,CAAC,UAAU;;SAE1B,CAAC;AACV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC1C;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC;SACpD;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,iCAAiC;QAC1C,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,mBAAmB,EAAE,EAAE;QACvB,UAAU,EAAE,2BAA2B,CAAC,cAAc;KACvD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACE,CAAC;AACrC,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,YAAY,GAAG,EAAkB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,WAAW;KACpD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;WAQ1B;CACM,CAAC","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 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>`;\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    transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const SlideInRight = {} satisfies Story;\n\nexport const SlideInLeft = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n  },\n} satisfies Story;\n\nexport const SlideInDown = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n} satisfies Story;\n\nexport const SlideInUp = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_UP,\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          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n"]}

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

@@ -0,0 +1,107 @@
+import { h } from "@stencil/core";
+import { ToastNotificationPosition } from "../../beans";
+export class ZToastNotificationList {
+    constructor() {
+        this.position = ToastNotificationPosition.TOP_RIGHT;
+        this.newestontop = true;
+    }
+    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() {
+        if (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.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 h("slot", { key: 'ead27e0dd8742e6008aa4fc6ffa4129cae868af8', name: "toasts" });
+    }
+    static get is() { return "z-toast-notification-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastNotificationPosition",
+                    "resolved": "ToastNotificationPosition.BOTTOM_CENTRE | ToastNotificationPosition.BOTTOM_LEFT | ToastNotificationPosition.BOTTOM_RIGHT | ToastNotificationPosition.TOP_CENTRE | ToastNotificationPosition.TOP_LEFT | ToastNotificationPosition.TOP_RIGHT",
+                    "references": {
+                        "ToastNotificationPosition": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ToastNotificationPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right"
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "ToastNotificationPosition.TOP_RIGHT"
+            },
+            "newestontop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the entry position of new notification in the list"
+                },
+                "attribute": "newestontop",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "newestontop",
+                "methodName": "watchPropNewestontop"
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map