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

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/pega-dxil-my-page-widget.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 h2 {
   font-size: 1.2rem;
   margin-block-start: 0rem;
@@ -12,10 +10,10 @@ ul {
   padding-inline-start: 20px;
 }
 .psdk-announcement {
-  background-color: white;
+  background-color: var(--app-form-color);
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: #7986cb;
+  border-left-color: var(--app-primary-color);
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/alert/alert.component.scss

@@ -14,34 +14,34 @@
 }
 
 .psdk-alert-error {
-  color: rgb(82, 21, 8);
-  border: 1px solid rgb(207, 53, 22);
+  color: var(--app-alert-error-color);
+  border: 1px solid var(--app-alert-error-border-color);
   .mat-icon {
-    color: rgb(207, 53, 22);
+    color: var(--app-alert-error-border-color);
   }
 }
 
 .psdk-grid-warning {
-  color: rgb(102, 60, 0);
-  border: 1px solid #ff9800;
+  color: var(--app-alert-warning-color);
+  border: 1px solid var(--app-alert-warning-border-color);
   .mat-icon {
-    color: #ff9800;
+    color: var(--app-alert-warning-border-color);
   }
 }
 
 .psdk-grid-success {
-  color: rgb(2, 46, 9);
-  border: 1px solid rgb(6, 116, 23);
+  color: var(--app-alert-success-color);
+  border: 1px solid var(--app-alert-success-border-color);
   .mat-icon {
-    color: rgb(6, 116, 23);
+    color: var(--app-alert-success-border-color);
   }
 }
 
 .psdk-grid-info {
-  color: rgb(13, 60, 97);
-  border: 1px solid #2196f3;
+  color: var(--app-alert-info-color);
+  border: 1px solid var(--app-alert-info-border-color);
   .mat-icon {
-    color: #2196f3;
+    color: var(--app-alert-info-border-color);
   }
 }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-case-summary {
   display: block;
   margin: 0.625rem;
@@ -22,8 +20,8 @@
 
 .psdk-case-summary-status-data {
   display: block;
-  background-color: lavender;
-  color: $app-primary-color;
+  background-color: var(--app-primary-lightest-color);
+  color: var(--app-primary-color);
   padding: 0rem 0.625rem;
   display: inline;
   font-size: 0.75rem;
@@ -46,7 +44,7 @@
 }
 .psdk-case-summary-secondary .data {
   font-weight: 600;
-  color: $app-primary-color;
+  // color: $app-primary-color;
   padding-left: 1.25rem;
 }
 
@@ -76,7 +74,7 @@
   max-width: max-content;
   font-size: 0.8125rem;
   font-weight: 400;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--app-field-header-color);
 }
 
 .psdk-csf-primary-field-data {
@@ -107,7 +105,7 @@
   max-width: max-content;
   font-size: 0.8125rem;
   font-weight: 400;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--app-field-header-color);
   align-items: center;
   display: flex;
 }
@@ -125,9 +123,9 @@ span.psdk-csf-text-style {
 }
 
 span.psdk-csf-status-style {
-  background-color: #e9eef3;
+  background-color: var(--app-details-status-background);
   border-radius: calc(0.25 * 0.5rem);
-  color: #4c5a67;
+  color: var(--app-details-status-color);
   display: inline-block;
   font-size: 0.75rem;
   font-weight: bold;

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details/material-details.component.scss

@@ -23,7 +23,7 @@
 }
 
 .psdk-details-fields-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }
 
@@ -43,9 +43,9 @@ span.psdk-details-text-style {
 }
 
 span.psdk-details-status-style {
-  background-color: #e9eef3;
+  background-color: var(--app-details-status-background);
   border-radius: calc(0.25 * 0.5rem);
-  color: #4c5a67;
+  color: var(--app-details-status-color);
   display: inline-block;
   font-size: 0.75rem;
   font-weight: bold;
@@ -68,9 +68,9 @@ span.psdk-details-status-style {
 }
 
 span.psdk-details-status-style-hf {
-  background-color: #e9eef3;
+  background-color: var(--app-details-status-background);
   border-radius: calc(0.25 * 0.5rem);
-  color: #4c5a67;
+  color: var(--app-details-status-color);
   display: inline-block;
   font-size: 1.25rem;
   font-weight: 500;

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.scss

@@ -1,5 +1,5 @@
 .psdk-details-fields-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }
 
@@ -8,9 +8,9 @@ span.psdk-details-text-style-hf {
 }
 
 span.psdk-details-status-style-hf {
-  background-color: #e9eef3;
+  background-color: var(--app-details-status-background);
   border-radius: calc(0.25 * 0.5rem);
-  color: #4c5a67;
+  color: var(--app-details-status-color);
   display: inline-block;
   font-size: 0.75rem;
   font-weight: bold;

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-summary-item/material-summary-item.component.scss

@@ -1,12 +1,10 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-icon {
   padding: 0rem 0.125rem;
   min-width: unset;
 }
 
 .psdk-utility-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-utility-view-all {
@@ -16,9 +14,9 @@
 }
 
 .psdk-utility-count {
-  background: $app-primary-light-color;
+  background: var(--app-primary-light-color);
   border-radius: calc(1.125 * 0.5rem);
-  color: black;
+  color: var(--app-inverse-form-color);
   display: inline-block;
   font-size: 0.75rem;
   font-weight: bold;
@@ -45,7 +43,7 @@
   width: 100%;
   padding: 0.625rem 0rem;
   text-align: left;
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
   border-radius: 0.6125rem;
   margin: 0.3125rem 0rem;
 }
@@ -63,7 +61,7 @@
 .psdk-settings-svg-icon {
   width: 1.4rem;
   display: inline-block;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility .message {
@@ -92,7 +90,7 @@
 }
 
 .psdk-utility-card-main-primary-url {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
 }
 
 .psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary {
@@ -117,7 +115,7 @@
   width: 1.4rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility-card-action-actions-svg-icon {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-summary-list/material-summary-list.component.scss

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

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-utility/material-utility.component.scss

@@ -1,12 +1,10 @@
-@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;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-utility .header-text {
@@ -26,7 +24,7 @@
   height: 6.25rem;
   padding: 0.625rem 0rem;
   text-align: left;
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
   border-radius: 0.6125rem;
   margin: 0.3125rem 0rem;
 }
@@ -44,7 +42,7 @@
 .psdk-settings-svg-icon {
   width: 1.4rem;
   display: inline-block;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility .message {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 mat-button-toggle-group {
   width: 100%;
   border-width: 0.0625rem 0rem;
@@ -11,7 +9,7 @@ mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard {
 
 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;
+  border-right: 0.1875rem solid var(--app-primary-color);
 }
 
 mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.scss

@@ -1,10 +1,8 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-operator {
   display: flex;
   flex-direction: row;
   font-size: 0.8rem;
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
   align-items: center;
 }
 
@@ -12,22 +10,22 @@
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
   position: absolute;
   z-index: 99;
 }
 
 .psdk-operator-name {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-operator-value {
   padding-left: 5px;
-  color: $app-neutral-dark-color;
+  color: var(--app-neutral-dark-color);
   margin: 0px;
 }
 
@@ -79,5 +77,5 @@ dd {
   word-break: break-word;
   grid-column-start: 1;
   max-width: max-content;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--app-field-header-color);
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/pulse/pulse.component.scss

@@ -3,6 +3,6 @@
   margin: 1rem;
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: #7986cb;
-  background-color: white;
+  border-left-color: var(--app-primary-color);
+  background-color: var(--app-form-color);
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.html

@@ -9,7 +9,7 @@
         <input
           matInput
           [placeholder]="placeholder"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           [value]="value$"
           [required]="bRequired$"

package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.ts

@@ -90,7 +90,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     await 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$);
@@ -107,7 +107,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/field/cancel-alert/cancel-alert.component.scss

@@ -5,7 +5,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 9999;
   top: 0px;
@@ -16,9 +16,9 @@
   display: table;
   margin: auto;
   min-width: 550px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/check-box/check-box.component.html

@@ -13,6 +13,7 @@
           [checked]="isChecked$"
           [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
+          [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           >{{ caption$ }}</mat-checkbox
@@ -24,6 +25,7 @@
           [checked]="isChecked$"
           [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
+          [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           >{{ caption$ }}</mat-checkbox

package/tests/assets/sdk-a/components/createAll/override-sdk/field/check-box/check-box.component.ts

@@ -65,7 +65,7 @@ export class CheckBoxComponent 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$);
@@ -77,7 +77,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/field/currency/currency.component.html

@@ -15,7 +15,7 @@
             [placeholder]="placeholder"
             [value]="value$ | number: '1.2-2'"
             [required]="bRequired$"
-            [formControlName]="controlName$"
+            [formControl]="fieldControl"
             [attr.data-test-id]="testId"
             (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"

package/tests/assets/sdk-a/components/createAll/override-sdk/field/currency/currency.component.ts

@@ -68,7 +68,7 @@ export class CurrencyComponent 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$);
@@ -80,7 +80,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/field/date/date.component.html

@@ -15,7 +15,7 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
           (blur)="fieldOnBlur($event)"
         />

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

@@ -102,7 +102,7 @@ export class DateComponent 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$);
@@ -114,7 +114,7 @@ export class DateComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.formGroup$ != null) {
+    if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
     }
 

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

@@ -11,7 +11,7 @@
           [attr.data-test-id]="testId"
           [ngxMatDatetimePicker]="picker"
           [placeholder]="placeholder"
-          [formControlName]="controlName$"
+          [formControl]="fieldControl"
           (dateChange)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           [value]="value$"

package/tests/assets/sdk-a/components/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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)"