adp-web-components 0.0.94 → 0.0.96

package/dist/collection/components/form-elements/form-phone-number.js

@@ -0,0 +1,251 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { getNestedValue } from "../../global/lib/get-nested-value";
+import { FormInputLabel } from "./components/form-input-label";
+import { FormErrorMessage } from "./components/form-error-message";
+import { FormInputPrefix } from "./components/form-input-prefix";
+const partKeyPrefix = 'form-input-';
+export class FormPhoneNumber {
+    constructor() {
+        this.type = 'text';
+        this.prefixWidth = 0;
+        this.onInputChange = (event) => {
+            const target = event.target;
+            this.validator.reset();
+            target.value = this.validator.input(target.value);
+        };
+    }
+    async componentWillLoad() {
+        this.form.subscribe(this.name, this);
+    }
+    async componentDidLoad() {
+        const prefix = this.el.getElementsByClassName('prefix')[0];
+        this.prefixWidth = prefix ? prefix.getBoundingClientRect().width : 0;
+        this.inputRef = this.el.getElementsByClassName(partKeyPrefix + this.name)[0];
+    }
+    async disconnectedCallback() {
+        this.form.unsubscribe(this.name);
+    }
+    reset(newValue) {
+        const value = newValue || this.defaultValue || '';
+        this.inputRef.value = value;
+        this.validator.reset();
+    }
+    render() {
+        const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
+        const [locale] = this.form.getFormLocale();
+        const part = partKeyPrefix + this.name;
+        const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
+        const placeholder = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.placeholder);
+        return (h(Host, { key: 'd730ff4945c78f1805a6f452323a8ef5a3e381ad' }, h("label", { key: 'ea35cff0161ba8d0959963ca2526e01e71929200', part: part, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: this.isLoading }) }, h(FormInputLabel, { key: 'f1edbc552a0d0960eb2114145283d6e54538dd80', isRequired: isRequired, label: label }), h("div", { key: '11f720d58c5a9d53c9e27d76b8cd0d3741bf2e76', dir: "ltr", part: "form-input-container", class: "form-input-container" }, h(FormInputPrefix, { key: '866e39aff453b91d4eb67f271e6c1398ff2b7525', direction: locale.direction, prefix: this.inputPrefix }), h("input", { key: 'b0362d372c5630272812cbc8831f323e71a98999', type: this.type, name: this.name, part: "form-input", onInput: this.onInputChange, defaultValue: this.defaultValue, disabled: disabled || this.isLoading, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [locale.direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style', part, {
+                'form-input-error-style': isError,
+            }) })), h(FormErrorMessage, { key: '3f7c42b74d27500a3820142c9a042545f6d568cc', isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+    }
+    static get is() { return "form-phone-number"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperId": {
+                "type": "string",
+                "attribute": "wrapper-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "attribute": "is-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "form": {
+                "type": "unknown",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
+                    "references": {
+                        "FormHook": {
+                            "location": "import",
+                            "path": "~features/form-hook/form-hook",
+                            "id": "src/features/form-hook/form-hook.ts::FormHook"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "inputPrefix": {
+                "type": "string",
+                "attribute": "input-prefix",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperClass": {
+                "type": "string",
+                "attribute": "wrapper-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "attribute": "default-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "validator": {
+                "type": "unknown",
+                "attribute": "validator",
+                "mutable": false,
+                "complexType": {
+                    "original": "AsYouType",
+                    "resolved": "AsYouType",
+                    "references": {
+                        "AsYouType": {
+                            "location": "import",
+                            "path": "libphonenumber-js",
+                            "id": "node_modules::AsYouType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "prefixWidth": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}