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

package/Source/GUI_Components/Badge/Badge.vue.ts

@@ -1,6 +1,17 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import componentVueTemplate from "./Badge.vue.pug";
 
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import VuePropertyValidator from "../_VuePropertiesValidators/VuePropertyValidator";
+import ThemeVuePropertyValidator from "../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import GeometricModifiersVuePropertyValidator from "../_VuePropertiesValidators/GeometricModifiersVuePropertyValidator";
+import DecorativeVariationVuePropertyValidator from "../_VuePropertiesValidators/DecorativeVariationVuePropertyValidator";
+import DecorativeModifiersVuePropertyValidator from "../_VuePropertiesValidators/DecorativeModifiersVuePropertyValidator";
+import NonEmptyStringVuePropertyValidator from "../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import BooleanVuePropertyValidator from "../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import preventNullForOptionalVueProperty from "../_Decorators/preventNullForOptionalVueProperty";
+
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
   ComponentBase as VueComponentConfiguration,
@@ -9,8 +20,8 @@ import {
 } from "vue-facing-decorator";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
 import YDF_ComponentsCoordinator from "../YDF_ComponentsCoordinator";
+import { isNonEmptyString, type ElementOfPseudoEnumeration } from "@yamato-daiwa/es-extensions";
 
 
 @VueComponentConfiguration({
@@ -22,13 +33,41 @@ class Badge extends VueComponent {
   public static CSS_NAMESPACE: string = "Badge--YDF";
 
 
-  @VueProperty({ type: String })
-  protected readonly keyLabel?: string | null;
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "keyLabel",
+        componentName: Badge.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly keyLabel?: string;
 
-  @VueProperty({ type: String, required: true })
+  @VueProperty({
+    required: true,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "valueLabel",
+        componentName: Badge.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
   protected readonly valueLabel!: string;
 
-  @VueProperty({ type: String, default: "span" })
+  @VueProperty({
+    default: "span",
+    validator: VuePropertyValidator.create({
+      checker: isNonEmptyString,
+      messageSpecificPart: "If specified, must be the valid HTML tag name",
+      propertyName: "rootElementTag",
+      componentName: Badge.CSS_NAMESPACE
+    })
+  })
+  @preventNullForOptionalVueProperty
   protected readonly rootElementTag!: string;
 
 
@@ -36,10 +75,10 @@ class Badge extends VueComponent {
   public static readonly Themes: Badge.Themes = { regular: "REGULAR" };
 
   @VueProperty({
-    type: String,
     default: Badge.Themes.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.Themes)
+    validator: ThemeVuePropertyValidator(Badge)
   })
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
   public static defineThemes(themesNames: ReadonlyArray<string>): typeof Badge {
@@ -52,7 +91,17 @@ class Badge extends VueComponent {
     Badge.areThemesCSS_ClassesCommon = true;
   }
 
-  @VueProperty({ type: Boolean, default: Badge.areThemesCSS_ClassesCommon })
+  @VueProperty({
+    default: Badge.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: Badge.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly areThemesCSS_ClassesCommon!: boolean;
 
 
@@ -63,25 +112,27 @@ class Badge extends VueComponent {
   };
 
   @VueProperty({
-    type: String,
     default: Badge.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.GeometricVariations)
+    validator: GeometricVariationVuePropertyValidator(Badge)
   })
+  @preventNullForOptionalVueProperty
   protected readonly geometricVariation!: string;
 
   public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof Badge {
     return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, Badge);
   }
 
+  public static readonly GeometricModifiers: Badge.GeometricModifiers = {
+    pillShape: "PILL_SHAPE",
+    singleLine: "SINGLE_LINE"
+  };
+
   @VueProperty({
-    type: Array,
-    default: (): ReadonlyArray<Badge.GeometricModifiers> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Badge.GeometricModifiers)
-        )
+    default: (): ReadonlyArray<ElementOfPseudoEnumeration<Badge.GeometricModifiers>> => [],
+    validator: GeometricModifiersVuePropertyValidator(Badge)
   })
-  protected readonly geometricModifiers!: ReadonlyArray<Badge.GeometricModifiers>;
+  @preventNullForOptionalVueProperty
+  protected readonly geometricModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<Badge.GeometricModifiers>>;
 
 
   /* ─── Decoration ───────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -103,9 +154,8 @@ class Badge extends VueComponent {
   };
 
   @VueProperty({
-    type: String,
     required: true,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.DecorativeVariations)
+    validator: DecorativeVariationVuePropertyValidator(Badge)
   })
   protected readonly decorativeVariation!: string;
 
@@ -113,47 +163,32 @@ class Badge extends VueComponent {
     return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, Badge);
   }
 
-   @VueProperty({
-    type: Array,
-    default: (): ReadonlyArray<Badge.DecorativeModifiers> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Badge.DecorativeModifiers)
-        )
+  public static readonly DecorativeModifiers: Badge.DecorativeModifiers = {
+    bordersDisguising: "BORDERS_DISGUISING",
+    noBackground: "NO_BACKGROUND"
+  };
+
+  @VueProperty({
+    default: (): ReadonlyArray<ElementOfPseudoEnumeration<Badge.DecorativeModifiers>> => [],
+    validator: DecorativeModifiersVuePropertyValidator(Badge)
   })
-  protected readonly decorativeModifiers!: ReadonlyArray<Badge.DecorativeModifiers>;
+  protected readonly decorativeModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<Badge.DecorativeModifiers>>;
 
 
   /* ━━━ CSS Classes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
-    return [
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Badge.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Badge.GeometricVariations,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers),
-
-      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
-        decorativeVariation: this.decorativeVariation,
-        allDecorativeVariations: Badge.DecorativeVariations,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedDecorativeModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.decorativeModifiers)
-
-    ];
+    return YDF_ComponentsCoordinator.generateRootElementModifierCSS_Classes({
+      CSS_Namespace: Badge.CSS_NAMESPACE,
+      activeTheme: this.theme,
+      allThemes: Badge.Themes,
+      areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+      activeGeometricVariation: this.geometricVariation,
+      allGeometricVariations: Badge.GeometricVariations,
+      activeGeometricModifiers: this.geometricModifiers,
+      activeDecorativeVariation: this.decorativeVariation,
+      allDecorativeVariations: Badge.DecorativeVariations,
+      activeDecorativeModifiers: this.decorativeModifiers
+    });
   }
 
 }
@@ -171,10 +206,10 @@ namespace Badge {
     [variationName: string]: string;
   };
 
-  export enum GeometricModifiers {
-    pillShape = "PILL_SHAPE",
-    singleLine = "SINGLE_LINE"
-  }
+  export type GeometricModifiers = Readonly<{
+    pillShape: "PILL_SHAPE";
+    singleLine: "SINGLE_LINE";
+  }>;
 
   export type DecorativeVariations = {
     readonly veryCatchyBright: "VERY_CATCHY_BRIGHT";
@@ -194,10 +229,10 @@ namespace Badge {
     [variationName: string]: string;
   };
 
-  export enum DecorativeModifiers {
-    bordersDisguising = "BORDERS_DISGUISING",
-    noBackground = "NO_BACKGROUND"
-  }
+  export type DecorativeModifiers = Readonly<{
+    bordersDisguising: "BORDERS_DISGUISING";
+    noBackground: "NO_BACKGROUND";
+  }>;
 
 }
 

package/Source/GUI_Components/Badge/LoadingPlaceholder/Badge-LoadingPlaceholder.vue.ts

@@ -1,7 +1,17 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import Badge from "../Badge.vue";
 import componentVueTemplate from "./Badge-LoadingPlaceholder.vue.pug";
 
+/* ─── GUI Components ─────────────────────────────────────────────────────────────────────────────────────────────── */
+import Badge from "../Badge.vue";
+
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import type VuePropertyValidator from "../../_VuePropertiesValidators/VuePropertyValidator";
+import ThemeVuePropertyValidator from "../../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import GeometricModifiersVuePropertyValidator from "../../_VuePropertiesValidators/GeometricModifiersVuePropertyValidator";
+import preventNullForOptionalVueProperty from "../../_Decorators/preventNullForOptionalVueProperty";
+import BooleanVuePropertyValidator from "../../_VuePropertiesValidators/BooleanVuePropertyValidator";
+
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
   ComponentBase as VueComponentConfiguration,
@@ -10,65 +20,74 @@ import {
 } from "vue-facing-decorator";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
 import YDF_ComponentsCoordinator from "../../YDF_ComponentsCoordinator";
+import { type ElementOfPseudoEnumeration } from "@yamato-daiwa/es-extensions";
 
 
 @VueComponentConfiguration({
-  name: "Badge--YDF-LoadingPlaceholder",
+  name: "Badge--YDF__LoadingPlaceholder",
   template: componentVueTemplate
 })
 export default class BadgeLoadingPlaceholder extends VueComponent {
 
   @VueProperty({
-    type: String,
     default: Badge.Themes.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.Themes)
+    validator: ThemeVuePropertyValidator({
+      Themes: Badge.Themes,
+      CSS_NAMESPACE: "Badge--YDF__LoadingPlaceholder"
+    })
   })
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
-  @VueProperty({ type: Boolean, default: Badge.areThemesCSS_ClassesCommon })
+
+  @VueProperty({
+    default: Badge.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: Badge.name,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly areThemesCSS_ClassesCommon!: boolean;
 
 
   @VueProperty({
-    type: String,
     default: Badge.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.GeometricVariations)
+    validator: GeometricVariationVuePropertyValidator({
+      GeometricVariations: Badge.GeometricVariations,
+      CSS_NAMESPACE: "Badge--YDF__LoadingPlaceholder"
+    })
   })
+  @preventNullForOptionalVueProperty
   protected readonly geometricVariation!: string;
 
+
   @VueProperty({
-    type: Array,
     default: (): ReadonlyArray<Badge.GeometricModifiers> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Badge.GeometricModifiers)
-        )
+    validator: GeometricModifiersVuePropertyValidator({
+      GeometricModifiers: Badge.GeometricModifiers,
+      CSS_NAMESPACE: "Badge--YDF__LoadingPlaceholder"
+    })
   })
-  protected readonly geometricModifiers!: ReadonlyArray<Badge.GeometricModifiers>;
+  @preventNullForOptionalVueProperty
+  protected readonly geometricModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<Badge.GeometricModifiers>>;
 
 
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
-    return [
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Badge.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Badge.GeometricVariations,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers)
+    return YDF_ComponentsCoordinator.generateRootElementModifierCSS_Classes({
+      CSS_Namespace: Badge.CSS_NAMESPACE,
+      activeTheme: this.theme,
+      allThemes: Badge.Themes,
+      areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+      activeGeometricVariation: this.geometricVariation,
+      allGeometricVariations: Badge.GeometricVariations,
+      activeGeometricModifiers: this.geometricModifiers
+    });
 
-    ];
   }
 
 }

package/Source/GUI_Components/Controls/Buttons/Closing/ClosingButton.vue.pug

@@ -0,0 +1 @@
+.ClosingButton--YDF Closing!

package/Source/GUI_Components/Controls/Buttons/Closing/ClosingButton.vue.ts

@@ -0,0 +1,224 @@
+/* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import componentVueTemplate from "./ClosingButton.vue.pug";
+
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import type VuePropertyValidator from "../../../_VuePropertiesValidators/VuePropertyValidator";
+import BooleanVuePropertyValidator from "../../../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import ElementOfEnumerationVuePropertyValidator from "../../../_VuePropertiesValidators/ElementOfEnumerationVuePropertyValidator";
+import NonEmptyStringVuePropertyValidator from "../../../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import ThemeVuePropertyValidator from "../../../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../../../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import GeometricModifiersVuePropertyValidator from "../../../_VuePropertiesValidators/GeometricModifiersVuePropertyValidator";
+import DecorativeVariationVuePropertyValidator from "../../../_VuePropertiesValidators/DecorativeVariationVuePropertyValidator";
+import DecorativeModifiersVuePropertyValidator from "../../../_VuePropertiesValidators/DecorativeModifiersVuePropertyValidator";
+import preventNullForOptionalVueProperty from "../../../_Decorators/preventNullForOptionalVueProperty";
+
+/* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+import {
+  ComponentBase as VueComponentConfiguration,
+  Vue as VueComponent,
+  Prop as VueProperty
+} from "vue-facing-decorator";
+
+/* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import YDF_ComponentsCoordinator from "../../../YDF_ComponentsCoordinator";
+import { type ElementOfPseudoEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+@VueComponentConfiguration({
+  name: ClosingButton.CSS_NAMESPACE,
+  template: componentVueTemplate
+})
+class ClosingButton extends VueComponent {
+
+  /* ━━━ Static Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static CSS_NAMESPACE: string = "ClosingButton--YDF";
+
+  public static LabelLetterCases: ClosingButton.LabelLetterCases = {
+    uppercase: "UPPERCASE",
+    lowercase: "LOWERCASE",
+    capitalisation: "CAPITALISATION"
+  };
+
+
+  /* ━━━ Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ─── Textings ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "customLabel",
+        componentName: ClosingButton.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly customLabel?: string;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "noLabel",
+        componentName: ClosingButton.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly noLabel!: boolean;
+
+  @VueProperty({
+    default: ClosingButton.LabelLetterCases.lowercase,
+    get validator(): VuePropertyValidator {
+      return ElementOfEnumerationVuePropertyValidator({
+        enumerationFullyQualifiedName: "ClosingButton.LabelLetterCases",
+        enumeration: ClosingButton.LabelLetterCases,
+        propertyName: "labelLetterCase",
+        componentName: ClosingButton.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly labelLetterCase!: ElementOfPseudoEnumeration<ClosingButton.LabelLetterCases>;
+
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "accessibilityGuidance",
+        componentName: ClosingButton.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly accessibilityGuidance?: string;
+
+
+  /* ━━━ Theming ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static readonly Themes: ClosingButton.Themes = { regular: "REGULAR" };
+
+  @VueProperty({
+    default: ClosingButton.Themes.regular,
+    validator: ThemeVuePropertyValidator(ClosingButton)
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly theme!: string;
+
+  public static defineThemes(themesNames: ReadonlyArray<string>): typeof ClosingButton {
+    return YDF_ComponentsCoordinator.defineThemes(themesNames, ClosingButton);
+  }
+
+  public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
+
+  public static considerThemesAsCommon(): void {
+    ClosingButton.areThemesCSS_ClassesCommon = true;
+  }
+
+  @VueProperty({
+    default: ClosingButton.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: ClosingButton.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly areThemesCSS_ClassesCommon!: boolean;
+
+
+  /* ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  public static readonly GeometricVariations: ClosingButton.GeometricVariations = { regular: "REGULAR" };
+
+  @VueProperty({
+    default: ClosingButton.GeometricVariations.regular,
+    validator: GeometricVariationVuePropertyValidator(ClosingButton)
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly geometricVariation!: string;
+
+  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof ClosingButton {
+    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, ClosingButton);
+  }
+
+  public static readonly GeometricModifiers: ClosingButton.GeometricModifiers = { noRoundings: "NO_ROUNDINGS" };
+
+  @VueProperty({
+    default: (): ReadonlyArray<ElementOfPseudoEnumeration<ClosingButton.GeometricModifiers>> => [],
+    validator: GeometricModifiersVuePropertyValidator(ClosingButton)
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly geometricModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<ClosingButton.GeometricModifiers>>;
+
+
+  /* ─── Decoration ───────────────────────────────────────────────────────────────────────────────────────────────── */
+  public static readonly DecorativeVariations: ClosingButton.DecorativeVariations = { regular: "REGULAR" };
+
+  @VueProperty({
+    default: ClosingButton.DecorativeVariations.regular,
+    validator: DecorativeVariationVuePropertyValidator(ClosingButton)
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly decorativeVariation!: string;
+
+  public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof ClosingButton {
+    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, ClosingButton);
+  }
+
+  public static readonly DecorativeModifiers: ClosingButton.DecorativeModifiers = {
+    bordersDisguising: "BORDERS_DISGUISING",
+    noBackground: "NO_BACKGROUND",
+    noBackgroundInDefaultState: "NO_BACKGROUND_IN_DEFAULT_STATE"
+  };
+
+  @VueProperty({
+    default: (): ReadonlyArray<ElementOfPseudoEnumeration<ClosingButton.DecorativeModifiers>> => [],
+    validator: DecorativeModifiersVuePropertyValidator(ClosingButton)
+  })
+  protected readonly decorativeModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<ClosingButton.DecorativeModifiers>>;
+
+}
+
+
+namespace ClosingButton {
+
+  export type LabelLetterCases = Readonly<{
+    uppercase: "UPPERCASE";
+    lowercase: "LOWERCASE";
+    capitalisation: "CAPITALISATION";
+  }>;
+
+  export type Themes = {
+    readonly regular: "REGULAR";
+    [themeName: string]: string;
+  };
+
+  export type GeometricVariations = {
+    readonly regular: "REGULAR";
+    [variationName: string]: string;
+  };
+
+  export type GeometricModifiers = Readonly<{
+    noRoundings: "NO_ROUNDINGS";
+  }>;
+
+  export type DecorativeVariations = {
+    readonly regular: "REGULAR";
+    [variationName: string]: string;
+  };
+
+  export type DecorativeModifiers = Readonly<{
+    bordersDisguising: "BORDERS_DISGUISING";
+    noBackground: "NO_BACKGROUND";
+    noBackgroundInDefaultState: "NO_BACKGROUND_IN_DEFAULT_STATE";
+  }>;
+
+}
+
+
+export default ClosingButton;