Merge branch 'master' of https://github.com/pegasystems/angular-sdk-components into mod/dec/advanceSearch

Author: manasa

package-lock.json

@@ -61,6 +61,7 @@
     "@angular/compiler": "^19.2.14",
     "@angular/core": "^19.2.14",
     "@angular/forms": "^19.2.14",
+    "@angular/google-maps": "^19.2.19",
     "@angular/material": "^19.2.19",
     "@angular/material-experimental": "^19.2.19",
     "@angular/material-moment-adapter": "^19.2.19",

package.json

@@ -30,6 +30,7 @@ import { EmailComponent } from '../../_components/field/email/email.component';
 import { GroupComponent } from '../../_components/field/group/group.component';
 import { IntegerComponent } from '../../_components/field/integer/integer.component';
 import { ListViewActionButtonsComponent } from '../../_components/field/list-view-action-buttons/list-view-action-buttons.component';
+import { LocationComponent } from '../../_components/field/location/location.component';
 import { PercentageComponent } from '../../_components/field/percentage/percentage.component';
 import { PhoneComponent } from '../../_components/field/phone/phone.component';
 import { RadioButtonsComponent } from '../../_components/field/radio-buttons/radio-buttons.component';
@@ -43,6 +44,7 @@ import { UrlComponent } from '../../_components/field/url/url.component';
 import { UserReferenceComponent } from '../../_components/field/user-reference/user-reference.component';
 import { ScalarListComponent } from '../../_components/field/scalar-list/scalar-list.component';
 import { SearchFormComponent } from '../../_components/template/data-reference/search-form/search-form.component';
+import { SelectableCardComponent } from '../../_components/field/selectable-card/selectable-card.component';
 import { RichTextComponent } from '../../_components/field/rich-text/rich-text.component';
 
 // Template components
@@ -186,6 +188,7 @@ const pegaSdkComponentMap = {
   ListUtility: ListUtilityComponent,
   ListView: ListViewComponent,
   ListViewActionButtons: ListViewActionButtonsComponent,
+  Location: LocationComponent,
   MaterialDetails: MaterialDetailsComponent,
   MaterialUtility: MaterialUtilityComponent,
   ModalViewContainer: ModalViewContainerComponent,
@@ -216,6 +219,7 @@ const pegaSdkComponentMap = {
   ScalarList: ScalarListComponent,
   SearchForm: SearchFormComponent,
   SearchGroups: SearchGroupsComponent,
+  SelectableCard: SelectableCardComponent,
   SemanticLink: SemanticLinkComponent,
   SimpleTable: SimpleTableComponent,
   SimpleTableManual: SimpleTableManualComponent,

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -1,9 +1,11 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
-  ></component-mapper>
+<div *ngIf="variant !== 'card'; else cardMode">
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper
+      *ngIf="bVisible$ !== false"
+      name="FieldValueList"
+      [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+    ></component-mapper>
+  </div>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
@@ -48,3 +50,9 @@
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
+<ng-template #cardMode>
+  <h4>{{ label$ }}</h4>
+  <div>
+    <component-mapper name="SelectableCard" [props]="{ pConn$: pConn$, type: 'checkbox' }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.html

@@ -26,6 +26,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  renderMode: string;
 }
 
 @Component({
@@ -70,6 +72,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   listOfCheckboxes: any[] = [];
   actionsApi: Object;
   propName: string;
+  variant?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -90,7 +93,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0 && !this.bReadonly$) {
       this.pConn$.setReferenceList(this.selectionList);
       updateNewInstructions(this.pConn$, this.selectionList);
     }
@@ -146,6 +149,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
+    this.variant = this.configProps$.variant;
 
     // multi case
     this.selectionMode = this.configProps$.selectionMode;
@@ -154,6 +158,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
       this.selectionList = this.configProps$.selectionList;
       this.selectedvalues = this.configProps$.readonlyContextList;
       this.primaryField = this.configProps$.primaryField;
+      this.bReadonly$ = this.configProps$.renderMode === 'ReadOnly' || this.displayMode$ === 'DISPLAY_ONLY' || this.configProps$.readOnly;
 
       this.datasource = this.configProps$.datasource;
       this.selectionKey = this.configProps$.selectionKey;

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts

@@ -0,0 +1,8 @@
+{
+  "name": "Location",
+  "label": "Location",
+  "description": "Location",
+  "type": "Field",
+  "subtype": "Location",
+  "properties": []
+}

packages/angular-sdk-components/src/lib/_components/field/location/config-ext.json

@@ -0,0 +1,45 @@
+<div *ngIf="mapReady && bVisible$">
+  <!-- Google suggestions -->
+  <mat-form-field class="psdk-full-width" [hintLabel]="helperText">
+    <mat-label>{{ label$ }}</mat-label>
+    <input
+      matInput
+      type="text"
+      [placeholder]="placeholder"
+      [formControl]="searchControl"
+      [required]="bRequired$"
+      [matAutocomplete]="auto"
+      [attr.data-test-id]="testId"
+      (blur)="fieldOnBlur()"
+    />
+    <mat-error *ngIf="searchControl.invalid">{{ getErrorMessage() }}</mat-error>
+    <button
+      mat-icon-button
+      matSuffix
+      type="button"
+      (click)="locateMe()"
+      [disabled]="isLocating || bDisabled$ || bReadonly$"
+      aria-label="Use my location"
+    >
+      <ng-container *ngIf="!isLocating; else loadingSpinner">
+        <mat-icon>location_on</mat-icon>
+      </ng-container>
+      <ng-template #loadingSpinner>
+        <mat-progress-spinner diameter="24" mode="indeterminate" strokeWidth="3"></mat-progress-spinner>
+      </ng-template>
+    </button>
+
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
+      <mat-option *ngFor="let option of filteredOptions" [value]="option">
+        {{ option }}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+  <!-- Google map -->
+  <div *ngIf="showMap" class="map-wrapper">
+    <google-map height="400px" width="100%" [center]="center" [zoom]="13" (mapClick)="onMapClick($event)">
+      <map-marker *ngIf="markerPosition" [position]="markerPosition" [title]="'Selected Location'"></map-marker>
+    </google-map>
+    <div class="map-blocker" *ngIf="bDisabled$ || bReadonly$"></div>
+  </div>
+</div>

packages/angular-sdk-components/src/lib/_components/field/location/location.component.html

@@ -0,0 +1,18 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+.map-wrapper {
+  position: relative;
+}
+
+.map-blocker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 10;
+  cursor: not-allowed;
+}

packages/angular-sdk-components/src/lib/_components/field/location/location.component.scss

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