fix(data-list-item): enhance styling

Author: belsman

packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html

@@ -86,6 +86,7 @@
       *ngIf="fulfillment.fulfillmentState !== 'PENDING'; else noLabel"
     ></ng-container>
     <vcl-data-list-item *ngFor="let label of fulfillment.labels">
+      <!-- TODO Click on the parcel ID and you shall see more info about the parcel... -->
       <div class="row justify-content-between align-items-center">
         <span>Parcel Id</span>
         <span>{{ label.parcelId }}</span>

packages/modules/management/src/lib/components/shop/template/shop-template.component.html

@@ -54,7 +54,7 @@
   #itemTemplate
   let-item="item"
 >
-  <div class="p-2 row align-items-center">
+  <div class="flex row align-items-center">
     {{ item.name }}
   </div>
 </ng-template>

packages/modules/ui/src/lib/components/organisms/data-list/data-list.component.html

@@ -9,7 +9,10 @@
   </vcl-data-list-header>
 
   @for (item of items; track item.id) {
-  <vcl-data-list-item [value]="item.id">
+  <vcl-data-list-item
+    class="col px-2"
+    [value]="item.id"
+  >
     <ng-container
       *ngIf="itemTemplate"
       [ngTemplateOutlet]="itemTemplate"

packages/modules/ui/src/lib/components/organisms/data-list/data-list.component.ts

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  HostBinding,
   Input,
   Output,
   TemplateRef,
@@ -21,12 +20,6 @@ export class RcDataListComponent<T extends { id: string }> {
 
   @Output() itemSelected = new EventEmitter<string>();
 
-  @HostBinding('class')
-  _hostClasses = 'col h-100p';
-
-  // Selected item to be highlighted on the vcl-list...
-  //
-
   onDataListChange(value: string) {
     this.itemSelected.next(value);
   }