@pega/dx-component-builder-sdk 0.24.4 → 0.24.6

package/package.json

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

package/src/constants.js

@@ -442,14 +442,6 @@ export const COMPONENT_SCHEMA = {
         name: 'Error Boundary',
         value: 'ErrorBoundary'
       },
-      {
-        name: 'Flow Container',
-        value: 'Containers/FlowContainer'
-      },
-      {
-        name: 'Modal View Container',
-        value: 'Containers/ModalViewContainer'
-      },
       {
         name: 'Multi Step',
         value: 'MultiStep'
@@ -458,10 +450,6 @@ export const COMPONENT_SCHEMA = {
         name: 'Nav Bar',
         value: 'NavBar'
       },
-      {
-        name: 'Simple View',
-        value: 'Containers/SimpleView'
-      },
       {
         name: 'Stages',
         value: 'Stages'
@@ -477,10 +465,6 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'View',
         value: 'View'
-      },
-      {
-        name: 'View',
-        value: 'Containers/ViewContainer'
       }
     ],
     template: [
@@ -898,10 +882,6 @@ export const COMPONENT_SCHEMA = {
         name: 'Preview View Container',
         value: 'Containers/PreviewViewContainer'
       },
-      {
-        name: 'Reference',
-        value: 'Reference'
-      },
       {
         name: 'Region',
         value: 'Region'

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

@@ -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

@@ -15,11 +15,11 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (blur)="fieldOnBlur($event)"
-          (dateTimeChange)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnDateChange($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

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

@@ -168,6 +168,14 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
+  fieldOnDateChange(event: any) {
+    if (typeof event.value === 'object') {
+      // convert date to pega "date" format
+      event.value = event.value?.toISOString();
+    }
+    this.angularPConnectData.actions?.onChange(this, { value: event.value });
+  }
+
   fieldOnBlur(event: any) {
     if (typeof event.value === 'object') {
       // convert date to pega "date" format

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

@@ -20,6 +20,9 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
       getStateProps: () => {
         return stateProps;
       },
+      getComponentName: () => {
+        return 'Currency';
+      },
       getActionsApi: () => {
         return {
           updateFieldValue: () => {

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -5,52 +5,53 @@ import { configProps, stateListData, stateProps } from './mock';
 
 import {{! pick new delimiters for mustache }}{{=<% %>=}}{<%={{ }}=%> {{COMPONENT_CLASS_NAME}}Component {{=<% %>=}}}<%={{ }}=%>{{! revert delimiters for mustache }} from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
 
-window.PCore = {
-  ...window.PCore,
-  getConstants: () => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    } as any;
-  },
-  getDataApiUtils: () => {
-    return {
-      getData: () => {
-        return Promise.resolve(stateListData);
-      }
-    } as any;
-  }
-};
-
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
-    props: {
-      ...args,
-      pConn$: {
-        resolveConfigProps: props => props,
-        getConfigProps: () => {
-          return configProps;
-        },
-        getValue: value => {
-          return value;
-        },
-        getContextName: () => {
-          return 'app/primary_1';
-        },
-        getStateProps: () => {
-          return stateProps;
-        },
-        getLocalizedValue: value => {
-          return value;
-        }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
+    window.PCore = {
+      ...window.PCore,
+      getConstants: () => {
+        return {
+          CASE_INFO: {
+            CASE_INFO_ID: 'caseInfo.ID'
+          }
+        } as any;
+      },
+      getDataApiUtils: () => {
+        return {
+          getData: () => {
+            return Promise.resolve(stateListData);
+          }
+        } as any;
+      }
+    };
+    return {
+      props: {
+        ...args,
+        pConn$: {
+          resolveConfigProps: props => props,
+          getConfigProps: () => {
+            return configProps;
+          },
+          getValue: value => {
+            return value;
+          },
+          getContextName: () => {
+            return 'app/primary_1';
+          },
+          getStateProps: () => {
+            return stateProps;
+          },
+          getLocalizedValue: value => {
+            return value;
+          }
+        } as any,
+      formGroup$: new FormBuilder().group({})
+      }
     }
-  })
+  }
 };
 
 export default meta;

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

@@ -159,7 +159,6 @@ 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())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
     this.options$ = optionsList;
@@ -184,7 +183,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -223,7 +221,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

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

@@ -118,7 +118,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   private _filter(value: string): string[] {
     const filterVal = (value || this.filterValue).toLowerCase();
-    return this.options$?.filter(option => option.value.toLowerCase().includes(filterVal));
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
   // Callback passed when subscribing to store change

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

@@ -25,6 +25,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  providers: [Utils],
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
 })
@@ -165,7 +166,6 @@ 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
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
     const propName = (this.pConn$.getStateProps() as any).value;
@@ -185,7 +185,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -216,7 +215,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.ts.mustache

@@ -107,8 +107,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }
-    // @ts-ignore -  Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
-    // @ts-ignore - Property 'getRawConfigProps' is private and only accessible within class 'C11nEnv'
     this.nMaxLength$ = this.pConn$.getFieldMetadata(this.pConn$.getRawConfigProps()?.value)?.maxLength || 100;
     this.testId = this.configProps$.testId;
     this.displayMode$ = this.configProps$.displayMode;

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.html.mustache

@@ -2,11 +2,10 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
-  <div class="template-title-container">{{label}}</div>
+  <div class="template-title-container">{{ label }}</div>
 </div>
-<div *ngIf="instructions" class='psdk-default-form-instruction-text'>
-  <div key="instructions" id="instruction-text" [innerHTML]="instructions">
-  </div>
+<div *ngIf="instructions" class="psdk-default-form-instruction-text">
+  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>
 <div [className]="divClass$">
   <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.ts.mustache

@@ -51,7 +51,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
     this.label = propToUse?.label;
     const kids = this.pConn$.getChildren() as any[];
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
-    console.log(`instructions${this.instructions}`);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
     switch (numCols) {

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.html.mustache

@@ -13,4 +13,4 @@
       <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
-</div>
+</div>

package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.ts.mustache

@@ -28,7 +28,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
+
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
     const dataViewName = 'D_pyWorkHistory';
     const context = this.pConn$.getContextName();
@@ -36,16 +36,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
     this.waitingForData = true;
 
     const caseHistoryData = PCore.getDataApiUtils().getData(
-    dataViewName,
-    { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
-    context
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
+      context
     ) as Promise<any>;
 
     caseHistoryData.then((historyJSON: any) => {
       this.fields$ = [
         { label: this.pConn$.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
         { label: this.pConn$.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
-        { label: this.pConn$.getLocalizedValue('User', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
+        { label: this.pConn$.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
       ];
 
       const tableDataResults = this.updateData(historyJSON.data.data, this.fields$);

package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache

@@ -4,47 +4,48 @@ import { configProps, historyData } from './mock';
 
 import {{! pick new delimiters for mustache }}{{=<% %>=}}{<%={{ }}=%> {{COMPONENT_CLASS_NAME}}Component {{=<% %>=}}}<%={{ }}=%>{{! revert delimiters for mustache }} from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
 
-window.PCore = {
-  ...window.PCore,
-  getConstants: () => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    } as any;
-  },
-  getDataApiUtils: () => {
-    return {
-      getData: () => {
-        return Promise.resolve(historyData);
-      }
-    } as any;
-  }
-};
-
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
-    props: {
-      ...args,
-      pConn$: {
-      getConfigProps: () => {
-        return configProps;
-      },
-      getValue: (value) => {
-        return value;
-      },
-      getContextName: () => {
-        return 'app/primary_1';
+  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
+    window.PCore = {
+      ...window.PCore,
+      getConstants: () => {
+        return {
+          CASE_INFO: {
+            CASE_INFO_ID: 'caseInfo.ID'
+          }
+        } as any;
       },
-      getLocalizedValue: (value) => {
-        return value;
+      getDataApiUtils: () => {
+        return {
+          getData: () => {
+            return Promise.resolve(historyData);
+          }
+        } as any;
+      }
+    };
+    return {
+      props: {
+        ...args,
+        pConn$: {
+          getConfigProps: () => {
+            return configProps;
+          },
+          getValue: (value) => {
+            return value;
+          },
+          getContextName: () => {
+            return 'app/primary_1';
+          },
+          getLocalizedValue: (value) => {
+            return value;
+          }
+        } as any
       }
-    } as any
     }
-  })
+  }
 };
 
 export default meta;

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/demo.stories.tsx.mustache

@@ -4,37 +4,38 @@ import { configProps, worklistData } from './mock';
 
 import {{! pick new delimiters for mustache }}{{=<% %>=}}{<%={{ }}=%> {{COMPONENT_CLASS_NAME}}Component {{=<% %>=}}}<%={{ }}=%>{{! revert delimiters for mustache }} from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
 
-window.PCore = {
-  ...window.PCore,
-  getDataApiUtils: () => {
-    return {
-      getData: () => {
-        return Promise.resolve(worklistData);
-      }
-    } as any;
-  }
-};
-
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
-    props: {
-      ...args,
-      pConn$: {
-        getContextName: () => {
-          return 'app/primary_1';
-        },
-        getLocalizedValue: value => {
-          return value;
-        },
-        getConfigProps: () => {
-          return configProps;
-        }
-      } as any
+  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
+    window.PCore = {
+      ...window.PCore,
+      getDataApiUtils: () => {
+        return {
+          getData: () => {
+            return Promise.resolve(worklistData);
+          }
+        } as any;
+      }
+    };
+    return {
+      props: {
+        ...args,
+        pConn$: {
+          getContextName: () => {
+            return 'app/primary_1';
+          },
+          getLocalizedValue: value => {
+            return value;
+          },
+          getConfigProps: () => {
+            return configProps;
+          }
+        } as any
+      }
     }
-  })
+  }
 };
 
 export default meta;

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.html.mustache

@@ -20,6 +20,4 @@
     </dl>
   </div>
 </div>
-
-
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -2,7 +2,7 @@
   <dl class="psdk-case-summary-fields-primary">
     <div *ngFor="let field of primaryFieldsWithStatus$" class="psdk-csf-primary-field">
       <dt class="psdk-csf-primary-field-header">
-        {{ field.config.label }}
+        {{ field.config?.label }}
       </dt>
       <dd *ngIf="field.config.value === ''; else hasValue" class="psdk-csf-primary-field-data">
         <ng-container [ngSwitch]="field.type.toLowerCase()">
@@ -28,10 +28,10 @@
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
     <div
       *ngIf="
-        field.config?.label?.toLowerCase() == 'create operator' ||
-          field.displayLabel.toLowerCase() == 'create operator' ||
-          field.config?.label?.toLowerCase() == 'update operator' ||
-          field.displayLabel.toLowerCase() == 'update operator';
+        field?.config?.label?.toLowerCase() == 'create operator' ||
+          field?.displayLabel?.toLowerCase() == 'create operator' ||
+          field?.config?.label?.toLowerCase() == 'update operator' ||
+          field?.displayLabel?.toLowerCase() == 'update operator';
         else hasSecondaryValue
       "
     >
@@ -40,7 +40,7 @@
     <ng-template #hasSecondaryValue>
       <div class="psdk-csf-secondary-field">
         <dt class="psdk-csf-secondary-field-header">
-          {{ field.config.displayLabel || field.config.label }}
+          {{ field.config?.displayLabel || field.config?.label }}
         </dt>
         <dd class="psdk-csf-secondary-field-data">
           <div [ngSwitch]="field.type">

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -45,8 +45,11 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnDestroy(): void {
-    this.renderer.destroy();
+    // Ref: https://medium.com/@kamil.galek/mythical-angular-component-styles-cleanup-in-angular-17-f799a08b2abc
+    // Commenting the below line as it is causing the Operator component's styles not getting applied.
+    // this.renderer.destroy();
   }
 
   updateSelf(): void {

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

@@ -193,15 +193,14 @@ export class CheckBoxComponent 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/tests/assets/sdk-a/components/create/override-sdk/field/date-time/date-time.component.html

@@ -13,11 +13,11 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (blur)="fieldOnBlur($event)"
-          (dateTimeChange)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnDateChange($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>