@supersoniks/concorde 2.0.6 → 3.0.0

package/src/core/mixins/FormCheckable.ts

@@ -0,0 +1,287 @@
+import {property} from "lit/decorators.js";
+import {FormElementInterface} from "@supersoniks/concorde/core/mixins/FormElement";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+import {MixinArgsType} from "../_types/types";
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
+  /**
+   * FormCheckable ajoute un comportement de sélection (checked) a tout FormElement qui utilise cette mixin.
+   * Il est notamment utilisé par sonic-checkbox, sonic-radio et sonic-button
+   * * Par défaut le fonctionnement est celui d'une checkbox classique.
+   * * Dans ce cas, a la sélection, formPublisher[this.name] = [this.value, ...autres valeurs d'élémen,ts sélectionnés ayant le même nom];
+   * * En activant le mode radio à l'aide du flag dédié, un seul FormElement ayant la même propriété name peut être sélectionné à la fois.
+   * * Dans ce cas, a la sélection, formPublisher[this.name] = this.value;
+   */
+  class FormCheckable extends superClass {
+    /**
+     *  Voir  la mixin FormElement.
+     */
+    _value: string | null = "";
+    @property() get value(): string | null {
+      return this._value;
+    }
+    set value(newValue: string | null) {
+      if (this.value == newValue) return;
+      if (this.hasAttribute("value") && !this.forceAutoFill) newValue = this.getAttribute("value");
+
+      if (this._value == newValue) return;
+      if (newValue == null) return;
+
+      this._value = newValue;
+      if (!this.value) return;
+
+      // On check l'élément si il est cheched dans le formPublisher
+      const formPublisher = this.getFormPublisher();
+      if (formPublisher && this.name) {
+        let currentValue = formPublisher[this.name].get();
+        if (this.radio || this.unique) {
+          this.checked = currentValue == newValue ? true : null;
+        }
+
+        if (!Array.isArray(currentValue)) {
+          currentValue = [];
+        }
+        if (currentValue.indexOf(newValue) != -1) this.checked = true;
+      }
+
+      //On mets à jour la valeur dans la donnée si l'élément est checked
+      if (this.checked == true) this.updateDataValue();
+
+      this.requestUpdate();
+    }
+    @property() forceAutoFill = false;
+
+    /**
+     * comme radio,mais peut être désélectionné après sélection
+     */
+    @property({type: Boolean}) unique: true | null = null;
+    /**
+      Active le mode radio
+     */
+    @property({type: Boolean}) radio: true | null = null;
+
+    @property({type: Boolean}) unCheckOnDisconnect = false;
+
+    /**
+     * propriété checked avec des caractéristiques similaire à un input html classique.
+     */
+    _checked: true | null | "indeterminate" = null;
+    @property() get checked(): true | null | "indeterminate" {
+      return this._checked;
+    }
+    public set checked(checked: true | null | "indeterminate") {
+      this.setCheckedValue(checked);
+      if (this.checksAll()) {
+        const checkAllPublisher = this.getCheckAllPublisher();
+        if (checkAllPublisher) {
+          if (this.checked === true) checkAllPublisher.checkMode = "allChecked";
+          else if (this.checked === null) {
+            checkAllPublisher.checkMode = "noneChecked";
+            const formPublisher = this.getFormPublisher();
+            if (formPublisher) {
+              formPublisher[this.name] = [];
+            }
+          }
+        }
+      }
+      this.requestUpdate();
+    }
+
+    validateFormElement() {
+      const input: HTMLInputElement = this.shadowRoot?.querySelector("input") as HTMLInputElement;
+      if (!input || input.checkValidity()) return;
+      const formPublisher = this.getFormPublisher();
+      if (formPublisher) {
+        const value = formPublisher[this.name].get();
+        if ((this.unique || this.radio) && value !== null && value.toString().length > 0) return;
+        formPublisher.isFormValid = false;
+        input.reportValidity();
+      }
+    }
+
+    checksAll() {
+      return this.hasAttribute("checksAll");
+    }
+
+    setCheckedValue(checked: true | null | "indeterminate") {
+      if (this._checked == checked) return;
+      this._checked = checked;
+      this.updateDataValue();
+      this.requestUpdate();
+      setTimeout(() => this.updateAllChecked(), 1);
+
+      // Désactivation du checked sur le publisher
+      // Pas sur de l'utilité mais provoque un bug
+      // if (this.publisher && !this.radio && !this.unique) {
+      //   this.publisher.checked = this._checked;
+      // }
+    }
+
+    handleChange() {
+      const newCheckedValue = this.checked === true ? (!this.radio ? null : true) : true;
+      this.checked = newCheckedValue;
+
+      const event = new Event("change");
+      this.dispatchEvent(event);
+    }
+    /**
+     * Voir la mixin FormElement
+     * Le comportement est ici modifié fonction de son mode (checkbox, radio, unique)
+     */
+    getValueForFormPublisher() {
+      const formPublisher = this.getFormPublisher();
+      if (!formPublisher) return null;
+      let currentValue = formPublisher[this.name].get();
+
+      if (this.radio) {
+        return this.checked === true && this.value != null ? this.value : currentValue;
+      }
+      if (this.unique) {
+        return this.checked === true && this.value != null ? this.value : null;
+      }
+      if (!Array.isArray(currentValue)) {
+        currentValue = [];
+      }
+      currentValue = currentValue.slice(0);
+      const idx = currentValue.indexOf(this.value);
+      if (this.checked === true && idx === -1 && !this.checksAll()) currentValue.push(this.value);
+      if (this.checked === null && idx !== -1) {
+        currentValue.splice(idx, 1);
+      }
+      return currentValue;
+    }
+    /**
+     * Voir la mixin FormElement
+     * Le comportement est modifié de la manière suivante :
+     * L'état du composant (checked) est mis à jour en fonction de la valeur fournie par le publisher associé au composant / en fonction de sont mode (radio, unique)
+     */
+    setFormValueFromPublisher(value: string | Array<string | null> | null) {
+      if (this.unique || this.radio) {
+        this.checked = this.value == value ? true : null;
+        return;
+      }
+
+      if (!Array.isArray(value)) value = [];
+      if (this.checksAll()) {
+        return;
+      }
+      this.checked = value.indexOf(this.value) !== -1 ? true : null;
+    }
+    getCheckAllPublisher() {
+      if (!this.formDataProvider) this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+      const formDataProvider = this.formDataProvider;
+      const name = this.getAttribute("name");
+      if (!formDataProvider || !name) {
+        return null;
+      }
+      return PublisherManager.get(formDataProvider + "/" + name + "/_available_values_");
+    }
+    updateAllChecked = () => {
+      const name = this.getAttribute("name");
+      const checkAllPublisher = this.getCheckAllPublisher();
+      const formPublisher = this.getFormPublisher();
+      if (!checkAllPublisher?.hasCheckAll.get()) {
+        return;
+      }
+
+      if (!this.checksAll() && checkAllPublisher && formPublisher && name) {
+        if (!formPublisher[this.name].get().length) {
+          checkAllPublisher.checkMode = "noneChecked";
+          return;
+        } else if (this.checked === null) {
+          checkAllPublisher.checkMode = "someUnchecked";
+        } else if (checkAllPublisher.checkMode.get() == "noneChecked" || checkAllPublisher.checkMode.get() == null) {
+          checkAllPublisher.checkMode = "someUnchecked";
+        }
+        const currentValues = formPublisher[name].get();
+        const allValues = checkAllPublisher.values.get();
+
+        if (allValues && allValues.length) {
+          let checkedCount = allValues.length;
+          for (const p of allValues) {
+            if (currentValues.indexOf(p) == -1) {
+              checkedCount -= 1;
+            }
+          }
+          if (checkedCount == allValues.length) {
+            checkAllPublisher.checkMode = "allChecked";
+          }
+          if (checkedCount == 0) {
+            checkAllPublisher.checkMode = "noneChecked";
+          }
+        }
+        if (allValues.indexOf(this.value) == -1) {
+          this.checked = null;
+        }
+      }
+    };
+    onChecksAllRequest = (value: string) => {
+      this.removeAttribute("allChecked");
+      this.removeAttribute("indeterminate");
+      if (value == "allChecked") {
+        this.checked = true;
+        this.setAttribute("allChecked", "");
+      }
+      if (value == "noneChecked") {
+        this.checked = null;
+      }
+      if (value == "someUnchecked") {
+        if (this.checksAll()) this.checked = "indeterminate";
+        this.setAttribute("indeterminate", "");
+      }
+    };
+    disconnectedCallback(): void {
+      super.disconnectedCallback();
+
+      const checkAllPublisher = this.getCheckAllPublisher();
+      if (checkAllPublisher) {
+        checkAllPublisher.checkMode.offAssign(this.onChecksAllRequest);
+        if (!this.checksAll()) {
+          const values = checkAllPublisher.values.get().slice(0);
+          const idx = values.indexOf(this.value);
+          if (idx != -1) {
+            values.splice(idx, 1);
+            checkAllPublisher.values = values;
+          }
+        }
+      }
+      setTimeout(() => this.updateAllChecked(), 1);
+    }
+    connectedCallback(): void {
+      super.connectedCallback();
+      const formPublisher = this.getFormPublisher();
+      if (formPublisher && this.name) {
+        const publisherValueForName = formPublisher[this.name].get();
+        if (
+          publisherValueForName &&
+          Array.isArray(publisherValueForName) &&
+          publisherValueForName.indexOf(this.value) !== -1
+        ) {
+          this.checked = true;
+        }
+      }
+      const checkAllPublisher = this.getCheckAllPublisher();
+      if (checkAllPublisher) {
+        checkAllPublisher.checkMode.onAssign(this.onChecksAllRequest);
+        if (this.checksAll()) {
+          checkAllPublisher.hasCheckAll = true;
+        }
+        if (!checkAllPublisher.values.get()) {
+          checkAllPublisher.values = [];
+        }
+        if (!this.checksAll()) {
+          checkAllPublisher.values = [...checkAllPublisher.values.get(), this.value];
+        }
+      }
+
+      if (!this.hasAttribute("checked")) {
+        return;
+      }
+      if (!this.publisher || this.publisher.get().checked !== false) {
+        setTimeout(() => (this.checked = true), 1);
+      }
+    }
+  }
+  return FormCheckable;
+};
+export default Form;

package/src/core/mixins/FormElement.ts

@@ -0,0 +1,275 @@
+import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {property} from "lit/decorators.js";
+import {SubscriberInterface} from "@supersoniks/concorde/core/mixins/Subscriber";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import {PublisherInterface, HTMLFormControl, CoreJSType} from "../_types/types";
+import {MixinArgsType} from "../_types/types";
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+type FormElementValue = string | string[] | object | null | undefined;
+export interface FormElementInterface extends SubscriberInterface {
+  getFormPublisher(): PublisherInterface;
+  updateDataValue(): void;
+  handleChange(e?: Event): void;
+  handleBlur(e?: Event): void;
+  getValueForFormPublisher(): FormElementValue;
+  setValueFromPublisher(value: FormElementValue): void;
+  validateFormElement(): void;
+  focus?: () => void;
+  forceAutoFill: boolean;
+  shadowRoot?: ShadowRoot;
+  error: boolean;
+  autofocus: boolean;
+  required: boolean;
+  disabled: true | null;
+  formDataProvider: string;
+  ariaLabelledby?: string;
+  ariaLabel?: string;
+  _value: FormElementValue;
+  get value(): FormElementValue;
+  set value(value: FormElementValue);
+  _name: string;
+  get name(): string;
+  set name(value: string);
+}
+const keyboardLoops = new Map<string, Array<FormElementInterface>>();
+const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
+  /**
+   * ## FormElement est la mixin utilisée par les éléments de formulaire de concorde ainsi que par le composant sonic-button.
+   * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+   * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
+   * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseignent l'attribut *formDataProvider*.
+   * * Par conséquent, on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+   *
+   */
+  class FormElement extends superClass implements FormElementInterface {
+    @property({type: Boolean, reflect: true}) touched = false;
+    @property({type: Boolean}) error = false;
+    @property({type: Boolean}) autofocus = false;
+    @property({type: Boolean}) required = false;
+    @property({type: Boolean}) forceAutoFill = false;
+    @property({type: Boolean}) disabled: true | null = null;
+
+    /* Attribut data-aria-label pour passer aria-label */
+    @property({type: String, attribute: "data-aria-label"}) ariaLabel?: string;
+    @property({type: String, attribute: "data-aria-labelledby"})
+    ariaLabelledby?: string;
+
+    onValueAssign?: (v: string) => void;
+    onFormValueAssign?: (v: string) => void;
+    onFormDataInValidate?: (v: string) => void;
+    constructor(...args: MixinArgsType[]) {
+      super();
+      args;
+      this.onValueAssign = (value) => {
+        this.setValueFromPublisher(value);
+      };
+      this.onFormValueAssign = async (value) => {
+        this.setFormValueFromPublisher(value);
+      };
+      this.onFormDataInValidate = () => {
+        const formPublisher = this.getFormPublisher();
+        if (!(formPublisher && formPublisher.isFormValid.get())) {
+          return;
+        }
+        this.validateFormElement();
+      };
+    }
+    formDataProvider = "";
+
+    /**
+     * Le nom du champ avec des caractéristiques similaire à un input html classique.
+     */
+    _name = "";
+    @property() get name(): string {
+      return this._name;
+    }
+    set name(value: string) {
+      if (this.hasAttribute("name") && !this.forceAutoFill) value = this.getAttribute("name");
+      this._name = value;
+      this.requestUpdate();
+    }
+    validateFormElement() {
+      //Implémentation dans une sous classe
+    }
+
+    updateDataValue() {
+      const name = this.getAttribute("name");
+      if (name) {
+        const formPublisher = this.getFormPublisher();
+        if (formPublisher) {
+          formPublisher[name] = this.getValueForFormPublisher();
+          this.setFormValueFromPublisher(formPublisher[name].get());
+        }
+      }
+    }
+    getFormPublisher() {
+      if (!this.formDataProvider) this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+      if (this.formDataProvider) {
+        return PublisherManager.get(this.formDataProvider);
+      }
+      return null;
+      //else return this.publisher;
+    }
+    /**
+     * Mise en forme de la valeur fournie au formPublisher associé au composant
+     * Destinée à être surchargée si besoin (cf Form-checkable)
+     */
+    getValueForFormPublisher() {
+      return this.value;
+    }
+    /**
+     * Mise à jour de la valeur interne du composant en fonction de la valeur venant du publisher associé au composant
+     * Destinée à être surchargée si besoin (cf Form-checkable)
+     */
+    setValueFromPublisher(value: FormElementValue) {
+      this.value = value;
+    }
+
+    /**
+     * Mise à jour de la valeur interne du composant en fonction de la valeur venant du formPublisher associé au composant
+     * Destinée à être surchargée si besoin (cf Form-checkable)
+     */
+    setFormValueFromPublisher(value: FormElementValue) {
+      this.value = value;
+    }
+    /**
+     * La valeur du champ avec des caractéristiques similaire à un input html classique :
+     */
+    _value: FormElementValue = "";
+    @property() get value() {
+      return this._value;
+    }
+
+    set value(value) {
+      if (value == null) value = "";
+      if (
+        Objects.isObject(value) &&
+        Object.prototype.hasOwnProperty.call(value, "__value") &&
+        (value as {_value?: CoreJSType})._value == undefined
+      )
+        value = "";
+      if (this._value == value) return;
+      this._value = value;
+      this.updateDataValue();
+      this.requestUpdate();
+    }
+    initPublisher() {
+      let formPublisher = this.getFormPublisher();
+      const value =
+        this.hasAncestorAttribute("initFromPublisher") && this._name && formPublisher[this._name].get()
+          ? formPublisher[this._name].get()
+          : this.getAttribute("value");
+      if (this._name && this.publisher) this.publisher[this._name].offAssign(this.onValueAssign);
+      if (this._name && formPublisher) formPublisher[this._name].offAssign(this.onFormValueAssign);
+      super.initPublisher();
+      if (!this.name) this._name = this.getAttribute("name");
+      if (!this.value) this._value = this.getAttribute("value");
+      if (this.publisher && this._name) {
+        this.publisher[this._name].onAssign(this.onValueAssign);
+      }
+      formPublisher = this.getFormPublisher();
+      if (this._name && formPublisher) {
+        formPublisher[this._name].onAssign(this.onFormValueAssign);
+        formPublisher.onInvalidate(this.onFormDataInValidate);
+      }
+      this.updateDataValue();
+      if (value) this.value = value;
+    }
+
+    handleBlur() {
+      this.touched = true;
+      // this.validateFormElement();
+    }
+
+    handleChange(e: Event) {
+      this.value = (e.target as HTMLFormControl).value;
+      const event = new Event("change");
+      this.dispatchEvent(event);
+    }
+    /**
+     * Ajoute un comportement de navigation au clavier pour les éléments de formulaire
+     * data-keyboard-nav peut contenir plusieurs valeurs qui identifient les boucles de navigation auquelles est attaché cet élément.
+     * Les valeurs sont séparées par des espaces.
+     * En appuyant sur la touche "Down", le composant va se déplacer dans la boucle de navigation correspondante en suivant le flux.
+     * En appuyant sur la touche "Up", le déplacement inverse est effectué.
+     */
+    addKeyboardNavigation() {
+      const keyboardLoopIds: string = this.getAncestorAttributeValue("data-keyboard-nav");
+      if (!keyboardLoopIds) return;
+
+      const split = keyboardLoopIds.split(" ");
+      const keyboardLoopId = split[0];
+      if (!keyboardLoopId) return;
+      for (const keyboardLoopId2 of split) {
+        if (!keyboardLoops.has(keyboardLoopId2)) {
+          keyboardLoops.set(keyboardLoopId2, []);
+        }
+        const keyboardLoop = keyboardLoops.get(keyboardLoopId2);
+        if (keyboardLoop?.indexOf(this) == -1) {
+          keyboardLoop.push(this);
+        }
+      }
+      const keyboardLoop = keyboardLoops.get(keyboardLoopId);
+
+      this.addEventListener("keydown", (e) => {
+        const keyboardEvent = e as KeyboardEvent;
+        if (!["ArrowDown", "ArrowUp"].includes(keyboardEvent.key)) return;
+        const selector = "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled])";
+        const loop = keyboardLoop?.filter((el) => {
+          const child = el.shadowRoot?.querySelector(selector);
+          if (!child) return false;
+          const cpStyle = window.getComputedStyle(child);
+          return (
+            cpStyle.display !== "none" &&
+            cpStyle.display !== "" &&
+            cpStyle.pointerEvents != "none" &&
+            cpStyle.visibility !== "hidden" &&
+            child.getBoundingClientRect().width > 0
+          );
+        });
+
+        let next: SubscriberInterface | null = null;
+        if (keyboardEvent.key == "ArrowDown" && loop) {
+          const index = loop.indexOf(this);
+          if (index == loop.length - 1) {
+            next = loop[0];
+          } else {
+            next = loop[index + 1];
+          }
+        } else if (keyboardEvent.key == "ArrowUp" && loop) {
+          const index = loop.indexOf(this);
+          if (index == 0) {
+            next = loop[loop.length - 1];
+          } else {
+            next = loop[index - 1];
+          }
+        }
+        const elt = next?.shadowRoot?.querySelector(selector) as FormElementInterface | null;
+
+        if (elt && elt.focus) {
+          elt.focus();
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      });
+    }
+
+    connectedCallback(): void {
+      this.formDataProvider = this.getAncestorAttributeValue("formDataProvider") as string;
+      super.connectedCallback();
+      this.addKeyboardNavigation();
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      if (this._name && this.publisher) this.publisher[this._name].offAssign(this.onValueAssign);
+      const formPublisher = this.getFormPublisher();
+      if (this._name && formPublisher) {
+        formPublisher[this._name].offAssign(this.onFormValueAssign);
+        formPublisher.offInvalidate(this.onFormDataInValidate);
+      }
+    }
+  }
+  return FormElement as Constructor<FormElementInterface> & T;
+};
+export default Form;

package/src/core/mixins/FormInput.ts

@@ -0,0 +1,135 @@
+import {property} from "lit/decorators.js";
+import {FormElementInterface} from "@supersoniks/concorde/core/mixins/FormElement";
+import {MixinArgsType} from "../_types/types";
+
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+type Type =
+  | "button"
+  | "checkbox"
+  | "color"
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "file"
+  | "hidden"
+  | "image"
+  | "month"
+  | "number"
+  | "password"
+  | "radio"
+  | "range"
+  | "reset"
+  | "search"
+  | "submit"
+  | "tel"
+  | "text"
+  | "time"
+  | "url"
+  | "week";
+const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
+  class FormInput extends superClass {
+    constructor(...args: MixinArgsType[]) {
+      super();
+      args;
+    }
+    validateFormElement() {
+      const input: HTMLInputElement = this.shadowRoot?.querySelector("input") as HTMLInputElement;
+      if (!input || input.checkValidity()) return;
+      const formPublisher = this.getFormPublisher();
+      if (formPublisher) formPublisher.isFormValid = false;
+      input.reportValidity();
+    }
+    @property() forceAutoFill = false;
+    /**
+     * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
+     * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
+     */
+    _type: Type = "text";
+    @property({type: String}) set type(value) {
+      if (this.hasAttribute("type") && !this.forceAutoFill) value = this.getAttribute("type") as Type;
+      this._type = value;
+      this.requestUpdate();
+    }
+    get type() {
+      return this._type;
+    }
+    _description?: string;
+    @property() get description(): string | undefined {
+      return this._description;
+    }
+    set description(value) {
+      if (this.hasAttribute("description") && !this.forceAutoFill) value = this.getAttribute("description") as string;
+      this._description = value;
+      this.requestUpdate();
+    }
+    _label?: string;
+    @property() get label(): string | undefined {
+      return this._label;
+    }
+    set label(value) {
+      if (this.hasAttribute("label") && !this.forceAutoFill) value = this.getAttribute("label") as string;
+      this._label = value;
+      this.requestUpdate();
+    }
+    @property({type: String, reflect: true}) status: "default" | "success" | "error" | "warning" | "info" = "default";
+    @property({type: Number}) tabindex?: number;
+    @property({type: String}) autocomplete?:
+      | "off"
+      | "on"
+      | "name"
+      | "honorific-prefix"
+      | "given-name"
+      | "additional-name"
+      | "family-name"
+      | "honorific-suffix"
+      | "nickname"
+      | "email"
+      | "username"
+      | "new-password"
+      | "current-password"
+      | "one-time-code"
+      | "organization-title"
+      | "organization"
+      | "street-address"
+      | "address-line1"
+      | "address-line2"
+      | "address-line3"
+      | "address-level4"
+      | "address-level3"
+      | "address-level2"
+      | "address-level1"
+      | "country"
+      | "country-name"
+      | "postal-code"
+      | "cc-name"
+      | "cc-given-name"
+      | "cc-additional-name"
+      | "cc-family-name"
+      | "cc-number"
+      | "cc-exp"
+      | "cc-exp-month"
+      | "cc-exp-year"
+      | "cc-csc"
+      | "cc-type"
+      | "transaction-currency"
+      | "transaction-amount"
+      | "language"
+      | "bday"
+      | "bday-day"
+      | "bday-month"
+      | "bday-year"
+      | "sex"
+      | "tel"
+      | "tel-country-code"
+      | "tel-national"
+      | "tel-area-code"
+      | "tel-local"
+      | "tel-extension"
+      | "impp"
+      | "url"
+      | "photo";
+  }
+
+  return FormInput;
+};
+export default Form;