@amiceli/papierjs 0.3.0 → 0.4.0

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

@@ -0,0 +1,162 @@
+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 {
+    constructor() {
+        /** Enable dark mode */
+        this.dark = false;
+        this.checked = false;
+        this.checkedBackground = 'primary';
+    }
+    onInput(e) {
+        this.changeEvent.emit(e.target.checked);
+    }
+    getFrontCardClass() {
+        const cssClass = {
+            'paper-switch-tile-card-front': true,
+            border: true,
+        };
+        cssClass[`background-${this.uncheckedBackground}`] = true;
+        return cssClass;
+    }
+    getBackCardClass() {
+        const cssClass = {
+            'paper-switch-tile-card-back': true,
+            border: true,
+        };
+        cssClass[`background-${this.checkedBackground}`] = true;
+        return cssClass;
+    }
+    render() {
+        return (h(Host, { key: 'efeab455155276ced3a0b89ae43b1d7ec4c1d783' }, h("div", { key: '38b83270a3ee06468d8272dc1aa773a6fe853b9a', class: {
+                papier: true,
+                'is--dark': this.dark,
+            } }, h("div", { key: 'a06f4d0185834327907f9c2ab8778f6515ca6f26', class: "form-group" }, h("label", { key: 'f11e9ade12c46a664e50bc8aa8e43704cc95c665', htmlFor: "paperSwitch1", class: "paper-switch-tile" }, h("input", { key: '1184431568f45615294474ed3b7a5df52a6fa444', id: "paperSwitch1", name: "paperSwitch1", type: "checkbox", checked: this.checked }), h("div", { key: '71af531e81e4f314eec261201d435e0e4b78ab3e', class: "paper-switch-tile-card border" }, h("div", { key: '26b4ef7394b67f69d06f55a4cbae5da6479da43c', class: this.getFrontCardClass() }, h("slot", { key: '5e40ec51a5ba802e2f89ae6572e831c98865c785', name: "unchecked-text" })), h("div", { key: '13a777f47a6a84a908da341851c2d0a963f88099', class: this.getBackCardClass() }, h("slot", { key: 'dda24c30da6b84199d31edc1d61bc7e686209a2e', name: "checked-text" }))))))));
+    }
+    static get is() { return "p-switch-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch-tile.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable dark mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dark",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checkedBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TileBackground",
+                    "resolved": "\"danger\" | \"muted\" | \"primary\" | \"secondary\" | \"success\"",
+                    "references": {
+                        "TileBackground": {
+                            "location": "global",
+                            "id": "global::TileBackground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked-background",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "uncheckedBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TileBackground",
+                    "resolved": "\"danger\" | \"muted\" | \"primary\" | \"secondary\" | \"success\"",
+                    "references": {
+                        "TileBackground": {
+                            "location": "global",
+                            "id": "global::TileBackground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "unchecked-background",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=switch-tile.js.map

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

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

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

@@ -7,7 +7,7 @@ export class Alert {
         return this.dark ? 'papier is--dark' : 'papier';
     }
     render() {
-        return (h("div", { key: '94a3a728263a7ec1c8bff667fdc0b22e63c6c9ba', class: this.getParentClass() }, h("slot", { key: 'eb5051ae174663ddcd7a952b4612bf50988f547b' })));
+        return (h("div", { key: '5cdad006f9e9b71c13cc237b32338bd0bcec9ad8', class: this.getParentClass() }, h("slot", { key: 'c1b30acfc9c85b94968a562fa28d1d564b6002cf' })));
     }
     static get is() { return "p-leaf"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,90 @@
+import { Host, h, } from "@stencil/core";
+export class PModal {
+    constructor() {
+        this.isOpen = false;
+    }
+    async open() {
+        this.isOpen = true;
+    }
+    async close() {
+        this.isOpen = false;
+        this.closeEvent.emit(null);
+    }
+    render() {
+        return (h(Host, { key: '44e773a86ff62b4ebb3ebe422a7751ed8215f82b' }, this.isOpen && (h("div", { key: 'aba90002aba4f7cccbf35c4e611210d5c3ffd99b', class: "papier" }, h("div", { key: '280e660c62d4ec602fadf9545df1e660a8f42a15', class: "modal" }, h("div", { key: 'ac9fdbe7758e917d4be7b32748191a22b165a6bb', class: "modal-bg", onClick: () => this.close() }), h("div", { key: 'ac26db09c549eaf3c796a1fc00e2b4b536eea058', class: "modal-body" }, h("span", { key: '7f9ff9988bffc704b26483de912f76b19850333c', class: "btn-close", onClick: () => this.close() }, "X"), h("h4", { key: '28132657367594a7e3e916c0c900d5a2638aec5f', class: "modal-title" }, h("slot", { key: '05707cbb940c3beb6491457725218fd9c66bd6fb', name: "title" })), h("h5", { key: 'cf4b58f3e8723a9e26023b4a621310bf6306782b', class: "modal-subtitle" }, h("slot", { key: 'c21b9cdca220c1054cabff883e638fba4a5642d4', name: "sub-title" })), h("p", { key: '55ac957b152036846e20cc863377f63a4c74e587', class: "modal-text" }, h("slot", { key: '2faaa7e890a68168d9145d26fd2b0857a0e0a5b8', name: "text" })), h("slot", { key: '634bf74ca3d435f728e9e91de770c6702917aaea' })))))));
+    }
+    static get is() { return "p-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeEvent",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=modal.js.map

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

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

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

@@ -23,4 +23,4 @@ export function previewModal() {
         subtree: true,
     });
 }
-//# sourceMappingURL=p-modal.preview.js.map
+//# sourceMappingURL=modal.preview.js.map

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

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

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

@@ -0,0 +1,46 @@
+import { h } from "@stencil/core";
+export class PModalPreview {
+    constructor() {
+        this.title = false;
+    }
+    openModal() {
+        var _a;
+        (_a = this.el.querySelector('p-modal')) === null || _a === void 0 ? void 0 : _a.open();
+    }
+    closeModal() {
+        var _a;
+        (_a = this.el.querySelector('p-modal')) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    render() {
+        return (h("div", { key: '694fe55c10b6c699b9e21dc53dd65b61200edd68' }, this.title === true ? (h("p-modal", null, h("span", { slot: "title" }, "Modal title"), h("span", { slot: "sub-title" }, "Modal sub title"), h("span", { slot: "text" }, "This is an example of modal which is implemented with pure CSS! :D"), h("p-button", { type: "warning", onClick: () => this.closeModal() }, "Close it !"))) : (h("p-modal", null, h("h1", null, "Ciao fratello"), h("p", null, "click on button, cross or outside modal to close it."), h("br", null), h("p-button", { type: "success", onClick: () => this.closeModal() }, "Close modal"))), h("p-button", { key: '315992d18328e1813f1d7e66a684a69fe99f830b', type: this.title ? 'secondary' : 'primary', onClick: () => {
+                this.openModal();
+            } }, "Open modal")));
+    }
+    static get is() { return "p-modal-preview"; }
+    static get properties() {
+        return {
+            "title": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=modal.preview.js.map

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

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

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

@@ -3217,4 +3217,7 @@
 }
 :host .papier:not(.is--block) {
   display: inline-block;
+}
+:host .is--dark .progress {
+  border-color: white;
 }

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

@@ -15,7 +15,8 @@ export class ProgressBar {
             'muted',
             'primary',
         ];
-        let cssClass = `bar w-${this.value}`;
+        const value = this.value < 0 ? 0 : this.value > 100 ? 100 : this.value;
+        let cssClass = `bar w-${value}`;
         if (!types.includes(this.type)) {
             cssClass = `${cssClass} primary`;
         }
@@ -35,7 +36,7 @@ export class ProgressBar {
         return cssClass;
     }
     render() {
-        return (h("div", { key: 'b5b6f14316d2f2581fc02d2ca4c1c6fc589f9b0a', class: this.getParentClass() }, h("div", { key: '9f7c3be8aa7fd5cfa58bfedd61335594723b91ce', class: "progress" }, h("div", { key: '758ac60825e1c5ad51fc1897d9f85fa8a148194e', class: this.getClass() }, h("slot", { key: '274937e50c80c677f2da3d08981cc01b3f4731c8' })))));
+        return (h("div", { key: '265866ff4d3f95b7741c828b25723e7793732e4f', class: this.getParentClass() }, h("div", { key: '6fb4ff19a6d42104d4fc574e977fc30eed1087fb', class: "progress" }, h("div", { key: '028c08f43d0b0ffe4d6fa8e643fa6fc026ae805d', class: this.getClass() }, h("slot", { key: '7f9f94d272c7796b1a72b3268d8c5910f7571bf8' })))));
     }
     static get is() { return "p-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAelD,MAAM,OAAO,WAAW;IALxB;QAOI,SAAI,GAAsB,SAAS,CAAA;QAEnC,UAAK,GAAY,CAAC,CAAA;QAElB,YAAO,GAAa,KAAK,CAAA;QAEzB,SAAI,GAAa,KAAK,CAAA;KA+CzB;IA7CU,QAAQ;QACX,MAAM,KAAK,GAAG;YACV,WAAW;YACX,SAAS;YACT,SAAS;YACT,QAAQ;YACR,OAAO;YACP,SAAS;SACZ,CAAA;QACD,IAAI,QAAQ,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,CAAA;QAEpC,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, Prop, h } from '@stencil/core'\n\ntype ProgressBarColor =\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'muted'\n    | 'primary'\n\n@Component({\n    tag: 'p-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true,\n})\nexport class ProgressBar {\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\n    public getClass(): string {\n        const types = [\n            'secondary',\n            'success',\n            'warning',\n            'danger',\n            'muted',\n            'primary',\n        ]\n        let cssClass = `bar w-${this.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"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAelD,MAAM,OAAO,WAAW;IALxB;QAOI,SAAI,GAAsB,SAAS,CAAA;QAEnC,UAAK,GAAY,CAAC,CAAA;QAElB,YAAO,GAAa,KAAK,CAAA;QAEzB,SAAI,GAAa,KAAK,CAAA;KAiDzB;IA/CU,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, Prop, h } from '@stencil/core'\n\ntype ProgressBarColor =\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'muted'\n    | 'primary'\n\n@Component({\n    tag: 'p-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true,\n})\nexport class ProgressBar {\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\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/progress-bar/stories/progress-bar.preview.js

@@ -0,0 +1,23 @@
+export function previewProgressbar() {
+    const inputObserver = new MutationObserver(() => {
+        const progress = document.querySelector('#animated-progress');
+        const progressBtn = document.querySelector('#animated-progress-button');
+        let value = 10;
+        if (progress && progressBtn) {
+            progress.setAttribute('value', `${value}`);
+            progressBtn.addEventListener('click', () => {
+                if (value === 100) {
+                    value = -10;
+                }
+                value += 10;
+                progress.setAttribute('value', `${value}`);
+            });
+            inputObserver.disconnect();
+        }
+    });
+    inputObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+}
+//# sourceMappingURL=progress-bar.preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.preview.js","sourceRoot":"","sources":["../../../../src/components/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/progress-bar/stories/progress-bar.stories.js

@@ -0,0 +1,78 @@
+export default {
+    title: 'Components/Progress bar/Playground',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: [
+                'success',
+                'secondary',
+                'warning',
+                'danger',
+                'muted',
+                'primary',
+            ],
+            name: 'checked-background',
+        },
+        value: {
+            type: 'number',
+            min: 0,
+            max: 100,
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <div style="width : 90%">
+            <p-leaf>
+                <h3>p-progress-bar</h3>
+            </p-leaf>
+            <p-progress-bar
+                type="${args.type}"
+                value="${args.value}"
+                ${args.darkMode ? 'dark' : ''}
+                ${args.striped ? 'striped' : ''}
+            >
+                ${args.contenr}
+            </p-progress-bar>
+            <p-leaf>
+                <h3>CSS animation</h3>
+            </p-leaf>
+            <p-progress-bar
+                type="${args.type}"
+                id="animated-progress"
+                ${args.darkMode ? 'dark' : ''}
+                ${args.striped ? 'striped' : ''}
+            >
+                ${args.contenr}
+            </p-progress-bar>
+            <br />
+            <p-button 
+                type="secondary"
+                id="animated-progress-button"
+            >Add 10%</p-button>
+        </div>
+    `
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    contenr: 'Awesome',
+    type: 'success',
+    darkMode: false,
+    striped: false,
+    value: 20,
+}

package/dist/components/index.js

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