@unidy.io/sdk 1.1.8 → 1.1.10

package/dist/collection/profile/components/raw-field/raw-field.js

@@ -0,0 +1,697 @@
+import { h } from "@stencil/core";
+import { UnidyComponent } from "../../../logger";
+import { state as profileState } from "../../store/profile-store";
+import { Input } from "../raw-input-fields/Input";
+import { MultiSelect } from "../raw-input-fields/MultiSelect";
+import { RadioGroup } from "../raw-input-fields/RadioGroup";
+import { Select } from "../raw-input-fields/Select";
+import { Textarea } from "../raw-input-fields/Textarea";
+export class RawField extends UnidyComponent {
+    constructor() {
+        super();
+    }
+    required = false;
+    readonlyPlaceholder = "";
+    countryCodeDisplayOption = "label";
+    invalidPhoneMessage = "Please enter a valid phone number.";
+    componentClassName;
+    field;
+    value;
+    checked;
+    disabled;
+    tooltip;
+    type;
+    placeholder;
+    options;
+    emptyOption = false;
+    attrName;
+    radioOptions;
+    multiSelectOptions;
+    specificPartKey;
+    ariaDescribedBy = "";
+    pattern;
+    patternErrorMessage;
+    validationFunc;
+    el;
+    selected;
+    readStore(fieldName) {
+        if (!fieldName)
+            return;
+        const data = profileState.data;
+        if (!data)
+            return;
+        let field;
+        if (fieldName.startsWith("custom_attributes.")) {
+            const key = fieldName.replace("custom_attributes.", "");
+            field = data.custom_attributes?.[key];
+        }
+        else {
+            field = data[fieldName];
+        }
+        if (!field)
+            return;
+        if (field.radio_options) {
+            const checkedOption = field.radio_options.find((option) => option.checked);
+            const checkedValue = checkedOption?.value ?? field.value ?? "";
+            return String(checkedValue);
+        }
+        if (field.type === "checkbox") {
+            return Array.isArray(field.value) ? field.value : [];
+        }
+        return field.value;
+    }
+    writeStore(fieldName, value) {
+        if (!fieldName)
+            return;
+        const data = profileState.data;
+        if (!data)
+            return;
+        const isCustomAttribute = fieldName.startsWith("custom_attributes.");
+        const key = isCustomAttribute ? fieldName.replace("custom_attributes.", "") : fieldName;
+        if (isCustomAttribute) {
+            const field = data.custom_attributes?.[key];
+            profileState.data = {
+                ...data,
+                custom_attributes: {
+                    ...data.custom_attributes,
+                    [key]: { ...field, value },
+                },
+            };
+        }
+        else {
+            const field = data[key];
+            profileState.data = { ...data, [key]: { ...field, value } };
+        }
+    }
+    runExternalValidator(value) {
+        if (this.validationFunc) {
+            try {
+                return this.validationFunc(value);
+            }
+            catch (e) {
+                this.logger.error("External validator (validationFunc) threw an error:", e);
+                return null;
+            }
+        }
+    }
+    validateValue(value) {
+        // TODO: We should validate this when the component is loading.
+        if (this.required) {
+            const empty = value === undefined || value === null || value === "";
+            if (empty) {
+                return { valid: false, message: "This field is required." };
+            }
+        }
+        if (this.pattern && typeof value === "string") {
+            const regex = new RegExp(this.pattern);
+            if (!regex.test(value)) {
+                return { valid: false, message: this.patternErrorMessage || "Invalid format." };
+            }
+        }
+        const externalResult = this.runExternalValidator(value);
+        if (externalResult && !externalResult.valid) {
+            return { valid: false, message: externalResult.message || "Invalid input." };
+        }
+        if (this.type === "tel") {
+            const phonePattern = /^(?=.{4,13}$)(\+\d+|\d+)$/;
+            if (typeof value === "string" && value !== "" && !phonePattern.test(value)) {
+                return { valid: false, message: this.invalidPhoneMessage };
+            }
+        }
+        return { valid: true, message: "" };
+    }
+    getNormalizedOptions() {
+        if (Array.isArray(this.options))
+            return this.options;
+        // unidy-raw-field select-options prop can be a JSON string
+        if (typeof this.options === "string")
+            return JSON.parse(this.options);
+        return [];
+    }
+    countryIcon(countryCode, placeholder = "➖") {
+        if (!/^[A-Z]{2}$/.test(countryCode)) {
+            return placeholder;
+        }
+        return Array.from(countryCode)
+            .map((char) => String.fromCodePoint(0x1f1e6 + (char.charCodeAt(0) - "A".charCodeAt(0))))
+            .join("");
+    }
+    onMultiToggle = (optValue, checked) => {
+        const currentValues = Array.isArray(this.selected) ? this.selected : [];
+        let updatedValues;
+        if (checked) {
+            updatedValues = currentValues.includes(optValue) ? currentValues : [...currentValues, optValue];
+        }
+        else {
+            updatedValues = currentValues.filter((v) => v !== optValue);
+        }
+        this.selected = updatedValues;
+        // TODO: validate multiselect if needed
+        this.writeStore(this.field, updatedValues);
+    };
+    onBlurFieldValidation = (e) => {
+        const input = e.target;
+        const val = input.value;
+        const result = this.validateValue(val);
+        const newErrors = { ...profileState.errors };
+        if (result.valid) {
+            delete newErrors[this.field];
+        }
+        else {
+            newErrors[this.field] = result.message;
+        }
+        profileState.errors = newErrors;
+    };
+    onChangeFieldValidation = (newValue) => {
+        this.selected = newValue;
+        const result = this.validateValue(newValue);
+        const newErrors = { ...profileState.errors };
+        if (result.valid) {
+            delete newErrors[this.field];
+            this.writeStore(this.field, newValue);
+        }
+        else {
+            newErrors[this.field] = result.message;
+        }
+        profileState.errors = newErrors;
+    };
+    componentWillLoad() {
+        if (!this.field)
+            throw new Error('u-raw-field: "field" is required.');
+        if (!this.type)
+            throw new Error('u-raw-field: "type" is required.');
+        const allowed = new Set(["text", "email", "tel", "password", "number", "date", "radio", "textarea", "select", "checkbox"]);
+        if (!allowed.has(this.type)) {
+            this.type = "text";
+        }
+        const current = this.readStore(this.field);
+        const isType = this.type === "text" ||
+            this.type === "email" ||
+            this.type === "tel" ||
+            this.type === "password" ||
+            this.type === "number" ||
+            this.type === "date" ||
+            this.type === "textarea" ||
+            this.type === "select";
+        if (isType && (current === undefined || current === null) && typeof this.value === "string") {
+            this.writeStore(this.field, this.value);
+        }
+        this.selected = current;
+    }
+    componentDidRender() {
+        const errs = profileState.errors;
+        if (errs?.[this.field]) {
+            this.el.querySelector(`#${CSS.escape(this.field)}`)?.focus();
+        }
+    }
+    render() {
+        if (this.type === "radio") {
+            if (Array.isArray(this.radioOptions) && this.radioOptions.length) {
+                const checkedOptions = this.radioOptions.map((opt) => ({
+                    ...opt,
+                    checked: String(opt.value) === this.selected,
+                }));
+                return (h(RadioGroup, { name: this.field, disabled: this.disabled, title: this.tooltip, type: "radio", onChange: this.onChangeFieldValidation, options: checkedOptions, specificPartKey: this.specificPartKey, "aria-describedby": this.ariaDescribedBy, required: this.required }));
+            }
+            if (typeof this.value === "string") {
+                const currentValue = this.readStore(this.field);
+                const isChecked = currentValue != null && String(currentValue) === this.value;
+                return (h(RadioGroup, { name: this.field, value: this.value, checked: isChecked, disabled: this.disabled, title: this.tooltip, componentClassName: this.componentClassName, type: "radio", specificPartKey: this.specificPartKey, onChange: this.onChangeFieldValidation, "aria-describedby": this.ariaDescribedBy, required: this.required }));
+            }
+        }
+        if (this.type === "checkbox") {
+            if (Array.isArray(this.multiSelectOptions) && this.multiSelectOptions.length) {
+                const selected = Array.isArray(this.selected) ? this.selected : [];
+                return (h(MultiSelect, { value: selected, options: this.multiSelectOptions, disabled: this.disabled, title: this.tooltip, type: "checkbox", specificPartKey: this.specificPartKey, onToggle: this.onMultiToggle, "aria-describedby": this.ariaDescribedBy }));
+            }
+            if (this.value) {
+                const currentValue = this.readStore(this.field) ?? [];
+                const isChecked = currentValue?.includes(this.value);
+                return (h(MultiSelect, { id: `${this.field}-${this.value}`, name: this.field, value: this.value, checked: isChecked, disabled: this.disabled, title: this.tooltip, componentClassName: this.componentClassName, type: "checkbox", onToggle: (val, checked) => {
+                        const current = this.readStore(this.field);
+                        const updated = checked ? [...current, val] : current.filter((v) => v !== val);
+                        this.writeStore(this.field, updated);
+                    }, "aria-describedby": this.ariaDescribedBy }));
+            }
+        }
+        if (this.type === "select") {
+            const currentValue = this.readStore(this.field) ?? "";
+            const option = this.getNormalizedOptions();
+            return (h(Select, { id: this.field, name: this.field, value: currentValue, options: option, disabled: this.disabled, title: this.tooltip, emptyOption: this.emptyOption, onChange: this.onChangeFieldValidation, componentClassName: this.componentClassName, countryCodeDisplayOption: this.countryCodeDisplayOption, countryIcon: this.countryIcon, attr_name: this.attrName, specificPartKey: this.specificPartKey, "aria-describedby": this.ariaDescribedBy }));
+        }
+        if (this.type === "textarea") {
+            const currentValue = this.readStore(this.field) || "";
+            return (h(Textarea, { id: this.field, value: currentValue, required: this.required, disabled: this.disabled, title: this.tooltip, componentClassName: this.componentClassName, specificPartKey: this.specificPartKey, onChange: this.onChangeFieldValidation, onBlur: this.onBlurFieldValidation, "aria-describedby": this.ariaDescribedBy }));
+        }
+        const currentValue = this.readStore(this.field) || "";
+        return (h(Input, { id: this.field, value: currentValue, required: this.required, disabled: this.disabled, title: this.tooltip, type: this.type, componentClassName: this.componentClassName, placeholder: this.placeholder, specificPartKey: this.specificPartKey, onChange: this.onChangeFieldValidation, onBlur: this.onBlurFieldValidation, "aria-describedby": this.ariaDescribedBy }));
+    }
+    static get is() { return "u-raw-field"; }
+    static get properties() {
+        return {
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "readonlyPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly-placeholder",
+                "defaultValue": "\"\""
+            },
+            "countryCodeDisplayOption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"icon\" | \"label\"",
+                    "resolved": "\"icon\" | \"label\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country-code-display-option",
+                "defaultValue": "\"label\""
+            },
+            "invalidPhoneMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-phone-message",
+                "defaultValue": "\"Please enter a valid phone number.\""
+            },
+            "componentClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class-name"
+            },
+            "field": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Option[]",
+                    "resolved": "Option[] | string",
+                    "references": {
+                        "Option": {
+                            "location": "import",
+                            "path": "../raw-input-fields/Select",
+                            "id": "src/profile/components/raw-input-fields/Select.tsx::Option"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options"
+            },
+            "emptyOption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-option",
+                "defaultValue": "false"
+            },
+            "attrName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attr-name"
+            },
+            "radioOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioOption[]",
+                    "resolved": "RadioOption[]",
+                    "references": {
+                        "RadioOption": {
+                            "location": "import",
+                            "path": "../raw-input-fields/RadioGroup",
+                            "id": "src/profile/components/raw-input-fields/RadioGroup.tsx::RadioOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "multiSelectOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MultiSelectOption[]",
+                    "resolved": "MultiSelectOption[]",
+                    "references": {
+                        "MultiSelectOption": {
+                            "location": "import",
+                            "path": "../raw-input-fields/MultiSelect",
+                            "id": "src/profile/components/raw-input-fields/MultiSelect.tsx::MultiSelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "specificPartKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "specific-part-key"
+            },
+            "ariaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-described-by",
+                "defaultValue": "\"\""
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "patternErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern-error-message"
+            },
+            "validationFunc": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string | string[]) => { valid: boolean; message?: string }",
+                    "resolved": "(value: string | string[]) => { valid: boolean; message?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=raw-field.js.map