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

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 
 import { configProps, stateProps } from './mock';
@@ -22,26 +21,42 @@ const meta: Meta<PegaDxilMyDateComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyDateComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-date ${argsToTemplate(args)}></app-pega-dxil-my-date>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyDateComponent>;
-
-export const PegaDxilMyDate: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
       },
       getStateProps: () => {
         return stateProps;
+      },
+      getActionsApi: () => {
+        return {
+          updateFieldValue: () => {
+            /* nothing */
+          },
+          triggerFieldChange: () => {
+            /* nothing */
+          }
+        };
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyDateComponent>;
+
+export const PegaDxilMyDate: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/mock.ts

@@ -2,7 +2,11 @@ export const configProps = {
   value: '',
   label: 'Date Sample',
   helperText: 'Date Helper Text',
-  testId: 'date-12345678'
+  testId: 'date-12345678',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 
 import { configProps, stateProps } from './mock';
@@ -23,18 +22,8 @@ const meta: Meta<PegaDxilMyDateTimeComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyDateTimeComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-date-time ${argsToTemplate(args)}></app-pega-dxil-my-date-time>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyDateTimeComponent>;
-
-export const PegaDxilMyDateTime: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -54,5 +43,21 @@ export const PegaDxilMyDateTime: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyDateTimeComponent>;
+
+export const PegaDxilMyDateTime: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.ts

@@ -67,7 +67,7 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
   configProps$: PegaDxilMyDateTimeProps;
 
   label$ = '';
-  value$: string;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -152,7 +152,8 @@ export class PegaDxilMyDateTimeComponent 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/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/mock.ts

@@ -2,7 +2,11 @@ export const configProps = {
   value: '123.123',
   label: 'Decimal Sample',
   helperText: 'Decimal Helper Text',
-  testId: 'decimal-12345678'
+  testId: 'decimal-12345678',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

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

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

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

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/mock.ts

@@ -3,7 +3,11 @@ export const configProps = {
   label: 'Integer Sample',
   placeholder: 'Integer Placeholder',
   helperText: 'Integer Helper Text',
-  testId: 'integer-12345678'
+  testId: 'integer-12345678',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 
 import { configProps, stateProps, rawConfigProps, fieldMetadata } from './mock';
@@ -12,18 +11,8 @@ const meta: Meta<PegaDxilMyParagraphComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyParagraphComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-paragraph ${argsToTemplate(args)}></app-pega-dxil-my-paragraph>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyParagraphComponent>;
-
-export const PegaDxilMyParagraph: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -39,5 +28,21 @@ export const PegaDxilMyParagraph: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyParagraphComponent>;
+
+export const PegaDxilMyParagraph: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

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

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/mock.ts

@@ -3,7 +3,11 @@ export const configProps = {
   label: 'Percentage Sample',
   placeholder: 'Percentage Placeholder',
   helperText: 'Percentage Helper Text',
-  testId: 'percentage-12345678'
+  testId: 'percentage-12345678',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

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

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

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

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/mock.ts

@@ -19,7 +19,11 @@ export const configProps = {
   ],
   helperText: 'Picklist Helper Text',
   testId: 'picklist-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/pega-dxil-my-picklist.component.ts

@@ -160,7 +160,7 @@ export class PegaDxilMyPicklistComponent 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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/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';
 
@@ -11,18 +10,8 @@ const meta: Meta<PegaDxilMyRadiobuttonsComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyRadiobuttonsComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-radiobuttons ${argsToTemplate(args)}></app-pega-dxil-my-radiobuttons>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyRadiobuttonsComponent>;
-
-export const PegaDxilMyRadiobuttons: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: props => props,
       getConfigProps: () => {
         return configProps;
@@ -61,5 +50,21 @@ export const PegaDxilMyRadiobuttons: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyRadiobuttonsComponent>;
+
+export const PegaDxilMyRadiobuttons: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/mock.ts

@@ -18,12 +18,17 @@ export const configProps = {
     }
   ],
   hasSuggestions: false,
-  label: 'TV Option',
+  label: 'Picklist-RadioButtons Sample',
+  helperText: 'Picklist-RadioButtons Helper Text',
   listType: 'associated',
   readonly: undefined,
   testId: '81DC52353BC235FE78F52FA873E0EF56',
   value: '',
-  visibility: true
+  visibility: true,
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/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 { configProps, stateProps } from './mock';
@@ -21,18 +21,8 @@ const meta: Meta<PegaDxilMySearchboxComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMySearchboxComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-searchbox ${argsToTemplate(args)}></app-pega-dxil-my-searchbox>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMySearchboxComponent>;
-
-export const PegaDxilMySearchbox: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: props => props,
       getConfigProps: () => {
         return configProps;
@@ -58,5 +48,21 @@ export const PegaDxilMySearchbox: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMySearchboxComponent>;
+
+export const PegaDxilMySearchbox: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };