@amiceli/papierjs 0.3.0 → 0.4.0

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

@@ -0,0 +1,32 @@
+import { h } from "@stencil/core";
+export class Alert {
+    constructor() {
+        this.value = '';
+        this.selectedValue = '';
+    }
+    showModal(value) {
+        var _a;
+        (_a = this.el.querySelector('p-modal')) === null || _a === void 0 ? void 0 : _a.open();
+        this.value = value;
+    }
+    onValidate() {
+        this.selectedValue = this.value;
+        this.onClose();
+    }
+    onClose() {
+        var _a;
+        (_a = this.el.querySelector('p-modal')) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    render() {
+        return (h("div", { key: 'ebd30a904cdb71d290662840e8b4766d102ca708' }, h("p-modal", { key: 'ce72d861ec7ab4d7829979704ec29b05927e821b' }, h("p", { key: 'ec93f16257d10733a2c9b13cba777b5261ba5278' }, "You select ", h("b", { key: '440cfe0df3d00558d47e521f5fd4a41b3a5ee5bf' }, this.value)), h("br", { key: 'cd1944ff062010f7d231095320b87e36a1e14f69' }), h("p-button", { key: 'e4214b4ae538cd70099225ee0f63055994fa3458', type: "success", onClick: () => this.onValidate() }, "I validate"), "\u00A0", h("p-button", { key: '8c195065be017b3de36f28658b4c5b7da8a69a61', type: "danger", onClick: () => this.onClose() }, "No !")), h("p-dropdown", { key: 'a0403bb75fc0e08e52c7de0e42c40f420fde6022', placeholder: "Choose best framework", "prevent-selected": true, onSelect: (e) => this.showModal(e.detail), value: this.selectedValue }, h("p-dropdown-item", { key: '278d5915c55593db051e75ced6008b179ba1c4e6', value: "awesome", selected: this.selectedValue === 'awesome' }, "Vue"), h("p-dropdown-item", { key: '88673f26c5501295cf39925423c420715ed0fa96', value: "Stencil", selected: this.selectedValue === 'Stencil' }, "Stencil"), h("p-dropdown-item", { key: 'c730db6663ca8b266a83571222bfc89344ce5aaa', value: "Storybook", selected: this.selectedValue === 'Storybook' }, "Storybook"))));
+    }
+    static get is() { return "p-dropdown-preview"; }
+    static get states() {
+        return {
+            "value": {},
+            "selectedValue": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=dropdown.preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.preview.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/dropdown/stories/dropdown.preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAK5D,MAAM,OAAO,KAAK;IAHlB;QAKI,UAAK,GAAW,EAAE,CAAA;QAElB,kBAAa,GAAW,EAAE,CAAA;KA8D7B;IA1DU,SAAS,CAAC,KAAa;;QAC1B,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,IAAI,EAAE,CAAA;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACtB,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAA;QAC/B,IAAI,CAAC,OAAO,EAAE,CAAA;IAClB,CAAC;IAEM,OAAO;;QACV,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAA;IAC7C,CAAC;IAED,MAAM;QACF,OAAO,CACH;YACI;gBACI;;oBACe,4DAAI,IAAI,CAAC,KAAK,CAAK,CAC9B;gBACJ,4DAAM;gBACN,iEAAU,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,iBAE9C;;gBAEX,iEAAU,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,WAE1C,CACL;YACV,mEACI,WAAW,EAAC,uBAAuB,4BAEnC,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,EACtD,KAAK,EAAE,IAAI,CAAC,aAAa;gBAEzB,wEACI,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,SAAS,UAG5B;gBAClB,wEACI,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,SAAS,cAG5B;gBAClB,wEACI,KAAK,EAAC,WAAW,EACjB,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,WAAW,gBAG9B,CACT,CACX,CACT,CAAA;IACL,CAAC;;;;;;;CACJ","sourcesContent":["import { Component, Element, State, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-dropdown-preview',\n})\nexport class Alert {\n    @State()\n    value: string = ''\n    @State()\n    selectedValue: string = ''\n    @Element()\n    public el: HTMLElement\n\n    public showModal(value: string) {\n        this.el.querySelector('p-modal')?.open()\n        this.value = value\n    }\n\n    public onValidate() {\n        this.selectedValue = this.value\n        this.onClose()\n    }\n\n    public onClose() {\n        this.el.querySelector('p-modal')?.close()\n    }\n\n    render() {\n        return (\n            <div>\n                <p-modal>\n                    <p>\n                        You select <b>{this.value}</b>\n                    </p>\n                    <br />\n                    <p-button type=\"success\" onClick={() => this.onValidate()}>\n                        I validate\n                    </p-button>\n                    &nbsp;\n                    <p-button type=\"danger\" onClick={() => this.onClose()}>\n                        No !\n                    </p-button>\n                </p-modal>\n                <p-dropdown\n                    placeholder=\"Choose best framework\"\n                    prevent-selected\n                    onSelect={(e: CustomEvent) => this.showModal(e.detail)}\n                    value={this.selectedValue}\n                >\n                    <p-dropdown-item\n                        value=\"awesome\"\n                        selected={this.selectedValue === 'awesome'}\n                    >\n                        Vue\n                    </p-dropdown-item>\n                    <p-dropdown-item\n                        value=\"Stencil\"\n                        selected={this.selectedValue === 'Stencil'}\n                    >\n                        Stencil\n                    </p-dropdown-item>\n                    <p-dropdown-item\n                        value=\"Storybook\"\n                        selected={this.selectedValue === 'Storybook'}\n                    >\n                        Storybook\n                    </p-dropdown-item>\n                </p-dropdown>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -1,21 +1,23 @@
 import { h } from "@stencil/core";
-export class Alert {
+export class DropdownItem {
     constructor() {
         this.selected = false;
         this.dark = false;
     }
     getParentClass() {
-        let cssClass = 'papier dropdown-item';
-        if (this.dark) {
-            cssClass = `${cssClass} is--dark`;
-        }
-        return cssClass;
+        return {
+            'papier dropdown-item': true,
+            'is--dark': this.dark,
+        };
     }
     sendClick() {
         this.changeEvent.emit(this.value);
     }
     render() {
-        return (h("div", { key: '94bab7bc42903a879c4899f35eac67259080a99c', class: this.getParentClass(), onClick: () => this.sendClick() }, h("div", { key: '775566e66267d4cf735b85dc417d53e63c76beb4', class: "border border-primary" }, h("slot", { key: '9887e58b530f5a4918085631625cd9a03ca19496' }))));
+        return (h("div", { key: 'ebeadf0541037fe8ac3968b97135b54d8d2ffff3', class: this.getParentClass(), onClick: () => this.sendClick() }, h("div", { key: 'f9dc47abca23a7ff49024dc97636dcae2064849f', class: {
+                'background-success': this.selected,
+                'border border-primary': true,
+            } }, h("slot", { key: 'eaaa781bf0d311891c32d5884fc12dafab40f2be' }))));
     }
     static get is() { return "p-dropdown-item"; }
     static get encapsulation() { return "shadow"; }
@@ -39,7 +41,7 @@ export class Alert {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

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

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

@@ -25,7 +25,7 @@ export class InputText {
         this.changeEvent.emit(e.target.value);
     }
     render() {
-        return (h("div", { key: '01fa99378a561daf3460675737bcd3ab0c49fddb', class: this.getParentClass() }, this.label && (h("label", { key: '2011bbd3366da16a5cb3004c7f69e1739eaf44ba', htmlFor: "paperInputs1" }, this.label, this.required ? '*' : '')), h("input", { key: '3c3641de9df5db826a622dfcc33e257d771561ee', type: "text", placeholder: this.placeholder, id: "paperInputs1", disabled: this.disabled, value: this.value, onChange: (e) => this.onChange(e) })));
+        return (h("div", { key: 'ae4ed1fa9ff2ca7cdfc71356d3fded00971cec78', class: this.getParentClass() }, this.label && (h("label", { key: '74894b07e5734e0ce3c4d3315d299b329602e061', htmlFor: "paperInputs1" }, this.label, this.required ? '*' : '')), h("input", { key: 'a16e8eb7604842688984e2f3f6f80a3052069560', type: "text", placeholder: this.placeholder, id: "paperInputs1", disabled: this.disabled, value: this.value, onChange: (e) => this.onChange(e) })));
     }
     static get is() { return "p-input-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-text.js","sourceRoot":"","sources":["../../../../src/components/form/input-text/input-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO5E,MAAM,OAAO,SAAS;IALtB;QASI,UAAK,GAAY,EAAE,CAAA;QAEnB,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;QAItB,aAAQ,GAAa,KAAK,CAAA;QAE1B,UAAK,GAAa,KAAK,CAAA;QAEvB,aAAQ,GAAa,KAAK,CAAA;KA6C7B;IAxCU,cAAc;QACjB,IAAI,QAAQ,GAAG,mBAAmB,CAAA;QAElC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,GAAG,QAAQ,aAAa,CAAA;QACvC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,QAAQ,CAAC,CAAQ;QACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;IAC/D,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC5B,IAAI,CAAC,KAAK,IAAI,CACX,8DAAO,OAAO,EAAC,cAAc;gBACxB,IAAI,CAAC,KAAK;gBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACrB,CACX;YACD,8DACI,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAC,cAAc,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GACnC,CACA,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-input-text',\n    styleUrl: 'input-text.scss',\n    shadow: true,\n})\nexport class InputText {\n    @Prop()\n    placeholder?: string\n    @Prop()\n    value?: string = ''\n    @Prop()\n    required?: boolean = false\n    @Prop()\n    dark?: boolean = false\n    @Prop()\n    label?: string\n    @Prop()\n    disabled?: boolean = false\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    hasError?: boolean = false\n\n    @Event({ eventName: 'change' })\n    public changeEvent: EventEmitter<string>\n\n    public getParentClass() {\n        let cssClass = 'papier form-group'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n        if (this.block) {\n            cssClass = `${cssClass} is--block`\n        }\n        if (this.hasError) {\n            cssClass = `${cssClass} has--error`\n        }\n\n        return cssClass\n    }\n\n    public onChange(e: Event) {\n        this.changeEvent.emit((e.target as HTMLInputElement).value)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                {this.label && (\n                    <label htmlFor=\"paperInputs1\">\n                        {this.label}\n                        {this.required ? '*' : ''}\n                    </label>\n                )}\n                <input\n                    type=\"text\"\n                    placeholder={this.placeholder}\n                    id=\"paperInputs1\"\n                    disabled={this.disabled}\n                    value={this.value}\n                    onChange={(e) => this.onChange(e)}\n                />\n            </div>\n        )\n    }\n}\n"]}