@amiceli/papierjs 0.3.0 → 0.4.0

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

@@ -0,0 +1,141 @@
+import { Host, h, } from "@stencil/core";
+export class PSwitch {
+    constructor() {
+        /** define switch style */
+        this.round = false;
+        /** define switch parent style */
+        this.square = false;
+        this.dark = false;
+        this.checked = false;
+    }
+    onInput(e) {
+        this.changeEvent.emit(e.target.checked);
+    }
+    render() {
+        return (h(Host, { key: '5e934e029d1701ce1f128a61b0cbff9bca05737f' }, h("div", { key: 'f6fadf8f01d3a7b6410fd6658452bc941bf93502', class: {
+                papier: true,
+                'is--dark': this.dark,
+            } }, h("div", { key: 'd22ced45ef921d7c83fbbcc5338e9e773cb3b86e', class: "form-group" }, h("label", { key: '07d5d86432db997ba0ddfd92090136c4f638c7d6', class: {
+                'paper-switch': !this.square,
+                'paper-switch-2': this.square,
+            } }, h("input", { key: '25580312a2fabb02d77464ebda4425cc1a9f55dc', id: "paperSwitch4", name: "paperSwitch4", type: "checkbox", checked: this.checked, onInput: (e) => this.onInput(e) }), h("span", { key: 'caef2131bf0ea9c503fde6c12641f2aee48d8538', class: {
+                round: this.round,
+                'paper-switch-slider': true,
+            } }))))));
+    }
+    static get is() { return "p-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "round": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "define switch style"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "round",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "square": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "define switch parent style"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "square",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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"
+            }
+        };
+    }
+    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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/form/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACJ,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,OAAO;IALpB;QAMI,0BAA0B;QAEnB,UAAK,GAAa,KAAK,CAAA;QAC9B,iCAAiC;QAE1B,WAAM,GAAa,KAAK,CAAA;QAExB,SAAI,GAAa,KAAK,CAAA;QAEtB,YAAO,GAAa,KAAK,CAAA;KA4CnC;IAvCU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAA;IACjE,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DACI,KAAK,EAAE;4BACH,cAAc,EAAE,CAAC,IAAI,CAAC,MAAM;4BAC5B,gBAAgB,EAAE,IAAI,CAAC,MAAM;yBAChC;wBAED,8DACI,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GACjC;wBACF,6DACI,KAAK,EAAE;gCACH,KAAK,EAAE,IAAI,CAAC,KAAK;gCACjB,qBAAqB,EAAE,IAAI;6BAC9B,GACH,CACE,CACN,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Event,\n    type EventEmitter,\n    Host,\n    Prop,\n    h,\n} from '@stencil/core'\n\n@Component({\n    tag: 'p-switch',\n    styleUrl: 'switch.scss',\n    shadow: true,\n})\nexport class PSwitch {\n    /** define switch style */\n    @Prop()\n    public round?: boolean = false\n    /** define switch parent style */\n    @Prop()\n    public square?: boolean = false\n    @Prop()\n    public dark?: boolean = false\n    @Prop()\n    public checked?: boolean = false\n\n    @Event({ 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    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <label\n                            class={{\n                                'paper-switch': !this.square,\n                                'paper-switch-2': this.square,\n                            }}\n                        >\n                            <input\n                                id=\"paperSwitch4\"\n                                name=\"paperSwitch4\"\n                                type=\"checkbox\"\n                                checked={this.checked}\n                                onInput={(e) => this.onInput(e)}\n                            />\n                            <span\n                                class={{\n                                    round: this.round,\n                                    'paper-switch-slider': true,\n                                }}\n                            />\n                        </label>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

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

@@ -0,0 +1,57 @@
+export default {
+    title: 'Form/Switch Tile/Playground',
+    argTypes: {
+        uncheckedText: {
+            name: 'unchecked-text',
+            control: 'text',
+        },
+        checkedText: {
+            name: 'checked-text',
+            control: 'text',
+        },
+        uncheckedBackground: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'warning', 'danger', 'noted'],
+            name: 'unchecked-background',
+        },
+        checkedBackground: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'warning', 'danger', 'noted'],
+            name: 'checked-background',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <p-switch-tile
+            unchecked-background="${args.uncheckedBackground}"
+            checked-background="${args.checkedBackground}"
+            ${args.darkMode ? 'dark' : ''}
+        >
+            <span slot="unchecked-text">${args.uncheckedText}</span>
+            <span slot="checked-text">${args.checkedText}</span>
+        </p-switch-tile>`
+
+    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 = {
+    uncheckedText: 'No',
+    checkedText: 'Yes',
+    uncheckedBackground: 'primary',
+    checkedBackground: 'noted',
+    darkMode: false,
+}