@amiceli/papierjs 0.0.1 → 0.2.0

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

@@ -0,0 +1,145 @@
+import { h, } from "@stencil/core";
+import feather from "feather-icons";
+export class Alert {
+    constructor() {
+        this.dark = false;
+        this.open = false;
+    }
+    getParentClass() {
+        let cssClass = 'papier dropdown'; // is--block
+        if (this.dark) {
+            cssClass = `${cssClass} is--dark`;
+        }
+        if (this.open) {
+            cssClass = `${cssClass} is--open`;
+        }
+        return cssClass;
+    }
+    detectOutsideClick(ev) {
+        if (this.el.contains(ev.target)) {
+            return;
+        }
+        this.open = false;
+    }
+    componentDidLoad() {
+        const items = Array.from(this.el.getElementsByTagName('p-dropdown-item'));
+        for (const item of items) {
+            if (this.dark) {
+                item.setAttribute('dark', 'true');
+            }
+            item.addEventListener('change', (e) => {
+                this.selectEvent.emit(e.detail);
+                this.open = !this.open;
+            });
+        }
+    }
+    selectValue(value) {
+        this.selectEvent.emit(value);
+    }
+    getSelectedValue() {
+        const items = this.el.getElementsByTagName('p-dropdown-item');
+        const list = Array.from(items);
+        const selected = list.find((item) => {
+            const attr = item.getAttribute('selected');
+            return attr === 'true' || attr === '';
+        });
+        return (selected === null || selected === void 0 ? void 0 : selected.innerText) || this.placeholder || '';
+    }
+    render() {
+        const selected = this.getSelectedValue();
+        const arrowIcon = feather.icons['chevron-down'].toSvg();
+        return (h("div", { key: '9267bc78025abeecd0bc726dcfe821aee868460d', class: this.getParentClass() }, h("div", { key: '8824eb5a51fec062d691130a71acf8bb18fb8119', class: "dropdown__header border border-primary", onClick: () => {
+                this.open = !this.open;
+            } }, h("span", { key: '83643aad843f3a54b989fea80164c2a4f316b674' }, selected), h("span", { key: '0aabe82681e645e3c1c8fa492d7d133b26db2599', class: "for--icon", innerHTML: arrowIcon })), h("div", { key: '0058f2115ad9891e10f3c56c5d8de147f4970ca5', class: "dropdown__children" }, h("slot", { key: 'da55754f87fc902893a51fd1be4301d3b27e25f7' }))));
+    }
+    static get is() { return "p-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectEvent",
+                "name": "select",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "detectOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    type EventEmitter,\n    Listen,\n    Prop,\n    State,\n    h,\n} from '@stencil/core'\nimport feather from 'feather-icons'\n\n@Component({\n    tag: 'p-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    dark?: boolean = false\n    @State()\n    open?: boolean = false\n    @Prop()\n    placeholder?: string\n    @State()\n    selectedValue?: string\n    @Element()\n    public el: HTMLElement\n\n    @Event({ eventName: 'select' })\n    public selectEvent: EventEmitter<string>\n\n    public getParentClass() {\n        let cssClass = 'papier dropdown' // is--block\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n        if (this.open) {\n            cssClass = `${cssClass} is--open`\n        }\n\n        return cssClass\n    }\n\n    @Listen('click', { target: 'window' })\n    public detectOutsideClick(ev) {\n        if (this.el.contains(ev.target)) {\n            return\n        }\n        this.open = false\n    }\n\n    public componentDidLoad() {\n        const items = Array.from(\n            this.el.getElementsByTagName('p-dropdown-item'),\n        )\n\n        for (const item of items) {\n            if (this.dark) {\n                item.setAttribute('dark', 'true')\n            }\n            item.addEventListener('change', (e) => {\n                this.selectEvent.emit(e.detail)\n                this.open = !this.open\n            })\n        }\n    }\n\n    public selectValue(value: string) {\n        this.selectEvent.emit(value)\n    }\n\n    public getSelectedValue(): string {\n        const items = this.el.getElementsByTagName('p-dropdown-item')\n        const list = Array.from(items)\n        const selected = list.find((item) => {\n            const attr = item.getAttribute('selected')\n\n            return attr === 'true' || attr === ''\n        })\n\n        return selected?.innerText || this.placeholder || ''\n    }\n\n    render() {\n        const selected = this.getSelectedValue()\n        const arrowIcon = feather.icons['chevron-down'].toSvg()\n        return (\n            <div class={this.getParentClass()}>\n                <div\n                    class=\"dropdown__header border border-primary\"\n                    onClick={() => {\n                        this.open = !this.open\n                    }}\n                >\n                    <span>{selected}</span>\n                    <span class=\"for--icon\" innerHTML={arrowIcon} />\n                </div>\n                <div class=\"dropdown__children\">\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}

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

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+export class Alert {
+    constructor() {
+        this.selected = false;
+        this.dark = false;
+    }
+    getParentClass() {
+        let cssClass = 'papier dropdown-item';
+        if (this.dark) {
+            cssClass = `${cssClass} is--dark`;
+        }
+        return cssClass;
+    }
+    sendClick() {
+        this.changeEvent.emit(this.value);
+    }
+    render() {
+        return (h("div", { key: 'cbfa41e3df447562cfe2f3e75b4e9c71bf55a438', class: this.getParentClass(), onClick: () => this.sendClick() }, h("div", { key: 'e17717f3f982eb2b59ef4fc088e59adebb36dd33', class: "border border-primary" }, h("slot", { key: 'f69cd73c7416e8f19cd77d78ad019e48d0d4e93d' }))));
+    }
+    static get is() { return "p-dropdown-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../dropdown/dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../dropdown/dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "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"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO5E,MAAM,OAAO,KAAK;IALlB;QASI,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KA4BzB;IAvBU,cAAc;QACjB,IAAI,QAAQ,GAAG,sBAAsB,CAAA;QAErC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,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,4DAAK,KAAK,EAAC,uBAAuB;gBAC9B,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 Alert {\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        let cssClass = 'papier dropdown-item'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\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 class=\"border border-primary\">\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}