@pega/dx-component-builder-sdk 0.24.1 → 0.24.2

package/package.json

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

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

@@ -4,7 +4,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { stateProps, configProps } from './mock';
+import { configProps } from './mock';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',

package/src/tasks/create/templates/Constellation/field/Picklist/index.tsx.mustache

@@ -39,7 +39,6 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-
 export const formatExists = (formatterVal: string) => {
     const formatterValues = [
       "TextInput",

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/date.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';
@@ -35,18 +34,9 @@ const constellationToCosmosFormatterMap = new Map([
   [
     DATE_TYPES.DATE,
     new Map([
-      [
-        formatConstants.DateTimeLong,
-        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [
-        formatConstants.DateTimeShort,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
-      ],
-      [
-        formatConstants.DateTimeSince,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
-      ],
+      [formatConstants.DateTimeLong, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }],
+      [formatConstants.DateTimeShort, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }],
+      [formatConstants.DateTimeSince, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }],
       [formatConstants.DateDefault, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE }]
     ])
   ],
@@ -60,22 +50,10 @@ const constellationToCosmosFormatterMap = new Map([
   [
     DATE_TYPES.DATE_TIME,
     new Map([
-      [
-        formatConstants.DateTimeDefault,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [
-        formatConstants.DateTimeShort,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
-      ],
-      [
-        formatConstants.DateTimeSince,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
-      ],
-      [
-        formatConstants.DateTimeLong,
-        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
+      [formatConstants.DateTimeDefault, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }],
+      [formatConstants.DateTimeShort, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }],
+      [formatConstants.DateTimeSince, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }],
+      [formatConstants.DateTimeLong, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }],
       [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
     ])
   ]
@@ -85,13 +63,14 @@ const types = ['fromNow', 'customFormat'];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
-  { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}
+) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only'))
-        return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
+      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only')) return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());
@@ -129,8 +108,8 @@ function DateFormatter(
 export function format(value, options) {
   if (!value) return null;
   const { type, locale, timezone, formatter, translate } = options;
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
-  const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const { format, variant } = (constellationToCosmosFormatterMap.get(type) as any).get(formatter);
   return formatDateTime(parseToDate(value), {
     t: translate,
     locale,
@@ -154,8 +133,7 @@ export default {
         })
       : value;
   },
-  convertFromTimezone: (value, timezone) =>
-    value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value,
+  convertFromTimezone: (value, timezone) => (value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value),
   Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
   'Date-Default': (value, options) => format(value, { ...options, formatter: 'Date-Default' }),
   'Date-Time-Default': (value, options) => format(value, { ...options, formatter: 'Date-Time-Default' }),

package/src/tasks/create/templates/Constellation/template/DETAILS/HighlightRender.tsx.mustache

@@ -10,7 +10,7 @@ interface HighlightRenderProps extends PConnProps {
 const HighlightRender = (props: HighlightRenderProps) => {
   const { getPConnect, field } = props;
 
-  field.config['displayMode'] = 'DISPLAY_ONLY';
+  field.config.displayMode = 'DISPLAY_ONLY';
 
   // Mark as status display when using pyStatusWork
   if (field.config?.value === '@P .pyStatusWork') {
@@ -18,7 +18,7 @@ const HighlightRender = (props: HighlightRenderProps) => {
     field.config.displayAsStatus = true;
   }
 
-  const configProps = getPConnect().resolveConfigProps(field.config);
+  const configProps: any = getPConnect().resolveConfigProps(field.config);
 
   // @ts-ignore
   const reactField = getPConnect().createComponent(field);

package/src/tasks/create/templates/Constellation/template/DETAILS-region/HighlightRender.tsx.mustache

@@ -10,7 +10,7 @@ interface HighlightRenderProps extends PConnProps {
 const HighlightRender = (props: HighlightRenderProps) => {
   const { getPConnect, field } = props;
 
-  field.config['displayMode'] = 'DISPLAY_ONLY';
+  field.config.displayMode = 'DISPLAY_ONLY';
 
   // Mark as status display when using pyStatusWork
   if (field.config?.value === '@P .pyStatusWork') {
@@ -18,7 +18,7 @@ const HighlightRender = (props: HighlightRenderProps) => {
     field.config.displayAsStatus = true;
   }
 
-  const configProps = getPConnect().resolveConfigProps(field.config);
+  const configProps: any = getPConnect().resolveConfigProps(field.config);
 
   // @ts-ignore
   const reactField = getPConnect().createComponent(field);

package/src/tasks/create/templates/Constellation/template/DETAILS-region/index.tsx.mustache

@@ -33,7 +33,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   });
 
   const numRegions = getAllFields(getPConnect)?.length;
-  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
+  const gridRepeat = "repeat(".concat(numRegions.toString()).concat(", 1fr)");
 
   const gridContainer: GridContainerProps = { colGap: 6 };
   gridContainer.cols = gridRepeat;

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -5,44 +5,45 @@
     [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
   ></component-mapper>
 </div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
           <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
         </span>
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-        <mat-checkbox
-          [labelPosition]="'after'"
-          [checked]="isChecked$"
-          [disabled]="bDisabled$"
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-          >{{ caption$ }}</mat-checkbox
-        >
       </div>
-      <div class="mat-form-field-infix" *ngIf="!bReadonly$ && !showLabel$">
+      <div *ngIf="selectionMode === 'multi'; else single">
+        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+          <mat-checkbox
+            [labelPosition]="'after'"
+            [checked]="item.selected"
+            [attr.data-test-id]="testId + ':' + item.value"
+            (change)="handleChangeMultiMode($event, item)"
+            (blur)="fieldOnBlur($event)"
+            >{{ item.text ?? item.value }}
+          </mat-checkbox>
+        </mat-option>
+      </div>
+      <ng-template #single>
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
-          [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           >{{ caption$ }}</mat-checkbox
         >
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-      </div>
-      <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
+        <p *ngIf="helperText">{{ helperText }}</p>
+      </ng-template>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>
 </ng-template>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>

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

@@ -3,10 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -15,6 +19,13 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   caption?: string;
   trueLabel?: string;
   falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
 }
 
 @Component({
@@ -22,7 +33,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule,MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -50,6 +61,17 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   trueLabel$?: string;
   falseLabel$?: string;
 
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  selectedvalues: any;
+  referenceList: string;
+  listOfCheckboxes: any[] = [];
+  actionsApi: any;
+  propName: any;
+
   fieldControl = new FormControl('', null);
 
   constructor(
@@ -69,6 +91,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+      this.pConn$.setReferenceList(this.selectionList);
+      updateNewInstructions(this.pConn$, this.selectionList);
+    }
+
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -111,68 +138,124 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
     this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    if (this.label$ != '') {
+      this.showLabel$ = true;
+    }
 
-    this.caption$ = this.configProps$.caption;
-    this.helperText = this.configProps$.helperText;
-    this.trueLabel$ = this.configProps$.trueLabel;
-    this.falseLabel$ = this.configProps$.falseLabel;
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = (this.pConn$.getStateProps() as any).value;
+
+    // multi case
+    this.selectionMode = this.configProps$.selectionMode;
+    if (this.selectionMode === 'multi') {
+      this.referenceList = this.configProps$.referenceList;
+      this.selectionList = this.configProps$.selectionList;
+      this.selectedvalues = this.configProps$.readonlyContextList;
+      this.primaryField = this.configProps$.primaryField;
+
+      this.datasource = this.configProps$.datasource;
+      this.selectionKey = this.configProps$.selectionKey;
+      const listSourceItems = this.datasource?.source ?? [];
+      const dataField: any = this.selectionKey?.split?.('.')[1];
+      const listToDisplay: any[] = [];
+      listSourceItems.forEach(element => {
+        element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
+        listToDisplay.push(element);
+      });
+      this.listOfCheckboxes = listToDisplay;
+    } else {
+      if (this.configProps$.value != undefined) {
+        this.value$ = this.configProps$.value;
       }
-      this.cdRef.detectChanges();
-    });
-
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
 
-    // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
+      this.caption$ = this.configProps$.caption;
+      this.helperText = this.configProps$.helperText;
+      this.trueLabel$ = this.configProps$.trueLabel;
+      this.falseLabel$ = this.configProps$.falseLabel;
+
+      // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+      setTimeout(() => {
+        if (this.configProps$.required != null) {
+          this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+        }
+        this.cdRef.detectChanges();
+      });
+
+      if (this.configProps$.visibility != null) {
+        this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+      }
 
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
+      // disabled
+      if (this.configProps$.disabled != undefined) {
+        this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+      }
 
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
+      if (this.bDisabled$) {
+        this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
+      }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+      if (this.configProps$.readOnly != null) {
+        this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+        this.fieldControl.disable();
+      }
 
-    if (this.label$ != '') {
-      this.showLabel$ = true;
-    }
+      this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // eslint-disable-next-line sonarjs/no-redundant-boolean
-    if (this.value$ === 'true' || this.value$ == true) {
-      this.isChecked$ = true;
-    } else {
-      this.isChecked$ = false;
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
+      if (this.value$ === 'true' || this.value$ == true) {
+        this.isChecked$ = true;
+      } else {
+        this.isChecked$ = false;
+      }
+      // trigger display of error message with field control
+      if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+        const timer = interval(100).subscribe(() => {
+          this.fieldControl.setErrors({ message: true });
+          this.fieldControl.markAsTouched();
+
+          timer.unsubscribe();
+        });
+      }
     }
   }
 
   fieldOnChange(event: any) {
     event.value = event.checked;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
   }
 
   fieldOnBlur(event: any) {
-    event.value = event.checked;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    if (this.selectionMode === 'multi') {
+      this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+    } else {
+      event.value = event.checked;
+      this.angularPConnectData.actions?.onBlur(this, event);
+    }
+  }
+
+  handleChangeMultiMode(event, element) {
+    if (!element.selected) {
+      insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    this.pConn$.clearErrorMessages({
+      property: this.selectionList,
+      category: '',
+      context: ''
+    });
   }
 
   getErrorMessage() {

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

@@ -1,10 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 
-import { configProps, stateProps } from './mock';
+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,
@@ -13,13 +31,22 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
+        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({})
     }
@@ -31,12 +58,6 @@ type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
   args: {
-    label$: configProps.label,
-    helperText: configProps.helperText,
-    placeholder: configProps.placeholder,
-    bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
-    bRequired$: configProps.required,
-    displayMode$: configProps.displayMode
+    countryCode: 'USA'
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/icon-button-url.component.html.mustache

@@ -0,0 +1,40 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<ng-template #noDisplayMode>
+  <div *ngIf="bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$">
+      <mat-icon aria-hidden="false" aria-label="arrow right" fontIcon="arrow_forward"></mat-icon>
+      <mat-label style="vertical-align: super">{{ label$ }}</mat-label>
+      <button mat-icon-button aria-label="tooltip$" (click)="buttonClick()">
+        <mat-icon aria-hidden="false" [ariaLabel]="tooltip$" fontIcon="format_list_numbered"></mat-icon>
+      </button>
+      <a [href]="value$"><mat-icon aria-hidden="false" aria-label="tooltip$" fontIcon="language"></mat-icon></a>
+    </div>
+    <div *ngIf="showTable$">
+      <h2 class="psdk-state-list-title">{{ tableLabel$ }}</h2>
+      <table mat-table [dataSource]="repeatList$">
+        <!-- State name-->
+        <ng-container [matColumnDef]="displayedColumns$[0]">
+          <th mat-header-cell *matHeaderCellDef>{{ stateCodeLabel$ }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.stateCode }}</td>
+        </ng-container>
+
+        <!-- State code-->
+        <ng-container [matColumnDef]="displayedColumns$[1]">
+          <th mat-header-cell *matHeaderCellDef>{{ stateNameLabel$ }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.stateName }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+      </table>
+    </div>
+  </div>
+</ng-template>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+<ng-template #noEdit>
+  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'url' }"></component-mapper>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/{text-url.component.scss.mustache → icon-button-url.component.scss.mustache}

@@ -18,3 +18,7 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+
+.psdk-state-list-title {
+  margin-left: 0.5rem;
+}