@pega/dx-component-builder-sdk 25.1.11 → 25.1.13

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

@@ -15,7 +15,6 @@ interface InlineDashboardPageProps {
   selector: 'app-inline-dashboard-page',
   templateUrl: './inline-dashboard-page.component.html',
   styleUrls: ['./inline-dashboard-page.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardPageComponent implements OnInit, OnChanges {
@@ -46,7 +45,7 @@ export class InlineDashboardPageComponent implements OnInit, OnChanges {
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
     const arChildren$ = this.pConn$.getChildren();
-    const allFilters = this.pConn$.getRawMetadata()?.children[1];
+    const allFilters = this.pConn$.getRawMetadata()?.children?.[1];
     const filterComponents = buildFilterComponents(this.pConn$, allFilters);
     this.inlineProps = this.configProps$;
     this.children[0] = arChildren$[0];

package/tests/assets/sdk-a/components/createAll/override-sdk/template/list-page/list-page.component.ts

@@ -5,7 +5,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-list-page',
   templateUrl: './list-page.component.html',
   styleUrls: ['./list-page.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class ListPageComponent {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/list-view/list-view.component.html

@@ -1,188 +1,196 @@
 <div class="psdk-list-header">
   <div>
-    <h3 *ngIf="label" class="label" style="font-weight: bold">
-      {{ label }} <span class="results-count">{{ getResultsText() }}</span>
-    </h3>
-    <mat-form-field class="psdk-search" *ngIf="bShowSearch$">
-      <mat-label><img class="psdk-icon-search" src="{{ searchIcon$ }}" /> <span class="psdk-search-label">Search</span> </mat-label>
-      <input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
-    </mat-form-field>
+    <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 10px">
+      <h3 *ngIf="label" class="label" style="font-weight: bold; margin: 0">
+        {{ label }} <span class="results-count">{{ getResultsText() }}</span>
+      </h3>
+      <mat-form-field *ngIf="bShowSearch$">
+        <mat-label class="search-label"><mat-icon>search</mat-icon><span class="psdk-search-label">Search</span> </mat-label>
+        <input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
+      </mat-form-field>
+    </div>
 
     <div *ngIf="!bInForm$" class="psdk-outer-div-in-form">
       <div class="psdk-inner-div-in-form" *ngIf="bColumnReorder$">
-        <div>
-          <table
-            mat-table
-            id="list-view"
-            [dataSource]="repeatList$"
-            matSort
-            cdkDropList
-            cdkDropListOrientation="horizontal"
-            (cdkDropListDropped)="drop($event)"
-          >
-            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
-              <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
-                {{ dCol.config.label }}
-                <div class="psdk-mat-header-filter">
-                  <img class="psdk-filter-svg-icon" name="filterOnIcon" />
-                </div>
-                <div class="psdk-mat-header-arrow">
-                  <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
-                </div>
-                <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
-                  <button mat-icon-button [matMenuTriggerFor]="groupMenu">
-                    <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
-                  </button>
-                  <mat-menu #groupMenu>
-                    <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
-                    </button>
-                    <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
-                    </button>
-                    <button mat-menu-item (click)="_filter($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
-                    </button>
-                  </mat-menu>
-                </div>
-              </th>
-              <td mat-cell *matCellDef="let element; index as i">
-                <button
-                  *ngIf="_showButton(dCol.config.name, dCol); else regular"
-                  mat-button
-                  color="primary"
-                  (click)="_listViewClick(dCol.config, element)"
-                >
-                  {{ element[dCol.config.name] || '---' }}
+        <table
+          mat-table
+          id="list-view"
+          [dataSource]="repeatList$"
+          matSort
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          (cdkDropListDropped)="drop($event)"
+        >
+          <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
+            <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
+              {{ dCol.config.label }}
+              <div class="psdk-mat-header-filter">
+                <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+              </div>
+              <div class="psdk-mat-header-arrow">
+                <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
+              </div>
+              <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
+                <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+                  <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
                 </button>
-                <ng-template #regular>
-                  {{ element[dCol.config.name] || '---' }}
-                </ng-template>
-              </td>
-            </ng-container>
+                <mat-menu #groupMenu>
+                  <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
+                  </button>
+                  <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
+                  </button>
+                  <button mat-menu-item (click)="_filter($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </th>
+            <td mat-cell *matCellDef="let element; index as i">
+              <button
+                *ngIf="_showButton(dCol.config.name, dCol); else regular"
+                mat-button
+                color="primary"
+                (click)="_listViewClick(dCol.config, element)"
+              >
+                {{ element[dCol.config.name] || '---' }}
+              </button>
+              <ng-template #regular>
+                {{ element[dCol.config.name] || '---' }}
+              </ng-template>
+            </td>
+          </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
 
-            <!-- Group header -->
-            <ng-container matColumnDef="groupHeader">
-              <td mat-cell colspan="999" *matCellDef="let group">
-                <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
-                <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
-                <strong
-                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
-                    group.totalCounts
-                  }})</strong
-                >
-              </td>
-            </ng-container>
+          <!-- Group header -->
+          <ng-container matColumnDef="groupHeader">
+            <td mat-cell colspan="999" *matCellDef="let group">
+              <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
+              <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
+              <strong
+                >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
+                  group.totalCounts
+                }})</strong
+              >
+            </td>
+          </ng-container>
 
-            <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
-          </table>
-        </div>
+          <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
+        </table>
       </div>
       <div class="psdk-inner-div-in-form" *ngIf="!bColumnReorder$">
-        <div>
-          <table mat-table id="list-view" [dataSource]="repeatList$" matSort>
-            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
-              <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
-                {{ dCol.config.label }}
-                <div class="psdk-mat-header-filter">
-                  <img class="psdk-filter-svg-icon" name="filterOnIcon" />
-                </div>
-                <div class="psdk-mat-header-arrow">
-                  <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
-                </div>
-                <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
-                  <button mat-icon-button [matMenuTriggerFor]="groupMenu">
-                    <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
-                  </button>
-                  <mat-menu #groupMenu>
-                    <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
-                    </button>
-                    <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
-                    </button>
-                    <button mat-menu-item (click)="_filter($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
-                    </button>
-                  </mat-menu>
-                </div>
-              </th>
-              <td mat-cell *matCellDef="let element; index as i">
-                <button
-                  *ngIf="_showButton(dCol.config.name, dCol); else regular"
-                  mat-button
-                  color="primary"
-                  (click)="_listViewClick(dCol.config, element)"
-                >
-                  {{ element[dCol.config.name] || '---' }}
+        <table mat-table id="list-view" [dataSource]="repeatList$" matSort>
+          <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
+            <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
+              {{ dCol.config.label }}
+              <div class="psdk-mat-header-filter">
+                <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+              </div>
+              <div class="psdk-mat-header-arrow">
+                <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
+              </div>
+              <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
+                <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+                  <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
                 </button>
-                <ng-template #regular>
-                  {{ element[dCol.config.name] || '---' }}
-                </ng-template>
-              </td>
-            </ng-container>
+                <mat-menu #groupMenu>
+                  <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
+                  </button>
+                  <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
+                  </button>
+                  <button mat-menu-item (click)="_filter($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </th>
+            <td mat-cell *matCellDef="let element; index as i">
+              <button
+                *ngIf="_showButton(dCol.config.name, dCol); else regular"
+                mat-button
+                color="primary"
+                (click)="_listViewClick(dCol.config, element)"
+              >
+                {{ element[dCol.config.name] || '---' }}
+              </button>
+              <ng-template #regular>
+                {{ element[dCol.config.name] || '---' }}
+              </ng-template>
+            </td>
+          </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
 
-            <!-- Group header -->
-            <ng-container matColumnDef="groupHeader">
-              <td mat-cell colspan="999" *matCellDef="let group">
-                <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
-                <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
-                <strong
-                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
-                    group.totalCounts
-                  }})</strong
-                >
-              </td>
-            </ng-container>
+          <!-- Group header -->
+          <ng-container matColumnDef="groupHeader">
+            <td mat-cell colspan="999" *matCellDef="let group">
+              <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
+              <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
+              <strong
+                >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
+                  group.totalCounts
+                }})</strong
+              >
+            </td>
+          </ng-container>
 
-            <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
-          </table>
-        </div>
+          <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
+        </table>
       </div>
     </div>
     <div *ngIf="bInForm$">
-      <div>
-        <div class="psdk-inner-div-in-form">
-          <table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
-            <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
-              <th mat-header-cell *matHeaderCellDef></th>
-              <td mat-cell *matCellDef="let row">
-                <mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
-              </td>
-            </ng-container>
-            <ng-container *ngIf="multiSelectionMode" matColumnDef="select">
-              <th mat-header-cell *matHeaderCellDef></th>
-              <td mat-cell *matCellDef="let row">
-                <mat-checkbox [value]="row[rowID]" [checked]="isChecked(row)" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
-              </td>
-            </ng-container>
-            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
-                {{ dCol.config.label }}
+      <div class="psdk-inner-div-in-form">
+        <table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
+          <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let row">
+              <mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
+            </td>
+          </ng-container>
+          <ng-container *ngIf="multiSelectionMode" matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef>
+              <mat-checkbox
+                (change)="toggleAllRows()"
+                [checked]="selection.hasValue() && isAllSelected()"
+                [indeterminate]="selection.hasValue() && !isAllSelected()"
+              >
+              </mat-checkbox>
+            </th>
+            <td mat-cell *matCellDef="let row">
+              <mat-checkbox (change)="onCheckboxClick(row)" [checked]="selection.isSelected(row)"> </mat-checkbox>
+            </td>
+          </ng-container>
+          <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
+              {{ dCol.config.label }}
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+        </table>
+        <div *ngIf="repeatListData?.length === 0">
+          <table id="list-view" mat-table [dataSource]="[]">
+            <!-- Define columns for headers -->
+            <ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
+              <th mat-header-cell *matHeaderCellDef>
+                {{ getValue(col) }}
               </th>
-              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
             </ng-container>
 
+            <!-- Render only header row -->
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
           </table>
-          <div *ngIf="repeatListData?.length === 0">
-            <table id="list-view" *ngIf="repeatListData?.length === 0" mat-table [dataSource]="repeatList$">
-              <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
-                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
-            </table>
-          </div>
-          <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
-            {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
-          </div>
+        </div>
+        <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </div>
       </div>
     </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/template/list-view/list-view.component.scss

@@ -1,12 +1,16 @@
 .psdk-list-header {
-  background-color: var(--app-form-color);
-  padding: 1rem;
-  margin: 0.5rem;
-  border-radius: 0.6125rem;
+  border: 1px solid var(--mat-sys-outline-variant);
+  background-color: var(--mat-sys-surface-container);
 }
 
 table {
   width: 100%;
+  border-bottom: 1px solid var(--mat-sys-on-secondary-container);
+}
+
+.search-label {
+  display: flex;
+  align-items: center;
 }
 
 ::ng-deep .mat-sort-header-content {
@@ -69,6 +73,7 @@ td.mat-mdc-footer-cell {
   padding: 0.125rem 0.125rem;
   min-width: unset;
   width: 1.1rem;
+  margin-right: 1rem;
 }
 
 .psdk-outer-div-in-form {
@@ -110,11 +115,11 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: var(--app-form-color);
-  border: 1px solid var(--app-inverse-form-color);
+  background-color: var(--mat-sys-surface);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  box-shadow: 0 0 10px 3px var(--mat-sys-level3);
   position: absolute;
   z-index: 99;
 }
@@ -126,7 +131,7 @@ td.mat-mdc-footer-cell {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-dialog-background-color);
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -137,11 +142,11 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: var(--app-form-color);
-  border: 1px solid var(--app-inverse-form-color);
+  background-color: var(--mat-sys-surface-container);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  box-shadow: 0 0 10px 3px var(--mat-sys-level3);
 }
 
 tr.mat-mdc-row {
@@ -153,19 +158,10 @@ tr.mat-mdc-row {
   justify-content: center;
   display: flex;
   align-items: center;
-  border: 1px solid var(--app-neutral-light-color);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
 }
 
-.psdk-table-field-link {
-  color: var(--app-primary-color);
-  padding: 0;
-  cursor: pointer;
-  border: 0;
-  background-color: transparent;
-  align-items: center;
-}
-
 .results-count {
   opacity: 0.7;
   font-size: 0.8rem;
@@ -176,3 +172,11 @@ tr.mat-mdc-row {
 .label {
   margin: 8px;
 }
+
+::ng-deep th.mat-mdc-header-cell,
+td.mat-mdc-cell,
+td.mat-mdc-footer-cell {
+  border-right: 1px solid var(--mat-sys-on-secondary-container);
+  padding: 8px !important;
+  // min-width: 10rem;
+}