@abgov/angular-components 4.3.0-alpha.2 → 4.3.0-alpha.4

package/fesm2022/abgov-angular-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Directive, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Component, Input, Output, TemplateRef } from '@angular/core';
+import { forwardRef, Directive, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA, Component, Input, booleanAttribute, EventEmitter, Output, TemplateRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR, CheckboxControlValueAccessor } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
 export * from '@abgov/ui-components-common';
 
 // @deprecated: Use the new <goab-input .. /> component
@@ -205,16 +205,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 }]
         }] });
 
-class GoabAccordion {
+class GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBaseComponent, isStandalone: true, selector: "ng-component", inputs: { mt: "mt", mb: "mb", ml: "ml", mr: "mr", testId: "testId" }, ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: ``, //** IMPLEMENT IN SUBCLASS
+                }]
+        }], propDecorators: { mt: [{
+                type: Input
+            }], mb: [{
+                type: Input
+            }], ml: [{
+                type: Input
+            }], mr: [{
+                type: Input
+            }], testId: [{
+                type: Input
+            }] } });
+/**
+ * An abstract base class that extends `GoabBaseComponent` and implements the `ControlValueAccessor` interface.
+ * This class provides a foundation for creating custom form controls in Angular, enabling them to integrate
+ * seamlessly with Angular forms. It includes support for handling value changes, touch events, and disabled states.
+ *
+ * ## Features
+ * - 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.
+ *
+ * ## Usage
+ * Extend this class to create custom form controls. Implement additional functionality as needed for your specific use case.
+ *
+ * ## Properties
+ * - `id?`: An optional identifier for the component.
+ * - `disabled?`: A boolean indicating whether the component is disabled.
+ * - `error?`: A boolean indicating whether the component is in an error state.
+ * - `value?`: The current value of the component, which can be of any type.
+ *
+ * ## 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.
+ * - `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.
+ *
+ * ## 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`.
+     */
+    markAsTouched() {
+        if (!this.touched) {
+            this.fcTouched?.();
+            this.touched = true;
+        }
+    }
+    /**
+     * Writes a new value to the form control.
+     * @param {unknown} value - The value to write.
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * Registers a function to call when the form control value changes.
+     * @param {function} fn - The function to call.
+     */
+    registerOnChange(fn) {
+        this.fcChange = fn;
+    }
+    /**
+     * Registers a function to call when the form control is touched.
+     * @param {function} fn - The function to call.
+     */
+    registerOnTouched(fn) {
+        this.fcTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the component.
+     *
+     * @param isDisabled - A boolean indicating whether the component should be disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabControlValueAccessor, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: ``, //** IMPLEMENT IN SUBCLASS
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], error: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }] } });
+
+class GoabAccordion extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.onChange = new EventEmitter();
     }
     _onChange(e) {
         const detail = e.detail;
         this.onChange.emit(detail.open);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabAccordion, isStandalone: true, selector: "goab-accordion", inputs: { heading: "heading", secondaryText: "secondaryText", testId: "testId", open: "open", headingSize: "headingSize", headingContent: "headingContent", maxWidth: "maxWidth", iconPosition: "iconPosition", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabAccordion, isStandalone: true, selector: "goab-accordion", inputs: { heading: "heading", secondaryText: "secondaryText", open: "open", headingSize: "headingSize", headingContent: "headingContent", maxWidth: "maxWidth", iconPosition: "iconPosition" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
     <goa-accordion
       [attr.heading]="heading"
       [attr.secondarytext]="secondaryText"
@@ -263,14 +380,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content></ng-content>
     </goa-accordion>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { heading: [{
                 type: Input
             }], secondaryText: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], open: [{
                 type: Input
             }], headingSize: [{
@@ -281,21 +396,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], iconPosition: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }] } });
 
-class GoabBadge {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBadge, isStandalone: true, selector: "goab-badge", inputs: { type: "type", content: "content", testId: "testId", icon: "icon", ariaLabel: "ariaLabel", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabBadge extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBadge, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBadge, isStandalone: true, selector: "goab-badge", inputs: { type: "type", content: "content", icon: "icon", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
     <goa-badge
       [attr.type]="type"
       [attr.icon]="icon"
@@ -330,25 +437,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], content: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], icon: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBlock, isStandalone: true, selector: "goab-block", inputs: { gap: "gap", direction: "direction", alignment: "alignment", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabBlock extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBlock, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBlock, isStandalone: true, selector: "goab-block", inputs: { gap: "gap", direction: "direction", alignment: "alignment" }, usesInheritance: true, ngImport: i0, template: `
     <goa-block
       [attr.gap]="gap"
       [attr.direction]="direction"
@@ -382,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-block>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { gap: [{
                 type: Input
@@ -390,28 +487,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], alignment: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabButton {
+class GoabButton extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.type = "primary";
         this.onClick = new EventEmitter();
     }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabButton, isStandalone: true, selector: "goab-button", inputs: { type: "type", size: "size", variant: "variant", disabled: "disabled", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", width: "width", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabButton, isStandalone: true, selector: "goab-button", inputs: { type: "type", size: "size", variant: "variant", disabled: "disabled", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", width: "width" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
     <goa-button
       [attr.type]="type"
       [attr.size]="size"
@@ -455,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-button>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { type: [{
                 type: Input
@@ -471,23 +559,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], width: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onClick: [{
                 type: Output
             }] } });
 
-class GoabButtonGroup {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabButtonGroup, isStandalone: true, selector: "goab-button-group", inputs: { alignment: "alignment", gap: "gap", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabButtonGroup extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabButtonGroup, isStandalone: true, selector: "goab-button-group", inputs: { alignment: "alignment", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
     <goa-button-group
       [attr.alignment]="alignment"
       [attr.gap]="gap"
@@ -519,34 +597,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-button-group>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { alignment: [{
                 type: Input
             }], gap: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabCallout {
+class GoabCallout extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.type = "information";
         this.heading = "";
         this.size = "large";
         this.ariaLive = "off";
         this.iconTheme = "outline";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCallout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCallout, isStandalone: true, selector: "goab-callout", inputs: { type: "type", heading: "heading", size: "size", maxWidth: "maxWidth", ariaLive: "ariaLive", iconTheme: "iconTheme", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCallout, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCallout, isStandalone: true, selector: "goab-callout", inputs: { type: "type", heading: "heading", size: "size", maxWidth: "maxWidth", ariaLive: "ariaLive", iconTheme: "iconTheme" }, usesInheritance: true, ngImport: i0, template: `
     <goa-callout
       [attr.type]="type"
       [attr.heading]="heading"
@@ -586,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-callout>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { type: [{
                 type: Input
@@ -600,21 +669,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], iconTheme: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabCard {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCard, isStandalone: true, selector: "goab-card", inputs: { elevation: "elevation", width: "width", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabCard extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCard, isStandalone: true, selector: "goab-card", inputs: { elevation: "elevation", width: "width" }, usesInheritance: true, ngImport: i0, template: `
     <goa-card
       [attr.elevation]="elevation"
       [attr.width]="width"
@@ -646,22 +705,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-card>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { elevation: [{
                 type: Input
             }], width: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
 class GoabCardContent {
@@ -742,10 +791,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
-class GoabCheckbox {
+class GoabCheckbox extends GoabControlValueAccessor {
     constructor() {
+        super(...arguments);
         this.onChange = new EventEmitter();
-        this.touched = false;
     }
     getDescriptionAsString() {
         return typeof this.description === "string" ? this.description : "";
@@ -762,85 +811,65 @@ class GoabCheckbox {
         this.markAsTouched();
         this.fcChange?.(detail.binding === "check" ? detail.checked : detail.value || "");
     }
-    markAsTouched() {
-        if (!this.touched) {
-            this.fcTouched?.();
-            this.touched = true;
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.fcChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.fcTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCheckbox, isStandalone: true, selector: "goab-checkbox", inputs: { name: "name", checked: "checked", disabled: "disabled", error: "error", text: "text", value: "value", testId: "testId", ariaLabel: "ariaLabel", description: "description", id: "id", maxWidth: "maxWidth", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCheckbox, isStandalone: true, selector: "goab-checkbox", inputs: { name: "name", checked: "checked", text: "text", value: "value", ariaLabel: "ariaLabel", description: "description", maxWidth: "maxWidth" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabCheckbox),
             },
-        ], ngImport: i0, template: `
-    <goa-checkbox
-      [attr.name]="name"
-      [checked]="checked"
-      [disabled]="disabled"
-      [attr.error]="error"
-      [attr.text]="text"
-      [value]="value"
-      [attr.testid]="testId"
-      [attr.arialabel]="ariaLabel"
-      [attr.description]="getDescriptionAsString()"
-      [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>
-    </goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: ` <goa-checkbox
+    [attr.name]="name"
+    [checked]="checked"
+    [disabled]="disabled"
+    [attr.error]="error"
+    [attr.text]="text"
+    [value]="value"
+    [attr.testid]="testId"
+    [attr.arialabel]="ariaLabel"
+    [attr.description]="getDescriptionAsString()"
+    [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>
+  </goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckbox, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-checkbox",
-                    template: `
-    <goa-checkbox
-      [attr.name]="name"
-      [checked]="checked"
-      [disabled]="disabled"
-      [attr.error]="error"
-      [attr.text]="text"
-      [value]="value"
-      [attr.testid]="testId"
-      [attr.arialabel]="ariaLabel"
-      [attr.description]="getDescriptionAsString()"
-      [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>
-    </goa-checkbox>`,
+                    template: ` <goa-checkbox
+    [attr.name]="name"
+    [checked]="checked"
+    [disabled]="disabled"
+    [attr.error]="error"
+    [attr.text]="text"
+    [value]="value"
+    [attr.testid]="testId"
+    [attr.arialabel]="ariaLabel"
+    [attr.description]="getDescriptionAsString()"
+    [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>
+  </goa-checkbox>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     providers: [
                         {
@@ -855,46 +884,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], checked: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], error: [{
-                type: Input
             }], text: [{
                 type: Input
             }], value: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], ariaLabel: [{
                 type: Input
             }], description: [{
                 type: Input
-            }], id: [{
-                type: Input
             }], maxWidth: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }] } });
 
-class GoabChip {
+class GoabChip extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.content = "";
         this.onClick = new EventEmitter();
     }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabChip, isStandalone: true, selector: "goab-chip", inputs: { leadingIcon: "leadingIcon", error: "error", deletable: "deletable", content: "content", testId: "testId", variant: "variant", iconTheme: "iconTheme", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `<goa-chip
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabChip, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabChip, isStandalone: true, selector: "goab-chip", inputs: { leadingIcon: "leadingIcon", error: "error", deletable: "deletable", content: "content", variant: "variant", iconTheme: "iconTheme" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `<goa-chip
     [attr.leadingicon]="leadingIcon"
     [attr.variant]="variant"
     [attr.error]="error"
@@ -942,20 +956,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], content: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], variant: [{
                 type: Input
             }], iconTheme: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onClick: [{
                 type: Output
             }] } });
@@ -1028,15 +1032,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 }]
         }] });
 
-class GoabContainer {
+class GoabContainer extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.type = "interactive";
         this.accent = "filled";
         this.padding = "relaxed";
         this.width = "full";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabContainer, isStandalone: true, selector: "goab-container", inputs: { type: "type", accent: "accent", padding: "padding", width: "width", maxWidth: "maxWidth", testId: "testId", title: "title", actions: "actions", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `<goa-container
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabContainer, isStandalone: true, selector: "goab-container", inputs: { type: "type", accent: "accent", padding: "padding", width: "width", maxWidth: "maxWidth", title: "title", actions: "actions" }, usesInheritance: true, ngImport: i0, template: `<goa-container
     [attr.type]="type"
     [attr.accent]="accent"
     [attr.padding]="padding"
@@ -1095,23 +1100,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], maxWidth: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], title: [{
                 type: Input
             }], actions: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabDatePicker {
+class GoabDatePicker extends GoabControlValueAccessor {
     formatValue(val) {
         if (!val)
             return "";
@@ -1126,11 +1121,10 @@ class GoabDatePicker {
         this.markAsTouched();
         this.fcChange?.(detail.value);
     }
-    // ControlValueAccessor
     constructor(elementRef) {
+        super();
         this.elementRef = elementRef;
         this.onChange = new EventEmitter();
-        this.touched = false;
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
@@ -1139,12 +1133,6 @@ class GoabDatePicker {
     listenDisabledChange(isDisabled) {
         this.setDisabledState(isDisabled);
     }
-    markAsTouched() {
-        if (!this.touched) {
-            this.fcTouched?.();
-            this.touched = true;
-        }
-    }
     writeValue(value) {
         this.value = value;
         const datePickerEl = this.elementRef?.nativeElement?.querySelector("goa-date-picker");
@@ -1157,20 +1145,14 @@ class GoabDatePicker {
             }
         }
     }
-    registerOnChange(fn) {
-        this.fcChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.fcTouched = fn;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDatePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDatePicker, isStandalone: true, selector: "goab-date-picker", inputs: { name: "name", value: "value", min: "min", max: "max", error: "error", disabled: "disabled", relative: "relative", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, host: { listeners: { "disabledChange": "listenDisabledChange($event.detail.disabled)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDatePicker, isStandalone: true, selector: "goab-date-picker", inputs: { name: "name", value: "value", min: "min", max: "max", relative: "relative" }, outputs: { onChange: "onChange" }, host: { listeners: { "disabledChange": "listenDisabledChange($event.detail.disabled)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabDatePicker),
             },
-        ], ngImport: i0, template: ` <goa-date-picker
+        ], usesInheritance: true, ngImport: i0, template: ` <goa-date-picker
     [attr.name]="name"
     [attr.value]="formatValue(value)"
     [attr.min]="min"
@@ -1225,22 +1207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], max: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], disabled: [{
-                type: Input
             }], relative: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }], listenDisabledChange: [{
@@ -1248,9 +1216,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 args: ["disabledChange", ["$event.detail.disabled"]]
             }] } });
 
-class GoabDetails {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDetails, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDetails, isStandalone: true, selector: "goab-details", inputs: { heading: "heading", testId: "testId", open: "open", maxWidth: "maxWidth", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabDetails extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDetails, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDetails, isStandalone: true, selector: "goab-details", inputs: { heading: "heading", open: "open", maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
     <goa-details
       [attr.heading]="heading"
       [attr.testid]="testId"
@@ -1284,30 +1252,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-details>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { heading: [{
                 type: Input,
                 args: [{ required: true }]
-            }], testId: [{
-                type: Input
             }], open: [{
                 type: Input
             }], maxWidth: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabDivider {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDivider, isStandalone: true, selector: "goab-divider", inputs: { testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabDivider extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDivider, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDivider, isStandalone: true, selector: "goab-divider", usesInheritance: true, ngImport: i0, template: `
     <goa-divider
       [attr.testid]="testId"
       [attr.mt]="mt"
@@ -1333,19 +1291,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     >
     </goa-divider>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
-            }] } });
+        }] });
 
 class GoabDrawer {
     constructor() {
@@ -1427,10 +1375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 // "disabled", "value", "id" is an exposed property of HTMLInputElement, no need to bind with attr
-class GoabDropdown {
+class GoabDropdown extends GoabControlValueAccessor {
     constructor() {
+        super(...arguments);
         this.onChange = new EventEmitter();
-        this.touched = false;
     }
     _onChange(e) {
         const detail = e.detail;
@@ -1438,32 +1386,14 @@ class GoabDropdown {
         this.markAsTouched();
         this.fcChange?.(detail.value || "");
     }
-    markAsTouched() {
-        if (!this.touched) {
-            this.fcTouched?.();
-            this.touched = true;
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.fcChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.fcTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDropdown, isStandalone: true, selector: "goab-dropdown", inputs: { name: "name", value: "value", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", id: "id", disabled: "disabled", error: "error", filterable: "filterable", leadingIcon: "leadingIcon", maxHeight: "maxHeight", multiselect: "multiselect", native: "native", placeholder: "placeholder", testId: "testId", width: "width", relative: "relative", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDropdown, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDropdown, isStandalone: true, selector: "goab-dropdown", inputs: { name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterable: "filterable", leadingIcon: "leadingIcon", maxHeight: "maxHeight", multiselect: "multiselect", native: "native", placeholder: "placeholder", width: "width", relative: "relative" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabDropdown),
-            }
-        ], ngImport: i0, template: `
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
     <goa-dropdown
       [attr.name]="name"
       [value]="value"
@@ -1529,23 +1459,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => GoabDropdown),
-                        }
+                        },
                     ],
                 }]
         }], propDecorators: { name: [{
                 type: Input
-            }], value: [{
-                type: Input
             }], ariaLabel: [{
                 type: Input
             }], ariaLabelledBy: [{
                 type: Input
-            }], id: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], error: [{
-                type: Input
             }], filterable: [{
                 type: Input
             }], leadingIcon: [{
@@ -1558,20 +1480,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], width: [{
                 type: Input
             }], relative: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }] } });
@@ -1679,8 +1591,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Output
             }] } });
 
-class GoabFileUploadInput {
+class GoabFileUploadInput extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.id = "";
         this.maxFileSize = "5MB";
         this.onSelectFile = new EventEmitter();
@@ -1689,8 +1602,8 @@ class GoabFileUploadInput {
         const detail = e.detail;
         this.onSelectFile.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFileUploadInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFileUploadInput, isStandalone: true, selector: "goab-file-upload-input", inputs: { id: "id", variant: "variant", maxFileSize: "maxFileSize", accept: "accept", testId: "testId", mt: "mt", mb: "mb", mr: "mr", ml: "ml" }, outputs: { onSelectFile: "onSelectFile" }, ngImport: i0, template: `<goa-file-upload-input
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFileUploadInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFileUploadInput, isStandalone: true, selector: "goab-file-upload-input", inputs: { id: "id", variant: "variant", maxFileSize: "maxFileSize", accept: "accept" }, outputs: { onSelectFile: "onSelectFile" }, usesInheritance: true, ngImport: i0, template: `<goa-file-upload-input
     [attr.variant]="variant"
     [attr.accept]="accept"
     [attr.maxfilesize]="maxFileSize"
@@ -1733,30 +1646,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], accept: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], mr: [{
-                type: Input
-            }], ml: [{
-                type: Input
             }], onSelectFile: [{
                 type: Output
             }] } });
 
-class GoabFilterChip {
+class GoabFilterChip extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.content = "";
         this.onClick = new EventEmitter();
     }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFilterChip, isStandalone: true, selector: "goab-filter-chip", inputs: { error: "error", deletable: "deletable", content: "content", testId: "testId", iconTheme: "iconTheme", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `<goa-filter-chip
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFilterChip, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFilterChip, isStandalone: true, selector: "goab-filter-chip", inputs: { error: "error", deletable: "deletable", content: "content", iconTheme: "iconTheme" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `<goa-filter-chip
     [attr.error]="error"
     [attr.icontheme]="iconTheme"
     [attr.content]="content"
@@ -1796,18 +1700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], content: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], iconTheme: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onClick: [{
                 type: Output
             }] } });
@@ -1911,9 +1805,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
-class GoabFormItem {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormItem, isStandalone: true, selector: "goab-form-item", inputs: { label: "label", labelSize: "labelSize", helpText: "helpText", error: "error", requirement: "requirement", maxWidth: "maxWidth", testId: "testId", id: "id", mt: "mt", mb: "mb", mr: "mr", ml: "ml" }, ngImport: i0, template: `
+class GoabFormItem extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormItem, isStandalone: true, selector: "goab-form-item", inputs: { label: "label", labelSize: "labelSize", helpText: "helpText", error: "error", requirement: "requirement", maxWidth: "maxWidth", id: "id" }, usesInheritance: true, ngImport: i0, template: `
     <goa-form-item
       [attr.label]="label"
       [attr.labelsize]="labelSize"
@@ -1971,18 +1865,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], maxWidth: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], id: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], mr: [{
-                type: Input
-            }], ml: [{
-                type: Input
             }] } });
 
 /**
@@ -2033,8 +1917,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }] } });
 
-class GoabFormStepper {
+class GoabFormStepper extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.step = -1;
         this.onChange = new EventEmitter();
     }
@@ -2042,8 +1927,8 @@ class GoabFormStepper {
         const detail = e.detail;
         this.onChange.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormStepper, isStandalone: true, selector: "goab-form-stepper", inputs: { step: "step", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormStepper, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormStepper, isStandalone: true, selector: "goab-form-stepper", inputs: { step: "step" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
     <goa-form-stepper
       [attr.step]="step"
       [attr.testid]="testId"
@@ -2075,27 +1960,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-form-stepper>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { step: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }] } });
 
-class GoabGrid {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabGrid, isStandalone: true, selector: "goab-grid", inputs: { minChildWidth: "minChildWidth", gap: "gap", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabGrid extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabGrid, isStandalone: true, selector: "goab-grid", inputs: { minChildWidth: "minChildWidth", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
     <goa-grid
       [attr.gap]="gap"
       [attr.minchildwidth]="minChildWidth"
@@ -2134,16 +2009,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 args: [{ required: true }]
             }], gap: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
 class GoabAppHeader {
@@ -2299,13 +2164,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }] } });
 
-class GoabIcon {
+class GoabIcon extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.size = "medium";
         this.theme = "outline";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabIcon, isStandalone: true, selector: "goab-icon", inputs: { type: "type", size: "size", theme: "theme", inverted: "inverted", fillColor: "fillColor", opacity: "opacity", title: "title", ariaLabel: "ariaLabel", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabIcon, isStandalone: true, selector: "goab-icon", inputs: { type: "type", size: "size", theme: "theme", inverted: "inverted", fillColor: "fillColor", opacity: "opacity", title: "title", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
     <goa-icon
       [attr.type]="type"
       [attr.theme]="theme"
@@ -2347,7 +2213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     >
     </goa-icon>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { type: [{
                 type: Input,
@@ -2366,28 +2232,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabIconButton {
+class GoabIconButton extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.size = "medium";
         this.onClick = new EventEmitter();
     }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabIconButton, isStandalone: true, selector: "goab-icon-button", inputs: { icon: "icon", size: "size", variant: "variant", title: "title", disabled: "disabled", ariaLabel: "ariaLabel", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIconButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabIconButton, isStandalone: true, selector: "goab-icon-button", inputs: { icon: "icon", size: "size", variant: "variant", title: "title", disabled: "disabled", ariaLabel: "ariaLabel" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
     <goa-icon-button
       [attr.icon]="icon"
       [disabled]="disabled"
@@ -2429,7 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content></ng-content>
     </goa-icon-button>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { icon: [{
                 type: Input,
@@ -2444,31 +2301,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onClick: [{
                 type: Output
             }] } });
 
-class GoabInput {
+class GoabInput extends GoabControlValueAccessor {
     constructor() {
+        super(...arguments);
         this.type = "text";
-        this.value = "";
         this.onTrailingIconClick = new EventEmitter();
         this.onFocus = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onKeyPress = new EventEmitter();
         this.onChange = new EventEmitter();
         this.handleTrailingIconClick = false;
-        this.touched = false;
     }
     ngOnInit() {
         this.handleTrailingIconClick = this.onTrailingIconClick.observed;
@@ -2502,32 +2348,14 @@ class GoabInput {
         const detail = e.detail;
         this.onBlur.emit(detail);
     }
-    markAsTouched() {
-        if (!this.touched) {
-            this.fcTouched?.();
-            this.touched = true;
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.fcChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.fcTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabInput, isStandalone: true, selector: "goab-input", inputs: { type: "type", name: "name", id: "id", debounce: "debounce", disabled: "disabled", autoCapitalize: "autoCapitalize", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: "focused", readonly: "readonly", error: "error", width: "width", prefix: "prefix", suffix: "suffix", testId: "testId", ariaLabel: "ariaLabel", maxLength: "maxLength", value: "value", min: "min", max: "max", step: "step", ariaLabelledBy: "ariaLabelledBy", mt: "mt", mr: "mr", mb: "mb", ml: "ml", trailingIconAriaLabel: "trailingIconAriaLabel" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabInput, isStandalone: true, selector: "goab-input", inputs: { type: "type", name: "name", debounce: "debounce", autoCapitalize: "autoCapitalize", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: "focused", readonly: "readonly", width: "width", prefix: "prefix", suffix: "suffix", ariaLabel: "ariaLabel", maxLength: "maxLength", min: "min", max: "max", step: "step", ariaLabelledBy: "ariaLabelledBy", trailingIconAriaLabel: "trailingIconAriaLabel" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabInput),
             },
-        ], ngImport: i0, template: `
+        ], usesInheritance: true, ngImport: i0, template: `
     <goa-input
       [attr.type]="type"
       [attr.name]="name"
@@ -2628,12 +2456,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], name: [{
                 type: Input
-            }], id: [{
-                type: Input
             }], debounce: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], autoCapitalize: [{
                 type: Input
             }], placeholder: [{
@@ -2648,22 +2472,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
-            }], error: [{
-                type: Input
             }], width: [{
                 type: Input
             }], prefix: [{
                 type: Input
             }], suffix: [{
                 type: Input
-            }], testId: [{
-                type: Input
             }], ariaLabel: [{
                 type: Input
             }], maxLength: [{
                 type: Input
-            }], value: [{
-                type: Input
             }], min: [{
                 type: Input
             }], max: [{
@@ -2672,14 +2490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], ariaLabelledBy: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mr: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
             }], trailingIconAriaLabel: [{
                 type: Input
             }], onTrailingIconClick: [{
@@ -3097,22 +2907,24 @@ class GoabModal {
       [attr.heading]="getHeadingAsString()"
       (_close)="_onClose()"
     >
-      <ng-content></ng-content>
       <div slot="heading">
-        <ng-container [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
+        <ng-container *ngIf="this.heading !== '' && getHeadingAsTemplate() !== null" [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
       </div>
+
+      <ng-content></ng-content>
+
       <div slot="actions">
-        <ng-container [ngTemplateOutlet]="actions"></ng-container>
+        <ng-container *ngIf="this.actions" [ngTemplateOutlet]="actions"></ng-container>
       </div>
     </goa-modal>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabModal, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-modal",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgIf, NgTemplateOutlet],
                     template: `
     <goa-modal
       [attr.calloutvariant]="calloutVariant"
@@ -3125,12 +2937,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       [attr.heading]="getHeadingAsString()"
       (_close)="_onClose()"
     >
-      <ng-content></ng-content>
       <div slot="heading">
-        <ng-container [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
+        <ng-container *ngIf="this.heading !== '' && getHeadingAsTemplate() !== null" [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
       </div>
+
+      <ng-content></ng-content>
+
       <div slot="actions">
-        <ng-container [ngTemplateOutlet]="actions"></ng-container>
+        <ng-container *ngIf="this.actions" [ngTemplateOutlet]="actions"></ng-container>
       </div>
     </goa-modal>
   `,
@@ -3209,9 +3023,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Output
             }] } });
 
-class GoabPages {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPages, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPages, isStandalone: true, selector: "goab-pages", inputs: { current: "current", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabPages extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPages, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPages, isStandalone: true, selector: "goab-pages", inputs: { current: "current" }, usesInheritance: true, ngImport: i0, template: `
     <goa-pages
       [attr.current]="current"
       [attr.mt]="mt"
@@ -3243,18 +3057,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 }]
         }], propDecorators: { current: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
-class GoabPagination {
+class GoabPagination extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.perPageCount = 10;
         this.variant = "all";
         this.onChange = new EventEmitter();
@@ -3263,12 +3070,12 @@ class GoabPagination {
         const detail = e.detail;
         this.onChange.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPagination, isStandalone: true, selector: "goab-pagination", inputs: { itemCount: "itemCount", pageNumber: "pageNumber", perPageCount: "perPageCount", variant: "variant", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPagination, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPagination, isStandalone: true, selector: "goab-pagination", inputs: { itemCount: "itemCount", pageNumber: "pageNumber", perPageCount: "perPageCount", variant: "variant" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
     <goa-pagination
       [attr.itemcount]="itemCount"
       [attr.perpagecount]="perPageCount"
-      [attr.pagenumber]="pageNumber"w
+      [attr.pagenumber]="pageNumber"
       [attr.variant]="variant"
       [attr.testid]="testId"
       [attr.mt]="mt"
@@ -3289,7 +3096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     <goa-pagination
       [attr.itemcount]="itemCount"
       [attr.perpagecount]="perPageCount"
-      [attr.pagenumber]="pageNumber"w
+      [attr.pagenumber]="pageNumber"
       [attr.variant]="variant"
       [attr.testid]="testId"
       [attr.mt]="mt"
@@ -3312,27 +3119,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], variant: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }] } });
 
-class GoabPopover {
+class GoabPopover extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.maxWidth = "320px";
         this.padded = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPopover, isStandalone: true, selector: "goab-popover", inputs: { maxWidth: "maxWidth", minWidth: "minWidth", padded: "padded", position: "position", relative: "relative", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr", target: "target" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPopover, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPopover, isStandalone: true, selector: "goab-popover", inputs: { maxWidth: "maxWidth", minWidth: "minWidth", padded: "padded", position: "position", relative: "relative", target: "target" }, usesInheritance: true, ngImport: i0, template: `
     <goa-popover
       [attr.maxwidth]="maxWidth"
       [attr.minwidth]="minWidth"
@@ -3389,25 +3187,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], relative: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], target: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
-class GoabRadioGroup {
+class GoabRadioGroup extends GoabControlValueAccessor {
     constructor() {
+        super(...arguments);
         this.onChange = new EventEmitter();
-        this.touched = false;
     }
     _onChange(e) {
         const detail = e.detail;
@@ -3415,32 +3203,14 @@ class GoabRadioGroup {
         this.onChange.emit(detail);
         this.fcChange?.(detail.value);
     }
-    markAsTouched() {
-        if (!this.touched) {
-            this.fcTouched?.();
-            this.touched = true;
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.fcChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.fcTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabRadioGroup, isStandalone: true, selector: "goab-radio-group", inputs: { name: "name", value: "value", disabled: "disabled", orientation: "orientation", error: "error", ariaLabel: "ariaLabel", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabRadioGroup, isStandalone: true, selector: "goab-radio-group", inputs: { name: "name", orientation: "orientation", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabRadioGroup),
             },
-        ], ngImport: i0, template: `
+        ], usesInheritance: true, ngImport: i0, template: `
     <goa-radio-group
       [attr.name]="name"
       [attr.value]="value"
@@ -3493,41 +3263,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 }]
         }], propDecorators: { name: [{
                 type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
             }], orientation: [{
                 type: Input
-            }], error: [{
-                type: Input
             }], ariaLabel: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }] } });
 
-class GoabRadioItem {
+class GoabRadioItem extends GoabBaseComponent {
     getDescriptionAsString() {
-        return (!this.description || this.description instanceof TemplateRef) ? "" : this.description;
+        return !this.description || this.description instanceof TemplateRef
+            ? ""
+            : this.description;
     }
     getDescriptionAsTemplate() {
         if (!this.description)
             return null;
         return this.description instanceof TemplateRef ? this.description : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabRadioItem, isStandalone: true, selector: "goab-radio-item", inputs: { value: "value", label: "label", name: "name", description: "description", ariaLabel: "ariaLabel", disabled: "disabled", checked: "checked", error: "error", maxWidth: "maxWidth", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabRadioItem, isStandalone: true, selector: "goab-radio-item", inputs: { value: "value", label: "label", name: "name", description: "description", ariaLabel: "ariaLabel", disabled: "disabled", checked: "checked", error: "error", maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
     <goa-radio-item
       [attr.name]="name"
       [attr.value]="value"
@@ -3598,14 +3354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], maxWidth: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
 class GoabSideMenu {
@@ -3632,9 +3380,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }] } });
 
-class GoabSideMenuGroup {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSideMenuGroup, isStandalone: true, selector: "goab-side-menu-group", inputs: { heading: "heading", testId: "testId", icon: "icon", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabSideMenuGroup extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenuGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSideMenuGroup, isStandalone: true, selector: "goab-side-menu-group", inputs: { heading: "heading", icon: "icon" }, usesInheritance: true, ngImport: i0, template: `
     <goa-side-menu-group
       [attr.heading]="heading"
       [attr.testid]="testId"
@@ -3671,18 +3419,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
         }], propDecorators: { heading: [{
                 type: Input,
                 args: [{ required: true }]
-            }], testId: [{
-                type: Input
             }], icon: [{
                 type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
 class GoabSideMenuHeading {
@@ -3720,12 +3458,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }] } });
 
-class GoabSkeleton {
+class GoabSkeleton extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.maxWidth = "300px";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSkeleton, isStandalone: true, selector: "goab-skeleton", inputs: { type: "type", maxWidth: "maxWidth", size: "size", lineCount: "lineCount", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSkeleton, isStandalone: true, selector: "goab-skeleton", inputs: { type: "type", maxWidth: "maxWidth", size: "size", lineCount: "lineCount" }, usesInheritance: true, ngImport: i0, template: `
     <goa-skeleton
       [attr.maxwidth]="maxWidth"
       [attr.size]="size"
@@ -3759,7 +3498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     >
     </goa-skeleton>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { type: [{
                 type: Input,
@@ -3770,16 +3509,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], lineCount: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
 class GoabSpacer {
@@ -3857,16 +3586,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }] } });
 
-class GoabTable {
+class GoabTable extends GoabBaseComponent {
     constructor() {
+        super(...arguments);
         this.onSort = new EventEmitter();
     }
     _onSort(e) {
         const detail = e.detail;
         this.onSort.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTable, isStandalone: true, selector: "goab-table", inputs: { width: "width", variant: "variant", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onSort: "onSort" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTable, isStandalone: true, selector: "goab-table", inputs: { width: "width", variant: "variant" }, outputs: { onSort: "onSort" }, usesInheritance: true, ngImport: i0, template: `
     <goa-table
       [attr.width]="width"
       [attr.variant]="variant"
@@ -3904,22 +3634,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       </table>
     </goa-table>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { width: [{
                 type: Input
             }], variant: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onSort: [{
                 type: Output
             }] } });
@@ -4058,14 +3778,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }] } });
 
-class GoabTextArea {
+class GoabTextArea extends GoabControlValueAccessor {
     constructor() {
-        this.value = "";
+        super(...arguments);
         this.countBy = "";
         this.maxCount = -1;
         this.onChange = new EventEmitter();
         this.onKeyPress = new EventEmitter();
-        this.touched = false;
     }
     _onChange(e) {
         const detail = e.detail;
@@ -4078,32 +3797,14 @@ class GoabTextArea {
         this.markAsTouched();
         this.onKeyPress.emit(detail);
     }
-    markAsTouched() {
-        if (!this.touched) {
-            this.fcTouched?.();
-            this.touched = true;
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.fcChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.fcTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTextArea, isStandalone: true, selector: "goab-textarea", inputs: { name: "name", value: "value", id: "id", placeholder: "placeholder", rows: "rows", error: "error", disabled: "disabled", readOnly: "readOnly", width: "width", ariaLabel: "ariaLabel", countBy: "countBy", maxCount: "maxCount", maxWidth: "maxWidth", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, outputs: { onChange: "onChange", onKeyPress: "onKeyPress" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTextArea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTextArea, isStandalone: true, selector: "goab-textarea", inputs: { name: "name", placeholder: "placeholder", rows: "rows", readOnly: "readOnly", width: "width", ariaLabel: "ariaLabel", countBy: "countBy", maxCount: "maxCount", maxWidth: "maxWidth" }, outputs: { onChange: "onChange", onKeyPress: "onKeyPress" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabTextArea),
-            }
-        ], ngImport: i0, template: `
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
     <goa-textarea
       [attr.name]="name"
       [attr.value]="value"
@@ -4163,23 +3864,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => GoabTextArea),
-                        }
-                    ]
+                        },
+                    ],
                 }]
         }], propDecorators: { name: [{
                 type: Input
-            }], value: [{
-                type: Input
-            }], id: [{
-                type: Input
             }], placeholder: [{
                 type: Input
             }], rows: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], disabled: [{
-                type: Input
             }], readOnly: [{
                 type: Input
             }], width: [{
@@ -4192,25 +3885,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], maxWidth: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }], onKeyPress: [{
                 type: Output
             }] } });
 
-class GoabTooltip {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTooltip, isStandalone: true, selector: "goab-tooltip", inputs: { position: "position", content: "content", hAlign: "hAlign", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+class GoabTooltip extends GoabBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTooltip, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTooltip, isStandalone: true, selector: "goab-tooltip", inputs: { position: "position", content: "content", hAlign: "hAlign" }, usesInheritance: true, ngImport: i0, template: `
     <goa-tooltip
       [attr.position]="position"
       [attr.content]="content"
@@ -4244,7 +3927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-tooltip>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { position: [{
                 type: Input
@@ -4252,16 +3935,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], hAlign: [{
                 type: Input
-            }], testId: [{
-                type: Input
-            }], mt: [{
-                type: Input
-            }], mb: [{
-                type: Input
-            }], ml: [{
-                type: Input
-            }], mr: [{
-                type: Input
             }] } });
 
 /**