@pega/dx-component-builder-sdk 24.2.14 → 25.1.10

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/template/DETAILS/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/DETAILS/utils.js.mustache

@@ -135,9 +135,7 @@ export function getInstructions(pConnect, instructions = 'casestep') {
 
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
-    /* eslint-disable no-console */
     console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
-    /* eslint-enable no-console */
     return undefined;
   }
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
 import type { PConnProps } from './PConnProps';

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/template/DETAILS-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/DETAILS-region/mock.ts.mustache

@@ -1,4 +1,3 @@
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',

package/src/tasks/create/templates/Constellation/template/FORM/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/FORM-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/PAGE/GetNextWork.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Button, useToaster } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/template/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/widget/CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/widget/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Avatar.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/index.tsx.mustache

@@ -1,5 +1,3 @@
-
-/* eslint-disable no-nested-ternary */
 import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
 

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

@@ -1,9 +1,11 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
-  ></component-mapper>
+<div *ngIf="variant !== 'card'; else cardMode">
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper
+      *ngIf="bVisible$ !== false"
+      name="FieldValueList"
+      [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+    ></component-mapper>
+  </div>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -51,3 +53,9 @@
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
+<ng-template #cardMode>
+  <h4>{{ label$ }}</h4>
+  <div>
+    <component-mapper name="SelectableCard" [props]="{ pConn$: pConn$, type: 'checkbox' }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

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

@@ -26,13 +26,14 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  renderMode: string;
 }
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
@@ -69,8 +70,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   selectedvalues: any;
   referenceList: string;
   listOfCheckboxes: any[] = [];
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
+  variant?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -205,7 +207,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
       this.componentReference = this.pConn$.getStateProps().value;
 
-      // eslint-disable-next-line sonarjs/no-redundant-boolean
       if (this.value$ === 'true' || this.value$ == true) {
         this.isChecked$ = true;
       } else {

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -43,7 +43,6 @@ class MyFormat {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -84,7 +83,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   dateFormatInfo = dateFormatInfoDefault;
   // and then update, as needed, based on locale, etc.
   theDateFormat = getDateFormatInfo();
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
   formattedValue$: any;
 

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.ts.mustache

@@ -24,7 +24,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -67,7 +66,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   // and then update, as needed, based on locale, etc.
   theDateFormat = getDateFormatInfo();
   placeholder: string;
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
   formattedValue$: any;
   timezone = PCore.getEnvironmentInfo()?.getTimeZone();

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -25,7 +25,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.ts.mustache

@@ -24,7 +24,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
@@ -49,7 +48,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   helperText: string;
   placeholder: string;
   currencyISOCode = 'USD';
-  currencyOptions: Object = {};
+  currencyOptions: object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
   currencySymbol: string;
@@ -130,8 +129,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
-      this.fieldControl.setValue(this.value$);
+    } else {
+      this.value$ = null;
     }
+    this.fieldControl.setValue(this.value$);
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     const currencyISOCode = this.configProps$?.currencyISOCode ?? '';

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.ts.mustache

@@ -24,7 +24,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
@@ -53,7 +52,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   inputMode: any;
   decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
   formattedValue: string;
 

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -19,7 +19,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatIconModule,

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -18,7 +18,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
@@ -44,7 +43,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
 
   constructor(

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, EventEmitter, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -68,12 +68,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
+  @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -101,7 +101,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
 
   constructor(
@@ -337,12 +337,13 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       event.value = '';
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
-    if (this.configProps$?.onRecordChange) {
-      this.configProps$.onRecordChange(event);
-    }
+
     this.pConn$.clearErrorMessages({
       property: this.propName
     });
+    if (this.onRecordChange) {
+      this.onRecordChange.emit(event.value);
+    }
   }
 
   getLocalizedOptionValue(opt: IOption) {

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.html.mustache

@@ -16,7 +16,6 @@
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
         />
         <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
           <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -34,7 +34,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -48,6 +47,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
+  @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -75,7 +75,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   hideLabel: boolean;
   filteredOptions: Observable<any[]>;
   filterValue = '';
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
 
   constructor(
@@ -323,22 +323,18 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   optionChanged(event: any) {
-    const value = event?.option?.value;
-    handleEvent(this.actionsApi, 'change', this.propName, value);
-  }
+    const val = event?.option?.value;
 
-  fieldOnBlur(event: Event) {
     let key = '';
-    const el = event?.target as HTMLInputElement;
-    if (el?.value) {
-      const index = this.options$?.findIndex(element => element.value === el.value);
-      key = index > -1 ? (key = this.options$[index].key) : el.value;
+    if (val) {
+      const index = this.options$?.findIndex(element => element.value === val);
+      key = index > -1 ? (key = this.options$[index].key) : val;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
-    if (this.configProps$?.onRecordChange) {
-      el.value = value;
-      this.configProps$.onRecordChange(event);
+
+    if (this.onRecordChange) {
+      this.onRecordChange.emit(value);
     }
   }
 

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.html.mustache

@@ -1,9 +1,11 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$, value$: this.localizedValue, displayMode$ }"
-  ></component-mapper>
+<div *ngIf="variant !== 'card'; else cardMode">
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper
+      *ngIf="bVisible$ !== false"
+      name="FieldValueList"
+      [props]="{ label$, value$: this.localizedValue, displayMode$ }"
+    ></component-mapper>
+  </div>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -34,4 +36,10 @@
     </mat-form-field>
   </div>
 </ng-template>
+<ng-template #cardMode>
+  <h4>{{ label$ }}</h4>
+  <div>
+    <component-mapper name="SelectableCard" [props]="{ pConn$: pConn$, type: 'radio' }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.ts.mustache

@@ -20,6 +20,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on RadioButtons here
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
 }
 
 @Component({
@@ -27,7 +28,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
@@ -61,8 +61,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
-  actionsApi: Object;
+  actionsApi: object;
   propName: string;
+  variant?: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -133,6 +134,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.variant = this.configProps$.variant;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.ts.mustache

@@ -17,7 +17,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatInputModule, MatFormFieldModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},