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

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

@@ -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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text/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';
@@ -12,18 +11,8 @@ const meta: Meta<PegaDxilMyTextComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTextComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-text ${argsToTemplate(args)}></app-pega-dxil-my-text>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTextComponent>;
-
-export const PegaDxilMyText: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: props => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,22 @@ export const PegaDxilMyText: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTextComponent>;
+
+export const PegaDxilMyText: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    testId: configProps.testId,
+    placeholder: configProps.placeholder,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    bHideLabel$: configProps.hideLabel,
   }
 };

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

@@ -1,7 +1,14 @@
 export const configProps = {
   value: 'John',
-  label: 'First Name',
-  testId: 'test-123'
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  testId: 'Text-12345678',
+  helperText: 'Text Helper Text',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  hideLabel: false,
+  required: true
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text-input/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<PegaDxilMyTextInputComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTextInputComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-text-input ${argsToTemplate(args)}></app-pega-dxil-my-text-input>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTextInputComponent>;
-
-export const PegaDxilMyTextInput: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,22 @@ export const PegaDxilMyTextInput: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTextInputComponent>;
+
+export const PegaDxilMyTextInput: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    placeholder: configProps.placeholder,
+    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-text-input/mock.ts

@@ -1,7 +1,13 @@
 export const configProps = {
   value: 'John',
-  label: 'First Name',
-  testId: 'test-123'
+  label: 'TextInput Sample',
+  placeholder: 'TextInput Placeholder',
+  helperText: 'TextInput Helper Text',
+  testId: 'TextInput-12345678',
+  displayMode: '',
+  readOnly: false,
+  disabled: false,
+  required: true
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/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<PegaDxilMyTimeOfDayComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTimeOfDayComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-time-of-day ${argsToTemplate(args)}></app-pega-dxil-my-time-of-day>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTimeOfDayComponent>;
-
-export const PegaDxilMyTimeOfDay: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,21 @@ export const PegaDxilMyTimeOfDay: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTimeOfDayComponent>;
+
+export const PegaDxilMyTimeOfDay: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    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-time-of-day/mock.ts

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/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<PegaDxilMyUrlComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyUrlComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-url ${argsToTemplate(args)}></app-pega-dxil-my-url>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyUrlComponent>;
-
-export const PegaDxilMyUrl: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getConfigProps: () => {
         return configProps;
@@ -33,5 +22,21 @@ export const PegaDxilMyUrl: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyUrlComponent>;
+
+export const PegaDxilMyUrl: Story = {
+  args: {
+    label$: configProps.label,
+    helperText: configProps.helperText,
+    placeholder: configProps.placeholder,
+    bReadonly$: configProps.readOnly,
+    bDisabled$: configProps.disabled,
+    bRequired$: configProps.required,
+    displayMode$: configProps.displayMode
   }
 };

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 
 import { pyReviewRaw } from './mock';
 
@@ -11,18 +10,8 @@ const meta: Meta<PegaDxilMyDetailsComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyDetailsComponent) => ({
     props: {
-      ...args
-    },
-   template: `<app-pega-dxil-my-details ${argsToTemplate(args)}></app-pega-dxil-my-details>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyDetailsComponent>;
-
-export const PegaDxilMyDetails: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getRawMetadata: () => {
         return pyReviewRaw.config;
@@ -47,5 +36,15 @@ export const PegaDxilMyDetails: Story = {
         /* nothing */
       }
     } as any
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyDetailsComponent>;
+
+export const PegaDxilMyDetails: Story = {
+  args: {
+    showHighlightedData: false
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/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 { children } from './mock';
@@ -38,18 +38,8 @@ const meta: Meta<PegaDxilMyFormComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyFormComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-form ${argsToTemplate(args)}></app-pega-dxil-my-form>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyFormComponent>;
-
-export const PegaDxilMyForm: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       getChildren: () => {
         return [
           {
@@ -95,5 +85,16 @@ export const PegaDxilMyForm: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyFormComponent>;
+
+export const PegaDxilMyForm: Story = {
+  args: {
+    label: 'Form',
+    showLabel: false
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/pega-dxil-my-form.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 import { children } from './mock';
 
 import { PegaDxilMyPageComponent } from './pega-dxil-my-page.component';
@@ -10,18 +9,8 @@ const meta: Meta<PegaDxilMyPageComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyPageComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-page ${argsToTemplate(args)}></app-pega-dxil-my-page>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyPageComponent>;
-
-export const PegaDxilMyPage: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       getChildren: () => {
         return [
           {
@@ -40,16 +29,26 @@ export const PegaDxilMyPage: Story = {
       },
       getConfigProps: () => {
         return {
-          title: '',
+          title: 'Annoucements',
           operator: ''
         };
       },
       resolveConfigProps: () => {
         return {
-          title: '',
+          title: 'Annoucements',
           operator: ''
         };
       }
     } as any
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyPageComponent>;
+
+export const PegaDxilMyPage: Story = {
+  args: {
+    title$: 'Announcements'
   }
 };

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

@@ -40,9 +40,6 @@ export const children = [
                 {
                   name: 'New Angular based UI rendering'
                 },
-                {
-                  name: 'Support for followers and recents'
-                },
                 {
                   name: 'New authoring experience'
                 }
@@ -66,9 +63,6 @@ export const children = [
                 {
                   name: 'New Angular based UI rendering'
                 },
-                {
-                  name: 'Support for followers and recents'
-                },
                 {
                   name: 'New authoring experience'
                 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 
 import { pyReviewRaw } from './mock';
 
@@ -11,18 +10,8 @@ const meta: Meta<PegaDxilMyTwoColumnDetailsComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTwoColumnDetailsComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-two-column-details ${argsToTemplate(args)}></app-pega-dxil-my-two-column-details>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTwoColumnDetailsComponent>;
-
-export const PegaDxilMyTwoColumnDetails: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       resolveConfigProps: (props) => props,
       getRawMetadata: () => {
         return pyReviewRaw.config;
@@ -48,5 +37,15 @@ export const PegaDxilMyTwoColumnDetails: Story = {
         /* nothing */
       }
     } as any
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTwoColumnDetailsComponent>;
+
+export const PegaDxilMyTwoColumnDetails: Story = {
+  args: {
+    showHighlightedData: false
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/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 { children } from './mock';
@@ -38,18 +38,8 @@ const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyTwoColumnFormComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-two-column-form ${argsToTemplate(args)}></app-pega-dxil-my-two-column-form>`,
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyTwoColumnFormComponent>;
-
-export const PegaDxilMyTwoColumnForm: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       getChildren: () => {
         return children;
       },
@@ -82,5 +72,15 @@ export const PegaDxilMyTwoColumnForm: Story = {
       }
     } as any,
     formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyTwoColumnFormComponent>;
+
+export const PegaDxilMyTwoColumnForm: Story = {
+  args: {
+
   }
 };

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps, historyData } from './mock';
 
@@ -29,18 +28,8 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyCaseWidgetComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-case-widget ${argsToTemplate(args)}></app-pega-dxil-my-case-widget>`
-  })
-};
-
-export default meta;
-type Story = StoryObj<PegaDxilMyCaseWidgetComponent>;
-
-export const PegaDxilMyCaseWidget: Story = {
-  args: {
-    pConn$: {
+      ...args,
+      pConn$: {
       getConfigProps: () => {
         return configProps;
       },
@@ -54,5 +43,13 @@ export const PegaDxilMyCaseWidget: Story = {
         return value;
       }
     } as any
-  }
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<PegaDxilMyCaseWidgetComponent>;
+
+export const PegaDxilMyCaseWidget: Story = {
+  args: {}
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/demo.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps, operatorDetails } from './mock';
 
@@ -29,9 +28,14 @@ const meta: Meta<PegaDxilMyPageCaseWidgetComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyPageCaseWidgetComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-page-case-widget ${argsToTemplate(args)}></app-pega-dxil-my-page-case-widget>`
+      ...args,
+      pConn$: {
+      resolveConfigProps: props => props,
+      getConfigProps: () => {
+        return configProps;
+      }
+    } as any
+    }
   })
 };
 
@@ -39,12 +43,5 @@ export default meta;
 type Story = StoryObj<PegaDxilMyPageCaseWidgetComponent>;
 
 export const PegaDxilMyPageCaseWidget: Story = {
-  args: {
-    pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
-  }
+  args: {}
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.scss

@@ -1,10 +1,8 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-operator {
   display: flex;
   flex-direction: row;
   font-size: 0.8rem;
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
   align-items: center;
 }
 
@@ -12,22 +10,22 @@
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
   position: absolute;
   z-index: 99;
 }
 
 .psdk-operator-name {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-operator-value {
   padding-left: 5px;
-  color: $app-neutral-dark-color;
+  color: var(--app-neutral-dark-color);
   margin: 0px;
 }
 
@@ -79,5 +77,5 @@ dd {
   word-break: break-word;
   grid-column-start: 1;
   max-width: max-content;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--app-field-header-color);
 }

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps } from './mock';
 
@@ -11,9 +10,13 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyPageWidgetComponent) => ({
     props: {
-      ...args
-    },
-    template: `<app-pega-dxil-my-page-widget ${argsToTemplate(args)}></app-pega-dxil-my-page-widget>`
+      ...args,
+      pConn$: {
+      getConfigProps: () => {
+        return configProps;
+      }
+    } as any
+    }
   })
 };
 
@@ -21,11 +24,5 @@ export default meta;
 type Story = StoryObj<PegaDxilMyPageWidgetComponent>;
 
 export const PegaDxilMyPageWidget: Story = {
-  args: {
-    pConn$: {
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
-  }
+  args: {}
 };