@pega/dx-component-builder-sdk 24.1.10 → 24.1.12

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/pega-dxil-my-case-widget.component.ts

@@ -28,7 +28,7 @@ export class PegaDxilMyCaseWidgetComponent implements OnInit {
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
+
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
     const dataViewName = 'D_pyWorkHistory';
     const context = this.pConn$.getContextName();
@@ -36,21 +36,21 @@ export class PegaDxilMyCaseWidgetComponent implements OnInit {
     this.waitingForData = true;
 
     const caseHistoryData = PCore.getDataApiUtils().getData(
-    dataViewName,
-    { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
-    context
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
+      context
     ) as Promise<any>;
 
     caseHistoryData.then((historyJSON: any) => {
       this.fields$ = [
         { label: this.pConn$.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
         { label: this.pConn$.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
-        { label: this.pConn$.getLocalizedValue('User', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
+        { label: this.pConn$.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
       ];
 
       const tableDataResults = this.updateData(historyJSON.data.data, this.fields$);
 
-      this.displayedColumns$ = this.getDisplayColumns(this.fields$ as never[]);
+      this.displayedColumns$ = this.getDisplayColumns(this.fields$);
 
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
@@ -87,7 +87,7 @@ export class PegaDxilMyCaseWidgetComponent implements OnInit {
   }
 
   getDisplayColumns(fields: any[] = []) {
-    return fields.map((field: { fieldName: any }) => {
+    return fields.map(field => {
       return field.fieldName;
     });
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.html

@@ -18,5 +18,3 @@
     </dl>
   </div>
 </div>
-
-

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { Utils } from '@pega/angular-sdk-components';
 
 @Component({
- selector: 'app-pega-dxil-my-page-case-widget',
+  selector: 'app-pega-dxil-my-page-case-widget',
   templateUrl: './pega-dxil-my-page-case-widget.component.html',
   styleUrls: ['./pega-dxil-my-page-case-widget.component.scss'],
   standalone: true,
@@ -12,7 +12,7 @@ import { Utils } from '@pega/angular-sdk-components';
 })
 export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
-
+  @Input() displayLabel;
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
@@ -51,15 +51,17 @@ export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnD
 
   updateSelf(): void {
     const configProps$ = this.pConn$.getConfigProps() as any;
-    if (configProps$?.label?.toLowerCase() == 'create operator') {
+    this.displayLabel = this.displayLabel?.toLowerCase();
+    const label = configProps$?.label?.toLowerCase();
+    if (label === 'create operator' || this.displayLabel === 'create operator') {
       this.name$ = configProps$.createOperator.userName;
       this.id$ = configProps$.createOperator.userId;
       this.label$ = configProps$.createLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'update operator') {
+    } else if (label === 'update operator' || this.displayLabel === 'update operator') {
       this.name$ = configProps$.updateOperator.userName;
       this.id$ = configProps$.updateOperator.userId;
       this.label$ = configProps$.updateLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'resolve operator') {
+    } else if (label === 'resolve operator' || this.displayLabel === 'resolve operator') {
       this.name$ = configProps$.resolveOperator.userName;
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/demo.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { configProps } from './mock';
+import { configProps, worklistData } from './mock';
 
 import { PegaDxilMyPageWidgetComponent } from './pega-dxil-my-page-widget.component';
 
@@ -8,16 +8,34 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   title: 'PegaDxilMyPageWidget',
   component: PegaDxilMyPageWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageWidgetComponent) => ({
-    props: {
-      ...args,
-      pConn$: {
-      getConfigProps: () => {
-        return configProps;
+  render: (args: PegaDxilMyPageWidgetComponent) => {
+    window.PCore = {
+      ...window.PCore,
+      getDataApiUtils: () => {
+        return {
+          getData: () => {
+            return Promise.resolve(worklistData);
+          }
+        } as any;
+      }
+    };
+    return {
+      props: {
+        ...args,
+        pConn$: {
+          getContextName: () => {
+            return 'app/primary_1';
+          },
+          getLocalizedValue: value => {
+            return value;
+          },
+          getConfigProps: () => {
+            return configProps;
+          }
+        } as any
       }
-    } as any
     }
-  })
+  }
 };
 
 export default meta;

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/mock.ts

@@ -21,3 +21,28 @@ export const configProps = {
     fields: {}
   }
 };
+
+export const worklistData = {
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
+};

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/pega-dxil-my-page-widget.component.html

@@ -10,5 +10,15 @@
       </ul>
     </div>
   </div>
-  <a *ngIf="configProps$.whatsnewlink !== ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
 </article>
+<br />
+<table mat-table [dataSource]="workList">
+  <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.fieldName">
+    <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>
+    <td mat-cell *matCellDef="let element">{{ element[dCol.fieldName] }}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/pega-dxil-my-page-widget.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Utils } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyPageWidgetProps {
   // If any, enter additional props that only exist on this component
@@ -16,13 +18,20 @@ interface PegaDxilMyPageWidgetProps {
   templateUrl: './pega-dxil-my-page-widget.component.html',
   styleUrls: ['./pega-dxil-my-page-widget.component.scss'],
   standalone: true,
-  imports: [CommonModule, MatButtonModule]
+  imports: [CommonModule, MatButtonModule, MatTableModule]
 })
 export class PegaDxilMyPageWidgetComponent implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   configProps$: PegaDxilMyPageWidgetProps;
   details$: any[];
+  fields$: any[];
+  displayedColumns: any[];
+
+  workList: MatTableDataSource<any>;
+  waitingForData = false;
+
+  constructor(private utils: Utils) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -31,5 +40,88 @@ export class PegaDxilMyPageWidgetComponent implements OnInit {
     if (datasource?.source) {
       this.details$ = datasource.source.map(item => item.name);
     }
+
+    // going to get data for worklist to put into a table
+    // data comes from calling a PCore function to get
+    // get data from a data page and a PConnect function
+    // to get getContextName
+
+    const dataViewName = 'D_pyMyWorkList';
+    const context = this.pConn$.getContextName();
+    this.waitingForData = true;
+    const workListData = PCore.getDataApiUtils().getData(dataViewName, {}, context) as Promise<any>;
+
+    workListData
+      .then((response: any) => {
+        if (response.data.data !== null) {
+          this.fields$ = [
+            {
+              label: this.pConn$.getLocalizedValue('Case type', '', ''),
+              type: 'TextInput',
+              fieldName: 'pxProcessName'
+            }, // 2nd and 3rd args empty string until typedef marked correctly
+            {
+              label: this.pConn$.getLocalizedValue('Key', '', ''),
+              type: 'TextInput',
+              fieldName: 'pxRefObjectInsName'
+            }, // 2nd and 3rd args empty string until typedef marked correctly
+            {
+              label: this.pConn$.getLocalizedValue('Status', '', ''),
+              type: 'TextInput',
+              fieldName: 'pyAssignmentStatus'
+            }, // 2nd and 3rd args empty string until typedef marked correctly
+            {
+              label: this.pConn$.getLocalizedValue('Stage', '', ''),
+              type: 'TextInput',
+              fieldName: 'pxTaskLabel'
+            } // 2nd and 3rd args empty string until typedef marked correctly
+          ];
+          const tableDataResults = this.updateData(response.data.data, this.fields$);
+          this.displayedColumns = this.getDisplayColumns(this.fields$);
+          this.workList = new MatTableDataSource(tableDataResults);
+          this.waitingForData = false;
+        } else {
+          this.workList = new MatTableDataSource();
+          this.waitingForData = false;
+        }
+      })
+      .catch((error: any) => {
+        this.workList = new MatTableDataSource();
+        this.waitingForData = false;
+        console.log(error);
+      });
+  }
+
+  updateData(listData: any[], fieldData: any[]): any[] {
+    const returnList: any[] = new Array<any>();
+    listData.forEach(row => {
+      const rowData = JSON.parse(JSON.stringify(row));
+
+      for (const field of fieldData) {
+        const fieldName = field.fieldName;
+        let formattedDate;
+
+        switch (field.type) {
+          case 'Date':
+            formattedDate = this.utils.generateDate(rowData[fieldName], 'Date-Short-YYYY');
+            rowData[fieldName] = formattedDate;
+            break;
+          case 'DateTime':
+            formattedDate = this.utils.generateDateTime(rowData[fieldName], 'DateTime-Short-YYYY');
+            rowData[fieldName] = formattedDate;
+            break;
+          default:
+            break;
+        }
+      }
+      returnList.push(rowData);
+    });
+    return returnList;
+  }
+
+  getDisplayColumns(fields: any[] = []) {
+    return fields.map(field => {
+      return field.fieldName;
+    });
   }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/banner/banner.component.html

@@ -0,0 +1,28 @@
+<div style="margin-bottom: '2rem'">
+  <div class="background-image-style" [ngStyle]="{ 'background-image': getUrl() }">
+    <div class="background-style content">
+      <div>
+        <h1 class="title">{{ title }}</h1>
+        <p class="message">{{ message }}</p>
+      </div>
+    </div>
+  </div>
+  <div
+    [ngClass]="{
+      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
+      'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
+    }"
+  >
+    <component-mapper
+      [name]="arChildren$[0].getPConnect().getComponentName()"
+      [props]="{ pConn$: arChildren$[0].getPConnect(), formGroup$ }"
+      errorMsg="Region wants component not yet available: {{ arChildren$[0].getPConnect().getComponentName() }}"
+    ></component-mapper>
+    <component-mapper
+      [name]="arChildren$[1].getPConnect().getComponentName()"
+      [props]="{ pConn$: arChildren$[1].getPConnect(), formGroup$ }"
+      errorMsg="Region wants component not yet available: {{ arChildren$[1].getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/banner/banner.component.scss

@@ -0,0 +1,64 @@
+.psdk-grid-filter-1 {
+  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-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;
+  padding: 1rem;
+}
+
+.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;
+}
+
+.background-image-style {
+  margin-left: -16px;
+  margin-right: -16px;
+  height: calc(19rem);
+  background-size: cover;
+  background-position: center center;
+}
+
+.background-style {
+  background-color: transparent;
+  color: var(--app-inverse-form-color);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: calc(0.5rem);
+}
+
+.title {
+  margin: 0rem;
+  font-size: 1.728rem;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.banner-layout {
+  padding: 1rem;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/banner/banner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BannerComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/banner/banner.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { Component, Input, forwardRef } from '@angular/core';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner.component.html',
+  styleUrls: ['./banner.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class BannerComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  @Input() arChildren$: any[];
+  @Input() title: string;
+  @Input() message: any;
+  @Input() backgroundImage: string;
+  @Input() layout$: string;
+
+  getUrl() {
+    return `url(${this.backgroundImage})`;
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -2,7 +2,7 @@
   <dl class="psdk-case-summary-fields-primary">
     <div *ngFor="let field of primaryFieldsWithStatus$" class="psdk-csf-primary-field">
       <dt class="psdk-csf-primary-field-header">
-        {{ field.config.label }}
+        {{ field.config?.label }}
       </dt>
       <dd *ngIf="field.config.value === ''; else hasValue" class="psdk-csf-primary-field-data">
         <ng-container [ngSwitch]="field.type.toLowerCase()">
@@ -28,16 +28,19 @@
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
     <div
       *ngIf="
-        field.config?.label?.toLowerCase() == 'create operator' || field.config?.label?.toLowerCase() == 'update operator';
+        field?.config?.label?.toLowerCase() == 'create operator' ||
+          field?.displayLabel?.toLowerCase() == 'create operator' ||
+          field?.config?.label?.toLowerCase() == 'update operator' ||
+          field?.displayLabel?.toLowerCase() == 'update operator';
         else hasSecondaryValue
       "
     >
-      <component-mapper name="Operator" [props]="{ pConn$: field?.kid }"></component-mapper>
+      <component-mapper name="Operator" [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel }"></component-mapper>
     </div>
     <ng-template #hasSecondaryValue>
       <div class="psdk-csf-secondary-field">
         <dt class="psdk-csf-secondary-field-header">
-          {{ field.config.displayLabel || field.config.label }}
+          {{ field.config?.displayLabel || field.config?.label }}
         </dt>
         <dd class="psdk-csf-secondary-field-data">
           <div [ngSwitch]="field.type">

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -19,7 +19,8 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
   primaryFieldsWithStatus$: any[];
 
   constructor(private utils: Utils) {}
-
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'ModalContainer';
   ngOnInit(): void {
     this.updatePrimaryWithStatus();
     this.updateLabelAndDate(this.primaryFieldsWithStatus$);
@@ -63,6 +64,7 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
   updatePrimaryWithStatus() {
     this.primaryFieldsWithStatus$ = [];
     for (const prim of this.primaryFields$) {
+      prim.config.value = this.localizedVal(prim.config.value, this.localeCategory);
       this.primaryFieldsWithStatus$.push(prim);
     }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.html

@@ -1,5 +1,5 @@
 <div>
-  <mat-button-toggle-group vertical (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
+  <mat-button-toggle-group vertical hideSingleSelectionIndicator (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
     <mat-button-toggle *ngFor="let tab of tabConfig$" [value]="tab.id" style="text-align: left">
       <div style="display: flex">
         <div style="flex-grow: 10">{{ tab.name }}</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -12,7 +12,7 @@ import { Utils } from '@pega/angular-sdk-components';
 })
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
-
+  @Input() displayLabel;
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
@@ -45,21 +45,26 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // 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;
-    if (configProps$?.label?.toLowerCase() == 'create operator') {
+    this.displayLabel = this.displayLabel?.toLowerCase();
+    const label = configProps$?.label?.toLowerCase();
+    if (label === 'create operator' || this.displayLabel === 'create operator') {
       this.name$ = configProps$.createOperator.userName;
       this.id$ = configProps$.createOperator.userId;
       this.label$ = configProps$.createLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'update operator') {
+    } else if (label === 'update operator' || this.displayLabel === 'update operator') {
       this.name$ = configProps$.updateOperator.userName;
       this.id$ = configProps$.updateOperator.userId;
       this.label$ = configProps$.updateLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'resolve operator') {
+    } else if (label === 'resolve operator' || this.displayLabel === 'resolve operator') {
       this.name$ = configProps$.resolveOperator.userName;
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/wss-quick-create/wss-quick-create.component.html

@@ -0,0 +1,13 @@
+<div class="wss-quick-create-header">
+  <h1 class="quick-link-heading">{{ heading$ }}</h1>
+  <ul class="quick-link-ul-list">
+    <li *ngFor="let element of actions$" class="quick-link-list">
+      <button mat-raised-button color="primary" class="quick-link-button" mat-icon-button (click)="element.onClick()">
+        <span class="quick-link-button-span">
+          <img *ngIf="element.icon" class="quick-link-icon" [src]="element.icon" />
+          <span>{{ element.label }}</span>
+        </span>
+      </button>
+    </li>
+  </ul>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/wss-quick-create/wss-quick-create.component.scss

@@ -0,0 +1,43 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-list {
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
+  border-radius: 8px;
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: var(--app-form-color) !important;
+  cursor: pointer;
+  padding: calc(0.5rem * 2) !important;
+  height: 6rem;
+  width: 100%;
+  justify-content: start !important;
+  background-color: transparent;
+  border: 0;
+}
+
+.quick-link-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  filter: invert(100%);
+}
+
+.quick-link-button-span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/wss-quick-create/wss-quick-create.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WssQuickCreateComponent } from './wss-quick-create.component';
+
+describe('WssQuickCreateComponent', () => {
+  let component: WssQuickCreateComponent;
+  let fixture: ComponentFixture<WssQuickCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WssQuickCreateComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WssQuickCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/wss-quick-create/wss-quick-create.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+// import { Button } from '@angular/material'
+
+@Component({
+  selector: 'wss-quick-create',
+  templateUrl: './wss-quick-create.component.html',
+  styleUrls: ['./wss-quick-create.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class WssQuickCreateComponent {
+  @Input() actions$: any;
+  @Input() heading$: any;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.ts

@@ -118,7 +118,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
   private _filter(value: string): string[] {
     const filterVal = (value || this.filterValue).toLowerCase();
-    return this.options$?.filter(option => option.value.toLowerCase().includes(filterVal));
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
   // Callback passed when subscribing to store change