@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/demo.stories.tsx.mustache

@@ -10,21 +10,12 @@ class MockingDatapageService {
   getDataPageData = () => Promise.resolve({});
 }
 
-window.PCore = {
-  ...window.PCore,
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
-      }
-    };
-  },
-  setBehaviorOverride: () => {},
-  getStore: () => {
-    return {
-      subscribe: () => {}
-    };
-  }
+window.PCore.getContextTreeManager = (): any => {
+  return {
+    removeContextTreeNode: () => {
+      /* nothing */
+    }
+  };
 };
 
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
@@ -36,42 +27,43 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   ],
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      getChildren: () => {
-        return children;
-      },
-      resolveConfigProps: () => {},
-      getValue: () => {
-        /* nothing */
-      },
-      getCurrentView: () => {
-        /* nothing */
-      },
-      getCurrentClassID: () => {
-        /* nothing */
-      },
-      isEditable: () => true,
-      setAction: () => {},
-      getActions: () => {
-        return {
-          onChange: () => {},
-          onBlur: () => {}
-        };
-      },
-      populateAdditionalProps: () => {},
-      getConfigProps: () => {
-        return {
-          NumCols: '1'
-        };
-      },
-      getInheritedProps: () => {
-        /* nothing */
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        getChildren: () => {
+          return children;
+        },
+        resolveConfigProps: () => {},
+        getValue: () => {
+          /* nothing */
+        },
+        getCurrentView: () => {
+          /* nothing */
+        },
+        getCurrentClassID: () => {
+          /* nothing */
+        },
+        isEditable: () => true,
+        setAction: () => {},
+        getActions: () => {
+          return {
+            onChange: () => {},
+            onBlur: () => {}
+          };
+        },
+        populateAdditionalProps: () => {},
+        getConfigProps: () => {
+          return {
+            NumCols: '1'
+          };
+        },
+        getInheritedProps: () => {
+          /* nothing */
+        },
+        getContextName: () => ''
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };
@@ -80,7 +72,5 @@ export default meta;
 type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-
-  }
+  args: {}
 };

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.scss.mustache

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 0rem;
+  padding: 0rem 1.5rem;
   height: 100%;
 }
 

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.ts.mustache

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/mock.ts.mustache

@@ -44,6 +44,9 @@ export const child1 = [
             label: 'First Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -93,6 +96,9 @@ export const child1 = [
             label: 'Middle Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -142,6 +148,9 @@ export const child1 = [
             label: 'Last Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -194,6 +203,9 @@ export const child2 = [
             label: 'Email',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -231,7 +243,7 @@ export const child2 = [
             readOnly: false,
             placeholder: 'Phone',
             value: '2015550123',
-            label: '',
+            label: 'Phone Number',
             hasSuggestions: false
           };
         },
@@ -243,6 +255,9 @@ export const child2 = [
             label: 'Phone Number',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -349,7 +364,10 @@ export const child2 = [
         getContextName: () => {
           return 'app/primary_1/workarea_9';
         },
-        getDataObject: () => {}
+        getDataObject: () => {},
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     }
   }

package/src/tasks/create/templates/SDK-Angular/template/PAGE/demo.stories.tsx.mustache

@@ -7,39 +7,40 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      getChildren: () => {
-        return [
-          {
-            getPConnect: () => {
-              return {
-                getComponentName: () => {
-                  return 'Region';
-                },
-                getChildren: () => {
-                  return children;
-                }
-              };
+        getChildren: () => {
+          return [
+            {
+              getPConnect: () => {
+                return {
+                  getComponentName: () => {
+                    return 'Region';
+                  },
+                  getChildren: () => {
+                    return children;
+                  }
+                };
+              }
             }
-          }
-        ];
-      },
-      getConfigProps: () => {
-        return {
-          title: 'Annoucements',
-          operator: ''
-        };
-      },
-      resolveConfigProps: () => {
-        return {
-          title: 'Annoucements',
-          operator: ''
-        };
-      }
-    } as any
+          ];
+        },
+        getConfigProps: () => {
+          return {
+            title: 'Announcements',
+            operator: ''
+          };
+        },
+        resolveConfigProps: () => {
+          return {
+            title: 'Announcements',
+            operator: ''
+          };
+        },
+        getContextName: () => ''
+      } as any
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.ts.mustache

@@ -34,7 +34,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.title$ = this.configProps$.title;
     const operator = this.configProps$.operator;

package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/widget/CASE/config.json.mustache

@@ -11,13 +11,13 @@
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",
   "properties": [
-   {
+    {
       "name": "label",
       "label": "Label value",
       "format": "TEXT"
     }
   ],
   "defaultConfig": {
-     "label": "@L {{COMPONENT_LABEL}}"
+    "label": "@L {{COMPONENT_LABEL}}"
   }
 }

package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache

@@ -8,23 +8,13 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
-    window.PCore = {
-      ...window.PCore,
-      getConstants: () => {
-        return {
-          CASE_INFO: {
-            CASE_INFO_ID: 'caseInfo.ID'
-          }
-        } as any;
-      },
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(historyData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(historyData);
+        }
+      };
     };
     return {
       props: {
@@ -33,18 +23,18 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
           getConfigProps: () => {
             return configProps;
           },
-          getValue: (value) => {
+          getValue: value => {
             return value;
           },
           getContextName: () => {
             return 'app/primary_1';
           },
-          getLocalizedValue: (value) => {
+          getLocalizedValue: value => {
             return value;
           }
         } as any
       }
-    }
+    };
   }
 };
 

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/config.json.mustache

@@ -11,49 +11,49 @@
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",
   "properties": [
-      {
-        "name": "description",
-        "label": "Description",
-        "format": "TEXT",
-        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
-      },
-      {
-        "name": "whatsnewlink",
-        "label": "What's new link",
-        "format": "TEXT",
-        "defaultValue": "https://design.pega.com"
-      },
-      {
-        "name": "image",
-        "label": "Image link",
-        "format": "TEXT",
-        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
-      },
-      {
-        "name": "datasource",
-        "label": "Data source for details",
-        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
-        "format": "DATASOURCE",
-        "required": true,
-        "properties": [
-          {
-            "name": "name",
-            "label": "Label",
-            "defaultValue": "@P .pyLabel"
-          }
-        ]
-      },
-      {
-        "label": "Conditions",
-        "format": "GROUP",
-        "properties": [
-          {
-            "name": "visibility",
-            "label": "Visibility",
-            "format": "VISIBILITY"
-          }
-        ]
-      }
+    {
+      "name": "description",
+      "label": "Description",
+      "format": "TEXT",
+      "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+    },
+    {
+      "name": "whatsnewlink",
+      "label": "What's new link",
+      "format": "TEXT",
+      "defaultValue": "https://design.pega.com"
+    },
+    {
+      "name": "image",
+      "label": "Image link",
+      "format": "TEXT",
+      "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+    },
+    {
+      "name": "datasource",
+      "label": "Data source for details",
+      "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+      "format": "DATASOURCE",
+      "required": true,
+      "properties": [
+        {
+          "name": "name",
+          "label": "Label",
+          "defaultValue": "@P .pyLabel"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
   ],
   "defaultConfig": {}
 }

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/demo.stories.tsx.mustache

@@ -8,16 +8,13 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
-    window.PCore = {
-      ...window.PCore,
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(worklistData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(worklistData);
+        }
+      };
     };
     return {
       props: {
@@ -34,7 +31,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
           }
         } as any
       }
-    }
+    };
   }
 };
 

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache

@@ -1,4 +1,3 @@
-
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <article class="psdk-announcement">

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/pagecomponent.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -4,37 +4,29 @@ import { configProps, operatorDetails } from './mock';
 
 import {{! pick new delimiters for mustache }}{{=<% %>=}}{<%={{ }}=%> {{COMPONENT_CLASS_NAME}}Component {{=<% %>=}}}<%={{ }}=%>{{! revert delimiters for mustache }} from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: () => {
-    return {
-      getOperatorDetails: () => {
-        return Promise.resolve(operatorDetails);
-      }
-    };
-  },
-  getLocaleUtils: () => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    } as any;
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        }
+      } as any
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/mock.ts.mustache

@@ -14,7 +14,7 @@ export const configProps = {
   },
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const operatorDetails = {

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.ts.mustache

@@ -45,12 +45,15 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
     }
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnDestroy(): void {
-    this.renderer.destroy();
+    // Ref: https://medium.com/@kamil.galek/mythical-angular-component-styles-cleanup-in-angular-17-f799a08b2abc
+    // Commenting the below line as it is causing the Operator component's styles not getting applied.
+    // this.renderer.destroy();
   }
 
   updateSelf(): void {
-    const configProps$ = this.pConn$.getConfigProps() as any;
+    const configProps$ = this.pConn$.getConfigProps();
     this.displayLabel = this.displayLabel?.toLowerCase();
     const label = configProps$?.label?.toLowerCase();
     if (label === 'create operator' || this.displayLabel === 'create operator') {