@pega/dx-component-builder-sdk 0.23.11 → 0.23.12

package/tests/assets/sdk-a/components/create/override-sdk/field/date-time/date-time.component.ts

@@ -67,7 +67,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   configProps$: DateTimeProps;
 
   label$ = '';
-  value$: string;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -106,7 +106,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -118,7 +118,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
     if (this.angularPConnectData.unsubscribeFn) {
@@ -152,7 +152,8 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     this.displayMode$ = this.configProps$.displayMode;
     this.testId = this.configProps$.testId;
     this.helperText = this.configProps$.helperText;
-
+    this.value$ = this.configProps$?.value;
+    this.fieldControl.setValue(this.value$);
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {

package/tests/assets/sdk-a/components/create/override-sdk/field/decimal/decimal.component.html

@@ -14,7 +14,7 @@
           step="0.01"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (blur)="fieldOnBlur($event)"
         />

package/tests/assets/sdk-a/components/create/override-sdk/field/decimal/decimal.component.ts

@@ -73,7 +73,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -85,7 +85,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/dropdown/dropdown.component.html

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
         >
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ getLocalizedOptionValue(opt) }}

package/tests/assets/sdk-a/components/create/override-sdk/field/dropdown/dropdown.component.ts

@@ -79,7 +79,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -91,7 +91,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/email/email.component.html

@@ -12,7 +12,7 @@
           type="email"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/tests/assets/sdk-a/components/create/override-sdk/field/email/email.component.ts

@@ -61,7 +61,7 @@ export class EmailComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -73,7 +73,7 @@ export class EmailComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/integer/integer.component.html

@@ -13,7 +13,7 @@
           step="1"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/tests/assets/sdk-a/components/create/override-sdk/field/integer/integer.component.ts

@@ -61,7 +61,7 @@ export class IntegerComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -73,7 +73,7 @@ export class IntegerComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/percentage/percentage.component.html

@@ -14,7 +14,7 @@
           step=".01"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/tests/assets/sdk-a/components/create/override-sdk/field/percentage/percentage.component.ts

@@ -60,7 +60,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -72,7 +72,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/phone/phone.component.html

@@ -4,11 +4,10 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <!-- <div class="psdk-full-width"> -->
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <ngx-mat-intl-tel-input
           [attr.data-test-id]="testId"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           [preferredCountries]="['us']"
           [enablePlaceholder]="true"
           [enableSearch]="true"
@@ -19,7 +18,6 @@
         <mat-label>{{ label$ }}</mat-label>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
-      <!-- </div> -->
     </div>
   </div>
 </ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/field/phone/phone.component.ts

@@ -67,7 +67,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -79,7 +79,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/radio-buttons/radio-buttons.component.html

@@ -16,7 +16,7 @@
       <mat-radio-group
         [value]="value$"
         [required]="bRequired$"
-        [formControlName]="controlName$"
+        [formControl]="fieldControl"
         [attr.data-test-id]="testId"
         (change)="fieldOnChange($event)"
         class="{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}"

package/tests/assets/sdk-a/components/create/override-sdk/field/radio-buttons/radio-buttons.component.ts

@@ -78,7 +78,7 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -90,7 +90,7 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/scalar-list/scalar-list.component.ts

@@ -49,7 +49,7 @@ export class ScalarListComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -61,7 +61,7 @@ export class ScalarListComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/semantic-link/semantic-link.component.scss

@@ -7,7 +7,7 @@
 }
 
 .psdk-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/text/text.component.scss

@@ -25,6 +25,6 @@
 }
 
 .psdk-details-fields-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/text-area/text-area.component.html

@@ -15,6 +15,7 @@
             [value]="value$"
             [required]="bRequired$"
             [disabled]="bDisabled$"
+            [formControl]="fieldControl"
             (change)="fieldOnChange($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/tests/assets/sdk-a/components/create/override-sdk/field/text-area/text-area.component.ts

@@ -62,7 +62,7 @@ export class TextAreaComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -74,7 +74,7 @@ export class TextAreaComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/text-input/text-input.component.html

@@ -13,7 +13,7 @@
           [value]="value$"
           [required]="bRequired$"
           [attr.data-test-id]="testId"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />

package/tests/assets/sdk-a/components/create/override-sdk/field/text-input/text-input.component.ts

@@ -62,7 +62,7 @@ export class TextInputComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -74,7 +74,7 @@ export class TextInputComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/time/time.component.html

@@ -12,7 +12,7 @@
           type="time"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />

package/tests/assets/sdk-a/components/create/override-sdk/field/time/time.component.ts

@@ -59,7 +59,7 @@ export class TimeComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -71,7 +71,7 @@ export class TimeComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
     if (this.angularPConnectData.unsubscribeFn) {

package/tests/assets/sdk-a/components/create/override-sdk/field/url/url.component.html

@@ -12,7 +12,7 @@
           type="url"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />

package/tests/assets/sdk-a/components/create/override-sdk/field/url/url.component.ts

@@ -60,7 +60,7 @@ export class UrlComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
@@ -72,7 +72,7 @@ export class UrlComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.html

@@ -7,7 +7,7 @@
       <mat-select
         [value]="value$"
         [required]="bRequired$"
-        [formControlName]="controlName$"
+        [formControl]="fieldControl"
         [attr.data-test-id]="testId"
         (selectionChange)="fieldOnChange($event)"
       >
@@ -27,7 +27,7 @@
       <input
         matInput
         [placeholder]="placeholder"
-        [formControlName]="controlName$"
+        [formControl]="fieldControl"
         [value]="value$"
         [required]="bRequired$"
         [matAutocomplete]="auto"

package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.scss

@@ -1,8 +1,6 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-user-reference {
   font-size: 0.8rem;
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 .psdk-single {
   flex: 1;

package/tests/assets/sdk-a/components/create/override-sdk/infra/action-buttons/action-buttons.component.scss

@@ -1 +0,0 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';

package/tests/assets/sdk-a/components/create/override-sdk/infra/assignment-card/assignment-card.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-flow-container {

package/tests/assets/sdk-a/components/create/override-sdk/infra/multi-step/multi-step.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-icon {
@@ -10,21 +8,21 @@
 }
 
 .psdk-icon-current {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
 }
 
 .psdk-icon-not-current {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-current-svg-icon {
   width: 1rem;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-not-current-svg-icon {
   width: 1rem;
-  filter: $app-neutral-color-filter;
+  filter: var(--app-neutral-color-filter);
 }
 
 mat-vertical-stepper {
@@ -37,16 +35,16 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--app-label-selected-color);
 }
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
 }
 
 .psdk-flow-container-top {
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
   padding: 0rem 0.625rem;
   border-radius: 0.3125rem;
 }
@@ -83,8 +81,8 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: $app-neutral-color;
-  color: #fff;
+  background-color: var(--app-neutral-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -97,13 +95,13 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
+  color: var(--app-form-color);
 }
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
-  background-color: $app-primary-color;
-  color: #fff;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -112,7 +110,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -124,7 +122,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--app-label-selected-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -154,7 +152,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-multi-step-border-color);
 }
 
 .psdk-horizontal-stepper {
@@ -183,8 +181,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
-  background-color: $app-neutral-color;
-  color: #fff;
+  background-color: var(--app-neutral-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -204,8 +202,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon-selected {
-  background-color: $app-primary-color;
-  color: #fff;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -217,7 +215,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -227,7 +225,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--app-label-selected-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -237,7 +235,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-color: var(--app-multi-step-border-color);
   border-top-width: 1px;
   border-top-style: solid;
   flex: auto;