@pega/angular-sdk-overrides 0.23.1

package/lib/designSystemExtension/material-utility/material-utility.component.html

@@ -0,0 +1,17 @@
+<div style="text-align: left">
+  <div class="psdk-utility">
+    <div class="header">
+      <div class="header-icon">
+        <img class="psdk-utility-svg-icon" src="{{ headerSvgIcon$ }}" />
+      </div>
+      <div class="header-text">{{ headerText$ }}</div>
+      <div style="flex-grow: 1"></div>
+      <div class="header-icon">
+        <img class="psdk-settings-svg-icon" src="{{ settingsSvgIcon$ }}" />
+      </div>
+    </div>
+    <div class="psdk-case-view-divider"></div>
+    <br />
+    <div class="message">{{ noItemsMessage$ }}</div>
+  </div>
+</div>

package/lib/designSystemExtension/material-utility/material-utility.component.scss

@@ -0,0 +1,52 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-utility .header-text {
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 0.3125rem;
+  text-align: left;
+  display: inline-block;
+}
+
+.psdk-utility .header-icon {
+  display: inline-block;
+}
+
+.psdk-utility {
+  width: 100%;
+  height: 6.25rem;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  background-color: $app-form-color;
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+}
+.psdk-utility .header {
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-utility-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-settings-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-utility .message {
+  text-align: center;
+}

package/lib/designSystemExtension/material-utility/material-utility.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MaterialUtilityComponent } from './material-utility.component';
+
+describe('MaterialutilityComponent', () => {
+  let component: MaterialUtilityComponent;
+  let fixture: ComponentFixture<MaterialUtilityComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MaterialUtilityComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaterialUtilityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/designSystemExtension/material-utility/material-utility.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Utils } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-material-utility',
+  templateUrl: './material-utility.component.html',
+  styleUrls: ['./material-utility.component.scss'],
+  providers: [Utils],
+  standalone: true
+})
+export class MaterialUtilityComponent implements OnInit {
+  @Input() headerText$: string;
+  @Input() headerIcon$: string;
+  @Input() headerIconUrl$: string;
+  @Input() noItemsMessage$: string;
+
+  headerSvgIcon$: string;
+  settingsSvgIcon$: string;
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    this.headerSvgIcon$ = this.utils.getImageSrc(this.headerIcon$, this.headerIconUrl$);
+    this.settingsSvgIcon$ = this.utils.getImageSrc('plus', this.headerIconUrl$);
+  }
+}

package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.html

@@ -0,0 +1,12 @@
+<div>
+  <mat-button-toggle-group vertical (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>
+        <div style="flex-grow: 1">
+          <span *ngIf="tab?.count" [matBadge]="tab.count" matBadgeOverlap="false" matBadgePosition="after" class="psdk-vtab-badge">&nbsp;</span>
+        </div>
+      </div>
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>

package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.scss

@@ -0,0 +1,28 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+mat-button-toggle-group {
+  width: 100%;
+  border-width: 0.0625rem 0rem;
+}
+
+mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard {
+  background-color: transparent;
+}
+
+mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
+  background-color: transparent;
+  border-right: 0.1875rem solid $app-primary-color;
+}
+
+mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard {
+  background-color: transparent;
+  border-right: 0.1875rem solid transparent;
+}
+
+mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  text-align: left;
+}
+
+.psdk-vtab-badge .mat-badge-content {
+  top: 0rem;
+}

package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MaterialVerticalTabsComponent } from './material-vertical-tabs.component';
+
+describe('MaterialVerticalTabsComponent', () => {
+  let component: MaterialVerticalTabsComponent;
+  let fixture: ComponentFixture<MaterialVerticalTabsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MaterialVerticalTabsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaterialVerticalTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+
+@Component({
+  selector: 'app-material-vertical-tabs',
+  templateUrl: './material-vertical-tabs.component.html',
+  styleUrls: ['./material-vertical-tabs.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonToggleModule, MatBadgeModule]
+})
+export class MaterialVerticalTabsComponent implements OnInit {
+  @Input() tabConfig$: any[];
+  @Output() tabClick: EventEmitter<any> = new EventEmitter();
+
+  selectedTabId$: any;
+
+  ngOnInit(): void {
+    // tabConfig$  [ {name: , id: , count: }]
+
+    if (this.tabConfig$) {
+      // seletedTabId is the first tab, unless another is selected
+      this.selectedTabId$ = this.tabConfig$[0]?.id;
+
+      // run through and see anything is selected
+      for (let i = 0; i < this.tabConfig$.length; ++i) {
+        const aTab = this.tabConfig$[i];
+        if (aTab?.selected) {
+          this.selectedTabId$ = aTab.id;
+          break;
+        }
+      }
+    }
+  }
+
+  onChange(tab: any) {
+    this.tabClick.emit(tab);
+  }
+}

package/lib/designSystemExtension/operator/operator.component.html

@@ -0,0 +1,20 @@
+<div class="psdk-operator psdk-double">
+  <div class="psdk-label">
+    {{ label$ }}
+  </div>
+  <div class="psdk-double">
+    <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+  </div>
+  <div>{{ date$ }}</div>
+</div>
+
+<div>
+  <div *ngIf="bShowPopover$" class="psdk-operator-popover">
+    <dl>
+      <div *ngFor="let field of fields$; let i = index">
+        <dt class="psdk-operator-name">{{ field.name }}</dt>
+        <dd class="psdk-operator-value">{{ field.value }}</dd>
+      </div>
+    </dl>
+  </div>
+</div>

package/lib/designSystemExtension/operator/operator.component.scss

@@ -0,0 +1,83 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-operator {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.8rem;
+  color: $app-neutral-color;
+  align-items: center;
+}
+
+.psdk-operator-popover {
+  display: table;
+  margin: auto;
+  min-width: 100px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px #777;
+  position: absolute;
+  z-index: 99;
+}
+
+.psdk-operator-name {
+  color: $app-neutral-color;
+}
+
+.psdk-operator-value {
+  padding-left: 5px;
+  color: $app-neutral-dark-color;
+  margin: 0px;
+}
+
+.psdk-single {
+  flex: 1;
+}
+
+.psdk-double {
+  column-gap: 1rem;
+  text-align: center;
+}
+
+.psdk-top-pad {
+  padding-top: 10px;
+}
+
+dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-column-gap: calc(2 * 0.5rem);
+  grid-row-gap: calc(1 * 0.5rem);
+}
+
+dl::before,
+dl::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+dt {
+  max-width: 20ch;
+  grid-column-start: 1;
+}
+
+dd {
+  max-width: 75ch;
+  grid-column-start: 2;
+}
+
+.mat-mdc-button.mat-primary,
+.mat-mdc-icon-button.mat-primary,
+.mat-mdc-outlined-button.mat-primary {
+  padding: 0px;
+  line-height: unset;
+}
+
+.psdk-label {
+  word-break: break-word;
+  grid-column-start: 1;
+  max-width: max-content;
+  color: rgba(0, 0, 0, 0.8);
+}

package/lib/designSystemExtension/operator/operator.component.spec.ts

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

package/lib/designSystemExtension/operator/operator.component.ts

@@ -0,0 +1,146 @@
+import { Component, ElementRef, OnInit, Input, Renderer2, ChangeDetectorRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { Utils } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-operator',
+  templateUrl: './operator.component.html',
+  styleUrls: ['./operator.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule]
+})
+export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+
+  fields$: any[] = [];
+  bShowPopover$: boolean;
+  date$: string;
+  name$: string;
+  label$: string;
+  id$: string;
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+    private cdRef: ChangeDetectorRef,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    this.renderer.listen('window', 'click', el => {
+      const clickedInside = this.el.nativeElement.contains(el.target);
+
+      if (!clickedInside) {
+        this.bShowPopover$ = false;
+      }
+    });
+
+    this.bShowPopover$ = false;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+    if (pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.renderer.destroy();
+  }
+
+  updateSelf(): void {
+    const configProps$ = this.pConn$.getConfigProps() as any;
+    if (configProps$?.label?.toLowerCase() == 'create operator') {
+      this.name$ = configProps$.createOperator.userName;
+      this.id$ = configProps$.createOperator.userId;
+      this.label$ = configProps$.createLabel;
+    } else if (configProps$?.label?.toLowerCase() == 'update operator') {
+      this.name$ = configProps$.updateOperator.userName;
+      this.id$ = configProps$.updateOperator.userId;
+      this.label$ = configProps$.updateLabel;
+    } else if (configProps$?.label?.toLowerCase() == 'resolve operator') {
+      this.name$ = configProps$.resolveOperator.userName;
+      this.id$ = configProps$.resolveOperator.userId;
+      this.label$ = configProps$.resolveLabel;
+    } else {
+      this.name$ = configProps$?.value.userName;
+      this.id$ = configProps$?.value.userId;
+      this.label$ = configProps$.label;
+    }
+    this.date$ = this.utils.generateDate(configProps$?.updateDateTime, 'DateTime-Since');
+  }
+
+  showOperator() {
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(this.id$);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+    const fillerString = '---';
+
+    operatorPreviewPromise.then((res: any) => {
+      if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+        this.fields$ = [
+          {
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
+            value: res.data.pyOperatorInfo.pyPosition != '' ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
+            value: res.data.pyOperatorInfo.pyOrganization != '' ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: 'ReportToUserName',
+            name: localizedVal('Reports to', localeCategory),
+            value: res.data.pyOperatorInfo.pyReportToUserName != '' ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: 'pyTelephone',
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone != '' ? res.data.pyOperatorInfo.pyTelephone : fillerString
+          },
+          {
+            id: 'pyEmailAddress',
+            name: localizedVal('Email address', localeCategory),
+            value: res.data.pyOperatorInfo.pyEmailAddress != '' ? res.data.pyOperatorInfo.pyEmailAddress : fillerString
+          }
+        ];
+
+        this.bShowPopover$ = true;
+        this.cdRef.detectChanges();
+      } else {
+        console.log(
+          `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
+        );
+        this.fields$ = [
+          {
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'ReportToUserName',
+            name: localizedVal('Reports to', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'pyTelephone',
+            name: localizedVal('Telephone', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'pyEmailAddress',
+            name: localizedVal('Email address', localeCategory),
+            value: fillerString
+          }
+        ];
+      }
+    });
+  }
+}

package/lib/designSystemExtension/pulse/pulse.component.html

@@ -0,0 +1,3 @@
+<div class="psdk-pulse">
+  <component-mapper [name]="'FeedContainer'" [props]="{ pConn$ }"></component-mapper>
+</div>

package/lib/designSystemExtension/pulse/pulse.component.scss

@@ -0,0 +1,8 @@
+.psdk-pulse {
+  padding: 1rem;
+  margin: 1rem;
+  border-radius: 0.6125rem;
+  border-left: 6px solid;
+  border-left-color: #7986cb;
+  background-color: white;
+}

package/lib/designSystemExtension/pulse/pulse.component.spec.ts

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

package/lib/designSystemExtension/pulse/pulse.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface PulseProps {
+  // If any, enter additional props that only exist on this component
+  children?: any[];
+}
+
+@Component({
+  selector: 'app-pulse',
+  templateUrl: './pulse.component.html',
+  styleUrls: ['./pulse.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class PulseComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+
+  configProps$: PulseProps;
+  currentUser$: string;
+  currentUserInitials$ = '--';
+
+  ngOnInit() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    // this.currentUser$ = this.configProps$.currentUser;
+    this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
+
+    if (this.currentUser$ != '') {
+      this.currentUserInitials$ = this.currentUser$.charAt(0);
+
+      if (this.currentUser$.lastIndexOf(' ') > 0) {
+        const lastName = this.currentUser$.substring(this.currentUser$.lastIndexOf(' ') + 1);
+        this.currentUserInitials$ += lastName.charAt(0);
+      } else if (this.currentUser$.lastIndexOf('.') > 0) {
+        const lastName = this.currentUser$.substring(this.currentUser$.lastIndexOf('.') + 1);
+        this.currentUserInitials$ += lastName.charAt(0);
+      }
+    }
+  }
+}

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,33 @@
+<div [attr.data-test-id]="testId">
+  <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
+  <div class="rich-text-editor" *ngIf="!readonly">
+    <editor
+      [formControl]="richText"
+      [attr.disabled]="disabled"
+      [initialValue]="value"
+      [init]="{
+        base_url: '/tinymce',
+        suffix: '.min',
+        menubar: false,
+        placeholder,
+        statusbar: false,
+        min_height: 130,
+        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+        autoresize_bottom_margin: 0,
+        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+        toolbar_location: 'bottom',
+        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+        branding: false,
+        paste_data_images: true,
+        file_picker_types: 'image',
+        file_picker_callback: filePickerCallback
+      }"
+      (onBlur)="blur()"
+      (onChange)="change($event)"
+    ></editor>
+    <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
+  </div>
+  <div *ngIf="readonly">
+    <div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
+  </div>
+</div>

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,20 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+.rich-text-label {
+  margin: 5px;
+  font-size: 16px;
+}
+
+.rich-text-editor {
+  margin: 10px 0px;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: $app-neutral-dark-color;
+}
+
+.text-editor-error {
+  color: $app-error-light-color;
+}

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { RichTextEditorComponent } from './rich-text-editor.component';
+
+describe('RichTextComponent', () => {
+  let component: RichTextEditorComponent;
+  let fixture: ComponentFixture<RichTextEditorComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RichTextEditorComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichTextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});