@verisoft/ui-govcz 21.0.6 → 21.0.8

package/fesm2022/verisoft-ui-govcz.mjs

@@ -1,5 +1,5 @@
 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, HostListener, ViewEncapsulation, NO_ERRORS_SCHEMA, output, ContentChild, ContentChildren, NgModule, Inject, signal, Directive, forwardRef, InjectionToken } from '@angular/core';
+import { Component, Pipe, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, Input, inject, Optional, Self, input, SimpleChange, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, ViewChild, ElementRef, HostListener, ViewEncapsulation, NO_ERRORS_SCHEMA, output, ContentChild, ContentChildren, NgModule, Inject, signal, Directive, forwardRef, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import * as i2 from '@gov-design-system-ce/angular';
@@ -639,15 +639,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class ConfirmDialogComponent extends UnsubscribeComponent {
     dialogService = inject(DialogService);
     cdr = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
+    confirmButton;
+    cancelButton;
     visible = false;
     closable = false;
     data = { severity: 'primary', headerIcon: 'info-circle' };
+    confirmButtonDisabled = false;
     ngOnInit() {
         this.dialogService.showEvent
             .pipe(takeUntil(this.destroyed$))
             .subscribe((x) => {
             this.data = x;
             this.visible = true;
+            this.confirmButtonDisabled = false;
+            if (x.data && typeof x.data === 'object' && 'registerComponent' in x.data) {
+                setTimeout(() => {
+                    const dialogComponent = x.data.componentInstance;
+                    if (dialogComponent?.isValid$) {
+                        dialogComponent.isValid$.pipe(takeUntil(this.destroyed$)).subscribe((valid) => {
+                            this.confirmButtonDisabled = !valid;
+                            this.cdr.detectChanges();
+                        });
+                    }
+                }, 100);
+            }
             this.cdr.detectChanges();
         });
         this.dialogService.closeEvent
@@ -655,6 +671,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
             .subscribe(() => {
             this.data = {};
             this.visible = false;
+            this.confirmButtonDisabled = false;
             this.cdr.detectChanges();
         });
     }
@@ -667,29 +684,79 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
             activeElement.tagName === 'SELECT' ||
             activeElement.isContentEditable);
         if (event.key === 'Enter') {
+            if (this.confirmButtonDisabled)
+                return;
             event.preventDefault();
-            if (isInputField && activeElement.blur) {
-                activeElement.blur();
+            event.stopPropagation();
+            if (isInputField) {
+                this.focusConfirmButton();
+                setTimeout(() => {
+                    this.dialogClick(true);
+                }, 50);
             }
-            setTimeout(() => {
+            else {
                 this.dialogClick(true);
-            }, 10);
+            }
         }
         if (event.key === ' ' && !isInputField) {
+            if (this.confirmButtonDisabled)
+                return;
             event.preventDefault();
             this.dialogClick(true);
         }
         if (event.key === 'Escape') {
             event.preventDefault();
-            if (isInputField && activeElement.blur) {
-                activeElement.blur();
+            event.stopPropagation();
+            if (isInputField) {
+                this.focusCancelButton();
+                setTimeout(() => {
+                    this.dialogClick(false);
+                }, 50);
             }
-            setTimeout(() => {
+            else {
                 this.dialogClick(false);
-            }, 10);
+            }
+        }
+    }
+    focusConfirmButton() {
+        if (this.confirmButton?.nativeElement) {
+            this.focusButton(this.confirmButton.nativeElement);
+        }
+    }
+    focusCancelButton() {
+        if (this.cancelButton?.nativeElement) {
+            this.focusButton(this.cancelButton.nativeElement);
+        }
+    }
+    focusButton(element) {
+        try {
+            if (element.tagName === 'BUTTON') {
+                element.focus();
+                return;
+            }
+            const button = element.querySelector('button');
+            if (button) {
+                button.focus();
+                return;
+            }
+            const shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                const shadowButton = shadowRoot.querySelector('button');
+                if (shadowButton) {
+                    shadowButton.focus();
+                    return;
+                }
+            }
+            element.focus();
+        }
+        catch (error) {
+            console.warn('Failed to focus button:', error);
         }
     }
     dialogClick(confirm) {
+        if (confirm && this.confirmButtonDisabled) {
+            return;
+        }
         const { confirmButtonFn, cancelButtonFn } = this.data;
         if (confirm && confirmButtonFn) {
             confirmButtonFn();
@@ -703,7 +770,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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        #confirmButton\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        #cancelButton\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>", 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" }] });
+        ], viewQueries: [{ propertyName: "confirmButton", first: true, predicate: ["confirmButton"], descendants: true, read: ElementRef }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: ElementRef }], 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        #confirmButton\n        color=\"primary\"\n        size=\"m\"\n        type=\"solid\"\n        slot=\"footer\"\n        [disabled]=\"confirmButtonDisabled\"\n        (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n    >\n        {{ data.confirmButtonText ?? 'Yes'}}\n    </gov-button>\n    \n    <gov-button\n        #cancelButton\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>", 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: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -712,8 +779,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], 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        #confirmButton\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        #cancelButton\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>", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"] }]
-        }], propDecorators: { onKeyDown: [{
+                    }, 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        #confirmButton\n        color=\"primary\"\n        size=\"m\"\n        type=\"solid\"\n        slot=\"footer\"\n        [disabled]=\"confirmButtonDisabled\"\n        (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n    >\n        {{ data.confirmButtonText ?? 'Yes'}}\n    </gov-button>\n    \n    <gov-button\n        #cancelButton\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>", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"] }]
+        }], propDecorators: { confirmButton: [{
+                type: ViewChild,
+                args: ['confirmButton', { read: ElementRef }]
+            }], cancelButton: [{
+                type: ViewChild,
+                args: ['cancelButton', { read: ElementRef }]
+            }], onKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });