@pega/angular-sdk-overrides 0.25.15 → 0.26.2

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

@@ -1,18 +1,37 @@
-import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
 
-declare let tinymce: any;
+type BlockType = 'paragraph' | 'h1' | 'h2' | 'h3';
 
 @Component({
   selector: 'app-rich-text-editor',
   templateUrl: './rich-text-editor.component.html',
   styleUrls: ['./rich-text-editor.component.scss'],
-  imports: [CommonModule, EditorModule, ReactiveFormsModule],
-  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
+  imports: [CommonModule, ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatSelectModule]
 })
-export class RichTextEditorComponent implements OnChanges {
+export class RichTextEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   @Input() placeholder;
   @Input() disabled;
   @Input() readonly;
@@ -26,13 +45,27 @@ export class RichTextEditorComponent implements OnChanges {
   @Output() onBlur: EventEmitter<any> = new EventEmitter();
   @Output() onChange: EventEmitter<any> = new EventEmitter();
 
-  richText = new FormControl();
-  editorConfig: any = {};
+  private editorEl?: ElementRef<HTMLDivElement>;
 
-  ngOnChanges() {
-    if (this.required) {
-      this.richText.addValidators(Validators.required);
+  richText = new FormControl('');
+  editor?: Editor;
+  currentBlock: BlockType = 'paragraph';
+
+  private viewInitialized = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  @ViewChild('editorEl')
+  set editorElement(element: ElementRef<HTMLDivElement> | undefined) {
+    this.editorEl = element;
+    if (element && this.viewInitialized && !this.readonly && !this.editor) {
+      this.initializeEditor();
     }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.richText.setValidators(this.required ? Validators.required : null);
+    this.richText.updateValueAndValidity({ emitEvent: false });
 
     if (this.disabled) {
       this.richText.disable();
@@ -40,79 +73,198 @@ export class RichTextEditorComponent implements OnChanges {
       this.richText.enable();
     }
 
-    if (this.value) {
-      this.richText.setValue(this.value);
+    this.richText.setValue(this.value ?? '', { emitEvent: false });
+
+    if (!this.viewInitialized) return;
+
+    if (this.readonly) {
+      this.destroyEditor();
+      return;
     }
 
-    const themeElement = document.querySelector('.dark') || document.body;
-    let textColor = getComputedStyle(themeElement).getPropertyValue('--mat-sys-on-surface').trim();
-    if (!textColor) textColor = '#000000';
-
-    this.editorConfig = {
-      base_url: '/tinymce',
-      suffix: '.min',
-      menubar: false,
-      placeholder: this.placeholder,
-      statusbar: false,
-      min_height: 130,
-      plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
-      autoresize_bottom_margin: 0,
-      toolbar: this.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;
-          color: ${textColor} !important;
-          background: transparent !important;
-        }
-      `,
-      branding: false,
-      paste_data_images: true,
-      file_picker_types: 'image',
-      file_picker_callback: this.filePickerCallback
-    };
-  }
-
-  filePickerCallback = cb => {
+    if (!this.editor && this.editorEl) {
+      this.initializeEditor();
+    }
+
+    if (this.editor && changes['value'] && this.value !== this.editor.getHTML()) {
+      this.editor.commands.setContent(this.value ?? '', { emitUpdate: false });
+    }
+    if (this.editor && changes['disabled']) {
+      this.editor.setEditable(!this.disabled);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.viewInitialized = true;
+    if (!this.readonly) this.initializeEditor();
+  }
+
+  private initializeEditor(): void {
+    if (!this.editorEl || this.editor) return;
+
+    this.editor = new Editor({
+      element: this.editorEl.nativeElement,
+      extensions: [
+        StarterKit,
+        Placeholder.configure({ placeholder: this.placeholder || '' }),
+        Image.configure({ inline: false, allowBase64: true }),
+        Link.configure({ openOnClick: false, autolink: true })
+      ],
+      content: this.value || '',
+      editable: !this.disabled,
+      onUpdate: ({ editor }) => {
+        const html = editor.getHTML();
+        this.richText.setValue(html, { emitEvent: false });
+        this.richText.markAsDirty();
+        this.onChange.emit(html);
+        this.cdr.markForCheck();
+      },
+      onBlur: ({ editor }) => {
+        this.richText.markAsTouched();
+        this.onBlur.emit(editor.getHTML());
+        this.cdr.markForCheck();
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.updateCurrentBlock(editor);
+        this.cdr.markForCheck();
+      }
+    });
+    this.updateCurrentBlock(this.editor);
+  }
+
+  private updateCurrentBlock(editor: Editor): void {
+    if (editor.isActive('heading', { level: 1 })) this.currentBlock = 'h1';
+    else if (editor.isActive('heading', { level: 2 })) this.currentBlock = 'h2';
+    else if (editor.isActive('heading', { level: 3 })) this.currentBlock = 'h3';
+    else this.currentBlock = 'paragraph';
+  }
+
+  private destroyEditor(): void {
+    this.editor?.destroy();
+    this.editor = undefined;
+    this.currentBlock = 'paragraph';
+  }
+
+  ngOnDestroy(): void {
+    this.destroyEditor();
+  }
+
+  isActive(name: string, attrs?: Record<string, any>): boolean {
+    return this.editor ? this.editor.isActive(name, attrs) : false;
+  }
+
+  setBlock(value: string) {
+    if (!this.editor) return;
+    const chain = this.editor.chain().focus();
+    switch (value) {
+      case 'h1':
+        chain.toggleHeading({ level: 1 }).run();
+        break;
+      case 'h2':
+        chain.toggleHeading({ level: 2 }).run();
+        break;
+      case 'h3':
+        chain.toggleHeading({ level: 3 }).run();
+        break;
+      default:
+        chain.setParagraph().run();
+    }
+    this.currentBlock = value as BlockType;
+  }
+
+  toggleBold() {
+    this.editor?.chain().focus().toggleBold().run();
+  }
+
+  toggleItalic() {
+    this.editor?.chain().focus().toggleItalic().run();
+  }
+
+  toggleStrike() {
+    this.editor?.chain().focus().toggleStrike().run();
+  }
+
+  toggleBulletList() {
+    this.editor?.chain().focus().toggleBulletList().run();
+  }
+
+  toggleOrderedList() {
+    this.editor?.chain().focus().toggleOrderedList().run();
+  }
+
+  outdent() {
+    if (!this.editor) return;
+    if (this.editor.can().liftListItem('listItem')) {
+      this.editor.chain().focus().liftListItem('listItem').run();
+    } else {
+      this.editor.chain().focus().liftEmptyBlock().run();
+    }
+  }
+
+  indent() {
+    this.editor?.chain().focus().sinkListItem('listItem').run();
+  }
+
+  addLink() {
+    if (!this.editor) return;
+    const previous = this.editor.getAttributes('link')?.['href'] ?? '';
+    const { from, to, empty } = this.editor.state.selection;
+    const url = window.prompt('Enter URL', previous);
+    if (url === null) return;
+    if (url === '') {
+      this.editor.chain().focus().setTextSelection({ from, to }).extendMarkRange('link').unsetLink().run();
+      return;
+    }
+    const normalizedUrl = this.normalizeUrl(url);
+    if (!normalizedUrl) return;
+    if (empty) {
+      this.editor
+        .chain()
+        .focus()
+        .insertContentAt(from, {
+          type: 'text',
+          text: url,
+          marks: [{ type: 'link', attrs: { href: normalizedUrl } }]
+        })
+        .run();
+      return;
+    }
+    this.editor.chain().focus().setTextSelection({ from, to }).extendMarkRange('link').setLink({ href: normalizedUrl }).run();
+  }
+
+  private normalizeUrl(url: string): string | null {
+    const trimmedUrl = url.trim();
+    if (!trimmedUrl) return null;
+    if (/^\/\//.test(trimmedUrl)) return `https:${trimmedUrl}`;
+    if (/^(?:https?|mailto|tel|ftp):/i.test(trimmedUrl)) return trimmedUrl;
+    if (/^[a-z][a-z\d+.-]*:/i.test(trimmedUrl)) return null;
+    return `https://${trimmedUrl}`;
+  }
+
+  addImage() {
+    if (!this.editor) return;
+    const insertPosition = this.editor.state.selection.to;
     const input = document.createElement('input');
     input.setAttribute('type', 'file');
     input.setAttribute('accept', 'image/*');
 
     input.addEventListener('change', (e: any) => {
-      const file = e.target.files[0];
-
-      const reader: any = new FileReader();
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
       reader.addEventListener('load', () => {
-        /*
-            Note: Now we need to register the blob in TinyMCEs image blob
-            registry. In the next release this part hopefully won't be
-            necessary, as we are looking to handle it internally.
-        */
-        const blobId = `blobid${new Date().getTime()}`;
-        console.log('editorRef', tinymce.activeEditor);
-        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
-        const base64 = reader.result.split(',')[1];
-        const blobInfo = blobCache.create(blobId, file, base64);
-        blobCache.add(blobInfo);
-
-        /* call the callback and populate the Title field with the file name */
-        cb(blobInfo.blobUri(), { title: file.name });
+        const src = reader.result as string;
+        this.editor
+          ?.chain()
+          .focus()
+          .setTextSelection(insertPosition)
+          .insertContent({ type: 'image', attrs: { src, alt: file.name, title: file.name } })
+          .run();
       });
+      reader.addEventListener('error', () => this.cdr.markForCheck());
       reader.readAsDataURL(file);
     });
 
     input.click();
-  };
-
-  blur() {
-    if (tinymce.activeEditor) {
-      const editorValue = tinymce.activeEditor.getContent({ format: 'html' });
-      this.onBlur.emit(editorValue);
-    }
-  }
-
-  change(event) {
-    this.onChange.emit(event);
   }
 }

package/lib/field/auto-complete/auto-complete.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -20,6 +20,7 @@
             <span>{{ opt.value }}</span>
           </mat-option>
         </mat-autocomplete>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/auto-complete/auto-complete.component.ts

@@ -9,6 +9,7 @@ import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -41,6 +42,7 @@ interface AutoCompleteProps extends PConnFieldProps {
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ],
   providers: [DatapageService]

package/lib/field/check-box/check-box.component.html

@@ -18,7 +18,7 @@
         </span>
       </div>
       <div *ngIf="selectionMode === 'multi'; else single">
-        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+        <mat-option *ngFor="let item of listOfCheckboxes">
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
@@ -42,7 +42,9 @@
           (blur)="fieldOnBlur($event)"
           ><span [ngClass]="{ 'label-required': bRequired$ }">{{ caption$ }}</span></mat-checkbox
         >
-        <p *ngIf="helperText">{{ helperText }}</p>
+        <p *ngIf="helperText && !(fieldControl.invalid && (fieldControl.touched || fieldControl.dirty))" [appFieldWarning]="bFieldMessageVisible$">
+          {{ helperText }}
+        </p>
       </ng-template>
       <mat-error *ngIf="fieldControl.invalid && (fieldControl.touched || fieldControl.dirty)">{{ getErrorMessage() }}</mat-error>
     </div>

package/lib/field/check-box/check-box.component.ts

@@ -6,6 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatOptionModule } from '@angular/material/core';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
@@ -33,7 +34,15 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   selector: 'app-check-box',
   templateUrl: './check-box.component.html',
   styleUrls: ['./check-box.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatOptionModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class CheckBoxComponent extends FieldBase implements OnInit, OnDestroy {
   configProps$: CheckboxProps;

package/lib/field/currency/currency.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$" class="psdk-currency-field">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <div class="psdk-currency-input">
           <input
@@ -30,6 +30,7 @@
             [readonly]="bReadonly$"
           />
         </div>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/currency/currency.component.ts

@@ -6,6 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
@@ -23,7 +24,15 @@ interface CurrrencyProps extends PConnFieldProps {
   selector: 'app-currency',
   templateUrl: './currency.component.html',
   styleUrls: ['./currency.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgxCurrencyDirective,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class CurrencyComponent extends FieldBase {
   configProps$: CurrrencyProps;

package/lib/field/date/date.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -21,6 +21,7 @@
         />
         <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$" xPosition="end"></mat-datepicker>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

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

@@ -9,6 +9,7 @@ import { MAT_DATE_FORMATS } from '@angular/material/core';
 import { MomentDateModule } from '@angular/material-moment-adapter';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getDateFormatInfo } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
@@ -50,6 +51,7 @@ class MyFormat {
     MatDatepickerModule,
     MatNativeDateModule,
     MomentDateModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ],
   providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }]

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

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -18,6 +18,7 @@
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

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

@@ -20,61 +20,67 @@
     width: auto;
   }
 
-  .mat-datepicker-content,
-  .time-container {
-    box-shadow:
-      0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-    display: block;
-    border-radius: 4px;
-    background-color: var(--mat-datepicker-calendar-container-background-color);
-    color: var(--mat-datepicker-calendar-container-text-color);
+  .owl-dt-container {
+    background-color: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    color: var(--mat-datepicker-calendar-date-text-color);
-    border-color: var(--mat-datepicker-calendar-date-outline-color);
+  .owl-dt-container-row,
+  .owl-dt-container-info .owl-dt-container-range:last-child {
+    border-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-body-selected {
-    background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
-    color: var(--mat-datepicker-calendar-date-selected-state-text-color);
+  .owl-dt-calendar-control,
+  .owl-dt-calendar-table .owl-dt-calendar-cell {
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    border: none !important;
+  .owl-dt-calendar-table .owl-dt-calendar-header,
+  .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+    color: var(--mat-sys-on-surface-variant);
   }
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+  .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider::after {
+    background-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-arrow {
-    fill: var(--mat-datepicker-calendar-period-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
+    border-color: var(--mat-sys-outline);
   }
 
-  .mat-calendar-table-header th {
-    text-align: center;
-    padding: 0 0 8px 0;
-    color: var(--mat-datepicker-calendar-header-text-color);
-    font-size: var(--mat-datepicker-calendar-header-text-size);
-    font-weight: var(--mat-datepicker-calendar-header-text-weight);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 
-  .mat-datepicker-content .mat-calendar-previous-button,
-  .mat-datepicker-content .mat-calendar-next-button {
-    color: var(--mat-datepicker-calendar-navigation-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover,
+  .owl-dt-control-period-button:hover > .owl-dt-control-button-content,
+  .owl-dt-container-control-button:hover .owl-dt-control-button-content,
+  .owl-dt-control:focus > .owl-dt-control-content {
+    background-color: var(--mat-sys-surface-container-high);
   }
 
-  .mat-calendar-table-header-divider::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -8px;
-    right: -8px;
-    height: 1px;
-    background: var(--mat-datepicker-calendar-header-divider-color);
+  .owl-dt-timer-content .owl-dt-timer-input {
+    border-color: var(--mat-sys-outline);
+    background-color: var(--mat-sys-surface-container-highest);
+    color: var(--mat-sys-on-surface);
+  }
+
+  .owl-dt-container-buttons,
+  .owl-dt-container-info .owl-dt-container-info-active,
+  .owl-dt-timer-hour12 {
+    color: var(--mat-sys-primary);
+  }
+
+  .owl-dt-control-arrow-button[disabled] {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 }

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

@@ -9,6 +9,7 @@ import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angul
 import dayjs from 'dayjs';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getDateFormatInfo } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -31,6 +32,7 @@ interface DateTimeProps extends PConnFieldProps {
     MatDatepickerModule,
     OwlDateTimeModule,
     OwlNativeDateTimeModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })

package/lib/field/decimal/decimal.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           type="text"
@@ -29,6 +29,7 @@
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>