Image position changes in data reference and selectable card (#348)

Author: samhere06

packages/angular-sdk-components/src/lib/_components/field/selectable-card/selectable-card.component.html

@@ -30,7 +30,10 @@
             >{{ cardContent.commonCardProps.label }}</mat-checkbox
           >
         </div>
-        <div *ngFor="let field of cardContent.commonCardProps.fields" [ngStyle]="field.type !== 'TextArea' ? defaultStyle : specialStyle">
+        <div
+          *ngFor="let field of cardContent.commonCardProps.fields"
+          [ngStyle]="field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle"
+        >
           <div style="color: rgba(0, 0, 0, 0.6)">{{ field.name }}</div>
           <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>
         </div>

packages/angular-sdk-components/src/lib/_components/field/selectable-card/selectable-card.component.scss

@@ -0,0 +1,3 @@
+::ng-deep .mdc-label {
+  font-size: large;
+}

packages/angular-sdk-components/src/lib/_components/field/selectable-card/selectable-card.component.ts

@@ -43,6 +43,7 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
   defaultStyle = {};
   specialStyle = {};
   cardStyle = {};
+  noLabelStyle: {};
   selectedvalues: any;
   selectionList: any;
   primaryField: string;
@@ -69,6 +70,10 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
       margin: '0.5rem',
       fontSize: '0.875rem'
     };
+    this.noLabelStyle = {
+      alignItems: 'start',
+      marginLeft: '0.5rem'
+    };
   }
 
   override updateSelf(): void {

packages/angular-sdk-components/src/lib/_components/template/data-reference/data-reference.component.ts

@@ -56,6 +56,8 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   allowImplicitRefresh: any;
   displayChild = false;
   dataRelationshipContext: any;
+  imagePosition: any;
+  showImageDescription: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -204,6 +206,8 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     if (this.propsToUse.showLabel === false) {
       this.propsToUse.label = '';
     }
+    this.imagePosition = theConfigProps.imagePosition;
+    this.showImageDescription = theConfigProps.showImageDescription;
   }
 
   generateChildrenToRender() {
@@ -391,6 +395,10 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
       const useDropDownDataSource = (isCardVariant && (this.dropDownDataSource || isDeferDataPageCallEnabled)) || (!isCardVariant && hasParameters);
 
       config.datasource.source = useDropDownDataSource ? this.dropDownDataSource : `@DATASOURCE ${this.refList}.pxResults`;
+      if (isCardVariant) {
+        config.imagePosition = this.imagePosition;
+        config.showImageDescription = this.showImageDescription;
+      }
     } else if (type === 'AutoComplete') {
       config.datasource = this.refList;
       if (this.rawViewMetadata.config?.parameters) {