@amiceli/papierjs 0.9.0 → 0.10.0

package/dist/collection/components/form/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/form/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACJ,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,OAAO;IALpB;QAMI,0BAA0B;QAEnB,UAAK,GAAa,KAAK,CAAA;QAC9B,iCAAiC;QAE1B,WAAM,GAAa,KAAK,CAAA;QAExB,SAAI,GAAa,KAAK,CAAA;QAEtB,YAAO,GAAa,KAAK,CAAA;KA4CnC;IAvCU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAA;IACjE,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DACI,KAAK,EAAE;4BACH,cAAc,EAAE,CAAC,IAAI,CAAC,MAAM;4BAC5B,gBAAgB,EAAE,IAAI,CAAC,MAAM;yBAChC;wBAED,8DACI,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GACjC;wBACF,6DACI,KAAK,EAAE;gCACH,KAAK,EAAE,IAAI,CAAC,KAAK;gCACjB,qBAAqB,EAAE,IAAI;6BAC9B,GACH,CACE,CACN,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Event,\n    type EventEmitter,\n    Host,\n    Prop,\n    h,\n} from '@stencil/core'\n\n@Component({\n    tag: 'p-switch',\n    styleUrl: 'switch.scss',\n    shadow: true,\n})\nexport class PSwitch {\n    /** define switch style */\n    @Prop()\n    public round?: boolean = false\n    /** define switch parent style */\n    @Prop()\n    public square?: boolean = false\n    @Prop()\n    public dark?: boolean = false\n    @Prop()\n    public checked?: boolean = false\n\n    @Event({ eventName: 'change' })\n    public changeEvent: EventEmitter<boolean>\n\n    public onInput(e: Event) {\n        this.changeEvent.emit((e.target as HTMLInputElement).checked)\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <label\n                            class={{\n                                'paper-switch': !this.square,\n                                'paper-switch-2': this.square,\n                            }}\n                        >\n                            <input\n                                id=\"paperSwitch4\"\n                                name=\"paperSwitch4\"\n                                type=\"checkbox\"\n                                checked={this.checked}\n                                onInput={(e) => this.onInput(e)}\n                            />\n                            <span\n                                class={{\n                                    round: this.round,\n                                    'paper-switch-slider': true,\n                                }}\n                            />\n                        </label>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/form/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAOlF,MAAM,OAAO,OAAO;IALpB;QAMI,0BAA0B;QAEnB,UAAK,GAAa,KAAK,CAAA;QAC9B,iCAAiC;QAE1B,WAAM,GAAa,KAAK,CAAA;QAExB,SAAI,GAAa,KAAK,CAAA;QAEtB,YAAO,GAAa,KAAK,CAAA;KA4CnC;IAvCU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAA;IACjE,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DACI,KAAK,EAAE;4BACH,cAAc,EAAE,CAAC,IAAI,CAAC,MAAM;4BAC5B,gBAAgB,EAAE,IAAI,CAAC,MAAM;yBAChC;wBAED,8DACI,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GACjC;wBACF,6DACI,KAAK,EAAE;gCACH,KAAK,EAAE,IAAI,CAAC,KAAK;gCACjB,qBAAqB,EAAE,IAAI;6BAC9B,GACH,CACE,CACN,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-switch',\n    styleUrl: 'switch.scss',\n    shadow: true,\n})\nexport class PSwitch {\n    /** define switch style */\n    @Prop()\n    public round?: boolean = false\n    /** define switch parent style */\n    @Prop()\n    public square?: boolean = false\n    @Prop()\n    public dark?: boolean = false\n    @Prop()\n    public checked?: boolean = false\n\n    @Event({ eventName: 'change' })\n    public changeEvent: EventEmitter<boolean>\n\n    public onInput(e: Event) {\n        this.changeEvent.emit((e.target as HTMLInputElement).checked)\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <label\n                            class={{\n                                'paper-switch': !this.square,\n                                'paper-switch-2': this.square,\n                            }}\n                        >\n                            <input\n                                id=\"paperSwitch4\"\n                                name=\"paperSwitch4\"\n                                type=\"checkbox\"\n                                checked={this.checked}\n                                onInput={(e) => this.onInput(e)}\n                            />\n                            <span\n                                class={{\n                                    round: this.round,\n                                    'paper-switch-slider': true,\n                                }}\n                            />\n                        </label>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/form/switch-tile/switch-tile.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * @slot unchecked-text - displayed text when switch is unchecked
  * @slot checked-text - displayed text when switch is checked
@@ -30,10 +30,10 @@ export class SwitchTile {
         return cssClass;
     }
     render() {
-        return (h(Host, { key: 'c45d3f233e411919b3b7b761875eee407a30ded8' }, h("div", { key: 'ef04d121a7bb316910bb5eba320636e469b15296', class: {
+        return (h(Host, { key: 'ac7c89fc9273a47cdd4bef680da0df9ceca1093c' }, h("div", { key: 'dd6dd56bf61cf31ce7684177545857a17ecfce4e', class: {
                 papier: true,
                 'is--dark': this.dark,
-            } }, h("div", { key: 'a4f4e141456ab2006b35586ac0a2b5df30dc6d21', class: "form-group" }, h("label", { key: '1daa9c09dea72d9b4f320e781f6d2bec8eb20a6d', htmlFor: "paperSwitch1", class: "paper-switch-tile" }, h("input", { key: 'a589300af34234bb2b844aa528f52bff61701883', id: "paperSwitch1", name: "paperSwitch1", type: "checkbox", checked: this.checked }), h("div", { key: '6ac3923e0492d44260de85441704752880dfc8da', class: "paper-switch-tile-card border" }, h("div", { key: 'c9704b1755e51699617069809e4451746bfce0f1', class: this.getFrontCardClass() }, h("slot", { key: '0790743399ebc98930a6c51bbc7a710fe4eebf3d', name: "unchecked-text" })), h("div", { key: 'f3db508d13e66c2064f9802694fdef7a72a70b0c', class: this.getBackCardClass() }, h("slot", { key: '3392366f8d3e4ea7f54ffb31fe8c7e7ce7e8d1d5', name: "checked-text" }))))))));
+            } }, h("div", { key: 'd8e2e2a4cdd09050d8726839f0c7b5348f109cc8', class: "form-group" }, h("label", { key: '3395a2b1a2487230601d2322a908c35575257097', htmlFor: "paperSwitch1", class: "paper-switch-tile" }, h("input", { key: '9b88143b6e013d8faa189febc4986744ef69902d', id: "paperSwitch1", name: "paperSwitch1", type: "checkbox", checked: this.checked }), h("div", { key: '919a9903179a6850d748d027d6d32d13618896bc', class: "paper-switch-tile-card border" }, h("div", { key: '7ccb49a9ee11d13074a7b95adf551ec97d81294b', class: this.getFrontCardClass() }, h("slot", { key: 'a8e59be7c4d146d93b5346922536fc368ba86654', name: "unchecked-text" })), h("div", { key: 'dd8db1cb46a971131f129cb8ea72879ae4fd903f', class: this.getBackCardClass() }, h("slot", { key: '048b39a71a1688a8ff0755d235c82a9a334464d5', name: "checked-text" }))))))));
     }
     static get is() { return "p-switch-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -51,6 +51,7 @@ export class SwitchTile {
         return {
             "dark": {
                 "type": "boolean",
+                "attribute": "dark",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -65,12 +66,12 @@ export class SwitchTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dark",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -85,12 +86,12 @@ export class SwitchTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checkedBackground": {
                 "type": "string",
+                "attribute": "checked-background",
                 "mutable": false,
                 "complexType": {
                     "original": "TileBackground",
@@ -110,12 +111,12 @@ export class SwitchTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked-background",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "uncheckedBackground": {
                 "type": "string",
+                "attribute": "unchecked-background",
                 "mutable": false,
                 "complexType": {
                     "original": "TileBackground",
@@ -135,7 +136,6 @@ export class SwitchTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "unchecked-background",
                 "reflect": false
             }
         };

package/dist/collection/components/form/switch-tile/switch-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-tile.js","sourceRoot":"","sources":["../../../../src/components/form/switch-tile/switch-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACJ,MAAM,eAAe,CAAA;AAItB;;;GAGG;AAMH,MAAM,OAAO,UAAU;IALvB;QAMI,uBAAuB;QACR,SAAI,GAAa,KAAK,CAAA;QAE9B,YAAO,GAAa,KAAK,CAAA;QAEzB,sBAAiB,GAAoB,SAAS,CAAA;KAgExD;IAzDU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAA;IACjE,CAAC;IAEM,iBAAiB;QACpB,MAAM,QAAQ,GAAG;YACb,8BAA8B,EAAE,IAAI;YACpC,MAAM,EAAE,IAAI;SACf,CAAA;QAED,QAAQ,CAAC,cAAc,IAAI,CAAC,mBAAmB,EAAE,CAAC,GAAG,IAAI,CAAA;QAEzD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,gBAAgB;QACnB,MAAM,QAAQ,GAAG;YACb,6BAA6B,EAAE,IAAI;YACnC,MAAM,EAAE,IAAI;SACf,CAAA;QAED,QAAQ,CAAC,cAAc,IAAI,CAAC,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAA;QAEvD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DAAO,OAAO,EAAC,cAAc,EAAC,KAAK,EAAC,mBAAmB;wBACnD,8DACI,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,GACvB;wBACF,4DAAK,KAAK,EAAC,+BAA+B;4BACtC,4DAAK,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;gCAChC,6DAAM,IAAI,EAAC,gBAAgB,GAAG,CAC5B;4BACN,4DAAK,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;gCAC/B,6DAAM,IAAI,EAAC,cAAc,GAAG,CAC1B,CACJ,CACF,CACN,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Event,\n    type EventEmitter,\n    Host,\n    Prop,\n    h,\n} from '@stencil/core'\n\ntype TileBackground = 'primary' | 'danger' | 'secondary' | 'success' | 'muted'\n\n/**\n * @slot unchecked-text - displayed text when switch is unchecked\n * @slot checked-text - displayed text when switch is checked\n */\n@Component({\n    tag: 'p-switch-tile',\n    styleUrl: 'switch-tile.scss',\n    shadow: true,\n})\nexport class SwitchTile {\n    /** Enable dark mode */\n    @Prop() public dark?: boolean = false\n    @Prop()\n    public checked?: boolean = false\n    @Prop()\n    public checkedBackground?: TileBackground = 'primary'\n    @Prop()\n    public uncheckedBackground?: TileBackground\n\n    @Event({ eventName: 'change' })\n    public changeEvent: EventEmitter<boolean>\n\n    public onInput(e: Event) {\n        this.changeEvent.emit((e.target as HTMLInputElement).checked)\n    }\n\n    public getFrontCardClass() {\n        const cssClass = {\n            'paper-switch-tile-card-front': true,\n            border: true,\n        }\n\n        cssClass[`background-${this.uncheckedBackground}`] = true\n\n        return cssClass\n    }\n\n    public getBackCardClass() {\n        const cssClass = {\n            'paper-switch-tile-card-back': true,\n            border: true,\n        }\n\n        cssClass[`background-${this.checkedBackground}`] = true\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <label htmlFor=\"paperSwitch1\" class=\"paper-switch-tile\">\n                            <input\n                                id=\"paperSwitch1\"\n                                name=\"paperSwitch1\"\n                                type=\"checkbox\"\n                                checked={this.checked}\n                            />\n                            <div class=\"paper-switch-tile-card border\">\n                                <div class={this.getFrontCardClass()}>\n                                    <slot name=\"unchecked-text\" />\n                                </div>\n                                <div class={this.getBackCardClass()}>\n                                    <slot name=\"checked-text\" />\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}
+{"version":3,"file":"switch-tile.js","sourceRoot":"","sources":["../../../../src/components/form/switch-tile/switch-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAIlF;;;GAGG;AAMH,MAAM,OAAO,UAAU;IALvB;QAMI,uBAAuB;QACR,SAAI,GAAa,KAAK,CAAA;QAE9B,YAAO,GAAa,KAAK,CAAA;QAEzB,sBAAiB,GAAoB,SAAS,CAAA;KA2DxD;IApDU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAA;IACjE,CAAC;IAEM,iBAAiB;QACpB,MAAM,QAAQ,GAAG;YACb,8BAA8B,EAAE,IAAI;YACpC,MAAM,EAAE,IAAI;SACf,CAAA;QAED,QAAQ,CAAC,cAAc,IAAI,CAAC,mBAAmB,EAAE,CAAC,GAAG,IAAI,CAAA;QAEzD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,gBAAgB;QACnB,MAAM,QAAQ,GAAG;YACb,6BAA6B,EAAE,IAAI;YACnC,MAAM,EAAE,IAAI;SACf,CAAA;QAED,QAAQ,CAAC,cAAc,IAAI,CAAC,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAA;QAEvD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DAAO,OAAO,EAAC,cAAc,EAAC,KAAK,EAAC,mBAAmB;wBACnD,8DAAO,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;wBACtF,4DAAK,KAAK,EAAC,+BAA+B;4BACtC,4DAAK,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;gCAChC,6DAAM,IAAI,EAAC,gBAAgB,GAAG,CAC5B;4BACN,4DAAK,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;gCAC/B,6DAAM,IAAI,EAAC,cAAc,GAAG,CAC1B,CACJ,CACF,CACN,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core'\n\ntype TileBackground = 'primary' | 'danger' | 'secondary' | 'success' | 'muted'\n\n/**\n * @slot unchecked-text - displayed text when switch is unchecked\n * @slot checked-text - displayed text when switch is checked\n */\n@Component({\n    tag: 'p-switch-tile',\n    styleUrl: 'switch-tile.scss',\n    shadow: true,\n})\nexport class SwitchTile {\n    /** Enable dark mode */\n    @Prop() public dark?: boolean = false\n    @Prop()\n    public checked?: boolean = false\n    @Prop()\n    public checkedBackground?: TileBackground = 'primary'\n    @Prop()\n    public uncheckedBackground?: TileBackground\n\n    @Event({ eventName: 'change' })\n    public changeEvent: EventEmitter<boolean>\n\n    public onInput(e: Event) {\n        this.changeEvent.emit((e.target as HTMLInputElement).checked)\n    }\n\n    public getFrontCardClass() {\n        const cssClass = {\n            'paper-switch-tile-card-front': true,\n            border: true,\n        }\n\n        cssClass[`background-${this.uncheckedBackground}`] = true\n\n        return cssClass\n    }\n\n    public getBackCardClass() {\n        const cssClass = {\n            'paper-switch-tile-card-back': true,\n            border: true,\n        }\n\n        cssClass[`background-${this.checkedBackground}`] = true\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <label htmlFor=\"paperSwitch1\" class=\"paper-switch-tile\">\n                            <input id=\"paperSwitch1\" name=\"paperSwitch1\" type=\"checkbox\" checked={this.checked} />\n                            <div class=\"paper-switch-tile-card border\">\n                                <div class={this.getFrontCardClass()}>\n                                    <slot name=\"unchecked-text\" />\n                                </div>\n                                <div class={this.getBackCardClass()}>\n                                    <slot name=\"checked-text\" />\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/leaf/leaf.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class Alert {
+export class Pleaf {
     constructor() {
         this.dark = false;
     }
@@ -24,6 +24,7 @@ export class Alert {
         return {
             "dark": {
                 "type": "boolean",
+                "attribute": "dark",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -38,7 +39,6 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dark",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/leaf/leaf.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaf.js","sourceRoot":"","sources":["../../../src/components/leaf/leaf.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAMlD,MAAM,OAAO,KAAK;IAJlB;QAMI,SAAI,GAAa,KAAK,CAAA;KAazB;IAXU,cAAc;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAA;IACnD,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,8DAAQ,CACN,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-leaf',\n    styleUrl: 'leaf.scss',\n})\nexport class Alert {\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        return this.dark ? 'papier is--dark' : 'papier'\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <slot />\n            </div>\n        )\n    }\n}\n"]}
+{"version":3,"file":"leaf.js","sourceRoot":"","sources":["../../../src/components/leaf/leaf.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAMlD,MAAM,OAAO,KAAK;IAJlB;QAMI,SAAI,GAAa,KAAK,CAAA;KAazB;IAXU,cAAc;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAA;IACnD,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,8DAAQ,CACN,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-leaf',\n    styleUrl: 'leaf.scss',\n})\nexport class Pleaf {\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        return this.dark ? 'papier is--dark' : 'papier'\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <slot />\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/modal/modal.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class PModal {
     constructor() {
         this.isOpen = false;
@@ -11,7 +11,7 @@ export class PModal {
         this.closeEvent.emit(null);
     }
     render() {
-        return (h(Host, { key: 'be3ee52be04fb9a186a8ef4011b682ab69a09e90' }, this.isOpen && (h("div", { key: '9c2f4b453dcff18928d89662bc789325a0f672ea', class: "papier" }, h("div", { key: '805c5d128dfe694c8d773e36cd25c1e595a0dd05', class: "modal" }, h("div", { key: '9434cf8e8b875df46741fc3c867570800bbea191', class: "modal-bg", onClick: () => this.close() }), h("div", { key: '3edcb63b1cfcc2d4a6a80c8e436e78ffc6b616fc', class: "modal-body" }, h("span", { key: 'dc1bbf2cdfc0ed81d4a2e03a172cdc9202abe812', class: "btn-close", onClick: () => this.close() }, "X"), h("h4", { key: '226f8c211309f416741258fa0b67a64fdd2ab3ba', class: "modal-title" }, h("slot", { key: '5fd2161e457c7b7057575d8037f29990b6be5f7b', name: "title" })), h("h5", { key: '99acaeb1602030fc4777edff2183cacf50893d77', class: "modal-subtitle" }, h("slot", { key: '5506be612154ecaceafdfc042642e6ae9a20c820', name: "sub-title" })), h("p", { key: 'ba008f858a1128780dd1c1541cd3cb633a59f75d', class: "modal-text" }, h("slot", { key: 'fe6b9654a0f2e68d06092fafd1f0e8d283492284', name: "text" })), h("slot", { key: 'f8a888f81b3e535b06607673a931014984d23c63' })))))));
+        return (h(Host, { key: 'cfa1ac6afca44196e45a6aeefff8d1fbb89dff42' }, this.isOpen && (h("div", { key: '9acd1347109fe2874e2db19dce0b1cec21922bf7', class: "papier" }, h("div", { key: 'e2acb5332ad4db0412dc2b0ddfb7c316c5e9bce3', class: "modal" }, h("div", { key: '3d389bd7ffc3de3083eceb8831e90662dd650cd0', class: "modal-bg", onClick: () => this.close() }), h("div", { key: '4bea7cb19b909513ce83987ae35bcf9db2d2ed34', class: "modal-body" }, h("span", { key: '4226f363508293e1bb4ac8a5da6a73793ea15b61', class: "btn-close", onClick: () => this.close() }, "X"), h("h4", { key: '002beab80b40ce3e0296762cf0f1a83f2dc17cfd', class: "modal-title" }, h("slot", { key: '2b42ee470dd50876bb6ce36c366197e28cab29e3', name: "title" })), h("h5", { key: '797366c9db40db3d5d6429a55e76d2615af75480', class: "modal-subtitle" }, h("slot", { key: 'b48230d50120f41cdfbaec942aa8b4ee682980c8', name: "sub-title" })), h("p", { key: '6baacc8c0031e108e2b674c27485ee06a2976205', class: "modal-text" }, h("slot", { key: 'ea5a623b419ae627ae9d922299635692120108c5', name: "text" })), h("slot", { key: 'c5b9e3015aca66dbf5abee519cebfcca76ae6f5d' })))))));
     }
     static get is() { return "p-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,MAAM;IALnB;QAOI,WAAM,GAAY,KAAK,CAAA;KAkD1B;IA5CU,KAAK,CAAC,IAAI;QACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACtB,CAAC;IAGM,KAAK,CAAC,KAAK;QACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,uDACA,IAAI,CAAC,MAAM,IAAI,CACZ,4DAAK,KAAK,EAAC,QAAQ;YACf,4DAAK,KAAK,EAAC,OAAO;gBACd,4DACI,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAC7B;gBACF,4DAAK,KAAK,EAAC,YAAY;oBACnB,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,QAGxB;oBACP,2DAAI,KAAK,EAAC,aAAa;wBACnB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACpB;oBACL,2DAAI,KAAK,EAAC,gBAAgB;wBACtB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACxB;oBACL,0DAAG,KAAK,EAAC,YAAY;wBACjB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACpB;oBACJ,8DAAQ,CACN,CACJ,CACJ,CACT,CACE,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Event,\n    type EventEmitter,\n    Host,\n    Method,\n    State,\n    h,\n} from '@stencil/core'\n\n@Component({\n    tag: 'p-modal',\n    styleUrl: 'modal.scss',\n    shadow: true,\n})\nexport class PModal {\n    @State()\n    isOpen: boolean = false\n\n    @Event({ eventName: 'close' })\n    public closeEvent: EventEmitter<void>\n\n    @Method()\n    public async open() {\n        this.isOpen = true\n    }\n\n    @Method()\n    public async close() {\n        this.isOpen = false\n        this.closeEvent.emit(null)\n    }\n\n    render() {\n        return (\n            <Host>\n                {this.isOpen && (\n                    <div class=\"papier\">\n                        <div class=\"modal\">\n                            <div\n                                class=\"modal-bg\"\n                                onClick={() => this.close()}\n                            />\n                            <div class=\"modal-body\">\n                                <span\n                                    class=\"btn-close\"\n                                    onClick={() => this.close()}\n                                >\n                                    X\n                                </span>\n                                <h4 class=\"modal-title\">\n                                    <slot name=\"title\" />\n                                </h4>\n                                <h5 class=\"modal-subtitle\">\n                                    <slot name=\"sub-title\" />\n                                </h5>\n                                <p class=\"modal-text\">\n                                    <slot name=\"text\" />\n                                </p>\n                                <slot />\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </Host>\n        )\n    }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO3F,MAAM,OAAO,MAAM;IALnB;QAOI,WAAM,GAAY,KAAK,CAAA;KA4C1B;IAtCU,KAAK,CAAC,IAAI;QACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACtB,CAAC;IAGM,KAAK,CAAC,KAAK;QACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,uDACA,IAAI,CAAC,MAAM,IAAI,CACZ,4DAAK,KAAK,EAAC,QAAQ;YACf,4DAAK,KAAK,EAAC,OAAO;gBACd,4DAAK,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAI;gBACrD,4DAAK,KAAK,EAAC,YAAY;oBACnB,6DAAM,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,QAE5C;oBACP,2DAAI,KAAK,EAAC,aAAa;wBACnB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACpB;oBACL,2DAAI,KAAK,EAAC,gBAAgB;wBACtB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACxB;oBACL,0DAAG,KAAK,EAAC,YAAY;wBACjB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACpB;oBACJ,8DAAQ,CACN,CACJ,CACJ,CACT,CACE,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Host, Method, State, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-modal',\n    styleUrl: 'modal.scss',\n    shadow: true,\n})\nexport class PModal {\n    @State()\n    isOpen: boolean = false\n\n    @Event({ eventName: 'close' })\n    public closeEvent: EventEmitter<void>\n\n    @Method()\n    public async open() {\n        this.isOpen = true\n    }\n\n    @Method()\n    public async close() {\n        this.isOpen = false\n        this.closeEvent.emit(null)\n    }\n\n    render() {\n        return (\n            <Host>\n                {this.isOpen && (\n                    <div class=\"papier\">\n                        <div class=\"modal\">\n                            <div class=\"modal-bg\" onClick={() => this.close()} />\n                            <div class=\"modal-body\">\n                                <span class=\"btn-close\" onClick={() => this.close()}>\n                                    X\n                                </span>\n                                <h4 class=\"modal-title\">\n                                    <slot name=\"title\" />\n                                </h4>\n                                <h5 class=\"modal-subtitle\">\n                                    <slot name=\"sub-title\" />\n                                </h5>\n                                <p class=\"modal-text\">\n                                    <slot name=\"text\" />\n                                </p>\n                                <slot />\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/modal/modal.preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.preview.js","sourceRoot":"","sources":["../../../src/components/modal/modal.preview.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY;IACxB,MAAM,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAsB,CAAA;QACrE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QAE3D,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACrC,UAAU,CACQ,CAAA;QACtB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;QAEnD,IAAI,KAAK,IAAI,WAAW,IAAI,UAAU,IAAI,WAAW,EAAE,CAAC;YACpD,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,KAAK,CAAC,IAAI,EAAE,CAAA;YAChB,CAAC,CAAC,CAAA;YACF,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,UAAU,CAAC,IAAI,EAAE,CAAA;YACrB,CAAC,CAAC,CAAA;YACF,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACnC,UAAU,CAAC,KAAK,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;YACF,aAAa,CAAC,UAAU,EAAE,CAAA;QAC9B,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QACjC,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KAChB,CAAC,CAAA;AACN,CAAC","sourcesContent":["import type { PModal } from './modal'\n\nexport function previewModal() {\n    const inputObserver = new MutationObserver(() => {\n        const modal = document.querySelector('#modal-1') as unknown as PModal\n        const buttonModal = document.querySelector('#open-modal-1')\n\n        const otherModal = document.querySelector(\n            '#modal-2',\n        ) as unknown as PModal\n        const otherButton = document.querySelector('#open-modal-2')\n        const closeIt = document.querySelector('#close-it')\n\n        if (modal && buttonModal && otherModal && otherButton) {\n            buttonModal.addEventListener('click', () => {\n                modal.open()\n            })\n            otherButton.addEventListener('click', () => {\n                otherModal.open()\n            })\n            closeIt.addEventListener('click', () => {\n                otherModal.close()\n            })\n            inputObserver.disconnect()\n        }\n    })\n\n    inputObserver.observe(document.body, {\n        childList: true,\n        subtree: true,\n    })\n}\n"]}
+{"version":3,"file":"modal.preview.js","sourceRoot":"","sources":["../../../src/components/modal/modal.preview.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY;IACxB,MAAM,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAsB,CAAA;QACrE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QAE3D,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAsB,CAAA;QAC1E,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;QAEnD,IAAI,KAAK,IAAI,WAAW,IAAI,UAAU,IAAI,WAAW,EAAE,CAAC;YACpD,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,KAAK,CAAC,IAAI,EAAE,CAAA;YAChB,CAAC,CAAC,CAAA;YACF,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,UAAU,CAAC,IAAI,EAAE,CAAA;YACrB,CAAC,CAAC,CAAA;YACF,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACnC,UAAU,CAAC,KAAK,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;YACF,aAAa,CAAC,UAAU,EAAE,CAAA;QAC9B,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QACjC,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KAChB,CAAC,CAAA;AACN,CAAC","sourcesContent":["import type { PModal } from './modal'\n\nexport function previewModal() {\n    const inputObserver = new MutationObserver(() => {\n        const modal = document.querySelector('#modal-1') as unknown as PModal\n        const buttonModal = document.querySelector('#open-modal-1')\n\n        const otherModal = document.querySelector('#modal-2') as unknown as PModal\n        const otherButton = document.querySelector('#open-modal-2')\n        const closeIt = document.querySelector('#close-it')\n\n        if (modal && buttonModal && otherModal && otherButton) {\n            buttonModal.addEventListener('click', () => {\n                modal.open()\n            })\n            otherButton.addEventListener('click', () => {\n                otherModal.open()\n            })\n            closeIt.addEventListener('click', () => {\n                otherModal.close()\n            })\n            inputObserver.disconnect()\n        }\n    })\n\n    inputObserver.observe(document.body, {\n        childList: true,\n        subtree: true,\n    })\n}\n"]}

package/dist/collection/components/modal/stories/modal.preview.js

@@ -12,7 +12,7 @@ export class PModalPreview {
         (_a = this.el.querySelector('p-modal')) === null || _a === void 0 ? void 0 : _a.close();
     }
     render() {
-        return (h("div", { key: '1443551adceb5558ad63e775099e0aecbf4cb19c' }, this.title === true ? (h("p-modal", null, h("span", { slot: "title" }, "Modal title"), h("span", { slot: "sub-title" }, "Modal sub title"), h("span", { slot: "text" }, "This is an example of modal which is implemented with pure CSS! :D"), h("p-button", { type: "warning", onClick: () => this.closeModal() }, "Close it !"))) : (h("p-modal", null, h("h1", null, "Ciao fratello"), h("p", null, "click on button, cross or outside modal to close it."), h("br", null), h("p-button", { type: "success", onClick: () => this.closeModal() }, "Close modal"))), h("p-button", { key: 'de203ae35e8b1669d5576b141e2ce53c0f20a671', type: this.title ? 'secondary' : 'primary', onClick: () => {
+        return (h("div", { key: '1443551adceb5558ad63e775099e0aecbf4cb19c' }, this.title === true ? (h("p-modal", null, h("span", { slot: "title" }, "Modal title"), h("span", { slot: "sub-title" }, "Modal sub title"), h("span", { slot: "text" }, "This is an example of modal which is implemented with pure CSS! :D"), h("p-button", { type: "warning", onClick: () => this.closeModal() }, "Close it !"))) : (h("p-modal", null, h("h1", null, "Ciao fratello"), h("p", null, "click on button, cross or outside modal to close it."), h("br", null), h("p-button", { type: "success", onClick: () => this.closeModal() }, "Close modal"))), h("p-button", { key: '995c0f73de1751a512a4f77c32137ebd3a06dec6', type: this.title ? 'secondary' : 'primary', onClick: () => {
                 this.openModal();
             } }, "Open modal")));
     }
@@ -21,6 +21,7 @@ export class PModalPreview {
         return {
             "title": {
                 "type": "boolean",
+                "attribute": "title",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -35,7 +36,6 @@ export class PModalPreview {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/modal/stories/modal.preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.preview.js","sourceRoot":"","sources":["../../../../src/components/modal/stories/modal.preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAK3D,MAAM,OAAO,aAAa;IAH1B;QAKI,UAAK,GAAa,KAAK,CAAA;KAwD1B;IApDU,SAAS;;QACZ,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,IAAI,EAAE,CAAA;IAC5C,CAAC;IAEM,UAAU;;QACb,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAA;IAC7C,CAAC;IAED,MAAM;QACF,OAAO,CACH;YACK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CACnB;gBACI,YAAM,IAAI,EAAC,OAAO,kBAAmB;gBACrC,YAAM,IAAI,EAAC,WAAW,sBAAuB;gBAC7C,YAAM,IAAI,EAAC,MAAM,yEAGV;gBACP,gBACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,iBAGzB,CACL,CACb,CAAC,CAAC,CAAC,CACA;gBACI,8BAAsB;gBACtB,oEAEI;gBACJ,aAAM;gBACN,gBACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,kBAGzB,CACL,CACb;YACD,iEACI,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,GAAG,EAAE;oBACV,IAAI,CAAC,SAAS,EAAE,CAAA;gBACpB,CAAC,iBAGM,CACT,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-modal-preview',\n})\nexport class PModalPreview {\n    @Prop()\n    title?: boolean = false\n    @Element()\n    public el: HTMLElement\n\n    public openModal() {\n        this.el.querySelector('p-modal')?.open()\n    }\n\n    public closeModal() {\n        this.el.querySelector('p-modal')?.close()\n    }\n\n    render() {\n        return (\n            <div>\n                {this.title === true ? (\n                    <p-modal>\n                        <span slot=\"title\">Modal title</span>\n                        <span slot=\"sub-title\">Modal sub title</span>\n                        <span slot=\"text\">\n                            This is an example of modal which is implemented\n                            with pure CSS! :D\n                        </span>\n                        <p-button\n                            type=\"warning\"\n                            onClick={() => this.closeModal()}\n                        >\n                            Close it !\n                        </p-button>\n                    </p-modal>\n                ) : (\n                    <p-modal>\n                        <h1>Ciao fratello</h1>\n                        <p>\n                            click on button, cross or outside modal to close it.\n                        </p>\n                        <br />\n                        <p-button\n                            type=\"success\"\n                            onClick={() => this.closeModal()}\n                        >\n                            Close modal\n                        </p-button>\n                    </p-modal>\n                )}\n                <p-button\n                    type={this.title ? 'secondary' : 'primary'}\n                    onClick={() => {\n                        this.openModal()\n                    }}\n                >\n                    Open modal\n                </p-button>\n            </div>\n        )\n    }\n}\n"]}
+{"version":3,"file":"modal.preview.js","sourceRoot":"","sources":["../../../../src/components/modal/stories/modal.preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAK3D,MAAM,OAAO,aAAa;IAH1B;QAKI,UAAK,GAAa,KAAK,CAAA;KA6C1B;IAzCU,SAAS;;QACZ,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,IAAI,EAAE,CAAA;IAC5C,CAAC;IAEM,UAAU;;QACb,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAA;IAC7C,CAAC;IAED,MAAM;QACF,OAAO,CACH;YACK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CACnB;gBACI,YAAM,IAAI,EAAC,OAAO,kBAAmB;gBACrC,YAAM,IAAI,EAAC,WAAW,sBAAuB;gBAC7C,YAAM,IAAI,EAAC,MAAM,yEAA0E;gBAC3F,gBAAU,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,iBAE9C,CACL,CACb,CAAC,CAAC,CAAC,CACA;gBACI,8BAAsB;gBACtB,oEAA2D;gBAC3D,aAAM;gBACN,gBAAU,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,kBAE9C,CACL,CACb;YACD,iEACI,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,GAAG,EAAE;oBACV,IAAI,CAAC,SAAS,EAAE,CAAA;gBACpB,CAAC,iBAGM,CACT,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-modal-preview',\n})\nexport class PModalPreview {\n    @Prop()\n    title?: boolean = false\n    @Element()\n    public el: HTMLElement\n\n    public openModal() {\n        this.el.querySelector('p-modal')?.open()\n    }\n\n    public closeModal() {\n        this.el.querySelector('p-modal')?.close()\n    }\n\n    render() {\n        return (\n            <div>\n                {this.title === true ? (\n                    <p-modal>\n                        <span slot=\"title\">Modal title</span>\n                        <span slot=\"sub-title\">Modal sub title</span>\n                        <span slot=\"text\">This is an example of modal which is implemented with pure CSS! :D</span>\n                        <p-button type=\"warning\" onClick={() => this.closeModal()}>\n                            Close it !\n                        </p-button>\n                    </p-modal>\n                ) : (\n                    <p-modal>\n                        <h1>Ciao fratello</h1>\n                        <p>click on button, cross or outside modal to close it.</p>\n                        <br />\n                        <p-button type=\"success\" onClick={() => this.closeModal()}>\n                            Close modal\n                        </p-button>\n                    </p-modal>\n                )}\n                <p-button\n                    type={this.title ? 'secondary' : 'primary'}\n                    onClick={() => {\n                        this.openModal()\n                    }}\n                >\n                    Open modal\n                </p-button>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import feather from "feather-icons";
 export class PNotification {
     constructor() {
@@ -26,13 +26,7 @@ export class PNotification {
             alert: true,
             'can--close': this.canclose,
         };
-        const type = [
-            'primary',
-            'secondary',
-            'success',
-            'warning',
-            'danger',
-        ].find((v) => v === this.type);
+        const type = ['primary', 'secondary', 'success', 'warning', 'danger'].find((v) => v === this.type);
         cssClass[`alert-${type || 'primary'}`] = true;
         return cssClass;
     }
@@ -41,7 +35,7 @@ export class PNotification {
         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: () => {
+        return (h(Host, { key: '94309bbd1767f85f53f52bb1e6595adcf7bc70d3' }, h("div", { key: '131125bb50a67087afada7aef4698c034b24107d', class: "papier" }, h("div", { key: 'fb08207dbd09e3a8ce0330e63db4b3932ce193a5', class: this.getClassName() }, h("div", { key: '4854c3097fdbec844efcc0af5f4ad7ce9f10d93d', innerHTML: this.getIconName() }), h("div", { key: 'bf195445eb56912eb42a13215102178bad9117d4', innerHTML: this.text }), this.canclose && (h("span", { key: '98255df97d016bd0f95eb701eb2f56ad3d19b4ea', onClick: () => {
                 this.onClose();
             }, innerHTML: feather.icons.x.toSvg() }))))));
     }
@@ -61,6 +55,7 @@ export class PNotification {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,12 +70,12 @@ export class PNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'info'"
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,12 +90,12 @@ export class PNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "canclose": {
                 "type": "boolean",
+                "attribute": "canclose",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -115,12 +110,12 @@ export class PNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "canclose",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "timestamp": {
                 "type": "string",
+                "attribute": "timestamp",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -135,7 +130,6 @@ export class PNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "timestamp",
                 "reflect": false,
                 "defaultValue": "''"
             }

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

@@ -1 +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"]}
+{"version":3,"file":"p-notification.js","sourceRoot":"","sources":["../../../../src/components/notification/p-notification/p-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC3F,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;KAwDxB;IAnDU,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,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAA;QAClG,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 { Component, Element, Event, type EventEmitter, Host, Prop, h } 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 = ['primary', 'secondary', 'success', 'warning', 'danger'].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.js

@@ -38,7 +38,7 @@ export class PNotificationHandler {
         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());
+        return h(Host, { key: '3fd9e86a226374f1a6301f220fd952b95141ca9a' }, this.mapNotifications());
     }
     static get is() { return "p-notification-handler"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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"]}
+{"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;KAgD5C;IA7CU,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,sBAAgB,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAChI,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 key={toast.type} type={toast.type} text={toast.text} canclose={toast.canclose} timestamp={toast.timestamp} />\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

@@ -9,19 +9,13 @@ export class PNotification {
     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) => {
+            } }, ['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: () => {
+        })), h("div", { key: 'a80bb8555ca4031007a51e8b351ee43082edcffd', style: { marginTop: '20px' } }, h("p-button", { key: 'af5ca61d2ffed0a209ba7cbc669fc5edda83b4ad', style: { marginRight: '20px' }, type: "primary", onClick: () => {
                 this.addNotification({});
-            } }, "Add notification"), h("p-button", { key: '0e6cc40f30f61cf28013dfc697e183db27097499', type: "secondary", style: { marginRight: '20px' }, onClick: () => {
+            } }, "Add notification"), h("p-button", { key: '276d70752ac17d16c19edd70f704f0871bc11504', type: "secondary", style: { marginRight: '20px' }, onClick: () => {
                 this.addNotification({ canclose: true });
-            } }, "Add closable notification"), h("p-button", { key: '0648fbaeec551c170a5ea9680cb8770bec229a1b', type: "success", onClick: () => {
+            } }, "Add closable notification"), h("p-button", { key: '69ed21fce693dc16d78480f3c8b154a4d9a0a142', type: "success", onClick: () => {
                 this.addNotification({ timeout: 2000 });
             } }, "Add timeout notification"))));
     }

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

@@ -1 +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"]}
+{"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,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACpE,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                    {['primary', 'secondary', 'success', 'warning', 'danger'].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"]}