@pega/dx-component-builder-sdk 0.24.3 → 0.25.5

package/src/tasks/create/templates/Constellation/template/FORM/index.tsx.mustache

@@ -2,6 +2,7 @@ import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-co
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -24,12 +25,14 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const nCols = parseInt(NumCols, 10);
 
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     const numRegions = '1';
     const gridRepeat = 'repeat('.concat(numRegions).concat(', 1fr)');
     const gridContainer = { colGap: 0, 'margin-line-start': 0 };
     // @ts-ignore
     gridContainer.cols = gridRepeat;
+    // @ts-ignore
+    gridContainer.gap = 2;
 
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/template/FORM-region/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/template/FORM-region/demo.stories.tsx.mustache

@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
@@ -131,6 +131,30 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -144,7 +168,10 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -157,39 +184,92 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
           }
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
 
   return (
     <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+      {[regionAChildren, regionBChildren]}
     </{{COMPONENT_CLASS_NAME}}>
   );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form Region template',
 };

package/src/tasks/create/templates/Constellation/template/FORM-region/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -32,7 +33,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // @ts-ignore
   flexContainer.gap = 2;
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
 {{! pick new delimiters for mustache }}

package/src/tasks/create/templates/Constellation/template/PAGE/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/template/PAGE/index.tsx.mustache

@@ -3,6 +3,7 @@ import { OneColumnPage as OneColumn, withConfiguration } from '@pega/cosmos-reac
 import { ConfigurableLayout } from '@pega/cosmos-react-work'
 // import { registerIcon } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 
 

package/src/tasks/create/templates/Constellation/widget/CASE/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/widget/CASE/demo.stories.tsx.mustache

@@ -20,33 +20,33 @@ if (!window.PCore) {
   window.PCore = {};
 }
 
-window.PCore.getConstants = () => {
-  return {
-    CASE_INFO: {
-      CASE_INFO_ID: 'caseInfo.ID'
-    }
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  
+  window.PCore.getConstants = () => {
+    return {
+      CASE_INFO: {
+        CASE_INFO_ID: 'caseInfo.ID'
+      }
+    };
   };
-};
 
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
+  window.PCore.getLocaleUtils = () => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
   };
-};
 
-window.PCore.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(historyData);
-      });
-    }
+  window.PCore.getDataApiUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(historyData);
+        });
+      }
+    };
   };
-};
-
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
 

package/src/tasks/create/templates/Constellation/widget/CASE/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Table, Text, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/widget/PAGE/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/widget/PAGE/demo.stories.tsx.mustache

@@ -46,25 +46,23 @@ const worklistData = {
   }
 };
 
-window.PCore.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    }
-  };
-};
-
-
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
+ window.PCore.getDataApiUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(worklistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(worklistData);
+        });
+      }
+    };
+  };
+
   const props = {
     ...configProps,
     getPConnect: () => {

package/src/tasks/create/templates/Constellation/widget/PAGE/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/create-nonce.ts.mustache

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/index.tsx.mustache

@@ -4,6 +4,7 @@ import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Operator from './Operator';

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.scss.mustache

@@ -8,10 +8,10 @@
   top: 0rem;
   margin-top: 0.625rem;
   font-size: 0.875rem;
-  display: block;
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
   -ms-transform: translateY(-1.28125em) scale(0.75);
   width: 133.33333%;
+  color: rgba(0, 0, 0, 0.6);
 }
 
 .psdk-data-readonly {
@@ -22,3 +22,16 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+
+p {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+mat-checkbox {
+  margin-left: -11px;
+}
+
+.mat-mdc-option {
+  margin-left: -16px;
+}

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache

@@ -33,7 +33,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule,MatOptionModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -193,15 +193,14 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
         this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
       }
 
-      if (this.bDisabled$) {
-        this.fieldControl.disable();
-      } else {
-        this.fieldControl.enable();
-      }
-
       if (this.configProps$.readOnly != null) {
         this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+      }
+
+      if (this.bDisabled$ || this.bReadonly$) {
         this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
       }
 
       this.componentReference = (this.pConn$.getStateProps() as any).value;

package/src/tasks/create/templates/SDK-Angular/field/Boolean/demo.stories.tsx.mustache

@@ -18,6 +18,16 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         resolveConfigProps: props => props,
         getConfigProps: () => {
           return configProps;
+        },
+         getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
         },
         getStateProps: () => {
           return stateProps;

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.html.mustache

@@ -10,18 +10,18 @@
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
+          [owlDateTime]="dtPicker"
           [attr.data-test-id]="testId"
-          [ngxMatDatetimePicker]="picker"
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          (dateChange)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnBlur($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
-        <ngx-mat-datetime-picker #picker [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"> </ngx-mat-datetime-picker>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <owl-date-time #dtPicker></owl-date-time>
+        <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.scss.mustache

@@ -78,4 +78,3 @@
     background: var(--mat-datepicker-calendar-header-divider-color);
   }
 }
-

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.ts.mustache

@@ -1,44 +1,21 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
-import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-import { MomentDateModule } from '@angular/material-moment-adapter';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
 }
 
-class MyFormat {
-  theDateFormat: any = getDateFormatInfo();
-
-  get display() {
-    return {
-      dateInput: `${this.theDateFormat.dateFormatString}, LT`,
-      monthYearLabel: 'MMM YYYY',
-      dateA11yLabel: 'LL',
-      monthYearA11yLabel: 'MMMM YYYY'
-    };
-  }
-
-  get parse() {
-    return {
-      dateInput: `${this.theDateFormat.dateFormatString}, LT`
-    };
-  }
-}
-
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
@@ -50,13 +27,10 @@ class MyFormat {
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
-    NgxMatMomentModule,
-    NgxMatDatetimePickerModule,
-    NgxMatTimepickerModule,
-    MomentDateModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
     forwardRef(() => ComponentMapperComponent)
-  ],
-  providers: [{ provide: NGX_MAT_DATE_FORMATS, useClass: MyFormat }]
+  ]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -194,16 +168,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    const value = event.value && event.value.isValid() ? event.value : null;
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, value?.toISOString());
-  }
-
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
+    if (typeof event.value === 'object') {
+      // convert date to pega "date" format
+      event.value = event.value?.toISOString();
+    }
 
     this.angularPConnectData.actions?.onBlur(this, event);
   }

package/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.html.mustache

@@ -1,24 +1,34 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <input
           type="text"
           matInput
-          appThousandSeparator
+          currencyMask
+          [options]="{
+            prefix: bReadonly$ && formatter === 'Currency' ? currSym : '',
+            thousands: currSep,
+            decimal: currDec,
+            align: 'left',
+            nullable: true,
+            precision: decimalPrecision,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
           step="0.01"
-          [value]="value$"
+          [formControlName]="controlName$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (blur)="fieldOnBlur($event)"
+          [readonly]="bReadonly$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>