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

package/tests/assets/sdk-a/components/create/override-sdk/widget/list-utility/list-utility.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .progress-spinner {
   text-align: center;
   position: absolute;
@@ -13,7 +11,7 @@
 }
 
 .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 {
@@ -23,9 +21,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;
@@ -52,7 +50,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;
   position: relative;
@@ -71,7 +69,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 {
@@ -100,7 +98,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 {
@@ -125,7 +123,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/widget/todo/todo.component.scss

@@ -1,15 +1,13 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-display-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-todo {
   padding: 1rem;
-  background-color: white;
+  background-color: var(--app-form-color);
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: #7986cb;
+  border-left-color: var(--app-primary-color);
 }
 
 .psdk-todo-header {
@@ -23,14 +21,14 @@
 }
 
 .psdk-assignment-count {
-  background-color: $app-primary-light-color;
+  background-color: var(--app-primary-light-color);
   margin: 0.5rem;
   border-radius: 45%;
   padding: 0.15rem 0.4rem;
 }
 
 .psdk-todo-id {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
   padding: 0;
   cursor: pointer;
   border: 0;
@@ -50,8 +48,8 @@
   align-items: center;
   text-align: center;
   display: flex;
-  background: $app-primary-color;
-  color: white;
+  background: var(--app-primary-color);
+  color: var(--app-form-color);
   font-weight: bold;
   font-size: 1.25rem;
 }
@@ -67,9 +65,9 @@
 }
 
 .psdk-todo-assignment-status {
-  background-color: $app-neutral-light-color;
+  background-color: var(--app-neutral-light-color);
   border-radius: 0.125rem;
-  color: darkslategray;
+  color: var(--app-assignment-status-color);
   font-size: 0.75rem;
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
@@ -79,7 +77,7 @@
 }
 
 .psdk-todo-assignment-task {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-todo-assignment-action {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/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,9 +11,20 @@ const meta: Meta<PegaDxilMyBooleanComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyBooleanComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-boolean ${argsToTemplate(args)}></app-pega-dxil-my-boolean>`
+      ...args,
+      pConn$: 
+      
+      {
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        }
+      } as any,
+      formGroup$: new FormBuilder().group({})
+    }
   })
 };
 
@@ -23,15 +33,13 @@ type Story = StoryObj<PegaDxilMyBooleanComponent>;
 
 export const PegaDxilMyBoolean: 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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/mock.ts

@@ -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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/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';
@@ -26,18 +25,8 @@ const meta: Meta<PegaDxilMyCurrencyComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyCurrencyComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-currency ${argsToTemplate(args)}></app-pega-dxil-my-currency>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyCurrencyComponent>;
-
-export const PegaDxilMyCurrency: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -47,5 +36,21 @@ export const PegaDxilMyCurrency: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyCurrencyComponent>;
+
+export const PegaDxilMyCurrency: 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-currency/mock.ts

@@ -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/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 = {