@pega/angular-sdk-overrides 0.25.4 → 0.25.6

package/lib/designSystemExtension/banner/banner.component.html

@@ -9,7 +9,7 @@
   </div>
   <div
     [ngClass]="{
-      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-2': this.layout$ === 'two-column',
       'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
       'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
     }"

package/lib/designSystemExtension/banner/banner.component.scss

@@ -1,6 +1,6 @@
 .psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(3, 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;
@@ -8,7 +8,7 @@
 
 .psdk-grid-filter-2 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
@@ -20,6 +20,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
+
+  & > *:nth-child(1) {
+    min-width: 0;
+  }
 }
 
 .psdk-grid-filter-narrow-wide {

package/lib/field/date-time/date-time.component.ts

@@ -4,9 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
-
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
-
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import dayjs from 'dayjs';
 

package/lib/field/location/location.component.html

@@ -6,13 +6,13 @@
       matInput
       type="text"
       [placeholder]="placeholder"
-      [formControl]="searchControl"
+      [formControl]="fieldControl"
       [required]="bRequired$"
       [matAutocomplete]="auto"
       [attr.data-test-id]="testId"
       (blur)="fieldOnBlur()"
     />
-    <mat-error *ngIf="searchControl.invalid">{{ getErrorMessage() }}</mat-error>
+    <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     <button
       mat-icon-button
       matSuffix

package/lib/field/location/location.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -8,12 +8,10 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { GoogleMapsModule } from '@angular/google-maps';
+import { debounceTime, from, of, switchMap } from 'rxjs';
 
-import { debounceTime, from, interval, of, switchMap } from 'rxjs';
-
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { FieldBase } from '@pega/angular-sdk-components';
 import { GoogleMapsLoaderService } from '@pega/angular-sdk-components';
-import { Utils } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -41,9 +39,8 @@ interface LocationProps extends PConnFieldProps {
   templateUrl: './location.component.html',
   styleUrl: './location.component.scss'
 })
-export class LocationComponent implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class LocationComponent extends FieldBase {
+  private loader = inject(GoogleMapsLoaderService);
 
   private autocompleteService!: google.maps.places.AutocompleteService;
   private geocoder!: google.maps.Geocoder;
@@ -51,137 +48,52 @@ export class LocationComponent implements OnInit, OnDestroy {
   // Dom variables
   mapReady = false;
   isLocating = false;
-  searchControl = new FormControl('');
   showMap = true;
   filteredOptions: string[] = [];
   center: google.maps.LatLngLiteral;
   markerPosition: google.maps.LatLngLiteral | null = null;
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
   configProps$: LocationProps;
-  label$ = '';
   onlyCoordinates: boolean;
   coordinates: string;
-  bRequired$ = false;
-  bReadonly$ = false;
   showMapReadOnly$: boolean;
-  bDisabled$ = false;
-  bVisible$ = true;
-  controlName$: string;
-  bHasForm$ = true;
-  testId = '';
-  helperText: string;
-  placeholder: string;
-  actionsApi: object;
   valueProp: string;
   coordinatesProp: string;
 
-  constructor(
-    private loader: GoogleMapsLoaderService,
-    private angularPConnect: AngularPConnectService,
-    private utils: Utils,
-    private cdRef: ChangeDetectorRef
-  ) {}
+  override async ngOnInit() {
+    super.ngOnInit();
 
-  async ngOnInit() {
     // Loading map
     const apiKey = this.pConn$.getGoogleMapsAPIKey();
     await this.loader.load(apiKey);
     this.mapReady = true;
     this.initializeGoogleServices();
     this.getPlacePredictions();
-
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.controlName$ = this.angularPConnect.getComponentID(this);
-    this.checkAndUpdate();
-
-    if (this.formGroup$) {
-      // add control to formGroup
-      this.formGroup$.addControl(this.controlName$, this.searchControl);
-      this.bHasForm$ = true;
-    } else {
-      this.bReadonly$ = true;
-      this.bHasForm$ = false;
-    }
   }
 
-  ngOnDestroy(): void {
-    if (this.formGroup$) {
-      this.formGroup$.removeControl(this.controlName$);
-    }
-
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  checkAndUpdate() {
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
+  /**
+   * Updates the component when there are changes in the state.
+   */
+  override updateSelf(): void {
+    // Resolve configuration properties
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as LocationProps;
 
-  onStateChange() {
-    setTimeout(() => {
-      this.checkAndUpdate();
-    }, 0);
-  }
+    // Update component common properties
+    this.updateComponentCommonProperties(this.configProps$);
 
-  updateSelf(): void {
-    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as LocationProps;
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
     this.onlyCoordinates = !!this.configProps$.onlyCoordinates;
-    this.label$ = this.configProps$.label;
-    this.testId = this.configProps$.testId;
-
-    this.helperText = this.configProps$.helperText || '';
-    this.placeholder = this.configProps$.placeholder || '';
     this.showMapReadOnly$ = !!this.configProps$.showMapReadOnly;
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
     this.showMap = this.bReadonly$ ? this.showMapReadOnly$ : !!this.configProps$.showMap;
+
     if (this.configProps$.coordinates) {
       const latAndLong: number[] = this.configProps$.coordinates.split(',').map(Number);
       const latitude = Number(latAndLong[0]);
       const longitude = Number(latAndLong[1]);
       this.updateMap(latitude, longitude, this.configProps$.value);
     }
-    // // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
-      }
-      this.cdRef.detectChanges();
-    });
-    // // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
 
-    if (this.bDisabled$ || this.bReadonly$) {
-      this.searchControl.disable();
-    } else {
-      this.searchControl.enable();
-    }
-
-    this.actionsApi = this.pConn$.getActionsApi();
     this.valueProp = this.pConn$.getStateProps().value;
     this.coordinatesProp = this.pConn$.getStateProps().coordinates;
-
-    // // trigger display of error message with field control
-    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
-      const timer = interval(100).subscribe(() => {
-        this.searchControl.setErrors({ message: true });
-        this.searchControl.markAsTouched();
-
-        timer.unsubscribe();
-      });
-    }
   }
 
   onOptionSelected(event: any) {
@@ -236,23 +148,6 @@ export class LocationComponent implements OnInit, OnDestroy {
     }
   }
 
-  getErrorMessage() {
-    let errMessage = '';
-
-    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
-    if (this.searchControl.hasError('message')) {
-      errMessage = this.angularPConnectData.validateMessage ?? '';
-      return errMessage;
-    }
-    if (this.searchControl.hasError('required')) {
-      errMessage = 'You must enter a value';
-    } else if (this.searchControl.errors) {
-      errMessage = this.searchControl.errors.toString();
-    }
-
-    return errMessage;
-  }
-
   private tryGetLocation(retryCount: number) {
     navigator.geolocation.getCurrentPosition(
       position => {
@@ -312,7 +207,7 @@ export class LocationComponent implements OnInit, OnDestroy {
   }
 
   private getPlacePredictions() {
-    this.searchControl.valueChanges
+    this.fieldControl.valueChanges
       .pipe(
         debounceTime(300),
         switchMap(value => this.getSuggestions(value || ''))
@@ -371,7 +266,7 @@ export class LocationComponent implements OnInit, OnDestroy {
   }
 
   private updateProps() {
-    handleEvent(this.actionsApi, 'change', this.valueProp, this.searchControl.value);
+    handleEvent(this.actionsApi, 'change', this.valueProp, this.fieldControl.value);
     handleEvent(this.actionsApi, 'change', this.coordinatesProp, this.coordinates);
   }
 
@@ -380,6 +275,6 @@ export class LocationComponent implements OnInit, OnDestroy {
   }
 
   private setLocationValue(value: string) {
-    this.searchControl.setValue(value, { emitEvent: false });
+    this.fieldControl.setValue(value, { emitEvent: false });
   }
 }

package/lib/infra/assignment/assignment.component.ts

@@ -18,6 +18,11 @@ function getRefreshProps(refreshConditions) {
   return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
 }
 
+function scrollToTop() {
+  const scrollElement = document.querySelector('.psdk-view-container-top');
+  scrollElement?.scrollIntoView();
+}
+
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
   template: string;
@@ -140,6 +145,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
+    scrollToTop();
+
     this.registerForRefresh();
 
     // pConn$ may be a 'reference' component, so normalize it

package/lib/infra/navbar/navbar.component.html

@@ -36,17 +36,15 @@
     </mat-list-item>
   </mat-list>
   <div class="psdk-nav-divider"></div>
-  <div>
-    <mat-list id="profile">
-      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
-        <div class="flex-box">
-          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
-          <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
-        </div>
-      </mat-list-item>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
-      </mat-menu>
-    </mat-list>
-  </div>
+  <mat-list id="profile" class="psdk-logout-button">
+    <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+      <div class="flex-box">
+        <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
+      </div>
+    </mat-list-item>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
+    </mat-menu>
+  </mat-list>
 </div>

package/lib/infra/navbar/navbar.component.scss

@@ -163,3 +163,8 @@ mat-list-item {
   height: 24px;
   border-radius: 50%;
 }
+
+.psdk-logout-button {
+  flex: 1;
+  align-content: flex-end;
+}

package/lib/infra/reference/reference.component.ts

@@ -71,6 +71,11 @@ export class ReferenceComponent {
       pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
+    if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+      const inheritedProps = inPConn.getInheritedProps();
+      referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
+    }
+
     // Get the PConnect object from the created component
     const newCompPConnect = viewComponent.getPConnect();
 

package/lib/template/confirmation/confirmation.component.html

@@ -1,7 +1,7 @@
 <div>
   <div *ngIf="showConfirmView">
     <h2 id="confirm-label" class="confirm-label">{{ label }}</h2>
-    <div *ngIf="showDetails">
+    <div *ngIf="showDetails" class="confirmation-details">
       <component-mapper name="Details" [props]="{ pConn$ }"></component-mapper>
     </div>
     <div *ngIf="showTasks && toDoList?.length > 0">

package/lib/template/list-view/list-view.component.ts

@@ -46,6 +46,7 @@ interface ListViewProps {
   displayAs?: string;
   showRecords: boolean;
   viewName?: string;
+  localeReference?: any;
 }
 
 export class Group {
@@ -516,6 +517,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     const arReturn = arFields;
     arReturn.forEach((field, i) => {
       field.config = { ...field.config, ...fields[i], name: fields[i].id };
+      field.config.label = PCore.getLocaleUtils().getLocaleValue(field.config.label, this.configProps$.localeReference);
     });
     return arReturn;
   }

package/lib/template/wss-nav-bar/wss-nav-bar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+<mat-toolbar>
   <mat-toolbar-row mat-icon-button>
     <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
       <div>

package/lib/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -15,8 +15,6 @@
   padding-top: 0.625rem;
   cursor: pointer;
   padding-right: 1rem;
-  &:hover {
-  }
   align-items: center;
 }
 
@@ -106,13 +104,11 @@
 
 .psdk-nav-button-span {
   padding: 0 1rem;
-  color: var(--app-nav-color);
-
-  &:hover {
-  }
 }
 
 .psdk-nav-oper-avatar {
+  border-radius: 100%;
+  background-color: var(--mat-sys-primary);
   margin: 0rem;
   padding: 0rem;
   min-width: 2.5rem;
@@ -128,6 +124,11 @@
   font-size: 1rem;
 }
 
+mat-toolbar {
+  margin-bottom: 5px;
+  background-color: var(--mat-sys-surface-variant);
+}
+
 mat-list {
   padding: 0;
 }
@@ -142,9 +143,6 @@ mat-list-item {
   cursor: pointer !important;
   height: auto !important;
 
-  &:hover {
-  }
-
   .flex-box {
     display: flex;
     align-items: center;

package/lib/widget/file-utility/file-utility.component.scss

@@ -24,7 +24,7 @@
 }
 
 .psdk-modal-file-selector {
-  border: 1px dashed var(--app-neutral-dark-color);
+  border: 1px dashed var(--mat-sys-neutral-variant20);
   width: 100%;
   padding: 0.3rem;
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.25.4",
+  "version": "0.25.6",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"