@verisoft/ui-govcz 21.0.9 → 21.0.10

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, ViewEncapsulation, HostListener, NO_ERRORS_SCHEMA, output, ContentChild, ContentChildren, NgModule, Inject, effect, Directive, forwardRef, InjectionToken } 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, Directive, forwardRef, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule, Router, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute } from '@angular/router';
 import * as i2 from '@gov-design-system-ce/angular';
@@ -502,86 +502,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class DynamicComponentFactoryService {
-    componentFactoryResolver;
-    constructor(componentFactoryResolver) {
-        this.componentFactoryResolver = componentFactoryResolver;
-    }
-    ngOnDestroy() {
-        this.unsubscribeComponentEvents(this);
-    }
-    async createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+    outputSubscriptions = new WeakMap();
+    createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
         viewContainerRef.clear();
-        const component = viewContainerRef.createComponent(componentFactory, undefined, injector);
-        this.setComponentDataInt(componentFactory, component, inputs);
-        this.fireComponentEvents(component.instance, inputs);
+        const component = viewContainerRef.createComponent(componentType, {
+            injector,
+        });
+        this.setComponentDataInt(componentType, component, inputs);
+        this.fireComponentEvents(componentType, component.instance, inputs);
         return component;
     }
+    cleanupComponent(instance) {
+        this.unsubscribeComponentEvents(instance);
+    }
     setComponentData(component, inputs) {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(component.componentType);
-        this.setComponentDataInt(factory, component, inputs);
+        this.setComponentDataInt(component.componentType, component, inputs);
     }
     unsubscribeComponentEvents(instance) {
-        const subscriptionStoreKey = '__outputSubscriptions__';
-        const subscriptions = instance[subscriptionStoreKey];
+        const subscriptions = this.outputSubscriptions.get(instance);
         if (subscriptions) {
             subscriptions.forEach((sub) => sub.unsubscribe());
             subscriptions.clear();
+            this.outputSubscriptions.delete(instance);
         }
     }
-    fireComponentEvents(instance, inputs) {
+    fireComponentEvents(componentType, instance, inputs) {
         if (!instance || typeof instance !== 'object')
             return;
-        this.fireInputComponentEvents(instance, inputs);
-        this.fireOutputComponentEvents(instance, inputs);
+        this.fireOutputComponentEvents(componentType, instance, inputs);
     }
-    setComponentDataInt(factory, component, inputs) {
+    setComponentDataInt(componentType, component, inputs) {
         if (inputs) {
-            const propertyNames = factory.inputs.map((x) => x.propName);
+            const propertyNames = this.getInputNames(componentType);
             const inputsHash = new Set(propertyNames);
             Object.keys(inputs)
                 .filter((x) => inputsHash.has(x))
                 .forEach((x) => {
-                component.instance[x] = inputs[x];
+                component.setInput(x, inputs[x]);
             });
         }
     }
-    fireInputComponentEvents(instance, inputs) {
-        const onChangeComponent = instance;
-        if (onChangeComponent.ngOnChanges && inputs) {
-            const changeEventArgs = Object.keys(inputs).reduce((changes, key) => {
-                const inputValue = inputs[key];
-                changes[key] = new SimpleChange(undefined, inputValue, true);
-                return changes;
-            }, {});
-            onChangeComponent.ngOnChanges(changeEventArgs);
-        }
-    }
-    fireOutputComponentEvents(instance, inputs) {
-        const outputs = Object.keys(inputs).filter((key) => {
-            const emitter = instance[key];
-            return emitter instanceof EventEmitter;
-        });
-        const subscriptionStoreKey = '__outputSubscriptions__';
-        if (!(subscriptionStoreKey in instance)) {
-            instance[subscriptionStoreKey] = new Map();
+    fireOutputComponentEvents(componentType, instance, inputs) {
+        const outputNames = new Set(this.getOutputNames(componentType));
+        const outputs = Object.keys(inputs ?? {}).filter((key) => outputNames.has(key));
+        let subscriptions = this.outputSubscriptions.get(instance);
+        if (!subscriptions) {
+            subscriptions = new Map();
+            this.outputSubscriptions.set(instance, subscriptions);
         }
-        const subscriptions = instance[subscriptionStoreKey];
         for (const outputKey of outputs) {
-            const eventEmitter = instance[outputKey];
+            const outputRef = instance[outputKey];
             const callback = inputs[outputKey];
-            if (eventEmitter && typeof callback === 'function') {
+            if (outputRef &&
+                typeof outputRef.subscribe === 'function' &&
+                typeof callback === 'function') {
                 if (subscriptions.has(outputKey)) {
                     subscriptions.get(outputKey).unsubscribe();
                 }
-                const subscription = eventEmitter.subscribe((value) => callback(value));
+                const subscription = outputRef.subscribe((value) => callback(value));
                 subscriptions.set(outputKey, subscription);
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+    getInputNames(componentType) {
+        return (reflectComponentType(componentType)?.inputs.map((input) => input.propName) ?? []);
+    }
+    getOutputNames(componentType) {
+        return (reflectComponentType(componentType)?.outputs.map((output) => output.propName) ?? []);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, decorators: [{
@@ -589,7 +579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }] });
+        }] });
 
 class DynamicComponent {
     componentType;
@@ -598,6 +588,7 @@ class DynamicComponent {
     factoryServices = inject(DynamicComponentFactoryService);
     changeDetectorRef = inject(ChangeDetectorRef);
     injector = inject(Injector);
+    componentRef;
     ngOnChanges() {
         this.createComponent();
     }
@@ -605,9 +596,20 @@ class DynamicComponent {
         this.createComponent();
         this.changeDetectorRef.detectChanges();
     }
+    ngOnDestroy() {
+        this.destroyCurrentComponent();
+    }
     createComponent() {
         if (this.container) {
-            this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
+            this.destroyCurrentComponent();
+            this.componentRef = this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
+        }
+    }
+    destroyCurrentComponent() {
+        if (this.componentRef) {
+            this.factoryServices.cleanupComponent(this.componentRef.instance);
+            this.componentRef.destroy();
+            this.componentRef = undefined;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -674,7 +676,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
                 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" }] });
+        ], 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]=\"\n    data.closable !== undefined ? !data.closable : false\n  \"\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    [disabled]=\"data.confirmButtonDisabled\"\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: "21.1.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -688,7 +690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             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"] }]
+                    ], template: "<gov-dialog\n  [open]=\"visible\"\n  [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\n  [attr.block-backdrop-close]=\"\n    data.closable !== undefined ? !data.closable : false\n  \"\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    [disabled]=\"data.confirmButtonDisabled\"\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 }] });
 
 class TooltipComponent {