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

package/Source/GUI_Components/_VuePropertiesValidators/ElementOfEnumerationVuePropertyValidator.ts

@@ -0,0 +1,29 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function ElementOfEnumerationVuePropertyValidator(
+  {
+    componentName,
+    propertyName,
+    enumeration,
+    isPropertyRequired,
+    enumerationFullyQualifiedName
+  }: Readonly<{
+    componentName: string;
+    propertyName: string;
+    isPropertyRequired: boolean;
+    enumeration: Readonly<{ [key: string]: string | number; }>;
+    enumerationFullyQualifiedName: string;
+  }>
+): (targetVueProperty: unknown) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: unknown): boolean => isString(rawValue) && isElementOfEnumeration(rawValue, enumeration),
+    messageSpecificPart:
+        isPropertyRequired ?
+            `Must the an element of "${ enumerationFullyQualifiedName }" enumeration.` :
+            `Must be either element of "${ enumerationFullyQualifiedName }" enumeration of undefined (explicit or omitted).`,
+    propertyName,
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/GeometricModifiersVuePropertyValidator.ts

@@ -0,0 +1,22 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function GeometricModifiersVuePropertyValidator(
+  {
+    GeometricModifiers,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    GeometricModifiers: Readonly<{ [key: string]: string; }>;
+    CSS_NAMESPACE: string;
+  }>
+): (targetVueProperty: unknown) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: unknown): boolean => Array.isArray(rawValue) && rawValue.every(
+      (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, GeometricModifiers)
+    ),
+    messageSpecificPart: `Each array element must the member of \`${ componentName }.GeometricModifiers\` enumeration.`,
+    propertyName: "geometricModifiers",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/GeometricVariationVuePropertyValidator.ts

@@ -0,0 +1,23 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function GeometricVariationVuePropertyValidator(
+  {
+    GeometricVariations,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    GeometricVariations: Readonly<{ [key: string]: string; }>;
+    CSS_NAMESPACE: string;
+  }>
+): (targetVueProperty: Exclude<unknown, undefined>) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: Exclude<unknown, undefined>): boolean =>
+        isString(rawValue) && isElementOfEnumeration(rawValue, GeometricVariations),
+    messageSpecificPart:
+        `Must be the string herewith one among values of \`${ componentName }.GeometricVariations\` associative array ` +
+          ` including the ones defined via \`${ componentName }.defineGeometricVariations()\`.`,
+    propertyName: "geometricVariation",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/NaturalNumberOrZeroVuePropertyValidator.ts

@@ -0,0 +1,25 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isNaturalNumberOrZero } from "@yamato-daiwa/es-extensions";
+
+
+export default function NaturalNumberOrZeroVuePropertyValidator(
+  {
+    componentName,
+    propertyName,
+    isPropertyRequired
+  }: Readonly<{
+    componentName: string;
+    propertyName: string;
+    isPropertyRequired: boolean;
+  }>
+): (targetVueProperty: Exclude<unknown, undefined>) => boolean {
+  return VuePropertyValidator.create({
+    checker: isNaturalNumberOrZero,
+    messageSpecificPart:
+        isPropertyRequired ?
+            "Must be the 0 or natural number." :
+            "Must be 0, natural number or undefined (explicit or omitted).",
+    propertyName,
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/NonEmptyStringVuePropertyValidator.ts

@@ -0,0 +1,25 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isNonEmptyString } from "@yamato-daiwa/es-extensions";
+
+
+export default function NonEmptyStringVuePropertyValidator(
+  {
+    componentName,
+    propertyName,
+    isPropertyRequired
+  }: Readonly<{
+    componentName: string;
+    propertyName: string;
+    isPropertyRequired: boolean;
+  }>
+): (targetVueProperty: Exclude<unknown, undefined>) => boolean {
+  return VuePropertyValidator.create({
+    checker: isNonEmptyString,
+    messageSpecificPart:
+        isPropertyRequired ?
+            "Must be the non-empty string." :
+            "Must be either non-empty string or undefined (explicit or omitted).",
+    propertyName,
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/ThemeVuePropertyValidator.ts

@@ -0,0 +1,23 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function ThemeVuePropertyValidator(
+  {
+    Themes,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    Themes: Readonly<{ [key: string]: string; }>;
+    CSS_NAMESPACE: string;
+  }>
+): (targetVueProperty: Exclude<unknown, undefined>) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: Exclude<unknown, undefined>): boolean =>
+        isString(rawValue) && isElementOfEnumeration(rawValue, Themes),
+    messageSpecificPart:
+        `Must be the string herewith one among values of \`${ componentName }.Themes\` associative array including ` +
+          `the ones defined via \`${ componentName }.defineThemes()\`.`,
+    propertyName: "theme",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/VuePropertyValidator.ts

@@ -0,0 +1,51 @@
+import { Logger } from "@yamato-daiwa/es-extensions";
+import InvalidVuePropertyError from "../_Errors/InvalidVueProperty/InvalidVuePropertyError";
+
+
+type VuePropertyValidator = (value: Exclude<unknown, undefined>) => boolean;
+
+
+namespace VuePropertyValidator {
+
+  export function create(
+    {
+      checker,
+      componentName,
+      propertyName,
+      messageSpecificPart
+    }: Readonly<{
+      checker: (targetVueProperty: Exclude<unknown, undefined>) => boolean;
+      componentName: string;
+      propertyName: string;
+      messageSpecificPart: string;
+    }>
+  ): VuePropertyValidator {
+    return (targetVueProperty: Exclude<unknown, undefined>): boolean => {
+
+      if (!checker(targetVueProperty)) {
+
+        Logger.logError({
+          errorType: InvalidVuePropertyError.NAME,
+          title: InvalidVuePropertyError.localization.defaultTitle,
+          description: InvalidVuePropertyError.localization.generateDescription({
+            componentName,
+            propertyName,
+            messageSpecificPart
+          }),
+          occurrenceLocation: "VuePropertyValidator"
+        });
+
+        return false;
+
+      }
+
+
+      return true;
+
+    };
+  }
+
+}
+
+
+export default VuePropertyValidator;

package/Source/index.ts

@@ -1,23 +1,46 @@
-export { default as YDF_ComponentsCoordinator } from "./GUI_Components/ComponentsAuxiliaries";
+export { default as YDF_ComponentsCoordinator } from "./GUI_Components/YDF_ComponentsCoordinator";
 
 /* ━━━ Officially Realized ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 /* ━━━ GUI Components ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+/* ╍╍╍ Admonition Block ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
+export { default as AdmonitionBlockLogic } from "./GUI_Components/AdmonitionBlock/AdmonitionBlockLogic.vue";
 export { default as AdmonitionBlock } from "./GUI_Components/AdmonitionBlock/AdmonitionBlock.vue";
 
+// ━━━ TODO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 export { default as Badge } from "./GUI_Components/Badge/Badge.vue";
 export { default as BadgeLoadingPlaceholder } from "./GUI_Components/Badge/LoadingPlaceholder/Badge-LoadingPlaceholder.vue";
 
+/* ┅┅┅ Controls ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+export { default as ValidatableControlShell } from
+    "./GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.vue";
 
-/* ━━━ Alpha / Beta ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+/* ╍╍╍ Buttons ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
 export { default as Button } from "./GUI_Components/Controls/Buttons/Plain/Button.vue";
 export { default as ButtonLoadingPlaceholder } from
-      "./GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue";
+    "./GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue";
 
-export { default as OverflowSafeSingleLineLabel } from "./GUI_Components/OverflowSafeSingleLineLabel.vue";
+export { default as HamburgerMenuButton } from "./GUI_Components/Controls/Buttons/HamburgerMenu/HamburgerMenuButton.vue";
+export { default as HamburgerMenuButtonLogic } from
+    "./GUI_Components/Controls/Buttons/HamburgerMenu/HamburgerMenuButton-ForInheritance.vue";
 
-export { default as ThemesShowcase } from "./GUI_Components/ThemesShowcase.vue";
+export { default as ClosingButton } from "./GUI_Components/Controls/Buttons/Closing/ClosingButton.vue";
+
+/* ╍╍╍ Validatables ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
+export { default as InputtableControl } from "./GUI_Components/Controls/Validatables/InputtableControl.vue";
+export { default as ValidatableControl } from "./GUI_Components/Controls/Validatables/ValidatableControl";
+export { default as ValidatableControlsGroup } from "./GUI_Components/Controls/Validatables/ValidatableControlsGroup";
+
+export { default as TextBox } from "./GUI_Components/Controls/Validatables/TextBox/TextBox.vue";
 
 
+/* ━━━ Alpha / Beta ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+export { default as AccessibleFromTemplateAsNonReactive } from "./GUI_Components/_Decorators/AccessibleFromTemplateAsNonReactive";
+export { default as NonReactiveVueData } from "./GUI_Components/_Decorators/NonReactiveVueData";
+export { default as preventNullForOptionalVueProperty } from "./GUI_Components/_Decorators/preventNullForOptionalVueProperty";
+
+export { default as OverflowSafeSingleLineLabel } from "./GUI_Components/OverflowSafeSingleLineLabel.vue";
+export { default as ThemesShowcase } from "./GUI_Components/ThemesShowcase.vue";
+
 /* ━━━ Icons ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 export { default as AchievementIcon__Filled } from "./SVG_Icons/Achievement/AchievementIcon__Filled.vue";
 export { default as AchievementIcon__Outlined } from "./SVG_Icons/Achievement/AchievementIcon__Outlined.vue";

package/Workbenches/Source/Decorators/Decorators.workbench.pug

@@ -0,0 +1,20 @@
+extends ../../../node_modules/@yamato-daiwa/frontend/PagesTemplates/RegularWebPageTemplate.pug
+
+
+block append Metadata
+
+  -
+
+    RegularWebPageTemplate__YDF.configure({
+      metadata: {
+        title: "Decorators Workbench"
+      },
+      scriptsURIs: {
+        atEndOfBody: [ "@Workbenches/Decorators/Decorators.workbench" ]
+      }
+    });
+
+
+block append PageContent
+
+  #APPLICATION

package/Workbenches/Source/Decorators/Decorators.workbench.ts

@@ -0,0 +1,5 @@
+import { createApp as createVueApplication } from "vue";
+import DecoratorsWorkbench from "./DecoratorsWorkbench.vue";
+
+
+createVueApplication(DecoratorsWorkbench).mount("#APPLICATION");

package/Workbenches/Source/Decorators/DecoratorsWorkbench.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+
+  button(
+    type="button"
+    @click="updateFields"
+  ) Change
+
+  span {{ reactiveFiled }}
+  span {{ nonReactiveFiled }}
+
+  span {{ staticField1 }}
+  span {{ staticField2 }}
+
+</template>
+
+
+<script lang="ts">
+
+  /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
+
+  /* ─── Utils ────────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    AccessibleFromTemplateAsNonReactive,
+    NonReactiveVueData
+  } from "../../../Source";
+
+  @VueComponentOptions({ name: "DecoratorsWorkbench" })
+  class DecoratorsWorkbench extends VueComponent {
+
+    protected reactiveFiled = "ALPHA";
+
+    @NonReactiveVueData("ALPHA")
+    protected nonReactiveFiled!: string;
+
+    @AccessibleFromTemplateAsNonReactive
+    protected static staticField1: string = "STATIC_FIELD_1";
+
+    @AccessibleFromTemplateAsNonReactive
+    protected static staticField2: string = "STATIC_FIELD_2";
+
+    protected updateFields(): void {
+      this.reactiveFiled = "BRAVO";
+      this.nonReactiveFiled = "CHARLIE";
+      DecoratorsWorkbench.staticField1 = "UPDATED_STATIC_FIELD_1";
+      DecoratorsWorkbench.staticField2 = "UPDATED_STATIC_FIELD_2";
+    }
+
+  }
+
+  export default transformToOptionAPI_Component(DecoratorsWorkbench);
+
+</script>
+
+
+<style lang="stylus">
+
+  @require "../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+</style>

package/Workbenches/Source/GUI_Components/AdmonitionBlock/AdmonitionBlockComponentTestSite.vue

@@ -9,14 +9,36 @@
   import { AdmonitionBlock } from "../../../../Source";
 
   /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
-  import { Component as VueComponentOptions, Vue as VueComponent } from "vue-facing-decorator";
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
 
 
   @VueComponentOptions({
+    name: "AdmonitionBlockComponentTestSite",
     components: {
       AdmonitionBlock
     }
   })
-  export default class AdmonitionBlockComponentTestSite extends VueComponent {}
+  class AdmonitionBlockComponentTestSite extends VueComponent {}
+
+  export default transformToOptionAPI_Component(AdmonitionBlockComponentTestSite);
 
 </script>
+
+
+<style lang="stylus">
+
+  @require "../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+
+  generateAdmonitionBlockYDF_GUI_ComponentStyles()
+
+</style>

package/Workbenches/Source/GUI_Components/Badge/BadgeBlockComponentTestSite.vue

@@ -9,14 +9,36 @@
   import { Badge } from "../../../../Source";
 
   /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
-  import { Component as VueComponentOptions, Vue as VueComponent } from "vue-facing-decorator";
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
 
 
   @VueComponentOptions({
+    name: "BadgeComponentTestSite",
     components: {
       Badge
     }
   })
-  export default class BadgeComponentTestSite extends VueComponent {}
+  class BadgeComponentTestSite extends VueComponent {}
+
+  export default transformToOptionAPI_Component(BadgeComponentTestSite);
 
 </script>
+
+
+<style lang="stylus">
+
+  @require "../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+
+  generateBadgeYDF_GUI_ComponentStyles()
+
+</style>

package/Workbenches/Source/GUI_Components/Controls/Buttons/Plain/Button.workbench.pug

@@ -0,0 +1,20 @@
+extends ../../../../../../node_modules/@yamato-daiwa/frontend/PagesTemplates/RegularWebPageTemplate.pug
+
+
+block append Metadata
+
+  -
+
+    RegularWebPageTemplate__YDF.configure({
+      metadata: {
+        title: "Button Component Testing"
+      },
+      scriptsURIs: {
+        atEndOfBody: [ "@Workbenches/GUI_Components/Controls/Buttons/Plain/Button.workbench" ]
+      }
+    });
+
+
+block append PageContent
+
+  #APPLICATION

package/Workbenches/Source/GUI_Components/Controls/Buttons/Plain/Button.workbench.ts

@@ -0,0 +1,5 @@
+import { createApp as createVueApplication } from "vue";
+import ButtonComponentTestSite from "./ButtonComponentTestSite.vue";
+
+
+createVueApplication(ButtonComponentTestSite).mount("#APPLICATION");

package/Workbenches/Source/GUI_Components/Controls/Buttons/Plain/ButtonComponentTestSite.vue

@@ -0,0 +1,60 @@
+<template lang="pug">
+
+  Button(
+    label="Test"
+    :disabled="false"
+    @click="onButtonClicked"
+  )
+
+</template>
+
+
+<script lang="ts">
+
+  /* ─── GUI Components ───────────────────────────────────────────────────────────────────────────────────────────── */
+  import { Button } from "../../../../../../Source";
+
+  /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
+  import { Logger } from "@yamato-daiwa/es-extensions";
+
+
+  @VueComponentOptions({
+    name: "ButtonComponentTestSite",
+    components: {
+      Button
+    }
+  })
+  class ButtonComponentTestSite extends VueComponent {
+
+    protected onButtonClicked(): void {
+      Logger.logSuccess({
+        title: "Clicked",
+        description: "Button has been clicked"
+      });
+    }
+
+  }
+
+  export default transformToOptionAPI_Component(ButtonComponentTestSite);
+
+</script>
+
+
+<style lang="stylus">
+
+  @require "../../../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+
+  generateButtonYDF_GUI_ComponentStyles()
+
+</style>

package/Workbenches/Source/GUI_Components/Controls/Validatable/TextBox/TextBox.workbench.pug

@@ -0,0 +1,20 @@
+extends ../../../../../../node_modules/@yamato-daiwa/frontend/PagesTemplates/RegularWebPageTemplate.pug
+
+
+block append Metadata
+
+  -
+
+    RegularWebPageTemplate__YDF.configure({
+      metadata: {
+        title: "TextBox Workbench"
+      },
+      scriptsURIs: {
+        atEndOfBody: [ "@Workbenches/GUI_Components/Controls/Validatable/TextBox/TextBox.workbench" ]
+      }
+    });
+
+
+block append PageContent
+
+  #APPLICATION

package/Workbenches/Source/GUI_Components/Controls/Validatable/TextBox/TextBox.workbench.ts

@@ -0,0 +1,5 @@
+import { createApp as createVueApplication } from "vue";
+import TextBoxWorkbench from "./TextBoxWorkbench.vue";
+
+
+createVueApplication(TextBoxWorkbench).mount("#APPLICATION");

package/Workbenches/Source/GUI_Components/Controls/Validatable/TextBox/TextBoxWorkbench.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+
+  TextBox(
+    label="Sample"
+    guidance="Please input something"
+    inputOrTextareaElementHTML_ID="BLA"
+    v-model="textBoxPayload"
+    :validityHighlightingActivationMode="TextBox.ValidityHighlightingActivationModes.onFocusOut"
+    :mustDisplayAppropriateBadgeIfInputIsRequired="true"
+    :required="textBoxPayload.validation.isInputRequired()"
+    :ref="TEXT_BOX_VUE_REFERENCE_ID"
+  )
+
+</template>
+
+
+<script lang="ts">
+
+  /* ─── GUI Components ───────────────────────────────────────────────────────────────────────────────────────────── */
+  /* eslint-disable-next-line max-classes-per-file -- Allow additional class for for inputted data validation. */
+  import TextBox from "../../../../../../Source/GUI_Components/Controls/Validatables/TextBox/TextBox.vue";
+
+  /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
+  import { ValidatableControl, NonReactiveVueData, AccessibleFromTemplateAsNonReactive } from "../../../../../../Source";
+  import { InputtedValueValidation, MinimalCharactersCountInputtedValueValidationRule } from "@yamato-daiwa/frontend";
+  import { isEmptyString } from "@yamato-daiwa/es-extensions";
+
+
+  @VueComponentOptions({
+    name: "TextBoxWorkbench",
+    components: {
+      TextBox
+    }
+  })
+  class TextBoxWorkbench extends VueComponent {
+
+    @NonReactiveVueData("TEXT_BOX")
+    protected readonly TEXT_BOX_VUE_REFERENCE_ID!: string;
+
+    @AccessibleFromTemplateAsNonReactive
+    protected static readonly TextBox: typeof TextBox = TextBox;
+
+    protected textBoxPayload: ValidatableControl.Payload<string, string, InputtedValueValidation> =
+        ValidatableControl.Payload.createInitialInstance({
+          initialValue: "",
+          validation: new class extends InputtedValueValidation {
+            public constructor() {
+              super({
+                omittedValueChecker: isEmptyString,
+                isInputRequired: true,
+                staticRules: [
+                  new MinimalCharactersCountInputtedValueValidationRule({ minimalCharactersCount: 3 })
+                ]
+              });
+            }
+          }(),
+          vueReferenceID: this.TEXT_BOX_VUE_REFERENCE_ID
+        });
+
+  }
+
+  export default transformToOptionAPI_Component(TextBoxWorkbench);
+
+</script>
+
+
+<style lang="stylus">
+
+  @require "../../../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+
+  generateValidatableControlShellYDF_GUI_ComponentStyles()
+  generateTextBoxYDF_GUI_ComponentStyles()
+  generateBadgeYDF_GUI_ComponentStyles()
+
+</style>

package/Workbenches/Source/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.workbench.pug

@@ -0,0 +1,20 @@
+extends ../../../../../node_modules/@yamato-daiwa/frontend/PagesTemplates/RegularWebPageTemplate.pug
+
+
+block append Metadata
+
+  -
+
+    RegularWebPageTemplate__YDF.configure({
+      metadata: {
+        title: "ValidatableControlShell Component Testing"
+      },
+      scriptsURIs: {
+        atEndOfBody: [ "@Workbenches/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.workbench" ]
+      }
+    });
+
+
+block append PageContent
+
+  #APPLICATION