@pega/angular-sdk-overrides 0.26.1 → 0.26.3

package/lib/designSystemExtension/alert/alert.component.html

@@ -10,7 +10,10 @@
   <div class="psdk-alert-icon">
     <mat-icon>{{ getMatIcon(severity) }}</mat-icon>
   </div>
-  <div>{{ message }}</div>
+  <div *ngIf="messageIsHtml; else textMessage" [innerHTML]="messageText"></div>
+  <ng-template #textMessage>
+    <div>{{ messageText }}</div>
+  </ng-template>
   <div *ngIf="!hideClose" style="margin-left: auto">
     <button class="close-button" mat-icon-button (click)="onCloseClick()">
       <mat-icon>close</mat-icon>

package/lib/designSystemExtension/alert/alert.component.scss

@@ -1,8 +1,10 @@
 .psdk-alert {
-  border: 1px solid;
+  background-color: var(--mat-sys-surface-container-high);
+  border: 1px solid var(--mat-sys-outline-variant);
   display: flex;
   align-items: center;
   border-radius: 4px;
+  color: var(--mat-sys-on-surface);
   padding: 10px;
   margin: 5px 0px;
 }
@@ -22,26 +24,23 @@
 }
 
 .psdk-grid-warning {
-  color: var(--app-alert-warning-color);
-  border: 1px solid var(--app-alert-warning-border-color);
+  border-color: var(--mat-sys-secondary);
   .mat-icon {
-    color: var(--app-alert-warning-border-color);
+    color: var(--mat-sys-secondary);
   }
 }
 
 .psdk-grid-success {
-  color: var(--app-alert-success-color);
-  border: 1px solid var(--app-alert-success-border-color);
+  border-color: var(--mat-sys-tertiary);
   .mat-icon {
-    color: var(--app-alert-success-border-color);
+    color: var(--mat-sys-tertiary);
   }
 }
 
 .psdk-grid-info {
-  color: var(--app-alert-info-color);
-  border: 1px solid var(--app-alert-info-border-color);
+  border-color: var(--mat-sys-primary);
   .mat-icon {
-    color: var(--app-alert-info-border-color);
+    color: var(--mat-sys-primary);
   }
 }
 

package/lib/designSystemExtension/alert/alert.component.ts

@@ -9,11 +9,16 @@ import { MatIconModule } from '@angular/material/icon';
   imports: [CommonModule, MatIconModule]
 })
 export class AlertComponent {
-  @Input() message: any[];
+  @Input() message: unknown;
+  @Input() messageIsHtml = false;
   @Input() severity;
   @Input() hideClose;
   @Output() onClose: EventEmitter<any> = new EventEmitter();
 
+  get messageText(): string {
+    return this.message == null ? '' : String(this.message);
+  }
+
   getMatIcon(severity) {
     let variant;
     switch (severity) {
@@ -36,7 +41,6 @@ export class AlertComponent {
   }
 
   onCloseClick() {
-    alert('Close clicked');
     this.onClose.emit({ Page: 'Page', target: 'target', type: 'type' });
   }
 }

package/lib/designSystemExtension/field-group/field-group.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, TemplateRef } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -9,14 +9,22 @@ import { MatIconModule } from '@angular/material/icon';
   styleUrls: ['./field-group.component.scss'],
   imports: [CommonModule, MatGridListModule, MatIconModule]
 })
-export class FieldGroupComponent {
+export class FieldGroupComponent implements OnChanges {
   @Input() name?: string;
-  @Input() collapsible = false;
+  @Input() collapseOnLoad: 'none' | 'expanded' | 'collapsed' = 'none';
   @Input() instructions: string;
   @Input() childrenTemplate: TemplateRef<any>;
 
+  collapsible = false;
   collapsed = false;
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['collapseOnLoad']) {
+      this.collapsible = this.collapseOnLoad !== 'none';
+      this.collapsed = this.collapseOnLoad === 'collapsed';
+    }
+  }
+
   headerClickHandler() {
     this.collapsed = !this.collapsed;
   }

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -18,6 +18,9 @@
           <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value }}</a>
           <span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value }}</span>
           <label *ngSwitchCase="'caseoperator'">operator</label>
+          <div *ngSwitchCase="'objectreference'" class="psdk-csf-object-reference-value">
+            <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"></component-mapper>
+          </div>
           <span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value }}</span>
         </dd>
       </ng-template>
@@ -46,9 +49,15 @@
           {{ field.config?.displayLabel || field.config?.label }}
         </dt>
         <dd class="psdk-csf-secondary-field-data">
-          <div [ngSwitch]="field.type">
-            <label *ngSwitchCase="'UserReference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
-            <label *ngSwitchCase="'Checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
+          <div [ngSwitch]="field.type.toLowerCase()">
+            <label *ngSwitchCase="'userreference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
+            <label *ngSwitchCase="'checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
+            <div *ngSwitchCase="'objectreference'" class="psdk-csf-object-reference-value">
+              <component-mapper
+                name="ObjectReference"
+                [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"
+              ></component-mapper>
+            </div>
             <label *ngSwitchDefault class="psdk-secondary-value">{{ field.config.value || '---' }}</label>
           </div>
         </dd>

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

@@ -112,7 +112,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
         ];
 
         this.bShowPopover$ = true;
-        this.cdRef.detectChanges();
+        this.cdRef.markForCheck();
       } else {
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
@@ -144,6 +144,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
             value: fillerString
           }
         ];
+        this.cdRef.markForCheck();
       }
     });
   }

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

@@ -2,16 +2,110 @@
   <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]="editorConfig"
-      (onBlur)="blur()"
-      (onChange)="change($event)"
-    ></editor>
-
-    <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
+    <div
+      class="tiptap-container"
+      [class.disabled]="disabled"
+      [class.tiptap-container-invalid]="richText.invalid && (error || richText.touched || richText.dirty)"
+    >
+      <div #editorEl class="tiptap-editor-area" [attr.aria-invalid]="richText.invalid && (error || richText.touched || richText.dirty)"></div>
+
+      <div class="tiptap-toolbar" *ngIf="!disabled" (mousedown)="$event.preventDefault()">
+        <mat-form-field class="tiptap-block-select" appearance="outline" subscriptSizing="dynamic">
+          <mat-select [value]="currentBlock" (selectionChange)="setBlock($event.value)" aria-label="Text block type">
+            <mat-option value="paragraph">Paragraph</mat-option>
+            <mat-option value="h1">Heading 1</mat-option>
+            <mat-option value="h2">Heading 2</mat-option>
+            <mat-option value="h3">Heading 3</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <span class="tiptap-sep"></span>
+
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('bold')"
+          (click)="toggleBold()"
+          title="Bold"
+          aria-label="Bold"
+        >
+          <mat-icon>format_bold</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('italic')"
+          (click)="toggleItalic()"
+          title="Italic"
+          aria-label="Italic"
+        >
+          <mat-icon>format_italic</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('strike')"
+          (click)="toggleStrike()"
+          title="Strikethrough"
+          aria-label="Strikethrough"
+        >
+          <mat-icon>strikethrough_s</mat-icon>
+        </button>
+
+        <span class="tiptap-sep"></span>
+
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('bulletList')"
+          (click)="toggleBulletList()"
+          title="Bulleted list"
+          aria-label="Bulleted list"
+        >
+          <mat-icon>format_list_bulleted</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('orderedList')"
+          (click)="toggleOrderedList()"
+          title="Numbered list"
+          aria-label="Numbered list"
+        >
+          <mat-icon>format_list_numbered</mat-icon>
+        </button>
+        <button mat-icon-button type="button" class="tiptap-btn" (click)="outdent()" title="Decrease indent" aria-label="Decrease indent">
+          <mat-icon>format_indent_decrease</mat-icon>
+        </button>
+        <button mat-icon-button type="button" class="tiptap-btn" (click)="indent()" title="Increase indent" aria-label="Increase indent">
+          <mat-icon>format_indent_increase</mat-icon>
+        </button>
+
+        <span class="tiptap-sep"></span>
+
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('link')"
+          (click)="addLink()"
+          title="Insert link"
+          aria-label="Insert link"
+        >
+          <mat-icon>link</mat-icon>
+        </button>
+        <button mat-icon-button type="button" class="tiptap-btn" (click)="addImage()" title="Insert image" aria-label="Insert image">
+          <mat-icon>image</mat-icon>
+        </button>
+      </div>
+    </div>
+
+    <p *ngIf="richText.invalid && (error || richText.touched || richText.dirty)" [ngClass]="'text-editor-error'">{{ info }}</p>
   </div>
 
   <div *ngIf="readonly">

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

@@ -14,5 +14,145 @@
 }
 
 .text-editor-error {
-  color: var(--app-error-light-color);
+  margin: 4px 0 0;
+  color: var(--mat-sys-error, var(--app-error-light-color, #ba1a1a));
+}
+
+.tiptap-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--mat-sys-outline, #ccc);
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: transparent;
+
+  &.tiptap-container-invalid {
+    border-color: var(--mat-sys-error, var(--app-error-light-color, #ba1a1a));
+  }
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.tiptap-editor-area {
+  min-height: 130px;
+  padding: 8px 12px;
+  color: var(--mat-sys-on-surface, #000);
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  outline: none;
+  background: var(--mat-sys-surface, #fff);
+
+  ::ng-deep .ProseMirror {
+    min-height: 130px;
+    outline: none;
+
+    > * + * {
+      margin-top: 0.5em;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.25rem;
+    }
+
+    a {
+      color: var(--mat-sys-primary, #6200ee);
+      text-decoration: underline;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  ::ng-deep .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: var(--mat-sys-on-surface-variant, #888);
+    pointer-events: none;
+    height: 0;
+  }
+}
+
+.tiptap-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-height: 56px;
+  padding: 5px 12px;
+  background-color: var(--mat-sys-surface-container-high, #f0f0f0);
+  border-top: 1px solid var(--mat-sys-outline-variant, #ccc);
+}
+
+.tiptap-block-select {
+  width: 176px;
+  margin: 0;
+
+  ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    height: 40px;
+  }
+
+  ::ng-deep .mat-mdc-form-field-flex,
+  ::ng-deep .mat-mdc-form-field-infix {
+    min-height: 40px;
+    height: 40px;
+  }
+
+  ::ng-deep .mat-mdc-form-field-infix {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.tiptap-btn {
+  background: transparent;
+  border: none;
+  color: var(--mat-sys-on-surface-variant, #555);
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  border-radius: 4px;
+  line-height: 1;
+
+  ::ng-deep .mat-icon {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+    line-height: 22px;
+  }
+
+  &:hover {
+    background: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05));
+  }
+
+  &.active {
+    background: var(--mat-sys-secondary-container, #e8def8);
+    color: var(--mat-sys-on-secondary-container, #1d192b);
+  }
+}
+
+.tiptap-sep {
+  width: 1px;
+  height: 24px;
+  background: var(--mat-sys-outline-variant, #ccc);
+  margin: 0 4px;
+}
+
+.readonly-richtext-editor {
+  ::ng-deep img {
+    max-width: 100%;
+    height: auto;
+  }
 }