adp-web-components 0.0.95 → 0.0.97

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

@@ -2,101 +2,55 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { Fragment, Host, h } from "@stencil/core";
-import cn from "../../global/lib/cn";
-import { isValidStructure } from "../../global/lib/validate-form-structure";
+import { Host, h } from "@stencil/core";
 import generalSchema from "../../locales/general/type";
 import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
+import { renderStructure } from "../../features/form-hook/index";
 export class FormStructure {
     constructor() {
-        this.themes = {};
-        this.renderControl = {};
+        // ====== Start Localization
+        this.formLocale = {};
         this.language = 'en';
-        this.structure = '["submit.Submit"]';
-        this.showSuccess = false;
-        this.structureObject = null;
-        this.sharedLocales = sharedLocalesSchema.getDefault();
-        this.generalLocale = generalSchema.getDefault();
+        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, generalSchema.getDefault());
     }
     async componentWillLoad() {
-        this.form.setSuccessAnimation(() => {
-            this.showSuccess = true;
-            setTimeout(() => {
-                this.showSuccess = false;
-            }, 4000);
-        });
-        let structure;
-        if (this.theme && this.themes[this.theme])
-            structure = this.themes[this.theme];
-        else
-            structure = this.structure;
-        await Promise.all([this.structureValidation(structure), this.changeLanguage(this.language)]);
-    }
-    async onStructureChange(newStructure) {
-        await this.structureValidation(newStructure);
-    }
-    async structureValidation(structureString) {
-        this.structureObject = isValidStructure(structureString);
+        this.form.formStructure = this;
+        await this.changeLanguage(this.language);
     }
     async changeLanguage(newLanguage) {
-        const localeResponses = await Promise.all([getLocaleLanguage(newLanguage, 'general', generalSchema), getSharedLocal(newLanguage)]);
-        this.generalLocale = localeResponses[0];
-        this.sharedLocales = localeResponses[1];
-    }
-    renderLoop(structureElement) {
-        if (structureElement.element === '')
-            return h(Fragment, null, structureElement.children.map(child => this.renderLoop(child)));
-        if (structureElement.element === 'div')
-            return (h("div", { class: structureElement.class, id: structureElement.id }, structureElement.children.map(child => this.renderLoop(child))));
-        if (structureElement.element === 'slot')
-            return h("slot", null);
-        if (this.formElementMapper[structureElement.element])
-            return this.formElementMapper[structureElement.element]({ form: this.form, isLoading: this.isLoading, structureElement, language: this.language });
-        return false;
+        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'general', generalSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
     }
     render() {
-        if (this.structureObject === null)
+        const [locale] = this.form.getFormLocale();
+        const generalProps = {
+            form: this.form,
+            isLoading: this.isLoading,
+            language: this.language,
+            locale: this.formLocale,
+            props: { isLoading: this.isLoading, form: this.form },
+        };
+        if (!this.structure)
             return h("form-structure-error", { language: this.language });
         const { formController, resetFormErrorMessage } = this.form;
-        return (h(Host, null, h("form", Object.assign({ class: "relative overflow-hidden", dir: this.sharedLocales.direction }, formController), h("div", { class: cn('absolute -translate-x-full transition duration-1000 flex items-center justify-center size-full opacity-0', {
-                'opacity-100 translate-x-0': this.showSuccess,
-            }) }, h("div", { class: "flex flex-col gap-[16px] items-center" }, h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-[70px] stroke-green-700" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "m9 12 2 2 4-4" })), h("div", { class: "text-[20px]" }, this.generalLocale.formSubmittedSuccessfully))), h("form-dialog", { dialogClosed: resetFormErrorMessage, language: this.language, errorMessage: this.errorMessage }), h("div", { class: cn('transition duration-1000', { 'translate-x-full opacity-0': this.showSuccess }) }, this.renderLoop(this.structureObject)))));
+        return (h(Host, null, h("form", Object.assign({ class: "relative", dir: this.locale.sharedLocales.direction }, formController), h("form-dialog", { dialogClosed: resetFormErrorMessage, isError: !!this.errorMessage, closeText: locale.close, form: this.form, message: this.errorMessage }, h("div", { class: "form-success-container" }, h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-[70px] stroke-green-700" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "m9 12 2 2 4-4" })), this.successMessage)), h("div", null, renderStructure(this.structure, this.formElementMapper, generalProps)))));
     }
     static get is() { return "form-structure"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-structure.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-structure.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get properties() {
         return {
-            "theme": {
-                "type": "string",
-                "attribute": "theme",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "themes": {
+            "formLocale": {
                 "type": "any",
-                "attribute": "themes",
+                "attribute": "form-locale",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -111,17 +65,23 @@ export class FormStructure {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "{}"
             },
-            "renderControl": {
-                "type": "unknown",
-                "attribute": "render-control",
+            "language": {
+                "type": "string",
+                "attribute": "language",
                 "mutable": false,
                 "complexType": {
-                    "original": "{}",
-                    "resolved": "{}",
-                    "references": {}
+                    "original": "LanguageKeys",
+                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
+                    "references": {
+                        "LanguageKeys": {
+                            "location": "import",
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -131,7 +91,8 @@ export class FormStructure {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{}"
+                "reflect": true,
+                "defaultValue": "'en'"
             },
             "isLoading": {
                 "type": "boolean",
@@ -162,8 +123,8 @@ export class FormStructure {
                     "references": {
                         "FormHook": {
                             "location": "import",
-                            "path": "~lib/form-hook",
-                            "id": "src/global/lib/form-hook.ts::FormHook"
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormHook"
                         }
                     }
                 },
@@ -195,20 +156,14 @@ export class FormStructure {
                 "setter": false,
                 "reflect": false
             },
-            "language": {
+            "successMessage": {
                 "type": "string",
-                "attribute": "language",
+                "attribute": "success-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "LanguageKeys",
-                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
-                    "references": {
-                        "LanguageKeys": {
-                            "location": "import",
-                            "path": "~features/multi-lingual",
-                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -218,17 +173,22 @@ export class FormStructure {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "'en'"
+                "reflect": false
             },
             "structure": {
-                "type": "string",
+                "type": "unknown",
                 "attribute": "structure",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "FormElementStructure<any>",
+                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; children?: any[]; } & { tag: string; name?: any; } | { data?: Record<string, any>; } & { id?: string; class?: string; children?: any[]; } & { tag?: string; name: any; }",
+                    "references": {
+                        "FormElementStructure": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormElementStructure"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -237,22 +197,20 @@ export class FormStructure {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'[\"submit.Submit\"]'"
+                "setter": false
             },
             "formElementMapper": {
                 "type": "unknown",
                 "attribute": "form-element-mapper",
                 "mutable": false,
                 "complexType": {
-                    "original": "FormElementMapper<any>",
-                    "resolved": "{ [x: string]: FormElementMapperFunction; } & { submit: FormElementMapperFunction; }",
+                    "original": "FormElementMapper<any, any>",
+                    "resolved": "{ [x: string]: FormElementMapperFunction<any>; } & {}",
                     "references": {
                         "FormElementMapper": {
                             "location": "import",
-                            "path": "~types/forms",
-                            "id": "src/global/types/forms.ts::FormElementMapper"
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormElementMapper"
                         }
                     }
                 },
@@ -269,17 +227,12 @@ export class FormStructure {
     }
     static get states() {
         return {
-            "showSuccess": {},
-            "structureObject": {},
-            "sharedLocales": {},
-            "generalLocale": {}
+            "locale": {},
+            "formContent": {}
         };
     }
     static get watchers() {
         return [{
-                "propName": "structure",
-                "methodName": "onStructureChange"
-            }, {
                 "propName": "language",
                 "methodName": "changeLanguage"
             }];

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

@@ -4,40 +4,75 @@
  */
 import { h } from "@stencil/core";
 import cn from "../../global/lib/cn";
-import { getLocaleLanguage } from "../../features/multi-lingual/get-local-language";
+import { getNestedValue } from "../../global/lib/get-nested-value";
 import Loader from "~assets/white-loader.svg";
-import generalSchema from "../../locales/general/type";
+const buttonSubscriberKey = 'submit-button';
 export class FormSubmit {
-    constructor() {
-        this.params = {};
-        this.language = 'en';
-        this.generalLocale = generalSchema.getDefault();
-    }
     async componentWillLoad() {
-        await this.changeLanguage(this.language);
+        this.form.subscribe(buttonSubscriberKey, this);
     }
-    async changeLanguage(newLanguage) {
-        this.generalLocale = await getLocaleLanguage(newLanguage, 'general', generalSchema);
+    async disconnectedCallback() {
+        this.form.unsubscribe(buttonSubscriberKey);
     }
+    reset() { }
     render() {
-        var _a, _b;
-        return (h("button", Object.assign({ key: '965577fe800f9aa3a1e3c7b784609ddeb1553b08', type: "submit" }, this.params, { disabled: this.isLoading, id: this.structureElement.id, class: cn('h-[38px] relative overflow-hidden px-4 enabled:hover:bg-slate-600 transition-colors duration-300 bg-slate-700 enabled:active:bg-slate-800 rounded text-white flex items-center', this.structureElement.class, {
-                'bg-slate-600': this.isLoading,
-            }) }), h("div", { key: 'd381e6820070d4eec74e1a0c756907d1fefcd391', class: "opacity-0" }, this.generalLocale[(_a = this.structureElement.class) === null || _a === void 0 ? void 0 : _a.toLowerCase()] || this.structureElement.class), h("div", { key: '5414110e972725bcc4de42f729e5421690d36142', class: cn('absolute size-full top-0 left-0 flex items-center justify-center transition !duration-1000', { 'translate-y-full': this.isLoading }) }, this.generalLocale[(_b = this.structureElement.class) === null || _b === void 0 ? void 0 : _b.toLowerCase()] || this.structureElement.class), h("div", { key: 'a55712d90bae88d4c46a441e84b3c0dc39d86742', class: cn('absolute flex justify-center items-center top-0 left-0 size-full transition !duration-1000 -translate-y-full', { 'translate-y-0': this.isLoading }) }, h("img", { key: 'c74c8bcf121755f5228fa678a630814d2fc0b973', class: "spin-slow size-[22px]", src: Loader }))));
+        const [locale] = this.form.getFormLocale();
+        const submitText = getNestedValue(locale, this.submitTextKey) || getNestedValue(locale, 'submit') || 'Submit';
+        return (h("button", { key: 'd4cd46824e056ee273e2603d2e7aca07395bcfeb', type: "submit", part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
+                loading: this.isLoading,
+            }) }, h("div", { key: '4f800ac8a2c46ef15032c4e5606ed09b4e5a1d78', class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: '7d28df2771a318b10227fb8a56e6efa6ccac2782', class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: 'a5d191c5014dee9d8817e323c1f3592ff8fa7abe', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: 'dd4db8c23423704e5a7b8c422955a695362838bf', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
     }
     static get is() { return "form-submit"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-submit.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-submit.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get properties() {
         return {
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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",
@@ -57,18 +92,18 @@ export class FormSubmit {
                 "setter": false,
                 "reflect": false
             },
-            "params": {
+            "form": {
                 "type": "unknown",
-                "attribute": "params",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
-                    "original": "FormFieldParams",
-                    "resolved": "{ [x: string]: Params; }",
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
                     "references": {
-                        "FormFieldParams": {
+                        "FormHook": {
                             "location": "import",
-                            "path": "~types/forms",
-                            "id": "src/global/types/forms.ts::FormFieldParams"
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormHook"
                         }
                     }
                 },
@@ -79,23 +114,16 @@ export class FormSubmit {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
+                "setter": false
             },
-            "language": {
+            "wrapperClass": {
                 "type": "string",
-                "attribute": "language",
+                "attribute": "wrapper-class",
                 "mutable": false,
                 "complexType": {
-                    "original": "LanguageKeys",
-                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
-                    "references": {
-                        "LanguageKeys": {
-                            "location": "import",
-                            "path": "~features/multi-lingual/types",
-                            "id": "src/features/multi-lingual/types.ts::LanguageKeys"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -105,44 +133,27 @@ export class FormSubmit {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "'en'"
+                "reflect": false
             },
-            "structureElement": {
-                "type": "unknown",
-                "attribute": "structure-element",
+            "submitTextKey": {
+                "type": "string",
+                "attribute": "submit-text-key",
                 "mutable": false,
                 "complexType": {
-                    "original": "StructureObject",
-                    "resolved": "{ id: string; class: string; children: FormElementStructure[]; element: string; }",
-                    "references": {
-                        "StructureObject": {
-                            "location": "import",
-                            "path": "~types/forms",
-                            "id": "src/global/types/forms.ts::StructureObject"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "generalLocale": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "language",
-                "methodName": "changeLanguage"
-            }];
-    }
 }