@unidy.io/sdk 1.1.1-alpha2 → 1.1.2

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

@@ -1,697 +0,0 @@
-import { h } from "@stencil/core";
-import { RadioGroup } from "../raw-input-fields/RadioGroup";
-import { Textarea } from "../raw-input-fields/Textarea";
-import { Input } from "../raw-input-fields/Input";
-import { state as profileState } from "../../store/profile-store";
-import { Select } from "../raw-input-fields/Select";
-import { MultiSelect } from "../raw-input-fields/MultiSelect";
-import { UnidyComponent } from "../../../logger";
-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