npm - @verisoft/ui-govcz - Versions diffs - 18.6.5 → 18.8.0 - Mend

@verisoft/ui-govcz 18.6.5 → 18.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/fesm2022/verisoft-ui-govcz.mjs CHANGED Viewed

@@ -7,7 +7,7 @@ import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$4 from '@verisoft/ui-core';
-import { ControlSeverity, GovControlSeverity, IconPosition, FieldSize, GovButtonType, BUTTON_COMPONENT_TOKEN, BreadcrumbCoreComponent, BREADCRUMB_COMPONENT_TOKEN, SlotPosition, BaseFormInputComponent, FieldType, CALENDAR_COMPONENT_TOKEN, CHECKBOX_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, UnsubscribeComponent, queryListChanged, TEXTFIELD_COMPONENT_TOKEN, DROPDOWN_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, TRISTATE_CHECKBOX_COMPONENT_TOKEN, GenericFieldType, GENERIC_FIELD_COMPONENT_TOKEN, DatasourceDirective, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, DialogService, isFilterEmpty, FILTER_COMPONENT_TOKEN, ButtonShortCutDirective, LOADER_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COMPONENT_TOKEN, TABLE_COLUMN_PROVIDER, downloadFile, TableDatasourceDirective, TableFilterDirective, TableColumnDirective, CONFIRM_DIALOG_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SIDE_MENU_STATE_TOKEN, SNACKBAR_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN, FORM_FIELD_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN, TAB_VIEW_COMPONENT_TOKEN } from '@verisoft/ui-core';
+import { ControlSeverity, GovControlSeverity, IconPosition, FieldSize, GovButtonType, BUTTON_COMPONENT_TOKEN, BreadcrumbCoreComponent, BREADCRUMB_COMPONENT_TOKEN, SlotPosition, BaseFormInputComponent, FieldType, CALENDAR_COMPONENT_TOKEN, CHECKBOX_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, UnsubscribeComponent, queryListChanged, TEXTFIELD_COMPONENT_TOKEN, DROPDOWN_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, TRISTATE_CHECKBOX_COMPONENT_TOKEN, GenericFieldType, GENERIC_FIELD_COMPONENT_TOKEN, DatasourceDirective, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, DialogService, isFilterEmpty, FILTER_COMPONENT_TOKEN, ButtonShortCutDirective, LOADER_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COMPONENT_TOKEN, TABLE_COLUMN_PROVIDER, downloadFile, TableDatasourceDirective, TableFilterDirective, TableColumnDirective, CONFIRM_DIALOG_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SNACKBAR_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN, FORM_FIELD_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN, TAB_VIEW_COMPONENT_TOKEN } from '@verisoft/ui-core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import * as i1$2 from '@angular/forms';
@@ -155,7 +155,7 @@ class ButtonComponent {
                 provide: BUTTON_COMPONENT_TOKEN,
                 useExisting: ButtonComponent,
             }
-        ], ngImport: i0, template: "<div class=\"g-button\">\r\n    <a\r\n        [routerLink]=\"routerLink ? routerLink : undefined\"\r\n        [queryParams]=\"queryParams ? queryParams : undefined\"\r\n    >\r\n        <gov-button\r\n            [type]=\"outlined === true ? 'outlined' : type\"\r\n            [color]=\"severity | govColor\"\r\n            [disabled]=\"disabled\"\r\n            [size]=\"size | govSize\"\r\n            [name]=\"name\"\r\n            [expanded]=\"expanded\"\r\n            (gov-click)=\"handleClick($event)\"\r\n            (click)=\"handleClick($event)\"\r\n        >\r\n            @if (icon) {\r\n                <gov-icon \r\n                    [name]=\"icon\"\r\n                    [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n                />\r\n            } @if (label) {\r\n                {{ label | translate }}\r\n            }\r\n        </gov-button>\r\n    </a>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"g-button\">\n    <a\n        [routerLink]=\"routerLink ? routerLink : undefined\"\n        [queryParams]=\"queryParams ? queryParams : undefined\"\n    >\n        <gov-button\n            [type]=\"outlined === true ? 'outlined' : type\"\n            [color]=\"severity | govColor\"\n            [disabled]=\"disabled\"\n            [size]=\"size | govSize\"\n            [name]=\"name\"\n            [expanded]=\"expanded\"\n            (gov-click)=\"handleClick($event)\"\n            (click)=\"handleClick($event)\"\n        >\n            @if (icon) {\n                <gov-icon \n                    [name]=\"icon\"\n                    [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n                />\n            } @if (label) {\n                {{ label | translate }}\n            }\n        </gov-button>\n    </a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: BUTTON_COMPONENT_TOKEN,
                             useExisting: ButtonComponent,
                         }
-                    ], template: "<div class=\"g-button\">\r\n    <a\r\n        [routerLink]=\"routerLink ? routerLink : undefined\"\r\n        [queryParams]=\"queryParams ? queryParams : undefined\"\r\n    >\r\n        <gov-button\r\n            [type]=\"outlined === true ? 'outlined' : type\"\r\n            [color]=\"severity | govColor\"\r\n            [disabled]=\"disabled\"\r\n            [size]=\"size | govSize\"\r\n            [name]=\"name\"\r\n            [expanded]=\"expanded\"\r\n            (gov-click)=\"handleClick($event)\"\r\n            (click)=\"handleClick($event)\"\r\n        >\r\n            @if (icon) {\r\n                <gov-icon \r\n                    [name]=\"icon\"\r\n                    [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n                />\r\n            } @if (label) {\r\n                {{ label | translate }}\r\n            }\r\n        </gov-button>\r\n    </a>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"g-button\">\n    <a\n        [routerLink]=\"routerLink ? routerLink : undefined\"\n        [queryParams]=\"queryParams ? queryParams : undefined\"\n    >\n        <gov-button\n            [type]=\"outlined === true ? 'outlined' : type\"\n            [color]=\"severity | govColor\"\n            [disabled]=\"disabled\"\n            [size]=\"size | govSize\"\n            [name]=\"name\"\n            [expanded]=\"expanded\"\n            (gov-click)=\"handleClick($event)\"\n            (click)=\"handleClick($event)\"\n        >\n            @if (icon) {\n                <gov-icon \n                    [name]=\"icon\"\n                    [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n                />\n            } @if (label) {\n                {{ label | translate }}\n            }\n        </gov-button>\n    </a>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -244,7 +244,7 @@ class BreadcrumbComponent extends BreadcrumbCoreComponent {
                 provide: BREADCRUMB_COMPONENT_TOKEN,
                 useExisting: BreadcrumbComponent
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"gov-breadcrums mt-3 mb-3\">\r\n  <gov-breadcrumbs accessible-label=\"gov-breadcrums\">\r\n    <ul>\r\n      <li *ngIf=\"useHomeRoute\">\r\n        <gov-icon [name]=\"icons.house\" />\r\n        <a [routerLink]=\"'/'\">Home</a>\r\n      </li>\r\n      @if (items) { @for (item of items; track item; let index = $index) {\r\n      <li>\r\n        @if (index > 0 || useHomeRoute) {\r\n        <gov-icon [name]=\"icons.chevronRight\" />\r\n        }\r\n        @if (item.icon) {\r\n        <gov-icon [name]=\"item.icon\" />\r\n        }\r\n        <a [routerLink]=\"item.routerLink\">\r\n          {{ item.label }}\r\n        </a>\r\n      </li>\r\n      } }\r\n    </ul>\r\n  </gov-breadcrumbs>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovBreadcrumbs, selector: "gov-breadcrumbs", inputs: ["accessibleLabel", "accessibleLabelledBy", "accessibleToggleLabel", "collapsible", "isExpanded"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"gov-breadcrums mt-3 mb-3\">\n  <gov-breadcrumbs accessible-label=\"gov-breadcrums\">\n    <ul>\n      <li *ngIf=\"useHomeRoute\">\n        <gov-icon [name]=\"icons.house\" />\n        <a [routerLink]=\"'/'\">Home</a>\n      </li>\n      @if (items) { @for (item of items; track item; let index = $index) {\n      <li>\n        @if (index > 0 || useHomeRoute) {\n        <gov-icon [name]=\"icons.chevronRight\" />\n        }\n        @if (item.icon) {\n        <gov-icon [name]=\"item.icon\" />\n        }\n        <a [routerLink]=\"item.routerLink\">\n          {{ item.label }}\n        </a>\n      </li>\n      } }\n    </ul>\n  </gov-breadcrumbs>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovBreadcrumbs, selector: "gov-breadcrumbs", inputs: ["accessibleLabel", "accessibleLabelledBy", "accessibleToggleLabel", "collapsible", "isExpanded"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
@@ -257,7 +257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: BREADCRUMB_COMPONENT_TOKEN,
                             useExisting: BreadcrumbComponent
                         },
-                    ], template: "<div class=\"gov-breadcrums mt-3 mb-3\">\r\n  <gov-breadcrumbs accessible-label=\"gov-breadcrums\">\r\n    <ul>\r\n      <li *ngIf=\"useHomeRoute\">\r\n        <gov-icon [name]=\"icons.house\" />\r\n        <a [routerLink]=\"'/'\">Home</a>\r\n      </li>\r\n      @if (items) { @for (item of items; track item; let index = $index) {\r\n      <li>\r\n        @if (index > 0 || useHomeRoute) {\r\n        <gov-icon [name]=\"icons.chevronRight\" />\r\n        }\r\n        @if (item.icon) {\r\n        <gov-icon [name]=\"item.icon\" />\r\n        }\r\n        <a [routerLink]=\"item.routerLink\">\r\n          {{ item.label }}\r\n        </a>\r\n      </li>\r\n      } }\r\n    </ul>\r\n  </gov-breadcrumbs>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"gov-breadcrums mt-3 mb-3\">\n  <gov-breadcrumbs accessible-label=\"gov-breadcrums\">\n    <ul>\n      <li *ngIf=\"useHomeRoute\">\n        <gov-icon [name]=\"icons.house\" />\n        <a [routerLink]=\"'/'\">Home</a>\n      </li>\n      @if (items) { @for (item of items; track item; let index = $index) {\n      <li>\n        @if (index > 0 || useHomeRoute) {\n        <gov-icon [name]=\"icons.chevronRight\" />\n        }\n        @if (item.icon) {\n        <gov-icon [name]=\"item.icon\" />\n        }\n        <a [routerLink]=\"item.routerLink\">\n          {{ item.label }}\n        </a>\n      </li>\n      } }\n    </ul>\n  </gov-breadcrumbs>\n</div>\n" }]
         }] });
 class ErrorComponent {
@@ -270,11 +270,11 @@ class ErrorComponent {
         return this.errorService.mapError(errors);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ErrorComponent, isStandalone: true, selector: "v-validation-message", inputs: { ngControl: "ngControl", errorSlot: "errorSlot", messageSlot: "messageSlot" }, ngImport: i0, template: "@if (ngControl && ngControl.errors) {\r\n<gov-form-message \r\n    [slot]=\"errorSlot\" \r\n    color=\"error\"\r\n>\r\n    {{ getErrorMessage(ngControl.errors) | async }}\r\n  <gov-icon \r\n    [name]=\"icons.warning\" \r\n    slot=\"validation-icon\" />\r\n</gov-form-message>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ErrorComponent, isStandalone: true, selector: "v-validation-message", inputs: { ngControl: "ngControl", errorSlot: "errorSlot", messageSlot: "messageSlot" }, ngImport: i0, template: "@if (ngControl && ngControl.errors) {\n<gov-form-message \n    [slot]=\"errorSlot\" \n    color=\"error\"\n>\n    {{ getErrorMessage(ngControl.errors) | async }}\n  <gov-icon \n    [name]=\"icons.warning\" \n    slot=\"validation-icon\" />\n</gov-form-message>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "v-validation-message", standalone: true, imports: [CommonModule, GovDesignSystemModule], template: "@if (ngControl && ngControl.errors) {\r\n<gov-form-message \r\n    [slot]=\"errorSlot\" \r\n    color=\"error\"\r\n>\r\n    {{ getErrorMessage(ngControl.errors) | async }}\r\n  <gov-icon \r\n    [name]=\"icons.warning\" \r\n    slot=\"validation-icon\" />\r\n</gov-form-message>\r\n}\r\n" }]
+            args: [{ selector: "v-validation-message", standalone: true, imports: [CommonModule, GovDesignSystemModule], template: "@if (ngControl && ngControl.errors) {\n<gov-form-message \n    [slot]=\"errorSlot\" \n    color=\"error\"\n>\n    {{ getErrorMessage(ngControl.errors) | async }}\n  <gov-icon \n    [name]=\"icons.warning\" \n    slot=\"validation-icon\" />\n</gov-form-message>\n}\n" }]
         }], propDecorators: { ngControl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -309,7 +309,7 @@ class CalendarComponent extends BaseFormInputComponent {
                 provide: CALENDAR_COMPONENT_TOKEN,
                 useExisting: CalendarComponent
             }
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\r\n        {{ label | translate}}\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input\r\n            [formControl]=\"formControl\"\r\n            [attr.input-type]=\"type\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n            [size]=\"size | govSize\"\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [attr.disabled]=\"readonly ? 'true' : 'false'\"\r\n            [name]=\"name\"\r\n        />\r\n    </gov-form-group>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n    @if (message) {\r\n    <gov-form-message \r\n        [slot]=\"messageSlot\" \r\n        color=\"neutral\"\r\n        >\r\n        {{ message }}\r\n    </gov-form-message>\r\n    }\r\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\n        {{ label | translate}}\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input\n            [formControl]=\"formControl\"\n            [attr.input-type]=\"type\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n            [size]=\"size | govSize\"\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [attr.disabled]=\"readonly ? 'true' : 'false'\"\n            [name]=\"name\"\n        />\n    </gov-form-group>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n    @if (message) {\n    <gov-form-message \n        [slot]=\"messageSlot\" \n        color=\"neutral\"\n        >\n        {{ message }}\n    </gov-form-message>\n    }\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -325,7 +325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: CALENDAR_COMPONENT_TOKEN,
                             useExisting: CalendarComponent
                         }
-                    ], template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\r\n        {{ label | translate}}\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input\r\n            [formControl]=\"formControl\"\r\n            [attr.input-type]=\"type\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n            [size]=\"size | govSize\"\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [attr.disabled]=\"readonly ? 'true' : 'false'\"\r\n            [name]=\"name\"\r\n        />\r\n    </gov-form-group>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n    @if (message) {\r\n    <gov-form-message \r\n        [slot]=\"messageSlot\" \r\n        color=\"neutral\"\r\n        >\r\n        {{ message }}\r\n    </gov-form-message>\r\n    }\r\n</gov-form-control>" }]
+                    ], template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\n        {{ label | translate}}\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input\n            [formControl]=\"formControl\"\n            [attr.input-type]=\"type\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n            [size]=\"size | govSize\"\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [attr.disabled]=\"readonly ? 'true' : 'false'\"\n            [name]=\"name\"\n        />\n    </gov-form-group>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n    @if (message) {\n    <gov-form-message \n        [slot]=\"messageSlot\" \n        color=\"neutral\"\n        >\n        {{ message }}\n    </gov-form-message>\n    }\n</gov-form-control>" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -373,7 +373,7 @@ class CheckboxComponent extends BaseFormInputComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CheckboxComponent, isStandalone: true, selector: "v-checkbox", inputs: { size: "size", value: "value", name: "name", indeterminate: "indeterminate", noLabel: "noLabel" }, providers: [{
                 provide: CHECKBOX_COMPONENT_TOKEN,
                 useExisting: CheckboxComponent,
-            }], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mt-3\">\r\n    <gov-form-checkbox \r\n        [formControl]=\"formControl\"\r\n        [size]=\"size | govSize\"\r\n        [value]=\"value\"\r\n        [required]=\"required\"\r\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\r\n        [identifier]=\"id\"\r\n        [indeterminate]=\"indeterminate\"\r\n        [name]=\"name\"\r\n        [invalid]=\"ngControl?.errors\"\r\n        [noLabel]=\"noLabel\"\r\n        [disabled]=\"disabled\"\r\n    >   \r\n        <gov-form-label\r\n            [size]=\"size\"\r\n            slot=\"label\"\r\n        >\r\n            {{ label ?? '' | translate }}\r\n        </gov-form-label>\r\n    </gov-form-checkbox>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mt-3\">\n    <gov-form-checkbox \n        [formControl]=\"formControl\"\n        [size]=\"size | govSize\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\n        [identifier]=\"id\"\n        [indeterminate]=\"indeterminate\"\n        [name]=\"name\"\n        [invalid]=\"ngControl?.errors\"\n        [noLabel]=\"noLabel\"\n        [disabled]=\"disabled\"\n    >   \n        <gov-form-label\n            [size]=\"size\"\n            slot=\"label\"\n        >\n            {{ label ?? '' | translate }}\n        </gov-form-label>\n    </gov-form-checkbox>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -388,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: CHECKBOX_COMPONENT_TOKEN,
                             useExisting: CheckboxComponent,
-                        }], template: "<gov-form-control class=\"mt-3\">\r\n    <gov-form-checkbox \r\n        [formControl]=\"formControl\"\r\n        [size]=\"size | govSize\"\r\n        [value]=\"value\"\r\n        [required]=\"required\"\r\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\r\n        [identifier]=\"id\"\r\n        [indeterminate]=\"indeterminate\"\r\n        [name]=\"name\"\r\n        [invalid]=\"ngControl?.errors\"\r\n        [noLabel]=\"noLabel\"\r\n        [disabled]=\"disabled\"\r\n    >   \r\n        <gov-form-label\r\n            [size]=\"size\"\r\n            slot=\"label\"\r\n        >\r\n            {{ label ?? '' | translate }}\r\n        </gov-form-label>\r\n    </gov-form-checkbox>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n" }]
+                        }], template: "<gov-form-control class=\"mt-3\">\n    <gov-form-checkbox \n        [formControl]=\"formControl\"\n        [size]=\"size | govSize\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\n        [identifier]=\"id\"\n        [indeterminate]=\"indeterminate\"\n        [name]=\"name\"\n        [invalid]=\"ngControl?.errors\"\n        [noLabel]=\"noLabel\"\n        [disabled]=\"disabled\"\n    >   \n        <gov-form-label\n            [size]=\"size\"\n            slot=\"label\"\n        >\n            {{ label ?? '' | translate }}\n        </gov-form-label>\n    </gov-form-checkbox>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -434,11 +434,11 @@ class ActionButtonComponent {
         this.click.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ActionButtonComponent, isStandalone: true, selector: "v-action-button", inputs: { disabled: "disabled", toolTip: "toolTip", id: "id", icon: "icon", outlined: "outlined", raised: "raised", severity: "severity", label: "label", size: "size" }, outputs: { click: "click" }, usesOnChanges: true, ngImport: i0, template: "<v-button\r\n  [label]=\"label\"\r\n  [disabled]=\"disabled\"\r\n  [icon]=\"icon\"\r\n  [pTooltip]=\"toolTip\"\r\n  [outlined]=\"outlined\"\r\n  tooltipPosition=\"bottom\"\r\n  [size]=\"size\"\r\n  [severity]=\"severity\"\r\n  (click)=\"handleClick($event)\"\r\n></v-button>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ActionButtonComponent, isStandalone: true, selector: "v-action-button", inputs: { disabled: "disabled", toolTip: "toolTip", id: "id", icon: "icon", outlined: "outlined", raised: "raised", severity: "severity", label: "label", size: "size" }, outputs: { click: "click" }, usesOnChanges: true, ngImport: i0, template: "<v-button\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [icon]=\"icon\"\n  [pTooltip]=\"toolTip\"\n  [outlined]=\"outlined\"\n  tooltipPosition=\"bottom\"\n  [size]=\"size\"\n  [severity]=\"severity\"\n  (click)=\"handleClick($event)\"\n></v-button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-action-button', standalone: true, imports: [ButtonComponent, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<v-button\r\n  [label]=\"label\"\r\n  [disabled]=\"disabled\"\r\n  [icon]=\"icon\"\r\n  [pTooltip]=\"toolTip\"\r\n  [outlined]=\"outlined\"\r\n  tooltipPosition=\"bottom\"\r\n  [size]=\"size\"\r\n  [severity]=\"severity\"\r\n  (click)=\"handleClick($event)\"\r\n></v-button>\r\n" }]
+            args: [{ selector: 'v-action-button', standalone: true, imports: [ButtonComponent, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<v-button\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [icon]=\"icon\"\n  [pTooltip]=\"toolTip\"\n  [outlined]=\"outlined\"\n  tooltipPosition=\"bottom\"\n  [size]=\"size\"\n  [severity]=\"severity\"\n  (click)=\"handleClick($event)\"\n></v-button>\n" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], toolTip: [{
@@ -519,7 +519,7 @@ class ActionButtonGroupComponent extends UnsubscribeComponent {
                 provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
                 useExisting: ActionButtonGroupComponent,
             },
-        ], queries: [{ propertyName: "actions", predicate: ActionButtonComponent }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"v-action-button-group align-items-center justify-content-center justify-content-md-end\"\r\n>\r\n  <div class=\"v-action-button-group__actions d-flex gap-2\">\r\n    @for (action of visibleActions; track action) {\r\n    <v-action-button\r\n      [disabled]=\"action.disabled\"\r\n      [icon]=\"action.icon\"\r\n      [id]=\"action.id\"\r\n      [outlined]=\"action.outlined\"\r\n      [raised]=\"action.raised\"\r\n      [toolTip]=\"action.toolTip || action.label\"\r\n      [severity]=\"action.severity\"\r\n      [size]=\"action.size\"\r\n      (click)=\"fireClick(action, $event)\"\r\n    ></v-action-button>\r\n    } @if (actions.length > visibleActions.length) {\r\n    <v-button\r\n      (click)=\"menu.toggle($event)\"\r\n      [label]=\"label\"\r\n      [iconPos]=\"menuIconPos\"\r\n      [icon]=\"menuIcon\"\r\n    />\r\n    }\r\n  </div>\r\n</div>\r\n<p-menu #menu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\" />\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MenuModule }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "actions", predicate: ActionButtonComponent }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"v-action-button-group align-items-center justify-content-center justify-content-md-end\"\n>\n  <div class=\"v-action-button-group__actions d-flex gap-2\">\n    @for (action of visibleActions; track action) {\n    <v-action-button\n      [disabled]=\"action.disabled\"\n      [icon]=\"action.icon\"\n      [id]=\"action.id\"\n      [outlined]=\"action.outlined\"\n      [raised]=\"action.raised\"\n      [toolTip]=\"action.toolTip || action.label\"\n      [severity]=\"action.severity\"\n      [size]=\"action.size\"\n      (click)=\"fireClick(action, $event)\"\n    ></v-action-button>\n    } @if (actions.length > visibleActions.length) {\n    <v-button\n      (click)=\"menu.toggle($event)\"\n      [label]=\"label\"\n      [iconPos]=\"menuIconPos\"\n      [icon]=\"menuIcon\"\n    />\n    }\n  </div>\n</div>\n<p-menu #menu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\" />\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MenuModule }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonGroupComponent, decorators: [{
             type: Component,
@@ -528,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
                             useExisting: ActionButtonGroupComponent,
                         },
-                    ], template: "<div\r\n  class=\"v-action-button-group align-items-center justify-content-center justify-content-md-end\"\r\n>\r\n  <div class=\"v-action-button-group__actions d-flex gap-2\">\r\n    @for (action of visibleActions; track action) {\r\n    <v-action-button\r\n      [disabled]=\"action.disabled\"\r\n      [icon]=\"action.icon\"\r\n      [id]=\"action.id\"\r\n      [outlined]=\"action.outlined\"\r\n      [raised]=\"action.raised\"\r\n      [toolTip]=\"action.toolTip || action.label\"\r\n      [severity]=\"action.severity\"\r\n      [size]=\"action.size\"\r\n      (click)=\"fireClick(action, $event)\"\r\n    ></v-action-button>\r\n    } @if (actions.length > visibleActions.length) {\r\n    <v-button\r\n      (click)=\"menu.toggle($event)\"\r\n      [label]=\"label\"\r\n      [iconPos]=\"menuIconPos\"\r\n      [icon]=\"menuIcon\"\r\n    />\r\n    }\r\n  </div>\r\n</div>\r\n<p-menu #menu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\" />\r\n" }]
+                    ], template: "<div\n  class=\"v-action-button-group align-items-center justify-content-center justify-content-md-end\"\n>\n  <div class=\"v-action-button-group__actions d-flex gap-2\">\n    @for (action of visibleActions; track action) {\n    <v-action-button\n      [disabled]=\"action.disabled\"\n      [icon]=\"action.icon\"\n      [id]=\"action.id\"\n      [outlined]=\"action.outlined\"\n      [raised]=\"action.raised\"\n      [toolTip]=\"action.toolTip || action.label\"\n      [severity]=\"action.severity\"\n      [size]=\"action.size\"\n      (click)=\"fireClick(action, $event)\"\n    ></v-action-button>\n    } @if (actions.length > visibleActions.length) {\n    <v-button\n      (click)=\"menu.toggle($event)\"\n      [label]=\"label\"\n      [iconPos]=\"menuIconPos\"\n      [icon]=\"menuIcon\"\n    />\n    }\n  </div>\n</div>\n<p-menu #menu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\" />\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.ScreenSizeService }], propDecorators: { actions: [{
                 type: ContentChildren,
                 args: [ActionButtonComponent]
@@ -588,14 +588,14 @@ class TooltipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TooltipComponent, isStandalone: true, selector: "v-tooltip", inputs: { color: "color", size: "size", position: "position", message: "message", label: "label" }, ngImport: i0, template: "<gov-tooltip\r\n    class=\"ms-2\"\r\n    [color]=\"color\"\r\n    [size]=\"size | govSize\"\r\n    [position]=\"position\"\r\n    [message]=\"message\"\r\n    (click)=\"toggleTooltip()\"\r\n>\r\n    {{ label }}\r\n</gov-tooltip>", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovTooltip, selector: "gov-tooltip", inputs: ["color", "icon", "identifier", "message", "position", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TooltipComponent, isStandalone: true, selector: "v-tooltip", inputs: { color: "color", size: "size", position: "position", message: "message", label: "label" }, ngImport: i0, template: "<gov-tooltip\n    class=\"ms-2\"\n    [color]=\"color\"\n    [size]=\"size | govSize\"\n    [position]=\"position\"\n    [message]=\"message\"\n    (click)=\"toggleTooltip()\"\n>\n    {{ label }}\n</gov-tooltip>", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovTooltip, selector: "gov-tooltip", inputs: ["color", "icon", "identifier", "message", "position", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "v-tooltip", imports: [
                         GovDesignSystemModule,
                         GovSizePipe
-                    ], template: "<gov-tooltip\r\n    class=\"ms-2\"\r\n    [color]=\"color\"\r\n    [size]=\"size | govSize\"\r\n    [position]=\"position\"\r\n    [message]=\"message\"\r\n    (click)=\"toggleTooltip()\"\r\n>\r\n    {{ label }}\r\n</gov-tooltip>" }]
+                    ], template: "<gov-tooltip\n    class=\"ms-2\"\n    [color]=\"color\"\n    [size]=\"size | govSize\"\n    [position]=\"position\"\n    [message]=\"message\"\n    (click)=\"toggleTooltip()\"\n>\n    {{ label }}\n</gov-tooltip>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { color: [{
                 type: Input
             }], size: [{
@@ -662,7 +662,7 @@ class TextfieldComponent extends BaseFormInputComponent {
                 provide: TEXTFIELD_COMPONENT_TOKEN,
                 useExisting: TextfieldComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label\r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        <div class=\"d-flex\">\r\n            {{ label | translate }}\r\n            @if (tooltip) {\r\n            <v-tooltip [message]=\"tooltip | translate\" />\r\n            }\r\n        </div>\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input\r\n            [inputType]=\"type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\"\r\n            [maxlength]=\"maxlength\"\r\n            [min]=\"min\"\r\n            [max]=\"max\"\r\n            [size]='size | govSize'\r\n            [name]='name'\r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [attr.disabled]=\"disabled ? 'true' : 'false'\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n            [placeholder]=\"placeholder\"\r\n        >\r\n            @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icon\"\r\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n            />\r\n            } @if (prefix) {\r\n            <p slot=\"prefix\">\r\n                {{ prefix }}\r\n            </p>\r\n            } @if (sufix) {\r\n            <p slot=\"sufix\">\r\n                {{ sufix }}\r\n            </p>\r\n            }\r\n        </gov-form-input>\r\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n        @if (message) {\r\n        <gov-form-message\r\n            [slot]=\"messageSlot\"\r\n            color=\"neutral\"\r\n        >\r\n            {{ message }}\r\n        </gov-form-message>\r\n        }\r\n    </gov-form-group>\r\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: TooltipComponent, selector: "v-tooltip", inputs: ["color", "size", "position", "message", "label"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label\n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        <div class=\"d-flex\">\n            {{ label | translate }}\n            @if (tooltip) {\n            <v-tooltip [message]=\"tooltip | translate\" />\n            }\n        </div>\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input\n            [inputType]=\"type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\"\n            [maxlength]=\"maxlength\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [size]='size | govSize'\n            [name]='name'\n            [role]='role'\n            [required]=\"required\"\n            [attr.disabled]=\"disabled ? 'true' : 'false'\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n            [placeholder]=\"placeholder\"\n        >\n            @if (icon) {\n            <gov-icon\n                [name]=\"icon\"\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n            />\n            } @if (prefix) {\n            <p slot=\"prefix\">\n                {{ prefix }}\n            </p>\n            } @if (sufix) {\n            <p slot=\"sufix\">\n                {{ sufix }}\n            </p>\n            }\n        </gov-form-input>\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n        @if (message) {\n        <gov-form-message\n            [slot]=\"messageSlot\"\n            color=\"neutral\"\n        >\n            {{ message }}\n        </gov-form-message>\n        }\n    </gov-form-group>\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: TooltipComponent, selector: "v-tooltip", inputs: ["color", "size", "position", "message", "label"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextfieldComponent, decorators: [{
             type: Component,
@@ -679,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: TEXTFIELD_COMPONENT_TOKEN,
                             useExisting: TextfieldComponent,
                         },
-                    ], template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label\r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        <div class=\"d-flex\">\r\n            {{ label | translate }}\r\n            @if (tooltip) {\r\n            <v-tooltip [message]=\"tooltip | translate\" />\r\n            }\r\n        </div>\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input\r\n            [inputType]=\"type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\"\r\n            [maxlength]=\"maxlength\"\r\n            [min]=\"min\"\r\n            [max]=\"max\"\r\n            [size]='size | govSize'\r\n            [name]='name'\r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [attr.disabled]=\"disabled ? 'true' : 'false'\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n            [placeholder]=\"placeholder\"\r\n        >\r\n            @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icon\"\r\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n            />\r\n            } @if (prefix) {\r\n            <p slot=\"prefix\">\r\n                {{ prefix }}\r\n            </p>\r\n            } @if (sufix) {\r\n            <p slot=\"sufix\">\r\n                {{ sufix }}\r\n            </p>\r\n            }\r\n        </gov-form-input>\r\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n        @if (message) {\r\n        <gov-form-message\r\n            [slot]=\"messageSlot\"\r\n            color=\"neutral\"\r\n        >\r\n            {{ message }}\r\n        </gov-form-message>\r\n        }\r\n    </gov-form-group>\r\n</gov-form-control>" }]
+                    ], template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label\n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        <div class=\"d-flex\">\n            {{ label | translate }}\n            @if (tooltip) {\n            <v-tooltip [message]=\"tooltip | translate\" />\n            }\n        </div>\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input\n            [inputType]=\"type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\"\n            [maxlength]=\"maxlength\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [size]='size | govSize'\n            [name]='name'\n            [role]='role'\n            [required]=\"required\"\n            [attr.disabled]=\"disabled ? 'true' : 'false'\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n            [placeholder]=\"placeholder\"\n        >\n            @if (icon) {\n            <gov-icon\n                [name]=\"icon\"\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n            />\n            } @if (prefix) {\n            <p slot=\"prefix\">\n                {{ prefix }}\n            </p>\n            } @if (sufix) {\n            <p slot=\"sufix\">\n                {{ sufix }}\n            </p>\n            }\n        </gov-form-input>\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n        @if (message) {\n        <gov-form-message\n            [slot]=\"messageSlot\"\n            color=\"neutral\"\n        >\n            {{ message }}\n        </gov-form-message>\n        }\n    </gov-form-group>\n</gov-form-control>" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -924,7 +924,7 @@ class DropdownComponent extends BaseFormInputComponent {
                 provide: DROPDOWN_COMPONENT_TOKEN,
                 useExisting: DropdownComponent,
             },
-        ], viewQueries: [{ propertyName: "filterTextField", first: true, predicate: ["filterTextField"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"v-dropdown mb-3\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n>\r\n  <gov-form-control [disabled]=\"this.ngControl?.disabled\">\r\n    <gov-form-label\r\n      [slot]=\"label\"\r\n      [ngClass]=\"labelClasses\"\r\n    >\r\n      <span [ngClass]=\"labelClasses\">\r\n        {{ label ?? '' | translate }}\r\n        @if (tooltip) {\r\n        <v-tooltip [message]=\"tooltip | translate\" />\r\n        }\r\n      </span>\r\n    </gov-form-label>\r\n    <div\r\n      class=\"gov-form-input\"\r\n      [ngStyle]=\"forceMinWidth ? {'min-width': '16rem'} : {}\"\r\n      [ngClass]=\"inputClasses\"\r\n    >\r\n      <div\r\n        class=\"element d-flex gov-form-input-child\"\r\n        [ngClass]=\"labelClasses\"\r\n        (click)=\"toggleDropdown()\"\r\n      >\r\n        <div class=\"v-dropdown__value flex-grow-1 me-1\">{{ selectedItem?.label ?? placeholder }}</div>\r\n        @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {\r\n          <gov-icon\r\n            [name]=\"icons.cross\"\r\n            size=\"m\"\r\n            class=\"v-dropdown__clear me-1\"\r\n            color=\"error\"\r\n            (click)=\"clearSelection($event)\"\r\n          />\r\n        }\r\n        @if (loading) {\r\n        <div class=\"v-dropdown__loader\">\r\n          <gov-icon [name]=\"icons.loader\" />\r\n        </div>\r\n        }\r\n        <div class=\"v-dropdown__trigger\">\r\n          <gov-icon [name]=\"opened ? icons.chevronUp : icons.chevronDown\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"position-relative\">\r\n      @if (opened) {\r\n      <div class=\"v-dropdown__container\">\r\n        @if (showFilter) {\r\n        <div\r\n          class=\"v-dropdown__filter\"\r\n          #filterTextField\r\n          (keydown)=\"onKeyDown($event)\"\r\n        >\r\n          <v-textfield\r\n            placeholder=\"Search\"\r\n            [formControl]=\"filterControl\"\r\n            iconPos=\"right\"\r\n            [icon]=\"icons.search\"\r\n          />\r\n        </div>\r\n        }\r\n        @if (!dropdownOptions?.length) {\r\n        <div class=\"v-dropdown__no-item\">No option was found.</div>\r\n        } @else {\r\n        <ul\r\n          role=\"listbox\"\r\n          class=\"v-dropdown__list\"\r\n        >\r\n          <cdk-virtual-scroll-viewport\r\n            [itemSize]=\"30\"\r\n            class=\"v-dropdown__scroll\"\r\n            (scrolledIndexChange)=\"onScroll($event)\"\r\n          >\r\n            <v-dropdown-item\r\n              *cdkVirtualFor=\"let option of dropdownOptions;\"\r\n              [item]=\"option\"\r\n              (click)=\"selectItem(option, true)\"\r\n            >\r\n            </v-dropdown-item>\r\n          </cdk-virtual-scroll-viewport>\r\n        </ul>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n  </gov-form-control>\r\n</div>\r\n", styles: [".v-dropdown__container{position:absolute;z-index:100;background-color:var(--button-outlined-primary-hover);min-width:100%;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-neutral))}.v-dropdown__trigger{min-height:1.5rem;display:flex}.disabled{color:var(--form-state-value-disabled, var(--text-disabled));cursor:default!important;pointer-events:none}.disabled-input{border-color:var(--form-state-border-disabled, var(--border-subtlest))!important;background:var(--form-state-bg-disabled, transparent)}.error{color:var(--form-state-label-error, var(--text-status-error))}.error-input{border-color:var(--form-state-border-error, var(--status-error))!important}.gov-form-input-child{padding:.5rem .75rem;border:0px!important}.v-dropdown__no-item{padding:.5rem}.v-dropdown__list{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;overflow:auto}.v-dropdown__scroll{height:10rem}.v-dropdown__filter{padding:.5rem}.v-dropdown__item{padding:.25rem .5rem;cursor:pointer}.v-dropdown__item.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__item.is-active:hover{opacity:.8}.v-dropdown__item:hover{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__loader{width:1.5rem;height:1.5rem;margin-right:1rem;animation:rotate 1s linear infinite;display:inline-block;transform-origin:center;color:var(--color-neutral-300)}.v-dropdown__clear{z-index:99;cursor:pointer}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::ng-deep .cdk-virtual-scrollable{contain:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "component", type: DropdownItemComponent, selector: "v-dropdown-item", inputs: ["item"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "filterTextField", first: true, predicate: ["filterTextField"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"v-dropdown mb-3\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <gov-form-control [disabled]=\"this.ngControl?.disabled\">\n    <gov-form-label\n      [slot]=\"label\"\n      [ngClass]=\"labelClasses\"\n    >\n      <span [ngClass]=\"labelClasses\">\n        {{ label ?? '' | translate }}\n        @if (tooltip) {\n        <v-tooltip [message]=\"tooltip | translate\" />\n        }\n      </span>\n    </gov-form-label>\n    <div\n      class=\"gov-form-input\"\n      [ngStyle]=\"forceMinWidth ? {'min-width': '16rem'} : {}\"\n      [ngClass]=\"inputClasses\"\n    >\n      <div\n        class=\"element d-flex gov-form-input-child\"\n        [ngClass]=\"labelClasses\"\n        (click)=\"toggleDropdown()\"\n      >\n        <div class=\"v-dropdown__value flex-grow-1 me-1\">{{ selectedItem?.label ?? placeholder }}</div>\n        @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {\n          <gov-icon\n            [name]=\"icons.cross\"\n            size=\"m\"\n            class=\"v-dropdown__clear me-1\"\n            color=\"error\"\n            (click)=\"clearSelection($event)\"\n          />\n        }\n        @if (loading) {\n        <div class=\"v-dropdown__loader\">\n          <gov-icon [name]=\"icons.loader\" />\n        </div>\n        }\n        <div class=\"v-dropdown__trigger\">\n          <gov-icon [name]=\"opened ? icons.chevronUp : icons.chevronDown\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"position-relative\">\n      @if (opened) {\n      <div class=\"v-dropdown__container\">\n        @if (showFilter) {\n        <div\n          class=\"v-dropdown__filter\"\n          #filterTextField\n          (keydown)=\"onKeyDown($event)\"\n        >\n          <v-textfield\n            placeholder=\"Search\"\n            [formControl]=\"filterControl\"\n            iconPos=\"right\"\n            [icon]=\"icons.search\"\n          />\n        </div>\n        }\n        @if (!dropdownOptions?.length) {\n        <div class=\"v-dropdown__no-item\">No option was found.</div>\n        } @else {\n        <ul\n          role=\"listbox\"\n          class=\"v-dropdown__list\"\n        >\n          <cdk-virtual-scroll-viewport\n            [itemSize]=\"30\"\n            class=\"v-dropdown__scroll\"\n            (scrolledIndexChange)=\"onScroll($event)\"\n          >\n            <v-dropdown-item\n              *cdkVirtualFor=\"let option of dropdownOptions;\"\n              [item]=\"option\"\n              (click)=\"selectItem(option, true)\"\n            >\n            </v-dropdown-item>\n          </cdk-virtual-scroll-viewport>\n        </ul>\n        }\n      </div>\n      }\n    </div>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n  </gov-form-control>\n</div>\n", styles: [".v-dropdown__container{position:absolute;z-index:100;background-color:var(--button-outlined-primary-hover);min-width:100%;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-neutral))}.v-dropdown__trigger{min-height:1.5rem;display:flex}.disabled{color:var(--form-state-value-disabled, var(--text-disabled));cursor:default!important;pointer-events:none}.disabled-input{border-color:var(--form-state-border-disabled, var(--border-subtlest))!important;background:var(--form-state-bg-disabled, transparent)}.error{color:var(--form-state-label-error, var(--text-status-error))}.error-input{border-color:var(--form-state-border-error, var(--status-error))!important}.gov-form-input-child{padding:.5rem .75rem;border:0px!important}.v-dropdown__no-item{padding:.5rem}.v-dropdown__list{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;overflow:auto}.v-dropdown__scroll{height:10rem}.v-dropdown__filter{padding:.5rem}.v-dropdown__item{padding:.25rem .5rem;cursor:pointer}.v-dropdown__item.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__item.is-active:hover{opacity:.8}.v-dropdown__item:hover{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__loader{width:1.5rem;height:1.5rem;margin-right:1rem;animation:rotate 1s linear infinite;display:inline-block;transform-origin:center;color:var(--color-neutral-300)}.v-dropdown__clear{z-index:99;cursor:pointer}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::ng-deep .cdk-virtual-scrollable{contain:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "component", type: DropdownItemComponent, selector: "v-dropdown-item", inputs: ["item"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -944,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         },
                     ], schemas: [
                         NO_ERRORS_SCHEMA
-                    ], template: "<div\r\n  class=\"v-dropdown mb-3\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n>\r\n  <gov-form-control [disabled]=\"this.ngControl?.disabled\">\r\n    <gov-form-label\r\n      [slot]=\"label\"\r\n      [ngClass]=\"labelClasses\"\r\n    >\r\n      <span [ngClass]=\"labelClasses\">\r\n        {{ label ?? '' | translate }}\r\n        @if (tooltip) {\r\n        <v-tooltip [message]=\"tooltip | translate\" />\r\n        }\r\n      </span>\r\n    </gov-form-label>\r\n    <div\r\n      class=\"gov-form-input\"\r\n      [ngStyle]=\"forceMinWidth ? {'min-width': '16rem'} : {}\"\r\n      [ngClass]=\"inputClasses\"\r\n    >\r\n      <div\r\n        class=\"element d-flex gov-form-input-child\"\r\n        [ngClass]=\"labelClasses\"\r\n        (click)=\"toggleDropdown()\"\r\n      >\r\n        <div class=\"v-dropdown__value flex-grow-1 me-1\">{{ selectedItem?.label ?? placeholder }}</div>\r\n        @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {\r\n          <gov-icon\r\n            [name]=\"icons.cross\"\r\n            size=\"m\"\r\n            class=\"v-dropdown__clear me-1\"\r\n            color=\"error\"\r\n            (click)=\"clearSelection($event)\"\r\n          />\r\n        }\r\n        @if (loading) {\r\n        <div class=\"v-dropdown__loader\">\r\n          <gov-icon [name]=\"icons.loader\" />\r\n        </div>\r\n        }\r\n        <div class=\"v-dropdown__trigger\">\r\n          <gov-icon [name]=\"opened ? icons.chevronUp : icons.chevronDown\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"position-relative\">\r\n      @if (opened) {\r\n      <div class=\"v-dropdown__container\">\r\n        @if (showFilter) {\r\n        <div\r\n          class=\"v-dropdown__filter\"\r\n          #filterTextField\r\n          (keydown)=\"onKeyDown($event)\"\r\n        >\r\n          <v-textfield\r\n            placeholder=\"Search\"\r\n            [formControl]=\"filterControl\"\r\n            iconPos=\"right\"\r\n            [icon]=\"icons.search\"\r\n          />\r\n        </div>\r\n        }\r\n        @if (!dropdownOptions?.length) {\r\n        <div class=\"v-dropdown__no-item\">No option was found.</div>\r\n        } @else {\r\n        <ul\r\n          role=\"listbox\"\r\n          class=\"v-dropdown__list\"\r\n        >\r\n          <cdk-virtual-scroll-viewport\r\n            [itemSize]=\"30\"\r\n            class=\"v-dropdown__scroll\"\r\n            (scrolledIndexChange)=\"onScroll($event)\"\r\n          >\r\n            <v-dropdown-item\r\n              *cdkVirtualFor=\"let option of dropdownOptions;\"\r\n              [item]=\"option\"\r\n              (click)=\"selectItem(option, true)\"\r\n            >\r\n            </v-dropdown-item>\r\n          </cdk-virtual-scroll-viewport>\r\n        </ul>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n  </gov-form-control>\r\n</div>\r\n", styles: [".v-dropdown__container{position:absolute;z-index:100;background-color:var(--button-outlined-primary-hover);min-width:100%;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-neutral))}.v-dropdown__trigger{min-height:1.5rem;display:flex}.disabled{color:var(--form-state-value-disabled, var(--text-disabled));cursor:default!important;pointer-events:none}.disabled-input{border-color:var(--form-state-border-disabled, var(--border-subtlest))!important;background:var(--form-state-bg-disabled, transparent)}.error{color:var(--form-state-label-error, var(--text-status-error))}.error-input{border-color:var(--form-state-border-error, var(--status-error))!important}.gov-form-input-child{padding:.5rem .75rem;border:0px!important}.v-dropdown__no-item{padding:.5rem}.v-dropdown__list{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;overflow:auto}.v-dropdown__scroll{height:10rem}.v-dropdown__filter{padding:.5rem}.v-dropdown__item{padding:.25rem .5rem;cursor:pointer}.v-dropdown__item.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__item.is-active:hover{opacity:.8}.v-dropdown__item:hover{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__loader{width:1.5rem;height:1.5rem;margin-right:1rem;animation:rotate 1s linear infinite;display:inline-block;transform-origin:center;color:var(--color-neutral-300)}.v-dropdown__clear{z-index:99;cursor:pointer}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::ng-deep .cdk-virtual-scrollable{contain:none}\n"] }]
+                    ], template: "<div\n  class=\"v-dropdown mb-3\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <gov-form-control [disabled]=\"this.ngControl?.disabled\">\n    <gov-form-label\n      [slot]=\"label\"\n      [ngClass]=\"labelClasses\"\n    >\n      <span [ngClass]=\"labelClasses\">\n        {{ label ?? '' | translate }}\n        @if (tooltip) {\n        <v-tooltip [message]=\"tooltip | translate\" />\n        }\n      </span>\n    </gov-form-label>\n    <div\n      class=\"gov-form-input\"\n      [ngStyle]=\"forceMinWidth ? {'min-width': '16rem'} : {}\"\n      [ngClass]=\"inputClasses\"\n    >\n      <div\n        class=\"element d-flex gov-form-input-child\"\n        [ngClass]=\"labelClasses\"\n        (click)=\"toggleDropdown()\"\n      >\n        <div class=\"v-dropdown__value flex-grow-1 me-1\">{{ selectedItem?.label ?? placeholder }}</div>\n        @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {\n          <gov-icon\n            [name]=\"icons.cross\"\n            size=\"m\"\n            class=\"v-dropdown__clear me-1\"\n            color=\"error\"\n            (click)=\"clearSelection($event)\"\n          />\n        }\n        @if (loading) {\n        <div class=\"v-dropdown__loader\">\n          <gov-icon [name]=\"icons.loader\" />\n        </div>\n        }\n        <div class=\"v-dropdown__trigger\">\n          <gov-icon [name]=\"opened ? icons.chevronUp : icons.chevronDown\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"position-relative\">\n      @if (opened) {\n      <div class=\"v-dropdown__container\">\n        @if (showFilter) {\n        <div\n          class=\"v-dropdown__filter\"\n          #filterTextField\n          (keydown)=\"onKeyDown($event)\"\n        >\n          <v-textfield\n            placeholder=\"Search\"\n            [formControl]=\"filterControl\"\n            iconPos=\"right\"\n            [icon]=\"icons.search\"\n          />\n        </div>\n        }\n        @if (!dropdownOptions?.length) {\n        <div class=\"v-dropdown__no-item\">No option was found.</div>\n        } @else {\n        <ul\n          role=\"listbox\"\n          class=\"v-dropdown__list\"\n        >\n          <cdk-virtual-scroll-viewport\n            [itemSize]=\"30\"\n            class=\"v-dropdown__scroll\"\n            (scrolledIndexChange)=\"onScroll($event)\"\n          >\n            <v-dropdown-item\n              *cdkVirtualFor=\"let option of dropdownOptions;\"\n              [item]=\"option\"\n              (click)=\"selectItem(option, true)\"\n            >\n            </v-dropdown-item>\n          </cdk-virtual-scroll-viewport>\n        </ul>\n        }\n      </div>\n      }\n    </div>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n  </gov-form-control>\n</div>\n", styles: [".v-dropdown__container{position:absolute;z-index:100;background-color:var(--button-outlined-primary-hover);min-width:100%;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-neutral))}.v-dropdown__trigger{min-height:1.5rem;display:flex}.disabled{color:var(--form-state-value-disabled, var(--text-disabled));cursor:default!important;pointer-events:none}.disabled-input{border-color:var(--form-state-border-disabled, var(--border-subtlest))!important;background:var(--form-state-bg-disabled, transparent)}.error{color:var(--form-state-label-error, var(--text-status-error))}.error-input{border-color:var(--form-state-border-error, var(--status-error))!important}.gov-form-input-child{padding:.5rem .75rem;border:0px!important}.v-dropdown__no-item{padding:.5rem}.v-dropdown__list{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;overflow:auto}.v-dropdown__scroll{height:10rem}.v-dropdown__filter{padding:.5rem}.v-dropdown__item{padding:.25rem .5rem;cursor:pointer}.v-dropdown__item.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__item.is-active:hover{opacity:.8}.v-dropdown__item:hover{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__loader{width:1.5rem;height:1.5rem;margin-right:1rem;animation:rotate 1s linear infinite;display:inline-block;transform-origin:center;color:var(--color-neutral-300)}.v-dropdown__clear{z-index:99;cursor:pointer}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::ng-deep .cdk-virtual-scrollable{contain:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -1046,7 +1046,7 @@ class MultiselectComponent extends BaseFormInputComponent {
                 provide: MULTISELECT_COMPONENT_TOKEN,
                 useExisting: MultiselectComponent,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<gov-form-control>\r\n  <gov-form-label \r\n    [slot]=\"label\"\r\n    [size]=\"size | govSize\"\r\n  >\r\n    {{ label }}\r\n  </gov-form-label>\r\n  <gov-form-multi-select\r\n    [size]=\"size | govSize\"\r\n    [formControl]=\"formControl\"\r\n    [required]=\"required\"\r\n    [invalid]=\"ngControl && ngControl.errors\"\r\n    [options]=\"options | govMultiselectOptions : optionLabel : optionValue\"\r\n    [placeholder]=\"placeholder ?? ''\"\r\n    (gov-focus)=\"onDropdownShow()\"\r\n    (gov-remove)=\"onDropdownClear()\"\r\n    (gov-change)=\"selectionChange($event)\"\r\n    (lazyLoadEvent)=\"onLazyLoad($any($event))\"\r\n  />\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMultiSelect, selector: "gov-form-multi-select", inputs: ["disabled", "hideSelectedList", "identifier", "invalid", "messageEmpty", "messageLoading", "name", "options", "placeholder", "required", "size", "success", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "gov-form-select, gov-form-multi-select" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovMultiselectOptionsPipe, name: "govMultiselectOptions" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<gov-form-control>\n  <gov-form-label \n    [slot]=\"label\"\n    [size]=\"size | govSize\"\n  >\n    {{ label }}\n  </gov-form-label>\n  <gov-form-multi-select\n    [size]=\"size | govSize\"\n    [formControl]=\"formControl\"\n    [required]=\"required\"\n    [invalid]=\"ngControl && ngControl.errors\"\n    [options]=\"options | govMultiselectOptions : optionLabel : optionValue\"\n    [placeholder]=\"placeholder ?? ''\"\n    (gov-focus)=\"onDropdownShow()\"\n    (gov-remove)=\"onDropdownClear()\"\n    (gov-change)=\"selectionChange($event)\"\n    (lazyLoadEvent)=\"onLazyLoad($any($event))\"\n  />\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMultiSelect, selector: "gov-form-multi-select", inputs: ["disabled", "hideSelectedList", "identifier", "invalid", "messageEmpty", "messageLoading", "name", "options", "placeholder", "required", "size", "success", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "gov-form-select, gov-form-multi-select" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovMultiselectOptionsPipe, name: "govMultiselectOptions" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -1062,7 +1062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: MULTISELECT_COMPONENT_TOKEN,
                             useExisting: MultiselectComponent,
                         },
-                    ], template: "<gov-form-control>\r\n  <gov-form-label \r\n    [slot]=\"label\"\r\n    [size]=\"size | govSize\"\r\n  >\r\n    {{ label }}\r\n  </gov-form-label>\r\n  <gov-form-multi-select\r\n    [size]=\"size | govSize\"\r\n    [formControl]=\"formControl\"\r\n    [required]=\"required\"\r\n    [invalid]=\"ngControl && ngControl.errors\"\r\n    [options]=\"options | govMultiselectOptions : optionLabel : optionValue\"\r\n    [placeholder]=\"placeholder ?? ''\"\r\n    (gov-focus)=\"onDropdownShow()\"\r\n    (gov-remove)=\"onDropdownClear()\"\r\n    (gov-change)=\"selectionChange($event)\"\r\n    (lazyLoadEvent)=\"onLazyLoad($any($event))\"\r\n  />\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control>\n  <gov-form-label \n    [slot]=\"label\"\n    [size]=\"size | govSize\"\n  >\n    {{ label }}\n  </gov-form-label>\n  <gov-form-multi-select\n    [size]=\"size | govSize\"\n    [formControl]=\"formControl\"\n    [required]=\"required\"\n    [invalid]=\"ngControl && ngControl.errors\"\n    [options]=\"options | govMultiselectOptions : optionLabel : optionValue\"\n    [placeholder]=\"placeholder ?? ''\"\n    (gov-focus)=\"onDropdownShow()\"\n    (gov-remove)=\"onDropdownClear()\"\n    (gov-change)=\"selectionChange($event)\"\n    (lazyLoadEvent)=\"onLazyLoad($any($event))\"\n  />\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -1148,7 +1148,7 @@ class TristatecheckboxComponent extends BaseFormInputComponent {
                 provide: TRISTATE_CHECKBOX_COMPONENT_TOKEN,
                 useExisting: TristatecheckboxComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mt-3\">\r\n    <gov-form-checkbox \r\n        [formControl]=\"formControl\"\r\n        [size]=\"size | govSize\"\r\n        [value]=\"value\"\r\n        [required]=\"required\"\r\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\r\n        [checked]=\"checked\"\r\n        [indeterminate]=\"isChecked === 0\"\r\n        [name]=\"name\"\r\n        [invalid]=\"ngControl?.errors\"\r\n        [noLabel]=\"noLabel\"\r\n        (gov-change)=\"toggleCheckbox()\"\r\n    > \r\n        <gov-form-label\r\n            [size]=\"size | govSize\"\r\n            slot=\"label\"\r\n        >\r\n            {{ label }}\r\n        </gov-form-label>\r\n    </gov-form-checkbox>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mt-3\">\n    <gov-form-checkbox \n        [formControl]=\"formControl\"\n        [size]=\"size | govSize\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\n        [checked]=\"checked\"\n        [indeterminate]=\"isChecked === 0\"\n        [name]=\"name\"\n        [invalid]=\"ngControl?.errors\"\n        [noLabel]=\"noLabel\"\n        (gov-change)=\"toggleCheckbox()\"\n    > \n        <gov-form-label\n            [size]=\"size | govSize\"\n            slot=\"label\"\n        >\n            {{ label }}\n        </gov-form-label>\n    </gov-form-checkbox>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TristatecheckboxComponent, decorators: [{
             type: Component,
@@ -1163,7 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: TRISTATE_CHECKBOX_COMPONENT_TOKEN,
                             useExisting: TristatecheckboxComponent,
                         },
-                    ], template: "<gov-form-control class=\"mt-3\">\r\n    <gov-form-checkbox \r\n        [formControl]=\"formControl\"\r\n        [size]=\"size | govSize\"\r\n        [value]=\"value\"\r\n        [required]=\"required\"\r\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\r\n        [checked]=\"checked\"\r\n        [indeterminate]=\"isChecked === 0\"\r\n        [name]=\"name\"\r\n        [invalid]=\"ngControl?.errors\"\r\n        [noLabel]=\"noLabel\"\r\n        (gov-change)=\"toggleCheckbox()\"\r\n    > \r\n        <gov-form-label\r\n            [size]=\"size | govSize\"\r\n            slot=\"label\"\r\n        >\r\n            {{ label }}\r\n        </gov-form-label>\r\n    </gov-form-checkbox>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control class=\"mt-3\">\n    <gov-form-checkbox \n        [formControl]=\"formControl\"\n        [size]=\"size | govSize\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [attr.disabled]=\"disabled ? 'true' : 'false'\"\n        [checked]=\"checked\"\n        [indeterminate]=\"isChecked === 0\"\n        [name]=\"name\"\n        [invalid]=\"ngControl?.errors\"\n        [noLabel]=\"noLabel\"\n        (gov-change)=\"toggleCheckbox()\"\n    > \n        <gov-form-label\n            [size]=\"size | govSize\"\n            slot=\"label\"\n        >\n            {{ label }}\n        </gov-form-label>\n    </gov-form-checkbox>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -1209,7 +1209,7 @@ class GenericFieldComponent extends BaseFormInputComponent {
                 provide: GENERIC_FIELD_COMPONENT_TOKEN,
                 useExisting: GenericFieldComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (!type || type === fieldTypes.text) {\r\n<v-textfield\r\n  [label]=\"label\"\r\n  [floatLabel]=\"floatLabel === true\"\r\n  [size]=\"size\"\r\n  [formControl]=\"formControl\"\r\n/>\r\n} @else if (type === fieldTypes.dropdown && !datasource) {\r\n<v-dropdown\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [options]=\"options\"\r\n  [optionLabel]=\"optionLabel\"\r\n  [optionValue]=\"optionValue ?? optionLabel\"\r\n  [loading]=\"loading\"\r\n  [forceMinWidth]=\"true\"\r\n  [formControl]=\"formControl\"\r\n  [showFilter]=\"showFilter ?? false\"\r\n  [localSearch]=\"localSearch ?? false\"\r\n  (changeEvent)=\"changed.emit($event)\"\r\n  (clearEvent)=\"cleared.emit($event)\"\r\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n  (showEvent)=\"showed.emit($event)\"\r\n/> \r\n} @else if (type === fieldTypes.dropdown && datasource) {\r\n  <v-dropdown\r\n    useDatasource\r\n    [forceMinWidth]=\"true\"\r\n    [datasource]=\"datasource\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue ?? optionLabel\"\r\n    [label]=\"!floatLabel ? label : ''\"\r\n    [floatLabel]=\"floatLabel ? label : ''\"\r\n    [testId]=\"testId\"\r\n    [loading]=\"loading\"\r\n    [formControl]=\"formControl\"\r\n    [showFilter]=\"showFilter ?? false\"\r\n    [filterField]=\"filterField ?? 'fulltext'\"\r\n    [localSearch]=\"localSearch ?? false\"\r\n    (changeEvent)=\"changed.emit($event)\"\r\n    (clearEvent)=\"cleared.emit($event)\"\r\n    (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n    (showEvent)=\"showed.emit($event)\"\r\n  />\r\n} @else if (type === fieldTypes.multiselect && !datasource) {\r\n<v-multiselect\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [options]=\"options\"\r\n  [optionLabel]=\"optionLabel\"\r\n  [optionValue]=\"optionValue ?? optionLabel\"\r\n  [loading]=\"loading\"\r\n  [formControl]=\"formControl\"\r\n  (changeEvent)=\"changed.emit($event)\"\r\n  (clearEvent)=\"cleared.emit($event)\"\r\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n  (showEvent)=\"showed.emit($event)\"\r\n/>\r\n} @else if (type === fieldTypes.multiselect && datasource) {\r\n<v-multiselect\r\n  useDatasource\r\n  [datasource]=\"datasource\"\r\n  [optionLabel]=\"optionLabel\"\r\n  [optionValue]=\"optionValue ?? optionLabel\"\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [loading]=\"loading\"\r\n  [formControl]=\"formControl\"\r\n  (changeEvent)=\"changed.emit($event)\"\r\n  (clearEvent)=\"cleared.emit($event)\"\r\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n  (showEvent)=\"showed.emit($event)\"\r\n/>\r\n} @else if (type === fieldTypes.checkbox) {\r\n<v-tristatecheckbox\r\n  [label]=\"label\"\r\n  [testId]=\"testId\"\r\n  [formControl]=\"formControl\"\r\n/>\r\n} @else if (type === fieldTypes.simplecheckbox) {\r\n<v-checkbox\r\n  [label]=\"label\"\r\n  [testId]=\"testId\"\r\n  [formControl]=\"formControl\"\r\n/>\r\n} @else if (type === fieldTypes.calendar) {\r\n<v-calendar\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [formControl]=\"formControl\"\r\n  [icon]=\"icons.calendar\"\r\n/>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropdownComponent, selector: "v-dropdown", inputs: ["options", "optionLabel", "optionValue", "dropdownIcon", "floatLabel", "lazy", "filter", "editable", "loading", "size", "showFilter", "localSearch", "forceMinWidth"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "component", type: CalendarComponent, selector: "v-calendar", inputs: ["icon", "floatLabel", "maxDate", "minDate", "header", "footer", "selectionMode", "size", "errorSlot", "labelSlot", "messageSlot", "message", "name"] }, { kind: "component", type: TristatecheckboxComponent, selector: "v-tristatecheckbox", inputs: ["size", "value", "name", "noLabel", "errorSlot", "checked"] }, { kind: "component", type: MultiselectComponent, selector: "v-multiselect", inputs: ["options", "optionLabel", "optionValue", "dropdownIcon", "floatLabel", "editable", "display", "errorSlot", "lazy", "filter", "loading", "size"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "v-checkbox", inputs: ["size", "value", "name", "indeterminate", "noLabel"] }, { kind: "directive", type: DatasourceDirective, selector: "v-dropdown[useDatasource], v-multiselect[useDatasource], v-generic-field[useDatasource]", inputs: ["datasource", "autoBind", "loadingText", "filterField", "transformFn", "extraFilter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "@if (!type || type === fieldTypes.text) {\n<v-textfield\n  [label]=\"label\"\n  [floatLabel]=\"floatLabel === true\"\n  [size]=\"size\"\n  [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.dropdown && !datasource) {\n<v-dropdown\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue ?? optionLabel\"\n  [loading]=\"loading\"\n  [forceMinWidth]=\"true\"\n  [formControl]=\"formControl\"\n  [showFilter]=\"showFilter ?? false\"\n  [localSearch]=\"localSearch ?? false\"\n  (changeEvent)=\"changed.emit($event)\"\n  (clearEvent)=\"cleared.emit($event)\"\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n  (showEvent)=\"showed.emit($event)\"\n/> \n} @else if (type === fieldTypes.dropdown && datasource) {\n  <v-dropdown\n    useDatasource\n    [forceMinWidth]=\"true\"\n    [datasource]=\"datasource\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue ?? optionLabel\"\n    [label]=\"!floatLabel ? label : ''\"\n    [floatLabel]=\"floatLabel ? label : ''\"\n    [testId]=\"testId\"\n    [loading]=\"loading\"\n    [formControl]=\"formControl\"\n    [showFilter]=\"showFilter ?? false\"\n    [filterField]=\"filterField ?? 'fulltext'\"\n    [localSearch]=\"localSearch ?? false\"\n    (changeEvent)=\"changed.emit($event)\"\n    (clearEvent)=\"cleared.emit($event)\"\n    (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n    (showEvent)=\"showed.emit($event)\"\n  />\n} @else if (type === fieldTypes.multiselect && !datasource) {\n<v-multiselect\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue ?? optionLabel\"\n  [loading]=\"loading\"\n  [formControl]=\"formControl\"\n  (changeEvent)=\"changed.emit($event)\"\n  (clearEvent)=\"cleared.emit($event)\"\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n  (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.multiselect && datasource) {\n<v-multiselect\n  useDatasource\n  [datasource]=\"datasource\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue ?? optionLabel\"\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [loading]=\"loading\"\n  [formControl]=\"formControl\"\n  (changeEvent)=\"changed.emit($event)\"\n  (clearEvent)=\"cleared.emit($event)\"\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n  (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.checkbox) {\n<v-tristatecheckbox\n  [label]=\"label\"\n  [testId]=\"testId\"\n  [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.simplecheckbox) {\n<v-checkbox\n  [label]=\"label\"\n  [testId]=\"testId\"\n  [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.calendar) {\n<v-calendar\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [formControl]=\"formControl\"\n  [icon]=\"icons.calendar\"\n/>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropdownComponent, selector: "v-dropdown", inputs: ["options", "optionLabel", "optionValue", "dropdownIcon", "floatLabel", "lazy", "filter", "editable", "loading", "size", "showFilter", "localSearch", "forceMinWidth"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "component", type: CalendarComponent, selector: "v-calendar", inputs: ["icon", "floatLabel", "maxDate", "minDate", "header", "footer", "selectionMode", "size", "errorSlot", "labelSlot", "messageSlot", "message", "name"] }, { kind: "component", type: TristatecheckboxComponent, selector: "v-tristatecheckbox", inputs: ["size", "value", "name", "noLabel", "errorSlot", "checked"] }, { kind: "component", type: MultiselectComponent, selector: "v-multiselect", inputs: ["options", "optionLabel", "optionValue", "dropdownIcon", "floatLabel", "editable", "display", "errorSlot", "lazy", "filter", "loading", "size"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "v-checkbox", inputs: ["size", "value", "name", "indeterminate", "noLabel"] }, { kind: "directive", type: DatasourceDirective, selector: "v-dropdown[useDatasource], v-multiselect[useDatasource], v-generic-field[useDatasource]", inputs: ["datasource", "autoBind", "loadingText", "filterField", "transformFn", "extraFilter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GenericFieldComponent, decorators: [{
             type: Component,
@@ -1228,7 +1228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: GENERIC_FIELD_COMPONENT_TOKEN,
                             useExisting: GenericFieldComponent,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!type || type === fieldTypes.text) {\r\n<v-textfield\r\n  [label]=\"label\"\r\n  [floatLabel]=\"floatLabel === true\"\r\n  [size]=\"size\"\r\n  [formControl]=\"formControl\"\r\n/>\r\n} @else if (type === fieldTypes.dropdown && !datasource) {\r\n<v-dropdown\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [options]=\"options\"\r\n  [optionLabel]=\"optionLabel\"\r\n  [optionValue]=\"optionValue ?? optionLabel\"\r\n  [loading]=\"loading\"\r\n  [forceMinWidth]=\"true\"\r\n  [formControl]=\"formControl\"\r\n  [showFilter]=\"showFilter ?? false\"\r\n  [localSearch]=\"localSearch ?? false\"\r\n  (changeEvent)=\"changed.emit($event)\"\r\n  (clearEvent)=\"cleared.emit($event)\"\r\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n  (showEvent)=\"showed.emit($event)\"\r\n/> \r\n} @else if (type === fieldTypes.dropdown && datasource) {\r\n  <v-dropdown\r\n    useDatasource\r\n    [forceMinWidth]=\"true\"\r\n    [datasource]=\"datasource\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue ?? optionLabel\"\r\n    [label]=\"!floatLabel ? label : ''\"\r\n    [floatLabel]=\"floatLabel ? label : ''\"\r\n    [testId]=\"testId\"\r\n    [loading]=\"loading\"\r\n    [formControl]=\"formControl\"\r\n    [showFilter]=\"showFilter ?? false\"\r\n    [filterField]=\"filterField ?? 'fulltext'\"\r\n    [localSearch]=\"localSearch ?? false\"\r\n    (changeEvent)=\"changed.emit($event)\"\r\n    (clearEvent)=\"cleared.emit($event)\"\r\n    (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n    (showEvent)=\"showed.emit($event)\"\r\n  />\r\n} @else if (type === fieldTypes.multiselect && !datasource) {\r\n<v-multiselect\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [options]=\"options\"\r\n  [optionLabel]=\"optionLabel\"\r\n  [optionValue]=\"optionValue ?? optionLabel\"\r\n  [loading]=\"loading\"\r\n  [formControl]=\"formControl\"\r\n  (changeEvent)=\"changed.emit($event)\"\r\n  (clearEvent)=\"cleared.emit($event)\"\r\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n  (showEvent)=\"showed.emit($event)\"\r\n/>\r\n} @else if (type === fieldTypes.multiselect && datasource) {\r\n<v-multiselect\r\n  useDatasource\r\n  [datasource]=\"datasource\"\r\n  [optionLabel]=\"optionLabel\"\r\n  [optionValue]=\"optionValue ?? optionLabel\"\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [loading]=\"loading\"\r\n  [formControl]=\"formControl\"\r\n  (changeEvent)=\"changed.emit($event)\"\r\n  (clearEvent)=\"cleared.emit($event)\"\r\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\r\n  (showEvent)=\"showed.emit($event)\"\r\n/>\r\n} @else if (type === fieldTypes.checkbox) {\r\n<v-tristatecheckbox\r\n  [label]=\"label\"\r\n  [testId]=\"testId\"\r\n  [formControl]=\"formControl\"\r\n/>\r\n} @else if (type === fieldTypes.simplecheckbox) {\r\n<v-checkbox\r\n  [label]=\"label\"\r\n  [testId]=\"testId\"\r\n  [formControl]=\"formControl\"\r\n/>\r\n} @else if (type === fieldTypes.calendar) {\r\n<v-calendar\r\n  [label]=\"!floatLabel ? label : ''\"\r\n  [floatLabel]=\"floatLabel ? label : ''\"\r\n  [testId]=\"testId\"\r\n  [formControl]=\"formControl\"\r\n  [icon]=\"icons.calendar\"\r\n/>\r\n}\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!type || type === fieldTypes.text) {\n<v-textfield\n  [label]=\"label\"\n  [floatLabel]=\"floatLabel === true\"\n  [size]=\"size\"\n  [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.dropdown && !datasource) {\n<v-dropdown\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue ?? optionLabel\"\n  [loading]=\"loading\"\n  [forceMinWidth]=\"true\"\n  [formControl]=\"formControl\"\n  [showFilter]=\"showFilter ?? false\"\n  [localSearch]=\"localSearch ?? false\"\n  (changeEvent)=\"changed.emit($event)\"\n  (clearEvent)=\"cleared.emit($event)\"\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n  (showEvent)=\"showed.emit($event)\"\n/> \n} @else if (type === fieldTypes.dropdown && datasource) {\n  <v-dropdown\n    useDatasource\n    [forceMinWidth]=\"true\"\n    [datasource]=\"datasource\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue ?? optionLabel\"\n    [label]=\"!floatLabel ? label : ''\"\n    [floatLabel]=\"floatLabel ? label : ''\"\n    [testId]=\"testId\"\n    [loading]=\"loading\"\n    [formControl]=\"formControl\"\n    [showFilter]=\"showFilter ?? false\"\n    [filterField]=\"filterField ?? 'fulltext'\"\n    [localSearch]=\"localSearch ?? false\"\n    (changeEvent)=\"changed.emit($event)\"\n    (clearEvent)=\"cleared.emit($event)\"\n    (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n    (showEvent)=\"showed.emit($event)\"\n  />\n} @else if (type === fieldTypes.multiselect && !datasource) {\n<v-multiselect\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue ?? optionLabel\"\n  [loading]=\"loading\"\n  [formControl]=\"formControl\"\n  (changeEvent)=\"changed.emit($event)\"\n  (clearEvent)=\"cleared.emit($event)\"\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n  (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.multiselect && datasource) {\n<v-multiselect\n  useDatasource\n  [datasource]=\"datasource\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue ?? optionLabel\"\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [loading]=\"loading\"\n  [formControl]=\"formControl\"\n  (changeEvent)=\"changed.emit($event)\"\n  (clearEvent)=\"cleared.emit($event)\"\n  (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n  (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.checkbox) {\n<v-tristatecheckbox\n  [label]=\"label\"\n  [testId]=\"testId\"\n  [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.simplecheckbox) {\n<v-checkbox\n  [label]=\"label\"\n  [testId]=\"testId\"\n  [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.calendar) {\n<v-calendar\n  [label]=\"!floatLabel ? label : ''\"\n  [floatLabel]=\"floatLabel ? label : ''\"\n  [testId]=\"testId\"\n  [formControl]=\"formControl\"\n  [icon]=\"icons.calendar\"\n/>\n}\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], floatLabel: [{
@@ -1555,7 +1555,7 @@ class FilterComponent extends UnsubscribeComponent {
                 provide: FILTER_COMPONENT_TOKEN,
                 useExisting: FilterComponent,
             },
-        ], queries: [{ propertyName: "fieldDeclarations", predicate: FilterFieldDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"v-filter w-100 p-3 bg-primary\">\r\n  @if (formGroup$ | async; as formGroup){\r\n  <form [formGroup]=\"formGroup\" class=\"d-flex align-items-center\">\r\n    @if (title) {\r\n    <div class=\"v-filter_title pe-4\">\r\n      <h2 class=\"text-white m-0\">{{ title }}</h2>\r\n    </div>\r\n    }\r\n    <div class=\"v-filter__fulltext flex-grow-1 pe-4\">\r\n      @if (showFulltext){\r\n      <v-textfield\r\n        class=\"d-none d-lg-block\"\r\n        placeholder=\"Search\"\r\n        size=\"large\"\r\n        formControlName=\"searchField\"\r\n        type=\"search\"\r\n        [clearable]=\"true\"\r\n      >\r\n      </v-textfield>\r\n      }\r\n    </div>\r\n    @if (simpleFormFieldDefinitions$ | async; as declaration){\r\n       @if (showFilters)\r\n    {\r\n    <div class=\"v-filter_filters d-none d-sm-block me-2\">\r\n      <v-generic-form\r\n        [fields]=\"declaration\"\r\n        [formGroup]=\"formGroup\"\r\n      ></v-generic-form>\r\n      <v-button label=\"X\" class=\"mt-3\" (click)=\"clear()\" />\r\n    </div>\r\n  }\r\n    <div class=\"v-filter_action-buttons d-flex\">\r\n      @if (declaration.length && !showFilters) {\r\n      <v-button \r\n        class=\"me-4\"\r\n        [icon]=\"icons.filter\"\r\n        [label]=\"$any(filledFiltersCount$ | async)\"\r\n        (click)=\"openFilter()\"\r\n      />\r\n      } @if (!autoBind) {\r\n      <v-button\r\n        useShortCut\r\n        [shortCutFn]=\"submitValue.bind(this)\"\r\n        shortCutKey=\"Enter\"\r\n        class=\"text-white mx-2\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        label=\"Apply\"\r\n        (click)=\"submitValue()\"\r\n      ></v-button>\r\n      <v-button\r\n        useShortCut\r\n        [shortCutFn]=\"clear.bind(this)\"\r\n        shortCutKey=\"Escape\"\r\n        class=\"text-white\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        label=\"Clear\"\r\n        (click)=\"clear()\"\r\n      ></v-button>\r\n      } \r\n    </div>\r\n    }\r\n    <ng-content select=\"v-action-button-group\"></ng-content>\r\n  </form>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "component", type: GenericFormComponent, selector: "v-generic-form", inputs: ["formGroup", "fields", "columns", "showAsRow"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "directive", type: ButtonShortCutDirective, selector: "v-button[useShortCut]", inputs: ["shortCutFn", "shortCutKey"], exportAs: ["useShortCut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "fieldDeclarations", predicate: FilterFieldDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"v-filter w-100 p-3 bg-primary\">\n  @if (formGroup$ | async; as formGroup){\n  <form [formGroup]=\"formGroup\" class=\"d-flex align-items-center\">\n    @if (title) {\n    <div class=\"v-filter_title pe-4\">\n      <h2 class=\"text-white m-0\">{{ title }}</h2>\n    </div>\n    }\n    <div class=\"v-filter__fulltext flex-grow-1 pe-4\">\n      @if (showFulltext){\n      <v-textfield\n        class=\"d-none d-lg-block\"\n        placeholder=\"Search\"\n        size=\"large\"\n        formControlName=\"searchField\"\n        type=\"search\"\n        [clearable]=\"true\"\n      >\n      </v-textfield>\n      }\n    </div>\n    @if (simpleFormFieldDefinitions$ | async; as declaration){\n       @if (showFilters)\n    {\n    <div class=\"v-filter_filters d-none d-sm-block me-2\">\n      <v-generic-form\n        [fields]=\"declaration\"\n        [formGroup]=\"formGroup\"\n      ></v-generic-form>\n      <v-button label=\"X\" class=\"mt-3\" (click)=\"clear()\" />\n    </div>\n  }\n    <div class=\"v-filter_action-buttons d-flex\">\n      @if (declaration.length && !showFilters) {\n      <v-button \n        class=\"me-4\"\n        [icon]=\"icons.filter\"\n        [label]=\"$any(filledFiltersCount$ | async)\"\n        (click)=\"openFilter()\"\n      />\n      } @if (!autoBind) {\n      <v-button\n        useShortCut\n        [shortCutFn]=\"submitValue.bind(this)\"\n        shortCutKey=\"Enter\"\n        class=\"text-white mx-2\"\n        [outlined]=\"true\"\n        size=\"small\"\n        label=\"Apply\"\n        (click)=\"submitValue()\"\n      ></v-button>\n      <v-button\n        useShortCut\n        [shortCutFn]=\"clear.bind(this)\"\n        shortCutKey=\"Escape\"\n        class=\"text-white\"\n        [outlined]=\"true\"\n        size=\"small\"\n        label=\"Clear\"\n        (click)=\"clear()\"\n      ></v-button>\n      } \n    </div>\n    }\n    <ng-content select=\"v-action-button-group\"></ng-content>\n  </form>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "component", type: GenericFormComponent, selector: "v-generic-form", inputs: ["formGroup", "fields", "columns", "showAsRow"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "directive", type: ButtonShortCutDirective, selector: "v-button[useShortCut]", inputs: ["shortCutFn", "shortCutKey"], exportAs: ["useShortCut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -1577,7 +1577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: FILTER_COMPONENT_TOKEN,
                             useExisting: FilterComponent,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"v-filter w-100 p-3 bg-primary\">\r\n  @if (formGroup$ | async; as formGroup){\r\n  <form [formGroup]=\"formGroup\" class=\"d-flex align-items-center\">\r\n    @if (title) {\r\n    <div class=\"v-filter_title pe-4\">\r\n      <h2 class=\"text-white m-0\">{{ title }}</h2>\r\n    </div>\r\n    }\r\n    <div class=\"v-filter__fulltext flex-grow-1 pe-4\">\r\n      @if (showFulltext){\r\n      <v-textfield\r\n        class=\"d-none d-lg-block\"\r\n        placeholder=\"Search\"\r\n        size=\"large\"\r\n        formControlName=\"searchField\"\r\n        type=\"search\"\r\n        [clearable]=\"true\"\r\n      >\r\n      </v-textfield>\r\n      }\r\n    </div>\r\n    @if (simpleFormFieldDefinitions$ | async; as declaration){\r\n       @if (showFilters)\r\n    {\r\n    <div class=\"v-filter_filters d-none d-sm-block me-2\">\r\n      <v-generic-form\r\n        [fields]=\"declaration\"\r\n        [formGroup]=\"formGroup\"\r\n      ></v-generic-form>\r\n      <v-button label=\"X\" class=\"mt-3\" (click)=\"clear()\" />\r\n    </div>\r\n  }\r\n    <div class=\"v-filter_action-buttons d-flex\">\r\n      @if (declaration.length && !showFilters) {\r\n      <v-button \r\n        class=\"me-4\"\r\n        [icon]=\"icons.filter\"\r\n        [label]=\"$any(filledFiltersCount$ | async)\"\r\n        (click)=\"openFilter()\"\r\n      />\r\n      } @if (!autoBind) {\r\n      <v-button\r\n        useShortCut\r\n        [shortCutFn]=\"submitValue.bind(this)\"\r\n        shortCutKey=\"Enter\"\r\n        class=\"text-white mx-2\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        label=\"Apply\"\r\n        (click)=\"submitValue()\"\r\n      ></v-button>\r\n      <v-button\r\n        useShortCut\r\n        [shortCutFn]=\"clear.bind(this)\"\r\n        shortCutKey=\"Escape\"\r\n        class=\"text-white\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        label=\"Clear\"\r\n        (click)=\"clear()\"\r\n      ></v-button>\r\n      } \r\n    </div>\r\n    }\r\n    <ng-content select=\"v-action-button-group\"></ng-content>\r\n  </form>\r\n  }\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"v-filter w-100 p-3 bg-primary\">\n  @if (formGroup$ | async; as formGroup){\n  <form [formGroup]=\"formGroup\" class=\"d-flex align-items-center\">\n    @if (title) {\n    <div class=\"v-filter_title pe-4\">\n      <h2 class=\"text-white m-0\">{{ title }}</h2>\n    </div>\n    }\n    <div class=\"v-filter__fulltext flex-grow-1 pe-4\">\n      @if (showFulltext){\n      <v-textfield\n        class=\"d-none d-lg-block\"\n        placeholder=\"Search\"\n        size=\"large\"\n        formControlName=\"searchField\"\n        type=\"search\"\n        [clearable]=\"true\"\n      >\n      </v-textfield>\n      }\n    </div>\n    @if (simpleFormFieldDefinitions$ | async; as declaration){\n       @if (showFilters)\n    {\n    <div class=\"v-filter_filters d-none d-sm-block me-2\">\n      <v-generic-form\n        [fields]=\"declaration\"\n        [formGroup]=\"formGroup\"\n      ></v-generic-form>\n      <v-button label=\"X\" class=\"mt-3\" (click)=\"clear()\" />\n    </div>\n  }\n    <div class=\"v-filter_action-buttons d-flex\">\n      @if (declaration.length && !showFilters) {\n      <v-button \n        class=\"me-4\"\n        [icon]=\"icons.filter\"\n        [label]=\"$any(filledFiltersCount$ | async)\"\n        (click)=\"openFilter()\"\n      />\n      } @if (!autoBind) {\n      <v-button\n        useShortCut\n        [shortCutFn]=\"submitValue.bind(this)\"\n        shortCutKey=\"Enter\"\n        class=\"text-white mx-2\"\n        [outlined]=\"true\"\n        size=\"small\"\n        label=\"Apply\"\n        (click)=\"submitValue()\"\n      ></v-button>\n      <v-button\n        useShortCut\n        [shortCutFn]=\"clear.bind(this)\"\n        shortCutKey=\"Escape\"\n        class=\"text-white\"\n        [outlined]=\"true\"\n        size=\"small\"\n        label=\"Clear\"\n        (click)=\"clear()\"\n      ></v-button>\n      } \n    </div>\n    }\n    <ng-content select=\"v-action-button-group\"></ng-content>\n  </form>\n  }\n</div>\n" }]
         }], propDecorators: { fieldDeclarations: [{
                 type: ContentChildren,
                 args: [FilterFieldDirective]
@@ -1608,7 +1608,7 @@ class LoaderComponent {
                 provide: LOADER_COMPONENT_TOKEN,
                 useExisting: LoaderComponent,
             }
-        ], ngImport: i0, template: "<div style=\"min-height: 300px;\">\r\n  <gov-loading\r\n    [size]=\"size | govSize\"\r\n  >\r\n    {{ message }}\r\n  </gov-loading>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovLoading, selector: "gov-loading", inputs: ["size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div style=\"min-height: 300px;\">\n  <gov-loading\n    [size]=\"size | govSize\"\n  >\n    {{ message }}\n  </gov-loading>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovLoading, selector: "gov-loading", inputs: ["size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
@@ -1619,7 +1619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: LOADER_COMPONENT_TOKEN,
                             useExisting: LoaderComponent,
                         }
-                    ], template: "<div style=\"min-height: 300px;\">\r\n  <gov-loading\r\n    [size]=\"size | govSize\"\r\n  >\r\n    {{ message }}\r\n  </gov-loading>\r\n</div>" }]
+                    ], template: "<div style=\"min-height: 300px;\">\n  <gov-loading\n    [size]=\"size | govSize\"\n  >\n    {{ message }}\n  </gov-loading>\n</div>" }]
         }], propDecorators: { size: [{
                 type: Input
             }], message: [{
@@ -1635,11 +1635,11 @@ class TablePaginationInfoComponent {
     pageSize = 0;
     total = 0;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TablePaginationInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TablePaginationInfoComponent, isStandalone: true, selector: "v-table-pagination-info", inputs: { showingText: "showingText", toText: "toText", ofText: "ofText", entriesText: "entriesText", currentPage: "currentPage", pageSize: "pageSize", total: "total" }, ngImport: i0, template: "<span>\r\n  {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}\r\n  {{\r\n    currentPage * pageSize < total\r\n      ? currentPage * pageSize\r\n      : total\r\n  }}\r\n  {{ ofText }} {{ total }} {{ entriesText }}\r\n</span>" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TablePaginationInfoComponent, isStandalone: true, selector: "v-table-pagination-info", inputs: { showingText: "showingText", toText: "toText", ofText: "ofText", entriesText: "entriesText", currentPage: "currentPage", pageSize: "pageSize", total: "total" }, ngImport: i0, template: "<span>\n  {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}\n  {{\n    currentPage * pageSize < total\n      ? currentPage * pageSize\n      : total\n  }}\n  {{ ofText }} {{ total }} {{ entriesText }}\n</span>" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TablePaginationInfoComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "v-table-pagination-info", template: "<span>\r\n  {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}\r\n  {{\r\n    currentPage * pageSize < total\r\n      ? currentPage * pageSize\r\n      : total\r\n  }}\r\n  {{ ofText }} {{ total }} {{ entriesText }}\r\n</span>" }]
+            args: [{ standalone: true, selector: "v-table-pagination-info", template: "<span>\n  {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}\n  {{\n    currentPage * pageSize < total\n      ? currentPage * pageSize\n      : total\n  }}\n  {{ ofText }} {{ total }} {{ entriesText }}\n</span>" }]
         }], propDecorators: { showingText: [{
                 type: Input
             }], toText: [{
@@ -1923,7 +1923,7 @@ class TableComponent {
                 provide: TABLE_COMPONENT_TOKEN,
                 useExisting: TableComponent,
             },
-        ], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: ["rowDetail"], descendants: true }, { propertyName: "rowDetailButtonTemplate", first: true, predicate: ["rowDetailButton"], descendants: true }, { propertyName: "viewColumns", predicate: TABLE_COLUMN_PROVIDER }], usesOnChanges: true, ngImport: i0, template: "@if (selectionMode === 'multiple' && showActionButtons) {\r\n<gov-flex\r\n  class=\"gov-table-complex__actions mt-2\"\r\n  justify-content=\"space-between\"\r\n  align-items=\"center\"\r\n>\r\n  <div class=\"gov-table-complex__records-selected\">\r\n    {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}\r\n  </div>\r\n  <div>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"delete.emit(selected)\">\r\n      {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}\r\n    </gov-button>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"save.emit(selected)\">\r\n      {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}\r\n    </gov-button>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"download.emit(selected)\">\r\n      {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}\r\n    </gov-button>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"deselectAll()\">\r\n      {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}\r\n    </gov-button>\r\n  </div>\r\n</gov-flex>\r\n}\r\n\r\n<div\r\n  class=\" v-table gov-table\"\r\n  [attr.size]=\"size | govSize\"\r\n>\r\n  <table class=\"v-table__table\">\r\n    <thead class=\"v-table__head\">\r\n      <tr class=\"v-table__header\">\r\n        @if (this.rowDetailTemplate) {\r\n          <th></th>\r\n        } @if (selectionMode === 'multiple') {\r\n        <th scope=\"col\">\r\n          <gov-form-checkbox\r\n            [checked]=\"allSelected\"\r\n            (gov-change)=\"toggleAll($event)\"\r\n          />\r\n        </th>\r\n        }\r\n        @for (column of tableColumns; track column; let index = $index) {\r\n        @if (column.visible && column.forceVisibility !== 'hidden') {\r\n        <th\r\n          scope=\"col\"\r\n          [style]=\"{'text-align': column.textAlign}\"\r\n        >\r\n          <span\r\n            class=\"gov-table--fit-width\"\r\n            [class.v-table__sortable]=\"column.sortable\"\r\n            [class.v-table__sortable--desc]=\"column.sortable && column.sortDirection === 'desc'\"\r\n            [class.v-table__sortable--asc]=\"column.sortable && column.sortDirection === 'asc'\"\r\n            (click)=\"sortColumn(column)\"\r\n          >\r\n            {{ column.headerGetter(column.id, index) | translate }}\r\n          </span>\r\n        </th>\r\n        } @if (this.rowDetailButtonTemplate) {\r\n        <th></th>\r\n        }}\r\n      </tr>\r\n    </thead>\r\n    @if (loading) {\r\n      <v-loader />\r\n    } @else {\r\n    <tbody class=\"v-table__body\">\r\n      @for (data of tableRowView; track data.id; let rowIndex = $index) {\r\n      <tr\r\n        class=\"v-table__row\"\r\n        [class.gov-table--highlight]=\"data.selected && selectionMode\"\r\n        (click)=\"selectRow(data, $event)\"\r\n        (dblclick)=\"navigate(data, $event)\"\r\n        (mousedown)=\"navigateNewWindow(data, $event)\"\r\n      >\r\n        @if (this.rowDetailTemplate) {\r\n        <td>\r\n          <gov-button\r\n            [size]=\"size | govSize\"\r\n            color=\"primary\"\r\n            type=\"solid\"\r\n            (gov-click)=\"toggleDetail(data)\"\r\n          >\r\n            <gov-icon\r\n              [name]=\"data.expanded ? 'chevron-up' : 'chevron-down'\"\r\n              [size]=\"size | govSize\"\r\n              slot=\"icon-start\"\r\n            ></gov-icon>\r\n          </gov-button>\r\n        </td>\r\n        } @if (selectionMode === 'multiple') {\r\n        <td class=\"gov-table--fit-content gov-table--border-right\">\r\n          <gov-form-checkbox\r\n            no-label\r\n            [checked]=\"data.selected\"\r\n            [size]=\"size | govSize\"\r\n            (gov-change)=\"selectRowCheckbox(data, $event)\"\r\n          ></gov-form-checkbox>\r\n        </td>\r\n        }\r\n        @for (column of tableColumns; track column; let columnIndex = $index) {\r\n        @if (column.visible && column.forceVisibility !== 'hidden') {\r\n        <td\r\n          [style]=\"{'text-align': column.textAlign}\"\r\n          [class]=\"column.columnClass!\"\r\n          [class.v-auto-cell]=\"column.template\"\r\n        >\r\n          @if (column.template) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              column.template;\r\n              context: { $implicit: data.row }\r\n            \"\r\n          ></ng-container>\r\n          } @else {\r\n          <span\r\n            [queryParams]=\"column.queryParams ? column.queryParams : undefined\"\r\n            [routerLink]=\"column.routerLink ? column.routerLink(data.row) : undefined\"\r\n            [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\r\n            [attr.title]=\"\r\n              column.valueGetter(data.row, rowIndex).length > maximumColumnLength\r\n                ? column.valueGetter(data.row, rowIndex)\r\n                : null\r\n            \"\r\n          ></span>\r\n          }\r\n        </td>\r\n        @if (this.rowDetailButtonTemplate) {\r\n        <td scope=\"\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              this.rowDetailButtonTemplate;\r\n              context: { $implicit: data.row }\r\n            \"\r\n          ></ng-container>\r\n        </td>\r\n        }}}\r\n      </tr>\r\n      @if (this.rowDetailTemplate && data.expanded) {\r\n      <tr>\r\n        <td [attr.colspan]=\"tableColumns.length + 1\">\r\n          <ng-container\r\n            class=\"w-100\"\r\n            *ngTemplateOutlet=\"\r\n              this.rowDetailTemplate;\r\n              context: { $implicit: data.row }\r\n            \"\r\n          ></ng-container>\r\n        </td>\r\n      </tr>\r\n      } } @if (!tableRows.length && !loading){\r\n      <td [attr.colspan]=\"tableColumns.length\">\r\n        <gov-empty align=\"center\" [size]=\"size | govSize\">\r\n          <gov-icon slot=\"icon\" name=\"empty-file\" type=\"colored\"/>\r\n          <p slot=\"headline\">\r\n            {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}\r\n          </p>\r\n        </gov-empty>\r\n      </td>\r\n      }\r\n    </tbody>\r\n  }\r\n  </table>\r\n  @if(showPaginator) {\r\n  <div class=\"v-table__paginator d-flex pt-3 pb-3\">\r\n    @if (tableRows.length) {\r\n    <div class=\"mt-2\">\r\n      <v-table-pagination-info\r\n        [showingText]=\"'TABLES.PAGINATION.SHOWING' | translate\"\r\n        [toText]=\"'TABLES.PAGINATION.TO' | translate\"\r\n        [ofText]=\"'TABLES.PAGINATION.OF' | translate\"\r\n        [entriesText]=\"'TABLES.PAGINATION.ENTRIES' | translate\"\r\n        [currentPage]=\"currentPage\"\r\n        [pageSize]=\"pageSize\"\r\n        [total]=\"total\"\r\n      />\r\n    </div>\r\n    <div class=\"ms-4\">\r\n      <gov-form-select\r\n        [options]=\"pageSizeOptions\"\r\n        [value]=\"govPageSize\"\r\n        (gov-change)=\"changePageSize($event)\"\r\n      ></gov-form-select>\r\n    </div>\r\n    }\r\n    <div class=\"ms-4\">\r\n      <gov-pagination\r\n        [current]=\"currentPage\"\r\n        [pageSize]=\"pageSize\"\r\n        [total]=\"total\"\r\n        [type]=\"'button'\"\r\n        (gov-page)=\"changePage($event)\"\r\n      ></gov-pagination>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.v-table{position:relative;height:100%;display:flex;flex-direction:column}.v-table__sortable{color:var(--text-primary-color);text-decoration:underline;transition:color .15s ease-in-out;cursor:pointer}.v-table__sortable:after{content:\"\\2191\\2193\";margin-left:.5rem;text-decoration:none;display:inline-block}.v-table__sortable--asc:after{content:\"\\2191\"}.v-table__sortable--desc:after{content:\"\\2193\"}.v-table__header{background-color:var(--background-block-primary);position:sticky;top:0;z-index:2}.v-table__table{width:100%}.v-table__paginator{background-color:var(--background-neutral-white);justify-content:end;position:sticky;bottom:0;z-index:3}.gov-table{width:100%;overflow-x:auto}.gov-table table{table-layout:auto;min-width:100%;border-collapse:collapse}.gov-table table tr.gov-table--highlight td{background-color:var(--background-primary-subtle)}.gov-table table th,.gov-table table td{border-bottom:1px solid var(--border-subtlest);text-align:left}.gov-table table th.gov-table--align-right,.gov-table table td.gov-table--align-right{text-align:right}.gov-table table th.gov-table--vertical-align-top,.gov-table table td.gov-table--vertical-align-top{vertical-align:top}.gov-table table th.gov-table--border-right,.gov-table table td.gov-table--border-right{border-right:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-left,.gov-table table td.gov-table--border-left{border-left:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-bottom-none,.gov-table table td.gov-table--border-bottom-none{border-bottom:none}.gov-table table th.gov-table--nowrap,.gov-table table td.gov-table--nowrap{white-space:nowrap}.gov-table table th.gov-table--fit-width,.gov-table table td.gov-table--fit-width{width:1px}.gov-table table th{color:var(--text-primary);background-color:var(--background-neutral-subtlest)}.gov-table table td{background-color:var(--background-neutral-white)}.gov-table table tr.open td{padding:var(--spacing-s) var(--spacing-m)}.gov-table summary::-webkit-details-marker{display:none}.gov-table[size=s] table{border-bottom-left-radius:var(--corner-radius-s);border-bottom-right-radius:var(--corner-radius-s)}.gov-table[size=s] table th,.gov-table[size=s] table td{height:var(--height-2xl);padding:0 var(--spacing-s);font-size:var(--font-size-body-s);line-height:150%;font-weight:400}.gov-table[size=s] table th{font-weight:700}.gov-table[size=m] table{border-bottom-left-radius:var(--corner-radius-m);border-bottom-right-radius:var(--corner-radius-m)}.gov-table[size=m] table th,.gov-table[size=m] table td{height:var(--height-3xl);padding:0 var(--spacing-m);font-size:var(--font-size-body-m);line-height:150%;font-weight:400}.gov-table[size=m] table th{font-weight:700}.gov-table[size=l] table{border-bottom-left-radius:var(--corner-radius-l);border-bottom-right-radius:var(--corner-radius-l)}.gov-table[size=l] table th,.gov-table[size=l] table td{height:var(--height-4xl);padding:0 var(--spacing-l);font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-table[size=l] table th{font-weight:700}.gov-table-complex__name,.gov-table-complex__description{margin:0;color:var(--text-primary)}.gov-table-complex__actions{color:var(--text-white-fixed);background-color:var(--background-primary);padding:var(--spacing-xs) var(--spacing-s)}.gov-table-complex__per-page{width:185px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovEmpty, selector: "gov-empty", inputs: ["size"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "justifyContent", "wrap"] }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormSelect, selector: "gov-form-select", inputs: ["disabled", "identifier", "invalid", "name", "options", "required", "size", "success", "value"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: i2.GovPagination, selector: "gov-pagination", inputs: ["accessiblePageLabel", "accessibleSelectLabel", "color", "current", "labelEnd", "labelNext", "labelPrev", "labelStart", "link", "maxPages", "pageSize", "selectIdentifier", "size", "total", "type"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "directive", type: i2.SelectValueAccessor, selector: "gov-form-select, gov-form-multi-select" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: LoaderComponent, selector: "v-loader", inputs: ["size", "message"] }, { kind: "component", type: TablePaginationInfoComponent, selector: "v-table-pagination-info", inputs: ["showingText", "toText", "ofText", "entriesText", "currentPage", "pageSize", "total"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: ["rowDetail"], descendants: true }, { propertyName: "rowDetailButtonTemplate", first: true, predicate: ["rowDetailButton"], descendants: true }, { propertyName: "viewColumns", predicate: TABLE_COLUMN_PROVIDER }], usesOnChanges: true, ngImport: i0, template: "@if (selectionMode === 'multiple' && showActionButtons) {\n<gov-flex\n  class=\"gov-table-complex__actions mt-2\"\n  justify-content=\"space-between\"\n  align-items=\"center\"\n>\n  <div class=\"gov-table-complex__records-selected\">\n    {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}\n  </div>\n  <div>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"delete.emit(selected)\">\n      {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}\n    </gov-button>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"save.emit(selected)\">\n      {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}\n    </gov-button>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"download.emit(selected)\">\n      {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}\n    </gov-button>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"deselectAll()\">\n      {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}\n    </gov-button>\n  </div>\n</gov-flex>\n}\n\n<div\n  class=\" v-table gov-table\"\n  [attr.size]=\"size | govSize\"\n>\n  <table class=\"v-table__table\">\n    <thead class=\"v-table__head\">\n      <tr class=\"v-table__header\">\n        @if (this.rowDetailTemplate) {\n          <th></th>\n        } @if (selectionMode === 'multiple') {\n        <th scope=\"col\">\n          <gov-form-checkbox\n            [checked]=\"allSelected\"\n            (gov-change)=\"toggleAll($event)\"\n          />\n        </th>\n        }\n        @for (column of tableColumns; track column; let index = $index) {\n        @if (column.visible && column.forceVisibility !== 'hidden') {\n        <th\n          scope=\"col\"\n          [style]=\"{'text-align': column.textAlign}\"\n        >\n          <span\n            class=\"gov-table--fit-width\"\n            [class.v-table__sortable]=\"column.sortable\"\n            [class.v-table__sortable--desc]=\"column.sortable && column.sortDirection === 'desc'\"\n            [class.v-table__sortable--asc]=\"column.sortable && column.sortDirection === 'asc'\"\n            (click)=\"sortColumn(column)\"\n          >\n            {{ column.headerGetter(column.id, index) | translate }}\n          </span>\n        </th>\n        } @if (this.rowDetailButtonTemplate) {\n        <th></th>\n        }}\n      </tr>\n    </thead>\n    @if (loading) {\n      <v-loader />\n    } @else {\n    <tbody class=\"v-table__body\">\n      @for (data of tableRowView; track data.id; let rowIndex = $index) {\n      <tr\n        class=\"v-table__row\"\n        [class.gov-table--highlight]=\"data.selected && selectionMode\"\n        (click)=\"selectRow(data, $event)\"\n        (dblclick)=\"navigate(data, $event)\"\n        (mousedown)=\"navigateNewWindow(data, $event)\"\n      >\n        @if (this.rowDetailTemplate) {\n        <td>\n          <gov-button\n            [size]=\"size | govSize\"\n            color=\"primary\"\n            type=\"solid\"\n            (gov-click)=\"toggleDetail(data)\"\n          >\n            <gov-icon\n              [name]=\"data.expanded ? 'chevron-up' : 'chevron-down'\"\n              [size]=\"size | govSize\"\n              slot=\"icon-start\"\n            ></gov-icon>\n          </gov-button>\n        </td>\n        } @if (selectionMode === 'multiple') {\n        <td class=\"gov-table--fit-content gov-table--border-right\">\n          <gov-form-checkbox\n            no-label\n            [checked]=\"data.selected\"\n            [size]=\"size | govSize\"\n            (gov-change)=\"selectRowCheckbox(data, $event)\"\n          ></gov-form-checkbox>\n        </td>\n        }\n        @for (column of tableColumns; track column; let columnIndex = $index) {\n        @if (column.visible && column.forceVisibility !== 'hidden') {\n        <td\n          [style]=\"{'text-align': column.textAlign}\"\n          [class]=\"column.columnClass!\"\n          [class.v-auto-cell]=\"column.template\"\n        >\n          @if (column.template) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              column.template;\n              context: { $implicit: data.row }\n            \"\n          ></ng-container>\n          } @else {\n          <span\n            [queryParams]=\"column.queryParams ? column.queryParams : undefined\"\n            [routerLink]=\"column.routerLink ? column.routerLink(data.row) : undefined\"\n            [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\n            [attr.title]=\"\n              column.valueGetter(data.row, rowIndex).length > maximumColumnLength\n                ? column.valueGetter(data.row, rowIndex)\n                : null\n            \"\n          ></span>\n          }\n        </td>\n        @if (this.rowDetailButtonTemplate) {\n        <td scope=\"\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              this.rowDetailButtonTemplate;\n              context: { $implicit: data.row }\n            \"\n          ></ng-container>\n        </td>\n        }}}\n      </tr>\n      @if (this.rowDetailTemplate && data.expanded) {\n      <tr>\n        <td [attr.colspan]=\"tableColumns.length + 1\">\n          <ng-container\n            class=\"w-100\"\n            *ngTemplateOutlet=\"\n              this.rowDetailTemplate;\n              context: { $implicit: data.row }\n            \"\n          ></ng-container>\n        </td>\n      </tr>\n      } } @if (!tableRows.length && !loading){\n      <td [attr.colspan]=\"tableColumns.length\">\n        <gov-empty align=\"center\" [size]=\"size | govSize\">\n          <gov-icon slot=\"icon\" name=\"empty-file\" type=\"colored\"/>\n          <p slot=\"headline\">\n            {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}\n          </p>\n        </gov-empty>\n      </td>\n      }\n    </tbody>\n  }\n  </table>\n  @if(showPaginator) {\n  <div class=\"v-table__paginator d-flex pt-3 pb-3\">\n    @if (tableRows.length) {\n    <div class=\"mt-2\">\n      <v-table-pagination-info\n        [showingText]=\"'TABLES.PAGINATION.SHOWING' | translate\"\n        [toText]=\"'TABLES.PAGINATION.TO' | translate\"\n        [ofText]=\"'TABLES.PAGINATION.OF' | translate\"\n        [entriesText]=\"'TABLES.PAGINATION.ENTRIES' | translate\"\n        [currentPage]=\"currentPage\"\n        [pageSize]=\"pageSize\"\n        [total]=\"total\"\n      />\n    </div>\n    <div class=\"ms-4\">\n      <gov-form-select\n        [options]=\"pageSizeOptions\"\n        [value]=\"govPageSize\"\n        (gov-change)=\"changePageSize($event)\"\n      ></gov-form-select>\n    </div>\n    }\n    <div class=\"ms-4\">\n      <gov-pagination\n        [current]=\"currentPage\"\n        [pageSize]=\"pageSize\"\n        [total]=\"total\"\n        [type]=\"'button'\"\n        (gov-page)=\"changePage($event)\"\n      ></gov-pagination>\n    </div>\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.v-table{position:relative;height:100%;display:flex;flex-direction:column}.v-table__sortable{color:var(--text-primary-color);text-decoration:underline;transition:color .15s ease-in-out;cursor:pointer}.v-table__sortable:after{content:\"\\2191\\2193\";margin-left:.5rem;text-decoration:none;display:inline-block}.v-table__sortable--asc:after{content:\"\\2191\"}.v-table__sortable--desc:after{content:\"\\2193\"}.v-table__header{background-color:var(--background-block-primary);position:sticky;top:0;z-index:2}.v-table__table{width:100%}.v-table__paginator{background-color:var(--background-neutral-white);justify-content:end;position:sticky;bottom:0;z-index:3}.gov-table{width:100%;overflow-x:auto}.gov-table table{table-layout:auto;min-width:100%;border-collapse:collapse}.gov-table table tr.gov-table--highlight td{background-color:var(--background-primary-subtle)}.gov-table table th,.gov-table table td{border-bottom:1px solid var(--border-subtlest);text-align:left}.gov-table table th.gov-table--align-right,.gov-table table td.gov-table--align-right{text-align:right}.gov-table table th.gov-table--vertical-align-top,.gov-table table td.gov-table--vertical-align-top{vertical-align:top}.gov-table table th.gov-table--border-right,.gov-table table td.gov-table--border-right{border-right:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-left,.gov-table table td.gov-table--border-left{border-left:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-bottom-none,.gov-table table td.gov-table--border-bottom-none{border-bottom:none}.gov-table table th.gov-table--nowrap,.gov-table table td.gov-table--nowrap{white-space:nowrap}.gov-table table th.gov-table--fit-width,.gov-table table td.gov-table--fit-width{width:1px}.gov-table table th{color:var(--text-primary);background-color:var(--background-neutral-subtlest)}.gov-table table td{background-color:var(--background-neutral-white)}.gov-table table tr.open td{padding:var(--spacing-s) var(--spacing-m)}.gov-table summary::-webkit-details-marker{display:none}.gov-table[size=s] table{border-bottom-left-radius:var(--corner-radius-s);border-bottom-right-radius:var(--corner-radius-s)}.gov-table[size=s] table th,.gov-table[size=s] table td{height:var(--height-2xl);padding:0 var(--spacing-s);font-size:var(--font-size-body-s);line-height:150%;font-weight:400}.gov-table[size=s] table th{font-weight:700}.gov-table[size=m] table{border-bottom-left-radius:var(--corner-radius-m);border-bottom-right-radius:var(--corner-radius-m)}.gov-table[size=m] table th,.gov-table[size=m] table td{height:var(--height-3xl);padding:0 var(--spacing-m);font-size:var(--font-size-body-m);line-height:150%;font-weight:400}.gov-table[size=m] table th{font-weight:700}.gov-table[size=l] table{border-bottom-left-radius:var(--corner-radius-l);border-bottom-right-radius:var(--corner-radius-l)}.gov-table[size=l] table th,.gov-table[size=l] table td{height:var(--height-4xl);padding:0 var(--spacing-l);font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-table[size=l] table th{font-weight:700}.gov-table-complex__name,.gov-table-complex__description{margin:0;color:var(--text-primary)}.gov-table-complex__actions{color:var(--text-white-fixed);background-color:var(--background-primary);padding:var(--spacing-xs) var(--spacing-s)}.gov-table-complex__per-page{width:185px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovEmpty, selector: "gov-empty", inputs: ["size"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "justifyContent", "wrap"] }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormSelect, selector: "gov-form-select", inputs: ["disabled", "identifier", "invalid", "name", "options", "required", "size", "success", "value"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: i2.GovPagination, selector: "gov-pagination", inputs: ["accessiblePageLabel", "accessibleSelectLabel", "color", "current", "labelEnd", "labelNext", "labelPrev", "labelStart", "link", "maxPages", "pageSize", "selectIdentifier", "size", "total", "type"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "directive", type: i2.SelectValueAccessor, selector: "gov-form-select, gov-form-multi-select" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: LoaderComponent, selector: "v-loader", inputs: ["size", "message"] }, { kind: "component", type: TablePaginationInfoComponent, selector: "v-table-pagination-info", inputs: ["showingText", "toText", "ofText", "entriesText", "currentPage", "pageSize", "total"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1941,7 +1941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: TABLE_COMPONENT_TOKEN,
                             useExisting: TableComponent,
                         },
-                    ], template: "@if (selectionMode === 'multiple' && showActionButtons) {\r\n<gov-flex\r\n  class=\"gov-table-complex__actions mt-2\"\r\n  justify-content=\"space-between\"\r\n  align-items=\"center\"\r\n>\r\n  <div class=\"gov-table-complex__records-selected\">\r\n    {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}\r\n  </div>\r\n  <div>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"delete.emit(selected)\">\r\n      {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}\r\n    </gov-button>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"save.emit(selected)\">\r\n      {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}\r\n    </gov-button>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"download.emit(selected)\">\r\n      {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}\r\n    </gov-button>\r\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"deselectAll()\">\r\n      {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}\r\n    </gov-button>\r\n  </div>\r\n</gov-flex>\r\n}\r\n\r\n<div\r\n  class=\" v-table gov-table\"\r\n  [attr.size]=\"size | govSize\"\r\n>\r\n  <table class=\"v-table__table\">\r\n    <thead class=\"v-table__head\">\r\n      <tr class=\"v-table__header\">\r\n        @if (this.rowDetailTemplate) {\r\n          <th></th>\r\n        } @if (selectionMode === 'multiple') {\r\n        <th scope=\"col\">\r\n          <gov-form-checkbox\r\n            [checked]=\"allSelected\"\r\n            (gov-change)=\"toggleAll($event)\"\r\n          />\r\n        </th>\r\n        }\r\n        @for (column of tableColumns; track column; let index = $index) {\r\n        @if (column.visible && column.forceVisibility !== 'hidden') {\r\n        <th\r\n          scope=\"col\"\r\n          [style]=\"{'text-align': column.textAlign}\"\r\n        >\r\n          <span\r\n            class=\"gov-table--fit-width\"\r\n            [class.v-table__sortable]=\"column.sortable\"\r\n            [class.v-table__sortable--desc]=\"column.sortable && column.sortDirection === 'desc'\"\r\n            [class.v-table__sortable--asc]=\"column.sortable && column.sortDirection === 'asc'\"\r\n            (click)=\"sortColumn(column)\"\r\n          >\r\n            {{ column.headerGetter(column.id, index) | translate }}\r\n          </span>\r\n        </th>\r\n        } @if (this.rowDetailButtonTemplate) {\r\n        <th></th>\r\n        }}\r\n      </tr>\r\n    </thead>\r\n    @if (loading) {\r\n      <v-loader />\r\n    } @else {\r\n    <tbody class=\"v-table__body\">\r\n      @for (data of tableRowView; track data.id; let rowIndex = $index) {\r\n      <tr\r\n        class=\"v-table__row\"\r\n        [class.gov-table--highlight]=\"data.selected && selectionMode\"\r\n        (click)=\"selectRow(data, $event)\"\r\n        (dblclick)=\"navigate(data, $event)\"\r\n        (mousedown)=\"navigateNewWindow(data, $event)\"\r\n      >\r\n        @if (this.rowDetailTemplate) {\r\n        <td>\r\n          <gov-button\r\n            [size]=\"size | govSize\"\r\n            color=\"primary\"\r\n            type=\"solid\"\r\n            (gov-click)=\"toggleDetail(data)\"\r\n          >\r\n            <gov-icon\r\n              [name]=\"data.expanded ? 'chevron-up' : 'chevron-down'\"\r\n              [size]=\"size | govSize\"\r\n              slot=\"icon-start\"\r\n            ></gov-icon>\r\n          </gov-button>\r\n        </td>\r\n        } @if (selectionMode === 'multiple') {\r\n        <td class=\"gov-table--fit-content gov-table--border-right\">\r\n          <gov-form-checkbox\r\n            no-label\r\n            [checked]=\"data.selected\"\r\n            [size]=\"size | govSize\"\r\n            (gov-change)=\"selectRowCheckbox(data, $event)\"\r\n          ></gov-form-checkbox>\r\n        </td>\r\n        }\r\n        @for (column of tableColumns; track column; let columnIndex = $index) {\r\n        @if (column.visible && column.forceVisibility !== 'hidden') {\r\n        <td\r\n          [style]=\"{'text-align': column.textAlign}\"\r\n          [class]=\"column.columnClass!\"\r\n          [class.v-auto-cell]=\"column.template\"\r\n        >\r\n          @if (column.template) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              column.template;\r\n              context: { $implicit: data.row }\r\n            \"\r\n          ></ng-container>\r\n          } @else {\r\n          <span\r\n            [queryParams]=\"column.queryParams ? column.queryParams : undefined\"\r\n            [routerLink]=\"column.routerLink ? column.routerLink(data.row) : undefined\"\r\n            [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\r\n            [attr.title]=\"\r\n              column.valueGetter(data.row, rowIndex).length > maximumColumnLength\r\n                ? column.valueGetter(data.row, rowIndex)\r\n                : null\r\n            \"\r\n          ></span>\r\n          }\r\n        </td>\r\n        @if (this.rowDetailButtonTemplate) {\r\n        <td scope=\"\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              this.rowDetailButtonTemplate;\r\n              context: { $implicit: data.row }\r\n            \"\r\n          ></ng-container>\r\n        </td>\r\n        }}}\r\n      </tr>\r\n      @if (this.rowDetailTemplate && data.expanded) {\r\n      <tr>\r\n        <td [attr.colspan]=\"tableColumns.length + 1\">\r\n          <ng-container\r\n            class=\"w-100\"\r\n            *ngTemplateOutlet=\"\r\n              this.rowDetailTemplate;\r\n              context: { $implicit: data.row }\r\n            \"\r\n          ></ng-container>\r\n        </td>\r\n      </tr>\r\n      } } @if (!tableRows.length && !loading){\r\n      <td [attr.colspan]=\"tableColumns.length\">\r\n        <gov-empty align=\"center\" [size]=\"size | govSize\">\r\n          <gov-icon slot=\"icon\" name=\"empty-file\" type=\"colored\"/>\r\n          <p slot=\"headline\">\r\n            {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}\r\n          </p>\r\n        </gov-empty>\r\n      </td>\r\n      }\r\n    </tbody>\r\n  }\r\n  </table>\r\n  @if(showPaginator) {\r\n  <div class=\"v-table__paginator d-flex pt-3 pb-3\">\r\n    @if (tableRows.length) {\r\n    <div class=\"mt-2\">\r\n      <v-table-pagination-info\r\n        [showingText]=\"'TABLES.PAGINATION.SHOWING' | translate\"\r\n        [toText]=\"'TABLES.PAGINATION.TO' | translate\"\r\n        [ofText]=\"'TABLES.PAGINATION.OF' | translate\"\r\n        [entriesText]=\"'TABLES.PAGINATION.ENTRIES' | translate\"\r\n        [currentPage]=\"currentPage\"\r\n        [pageSize]=\"pageSize\"\r\n        [total]=\"total\"\r\n      />\r\n    </div>\r\n    <div class=\"ms-4\">\r\n      <gov-form-select\r\n        [options]=\"pageSizeOptions\"\r\n        [value]=\"govPageSize\"\r\n        (gov-change)=\"changePageSize($event)\"\r\n      ></gov-form-select>\r\n    </div>\r\n    }\r\n    <div class=\"ms-4\">\r\n      <gov-pagination\r\n        [current]=\"currentPage\"\r\n        [pageSize]=\"pageSize\"\r\n        [total]=\"total\"\r\n        [type]=\"'button'\"\r\n        (gov-page)=\"changePage($event)\"\r\n      ></gov-pagination>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.v-table{position:relative;height:100%;display:flex;flex-direction:column}.v-table__sortable{color:var(--text-primary-color);text-decoration:underline;transition:color .15s ease-in-out;cursor:pointer}.v-table__sortable:after{content:\"\\2191\\2193\";margin-left:.5rem;text-decoration:none;display:inline-block}.v-table__sortable--asc:after{content:\"\\2191\"}.v-table__sortable--desc:after{content:\"\\2193\"}.v-table__header{background-color:var(--background-block-primary);position:sticky;top:0;z-index:2}.v-table__table{width:100%}.v-table__paginator{background-color:var(--background-neutral-white);justify-content:end;position:sticky;bottom:0;z-index:3}.gov-table{width:100%;overflow-x:auto}.gov-table table{table-layout:auto;min-width:100%;border-collapse:collapse}.gov-table table tr.gov-table--highlight td{background-color:var(--background-primary-subtle)}.gov-table table th,.gov-table table td{border-bottom:1px solid var(--border-subtlest);text-align:left}.gov-table table th.gov-table--align-right,.gov-table table td.gov-table--align-right{text-align:right}.gov-table table th.gov-table--vertical-align-top,.gov-table table td.gov-table--vertical-align-top{vertical-align:top}.gov-table table th.gov-table--border-right,.gov-table table td.gov-table--border-right{border-right:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-left,.gov-table table td.gov-table--border-left{border-left:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-bottom-none,.gov-table table td.gov-table--border-bottom-none{border-bottom:none}.gov-table table th.gov-table--nowrap,.gov-table table td.gov-table--nowrap{white-space:nowrap}.gov-table table th.gov-table--fit-width,.gov-table table td.gov-table--fit-width{width:1px}.gov-table table th{color:var(--text-primary);background-color:var(--background-neutral-subtlest)}.gov-table table td{background-color:var(--background-neutral-white)}.gov-table table tr.open td{padding:var(--spacing-s) var(--spacing-m)}.gov-table summary::-webkit-details-marker{display:none}.gov-table[size=s] table{border-bottom-left-radius:var(--corner-radius-s);border-bottom-right-radius:var(--corner-radius-s)}.gov-table[size=s] table th,.gov-table[size=s] table td{height:var(--height-2xl);padding:0 var(--spacing-s);font-size:var(--font-size-body-s);line-height:150%;font-weight:400}.gov-table[size=s] table th{font-weight:700}.gov-table[size=m] table{border-bottom-left-radius:var(--corner-radius-m);border-bottom-right-radius:var(--corner-radius-m)}.gov-table[size=m] table th,.gov-table[size=m] table td{height:var(--height-3xl);padding:0 var(--spacing-m);font-size:var(--font-size-body-m);line-height:150%;font-weight:400}.gov-table[size=m] table th{font-weight:700}.gov-table[size=l] table{border-bottom-left-radius:var(--corner-radius-l);border-bottom-right-radius:var(--corner-radius-l)}.gov-table[size=l] table th,.gov-table[size=l] table td{height:var(--height-4xl);padding:0 var(--spacing-l);font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-table[size=l] table th{font-weight:700}.gov-table-complex__name,.gov-table-complex__description{margin:0;color:var(--text-primary)}.gov-table-complex__actions{color:var(--text-white-fixed);background-color:var(--background-primary);padding:var(--spacing-xs) var(--spacing-s)}.gov-table-complex__per-page{width:185px;white-space:nowrap}\n"] }]
+                    ], template: "@if (selectionMode === 'multiple' && showActionButtons) {\n<gov-flex\n  class=\"gov-table-complex__actions mt-2\"\n  justify-content=\"space-between\"\n  align-items=\"center\"\n>\n  <div class=\"gov-table-complex__records-selected\">\n    {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}\n  </div>\n  <div>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"delete.emit(selected)\">\n      {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}\n    </gov-button>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"save.emit(selected)\">\n      {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}\n    </gov-button>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"download.emit(selected)\">\n      {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}\n    </gov-button>\n    <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"deselectAll()\">\n      {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}\n    </gov-button>\n  </div>\n</gov-flex>\n}\n\n<div\n  class=\" v-table gov-table\"\n  [attr.size]=\"size | govSize\"\n>\n  <table class=\"v-table__table\">\n    <thead class=\"v-table__head\">\n      <tr class=\"v-table__header\">\n        @if (this.rowDetailTemplate) {\n          <th></th>\n        } @if (selectionMode === 'multiple') {\n        <th scope=\"col\">\n          <gov-form-checkbox\n            [checked]=\"allSelected\"\n            (gov-change)=\"toggleAll($event)\"\n          />\n        </th>\n        }\n        @for (column of tableColumns; track column; let index = $index) {\n        @if (column.visible && column.forceVisibility !== 'hidden') {\n        <th\n          scope=\"col\"\n          [style]=\"{'text-align': column.textAlign}\"\n        >\n          <span\n            class=\"gov-table--fit-width\"\n            [class.v-table__sortable]=\"column.sortable\"\n            [class.v-table__sortable--desc]=\"column.sortable && column.sortDirection === 'desc'\"\n            [class.v-table__sortable--asc]=\"column.sortable && column.sortDirection === 'asc'\"\n            (click)=\"sortColumn(column)\"\n          >\n            {{ column.headerGetter(column.id, index) | translate }}\n          </span>\n        </th>\n        } @if (this.rowDetailButtonTemplate) {\n        <th></th>\n        }}\n      </tr>\n    </thead>\n    @if (loading) {\n      <v-loader />\n    } @else {\n    <tbody class=\"v-table__body\">\n      @for (data of tableRowView; track data.id; let rowIndex = $index) {\n      <tr\n        class=\"v-table__row\"\n        [class.gov-table--highlight]=\"data.selected && selectionMode\"\n        (click)=\"selectRow(data, $event)\"\n        (dblclick)=\"navigate(data, $event)\"\n        (mousedown)=\"navigateNewWindow(data, $event)\"\n      >\n        @if (this.rowDetailTemplate) {\n        <td>\n          <gov-button\n            [size]=\"size | govSize\"\n            color=\"primary\"\n            type=\"solid\"\n            (gov-click)=\"toggleDetail(data)\"\n          >\n            <gov-icon\n              [name]=\"data.expanded ? 'chevron-up' : 'chevron-down'\"\n              [size]=\"size | govSize\"\n              slot=\"icon-start\"\n            ></gov-icon>\n          </gov-button>\n        </td>\n        } @if (selectionMode === 'multiple') {\n        <td class=\"gov-table--fit-content gov-table--border-right\">\n          <gov-form-checkbox\n            no-label\n            [checked]=\"data.selected\"\n            [size]=\"size | govSize\"\n            (gov-change)=\"selectRowCheckbox(data, $event)\"\n          ></gov-form-checkbox>\n        </td>\n        }\n        @for (column of tableColumns; track column; let columnIndex = $index) {\n        @if (column.visible && column.forceVisibility !== 'hidden') {\n        <td\n          [style]=\"{'text-align': column.textAlign}\"\n          [class]=\"column.columnClass!\"\n          [class.v-auto-cell]=\"column.template\"\n        >\n          @if (column.template) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              column.template;\n              context: { $implicit: data.row }\n            \"\n          ></ng-container>\n          } @else {\n          <span\n            [queryParams]=\"column.queryParams ? column.queryParams : undefined\"\n            [routerLink]=\"column.routerLink ? column.routerLink(data.row) : undefined\"\n            [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\n            [attr.title]=\"\n              column.valueGetter(data.row, rowIndex).length > maximumColumnLength\n                ? column.valueGetter(data.row, rowIndex)\n                : null\n            \"\n          ></span>\n          }\n        </td>\n        @if (this.rowDetailButtonTemplate) {\n        <td scope=\"\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              this.rowDetailButtonTemplate;\n              context: { $implicit: data.row }\n            \"\n          ></ng-container>\n        </td>\n        }}}\n      </tr>\n      @if (this.rowDetailTemplate && data.expanded) {\n      <tr>\n        <td [attr.colspan]=\"tableColumns.length + 1\">\n          <ng-container\n            class=\"w-100\"\n            *ngTemplateOutlet=\"\n              this.rowDetailTemplate;\n              context: { $implicit: data.row }\n            \"\n          ></ng-container>\n        </td>\n      </tr>\n      } } @if (!tableRows.length && !loading){\n      <td [attr.colspan]=\"tableColumns.length\">\n        <gov-empty align=\"center\" [size]=\"size | govSize\">\n          <gov-icon slot=\"icon\" name=\"empty-file\" type=\"colored\"/>\n          <p slot=\"headline\">\n            {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}\n          </p>\n        </gov-empty>\n      </td>\n      }\n    </tbody>\n  }\n  </table>\n  @if(showPaginator) {\n  <div class=\"v-table__paginator d-flex pt-3 pb-3\">\n    @if (tableRows.length) {\n    <div class=\"mt-2\">\n      <v-table-pagination-info\n        [showingText]=\"'TABLES.PAGINATION.SHOWING' | translate\"\n        [toText]=\"'TABLES.PAGINATION.TO' | translate\"\n        [ofText]=\"'TABLES.PAGINATION.OF' | translate\"\n        [entriesText]=\"'TABLES.PAGINATION.ENTRIES' | translate\"\n        [currentPage]=\"currentPage\"\n        [pageSize]=\"pageSize\"\n        [total]=\"total\"\n      />\n    </div>\n    <div class=\"ms-4\">\n      <gov-form-select\n        [options]=\"pageSizeOptions\"\n        [value]=\"govPageSize\"\n        (gov-change)=\"changePageSize($event)\"\n      ></gov-form-select>\n    </div>\n    }\n    <div class=\"ms-4\">\n      <gov-pagination\n        [current]=\"currentPage\"\n        [pageSize]=\"pageSize\"\n        [total]=\"total\"\n        [type]=\"'button'\"\n        (gov-page)=\"changePage($event)\"\n      ></gov-pagination>\n    </div>\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.v-table{position:relative;height:100%;display:flex;flex-direction:column}.v-table__sortable{color:var(--text-primary-color);text-decoration:underline;transition:color .15s ease-in-out;cursor:pointer}.v-table__sortable:after{content:\"\\2191\\2193\";margin-left:.5rem;text-decoration:none;display:inline-block}.v-table__sortable--asc:after{content:\"\\2191\"}.v-table__sortable--desc:after{content:\"\\2193\"}.v-table__header{background-color:var(--background-block-primary);position:sticky;top:0;z-index:2}.v-table__table{width:100%}.v-table__paginator{background-color:var(--background-neutral-white);justify-content:end;position:sticky;bottom:0;z-index:3}.gov-table{width:100%;overflow-x:auto}.gov-table table{table-layout:auto;min-width:100%;border-collapse:collapse}.gov-table table tr.gov-table--highlight td{background-color:var(--background-primary-subtle)}.gov-table table th,.gov-table table td{border-bottom:1px solid var(--border-subtlest);text-align:left}.gov-table table th.gov-table--align-right,.gov-table table td.gov-table--align-right{text-align:right}.gov-table table th.gov-table--vertical-align-top,.gov-table table td.gov-table--vertical-align-top{vertical-align:top}.gov-table table th.gov-table--border-right,.gov-table table td.gov-table--border-right{border-right:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-left,.gov-table table td.gov-table--border-left{border-left:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-bottom-none,.gov-table table td.gov-table--border-bottom-none{border-bottom:none}.gov-table table th.gov-table--nowrap,.gov-table table td.gov-table--nowrap{white-space:nowrap}.gov-table table th.gov-table--fit-width,.gov-table table td.gov-table--fit-width{width:1px}.gov-table table th{color:var(--text-primary);background-color:var(--background-neutral-subtlest)}.gov-table table td{background-color:var(--background-neutral-white)}.gov-table table tr.open td{padding:var(--spacing-s) var(--spacing-m)}.gov-table summary::-webkit-details-marker{display:none}.gov-table[size=s] table{border-bottom-left-radius:var(--corner-radius-s);border-bottom-right-radius:var(--corner-radius-s)}.gov-table[size=s] table th,.gov-table[size=s] table td{height:var(--height-2xl);padding:0 var(--spacing-s);font-size:var(--font-size-body-s);line-height:150%;font-weight:400}.gov-table[size=s] table th{font-weight:700}.gov-table[size=m] table{border-bottom-left-radius:var(--corner-radius-m);border-bottom-right-radius:var(--corner-radius-m)}.gov-table[size=m] table th,.gov-table[size=m] table td{height:var(--height-3xl);padding:0 var(--spacing-m);font-size:var(--font-size-body-m);line-height:150%;font-weight:400}.gov-table[size=m] table th{font-weight:700}.gov-table[size=l] table{border-bottom-left-radius:var(--corner-radius-l);border-bottom-right-radius:var(--corner-radius-l)}.gov-table[size=l] table th,.gov-table[size=l] table td{height:var(--height-4xl);padding:0 var(--spacing-l);font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-table[size=l] table th{font-weight:700}.gov-table-complex__name,.gov-table-complex__description{margin:0;color:var(--text-primary)}.gov-table-complex__actions{color:var(--text-white-fixed);background-color:var(--background-primary);padding:var(--spacing-xs) var(--spacing-s)}.gov-table-complex__per-page{width:185px;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewColumns: [{
                 type: ContentChildren,
                 args: [TABLE_COLUMN_PROVIDER]
@@ -2053,15 +2053,15 @@ class FeatureListPageComponent {
             activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeatureListPageComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FeatureListPageComponent, isStandalone: true, selector: "v-feature-list-page", ngImport: i0, template: `
-    <v-feature-list
-      [title]="config.title"
-      [tableName]="config.tableName"
-      [showAdd]="config.showAdd ?? true"
-      [showDownload]="config.showDownload ?? true"
-      [showDelete]="config.showDelete ?? true"
-    >
-    </v-feature-list>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FeatureListPageComponent, isStandalone: true, selector: "v-feature-list-page", ngImport: i0, template: `
+    <v-feature-list
+      [title]="config.title"
+      [tableName]="config.tableName"
+      [showAdd]="config.showAdd ?? true"
+      [showDownload]="config.showDownload ?? true"
+      [showDelete]="config.showDelete ?? true"
+    >
+    </v-feature-list>
   `, isInline: true, dependencies: [{ kind: "component", type: FeatureListComponent, selector: "v-feature-list", inputs: ["autoBind", "title", "columns", "filters", "maxVisibleActions", "tableName", "ngrxFeatureKey", "maxVisibleMobileActions", "showExtendedFilter", "showDownload", "showDelete", "showAdd", "canDownload", "canDelete", "canAdd", "useRouterFilter", "fulltextFieldName", "showFulltext", "deleteConfirmMessage", "autoDeleteEnabled", "autoDownloadEnabled", "downloadFileName", "datasource", "extraFilter", "disableCustomClicks", "maximumColumnLength", "selectionMode"], outputs: ["addClick", "downloadClick", "deleteClick", "selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeatureListPageComponent, decorators: [{
@@ -2070,15 +2070,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: 'v-feature-list-page',
                     standalone: true,
                     imports: [FeatureListComponent],
-                    template: `
-    <v-feature-list
-      [title]="config.title"
-      [tableName]="config.tableName"
-      [showAdd]="config.showAdd ?? true"
-      [showDownload]="config.showDownload ?? true"
-      [showDelete]="config.showDelete ?? true"
-    >
-    </v-feature-list>
+                    template: `
+    <v-feature-list
+      [title]="config.title"
+      [tableName]="config.tableName"
+      [showAdd]="config.showAdd ?? true"
+      [showDownload]="config.showDownload ?? true"
+      [showDelete]="config.showDelete ?? true"
+    >
+    </v-feature-list>
   `,
                 }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }] });
@@ -2282,7 +2282,7 @@ class FeatureListComponent {
         return new Blob([csvData], { type: 'text/csv' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeatureListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FeatureListComponent, isStandalone: true, selector: "v-feature-list", inputs: { autoBind: "autoBind", title: "title", columns: "columns", filters: "filters", maxVisibleActions: "maxVisibleActions", tableName: "tableName", ngrxFeatureKey: "ngrxFeatureKey", maxVisibleMobileActions: "maxVisibleMobileActions", showExtendedFilter: "showExtendedFilter", showDownload: "showDownload", showDelete: "showDelete", showAdd: "showAdd", canDownload: "canDownload", canDelete: "canDelete", canAdd: "canAdd", useRouterFilter: "useRouterFilter", fulltextFieldName: "fulltextFieldName", showFulltext: "showFulltext", deleteConfirmMessage: "deleteConfirmMessage", autoDeleteEnabled: "autoDeleteEnabled", autoDownloadEnabled: "autoDownloadEnabled", downloadFileName: "downloadFileName", datasource: "datasource", extraFilter: "extraFilter", disableCustomClicks: "disableCustomClicks", maximumColumnLength: "maximumColumnLength", selectionMode: "selectionMode" }, outputs: { addClick: "addClick", downloadClick: "downloadClick", deleteClick: "deleteClick", selectionChange: "selectionChange" }, queries: [{ propertyName: "viewColumns", predicate: FEATURE_LIST_COLUMN_PROVIDER }, { propertyName: "fieldDeclarations", predicate: FeatureListFilterFieldDirective }], viewQueries: [{ propertyName: "tableDatasourceDirective", first: true, predicate: TableDatasourceDirective, descendants: true }], ngImport: i0, template: "<div class=\"feature-list__container full-height-container\">\r\n  <v-filter\r\n    #filter\r\n    [title]=\"title\"\r\n    [fields]=\"columns | featureListColumn\"\r\n    [filters]=\"filters\"\r\n    [fulltextFieldName]=\"fulltextFieldName\"\r\n    [showFulltext]=\"showFulltext\"\r\n    [showFilters]=\"showExtendedFilter\"\r\n  >\r\n    <v-action-button-group\r\n      [maxItems]=\"maxVisibleActions\"\r\n      [maxItemsMobile]=\"maxVisibleMobileActions\"\r\n    >\r\n      @if (showAdd) {\r\n      <v-action-button\r\n        [icon]=\"icons.add\"\r\n        label=\"Add\"\r\n        [disabled]=\"!canAdd\"\r\n        (click)=\"addClick.emit()\"\r\n      ></v-action-button>\r\n      } @if (showDelete){\r\n      <v-action-button\r\n        [icon]=\"icons.delete\"\r\n        label=\"Delete\"\r\n        [disabled]=\"!canDelete || !selection.length\"\r\n        (click)=\"startDeleteItems()\"\r\n      ></v-action-button>\r\n      } @if (showDownload){\r\n      <v-action-button\r\n        [icon]=\"icons.download\"\r\n        label=\"Download\"\r\n        [disabled]=\"!canDownload\"\r\n        (click)=\"startDownload()\"\r\n      ></v-action-button>\r\n      }\r\n    </v-action-button-group>\r\n  </v-filter>\r\n  <div class=\"feature-list__table-container full-height-container\">\r\n    <div class=\"full-height-container\">\r\n      <v-table\r\n        useDatasource\r\n        useFilter\r\n        [filterComponent]=\"filter\"\r\n        class=\"full-height-container\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [tableName]=\"tableName\"\r\n        [autoBind]=\"true\"\r\n        [datasource]=\"datasource\"\r\n        [columns]=\"columns\"\r\n        [extraFilter]=\"extraFilter\"\r\n        [maximumColumnLength]=\"maximumColumnLength\"\r\n        [disableCustomClicks]=\"disableCustomClicks\"\r\n        (selectionChange)=\"selectItems($event)\"\r\n      >\r\n      </v-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".full-height-container,:host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "v-table", inputs: ["sorters", "data", "total", "filter", "extraFilter", "loading", "scrollable", "pageSize", "currentPage", "showPaginator", "userTableWrapper", "sortMultiple", "lazy", "selectionMode", "selection", "showPageSizePicker", "entityKey", "customRoute", "disableCustomClicks", "tableName", "size", "showActionButtons", "maximumColumnLength", "columns"], outputs: ["selectionChange", "lazyLoad", "download", "delete", "save"] }, { kind: "directive", type: TableDatasourceDirective, selector: "v-table[useDatasource]", inputs: ["autoBind", "tableName", "debounceTime", "datasource", "extraFilter", "transformFn"], exportAs: ["useDatasource"] }, { kind: "component", type: FilterComponent, selector: "v-filter", inputs: ["fields", "filters", "title", "fulltextFieldName", "showFulltext", "showFilters", "autoBind", "debounceTime"] }, { kind: "directive", type: TableFilterDirective, selector: "v-table[useFilter]", inputs: ["filterComponent"], exportAs: ["tableFilterDirective"] }, { kind: "component", type: ActionButtonGroupComponent, selector: "v-action-button-group", inputs: ["maxItems", "maxItemsMobile", "items", "menuIconPos", "menuIcon", "label", "icon"] }, { kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }, { kind: "pipe", type: FeatureListFilterPipe, name: "featureListColumn" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FeatureListComponent, isStandalone: true, selector: "v-feature-list", inputs: { autoBind: "autoBind", title: "title", columns: "columns", filters: "filters", maxVisibleActions: "maxVisibleActions", tableName: "tableName", ngrxFeatureKey: "ngrxFeatureKey", maxVisibleMobileActions: "maxVisibleMobileActions", showExtendedFilter: "showExtendedFilter", showDownload: "showDownload", showDelete: "showDelete", showAdd: "showAdd", canDownload: "canDownload", canDelete: "canDelete", canAdd: "canAdd", useRouterFilter: "useRouterFilter", fulltextFieldName: "fulltextFieldName", showFulltext: "showFulltext", deleteConfirmMessage: "deleteConfirmMessage", autoDeleteEnabled: "autoDeleteEnabled", autoDownloadEnabled: "autoDownloadEnabled", downloadFileName: "downloadFileName", datasource: "datasource", extraFilter: "extraFilter", disableCustomClicks: "disableCustomClicks", maximumColumnLength: "maximumColumnLength", selectionMode: "selectionMode" }, outputs: { addClick: "addClick", downloadClick: "downloadClick", deleteClick: "deleteClick", selectionChange: "selectionChange" }, queries: [{ propertyName: "viewColumns", predicate: FEATURE_LIST_COLUMN_PROVIDER }, { propertyName: "fieldDeclarations", predicate: FeatureListFilterFieldDirective }], viewQueries: [{ propertyName: "tableDatasourceDirective", first: true, predicate: TableDatasourceDirective, descendants: true }], ngImport: i0, template: "<div class=\"feature-list__container full-height-container\">\n  <v-filter\n    #filter\n    [title]=\"title\"\n    [fields]=\"columns | featureListColumn\"\n    [filters]=\"filters\"\n    [fulltextFieldName]=\"fulltextFieldName\"\n    [showFulltext]=\"showFulltext\"\n    [showFilters]=\"showExtendedFilter\"\n  >\n    <v-action-button-group\n      [maxItems]=\"maxVisibleActions\"\n      [maxItemsMobile]=\"maxVisibleMobileActions\"\n    >\n      @if (showAdd) {\n      <v-action-button\n        [icon]=\"icons.add\"\n        label=\"Add\"\n        [disabled]=\"!canAdd\"\n        (click)=\"addClick.emit()\"\n      ></v-action-button>\n      } @if (showDelete){\n      <v-action-button\n        [icon]=\"icons.delete\"\n        label=\"Delete\"\n        [disabled]=\"!canDelete || !selection.length\"\n        (click)=\"startDeleteItems()\"\n      ></v-action-button>\n      } @if (showDownload){\n      <v-action-button\n        [icon]=\"icons.download\"\n        label=\"Download\"\n        [disabled]=\"!canDownload\"\n        (click)=\"startDownload()\"\n      ></v-action-button>\n      }\n    </v-action-button-group>\n  </v-filter>\n  <div class=\"feature-list__table-container full-height-container\">\n    <div class=\"full-height-container\">\n      <v-table\n        useDatasource\n        useFilter\n        [filterComponent]=\"filter\"\n        class=\"full-height-container\"\n        [selectionMode]=\"selectionMode\"\n        [tableName]=\"tableName\"\n        [autoBind]=\"true\"\n        [datasource]=\"datasource\"\n        [columns]=\"columns\"\n        [extraFilter]=\"extraFilter\"\n        [maximumColumnLength]=\"maximumColumnLength\"\n        [disableCustomClicks]=\"disableCustomClicks\"\n        (selectionChange)=\"selectItems($event)\"\n      >\n      </v-table>\n    </div>\n  </div>\n</div>\n", styles: [".full-height-container,:host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "v-table", inputs: ["sorters", "data", "total", "filter", "extraFilter", "loading", "scrollable", "pageSize", "currentPage", "showPaginator", "userTableWrapper", "sortMultiple", "lazy", "selectionMode", "selection", "showPageSizePicker", "entityKey", "customRoute", "disableCustomClicks", "tableName", "size", "showActionButtons", "maximumColumnLength", "columns"], outputs: ["selectionChange", "lazyLoad", "download", "delete", "save"] }, { kind: "directive", type: TableDatasourceDirective, selector: "v-table[useDatasource]", inputs: ["autoBind", "tableName", "debounceTime", "datasource", "extraFilter", "transformFn"], exportAs: ["useDatasource"] }, { kind: "component", type: FilterComponent, selector: "v-filter", inputs: ["fields", "filters", "title", "fulltextFieldName", "showFulltext", "showFilters", "autoBind", "debounceTime"] }, { kind: "directive", type: TableFilterDirective, selector: "v-table[useFilter]", inputs: ["filterComponent"], exportAs: ["tableFilterDirective"] }, { kind: "component", type: ActionButtonGroupComponent, selector: "v-action-button-group", inputs: ["maxItems", "maxItemsMobile", "items", "menuIconPos", "menuIcon", "label", "icon"] }, { kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }, { kind: "pipe", type: FeatureListFilterPipe, name: "featureListColumn" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeatureListComponent, decorators: [{
             type: Component,
@@ -2294,7 +2294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         ActionButtonGroupComponent,
                         ActionButtonComponent,
                         FeatureListFilterPipe,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"feature-list__container full-height-container\">\r\n  <v-filter\r\n    #filter\r\n    [title]=\"title\"\r\n    [fields]=\"columns | featureListColumn\"\r\n    [filters]=\"filters\"\r\n    [fulltextFieldName]=\"fulltextFieldName\"\r\n    [showFulltext]=\"showFulltext\"\r\n    [showFilters]=\"showExtendedFilter\"\r\n  >\r\n    <v-action-button-group\r\n      [maxItems]=\"maxVisibleActions\"\r\n      [maxItemsMobile]=\"maxVisibleMobileActions\"\r\n    >\r\n      @if (showAdd) {\r\n      <v-action-button\r\n        [icon]=\"icons.add\"\r\n        label=\"Add\"\r\n        [disabled]=\"!canAdd\"\r\n        (click)=\"addClick.emit()\"\r\n      ></v-action-button>\r\n      } @if (showDelete){\r\n      <v-action-button\r\n        [icon]=\"icons.delete\"\r\n        label=\"Delete\"\r\n        [disabled]=\"!canDelete || !selection.length\"\r\n        (click)=\"startDeleteItems()\"\r\n      ></v-action-button>\r\n      } @if (showDownload){\r\n      <v-action-button\r\n        [icon]=\"icons.download\"\r\n        label=\"Download\"\r\n        [disabled]=\"!canDownload\"\r\n        (click)=\"startDownload()\"\r\n      ></v-action-button>\r\n      }\r\n    </v-action-button-group>\r\n  </v-filter>\r\n  <div class=\"feature-list__table-container full-height-container\">\r\n    <div class=\"full-height-container\">\r\n      <v-table\r\n        useDatasource\r\n        useFilter\r\n        [filterComponent]=\"filter\"\r\n        class=\"full-height-container\"\r\n        [selectionMode]=\"selectionMode\"\r\n        [tableName]=\"tableName\"\r\n        [autoBind]=\"true\"\r\n        [datasource]=\"datasource\"\r\n        [columns]=\"columns\"\r\n        [extraFilter]=\"extraFilter\"\r\n        [maximumColumnLength]=\"maximumColumnLength\"\r\n        [disableCustomClicks]=\"disableCustomClicks\"\r\n        (selectionChange)=\"selectItems($event)\"\r\n      >\r\n      </v-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".full-height-container,:host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"feature-list__container full-height-container\">\n  <v-filter\n    #filter\n    [title]=\"title\"\n    [fields]=\"columns | featureListColumn\"\n    [filters]=\"filters\"\n    [fulltextFieldName]=\"fulltextFieldName\"\n    [showFulltext]=\"showFulltext\"\n    [showFilters]=\"showExtendedFilter\"\n  >\n    <v-action-button-group\n      [maxItems]=\"maxVisibleActions\"\n      [maxItemsMobile]=\"maxVisibleMobileActions\"\n    >\n      @if (showAdd) {\n      <v-action-button\n        [icon]=\"icons.add\"\n        label=\"Add\"\n        [disabled]=\"!canAdd\"\n        (click)=\"addClick.emit()\"\n      ></v-action-button>\n      } @if (showDelete){\n      <v-action-button\n        [icon]=\"icons.delete\"\n        label=\"Delete\"\n        [disabled]=\"!canDelete || !selection.length\"\n        (click)=\"startDeleteItems()\"\n      ></v-action-button>\n      } @if (showDownload){\n      <v-action-button\n        [icon]=\"icons.download\"\n        label=\"Download\"\n        [disabled]=\"!canDownload\"\n        (click)=\"startDownload()\"\n      ></v-action-button>\n      }\n    </v-action-button-group>\n  </v-filter>\n  <div class=\"feature-list__table-container full-height-container\">\n    <div class=\"full-height-container\">\n      <v-table\n        useDatasource\n        useFilter\n        [filterComponent]=\"filter\"\n        class=\"full-height-container\"\n        [selectionMode]=\"selectionMode\"\n        [tableName]=\"tableName\"\n        [autoBind]=\"true\"\n        [datasource]=\"datasource\"\n        [columns]=\"columns\"\n        [extraFilter]=\"extraFilter\"\n        [maximumColumnLength]=\"maximumColumnLength\"\n        [disableCustomClicks]=\"disableCustomClicks\"\n        (selectionChange)=\"selectItems($event)\"\n      >\n      </v-table>\n    </div>\n  </div>\n</div>\n", styles: [".full-height-container,:host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"] }]
         }], propDecorators: { viewColumns: [{
                 type: ContentChildren,
                 args: [FEATURE_LIST_COLUMN_PROVIDER]
@@ -2580,7 +2580,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
                 provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
                 useExisting: ConfirmDialogComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-dialog\r\n    [open]=\"visible\"\r\n    [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\r\n    [attr.block-backdrop-close]=\"data.closable !== undefined ? !data.closable : false\" \r\n    [style.--dialog-max-width]=\"data.width\"\r\n    [style.--dialog-max-height]=\"data.height\"\r\n    role=\"dialog\"\r\n    accessible-close-label=\"Close dialog box with more information\"\r\n    (gov-close)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\r\n>\r\n    <gov-icon\r\n        type=\"components\"\r\n        [name]=\"data.headerIcon\"\r\n        slot=\"icon\"\r\n        [color]=\"data.severity | govColor\"\r\n    />\r\n    \r\n    <h2 slot=\"title\">{{ data.title ?? 'Title' }}</h2>\r\n\r\n    @if (data && data.innerHTML) {\r\n    <div [innerHTML]=\"data.innerHTML\"></div>\r\n    } @else if (data.componentType) {\r\n    <v-dynamic-component\r\n        [componentType]=\"data.componentType\"\r\n        [data]=\"$any(data.data)\"\r\n    ></v-dynamic-component>\r\n    }\r\n\r\n    <gov-button\r\n        color=\"primary\"\r\n        size=\"m\"\r\n        type=\"solid\"\r\n        slot=\"footer\"\r\n        (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\r\n    >\r\n        {{ data.confirmButtonText ?? 'Yes'}}\r\n    </gov-button>\r\n    \r\n    <gov-button\r\n        [ngClass]=\"!data.showCancelButton ? 'd-none' : ''\"\r\n        color=\"primary\"\r\n        size=\"m\"\r\n        type=\"outlined\"\r\n        slot=\"footer\"\r\n        [disabled]=\"!data.showCancelButton\"\r\n        (gov-click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\r\n    >\r\n        {{ data.cancelButtonText ?? 'No' }}\r\n    </gov-button>\r\n</gov-dialog>\r\n", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovDialog, selector: "gov-dialog", inputs: ["accessibleCloseLabel", "accessibleCloseLabelledBy", "accessibleDescribedBy", "accessibleLabelledBy", "blockBackdropClose", "blockClose", "labelTag", "open", "role"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "component", type: DynamicComponent, selector: "v-dynamic-component", inputs: ["componentType", "data"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-dialog\n    [open]=\"visible\"\n    [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\n    [attr.block-backdrop-close]=\"data.closable !== undefined ? !data.closable : false\" \n    [style.--dialog-max-width]=\"data.width\"\n    [style.--dialog-max-height]=\"data.height\"\n    role=\"dialog\"\n    accessible-close-label=\"Close dialog box with more information\"\n    (gov-close)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n>\n    <gov-icon\n        type=\"components\"\n        [name]=\"data.headerIcon\"\n        slot=\"icon\"\n        [color]=\"data.severity | govColor\"\n    />\n    \n    <h2 slot=\"title\">{{ data.title ?? 'Title' }}</h2>\n\n    @if (data && data.innerHTML) {\n    <div [innerHTML]=\"data.innerHTML\"></div>\n    } @else if (data.componentType) {\n    <v-dynamic-component\n        [componentType]=\"data.componentType\"\n        [data]=\"$any(data.data)\"\n    ></v-dynamic-component>\n    }\n\n    <gov-button\n        color=\"primary\"\n        size=\"m\"\n        type=\"solid\"\n        slot=\"footer\"\n        (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n    >\n        {{ data.confirmButtonText ?? 'Yes'}}\n    </gov-button>\n    \n    <gov-button\n        [ngClass]=\"!data.showCancelButton ? 'd-none' : ''\"\n        color=\"primary\"\n        size=\"m\"\n        type=\"outlined\"\n        slot=\"footer\"\n        [disabled]=\"!data.showCancelButton\"\n        (gov-click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n    >\n        {{ data.cancelButtonText ?? 'No' }}\n    </gov-button>\n</gov-dialog>\n", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovDialog, selector: "gov-dialog", inputs: ["accessibleCloseLabel", "accessibleCloseLabelledBy", "accessibleDescribedBy", "accessibleLabelledBy", "blockBackdropClose", "blockClose", "labelTag", "open", "role"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "component", type: DynamicComponent, selector: "v-dynamic-component", inputs: ["componentType", "data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -2594,7 +2594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
                             useExisting: ConfirmDialogComponent,
                         },
-                    ], template: "<gov-dialog\r\n    [open]=\"visible\"\r\n    [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\r\n    [attr.block-backdrop-close]=\"data.closable !== undefined ? !data.closable : false\" \r\n    [style.--dialog-max-width]=\"data.width\"\r\n    [style.--dialog-max-height]=\"data.height\"\r\n    role=\"dialog\"\r\n    accessible-close-label=\"Close dialog box with more information\"\r\n    (gov-close)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\r\n>\r\n    <gov-icon\r\n        type=\"components\"\r\n        [name]=\"data.headerIcon\"\r\n        slot=\"icon\"\r\n        [color]=\"data.severity | govColor\"\r\n    />\r\n    \r\n    <h2 slot=\"title\">{{ data.title ?? 'Title' }}</h2>\r\n\r\n    @if (data && data.innerHTML) {\r\n    <div [innerHTML]=\"data.innerHTML\"></div>\r\n    } @else if (data.componentType) {\r\n    <v-dynamic-component\r\n        [componentType]=\"data.componentType\"\r\n        [data]=\"$any(data.data)\"\r\n    ></v-dynamic-component>\r\n    }\r\n\r\n    <gov-button\r\n        color=\"primary\"\r\n        size=\"m\"\r\n        type=\"solid\"\r\n        slot=\"footer\"\r\n        (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\r\n    >\r\n        {{ data.confirmButtonText ?? 'Yes'}}\r\n    </gov-button>\r\n    \r\n    <gov-button\r\n        [ngClass]=\"!data.showCancelButton ? 'd-none' : ''\"\r\n        color=\"primary\"\r\n        size=\"m\"\r\n        type=\"outlined\"\r\n        slot=\"footer\"\r\n        [disabled]=\"!data.showCancelButton\"\r\n        (gov-click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\r\n    >\r\n        {{ data.cancelButtonText ?? 'No' }}\r\n    </gov-button>\r\n</gov-dialog>\r\n", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"] }]
+                    ], template: "<gov-dialog\n    [open]=\"visible\"\n    [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\n    [attr.block-backdrop-close]=\"data.closable !== undefined ? !data.closable : false\" \n    [style.--dialog-max-width]=\"data.width\"\n    [style.--dialog-max-height]=\"data.height\"\n    role=\"dialog\"\n    accessible-close-label=\"Close dialog box with more information\"\n    (gov-close)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n>\n    <gov-icon\n        type=\"components\"\n        [name]=\"data.headerIcon\"\n        slot=\"icon\"\n        [color]=\"data.severity | govColor\"\n    />\n    \n    <h2 slot=\"title\">{{ data.title ?? 'Title' }}</h2>\n\n    @if (data && data.innerHTML) {\n    <div [innerHTML]=\"data.innerHTML\"></div>\n    } @else if (data.componentType) {\n    <v-dynamic-component\n        [componentType]=\"data.componentType\"\n        [data]=\"$any(data.data)\"\n    ></v-dynamic-component>\n    }\n\n    <gov-button\n        color=\"primary\"\n        size=\"m\"\n        type=\"solid\"\n        slot=\"footer\"\n        (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n    >\n        {{ data.confirmButtonText ?? 'Yes'}}\n    </gov-button>\n    \n    <gov-button\n        [ngClass]=\"!data.showCancelButton ? 'd-none' : ''\"\n        color=\"primary\"\n        size=\"m\"\n        type=\"outlined\"\n        slot=\"footer\"\n        [disabled]=\"!data.showCancelButton\"\n        (gov-click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n    >\n        {{ data.cancelButtonText ?? 'No' }}\n    </gov-button>\n</gov-dialog>\n", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.DialogService }, { type: i0.ChangeDetectorRef }] });
 class HeaderComponent {
@@ -2638,7 +2638,7 @@ class HeaderComponent {
                 provide: HEADER_COMPONENT_TOKEN,
                 useExisting: HeaderComponent
             }
-        ], queries: [{ propertyName: "actionTemplate", first: true, predicate: ["action"], descendants: true }], ngImport: i0, template: "<header class=\"gov-header\">\r\n    <div class=\"gov-header__divider\">\r\n        <div class=\"gov-header__content\">\r\n            <gov-flex\r\n                justify-content=\"space-between\"\r\n                align-items=\"center\"\r\n                responsive=\"false\"\r\n            >\r\n                <a\r\n                    href=\"/\"\r\n                    class=\"gov-header__logo\"\r\n                    aria-label=\"Zp\u011Bt na \u00FAvodn\u00ED str\u00E1nku\"\r\n                >\r\n                    <gov-flex\r\n                        align-items=\"center\"\r\n                        gap=\"s\"\r\n                        responsive=\"false\"\r\n                    >\r\n                        @if (logoUrl) {\r\n                        <img\r\n                            class=\"gov-header__logo-img\"\r\n                            src=\"{{ logoUrl }}\"\r\n                            width=\"125px\"\r\n                            height=\"43px\"\r\n                            alt=\"GA\u010CR Logo\"\r\n                        >\r\n                        }\r\n                    </gov-flex>\r\n                </a>\r\n            </gov-flex>\r\n            <gov-flex\r\n                class=\"gov-header__action\"\r\n                justify-content=\"space-between\"\r\n                align-items=\"center\"\r\n                gap=\"s\"\r\n            >\r\n                <gov-button\r\n                    color=\"primary\"\r\n                    size=\"m\"\r\n                    type=\"base\"\r\n                >{{ userName }}</gov-button>\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"\r\n                    this.actionTemplate;\r\n                \"></ng-container>\r\n            </gov-flex>\r\n        </div>\r\n    </div>\r\n    <div class=\"gov-header__navigation\">\r\n        <nav\r\n            class=\"gov-navigation\"\r\n            aria-label=\"Main navigation\"\r\n            id=\"main-navigation\"\r\n        >\r\n            <ul>\r\n                @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {\r\n                <li\r\n                    *hasPermission=\"tab.data?.permissions ?? []\"\r\n                    class=\"gov-navigation--has-megamenu\"\r\n                >\r\n                    <gov-button\r\n                        type=\"base\"\r\n                        color=\"primary\"\r\n                        size=\"l\"\r\n                        [attr.aria-label]=\"tab.label\"\r\n                        (gov-click)=\"\r\n                            showOrHide(index, tab.children?.length ?? 0);\r\n                            canRedirect(tab.url, !tab.children?.length)\r\n                        \"\r\n                    >\r\n                        {{ tab.label }}\r\n                        @if (tab.children?.length) {\r\n                        <gov-icon\r\n                            slot=\"icon-end\"\r\n                            size=\"s\"\r\n                            [name]=\"canBeShown(index) ? 'chevron-up' : 'chevron-down'\"\r\n                        ></gov-icon>\r\n                        }\r\n                    </gov-button>\r\n                    @if (canBeShown(index)) {\r\n                    <ul\r\n                        id=\"megamenu{{index}}\"\r\n                        class=\"gov-mega-menu gov-header__submenu\"\r\n                        [attr.aria-hidden]=\"canBeShown(index)\"\r\n                    >\r\n                        @for (child of tab.children; track child) {\r\n                        <li\r\n                            *hasPermission=\"child.data?.permissions ?? []\"\r\n                            class=\"gov-mega-menu__heading\"\r\n                        >\r\n                            <a\r\n                                [routerLink]=\"child.url\"\r\n                                (click)=\"showOrHide(index)\"\r\n                            >\r\n                                @if (child.icon) {\r\n                                <gov-icon\r\n                                    [name]=\"child.icon\"\r\n                                    size=\"m\"\r\n                                ></gov-icon>\r\n                                }\r\n                                <span>{{ child.label }}</span>\r\n                            </a>\r\n                            @if (child.children) { @for(miniChild of child.children; track miniChild) {\r\n                            <ul>\r\n                                <li *hasPermission=\"miniChild.data?.permissions ?? []\">\r\n                                    <a\r\n                                        [routerLink]=\"miniChild.url\"\r\n                                        (click)=\"showOrHide(index)\"\r\n                                    >{{ miniChild.label }}</a>\r\n                                </li>\r\n                            </ul>\r\n                            } }\r\n                        </li>\r\n                        }\r\n                    </ul>\r\n                    }\r\n                </li>\r\n                }\r\n            </ul>\r\n        </nav>\r\n    </div>\r\n</header>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "justifyContent", "wrap"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "actionTemplate", first: true, predicate: ["action"], descendants: true }], ngImport: i0, template: "<header class=\"gov-header\">\n    <div class=\"gov-header__divider\">\n        <div class=\"gov-header__content\">\n            <gov-flex\n                justify-content=\"space-between\"\n                align-items=\"center\"\n                responsive=\"false\"\n            >\n                <a\n                    href=\"/\"\n                    class=\"gov-header__logo\"\n                    aria-label=\"Zp\u011Bt na \u00FAvodn\u00ED str\u00E1nku\"\n                >\n                    <gov-flex\n                        align-items=\"center\"\n                        gap=\"s\"\n                        responsive=\"false\"\n                    >\n                        @if (logoUrl) {\n                        <img\n                            class=\"gov-header__logo-img\"\n                            src=\"{{ logoUrl }}\"\n                            width=\"125px\"\n                            height=\"43px\"\n                            alt=\"GA\u010CR Logo\"\n                        >\n                        }\n                    </gov-flex>\n                </a>\n            </gov-flex>\n            <gov-flex\n                class=\"gov-header__action\"\n                justify-content=\"space-between\"\n                align-items=\"center\"\n                gap=\"s\"\n            >\n                <gov-button\n                    color=\"primary\"\n                    size=\"m\"\n                    type=\"base\"\n                >{{ userName }}</gov-button>\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"\n                    this.actionTemplate;\n                \"></ng-container>\n            </gov-flex>\n        </div>\n    </div>\n    <div class=\"gov-header__navigation\">\n        <nav\n            class=\"gov-navigation\"\n            aria-label=\"Main navigation\"\n            id=\"main-navigation\"\n        >\n            <ul>\n                @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {\n                <li\n                    *hasPermission=\"tab.data?.permissions ?? []\"\n                    class=\"gov-navigation--has-megamenu\"\n                >\n                    <gov-button\n                        type=\"base\"\n                        color=\"primary\"\n                        size=\"l\"\n                        [attr.aria-label]=\"tab.label\"\n                        (gov-click)=\"\n                            showOrHide(index, tab.children?.length ?? 0);\n                            canRedirect(tab.url, !tab.children?.length)\n                        \"\n                    >\n                        {{ tab.label }}\n                        @if (tab.children?.length) {\n                        <gov-icon\n                            slot=\"icon-end\"\n                            size=\"s\"\n                            [name]=\"canBeShown(index) ? 'chevron-up' : 'chevron-down'\"\n                        ></gov-icon>\n                        }\n                    </gov-button>\n                    @if (canBeShown(index)) {\n                    <ul\n                        id=\"megamenu{{index}}\"\n                        class=\"gov-mega-menu gov-header__submenu\"\n                        [attr.aria-hidden]=\"canBeShown(index)\"\n                    >\n                        @for (child of tab.children; track child) {\n                        <li\n                            *hasPermission=\"child.data?.permissions ?? []\"\n                            class=\"gov-mega-menu__heading\"\n                        >\n                            <a\n                                [routerLink]=\"child.url\"\n                                (click)=\"showOrHide(index)\"\n                            >\n                                @if (child.icon) {\n                                <gov-icon\n                                    [name]=\"child.icon\"\n                                    size=\"m\"\n                                ></gov-icon>\n                                }\n                                <span>{{ child.label }}</span>\n                            </a>\n                            @if (child.children) { @for(miniChild of child.children; track miniChild) {\n                            <ul>\n                                <li *hasPermission=\"miniChild.data?.permissions ?? []\">\n                                    <a\n                                        [routerLink]=\"miniChild.url\"\n                                        (click)=\"showOrHide(index)\"\n                                    >{{ miniChild.label }}</a>\n                                </li>\n                            </ul>\n                            } }\n                        </li>\n                        }\n                    </ul>\n                    }\n                </li>\n                }\n            </ul>\n        </nav>\n    </div>\n</header>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "justifyContent", "wrap"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -2653,7 +2653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: HEADER_COMPONENT_TOKEN,
                             useExisting: HeaderComponent
                         }
-                    ], template: "<header class=\"gov-header\">\r\n    <div class=\"gov-header__divider\">\r\n        <div class=\"gov-header__content\">\r\n            <gov-flex\r\n                justify-content=\"space-between\"\r\n                align-items=\"center\"\r\n                responsive=\"false\"\r\n            >\r\n                <a\r\n                    href=\"/\"\r\n                    class=\"gov-header__logo\"\r\n                    aria-label=\"Zp\u011Bt na \u00FAvodn\u00ED str\u00E1nku\"\r\n                >\r\n                    <gov-flex\r\n                        align-items=\"center\"\r\n                        gap=\"s\"\r\n                        responsive=\"false\"\r\n                    >\r\n                        @if (logoUrl) {\r\n                        <img\r\n                            class=\"gov-header__logo-img\"\r\n                            src=\"{{ logoUrl }}\"\r\n                            width=\"125px\"\r\n                            height=\"43px\"\r\n                            alt=\"GA\u010CR Logo\"\r\n                        >\r\n                        }\r\n                    </gov-flex>\r\n                </a>\r\n            </gov-flex>\r\n            <gov-flex\r\n                class=\"gov-header__action\"\r\n                justify-content=\"space-between\"\r\n                align-items=\"center\"\r\n                gap=\"s\"\r\n            >\r\n                <gov-button\r\n                    color=\"primary\"\r\n                    size=\"m\"\r\n                    type=\"base\"\r\n                >{{ userName }}</gov-button>\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"\r\n                    this.actionTemplate;\r\n                \"></ng-container>\r\n            </gov-flex>\r\n        </div>\r\n    </div>\r\n    <div class=\"gov-header__navigation\">\r\n        <nav\r\n            class=\"gov-navigation\"\r\n            aria-label=\"Main navigation\"\r\n            id=\"main-navigation\"\r\n        >\r\n            <ul>\r\n                @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {\r\n                <li\r\n                    *hasPermission=\"tab.data?.permissions ?? []\"\r\n                    class=\"gov-navigation--has-megamenu\"\r\n                >\r\n                    <gov-button\r\n                        type=\"base\"\r\n                        color=\"primary\"\r\n                        size=\"l\"\r\n                        [attr.aria-label]=\"tab.label\"\r\n                        (gov-click)=\"\r\n                            showOrHide(index, tab.children?.length ?? 0);\r\n                            canRedirect(tab.url, !tab.children?.length)\r\n                        \"\r\n                    >\r\n                        {{ tab.label }}\r\n                        @if (tab.children?.length) {\r\n                        <gov-icon\r\n                            slot=\"icon-end\"\r\n                            size=\"s\"\r\n                            [name]=\"canBeShown(index) ? 'chevron-up' : 'chevron-down'\"\r\n                        ></gov-icon>\r\n                        }\r\n                    </gov-button>\r\n                    @if (canBeShown(index)) {\r\n                    <ul\r\n                        id=\"megamenu{{index}}\"\r\n                        class=\"gov-mega-menu gov-header__submenu\"\r\n                        [attr.aria-hidden]=\"canBeShown(index)\"\r\n                    >\r\n                        @for (child of tab.children; track child) {\r\n                        <li\r\n                            *hasPermission=\"child.data?.permissions ?? []\"\r\n                            class=\"gov-mega-menu__heading\"\r\n                        >\r\n                            <a\r\n                                [routerLink]=\"child.url\"\r\n                                (click)=\"showOrHide(index)\"\r\n                            >\r\n                                @if (child.icon) {\r\n                                <gov-icon\r\n                                    [name]=\"child.icon\"\r\n                                    size=\"m\"\r\n                                ></gov-icon>\r\n                                }\r\n                                <span>{{ child.label }}</span>\r\n                            </a>\r\n                            @if (child.children) { @for(miniChild of child.children; track miniChild) {\r\n                            <ul>\r\n                                <li *hasPermission=\"miniChild.data?.permissions ?? []\">\r\n                                    <a\r\n                                        [routerLink]=\"miniChild.url\"\r\n                                        (click)=\"showOrHide(index)\"\r\n                                    >{{ miniChild.label }}</a>\r\n                                </li>\r\n                            </ul>\r\n                            } }\r\n                        </li>\r\n                        }\r\n                    </ul>\r\n                    }\r\n                </li>\r\n                }\r\n            </ul>\r\n        </nav>\r\n    </div>\r\n</header>" }]
+                    ], template: "<header class=\"gov-header\">\n    <div class=\"gov-header__divider\">\n        <div class=\"gov-header__content\">\n            <gov-flex\n                justify-content=\"space-between\"\n                align-items=\"center\"\n                responsive=\"false\"\n            >\n                <a\n                    href=\"/\"\n                    class=\"gov-header__logo\"\n                    aria-label=\"Zp\u011Bt na \u00FAvodn\u00ED str\u00E1nku\"\n                >\n                    <gov-flex\n                        align-items=\"center\"\n                        gap=\"s\"\n                        responsive=\"false\"\n                    >\n                        @if (logoUrl) {\n                        <img\n                            class=\"gov-header__logo-img\"\n                            src=\"{{ logoUrl }}\"\n                            width=\"125px\"\n                            height=\"43px\"\n                            alt=\"GA\u010CR Logo\"\n                        >\n                        }\n                    </gov-flex>\n                </a>\n            </gov-flex>\n            <gov-flex\n                class=\"gov-header__action\"\n                justify-content=\"space-between\"\n                align-items=\"center\"\n                gap=\"s\"\n            >\n                <gov-button\n                    color=\"primary\"\n                    size=\"m\"\n                    type=\"base\"\n                >{{ userName }}</gov-button>\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"\n                    this.actionTemplate;\n                \"></ng-container>\n            </gov-flex>\n        </div>\n    </div>\n    <div class=\"gov-header__navigation\">\n        <nav\n            class=\"gov-navigation\"\n            aria-label=\"Main navigation\"\n            id=\"main-navigation\"\n        >\n            <ul>\n                @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {\n                <li\n                    *hasPermission=\"tab.data?.permissions ?? []\"\n                    class=\"gov-navigation--has-megamenu\"\n                >\n                    <gov-button\n                        type=\"base\"\n                        color=\"primary\"\n                        size=\"l\"\n                        [attr.aria-label]=\"tab.label\"\n                        (gov-click)=\"\n                            showOrHide(index, tab.children?.length ?? 0);\n                            canRedirect(tab.url, !tab.children?.length)\n                        \"\n                    >\n                        {{ tab.label }}\n                        @if (tab.children?.length) {\n                        <gov-icon\n                            slot=\"icon-end\"\n                            size=\"s\"\n                            [name]=\"canBeShown(index) ? 'chevron-up' : 'chevron-down'\"\n                        ></gov-icon>\n                        }\n                    </gov-button>\n                    @if (canBeShown(index)) {\n                    <ul\n                        id=\"megamenu{{index}}\"\n                        class=\"gov-mega-menu gov-header__submenu\"\n                        [attr.aria-hidden]=\"canBeShown(index)\"\n                    >\n                        @for (child of tab.children; track child) {\n                        <li\n                            *hasPermission=\"child.data?.permissions ?? []\"\n                            class=\"gov-mega-menu__heading\"\n                        >\n                            <a\n                                [routerLink]=\"child.url\"\n                                (click)=\"showOrHide(index)\"\n                            >\n                                @if (child.icon) {\n                                <gov-icon\n                                    [name]=\"child.icon\"\n                                    size=\"m\"\n                                ></gov-icon>\n                                }\n                                <span>{{ child.label }}</span>\n                            </a>\n                            @if (child.children) { @for(miniChild of child.children; track miniChild) {\n                            <ul>\n                                <li *hasPermission=\"miniChild.data?.permissions ?? []\">\n                                    <a\n                                        [routerLink]=\"miniChild.url\"\n                                        (click)=\"showOrHide(index)\"\n                                    >{{ miniChild.label }}</a>\n                                </li>\n                            </ul>\n                            } }\n                        </li>\n                        }\n                    </ul>\n                    }\n                </li>\n                }\n            </ul>\n        </nav>\n    </div>\n</header>" }]
         }], propDecorators: { title: [{
                 type: Input
             }], userName: [{
@@ -2709,7 +2709,7 @@ class PasswordComponent extends BaseFormInputComponent {
                 provide: PASSWORD_COMPONENT_TOKEN,
                 useExisting: PasswordComponent
             }
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label \r\n      [slot]=\"labelSlot\"\r\n      [size]=\"size | govSize\"\r\n    >\r\n      {{ label }}\r\n    </gov-form-label>\r\n    }\r\n  <gov-form-group>\r\n    @if (feedback) {\r\n    <gov-form-password-power [power]=\"passwordStrength - 1\" />\r\n    }\r\n    <gov-form-input\r\n      [formControl]=\"formControl\"\r\n      [attr.input-type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n      [invalid]=\"ngControl?.errors\"\r\n      (ngModelChange)=\"valueChange($event)\"\r\n    />\r\n  </gov-form-group>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n  @if (message) {\r\n  <gov-form-message \r\n      [slot]=\"messageSlot\" \r\n      color=\"neutral\"\r\n      >\r\n      {{ message }}\r\n  </gov-form-message>\r\n  }\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovFormPasswordPower, selector: "gov-form-password-power", inputs: ["power"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label \n      [slot]=\"labelSlot\"\n      [size]=\"size | govSize\"\n    >\n      {{ label }}\n    </gov-form-label>\n    }\n  <gov-form-group>\n    @if (feedback) {\n    <gov-form-password-power [power]=\"passwordStrength - 1\" />\n    }\n    <gov-form-input\n      [formControl]=\"formControl\"\n      [attr.input-type]=\"type\"\n      [placeholder]=\"placeholder\"\n      [invalid]=\"ngControl?.errors\"\n      (ngModelChange)=\"valueChange($event)\"\n    />\n  </gov-form-group>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n  @if (message) {\n  <gov-form-message \n      [slot]=\"messageSlot\" \n      color=\"neutral\"\n      >\n      {{ message }}\n  </gov-form-message>\n  }\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovFormPasswordPower, selector: "gov-form-password-power", inputs: ["power"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
@@ -2724,7 +2724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: PASSWORD_COMPONENT_TOKEN,
                             useExisting: PasswordComponent
                         }
-                    ], template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label \r\n      [slot]=\"labelSlot\"\r\n      [size]=\"size | govSize\"\r\n    >\r\n      {{ label }}\r\n    </gov-form-label>\r\n    }\r\n  <gov-form-group>\r\n    @if (feedback) {\r\n    <gov-form-password-power [power]=\"passwordStrength - 1\" />\r\n    }\r\n    <gov-form-input\r\n      [formControl]=\"formControl\"\r\n      [attr.input-type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n      [invalid]=\"ngControl?.errors\"\r\n      (ngModelChange)=\"valueChange($event)\"\r\n    />\r\n  </gov-form-group>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n  @if (message) {\r\n  <gov-form-message \r\n      [slot]=\"messageSlot\" \r\n      color=\"neutral\"\r\n      >\r\n      {{ message }}\r\n  </gov-form-message>\r\n  }\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label \n      [slot]=\"labelSlot\"\n      [size]=\"size | govSize\"\n    >\n      {{ label }}\n    </gov-form-label>\n    }\n  <gov-form-group>\n    @if (feedback) {\n    <gov-form-password-power [power]=\"passwordStrength - 1\" />\n    }\n    <gov-form-input\n      [formControl]=\"formControl\"\n      [attr.input-type]=\"type\"\n      [placeholder]=\"placeholder\"\n      [invalid]=\"ngControl?.errors\"\n      (ngModelChange)=\"valueChange($event)\"\n    />\n  </gov-form-group>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n  @if (message) {\n  <gov-form-message \n      [slot]=\"messageSlot\" \n      color=\"neutral\"\n      >\n      {{ message }}\n  </gov-form-message>\n  }\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2767,7 +2767,7 @@ class RadioButtonComponent extends BaseFormInputComponent {
                 provide: RADIOBUTTON_COMPONENT_TOKEN,
                 useExisting: RadioButtonComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\r\n  <gov-form-radio-group [formControl]=\"formControl\">\r\n    @if (items) { @for(item of items; track item) {\r\n    <gov-form-radio\r\n      [size]=\"size | govSize\"\r\n      [value]=\"item.value\"\r\n      [required]=\"required\"\r\n      [identifier]=\"item.id\"\r\n      [name]=\"radioGroupName\"\r\n      [invalid]=\"ngControl?.errors\"\r\n      [disabled]=\"formControl.disabled\"\r\n    >\r\n      <gov-form-label\r\n        [size]=\"size | govSize\"\r\n        slot=\"label\"\r\n      >\r\n        {{ label }}\r\n      </gov-form-label>\r\n    </gov-form-radio>\r\n    } }\r\n  </gov-form-radio-group>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormRadio, selector: "gov-form-radio", inputs: ["checked", "disabled", "identifier", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormRadioGroup, selector: "gov-form-radio-group", inputs: ["gap", "orientation", "value"] }, { kind: "directive", type: i2.RadioValueAccessor, selector: "gov-form-radio" }, { kind: "directive", type: i2.GroupValueAccessor, selector: "gov-form-radio-group,gov-form-checkbox-group" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n  <gov-form-radio-group [formControl]=\"formControl\">\n    @if (items) { @for(item of items; track item) {\n    <gov-form-radio\n      [size]=\"size | govSize\"\n      [value]=\"item.value\"\n      [required]=\"required\"\n      [identifier]=\"item.id\"\n      [name]=\"radioGroupName\"\n      [invalid]=\"ngControl?.errors\"\n      [disabled]=\"formControl.disabled\"\n    >\n      <gov-form-label\n        [size]=\"size | govSize\"\n        slot=\"label\"\n      >\n        {{ label }}\n      </gov-form-label>\n    </gov-form-radio>\n    } }\n  </gov-form-radio-group>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormRadio, selector: "gov-form-radio", inputs: ["checked", "disabled", "identifier", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormRadioGroup, selector: "gov-form-radio-group", inputs: ["gap", "orientation", "value"] }, { kind: "directive", type: i2.RadioValueAccessor, selector: "gov-form-radio" }, { kind: "directive", type: i2.GroupValueAccessor, selector: "gov-form-radio-group,gov-form-checkbox-group" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
@@ -2778,7 +2778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: RADIOBUTTON_COMPONENT_TOKEN,
                             useExisting: RadioButtonComponent,
                         },
-                    ], template: "<gov-form-control>\r\n  <gov-form-radio-group [formControl]=\"formControl\">\r\n    @if (items) { @for(item of items; track item) {\r\n    <gov-form-radio\r\n      [size]=\"size | govSize\"\r\n      [value]=\"item.value\"\r\n      [required]=\"required\"\r\n      [identifier]=\"item.id\"\r\n      [name]=\"radioGroupName\"\r\n      [invalid]=\"ngControl?.errors\"\r\n      [disabled]=\"formControl.disabled\"\r\n    >\r\n      <gov-form-label\r\n        [size]=\"size | govSize\"\r\n        slot=\"label\"\r\n      >\r\n        {{ label }}\r\n      </gov-form-label>\r\n    </gov-form-radio>\r\n    } }\r\n  </gov-form-radio-group>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control>\n  <gov-form-radio-group [formControl]=\"formControl\">\n    @if (items) { @for(item of items; track item) {\n    <gov-form-radio\n      [size]=\"size | govSize\"\n      [value]=\"item.value\"\n      [required]=\"required\"\n      [identifier]=\"item.id\"\n      [name]=\"radioGroupName\"\n      [invalid]=\"ngControl?.errors\"\n      [disabled]=\"formControl.disabled\"\n    >\n      <gov-form-label\n        [size]=\"size | govSize\"\n        slot=\"label\"\n      >\n        {{ label }}\n      </gov-form-label>\n    </gov-form-radio>\n    } }\n  </gov-form-radio-group>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2803,7 +2803,7 @@ class SwitchComponent extends BaseFormInputComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SwitchComponent, isStandalone: true, selector: "v-switch", inputs: { size: "size", noLabel: "noLabel", name: "name" }, providers: [{
                 provide: SWITCH_COMPONENT_TOKEN,
                 useExisting: SwitchComponent,
-            }], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\r\n  <gov-form-switch\r\n    [formControl]=\"formControl\"\r\n    [size]=\"size | govSize\"\r\n    [required]=\"required\"\r\n    [name]=\"name\"\r\n    [invalid]=\"ngControl?.errors\"\r\n  >\r\n    @if (label && !noLabel) {\r\n    <gov-form-label [size]=\"size\" slot=\"label\">\r\n      {{ label }}\r\n    </gov-form-label>\r\n    }\r\n  </gov-form-switch>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormSwitch, selector: "gov-form-switch", inputs: ["checked", "disabled", "identifier", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n  <gov-form-switch\n    [formControl]=\"formControl\"\n    [size]=\"size | govSize\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [invalid]=\"ngControl?.errors\"\n  >\n    @if (label && !noLabel) {\n    <gov-form-label [size]=\"size\" slot=\"label\">\n      {{ label }}\n    </gov-form-label>\n    }\n  </gov-form-switch>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormSwitch, selector: "gov-form-switch", inputs: ["checked", "disabled", "identifier", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -2812,7 +2812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: SWITCH_COMPONENT_TOKEN,
                             useExisting: SwitchComponent,
-                        }], template: "<gov-form-control>\r\n  <gov-form-switch\r\n    [formControl]=\"formControl\"\r\n    [size]=\"size | govSize\"\r\n    [required]=\"required\"\r\n    [name]=\"name\"\r\n    [invalid]=\"ngControl?.errors\"\r\n  >\r\n    @if (label && !noLabel) {\r\n    <gov-form-label [size]=\"size\" slot=\"label\">\r\n      {{ label }}\r\n    </gov-form-label>\r\n    }\r\n  </gov-form-switch>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>\r\n" }]
+                        }], template: "<gov-form-control>\n  <gov-form-switch\n    [formControl]=\"formControl\"\n    [size]=\"size | govSize\"\n    [required]=\"required\"\n    [name]=\"name\"\n    [invalid]=\"ngControl?.errors\"\n  >\n    @if (label && !noLabel) {\n    <gov-form-label [size]=\"size\" slot=\"label\">\n      {{ label }}\n    </gov-form-label>\n    }\n  </gov-form-switch>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2838,7 +2838,7 @@ class SearchComponent {
         this.searchTerm.emit(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SearchComponent, isStandalone: true, selector: "v-search", inputs: { placeholder: "placeholder", size: "size" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<gov-form-control>\r\n    <gov-form-group>\r\n        <gov-form-search color=\"neutral\">\r\n            <gov-form-input \r\n                [placeholder]=\"placeholder\"\r\n                [size]=\"size | govSize\"\r\n                slot=\"input\"\r\n                (gov-input)=\"setValue($event)\"\r\n            />\r\n            <gov-button\r\n                [size]=\"size | govSize\"\r\n                color=\"primary\"\r\n                type=\"solid\"\r\n                slot=\"button\"\r\n                (gov-click)=\"search()\"\r\n            >\r\n                <gov-icon\r\n                    [name]=\"icons.search\"\r\n                />\r\n            </gov-button>\r\n        </gov-form-search>\r\n    </gov-form-group>\r\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormSearch, selector: "gov-form-search", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SearchComponent, isStandalone: true, selector: "v-search", inputs: { placeholder: "placeholder", size: "size" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<gov-form-control>\n    <gov-form-group>\n        <gov-form-search color=\"neutral\">\n            <gov-form-input \n                [placeholder]=\"placeholder\"\n                [size]=\"size | govSize\"\n                slot=\"input\"\n                (gov-input)=\"setValue($event)\"\n            />\n            <gov-button\n                [size]=\"size | govSize\"\n                color=\"primary\"\n                type=\"solid\"\n                slot=\"button\"\n                (gov-click)=\"search()\"\n            >\n                <gov-icon\n                    [name]=\"icons.search\"\n                />\n            </gov-button>\n        </gov-form-search>\n    </gov-form-group>\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormSearch, selector: "gov-form-search", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
@@ -2847,7 +2847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         GovDesignSystemModule,
                         GovSizePipe,
                         ReactiveFormsModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gov-form-control>\r\n    <gov-form-group>\r\n        <gov-form-search color=\"neutral\">\r\n            <gov-form-input \r\n                [placeholder]=\"placeholder\"\r\n                [size]=\"size | govSize\"\r\n                slot=\"input\"\r\n                (gov-input)=\"setValue($event)\"\r\n            />\r\n            <gov-button\r\n                [size]=\"size | govSize\"\r\n                color=\"primary\"\r\n                type=\"solid\"\r\n                slot=\"button\"\r\n                (gov-click)=\"search()\"\r\n            >\r\n                <gov-icon\r\n                    [name]=\"icons.search\"\r\n                />\r\n            </gov-button>\r\n        </gov-form-search>\r\n    </gov-form-group>\r\n</gov-form-control>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gov-form-control>\n    <gov-form-group>\n        <gov-form-search color=\"neutral\">\n            <gov-form-input \n                [placeholder]=\"placeholder\"\n                [size]=\"size | govSize\"\n                slot=\"input\"\n                (gov-input)=\"setValue($event)\"\n            />\n            <gov-button\n                [size]=\"size | govSize\"\n                color=\"primary\"\n                type=\"solid\"\n                slot=\"button\"\n                (gov-click)=\"search()\"\n            >\n                <gov-icon\n                    [name]=\"icons.search\"\n                />\n            </gov-button>\n        </gov-form-search>\n    </gov-form-group>\n</gov-form-control>" }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], size: [{
@@ -2875,7 +2875,7 @@ class SectionComponent {
                 provide: SECTION_COMPONENT_TOKEN,
                 useExisting: SectionComponent,
             },
-        ], ngImport: i0, template: "<gov-accordion>\r\n    <gov-accordion-item \r\n        [size]=\"size | govSize\"\r\n        [identifier]=\"identifier\"\r\n        [open]=\"open\"\r\n    >\r\n        @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icons.chevronDown\"\r\n            />\r\n        } @if (title) {\r\n            <h2 slot=\"label\">{{ title | translate }}</h2>\r\n        } @if (badge) {\r\n            <gov-badge \r\n                inverse=\"true\"\r\n                size=\"s\"\r\n                [slot]=\"badgeSlot\"\r\n            >\r\n                {{ badge }}\r\n            </gov-badge>\r\n        } @if (annotation) {\r\n            <p slot=\"annotation\">{{ annotation | translate }}</p>\r\n        }\r\n        <ng-content></ng-content>\r\n    </gov-accordion-item>\r\n</gov-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovAccordion, selector: "gov-accordion", inputs: ["noBorder", "size"] }, { kind: "component", type: i2.GovAccordionItem, selector: "gov-accordion-item", inputs: ["disabled", "identifier", "open", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<gov-accordion>\n    <gov-accordion-item \n        [size]=\"size | govSize\"\n        [identifier]=\"identifier\"\n        [open]=\"open\"\n    >\n        @if (icon) {\n            <gov-icon\n                [name]=\"icons.chevronDown\"\n            />\n        } @if (title) {\n            <h2 slot=\"label\">{{ title | translate }}</h2>\n        } @if (badge) {\n            <gov-badge \n                inverse=\"true\"\n                size=\"s\"\n                [slot]=\"badgeSlot\"\n            >\n                {{ badge }}\n            </gov-badge>\n        } @if (annotation) {\n            <p slot=\"annotation\">{{ annotation | translate }}</p>\n        }\n        <ng-content></ng-content>\n    </gov-accordion-item>\n</gov-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovAccordion, selector: "gov-accordion", inputs: ["noBorder", "size"] }, { kind: "component", type: i2.GovAccordionItem, selector: "gov-accordion-item", inputs: ["disabled", "identifier", "open", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -2891,7 +2891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         },
                     ], schemas: [
                         NO_ERRORS_SCHEMA
-                    ], template: "<gov-accordion>\r\n    <gov-accordion-item \r\n        [size]=\"size | govSize\"\r\n        [identifier]=\"identifier\"\r\n        [open]=\"open\"\r\n    >\r\n        @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icons.chevronDown\"\r\n            />\r\n        } @if (title) {\r\n            <h2 slot=\"label\">{{ title | translate }}</h2>\r\n        } @if (badge) {\r\n            <gov-badge \r\n                inverse=\"true\"\r\n                size=\"s\"\r\n                [slot]=\"badgeSlot\"\r\n            >\r\n                {{ badge }}\r\n            </gov-badge>\r\n        } @if (annotation) {\r\n            <p slot=\"annotation\">{{ annotation | translate }}</p>\r\n        }\r\n        <ng-content></ng-content>\r\n    </gov-accordion-item>\r\n</gov-accordion>" }]
+                    ], template: "<gov-accordion>\n    <gov-accordion-item \n        [size]=\"size | govSize\"\n        [identifier]=\"identifier\"\n        [open]=\"open\"\n    >\n        @if (icon) {\n            <gov-icon\n                [name]=\"icons.chevronDown\"\n            />\n        } @if (title) {\n            <h2 slot=\"label\">{{ title | translate }}</h2>\n        } @if (badge) {\n            <gov-badge \n                inverse=\"true\"\n                size=\"s\"\n                [slot]=\"badgeSlot\"\n            >\n                {{ badge }}\n            </gov-badge>\n        } @if (annotation) {\n            <p slot=\"annotation\">{{ annotation | translate }}</p>\n        }\n        <ng-content></ng-content>\n    </gov-accordion-item>\n</gov-accordion>" }]
         }], propDecorators: { title: [{
                 type: Input
             }], badge: [{
@@ -2931,7 +2931,7 @@ class SideMenuComponent {
                 provide: SIDE_MENU_COMPONENT_TOKEN,
                 useExisting: SideMenuComponent,
             },
-        ], ngImport: i0, template: "<div class=\"gov-sidemenu-inner\">\r\n    <div class=\"gov-category-list__col gov-category-list__categories\">\r\n        <div class=\"gov-category-list__col-inner\">\r\n            <ul class=\"gov-list--plain gov-category-list__nav\">\r\n            @for (item of items; track item) {\r\n                @for (child of item.children; track child) {\r\n                    <li class=\"gov-category-list__nav-item\">\r\n                        <a \r\n                            class=\"gov-category-list__nav-link\"\r\n                            [routerLink]=\"child.url\"\r\n                            routerLinkActive=\"gov-category-list__nav-active\"\r\n                            title=\"{{child.label}}\"\r\n                        >\r\n                            <span class=\"gov-link gov-link--standalone\">{{child.label}}</span>\r\n                            @if (child.children) {\r\n                            <gov-icon [name]=\"icons.chevronDown\" />\r\n                            }\r\n                        </a>\r\n                    </li>\r\n                }\r\n            }\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".gov-category-list__nav-link gov-icon{display:block;position:absolute;right:.625rem;top:1rem;font-size:1.5rem}.gov-category-list__nav-link gov-icon-:hover{color:--color-neutral-0}.gov-link{text-decoration:none}.gov-category-list__nav-active{background-color:var(--color-primary-600)}.gov-category-list__nav-active span{color:var(--color-neutral-0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }] });
+        ], ngImport: i0, template: "<div class=\"gov-sidemenu-inner\">\n    <div class=\"gov-category-list__col gov-category-list__categories\">\n        <div class=\"gov-category-list__col-inner\">\n            <ul class=\"gov-list--plain gov-category-list__nav\">\n            @for (item of items; track item) {\n                @for (child of item.children; track child) {\n                    <li class=\"gov-category-list__nav-item\">\n                        <a \n                            class=\"gov-category-list__nav-link\"\n                            [routerLink]=\"child.url\"\n                            routerLinkActive=\"gov-category-list__nav-active\"\n                            title=\"{{child.label}}\"\n                        >\n                            <span class=\"gov-link gov-link--standalone\">{{child.label}}</span>\n                            @if (child.children) {\n                            <gov-icon [name]=\"icons.chevronDown\" />\n                            }\n                        </a>\n                    </li>\n                }\n            }\n            </ul>\n        </div>\n    </div>\n</div>", styles: [".gov-category-list__nav-link gov-icon{display:block;position:absolute;right:.625rem;top:1rem;font-size:1.5rem}.gov-category-list__nav-link gov-icon-:hover{color:--color-neutral-0}.gov-link{text-decoration:none}.gov-category-list__nav-active{background-color:var(--color-primary-600)}.gov-category-list__nav-active span{color:var(--color-neutral-0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
@@ -2940,7 +2940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: SIDE_MENU_COMPONENT_TOKEN,
                             useExisting: SideMenuComponent,
                         },
-                    ], template: "<div class=\"gov-sidemenu-inner\">\r\n    <div class=\"gov-category-list__col gov-category-list__categories\">\r\n        <div class=\"gov-category-list__col-inner\">\r\n            <ul class=\"gov-list--plain gov-category-list__nav\">\r\n            @for (item of items; track item) {\r\n                @for (child of item.children; track child) {\r\n                    <li class=\"gov-category-list__nav-item\">\r\n                        <a \r\n                            class=\"gov-category-list__nav-link\"\r\n                            [routerLink]=\"child.url\"\r\n                            routerLinkActive=\"gov-category-list__nav-active\"\r\n                            title=\"{{child.label}}\"\r\n                        >\r\n                            <span class=\"gov-link gov-link--standalone\">{{child.label}}</span>\r\n                            @if (child.children) {\r\n                            <gov-icon [name]=\"icons.chevronDown\" />\r\n                            }\r\n                        </a>\r\n                    </li>\r\n                }\r\n            }\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".gov-category-list__nav-link gov-icon{display:block;position:absolute;right:.625rem;top:1rem;font-size:1.5rem}.gov-category-list__nav-link gov-icon-:hover{color:--color-neutral-0}.gov-link{text-decoration:none}.gov-category-list__nav-active{background-color:var(--color-primary-600)}.gov-category-list__nav-active span{color:var(--color-neutral-0)}\n"] }]
+                    ], template: "<div class=\"gov-sidemenu-inner\">\n    <div class=\"gov-category-list__col gov-category-list__categories\">\n        <div class=\"gov-category-list__col-inner\">\n            <ul class=\"gov-list--plain gov-category-list__nav\">\n            @for (item of items; track item) {\n                @for (child of item.children; track child) {\n                    <li class=\"gov-category-list__nav-item\">\n                        <a \n                            class=\"gov-category-list__nav-link\"\n                            [routerLink]=\"child.url\"\n                            routerLinkActive=\"gov-category-list__nav-active\"\n                            title=\"{{child.label}}\"\n                        >\n                            <span class=\"gov-link gov-link--standalone\">{{child.label}}</span>\n                            @if (child.children) {\n                            <gov-icon [name]=\"icons.chevronDown\" />\n                            }\n                        </a>\n                    </li>\n                }\n            }\n            </ul>\n        </div>\n    </div>\n</div>", styles: [".gov-category-list__nav-link gov-icon{display:block;position:absolute;right:.625rem;top:1rem;font-size:1.5rem}.gov-category-list__nav-link gov-icon-:hover{color:--color-neutral-0}.gov-link{text-decoration:none}.gov-category-list__nav-active{background-color:var(--color-primary-600)}.gov-category-list__nav-active span{color:var(--color-neutral-0)}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], logoUrl: [{
@@ -2993,14 +2993,7 @@ class SideMenuModule extends UnsubscribeComponent {
             {
                 provide: SIDE_MENU_COMPONENT_TOKEN,
                 useExisting: SideMenuComponent,
-            },
-            {
-                provide: SIDE_MENU_STATE_TOKEN,
-                useValue: localStorage.getItem('SideMenuStateToken') ?? {
-                    expanded: [],
-                    minimalized: false,
-                },
-            },
+            }
         ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideMenuModule, decorators: [{
@@ -3011,14 +3004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         {
                             provide: SIDE_MENU_COMPONENT_TOKEN,
                             useExisting: SideMenuComponent,
-                        },
-                        {
-                            provide: SIDE_MENU_STATE_TOKEN,
-                            useValue: localStorage.getItem('SideMenuStateToken') ?? {
-                                expanded: [],
-                                minimalized: false,
-                            },
-                        },
+                        }
                     ],
                 }]
         }], ctorParameters: () => [{ type: i1$4.SideMenuProviderService }] });
@@ -3043,7 +3029,7 @@ class SnackbarComponent {
                 provide: SNACKBAR_COMPONENT_TOKEN,
                 useExisting: SnackbarComponent,
             },
-        ], ngImport: i0, template: "<gov-toast\r\n    [closeLabel]=\"config.closeLabel ?? closeLabel\"\r\n    [color]=\"config.color || color\"\r\n    [gravity]=\"config.gravity || gravity\"\r\n    [position]=\"config.position || position\"\r\n    [time]=\"config.time ?? time\"\r\n    [type]=\"config.type || type\"\r\n>\r\n    @if (config.icon || icon) {\r\n    <gov-icon\r\n        [name]=\"config.icon || icon\"\r\n    />\r\n    } {{ config.message || message }}\r\n</gov-toast>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: i2.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }] });
+        ], ngImport: i0, template: "<gov-toast\n    [closeLabel]=\"config.closeLabel ?? closeLabel\"\n    [color]=\"config.color || color\"\n    [gravity]=\"config.gravity || gravity\"\n    [position]=\"config.position || position\"\n    [time]=\"config.time ?? time\"\n    [type]=\"config.type || type\"\n>\n    @if (config.icon || icon) {\n    <gov-icon\n        [name]=\"config.icon || icon\"\n    />\n    } {{ config.message || message }}\n</gov-toast>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: i2.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
@@ -3052,7 +3038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: SNACKBAR_COMPONENT_TOKEN,
                             useExisting: SnackbarComponent,
                         },
-                    ], template: "<gov-toast\r\n    [closeLabel]=\"config.closeLabel ?? closeLabel\"\r\n    [color]=\"config.color || color\"\r\n    [gravity]=\"config.gravity || gravity\"\r\n    [position]=\"config.position || position\"\r\n    [time]=\"config.time ?? time\"\r\n    [type]=\"config.type || type\"\r\n>\r\n    @if (config.icon || icon) {\r\n    <gov-icon\r\n        [name]=\"config.icon || icon\"\r\n    />\r\n    } {{ config.message || message }}\r\n</gov-toast>\r\n" }]
+                    ], template: "<gov-toast\n    [closeLabel]=\"config.closeLabel ?? closeLabel\"\n    [color]=\"config.color || color\"\n    [gravity]=\"config.gravity || gravity\"\n    [position]=\"config.position || position\"\n    [time]=\"config.time ?? time\"\n    [type]=\"config.type || type\"\n>\n    @if (config.icon || icon) {\n    <gov-icon\n        [name]=\"config.icon || icon\"\n    />\n    } {{ config.message || message }}\n</gov-toast>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3171,7 +3157,7 @@ class TextareaComponent extends BaseFormInputComponent {
                 provide: TEXTAREA_COMPONENT_TOKEN,
                 useExisting: TextareaComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label \r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        {{ label | translate }}\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input [type]=\"type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\" \r\n            [maxlength]=\"maxlength\" \r\n            [size]='size | govSize'  \r\n            [name]='name' \r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n            [multiline]=\"true\"\r\n            [rows]=\"rows\"\r\n            [cols]=\"cols\"\r\n        >\r\n            @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icon\"\r\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n            />\r\n            } @if (prefix) {\r\n            <p slot=\"prefix\">\r\n                {{ prefix }}\r\n            </p>\r\n            } @if (sufix) {\r\n            <p slot=\"sufix\">\r\n                {{ sufix }}\r\n            </p>\r\n            }\r\n        </gov-form-input>\r\n    </gov-form-group>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n    @if (message) {\r\n    <gov-form-message \r\n        [slot]=\"messageSlot\" \r\n        color=\"neutral\"\r\n        >\r\n        {{ message | translate }}\r\n    </gov-form-message>\r\n    }\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label \n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        {{ label | translate }}\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input [type]=\"type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\" \n            [maxlength]=\"maxlength\" \n            [size]='size | govSize'  \n            [name]='name' \n            [role]='role'\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n            [multiline]=\"true\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n        >\n            @if (icon) {\n            <gov-icon\n                [name]=\"icon\"\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n            />\n            } @if (prefix) {\n            <p slot=\"prefix\">\n                {{ prefix }}\n            </p>\n            } @if (sufix) {\n            <p slot=\"sufix\">\n                {{ sufix }}\n            </p>\n            }\n        </gov-form-input>\n    </gov-form-group>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n    @if (message) {\n    <gov-form-message \n        [slot]=\"messageSlot\" \n        color=\"neutral\"\n        >\n        {{ message | translate }}\n    </gov-form-message>\n    }\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -3187,7 +3173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: TEXTAREA_COMPONENT_TOKEN,
                             useExisting: TextareaComponent,
                         },
-                    ], template: "<gov-form-control class=\"mb-3\">\r\n    @if (label) {\r\n    <gov-form-label \r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        {{ label | translate }}\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input [type]=\"type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\" \r\n            [maxlength]=\"maxlength\" \r\n            [size]='size | govSize'  \r\n            [name]='name' \r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n            [multiline]=\"true\"\r\n            [rows]=\"rows\"\r\n            [cols]=\"cols\"\r\n        >\r\n            @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icon\"\r\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n            />\r\n            } @if (prefix) {\r\n            <p slot=\"prefix\">\r\n                {{ prefix }}\r\n            </p>\r\n            } @if (sufix) {\r\n            <p slot=\"sufix\">\r\n                {{ sufix }}\r\n            </p>\r\n            }\r\n        </gov-form-input>\r\n    </gov-form-group>\r\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n    @if (message) {\r\n    <gov-form-message \r\n        [slot]=\"messageSlot\" \r\n        color=\"neutral\"\r\n        >\r\n        {{ message | translate }}\r\n    </gov-form-message>\r\n    }\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control class=\"mb-3\">\n    @if (label) {\n    <gov-form-label \n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        {{ label | translate }}\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input [type]=\"type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\" \n            [maxlength]=\"maxlength\" \n            [size]='size | govSize'  \n            [name]='name' \n            [role]='role'\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n            [multiline]=\"true\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n        >\n            @if (icon) {\n            <gov-icon\n                [name]=\"icon\"\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n            />\n            } @if (prefix) {\n            <p slot=\"prefix\">\n                {{ prefix }}\n            </p>\n            } @if (sufix) {\n            <p slot=\"sufix\">\n                {{ sufix }}\n            </p>\n            }\n        </gov-form-input>\n    </gov-form-group>\n    <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n    @if (message) {\n    <gov-form-message \n        [slot]=\"messageSlot\" \n        color=\"neutral\"\n        >\n        {{ message | translate }}\n    </gov-form-message>\n    }\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3253,7 +3239,7 @@ class FormFieldComponent extends BaseFormInputComponent {
                 provide: FORM_FIELD_COMPONENT_TOKEN,
                 useExisting: FormFieldComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\r\n  @if (label) {\r\n  <gov-form-label \r\n    [slot]=\"labelSlot\"\r\n    [size]=\"size | govSize\"\r\n  >\r\n    {{ label }}\r\n  </gov-form-label>\r\n  }\r\n  <gov-form-group>\r\n    <ng-content />\r\n  </gov-form-group>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n  @if (label) {\n  <gov-form-label \n    [slot]=\"labelSlot\"\n    [size]=\"size | govSize\"\n  >\n    {{ label }}\n  </gov-form-label>\n  }\n  <gov-form-group>\n    <ng-content />\n  </gov-form-group>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -3268,7 +3254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: FORM_FIELD_COMPONENT_TOKEN,
                             useExisting: FormFieldComponent,
                         },
-                    ], template: "<gov-form-control>\r\n  @if (label) {\r\n  <gov-form-label \r\n    [slot]=\"labelSlot\"\r\n    [size]=\"size | govSize\"\r\n  >\r\n    {{ label }}\r\n  </gov-form-label>\r\n  }\r\n  <gov-form-group>\r\n    <ng-content />\r\n  </gov-form-group>\r\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n</gov-form-control>" }]
+                    ], template: "<gov-form-control>\n  @if (label) {\n  <gov-form-label \n    [slot]=\"labelSlot\"\n    [size]=\"size | govSize\"\n  >\n    {{ label }}\n  </gov-form-label>\n  }\n  <gov-form-group>\n    <ng-content />\n  </gov-form-group>\n  <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3333,7 +3319,7 @@ class InputGroupComponent extends BaseFormInputComponent {
                 provide: INPUT_GROUP_COMPONENT_TOKEN,
                 useExisting: InputGroupComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\r\n    @if (label) {\r\n    <gov-form-label \r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        {{ label }}\r\n    </gov-form-label>\r\n    }\r\n        @if(prefix) {\r\n            <gov-icon\r\n                [name]=\"name\"\r\n            />\r\n        }\r\n        <gov-form-input \r\n            input-type=\"input-type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\" \r\n            [maxlength]=\"maxlength\" \r\n            [size]='size | govSize'  \r\n            [name]='name' \r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n        />\r\n        @if(sufix) {\r\n            <gov-icon\r\n                [name]=\"name\"\r\n            />\r\n        }\r\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n        @if (message) {\r\n        <gov-form-message \r\n            [slot]=\"messageSlot\" \r\n            color=\"neutral\"\r\n            >\r\n            {{ message }}\r\n        </gov-form-message>\r\n        }\r\n</gov-form-control>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n    @if (label) {\n    <gov-form-label \n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        {{ label }}\n    </gov-form-label>\n    }\n        @if(prefix) {\n            <gov-icon\n                [name]=\"name\"\n            />\n        }\n        <gov-form-input \n            input-type=\"input-type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\" \n            [maxlength]=\"maxlength\" \n            [size]='size | govSize'  \n            [name]='name' \n            [role]='role'\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n        />\n        @if(sufix) {\n            <gov-icon\n                [name]=\"name\"\n            />\n        }\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n        @if (message) {\n        <gov-form-message \n            [slot]=\"messageSlot\" \n            color=\"neutral\"\n            >\n            {{ message }}\n        </gov-form-message>\n        }\n</gov-form-control>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputGroupComponent, decorators: [{
             type: Component,
@@ -3348,7 +3334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: INPUT_GROUP_COMPONENT_TOKEN,
                             useExisting: InputGroupComponent,
                         },
-                    ], template: "<gov-form-control>\r\n    @if (label) {\r\n    <gov-form-label \r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        {{ label }}\r\n    </gov-form-label>\r\n    }\r\n        @if(prefix) {\r\n            <gov-icon\r\n                [name]=\"name\"\r\n            />\r\n        }\r\n        <gov-form-input \r\n            input-type=\"input-type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\" \r\n            [maxlength]=\"maxlength\" \r\n            [size]='size | govSize'  \r\n            [name]='name' \r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n        />\r\n        @if(sufix) {\r\n            <gov-icon\r\n                [name]=\"name\"\r\n            />\r\n        }\r\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n        @if (message) {\r\n        <gov-form-message \r\n            [slot]=\"messageSlot\" \r\n            color=\"neutral\"\r\n            >\r\n            {{ message }}\r\n        </gov-form-message>\r\n        }\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control>\n    @if (label) {\n    <gov-form-label \n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        {{ label }}\n    </gov-form-label>\n    }\n        @if(prefix) {\n            <gov-icon\n                [name]=\"name\"\n            />\n        }\n        <gov-form-input \n            input-type=\"input-type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\" \n            [maxlength]=\"maxlength\" \n            [size]='size | govSize'  \n            [name]='name' \n            [role]='role'\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n        />\n        @if(sufix) {\n            <gov-icon\n                [name]=\"name\"\n            />\n        }\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n        @if (message) {\n        <gov-form-message \n            [slot]=\"messageSlot\" \n            color=\"neutral\"\n            >\n            {{ message }}\n        </gov-form-message>\n        }\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3416,7 +3402,7 @@ class NumberInputComponent extends BaseFormInputComponent {
                 provide: NUMBER_INPUT_COMPONENT_TOKEN,
                 useExisting: NumberInputComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\r\n    @if (label) {\r\n    <gov-form-label \r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        {{ label }}\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input \r\n            [attr.input-type]=\"type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\" \r\n            [maxlength]=\"maxlength\" \r\n            [size]='size | govSize'  \r\n            [name]='name' \r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n        >\r\n            @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icon\"\r\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n            />\r\n            } @if (prefix) {\r\n            <p slot=\"prefix\">\r\n                {{ prefix }}\r\n            </p>\r\n            } @if (sufix) {\r\n            <p slot=\"sufix\">\r\n                {{ sufix }}\r\n            </p>\r\n            }\r\n        </gov-form-input>\r\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n        @if (message) {\r\n        <gov-form-message \r\n            [slot]=\"messageSlot\" \r\n            color=\"neutral\"\r\n            >\r\n            {{ message }}\r\n        </gov-form-message>\r\n        }\r\n    </gov-form-group>\r\n</gov-form-control>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n    @if (label) {\n    <gov-form-label \n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        {{ label }}\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input \n            [attr.input-type]=\"type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\" \n            [maxlength]=\"maxlength\" \n            [size]='size | govSize'  \n            [name]='name' \n            [role]='role'\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n        >\n            @if (icon) {\n            <gov-icon\n                [name]=\"icon\"\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n            />\n            } @if (prefix) {\n            <p slot=\"prefix\">\n                {{ prefix }}\n            </p>\n            } @if (sufix) {\n            <p slot=\"sufix\">\n                {{ sufix }}\n            </p>\n            }\n        </gov-form-input>\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n        @if (message) {\n        <gov-form-message \n            [slot]=\"messageSlot\" \n            color=\"neutral\"\n            >\n            {{ message }}\n        </gov-form-message>\n        }\n    </gov-form-group>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
@@ -3431,7 +3417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             provide: NUMBER_INPUT_COMPONENT_TOKEN,
                             useExisting: NumberInputComponent,
                         },
-                    ], template: "<gov-form-control>\r\n    @if (label) {\r\n    <gov-form-label \r\n        [slot]=\"labelSlot\"\r\n        [size]=\"size | govSize\"\r\n    >\r\n        {{ label }}\r\n    </gov-form-label>\r\n    }\r\n    <gov-form-group>\r\n        <gov-form-input \r\n            [attr.input-type]=\"type\"\r\n            [formControl]=\"formControl\"\r\n            [minlength]=\"minlength\" \r\n            [maxlength]=\"maxlength\" \r\n            [size]='size | govSize'  \r\n            [name]='name' \r\n            [role]='role'\r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"ngControl?.errors ? true : false\"\r\n        >\r\n            @if (icon) {\r\n            <gov-icon\r\n                [name]=\"icon\"\r\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\r\n            />\r\n            } @if (prefix) {\r\n            <p slot=\"prefix\">\r\n                {{ prefix }}\r\n            </p>\r\n            } @if (sufix) {\r\n            <p slot=\"sufix\">\r\n                {{ sufix }}\r\n            </p>\r\n            }\r\n        </gov-form-input>\r\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\r\n        @if (message) {\r\n        <gov-form-message \r\n            [slot]=\"messageSlot\" \r\n            color=\"neutral\"\r\n            >\r\n            {{ message }}\r\n        </gov-form-message>\r\n        }\r\n    </gov-form-group>\r\n</gov-form-control>\r\n" }]
+                    ], template: "<gov-form-control>\n    @if (label) {\n    <gov-form-label \n        [slot]=\"labelSlot\"\n        [size]=\"size | govSize\"\n    >\n        {{ label }}\n    </gov-form-label>\n    }\n    <gov-form-group>\n        <gov-form-input \n            [attr.input-type]=\"type\"\n            [formControl]=\"formControl\"\n            [minlength]=\"minlength\" \n            [maxlength]=\"maxlength\" \n            [size]='size | govSize'  \n            [name]='name' \n            [role]='role'\n            [required]=\"required\"\n            [readonly]=\"readonly\"\n            [invalid]=\"ngControl?.errors ? true : false\"\n        >\n            @if (icon) {\n            <gov-icon\n                [name]=\"icon\"\n                [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n            />\n            } @if (prefix) {\n            <p slot=\"prefix\">\n                {{ prefix }}\n            </p>\n            } @if (sufix) {\n            <p slot=\"sufix\">\n                {{ sufix }}\n            </p>\n            }\n        </gov-form-input>\n        <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n        @if (message) {\n        <gov-form-message \n            [slot]=\"messageSlot\" \n            color=\"neutral\"\n            >\n            {{ message }}\n        </gov-form-message>\n        }\n    </gov-form-group>\n</gov-form-control>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3483,7 +3469,7 @@ class PageHeaderComponent {
     subtitle;
     showBackButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PageHeaderComponent, isStandalone: true, selector: "v-page-header", inputs: { title: "title", subtitle: "subtitle", showBackButton: "showBackButton" }, ngImport: i0, template: "<div class=\"d-flex gap-3 align-items-center\">\r\n  <h2>{{ title | translate }}</h2>\r\n</div>", styles: ["h2{font-size:1.5rem;color:var(--color-neutral-700);margin:0}.d-flex{display:flex;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PageHeaderComponent, isStandalone: true, selector: "v-page-header", inputs: { title: "title", subtitle: "subtitle", showBackButton: "showBackButton" }, ngImport: i0, template: "<div class=\"d-flex gap-3 align-items-center\">\n  <h2>{{ title | translate }}</h2>\n</div>", styles: ["h2{font-size:1.5rem;color:var(--color-neutral-700);margin:0}.d-flex{display:flex;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
@@ -3491,7 +3477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         CommonModule,
                         GovDesignSystemModule,
                         TranslateModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex gap-3 align-items-center\">\r\n  <h2>{{ title | translate }}</h2>\r\n</div>", styles: ["h2{font-size:1.5rem;color:var(--color-neutral-700);margin:0}.d-flex{display:flex;align-items:center;gap:1rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex gap-3 align-items-center\">\n  <h2>{{ title | translate }}</h2>\n</div>", styles: ["h2{font-size:1.5rem;color:var(--color-neutral-700);margin:0}.d-flex{display:flex;align-items:center;gap:1rem}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -3527,7 +3513,7 @@ class StepperComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: StepperComponent, isStandalone: true, selector: "v-stepper", inputs: { items: "items", size: "size", icon: "icon", prefix: "prefix", annotation: "annotation", label: "label", layout: "layout" }, outputs: { activeIndexChange: "activeIndexChange" }, providers: [
             { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
-        ], ngImport: i0, template: "<gov-stepper \r\n  [ngClass]=\"layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'\"\r\n  [size]=\"size | govSize\"\r\n>\r\n  @for (item of items; track item; let index = $index) {\r\n  <gov-stepper-item\r\n    [ngClass]=\"{ 'active-step': index === currentStep }\"\r\n  >\r\n    <span \r\n      slot=\"prefix\"\r\n      [ngStyle]=\"{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }\"\r\n    >\r\n      {{ item.prefix }}\r\n    </span>\r\n    <p slot=\"headline\">{{ item.header }}</p>\r\n    <p slot=\"annotation\">{{ item.annotation }}</p>\r\n  </gov-stepper-item>\r\n  }\r\n</gov-stepper>\r\n<div class=\"d-flex pt-4 justify-content-between\">\r\n  @if (currentStep > 0) {\r\n  <v-button\r\n    [label]=\"'Back'\"\r\n    [size]=\"size\"\r\n    (click)=\"previousStep()\"\r\n  />\r\n  }\r\n  @if (currentStep < steps - 1) {\r\n  <v-button\r\n    [label]=\"'Next'\"\r\n    [size]=\"size\"\r\n    (click)=\"nextStep()\"\r\n  />\r\n  }\r\n</div>", styles: ["gov-stepper-item,.gov-stepper-item{width:auto!important}.active-step{background-color:var(--color-primary-300);border:1px solid var(--color-primary-600);border-radius:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovStepper, selector: "gov-stepper", inputs: ["size"] }, { kind: "component", type: i2.GovStepperItem, selector: "gov-stepper-item", inputs: ["color", "identifier", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<gov-stepper \n  [ngClass]=\"layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'\"\n  [size]=\"size | govSize\"\n>\n  @for (item of items; track item; let index = $index) {\n  <gov-stepper-item\n    [ngClass]=\"{ 'active-step': index === currentStep }\"\n  >\n    <span \n      slot=\"prefix\"\n      [ngStyle]=\"{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }\"\n    >\n      {{ item.prefix }}\n    </span>\n    <p slot=\"headline\">{{ item.header }}</p>\n    <p slot=\"annotation\">{{ item.annotation }}</p>\n  </gov-stepper-item>\n  }\n</gov-stepper>\n<div class=\"d-flex pt-4 justify-content-between\">\n  @if (currentStep > 0) {\n  <v-button\n    [label]=\"'Back'\"\n    [size]=\"size\"\n    (click)=\"previousStep()\"\n  />\n  }\n  @if (currentStep < steps - 1) {\n  <v-button\n    [label]=\"'Next'\"\n    [size]=\"size\"\n    (click)=\"nextStep()\"\n  />\n  }\n</div>", styles: ["gov-stepper-item,.gov-stepper-item{width:auto!important}.active-step{background-color:var(--color-primary-300);border:1px solid var(--color-primary-600);border-radius:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovStepper, selector: "gov-stepper", inputs: ["size"] }, { kind: "component", type: i2.GovStepperItem, selector: "gov-stepper-item", inputs: ["color", "identifier", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -3538,7 +3524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         GovSizePipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
-                    ], template: "<gov-stepper \r\n  [ngClass]=\"layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'\"\r\n  [size]=\"size | govSize\"\r\n>\r\n  @for (item of items; track item; let index = $index) {\r\n  <gov-stepper-item\r\n    [ngClass]=\"{ 'active-step': index === currentStep }\"\r\n  >\r\n    <span \r\n      slot=\"prefix\"\r\n      [ngStyle]=\"{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }\"\r\n    >\r\n      {{ item.prefix }}\r\n    </span>\r\n    <p slot=\"headline\">{{ item.header }}</p>\r\n    <p slot=\"annotation\">{{ item.annotation }}</p>\r\n  </gov-stepper-item>\r\n  }\r\n</gov-stepper>\r\n<div class=\"d-flex pt-4 justify-content-between\">\r\n  @if (currentStep > 0) {\r\n  <v-button\r\n    [label]=\"'Back'\"\r\n    [size]=\"size\"\r\n    (click)=\"previousStep()\"\r\n  />\r\n  }\r\n  @if (currentStep < steps - 1) {\r\n  <v-button\r\n    [label]=\"'Next'\"\r\n    [size]=\"size\"\r\n    (click)=\"nextStep()\"\r\n  />\r\n  }\r\n</div>", styles: ["gov-stepper-item,.gov-stepper-item{width:auto!important}.active-step{background-color:var(--color-primary-300);border:1px solid var(--color-primary-600);border-radius:.5rem}\n"] }]
+                    ], template: "<gov-stepper \n  [ngClass]=\"layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'\"\n  [size]=\"size | govSize\"\n>\n  @for (item of items; track item; let index = $index) {\n  <gov-stepper-item\n    [ngClass]=\"{ 'active-step': index === currentStep }\"\n  >\n    <span \n      slot=\"prefix\"\n      [ngStyle]=\"{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }\"\n    >\n      {{ item.prefix }}\n    </span>\n    <p slot=\"headline\">{{ item.header }}</p>\n    <p slot=\"annotation\">{{ item.annotation }}</p>\n  </gov-stepper-item>\n  }\n</gov-stepper>\n<div class=\"d-flex pt-4 justify-content-between\">\n  @if (currentStep > 0) {\n  <v-button\n    [label]=\"'Back'\"\n    [size]=\"size\"\n    (click)=\"previousStep()\"\n  />\n  }\n  @if (currentStep < steps - 1) {\n  <v-button\n    [label]=\"'Next'\"\n    [size]=\"size\"\n    (click)=\"nextStep()\"\n  />\n  }\n</div>", styles: ["gov-stepper-item,.gov-stepper-item{width:auto!important}.active-step{background-color:var(--color-primary-300);border:1px solid var(--color-primary-600);border-radius:.5rem}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], size: [{
@@ -3566,8 +3552,8 @@ class TabViewItemComponent {
     url;
     contentTemplate;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabViewItemComponent, selector: "v-tab-view-item", inputs: { id: "id", index: "index", disabled: "disabled", title: "title", content: "content", url: "url" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #contentTemplate>
-    <ng-content></ng-content>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabViewItemComponent, selector: "v-tab-view-item", inputs: { id: "id", index: "index", disabled: "disabled", title: "title", content: "content", url: "url" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #contentTemplate>
+    <ng-content></ng-content>
   </ng-template>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabViewItemComponent, decorators: [{
@@ -3575,8 +3561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{
                     standalone: false,
                     selector: 'v-tab-view-item',
-                    template: `<ng-template #contentTemplate>
-    <ng-content></ng-content>
+                    template: `<ng-template #contentTemplate>
+    <ng-content></ng-content>
   </ng-template>`
                 }]
         }], propDecorators: { id: [{
@@ -3626,11 +3612,11 @@ class TabViewComponent {
         this.cd.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TabViewComponent, selector: "v-tab-view", inputs: { highlight: "highlight", useRouting: "useRouting", items: "items", activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabViewItemComponent }], ngImport: i0, template: "<div class=\"gov-tabs\">\r\n  <div class=\"gov-tabs__tabs\" role=\"tablist\">\r\n    @for (item of items; track item; let index = $index) {\r\n    @if (useRouting) {\r\n      <button\r\n        [attr.index]=\"index\"\r\n        class=\"gov-tabs__btn\"\r\n        [routerLink]=\"item.url\"\r\n        [routerLinkActive]=\"'active'\"\r\n        #rls=\"routerLinkActive\"\r\n        [attr.aria-selected]=\"rls.isActive\"\r\n        [disabled]=\"item.disabled\"\r\n        role=\"tab\"\r\n        [attr.activeIndex]=\"activeIndex\"\r\n        (click)=\"changeTabIndex(index)\"\r\n      >\r\n        {{ item.title | translate }}\r\n      </button>\r\n    } @else {\r\n      <button\r\n        [attr.index]=\"index\"\r\n        class=\"gov-tabs__btn\"\r\n        [attr.aria-selected]=\"activeIndex === index\"\r\n        [disabled]=\"item.disabled\"\r\n        role=\"tab\"\r\n        [attr.activeIndex]=\"activeIndex\"\r\n        (click)=\"changeTabIndex(index)\"\r\n      >\r\n        {{ item.title | translate }}\r\n      </button>}\r\n    }\r\n  </div>\r\n  <div class=\"gov-tabs__tabs\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"gov-tabs__tab\" [class.active]=\"activeIndex === index\" >\r\n        <div class=\"gov-tabs__list\">\r\n          <div class=\"gov-tabs__content\">\r\n            @if (item.contentTemplate) {\r\n              <ng-container *ngTemplateOutlet=\"item.contentTemplate\"></ng-container>\r\n            } @else if (item.content) {\r\n              {{ item.content }}\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n    @if (useRouting) {\r\n      <router-outlet class=\"gov-tabs__content\"></router-outlet>\r\n    }\r\n  </div>\r\n</div>", styles: [".gov-tabs__tabs{position:relative;width:100%;margin-bottom:0%;overflow-x:clip}.gov-tabs__tab{display:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.gov-tabs__tab.active{display:block;opacity:1;transform:translateY(0)}.gov-tabs__btn{font-size:medium;padding:10px 20px;border:none;border-bottom:2px solid transparent;font-weight:700}.gov-tabs__btn[aria-selected=true]:after{display:block;width:100%;height:2px;background-color:var(--border-primary);position:absolute;bottom:-2px;left:0}.gov-tabs__content{margin-top:var(--spacing-m-nudge);flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TabViewComponent, selector: "v-tab-view", inputs: { highlight: "highlight", useRouting: "useRouting", items: "items", activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabViewItemComponent }], ngImport: i0, template: "<div class=\"gov-tabs\">\n  <div class=\"gov-tabs__tabs\" role=\"tablist\">\n    @for (item of items; track item; let index = $index) {\n    @if (useRouting) {\n      <button\n        [attr.index]=\"index\"\n        class=\"gov-tabs__btn\"\n        [routerLink]=\"item.url\"\n        [routerLinkActive]=\"'active'\"\n        #rls=\"routerLinkActive\"\n        [attr.aria-selected]=\"rls.isActive\"\n        [disabled]=\"item.disabled\"\n        role=\"tab\"\n        [attr.activeIndex]=\"activeIndex\"\n        (click)=\"changeTabIndex(index)\"\n      >\n        {{ item.title | translate }}\n      </button>\n    } @else {\n      <button\n        [attr.index]=\"index\"\n        class=\"gov-tabs__btn\"\n        [attr.aria-selected]=\"activeIndex === index\"\n        [disabled]=\"item.disabled\"\n        role=\"tab\"\n        [attr.activeIndex]=\"activeIndex\"\n        (click)=\"changeTabIndex(index)\"\n      >\n        {{ item.title | translate }}\n      </button>}\n    }\n  </div>\n  <div class=\"gov-tabs__tabs\">\n    @for (item of items; track item; let index = $index) {\n      <div class=\"gov-tabs__tab\" [class.active]=\"activeIndex === index\" >\n        <div class=\"gov-tabs__list\">\n          <div class=\"gov-tabs__content\">\n            @if (item.contentTemplate) {\n              <ng-container *ngTemplateOutlet=\"item.contentTemplate\"></ng-container>\n            } @else if (item.content) {\n              {{ item.content }}\n            }\n          </div>\n        </div>\n      </div>\n    }\n    @if (useRouting) {\n      <router-outlet class=\"gov-tabs__content\"></router-outlet>\n    }\n  </div>\n</div>", styles: [".gov-tabs__tabs{position:relative;width:100%;margin-bottom:0%;overflow-x:clip}.gov-tabs__tab{display:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.gov-tabs__tab.active{display:block;opacity:1;transform:translateY(0)}.gov-tabs__btn{font-size:medium;padding:10px 20px;border:none;border-bottom:2px solid transparent;font-weight:700}.gov-tabs__btn[aria-selected=true]:after{display:block;width:100%;height:2px;background-color:var(--border-primary);position:absolute;bottom:-2px;left:0}.gov-tabs__content{margin-top:var(--spacing-m-nudge);flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-tab-view', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"gov-tabs\">\r\n  <div class=\"gov-tabs__tabs\" role=\"tablist\">\r\n    @for (item of items; track item; let index = $index) {\r\n    @if (useRouting) {\r\n      <button\r\n        [attr.index]=\"index\"\r\n        class=\"gov-tabs__btn\"\r\n        [routerLink]=\"item.url\"\r\n        [routerLinkActive]=\"'active'\"\r\n        #rls=\"routerLinkActive\"\r\n        [attr.aria-selected]=\"rls.isActive\"\r\n        [disabled]=\"item.disabled\"\r\n        role=\"tab\"\r\n        [attr.activeIndex]=\"activeIndex\"\r\n        (click)=\"changeTabIndex(index)\"\r\n      >\r\n        {{ item.title | translate }}\r\n      </button>\r\n    } @else {\r\n      <button\r\n        [attr.index]=\"index\"\r\n        class=\"gov-tabs__btn\"\r\n        [attr.aria-selected]=\"activeIndex === index\"\r\n        [disabled]=\"item.disabled\"\r\n        role=\"tab\"\r\n        [attr.activeIndex]=\"activeIndex\"\r\n        (click)=\"changeTabIndex(index)\"\r\n      >\r\n        {{ item.title | translate }}\r\n      </button>}\r\n    }\r\n  </div>\r\n  <div class=\"gov-tabs__tabs\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"gov-tabs__tab\" [class.active]=\"activeIndex === index\" >\r\n        <div class=\"gov-tabs__list\">\r\n          <div class=\"gov-tabs__content\">\r\n            @if (item.contentTemplate) {\r\n              <ng-container *ngTemplateOutlet=\"item.contentTemplate\"></ng-container>\r\n            } @else if (item.content) {\r\n              {{ item.content }}\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n    @if (useRouting) {\r\n      <router-outlet class=\"gov-tabs__content\"></router-outlet>\r\n    }\r\n  </div>\r\n</div>", styles: [".gov-tabs__tabs{position:relative;width:100%;margin-bottom:0%;overflow-x:clip}.gov-tabs__tab{display:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.gov-tabs__tab.active{display:block;opacity:1;transform:translateY(0)}.gov-tabs__btn{font-size:medium;padding:10px 20px;border:none;border-bottom:2px solid transparent;font-weight:700}.gov-tabs__btn[aria-selected=true]:after{display:block;width:100%;height:2px;background-color:var(--border-primary);position:absolute;bottom:-2px;left:0}.gov-tabs__content{margin-top:var(--spacing-m-nudge);flex-wrap:wrap;width:100%}\n"] }]
+            args: [{ selector: 'v-tab-view', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"gov-tabs\">\n  <div class=\"gov-tabs__tabs\" role=\"tablist\">\n    @for (item of items; track item; let index = $index) {\n    @if (useRouting) {\n      <button\n        [attr.index]=\"index\"\n        class=\"gov-tabs__btn\"\n        [routerLink]=\"item.url\"\n        [routerLinkActive]=\"'active'\"\n        #rls=\"routerLinkActive\"\n        [attr.aria-selected]=\"rls.isActive\"\n        [disabled]=\"item.disabled\"\n        role=\"tab\"\n        [attr.activeIndex]=\"activeIndex\"\n        (click)=\"changeTabIndex(index)\"\n      >\n        {{ item.title | translate }}\n      </button>\n    } @else {\n      <button\n        [attr.index]=\"index\"\n        class=\"gov-tabs__btn\"\n        [attr.aria-selected]=\"activeIndex === index\"\n        [disabled]=\"item.disabled\"\n        role=\"tab\"\n        [attr.activeIndex]=\"activeIndex\"\n        (click)=\"changeTabIndex(index)\"\n      >\n        {{ item.title | translate }}\n      </button>}\n    }\n  </div>\n  <div class=\"gov-tabs__tabs\">\n    @for (item of items; track item; let index = $index) {\n      <div class=\"gov-tabs__tab\" [class.active]=\"activeIndex === index\" >\n        <div class=\"gov-tabs__list\">\n          <div class=\"gov-tabs__content\">\n            @if (item.contentTemplate) {\n              <ng-container *ngTemplateOutlet=\"item.contentTemplate\"></ng-container>\n            } @else if (item.content) {\n              {{ item.content }}\n            }\n          </div>\n        </div>\n      </div>\n    }\n    @if (useRouting) {\n      <router-outlet class=\"gov-tabs__content\"></router-outlet>\n    }\n  </div>\n</div>", styles: [".gov-tabs__tabs{position:relative;width:100%;margin-bottom:0%;overflow-x:clip}.gov-tabs__tab{display:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.gov-tabs__tab.active{display:block;opacity:1;transform:translateY(0)}.gov-tabs__btn{font-size:medium;padding:10px 20px;border:none;border-bottom:2px solid transparent;font-weight:700}.gov-tabs__btn[aria-selected=true]:after{display:block;width:100%;height:2px;background-color:var(--border-primary);position:absolute;bottom:-2px;left:0}.gov-tabs__content{margin-top:var(--spacing-m-nudge);flex-wrap:wrap;width:100%}\n"] }]
         }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [TabViewItemComponent]
@@ -3694,14 +3680,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 class NotAuthenticatedComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NotAuthenticatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: NotAuthenticatedComponent, isStandalone: true, selector: "v-not-authenticated", ngImport: i0, template: "<gov-error-code>\r\n    <gov-icon type=\"complex\" name=\"card-401\" slot=\"icon\"></gov-icon>\r\n    <p>You are not logged in, please do so.</p>\r\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Login\" [routerLink]=\"['/login']\" />\r\n</gov-error-code>\r\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: NotAuthenticatedComponent, isStandalone: true, selector: "v-not-authenticated", ngImport: i0, template: "<gov-error-code>\n    <gov-icon type=\"complex\" name=\"card-401\" slot=\"icon\"></gov-icon>\n    <p>You are not logged in, please do so.</p>\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Login\" [routerLink]=\"['/login']\" />\n</gov-error-code>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NotAuthenticatedComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'v-not-authenticated', imports: [
                         GovDesignSystemModule,
                         ButtonComponent,
-                    ], template: "<gov-error-code>\r\n    <gov-icon type=\"complex\" name=\"card-401\" slot=\"icon\"></gov-icon>\r\n    <p>You are not logged in, please do so.</p>\r\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Login\" [routerLink]=\"['/login']\" />\r\n</gov-error-code>\r\n" }]
+                    ], template: "<gov-error-code>\n    <gov-icon type=\"complex\" name=\"card-401\" slot=\"icon\"></gov-icon>\n    <p>You are not logged in, please do so.</p>\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Login\" [routerLink]=\"['/login']\" />\n</gov-error-code>\n" }]
         }] });
 class NotAuthorizedComponent {
@@ -3709,14 +3695,14 @@ class NotAuthorizedComponent {
         history.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NotAuthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: NotAuthorizedComponent, isStandalone: true, selector: "v-not-authorized", ngImport: i0, template: "<gov-error-code>\r\n    <gov-icon type=\"complex\" name=\"card-403\" slot=\"icon\"></gov-icon>\r\n    <p>You are not authorized to view this content.</p>\r\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\r\n</gov-error-code>\r\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: NotAuthorizedComponent, isStandalone: true, selector: "v-not-authorized", ngImport: i0, template: "<gov-error-code>\n    <gov-icon type=\"complex\" name=\"card-403\" slot=\"icon\"></gov-icon>\n    <p>You are not authorized to view this content.</p>\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NotAuthorizedComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'v-not-authorized', imports: [
                         GovDesignSystemModule,
                         ButtonComponent,
-                    ], template: "<gov-error-code>\r\n    <gov-icon type=\"complex\" name=\"card-403\" slot=\"icon\"></gov-icon>\r\n    <p>You are not authorized to view this content.</p>\r\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\r\n</gov-error-code>\r\n" }]
+                    ], template: "<gov-error-code>\n    <gov-icon type=\"complex\" name=\"card-403\" slot=\"icon\"></gov-icon>\n    <p>You are not authorized to view this content.</p>\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n" }]
         }] });
 class NotFoundComponent {
@@ -3724,14 +3710,14 @@ class NotFoundComponent {
         history.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: NotFoundComponent, isStandalone: true, selector: "v-not-found", ngImport: i0, template: "<gov-error-code>\r\n    <gov-icon type=\"complex\" name=\"card-404\" slot=\"icon\"></gov-icon>\r\n    <p>The item you are looking for does not exist.</p>\r\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\r\n</gov-error-code>\r\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: NotFoundComponent, isStandalone: true, selector: "v-not-found", ngImport: i0, template: "<gov-error-code>\n    <gov-icon type=\"complex\" name=\"card-404\" slot=\"icon\"></gov-icon>\n    <p>The item you are looking for does not exist.</p>\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NotFoundComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'v-not-found', imports: [
                         GovDesignSystemModule,
                         ButtonComponent
-                    ], template: "<gov-error-code>\r\n    <gov-icon type=\"complex\" name=\"card-404\" slot=\"icon\"></gov-icon>\r\n    <p>The item you are looking for does not exist.</p>\r\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\r\n</gov-error-code>\r\n" }]
+                    ], template: "<gov-error-code>\n    <gov-icon type=\"complex\" name=\"card-404\" slot=\"icon\"></gov-icon>\n    <p>The item you are looking for does not exist.</p>\n    <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n" }]
         }] });
 /**