feat(ux): implement sprint 11 user experience module

src/app/components/product-card/product-card.component.ts

@@ -28,6 +28,11 @@ export class ProductCardComponent {
   @Input() showFavoritePlaceholder = false;
   @Input() showComparePlaceholder = false;
   @Input() showQuickViewPlaceholder = false;
+  @Input() showFavoriteAction = false;
+  @Input() showCompareAction = false;
+  @Input() showShareAction = false;
+  @Input() isFavorite = false;
+  @Input() isCompared = false;
 
   @Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
   @Output() preview = new EventEmitter<number>();
@@ -35,6 +40,9 @@ export class ProductCardComponent {
   @Output() favoritePlaceholder = new EventEmitter<number>();
   @Output() comparePlaceholder = new EventEmitter<number>();
   @Output() quickViewPlaceholder = new EventEmitter<number>();
+  @Output() favoriteToggled = new EventEmitter<number>();
+  @Output() compareToggled = new EventEmitter<number>();
+  @Output() shareRequested = new EventEmitter<number>();
 
   readonly getMainImage = getMainImage;
   readonly getDiscountedPrice = getDiscountedPrice;
@@ -52,12 +60,14 @@ export class ProductCardComponent {
     event.preventDefault();
     event.stopPropagation();
     this.favoritePlaceholder.emit(this.item.itemID);
+    this.favoriteToggled.emit(this.item.itemID);
   }
 
   onComparePlaceholder(event: Event): void {
     event.preventDefault();
     event.stopPropagation();
     this.comparePlaceholder.emit(this.item.itemID);
+    this.compareToggled.emit(this.item.itemID);
   }
 
   onQuickViewPlaceholder(event: Event): void {
@@ -65,4 +75,18 @@ export class ProductCardComponent {
     event.stopPropagation();
     this.quickViewPlaceholder.emit(this.item.itemID);
   }
+
+  onShare(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.shareRequested.emit(this.item.itemID);
+  }
+
+  showFavoriteControl(): boolean {
+    return this.showFavoriteAction || this.showFavoritePlaceholder;
+  }
+
+  showCompareControl(): boolean {
+    return this.showCompareAction || this.showComparePlaceholder;
+  }
 }