@verisoft/ui-govcz 21.0.3 → 21.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
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';
|
|
2
|
+
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';
|
|
3
3
|
import * as i1 from '@angular/router';
|
|
4
4
|
import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
|
|
5
5
|
import * as i2 from '@gov-design-system-ce/angular';
|
|
@@ -638,6 +638,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
638
638
|
class ConfirmDialogComponent extends UnsubscribeComponent {
|
|
639
639
|
dialogService = inject(DialogService);
|
|
640
640
|
cdr = inject(ChangeDetectorRef);
|
|
641
|
+
cancelButton;
|
|
642
|
+
confirmButton;
|
|
641
643
|
visible = false;
|
|
642
644
|
closable = false;
|
|
643
645
|
data = { severity: 'primary', headerIcon: 'info-circle' };
|
|
@@ -648,6 +650,9 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
|
|
|
648
650
|
this.data = x;
|
|
649
651
|
this.visible = true;
|
|
650
652
|
this.cdr.detectChanges();
|
|
653
|
+
setTimeout(() => {
|
|
654
|
+
this.setInitialFocus();
|
|
655
|
+
}, 100);
|
|
651
656
|
});
|
|
652
657
|
this.dialogService.closeEvent
|
|
653
658
|
.pipe(takeUntil(this.destroyed$))
|
|
@@ -657,6 +662,18 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
|
|
|
657
662
|
this.cdr.detectChanges();
|
|
658
663
|
});
|
|
659
664
|
}
|
|
665
|
+
setInitialFocus() {
|
|
666
|
+
if (this.data.showCancelButton && this.cancelButton?.nativeElement) {
|
|
667
|
+
const buttonElement = this.cancelButton.nativeElement.querySelector('button')
|
|
668
|
+
|| this.cancelButton.nativeElement;
|
|
669
|
+
buttonElement.focus();
|
|
670
|
+
}
|
|
671
|
+
else if (this.confirmButton?.nativeElement) {
|
|
672
|
+
const buttonElement = this.confirmButton.nativeElement.querySelector('button')
|
|
673
|
+
|| this.confirmButton.nativeElement;
|
|
674
|
+
buttonElement.focus();
|
|
675
|
+
}
|
|
676
|
+
}
|
|
660
677
|
onKeyDown(event) {
|
|
661
678
|
if (!this.visible)
|
|
662
679
|
return;
|
|
@@ -683,7 +700,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
|
|
|
683
700
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
684
701
|
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: [
|
|
685
702
|
{ provide: CONFIRM_DIALOG_COMPONENT_TOKEN, useExisting: ConfirmDialogComponent },
|
|
686
|
-
], 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
|
|
703
|
+
], viewQueries: [{ propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: ElementRef }, { propertyName: "confirmButton", first: true, predicate: ["confirmButton"], 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" }] });
|
|
687
704
|
}
|
|
688
705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
689
706
|
type: Component,
|
|
@@ -692,8 +709,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
692
709
|
], host: {
|
|
693
710
|
'(document:keydown)': 'onKeyDown($event)',
|
|
694
711
|
'[attr.tabindex]': 'visible ? "0" : null',
|
|
695
|
-
}, 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
|
|
696
|
-
}], propDecorators: {
|
|
712
|
+
}, 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"] }]
|
|
713
|
+
}], propDecorators: { cancelButton: [{
|
|
714
|
+
type: ViewChild,
|
|
715
|
+
args: ['cancelButton', { read: ElementRef }]
|
|
716
|
+
}], confirmButton: [{
|
|
717
|
+
type: ViewChild,
|
|
718
|
+
args: ['confirmButton', { read: ElementRef }]
|
|
719
|
+
}], onKeyDown: [{
|
|
697
720
|
type: HostListener,
|
|
698
721
|
args: ['document:keydown', ['$event']]
|
|
699
722
|
}] } });
|