@amiceli/papierjs 0.6.0 → 0.7.0

package/dist/collection/components/notification/p-notification/p-notification.js

@@ -0,0 +1,164 @@
+import { Host, h, } from "@stencil/core";
+import feather from "feather-icons";
+export class PNotification {
+    constructor() {
+        this.type = 'info';
+        this.text = '';
+        this.canclose = false;
+        this.timestamp = '';
+    }
+    getIconName() {
+        switch (this.type) {
+            case 'primary':
+                return feather.icons.info.toSvg();
+            case 'warning':
+                return feather.icons['alert-triangle'].toSvg();
+            case 'danger':
+                return feather.icons['alert-circle'].toSvg();
+            case 'success':
+                return feather.icons['check-circle'].toSvg();
+            default:
+                return feather.icons.info.toSvg();
+        }
+    }
+    getClassName() {
+        const cssClass = {
+            alert: true,
+            'can--close': this.canclose,
+        };
+        const type = [
+            'primary',
+            'secondary',
+            'success',
+            'warning',
+            'danger',
+        ].find((v) => v === this.type);
+        cssClass[`alert-${type || 'primary'}`] = true;
+        return cssClass;
+    }
+    onClose() {
+        console.debug('on close baby');
+        this.close.emit(this.timestamp);
+    }
+    render() {
+        return (h(Host, { key: 'ca862c36f4286b20d8c957311728b5b8b7572c14' }, h("div", { key: '739c685f45b963303481799168a73ef7fd239db4', class: "papier" }, h("div", { key: '98ded37d6cfc45fc70d5b1579d4ad2dff1db55ee', class: this.getClassName() }, h("div", { key: 'e78c92b7a8ed0d540ffa57bfb0e7dd61512f0725', innerHTML: this.getIconName() }), h("div", { key: '37430e196744a4b87db55c157e521ef34836d461', innerHTML: this.text }), this.canclose && (h("span", { key: '3c639b245f622723b1fd814ecc94d094faa052f1', onClick: () => {
+                this.onClose();
+            }, innerHTML: feather.icons.x.toSvg() }))))));
+    }
+    static get is() { return "p-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["p-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["p-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "canclose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "canclose",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "timestamp",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=p-notification.js.map

package/dist/collection/components/notification/p-notification/p-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-notification.js","sourceRoot":"","sources":["../../../../src/components/notification/p-notification/p-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACJ,MAAM,eAAe,CAAA;AACtB,OAAO,OAAO,MAAM,eAAe,CAAA;AAOnC,MAAM,OAAO,aAAa;IAL1B;QAUW,SAAI,GAAY,MAAM,CAAA;QAGtB,SAAI,GAAG,EAAE,CAAA;QAGT,aAAQ,GAAG,KAAK,CAAA;QAGhB,cAAS,GAAG,EAAE,CAAA;KA8DxB;IAzDU,WAAW;QACd,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,SAAS;gBACV,OAAO,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;YACrC,KAAK,SAAS;gBACV,OAAO,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,KAAK,EAAE,CAAA;YAClD,KAAK,QAAQ;gBACT,OAAO,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAA;YAChD,KAAK,SAAS;gBACV,OAAO,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAA;YAChD;gBACI,OAAO,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QACzC,CAAC;IACL,CAAC;IAEM,YAAY;QACf,MAAM,QAAQ,GAAG;YACb,KAAK,EAAE,IAAI;YACX,YAAY,EAAE,IAAI,CAAC,QAAQ;SAC9B,CAAA;QACD,MAAM,IAAI,GAAG;YACT,SAAS;YACT,WAAW;YACX,SAAS;YACT,SAAS;YACT,QAAQ;SACX,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAA;QAC9B,QAAQ,CAAC,SAAS,IAAI,IAAI,SAAS,EAAE,CAAC,GAAG,IAAI,CAAA;QAE7C,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEO,OAAO;QACX,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QAC9B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnC,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,QAAQ;gBACf,4DAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;oBAC3B,4DAAK,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,GAAI;oBACtC,4DAAK,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;oBAC5B,IAAI,CAAC,QAAQ,IAAI,CACd,6DACI,OAAO,EAAE,GAAG,EAAE;4BACV,IAAI,CAAC,OAAO,EAAE,CAAA;wBAClB,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,GACpC,CACL,CACC,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    type EventEmitter,\n    Host,\n    Prop,\n    h,\n} from '@stencil/core'\nimport feather from 'feather-icons'\n\n@Component({\n    tag: 'p-notification',\n    styleUrl: 'p-notification.scss',\n    shadow: true,\n})\nexport class PNotification {\n    @Element()\n    public el: HTMLElement\n\n    @Prop()\n    public type?: string = 'info'\n\n    @Prop()\n    public text = ''\n\n    @Prop()\n    public canclose = false\n\n    @Prop()\n    public timestamp = ''\n\n    @Event({ eventName: 'close' })\n    public close: EventEmitter<string>\n\n    public getIconName() {\n        switch (this.type) {\n            case 'primary':\n                return feather.icons.info.toSvg()\n            case 'warning':\n                return feather.icons['alert-triangle'].toSvg()\n            case 'danger':\n                return feather.icons['alert-circle'].toSvg()\n            case 'success':\n                return feather.icons['check-circle'].toSvg()\n            default:\n                return feather.icons.info.toSvg()\n        }\n    }\n\n    public getClassName() {\n        const cssClass = {\n            alert: true,\n            'can--close': this.canclose,\n        }\n        const type = [\n            'primary',\n            'secondary',\n            'success',\n            'warning',\n            'danger',\n        ].find((v) => v === this.type)\n        cssClass[`alert-${type || 'primary'}`] = true\n\n        return cssClass\n    }\n\n    private onClose() {\n        console.debug('on close baby')\n        this.close.emit(this.timestamp)\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"papier\">\n                    <div class={this.getClassName()}>\n                        <div innerHTML={this.getIconName()} />\n                        <div innerHTML={this.text} />\n                        {this.canclose && (\n                            <span\n                                onClick={() => {\n                                    this.onClose()\n                                }}\n                                innerHTML={feather.icons.x.toSvg()}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/notification/p-notification-handler/p-notification-handler.css

@@ -0,0 +1,13 @@
+:host {
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: 8px;
+  position: fixed;
+  top: 40px;
+  margin: auto 80px;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+}

package/dist/collection/components/notification/p-notification-handler/p-notification-handler.js

@@ -0,0 +1,100 @@
+import { Host, h } from "@stencil/core";
+export class PNotificationHandler {
+    constructor() {
+        this.notifications = [];
+    }
+    async pushNotification(options) {
+        const { type, text, canclose, timeout } = options;
+        const timestamp = String(new Date().getTime());
+        this.notifications = [
+            ...this.notifications,
+            {
+                type,
+                text,
+                canclose,
+                timestamp,
+            },
+        ];
+        if (!timeout)
+            return;
+        setTimeout(() => {
+            const notification = this.notifications.find((toast) => {
+                return toast.timestamp === timestamp;
+            });
+            if (notification) {
+                this.removeToast(timestamp);
+            }
+        }, timeout);
+    }
+    removeToast(timestamp) {
+        this.notifications = this.notifications.filter((toast) => {
+            return toast.timestamp !== timestamp;
+        });
+    }
+    closeToastHandler(event) {
+        this.removeToast(event.detail);
+    }
+    mapNotifications() {
+        return this.notifications.map((toast) => (h("p-notification", { key: toast.type, type: toast.type, text: toast.text, canclose: toast.canclose, timestamp: toast.timestamp })));
+    }
+    render() {
+        return h(Host, { key: '7b1d1a23ed6a286ecca50ac9219876202cae55be' }, this.mapNotifications());
+    }
+    static get is() { return "p-notification-handler"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["p-notification-handler.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["p-notification-handler.css"]
+        };
+    }
+    static get states() {
+        return {
+            "notifications": {}
+        };
+    }
+    static get methods() {
+        return {
+            "pushNotification": {
+                "complexType": {
+                    "signature": "(options: PushOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ type: string; text: string; canclose: boolean; timeout?: number; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PushOptions": {
+                            "location": "local",
+                            "path": "/Users/antoinemiceli/Projects/Github/papierjs/src/components/notification/p-notification-handler/p-notification-handler.tsx",
+                            "id": "src/components/notification/p-notification-handler/p-notification-handler.tsx::PushOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "close",
+                "method": "closeToastHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=p-notification-handler.js.map

package/dist/collection/components/notification/p-notification-handler/p-notification-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-notification-handler.js","sourceRoot":"","sources":["../../../../src/components/notification/p-notification-handler/p-notification-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAkBzE,MAAM,OAAO,oBAAoB;IALjC;QAOW,kBAAa,GAAmB,EAAE,CAAA;KAsD5C;IAnDU,KAAK,CAAC,gBAAgB,CAAC,OAAoB;QAC9C,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,CAAA;QACjD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;QAC9C,IAAI,CAAC,aAAa,GAAG;YACjB,GAAG,IAAI,CAAC,aAAa;YACrB;gBACI,IAAI;gBACJ,IAAI;gBACJ,QAAQ;gBACR,SAAS;aACZ;SACJ,CAAA;QAED,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,UAAU,CAAC,GAAG,EAAE;YACZ,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACnD,OAAO,KAAK,CAAC,SAAS,KAAK,SAAS,CAAA;YACxC,CAAC,CAAC,CAAA;YACF,IAAI,YAAY,EAAE,CAAC;gBACf,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;YAC/B,CAAC;QACL,CAAC,EAAE,OAAO,CAAC,CAAA;IACf,CAAC;IAEO,WAAW,CAAC,SAAiB;QACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;YACrD,OAAO,KAAK,CAAC,SAAS,KAAK,SAAS,CAAA;QACxC,CAAC,CAAC,CAAA;IACN,CAAC;IAGM,iBAAiB,CAAC,KAA0B;QAC/C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAClC,CAAC;IAEM,gBAAgB;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrC,sBACI,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC5B,CACL,CAAC,CAAA;IACN,CAAC;IAED,MAAM;QACF,OAAO,EAAC,IAAI,uDAAE,IAAI,CAAC,gBAAgB,EAAE,CAAQ,CAAA;IACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Listen, Method, State, h } from '@stencil/core'\n\nexport type PushOptions = {\n    type: string\n    text: string\n    canclose: boolean\n    timeout?: number\n}\n\ntype Notification = PushOptions & {\n    timestamp: string\n}\n\n@Component({\n    tag: 'p-notification-handler',\n    styleUrl: 'p-notification-handler.scss',\n    shadow: true,\n})\nexport class PNotificationHandler {\n    @State()\n    public notifications: Notification[] = []\n\n    @Method()\n    public async pushNotification(options: PushOptions) {\n        const { type, text, canclose, timeout } = options\n        const timestamp = String(new Date().getTime())\n        this.notifications = [\n            ...this.notifications,\n            {\n                type,\n                text,\n                canclose,\n                timestamp,\n            },\n        ]\n\n        if (!timeout) return\n\n        setTimeout(() => {\n            const notification = this.notifications.find((toast) => {\n                return toast.timestamp === timestamp\n            })\n            if (notification) {\n                this.removeToast(timestamp)\n            }\n        }, timeout)\n    }\n\n    private removeToast(timestamp: string) {\n        this.notifications = this.notifications.filter((toast) => {\n            return toast.timestamp !== timestamp\n        })\n    }\n\n    @Listen('close')\n    public closeToastHandler(event: CustomEvent<string>) {\n        this.removeToast(event.detail)\n    }\n\n    public mapNotifications() {\n        return this.notifications.map((toast) => (\n            <p-notification\n                key={toast.type}\n                type={toast.type}\n                text={toast.text}\n                canclose={toast.canclose}\n                timestamp={toast.timestamp}\n            />\n        ))\n    }\n\n    render() {\n        return <Host>{this.mapNotifications()}</Host>\n    }\n}\n"]}

package/dist/collection/components/notification/p-notification-handler/stories/p-notification-preview.js

@@ -0,0 +1,36 @@
+import { h } from "@stencil/core";
+export class PNotification {
+    addNotification(options) {
+        const handler = this.el.querySelector('p-notification-handler');
+        if (handler) {
+            handler.pushNotification(Object.assign({ type: this.notificationType, canclose: false, text: `${this.notificationType || 'primary'} notification` }, options));
+        }
+    }
+    render() {
+        return (h("div", { key: 'a8249a75ec65b727c90914ce2e684b9bf3697945' }, h("p-notification-handler", { key: '664695f2c9fafdfc68bd092096c9ca6ddd0359f6' }), h("p-dropdown", { key: 'da5dc45e74d800b221f6833aabc19a40e0cca57b', placeholder: "Choose notification type", onSelect: (e) => {
+                this.notificationType = e.detail;
+            } }, [
+            'primary',
+            'secondary',
+            'success',
+            'warning',
+            'danger',
+        ].map((value) => {
+            return (h("p-dropdown-item", { key: value, value: value }, value));
+        })), h("div", { key: '1d4cf0a74eecda4aa147541ceea1d8f99ece39b2', style: { marginTop: '20px' } }, h("p-button", { key: '348695d918d61dd858e6c660caa2a73e9e3ded79', style: { marginRight: '20px' }, type: "primary", onClick: () => {
+                this.addNotification({});
+            } }, "Add notification"), h("p-button", { key: '0e6cc40f30f61cf28013dfc697e183db27097499', type: "secondary", style: { marginRight: '20px' }, onClick: () => {
+                this.addNotification({ canclose: true });
+            } }, "Add closable notification"), h("p-button", { key: '0648fbaeec551c170a5ea9680cb8770bec229a1b', type: "success", onClick: () => {
+                this.addNotification({ timeout: 2000 });
+            } }, "Add timeout notification"))));
+    }
+    static get is() { return "p-notification-preview"; }
+    static get states() {
+        return {
+            "notificationType": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=p-notification-preview.js.map

package/dist/collection/components/notification/p-notification-handler/stories/p-notification-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-notification-preview.js","sourceRoot":"","sources":["../../../../../src/components/notification/p-notification-handler/stories/p-notification-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAM5D,MAAM,OAAO,aAAa;IAOf,eAAe,CAAC,OAA6B;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;QAE/D,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,CAAC,gBAAgB,iBACpB,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,QAAQ,EAAE,KAAK,EACf,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,SAAS,eAAe,IACvD,OAAO,EACZ,CAAA;QACN,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH;YACI,gFAA0B;YAC1B,mEACI,WAAW,EAAC,0BAA0B,EACtC,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE;oBACzB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAA;gBACpC,CAAC,IAEA;gBACG,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,SAAS;gBACT,QAAQ;aACX,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACZ,OAAO,CACH,uBAAiB,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACpC,KAAK,CACQ,CACrB,CAAA;YACL,CAAC,CAAC,CACO;YAEb,4DAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC7B,iEACI,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC9B,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAA;oBAC5B,CAAC,uBAGM;gBACX,iEACI,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC9B,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAA;oBAC5C,CAAC,gCAGM;gBACX,iEACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;oBAC3C,CAAC,+BAGM,CACT,CACJ,CACT,CAAA;IACL,CAAC;;;;;;CACJ","sourcesContent":["import { Component, Element, State, h } from '@stencil/core'\nimport type { PushOptions } from '../p-notification-handler'\n\n@Component({\n    tag: 'p-notification-preview',\n})\nexport class PNotification {\n    @Element()\n    public el: HTMLElement\n\n    @State()\n    notificationType?: string\n\n    public addNotification(options: Partial<PushOptions>) {\n        const handler = this.el.querySelector('p-notification-handler')\n\n        if (handler) {\n            handler.pushNotification({\n                type: this.notificationType,\n                canclose: false,\n                text: `${this.notificationType || 'primary'} notification`,\n                ...options,\n            })\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                <p-notification-handler />\n                <p-dropdown\n                    placeholder=\"Choose notification type\"\n                    onSelect={(e: CustomEvent) => {\n                        this.notificationType = e.detail\n                    }}\n                >\n                    {[\n                        'primary',\n                        'secondary',\n                        'success',\n                        'warning',\n                        'danger',\n                    ].map((value) => {\n                        return (\n                            <p-dropdown-item key={value} value={value}>\n                                {value}\n                            </p-dropdown-item>\n                        )\n                    })}\n                </p-dropdown>\n\n                <div style={{ marginTop: '20px' }}>\n                    <p-button\n                        style={{ marginRight: '20px' }}\n                        type=\"primary\"\n                        onClick={() => {\n                            this.addNotification({})\n                        }}\n                    >\n                        Add notification\n                    </p-button>\n                    <p-button\n                        type=\"secondary\"\n                        style={{ marginRight: '20px' }}\n                        onClick={() => {\n                            this.addNotification({ canclose: true })\n                        }}\n                    >\n                        Add closable notification\n                    </p-button>\n                    <p-button\n                        type=\"success\"\n                        onClick={() => {\n                            this.addNotification({ timeout: 2000 })\n                        }}\n                    >\n                        Add timeout notification\n                    </p-button>\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -36,7 +36,7 @@ export class ProgressBar {
         return cssClass;
     }
     render() {
-        return (h("div", { key: '265866ff4d3f95b7741c828b25723e7793732e4f', class: this.getParentClass() }, h("div", { key: '6fb4ff19a6d42104d4fc574e977fc30eed1087fb', class: "progress" }, h("div", { key: '028c08f43d0b0ffe4d6fa8e643fa6fc026ae805d', class: this.getClass() }, h("slot", { key: '7f9f94d272c7796b1a72b3268d8c5910f7571bf8' })))));
+        return (h("div", { key: '20e868c53ea4b6726c934b00a96a96af5fd90735', class: this.getParentClass() }, h("div", { key: '9844c710e50a284db3854a4f375578bfb0936ba1', class: "progress" }, h("div", { key: '11e92c1aadfe9f305347cfb10404179756d861f1', class: this.getClass() }, h("slot", { key: '4810e3c69cd5cb77b7767fff9fdbd617f0e38223' })))));
     }
     static get is() { return "p-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab/tab.js

@@ -5,11 +5,11 @@ export class PTab {
         this.dark = false;
     }
     render() {
-        return (h(Host, { key: '2dcda2fa7d7868c55f503308626f86a8bf43dfb8' }, h("div", { key: 'fbcca0ed3f6cea8e697b687b8abb5555f8b75044', class: {
+        return (h(Host, { key: '29336150bccaf6a1ec95231fdfbc560c7027bdaf' }, h("div", { key: 'a55e95646d7772e26f7d65706e096271bd642fb2', class: {
                 papier: true,
                 'is--selected': this.selected,
                 'is--dark': this.dark,
-            } }, h("slot", { key: '5d150082f08ae4e05af71d965b3b7845b3e6155a' }))));
+            } }, h("slot", { key: '79283e0f890d83ebf5ef388b78ac7d9a1a9dfb2c' }))));
     }
     static get is() { return "p-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs/tabs.js

@@ -44,12 +44,12 @@ export class PTabs {
         };
     }
     render() {
-        return (h(Host, { key: 'da40a21de1a04bfbe55ca13d13bb42f18711bccc' }, h("div", { key: '57ae24e8054245c0148eeedffa3e022c107a9457', class: {
+        return (h(Host, { key: '0c78c9ce416e99234c2db3aee9607c80758ca594' }, h("div", { key: 'e934889da2cc7c65b00807f37887adc1330b52fe', class: {
                 'is--dark': this.dark,
                 papier: true,
-            } }, h("div", { key: 'aff4aa296e27b60428a6163d1122e9811b8e3f8c', class: "row flex-spaces tabs" }, this.tabs.map((t) => {
+            } }, h("div", { key: '38501e443b9b04ab2f276232c4060fb2fa969a89', class: "row flex-spaces tabs" }, this.tabs.map((t) => {
             return (h("label", { class: this.getTabClass(t), htmlFor: "tab1", key: t.title, onClick: () => this.onSelectTab(t) }, t.title));
-        }), h("div", { key: '79bfdea23e0aced78e2fb7f94f3b1b13c5a05562', class: "content" }, h("slot", { key: '40c497f849e95b148ccf1be29f1379de2b9c15a6' }))))));
+        }), h("div", { key: '19546aed34979d4630348b64a4ddcac48333e671', class: "content" }, h("slot", { key: 'b9e5992eec171cdcbb3332f8047468a4751f594d' }))))));
     }
     static get is() { return "p-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -8,7 +8,7 @@ export class PTooltip {
         this.top = false;
     }
     render() {
-        return (h(Host, { key: 'bbb4b01e07ebaaf9de17a06afccd000e2ae7a6c5' }, h("div", { key: '6c2ac0466932ceb2187c6549787a6d5efe4fcde5', class: "papier" }, h("div", { key: '55e0a5c7a37966262d70887de69fadb795a81711', "popover-left": this.left && !this.disabled ? this.title : null, "popover-right": this.right && !this.disabled ? this.title : null, "popover-bottom": this.bottom && !this.disabled ? this.title : null, "popover-top": this.top && !this.disabled ? this.title : null }, h("slot", { key: '382e0f88097067dd16a6d925a9c9d97044e81126' })))));
+        return (h(Host, { key: 'da2470d96d915e91915fba74a644acb21c9af74b' }, h("div", { key: '3913b807488a7591aab79d33b05f46d70c127c5b', class: "papier" }, h("div", { key: 'b7b8b48b77dde291ea1b893a806f0b4e43f77eeb', "popover-left": this.left && !this.disabled ? this.title : null, "popover-right": this.right && !this.disabled ? this.title : null, "popover-bottom": this.bottom && !this.disabled ? this.title : null, "popover-top": this.top && !this.disabled ? this.title : null }, h("slot", { key: '82aec744a324e1ac8dab4eca236401135366fdb0' })))));
     }
     static get is() { return "p-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-eea4fbc1.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-af62ba98.js';
 
 //# sourceMappingURL=index.js.map