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

package/package.json

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

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

@@ -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,9 +11,20 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
+      ...args,
+      pConn$: 
+      
+      {
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        }
+      } as any,
+      formGroup$: new FormBuilder().group({})
+    }
   })
 };
 
@@ -23,15 +33,13 @@ type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
   args: {
-    pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+    label$: configProps.label,
+    caption$: configProps.caption,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

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

@@ -6,7 +6,11 @@ export const configProps = {
   label: 'Boolean Sample',
   helperText: 'Boolean Helper Text',
   testId: 'boolean-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

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

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: 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<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Date/mock.ts.mustache

@@ -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/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.ts.mustache

@@ -67,7 +67,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
 
   label$ = '';
-  value$: string;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -152,7 +152,8 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/DateTime/demo.stories.tsx.mustache

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -54,5 +43,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

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

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -43,5 +32,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Decimal/mock.ts.mustache

@@ -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/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-currency-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Label value",

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

@@ -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';
@@ -26,18 +25,8 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -47,5 +36,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode 
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/mock.ts.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-input-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/mock.ts.mustache

@@ -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/src/tasks/create/templates/SDK-Angular/field/Integer/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-integer-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Integer/mock.ts.mustache

@@ -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/src/tasks/create/templates/SDK-Angular/field/Picklist/demo.stories.tsx.mustache

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -59,5 +48,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

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

@@ -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/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: props => props,
       getConfigProps: () => {
         return configProps;
@@ -58,5 +48,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/mock.ts.mustache

@@ -24,12 +24,16 @@ export const configProps = {
   },
   deferDatasource: true,
   hasSuggestions: false,
-  label: 'Suffix',
+  helperText: 'Picklist-Autocomplete Helper Text',
+  label: 'Picklist-Autocomplete Sample',
   listType: 'associated',
   placeholder: 'Select...',
-  readOnly: undefined,
   testId: '56E6DDD1CB6CEC596B433440DFB21C17',
-  value: undefined
+  value: undefined,
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

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

@@ -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<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
-
-export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: props => props,
       getConfigProps: () => {
         return configProps;
@@ -61,5 +50,21 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };