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

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -2,6 +2,10 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="UsePropertyAccessSyntax" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="ImplicitTypeConversion" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="BITS" value="1720" />
+      <option name="FLAG_EXPLICIT_CONVERSION" value="true" />
+      <option name="IGNORE_NODESET_TO_BOOLEAN_VIA_STRING" value="true" />
+    </inspection_tool>
   </profile>
 </component>

package/README.md

@@ -18,6 +18,7 @@ npm i @yamato-daiwa/frontend-vue @yamato-daiwa/frontend@2.0.0-beta.10
 
 + **@yamato-daiwa/frontend**: 2.0.0-beta.10
 + **vue**: ~3.5.0
++ **vue-facing-decorator**: ~3.0.0
 + **vue-router**: ~4.5.0
 
 
@@ -32,3 +33,7 @@ npm i @yamato-daiwa/frontend-vue @yamato-daiwa/frontend@2.0.0-beta.10
 
 + Buttons
   + [Plain (Button)](https://frontend.yamato-daiwa.com/AdaptationsToFrameworks/Vue/GUI_Components/Children/Controls/Buttons/Plain/Button-Vue.english.html) 
+  
+
+#### Validatables
+

package/Source/Functions/getElementByVueReference.ts

@@ -1,30 +1,127 @@
 import type { ComponentPublicInstance } from "vue";
-import { Logger, DOM_ElementRetrievingFailedError, isUndefined } from "@yamato-daiwa/es-extensions";
+import {
+  Logger,
+  DOM_ElementRetrievingFailedError,
+  isUndefined,
+  isNotUndefined,
+  UnexpectedEventError
+} from "@yamato-daiwa/es-extensions";
 
 
 export default function getElementByVueReference(
-  vueReferenceID: string,
-  parentVueComponent: ComponentPublicInstance
-): Element | null {
+  compoundParameter: Readonly<{
+    vueReferenceID: string;
+    parentVueComponent: ComponentPublicInstance;
+    mustExpectExactlyOneElement: true;
+  }>
+): Element;
+
+export default function getElementByVueReference(
+  compoundParameter: Readonly<{
+    vueReferenceID: string;
+    parentVueComponent: ComponentPublicInstance;
+    mustExpectExactlyOneElement: false;
+  }>
+): Element | null;
+
+export default function getElementByVueReference<DOM_ElementSubtype extends Element>(
+  compoundParameter: Readonly<{
+    vueReferenceID: string;
+    parentVueComponent: ComponentPublicInstance;
+    expectedDOM_ElementSubtype: new () => DOM_ElementSubtype;
+    mustExpectExactlyOneElement: true;
+  }>
+): DOM_ElementSubtype;
+
+export default function getElementByVueReference<DOM_ElementSubtype extends Element>(
+  compoundParameter: Readonly<{
+    vueReferenceID: string;
+    parentVueComponent: ComponentPublicInstance;
+    expectedDOM_ElementSubtype: new () => DOM_ElementSubtype;
+    mustExpectExactlyOneElement: false;
+  }>
+): DOM_ElementSubtype | null;
+
+
+export default function getElementByVueReference<DOM_ElementSubtype extends Element>(
+  {
+    parentVueComponent,
+    vueReferenceID,
+    expectedDOM_ElementSubtype,
+    mustExpectExactlyOneElement
+  }: Readonly<{
+    vueReferenceID: string;
+    parentVueComponent: ComponentPublicInstance;
+    expectedDOM_ElementSubtype?: new () => DOM_ElementSubtype;
+    mustExpectExactlyOneElement: boolean;
+  }>
+): DOM_ElementSubtype | null {
 
   const referenceContent: unknown = parentVueComponent.$refs[vueReferenceID];
 
   if (isUndefined(referenceContent)) {
+
+    if (mustExpectExactlyOneElement) {
+      Logger.throwErrorWithFormattedMessage({
+        errorInstance: new UnexpectedEventError(
+          `Expected that the Vue reference with ID "${ vueReferenceID }" refers to single DOM element while actually ` +
+            "no such mounted element."
+        ),
+        title: UnexpectedEventError.localization.defaultTitle,
+        occurrenceLocation: "getElementByVueReference(compoundParameter)"
+      });
+    }
+
+
+    return null;
+
+  }
+
+
+  if (Array.isArray(referenceContent)) {
+
+    if (mustExpectExactlyOneElement) {
+      Logger.throwErrorWithFormattedMessage({
+        errorInstance: new UnexpectedEventError(
+          `Expected that the Vue reference with ID "${ vueReferenceID }" refers to single DOM element while actually ` +
+            "refers to multiples ones."
+        ),
+        title: UnexpectedEventError.localization.defaultTitle,
+        occurrenceLocation: "getElementByVueReference(compoundParameter)"
+      });
+    }
+
+
     return null;
+
   }
 
 
   if (!(referenceContent instanceof Element)) {
-    Logger.throwErrorAndLog({
+    Logger.throwErrorWithFormattedMessage({
       errorInstance: new DOM_ElementRetrievingFailedError({
-        customMessage: `The Vue reference with id "${ vueReferenceID }" in not the instance of native Element.`
+        customMessage:
+            `The Vue reference with ID "${ vueReferenceID }" refers to non-empty object while it is not the instance ` +
+              "of `Element`."
       }),
-      occurrenceLocation: "getElementByVueReference(vueReferenceID, parentVueComponent)",
+      occurrenceLocation: "getElementByVueReference(compoundParameter)",
       title: DOM_ElementRetrievingFailedError.localization.defaultTitle
     });
   }
 
 
-  return referenceContent;
+  if (isNotUndefined(expectedDOM_ElementSubtype) && !(referenceContent instanceof expectedDOM_ElementSubtype)) {
+    Logger.throwErrorWithFormattedMessage({
+      errorInstance: new UnexpectedEventError(
+        `The Vue reference with ID "${ vueReferenceID }" refers instance of \`Element\` but contrary to expectations ` +
+          `it is not instance of ${ expectedDOM_ElementSubtype.name }".`
+      ),
+      title: UnexpectedEventError.localization.defaultTitle,
+      occurrenceLocation: "getElementByVueReference(compoundParameter)"
+    });
+  }
+
+
+  return null;
 
 }

package/Source/GUI_Components/AdmonitionBlock/AdmonitionBlock.vue

@@ -0,0 +1,67 @@
+<template lang="pug">
+
+  VerticallySlidingAlwaysMountedContainer.AdmonitionBlock--YDF(
+    v-model="isDisplaying"
+    role="alert"
+    :class="rootElementModifierCSS_Classes"
+  )
+
+    slot(
+      v-if="$slots.CustomSVG_Icon"
+      name="CustomSVG_Icon"
+    )
+
+    component.AdmonitionBlock--YDF-SVG_Icon(
+      v-else-if="hasDefaultSVG_Icon"
+      :is="defaultSVG_IconComponentName"
+    )
+
+    .AdmonitionBlock--YDF-Title(
+      v-if="title"
+      id=TITLE_HTML_ID
+    ) {{ title }}
+
+    .AdmonitionBlock--YDF-MainContent(
+      :aria-labelledby="title ? TITLE_HTML_ID : null"
+    )
+
+</template>
+
+
+<script lang="ts">
+
+  import { Component as VueComponentConfiguration, toNative as transformToOptionAPI_Component } from "vue-facing-decorator";
+  import AdmonitionBlockLogic from "./AdmonitionBlockLogic.vue";
+  import { Vue3SlideUpDown as VerticallySlidingAlwaysMountedContainer } from "vue3-slide-up-down";
+  import PencilIcon__Circled__Filled from "../../SVG_Icons/Pencil/PencilIcon__Circled__Filled.vue";
+  import ExclamationMarkIcon__Circled__Filled
+    from "../../SVG_Icons/ExclamationMark/ExclamationMarkIcon__Circled__Filled.vue";
+  import ExclamationMarkIcon__Triangled__Filled
+    from "../../SVG_Icons/ExclamationMark/ExclamationMarkIcon__Triangled__Filled.vue";
+  import CheckmarkIcon__Circled__Filled from "../../SVG_Icons/Checkmark/CheckmarkIcon__Circled__Filled.vue";
+  import InfoSignIcon__Circled__Filled from "../../SVG_Icons/InfoSign/InfoSignIcon__Circled__Filled.vue";
+  import QuestionMarkIcon__Circled__Filled from "../../SVG_Icons/QuestionMark/QuestionMarkIcon__Circled__Filled.vue";
+  import MultiplicationSignIcon__Boxed__Filled
+    from "../../SVG_Icons/MultiplicationSign/MultiplicationSignIcon__Boxed__Filled.vue";
+
+  @VueComponentConfiguration({
+    name: AdmonitionBlockLogic.CSS_NAMESPACE,
+    components: {
+      VerticallySlidingAlwaysMountedContainer,
+      PencilIcon__Circled__Filled,
+      ExclamationMarkIcon__Circled__Filled,
+      ExclamationMarkIcon__Triangled__Filled,
+      CheckmarkIcon__Circled__Filled,
+      InfoSignIcon__Circled__Filled,
+      QuestionMarkIcon__Circled__Filled,
+      MultiplicationSignIcon__Boxed__Filled
+    }
+  })
+  class AdmonitionBlock extends AdmonitionBlockLogic {}
+
+
+  export default AdmonitionBlock.applyStaticMembersToInheritorTransformedToOptionAPI(
+    transformToOptionAPI_Component(AdmonitionBlock)
+  );
+
+</script>

package/Source/GUI_Components/AdmonitionBlock/AdmonitionBlock.vue.d.ts

@@ -0,0 +1,48 @@
+import type { Vue as VueComponent } from "vue-facing-decorator";
+import type { AdmonitionBlockLocalization } from "@yamato-daiwa/frontend";
+
+
+export default class AdmonitionBlock extends VueComponent {
+
+  public static readonly Themes: AdmonitionBlock.Themes;
+
+  public static defineThemes(themesNames: ReadonlyArray<string>): typeof AdmonitionBlock;
+
+  public static readonly GeometricVariations: AdmonitionBlock.GeometricVariations;
+
+  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock;
+
+  public static readonly DecorativeVariations: AdmonitionBlock.DecorativeVariations;
+
+  public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock;
+
+  public static localization: AdmonitionBlockLocalization;
+
+}
+
+
+export namespace AdmonitionBlock {
+
+
+  export type Themes = {
+    readonly regular: "REGULAR";
+    [themeName: string]: string;
+  };
+
+  export type GeometricVariations = {
+    readonly regular: "REGULAR";
+    readonly stickyNoteLike: "STICKY_NOTE_LIKE";
+    [variationName: string]: string;
+  };
+
+  export type DecorativeVariations = {
+    readonly notice: "NOTICE";
+    readonly error: "ERROR";
+    readonly warning: "WARNING";
+    readonly success: "SUCCESS";
+    readonly guidance: "GUIDANCE";
+    readonly question: "QUESTION";
+    [variationName: string]: string;
+  };
+
+}

package/Source/GUI_Components/AdmonitionBlock/{AdmonitionBlock.vue.ts → AdmonitionBlockLogic.vue.ts}

@@ -1,18 +1,15 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import componentVueTemplate from "./AdmonitionBlock.vue.pug";
-import PencilIcon__Circled__Filled from "../../SVG_Icons/Pencil/PencilIcon__Circled__Filled.vue";
-import ExclamationMarkIcon__Circled__Filled from "./../../SVG_Icons/ExclamationMark/ExclamationMarkIcon__Circled__Filled.vue";
-import ExclamationMarkIcon__Triangled__Filled from "./../../SVG_Icons/ExclamationMark/ExclamationMarkIcon__Triangled__Filled.vue";
-import CheckmarkIcon__Circled__Filled from "../../SVG_Icons/Checkmark/CheckmarkIcon__Circled__Filled.vue";
-import InfoSignIcon__Circled__Filled from "../../SVG_Icons/InfoSign/InfoSignIcon__Circled__Filled.vue";
-import QuestionMarkIcon__Circled__Filled from "../../SVG_Icons/QuestionMark/QuestionMarkIcon__Circled__Filled.vue";
-import MultiplicationSignIcon__Boxed__Filled from
-    "../../SVG_Icons/MultiplicationSign/MultiplicationSignIcon__Boxed__Filled.vue";
 import type { AdmonitionBlockLocalization } from "@yamato-daiwa/frontend";
 import { admonitionBlockYDF_ComponentLocalization__english } from "@yamato-daiwa/frontend";
 
-/* ─── Related GUI_Components ─────────────────────────────────────────────────────────────────────────────────────── */
-import { Vue3SlideUpDown as VerticallySlidingAlwaysMountedContainer } from "vue3-slide-up-down";
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import type VuePropertyValidator from "../_VuePropertiesValidators/VuePropertyValidator";
+import ThemeVuePropertyValidator from "../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import BooleanVuePropertyValidator from "../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import NonEmptyStringVuePropertyValidator from "../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import DecorativeVariationVuePropertyValidator from "../_VuePropertiesValidators/DecorativeVariationVuePropertyValidator";
+import preventNullForOptionalVueProperty from "../_Decorators/preventNullForOptionalVueProperty";
 
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
@@ -22,22 +19,17 @@ import {
 } from "vue-facing-decorator";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import { isStringOfLength, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
 import YDF_ComponentsCoordinator from "../YDF_ComponentsCoordinator";
+import AccessibleFromTemplateAsNonReactive from "../_Decorators/AccessibleFromTemplateAsNonReactive";
+import InfoSignIcon__Circled__Filled from "../../SVG_Icons/InfoSign/InfoSignIcon__Circled__Filled.vue";
+  import { Vue3SlideUpDown as VerticallySlidingAlwaysMountedContainer } from "vue3-slide-up-down";
 
 
 @VueComponentConfiguration({
   name: AdmonitionBlock.CSS_NAMESPACE,
-  template: componentVueTemplate,
   components: {
-    VerticallySlidingAlwaysMountedContainer,
-    PencilIcon__Circled__Filled,
-    ExclamationMarkIcon__Circled__Filled,
-    ExclamationMarkIcon__Triangled__Filled,
-    CheckmarkIcon__Circled__Filled,
     InfoSignIcon__Circled__Filled,
-    QuestionMarkIcon__Circled__Filled,
-    MultiplicationSignIcon__Boxed__Filled
+    VerticallySlidingAlwaysMountedContainer
   }
 })
 class AdmonitionBlock extends VueComponent {
@@ -46,15 +38,31 @@ class AdmonitionBlock extends VueComponent {
 
 
   @VueProperty({
-    type: String,
     required: false,
-    validator: (rawValue: unknown): boolean => isStringOfLength(rawValue, { minimalCharactersCount: 1 })
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "title",
+        componentName: AdmonitionBlock.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
   })
-  protected readonly title!: string;
+  @preventNullForOptionalVueProperty
+  protected readonly title?: string;
 
 
   /* ━━━ Dismissing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  @VueProperty({ type: Boolean, default: false })
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "dismissible",
+        componentName: AdmonitionBlock.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly dismissible!: boolean;
 
   protected isDisplaying: boolean = true;
@@ -68,10 +76,10 @@ class AdmonitionBlock extends VueComponent {
   public static readonly Themes: AdmonitionBlock.Themes = { regular: "REGULAR" };
 
   @VueProperty({
-    type: String,
     default: AdmonitionBlock.Themes.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, AdmonitionBlock.Themes)
+    validator: ThemeVuePropertyValidator(AdmonitionBlock)
   })
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
   public static defineThemes(themesNames: ReadonlyArray<string>): typeof AdmonitionBlock {
@@ -84,7 +92,17 @@ class AdmonitionBlock extends VueComponent {
     AdmonitionBlock.areThemesCSS_ClassesCommon = true;
   }
 
-  @VueProperty({ type: Boolean, default: AdmonitionBlock.areThemesCSS_ClassesCommon })
+  @VueProperty({
+    default: AdmonitionBlock.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: AdmonitionBlock.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly areThemesCSS_ClassesCommon!: boolean;
 
 
@@ -95,10 +113,10 @@ class AdmonitionBlock extends VueComponent {
   };
 
   @VueProperty({
-    type: String,
     default: AdmonitionBlock.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, AdmonitionBlock.GeometricVariations)
+    validator: GeometricVariationVuePropertyValidator(AdmonitionBlock)
   })
+  @preventNullForOptionalVueProperty
   protected readonly geometricVariation!: string;
 
   public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock {
@@ -117,9 +135,8 @@ class AdmonitionBlock extends VueComponent {
   };
 
   @VueProperty({
-    type: String,
     required: true,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, AdmonitionBlock.DecorativeVariations)
+    validator: DecorativeVariationVuePropertyValidator(AdmonitionBlock)
   })
   protected readonly decorativeVariation!: string;
 
@@ -129,7 +146,17 @@ class AdmonitionBlock extends VueComponent {
 
 
   /* ━━━ SVG Icon ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  @VueProperty({ type: Boolean, default: false })
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "hasDefaultSVG_Icon",
+        componentName: AdmonitionBlock.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly hasDefaultSVG_Icon!: boolean;
 
   protected get defaultSVG_IconComponentName(): string | null {
@@ -147,32 +174,21 @@ class AdmonitionBlock extends VueComponent {
 
   /* ━━━ CSS Classes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   protected get rootElementModifierCSS_Classes(): Array<string> {
-    return [
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: AdmonitionBlock.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: AdmonitionBlock.GeometricVariations,
-        CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
-        decorativeVariation: this.decorativeVariation,
-        allDecorativeVariations: AdmonitionBlock.DecorativeVariations,
-        CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
-      })
-
-    ];
+    return YDF_ComponentsCoordinator.generateRootElementModifierCSS_Classes({
+      CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE,
+      activeTheme: this.theme,
+      allThemes: AdmonitionBlock.Themes,
+      areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+      activeGeometricVariation: this.geometricVariation,
+      allGeometricVariations: AdmonitionBlock.GeometricVariations,
+      activeDecorativeVariation: this.decorativeVariation,
+      allDecorativeVariations: AdmonitionBlock.DecorativeVariations
+    });
   }
 
 
   /* ━━━ Localization ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  @AccessibleFromTemplateAsNonReactive
   public static localization: AdmonitionBlockLocalization = admonitionBlockYDF_ComponentLocalization__english;
 
 
@@ -191,11 +207,19 @@ class AdmonitionBlock extends VueComponent {
   protected TITLE_HTML_ID: string = `${ this.INSTANCE_ID }-TITLE`;
 
 
-  /* ━━━ Non-Reactive Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  protected localization!: AdmonitionBlockLocalization;
-
-  public created(): void {
-    this.localization = AdmonitionBlock.localization;
+  /* ━━━ Transforming to Options API ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static applyStaticMembersToInheritorTransformedToOptionAPI(inheritedComponent: object): object {
+    return Object.defineProperties(
+      inheritedComponent,
+      {
+        Themes: { value: AdmonitionBlock.Themes },
+        defineThemes: { value: AdmonitionBlock.defineThemes },
+        GeometricVariations: { value: AdmonitionBlock.GeometricVariations },
+        defineGeometricVariations: { value: AdmonitionBlock.defineGeometricVariations },
+        DecorativeVariations: { value: AdmonitionBlock.DecorativeVariations },
+        defineDecorativeVariations: { value: AdmonitionBlock.defineDecorativeVariations }
+      }
+    );
   }
 
 }