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

package/Source/GUI_Components/Controls/Validatables/ValidatableControl.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/member-ordering -- The secondary members has been organized to the end of the class. */
 
-import type { InputtedValueValidation } from "@yamato-daiwa/frontend";
+import type { InputtedValueValidation, ValidatableControl as CorePackageValidatableControl } from "@yamato-daiwa/frontend";
 import type { ComponentPublicInstance as VueComponentPublicInstance } from "vue";
+import type { VueCons as VueClassComponent } from "vue-facing-decorator";
 import {
   Logger,
   UnexpectedEventError,
@@ -12,23 +13,11 @@ import {
 import VueComponentNotFoundError from "../../_Errors/VueComponentNotFound/VueComponentNotFoundError";
 
 
-interface ValidatableControl {
-
-  highlightInvalidInput: () => this;
-
-  getRootElementOffsetCoordinates: () => Element;
-
-  focus: () => this;
-
-  resetValidityHighlightingStateToInitial: () => ValidatableControl.RootElementOffsetCoordinates;
-
-}
+type ValidatableControl = CorePackageValidatableControl;
 
 
 namespace ValidatableControl {
 
-  export type RootElementOffsetCoordinates = Readonly<{ top: number; left: number; }>;
-
   export function isValidatableControl(potentialValidatableControl: unknown): potentialValidatableControl is ValidatableControl {
     return isArbitraryObject(potentialValidatableControl) &&
         isFunctionLike(potentialValidatableControl.highlightInvalidInput) &&
@@ -37,16 +26,17 @@ namespace ValidatableControl {
         isFunctionLike(potentialValidatableControl.resetValidityHighlightingStateToInitial);
   }
 
+
   export function getValidatableControlInstanceByVueReferenceID(
     compoundParameter: Readonly<{
-      parentVueComponentInstance: VueComponentPublicInstance;
+      parentVueComponentInstance: VueComponentPublicInstance | VueClassComponent;
       vueReferenceID: string;
     }>
   ): ValidatableControl | null;
 
   export function getValidatableControlInstanceByVueReferenceID(
     compoundParameter: Readonly<{
-      parentVueComponentInstance: VueComponentPublicInstance;
+      parentVueComponentInstance: VueComponentPublicInstance | VueClassComponent;
       vueReferenceID: string;
       mustThrowErrorIsNotFoundOrNotValidatableControl: true;
     }>
@@ -54,19 +44,22 @@ namespace ValidatableControl {
 
   export function getValidatableControlInstanceByVueReferenceID(
     compoundParameter: Readonly<{
-      parentVueComponentInstance: VueComponentPublicInstance;
+      parentVueComponentInstance: VueComponentPublicInstance | VueClassComponent;
       vueReferenceID: string;
       mustThrowErrorIsNotFoundOrNotValidatableControl?: true;
     }>
   ): ValidatableControl | null {
 
-    const potentialValidatableControl: unknown = compoundParameter.parentVueComponentInstance.
-        $refs[compoundParameter.vueReferenceID];
+    const potentialValidatableControl: unknown =
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions --
+         * Types which `vue-facing-decorator` imports are not compatible with `VueComponentPublicInstance`, but actually
+         *   class components will be transformed to valid option API.  */
+        (compoundParameter.parentVueComponentInstance as VueComponentPublicInstance).$refs[compoundParameter.vueReferenceID];
 
     if (isUndefined(potentialValidatableControl)) {
 
       if (compoundParameter.mustThrowErrorIsNotFoundOrNotValidatableControl === true) {
-        Logger.throwErrorAndLog({
+        Logger.throwErrorWithFormattedMessage({
           errorInstance: new VueComponentNotFoundError({ vueReferenceID: compoundParameter.vueReferenceID }),
           title: VueComponentNotFoundError.localization.defaultTitle,
           occurrenceLocation: "ValidatableControl.getValidatableControlInstanceByVueReferenceID(compoundParameter)"
@@ -82,11 +75,11 @@ namespace ValidatableControl {
     if (!isValidatableControl(potentialValidatableControl)) {
 
       if (compoundParameter.mustThrowErrorIsNotFoundOrNotValidatableControl === true) {
-        Logger.throwErrorAndLog({
-          errorType: "VueReferenceValueIsNotValidatableControl",
-          title: "Vue reference value is not validatable control",
+        Logger.throwErrorWithFormattedMessage({
+          errorType: "VueReferenceValueIsNotValidatableControlError",
+          title: "Vue Reference Value is not the Validatable Control",
           description:
-              `The Vue reference "${ compoundParameter.vueReferenceID }" is not referring to the component implementing ` +
+              `The Vue reference "${ compoundParameter.vueReferenceID }" does not refer to the component implementing ` +
                 "the \"ValidatableControl\" interface.",
           occurrenceLocation: "ValidatableControl.getValidatableControlInstanceByVueReferenceID(compoundParameter)"
         });
@@ -105,6 +98,7 @@ namespace ValidatableControl {
 
   export class Payload<ValidValue, InvalidValue, Validation extends InputtedValueValidation> {
 
+    /* ━━━ Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
     public readonly ID: string;
     public readonly VUE_REFERENCE_ID: string;
 
@@ -112,25 +106,32 @@ namespace ValidatableControl {
     public readonly validation: Validation;
     public readonly lastChangeSourceID?: string;
 
-    private readonly validationResult: InputtedValueValidation.Result;
+    protected readonly validationResult: InputtedValueValidation.Result;
+    protected readonly asynchronousChecksStatus: InputtedValueValidation.AsynchronousChecks.Status | null = null;
 
 
+    /* ━━━ Public Static Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
     public static createInitialInstance<ValidValue, InvalidValue, Validation extends InputtedValueValidation>(
-      compoundParameter: Readonly<{
+      {
+        initialValue,
+        validation,
+        vueReferenceID
+      }: Readonly<{
         initialValue: ValidValue | InvalidValue;
         validation: Validation;
         vueReferenceID?: string;
       }>
     ): Payload<ValidValue, InvalidValue, Validation> {
       return new Payload<ValidValue, InvalidValue, Validation>({
-        value: compoundParameter.initialValue,
-        validation: compoundParameter.validation,
-        vueReferenceID: compoundParameter.vueReferenceID
+        value: initialValue,
+        validation,
+        vueReferenceID
       });
     }
 
 
-    private constructor(
+    /* ━━━ Constructor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+    protected constructor(
       {
         ID,
         vueReferenceID,
@@ -155,7 +156,7 @@ namespace ValidatableControl {
     ) {
 
       this.ID = ID ?? Payload.generateSelfID();
-      this.VUE_REFERENCE_ID = vueReferenceID ?? Payload.generateAssociatedComponentVueReferenceID();
+      this.VUE_REFERENCE_ID = vueReferenceID ?? Payload.generateVueReferenceID_ForAssociatedComponent();
 
       this.value = value;
       this.validation = validation;
@@ -180,6 +181,9 @@ namespace ValidatableControl {
 
     }
 
+
+    /* ━━━ Public Instance Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+    /* ─── Updating ───────────────────────────────────────────────────────────────────────────────────────────────── */
     public getComponentInstance(ownerComponent: VueComponentPublicInstance): ValidatableControl {
       return getValidatableControlInstanceByVueReferenceID({
         vueReferenceID: this.VUE_REFERENCE_ID,
@@ -188,45 +192,50 @@ namespace ValidatableControl {
       });
     }
 
-    public get validationErrorsMessages(): Array<string> {
-      return this.validationResult.isValid ? [] : [ ...this.validationResult.errorsMessages ];
-    }
 
-    public get isInvalid(): boolean {
-      return !this.validationResult.isValid;
+    /* ─── Other ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+    public updateImmutably(
+      {
+        newValue
+      }: {
+        newValue: ValidValue | InvalidValue;
+      }
+    ): Payload<ValidValue, InvalidValue, Validation> {
+      return new Payload<ValidValue, InvalidValue, Validation>({
+        value: newValue,
+        validation: this.validation
+      });
     }
 
 
+    /* ━━━ Public Getters and Getter-like Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
     public getExpectedToBeValidValue(): ValidValue {
 
       if (this.isInvalid) {
-        Logger.throwErrorAndLog({
-          errorInstance: new UnexpectedEventError(
-            "Contrary os expectations, the value of the validatable control payload is still invalid."
-          ),
+        Logger.throwErrorWithFormattedMessage({
+          errorInstance: new UnexpectedEventError("Contrary to expectations, the value is still invalid."),
           title: UnexpectedEventError.localization.defaultTitle,
           occurrenceLocation: "ValidatableControl.Payload.getExpectedToBeValidValue()"
         });
       }
 
 
-      /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-type-assertion --
-      * In this case, we are guarantee the ValidValue by "this.isInvalid" check */
+      /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions --
+       * In this case, we are guarantee the ValidValue by "this.isInvalid" check */
       return this.value as ValidValue;
 
     }
 
-    public updateImmutably(
-      {
-        newValue
-      }: {
-        newValue: ValidValue | InvalidValue;
-      }
-    ): Payload<ValidValue, InvalidValue, Validation> {
-      return new Payload<ValidValue, InvalidValue, Validation>({
-        value: newValue,
-        validation: this.validation
-      });
+    public get isEmpty(): boolean {
+      return this.validation.hasValueBeenOmitted(this.value);
+    }
+
+    public get isInvalid(): boolean {
+      return !this.validationResult.isValid;
+    }
+
+    public get validationErrorsMessages(): Array<string> {
+      return this.validationResult.isValid ? [] : [ ...this.validationResult.errorsMessages ];
     }
 
 
@@ -241,7 +250,7 @@ namespace ValidatableControl {
 
     protected static counterForAssociatedComponentVueReferenceID_Generating: number = 0;
 
-    protected static generateAssociatedComponentVueReferenceID(): string {
+    protected static generateVueReferenceID_ForAssociatedComponent(): string {
       Payload.counterForAssociatedComponentVueReferenceID_Generating++;
       return `VALIDATABLE_CONTROL-${ Payload.counterForAssociatedComponentVueReferenceID_Generating }`;
     }

package/Source/GUI_Components/Controls/Validatables/ValidatableControlsGroup.ts

@@ -0,0 +1,176 @@
+import ValidatableControl from "./ValidatableControl";
+import type { InputtedValueValidation } from "@yamato-daiwa/frontend";
+
+import type { ComponentPublicInstance as VueComponentPublicInstance } from "vue";
+import type { Vue as VueClassComponent } from "vue-facing-decorator";
+
+import {
+  Logger,
+  UnexpectedEventError,
+  isNull,
+  isNotUndefined,
+  DOM_ElementRetrievingFailedError
+} from "@yamato-daiwa/es-extensions";
+import type { ArbitraryObject } from "@yamato-daiwa/es-extensions";
+import { getExpectedToBeSingleDOM_Element } from "@yamato-daiwa/es-extensions-browserjs";
+
+
+export default class ValidatableControlsGroup<ValidData extends ArbitraryObject | Array<unknown>> {
+
+  public readonly isInvalid: boolean;
+  public readonly payload: ValidData | null;
+  public readonly SCROLLING_CONTAINER_HTML_ID?: string;
+
+  protected readonly controlsPayload: ValidatableControlsGroup.GeneralizedControlsPayload;
+
+
+  /* ━━━ Public Static Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static initialize<ValidData extends ArbitraryObject | Array<unknown>>(
+    compoundParameter: Readonly<{ scrollingContainerHTML_ID?: string; }>
+  ): ValidatableControlsGroup<ValidData> {
+    return new ValidatableControlsGroup<ValidData>({
+      isInvalid: true,
+      payload: null,
+      controlsPayload: {},
+      scrollingContainerHTML_ID: compoundParameter.scrollingContainerHTML_ID
+    });
+  }
+
+  public static hasInvalidInputs(
+    controlsPayload: ValidatableControlsGroup.GeneralizedControlsPayload
+  ): boolean {
+    return (Array.isArray(controlsPayload) ? controlsPayload : Object.values(controlsPayload)).
+        some(
+          (validatableControlPayload: ValidatableControl.Payload<unknown, unknown, InputtedValueValidation>): boolean =>
+              validatableControlPayload.isInvalid
+        );
+  }
+
+  public static pointOutValidationErrors(
+    {
+      controlsPayload,
+      parentVueComponentInstance,
+      scrollingContainerHTML_ID
+    }: Readonly<{
+      controlsPayload: ValidatableControlsGroup.GeneralizedControlsPayload;
+      parentVueComponentInstance: VueComponentPublicInstance | InstanceType<typeof VueClassComponent>;
+      scrollingContainerHTML_ID?: string;
+    }>
+  ): void {
+
+    let isCurrentControlTheFirstInvalidOne: boolean = true;
+
+    for (const validatableControlPayload of Array.isArray(controlsPayload) ? controlsPayload : Object.values(controlsPayload)) {
+
+      if (validatableControlPayload.isInvalid) {
+
+        const componentInstance: ValidatableControl | null = ValidatableControl.getValidatableControlInstanceByVueReferenceID({
+          parentVueComponentInstance, vueReferenceID: validatableControlPayload.VUE_REFERENCE_ID
+        });
+
+        if (isNull(componentInstance)) {
+
+          Logger.logError({
+            errorType: DOM_ElementRetrievingFailedError.NAME,
+            title: DOM_ElementRetrievingFailedError.localization.defaultTitle,
+            description: "Unable to retrieve the validatable control instance with Vue reference ID " +
+                `"${ validatableControlPayload.VUE_REFERENCE_ID }". Make sure that dedicated component has been mounted ` +
+                "and \"ref\" attribute has been explicitly specified.",
+            occurrenceLocation: "ValidatableControlsGroup.pointOutValidationErrors(compoundParameter)"
+          });
+
+          continue;
+
+        }
+
+
+        componentInstance.highlightInvalidInput();
+
+        if (isCurrentControlTheFirstInvalidOne) {
+
+          componentInstance.focus();
+
+          /* eslint-disable-next-line max-depth -- Here are all conditions are required. */
+          if (isNotUndefined(scrollingContainerHTML_ID)) {
+            getExpectedToBeSingleDOM_Element({ selector: `#${ scrollingContainerHTML_ID }` }).scroll({
+              top: componentInstance.getRootElementOffsetCoordinates().top,
+              behavior: "smooth"
+            });
+          }
+
+          isCurrentControlTheFirstInvalidOne = false;
+
+        }
+
+      }
+
+    }
+
+  }
+
+
+  /* ━━━ Instancing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public constructor(
+    compoundParameter:
+        Readonly<
+          (
+            {
+              isInvalid: false;
+              payload: ValidData;
+            } | {
+              isInvalid: true;
+              payload: null;
+              controlsPayload: ValidatableControlsGroup.GeneralizedControlsPayload;
+            }
+          ) & {
+            scrollingContainerHTML_ID?: string;
+          }
+        >
+  ) {
+
+    this.isInvalid = compoundParameter.isInvalid;
+    this.payload = compoundParameter.payload;
+
+    this.controlsPayload = "controlsPayload" in compoundParameter ? compoundParameter.controlsPayload : {};
+
+    if (isNotUndefined(this.SCROLLING_CONTAINER_HTML_ID)) {
+      this.SCROLLING_CONTAINER_HTML_ID = compoundParameter.scrollingContainerHTML_ID;
+    }
+
+  }
+
+
+  /* ━━━ Instance Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public getExpectedToBeValidPayload(): ValidData {
+
+    if (isNull(this.payload)) {
+      Logger.throwErrorWithFormattedMessage({
+        errorInstance: new UnexpectedEventError("Contrary to expectations the payload is still invalid."),
+        title: UnexpectedEventError.localization.defaultTitle,
+        occurrenceLocation: "validatableControlsGroup.getExpectedToBeValidPayload()"
+      });
+    }
+
+
+    return this.payload;
+
+  }
+
+  public pointOutValidationErrors(parentVueComponentInstance: VueComponentPublicInstance): void {
+    ValidatableControlsGroup.pointOutValidationErrors({
+      controlsPayload: this.controlsPayload,
+      parentVueComponentInstance,
+      scrollingContainerHTML_ID: this.SCROLLING_CONTAINER_HTML_ID
+    });
+  }
+
+}
+
+
+namespace ValidatableControlsGroup {
+
+  export type GeneralizedControlsPayload =
+      Readonly<{ [controlKey: string]: ValidatableControl.Payload<unknown, unknown, InputtedValueValidation>; }> |
+      Array<ValidatableControl.Payload<unknown, unknown, InputtedValueValidation>>;
+
+}

package/Source/GUI_Components/OverflowSafeSingleLineLabel.vue

@@ -11,15 +11,22 @@ component.OverflowSafeSingleLineLabel(
 
 <script lang="ts">
 
-  import { Component as VueComponentOptions, Vue as VueComponent, Prop as VueProperty } from "vue-facing-decorator";
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    Prop as VueProperty,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
 
 
   @VueComponentOptions({ name: "OverflowSafeSingleLineLabel--YDF" })
-  export default class OverflowSafeSingleLineLabel extends VueComponent {
+  class OverflowSafeSingleLineLabel extends VueComponent {
 
     @VueProperty({ type: String, default: "div" })
     protected readonly rootElementTag!: string;
 
   }
 
+  export default transformToOptionAPI_Component(OverflowSafeSingleLineLabel);
+
 </script>

package/Source/GUI_Components/ThemesShowcase.vue

@@ -55,13 +55,16 @@ ul.ThemesShowcase--YDF
 
 <script lang="ts">
 
-  import { Component as VueComponentOptions, Vue as VueComponent, Prop as VueProperty } from "vue-facing-decorator";
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    Prop as VueProperty,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
 
 
-  @VueComponentOptions({
-    name: "ThemesShowcase--YDF"
-  })
-  export default class ThemesShowcase extends VueComponent {
+  @VueComponentOptions({ name: "ThemesShowcase--YDF" })
+  class ThemesShowcase extends VueComponent {
 
     @VueProperty({
       type: Object,
@@ -115,4 +118,6 @@ ul.ThemesShowcase--YDF
 
   }
 
+  export default transformToOptionAPI_Component(ThemesShowcase);
+
 </script>

package/Source/GUI_Components/YDF_ComponentsCoordinator.ts

@@ -1,7 +1,9 @@
 import {
   toUpperCamelCase,
   toLowerCamelCase,
-  toScreamingSnakeCase
+  toScreamingSnakeCase,
+  isUndefined,
+  isNotUndefined
 } from "@yamato-daiwa/es-extensions";
 
 
@@ -54,6 +56,151 @@ export default abstract class YDF_ComponentsCoordinator {
 
   }
 
+  public static defineThemesAndSetCorrespondenceWithOnesOfChildrenComponents<
+    ComponentClass extends {
+      Themes: { [themeKey: string]: string; };
+      selfAndChildrenComponentsThemesCorrespondence: { [childrenComponentKey: string]: { [ownThemeValue: string]: string; }; };
+    }
+  >(
+    ownAndChildrenThemesCorrespondenceDefinition: { [ ownThemeKey: string ]: { [ childrenComponentKey: string ]: string; }; },
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    YDF_ComponentsCoordinator.defineThemes(Object.keys(ownAndChildrenThemesCorrespondenceDefinition), TargetComponentClass);
+
+    for (
+      const [ ownThemeKey, correspondenceWithThemesOfChildrenComponents ] of
+          Object.entries(ownAndChildrenThemesCorrespondenceDefinition)
+    ) {
+
+      const ownThemeNameValue: string = toScreamingSnakeCase(ownThemeKey);
+
+      for (
+        const [ childComponentName, childComponent_sThemeName ] of
+            Object.entries(correspondenceWithThemesOfChildrenComponents)
+      ) {
+
+        if (isUndefined(TargetComponentClass.selfAndChildrenComponentsThemesCorrespondence[childComponentName])) {
+          TargetComponentClass.selfAndChildrenComponentsThemesCorrespondence[childComponentName] = {
+            [ownThemeNameValue]: toScreamingSnakeCase(childComponent_sThemeName)
+          };
+        } else {
+          TargetComponentClass.
+              selfAndChildrenComponentsThemesCorrespondence[childComponentName][ownThemeNameValue] =
+                  toScreamingSnakeCase(childComponent_sThemeName);
+        }
+
+      }
+
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineGeometricVariationsAndSetCorrespondenceWithOnesOfChildrenComponents<
+    ComponentClass extends {
+      GeometricVariations: { [geometricVariationKey: string]: string; };
+      selfAndChildrenComponentsGeometricVariationsCorrespondence:
+          { [childrenComponentKey: string]: { [ownGeometricVariationValue: string]: string; }; };
+    }
+  >(
+    geometricVariationsCorrespondenceDefinition:
+        { [ ownGeometricVariationKey: string ]: { [ childrenComponentKey: string ]: string; }; },
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    YDF_ComponentsCoordinator.defineGeometricVariations(
+      Object.keys(geometricVariationsCorrespondenceDefinition), TargetComponentClass
+    );
+
+    for (
+      const [ ownGeometricVariationKey, correspondenceWithGeometricVariationsOfChildrenComponents ] of
+          Object.entries(geometricVariationsCorrespondenceDefinition)
+    ) {
+
+      const ownGeometricVariationValue: string = toScreamingSnakeCase(ownGeometricVariationKey);
+
+      for (
+        const [ childComponentName, childComponent_sGeometricVariationsNames ] of
+            Object.entries(correspondenceWithGeometricVariationsOfChildrenComponents)
+      ) {
+
+        if (isUndefined(TargetComponentClass.selfAndChildrenComponentsGeometricVariationsCorrespondence[childComponentName])) {
+          TargetComponentClass.selfAndChildrenComponentsGeometricVariationsCorrespondence[childComponentName] = {
+            [ownGeometricVariationValue]: toScreamingSnakeCase(childComponent_sGeometricVariationsNames)
+          };
+        } else {
+          TargetComponentClass.
+              selfAndChildrenComponentsGeometricVariationsCorrespondence
+                  /* eslint-disable no-unexpected-multiline --
+                   * Allow line breaks for bracket notation and long fully qualified names. */
+                  [childComponentName]
+                  [ownGeometricVariationValue] =
+                  /* eslint-enable no-unexpected-multiline */
+                      toScreamingSnakeCase(childComponent_sGeometricVariationsNames);
+
+        }
+
+      }
+
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineDecorativeVariationsAndSetCorrespondenceWithOnesOfChildrenComponents<
+    ComponentClass extends {
+      DecorativeVariations: { [decorativeVariationKey: string]: string; };
+      selfAndChildrenComponentsDecorativeVariationsCorrespondence:
+          { [childrenComponentKey: string]: { [ownDecorativeVariationValue: string]: string; }; };
+    }
+  >(
+    decorativeVariationsCorrespondenceDefinition:
+        { [ ownDecorativeVariationKey: string ]: { [ childrenComponentKey: string ]: string; }; },
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    YDF_ComponentsCoordinator.defineDecorativeVariations(
+      Object.keys(decorativeVariationsCorrespondenceDefinition), TargetComponentClass
+    );
+
+    for (
+      const [ ownDecorativeVariationKey, correspondenceWithDecorativeVariationsOfChildrenComponents ] of
+          Object.entries(decorativeVariationsCorrespondenceDefinition)
+    ) {
+
+      const ownDecorativeVariationValue: string = toScreamingSnakeCase(ownDecorativeVariationKey);
+
+      for (
+        const [ childComponentName, childComponent_sDecorativeVariationsNames ] of
+            Object.entries(correspondenceWithDecorativeVariationsOfChildrenComponents)
+      ) {
+
+        if (isUndefined(TargetComponentClass.selfAndChildrenComponentsDecorativeVariationsCorrespondence[childComponentName])) {
+          TargetComponentClass.selfAndChildrenComponentsDecorativeVariationsCorrespondence[childComponentName] = {
+            [ownDecorativeVariationValue]: toScreamingSnakeCase(childComponent_sDecorativeVariationsNames)
+          };
+        } else {
+          TargetComponentClass.
+              selfAndChildrenComponentsDecorativeVariationsCorrespondence
+                  /* eslint-disable no-unexpected-multiline --
+                   * Allow line breaks for bracket notation and long fully qualified names. */
+                  [childComponentName]
+                  [ownDecorativeVariationValue] =
+                  /* eslint-enable no-unexpected-multiline */
+                      toScreamingSnakeCase(childComponent_sDecorativeVariationsNames);
+        }
+
+      }
+
+    }
+
+    return TargetComponentClass;
+
+  }
+
   public static generateRootElementModifierCSS_Classes(
     {
       CSS_Namespace,
@@ -62,8 +209,10 @@ export default abstract class YDF_ComponentsCoordinator {
       areThemesCSS_ClassesCommon,
       activeGeometricVariation,
       allGeometricVariations,
+      activeGeometricModifiers = [],
       activeDecorativeVariation,
-      allDecorativeVariations,
+      allDecorativeVariations = {},
+      activeDecorativeModifiers = [],
       other = []
     }: Readonly<{
       CSS_Namespace: string;
@@ -72,8 +221,10 @@ export default abstract class YDF_ComponentsCoordinator {
       areThemesCSS_ClassesCommon: boolean;
       activeGeometricVariation: string;
       allGeometricVariations: Readonly<{ [geometricVariationKey: string]: string; }>;
-      activeDecorativeVariation: string;
-      allDecorativeVariations: Readonly<{ [decorativeVariationKey: string]: string; }>;
+      activeGeometricModifiers?: ReadonlyArray<string>;
+      activeDecorativeVariation?: string;
+      allDecorativeVariations?: Readonly<{ [decorativeVariationKey: string]: string; }>;
+      activeDecorativeModifiers?: ReadonlyArray<string>;
       other?: ReadonlyArray<string>;
     }>
   ): Array<string> {
@@ -82,8 +233,16 @@ export default abstract class YDF_ComponentsCoordinator {
           [ `${ CSS_Namespace }__${ toUpperCamelCase(activeTheme) }Theme` ] : [],
       ...Object.entries(allGeometricVariations).length > 1 ?
           [ `${ CSS_Namespace }__${ toUpperCamelCase(activeGeometricVariation) }GeometricVariation` ] : [],
-      ...Object.entries(allDecorativeVariations).length > 1 ?
+      ...activeGeometricModifiers.map(
+        (geometricModifier: string): string =>
+            `${ CSS_Namespace }__${ toUpperCamelCase(geometricModifier) }GeometricModifier`
+      ),
+      ...Object.entries(allDecorativeVariations).length > 1 && isNotUndefined(activeDecorativeVariation) ?
           [ `${ CSS_Namespace }__${ toUpperCamelCase(activeDecorativeVariation) }DecorativeVariation` ] : [],
+      ...activeDecorativeModifiers.map(
+        (activeDecorativeModifier: string): string =>
+            `${ CSS_Namespace }__${ toUpperCamelCase(activeDecorativeModifier) }DecorativeModifier`
+      ),
       ...other
     ];
   }