@pega/dx-component-builder-sdk 0.25.8 → 0.25.9

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

@@ -1,10 +1,9 @@
 {
-    "componentKey": "Details",
-    "name": "Details",
-    "label": "Details (One column)",
-    "description": "Details (One column)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "icon": "OneColumnDetails.svg",
-    "properties": []
-}
+  "name": "Details",
+  "label": "Details (One column)",
+  "description": "Details (One column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "OneColumnDetails.svg",
+  "properties": []
+}

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

@@ -1,3 +1,23 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  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-1">
+    <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/details.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, 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/details.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,74 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  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;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      this.arFields$ = [];
-      const pKid = kid.getPConnect();
-      const fields = pKid.getChildren();
-      fields?.forEach(field => {
-        const thePConn = field.getPConnect();
-        const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference' || theCompType === 'group') {
-          const configProps = thePConn.getConfigProps();
-          configProps.readOnly = true;
-          configProps.displayMode = 'DISPLAY_ONLY';
-          const propToUse = { ...thePConn.getInheritedProps() };
-          configProps.label = propToUse?.label;
-          const options = {
-            context: thePConn.getContextName(),
-            pageReference: thePConn.getPageReference(),
-            referenceList: thePConn.getReferenceList()
-          };
-          const viewContConfig = {
-            meta: {
-              ...thePConn.getMetadata(),
-              type: theCompType,
-              config: configProps
-            },
-            options
-          };
-          const theViewCont = PCore.createPConnect(viewContConfig);
-          const data = {
-            type: theCompType,
-            pConn: theViewCont?.getPConnect()
-          };
-          this.arFields$.push(data);
-        } else {
-          const data = {
-            type: theCompType,
-            config: thePConn.getConfigProps()
-          };
-          this.arFields$.push(data);
-        }
-      });
-    }
-  }
-}
+export class DetailsComponent extends DetailsTemplateBase {}

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

@@ -1,9 +1,8 @@
 {
-    "componentKey": "NarrowWideDetails",
-    "name": "NarrowWideDetails",
-    "label": "Details (Narrow-wide)",
-    "description": "Details (Narrow-wide) template",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "name": "NarrowWideDetails",
+  "label": "Details (Narrow-wide)",
+  "description": "Details (Narrow-wide) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

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

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+  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-narrow-wide">
+    <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-narrow-wide/details-narrow-wide.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-narrow-wide {
   display: grid;
   grid-template-columns: 3fr 7fr;
   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-narrow-wide/details-narrow-wide.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,43 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsNarrowWideComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-
-  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;
-      });
-    }
-
-    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 DetailsNarrowWideComponent extends DetailsTemplateBase {}

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

@@ -1,10 +1,9 @@
 {
-    "componentKey": "Details",
-    "name": "Details",
-    "label": "Details (One column)",
-    "description": "Details (One column)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "icon": "OneColumnDetails.svg",
-    "properties": []
-}
+  "name": "Details",
+  "label": "Details (One column)",
+  "description": "Details (One column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "OneColumnDetails.svg",
+  "properties": []
+}

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

@@ -1 +1,23 @@
-<component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
+<component-mapper
+  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-1">
+    <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-one-column/details-one-column.component.scss

@@ -0,0 +1,14 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(1, 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-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,8 @@
 {
-    "componentKey": "DetailsSubTabs",
-    "name": "DetailsSubTabs",
-    "label": "Details (Sub tabs)",
-    "description": "Details (Sub tabs)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "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,8 @@
 {
-    "componentKey": "DetailsThreeColumn",
-    "name": "DetailsThreeColumn",
-    "label": "Details (Three column)",
-    "description": "Details (Three column)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "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,8 @@
 {
-    "componentKey": "DetailsTwoColumn",
-    "name": "DetailsTwoColumn",
-    "label": "Details (Two column)",
-    "description": "Details (Two column)",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "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,8 @@
 {
-    "componentKey": "WideNarrowDetails",
-    "name": "WideNarrowDetails",
-    "label": "Details (Wide-narrow)",
-    "description": "Details (Wide-narrow) template",
-    "type": "Template",
-    "subtype": "DETAILS",
-    "properties": []
-}
+  "name": "WideNarrowDetails",
+  "label": "Details (Wide-narrow)",
+  "description": "Details (Wide-narrow) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}