@pega/angular-sdk-components 0.25.11 → 0.25.12

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 { EventEmitter, Output, Input, Component, forwardRef, Injectable, inject, Directive, ViewChild, signal, ViewContainerRef, HostListener } from '@angular/core';
2
+ import { EventEmitter, Output, Input, Component, forwardRef, Injectable, inject, Directive, ViewChild, signal, effect, ViewContainerRef, HostListener } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i3 from '@angular/material/button';
@@ -55,7 +55,7 @@ import * as i6$3 from '@angular/material/icon';
55
55
  import { MatIconModule, MatIcon } from '@angular/material/icon';
56
56
  import * as i2$2 from '@angular/google-maps';
57
57
  import { GoogleMapsModule } from '@angular/google-maps';
58
- import { NgxMatInputTelComponent } from 'ngx-mat-input-tel';
58
+ import { MatTelInput } from 'mat-tel-input';
59
59
  import { parsePhoneNumberFromString } from 'libphonenumber-js';
60
60
  import * as i5$2 from '@angular/material/radio';
61
61
  import { MatRadioModule } from '@angular/material/radio';
@@ -1462,7 +1462,7 @@ class AssignmentComponent {
1462
1462
  this.actionsAPI = oWorkItem.getActionsApi();
1463
1463
  // this.containerName$ = oWorkMeta["name"];
1464
1464
  if (oWorkData.caseInfo && oWorkData.caseInfo.assignments !== null) {
1465
- this.containerName$ = oWorkData.caseInfo.assignments?.[0].name;
1465
+ this.containerName$ = oWorkData.caseInfo.assignments?.[0]?.name;
1466
1466
  // get caseInfo
1467
1467
  const oCaseInfo = oData.caseInfo;
1468
1468
  if (oCaseInfo && oCaseInfo.actionButtons) {
@@ -2093,7 +2093,7 @@ function hasAssignments(pConnect) {
2093
2093
  const { CASE_INFO } = PCore.getConstants();
2094
2094
  const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
2095
2095
  const childCasesAssignments = getChildCaseAssignments(pConnect);
2096
- return assignments || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
2096
+ return assignments?.length || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
2097
2097
  }
2098
2098
  const showBanner = getPConnect => {
2099
2099
  const pConnect = getPConnect;
@@ -2603,7 +2603,7 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
2603
2603
  this.psService.sendMessage(false);
2604
2604
  const oWorkItem = configObject.getPConnect();
2605
2605
  const oWorkData = oWorkItem.getDataObject();
2606
- this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
2606
+ this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name, undefined, this.localeReference);
2607
2607
  });
2608
2608
  }
2609
2609
  getBuildName() {
@@ -7656,11 +7656,11 @@ class PhoneComponent extends FieldBase {
7656
7656
  return '';
7657
7657
  }
7658
7658
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PhoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
7659
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: PhoneComponent, isStandalone: true, selector: "app-phone", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"bHasForm$ && bVisible$; else noEdit\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n <ngx-mat-input-tel\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n [preferredCountries]=\"preferredCountries\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [placeholder]=\"placeholder\"\n [required]=\"bRequired$\"\n [disabled]=\"bDisabled$ || bReadonly$\"\n (change)=\"fieldOnChange()\"\n (blur)=\"fieldOnBlur()\"\n >\n </ngx-mat-input-tel>\n <mat-label>{{ label$ }}</mat-label>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => NgxMatInputTelComponent), selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
7659
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: PhoneComponent, isStandalone: true, selector: "app-phone", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"bHasForm$ && bVisible$; else noEdit\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n <mat-tel-input\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n [preferredCountries]=\"preferredCountries\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [placeholder]=\"placeholder\"\n [required]=\"bRequired$\"\n [disabled]=\"bDisabled$ || bReadonly$\"\n (change)=\"fieldOnChange()\"\n (blur)=\"fieldOnBlur()\"\n >\n </mat-tel-input>\n <mat-label>{{ label$ }}</mat-label>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => MatTelInput), selector: "mat-tel-input", inputs: ["autocomplete", "cssClass", "errorStateMatcher", "placeholder", "maxLength", "name", "onlyCountries", "preferredCountries", "searchPlaceholder", "enablePlaceholder", "enableSearch", "resetOnChange", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
7660
7660
  }
7661
7661
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PhoneComponent, decorators: [{
7662
7662
  type: Component,
7663
- args: [{ selector: 'app-phone', imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, NgxMatInputTelComponent, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"bHasForm$ && bVisible$; else noEdit\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n <ngx-mat-input-tel\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n [preferredCountries]=\"preferredCountries\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [placeholder]=\"placeholder\"\n [required]=\"bRequired$\"\n [disabled]=\"bDisabled$ || bReadonly$\"\n (change)=\"fieldOnChange()\"\n (blur)=\"fieldOnBlur()\"\n >\n </ngx-mat-input-tel>\n <mat-label>{{ label$ }}</mat-label>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"] }]
7663
+ args: [{ selector: 'app-phone', imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n <div *ngIf=\"bHasForm$ && bVisible$; else noEdit\">\n <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n <mat-tel-input\n [attr.data-test-id]=\"testId\"\n [formControl]=\"fieldControl\"\n [preferredCountries]=\"preferredCountries\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [placeholder]=\"placeholder\"\n [required]=\"bRequired$\"\n [disabled]=\"bDisabled$ || bReadonly$\"\n (change)=\"fieldOnChange()\"\n (blur)=\"fieldOnBlur()\"\n >\n </mat-tel-input>\n <mat-label>{{ label$ }}</mat-label>\n <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n </mat-form-field>\n </div>\n</ng-template>\n<ng-template #noEdit>\n <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"] }]
7664
7664
  }] });
7665
7665
 
7666
7666
  class RadioButtonsComponent extends FieldBase {
@@ -10938,8 +10938,8 @@ class FieldGroupTemplateComponent {
10938
10938
  this.angularPConnectData = {};
10939
10939
  this.showLabel$ = true;
10940
10940
  this.referenceListLength = signal(null, ...(ngDevMode ? [{ debugName: "referenceListLength" }] : /* istanbul ignore next */ []));
10941
- this.allowAdd = true;
10942
- this.allowEdit = true;
10941
+ this.allowAdd = signal(true, ...(ngDevMode ? [{ debugName: "allowAdd" }] : /* istanbul ignore next */ []));
10942
+ this.allowEdit = signal(true, ...(ngDevMode ? [{ debugName: "allowEdit" }] : /* istanbul ignore next */ []));
10943
10943
  this.allowDelete = true;
10944
10944
  this.getStaticHeader = (heading, index) => {
10945
10945
  return `${heading} ${index + 1}`;
@@ -10950,22 +10950,17 @@ class FieldGroupTemplateComponent {
10950
10950
  }
10951
10951
  return `Row ${index + 1}`;
10952
10952
  };
10953
+ effect(() => {
10954
+ const allowAdd = this.allowAdd();
10955
+ const allowEdit = this.allowEdit();
10956
+ const referenceList = this.configProps$?.referenceList;
10957
+ if (referenceList?.length === 0 && (allowAdd || allowEdit)) {
10958
+ this.pConn$.getListActions().insert({ classID: this.contextClass }, referenceList.length);
10959
+ }
10960
+ });
10953
10961
  }
10954
10962
  ngOnInit() {
10955
10963
  this.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
10956
- const { allowActions, allowTableEdit, referenceList } = this.configProps$;
10957
- if (allowActions && Object.keys(allowActions).length > 0) {
10958
- this.allowAdd = allowActions.allowAdd ?? allowTableEdit ?? true;
10959
- this.allowEdit = allowActions.allowEdit ?? true;
10960
- this.allowDelete = allowActions.allowDelete ?? allowTableEdit ?? true;
10961
- }
10962
- else {
10963
- this.allowAdd = allowTableEdit ?? true;
10964
- this.allowDelete = allowTableEdit ?? true;
10965
- }
10966
- if (referenceList?.length === 0 && (this.allowAdd || this.allowEdit)) {
10967
- this.pConn$.getListActions().insert({ classID: this.contextClass }, referenceList.length);
10968
- }
10969
10964
  }
10970
10965
  ngOnDestroy() {
10971
10966
  if (this.angularPConnectData.unsubscribeFn) {
@@ -10999,6 +10994,16 @@ class FieldGroupTemplateComponent {
10999
10994
  this.fieldHeader = fieldHeader;
11000
10995
  const resolvedList = getReferenceList(this.pConn$);
11001
10996
  this.pConn$.setReferenceList(resolvedList);
10997
+ const { allowActions, allowTableEdit } = this.configProps$;
10998
+ if (allowActions && Object.keys(allowActions).length > 0) {
10999
+ this.allowAdd.set(allowActions.allowAdd ?? allowTableEdit ?? true);
11000
+ this.allowEdit.set(allowActions.allowEdit ?? true);
11001
+ this.allowDelete = allowActions.allowDelete ?? allowTableEdit ?? true;
11002
+ }
11003
+ else {
11004
+ this.allowAdd.set(allowTableEdit ?? true);
11005
+ this.allowDelete = allowTableEdit ?? true;
11006
+ }
11002
11007
  if (this.readonlyMode) {
11003
11008
  this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
11004
11009
  }
@@ -11027,11 +11032,11 @@ class FieldGroupTemplateComponent {
11027
11032
  return targetClassLabel ? `+ Add ${targetClassLabel}` : '+ Add';
11028
11033
  }
11029
11034
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FieldGroupTemplateComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
11030
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FieldGroupTemplateComponent, isStandalone: true, selector: "app-field-group-template", inputs: { configProps$: "configProps$", pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"field-group\">\n <h3 *ngIf=\"showLabel$\" class=\"field-group-template-header\" style=\"font-weight: bold\">\n {{ label$ }}\n </h3>\n <div *ngIf=\"readonlyMode; else editable\">\n <div *ngIf=\"children && children.length > 0\">\n <div *ngFor=\"let item of children; let i = index\">\n <component-mapper name=\"FieldGroupList\" [props]=\"{ heading: item.name, formGroup$, item }\"></component-mapper>\n </div>\n </div>\n </div>\n <ng-template #editable>\n <div *ngIf=\"children && children.length > 0\">\n <div class=\"field-group-template-item\" *ngFor=\"let child of children; let i = index\">\n <div class=\"header-div\">\n <div style=\"width: 80%\">\n <b>{{ child.name }}</b>\n </div>\n <div *ngIf=\"allowDelete && child.allowRowDelete\" style=\"width: 20%; text-align: right\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteFieldGroupItem(i)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </div>\n </div>\n\n <div *ngIf=\"child.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n <component-mapper name=\"Region\" [props]=\"{ pConn$: child.children.getPConnect(), formGroup$ }\"></component-mapper>\n </div>\n </div>\n </div>\n <button *ngIf=\"allowAdd\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addFieldGroupItem()\">{{ getAddBtnLabel() }}</button>\n </ng-template>\n</div>\n", styles: [".psdk-utility-card-action-svg-icon{width:1.4rem}.header-div{display:flex;align-items:center}.field-group-template-header{margin-left:0}.field-group-template-item{padding-block:1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i0.forwardRef(() => i3.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
11035
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: FieldGroupTemplateComponent, isStandalone: true, selector: "app-field-group-template", inputs: { configProps$: "configProps$", pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"field-group\">\n <h3 *ngIf=\"showLabel$\" class=\"field-group-template-header\" style=\"font-weight: bold\">\n {{ label$ }}\n </h3>\n <div *ngIf=\"readonlyMode; else editable\">\n <div *ngIf=\"children && children.length > 0\">\n <div *ngFor=\"let item of children; let i = index\">\n <component-mapper name=\"FieldGroupList\" [props]=\"{ heading: item.name, formGroup$, item }\"></component-mapper>\n </div>\n </div>\n </div>\n <ng-template #editable>\n <div *ngIf=\"children && children.length > 0\">\n <div class=\"field-group-template-item\" *ngFor=\"let child of children; let i = index\">\n <div class=\"header-div\">\n <div style=\"width: 80%\">\n <b>{{ child.name }}</b>\n </div>\n <div *ngIf=\"allowDelete && child.allowRowDelete\" style=\"width: 20%; text-align: right\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteFieldGroupItem(i)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </div>\n </div>\n\n <div *ngIf=\"child.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n <component-mapper name=\"Region\" [props]=\"{ pConn$: child.children.getPConnect(), formGroup$ }\"></component-mapper>\n </div>\n </div>\n </div>\n <button *ngIf=\"allowAdd()\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addFieldGroupItem()\">{{ getAddBtnLabel() }}</button>\n </ng-template>\n</div>\n", styles: [".psdk-utility-card-action-svg-icon{width:1.4rem;filter:var(--app-primary-color-filter)}.header-div{display:flex;align-items:center}.field-group-template-header{margin-left:0}.field-group-template-item{padding-block:1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i0.forwardRef(() => i3.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
11031
11036
  }
11032
11037
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FieldGroupTemplateComponent, decorators: [{
11033
11038
  type: Component,
11034
- args: [{ selector: 'app-field-group-template', imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"field-group\">\n <h3 *ngIf=\"showLabel$\" class=\"field-group-template-header\" style=\"font-weight: bold\">\n {{ label$ }}\n </h3>\n <div *ngIf=\"readonlyMode; else editable\">\n <div *ngIf=\"children && children.length > 0\">\n <div *ngFor=\"let item of children; let i = index\">\n <component-mapper name=\"FieldGroupList\" [props]=\"{ heading: item.name, formGroup$, item }\"></component-mapper>\n </div>\n </div>\n </div>\n <ng-template #editable>\n <div *ngIf=\"children && children.length > 0\">\n <div class=\"field-group-template-item\" *ngFor=\"let child of children; let i = index\">\n <div class=\"header-div\">\n <div style=\"width: 80%\">\n <b>{{ child.name }}</b>\n </div>\n <div *ngIf=\"allowDelete && child.allowRowDelete\" style=\"width: 20%; text-align: right\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteFieldGroupItem(i)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </div>\n </div>\n\n <div *ngIf=\"child.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n <component-mapper name=\"Region\" [props]=\"{ pConn$: child.children.getPConnect(), formGroup$ }\"></component-mapper>\n </div>\n </div>\n </div>\n <button *ngIf=\"allowAdd\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addFieldGroupItem()\">{{ getAddBtnLabel() }}</button>\n </ng-template>\n</div>\n", styles: [".psdk-utility-card-action-svg-icon{width:1.4rem}.header-div{display:flex;align-items:center}.field-group-template-header{margin-left:0}.field-group-template-item{padding-block:1rem}\n"] }]
11039
+ args: [{ selector: 'app-field-group-template', imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"field-group\">\n <h3 *ngIf=\"showLabel$\" class=\"field-group-template-header\" style=\"font-weight: bold\">\n {{ label$ }}\n </h3>\n <div *ngIf=\"readonlyMode; else editable\">\n <div *ngIf=\"children && children.length > 0\">\n <div *ngFor=\"let item of children; let i = index\">\n <component-mapper name=\"FieldGroupList\" [props]=\"{ heading: item.name, formGroup$, item }\"></component-mapper>\n </div>\n </div>\n </div>\n <ng-template #editable>\n <div *ngIf=\"children && children.length > 0\">\n <div class=\"field-group-template-item\" *ngFor=\"let child of children; let i = index\">\n <div class=\"header-div\">\n <div style=\"width: 80%\">\n <b>{{ child.name }}</b>\n </div>\n <div *ngIf=\"allowDelete && child.allowRowDelete\" style=\"width: 20%; text-align: right\">\n <button id=\"delete-button\" mat-icon-button (click)=\"deleteFieldGroupItem(i)\">\n <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n </button>\n </div>\n </div>\n\n <div *ngIf=\"child.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n <component-mapper name=\"Region\" [props]=\"{ pConn$: child.children.getPConnect(), formGroup$ }\"></component-mapper>\n </div>\n </div>\n </div>\n <button *ngIf=\"allowAdd()\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addFieldGroupItem()\">{{ getAddBtnLabel() }}</button>\n </ng-template>\n</div>\n", styles: [".psdk-utility-card-action-svg-icon{width:1.4rem;filter:var(--app-primary-color-filter)}.header-div{display:flex;align-items:center}.field-group-template-header{margin-left:0}.field-group-template-item{padding-block:1rem}\n"] }]
11035
11040
  }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { configProps$: [{
11036
11041
  type: Input
11037
11042
  }], pConn$: [{