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

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

@@ -1,406 +0,0 @@
-import { h, Host } 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: 'aeaadb9a5b9ee6e77cfd1e991eec225364456e9e', 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/notification/z-toast-notification/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/notification/z-toast-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,2BAA2B,EAAoB,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAC,gBAAgB,EAAC,MAAM,gCAAgC,CAAC;AAEhE,OAAO,MAAM,MAAM,UAAU,CAAC;AAO9B,MAAM,OAAO,kBAAkB;;QA0DrB,uBAAkB,GAAG,KAAK,CAAC;;;;;gCArCN,IAAI;;2BAQT,IAAI;mCAIG,EAAE;;;;IA4BjC,oBAAoB,CAAC,QAAiB;QACpC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAC,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAGD,kBAAkB,CAAC,QAAgB;QACjC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAGD,yBAAyB,CAAC,QAAiB;QACzC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;YACnF,CAAC;iBAAM,CAAC;gBACN,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;YACtF,CAAC;QACH,CAAC;IACH,CAAC;IAMO,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,IAAI,gBAAgB,CAAC;QACtD,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,EAAE,CAAC;QACxE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC5C,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;QACnF,CAAC;QAED,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACzD,CAAC;IAEO,4BAA4B;QAClC,IAAI,QAAQ,CAAC,eAAe,KAAK,QAAQ,EAAE,CAAC;YAC1C,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACzC,OAAO,CAAC,KAAK,CAAC,gEAAgE,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACxB,KAAK,2BAA2B,CAAC,aAAa;gBAC5C,OAAO,2BAA2B,CAAC,YAAY,CAAC;YAClD,KAAK,2BAA2B,CAAC,WAAW;gBAC1C,OAAO,2BAA2B,CAAC,cAAc,CAAC;YACpD,KAAK,2BAA2B,CAAC,aAAa;gBAC5C,OAAO,2BAA2B,CAAC,eAAe,CAAC;YACrD,KAAK,2BAA2B,CAAC,cAAc;gBAC7C,OAAO,2BAA2B,CAAC,cAAc,CAAC;QACtD,CAAC;IACH,CAAC;IAEO,0BAA0B,CAAC,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;QAE1D,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvD,CAAC;IAEO,2BAA2B;QACjC,IAAI,CAAC,aAAa,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC;YAChC,SAAS,EAAE,MAAM,CAAC,oBAAoB;SACvC,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YAC3C,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACnD,MAAM,YAAY,GAAG;gBACnB,SAAS,EAAE,cAAc,IAAI,CAAC,UAAU,IAAI;gBAC5C,aAAa,EAAE,eAAe;aAC/B,CAAC;YAEF,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACvE,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,eAAe,EAAE,CAAC;gBACpF,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;gBAC1D,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBACrF,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;oBAC/B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;gBACpG,CAAC;YACH,CAAC;YAED,IAAI,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACtE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,aAAa,CAAC;gBAC9D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC7C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACxC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;QAC3C,CAAC;QACD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;YACb,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/C,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC;IAEO,mBAAmB,CAAC,IAAY;QACtC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IACnG,CAAC;IAEO,UAAU;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;QACzC,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,UAAU,IAAK,QAAQ,CAAC,CAAC,CAAiB,CAAC,WAAW,CAAC;QACzD,CAAC;QAED,OAAO,UAAU,GAAG,WAAW,CAAC;IAClC,CAAC;IAEO,UAAU;QAChB,OAAO,CACL,WACE,EAAE,EAAC,MAAM,EACT,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;YAEjD,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,CAAQ;YACzC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC,CACP,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,CACL,WAAK,EAAE,EAAC,QAAQ;YACd,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,OAAO,CACL,WAAK,EAAE,EAAC,MAAM;YACZ,cACE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAC3D,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC;wBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;oBAC/C,CAAC;gBACH,CAAC,GACD,CACE,CACP,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,CACL,WACE,QAAQ,EAAE,CAAC,EACX,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACxB,uBAAuB,EAAE,IAAI,CAAC,UAAU;aACzC,EACD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;YAEhD,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,eAAe,EAAE,CACnB,CACP,CAAC;IACJ,CAAC;IAEO,qBAAqB;QAC3B,OAAO,CACL,WACE,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACxB,uBAAuB,EAAE,IAAI,CAAC,UAAU;gBACxC,gBAAgB,EAAE,IAAI,CAAC,UAAU;aAClC;YAED,WACE,EAAE,EAAC,gBAAgB,EACnB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;gBAEhD,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,YAAY,EAAE,CAChB;YACL,IAAI,CAAC,eAAe,EAAE,CACnB,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,eAAe,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;aACvC,EACD,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,2BAA2B,CAAC,aAAa,EACpF,cAAc,EAAE,CAAC,CAAiB,EAAE,EAAE;gBACpC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;oBAC1D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC3C,CAAC;gBACD,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;oBACzC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC,IAEA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CACjE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} from \"../../../beans\";\nimport {mobileBreakpoint} from \"../../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/notification/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/notification/z-tooltip/index.js

@@ -1,151 +0,0 @@
-import { h } from "@stencil/core";
-import { PopoverPosition } from "../../../beans";
-/**
- * Tooltip component.
- * It is basically a wrapper for the `<z-popover>` component with custom configuration.
- *
- * @cssprop --z-tooltip-theme--surface - background color of the popover.
- * @cssprop --z-tooltip-theme--text - foreground color of the popover.
- * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
- */
-export class ZTooltip {
-    constructor() {
-        this.position = PopoverPosition.AUTO;
-        this.dark = false;
-        this.open = false;
-        this.bindTo = undefined;
-        this.closable = true;
-    }
-    onPopoverOpenChange() {
-        this.open = this.popoverEl.open;
-    }
-    render() {
-        return (h("z-popover", { key: '9f666fd17b7051e4ab7a766c46887c7e41579052', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'e50d24a8bebabcc40645baf2afd6cafb396b520a' })));
-    }
-    static get is() { return "z-tooltip"; }
-    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": "PopoverPosition",
-                    "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
-                    "references": {
-                        "PopoverPosition": {
-                            "location": "import",
-                            "path": "../../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tooltip position."
-                },
-                "attribute": "position",
-                "reflect": true,
-                "defaultValue": "PopoverPosition.AUTO"
-            },
-            "dark": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable tooltip dark mode."
-                },
-                "attribute": "dark",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The open state of the tooltip."
-                },
-                "attribute": "open",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "bindTo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | HTMLElement",
-                    "resolved": "HTMLElement | string",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The selector or the element bound with the tooltip."
-                },
-                "attribute": "bind-to",
-                "reflect": false
-            },
-            "closable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Reflects `closable` prop of the popover.\n\"If true, the popover can be closed by clicking outside of it or pressing the escape key.\nOtherwise, it will be closed only programmatically (by setting `open` to `false`).\""
-                },
-                "attribute": "closable",
-                "reflect": false,
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get listeners() {
-        return [{
-                "name": "openChange",
-                "method": "onPopoverOpenChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/notification/z-tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACzD,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAE/C;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAKf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,kEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS;YAET,8DAAa,CACH,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Listen} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"]}