@verisoft/ui-govcz 21.0.7 → 21.0.8

package/fesm2022/verisoft-ui-govcz.mjs

@@ -645,12 +645,25 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
     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
@@ -658,6 +671,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
             .subscribe(() => {
             this.data = {};
             this.visible = false;
+            this.confirmButtonDisabled = false;
             this.cdr.detectChanges();
         });
     }
@@ -670,6 +684,8 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
             activeElement.tagName === 'SELECT' ||
             activeElement.isContentEditable);
         if (event.key === 'Enter') {
+            if (this.confirmButtonDisabled)
+                return;
             event.preventDefault();
             event.stopPropagation();
             if (isInputField) {
@@ -683,6 +699,8 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
             }
         }
         if (event.key === ' ' && !isInputField) {
+            if (this.confirmButtonDisabled)
+                return;
             event.preventDefault();
             this.dialogClick(true);
         }
@@ -736,6 +754,9 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
         }
     }
     dialogClick(confirm) {
+        if (confirm && this.confirmButtonDisabled) {
+            return;
+        }
         const { confirmButtonFn, cancelButtonFn } = this.data;
         if (confirm && confirmButtonFn) {
             confirmButtonFn();
@@ -749,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 },
-        ], 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        (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,
@@ -758,7 +779,7 @@ 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"] }]
+                    }, 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 }]