@amiceli/papierjs 0.10.0 → 0.11.0

package/dist/collection/components/breadcrumb/{breadcrumb/breadcrumb.css → p-breadcrumb/p-breadcrumb.css}

@@ -3231,32 +3231,32 @@
   --warning: #ddcd45;
   --danger: #a7342d;
   --muted: #868e96;
-  --primary-light: #cdcccb;
-  --secondary-light: #d8ebfd;
-  --success-light: #d5dfc8;
-  --warning-light: #f5f0c6;
-  --danger-light: #f0cbc9;
-  --muted-light: #e6e7e9;
+  --primary-light: rgb(204.9606299213, 204.1535433071, 202.5393700787);
+  --secondary-light: rgb(215.8232142857, 235.1357142857, 252.9767857143);
+  --success-light: rgb(212.9888, 223.0576, 200.1424);
+  --warning-light: rgb(244.6454545455, 239.7727272727, 198.3545454545);
+  --danger-light: rgb(240.4599056604, 203.3018867925, 201.0400943396);
+  --muted-light: rgb(229.5685840708, 231.25, 232.9314159292);
   --primary-dark: black;
   --secondary-dark: black;
-  --success-dark: #374427;
-  --warning-dark: #746a15;
+  --success-dark: rgb(55.212, 67.624, 39.376);
+  --warning-dark: rgb(115.8272727273, 105.8636363636, 21.1727272727);
   --danger-dark: black;
-  --muted-dark: #313538;
-  --primary-light-10: #5b5a57;
-  --secondary-light-10: #208ef3;
-  --success-light-10: #9fb681;
-  --warning-light-10: #e5d970;
-  --danger-light-10: #cb453c;
-  --muted-light-10: #a1a8ae;
-  --primary-dark-10: #272625;
-  --secondary-dark-10: #085aa5;
-  --success-dark-10: #4a5a35;
-  --warning-dark-10: #746a15;
-  --danger-dark-10: #7f2722;
-  --muted-dark-10: #6c757d;
-  --primary-shaded-50: #c1c0bd;
-  --primary-shaded-70: #f2f2f2;
+  --muted-dark: rgb(49.0154867257, 52.75, 56.4845132743);
+  --primary-light-10: rgb(91.1023622047, 89.7007874016, 86.8976377953);
+  --secondary-light-10: rgb(31.5401785714, 141.6964285714, 243.4598214286);
+  --success-light-10: rgb(158.684, 181.768, 129.232);
+  --warning-light-10: rgb(228.8818181818, 216.5909090909, 112.1181818182);
+  --danger-light-10: rgb(202.570754717, 68.5849056604, 60.429245283);
+  --muted-light-10: rgb(161.3053097345, 167.5, 173.6946902655);
+  --primary-dark-10: rgb(38.8976377953, 38.2992125984, 37.1023622047);
+  --secondary-dark-10: rgb(8.4955357143, 89.5892857143, 164.5044642857);
+  --success-dark-10: rgb(73.6332, 90.1864, 52.5136);
+  --warning-dark-10: rgb(115.8272727273, 105.8636363636, 21.1727272727);
+  --danger-dark-10: rgb(126.8254716981, 39.4905660377, 34.1745283019);
+  --muted-dark-10: rgb(108.2522123894, 116.5, 124.7477876106);
+  --primary-shaded-50: rgb(192.5118110236, 191.5039370079, 189.4881889764);
+  --primary-shaded-70: rgb(242.3070866142, 242.1023622047, 241.6929133858);
   --white-dark: rgba(0, 0, 0, 0.03);
   --white-dark-light-80: rgba(204, 204, 204, 0.03);
   --light-dark: rgba(0, 0, 0, 0.7);
@@ -3264,12 +3264,12 @@
   --main-background: white;
   --main-background-light: white;
   --black: black;
-  --primary-text: #272625;
-  --secondary-text: #085aa5;
-  --success-text: #4a5a35;
-  --warning-text: #746a15;
-  --danger-text: #7f2722;
-  --muted-text: #6c757d;
+  --primary-text: rgb(38.8976377953, 38.2992125984, 37.1023622047);
+  --secondary-text: rgb(8.4955357143, 89.5892857143, 164.5044642857);
+  --success-text: rgb(73.6332, 90.1864, 52.5136);
+  --warning-text: rgb(115.8272727273, 105.8636363636, 21.1727272727);
+  --danger-text: rgb(126.8254716981, 39.4905660377, 34.1745283019);
+  --muted-text: rgb(108.2522123894, 116.5, 124.7477876106);
   --shadow-color-regular: hsla(0, 0%, 0%, 0.2);
   --shadow-color-hover: hsla(0, 0%, 0%, 0.3);
   --primary-inverse: #fff;
@@ -3282,44 +3282,44 @@
   --danger: #df4c57;
   --muted: #868e96;
   --primary-light: white;
-  --secondary-light: #69a1d4;
-  --success-light: #82ca84;
-  --warning-light: #d9c966;
-  --danger-light: #e3626b;
-  --muted-light: #949ba2;
-  --primary-dark: gray;
-  --secondary-dark: #1f476b;
-  --success-dark: #265927;
-  --warning-dark: #71651c;
-  --danger-dark: #7c161e;
-  --muted-dark: #313538;
+  --secondary-light: rgb(104.7945205479, 161.3424657534, 211.7054794521);
+  --success-light: rgb(129.875, 201.625, 131.625);
+  --warning-light: rgb(217.0763888889, 201.2013888889, 102.4236111111);
+  --danger-light: rgb(226.8672985782, 97.6327014218, 107.3033175355);
+  --muted-light: rgb(147.6526548673, 154.75, 161.8473451327);
+  --primary-dark: rgb(127.5, 127.5, 127.5);
+  --secondary-dark: rgb(30.8767123288, 71.2054794521, 107.1232876712);
+  --success-dark: rgb(38.125, 89.375, 39.375);
+  --warning-dark: rgb(112.9305555556, 101.1805555556, 28.0694444444);
+  --danger-dark: rgb(123.8578199052, 22.1421800948, 29.7535545024);
+  --muted-dark: rgb(49.0154867257, 52.75, 56.4845132743);
   --primary-light-10: white;
-  --secondary-light-10: #7daed9;
-  --success-light-10: #94d195;
-  --warning-light-10: #ded07b;
-  --danger-light-10: #e77780;
-  --muted-light-10: #a1a8ae;
-  --primary-dark-10: #e6e6e6;
-  --secondary-dark-10: #367cba;
-  --success-dark-10: #4cb34f;
-  --warning-dark-10: #c3ae30;
-  --danger-dark-10: #d22633;
-  --muted-dark-10: #6c757d;
-  --primary-shaded-50: #343332;
-  --primary-shaded-70: #2f2e2d;
+  --secondary-light-10: rgb(124.5890410959, 173.6849315068, 217.4109589041);
+  --success-light-10: rgb(147.75, 209.25, 149.25);
+  --warning-light-10: rgb(222.1527777778, 208.4027777778, 122.8472222222);
+  --danger-light-10: rgb(230.7345971564, 119.2654028436, 127.6066350711);
+  --muted-light-10: rgb(161.3053097345, 167.5, 173.6946902655);
+  --primary-dark-10: rgb(229.5, 229.5, 229.5);
+  --secondary-dark-10: rgb(53.698630137, 123.8356164384, 186.301369863);
+  --success-dark-10: rgb(76.25, 178.75, 78.75);
+  --warning-dark-10: rgb(194.625, 174.375, 48.375);
+  --danger-dark-10: rgb(210.3886255924, 37.6113744076, 50.5402843602);
+  --muted-dark-10: rgb(108.2522123894, 116.5, 124.7477876106);
+  --primary-shaded-50: rgb(51.9488188976, 51.1496062992, 49.5511811024);
+  --primary-shaded-70: rgb(46.7283464567, 46.0094488189, 44.5716535433);
   --white-dark: rgba(255, 255, 255, 0.03);
   --white-dark-light-80: rgba(255, 255, 255, 0.03);
   --light-dark: rgba(255, 255, 255, 0.7);
   --white: white;
   --main-background: #41403e;
-  --main-background-light: #c1c0bd;
+  --main-background-light: rgb(192.5118110236, 191.5039370079, 189.4881889764);
   --black: black;
   --primary-text: #41403e;
-  --secondary-text: #1f476b;
-  --success-text: #265927;
-  --warning-text: #71651c;
-  --danger-text: #7c161e;
-  --muted-text: #949ba2;
+  --secondary-text: rgb(30.8767123288, 71.2054794521, 107.1232876712);
+  --success-text: rgb(38.125, 89.375, 39.375);
+  --warning-text: rgb(112.9305555556, 101.1805555556, 28.0694444444);
+  --danger-text: rgb(123.8578199052, 22.1421800948, 29.7535545024);
+  --muted-text: rgb(147.6526548673, 154.75, 161.8473451327);
   --shadow-color-regular: hsla(0, 0%, 0%, 0.2);
   --shadow-color-hover: hsla(0, 0%, 0%, 0.3);
   --primary-inverse: #41403e;

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class Alert {
+export class PBreadcrumb {
     constructor() {
         this.dark = false;
     }
@@ -21,18 +21,18 @@ export class Alert {
         (_a = items.at(0)) === null || _a === void 0 ? void 0 : _a.setAttribute('first', 'true');
     }
     render() {
-        return (h("div", { key: 'e534c9869375efb2ebb46683294e71815c4ac63a', class: this.getParentClass() }, h("div", { key: '7b1df5afa66a0b61472304b558e015cf88b26857', class: "border" }, h("slot", { key: '797b59173cc2a8d970fc90de4688ee813f2ceec2' }))));
+        return (h("div", { key: '93b7d2fb7e7df07890ecf7c7c84ed8c11bb8e7aa', class: this.getParentClass() }, h("div", { key: 'a428b1543be45aced1e7aa4c70a0a51cff0cdce0', class: "border" }, h("slot", { key: '89b9f5ff4c4241b89ea6d798126d294ad2c2a56f' }))));
     }
     static get is() { return "p-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["breadcrumb.scss"]
+            "$": ["p-breadcrumb.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["breadcrumb.css"]
+            "$": ["p-breadcrumb.css"]
         };
     }
     static get properties() {
@@ -61,4 +61,4 @@ export class Alert {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=breadcrumb.js.map
+//# sourceMappingURL=p-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/p-breadcrumb/p-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAO3D,MAAM,OAAO,WAAW;IALxB;QAOI,SAAI,GAAa,KAAK,CAAA;KAmCzB;IA/BU,cAAc;QACjB,IAAI,QAAQ,GAAG,6BAA6B,CAAA;QAE5C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,gBAAgB;;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC,CAAA;QAE3E,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YACrC,CAAC;QACL,CAAC;QAED,MAAA,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,0CAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAC,QAAQ;gBACf,8DAAQ,CACN,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core'\n\n@Component({\n    tag: 'p-breadcrumb',\n    styleUrl: 'p-breadcrumb.scss',\n    shadow: true,\n})\nexport class PBreadcrumb {\n    @Prop()\n    dark?: boolean = false\n    @Element()\n    public el: HTMLElement\n\n    public getParentClass() {\n        let cssClass = 'papier is--block breadcrumb'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public componentDidLoad() {\n        const items = Array.from(this.el.getElementsByTagName('p-breadcrumb-item'))\n\n        if (this.dark) {\n            for (const item of items) {\n                item.setAttribute('dark', 'true')\n            }\n        }\n\n        items.at(0)?.setAttribute('first', 'true')\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class=\"border\">\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class Alert {
+export class PBreadcrumbItem {
     constructor() {
         this.dark = false;
         this.first = false;
@@ -15,18 +15,18 @@ export class Alert {
         return cssClass;
     }
     render() {
-        return (h("span", { key: '72adacb4656a0d04f53d4b029282d557b947e79f', class: this.getParentClass() }, this.link ? (h("a", { href: this.link }, h("slot", null))) : (h("slot", null))));
+        return (h("span", { key: 'f3410b66b44f5cb0d44297cd4e5d2e0dc5dcda8f', class: this.getParentClass() }, this.link ? (h("a", { href: this.link }, h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "p-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../breadcrumb/breadcrumb.scss"]
+            "$": ["../p-breadcrumb/p-breadcrumb.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../breadcrumb/breadcrumb.css"]
+            "$": ["../p-breadcrumb/p-breadcrumb.css"]
         };
     }
     static get properties() {
@@ -94,4 +94,4 @@ export class Alert {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=breadcrumb-item.js.map
+//# sourceMappingURL=p-breadcrumb-item.js.map

package/dist/collection/components/breadcrumb/p-breadcrumb-item/p-breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/p-breadcrumb-item/p-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAO3D,MAAM,OAAO,eAAe;IAL5B;QAOI,SAAI,GAAa,KAAK,CAAA;QAEtB,UAAK,GAAa,KAAK,CAAA;KAgC1B;IA1BU,cAAc;QACjB,IAAI,QAAQ,GAAG,wBAAwB,CAAA;QAEvC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI;YACd,eAAQ,CACR,CACP,CAAC,CAAC,CAAC,CACA,eAAQ,CACX,CACE,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core'\n\n@Component({\n    tag: 'p-breadcrumb-item',\n    styleUrl: '../p-breadcrumb/p-breadcrumb.scss',\n    shadow: true,\n})\nexport class PBreadcrumbItem {\n    @Prop()\n    dark?: boolean = false\n    @Prop()\n    first?: boolean = false\n    @Prop()\n    link?: string\n    @Element()\n    public el: HTMLElement\n\n    public getParentClass() {\n        let cssClass = 'papier breadcrumb-item'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n        if (this.first) {\n            cssClass = `${cssClass} is--first`\n        }\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                {this.link ? (\n                    <a href={this.link}>\n                        <slot />\n                    </a>\n                ) : (\n                    <slot />\n                )}\n            </span>\n        )\n    }\n}\n"]}

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

@@ -3,7 +3,7 @@ import feather from "feather-icons";
 /**
  * @slot - slot for p-dropdown-item
  */
-export class Alert {
+export class PDropdown {
     constructor() {
         this.dark = false;
         /** Prevent dropdown self update selected value */
@@ -63,20 +63,20 @@ export class Alert {
     render() {
         const selected = this.getSelectedValue();
         const arrowIcon = feather.icons['chevron-down'].toSvg();
-        return (h("div", { key: '36a4b9cecc7bab53d95797a9cdda61f78d6a3554', class: this.getParentClass() }, h("div", { key: '69592dfe218c1b0a2b3b98c856d1f1308a513084', class: "dropdown__header border border-primary", onClick: () => {
+        return (h("div", { key: '2720173156cb94756189e4eb1528342b7af73142', class: this.getParentClass() }, h("div", { key: 'e35db200212875af177f9c2239f5b2f6ca7c24d5', class: "dropdown__header border border-primary", onClick: () => {
                 this.open = !this.open;
-            } }, h("span", { key: '7caa80ebc21da06acd228e1066d1a888cd961ac0' }, selected), h("span", { key: '23eedeb9969517271b320745dceab3cf6391df08', class: "for--icon", innerHTML: arrowIcon })), h("div", { key: 'd3cdd0ca9c1193071e4ad1a51115e4c2f0b04437', class: "dropdown__children" }, h("slot", { key: '29758029dd6cc442dd41d34e62e7ca36881ae5b8' }))));
+            } }, h("span", { key: 'bc629331620636b058bae4b7dc8afb6372d76103' }, selected), h("span", { key: 'c512d2359293389763aeae9eb8d50299cd89e310', class: "for--icon", innerHTML: arrowIcon })), h("div", { key: '902dd330dc3846ba43c9d40f797e74f4371824c3', class: "dropdown__children" }, h("slot", { key: '99a730411c8ee5bfe61d68cf22de8726ec3572f3' }))));
     }
     static get is() { return "p-dropdown"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dropdown.scss"]
+            "$": ["p-dropdown.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dropdown.css"]
+            "$": ["p-dropdown.css"]
         };
     }
     static get properties() {
@@ -197,4 +197,4 @@ export class Alert {
             }];
     }
 }
-//# sourceMappingURL=dropdown.js.map
+//# sourceMappingURL=p-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-dropdown.js","sourceRoot":"","sources":["../../../../src/components/dropdown/p-dropdown/p-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACpG,OAAO,OAAO,MAAM,eAAe,CAAA;AAEnC;;GAEG;AAMH,MAAM,OAAO,SAAS;IALtB;QAOI,SAAI,GAAa,KAAK,CAAA;QACtB,kDAAkD;QAElD,oBAAe,GAAa,KAAK,CAAA;QACjC,0BAA0B;QAI1B,UAAK,GAAY,EAAE,CAAA;QAEnB,SAAI,GAAa,KAAK,CAAA;KA+FzB;IAlFU,cAAc;QACjB,OAAO;YACH,iBAAiB,EAAE,IAAI;YACvB,UAAU,EAAE,IAAI,CAAC,IAAI;YACrB,UAAU,EAAE,IAAI,CAAC,IAAI;SACxB,CAAA;IACL,CAAC;IAKM,kBAAkB,CAAC,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACrB,CAAC;IACL,CAAC;IAEM,SAAS;QACZ,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,CAAA;QAEzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QACpC,CAAC;IACL,CAAC;IAEM,iBAAiB;QACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,CAAA;QAEzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACZ,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YACrC,CAAC;YACD,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YAC3B,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;gBAC/B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;gBAEtB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;oBACxB,IAAI,CAAC,SAAS,EAAE,CAAA;oBAChB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;oBACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;gBACzB,CAAC;YACL,CAAC,CAAC,CAAA;QACN,CAAC;IACL,CAAC;IAEM,WAAW,CAAC,KAAa;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC;IAEM,gBAAgB;QACnB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAA;QACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YAChC,OAAO,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAA;QACpC,CAAC,CAAC,CAAA;QAEF,OAAO,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,KAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;IACxD,CAAC;IAED,MAAM;QACF,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACxC,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAA;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DACI,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAE,GAAG,EAAE;oBACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;gBAC1B,CAAC;gBAED,+DAAO,QAAQ,CAAQ;gBACvB,6DAAM,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI,CAC9C;YACN,4DAAK,KAAK,EAAC,oBAAoB;gBAC3B,8DAAQ,CACN,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Event, type EventEmitter, h, Listen, Prop, State } from '@stencil/core'\nimport feather from 'feather-icons'\n\n/**\n * @slot - slot for p-dropdown-item\n */\n@Component({\n    tag: 'p-dropdown',\n    styleUrl: 'p-dropdown.scss',\n    shadow: true,\n})\nexport class PDropdown {\n    @Prop()\n    dark?: boolean = false\n    /** Prevent dropdown self update selected value */\n    @Prop()\n    preventSelected?: boolean = false\n    /** Selected item value */\n    @Prop({\n        mutable: true,\n    })\n    value?: string = ''\n    @State()\n    open?: boolean = false\n    @Prop()\n    placeholder?: string\n    @State()\n    selectedValue?: string\n    @Element()\n    public el: HTMLElement\n\n    @Event({\n        eventName: 'select',\n    })\n    public selectEvent: EventEmitter<string>\n\n    public getParentClass() {\n        return {\n            'papier dropdown': true,\n            'is--dark': this.dark,\n            'is--open': this.open,\n        }\n    }\n\n    @Listen('click', {\n        target: 'window',\n    })\n    public detectOutsideClick(ev) {\n        if (!this.el.contains(ev.target)) {\n            this.open = false\n        }\n    }\n\n    public resetItem() {\n        const items = Array.from(this.el.getElementsByTagName('p-dropdown-item'))\n\n        for (const item of items) {\n            item.removeAttribute('selected')\n        }\n    }\n\n    public componentWillLoad() {\n        const items = Array.from(this.el.getElementsByTagName('p-dropdown-item'))\n\n        for (const item of items) {\n            if (this.dark) {\n                item.setAttribute('dark', 'true')\n            }\n            if (item.selected === true) {\n                this.value = item.value\n            }\n            item.addEventListener('change', (e) => {\n                this.selectEvent.emit(e.detail)\n                this.open = !this.open\n\n                if (!this.preventSelected) {\n                    this.resetItem()\n                    item.setAttribute('selected', '')\n                    this.value = e.detail\n                }\n            })\n        }\n    }\n\n    public selectValue(value: string) {\n        this.selectEvent.emit(value)\n    }\n\n    public getSelectedValue(): string {\n        const list = Array.from(this.el.querySelectorAll('p-dropdown-item'))\n        const selected = list.find((item) => {\n            return item.value === this.value\n        })\n\n        return selected?.innerText || this.placeholder || ''\n    }\n\n    render() {\n        const selected = this.getSelectedValue()\n        const arrowIcon = feather.icons['chevron-down'].toSvg()\n\n        return (\n            <div class={this.getParentClass()}>\n                <div\n                    class=\"dropdown__header border border-primary\"\n                    onClick={() => {\n                        this.open = !this.open\n                    }}\n                >\n                    <span>{selected}</span>\n                    <span class=\"for--icon\" innerHTML={arrowIcon} />\n                </div>\n                <div class=\"dropdown__children\">\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class DropdownItem {
+export class PDropdownItem {
     constructor() {
         this.selected = false;
         this.dark = false;
@@ -14,21 +14,21 @@ export class DropdownItem {
         this.changeEvent.emit(this.value);
     }
     render() {
-        return (h("div", { key: 'ebeadf0541037fe8ac3968b97135b54d8d2ffff3', class: this.getParentClass(), onClick: () => this.sendClick() }, h("div", { key: 'f9dc47abca23a7ff49024dc97636dcae2064849f', class: {
+        return (h("div", { key: '819d37b2cfe34971eebcba3285a08a184290f8b6', class: this.getParentClass(), onClick: () => this.sendClick() }, h("div", { key: 'ecf9e63c7c8daf8d73ccfdd14c1ae4f0d43d7f1d', class: {
                 'background-success': this.selected,
                 'border border-primary': true,
-            } }, h("slot", { key: 'eaaa781bf0d311891c32d5884fc12dafab40f2be' }))));
+            } }, h("slot", { key: 'dadf08387ec96cf12596ebd2edbfaba52e2603ca' }))));
     }
     static get is() { return "p-dropdown-item"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../dropdown/dropdown.scss"]
+            "$": ["../p-dropdown/p-dropdown.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../dropdown/dropdown.css"]
+            "$": ["../p-dropdown/p-dropdown.css"]
         };
     }
     static get properties() {
@@ -113,4 +113,4 @@ export class DropdownItem {
             }];
     }
 }
-//# sourceMappingURL=dropdown-item.js.map
+//# sourceMappingURL=p-dropdown-item.js.map

package/dist/collection/components/dropdown/p-dropdown-item/p-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/p-dropdown-item/p-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAO5E,MAAM,OAAO,aAAa;IAL1B;QASI,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KAgCzB;IAzBU,cAAc;QACjB,OAAO;YACH,sBAAsB,EAAE,IAAI;YAC5B,UAAU,EAAE,IAAI,CAAC,IAAI;SACxB,CAAA;IACL,CAAC;IAEM,SAAS;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;YAC9D,4DACI,KAAK,EAAE;oBACH,oBAAoB,EAAE,IAAI,CAAC,QAAQ;oBACnC,uBAAuB,EAAE,IAAI;iBAChC;gBAED,8DAAQ,CACN,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from '@stencil/core'\n\n@Component({\n    tag: 'p-dropdown-item',\n    styleUrl: '../p-dropdown/p-dropdown.scss',\n    shadow: true,\n})\nexport class PDropdownItem {\n    @Prop()\n    value!: string\n    @Prop()\n    selected?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({\n        eventName: 'change',\n    })\n    public changeEvent: EventEmitter<string>\n\n    public getParentClass() {\n        return {\n            'papier dropdown-item': true,\n            'is--dark': this.dark,\n        }\n    }\n\n    public sendClick() {\n        this.changeEvent.emit(this.value)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()} onClick={() => this.sendClick()}>\n                <div\n                    class={{\n                        'background-success': this.selected,\n                        'border border-primary': true,\n                    }}\n                >\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class InputText {
+export class PInputText {
     constructor() {
         this.value = '';
         this.required = false;
@@ -28,9 +28,9 @@ export class InputText {
         this.changeEvent.emit(this.value);
     }
     render() {
-        return (h("div", { key: 'cd76a2762668387e8b4a490a239577a58b8b4859', class: this.getParentClass() }, this.label && (h("label", { key: '7e6dae9b367d95018761178bb0b3f6ff2442410e', htmlFor: "paperInputs1" }, this.label, this.required ? '*' : '')), h("input", { key: 'c8ba419cb6c3fc22915563bd07faf632d3deab7f', type: "text", placeholder: this.placeholder, id: "paperInputs1", disabled: this.disabled, onInput: (e) => {
+        return (h("div", { key: '4e4822801c521014028fdd6b896597ac6416f620', class: this.getParentClass() }, this.label && (h("label", { key: 'bfd13aa4829f3f7a1b60341ba2018de8a822a187', htmlFor: "paperInputs1" }, this.label, this.required ? '*' : '')), h("input", { key: '8b1f0fd464d32050ff06594e7b6157375d77f959', type: "text", placeholder: this.placeholder, id: "paperInputs1", disabled: this.disabled, onInput: (e) => {
                 this.onInput(e);
-            }, value: this.value, onChange: () => this.onChange() }), this.error && h("p", { key: '7b2a6aabde20bc9e9ee1c590c40687461b86b305', class: "text-danger" }, this.error)));
+            }, value: this.value, onChange: () => this.onChange() }), this.error && h("p", { key: '722b3b6d6d947ef322938df0869b27b4eb79fc85', class: "text-danger" }, this.error)));
     }
     static get is() { return "p-input-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/p-input-text/input-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-text.js","sourceRoot":"","sources":["../../../../src/components/form/p-input-text/input-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAO5E,MAAM,OAAO,UAAU;IALvB;QAYI,UAAK,GAAY,EAAE,CAAA;QAGnB,aAAQ,GAAa,KAAK,CAAA;QAG1B,SAAI,GAAa,KAAK,CAAA;QAMtB,aAAQ,GAAa,KAAK,CAAA;QAG1B,UAAK,GAAa,KAAK,CAAA;KAiE1B;IAlDU,cAAc;QACjB,IAAI,QAAQ,GAAG,mBAAmB,CAAA;QAElC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,aAAa,CAAA;QACvC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,OAAO,CAAC,EAAS;QACpB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,MAAM,IAAK,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAA;QAE/D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACpC,CAAC;IAEM,QAAQ;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC5B,IAAI,CAAC,KAAK,IAAI,CACX,8DAAO,OAAO,EAAC,cAAc;gBACxB,IAAI,CAAC,KAAK;gBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACrB,CACX;YACD,8DACI,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAC,cAAc,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;gBACnB,CAAC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,IAAI,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,CACpD,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from '@stencil/core'\n\n@Component({\n    tag: 'p-input-text',\n    styleUrl: 'input-text.scss',\n    shadow: true,\n})\nexport class PInputText {\n    @Prop()\n    placeholder?: string\n\n    @Prop({\n        mutable: true,\n    })\n    value?: string = ''\n\n    @Prop()\n    required?: boolean = false\n\n    @Prop()\n    dark?: boolean = false\n\n    @Prop()\n    label?: string\n\n    @Prop()\n    disabled?: boolean = false\n\n    @Prop()\n    block?: boolean = false\n\n    @Prop()\n    error?: string\n\n    @Event({\n        eventName: 'change',\n    })\n    public changeEvent: EventEmitter<string>\n\n    @Event({\n        eventName: 'input',\n    })\n    public inputEvent: EventEmitter<string>\n\n    public getParentClass() {\n        let cssClass = 'papier form-group'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n        if (this.block) {\n            cssClass = `${cssClass} is--block`\n        }\n        if (this.error) {\n            cssClass = `${cssClass} has--error`\n        }\n\n        return cssClass\n    }\n\n    public onInput(ev: Event) {\n        this.value = ev.target && (ev.target as HTMLInputElement).value\n\n        this.inputEvent.emit(this.value)\n    }\n\n    public onChange() {\n        this.changeEvent.emit(this.value)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                {this.label && (\n                    <label htmlFor=\"paperInputs1\">\n                        {this.label}\n                        {this.required ? '*' : ''}\n                    </label>\n                )}\n                <input\n                    type=\"text\"\n                    placeholder={this.placeholder}\n                    id=\"paperInputs1\"\n                    disabled={this.disabled}\n                    onInput={(e) => {\n                        this.onInput(e)\n                    }}\n                    value={this.value}\n                    onChange={() => this.onChange()}\n                />\n                {this.error && <p class=\"text-danger\">{this.error}</p>}\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class PSliders {
+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: '09a2c28ac3410e46edf5362e39b4c10fc2b9d298' }, h("div", { key: '1b9b4e68adf85643c11f4d40b09c0fd44ad5e9b6', class: {
+        return (h(Host, { key: '11f5fe88d1551a96be2ee6b03c85e8f8739b82f7' }, h("div", { key: 'd78a0117ce62a65d4a1051cfec6938d4151e015e', class: {
                 papier: true,
                 'is--block': this.block,
                 'is--dark': this.dark,
-            } }, h("div", { key: '47202952c171b60463b1d7a07637f595f3bf4023', class: "form-group" }, h("input", { key: '23b4f605c72513b24c63ee4e3fe1a5d47d76f9f6', 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);
             } })))));
     }

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

@@ -12,13 +12,13 @@ export class PSwitch {
         this.changeEvent.emit(e.target.checked);
     }
     render() {
-        return (h(Host, { key: 'b103399375704056e1f5bf2ec60c64d4ca1b4e88' }, h("div", { key: 'd112849b4865b3d5ad9bece265b084843cc97641', class: {
+        return (h(Host, { key: '22276781c74296d1a16fee4e2df11f15a77af965' }, h("div", { key: '9d5368a6e09cec39314773f28e5cbc25fffde0c9', class: {
                 papier: true,
                 'is--dark': this.dark,
-            } }, h("div", { key: '17a829da738787a824765fb204b5a58da8d1aedf', class: "form-group" }, h("label", { key: '92bdae815d40e3526d79e48d9ce21831cced55fb', 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: '2fcd7987f00f58587ba85c4e377e4ced5a8db6a2', id: "paperSwitch4", name: "paperSwitch4", type: "checkbox", checked: this.checked, onInput: (e) => this.onInput(e) }), h("span", { key: '5a22bd18bc532e673a42c08768d2ea3cfb8e7686', 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,
             } }))))));

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

@@ -3,7 +3,7 @@ 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: 'ac7c89fc9273a47cdd4bef680da0df9ceca1093c' }, h("div", { key: 'dd6dd56bf61cf31ce7684177545857a17ecfce4e', class: {
+        return (h(Host, { key: '470e9a4e78033875ebc2737eea116f3060e72969' }, h("div", { key: 'f792f4674db728833e654c44171b4a6a18cc2566', class: {
                 papier: true,
                 'is--dark': this.dark,
-            } }, 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" }))))))));
+            } }, 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"; }

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

@@ -26,7 +26,13 @@ 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;
     }
@@ -35,7 +41,7 @@ export class PNotification {
         this.close.emit(this.timestamp);
     }
     render() {
-        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: () => {
+        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() }))))));
     }

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,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"]}
+{"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.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;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"]}
+{"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,16 +7,32 @@ 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', '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: 'a80bb8555ca4031007a51e8b351ee43082edcffd', style: { marginTop: '20px' } }, h("p-button", { key: 'af5ca61d2ffed0a209ba7cbc669fc5edda83b4ad', 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: '276d70752ac17d16c19edd70f704f0871bc11504', type: "secondary", style: { marginRight: '20px' }, onClick: () => {
-                this.addNotification({ canclose: true });
-            } }, "Add closable notification"), h("p-button", { key: '69ed21fce693dc16d78480f3c8b154a4d9a0a142', 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"; }