@abgov/angular-components 4.9.0 → 4.9.1-dev.2

package/fesm2022/abgov-angular-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, HostListener, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule, Input, Component, booleanAttribute, EventEmitter, Output, numberAttribute, TemplateRef } from '@angular/core';
+import { forwardRef, HostListener, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule, Input, Component, ElementRef, booleanAttribute, ViewChild, EventEmitter, Output, numberAttribute, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, NgIf } from '@angular/common';
 import { NG_VALUE_ACCESSOR, CheckboxControlValueAccessor } from '@angular/forms';
@@ -240,9 +240,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * - Supports `disabled="true"` and `error="true` attribute bindings for convenience.
  * - Handles form control value changes and touch events via `ControlValueAccessor` methods.
  * - Allows for flexible value types (`unknown`), making it suitable for various data types like integers, dates, or booleans.
+ * - Uses ViewChild to capture a reference to the native GOA web component element via `#goaComponentRef`.
+ * - Uses Renderer2 for safe DOM manipulation (compatible with SSR and security best practices).
  *
  * ## Usage
- * Extend this class to create custom form controls. Implement additional functionality as needed for your specific use case.
+ * Extend this class to create custom form controls. Child components must:
+ * 1. Add `#goaComponentRef` template reference to their `goa-*` element in the template
+ * 2. Inject `Renderer2` in their constructor and pass it to `super(renderer)`
+ *
+ * ### Example:
+ * ```typescript
+ * @Component({
+ *   template: `<goa-input #goaComponentRef [value]="value" ...></goa-input>`
+ * })
+ * export class GoabInput extends GoabControlValueAccessor {
+ *   constructor(private cdr: ChangeDetectorRef, renderer: Renderer2) {
+ *     super(renderer);  // Required: pass Renderer2 to base class
+ *   }
+ * }
+ * ```
  *
  * ## Properties
  * - `id?`: An optional identifier for the component.
@@ -252,20 +268,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  *
  * ## Methods
  * - `markAsTouched()`: Marks the component as touched and triggers the `fcTouched` callback if defined.
- * - `writeValue(value: unknown)`: Writes a new value to the form control.
+ * - `writeValue(value: unknown)`: Writes a new value to the form control (can be overridden for special behavior like checkbox).
  * - `registerOnChange(fn: any)`: Registers a function to handle changes in the form control value.
  * - `registerOnTouched(fn: any)`: Registers a function to handle touch events on the form control.
  * - `setDisabledState?(isDisabled: boolean)`: Sets the disabled state of the component.
+ * - `convertValueToString(value: unknown)`: Converts a value to a string for DOM attribute assignment (can be overridden).
  *
  * ## Callbacks
  * - `fcChange?`: A function to handle changes in the form control value.
  * - `fcTouched?`: A function to handle touch events on the form control.
  */
 class GoabControlValueAccessor extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.touched = false;
-    }
     /**
      * Marks the component as touched. If the component is not already marked as touched,
      * it triggers the `fcTouched` callback (if defined) and sets the `touched` property to `true`.
@@ -276,12 +289,34 @@ class GoabControlValueAccessor extends GoabBaseComponent {
             this.touched = true;
         }
     }
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.touched = false;
+    }
+    /**
+     * Convert an arbitrary value into a string for DOM attribute assignment.
+     * Child classes can override when they need special formatting.
+     * @param value The value to convert
+     * @returns string representation or empty string for nullish/empty
+     */
+    convertValueToString(value) {
+        if (value === null || value === undefined || value === "") {
+            return "";
+        }
+        return String(value);
+    }
     /**
      * Writes a new value to the form control.
      * @param {unknown} value - The value to write.
      */
     writeValue(value) {
         this.value = value;
+        const el = this.goaComponentRef?.nativeElement;
+        if (el) {
+            const stringValue = this.convertValueToString(value);
+            this.renderer.setAttribute(el, "value", stringValue);
+        }
     }
     /**
      * Registers a function to call when the form control value changes.
@@ -305,8 +340,8 @@ class GoabControlValueAccessor extends GoabBaseComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabControlValueAccessor, isStandalone: true, selector: "ng-component", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], value: "value" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabControlValueAccessor, isStandalone: true, selector: "ng-component", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], value: "value" }, viewQueries: [{ propertyName: "goaComponentRef", first: true, predicate: ["goaComponentRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, decorators: [{
             type: Component,
@@ -314,7 +349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     template: ``, //** IMPLEMENT IN SUBCLASS
                 }]
-        }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -324,6 +359,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], value: [{
                 type: Input
+            }], goaComponentRef: [{
+                type: ViewChild,
+                args: ["goaComponentRef", { static: false, read: ElementRef }]
             }] } });
 
 class GoabAccordion extends GoabBaseComponent {
@@ -1035,8 +1073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class GoabCheckbox extends GoabControlValueAccessor {
-    constructor(cdr) {
-        super();
+    constructor(cdr, renderer) {
+        super(renderer);
         this.cdr = cdr;
         this.isReady = false;
         this.onChange = new EventEmitter();
@@ -1064,7 +1102,16 @@ class GoabCheckbox extends GoabControlValueAccessor {
         this.markAsTouched();
         this.fcChange?.(detail.binding === "check" ? detail.checked : detail.value || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    // Checkbox is a special case: it uses `checked` instead of `value`.
+    writeValue(value) {
+        this.value = value;
+        this.checked = !!value;
+        const el = this.goaComponentRef?.nativeElement;
+        if (el) {
+            this.renderer.setAttribute(el, "checked", this.checked ? "true" : "false");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabCheckbox, isStandalone: true, selector: "goab-checkbox", inputs: { name: "name", checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], text: "text", value: "value", ariaLabel: "ariaLabel", description: "description", reveal: "reveal", revealArialLabel: "revealArialLabel", maxWidth: "maxWidth" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1072,34 +1119,35 @@ class GoabCheckbox extends GoabControlValueAccessor {
                 useExisting: forwardRef(() => GoabCheckbox),
             },
         ], usesInheritance: true, ngImport: i0, template: ` <goa-checkbox
-      *ngIf="isReady"
-      [attr.name]="name"
-      [checked]="checked"
-      [disabled]="disabled"
-      [attr.indeterminate]="indeterminate ? 'true' : undefined"
-      [attr.error]="error"
-      [attr.text]="text"
-      [value]="value"
-      [attr.testid]="testId"
-      [attr.arialabel]="ariaLabel"
-      [attr.description]="getDescriptionAsString()"
-      [attr.revealarialabel]="revealArialLabel"
-      [id]="id"
-      [attr.maxwidth]="maxWidth"
-      [attr.mt]="mt"
-      [attr.mb]="mb"
-      [attr.ml]="ml"
-      [attr.mr]="mr"
-      (_change)="_onChange($event)"
-      >
-      <ng-content />
-      <div slot="description">
-        <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
-      </div>
-      <div slot="reveal">
-        <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
-      </div>
-    </goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    #goaComponentRef
+    *ngIf="isReady"
+    [attr.name]="name"
+    [checked]="checked"
+    [disabled]="disabled"
+    [attr.indeterminate]="indeterminate ? 'true' : undefined"
+    [attr.error]="error"
+    [attr.text]="text"
+    [value]="value"
+    [attr.testid]="testId"
+    [attr.arialabel]="ariaLabel"
+    [attr.description]="getDescriptionAsString()"
+    [attr.revealarialabel]="revealArialLabel"
+    [id]="id"
+    [attr.maxwidth]="maxWidth"
+    [attr.mt]="mt"
+    [attr.mb]="mb"
+    [attr.ml]="ml"
+    [attr.mr]="mr"
+    (_change)="_onChange($event)"
+  >
+    <ng-content />
+    <div slot="description">
+      <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
+    </div>
+    <div slot="reveal">
+      <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
+    </div>
+  </goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, decorators: [{
             type: Component,
@@ -1107,34 +1155,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     selector: "goab-checkbox",
                     template: ` <goa-checkbox
-      *ngIf="isReady"
-      [attr.name]="name"
-      [checked]="checked"
-      [disabled]="disabled"
-      [attr.indeterminate]="indeterminate ? 'true' : undefined"
-      [attr.error]="error"
-      [attr.text]="text"
-      [value]="value"
-      [attr.testid]="testId"
-      [attr.arialabel]="ariaLabel"
-      [attr.description]="getDescriptionAsString()"
-      [attr.revealarialabel]="revealArialLabel"
-      [id]="id"
-      [attr.maxwidth]="maxWidth"
-      [attr.mt]="mt"
-      [attr.mb]="mb"
-      [attr.ml]="ml"
-      [attr.mr]="mr"
-      (_change)="_onChange($event)"
-      >
-      <ng-content />
-      <div slot="description">
-        <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
-      </div>
-      <div slot="reveal">
-        <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
-      </div>
-    </goa-checkbox>`,
+    #goaComponentRef
+    *ngIf="isReady"
+    [attr.name]="name"
+    [checked]="checked"
+    [disabled]="disabled"
+    [attr.indeterminate]="indeterminate ? 'true' : undefined"
+    [attr.error]="error"
+    [attr.text]="text"
+    [value]="value"
+    [attr.testid]="testId"
+    [attr.arialabel]="ariaLabel"
+    [attr.description]="getDescriptionAsString()"
+    [attr.revealarialabel]="revealArialLabel"
+    [id]="id"
+    [attr.maxwidth]="maxWidth"
+    [attr.mt]="mt"
+    [attr.mb]="mb"
+    [attr.ml]="ml"
+    [attr.mr]="mr"
+    (_change)="_onChange($event)"
+  >
+    <ng-content />
+    <div slot="description">
+      <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
+    </div>
+    <div slot="reveal">
+      <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
+    </div>
+  </goa-checkbox>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     providers: [
                         {
@@ -1145,7 +1194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     ],
                     imports: [NgTemplateOutlet, CommonModule],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
                 type: Input
             }], checked: [{
                 type: Input,
@@ -1172,8 +1221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class GoabCheckboxList extends GoabControlValueAccessor {
-    constructor(cdr) {
-        super();
+    constructor(cdr, renderer) {
+        super(renderer);
         this.cdr = cdr;
         this.isReady = false;
         this.onChange = new EventEmitter();
@@ -1210,7 +1259,7 @@ class GoabCheckboxList extends GoabControlValueAccessor {
             this.value = [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckboxList, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckboxList, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCheckboxList, isStandalone: true, selector: "goab-checkbox-list", inputs: { name: "name", maxWidth: "maxWidth", value: "value" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1267,7 +1316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
                 type: Input
             }], maxWidth: [{
                 type: Input
@@ -1558,8 +1607,8 @@ class GoabDatePicker extends GoabControlValueAccessor {
         this.markAsTouched();
         this.fcChange?.(detail.value);
     }
-    constructor(elementRef, cdr) {
-        super();
+    constructor(elementRef, cdr, renderer) {
+        super(renderer);
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.isReady = false;
@@ -1582,24 +1631,25 @@ class GoabDatePicker extends GoabControlValueAccessor {
     }
     writeValue(value) {
         this.value = value;
-        const datePickerEl = this.elementRef?.nativeElement?.querySelector("goa-date-picker");
+        const datePickerEl = this.goaComponentRef?.nativeElement;
         if (datePickerEl) {
             if (!value) {
-                datePickerEl.setAttribute("value", "");
+                this.renderer.setAttribute(datePickerEl, "value", "");
             }
             else {
-                datePickerEl.setAttribute("value", value instanceof Date ? value.toISOString() : value);
+                this.renderer.setAttribute(datePickerEl, "value", value instanceof Date ? value.toISOString() : value);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDatePicker, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabDatePicker, isStandalone: true, selector: "goab-date-picker", inputs: { name: "name", value: "value", min: "min", max: "max", type: "type", relative: "relative" }, outputs: { onChange: "onChange" }, host: { listeners: { "disabledChange": "listenDisabledChange($event.detail.disabled)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDatePicker, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabDatePicker, isStandalone: true, selector: "goab-date-picker", inputs: { name: "name", value: "value", min: "min", max: "max", type: "type", relative: "relative", width: "width" }, outputs: { onChange: "onChange" }, host: { listeners: { "disabledChange": "listenDisabledChange($event.detail.disabled)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabDatePicker),
             },
         ], usesInheritance: true, ngImport: i0, template: ` <goa-date-picker
+    #goaComponentRef
     *ngIf="isReady"
     [attr.name]="name"
     [attr.value]="formatValue(value)"
@@ -1610,6 +1660,7 @@ class GoabDatePicker extends GoabControlValueAccessor {
     [attr.relative]="relative"
     [attr.type]="type"
     [attr.testid]="testId"
+    [attr.width]="width"
     [attr.mt]="mt"
     [attr.mb]="mb"
     [attr.ml]="ml"
@@ -1625,6 +1676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: "goab-date-picker",
                     imports: [CommonModule],
                     template: ` <goa-date-picker
+    #goaComponentRef
     *ngIf="isReady"
     [attr.name]="name"
     [attr.value]="formatValue(value)"
@@ -1635,6 +1687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     [attr.relative]="relative"
     [attr.type]="type"
     [attr.testid]="testId"
+    [attr.width]="width"
     [attr.mt]="mt"
     [attr.mb]="mb"
     [attr.ml]="ml"
@@ -1651,7 +1704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1663,6 +1716,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], relative: [{
                 type: Input
+            }], width: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], listenDisabledChange: [{
@@ -1875,8 +1930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 // "disabled", "value", "id" is an exposed property of HTMLInputElement, no need to bind with attr
 class GoabDropdown extends GoabControlValueAccessor {
-    constructor(cdr) {
-        super();
+    constructor(cdr, renderer) {
+        super(renderer);
         this.cdr = cdr;
         this.onChange = new EventEmitter();
         this.isReady = false;
@@ -1891,11 +1946,13 @@ class GoabDropdown extends GoabControlValueAccessor {
     }
     _onChange(e) {
         const detail = e.detail;
+        // Keep local value in sync with emitted detail
+        this.value = detail.value || null;
         this.onChange.emit(detail);
         this.markAsTouched();
         this.fcChange?.(detail.value || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDropdown, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDropdown, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabDropdown, isStandalone: true, selector: "goab-dropdown", inputs: { name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterable: ["filterable", "filterable", booleanAttribute], leadingIcon: "leadingIcon", maxHeight: "maxHeight", multiselect: ["multiselect", "multiselect", booleanAttribute], native: ["native", "native", booleanAttribute], placeholder: "placeholder", width: "width", maxWidth: "maxWidth", autoComplete: "autoComplete", relative: "relative" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1904,6 +1961,7 @@ class GoabDropdown extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-dropdown
+      #goaComponentRef
       *ngIf="isReady"
       [attr.name]="name"
       [value]="value"
@@ -1941,6 +1999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     imports: [CommonModule],
                     template: `
     <goa-dropdown
+      #goaComponentRef
       *ngIf="isReady"
       [attr.name]="name"
       [value]="value"
@@ -1978,7 +2037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -3471,8 +3530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class GoabInput extends GoabControlValueAccessor {
-    constructor(cdr) {
-        super();
+    constructor(cdr, renderer) {
+        super(renderer);
         this.cdr = cdr;
         this.type = "text";
         this.textAlign = "left";
@@ -3538,7 +3597,7 @@ class GoabInput extends GoabControlValueAccessor {
             return null;
         return this.trailingContent instanceof TemplateRef ? this.trailingContent : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabInput, isStandalone: true, selector: "goab-input", inputs: { type: "type", name: "name", debounce: ["debounce", "debounce", numberAttribute], autoCapitalize: "autoCapitalize", autoComplete: "autoComplete", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: ["focused", "focused", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], width: "width", prefix: "prefix", suffix: "suffix", ariaLabel: "ariaLabel", maxLength: ["maxLength", "maxLength", numberAttribute], min: "min", max: "max", step: ["step", "step", numberAttribute], ariaLabelledBy: "ariaLabelledBy", trailingIconAriaLabel: "trailingIconAriaLabel", textAlign: "textAlign", leadingContent: "leadingContent", trailingContent: "trailingContent" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3547,6 +3606,7 @@ class GoabInput extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-input
+      #goaComponentRef
       *ngIf="isReady"
       [attr.type]="type"
       [attr.name]="name"
@@ -3620,6 +3680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     imports: [NgIf, NgTemplateOutlet, CommonModule],
                     template: `
     <goa-input
+      #goaComponentRef
       *ngIf="isReady"
       [attr.type]="type"
       [attr.name]="name"
@@ -3693,7 +3754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -4762,8 +4823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class GoabRadioGroup extends GoabControlValueAccessor {
-    constructor(cdr) {
-        super();
+    constructor(cdr, renderer) {
+        super(renderer);
         this.cdr = cdr;
         this.isReady = false;
         this.onChange = new EventEmitter();
@@ -4780,7 +4841,7 @@ class GoabRadioGroup extends GoabControlValueAccessor {
         this.onChange.emit(detail);
         this.fcChange?.(detail.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabRadioGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabRadioGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabRadioGroup, isStandalone: true, selector: "goab-radio-group", inputs: { name: "name", orientation: "orientation", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -4789,6 +4850,7 @@ class GoabRadioGroup extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-radio-group
+      #goaComponentRef
       *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
@@ -4815,6 +4877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: "goab-radio-group",
                     template: `
     <goa-radio-group
+      #goaComponentRef
       *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
@@ -4843,7 +4906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
                 type: Input
             }], orientation: [{
                 type: Input
@@ -5563,8 +5626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class GoabTextArea extends GoabControlValueAccessor {
-    constructor(cdr) {
-        super();
+    constructor(cdr, renderer) {
+        super(renderer);
         this.cdr = cdr;
         this.countBy = "";
         this.maxCount = -1;
@@ -5598,7 +5661,7 @@ class GoabTextArea extends GoabControlValueAccessor {
         this.markAsTouched();
         this.onBlur.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTextArea, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTextArea, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabTextArea, isStandalone: true, selector: "goab-textarea", inputs: { name: "name", placeholder: "placeholder", rows: ["rows", "rows", numberAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], width: "width", ariaLabel: "ariaLabel", countBy: "countBy", maxCount: "maxCount", maxWidth: "maxWidth", autoComplete: "autoComplete" }, outputs: { onChange: "onChange", onKeyPress: "onKeyPress", onBlur: "onBlur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -5607,6 +5670,7 @@ class GoabTextArea extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-textarea
+      #goaComponentRef
       *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
@@ -5641,6 +5705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     imports: [CommonModule],
                     template: `
     <goa-textarea
+      #goaComponentRef
       *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
@@ -5675,7 +5740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
                 type: Input
             }], placeholder: [{
                 type: Input