@verisoft/ui-primeng 21.0.9 → 21.0.11

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';
@@ -106,6 +106,12 @@ const Icons = {
106
106
  check: 'pi pi-check',
107
107
  envelope: 'pi pi-envelope',
108
108
  loader: 'pi pi-loader',
109
+ file: 'pi pi-file',
110
+ map: 'pi pi-map',
111
+ arrowCounterclockwise: 'pi pi-arrow-counterclockwise',
112
+ folder: 'pi pi-folder',
113
+ eye: 'pi pi-eye',
114
+ box: 'pi pi-box',
109
115
  };
110
116
 
111
117
  class FormFieldComponent extends BaseFormInputComponent {
@@ -1948,85 +1954,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
1948
1954
  type: Input
1949
1955
  }] } });
1950
1956
 
1951
- /* eslint-disable @typescript-eslint/no-explicit-any */
1952
1957
  class DynamicComponentFactoryService {
1953
- constructor(componentFactoryResolver) {
1954
- this.componentFactoryResolver = componentFactoryResolver;
1955
- }
1956
- ngOnDestroy() {
1957
- this.unsubscribeComponentEvents(this);
1958
+ constructor() {
1959
+ this.outputSubscriptions = new WeakMap();
1958
1960
  }
1959
- async createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
1960
- const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
1961
+ createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
1961
1962
  viewContainerRef.clear();
1962
- const component = viewContainerRef.createComponent(componentFactory, undefined, injector);
1963
- this.setComponentDataInt(componentFactory, component, inputs);
1964
- this.fireComponentEvents(component.instance, inputs);
1963
+ const component = viewContainerRef.createComponent(componentType, {
1964
+ injector,
1965
+ });
1966
+ this.setComponentDataInt(componentType, component, inputs);
1967
+ this.fireComponentEvents(componentType, component.instance, inputs);
1965
1968
  return component;
1966
1969
  }
1970
+ cleanupComponent(instance) {
1971
+ this.unsubscribeComponentEvents(instance);
1972
+ }
1967
1973
  setComponentData(component, inputs) {
1968
- const factory = this.componentFactoryResolver.resolveComponentFactory(component.componentType);
1969
- this.setComponentDataInt(factory, component, inputs);
1974
+ this.setComponentDataInt(component.componentType, component, inputs);
1970
1975
  }
1971
1976
  unsubscribeComponentEvents(instance) {
1972
- const subscriptionStoreKey = '__outputSubscriptions__';
1973
- const subscriptions = instance[subscriptionStoreKey];
1977
+ const subscriptions = this.outputSubscriptions.get(instance);
1974
1978
  if (subscriptions) {
1975
1979
  subscriptions.forEach((sub) => sub.unsubscribe());
1976
1980
  subscriptions.clear();
1981
+ this.outputSubscriptions.delete(instance);
1977
1982
  }
1978
1983
  }
1979
- fireComponentEvents(instance, inputs) {
1984
+ fireComponentEvents(componentType, instance, inputs) {
1980
1985
  if (!instance || typeof instance !== 'object')
1981
1986
  return;
1982
- this.fireInputComponentEvents(instance, inputs);
1983
- this.fireOutputComponentEvents(instance, inputs);
1987
+ this.fireOutputComponentEvents(componentType, instance, inputs);
1984
1988
  }
1985
- setComponentDataInt(factory, component, inputs) {
1989
+ setComponentDataInt(componentType, component, inputs) {
1986
1990
  if (inputs) {
1987
- const propertyNames = factory.inputs.map((x) => x.propName);
1991
+ const propertyNames = this.getInputNames(componentType);
1988
1992
  const inputsHash = new Set(propertyNames);
1989
1993
  Object.keys(inputs)
1990
1994
  .filter((x) => inputsHash.has(x))
1991
1995
  .forEach((x) => {
1992
- component.instance[x] = inputs[x];
1996
+ component.setInput(x, inputs[x]);
1993
1997
  });
1994
1998
  }
1995
1999
  }
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();
2000
+ fireOutputComponentEvents(componentType, instance, inputs) {
2001
+ const outputNames = new Set(this.getOutputNames(componentType));
2002
+ const outputs = Object.keys(inputs ?? {}).filter((key) => outputNames.has(key));
2003
+ let subscriptions = this.outputSubscriptions.get(instance);
2004
+ if (!subscriptions) {
2005
+ subscriptions = new Map();
2006
+ this.outputSubscriptions.set(instance, subscriptions);
2015
2007
  }
2016
- const subscriptions = instance[subscriptionStoreKey];
2017
2008
  for (const outputKey of outputs) {
2018
- const eventEmitter = instance[outputKey];
2009
+ const outputRef = instance[outputKey];
2019
2010
  const callback = inputs[outputKey];
2020
- if (eventEmitter && typeof callback === 'function') {
2011
+ if (outputRef &&
2012
+ typeof outputRef.subscribe === 'function' &&
2013
+ typeof callback === 'function') {
2021
2014
  if (subscriptions.has(outputKey)) {
2022
2015
  subscriptions.get(outputKey).unsubscribe();
2023
2016
  }
2024
- const subscription = eventEmitter.subscribe((value) => callback(value));
2017
+ const subscription = outputRef.subscribe((value) => callback(value));
2025
2018
  subscriptions.set(outputKey, subscription);
2026
2019
  }
2027
2020
  }
2028
2021
  }
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 }); }
2022
+ getInputNames(componentType) {
2023
+ return (reflectComponentType(componentType)?.inputs.map((input) => input.propName) ?? []);
2024
+ }
2025
+ getOutputNames(componentType) {
2026
+ return (reflectComponentType(componentType)?.outputs.map((output) => output.propName) ?? []);
2027
+ }
2028
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2030
2029
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, providedIn: 'root' }); }
2031
2030
  }
2032
2031
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponentFactoryService, decorators: [{
@@ -2034,7 +2033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
2034
2033
  args: [{
2035
2034
  providedIn: 'root',
2036
2035
  }]
2037
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }] });
2036
+ }] });
2038
2037
 
2039
2038
  class DynamicComponent {
2040
2039
  constructor() {
@@ -2049,9 +2048,20 @@ class DynamicComponent {
2049
2048
  this.createComponent();
2050
2049
  this.changeDetectorRef.detectChanges();
2051
2050
  }
2051
+ ngOnDestroy() {
2052
+ this.destroyCurrentComponent();
2053
+ }
2052
2054
  createComponent() {
2053
2055
  if (this.container) {
2054
- this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
2056
+ this.destroyCurrentComponent();
2057
+ this.componentRef = this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
2058
+ }
2059
+ }
2060
+ destroyCurrentComponent() {
2061
+ if (this.componentRef) {
2062
+ this.factoryServices.cleanupComponent(this.componentRef.instance);
2063
+ this.componentRef.destroy();
2064
+ this.componentRef = undefined;
2055
2065
  }
2056
2066
  }
2057
2067
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -2217,7 +2227,7 @@ class ConfirmDialogComponent extends UnsubscribeComponent {
2217
2227
  provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
2218
2228
  useExisting: ConfirmDialogComponent,
2219
2229
  },
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"] }] }); }
2230
+ ], 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
2231
  }
2222
2232
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
2223
2233
  type: Component,
@@ -2232,7 +2242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
2232
2242
  provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
2233
2243
  useExisting: ConfirmDialogComponent,
2234
2244
  },
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"] }]
2245
+ ], 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
2246
  }], ctorParameters: () => [{ type: i1$6.DialogService }, { type: i0.ChangeDetectorRef }] });
2237
2247
 
2238
2248
  class SwitchComponent extends BaseFormInputComponent {