Selectable card style changes (#365)

Co-authored-by: tumms2021389 <[email protected]>

Author: SambhuPega

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

@@ -1,4 +1,4 @@
-<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem">
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem">
   <div *ngFor="let cardContent of contentList">
     <mat-card [ngStyle]="cardStyle" appearance="outlined" (click)="cardSelect($event, cardContent.commonCardProps)">
       <img
@@ -34,7 +34,7 @@
           *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.name }}</div>
           <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>
         </div>
       </mat-card-content>

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

@@ -1,3 +1,11 @@
 ::ng-deep .mdc-label {
   font-size: large;
 }
+
+.mat-mdc-card-content:last-child {
+  padding-bottom: 0;
+}
+
+.mat-mdc-card-content:first-child {
+  padding-top: 0;
+}

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

@@ -168,7 +168,7 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
             alt: this.commonProps.image.showImageDescription && imageDescriptionKey ? item[imageDescriptionKey] : '',
             style: {
               width: imageWidth,
-              backgroundColor: 'rgb(233, 238, 243)',
+              backgroundColor: 'transparent',
               aspectRatio: '16/9',
               maxHeight: '100%',
               objectFit: 'contain',