@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-a/components/create/override-sdk/template/details-one-column/details-one-column.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,44 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsOneColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsOneColumnComponent extends DetailsTemplateBase {}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-sub-tabs/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "DetailsSubTabs",
-    "name": "DetailsSubTabs",
-    "label": "Details (Sub tabs)",
-    "description": "Details (Sub tabs)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "componentKey": "DetailsSubTabs",
+  "name": "DetailsSubTabs",
+  "label": "Details (Sub tabs)",
+  "description": "Details (Sub tabs)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-three-column/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "DetailsThreeColumn",
-    "name": "DetailsThreeColumn",
-    "label": "Details (Three column)",
-    "description": "Details (Three column)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "componentKey": "DetailsThreeColumn",
+  "name": "DetailsThreeColumn",
+  "label": "Details (Three column)",
+  "description": "Details (Three column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-three-column/details-three-column.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arFields3$, arHighlightedFields: highlightedDataArr, layout: 'three-column' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-3">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/template/details-three-column/details-three-column.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-three-column/details-three-column.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,52 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsThreeColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: any = {};
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else if (kids.indexOf(kid) == 1) {
-        this.arFields2$ = pKidData.children;
-      } else {
-        this.arFields3$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsThreeColumnComponent extends DetailsTemplateBase {}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-two-column/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "DetailsTwoColumn",
-    "name": "DetailsTwoColumn",
-    "label": "Details (Two column)",
-    "description": "Details (Two column)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "componentKey": "DetailsTwoColumn",
+  "name": "DetailsTwoColumn",
+  "label": "Details (Two column)",
+  "description": "Details (Two column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-two-column/details-two-column.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-2">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/template/details-two-column/details-two-column.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-two-column/details-two-column.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,50 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsTwoColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: any = {};
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData?.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsTwoColumnComponent extends DetailsTemplateBase {}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-wide-narrow/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "WideNarrowDetails",
-    "name": "WideNarrowDetails",
-    "label": "Details (Wide-narrow)",
-    "description": "Details (Wide-narrow) template",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "componentKey": "WideNarrowDetails",
+  "name": "WideNarrowDetails",
+  "label": "Details (Wide-narrow)",
+  "description": "Details (Wide-narrow) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-wide-narrow/details-wide-narrow.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'wide-narrow' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-wide-narrow">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/template/details-wide-narrow/details-wide-narrow.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-wide-narrow {
   display: grid;
   grid-template-columns: 7fr 3fr;
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/details-wide-narrow/details-wide-narrow.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,47 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-wide-narrow',
   templateUrl: './details-wide-narrow.component.html',
   styleUrls: ['./details-wide-narrow.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsWideNarrowComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  propsToUse: any = {};
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsWideNarrowComponent extends DetailsTemplateBase {}

package/tests/assets/sdk-a/components/create/override-sdk/template/dynamic-tabs/config-ext.json

@@ -1,37 +1,37 @@
 {
-    "componentKey": "DynamicTabs",
-    "name": "DynamicTabs",
-    "label": "Dynamic tabs (list)",
-    "description": "Dynamic tabs (list)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "icon": "DynamicTabs.svg",
-    "hideTemplateEdit": true,
-    "hideFromTemplatePicker": true,
-    "viewHeadingLabel": "Default heading",
-    "properties": [
-        {
-            "name": "referenceList",
-            "label": "Data page",
-            "format": "CONTENTPICKERSOURCE"
-        },
-        {
-            "name": "parameters",
-            "label": "Parameters",
-            "format": "PARAMETERS",
-            "showOverride": false
-        },
-        {
-            "name": "tablabel",
-            "label": "Tab label",
-            "format": "PROPERTY",
-            "ofContextClass": true
-        },
-        {
-            "format": "VIEWPICKER",
-            "name": "Views",
-            "label": "Tab content",
-            "ofContextClass": true
-        }
-    ]
-}
+  "componentKey": "DynamicTabs",
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/dynamic-tabs/dynamic-tabs.component.html

@@ -4,5 +4,6 @@
 <mat-tab-group id="dynamic-tabs" mat-stretch-tabs="false" animationDuration="0">
   <mat-tab *ngFor="let tab of tabsItems" [label]="tab.name">
     <component-mapper name="View" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>
+    <component-mapper name="reference" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>
   </mat-tab>
 </mat-tab-group>

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/field-group-template.component.ts

@@ -43,6 +43,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   readonlyMode: boolean;
   contextClass: any;
   heading: any;
+  headingPath: string[] = [];
   children: any;
   menuIconOverride$: any;
   referenceListLength = signal<number | null>(null);
@@ -131,8 +132,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     }
 
     if (this.referenceListLength() != referenceList?.length) {
-      // @ts-ignore - Expected 3 arguments, but got 1
-      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList, []);
 
       this.children = referenceList?.map((item, index) => {
         return {
@@ -150,11 +150,24 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     return `${heading} ${index + 1}`;
   };
 
-  getDynamicHeader = (item, index) => {
-    if (this.heading && item[this.heading.substring(1)]) {
-      return item[this.heading.substring(1)];
+  getDynamicHeader = (item: Record<string, unknown>, index: number): string => {
+    if (this.heading) {
+      let value: any = item;
+      this.headingPath = this.heading.substring(1).split('.');
+
+      for (const key of this.headingPath) {
+        if (value === null || typeof value !== 'object' || !(key in value)) {
+          value = undefined;
+          break;
+        }
+        value = Reflect.get(value, key);
+      }
+
+      if (value !== undefined && value !== null && value !== '') {
+        return value.toString();
+      }
     }
-    return `Row ${index + 1}`;
+    return `${PCore.getLocaleUtils().getLocaleValue('Row', 'SimpleTable')} ${index + 1}`;
   };
 
   addFieldGroupItem() {

package/tests/assets/sdk-a/components/create/override-sdk/template/field-value-list/field-value-list.component.scss

@@ -21,3 +21,20 @@
 .psdk-val-labels-left {
   white-space: break-spaces;
 }
+
+.psdk-container-stacked-large-val {
+  margin: 8px 0;
+}
+
+.psdk-container-stacked-large-val .psdk-grid-label {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.psdk-val-stacked {
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 1.25rem;
+  line-height: 1.5;
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/inline-dashboard-page/config-ext.json

@@ -1,10 +1,10 @@
 {
-    "componentKey": "InlineDashboardPage",
-    "name": "InlineDashboardPage",
-    "label": "Inline Dashboard",
-    "description": "Inline Dashboard Page Template",
-    "type": "Template",
-    "subtype": "PAGE",
-    "icon": "InlineDashboardPage.svg",
-    "properties": []
-}
+  "componentKey": "InlineDashboardPage",
+  "name": "InlineDashboardPage",
+  "label": "Inline Dashboard",
+  "description": "Inline Dashboard Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "InlineDashboardPage.svg",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/inline-dashboard-page/inline-dashboard-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { buildFilterComponents } from '@pega/angular-sdk-components';
@@ -17,7 +17,7 @@ interface InlineDashboardPageProps {
   styleUrls: ['./inline-dashboard-page.component.scss'],
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class InlineDashboardPageComponent implements OnInit, OnChanges {
+export class InlineDashboardPageComponent implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   configProps$: InlineDashboardPageProps;
@@ -34,14 +34,6 @@ export class InlineDashboardPageComponent implements OnInit, OnChanges {
     this.updateSelf();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const { pConn$ } = changes;
-
-    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
-      this.updateSelf();
-    }
-  }
-
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
     const arChildren$ = this.pConn$.getChildren();

package/tests/assets/sdk-a/components/create/override-sdk/template/list-page/config-ext.json

@@ -1,8 +1,8 @@
 {
-    "componentKey": "ListPage",
-    "name": "ListPage",
-    "type": "Template",
-    "subtype": "PAGE",
-    "label": "List page",
-    "properties": []
-}
+  "componentKey": "ListPage",
+  "name": "ListPage",
+  "type": "Template",
+  "subtype": "PAGE",
+  "label": "List page",
+  "properties": []
+}