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

package/Source/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.vue.ts

@@ -1,12 +1,25 @@
-import { Vue3SlideUpDown as VerticallySlidingAlwaysMountedContainer } from "vue3-slide-up-down";
-
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import componentVueTemplate from "./ValidatableControlShell.vue.pug";
 import {
   type ValidatableControlShellLocalization,
-  validatableControlShellYDF_ComponentLocalization__english
+  validatableControlShellYDF_ComponentLocalization__english,
+  replaceMarkdownBold,
+  replaceMarkdownLink
 } from "@yamato-daiwa/frontend";
 
+/* ─── Related GUI Components ─────────────────────────────────────────────────────────────────────────────────────── */
+import Badge from "../../Badge/Badge.vue";
+import { Vue3SlideUpDown as VerticallySlidingAlwaysMountedContainer } from "vue3-slide-up-down";
+
+/* ─── Validations ────────────────────────────────────────────────────────────────────────────────────────────────── */
+import VuePropertyValidator from "../../_VuePropertiesValidators/VuePropertyValidator";
+import preventNullForOptionalVueProperty from "../../_Decorators/preventNullForOptionalVueProperty";
+import NonEmptyStringVuePropertyValidator from "../../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import BooleanVuePropertyValidator from "../../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import ThemeVuePropertyValidator from "../../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import DecorativeVariationVuePropertyValidator from "../../_VuePropertiesValidators/DecorativeVariationVuePropertyValidator";
+
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
   ComponentBase as VueComponentConfiguration,
@@ -17,13 +30,12 @@ import {
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import YDF_ComponentsCoordinator from "../../YDF_ComponentsCoordinator";
-import OptionalButNotNullableVueProperty from "../../_Decorators/OptionalButNotNullableVueProperty";
-import validateVuePropertyAndLogIfInvalid from "../../_Utils/validateVuePropertyAndLogIfInvalid";
+import AccessibleFromTemplateAsNonReactive from "../../_Decorators/AccessibleFromTemplateAsNonReactive";
 import {
-  isNonEmptyString,
-  isElementOfEnumeration,
   secondsToMilliseconds,
-  isNeitherUndefinedNorNull
+  isArrayOfCertainTypeElements,
+  isNonEmptyString,
+  isNotUndefined
 } from "@yamato-daiwa/es-extensions";
 
 
@@ -31,6 +43,7 @@ import {
   name: ValidatableControlShell.CSS_NAMESPACE,
   template: componentVueTemplate,
   components: {
+    Badge,
     VerticallySlidingAlwaysMountedContainer
   }
 })
@@ -42,95 +55,210 @@ class ValidatableControlShell extends VueComponent {
   /* ━━━ Component Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   /* ─── Textings ─────────────────────────────────────────────────────────────────────────────────────────────────── */
   @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty."
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "label",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly label?: string;
 
   @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty."
-    })
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "guidance",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly guidance?: string;
 
+  protected get formattedGuidance(): string | null {
+    return isNotUndefined(this.guidance) ?
+        replaceMarkdownLink(
+          replaceMarkdownBold(
+            this.guidance,
+            (boldedContent: string): string =>
+                `<span class="ValidatableControlShell--YDF-Guidance-AccentedFragment">${ boldedContent }</span>`
+          ),
+          ({ URI, anchorText }: Readonly<{ URI: string; anchorText: string; }>): string =>
+            "<a " +
+              "class=\"Link--YDF ValidatableControlShell--YDF-Guidance-Link\" " +
+              `href="${ URI }" ` +
+              "target=\"_blank\" " +
+              "rel=\"noopener noreferrer nofollow\"" +
+            ">" +
+              anchorText +
+            "</a>"
+        ) :
+        null;
+  }
+
 
   /* ─── Inputting Requirement ────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "required",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly required!: boolean;
 
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustDisplayAppropriateBadgeIfInputIsRequired",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly mustDisplayAppropriateBadgeIfInputIsRequired!: boolean;
 
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustDisplayAppropriateBadgeIfInputIsOptional",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly mustDisplayAppropriateBadgeIfInputIsOptional!: boolean;
 
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge!: boolean;
 
-  /* ─── HTML IDs ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+    /* ─── Displaying of Validation Messages ────────────────────────────────────────────────────────────────────────── */
   @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty."
-    })
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "invalidInputHighlightingIfAnyValidationErrorsMessages",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
-  protected readonly coreElementHTML_ID?: string;
+  @preventNullForOptionalVueProperty
+  protected readonly invalidInputHighlightingIfAnyValidationErrorsMessages!: boolean;
 
   @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty."
-    })
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "validValueHighlightingIfNoValidationErrorsMessages",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
   })
-  @OptionalButNotNullableVueProperty
-  protected readonly labelElementHTML_ID?: string;
+  @preventNullForOptionalVueProperty
+  protected readonly validValueHighlightingIfNoValidationErrorsMessages!: boolean;
 
 
-  /* ─── Displaying of Validation Messages ────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly invalidInputHighlightingIfAnyValidationErrorsMessages!: boolean;
+  /* ─── HTML IDs ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "coreElementHTML_ID",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly coreElementHTML_ID?: string;
 
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly validValueHighlightingIfNoValidationErrorsMessages!: boolean;
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "labelElementHTML_ID",
+        isPropertyRequired: this.required === true,
+        componentName: ValidatableControlShell.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly labelElementHTML_ID?: string;
 
 
   /* ─── CSS Classes ──────────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: [ Array ], default: (): ReadonlyArray<string> => [] })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: (): ReadonlyArray<string> => [],
+    validator: VuePropertyValidator.create({
+      checker: (rawValue: unknown): boolean => isArrayOfCertainTypeElements(rawValue, isNonEmptyString),
+      messageSpecificPart: "If specified, must be an array of non-empty strings.",
+      propertyName: "mainSlotWrapperAdditionalCSS_Classes",
+      componentName: ValidatableControlShell.CSS_NAMESPACE
+    })
+  })
+  @preventNullForOptionalVueProperty
   protected readonly mainSlotWrapperAdditionalCSS_Classes!: ReadonlyArray<string>;
 
 
   /* ━━━ Validation Errors Messages ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  @VueProperty({ type: Array, default: (): ReadonlyArray<string> => [] })
-  @OptionalButNotNullableVueProperty
+  @VueProperty({
+    default: (): ReadonlyArray<string> => [],
+    validator: VuePropertyValidator.create({
+      checker: (rawValue: unknown): boolean => isArrayOfCertainTypeElements(rawValue, isNonEmptyString),
+      messageSpecificPart: "If specified, must be an array of non-empty strings.",
+      propertyName: "validationErrorsMessages",
+      componentName: ValidatableControlShell.CSS_NAMESPACE
+    })
+  })
+  @preventNullForOptionalVueProperty
   protected readonly validationErrorsMessages!: ReadonlyArray<string>;
 
   /* [ Theory ]
    * Even if `validationErrorsMessages` has become to empty array, the validation errors messages are still
-   *   require to animate the expanding. */
+   *   required to animate the collapsing. */
   protected validationErrorsMessagesCopyForAnimating: ReadonlyArray<string> = [ ...this.validationErrorsMessages ];
 
   protected static readonly ERRORS_LIST_EXPANDING_ANIMATION_DURATION_PER_ONE_ERROR_MESSAGE__SECONDS: number = 0.2;
-  protected static readonly ERRORS_LIST_COLLAPSING_ANIMATION_DURATION__SECONDS: number = 0.2;
 
+  protected get errorsListExpandingAnimationDuration__milliseconds(): number {
+    return secondsToMilliseconds(
+      ValidatableControlShell.ERRORS_LIST_EXPANDING_ANIMATION_DURATION_PER_ONE_ERROR_MESSAGE__SECONDS *
+      this.validationErrorsMessagesCopyForAnimating.length
+    );
+  }
+
+  @onVueComponentFieldUpdated("invalidInputHighlightingIfAnyValidationErrorsMessages")
   @onVueComponentFieldUpdated("validationErrorsMessages")
-  protected onValidationErrorsMessagesUpdated(newValidationErrorsMessages: ReadonlyArray<string>): void {
+  protected onValidationErrorsMessagesUpdated(): void {
 
-    if (newValidationErrorsMessages.length > 0) {
-      this.validationErrorsMessagesCopyForAnimating = [ ...newValidationErrorsMessages ];
+    if (this.validationErrorsMessages.length > 0) {
+      this.validationErrorsMessagesCopyForAnimating = [ ...this.validationErrorsMessages ];
       return;
     }
 
@@ -139,30 +267,55 @@ class ValidatableControlShell extends VueComponent {
       (): void => {
         this.validationErrorsMessagesCopyForAnimating = [];
       },
-      secondsToMilliseconds(ValidatableControlShell.ERRORS_LIST_COLLAPSING_ANIMATION_DURATION__SECONDS)
+      this.errorsListExpandingAnimationDuration__milliseconds
     );
 
   }
 
 
+  /* ━━━ Conditional Rendering ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected get mustDisplayRequiredInputBadge(): boolean {
+    return this.required && this.mustDisplayAppropriateBadgeIfInputIsRequired;
+  }
+
+  protected get mustDisplayOptionalInputBadge(): boolean {
+    return !this.required && this.mustDisplayAppropriateBadgeIfInputIsOptional;
+  }
+
+  protected get mustDisplayHeader(): boolean {
+    return isNotUndefined(this.label) ||
+      this.mustDisplayRequiredInputBadge ||
+      this.mustDisplayOptionalInputBadge ||
+      this.mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge;
+  }
+
+
   /* ━━━ Theming ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   public static readonly Themes: ValidatableControlShell.Themes = { regular: "REGULAR" };
 
+  public static readonly selfAndChildrenComponentsThemesCorrespondence:
+      { badge: { [ownThemeValue: string]: string; }; } =
+          { badge: { [ValidatableControlShell.Themes.regular]: Badge.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()`."
-    })
+    validator: ThemeVuePropertyValidator(ValidatableControlShell)
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
-  public static defineThemes(themesNames: ReadonlyArray<string>): typeof ValidatableControlShell {
-    return YDF_ComponentsCoordinator.defineThemes(themesNames, ValidatableControlShell);
+  protected get badgeTheme(): string {
+    return ValidatableControlShell.selfAndChildrenComponentsThemesCorrespondence.badge[this.theme];
+  }
+
+  public static defineThemes(
+    ownAndChildrenThemesCorrespondenceDefinition: Readonly<{
+      [ownThemeKey: string]: Readonly<{ badge: string; }>;
+    }>
+  ): typeof ValidatableControlShell {
+    return YDF_ComponentsCoordinator.defineThemesAndSetCorrespondenceWithOnesOfChildrenComponents(
+      ownAndChildrenThemesCorrespondenceDefinition, ValidatableControlShell
+    );
   }
 
   public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
@@ -171,9 +324,18 @@ class ValidatableControlShell extends VueComponent {
     ValidatableControlShell.areThemesCSS_ClassesCommon = true;
   }
 
-  @VueProperty({ type: Boolean, default: ValidatableControlShell.areThemesCSS_ClassesCommon })
-  @OptionalButNotNullableVueProperty
-  private readonly areThemesCSS_ClassesCommon!: boolean;
+  @VueProperty({
+    default: ValidatableControlShell.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: ValidatableControlShell.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly areThemesCSS_ClassesCommon!: boolean;
 
 
   /* ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -182,43 +344,88 @@ class ValidatableControlShell extends VueComponent {
     small: "SMALL"
   };
 
+  public static readonly selfAndChildrenComponentsGeometricVariationsCorrespondence:
+      { badge: { [ownGeometricVariationValue: string]: string; }; } =
+          {
+            badge: {
+
+              [ValidatableControlShell.GeometricVariations.regular]: Badge.GeometricVariations.regular,
+
+              /* [ Approach ]
+               * `Badge__YDF.GeometricVariations.regular` is NOT a mistake because `Badge__YDF.GeometricVariations.small`
+               *    is too small, while the actual size can be flexibly adjusted by relative CSS units.
+               * */
+              [ValidatableControlShell.GeometricVariations.small]: Badge.GeometricVariations.regular
+
+            }
+          };
+
   @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()`."
-    })
+    validator: GeometricVariationVuePropertyValidator(ValidatableControlShell)
   })
-  @OptionalButNotNullableVueProperty
+  @preventNullForOptionalVueProperty
   protected readonly geometricVariation!: string;
 
-  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof ValidatableControlShell {
-    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, ValidatableControlShell);
+  protected get badgeGeometricVariation(): string {
+    return ValidatableControlShell.selfAndChildrenComponentsGeometricVariationsCorrespondence.badge[this.geometricVariation];
+  }
+
+  public static defineGeometricVariations(
+    ownAndChildrenGeometricVariationsAndCorrespondenceDefinition: Readonly<{
+      [ownGeometricVariationKey: string]: Readonly<{ badge: string; }>;
+    }>
+  ): typeof ValidatableControlShell {
+    return YDF_ComponentsCoordinator.defineGeometricVariationsAndSetCorrespondenceWithOnesOfChildrenComponents(
+      ownAndChildrenGeometricVariationsAndCorrespondenceDefinition, ValidatableControlShell
+    );
   }
 
 
   /* ─── Decoration ───────────────────────────────────────────────────────────────────────────────────────────────── */
-  public static readonly DecorativeVariations: ValidatableControlShell.DecorativeVariations = {
-    regular: "REGULAR"
-  };
+  public static readonly DecorativeVariations: ValidatableControlShell.DecorativeVariations = { regular: "REGULAR" };
+
+  public static readonly selfAndChildrenComponentsDecorativeVariationsCorrespondence:
+      {
+        requiredInputBadge: { [ownDecorativeVariationValue: string]: string; };
+        optionalInputBadge: { [ownDecorativeVariationValue: string]: string; };
+      } =
+          {
+            requiredInputBadge: {
+              [ValidatableControlShell.DecorativeVariations.regular]: Badge.DecorativeVariations.veryCatchyBright
+            },
+            optionalInputBadge: {
+              [ValidatableControlShell.DecorativeVariations.regular]: Badge.DecorativeVariations.modestlyCalmingBright
+            }
+          };
 
   @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: ValidatableControlShell.GeometricVariations.regular,
+    validator: DecorativeVariationVuePropertyValidator(ValidatableControlShell)
   })
   protected readonly decorativeVariation!: string;
 
-  public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof ValidatableControlShell {
-    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, ValidatableControlShell);
+  protected get requiredInputBadgeDecorativeVariation(): string {
+    return ValidatableControlShell.selfAndChildrenComponentsDecorativeVariationsCorrespondence.
+        requiredInputBadge[this.decorativeVariation];
+  }
+
+  protected get optionalInputBadgeDecorativeVariation(): string {
+    return ValidatableControlShell.selfAndChildrenComponentsDecorativeVariationsCorrespondence.
+        optionalInputBadge[this.decorativeVariation];
+  }
+
+  public static defineDecorativeVariations(
+    ownAndChildrenDecorativeVariationsAndCorrespondenceDefinition: Readonly<{
+      [ownDecorativeVariationKey: string]: Readonly<{
+        requiredInputBadge: string;
+        optionalInputBadge: string;
+      }>;
+    }>
+  ): typeof ValidatableControlShell {
+    return YDF_ComponentsCoordinator.defineDecorativeVariationsAndSetCorrespondenceWithOnesOfChildrenComponents(
+      ownAndChildrenDecorativeVariationsAndCorrespondenceDefinition, ValidatableControlShell
+    );
   }
 
 
@@ -237,37 +444,12 @@ class ValidatableControlShell extends VueComponent {
   }
 
 
-  // ━━━ TODO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  /* ━━━ Conditional Rendering ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  private get mustDisplayRequiredInputBadge(): boolean {
-    return this.required && this.mustDisplayAppropriateBadgeIfInputIsRequired;
-  }
-
-  private get mustDisplayOptionalInputBadge(): boolean {
-    return this.required && this.mustDisplayAppropriateBadgeIfInputIsOptional;
-  }
-
-  protected get mustDisplayHeader(): boolean {
-    return isNeitherUndefinedNorNull(this.label) ||
-        this.mustDisplayRequiredInputBadge ||
-        this.mustDisplayOptionalInputBadge ||
-        this.mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge;
-  }
-
-
-  /* ━━━ Lifecycle Hooks ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  public created(): void {
-    this.initializeNonReactiveClassFields();
-  }
-
-
   /* ━━━ Non-reactive Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  public static localization: ValidatableControlShellLocalization = validatableControlShellYDF_ComponentLocalization__english;
-  protected localization!: ValidatableControlShellLocalization;
+  @AccessibleFromTemplateAsNonReactive
+  protected static readonly Badge: typeof Badge = Badge;
 
-  private initializeNonReactiveClassFields(): void {
-    this.localization = ValidatableControlShell.localization;
-  }
+  @AccessibleFromTemplateAsNonReactive
+  public static localization: ValidatableControlShellLocalization = validatableControlShellYDF_ComponentLocalization__english;
 
 }