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

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 
 import { pyReviewRaw } from './mock';
 
@@ -11,18 +10,8 @@ const meta: Meta<PegaDxilMyTwoColumnDetailsComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTwoColumnDetailsComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-two-column-details ${argsToTemplate(args)}></app-pega-dxil-my-two-column-details>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTwoColumnDetailsComponent>;
-
-export const PegaDxilMyTwoColumnDetails: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getRawMetadata: () => {
         return pyReviewRaw.config;
@@ -48,5 +37,15 @@ export const PegaDxilMyTwoColumnDetails: Story = {
         /* nothing */
       }
     } as any
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTwoColumnDetailsComponent>;
+
+export const PegaDxilMyTwoColumnDetails: Story = {
+  args: {
+    showHighlightedData: false
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/demo.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { children } from './mock';
@@ -38,18 +38,8 @@ const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTwoColumnFormComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-two-column-form ${argsToTemplate(args)}></app-pega-dxil-my-two-column-form>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTwoColumnFormComponent>;
-
-export const PegaDxilMyTwoColumnForm: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       getChildren: () => {
         return children;
       },
@@ -82,5 +72,15 @@ export const PegaDxilMyTwoColumnForm: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTwoColumnFormComponent>;
+
+export const PegaDxilMyTwoColumnForm: Story = {
+  args: {
+
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps, historyData } from './mock';
 
@@ -29,18 +28,8 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyCaseWidgetComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-case-widget ${argsToTemplate(args)}></app-pega-dxil-my-case-widget>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyCaseWidgetComponent>;
-
-export const PegaDxilMyCaseWidget: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       getConfigProps: () => {
         return configProps;
       },
@@ -54,5 +43,13 @@ export const PegaDxilMyCaseWidget: Story = {
         return value;
       }
     } as any
-  }
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyCaseWidgetComponent>;
+
+export const PegaDxilMyCaseWidget: Story = {
+  args: {}
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps, operatorDetails } from './mock';
 
@@ -29,9 +28,14 @@ const meta: Meta<PegaDxilMyPageCaseWidgetComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyPageCaseWidgetComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-page-case-widget ${argsToTemplate(args)}></app-pega-dxil-my-page-case-widget>`
+      ...args,
+      pConn$: {
+      resolveConfigProps: props => props,
+      getConfigProps: () => {
+        return configProps;
+      }
+    } as any
+    }
   })
 };
 
@@ -39,12 +43,5 @@ export default meta;
 type Story = StoryObj<PegaDxilMyPageCaseWidgetComponent>;
 
 export const PegaDxilMyPageCaseWidget: Story = {
-  args: {
-    pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
-  }
+  args: {}
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.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/custom-sdk/widget/pega-dxil-my-page-widget/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps } from './mock';
 
@@ -11,9 +10,13 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyPageWidgetComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-page-widget ${argsToTemplate(args)}></app-pega-dxil-my-page-widget>`
+      ...args,
+      pConn$: {
+      getConfigProps: () => {
+        return configProps;
+      }
+    } as any
+    }
   })
 };
 
@@ -21,11 +24,5 @@ export default meta;
 type Story = StoryObj<PegaDxilMyPageWidgetComponent>;
 
 export const PegaDxilMyPageWidget: Story = {
-  args: {
-    pConn$: {
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
-  }
+  args: {}
 };

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$);
     }