jebamo 0.0.1 → 0.0.2

package/dist/collection/components/je-input/je-input.js

@@ -0,0 +1,862 @@
+import { Host, h } from "@stencil/core";
+import { debounceEvent } from "../../utils/utils";
+export class JeInput {
+    constructor() {
+        this.dropdownActive = false;
+        this.showPassword = false;
+        this.errors = [];
+        this.originalValue = '';
+        this.togglePassword = () => {
+            this.showPassword = !this.showPassword;
+            this.type = this.type == 'text' ? 'password' : 'text';
+        };
+        this.formatInput = async (ev) => {
+            const input = ev.target;
+            if (input && this.format) {
+                input.value = await this.format(input.value, this.value, ev);
+            }
+        };
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                this.value = input.value;
+                this.valueChange.emit(this.value);
+            }
+        };
+        this.handleContainerClick = async () => {
+            if (this.dropdown) {
+                this.dropdownActive = true;
+                this.hostEl.style.setProperty('--je-content-width', `${this.hostEl.clientWidth}px`);
+                await this.popoverEl.present('element', this.hostEl);
+            }
+        };
+        this.handleDismiss = () => {
+            this.dropdownActive = false;
+            this.containerEl.classList.remove('focus');
+        };
+        this.isTouched = false;
+        this.label = '';
+        this.disabled = false;
+        this.autoCapitalize = 'off';
+        this.autoComplete = 'off';
+        this.autoCorrect = 'off';
+        this.autoFocus = undefined;
+        this.inputMode = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.multiple = false;
+        this.pattern = undefined;
+        this.readOnly = false;
+        this.required = false;
+        this.spellcheck = false;
+        this.step = undefined;
+        this.type = 'text';
+        this.value = '';
+        this.placeholder = '';
+        this.debounce = 0;
+        this.format = undefined;
+        this.validators = undefined;
+        this.noTyping = false;
+        this.helperText = undefined;
+        this.dropdown = false;
+        this.expand = undefined;
+        this.dismissOnClick = undefined;
+    }
+    componentWillLoad() {
+        if (this.label && !this.hostEl.getAttribute('name')) {
+            this.hostEl.setAttribute('name', this.label.replace(' ', '-').toLowerCase());
+        }
+    }
+    connectedCallback() {
+        this.internals.setFormValue(this.value);
+    }
+    async componentDidLoad() {
+        this.originalValue = this.value;
+        const { valueChange, debounce } = this;
+        if (debounce) {
+            this.valueChange = debounceEvent(valueChange, debounce);
+        }
+        if (this.format) {
+            this.value = await this.format(this.value);
+        }
+        else {
+            this.validatorsChanged();
+        }
+    }
+    async formResetCallback() {
+        this.isTouched = false;
+        if (this.value !== this.originalValue) {
+            if (this.format) {
+                this.value = await this.format(this.originalValue);
+            }
+            else {
+                this.value = this.originalValue;
+            }
+        }
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleFocus() {
+        this.containerEl.classList.add('focus');
+    }
+    handleBlur() {
+        this.isTouched = true;
+        if (!this.dropdownActive) {
+            this.containerEl.classList.remove('focus');
+        }
+    }
+    async validatorsChanged() {
+        this.errors = [];
+        if (this.validators) {
+            for (const validator of this.validators) {
+                const res = await validator(this.value);
+                this.errors = [...this.errors, ...res];
+            }
+        }
+        this.setValidity();
+    }
+    requiredChanged() {
+        this.setValidity();
+    }
+    async valueChanged() {
+        if (this.inputEl && this.inputEl.value !== this.value) {
+            this.inputEl.value = this.value;
+        }
+        this.internals.setFormValue(this.value);
+        this.validatorsChanged();
+    }
+    getInputElement() {
+        return Promise.resolve(this.inputEl);
+    }
+    dismissDropdown(role = 'manualDismiss') {
+        return this.popoverEl.dismiss(role);
+    }
+    markAsTouched() {
+        return new Promise(resolve => {
+            this.isTouched = true;
+            resolve();
+        });
+    }
+    hasError() {
+        var _a;
+        return Promise.resolve(this.errors.length > 0 || (this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '')));
+    }
+    reset() {
+        return this.formResetCallback();
+    }
+    setValidity() {
+        var _a;
+        const requiredError = this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '');
+        const hasError = this.errors.length > 0 || requiredError;
+        if (hasError) {
+            if (requiredError) {
+                this.internals.setValidity({ valueMissing: true }, `${this.label || 'This field'} is required`, this.inputEl);
+            }
+            else {
+                this.internals.setValidity({ customError: true }, this.errors[0], this.inputEl);
+            }
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    render() {
+        var _a;
+        const requiredIcon = h("je-icon", { key: 'b812ffd92e7fc689f2af87b10ee92c45e28a92bc', style: { fontSize: '10px', color: 'var(--je-error-500)' }, icon: "asterisk" });
+        const label = h("label", { key: '05f40a7e7945974b35d005c4d06965e18c50702f', part: 'label', style: { display: 'flex' } }, this.label, " ", this.required && requiredIcon);
+        const invalid = this.errors.length > 0 || (this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === ''));
+        const containerClasses = {
+            disabled: this.disabled,
+            touched: this.isTouched
+        };
+        if (invalid && this.isTouched) {
+            this.internals.reportValidity();
+        }
+        return (h(Host, { key: '0d7ad78c21a47bca8b35635269bf8f0c911ba0dd' }, h("div", { key: '5ea27cbabac48f622d72bd571655a5ec967acf4b', ref: el => this.containerEl = el, part: 'outer-container', onClick: this.handleContainerClick, class: containerClasses }, h("div", { key: 'd99e8aa93a05c65b7c7f4727027917e1e9056ee3', part: 'start-container' }, h("slot", { key: '2e59dda2daafcfcee06a463faf2684705eea0642', name: 'start' }), this.label && label), h("input", { key: '27a77375cecb8c9669619c964dfb0422d5650adf', part: "native-input", ref: el => this.inputEl = el, onInputCapture: this.formatInput, onInput: this.handleInput, disabled: this.disabled, autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete, autoCorrect: this.autoCorrect, autoFocus: this.autoFocus, inputMode: this.inputMode, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, pattern: this.pattern, readOnly: this.readOnly || this.noTyping, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: this.value, placeholder: this.placeholder }), h("div", { key: '3fcc3d84a01fc26fd11d7db45beee79ae5656af1', part: 'end-container' }, h("slot", { key: '2bf03124a793ec9ceb0cad951ac47693315acceb', name: 'end' }), !this.showPassword && this.type == 'password' && h("je-icon", { key: '3b4096d3cb432fd9614e90d43cf3367b365ce679', icon: "visibility", fill: true, onClick: this.togglePassword }), this.showPassword && this.type == 'text' && h("je-icon", { key: 'a4c1ec8f4e7ffdb64e906681389096b3da320485', icon: "visibility_off", fill: true, onClick: this.togglePassword }))), this.helperText && h("small", { key: '234252ad2c8c2b18b1c59d18c8bb451f97fcf269', class: "helper" }, this.helperText), this.dropdown && h("je-popover", { key: '132347f2bb1e31eb990e2f26381a5e2f111a4eaf', ref: el => this.popoverEl = el, exportparts: 'content', dismissOnClick: this.dismissOnClick, onDidDismiss: this.handleDismiss }, h("slot", { key: '03bf3efeddcfc701b680a5cb1fc473e80a44196e', name: 'dropdown' }))));
+    }
+    static get is() { return "je-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text above the control"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders input as disabled and prevents changes"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoCapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "auto-capitalize",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "auto-complete",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autoCorrect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'off' | 'on'",
+                    "resolved": "\"off\" | \"on\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "auto-correct",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "auto-focus",
+                "reflect": false
+            },
+            "inputMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "input-mode",
+                "reflect": false
+            },
+            "min": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "min-length",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders input as read only and prevents changes"
+                },
+                "attribute": "read-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks as required in form and adds asterisk to the end of the label"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "spellcheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "spellcheck",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "step": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "step",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to native input"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the input"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder text"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional debounce of the didInput event"
+                },
+                "attribute": "debounce",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "format": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormatterFn | AsyncFormatterFn",
+                    "resolved": "((newValue: string, oldValue?: string, ev?: InputEvent) => Promise<string>) | ((newValue: string, oldValue?: string, ev?: InputEvent) => string)",
+                    "references": {
+                        "FormatterFn": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-input/je-input.tsx",
+                            "id": "src/components/je-input/je-input.tsx::FormatterFn"
+                        },
+                        "AsyncFormatterFn": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-input/je-input.tsx",
+                            "id": "src/components/je-input/je-input.tsx::AsyncFormatterFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Formatter function that gets applied as the user types"
+                }
+            },
+            "validators": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(ValidationFn | AsyncValidationFn)[]",
+                    "resolved": "(ValidationFn | AsyncValidationFn)[]",
+                    "references": {
+                        "ValidationFn": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-input/je-input.tsx",
+                            "id": "src/components/je-input/je-input.tsx::ValidationFn"
+                        },
+                        "AsyncValidationFn": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-input/je-input.tsx",
+                            "id": "src/components/je-input/je-input.tsx::AsyncValidationFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validator functions for form participation"
+                }
+            },
+            "noTyping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will prevent changes, does not change the input's state in any way"
+                },
+                "attribute": "no-typing",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text directly below the control"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "dropdown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to render a dropdown when input is focused"
+                },
+                "attribute": "dropdown",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the input should expand to the full width of it's container"
+                },
+                "attribute": "expand",
+                "reflect": true
+            },
+            "dismissOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dropdown should dismiss itself on click"
+                },
+                "attribute": "dismiss-on-click",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTouched": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits as the user types"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "dismissDropdown": {
+                "complexType": {
+                    "signature": "(role?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "role",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "markAsTouched": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hasError": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "validators",
+                "methodName": "validatorsChanged"
+            }, {
+                "propName": "required",
+                "methodName": "requiredChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "handleFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=je-input.js.map