@verisoft/ui-govcz 20.1.3 → 20.2.0

package/assets/icons/components/arrow-counterclockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>

package/assets/icons/components/file.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
+  <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
+  <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+</svg>

package/assets/icons/components/folder.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
+  <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139q.323-.119.684-.12h5.396z"/>
+</svg>

package/assets/icons/components/map-empty.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-map" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.5.5 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103M10 1.91l-4-.8v12.98l4 .8zm1 12.98 4-.8V1.11l-4 .8zm-6-.8V1.11l-4 .8v12.98z"/>
+</svg>

package/fesm2022/verisoft-ui-govcz.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, Input, inject, Optional, Self, input, SimpleChange, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, ViewChild, ViewEncapsulation, HostListener, NO_ERRORS_SCHEMA, output, Directive, forwardRef, ContentChildren, effect, ContentChild, InjectionToken, NgModule, Inject } from '@angular/core';
+import { Component, Pipe, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, Input, inject, Optional, Self, input, SimpleChange, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, ViewChild, HostListener, ViewEncapsulation, NO_ERRORS_SCHEMA, output, Directive, forwardRef, ContentChildren, ContentChild, InjectionToken, NgModule, Inject } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import * as i2 from '@gov-design-system-ce/angular';
 import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
 import * as i1$3 from '@verisoft/ui-core';
-import { BreadcrumbCoreComponent, BREADCRUMB_COMPONENT_TOKEN, ControlSeverity, GovControlSeverity, FieldSize, IconsComponent, IconPosition, GovButtonType, BUTTON_COMPONENT_TOKEN, SlotPosition, BaseFormInputComponent, FieldType, CALENDAR_COMPONENT_TOKEN, CHECKBOX_COMPONENT_TOKEN, UnsubscribeComponent, CONFIRM_DIALOG_COMPONENT_TOKEN, TEXTFIELD_COMPONENT_TOKEN, DROPDOWN_COMPONENT_TOKEN, DROPDOWN_BUTTON_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, GenericFieldType, DatasourceDirective, GENERIC_FIELD_COMPONENT_TOKEN, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, DialogService, isFilterEmpty, ButtonShortCutDirective, FILTER_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, queryListChanged, LOADER_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COLUMN_PROVIDER, TABLE_COMPONENT_TOKEN, downloadFile, TableDatasourceDirective, TableFilterDirective, TableColumnDirective, FORM_FIELD_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SNACKBAR_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, TAG_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN } from '@verisoft/ui-core';
+import { BreadcrumbCoreComponent, BREADCRUMB_COMPONENT_TOKEN, ControlSeverity, GovControlSeverity, FieldSize, IconsComponent, IconPosition, GovButtonType, BUTTON_COMPONENT_TOKEN, SlotPosition, BaseFormInputComponent, FieldType, CALENDAR_COMPONENT_TOKEN, CHECKBOX_COMPONENT_TOKEN, UnsubscribeComponent, DialogService, CONFIRM_DIALOG_COMPONENT_TOKEN, TEXTFIELD_COMPONENT_TOKEN, DROPDOWN_COMPONENT_TOKEN, DROPDOWN_BUTTON_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, GenericFieldType, DatasourceDirective, GENERIC_FIELD_COMPONENT_TOKEN, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, isFilterEmpty, ButtonShortCutDirective, FILTER_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, queryListChanged, LOADER_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COLUMN_PROVIDER, TABLE_COMPONENT_TOKEN, downloadFile, TableDatasourceDirective, TableFilterDirective, TableColumnDirective, FORM_FIELD_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SNACKBAR_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, TAG_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN } from '@verisoft/ui-core';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import * as i1$1 from '@angular/common';
@@ -57,6 +57,10 @@ const Icons = {
     check: 'check-lg',
     envelope: 'envelope',
     loader: 'loader',
+    map: 'map-empty',
+    file: 'file',
+    folder: 'folder',
+    arrowCounterclockwise: 'arrow-counterclockwise'
 };
 
 class BreadcrumbComponent extends BreadcrumbCoreComponent {
@@ -631,13 +635,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             }] } });
 
 class ConfirmDialogComponent extends UnsubscribeComponent {
-    dialogService;
-    cdr;
-    constructor(dialogService, cdr) {
-        super();
-        this.dialogService = dialogService;
-        this.cdr = cdr;
-    }
+    dialogService = inject(DialogService);
+    cdr = inject(ChangeDetectorRef);
     visible = false;
     closable = false;
     data = { severity: 'primary', headerIcon: 'info-circle' };
@@ -657,39 +656,46 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
             this.cdr.detectChanges();
         });
     }
+    onKeyDown(event) {
+        if (!this.visible)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.dialogClick(true);
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.dialogClick(false);
+        }
+    }
     dialogClick(confirm) {
         const { confirmButtonFn, cancelButtonFn } = this.data;
         if (confirm && confirmButtonFn) {
             confirmButtonFn();
         }
-        if (!confirm && cancelButtonFn) {
+        else if (!confirm && cancelButtonFn) {
             cancelButtonFn();
         }
         this.visible = false;
         this.cdr.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ConfirmDialogComponent, isStandalone: true, selector: "v-confirm-dialog", providers: [
-            {
-                provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
-                useExisting: ConfirmDialogComponent,
-            },
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ConfirmDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ConfirmDialogComponent, isStandalone: true, selector: "v-confirm-dialog", host: { listeners: { "document:keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "visible ? \"0\" : null" } }, providers: [
+            { provide: CONFIRM_DIALOG_COMPONENT_TOKEN, useExisting: ConfirmDialogComponent },
         ], 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", "expandedMobile", "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: "component", type: DynamicComponent, selector: "v-dynamic-component", inputs: ["componentType", "data"] }, { kind: "pipe", type: GovColorPipe, name: "govColor" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-confirm-dialog', imports: [
-                        CommonModule,
-                        GovDesignSystemModule,
-                        GovColorPipe,
-                        DynamicComponent,
-                    ], providers: [
-                        {
-                            provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
-                            useExisting: ConfirmDialogComponent,
-                        },
-                    ], 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$3.DialogService }, { type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'v-confirm-dialog', imports: [CommonModule, GovDesignSystemModule, GovColorPipe, DynamicComponent], providers: [
+                        { provide: CONFIRM_DIALOG_COMPONENT_TOKEN, useExisting: ConfirmDialogComponent },
+                    ], host: {
+                        '(document:keydown)': 'onKeyDown($event)',
+                        '[attr.tabindex]': 'visible ? "0" : null',
+                    }, 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"] }]
+        }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 class TooltipComponent {
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
@@ -1910,6 +1916,7 @@ class TableComponent {
     download = new EventEmitter();
     delete = new EventEmitter();
     save = new EventEmitter();
+    tableRef;
     cdRef = inject(ChangeDetectorRef);
     router = inject(Router);
     route = inject(ActivatedRoute);
@@ -1920,6 +1927,11 @@ class TableComponent {
     pageSizeOptions = DEFAULT_PAGINATION.map((x) => ({ value: x.toString() }));
     allSelected = false;
     icons = Icons;
+    focusedIndex = -1;
+    isMouseDown = false;
+    dragActive = false;
+    dragStartIndex = -1;
+    initialSelectionSet = new Set();
     get govPageSize() {
         return this.pageSize.toString();
     }
@@ -1939,11 +1951,6 @@ class TableComponent {
     get selectedCount() {
         return this.selected.length;
     }
-    constructor() {
-        effect(() => {
-            this.reactToSignals();
-        });
-    }
     ngOnChanges(changes) {
         if (changes['data']) {
             this.updateRowModels();
@@ -1966,18 +1973,21 @@ class TableComponent {
             this.updateColumnModels();
             this.cdRef.detectChanges();
         }
+        this.tableRef.nativeElement.tabIndex = 0;
+        this.tableRef.nativeElement.addEventListener('keydown', this.handleKeydown.bind(this));
+    }
+    ngOnDestroy() {
+        this.tableRef.nativeElement.removeEventListener('keydown', this.handleKeydown.bind(this));
     }
     sortColumn(column) {
         if (column.sortable) {
             column.sortDirection = getNextSortDirection(column.sortDirection, this.sortMultiple);
             if (!this.sortMultiple) {
                 this.tableColumns
-                    .filter((x) => x !== column)
-                    .forEach((x) => {
-                    x.sortDirection = undefined;
-                });
+                    .filter(x => x !== column)
+                    .forEach(x => (x.sortDirection = undefined));
             }
-            const sorts = this.getSorts().map((x) => ({
+            const sorts = this.getSorts().map(x => ({
                 field: 'row.' + x.field,
                 direction: x.direction,
             }));
@@ -1998,14 +2008,14 @@ class TableComponent {
         this.currentPage = 1;
         this.fireLazyLoad();
     }
-    selectRow(row, event) {
+    performClickSelect(row, event) {
         if (event.ctrlKey || event.metaKey) {
             this.navigate(row, event);
             return;
         }
         if (this.selectionMode === 'single') {
             row.selected = !row.selected;
-            this.tableRows.forEach((x) => (x !== row ? (x.selected = false) : null));
+            this.tableRows.forEach(x => (x !== row ? (x.selected = false) : null));
             this.fireSelectionChange();
         }
         else if (this.selectionMode === 'multiple') {
@@ -2013,10 +2023,67 @@ class TableComponent {
             this.fireSelectionChange();
         }
     }
-    navigate(row, event) {
-        if (this.disableCustomClicks) {
+    onRowMouseDown(row, index, event) {
+        if (event.button === 1) {
+            this.navigateNewWindow(row, event);
             return;
         }
+        if (this.selectionMode !== 'multiple') {
+            return;
+        }
+        this.isMouseDown = true;
+        this.dragActive = false;
+        this.dragStartIndex = index;
+        this.initialSelectionSet = new Set(this.tableRows.filter(r => r.selected).map(r => r.row));
+    }
+    onRowMouseEnter(index) {
+        this.setFocusedIndex(index);
+        if (this.isMouseDown && this.selectionMode === 'multiple') {
+            this.dragActive = true;
+            this.updateDragSelection(index);
+        }
+    }
+    onRowMouseUp(row, index, event) {
+        if (this.dragActive && this.selectionMode === 'multiple') {
+            this.updateDragSelection(index);
+            this.stopDrag();
+            return;
+        }
+        if (!this.isMouseDown) {
+            return;
+        }
+        if (!this.dragActive) {
+            this.performClickSelect(row, event);
+        }
+        this.stopDrag();
+    }
+    updateDragSelection(endIndex) {
+        const min = Math.min(this.dragStartIndex, endIndex);
+        const max = Math.max(this.dragStartIndex, endIndex);
+        this.tableRows.forEach((r, i) => {
+            if (this.initialSelectionSet.has(r.row)) {
+                r.selected = true;
+            }
+            else if (i >= min && i <= max) {
+                r.selected = true;
+            }
+            else {
+                r.selected = this.initialSelectionSet.has(r.row);
+            }
+        });
+        this.fireSelectionChange();
+        this.allSelected = this.tableRows.every(r => r.selected);
+        this.cdRef.markForCheck();
+    }
+    stopDrag() {
+        this.isMouseDown = false;
+        this.dragActive = false;
+        this.dragStartIndex = -1;
+        this.initialSelectionSet = new Set();
+    }
+    navigate(row, event) {
+        if (this.disableCustomClicks)
+            return;
         event.preventDefault();
         const targetUrl = this.createUrl(row);
         if (event.ctrlKey || event.metaKey) {
@@ -2029,16 +2096,15 @@ class TableComponent {
         }
     }
     navigateNewWindow(row, event) {
-        if (this.disableCustomClicks || event.button !== 1) {
+        if (this.disableCustomClicks || event.button !== 1)
             return;
-        }
         event.preventDefault();
         const targetUrl = this.createUrl(row);
         window.open(this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })), '_blank');
     }
     toggleAll(event) {
         this.allSelected = event.detail.checked;
-        this.tableRows.forEach((x) => (x.selected = this.allSelected));
+        this.tableRows.forEach(x => (x.selected = this.allSelected));
         this.fireSelectionChange();
     }
     toggleDetail(row) {
@@ -2047,7 +2113,7 @@ class TableComponent {
     }
     selectRowCheckbox(row, event) {
         row.selected = event.detail.checked;
-        this.allSelected = this.tableRows.every((x) => x.selected);
+        this.allSelected = this.tableRows.every(x => x.selected);
         this.fireSelectionChange();
     }
     truncate(text) {
@@ -2057,49 +2123,101 @@ class TableComponent {
     }
     deselectAll() {
         this.allSelected = false;
-        this.tableRows.forEach(x => (x.selected = this.allSelected));
+        this.tableRows.forEach(x => (x.selected = false));
+        this.fireSelectionChange();
     }
-    createUrl(row) {
-        if (row.customRoute) {
-            return row.customRoute;
+    setFocusedIndex(index) {
+        this.focusedIndex = index;
+        this.cdRef.markForCheck();
+    }
+    handleKeydown(event) {
+        const rows = this.tableRowView;
+        if (rows.length === 0)
+            return;
+        if (event.key === ' ' || event.code === 'Space') {
+            if (this.focusedIndex >= 0 && this.selectionMode) {
+                this.toggleSelection(rows[this.focusedIndex]);
+            }
+            event.preventDefault();
+            return;
+        }
+        let newIndex = this.focusedIndex;
+        switch (event.key) {
+            case 'ArrowDown':
+                newIndex = Math.min(newIndex + 1, rows.length - 1);
+                break;
+            case 'ArrowUp':
+                newIndex = Math.max(newIndex - 1, 0);
+                break;
+            case 'PageDown':
+                newIndex = Math.min(newIndex + this.pageSize, rows.length - 1);
+                break;
+            case 'PageUp':
+                newIndex = Math.max(newIndex - this.pageSize, 0);
+                break;
+            case 'Home':
+                newIndex = 0;
+                break;
+            case 'End':
+                newIndex = rows.length - 1;
+                break;
+            default:
+                return;
+        }
+        if (newIndex !== this.focusedIndex) {
+            this.focusedIndex = newIndex;
+            this.scrollRowIntoView(newIndex);
+            event.preventDefault();
+            this.cdRef.markForCheck();
         }
-        return row.id.toString();
+    }
+    toggleSelection(row) {
+        if (this.selectionMode === 'single') {
+            const shouldSelect = !row.selected;
+            this.tableRows.forEach(r => (r.selected = r === row && shouldSelect));
+        }
+        else if (this.selectionMode === 'multiple') {
+            row.selected = !row.selected;
+        }
+        this.fireSelectionChange();
+        this.allSelected = this.tableRows.every(r => r.selected);
+    }
+    scrollRowIntoView(index) {
+        const rowEl = this.tableRef.nativeElement.querySelectorAll('tbody tr.v-table__row')[index];
+        if (rowEl) {
+            rowEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
+    createUrl(row) {
+        return row.customRoute ?? row.id.toString();
     }
     reactToSignals() {
         const reload = this.service.reload();
-        if (typeof reload === 'symbol') {
-            this.fireLazyLoad();
-        }
-        else if (reload.name === this.tableName) {
+        if (typeof reload === 'symbol' || reload.name === this.tableName) {
             this.fireLazyLoad();
         }
         this.deselectAll();
     }
     updateColumnModels() {
-        const viewColumns = this.viewColumns
-            ?.toArray()
-            .map((x) => x.getDefinition());
-        this.tableColumns = [...(this._columns ?? []), ...(viewColumns ?? [])].map((x) => new ColumnModel(x));
+        const viewColumns = this.viewColumns?.toArray().map(x => x.getDefinition());
+        this.tableColumns = [...(this._columns ?? []), ...(viewColumns ?? [])].map(x => new ColumnModel(x));
     }
     updateRowModels() {
-        this.tableRows = (this.data ?? []).map((x) => new RowModel(x, false, false, undefined, undefined, undefined, this.customRoute, this.entityKey));
+        this.tableRows = (this.data ?? []).map(x => new RowModel(x, false, false, undefined, undefined, undefined, this.customRoute, this.entityKey));
+        this.focusedIndex = -1;
     }
     fireSelectionChange() {
-        const selectedRows = this.tableRows
-            .filter((x) => x.selected)
-            .map((x) => x.row);
+        const selectedRows = this.tableRows.filter(x => x.selected).map(x => x.row);
         this.selectionChange.emit(selectedRows);
     }
     selectSelected() {
         if (this.selection?.length && this.selectionMode) {
-            const selection = this.selectionMode === TableSelectionMode.single
-                ? [this.selection[0]]
-                : this.selection;
+            const selection = this.selectionMode === TableSelectionMode.single ? [this.selection[0]] : this.selection;
             const selectionSet = new Set(selection);
-            this.tableRows.forEach((item) => {
+            this.tableRows.forEach(item => {
                 item.selected = selectionSet.has(item.row);
             });
-            this.allSelected = this.tableRows.every((x) => x.selected);
+            this.allSelected = this.tableRows.every(x => x.selected);
         }
     }
     fireLazyLoad() {
@@ -2116,23 +2234,32 @@ class TableComponent {
     }
     getSorts() {
         return this.tableColumns
-            .filter((x) => x.sortable && x.sortDirection)
-            .map((x) => ({
+            .filter(x => x.sortable && x.sortDirection)
+            .map(x => ({
             field: x.id,
             direction: x.sortDirection,
         }));
     }
+    getQueryParams(column, row) {
+        if (column.queryParams) {
+            if (typeof column.queryParams === 'function') {
+                return column.queryParams(row);
+            }
+            return column.queryParams;
+        }
+        return null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: TableComponent, isStandalone: true, selector: "v-table", inputs: { sorters: "sorters", data: "data", total: "total", filter: "filter", extraFilter: "extraFilter", loading: "loading", scrollable: "scrollable", pageSize: "pageSize", currentPage: "currentPage", showPaginator: "showPaginator", userTableWrapper: "userTableWrapper", sortMultiple: "sortMultiple", lazy: "lazy", selectionMode: "selectionMode", selection: "selection", showPageSizePicker: "showPageSizePicker", entityKey: "entityKey", customRoute: "customRoute", disableCustomClicks: "disableCustomClicks", tableName: "tableName", size: "size", showActionButtons: "showActionButtons", maximumColumnLength: "maximumColumnLength", columns: "columns" }, outputs: { selectionChange: "selectionChange", lazyLoad: "lazyLoad", download: "download", delete: "delete", save: "save" }, providers: [
             {
                 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) {\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          [class]=\"column.columnClass\"\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          />\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      />\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      />\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{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", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovEmpty, selector: "gov-empty", inputs: ["direction", "size"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "gap", "justifyContent", "responsive", "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: "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"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], 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 }], viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (selectionMode === 'multiple' && showActionButtons) {\n  <gov-flex class=\"gov-table-complex__actions mt-2\" justify-content=\"space-between\" align-items=\"center\">\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 class=\"v-table gov-table\" [attr.size]=\"size | govSize\">\n  <table #tableRef class=\"v-table__table\">\n    <thead class=\"v-table__head\">\n      <tr class=\"v-table__header\">\n        @if (rowDetailTemplate) {\n          <th></th>\n        }\n        @if (selectionMode === 'multiple') {\n          <th scope=\"col\">\n            <gov-form-checkbox [checked]=\"allSelected\" (gov-change)=\"toggleAll($event)\" />\n          </th>\n        }\n        @for (column of tableColumns; track column; let index = $index) {\n          @if (column.visible && column.forceVisibility !== 'hidden') {\n            <th scope=\"col\" [style]=\"{'text-align': column.textAlign}\" [class]=\"column.columnClass\">\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          }\n        }\n        @if (rowDetailButtonTemplate) {\n          <th></th>\n        }\n      </tr>\n    </thead>\n\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            [class.v-table__row--focused]=\"rowIndex === focusedIndex\"\n            [attr.tabindex]=\"0\"\n            [attr.disable-custom-clicks]=\"disableCustomClicks || null\"\n            (mousedown)=\"onRowMouseDown(data, rowIndex, $event)\"\n            (mouseup)=\"onRowMouseUp(data, rowIndex, $event)\"\n            (mouseenter)=\"onRowMouseEnter(rowIndex)\"\n            (dblclick)=\"navigate(data, $event)\"\n          >\n            @if (rowDetailTemplate) {\n              <td>\n                <gov-button [size]=\"size | govSize\" color=\"primary\" type=\"solid\" (gov-click)=\"toggleDetail(data)\">\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            }\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                />\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 *ngTemplateOutlet=\"column.template; context: { $implicit: data.row }\"></ng-container>\n                  } @else {\n                    <span\n                      [routerLink]=\"column.routerLink ? column.routerLink(data.row) : null\"\n                      [queryParams]=\"getQueryParams(column, data.row)\"\n                      [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\n                      [attr.title]=\"column.valueGetter(data.row, rowIndex).length > maximumColumnLength ? column.valueGetter(data.row, rowIndex) : null\"\n                    ></span>\n                  }\n                </td>\n              }\n            }\n            @if (rowDetailButtonTemplate) {\n              <td>\n                <ng-container *ngTemplateOutlet=\"rowDetailButtonTemplate; context: { $implicit: data.row }\"></ng-container>\n              </td>\n            }\n          </tr>\n\n          @if (rowDetailTemplate && data.expanded) {\n            <tr>\n              <td [attr.colspan]=\"tableColumns.length + (selectionMode === 'multiple' ? 1 : 0) + (rowDetailTemplate ? 1 : 0) + (rowDetailButtonTemplate ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"rowDetailTemplate; context: { $implicit: data.row }\"></ng-container>\n              </td>\n            </tr>\n          }\n        }\n\n        @if (!tableRows.length && !loading) {\n          <tr>\n            <td [attr.colspan]=\"tableColumns.length + (selectionMode === 'multiple' ? 1 : 0) + (rowDetailTemplate ? 1 : 0) + (rowDetailButtonTemplate ? 1 : 0)\">\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          </tr>\n        }\n      </tbody>\n    }\n  </table>\n\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          />\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        />\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{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}.v-table__row{transition:background-color .18s ease;cursor:pointer}.v-table__row:hover>td{background-color:var(--gov-color-primary-50, #f5faff)!important}.v-table__row.gov-table--highlight:hover>td{background-color:var(--gov-color-primary-100, #e6f0ff)!important}.v-table__row[disable-custom-clicks],.v-table__row.disable-custom-clicks{cursor:default!important;pointer-events:auto}.v-table__row[disable-custom-clicks]:hover>td,.v-table__row.disable-custom-clicks:hover>td{background-color:transparent!important;background-color:var(--gov-color-primary-50, #c5dbf2)!important}\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", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovEmpty, selector: "gov-empty", inputs: ["direction", "size"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "gap", "justifyContent", "responsive", "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: "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"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-table', imports: [
+            args: [{ selector: 'v-table', standalone: true, imports: [
                         CommonModule,
                         RouterModule,
                         GovDesignSystemModule,
@@ -2146,8 +2273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                             provide: TABLE_COMPONENT_TOKEN,
                             useExisting: TableComponent,
                         },
-                    ], 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          [class]=\"column.columnClass\"\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          />\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      />\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      />\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{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: [{
+                    ], template: "@if (selectionMode === 'multiple' && showActionButtons) {\n  <gov-flex class=\"gov-table-complex__actions mt-2\" justify-content=\"space-between\" align-items=\"center\">\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 class=\"v-table gov-table\" [attr.size]=\"size | govSize\">\n  <table #tableRef class=\"v-table__table\">\n    <thead class=\"v-table__head\">\n      <tr class=\"v-table__header\">\n        @if (rowDetailTemplate) {\n          <th></th>\n        }\n        @if (selectionMode === 'multiple') {\n          <th scope=\"col\">\n            <gov-form-checkbox [checked]=\"allSelected\" (gov-change)=\"toggleAll($event)\" />\n          </th>\n        }\n        @for (column of tableColumns; track column; let index = $index) {\n          @if (column.visible && column.forceVisibility !== 'hidden') {\n            <th scope=\"col\" [style]=\"{'text-align': column.textAlign}\" [class]=\"column.columnClass\">\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          }\n        }\n        @if (rowDetailButtonTemplate) {\n          <th></th>\n        }\n      </tr>\n    </thead>\n\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            [class.v-table__row--focused]=\"rowIndex === focusedIndex\"\n            [attr.tabindex]=\"0\"\n            [attr.disable-custom-clicks]=\"disableCustomClicks || null\"\n            (mousedown)=\"onRowMouseDown(data, rowIndex, $event)\"\n            (mouseup)=\"onRowMouseUp(data, rowIndex, $event)\"\n            (mouseenter)=\"onRowMouseEnter(rowIndex)\"\n            (dblclick)=\"navigate(data, $event)\"\n          >\n            @if (rowDetailTemplate) {\n              <td>\n                <gov-button [size]=\"size | govSize\" color=\"primary\" type=\"solid\" (gov-click)=\"toggleDetail(data)\">\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            }\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                />\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 *ngTemplateOutlet=\"column.template; context: { $implicit: data.row }\"></ng-container>\n                  } @else {\n                    <span\n                      [routerLink]=\"column.routerLink ? column.routerLink(data.row) : null\"\n                      [queryParams]=\"getQueryParams(column, data.row)\"\n                      [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\n                      [attr.title]=\"column.valueGetter(data.row, rowIndex).length > maximumColumnLength ? column.valueGetter(data.row, rowIndex) : null\"\n                    ></span>\n                  }\n                </td>\n              }\n            }\n            @if (rowDetailButtonTemplate) {\n              <td>\n                <ng-container *ngTemplateOutlet=\"rowDetailButtonTemplate; context: { $implicit: data.row }\"></ng-container>\n              </td>\n            }\n          </tr>\n\n          @if (rowDetailTemplate && data.expanded) {\n            <tr>\n              <td [attr.colspan]=\"tableColumns.length + (selectionMode === 'multiple' ? 1 : 0) + (rowDetailTemplate ? 1 : 0) + (rowDetailButtonTemplate ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"rowDetailTemplate; context: { $implicit: data.row }\"></ng-container>\n              </td>\n            </tr>\n          }\n        }\n\n        @if (!tableRows.length && !loading) {\n          <tr>\n            <td [attr.colspan]=\"tableColumns.length + (selectionMode === 'multiple' ? 1 : 0) + (rowDetailTemplate ? 1 : 0) + (rowDetailButtonTemplate ? 1 : 0)\">\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          </tr>\n        }\n      </tbody>\n    }\n  </table>\n\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          />\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        />\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{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}.v-table__row{transition:background-color .18s ease;cursor:pointer}.v-table__row:hover>td{background-color:var(--gov-color-primary-50, #f5faff)!important}.v-table__row.gov-table--highlight:hover>td{background-color:var(--gov-color-primary-100, #e6f0ff)!important}.v-table__row[disable-custom-clicks],.v-table__row.disable-custom-clicks{cursor:default!important;pointer-events:auto}.v-table__row[disable-custom-clicks]:hover>td,.v-table__row.disable-custom-clicks:hover>td{background-color:transparent!important;background-color:var(--gov-color-primary-50, #c5dbf2)!important}\n"] }]
+        }], propDecorators: { viewColumns: [{
                 type: ContentChildren,
                 args: [TABLE_COLUMN_PROVIDER]
             }], rowDetailTemplate: [{
@@ -2214,6 +2341,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 type: Output
             }], save: [{
                 type: Output
+            }], tableRef: [{
+                type: ViewChild,
+                args: ['tableRef', { static: true }]
             }] } });
 
 class FeatureListFilterFieldDirective extends FilterFieldDirective {