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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.23.11",
+  "version": "0.23.12",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.ts.mustache

@@ -160,7 +160,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // @ts-ignore - parameter “contextName” for getDataObject method should be optional
-    const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
+    const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
     this.options$ = optionsList;
     if (this.value$ === '' && !this.bReadonly$) {

package/src/tasks/list/index.js

@@ -29,7 +29,6 @@ const getList = async (sourceOfComponents, answers, options) => {
     case SOURCE_OF_COMPONENT_TYPES.SERVER: {
       try {
         const data = await getComponentsFromServer(answers);
-        spinner.stop();
         await displayServerComponents(data, answers);
       }
       catch (error) {
@@ -40,8 +39,6 @@ const getList = async (sourceOfComponents, answers, options) => {
         else {
           console.log(`${chalk.bold.red(error)}`);
         }
-
-        // spinner.stop();
         process.exit(1);
 
       }

package/src/tasks/publish-all/helper.js

@@ -151,20 +151,16 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   let configContent = "{ }";
   if (category === CATEGORY_CUSTOM || category === CATEGORY_CONSTELLATION) {
     configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-    //fs.rm('dist', { recursive: true }, err => {
-    //  if (err) {
-    //    throw err;
-     // }
-    //});
+    
+    // cleanup will remove this directory
+
   }
   else {
     if (fs.existsSync(configExtJson)) {
       configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config-ext.json`)).toString();
-      //fs.rm('dist', { recursive: true }, err => {
-      //  if (err) {
-      //    throw err;
-      //  }
-      //});
+
+      // cleanup will remove this directory
+      
     }
     else {
       const tempConfig = { "componentKey" : ""};
@@ -275,21 +271,39 @@ export const publishComponentToServer = async (data, doFetch = true) => {
               'Error forbidden: User does not have privileges to Publish.'
             );
           }
-          else if (response.status === 500) {
-            throw new Error(
-             `Error occurred in authentication. Please regenerate using authenticate`
-            );
+          // else if (response.status === 500) {
+          //   throw new Error(
+          //    `Error occurred in authentication. Please regenerate using authenticate`
+          //   );
+          // }
+          // else {
+          //   throw new Error(
+          //     `Server error: ${status}`
+          //   );
+          // }
+
+        }
+
+        try {
+          const data = await response.json();
+          if (status === 500) {
+            status = 999;
+            throw new Error(data.message);
           }
-          else {
-            throw new Error(
-              `Server error: ${status}`
-            );
+        }
+        catch (err) {
+          if (status === 500) {
+              throw new Error(
+               `Error occurred in authentication. Please regenerate using authenticate`
+              );
+          }
+          else if (status === 999) {
+            throw new Error (err);
           }
-
         }
 
 
-        const data = await response.json();
+
 
       } else {
         throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 
 import { configProps, stateProps } from './mock';
@@ -12,18 +11,8 @@ const meta: Meta<PegaDxilMyTestTextComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTestTextComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-test-text ${argsToTemplate(args)}></app-pega-dxil-my-test-text>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTestTextComponent>;
-
-export const PegaDxilMyTestText: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: props => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,22 @@ export const PegaDxilMyTestText: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTestTextComponent>;
+
+export const PegaDxilMyTestText: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    placeholder: configProps.placeholder,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    bHideLabel$: configProps.hideLabel,
   }
 };

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/mock.ts

@@ -1,7 +1,14 @@
 export const configProps = {
   value: 'John',
-  label: 'First Name',
-  testId: 'test-123'
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  testId: 'Text-12345678',
+  helperText: 'Text Helper Text',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  hideLabel: false,
+  required: true
 };
 
 export const stateProps = {

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