@amiceli/papierjs 0.9.0 → 0.11.0

package/dist/collection/components/form/{slider → p-slider}/sliders.js

@@ -1,5 +1,5 @@
-import { Host, h, } from "@stencil/core";
-export class PSliders {
+import { Host, h } from "@stencil/core";
+export class PSlider {
     constructor() {
         this.value = 0;
         this.min = 0;
@@ -10,11 +10,11 @@ export class PSliders {
         this.changeEvent.emit(Number.parseInt(e.target.value));
     }
     render() {
-        return (h(Host, { key: 'd781d4bbf5506a5ca6c032e47a19f85e7410834e' }, h("div", { key: 'ea47478f383250c94cb89c76850736315c61c916', class: {
+        return (h(Host, { key: '11f5fe88d1551a96be2ee6b03c85e8f8739b82f7' }, h("div", { key: 'd78a0117ce62a65d4a1051cfec6938d4151e015e', class: {
                 papier: true,
                 'is--block': this.block,
                 'is--dark': this.dark,
-            } }, h("div", { key: '042736e16ee21d0cec0f9e5f2aba79bc792f05e1', class: "form-group" }, h("input", { key: '826d1670c732285d12becb6f0a1aa42f1c67bb9e', class: "input-block", type: "range", min: this.min, max: this.max, value: this.value, onInput: (e) => {
+            } }, h("div", { key: '1a63d2ba06552ae4400e7263c95a409019f48184', class: "form-group" }, h("input", { key: 'e3451314d10d7577da0383d4ecbc2e225aef2172', class: "input-block", type: "range", min: this.min, max: this.max, value: this.value, onInput: (e) => {
                 this.onInput(e);
             } })))));
     }
@@ -34,6 +34,7 @@ export class PSliders {
         return {
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -48,12 +49,12 @@ export class PSliders {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -68,12 +69,12 @@ export class PSliders {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -88,11 +89,11 @@ export class PSliders {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "block": {
                 "type": "boolean",
+                "attribute": "block",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -107,12 +108,12 @@ export class PSliders {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "block",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "dark": {
                 "type": "boolean",
+                "attribute": "dark",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -127,7 +128,6 @@ export class PSliders {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dark",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/form/p-slider/sliders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliders.js","sourceRoot":"","sources":["../../../../src/components/form/p-slider/sliders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOlF,MAAM,OAAO,OAAO;IALpB;QAOI,UAAK,GAAY,CAAC,CAAA;QAElB,QAAG,GAAY,CAAC,CAAA;QAIhB,UAAK,GAAa,KAAK,CAAA;QAEvB,SAAI,GAAa,KAAK,CAAA;KAqCzB;IA9BU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAA;IAChF,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,WAAW,EAAE,IAAI,CAAC,KAAK;oBACvB,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DACI,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACX,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;wBACnB,CAAC,GACH,CACA,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Host, h, Prop } from '@stencil/core'\n\n@Component({\n    tag: 'p-slider',\n    styleUrl: 'slider.scss',\n    shadow: true,\n})\nexport class PSlider {\n    @Prop()\n    value?: number = 0\n    @Prop()\n    min?: number = 0\n    @Prop()\n    max?: number\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({\n        eventName: 'change',\n    })\n    public changeEvent: EventEmitter<number>\n\n    public onInput(e: Event) {\n        this.changeEvent.emit(Number.parseInt((e.target as HTMLInputElement).value))\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--block': this.block,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <input\n                            class=\"input-block\"\n                            type=\"range\"\n                            min={this.min}\n                            max={this.max}\n                            value={this.value}\n                            onInput={(e) => {\n                                this.onInput(e)\n                            }}\n                        />\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/form/p-slider/sliders.preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliders.preview.js","sourceRoot":"","sources":["../../../../src/components/form/p-slider/sliders.preview.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa;IACzB,MAAM,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC5C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;QACpD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;QAE9D,IAAI,MAAM,IAAI,UAAU,EAAE,CAAC;YACvB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE;gBACjD,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAA;YACrC,CAAC,CAAC,CAAA;YAEF,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":["export function previewSlider() {\n    const alertObserver = new MutationObserver(() => {\n        const slider = document.querySelector('#for-slider')\n        const sliderSpan = document.querySelector('#for-slider-label')\n\n        if (slider && sliderSpan) {\n            slider.addEventListener('change', (e: CustomEvent) => {\n                sliderSpan.textContent = e.detail\n            })\n\n            alertObserver.disconnect()\n        }\n    })\n\n    alertObserver.observe(document.body, {\n        childList: true,\n        subtree: true,\n    })\n}\n"]}

package/dist/collection/components/form/{switch → p-switch}/switch.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class PSwitch {
     constructor() {
         /** define switch style */
@@ -12,13 +12,13 @@ export class PSwitch {
         this.changeEvent.emit(e.target.checked);
     }
     render() {
-        return (h(Host, { key: 'dc34b7bcd066f56069cff699bbd6f772c321fda4' }, h("div", { key: '60dad8de3b96b83993397b9e3f461e8927404a5e', class: {
+        return (h(Host, { key: '22276781c74296d1a16fee4e2df11f15a77af965' }, h("div", { key: '9d5368a6e09cec39314773f28e5cbc25fffde0c9', class: {
                 papier: true,
                 'is--dark': this.dark,
-            } }, h("div", { key: '50b4d74c78067fc022637aa3cd89358b007a5931', class: "form-group" }, h("label", { key: 'acda7120df26268b1f2a1ee37074a88a6726f240', class: {
+            } }, h("div", { key: '3629414145c357884819e0a948d3493745cb2336', class: "form-group" }, h("label", { key: '1e22cc51da13b2cec21253722729329e03dabbaf', class: {
                 'paper-switch': !this.square,
                 'paper-switch-2': this.square,
-            } }, h("input", { key: '7f1d80e40ab826c476d0e69427bd0343ceed85ee', id: "paperSwitch4", name: "paperSwitch4", type: "checkbox", checked: this.checked, onInput: (e) => this.onInput(e) }), h("span", { key: 'c1d59ba857f9a4f8246707ad43909f7b266b2cda', class: {
+            } }, h("input", { key: '36e18257b12129cd1ecae73cd1aab23f308eec57', id: "paperSwitch4", name: "paperSwitch4", type: "checkbox", checked: this.checked, onInput: (e) => this.onInput(e) }), h("span", { key: '34b6434ddca9ea19f07e9d773b578818a0449faf', class: {
                 round: this.round,
                 'paper-switch-slider': true,
             } }))))));
@@ -39,6 +39,7 @@ export class PSwitch {
         return {
             "round": {
                 "type": "boolean",
+                "attribute": "round",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -53,12 +54,12 @@ export class PSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "round",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "square": {
                 "type": "boolean",
+                "attribute": "square",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -73,12 +74,12 @@ export class PSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "square",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "dark": {
                 "type": "boolean",
+                "attribute": "dark",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -93,12 +94,12 @@ export class PSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dark",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -113,7 +114,6 @@ export class PSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/form/p-switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,IAAI,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;KA8CnC;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, h, Prop } 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({\n        eventName: 'change',\n    })\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 → p-switch-tile}/switch-tile.js

@@ -1,9 +1,9 @@
-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
  */
-export class SwitchTile {
+export class PSwitchTile {
     constructor() {
         /** Enable dark mode */
         this.dark = false;
@@ -30,10 +30,10 @@ export class SwitchTile {
         return cssClass;
     }
     render() {
-        return (h(Host, { key: 'c45d3f233e411919b3b7b761875eee407a30ded8' }, h("div", { key: 'ef04d121a7bb316910bb5eba320636e469b15296', class: {
+        return (h(Host, { key: '470e9a4e78033875ebc2737eea116f3060e72969' }, h("div", { key: 'f792f4674db728833e654c44171b4a6a18cc2566', 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: '49e357c761a78a84f9e5b8a7fe68a2ed9f0f8904', class: "form-group" }, h("label", { key: 'd794cf87c991310b427c78b4ae4870606c440551', htmlFor: "paperSwitch1", class: "paper-switch-tile" }, h("input", { key: 'a1d889411704d9c36f8ec6a02ba1f91c125f797f', id: "paperSwitch1", name: "paperSwitch1", type: "checkbox", checked: this.checked }), h("div", { key: 'c83e920493c607f643a99afcdb08523d599db2d9', class: "paper-switch-tile-card border" }, h("div", { key: 'd090b0d62d5dd10b4fe8b67b18f867b0a716fafb', class: this.getFrontCardClass() }, h("slot", { key: '4ccffbf8f1a0b4f39207a2283e09f1ebe82ff376', name: "unchecked-text" })), h("div", { key: 'ca3ce2d5714f9916a3a90fb33f8bdb7f7daf9993', class: this.getBackCardClass() }, h("slot", { key: 'a56a3f072a49eb0d636765b90ca3a51cd64b5233', 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/p-switch-tile/switch-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-tile.js","sourceRoot":"","sources":["../../../../src/components/form/p-switch-tile/switch-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAIlF;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAMI,uBAAuB;QAEhB,SAAI,GAAa,KAAK,CAAA;QAEtB,YAAO,GAAa,KAAK,CAAA;QAEzB,sBAAiB,GAAoB,SAAS,CAAA;KA6DxD;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, h, Prop } 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 PSwitchTile {\n    /** Enable dark mode */\n    @Prop()\n    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({\n        eventName: 'change',\n    })\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/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() {
@@ -41,7 +41,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: 'a3a2425f36e58060de56dbe7a8db4c4bddc00c35' }, h("div", { key: '97dd464c746c42730addb3bc4df2744c4d3e2979', class: "papier" }, h("div", { key: '768b037b54a1d9e382aa2095dff35396d07fb581', class: this.getClassName() }, h("div", { key: '20193bfdc8b66ad7e880fee6510dc5fa7778b948', innerHTML: this.getIconName() }), h("div", { key: 'a67678cc6256900c078228572e3f6847feaf9b53', innerHTML: this.text }), this.canclose && (h("span", { key: '7376f55ee0baaf4ea67f3cbd7ff97460876271e1', onClick: () => {
                 this.onClose();
             }, innerHTML: feather.icons.x.toSvg() }))))));
     }
@@ -61,6 +61,7 @@ export class PNotification {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,12 +76,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 +96,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 +116,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 +136,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,CAAC,EAAE,IAAI,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;KAgExB;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 { Component, Element, Event, type EventEmitter, Host, h, Prop } 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({\n        eventName: 'close',\n    })\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.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,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,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, h, Listen, Method, State } 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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class PNotification {
+export class PNotificationPreview {
     addNotification(options) {
         const handler = this.el.querySelector('p-notification-handler');
         if (handler) {
@@ -7,7 +7,7 @@ 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) => {
+        return (h("div", { key: '6d4f56c69797ebb8a0e9d7bc0f9d9dd2eca0452b' }, h("p-notification-handler", { key: '470a29e2eec9839087c6ffbfc137a687d73d638c' }), h("p-dropdown", { key: 'f4cb4f24b5780dbe5bc92f38566f4f600cf8777f', placeholder: "Choose notification type", onSelect: (e) => {
                 this.notificationType = e.detail;
             } }, [
             'primary',
@@ -17,12 +17,22 @@ export class PNotification {
             '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: 'd315bbc2cec0898641ffa45f026736bf253fa0ac', style: {
+                marginTop: '20px',
+            } }, h("p-button", { key: 'ee80d787d147d909d2c2ea42aa0001dfce178519', 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 notification"), h("p-button", { key: '8c93823fac08637aff598c97da5f3cbbd94458a5', type: "secondary", style: {
+                marginRight: '20px',
+            }, onClick: () => {
+                this.addNotification({
+                    canclose: true,
+                });
+            } }, "Add closable notification"), h("p-button", { key: 'c7868745f9cb07055ec872c62257f464d5ff6aca', type: "success", onClick: () => {
+                this.addNotification({
+                    timeout: 2000,
+                });
             } }, "Add timeout notification"))));
     }
     static get is() { return "p-notification-preview"; }

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,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAM5D,MAAM,OAAO,oBAAoB;IAOtB,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,4DACI,KAAK,EAAE;oBACH,SAAS,EAAE,MAAM;iBACpB;gBAED,iEACI,KAAK,EAAE;wBACH,WAAW,EAAE,MAAM;qBACtB,EACD,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;wBACH,WAAW,EAAE,MAAM;qBACtB,EACD,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC;4BACjB,QAAQ,EAAE,IAAI;yBACjB,CAAC,CAAA;oBACN,CAAC,gCAGM;gBACX,iEACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC;4BACjB,OAAO,EAAE,IAAI;yBAChB,CAAC,CAAA;oBACN,CAAC,+BAGM,CACT,CACJ,CACT,CAAA;IACL,CAAC;;;;;;CACJ","sourcesContent":["import { Component, Element, h, State } from '@stencil/core'\nimport type { PushOptions } from '../p-notification-handler'\n\n@Component({\n    tag: 'p-notification-preview',\n})\nexport class PNotificationPreview {\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\n                    style={{\n                        marginTop: '20px',\n                    }}\n                >\n                    <p-button\n                        style={{\n                            marginRight: '20px',\n                        }}\n                        type=\"primary\"\n                        onClick={() => {\n                            this.addNotification({})\n                        }}\n                    >\n                        Add notification\n                    </p-button>\n                    <p-button\n                        type=\"secondary\"\n                        style={{\n                            marginRight: '20px',\n                        }}\n                        onClick={() => {\n                            this.addNotification({\n                                canclose: true,\n                            })\n                        }}\n                    >\n                        Add closable notification\n                    </p-button>\n                    <p-button\n                        type=\"success\"\n                        onClick={() => {\n                            this.addNotification({\n                                timeout: 2000,\n                            })\n                        }}\n                    >\n                        Add timeout notification\n                    </p-button>\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/{accordion/accordion.js → p-accordion/p-accordion.js}

@@ -10,29 +10,30 @@ export class PAccordion {
     render() {
         const icon = feather.icons['chevron-down'].toSvg();
         const openIcon = feather.icons['chevron-up'].toSvg();
-        return (h(Host, { key: 'c50739724430a13a940b233f10b67160fe02d65b' }, h("div", { key: '7698b49f23461126f5e0c1e8dd9bb07206dea1c4', class: "papier" }, h("div", { key: 'e8b9e6012e19f814acfaf18a5a5063d8b9938123', class: "p-accordion is--block border" }, h("div", { key: '146d07cbceb80509e0b712e500d0c3500c4f453a', class: "p-accordion__summary", onClick: () => {
+        return (h(Host, { key: 'f9e3958d7323b6c52c6d2056f4b199184b383aa0' }, h("div", { key: '5e715a6eceebd34f5b521537f793307e80d3ac53', class: "papier" }, h("div", { key: '754d6e5649ff89bd9815fd02c1dcb9b55d5a9f92', class: "p-accordion is--block border" }, h("div", { key: '8a9ff11c31d3781b5212dd4e25fb11a4095a9a5c', class: "p-accordion__summary", onClick: () => {
                 this.open = !this.open;
-            } }, h("span", { key: '6948829b29b4a285785d7797a31f63ae8a51d40d' }, this.title), h("span", { key: '532d8b5f1e98b61f7db3da55b273c79b9f92a5fa' }, h("span", { key: '6feef501dc965a56b787308f997fb2ede21a6a7b', class: "for--icon", innerHTML: this.open ? openIcon : icon }))), h("div", { key: 'dfb06ea18b1157844bb0a9d46c8869317bcfd932', class: {
+            } }, h("span", { key: '74d61a170bf41705f93b87b4d802d09b977370f0' }, this.title), h("span", { key: '4f3652dfe456814d78d18fcb7f824ac1e65f2648' }, h("span", { key: 'f54b63935d86c4ddb7cadc6d836506e899f516ca', class: "for--icon", innerHTML: this.open ? openIcon : icon }))), h("div", { key: '7b0943cd52c61591dc55efdff6b7ab72bea9e752', class: {
                 'p-accordion__content': true,
                 'is--open': this.open,
-            } }, h("slot", { key: 'a1565c9e2dea593b582f8729e046bb9b30ecb7f6' }))))));
+            } }, h("slot", { key: 'cdf43a544b1cb45466cf96ba7f54965e0304cbf7' }))))));
     }
     static get is() { return "p-accordion"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["accordion.scss"]
+            "$": ["p-accordion.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["accordion.css"]
+            "$": ["p-accordion.css"]
         };
     }
     static get properties() {
         return {
             "title": {
                 "type": "string",
+                "attribute": "title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -47,11 +48,11 @@ export class PAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title",
                 "reflect": false
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -66,11 +67,10 @@ export class PAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false,
                 "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=accordion.js.map
+//# sourceMappingURL=p-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-accordion.js","sourceRoot":"","sources":["../../../src/components/p-accordion/p-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,OAAO,MAAM,eAAe,CAAA;AAEnC;;GAEG;AAMH,MAAM,OAAO,UAAU;IALvB;QAWI,SAAI,GAAY,KAAK,CAAA;KAkCxB;IAhCG,MAAM;QACF,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAA;QAClD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAA;QAEpD,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,QAAQ;gBACf,4DAAK,KAAK,EAAC,8BAA8B;oBACrC,4DACI,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE;4BACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;wBAC1B,CAAC;wBAED,+DAAO,IAAI,CAAC,KAAK,CAAQ;wBACzB;4BACI,6DAAM,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAI,CAC/D,CACL;oBACN,4DACI,KAAK,EAAE;4BACH,sBAAsB,EAAE,IAAI;4BAC5B,UAAU,EAAE,IAAI,CAAC,IAAI;yBACxB;wBAED,8DAAQ,CACN,CACJ,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core'\nimport feather from 'feather-icons'\n\n/**\n * @slot - accordion content\n */\n@Component({\n    tag: 'p-accordion',\n    styleUrl: 'p-accordion.scss',\n    shadow: true,\n})\nexport class PAccordion {\n    @Prop()\n    title: string\n    @Prop({\n        mutable: true,\n    })\n    open: boolean = false\n\n    render() {\n        const icon = feather.icons['chevron-down'].toSvg()\n        const openIcon = feather.icons['chevron-up'].toSvg()\n\n        return (\n            <Host>\n                <div class=\"papier\">\n                    <div class=\"p-accordion is--block border\">\n                        <div\n                            class=\"p-accordion__summary\"\n                            onClick={() => {\n                                this.open = !this.open\n                            }}\n                        >\n                            <span>{this.title}</span>\n                            <span>\n                                <span class=\"for--icon\" innerHTML={this.open ? openIcon : icon} />\n                            </span>\n                        </div>\n                        <div\n                            class={{\n                                'p-accordion__content': true,\n                                'is--open': this.open,\n                            }}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}