@verisoft/ui-primeng 21.0.9 → 21.0.10

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 { inject, Input, Optional, Self, Component, forwardRef, ChangeDetectionStrategy, Pipe, input, computed, ViewEncapsulation, Inject, Injectable, EventEmitter, ViewChild, Output, NgModule, ChangeDetectorRef, ContentChild, ContentChildren, SimpleChange, Injector, ViewContainerRef, Directive, InjectionToken } from '@angular/core';
2
+ import { inject, Input, Optional, Self, Component, forwardRef, ChangeDetectionStrategy, Pipe, input, computed, ViewEncapsulation, Inject, Injectable, EventEmitter, ViewChild, Output, NgModule, ChangeDetectorRef, ContentChild, ContentChildren, reflectComponentType, Injector, ViewContainerRef, Directive, InjectionToken } from '@angular/core';
3
3
  import * as i1 from '@angular/forms';
4
4
  import { ReactiveFormsModule, UntypedFormGroup, UntypedFormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
5
5
  import * as i1$6 from '@verisoft/ui-core';
@@ -1948,85 +1948,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
1948
1948
  type: Input
1949
1949
  }] } });
1950
1950
 
1951
- /* eslint-disable @typescript-eslint/no-explicit-any */
1952
1951
  class DynamicComponentFactoryService {
1953
- constructor(componentFactoryResolver) {
1954
- this.componentFactoryResolver = componentFactoryResolver;
1955
- }
1956
- ngOnDestroy() {
1957
- this.unsubscribeComponentEvents(this);
1952
+ constructor() {
1953
+ this.outputSubscriptions = new WeakMap();
1958
1954
  }
1959
- async createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
1960
- const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
1955
+ createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
1961
1956
  viewContainerRef.clear();
1962
- const component = viewContainerRef.createComponent(componentFactory, undefined, injector);
1963
- this.setComponentDataInt(componentFactory, component, inputs);
1964
- this.fireComponentEvents(component.instance, inputs);
1957
+ const component = viewContainerRef.createComponent(componentType, {
1958
+ injector,
1959
+ });
1960
+ this.setComponentDataInt(componentType, component, inputs);
1961
+ this.fireComponentEvents(componentType, component.instance, inputs);
1965
1962
  return component;
1966
1963
  }
1964
+ cleanupComponent(instance) {
1965
+ this.unsubscribeComponentEvents(instance);
1966
+ }
1967
1967
  setComponentData(component, inputs) {
1968
- const factory = this.componentFactoryResolver.resolveComponentFactory(component.componentType);
1969
- this.setComponentDataInt(factory, component, inputs);
1968
+ this.setComponentDataInt(component.componentType, component, inputs);
1970
1969
  }
1971
1970
  unsubscribeComponentEvents(instance) {
1972
- const subscriptionStoreKey = '__outputSubscriptions__';
1973
- const subscriptions = instance[subscriptionStoreKey];
1971
+ const subscriptions = this.outputSubscriptions.get(instance);
1974
1972
  if (subscriptions) {
1975
1973
  subscriptions.forEach((sub) => sub.unsubscribe());
1976
1974
  subscriptions.clear();
1975
+ this.outputSubscriptions.delete(instance);
1977
1976
  }
1978
1977
  }
1979
- fireComponentEvents(instance, inputs) {
1978
+ fireComponentEvents(componentType, instance, inputs) {
1980
1979
  if (!instance || typeof instance !== 'object')
1981
1980
  return;
1982
- this.fireInputComponentEvents(instance, inputs);
1983
- this.fireOutputComponentEvents(instance, inputs);
1981
+ this.fireOutputComponentEvents(componentType, instance, inputs);
1984
1982
  }
1985
- setComponentDataInt(factory, component, inputs) {
1983
+ setComponentDataInt(componentType, component, inputs) {
1986
1984
  if (inputs) {
1987
- const propertyNames = factory.inputs.map((x) => x.propName);
1985
+ const propertyNames = this.getInputNames(componentType);
1988
1986
  const inputsHash = new Set(propertyNames);
1989
1987
  Object.keys(inputs)
1990
1988
  .filter((x) => inputsHash.has(x))
1991
1989
  .forEach((x) => {
1992
- component.instance[x] = inputs[x];
1990
+ component.setInput(x, inputs[x]);
1993
1991
  });
1994
1992
  }
1995
1993
  }
1996
- fireInputComponentEvents(instance, inputs) {
1997
- const onChangeComponent = instance;
1998
- if (onChangeComponent.ngOnChanges && inputs) {
1999
- const changeEventArgs = Object.keys(inputs).reduce((changes, key) => {
2000
- const inputValue = inputs[key];
2001
- changes[key] = new SimpleChange(undefined, inputValue, true);
2002
- return changes;
2003
- }, {});
2004
- onChangeComponent.ngOnChanges(changeEventArgs);
2005
- }
2006
- }
2007
- fireOutputComponentEvents(instance, inputs) {
2008
- const outputs = Object.keys(inputs).filter((key) => {
2009
- const emitter = instance[key];
2010
- return emitter instanceof EventEmitter;
2011
- });
2012
- const subscriptionStoreKey = '__outputSubscriptions__';
2013
- if (!(subscriptionStoreKey in instance)) {
2014
- instance[subscriptionStoreKey] = new Map();
1994
+ fireOutputComponentEvents(componentType, instance, inputs) {
1995
+ const outputNames = new Set(this.getOutputNames(componentType));
1996
+ const outputs = Object.keys(inputs ?? {}).filter((key) => outputNames.has(key));
1997
+ let subscriptions = this.outputSubscriptions.get(instance);
1998
+ if (!subscriptions) {
1999
+ subscriptions = new Map();
2000
+ this.outputSubscriptions.set(instance, subscriptions);
2015
2001
  }
2016
- const subscriptions = instance[subscriptionStoreKey];
2017
2002
  for (const outputKey of outputs) {
2018
- const eventEmitter = instance[outputKey];
2003
+ const outputRef = instance[outputKey];
2019
2004
  const callback = inputs[outputKey];
2020
- if (eventEmitter && typeof callback === 'function') {
2005
+ if (outputRef &&
2006
+ typeof outputRef.subscribe === 'function' &&
2007
+ typeof callback === 'function') {
2021
2008
  if (subscriptions.has(outputKey)) {
2022
2009
  subscriptions.get(outputKey).unsubscribe();
2023
2010
  }
2024
- const subscription = eventEmitter.subscribe((value) => callback(value));
2011
+ const subscription = outputRef.subscribe((value) => callback(value));
2025
2012
  subscriptions.set(outputKey, subscription);
2026
2013
  }
2027
2014
  }
2028
2015
  }
2029
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
2016
+ getInputNames(componentType) {
2017
+ return (reflectComponentType(componentType)?.inputs.map((input) => input.propName) ?? []);
2018
+ }
2019
+ getOutputNames(componentType) {
2020
+ return (reflectComponentType(componentType)?.outputs.map((output) => output.propName) ?? []);
2021
+ }
2022
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2030
2023
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, providedIn: 'root' }); }
2031
2024
  }
2032
2025
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, decorators: [{
@@ -2034,7 +2027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
2034
2027
  args: [{
2035
2028
  providedIn: 'root',
2036
2029
  }]
2037
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }] });
2030
+ }] });
2038
2031
 
2039
2032
  class DynamicComponent {
2040
2033
  constructor() {
@@ -2049,9 +2042,20 @@ class DynamicComponent {
2049
2042
  this.createComponent();
2050
2043
  this.changeDetectorRef.detectChanges();
2051
2044
  }
2045
+ ngOnDestroy() {
2046
+ this.destroyCurrentComponent();
2047
+ }
2052
2048
  createComponent() {
2053
2049
  if (this.container) {
2054
- this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
2050
+ this.destroyCurrentComponent();
2051
+ this.componentRef = this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
2052
+ }
2053
+ }
2054
+ destroyCurrentComponent() {
2055
+ if (this.componentRef) {
2056
+ this.factoryServices.cleanupComponent(this.componentRef.instance);
2057
+ this.componentRef.destroy();
2058
+ this.componentRef = undefined;
2055
2059
  }
2056
2060
  }
2057
2061
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -2217,7 +2221,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
2217
2221
  provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
2218
2222
  useExisting: ConfirmDialogComponent,
2219
2223
  },
2220
- ], usesInheritance: true, ngImport: i0, template: "@if (data) {\n <div class=\"v-dialog d-flex justify-content-center\">\n <p-dialog\n [(visible)]=\"visible\"\n [modal]=\"true\"\n [closable]=\"closable\"\n [style]=\"{ width: '25rem' }\"\n >\n <ng-template pTemplate=\"header\">\n <div\n class=\"v-dialog-header w-100 align-items-center d-flex justify-content-center\"\n >\n <h1 class=\"text-center me-3\">{{ data.title }}</h1>\n <i class=\"{{ data.headerIcon }} text-{{ data.severity }}\"></i>\n </div>\n </ng-template>\n <div class=\"v-dialog-content w-100 align-items-center text-center\">\n @if (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 </div>\n <ng-template pTemplate=\"footer\">\n <div\n class=\"v-dialog-footer d-flex justify-content-center w-100 gap-3\"\n [ngClass]=\"{\n 'flex-row-reverse': data.buttonOrder === 'cancel-confirm'\n }\"\n >\n <v-button\n [label]=\"data.confirmButtonText ?? 'Yes'\"\n [severity]=\"data.severity\"\n (click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n />\n @if (data.showCancelButton && data.severity !== 'success') {\n <v-button\n [label]=\"data.cancelButtonText ?? 'No'\"\n [outlined]=\"true\"\n [severity]=\"'secondary'\"\n (click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n />\n }\n </div>\n </ng-template>\n </p-dialog>\n </div>\n}\n", styles: [".v-dialog-content *{line-height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$6.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "severity", "routerLink", "size", "queryParams"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: DynamicComponent, selector: "v-dynamic-component", inputs: ["componentType", "data"] }] }); }
2224
+ ], usesInheritance: true, ngImport: i0, template: "@if (data) {\n<div class=\"v-dialog d-flex justify-content-center\">\n <p-dialog\n [(visible)]=\"visible\"\n [modal]=\"true\"\n [closable]=\"closable\"\n [style]=\"{ width: '25rem' }\"\n >\n <ng-template pTemplate=\"header\">\n <div\n class=\"v-dialog-header w-100 align-items-center d-flex justify-content-center\"\n >\n <h1 class=\"text-center me-3\">{{ data.title }}</h1>\n <i class=\"{{ data.headerIcon }} text-{{ data.severity }}\"></i>\n </div>\n </ng-template>\n <div class=\"v-dialog-content w-100 align-items-center text-center\">\n @if (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 </div>\n <ng-template pTemplate=\"footer\">\n <div\n class=\"v-dialog-footer d-flex justify-content-center w-100 gap-3\"\n [ngClass]=\"{\n 'flex-row-reverse': data.buttonOrder === 'cancel-confirm'\n }\"\n >\n <v-button\n [label]=\"data.confirmButtonText ?? 'Yes'\"\n [severity]=\"data.severity\"\n [disabled]=\"data.confirmButtonDisabled ?? false\"\n (click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n />\n @if (data.showCancelButton && data.severity !== 'success') {\n <v-button\n [label]=\"data.cancelButtonText ?? 'No'\"\n [outlined]=\"true\"\n [severity]=\"'secondary'\"\n (click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n />\n }\n </div>\n </ng-template>\n </p-dialog>\n</div>\n}\n", styles: [".v-dialog-content *{line-height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$6.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "severity", "routerLink", "size", "queryParams"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: DynamicComponent, selector: "v-dynamic-component", inputs: ["componentType", "data"] }] }); }
2221
2225
  }
2222
2226
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
2223
2227
  type: Component,
@@ -2232,7 +2236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
2232
2236
  provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
2233
2237
  useExisting: ConfirmDialogComponent,
2234
2238
  },
2235
- ], template: "@if (data) {\n <div class=\"v-dialog d-flex justify-content-center\">\n <p-dialog\n [(visible)]=\"visible\"\n [modal]=\"true\"\n [closable]=\"closable\"\n [style]=\"{ width: '25rem' }\"\n >\n <ng-template pTemplate=\"header\">\n <div\n class=\"v-dialog-header w-100 align-items-center d-flex justify-content-center\"\n >\n <h1 class=\"text-center me-3\">{{ data.title }}</h1>\n <i class=\"{{ data.headerIcon }} text-{{ data.severity }}\"></i>\n </div>\n </ng-template>\n <div class=\"v-dialog-content w-100 align-items-center text-center\">\n @if (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 </div>\n <ng-template pTemplate=\"footer\">\n <div\n class=\"v-dialog-footer d-flex justify-content-center w-100 gap-3\"\n [ngClass]=\"{\n 'flex-row-reverse': data.buttonOrder === 'cancel-confirm'\n }\"\n >\n <v-button\n [label]=\"data.confirmButtonText ?? 'Yes'\"\n [severity]=\"data.severity\"\n (click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n />\n @if (data.showCancelButton && data.severity !== 'success') {\n <v-button\n [label]=\"data.cancelButtonText ?? 'No'\"\n [outlined]=\"true\"\n [severity]=\"'secondary'\"\n (click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n />\n }\n </div>\n </ng-template>\n </p-dialog>\n </div>\n}\n", styles: [".v-dialog-content *{line-height:1.5rem}\n"] }]
2239
+ ], template: "@if (data) {\n<div class=\"v-dialog d-flex justify-content-center\">\n <p-dialog\n [(visible)]=\"visible\"\n [modal]=\"true\"\n [closable]=\"closable\"\n [style]=\"{ width: '25rem' }\"\n >\n <ng-template pTemplate=\"header\">\n <div\n class=\"v-dialog-header w-100 align-items-center d-flex justify-content-center\"\n >\n <h1 class=\"text-center me-3\">{{ data.title }}</h1>\n <i class=\"{{ data.headerIcon }} text-{{ data.severity }}\"></i>\n </div>\n </ng-template>\n <div class=\"v-dialog-content w-100 align-items-center text-center\">\n @if (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 </div>\n <ng-template pTemplate=\"footer\">\n <div\n class=\"v-dialog-footer d-flex justify-content-center w-100 gap-3\"\n [ngClass]=\"{\n 'flex-row-reverse': data.buttonOrder === 'cancel-confirm'\n }\"\n >\n <v-button\n [label]=\"data.confirmButtonText ?? 'Yes'\"\n [severity]=\"data.severity\"\n [disabled]=\"data.confirmButtonDisabled ?? false\"\n (click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n />\n @if (data.showCancelButton && data.severity !== 'success') {\n <v-button\n [label]=\"data.cancelButtonText ?? 'No'\"\n [outlined]=\"true\"\n [severity]=\"'secondary'\"\n (click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n />\n }\n </div>\n </ng-template>\n </p-dialog>\n</div>\n}\n", styles: [".v-dialog-content *{line-height:1.5rem}\n"] }]
2236
2240
  }], ctorParameters: () => [{ type: i1$6.DialogService }, { type: i0.ChangeDetectorRef }] });
2237
2241
 
2238
2242
  class SwitchComponent extends BaseFormInputComponent {