@yamato-daiwa/frontend-vue 0.2.0 → 0.3.0-alpha.1

package/Source/GUI_Components/Controls/Validatables/TextBox/TextBox.vue.ts

@@ -1,26 +1,44 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import componentVueTemplate from "./TextBox.vue.pug";
 
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import VuePropertyValidator from "../../../_VuePropertiesValidators/VuePropertyValidator";
+import BooleanVuePropertyValidator from "../../../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import ElementOfEnumerationVuePropertyValidator from "../../../_VuePropertiesValidators/ElementOfEnumerationVuePropertyValidator";
+import NonEmptyStringVuePropertyValidator from "../../../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import NaturalNumberOrZeroVuePropertyValidator from "../../../_VuePropertiesValidators/NaturalNumberOrZeroVuePropertyValidator";
+import ThemeVuePropertyValidator from "../../../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../../../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import DecorativeVariationVuePropertyValidator from "../../../_VuePropertiesValidators/DecorativeVariationVuePropertyValidator";
+import preventNullForOptionalVueProperty from "../../../_Decorators/preventNullForOptionalVueProperty";
+
 /* ─── GUI Components ─────────────────────────────────────────────────────────────────────────────────────────────── */
-import InputtableControl from "../InputtableControl";
+import InputtableControl from "../InputtableControl.vue";
 import ValidatableControlShell from "../../ValidatableControlShell/ValidatableControlShell.vue";
 
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
   ComponentBase as VueComponentConfiguration,
-  Prop as VueProperty
+  Prop as VueProperty,
+  Model as VModel,
+  Emit as emitVueEvent
 } from "vue-facing-decorator";
-import {
-  isElementOfEnumeration,
-  isNonEmptyString,
-  isNonNegativeInteger,
-  type ElementOfPseudoEnumeration
-} from "@yamato-daiwa/es-extensions";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import type { InputtedValueValidation } from "@yamato-daiwa/frontend";
+import ValidatableControl from "../ValidatableControl";
+import InvalidVuePropertyError from "../../../_Errors/InvalidVueProperty/InvalidVuePropertyError";
 import YDF_ComponentsCoordinator from "../../../YDF_ComponentsCoordinator";
-import OptionalButNotNullableVueProperty from "../../../_Decorators/OptionalButNotNullableVueProperty";
-import validateVuePropertyAndLogIfInvalid from "../../../_Utils/validateVuePropertyAndLogIfInvalid";
+import getElementByVueReference from "../../../../Functions/getElementByVueReference";
+import AccessibleFromTemplateAsNonReactive from "../../../_Decorators/AccessibleFromTemplateAsNonReactive";
+import {
+  type ElementOfPseudoEnumeration,
+  Logger,
+  isNumber,
+  isString,
+  isNull,
+  isNotUndefined
+} from "@yamato-daiwa/es-extensions";
 
 
 @VueComponentConfiguration({
@@ -30,9 +48,9 @@ import validateVuePropertyAndLogIfInvalid from "../../../_Utils/validateVuePrope
     ValidatableControlShell
   }
 })
-class TextBox extends InputtableControl {
+class TextBox extends InputtableControl implements ValidatableControl {
 
-  /* ━━━ Static Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ━━━ Common Static Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   public static CSS_NAMESPACE: string = "TextBox--YDF";
 
   public static HTML_Types: TextBox.HTML_Types = {
@@ -44,109 +62,380 @@ class TextBox extends InputtableControl {
     URI: "url"
   };
 
+  public static ValidityHighlightingActivationModes: TextBox.ValidityHighlightingActivationModes = {
+    immediate: "IMMEDIATE",
+    onFirstInputtedCharacter: "ON_FIRST_INPUTTED_CHARACTER",
+    onFocusOut: "ON_FOCUS_OUT"
+  };
+
 
-  /* ━━━ Component Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ━━━ Component Common Parameters ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   @VueProperty({
-    type: String,
     default: TextBox.HTML_Types.regular,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: (rawValue: string): boolean => isElementOfEnumeration(rawValue, TextBox.HTML_Types),
-      message: "Must be the element of `TextBox.HTML_Types` enumeration."
-    })
+    get validator(): VuePropertyValidator {
+      return ElementOfEnumerationVuePropertyValidator({
+        enumerationFullyQualifiedName: "Button.HTML_Types",
+        enumeration: TextBox.HTML_Types,
+        propertyName: "HTML_Type",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected HTML_Type!: ElementOfPseudoEnumeration<TextBox.HTML_Types>;
 
   @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty"
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "placeholder",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly placeholder?: string;
 
   /** @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill */
   @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty"
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "autocomplete",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly autocomplete?: string;
 
 
-  /* ─── Multi Line Mode ──────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
+  /* ┅┅┅ Multi Line Mode ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "multiline",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly multiline!: boolean;
 
-  @VueProperty({ type: Boolean, default: true })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: true,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "autoResizingForMultilineMode",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly autoResizingForMultilineMode!: boolean;
 
 
-  /* ─── Invalid Value Prevention ─────────────────────────────────────────────────────────────────────────────────── */
+  /* ┅┅┅ Invalid Value Prevention ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
   @VueProperty({
-    type: Number,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonNegativeInteger,
-      message: "If specified must be the positive integer or 0"
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NaturalNumberOrZeroVuePropertyValidator({
+        propertyName: "minimalCharactersCount",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
-  protected readonly minimalCharactersCount?: number | null;
+  @preventNullForOptionalVueProperty
+  protected readonly minimalCharactersCount?: number;
 
   @VueProperty({
-    type: Number,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonNegativeInteger,
-      message: "If specified must be the positive integer or 0"
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NaturalNumberOrZeroVuePropertyValidator({
+        propertyName: "maximalCharactersCount",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
-  protected readonly maximalCharactersCount?: number | null;
+  @preventNullForOptionalVueProperty
+  protected readonly maximalCharactersCount?: number;
 
   @VueProperty({
-    type: Number,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonNegativeInteger,
-      message: "If specified must be the positive integer or 0"
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NaturalNumberOrZeroVuePropertyValidator({
+        propertyName: "minimalNumericValue",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly minimalNumericValue?: number;
+
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NaturalNumberOrZeroVuePropertyValidator({
+        propertyName: "maximalNumericValue",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly maximalNumericValue?: number;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "valueMustBeTheNonNegativeIntegerOfRegularNotation",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly valueMustBeTheNonNegativeIntegerOfRegularNotation!: boolean;
+
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "valueMustBeTheDigitsSequence",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly valueMustBeTheDigitsSequence!: boolean;
+
+
+  /* ┅┅┅ Converting of Inputted Values ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustConvertEmptyValueToZero",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
-  protected readonly minimalNumericValue?: number | null;
+  @preventNullForOptionalVueProperty
+  protected readonly mustConvertEmptyValueToZero!: boolean;
+
 
   @VueProperty({
-    type: Number,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonNegativeInteger,
-      message: "If specified must be the positive integer or 0"
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustConvertEmptyValueToNull",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly mustConvertEmptyValueToNull!: boolean;
+
+
+  /* ━━━ Public Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ┅┅┅ Implementation of `ValidatableControl` interface ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+
+  public focus(): this {
+
+    getElementByVueReference({
+      vueReferenceID: TextBox.INPUT_OR_TEXT_AREA_ELEMENT_VUE_REFERENCE_ID,
+      parentVueComponent: this,
+      expectedDOM_ElementSubtype: HTMLElement,
+      mustExpectExactlyOneElement: true
+    }).focus();
+
+    return this;
+
+  }
+
+  public resetValidityHighlightingStateToInitial(): void {
+
+  }
+
+
+  /* ━━━ Actions Handling ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+  /* [ Theory ] Action Handing in Vue: "keydown" → "input" → "keyup" */
+  protected rawInput: string = "";
+
+  protected invalidInputHighlightingIfAnyValidationErrorsMessages: boolean = false;
+  protected validInputHighlightingIfNoErrorsMessages: boolean = false;
+
+  @VueProperty({
+    required: true,
+    get validator(): VuePropertyValidator {
+      return ElementOfEnumerationVuePropertyValidator({
+        enumerationFullyQualifiedName: "TextBox.ValidityHighlightingActivationModes",
+        enumeration: TextBox.ValidityHighlightingActivationModes,
+        propertyName: "validityHighlightingActivationMode",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  protected validityHighlightingActivationMode!: ElementOfPseudoEnumeration<typeof TextBox.ValidityHighlightingActivationModes>;
+
+  @VModel({
+    type: ValidatableControl.Payload,
+    required: true,
+    validator: VuePropertyValidator.create({
+      checker: (rawVModel: unknown): boolean =>
+          ValidatableControl.VModelChecker(
+            rawVModel, (rawValue: unknown): boolean =>
+                isString(rawValue) ||
+                isNumber(rawValue, { mustConsiderNaN_AsNumber: false }) ||
+                isNull(rawValue)
+          ),
+      messageSpecificPart: "Must be either string or number or null.",
+      propertyName: "v-model",
+      componentName: TextBox.CSS_NAMESPACE
     })
   })
-  @OptionalButNotNullableVueProperty
-  protected readonly maximalNumericValue?: number | null;
+  protected readonly validatablePayload!: ValidatableControl.Payload<
+    TextBox.SupportedValidatablePayloadValuesTypes,
+    TextBox.SupportedValidatablePayloadValuesTypes,
+    InputtedValueValidation
+  >;
+
+  /* [ Theory ]
+   * Being fired first, "keydown" can be used for preventing of inputting of forbidden characters, but filtering out
+   *   except allowed character is challenging because it is required to respect the "Enter", "Backspace", arrow keys
+   *   etc. */
+  protected onKeyDown(event: KeyboardEvent): void {
+
+    /* 〔 理論 〕 妥当数入力処理（valueMustBeTheNonNegativeIntegerOfRegularNotation: true）〔 1 〕
+     * 1) 此処では利用者が先に行く不正０の入力を予防する事が出来ない。（本当？既存の値を確認すれば？）
+     * 例えば、利用者は「123」を入力してからカーソルを最初位置に動かして、「0」を入力しても、
+     * 此方ではカーソルの位置が判らないので、「onInput」で不正０の入力を遮る。
+     * 2) 読める文字と他に、利用者は半角空白やバックスペースや方向ボタンが押せるので、「!/^[0-9]$/u.test(event.key)」の様な正規表現では入力を予防出来ない。
+     * 3) 負号はボタンで入力するとは限らなく、ブラウザーに付けられたボタンにより入力も可能である。
+     * */
+    if (
+      (
+        this.valueMustBeTheNonNegativeIntegerOfRegularNotation ||
+        this.valueMustBeTheDigitsSequence
+      ) &&
+      (/^[+\-e.]$/u).test(event.key)
+    ) {
+      event.preventDefault();
+    }
+
+  }
+
+   /* [ Theory ]
+    * Even "input" element has "number" type, if nothing has been inputted, the "rawValue" will be the empty string. */
+  protected onInput(rawValue: string): void {
+
+    if (rawValue.length === 0) {
+
+      if (this.mustConvertEmptyValueToZero) {
+        this.$emit(TextBox.Events.input, this.validatablePayload.updateImmutably({ newValue: 0 }));
+        this.rawInput = "0";
+        return;
+      }
+
+
+      if (this.mustConvertEmptyValueToNull) {
+        this.$emit(TextBox.Events.input, this.validatablePayload.updateImmutably({ newValue: null }));
+        return;
+      }
+
+    }
+
+
+    if (
+      this.HTML_Type === TextBox.HTML_Types.number &&
+      this.mustConvertEmptyValueToZero &&
+      this.rawInput.startsWith("0")
+    ) {
+
+      const inputtedValueWithoutPrependedZeros: string = this.rawInput.replace(/^0+/u, "");
+
+      if (inputtedValueWithoutPrependedZeros.length === 0) {
+        this.$emit(TextBox.Events.input, this.validatablePayload.updateImmutably({ newValue: 0 }));
+        return;
+      }
+
+
+      this.rawInput = inputtedValueWithoutPrependedZeros;
+
+      this.$emit(
+        TextBox.Events.input,
+        this.validatablePayload.updateImmutably({
+          newValue: Number(inputtedValueWithoutPrependedZeros)
+        })
+      );
+
+      return;
+
+    }
+
+
+    if (this.HTML_Type === TextBox.HTML_Types.number) {
+
+      this.$emit(TextBox.Events.input, this.validatablePayload.updateImmutably({ newValue: Number(rawValue) }));
+
+      return;
+
+    }
+
+
+    this.$emit(TextBox.Events.input, this.validatablePayload.updateImmutably({ newValue: rawValue }));
+
+  }
+
+  @emitVueEvent("blur")
+  protected onFocusOut(): void {
+    this.invalidInputHighlightingIfAnyValidationErrorsMessages = true;
+    this.validInputHighlightingIfNoErrorsMessages = true;
+  }
 
 
   /* ━━━ Theming ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   public static readonly Themes: ValidatableControlShell.Themes = { regular: "REGULAR" };
 
+  public static readonly selfAndChildrenComponentsThemesCorrespondence:
+      { validatableControlShell: { [ownThemeValue: string]: string; }; } =
+          { validatableControlShell: { [TextBox.Themes.regular]: ValidatableControlShell.Themes.regular } };
+
   @VueProperty({
-    type: String,
-    default: ValidatableControlShell.Themes.regular,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: (rawValue: string): boolean => isElementOfEnumeration(rawValue, ValidatableControlShell.Themes),
-      message:
-          "Must be the one among values of `ValidatableControlShell.Themes` associative array including the ones " +
-            "defined via `ValidatableControlShell.defineThemes()`."
-    })
+    default: TextBox.Themes.regular,
+    validator: ThemeVuePropertyValidator(TextBox)
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
-  public static defineThemes(themesNames: ReadonlyArray<string>): typeof ValidatableControlShell {
-    return YDF_ComponentsCoordinator.defineThemes(themesNames, ValidatableControlShell);
+  protected get validatableControlShellTheme(): string {
+    return TextBox.selfAndChildrenComponentsThemesCorrespondence.validatableControlShell[this.theme];
+  }
+
+  public static defineThemes(
+    themesAndCorrespondenceDefinition: Readonly<{
+      [ownThemeKey: string]: Readonly<{ validatableControlShell: string; }>;
+    }>
+  ): typeof ValidatableControlShell {
+    return YDF_ComponentsCoordinator.defineThemesAndSetCorrespondenceWithOnesOfChildrenComponents(
+      themesAndCorrespondenceDefinition, ValidatableControlShell
+    );
   }
 
   public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
@@ -155,9 +444,18 @@ class TextBox extends InputtableControl {
     ValidatableControlShell.areThemesCSS_ClassesCommon = true;
   }
 
-  @VueProperty({ type: Boolean, default: ValidatableControlShell.areThemesCSS_ClassesCommon })
-  @OptionalButNotNullableVueProperty
-  private readonly areThemesCSS_ClassesCommon!: boolean;
+  @VueProperty({
+    default: TextBox.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: TextBox.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly areThemesCSS_ClassesCommon!: boolean;
 
 
   /* ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -166,21 +464,34 @@ class TextBox extends InputtableControl {
     small: "SMALL"
   };
 
+  public static readonly selfAndChildrenComponentsGeometricVariationsCorrespondence:
+      { validatableControlShell: { [ownGeometricVariationValue: string]: string; }; } =
+          {
+            validatableControlShell: {
+              [TextBox.GeometricVariations.regular]: ValidatableControlShell.GeometricVariations.regular,
+              [TextBox.GeometricVariations.small]: ValidatableControlShell.GeometricVariations.small
+            }
+          };
+
   @VueProperty({
-    type: String,
-    default: ValidatableControlShell.GeometricVariations.regular,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: (rawValue: string): boolean => isElementOfEnumeration(rawValue, ValidatableControlShell.GeometricVariations),
-      message:
-          "Must be the one among values of `ValidatableControlShell.GeometricVariations` associative array including the ones " +
-            "defined via `ValidatableControlShell.defineGeometricVariations()`."
-    })
+    default: TextBox.GeometricVariations.regular,
+    validator: GeometricVariationVuePropertyValidator(TextBox)
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly geometricVariation!: string;
 
-  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof ValidatableControlShell {
-    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, ValidatableControlShell);
+  protected get validatableControlGeometricVariation(): string {
+    return TextBox.selfAndChildrenComponentsGeometricVariationsCorrespondence.validatableControlShell[this.geometricVariation];
+  }
+
+  public static defineGeometricVariations(
+    ownAndChildrenGeometricVariationsAndCorrespondenceDefinition: Readonly<{
+      [ownGeometricVariationKey: string]: Readonly<{ badge: string; }>;
+    }>
+  ): typeof TextBox {
+    return YDF_ComponentsCoordinator.defineGeometricVariationsAndSetCorrespondenceWithOnesOfChildrenComponents(
+      ownAndChildrenGeometricVariationsAndCorrespondenceDefinition, TextBox
+    );
   }
 
 
@@ -189,18 +500,25 @@ class TextBox extends InputtableControl {
     regular: "REGULAR"
   };
 
+  public static readonly selfAndChildrenComponentsDecorativeVariationsCorrespondence:
+      { validatableControlShell: { [ownDecorativeVariationValue: string]: string; }; } =
+          {
+            validatableControlShell: {
+              [TextBox.DecorativeVariations.regular]: ValidatableControlShell.DecorativeVariations.regular
+            }
+          };
+
   @VueProperty({
-    type: String,
-    default: ValidatableControlShell.DecorativeVariations.regular,
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: (rawValue: string): boolean => isElementOfEnumeration(rawValue, ValidatableControlShell.DecorativeVariations),
-      message:
-        "Must be the one among values of `ValidatableControlShell.DecorativeVariations` associative array including the ones " +
-          "defined via `ValidatableControlShell.defineDecorativeVariations()`."
-    })
+    default: TextBox.DecorativeVariations.regular,
+    validator: DecorativeVariationVuePropertyValidator(TextBox)
   })
   protected readonly decorativeVariation!: string;
 
+  protected get validatableControlDecorativeVariation(): string {
+    return TextBox.selfAndChildrenComponentsDecorativeVariationsCorrespondence.
+        validatableControlShell[this.decorativeVariation];
+  }
+
   public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof ValidatableControlShell {
     return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, ValidatableControlShell);
   }
@@ -219,11 +537,122 @@ class TextBox extends InputtableControl {
       allDecorativeVariations: TextBox.DecorativeVariations,
       other: [
         ...this.multiline ? [ `${ TextBox.CSS_NAMESPACE }__Multiline` ] : [],
-        ...this.disabled ? [ `${ TextBox.CSS_NAMESPACE }__DisabledState` ] : []
+        ...this.disabled ? [ `${ TextBox.CSS_NAMESPACE }__DisabledState` ] : [],
+        ...this.invalidInputHighlightingIfAnyValidationErrorsMessages && this.validatablePayload.isInvalid ?
+            [ "TextBox--YDF__InvalidInputState" ] : [],
+        ...this.validInputHighlightingIfNoErrorsMessages && !this.validatablePayload.isInvalid ?
+            [ "TextBox--YDF__ValidInputState" ] : []
       ]
     });
   }
 
+
+  /* ━━━ Properties Additional Validations ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /** @descriptioin
+   * Validation with referencing of multiple properties is possible only via lifecycle hooks.
+   * This method is static because non-static methods are not accessible from the viewpoint of "vue-facing-decorator" */
+  protected static override validateProperties(instance: TextBox): void {
+
+    if (
+      isNotUndefined(instance.minimalNumericValue) &&
+      isNotUndefined(instance.maximalNumericValue) &&
+      instance.minimalNumericValue > instance.maximalNumericValue
+    ) {
+      Logger.throwErrorWithFormattedMessage({
+        errorInstance: new InvalidVuePropertyError({
+          componentName: TextBox.CSS_NAMESPACE,
+          propertyName: "minimalNumericValue",
+          messageSpecificPart: "`minimalNumericValue` is greater than `maximalNumericValue`."
+        }),
+        title: InvalidVuePropertyError.localization.defaultTitle,
+        occurrenceLocation: "TextBox.validateProperties(instance)"
+      });
+    }
+
+
+    if (
+      isNotUndefined(instance.minimalCharactersCount) &&
+      isNotUndefined(instance.maximalCharactersCount) &&
+      instance.minimalCharactersCount > instance.maximalCharactersCount
+    ) {
+      Logger.throwErrorWithFormattedMessage({
+        errorInstance: new InvalidVuePropertyError({
+          componentName: TextBox.CSS_NAMESPACE,
+          propertyName: "minimalCharactersCount",
+          messageSpecificPart: "`minimalCharactersCount` is greater than `maximalCharactersCount`."
+        }),
+        title: InvalidVuePropertyError.localization.defaultTitle,
+        occurrenceLocation: "TextBox.validateProperties(instance)"
+      });
+    }
+
+  }
+
+
+  /* ━━━ IDs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  @AccessibleFromTemplateAsNonReactive
+  protected static readonly INPUT_OR_TEXT_AREA_ELEMENT_VUE_REFERENCE_ID: string = "INPUT_OR_TEXT_AREA_ELEMENT";
+
+
+  /* ┅┅┅ Instance ID ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  protected readonly INSTANCE_ID: string = TextBox.generateInstanceID();
+  protected static counterForInstanceID_Generating: number = 0;
+
+  public static generateInstanceID(): string {
+    TextBox.counterForInstanceID_Generating++;
+    return `TEXT_BOX--YDF-${ TextBox.counterForInstanceID_Generating }`;
+  }
+
+
+  /* ┅┅┅ HTML IDs ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  // TODO NonEmptyString
+  @VueProperty({ type: String, required: false })
+  protected readonly inputOrTextareaElementHTML_ID?: string;
+
+  // TODO NonEmptyString
+  @VueProperty({ type: String, required: false })
+  protected readonly labelElementHTML_ID?: string;
+
+  /* [ Performance Optimization ] Intended to be non-reactive and thus must be assigned in `create` lifecycle hook. */
+  protected HTML_IDs!: Readonly<{
+    inputOrTextarea: string;
+    label: string;
+  }>;
+
+
+  /* ━━━ Lifecycle Hooks ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected beforeCreate(): void {
+
+    TextBox.validateProperties(this);
+
+    this.invalidInputHighlightingIfAnyValidationErrorsMessages =
+        this.validityHighlightingActivationMode === TextBox.ValidityHighlightingActivationModes.immediate;
+
+    this.validInputHighlightingIfNoErrorsMessages = this.invalidInputHighlightingIfAnyValidationErrorsMessages;
+
+  }
+
+  protected created(): void {
+
+    this.HTML_IDs = {
+      inputOrTextarea: this.inputOrTextareaElementHTML_ID ?? `${ this.INSTANCE_ID }-INPUT_OR_TEXT_AREA`,
+      label: this.labelElementHTML_ID ?? `${ this.INSTANCE_ID }-LABEL`
+    };
+
+    if (isString(this.validatablePayload.value)) {
+      this.rawInput = this.validatablePayload.value;
+    } else if (isNumber(this.validatablePayload.value, { mustConsiderNaN_AsNumber: true })) {
+      this.rawInput = String(this.validatablePayload.value);
+    } else {
+      this.rawInput = "";
+    }
+
+  }
+
+  protected beforeUpdate(): void {
+    TextBox.validateProperties(this);
+  }
+
 }
 
 
@@ -238,6 +667,19 @@ namespace TextBox {
     URI: "url";
   }>;
 
+  export type SupportedValidatablePayloadValuesTypes = string | number | null;
+
+  export enum Events {
+    input = "update:modelValue",
+    blur = "BLUR"
+  }
+
+  export type ValidityHighlightingActivationModes = Readonly<{
+    immediate: "IMMEDIATE";
+    onFirstInputtedCharacter: "ON_FIRST_INPUTTED_CHARACTER";
+    onFocusOut: "ON_FOCUS_OUT";
+  }>;
+
   export type Themes = {
     readonly regular: "REGULAR";
     [themeName: string]: string;