adp-web-components 0.0.95 → 0.0.97

package/dist/collection/components/form-elements/form-select.js

@@ -4,31 +4,32 @@
  */
 import { Host, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
+import { getNestedValue } from "../../global/lib/get-nested-value";
 import Loader from "~assets/loader.svg";
-import formsSchema from "../../locales/forms/type";
-import generalSchema from "../../locales/general/type";
-import formWrapperSchema from "../../locales/forms/wrapper-type";
-import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
+import { TickIcon } from "../../global/assets/tick-icon";
+import { ArrowUpIcon } from "../../global/assets/arrow-up-icon";
+import { FormInputLabel } from "./components/form-input-label";
+import { FormErrorMessage } from "./components/form-error-message";
+import { AddIcon } from "../../global/assets/add-icon";
+const partKeyPrefix = 'form-select-';
 export class FormSelect {
     constructor() {
+        this.clearable = false;
         this.language = 'en';
-        this.placeholder = 'Select an option';
+        this.searchValue = '';
         this.isOpen = false;
         this.selectedValue = '';
         this.openUpwards = false;
         this.options = [];
         this.fetchingErrorMessage = null;
-        this.sharedLocales = sharedLocalesSchema.getDefault();
-        this.locale = formWrapperSchema.getDefault();
-        this.generalLocales = generalSchema.getDefault();
         this.toggleDropdown = () => {
-            if (this.isOpen)
+            if (this.isOpen && !this.searchable)
                 this.isOpen = false;
             else
                 this.adjustDropdownPosition();
         };
         this.reset = (newValue = '') => {
-            const defaultOption = this.options.find(opt => opt.value === newValue) || { value: newValue, label: '' };
+            const defaultOption = this.options.find(opt => opt.value === newValue || opt.value === this.defaultValue) || { value: newValue, label: '' };
             this.handleSelection(defaultOption);
         };
         this.closeDropdown = (event) => {
@@ -36,29 +37,43 @@ export class FormSelect {
                 this.isOpen = false;
             }
         };
+        this.onSearchInput = (event) => {
+            const target = event.target;
+            this.searchValue = target.value;
+            this.selectedValue = '';
+        };
+        this.clearInput = () => {
+            this.searchValue = '';
+            this.selectedValue = '';
+            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
+            selectButton.focus();
+            if (!this.isOpen)
+                this.adjustDropdownPosition();
+        };
+    }
+    async changeLanguage() {
+        this.fetch();
     }
-    async changeLanguage(newLanguage) {
-        const currentFormSchema = formWrapperSchema.fields[this.formLocaleName];
-        const localeResponses = await Promise.all([
-            getLocaleLanguage(newLanguage, 'forms*', formsSchema),
-            getSharedLocal(newLanguage),
-            getLocaleLanguage(newLanguage, ('forms.' + this.formLocaleName), currentFormSchema),
-            getLocaleLanguage(newLanguage, 'general', generalSchema),
-        ]);
-        Object.assign(this.locale, localeResponses[0]);
-        Object.assign(this.locale[this.formLocaleName], localeResponses[2]);
-        this.sharedLocales = localeResponses[1];
-        this.generalLocales = localeResponses[3];
+    async fetchListener() {
         this.fetch();
     }
+    async resetListener() {
+        this.reset();
+    }
     async componentWillLoad() {
         this.form.subscribe(this.name, this);
-        await this.changeLanguage(this.language);
+        this.selectedValue = this.defaultValue;
+    }
+    async disconnectedCallback() {
+        this.abortController.abort();
+        this.form.unsubscribe(this.name);
+        document.removeEventListener('click', this.closeDropdown);
+        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
     }
     adjustDropdownPosition() {
         requestAnimationFrame(() => {
-            const selectButton = this.el.getElementsByClassName('select-button')[0];
-            const selectContainer = this.el.getElementsByClassName('select-container')[0];
+            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
+            const selectContainer = this.el.getElementsByClassName('form-select-container')[0];
             const rect = selectButton.getBoundingClientRect();
             const spaceBelow = window.innerHeight - rect.bottom - 20; // 20 is padding
             this.openUpwards = spaceBelow < selectContainer.getBoundingClientRect().height;
@@ -69,6 +84,7 @@ export class FormSelect {
     }
     handleSelection(option) {
         this.selectedValue = option.value;
+        this.searchValue = option.label;
         this.isOpen = false;
     }
     handleKeyDown(event) {
@@ -80,13 +96,18 @@ export class FormSelect {
     }
     async fetch() {
         try {
-            this.isLoading = true;
+            this.isFetching = true;
             if (this.abortController)
                 this.abortController.abort();
             this.abortController = new AbortController();
-            const options = await this.fetcher(this.language, this.abortController.signal);
+            const options = await this.fetcher({ language: this.language, signal: this.abortController.signal, locale: this.form.getFormLocale()[0] });
             this.fetchingErrorMessage = null;
             this.options = options;
+            if (this.defaultValue) {
+                const defaultOption = options.find(option => option.value === this.defaultValue);
+                if (defaultOption)
+                    this.handleSelection(defaultOption);
+            }
         }
         catch (error) {
             if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
@@ -96,48 +117,45 @@ export class FormSelect {
             this.fetchingErrorMessage = error.message;
         }
         finally {
-            this.isLoading = false;
+            this.isFetching = false;
         }
     }
     async componentDidLoad() {
+        this.fetch();
         document.addEventListener('click', this.closeDropdown);
         document.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
-    async disconnectedCallback() {
-        this.abortController.abort();
-        document.removeEventListener('click', this.closeDropdown);
-        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
-    }
     render() {
-        const texts = this.locale[this.formLocaleName];
+        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) || 'Select an option';
         const selectedItem = this.options.find(item => this.selectedValue === item.value);
         if (!selectedItem) {
             this.selectedValue = '';
         }
-        return (h(Host, { key: 'a51d8edbae98b93937aa123afb350c90849a74a3' }, h("label", { key: '6e6c5e373c92e5cbdf331921aae670cb95cffb60', id: this.wrapperId, class: cn('relative w-full inline-flex flex-col', this.wrapperClass) }, this.label && (h("div", { key: 'ba2a636dec1f76b22126ba260045ea3c7d818978', class: "mb-[4px]" }, texts[this.label] || this.label, this.isRequired && h("span", { key: '733f7ae109d7d596fa14317487480e3ba5eb40eb', class: "ms-0.5 text-red-600" }, "*"))), h("form-shadow-input", { key: '0b2904398b56fe598f42f1e9a16388f817052e8e', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '1449a48d15b13f057126ecf3f1e15792502fc05d', class: "relative" }, h("button", { key: 'a710613e81d2417d86c4869dca09d5b0a3bca390', type: "button", name: this.name, disabled: this.disabled, onClick: this.toggleDropdown, class: cn('select-button enabled:focus:border-slate-600 enabled:focus:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)] border bg-white h-[38px] flex justify-between overflow-hidden disabled:opacity-75 flex-1 py-[6px] px-[12px] transition-all duration-300 rounded-md outline-none w-full', {
-                'text-[#9CA3AF]': !selectedItem,
-                '!border-red-500 focus:shadow-[0_0_0_0.2rem_rgba(239,68,68,0.25)]': this.isError,
-                'enabled:border-slate-600 enabled:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)]': this.isOpen,
-            }) }, selectedItem ? selectedItem.label : h("span", null, texts[this.placeholder]), h("svg", { key: '3bf06d5be019254f5abf248a67cce43ca751f006', fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", class: cn('select-arrow size-6 transition duration-300', { 'rotate-180': this.isOpen }) }, h("path", { key: 'e62171a5723125547dc78b0f3522c19320374eb6', d: "m6 9 6 6 6-6" }))), h("div", { key: 'c87da76ee00bd20fc66aeb8f825ee51e20af9432', class: cn('select-container z-[10] flex flex-col pointer-events-none absolute w-full bg-white border rounded-md shadow opacity-0 transition-opacity duration-300 max-h-[250px] overflow-auto', {
-                'opacity-100 pointer-events-auto': this.isOpen,
-                'top-0 -mt-[8px] -translate-y-full': this.openUpwards,
-                'top-0 mt-[8px] translate-y-[38px]': !this.openUpwards,
-            }) }, !!this.options.length &&
-            this.options.map(option => (h("button", { type: "button", onClick: () => this.handleSelection(option), class: cn('select-option flex justify-between px-4 py-2 hover:bg-slate-100 transition-colors duration-300', {
-                    'bg-slate-200': this.selectedValue === option.value,
-                }) }, h("div", null, option.label), h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", class: cn('size-5 opacity-0 transition duration-300', { 'opacity-100': this.selectedValue === option.value }) }, h("path", { d: "M20 6 9 17l-5-5" }))))), !this.options.length && (h("div", { key: 'b59d35615660e485cc31e4b53f7a9d79d5743e96', class: cn('select-empty-container h-[100px] flex items-center justify-center', { 'text-red-500': this.fetchingErrorMessage }) }, this.fetchingErrorMessage && (this.sharedLocales.errors[this.fetchingErrorMessage] || this.sharedLocales.errors.wildCard), !this.fetchingErrorMessage && (this.isLoading ? h("img", { class: "spin-slow size-[22px]", src: Loader }) : this.generalLocales.noSelectOptions))))), h("div", { key: 'ec8cfe445586681f7a622f12cd23f2a25bc16492', class: cn('absolute pt-[1px] -z-10 text-[12px] text-red-500 opacity-0 -translate-y-[4px] bottom-0 transition duration-300', {
-                'translate-y-full error-message opacity-100': this.isError,
-            }) }, texts[this.errorMessage] || this.locale.inputValueIsIncorrect || this.errorMessage))));
+        const filteredOptions = selectedItem ? this.options : this.options.filter(option => option.label.toLowerCase().includes(this.searchValue.toLowerCase()));
+        const disableInput = disabled || this.isDisabled || this.isLoading;
+        return (h(Host, { key: '6fa98392a319ea0169ac1e8773806956f4275b87' }, h("label", { key: 'fe63bec4a374574416033bf78300df887d115d40', part: part, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { key: '5d157fedfd0eb762592383ef87c0b28ad9fc879c', isRequired: isRequired || this.isRequired, label: label }), h("form-shadow-input", { key: '4829d692dd3978e62d39676d09074def6ff03ca6', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: 'a41b2b1e8545f4f6cfe1216aa1f368447d62e9a1', part: "form-input-container", class: cn('form-input-container', { open: this.isOpen, disableInput }) }, h("input", { key: 'd718cf376bed6ce8a06d2cbeb49c29602db07adb', type: "text", disabled: disableInput, part: "form-input-select", value: this.searchable ? this.searchValue : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || '', readOnly: !this.searchable, onInput: this.onSearchInput, onClick: this.toggleDropdown, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
+                'form-input-error-style': isError,
+            }) }), h("div", { key: 'b728ce3e4f55b127a3f0316ab892032cb81a02a0', part: "form-input-select-icon-container", class: "form-input-select-icon-container" }, (selectedItem || this.searchValue) && this.clearable ? (h(AddIcon, { onClick: this.clearInput, class: "form-input-select-icon cross" })) : (h(ArrowUpIcon, { class: "form-input-select-icon arrow" }))), h("div", { key: 'eb842270e31e02aa63b2657845ccca7b22d356a7', part: "form-select-container", class: cn('form-select-container', {
+                upwards: this.openUpwards,
+                downwards: !this.openUpwards,
+            }) }, !!filteredOptions.length &&
+            filteredOptions.map(option => (h("button", { type: "button", part: "form-select-option", onClick: () => this.handleSelection(option), class: cn('form-select-option', {
+                    selected: this.selectedValue === option.value,
+                }) }, h("div", { part: "form-select-option-label", class: "form-select-option-label" }, option.label), h(TickIcon, { class: "form-select-option-tick" })))), !filteredOptions.length && (h("div", { key: '43d915e82ab2524553be6e13a37dde74c89a7557', part: "form-select-empty-container", class: cn('form-select-empty-container', { error: this.fetchingErrorMessage }) }, this.fetchingErrorMessage && (getNestedValue(locale, this.fetchingErrorMessage) || locale.errors.wildCard), !this.fetchingErrorMessage && (this.isFetching ? h("img", { class: "form-select-spinner", src: Loader }) : locale.noSelectOptions))))), h(FormErrorMessage, { key: 'acfa9ea6fc9a8bc03199ee17d19037eb545e26e3', isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-select"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-select.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-select.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get properties() {
@@ -161,13 +179,13 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "label": {
-                "type": "string",
-                "attribute": "label",
+            "resetKey": {
+                "type": "any",
+                "attribute": "reset-key",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -180,13 +198,13 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "isError": {
-                "type": "boolean",
-                "attribute": "is-error",
+            "fetcherKey": {
+                "type": "any",
+                "attribute": "fetcher-key",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -218,9 +236,29 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "disabled": {
+            "clearable": {
                 "type": "boolean",
-                "attribute": "disabled",
+                "attribute": "clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "attribute": "is-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -247,8 +285,8 @@ export class FormSelect {
                     "references": {
                         "FormHook": {
                             "location": "import",
-                            "path": "~lib/form-hook",
-                            "id": "src/global/lib/form-hook.ts::FormHook"
+                            "path": "~features/form-hook/form-hook",
+                            "id": "src/features/form-hook/form-hook.ts::FormHook"
                         }
                     }
                 },
@@ -261,6 +299,25 @@ export class FormSelect {
                 "getter": false,
                 "setter": false
             },
+            "searchable": {
+                "type": "boolean",
+                "attribute": "searchable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "isRequired": {
                 "type": "boolean",
                 "attribute": "is-required",
@@ -280,13 +337,13 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "errorMessage": {
-                "type": "string",
-                "attribute": "error-message",
+            "isDisabled": {
+                "type": "boolean",
+                "attribute": "is-disabled",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -318,20 +375,14 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "fetcher": {
-                "type": "unknown",
-                "attribute": "fetcher",
+            "defaultValue": {
+                "type": "string",
+                "attribute": "default-value",
                 "mutable": false,
                 "complexType": {
-                    "original": "FormSelectFetcher",
-                    "resolved": "(language: string, signal: AbortSignal) => Promise<FormSelectItem[]>",
-                    "references": {
-                        "FormSelectFetcher": {
-                            "location": "import",
-                            "path": "~types/forms",
-                            "id": "src/global/types/forms.ts::FormSelectFetcher"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -340,7 +391,8 @@ export class FormSelect {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false
             },
             "language": {
                 "type": "string",
@@ -368,18 +420,18 @@ export class FormSelect {
                 "reflect": false,
                 "defaultValue": "'en'"
             },
-            "formLocaleName": {
-                "type": "string",
-                "attribute": "form-locale-name",
+            "fetcher": {
+                "type": "unknown",
+                "attribute": "fetcher",
                 "mutable": false,
                 "complexType": {
-                    "original": "LocaleFormKeys",
-                    "resolved": "\"contactUs\" | \"inputValueIsIncorrect\" | \"reCaptchaIsRequired\"",
+                    "original": "FormSelectFetcher<any>",
+                    "resolved": "(props: FormSelectFetcherProps<any>) => Promise<FormSelectItem[]>",
                     "references": {
-                        "LocaleFormKeys": {
+                        "FormSelectFetcher": {
                             "location": "import",
-                            "path": "~types/forms",
-                            "id": "src/global/types/forms.ts::LocaleFormKeys"
+                            "path": "~features/form-hook/",
+                            "id": "src/features/form-hook/index.ts::FormSelectFetcher"
                         }
                     }
                 },
@@ -390,42 +442,19 @@ export class FormSelect {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "placeholder": {
-                "type": "string",
-                "attribute": "placeholder",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'Select an option'"
+                "setter": false
             }
         };
     }
     static get states() {
         return {
-            "isLoading": {},
+            "searchValue": {},
+            "isFetching": {},
             "isOpen": {},
             "selectedValue": {},
             "openUpwards": {},
             "options": {},
-            "fetchingErrorMessage": {},
-            "sharedLocales": {},
-            "locale": {},
-            "generalLocales": {}
+            "fetchingErrorMessage": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -433,6 +462,12 @@ export class FormSelect {
         return [{
                 "propName": "language",
                 "methodName": "changeLanguage"
+            }, {
+                "propName": "fetcherKey",
+                "methodName": "fetchListener"
+            }, {
+                "propName": "resetKey",
+                "methodName": "resetListener"
             }];
     }
 }

package/dist/collection/components/form-elements/form-shadow-input.js

@@ -8,20 +8,22 @@ export class FormInput {
         this.form.validateForm(newName, this.value);
     }
     async handleValueChange(newValue) {
+        if (this.form.haltValidation)
+            return;
         this.form.validateForm(this.name, newValue);
     }
     render() {
-        return h("input", { key: '4f247b45d7d81a2b7c66584e4b9a1ba9bf6aa51d', name: this.name, type: "string", hidden: true, value: this.value });
+        return h("input", { key: '86f6a688de8392aade82e02d0a07b4170e5cc8e1', hidden: true, name: this.name, type: "string", value: this.value });
     }
     static get is() { return "form-shadow-input"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-shadow-input.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-shadow-input.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get properties() {
@@ -74,8 +76,8 @@ export class FormInput {
                     "references": {
                         "FormHook": {
                             "location": "import",
-                            "path": "~lib/form-hook",
-                            "id": "src/global/lib/form-hook.ts::FormHook"
+                            "path": "~features/form-hook/form-hook",
+                            "id": "src/features/form-hook/form-hook.ts::FormHook"
                         }
                     }
                 },

package/dist/collection/components/form-elements/form-structure-error.js

@@ -16,17 +16,17 @@ export class FormStructureError {
         this.sharedLocales = await getSharedLocal(newLanguage);
     }
     render() {
-        return (h(Host, { key: 'd0c604a9b51cf3a85531b7227972d1b43951c39b' }, h("div", { key: 'ab4d70d6878b7222ed0d7d346d6cafb919ded09c', dir: this.sharedLocales.direction, class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: '67c236fd306b2d9ba869b29153bc5149bd6678a1', class: "px-[16px] py-[8px] border text-[#58151c] border-[#f2aeb5] bg-[#f7d7d8] text-[20px] rounded-[8px] w-fit mx-auto" }, this.sharedLocales.errors.wrongFormStructure))));
+        return (h(Host, { key: '4e236b9d36994d09687a147bb7540b3a3c19f700' }, h("div", { key: 'f440dc65ac3682c4671cac988c64514431b3a136', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: '0c13f2c43b4bb5583024f5e6b1077a6051d64e57', part: "form-structure-error-content", class: "form-structure-error-content" }, this.sharedLocales.errors.wrongFormStructure))));
     }
     static get is() { return "form-structure-error"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-structure-error.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-structure-error.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get properties() {