@verisoft/ui-govcz 21.0.15 → 21.0.17

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, reflectComponentType, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, ViewChild, ViewEncapsulation, HostListener, NO_ERRORS_SCHEMA, output, ContentChild, ContentChildren, NgModule, Inject, effect, forwardRef } from '@angular/core';
+import { Component, Pipe, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, Input, inject, Optional, Self, input, reflectComponentType, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, ViewChild, ViewEncapsulation, HostListener, NO_ERRORS_SCHEMA, ElementRef, Directive, output, viewChild, ContentChild, ContentChildren, NgModule, Inject, effect, forwardRef } from '@angular/core';
 import * as i2$1 from '@angular/router';
 import { RouterModule, Router, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute } from '@angular/router';
 import * as i2 from '@gov-design-system-ce/angular';
 import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
 import * as i1$2 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, FORM_FIELD_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, LOADER_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, queryListChanged, GenericFieldType, DatasourceDirective, GENERIC_FIELD_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SNACKBAR_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COLUMN_PROVIDER, TABLE_COMPONENT_TOKEN, TAG_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, DialogService, getFilledControlCount, isFilterEmpty, ButtonShortCutDirective, FilterFieldDirective, FILTER_COMPONENT_TOKEN, downloadFile, TableDatasourceDirective, TableFilterDirective, FeatureListFilterPipe, FEATURE_LIST_COLUMN_PROVIDER, FEATURE_LIST_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, CONFIRM_DIALOG_COMPONENT_TOKEN, TEXTFIELD_COMPONENT_TOKEN, DROPDOWN_COMPONENT_TOKEN, MenuKeyboardDirective, MENU_KEYBOARD_PORT, MenuKeyboardTriggerDirective, MenuKeyboardListDirective, MenuKeyboardItemDirective, DROPDOWN_BUTTON_COMPONENT_TOKEN, FORM_FIELD_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, LOADER_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, queryListChanged, GenericFieldType, DatasourceDirective, GENERIC_FIELD_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SNACKBAR_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COLUMN_PROVIDER, TABLE_COMPONENT_TOKEN, TAG_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, DialogService, getFilledControlCount, isFilterEmpty, ButtonShortCutDirective, FilterFieldDirective, FILTER_COMPONENT_TOKEN, downloadFile, TableDatasourceDirective, TableFilterDirective, FeatureListFilterPipe, FEATURE_LIST_COLUMN_PROVIDER, FEATURE_LIST_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/forms';
@@ -317,7 +317,7 @@ class ButtonComponent {
                 provide: BUTTON_COMPONENT_TOKEN,
                 useExisting: ButtonComponent,
             }
-        ], ngImport: i0, template: "<div class=\"v-button\" [class.v-button--expanded]=\"expanded\">\n    <a\n        [routerLink]=\"routerLink ? routerLink : undefined\"\n        [queryParams]=\"queryParams ? queryParams : undefined\"\n    >\n        <gov-button\n            [type]=\"outlined === true ? 'outlined' : type\"\n            [class.v-button--rounded]=\"rounded\"\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                <v-icon \n                    [name]=\"icon\"\n                    [library]=\"library\"\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: [":host{display:inline-block}.v-button{display:inline-block}:host.v-button--expanded{display:block;width:100%}.v-button--expanded{display:block;width:100%}.v-button--rounded{border-radius:5rem}\n"], dependencies: [{ 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: IconComponent, selector: "v-icon" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"v-button\" [class.v-button--expanded]=\"expanded\">\n    <a\n        tabindex=\"-1\"\n        [routerLink]=\"routerLink ? routerLink : undefined\"\n        [queryParams]=\"queryParams ? queryParams : undefined\"\n    >\n        <gov-button\n            [type]=\"outlined === true ? 'outlined' : type\"\n            [class.v-button--rounded]=\"rounded\"\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                <v-icon \n                    [name]=\"icon\"\n                    [library]=\"library\"\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: [":host{display:inline-block}:host.v-button--expanded{display:block;width:100%}.v-button{display:inline-block}.v-button--expanded{display:block;width:100%}.v-button--rounded{border-radius:5rem}\n"], dependencies: [{ 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: IconComponent, selector: "v-icon" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -330,7 +330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             provide: BUTTON_COMPONENT_TOKEN,
                             useExisting: ButtonComponent,
                         }
-                    ], template: "<div class=\"v-button\" [class.v-button--expanded]=\"expanded\">\n    <a\n        [routerLink]=\"routerLink ? routerLink : undefined\"\n        [queryParams]=\"queryParams ? queryParams : undefined\"\n    >\n        <gov-button\n            [type]=\"outlined === true ? 'outlined' : type\"\n            [class.v-button--rounded]=\"rounded\"\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                <v-icon \n                    [name]=\"icon\"\n                    [library]=\"library\"\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: [":host{display:inline-block}.v-button{display:inline-block}:host.v-button--expanded{display:block;width:100%}.v-button--expanded{display:block;width:100%}.v-button--rounded{border-radius:5rem}\n"] }]
+                    ], template: "<div class=\"v-button\" [class.v-button--expanded]=\"expanded\">\n    <a\n        tabindex=\"-1\"\n        [routerLink]=\"routerLink ? routerLink : undefined\"\n        [queryParams]=\"queryParams ? queryParams : undefined\"\n    >\n        <gov-button\n            [type]=\"outlined === true ? 'outlined' : type\"\n            [class.v-button--rounded]=\"rounded\"\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                <v-icon \n                    [name]=\"icon\"\n                    [library]=\"library\"\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: [":host{display:inline-block}:host.v-button--expanded{display:block;width:100%}.v-button{display:inline-block}.v-button--expanded{display:block;width:100%}.v-button--rounded{border-radius:5rem}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -1098,6 +1098,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+function findGovButton(host) {
+    const direct = host.querySelector('gov-button');
+    if (direct instanceof HTMLElement) {
+        return direct;
+    }
+    const nested = host.getElementsByTagName('gov-button');
+    return nested.length > 0 ? nested[0] : null;
+}
+function readGovButtonFocusFromHost(host) {
+    const govButton = findGovButton(host);
+    if (!govButton) {
+        return host instanceof HTMLButtonElement ? host : null;
+    }
+    const shadowRoot = govButton.shadowRoot;
+    if (!shadowRoot) {
+        return null;
+    }
+    const nativeButton = shadowRoot.querySelector('button.element') ??
+        shadowRoot.querySelector('button[type="button"]') ??
+        shadowRoot.querySelector('button');
+    return nativeButton instanceof HTMLButtonElement ? nativeButton : null;
+}
+function applyAccessibility(focusElement, a11y) {
+    if (a11y.role !== undefined) {
+        focusElement.setAttribute('role', a11y.role);
+    }
+    if (a11y.ariaHaspopup !== undefined) {
+        focusElement.setAttribute('aria-haspopup', a11y.ariaHaspopup);
+    }
+    if (a11y.ariaExpanded !== undefined) {
+        focusElement.setAttribute('aria-expanded', a11y.ariaExpanded);
+    }
+    if (a11y.ariaControls !== undefined) {
+        focusElement.setAttribute('aria-controls', a11y.ariaControls);
+    }
+    if (a11y.ariaDisabled !== undefined) {
+        focusElement.setAttribute('aria-disabled', a11y.ariaDisabled);
+    }
+    if (a11y.tabIndex !== undefined) {
+        focusElement.tabIndex = a11y.tabIndex;
+    }
+}
+function applyGovButtonAccessibility(host, a11y) {
+    const focusElement = readGovButtonFocusFromHost(host);
+    if (!focusElement) {
+        return;
+    }
+    applyAccessibility(focusElement, a11y);
+}
+function focusGovButtonHost(host, a11y) {
+    const focusElement = readGovButtonFocusFromHost(host);
+    if (focusElement) {
+        if (a11y) {
+            applyAccessibility(focusElement, a11y);
+        }
+        focusElement.focus({ preventScroll: true });
+        return;
+    }
+    if (host instanceof HTMLButtonElement) {
+        host.focus({ preventScroll: true });
+        return;
+    }
+    host.focus({ preventScroll: true });
+}
+
+class GovDropdownKeyboardDirective {
+    elementRef = inject((ElementRef));
+    injector = inject(Injector);
+    onGovChange(event) {
+        const detail = event.detail;
+        const host = this.getHost();
+        host?.handleOpenChange(detail.open);
+        if (detail.open && host?.isOpen()) {
+            host.focusActiveItem();
+        }
+    }
+    async open() {
+        const host = this.getHost();
+        if (host && !host.hasActionableItems()) {
+            return false;
+        }
+        const dropdown = this.getGovDropdown();
+        if (dropdown) {
+            const opened = await this.setGovOpen(dropdown, true);
+            if (opened) {
+                host?.handleOpenChange(true);
+            }
+            return opened;
+        }
+        this.clickTrigger();
+        host?.handleOpenChange(true);
+        return true;
+    }
+    async close(restoreFocus) {
+        const host = this.getHost();
+        const dropdown = this.getGovDropdown();
+        let closed = false;
+        if (dropdown) {
+            closed = await this.setGovOpen(dropdown, false);
+        }
+        else {
+            this.clickTrigger();
+            closed = true;
+        }
+        host?.handleOpenChange(false);
+        if (restoreFocus && closed) {
+            host?.focusTrigger();
+        }
+    }
+    focusTrigger(triggerHost, a11y) {
+        focusGovButtonHost(triggerHost, a11y);
+    }
+    focusItem(itemHost, a11y) {
+        focusGovButtonHost(itemHost, a11y);
+    }
+    applyTriggerAccessibility(triggerHost, a11y) {
+        applyGovButtonAccessibility(triggerHost, a11y);
+    }
+    applyItemAccessibility(itemHost, a11y) {
+        applyGovButtonAccessibility(itemHost, a11y);
+    }
+    async setGovOpen(dropdown, open) {
+        try {
+            const isOpen = await dropdown.getState();
+            if (isOpen !== open) {
+                await dropdown.toggle();
+            }
+            return true;
+        }
+        catch {
+            if (open) {
+                this.clickTrigger();
+            }
+            return open;
+        }
+    }
+    clickTrigger() {
+        const trigger = this.getHost()?.getTriggerElement();
+        const govButton = trigger?.querySelector('gov-button');
+        if (govButton instanceof HTMLElement) {
+            govButton.click();
+            return;
+        }
+        trigger?.click();
+    }
+    getGovDropdown() {
+        const element = this.elementRef.nativeElement;
+        if (typeof element.getState !== 'function') {
+            return undefined;
+        }
+        return element;
+    }
+    getHost() {
+        return this.injector.get(MenuKeyboardDirective, null, { optional: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GovDropdownKeyboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: GovDropdownKeyboardDirective, isStandalone: true, selector: "gov-dropdown[vGovDropdownKeyboard]", host: { listeners: { "gov-change": "onGovChange($event)" } }, providers: [
+            { provide: MENU_KEYBOARD_PORT, useExisting: GovDropdownKeyboardDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GovDropdownKeyboardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'gov-dropdown[vGovDropdownKeyboard]',
+                    host: {
+                        '(gov-change)': 'onGovChange($event)',
+                    },
+                    providers: [
+                        { provide: MENU_KEYBOARD_PORT, useExisting: GovDropdownKeyboardDirective },
+                    ],
+                }]
+        }] });
+
+const GOV_DROPDOWN_BUTTON_ACTIVE_ITEM_CLASS = 'v-dropdown-button__item--focused';
+
 class DropdownButtonComponent {
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -1108,8 +1283,16 @@ class DropdownButtonComponent {
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
     type = input(GovButtonType.solid, ...(ngDevMode ? [{ debugName: "type" }] : []));
     items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    keyboardNavigation = input(true, ...(ngDevMode ? [{ debugName: "keyboardNavigation" }] : []));
+    menuKeyboardDefaults = {
+        activeItemClass: GOV_DROPDOWN_BUTTON_ACTIVE_ITEM_CLASS,
+    };
     fireClick = output();
+    menuKeyboard = viewChild(MenuKeyboardDirective, ...(ngDevMode ? [{ debugName: "menuKeyboard" }] : []));
     fireClickItem(item) {
+        if (item.disabled) {
+            return;
+        }
         if (item.command) {
             item.command();
         }
@@ -1117,17 +1300,38 @@ class DropdownButtonComponent {
             this.fireClick.emit(item);
         }
     }
+    selectItem(item) {
+        if (item.disabled) {
+            return;
+        }
+        this.fireClickItem(item);
+        void this.menuKeyboard()?.close(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: DropdownButtonComponent, isStandalone: true, selector: "v-dropdown-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fireClick: "fireClick" }, providers: [
-            { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
-        ], ngImport: i0, template: "<gov-dropdown position=\"left\">\r\n    <v-button\r\n      [label]=\"label()\"\r\n      [icon]=\"icon()\"\r\n      [rounded]=\"rounded() ?? false\"\r\n      [outlined]=\"outlined() ?? false\"\r\n      [raised]=\"raised() ?? false\"\r\n      [severity]=\"severity()\"\r\n      [type]=\"type()\"\r\n      [size]=\"size()\"\r\n    />\r\n  \r\n    @if (items()?.length) {\r\n      <ul slot=\"list\">\r\n        @for (item of items(); track item.id) {\r\n          <li>\r\n            <v-button\r\n              class=\"w-100\"\r\n              [label]=\"item.label\"\r\n              [icon]=\"item.icon\"\r\n              [severity]=\"$any('normal')\"\r\n              [size]=\"'medium'\"\r\n              [type]=\"type()\"\r\n              (click)=\"fireClickItem(item)\"\r\n            />\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </gov-dropdown>\r\n  ", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovDropdown, selector: "gov-dropdown", inputs: ["identifier", "open", "position"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "library", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: DropdownButtonComponent, isStandalone: true, selector: "v-dropdown-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fireClick: "fireClick" }, providers: [
+            {
+                provide: DROPDOWN_BUTTON_COMPONENT_TOKEN,
+                useExisting: DropdownButtonComponent,
+            },
+        ], viewQueries: [{ propertyName: "menuKeyboard", first: true, predicate: MenuKeyboardDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<gov-dropdown\n  vGovDropdownKeyboard\n  vMenuKeyboard\n  [menuKeyboardItems]=\"items() ?? []\"\n  [menuKeyboardNavigation]=\"keyboardNavigation()\"\n  [menuKeyboardDefaults]=\"menuKeyboardDefaults\"\n  (menuKeyboardSelect)=\"fireClickItem($event)\"\n  position=\"left\"\n>\n  <v-button\n    vMenuKeyboardTrigger\n    class=\"v-dropdown-button__trigger\"\n    [label]=\"label()\"\n    [icon]=\"icon()\"\n    [rounded]=\"rounded() ?? false\"\n    [outlined]=\"outlined() ?? false\"\n    [raised]=\"raised() ?? false\"\n    [severity]=\"severity()\"\n    [type]=\"type()\"\n    [size]=\"size()\"\n  />\n\n  @if (items()?.length) {\n    <ul vMenuKeyboardList slot=\"list\" class=\"v-dropdown-button__menu\">\n      @for (item of items(); track item.id ?? $index; let i = $index) {\n        <li class=\"v-dropdown-button__item\" role=\"none\">\n          <v-button\n            vMenuKeyboardItem\n            [menuKeyboardItem]=\"item\"\n            class=\"w-100 v-button--dropdown-menu-item\"\n            [label]=\"item.label\"\n            [icon]=\"item.icon\"\n            [severity]=\"$any('normal')\"\n            [size]=\"'medium'\"\n            [type]=\"type()\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          />\n        </li>\n      }\n    </ul>\n  }\n</gov-dropdown>\n", styles: ["v-dropdown-button{display:inline-block}v-dropdown-button gov-dropdown{display:inline-block}v-dropdown-button .v-dropdown-button__trigger{display:inline-block}v-dropdown-button .v-dropdown-button__menu{outline:none;list-style:none;padding:0;margin:0;box-sizing:border-box;min-width:100%;width:100%}v-dropdown-button .v-dropdown-button__menu:focus,v-dropdown-button .v-dropdown-button__menu:focus-visible{outline:none}v-dropdown-button .v-dropdown-button__item{border-bottom:1px solid var(--v-dropdown-button-item-border, color-mix(in srgb, currentColor 14%, transparent))}v-dropdown-button .v-dropdown-button__item:last-child{border-bottom:none}v-dropdown-button .v-dropdown-button__item--focused,v-dropdown-button .v-dropdown-button__item:hover{background-color:var(--v-dropdown-button-item-active-bg, color-mix(in srgb, var(--status-focus, var(--status-info, #0066cc)) 20%, transparent))}v-dropdown-button .v-dropdown-button__item--focused>v-button.v-button--dropdown-menu-item,v-dropdown-button .v-dropdown-button__item:hover>v-button.v-button--dropdown-menu-item{background-color:inherit}v-dropdown-button .v-dropdown-button__item v-button.v-button--dropdown-menu-item[role=menuitem]:focus,v-dropdown-button .v-dropdown-button__item v-button.v-button--dropdown-menu-item[role=menuitem]:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovDropdown, selector: "gov-dropdown", inputs: ["identifier", "open", "position"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "library", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "directive", type: GovDropdownKeyboardDirective, selector: "gov-dropdown[vGovDropdownKeyboard]" }, { kind: "directive", type: MenuKeyboardDirective, selector: "[vMenuKeyboard]", inputs: ["menuKeyboardItems", "menuKeyboardNavigation", "menuKeyboardEnableWhenUnset", "menuKeyboardDefaults", "menuKeyboardItemId"], outputs: ["menuKeyboardSelect"], exportAs: ["menuKeyboard"] }, { kind: "directive", type: MenuKeyboardTriggerDirective, selector: "[vMenuKeyboardTrigger]" }, { kind: "directive", type: MenuKeyboardListDirective, selector: "[vMenuKeyboardList]" }, { kind: "directive", type: MenuKeyboardItemDirective, selector: "[vMenuKeyboardItem]", inputs: ["menuKeyboardItem"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-dropdown-button', imports: [GovDesignSystemModule, ButtonComponent], providers: [
-                        { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
-                    ], template: "<gov-dropdown position=\"left\">\r\n    <v-button\r\n      [label]=\"label()\"\r\n      [icon]=\"icon()\"\r\n      [rounded]=\"rounded() ?? false\"\r\n      [outlined]=\"outlined() ?? false\"\r\n      [raised]=\"raised() ?? false\"\r\n      [severity]=\"severity()\"\r\n      [type]=\"type()\"\r\n      [size]=\"size()\"\r\n    />\r\n  \r\n    @if (items()?.length) {\r\n      <ul slot=\"list\">\r\n        @for (item of items(); track item.id) {\r\n          <li>\r\n            <v-button\r\n              class=\"w-100\"\r\n              [label]=\"item.label\"\r\n              [icon]=\"item.icon\"\r\n              [severity]=\"$any('normal')\"\r\n              [size]=\"'medium'\"\r\n              [type]=\"type()\"\r\n              (click)=\"fireClickItem(item)\"\r\n            />\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </gov-dropdown>\r\n  " }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], fireClick: [{ type: i0.Output, args: ["fireClick"] }] } });
+            args: [{ selector: 'v-dropdown-button', encapsulation: ViewEncapsulation.None, imports: [
+                        GovDesignSystemModule,
+                        ButtonComponent,
+                        GovDropdownKeyboardDirective,
+                        MenuKeyboardDirective,
+                        MenuKeyboardTriggerDirective,
+                        MenuKeyboardListDirective,
+                        MenuKeyboardItemDirective,
+                    ], providers: [
+                        {
+                            provide: DROPDOWN_BUTTON_COMPONENT_TOKEN,
+                            useExisting: DropdownButtonComponent,
+                        },
+                    ], template: "<gov-dropdown\n  vGovDropdownKeyboard\n  vMenuKeyboard\n  [menuKeyboardItems]=\"items() ?? []\"\n  [menuKeyboardNavigation]=\"keyboardNavigation()\"\n  [menuKeyboardDefaults]=\"menuKeyboardDefaults\"\n  (menuKeyboardSelect)=\"fireClickItem($event)\"\n  position=\"left\"\n>\n  <v-button\n    vMenuKeyboardTrigger\n    class=\"v-dropdown-button__trigger\"\n    [label]=\"label()\"\n    [icon]=\"icon()\"\n    [rounded]=\"rounded() ?? false\"\n    [outlined]=\"outlined() ?? false\"\n    [raised]=\"raised() ?? false\"\n    [severity]=\"severity()\"\n    [type]=\"type()\"\n    [size]=\"size()\"\n  />\n\n  @if (items()?.length) {\n    <ul vMenuKeyboardList slot=\"list\" class=\"v-dropdown-button__menu\">\n      @for (item of items(); track item.id ?? $index; let i = $index) {\n        <li class=\"v-dropdown-button__item\" role=\"none\">\n          <v-button\n            vMenuKeyboardItem\n            [menuKeyboardItem]=\"item\"\n            class=\"w-100 v-button--dropdown-menu-item\"\n            [label]=\"item.label\"\n            [icon]=\"item.icon\"\n            [severity]=\"$any('normal')\"\n            [size]=\"'medium'\"\n            [type]=\"type()\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          />\n        </li>\n      }\n    </ul>\n  }\n</gov-dropdown>\n", styles: ["v-dropdown-button{display:inline-block}v-dropdown-button gov-dropdown{display:inline-block}v-dropdown-button .v-dropdown-button__trigger{display:inline-block}v-dropdown-button .v-dropdown-button__menu{outline:none;list-style:none;padding:0;margin:0;box-sizing:border-box;min-width:100%;width:100%}v-dropdown-button .v-dropdown-button__menu:focus,v-dropdown-button .v-dropdown-button__menu:focus-visible{outline:none}v-dropdown-button .v-dropdown-button__item{border-bottom:1px solid var(--v-dropdown-button-item-border, color-mix(in srgb, currentColor 14%, transparent))}v-dropdown-button .v-dropdown-button__item:last-child{border-bottom:none}v-dropdown-button .v-dropdown-button__item--focused,v-dropdown-button .v-dropdown-button__item:hover{background-color:var(--v-dropdown-button-item-active-bg, color-mix(in srgb, var(--status-focus, var(--status-info, #0066cc)) 20%, transparent))}v-dropdown-button .v-dropdown-button__item--focused>v-button.v-button--dropdown-menu-item,v-dropdown-button .v-dropdown-button__item:hover>v-button.v-button--dropdown-menu-item{background-color:inherit}v-dropdown-button .v-dropdown-button__item v-button.v-button--dropdown-menu-item[role=menuitem]:focus,v-dropdown-button .v-dropdown-button__item v-button.v-button--dropdown-menu-item[role=menuitem]:focus-visible{outline:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], keyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardNavigation", required: false }] }], fireClick: [{ type: i0.Output, args: ["fireClick"] }], menuKeyboard: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuKeyboardDirective), { isSignal: true }] }] } });
 
 class FormFieldComponent extends BaseFormInputComponent {
     constructor(ngControl) {
@@ -1958,7 +2162,7 @@ class ActionButtonGroupComponent extends UnsubscribeComponent {
                 provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
                 useExisting: ActionButtonGroupComponent,
             },
-        ], 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      [label]=\"showLabels ? action.label : undefined\"\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-dropdown-button\n      [label]=\"label\"\n      [icon]=\"menuIcon\"\n      [items]=\"menuItems\"\n    />\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }, { kind: "component", type: DropdownButtonComponent, selector: "v-dropdown-button", inputs: ["label", "icon", "rounded", "raised", "outlined", "severity", "size", "type", "items"], outputs: ["fireClick"] }], 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      [label]=\"showLabels ? action.label : undefined\"\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-dropdown-button\n      [label]=\"label\"\n      [icon]=\"menuIcon\"\n      [items]=\"menuItems\"\n    />\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }, { kind: "component", type: DropdownButtonComponent, selector: "v-dropdown-button", inputs: ["label", "icon", "rounded", "raised", "outlined", "severity", "size", "type", "items", "keyboardNavigation"], outputs: ["fireClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionButtonGroupComponent, decorators: [{
             type: Component,
@@ -3613,5 +3817,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonComponent, ActionButtonGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CheckboxComponent, ConfirmDialogComponent, DropdownButtonComponent, DropdownComponent, DynamicComponent, DynamicComponentFactoryService, ErrorComponent, FeatureListComponent, FilterComponent, FormFieldComponent, GenericFieldComponent, GenericFormComponent, GovColorPipe, GovInitService, GovMultiselectOptionsPipe, GovSizePipe, GovTagType, HeaderComponent, IconComponent, Icons, InputGroupComponent, LoaderComponent, MultiselectComponent, NotAuthenticatedComponent, NotAuthorizedComponent, NotFoundComponent, NumberInputComponent, PageHeaderComponent, PasswordComponent, RadioButtonComponent, SearchComponent, SectionComponent, SideMenuComponent, SideMenuModule, SnackbarComponent, SnackbarService, StepperComponent, SwitchComponent, TabViewComponent, TabViewItemComponent, TableComponent, TagComponent, TextareaComponent, TextfieldComponent, TooltipComponent, generateFormGroup, getColumnClass };
+export { ActionButtonComponent, ActionButtonGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CheckboxComponent, ConfirmDialogComponent, DropdownButtonComponent, DropdownComponent, DynamicComponent, DynamicComponentFactoryService, ErrorComponent, FeatureListComponent, FilterComponent, FormFieldComponent, GenericFieldComponent, GenericFormComponent, GovColorPipe, GovDropdownKeyboardDirective, GovInitService, GovMultiselectOptionsPipe, GovSizePipe, GovTagType, HeaderComponent, IconComponent, Icons, InputGroupComponent, LoaderComponent, MultiselectComponent, NotAuthenticatedComponent, NotAuthorizedComponent, NotFoundComponent, NumberInputComponent, PageHeaderComponent, PasswordComponent, RadioButtonComponent, SearchComponent, SectionComponent, SideMenuComponent, SideMenuModule, SnackbarComponent, SnackbarService, StepperComponent, SwitchComponent, TabViewComponent, TabViewItemComponent, TableComponent, TagComponent, TextareaComponent, TextfieldComponent, TooltipComponent, generateFormGroup, getColumnClass };
 //# sourceMappingURL=verisoft-ui-govcz.mjs.map