@amiceli/papierjs 0.10.0 → 0.11.0

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,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACpE,OAAO,CACH,uBAAiB,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACpC,KAAK,CACQ,CACrB,CAAA;YACL,CAAC,CAAC,CACO;YAEb,4DAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC7B,iEACI,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC9B,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAA;oBAC5B,CAAC,uBAGM;gBACX,iEACI,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC9B,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAA;oBAC5C,CAAC,gCAGM;gBACX,iEACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;oBAC3C,CAAC,+BAGM,CACT,CACJ,CACT,CAAA;IACL,CAAC;;;;;;CACJ","sourcesContent":["import { Component, Element, State, h } from '@stencil/core'\nimport type { PushOptions } from '../p-notification-handler'\n\n@Component({\n    tag: 'p-notification-preview',\n})\nexport class PNotification {\n    @Element()\n    public el: HTMLElement\n\n    @State()\n    notificationType?: string\n\n    public addNotification(options: Partial<PushOptions>) {\n        const handler = this.el.querySelector('p-notification-handler')\n\n        if (handler) {\n            handler.pushNotification({\n                type: this.notificationType,\n                canclose: false,\n                text: `${this.notificationType || 'primary'} notification`,\n                ...options,\n            })\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                <p-notification-handler />\n                <p-dropdown\n                    placeholder=\"Choose notification type\"\n                    onSelect={(e: CustomEvent) => {\n                        this.notificationType = e.detail\n                    }}\n                >\n                    {['primary', 'secondary', 'success', 'warning', 'danger'].map((value) => {\n                        return (\n                            <p-dropdown-item key={value} value={value}>\n                                {value}\n                            </p-dropdown-item>\n                        )\n                    })}\n                </p-dropdown>\n\n                <div style={{ marginTop: '20px' }}>\n                    <p-button\n                        style={{ marginRight: '20px' }}\n                        type=\"primary\"\n                        onClick={() => {\n                            this.addNotification({})\n                        }}\n                    >\n                        Add notification\n                    </p-button>\n                    <p-button\n                        type=\"secondary\"\n                        style={{ marginRight: '20px' }}\n                        onClick={() => {\n                            this.addNotification({ canclose: true })\n                        }}\n                    >\n                        Add closable notification\n                    </p-button>\n                    <p-button\n                        type=\"success\"\n                        onClick={() => {\n                            this.addNotification({ timeout: 2000 })\n                        }}\n                    >\n                        Add timeout notification\n                    </p-button>\n                </div>\n            </div>\n        )\n    }\n}\n"]}
+{"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,23 +10,23 @@ 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: '2cf897a26f30cbb43bd628cc1ee81aeca819e808', class: "for--icon", innerHTML: this.open ? openIcon : icon }))), h("div", { key: '4ae6e30e1bfce1956908e53cadd6dde8f1dc8ee7', 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: 'e388b92be1599bf01403e0c5d4b570e7291fcb67' }))))));
+            } }, 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() {
@@ -73,4 +73,4 @@ export class PAccordion {
         };
     }
 }
-//# 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"]}

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

@@ -1,5 +1,8 @@
 import { h } from "@stencil/core";
-export class Alert {
+/**
+ * @Slot - alert content
+ */
+export class PAlert {
     constructor() {
         this.type = 'primary';
         /** Show close icon */
@@ -7,7 +10,13 @@ export class Alert {
         this.dark = false;
     }
     getClass() {
-        const types = ['primary', 'secondary', 'success', 'warning', 'danger'];
+        const types = [
+            'primary',
+            'secondary',
+            'success',
+            'warning',
+            'danger',
+        ];
         let cssClass = 'alert';
         if (!types.includes(this.type)) {
             cssClass = `${cssClass} alert-primary`;
@@ -31,18 +40,18 @@ export class Alert {
         this.close.emit(null);
     }
     render() {
-        return (h("div", { key: '31659425e6bf537652bb014defebddcbdceb9ee5', class: this.getParentClass() }, h("div", { key: 'fb6e058753607b9c61ae0aca81a70942ff2e3b0e', class: this.getClass() }, h("slot", { key: 'b2ccd213b1ec4865dee0be2d157a3a211ed9d836' }), this.closable && (h("span", { key: 'abca570fb5f45b9939d6145d06af39ba339d0dae', class: "btn-close", onClick: () => this.closeAlert() }, "X")))));
+        return (h("div", { key: '7972002a79a97d347933a3ad9fa57a6d8ed56b6d', class: this.getParentClass() }, h("div", { key: 'd687c0e9af769abae96c7c5a0e356c8d8790d5c9', class: this.getClass() }, h("slot", { key: '99190d7ea0cc63c22cd9538ba93f6345bb9d581d' }), this.closable && (h("span", { key: '57303ce15e03bead54171b8ac765d514d020ad9f', class: "btn-close", onClick: () => this.closeAlert() }, "X")))));
     }
     static get is() { return "p-alert"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["alert.scss"]
+            "$": ["p-alert.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["alert.css"]
+            "$": ["p-alert.css"]
         };
     }
     static get properties() {
@@ -133,4 +142,4 @@ export class Alert {
             }];
     }
 }
-//# sourceMappingURL=alert.js.map
+//# sourceMappingURL=p-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-alert.js","sourceRoot":"","sources":["../../../src/components/p-alert/p-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAI5E;;GAEG;AAMH,MAAM,OAAO,MAAM;IALnB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAC7B,sBAAsB;QAEtB,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KA0DzB;IAnDU,QAAQ;QACX,MAAM,KAAK,GAAG;YACV,SAAS;YACT,WAAW;YACX,SAAS;YACT,SAAS;YACT,QAAQ;SACX,CAAA;QACD,IAAI,QAAQ,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,gBAAgB,CAAA;QAC1C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,UAAU,IAAI,CAAC,IAAI,EAAE,CAAA;QAC/C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,GAAG,QAAQ,cAAc,CAAA;QACxC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACvB,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,CACd,6DAAM,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,QAEjD,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from '@stencil/core'\n\ntype AlertColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n\n/**\n * @Slot - alert content\n */\n@Component({\n    tag: 'p-alert',\n    styleUrl: 'p-alert.scss',\n    shadow: true,\n})\nexport class PAlert {\n    @Prop()\n    type?: AlertColor = 'primary'\n    /** Show close icon */\n    @Prop()\n    closable?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({\n        eventName: 'close',\n    })\n    public close: EventEmitter\n\n    public getClass(): string {\n        const types = [\n            'primary',\n            'secondary',\n            'success',\n            'warning',\n            'danger',\n        ]\n        let cssClass = 'alert'\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} alert-primary`\n        } else {\n            cssClass = `${cssClass} alert-${this.type}`\n        }\n\n        if (this.closable) {\n            cssClass = `${cssClass} dismissible`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public closeAlert() {\n        this.close.emit(null)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class={this.getClass()}>\n                    <slot />\n                    {this.closable && (\n                        <span class=\"btn-close\" onClick={() => this.closeAlert()}>\n                            X\n                        </span>\n                    )}\n                </div>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class Badge {
+export class PBadge {
     constructor() {
         this.type = undefined;
         this.dark = false;
@@ -15,18 +15,18 @@ export class Badge {
         return `badge ${this.type || ''}`;
     }
     render() {
-        return (h("span", { key: '86c6124783ede208e780de1b6b4d909514106bf6', class: this.getParentClass() }, h("span", { key: '993de85247ba731cd7be90da84a457f42bda66ff', class: this.getClass() }, h("slot", { key: '98fef110535623d93bdbaae9bf9f1186a0d0edc5' }))));
+        return (h("span", { key: '74440435b6be3a326faeeea403fe6057641f9dc7', class: this.getParentClass() }, h("span", { key: '34189112782e34bee2ac0a05828490bd9b8bdced', class: this.getClass() }, h("slot", { key: 'f0dc345719a384248ff07acbc26d66a41baebbb3' }))));
     }
     static get is() { return "p-badge"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["badge.scss"]
+            "$": ["p-badge.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["badge.css"]
+            "$": ["p-badge.css"]
         };
     }
     static get properties() {
@@ -79,4 +79,4 @@ export class Badge {
         };
     }
 }
-//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=p-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-badge.js","sourceRoot":"","sources":["../../../src/components/p-badge/p-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AASlD,MAAM,OAAO,MAAM;IALnB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,SAAI,GAAa,KAAK,CAAA;KAyBzB;IAvBU,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,6DAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACxB,8DAAQ,CACL,CACJ,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core'\n\ntype BadgeColor = 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-badge',\n    styleUrl: 'p-badge.scss',\n    shadow: true,\n})\nexport class PBadge {\n    @Prop()\n    type?: BadgeColor = undefined\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        let cssClass = `papier`\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public getClass() {\n        return `badge ${this.type || ''}`\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                <span class={this.getClass()}>\n                    <slot />\n                </span>\n            </span>\n        )\n    }\n}\n"]}

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 /**
  * @slot - button content
  */
-export class Button {
+export class PButton {
     constructor() {
         this.type = 'primary';
         this.outline = false;
@@ -14,7 +14,13 @@ export class Button {
         this.loading = false;
     }
     getClass() {
-        const types = ['success', 'secondary', 'primary', 'danger', 'warning'];
+        const types = [
+            'success',
+            'secondary',
+            'primary',
+            'danger',
+            'warning',
+        ];
         let cssClass = '';
         if (!types.includes(this.type)) {
             cssClass = 'btn-primary';
@@ -43,18 +49,18 @@ export class Button {
     }
     render() {
         const color = `var(--${this.type}${this.dark ? '-light' : ''})`;
-        return (h("div", { key: '306ec0e0b6c738d5949f2d011c18b83f815fb4c0', class: this.getParentClass() }, h("button", { key: '1a0332ab6d0d18aaf86286fccb10a72129c77832', disabled: this.disabled, type: "button", class: this.getClass() }, !this.loading ? h("slot", null) : h("p-spinner", { color: color, dark: this.dark }))));
+        return (h("div", { key: '5521480a3ccb0bc4a23f94bebeca82af6f799d89', class: this.getParentClass() }, h("button", { key: '85829206248384b6b7d14d061bbafa145aa82893', disabled: this.disabled, type: "button", class: this.getClass() }, !this.loading ? h("slot", null) : h("p-spinner", { color: color, dark: this.dark }))));
     }
     static get is() { return "p-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["button.scss"]
+            "$": ["p-button.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["button.css"]
+            "$": ["p-button.css"]
         };
     }
     static get properties() {
@@ -228,4 +234,4 @@ export class Button {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=button.js.map
+//# sourceMappingURL=p-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-button.js","sourceRoot":"","sources":["../../../src/components/p-button/p-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAI3D;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QASI,SAAI,GAAiB,SAAS,CAAA;QAE9B,YAAO,GAAa,KAAK,CAAA;QAEzB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;QAEtB,YAAO,GAAa,KAAK,CAAA;KAsD5B;IApDU,QAAQ;QACX,MAAM,KAAK,GAAG;YACV,SAAS;YACT,WAAW;YACX,SAAS;YACT,QAAQ;YACR,SAAS;SACZ,CAAA;QACD,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,aAAa,CAAA;QAC5B,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;QACjC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,UAAU,CAAA;QACzB,CAAC;QAED,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QAEzD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IACD,MAAM;QACF,MAAM,KAAK,GAAG,SAAS,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAA;QAE/D,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,+DAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAChE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,eAAQ,CAAC,CAAC,CAAC,iBAAW,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACnE,CACP,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core'\n\ntype ButtonColor = 'success' | 'secondary' | 'primary' | 'danger' | 'warning'\n\n/**\n * @slot - button content\n */\n@Component({\n    tag: 'p-button',\n    styleUrl: 'p-button.scss',\n    shadow: true,\n})\nexport class PButton {\n    @Element()\n    el: Element\n    @Prop()\n    type?: ButtonColor = 'primary'\n    @Prop()\n    outline?: boolean = false\n    @Prop()\n    large?: boolean = false\n    @Prop()\n    small?: boolean = false\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    disabled?: boolean = false\n    @Prop()\n    dark?: boolean = false\n    @Prop()\n    loading?: boolean = false\n\n    public getClass(): string {\n        const types = [\n            'success',\n            'secondary',\n            'primary',\n            'danger',\n            'warning',\n        ]\n        let cssClass = ''\n\n        if (!types.includes(this.type)) {\n            cssClass = 'btn-primary'\n        } else {\n            cssClass = `btn-${this.type}`\n        }\n\n        if (this.disabled) {\n            cssClass = 'disabled'\n        }\n\n        cssClass = `${cssClass}${this.outline ? '-outline' : ''}`\n        cssClass = `${cssClass}${this.large ? ' btn-large' : ''}`\n        cssClass = `${cssClass}${this.small ? ' btn-small' : ''}`\n        cssClass = `${cssClass}${this.block ? ' btn-block' : ''}`\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier'\n\n        if (this.block) {\n            cssClass = `${cssClass} is--block`\n        }\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n    render() {\n        const color = `var(--${this.type}${this.dark ? '-light' : ''})`\n\n        return (\n            <div class={this.getParentClass()}>\n                <button disabled={this.disabled} type=\"button\" class={this.getClass()}>\n                    {!this.loading ? <slot /> : <p-spinner color={color} dark={this.dark} />}\n                </button>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/p-card/p-card.css

@@ -3212,6 +3212,20 @@
   --shadow-color-hover: rgba(0, 0, 0, 0.3);
   --primary-inverse: #fff;
 }
+:host .papier.is--dark *, :host .papier.is--dark p {
+  color: white;
+}
+:host .papier.with--radius .card {
+  overflow: hidden;
+  border-color: white;
+  border-bottom-left-radius: 15px 255px;
+  border-bottom-right-radius: 225px 15px;
+  border-top-left-radius: 255px 15px;
+  border-top-right-radius: 15px 225px;
+}
+:host .papier.with--radius .card .card-footer, :host .papier.with--radius .card .card-header {
+  border-color: white;
+}
 :host .papier:not(.has--footer) .card-footer {
   display: none;
 }

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

@@ -1,19 +1,31 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot header - card header
+ * @slot title - card title
+ * @slot subtitle - card subtitle
+ * @slot text - card text
+ * @slot footer - card footer
+ */
 export class PCard {
     constructor() {
         this.dark = false;
+        /**
+         * Use border radius style like button, badge etc
+         */
+        this.radius = false;
     }
     componentDidLoad() {
         this.hasHeader = !!this.el.querySelector('[slot="header"]');
         this.hasFooter = !!this.el.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'ef23932d8704009922bd20e14543f11e39378315' }, h("div", { key: 'e9cb412418ca523defe0b098f8b2bd91d8abcab0', class: {
+        return (h(Host, { key: 'a011f355ebfdf50bf02e8112324fddd503fc3c6d' }, h("div", { key: '1552ac15914e9976a0cf6853869b24824d2c3562', class: {
                 papier: true,
                 'is--dark': this.dark,
                 'has--header': this.hasHeader === true,
                 'has--footer': this.hasFooter,
-            } }, h("div", { key: '897a0a3be2503dab6416fed1f86c13078724c71a', class: "card" }, h("div", { key: '49b74ac4555cbfb79645835baf587d2dd3b26dbb', class: "card-header" }, h("slot", { key: 'f1ad977a7014bd5adada1ff98e6a76a5a67ff339', name: "header" })), this.image && h("img", { key: 'f3b38f3116a66ea3f73b76e3d2b015e9a5194383', class: "image-top", src: this.image, alt: "card-img" }), h("div", { key: 'faec0d50e6d47c3e75b0fe36b5571b7795f89419', class: "card-body" }, h("h4", { key: 'c79fe8cc9a6e328b02fd65125d228866abb81275', class: "card-title" }, h("slot", { key: 'a6effa8e34235866925c47aeed77152ca535f2ae', name: "title" })), h("h5", { key: '2ae43aaba54f59fa43afe10125f71ae06badf307', class: "card-subtitle" }, h("slot", { key: '11a44fb447b95cb52747e3f3e3e866c64f417cfc', name: "subtitle" })), h("p", { key: '2e58f87f5fda92defd8b6e85efee631b7038027d', class: "card-text" }, h("slot", { key: 'd9aaaebc7dede9f9b5c8a40716d01baa8dfd8c35', name: "text" })), h("slot", { key: 'a1f8d116dc114e742b918cae600a0afe217f5eae' })), h("div", { key: 'b8582459c09b05f3afb252aa283416986251c603', class: "card-footer" }, h("slot", { key: '632ed4362a883f12672ce5fdd69011b96e10655b', name: "footer" }))))));
+                'with--radius': this.radius,
+            } }, h("div", { key: '2d8efe6513e958cb96c2ebbc189ec92142b2d0a4', class: "card" }, h("div", { key: '68ffb7bb105a77f7f45195def68a2bae3b0ffc4c', class: "card-header" }, h("slot", { key: '3ed788034782795423dc571d10a125ac0b238f9a', name: "header" })), this.image && h("img", { key: '30d53abac92290016d598846f160aed0450e035e', class: "image-top", src: this.image, alt: "card-img" }), h("div", { key: '3e1ed1be4a30e49e421a0ebf3f5be70947bca47b', class: "card-body" }, h("h4", { key: 'a43ac0f60200edd2b60258c4e5b878283267fe93', class: "card-title" }, h("slot", { key: 'b2041be6b93d38addf48aac3bf8ec566541b7c60', name: "title" })), h("h5", { key: '3af9deb72348ba7dd8d064031a12f82c32e18756', class: "card-subtitle" }, h("slot", { key: '1f9741c85e1e8cd2d0abcf6cc1419d1df4b68ed9', name: "subtitle" })), h("p", { key: '5ff52dd265c4349baaca3a50536ace00a2dd9993', class: "card-text" }, h("slot", { key: 'f74ec5f805a1e9856f9cfa19326eaa2a5cdf7161', name: "text" })), h("slot", { key: '388972d8f038587c6f0baa17e2f266eb362669f6' })), h("div", { key: '2e099fd05c32a68019cf657c3b26f424e13d18cb', class: "card-footer" }, h("slot", { key: '1d33816eb0dc0612bc7660c285fd2ba7f8794484', name: "footer" }))))));
     }
     static get is() { return "p-card"; }
     static get encapsulation() { return "shadow"; }
@@ -49,6 +61,26 @@ export class PCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "radius": {
+                "type": "boolean",
+                "attribute": "radius",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Use border radius style like button, badge etc"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "image": {
                 "type": "string",
                 "attribute": "image",

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

@@ -1 +1 @@
-{"version":3,"file":"p-card.js","sourceRoot":"","sources":["../../../src/components/p-card/p-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAOxE,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAa,KAAK,CAAA;KAmDzB;IAzCG,gBAAgB;QACZ,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;QAC3D,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/D,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;oBACrB,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;oBACtC,aAAa,EAAE,IAAI,CAAC,SAAS;iBAChC;gBAED,4DAAK,KAAK,EAAC,MAAM;oBACb,4DAAK,KAAK,EAAC,aAAa;wBACpB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACpB;oBACL,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAC,UAAU,GAAG;oBACxE,4DAAK,KAAK,EAAC,WAAW;wBAClB,2DAAI,KAAK,EAAC,YAAY;4BAClB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACpB;wBACL,2DAAI,KAAK,EAAC,eAAe;4BACrB,6DAAM,IAAI,EAAC,UAAU,GAAG,CACvB;wBACL,0DAAG,KAAK,EAAC,WAAW;4BAChB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACpB;wBACJ,8DAAQ,CACN;oBACN,4DAAK,KAAK,EAAC,aAAa;wBACpB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACJ,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-card',\n    styleUrl: 'p-card.scss',\n    shadow: true,\n})\nexport class PCard {\n    @Prop()\n    dark?: boolean = false\n    @Prop()\n    image?: string\n    @Element()\n    el: HTMLElement\n    @State()\n    hasHeader: boolean\n    @State()\n    hasFooter: boolean\n\n    componentDidLoad() {\n        this.hasHeader = !!this.el.querySelector('[slot=\"header\"]')\n        this.hasFooter = !!this.el.querySelector('[slot=\"footer\"]')\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                        'has--header': this.hasHeader === true,\n                        'has--footer': this.hasFooter,\n                    }}\n                >\n                    <div class=\"card\">\n                        <div class=\"card-header\">\n                            <slot name=\"header\" />\n                        </div>\n                        {this.image && <img class=\"image-top\" src={this.image} alt=\"card-img\" />}\n                        <div class=\"card-body\">\n                            <h4 class=\"card-title\">\n                                <slot name=\"title\" />\n                            </h4>\n                            <h5 class=\"card-subtitle\">\n                                <slot name=\"subtitle\" />\n                            </h5>\n                            <p class=\"card-text\">\n                                <slot name=\"text\" />\n                            </p>\n                            <slot />\n                        </div>\n                        <div class=\"card-footer\">\n                            <slot name=\"footer\" />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}
+{"version":3,"file":"p-card.js","sourceRoot":"","sources":["../../../src/components/p-card/p-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAExE;;;;;;GAMG;AAMH,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAa,KAAK,CAAA;QACtB;;WAEG;QAEH,WAAM,GAAa,KAAK,CAAA;KAoD3B;IA1CG,gBAAgB;QACZ,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;QAC3D,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/D,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;oBACrB,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;oBACtC,aAAa,EAAE,IAAI,CAAC,SAAS;oBAC7B,cAAc,EAAE,IAAI,CAAC,MAAM;iBAC9B;gBAED,4DAAK,KAAK,EAAC,MAAM;oBACb,4DAAK,KAAK,EAAC,aAAa;wBACpB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACpB;oBACL,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAC,UAAU,GAAG;oBACxE,4DAAK,KAAK,EAAC,WAAW;wBAClB,2DAAI,KAAK,EAAC,YAAY;4BAClB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACpB;wBACL,2DAAI,KAAK,EAAC,eAAe;4BACrB,6DAAM,IAAI,EAAC,UAAU,GAAG,CACvB;wBACL,0DAAG,KAAK,EAAC,WAAW;4BAChB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACpB;wBACJ,8DAAQ,CACN;oBACN,4DAAK,KAAK,EAAC,aAAa;wBACpB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACJ,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Host, h, Prop, State } from '@stencil/core'\n\n/**\n * @slot header - card header\n * @slot title - card title\n * @slot subtitle - card subtitle\n * @slot text - card text\n * @slot footer - card footer\n */\n@Component({\n    tag: 'p-card',\n    styleUrl: 'p-card.scss',\n    shadow: true,\n})\nexport class PCard {\n    @Prop()\n    dark?: boolean = false\n    /**\n     * Use border radius style like button, badge etc\n     */\n    @Prop()\n    radius?: boolean = false\n    @Prop()\n    image?: string\n    @Element()\n    el: HTMLElement\n    @State()\n    hasHeader: boolean\n    @State()\n    hasFooter: boolean\n\n    componentDidLoad() {\n        this.hasHeader = !!this.el.querySelector('[slot=\"header\"]')\n        this.hasFooter = !!this.el.querySelector('[slot=\"footer\"]')\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                        'has--header': this.hasHeader === true,\n                        'has--footer': this.hasFooter,\n                        'with--radius': this.radius,\n                    }}\n                >\n                    <div class=\"card\">\n                        <div class=\"card-header\">\n                            <slot name=\"header\" />\n                        </div>\n                        {this.image && <img class=\"image-top\" src={this.image} alt=\"card-img\" />}\n                        <div class=\"card-body\">\n                            <h4 class=\"card-title\">\n                                <slot name=\"title\" />\n                            </h4>\n                            <h5 class=\"card-subtitle\">\n                                <slot name=\"subtitle\" />\n                            </h5>\n                            <p class=\"card-text\">\n                                <slot name=\"text\" />\n                            </p>\n                            <slot />\n                        </div>\n                        <div class=\"card-footer\">\n                            <slot name=\"footer\" />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

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

@@ -6,7 +6,10 @@ export class PIcon {
         this.color = 'inherit';
     }
     render() {
-        return (h(Host, { key: '8489176b5b0d59042cadc020bb66ae15cc753c18' }, h("div", { key: '34b9f1dc208d1bf70ac997bb3b16c7fa11304707', innerHTML: icons[this.icon], style: { color: this.color, width: `${this.size}px` } })));
+        return (h(Host, { key: '3ceac23d1d6635baa38a879829a303e0f49991fa' }, h("div", { key: '2db07dc619aa07548800363dbb46702c4fc7e258', innerHTML: icons[this.icon], style: {
+                color: this.color,
+                width: `${this.size}px`,
+            } })));
     }
     static get is() { return "p-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"p-icon.js","sourceRoot":"","sources":["../../../src/components/p-icon/p-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAO/B,MAAM,OAAO,KAAK;IALlB;QAUW,SAAI,GAAW,EAAE,CAAA;QAGjB,UAAK,GAAW,SAAS,CAAA;KAYnC;IAPG,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,GAAI,CACxF,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Prop, State, h } from '@stencil/core'\nimport { icons } from './icons'\n\n@Component({\n    tag: 'p-icon',\n    styleUrl: 'p-icon.scss',\n    shadow: true,\n})\nexport class PIcon {\n    @Prop()\n    public icon: string\n\n    @Prop()\n    public size: number = 20\n\n    @Prop()\n    public color: string = 'inherit'\n\n    @State()\n    public svgContent: string\n\n    render() {\n        return (\n            <Host>\n                <div innerHTML={icons[this.icon]} style={{ color: this.color, width: `${this.size}px` }} />\n            </Host>\n        )\n    }\n}\n"]}
+{"version":3,"file":"p-icon.js","sourceRoot":"","sources":["../../../src/components/p-icon/p-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAO/B,MAAM,OAAO,KAAK;IALlB;QAUW,SAAI,GAAW,EAAE,CAAA;QAGjB,UAAK,GAAW,SAAS,CAAA;KAkBnC;IAbG,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3B,KAAK,EAAE;oBACH,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;iBAC1B,GACH,CACC,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core'\nimport { icons } from './icons'\n\n@Component({\n    tag: 'p-icon',\n    styleUrl: 'p-icon.scss',\n    shadow: true,\n})\nexport class PIcon {\n    @Prop()\n    public icon: string\n\n    @Prop()\n    public size: number = 20\n\n    @Prop()\n    public color: string = 'inherit'\n\n    @State()\n    public svgContent: string\n\n    render() {\n        return (\n            <Host>\n                <div\n                    innerHTML={icons[this.icon]}\n                    style={{\n                        color: this.color,\n                        width: `${this.size}px`,\n                    }}\n                />\n            </Host>\n        )\n    }\n}\n"]}

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

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+/**
+ * @slots default - p-leaf content
+ */
 export class Pleaf {
     constructor() {
         this.dark = false;
@@ -7,17 +10,17 @@ export class Pleaf {
         return this.dark ? 'papier is--dark' : 'papier';
     }
     render() {
-        return (h("div", { key: '907cf99eea83d38912f22d7cdc20e131e961c215', class: this.getParentClass() }, h("slot", { key: '6023549f324165e8db91eba3560f91b514a8d2f5' })));
+        return (h("div", { key: '78d8031f25f3cebffa87ee9f40f3888027648a3c', class: this.getParentClass() }, h("slot", { key: 'c50dd2d66f5972ca47d1a947203dc6f161854eb9' })));
     }
     static get is() { return "p-leaf"; }
     static get originalStyleUrls() {
         return {
-            "$": ["leaf.scss"]
+            "$": ["p-leaf.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["leaf.css"]
+            "$": ["p-leaf.css"]
         };
     }
     static get properties() {
@@ -45,4 +48,4 @@ export class Pleaf {
         };
     }
 }
-//# sourceMappingURL=leaf.js.map
+//# sourceMappingURL=p-leaf.js.map

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

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

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

@@ -11,18 +11,18 @@ export class PModal {
         this.closeEvent.emit(null);
     }
     render() {
-        return (h(Host, { key: 'cfa1ac6afca44196e45a6aeefff8d1fbb89dff42' }, this.isOpen && (h("div", { key: '9acd1347109fe2874e2db19dce0b1cec21922bf7', class: "papier" }, h("div", { key: 'e2acb5332ad4db0412dc2b0ddfb7c316c5e9bce3', class: "modal" }, h("div", { key: '3d389bd7ffc3de3083eceb8831e90662dd650cd0', class: "modal-bg", onClick: () => this.close() }), h("div", { key: '4bea7cb19b909513ce83987ae35bcf9db2d2ed34', class: "modal-body" }, h("span", { key: '4226f363508293e1bb4ac8a5da6a73793ea15b61', class: "btn-close", onClick: () => this.close() }, "X"), h("h4", { key: '002beab80b40ce3e0296762cf0f1a83f2dc17cfd', class: "modal-title" }, h("slot", { key: '2b42ee470dd50876bb6ce36c366197e28cab29e3', name: "title" })), h("h5", { key: '797366c9db40db3d5d6429a55e76d2615af75480', class: "modal-subtitle" }, h("slot", { key: 'b48230d50120f41cdfbaec942aa8b4ee682980c8', name: "sub-title" })), h("p", { key: '6baacc8c0031e108e2b674c27485ee06a2976205', class: "modal-text" }, h("slot", { key: 'ea5a623b419ae627ae9d922299635692120108c5', name: "text" })), h("slot", { key: 'c5b9e3015aca66dbf5abee519cebfcca76ae6f5d' })))))));
+        return (h(Host, { key: '76c74a60b6684535c8cb7732a8a2473529e1cd5a' }, this.isOpen && (h("div", { key: '3ae8ec4d90a69c89280b6e3b0b48bcbf5df6e47f', class: "papier" }, h("div", { key: 'b0ae727c2493a98cff184c6c10696b847a9a009a', class: "modal" }, h("div", { key: '6414df9675e6a08a5249bf86ea9ec13256e7f6a8', class: "modal-bg", onClick: () => this.close() }), h("div", { key: '69e7136f0345356a764f0b454ba645359cdc469d', class: "modal-body" }, h("span", { key: '0ca44bad91f3c6696a09e6f711cfcaf2042f56d0', class: "btn-close", onClick: () => this.close() }, "X"), h("h4", { key: '97a939f46a724a9793c51c222894196f6c08838a', class: "modal-title" }, h("slot", { key: 'accb43da03e035e0498a2d74be562299bb828f0c', name: "title" })), h("h5", { key: '90f1eb1dec80286a71fa5bbbb0b2482ffa106065', class: "modal-subtitle" }, h("slot", { key: '84930f0606e8671a47837b2e562445fe1bcdbee9', name: "sub-title" })), h("p", { key: '0b921288c6c3d881549d1f2aa2f4fd0c362fa76b', class: "modal-text" }, h("slot", { key: 'b809864edf3d4520e68c9c80a0226b5ce6478d3e', name: "text" })), h("slot", { key: '00ee563a81f1a460ed80984e06a42f9c54eca800' })))))));
     }
     static get is() { return "p-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["modal.scss"]
+            "$": ["p-modal.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["modal.css"]
+            "$": ["p-modal.css"]
         };
     }
     static get states() {
@@ -87,4 +87,4 @@ export class PModal {
         };
     }
 }
-//# sourceMappingURL=modal.js.map
+//# sourceMappingURL=p-modal.js.map

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

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

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

@@ -0,0 +1,19 @@
+export function previewModal() {
+    const alertObserver = new MutationObserver(() => {
+        const modal = document.querySelector('#open-modal')
+        const modalButton = document.querySelector('#open-modal-button')
+
+        if (modal && modalButton) {
+            modalButton.addEventListener('click', () => {
+                modal.open()
+            })
+
+            alertObserver.disconnect()
+        }
+    })
+
+    alertObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+    })
+}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class ProgressBar {
+export class PProgressBar {
     constructor() {
         this.type = 'primary';
         this.value = 0;
@@ -17,7 +17,14 @@ export class ProgressBar {
         window.clearInterval(this.interval);
     }
     getClass() {
-        const types = ['secondary', 'success', 'warning', 'danger', 'muted', 'primary'];
+        const types = [
+            'secondary',
+            'success',
+            'warning',
+            'danger',
+            'muted',
+            'primary',
+        ];
         const value = this.value < 0 ? 0 : this.value > 100 ? 100 : this.value;
         let cssClass = `bar w-${value}`;
         if (!types.includes(this.type)) {
@@ -39,18 +46,18 @@ export class ProgressBar {
         return cssClass;
     }
     render() {
-        return (h("div", { key: 'a6b214a46175edd2a9bca35115e3878dbccbd245', class: this.getParentClass() }, h("div", { key: '3d86cb02b60a23699c8db51e31504940ef4b263f', class: "progress" }, h("div", { key: 'e746ce579b9451099d27871e9813593e218767b9', class: this.getClass() }, h("slot", { key: 'cd2bae1ed1ed1c42f7779e1157cc0c66d59af735' })))));
+        return (h("div", { key: '2d1e526785ad17645a3eff098060f044e58e128d', class: this.getParentClass() }, h("div", { key: '438abe903ef869b47c796ebf22fbbb6cdec0d66a', class: "progress" }, h("div", { key: 'fee6f22882b98198d2908bb8799d504325288f3d', class: this.getClass() }, h("slot", { key: '7a334bc433c661ba6b94296f901669f4a9b6f1a9' })))));
     }
     static get is() { return "p-progress-bar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["progress-bar.scss"]
+            "$": ["p-progress-bar.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["progress-bar.css"]
+            "$": ["p-progress-bar.css"]
         };
     }
     static get properties() {
@@ -167,4 +174,4 @@ export class ProgressBar {
         };
     }
 }
-//# sourceMappingURL=progress-bar.js.map
+//# sourceMappingURL=p-progress-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-progress-bar.js","sourceRoot":"","sources":["../../../src/components/p-progress-bar/p-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AASzD,MAAM,OAAO,YAAY;IALzB;QAOI,SAAI,GAAsB,SAAS,CAAA;QAEnC,UAAK,GAAY,CAAC,CAAA;QAElB,YAAO,GAAa,KAAK,CAAA;QAEzB,SAAI,GAAa,KAAK,CAAA;KAkEzB;IA3DU,gBAAgB;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;gBACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;YACxD,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;QACjB,CAAC;IACL,CAAC;IAEM,oBAAoB;QACvB,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACvC,CAAC;IAEM,QAAQ;QACX,MAAM,KAAK,GAAG;YACV,WAAW;YACX,SAAS;YACT,SAAS;YACT,QAAQ;YACR,OAAO;YACP,SAAS;SACZ,CAAA;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;QAEtE,IAAI,QAAQ,GAAG,SAAS,KAAK,EAAE,CAAA;QAE/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,UAAU,CAAA;QACpC,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAA;QACzC,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,QAAQ,GAAG,GAAG,QAAQ,UAAU,CAAA;QACpC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAC,UAAU;gBACjB,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvB,8DAAQ,CACN,CACJ,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core'\n\ntype ProgressBarColor = 'secondary' | 'success' | 'warning' | 'danger' | 'muted' | 'primary'\n\n@Component({\n    tag: 'p-progress-bar',\n    styleUrl: 'p-progress-bar.scss',\n    shadow: true,\n})\nexport class PProgressBar {\n    @Prop()\n    type?: ProgressBarColor = 'primary'\n    @Prop()\n    value?: number = 0\n    @Prop()\n    striped?: boolean = false\n    @Prop()\n    dark?: boolean = false\n    @Prop()\n    auto?: number\n\n    @State()\n    interval?: number\n\n    public componentDidLoad() {\n        if (this.auto) {\n            this.interval = window.setInterval(() => {\n                this.value = this.value >= 100 ? 0 : this.value + 10\n            }, this.auto)\n        }\n    }\n\n    public disconnectedCallback() {\n        window.clearInterval(this.interval)\n    }\n\n    public getClass(): string {\n        const types = [\n            'secondary',\n            'success',\n            'warning',\n            'danger',\n            'muted',\n            'primary',\n        ]\n        const value = this.value < 0 ? 0 : this.value > 100 ? 100 : this.value\n\n        let cssClass = `bar w-${value}`\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} primary`\n        } else {\n            cssClass = `${cssClass} ${this.type}`\n        }\n\n        if (this.striped) {\n            cssClass = `${cssClass} striped`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class=\"progress\">\n                    <div class={this.getClass()}>\n                        <slot />\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/p-progress-bar/stories/progress-bar.preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.preview.js","sourceRoot":"","sources":["../../../../src/components/p-progress-bar/stories/progress-bar.preview.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB;IAC9B,MAAM,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QAC7D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAA;QACvE,IAAI,KAAK,GAAG,EAAE,CAAA;QAEd,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC1B,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAA;YAC1C,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,IAAI,KAAK,KAAK,GAAG,EAAE,CAAC;oBAChB,KAAK,GAAG,CAAC,EAAE,CAAA;gBACf,CAAC;gBAED,KAAK,IAAI,EAAE,CAAA;gBACX,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAA;YAC9C,CAAC,CAAC,CAAA;YACF,aAAa,CAAC,UAAU,EAAE,CAAA;QAC9B,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QACjC,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KAChB,CAAC,CAAA;AACN,CAAC","sourcesContent":["export function previewProgressbar() {\n    const inputObserver = new MutationObserver(() => {\n        const progress = document.querySelector('#animated-progress')\n        const progressBtn = document.querySelector('#animated-progress-button')\n        let value = 10\n\n        if (progress && progressBtn) {\n            progress.setAttribute('value', `${value}`)\n            progressBtn.addEventListener('click', () => {\n                if (value === 100) {\n                    value = -10\n                }\n\n                value += 10\n                progress.setAttribute('value', `${value}`)\n            })\n            inputObserver.disconnect()\n        }\n    })\n\n    inputObserver.observe(document.body, {\n        childList: true,\n        subtree: true,\n    })\n}\n"]}

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

@@ -9,12 +9,12 @@ export class PSpinner {
         };
     }
     render() {
-        return (h(Host, { key: '126b71a2f38ccf42d1b731e1ffe48bbc68ef9c8a' }, h("div", { key: 'ba6fce1775d63df66314da248a270c06597facf1', class: {
+        return (h(Host, { key: 'ef6a1d60cbc11cf8ef7db09fdc093bbe5ab04d7b' }, h("div", { key: '3823d885a1699991627089fd2730de8a3bc28c69', class: {
                 'p-spinner': true,
                 papier: true,
                 'is--large': this.large,
                 'is--dark': this.dark,
-            } }, h("div", { key: 'feba5bc0b86248b2c184b7228a3ee3a3ef1f5e2a', class: "border border-primary", style: this.getStyle() }), h("div", { key: 'c793aa6a307ff004ba1ac718ce26e4a1f2f9b718', class: "border border-primary", style: this.getStyle() }), h("div", { key: '346e626c6a6b519e5529751622e968a330df8d11', class: "border border-primary", style: this.getStyle() }))));
+            } }, h("div", { key: '3b1de6b53edd0c1116123ef619ebb8721206c7ed', class: "border border-primary", style: this.getStyle() }), h("div", { key: '6429b24f1c4e25f245a737b527f9f0498b7bdd00', class: "border border-primary", style: this.getStyle() }), h("div", { key: '9e7f2d3fcede8f2e0e7679b0f0890047b726aadf', class: "border border-primary", style: this.getStyle() }))));
     }
     static get is() { return "p-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"p-spinner.js","sourceRoot":"","sources":["../../../src/components/p-spinner/p-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAOxD,MAAM,OAAO,QAAQ;IALrB;QAOW,UAAK,GAAY,KAAK,CAAA;KAgChC;IAxBU,QAAQ;QACX,OAAO;YACH,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,cAAc;SAChD,CAAA;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,WAAW,EAAE,IAAI;oBACjB,MAAM,EAAE,IAAI;oBACZ,WAAW,EAAE,IAAI,CAAC,KAAK;oBACvB,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI;gBAC7D,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI;gBAC7D,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI,CAC3D,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-spinner',\n    styleUrl: 'p-spinner.scss',\n    shadow: true,\n})\nexport class PSpinner {\n    @Prop()\n    public large: boolean = false\n\n    @Prop()\n    public color?: string\n\n    @Prop()\n    public dark?: boolean\n\n    public getStyle() {\n        return {\n            backgroundColor: this.color || 'currentColor',\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'p-spinner': true,\n                        papier: true,\n                        'is--large': this.large,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"border border-primary\" style={this.getStyle()} />\n                    <div class=\"border border-primary\" style={this.getStyle()} />\n                    <div class=\"border border-primary\" style={this.getStyle()} />\n                </div>\n            </Host>\n        )\n    }\n}\n"]}
+{"version":3,"file":"p-spinner.js","sourceRoot":"","sources":["../../../src/components/p-spinner/p-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOxD,MAAM,OAAO,QAAQ;IALrB;QAOW,UAAK,GAAY,KAAK,CAAA;KAgChC;IAxBU,QAAQ;QACX,OAAO;YACH,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,cAAc;SAChD,CAAA;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,WAAW,EAAE,IAAI;oBACjB,MAAM,EAAE,IAAI;oBACZ,WAAW,EAAE,IAAI,CAAC,KAAK;oBACvB,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI;gBAC7D,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI;gBAC7D,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI,CAC3D,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core'\n\n@Component({\n    tag: 'p-spinner',\n    styleUrl: 'p-spinner.scss',\n    shadow: true,\n})\nexport class PSpinner {\n    @Prop()\n    public large: boolean = false\n\n    @Prop()\n    public color?: string\n\n    @Prop()\n    public dark?: boolean\n\n    public getStyle() {\n        return {\n            backgroundColor: this.color || 'currentColor',\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'p-spinner': true,\n                        papier: true,\n                        'is--large': this.large,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"border border-primary\" style={this.getStyle()} />\n                    <div class=\"border border-primary\" style={this.getStyle()} />\n                    <div class=\"border border-primary\" style={this.getStyle()} />\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

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

@@ -8,18 +8,18 @@ export class PTooltip {
         this.top = false;
     }
     render() {
-        return (h(Host, { key: '79ecd4ec836f636dab19f8641b1d652e9c9214b1' }, h("div", { key: '7b8dc3c2f9390ecee228e24e04d3dcc7bfda206c', class: "papier" }, h("div", { key: '0b5e158b665446a6e5e5451f36b5b93d1c07defb', "popover-left": this.left && !this.disabled ? this.title : null, "popover-right": this.right && !this.disabled ? this.title : null, "popover-bottom": this.bottom && !this.disabled ? this.title : null, "popover-top": this.top && !this.disabled ? this.title : null }, h("slot", { key: '4654bf6b5d88a13bc4620fbc10aa00091831de57' })))));
+        return (h(Host, { key: '31f8eb1ed3b3dcd7dcb123644829e578ff2becfa' }, h("div", { key: 'b2bd8c5e0a1a127a855b3e894ddb5c4a6555ef1b', class: "papier" }, h("div", { key: '31c398594843f72ecb9d332b1ee7516ceddf661b', "popover-left": this.left && !this.disabled ? this.title : null, "popover-right": this.right && !this.disabled ? this.title : null, "popover-bottom": this.bottom && !this.disabled ? this.title : null, "popover-top": this.top && !this.disabled ? this.title : null }, h("slot", { key: '593154e2d41b4d2aa6a12238615b42810ce49a86' })))));
     }
     static get is() { return "p-tooltip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["tooltip.scss"]
+            "$": ["p-tooltip.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["tooltip.css"]
+            "$": ["p-tooltip.css"]
         };
     }
     static get properties() {
@@ -146,4 +146,4 @@ export class PTooltip {
         };
     }
 }
-//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=p-tooltip.js.map