adp-web-components 0.0.95 → 0.0.97

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

@@ -0,0 +1,188 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { getNestedValue } from "../../global/lib/get-nested-value";
+import { FormErrorMessage } from "./components/form-error-message";
+export class FormSwitch {
+    constructor() {
+        this.type = 'text';
+    }
+    async componentWillLoad() {
+        this.form.subscribe(this.name, this);
+    }
+    async disconnectedCallback() {
+        this.form.unsubscribe(this.name);
+    }
+    async componentDidLoad() {
+        const element = this.el.getElementsByClassName('form-checkbox')[0];
+        this.inputRef = await element.getInputRef();
+    }
+    reset(newChecked) {
+        const checked = newChecked || this.defaultChecked || false;
+        this.inputRef.checked = checked;
+    }
+    render() {
+        const { disabled, meta, errorMessage, isError } = this.form.getInputState(this.name);
+        const [locale] = this.form.getFormLocale();
+        const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
+        return (h(Host, { key: 'b57134a29b2fa656c8e8fbea1300f5eb6113cd7c' }, h("div", { key: 'c0768d2f764c4e5baf14fd8df6dd5266691f423f', part: "form-switch", id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'ed047ec80de9f86eb526b3701e3fb7991d4a7f02', part: "form-input-container", class: "form-input-container" }, h("shift-switch", { key: 'a1e770eba5ae1f1571f151bc1e889c727f95de73', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: 'eb1058a2a5eac5b64ebe9f03978c8495afc38cfd', isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+    }
+    static get is() { return "form-switch"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperId": {
+                "type": "string",
+                "attribute": "wrapper-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "form": {
+                "type": "unknown",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
+                    "references": {
+                        "FormHook": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormHook"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "inputPrefix": {
+                "type": "string",
+                "attribute": "input-prefix",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperClass": {
+                "type": "string",
+                "attribute": "wrapper-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "defaultChecked": {
+                "type": "boolean",
+                "attribute": "default-checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/form-elements/form-text-area.js

@@ -4,59 +4,50 @@
  */
 import { Host, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
-import formsSchema from "../../locales/forms/type";
-import formWrapperSchema from "../../locales/forms/wrapper-type";
-import { getLocaleLanguage } from "../../features/multi-lingual/index";
+import { getNestedValue } from "../../global/lib/get-nested-value";
+import { FormInputLabel } from "./components/form-input-label";
+import { FormErrorMessage } from "./components/form-error-message";
+const partKeyPrefix = 'form-textarea-';
 export class FormTextArea {
-    constructor() {
-        this.language = 'en';
-        this.locale = formWrapperSchema.getDefault();
-    }
     async componentWillLoad() {
-        this.form.subscribe(this.inputParams.name, this);
-        await this.changeLanguage(this.language);
+        this.form.subscribe(this.name, this);
     }
     async componentDidLoad() {
-        this.inputRef = this.el.getElementsByClassName('form-textarea-' + this.inputParams.name)[0];
+        this.inputRef = this.el.getElementsByClassName(partKeyPrefix + this.name)[0];
     }
-    async changeLanguage(newLanguage) {
-        const currentFormSchema = formWrapperSchema.fields[this.formLocaleName];
-        const localeResponses = await Promise.all([
-            getLocaleLanguage(newLanguage, 'forms*', formsSchema),
-            getLocaleLanguage(newLanguage, ('forms.' + this.formLocaleName), currentFormSchema),
-        ]);
-        Object.assign(this.locale, localeResponses[0]);
-        Object.assign(this.locale[this.formLocaleName], localeResponses[1]);
+    async disconnectedCallback() {
+        this.form.unsubscribe(this.name);
     }
     reset(newValue) {
-        const value = newValue || this.inputParams.defaultValue || '';
+        const value = newValue || this.defaultValue || '';
         this.inputRef.value = value;
     }
     render() {
-        const { label, isError, errorMessage, isRequired } = this;
-        const prefix = this.el.getElementsByClassName('prefix')[0];
-        const prefixWidth = prefix ? prefix.getBoundingClientRect().width : 0;
-        const texts = this.locale[this.formLocaleName];
-        return (h(Host, { key: 'c4cb9270cc71d8b03540fd78837377d9588303db' }, h("label", { key: '7ef8fa88b123e598133fdb8f93d1b0502b3d3cd2', id: this.wrapperId, class: cn('relative w-full inline-flex flex-col', this.wrapperClass) }, label && (h("div", { key: '25341ccd427a6e58e7791f654bbcd6326ddd47c6', class: "mb-[4px]" }, texts[label] || label, isRequired && h("span", { key: 'c0c0a15673187fcbe2744ef57e66c8fa34f2737d', class: "ms-0.5 text-red-600" }, "*"))), h("div", { key: '7efc47e8f7718d5181ade65b320e7b0f84cdd15c', class: cn('relative', { 'opacity-75': this.inputParams.disabled }) }, h("textarea", Object.assign({ key: '629e0c0e571d99475a3806f0ad698db52cfb5fe9' }, this.inputParams, { style: Object.assign({}, (prefixWidth ? { paddingLeft: `${prefixWidth}px` } : {})), placeholder: texts[this.inputParams.placeholder] || this.inputParams.placeholder, class: cn('border h-[200px] form-input resize-none disabled:bg-white flex-1 py-[6px] px-[12px] transition duration-300 rounded-md outline-none focus:border-slate-600 focus:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)] w-full', 'form-textarea-' + this.inputParams.name, { '!border-red-500 focus:shadow-[0_0_0_0.2rem_rgba(239,68,68,0.25)]': isError }) }))), h("div", { key: 'ee882f36460b3eee8907180e3e22471c153d5491', class: cn('absolute text-[12px] -mt-[4px] -z-10 text-red-500 opacity-0 -translate-y-[10px] bottom-0 transition duration-300', {
-                'translate-y-[calc(100%-5px)] error-message opacity-100': isError,
-            }) }, texts[errorMessage] || this.locale.inputValueIsIncorrect || errorMessage))));
+        const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
+        const [locale] = this.form.getFormLocale();
+        const part = partKeyPrefix + this.name;
+        const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
+        const placeholder = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.placeholder);
+        return (h(Host, { key: '30ed62fd7cbc5b80a394e9fcac174d84dd0b5c0e' }, h("label", { key: '879b52bb0ef897afba0a04879db08179e1cccfa5', part: part, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h(FormInputLabel, { key: '9f3c4d6237ec517278867f0bd5742758d35ad469', isRequired: isRequired, label: label }), h("div", { key: 'e2abe55637acfb995b847fd6d64a6c8b6770f1ae', part: "form-input-container", class: "form-input-container" }, h("textarea", { key: '043ba5ff8c51dc3f707996c39d20e4a43868f8a9', name: this.name, placeholder: placeholder, part: "form-input-textarea", class: cn('form-input-style form-input-textarea-style', {
+                'form-input-error-style': isError,
+            }) })), h(FormErrorMessage, { key: 'feab2a41ac9e35f91ceab801387c6aa17caf27e2', isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-text-area"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-text-area.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-text-area.css"]
+            "$": ["form-inputs.css"]
         };
     }
     static get properties() {
         return {
-            "label": {
+            "name": {
                 "type": "string",
-                "attribute": "label",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -73,25 +64,6 @@ export class FormTextArea {
                 "setter": false,
                 "reflect": false
             },
-            "isError": {
-                "type": "boolean",
-                "attribute": "is-error",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "wrapperId": {
                 "type": "string",
                 "attribute": "wrapper-id",
@@ -121,8 +93,8 @@ export class FormTextArea {
                     "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"
                         }
                     }
                 },
@@ -135,28 +107,9 @@ export class FormTextArea {
                 "getter": false,
                 "setter": false
             },
-            "isRequired": {
-                "type": "boolean",
-                "attribute": "is-required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "wrapperClass": {
+            "defaultValue": {
                 "type": "string",
-                "attribute": "wrapper-class",
+                "attribute": "default-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -173,9 +126,9 @@ export class FormTextArea {
                 "setter": false,
                 "reflect": false
             },
-            "errorMessage": {
+            "wrapperClass": {
                 "type": "string",
-                "attribute": "error-message",
+                "attribute": "wrapper-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -191,94 +144,8 @@ export class FormTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "inputParams": {
-                "type": "unknown",
-                "attribute": "input-params",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputParams",
-                    "resolved": "{ id?: string; name: string; type?: string; disabled?: boolean; placeholder?: string; defaultValue?: string; onInput?: (event: InputEvent) => void; }",
-                    "references": {
-                        "InputParams": {
-                            "location": "import",
-                            "path": "~types/general",
-                            "id": "src/global/types/general.ts::InputParams"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "language": {
-                "type": "string",
-                "attribute": "language",
-                "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"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'en'"
-            },
-            "formLocaleName": {
-                "type": "string",
-                "attribute": "form-locale-name",
-                "mutable": false,
-                "complexType": {
-                    "original": "LocaleFormKeys",
-                    "resolved": "\"contactUs\" | \"inputValueIsIncorrect\" | \"reCaptchaIsRequired\"",
-                    "references": {
-                        "LocaleFormKeys": {
-                            "location": "import",
-                            "path": "~types/forms",
-                            "id": "src/global/types/forms.ts::LocaleFormKeys"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "locale": {}
-        };
-    }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "language",
-                "methodName": "changeLanguage"
-            }];
-    }
 }

package/dist/collection/components/forms/demo/element-mapper.js

@@ -0,0 +1,41 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h } from "@stencil/core";
+import { CITY_ENDPOINT } from "../../../global/api/urls";
+import { phoneValidator } from "./validations";
+export const demoElements = {
+    submit: ({ form, isLoading, props }) => h("form-submit", Object.assign({}, props, { form: form, isLoading: isLoading })),
+    name: ({ props, form }) => h("form-input", Object.assign({}, props, { form: form, name: "name" })),
+    email: ({ form, props }) => h("form-input", Object.assign({}, props, { form: form, name: "email", type: "email" })),
+    phone: ({ form, props }) => h("form-phone-number", Object.assign({}, props, { form: form, name: "phone", defaultValue: phoneValidator.default, validator: phoneValidator })),
+    message: ({ form, props }) => h("form-text-area", Object.assign({}, props, { form: form, name: "message" })),
+    confirmPolicy: ({ form, props }) => h("form-checkbox", Object.assign({}, props, { form: form, name: "confirmPolicy" })),
+    ageConfirmation: ({ form, props }) => h("form-switch", Object.assign({}, props, { form: form, name: "ageConfirmation" })),
+    generalTicketType: ({ form, language, props }) => {
+        const fetcher = async ({ locale }) => {
+            const generalInquiryTypes = [
+                {
+                    value: 'GeneralInquiry',
+                    label: locale.ticketTypes.generalInquiry,
+                },
+                {
+                    value: 'Complaint',
+                    label: locale.ticketTypes.complaint,
+                },
+            ];
+            return generalInquiryTypes;
+        };
+        return h("form-select", Object.assign({}, props, { form: form, fetcher: fetcher, language: language, name: "generalTicketType" }));
+    },
+    cityId: ({ form, language, props }) => {
+        const fetcher = async ({ language, signal }) => {
+            const response = await fetch(CITY_ENDPOINT, { signal, headers: { 'Accept-Language': language } });
+            const arrayRes = (await response.json());
+            const selectItems = arrayRes.map(item => ({ label: item.Name, value: item.ID }));
+            return selectItems;
+        };
+        return h("form-select", Object.assign({}, props, { name: "cityId", searchable: true, form: form, fetcher: fetcher, language: language }));
+    },
+};

package/dist/collection/components/forms/demo/structure.js

@@ -0,0 +1,15 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+const tiq = {
+    tag: 'div',
+    id: 'container',
+    children: [
+        { tag: 'div', id: 'inputs_wrapper', children: ['name', 'email', 'cityId', 'phone', 'generalTicketType', { tag: 'div' }, 'confirmPolicy', 'ageConfirmation'] },
+        { name: 'message', id: 'message' },
+        { tag: 'div', id: 'recaptcha_container' },
+        { name: 'submit', id: 'Submit' },
+    ],
+};
+export const DemoStructures = { tiq };

package/dist/collection/components/forms/demo/themes.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.mx-auto{margin-left:auto;margin-right:auto}.mb-\[24px\]{margin-bottom:24px}.block{display:block}.flex{display:flex}.max-w-\[700px\]{max-width:700px}.flex-col{flex-direction:column}.gap-\[24px\]{gap:24px}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}:host{all:initial!important;display:block}*{font-family:Arial}.demo-tiq #container{margin-left:auto;margin-right:auto;max-width:700px}.demo-tiq #inputs_wrapper{display:flex;flex-direction:column;gap:24px;margin-bottom:24px}@media (min-width:640px){.demo-tiq #inputs_wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}.demo-tiq #message{margin-bottom:24px}@media (min-width:640px){.sm\:grid{display:grid}}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-\[-2px\]{left:-2px}.top-\[-2px\]{top:-2px}.ms-2{margin-inline-start:.5rem}.hidden{display:none}.size-\[24px\]{height:24px;width:24px}.h-\[24px\]{height:24px}.w-\[50px\]{width:50px}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.items-center{align-items:center}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.opacity-75{opacity:.75}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.peer:checked~.peer-checked\:border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\:bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:\[\&_div\]\:translate-x-\[28px\] div{--tw-translate-x:28px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.size-\[22px\]{height:22px;width:22px}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-\[6px\]{border-radius:6px}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.bg-transparent{background-color:transparent}.stroke-\[3px\]{stroke-width:3px}.text-transparent{color:transparent}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!duration-300{transition-duration:.3s!important}.peer:checked~.peer-checked\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\[\&_\.check-icon\]\:scale-0 .check-icon{--tw-scale-x:0;--tw-scale-y:0}.\[\&_\.check-icon\]\:scale-0 .check-icon,.peer:checked~.peer-checked\:\[\&_\.check-icon\]\:scale-100 .check-icon{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:\[\&_\.check-icon\]\:scale-100 .check-icon{--tw-scale-x:1;--tw-scale-y:1}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.size-\[70px\]{height:70px;width:70px}.stroke-green-700{stroke:#15803d}.opacity-0{opacity:0}

package/dist/collection/components/forms/demo/validations.js

@@ -0,0 +1,34 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { bool, object, string } from "yup";
+import { getPhoneValidator } from "../../../features/form-hook/index";
+export const phoneValidator = getPhoneValidator();
+export const demoInputsValidation = object({
+    confirmPolicy: bool()
+        .meta({ label: 'confirmPolicy' })
+        .required(),
+    ageConfirmation: bool()
+        .isTrue('must be true')
+        .meta({ label: 'agePlus18' })
+        .required(),
+    cityId: string().meta({ label: 'city', placeholder: 'selectCity' }),
+    email: string()
+        .meta({ label: 'emailAddress', placeholder: 'emailAddress' })
+        .email('emailAddressNotValid'),
+    message: string()
+        .meta({ label: 'writeAMessage', placeholder: 'leaveUsMessage' })
+        .required('messageIsRequired'),
+    generalTicketType: string()
+        .meta({ label: 'inquiryType', placeholder: 'selectInquiryType' })
+        .required('inquiryTypeIsRequired'),
+    name: string()
+        .meta({ label: 'fullName', placeholder: 'fullName' })
+        .required('fullNameIsRequired')
+        .min(3, 'fullNameMinimum'),
+    phone: string()
+        .meta({ label: 'phoneNumber', placeholder: 'phoneNumber' })
+        .required('phoneNumberIsRequired')
+        .test('libphonenumber-validation', 'phoneNumberFormatInvalid', () => phoneValidator.isValid()),
+});