All files / src/app/shared/components/product/product-item product-item.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
9x
 
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
9x
4x
 
 
 
 
4x
 
 
4x
4x
 
 
 
8x
 
 
 
4x
 
 
 
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
 
import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
import { ProductView } from 'ish-core/models/product-view/product-view.model';
 
export type ProductItemDisplayType = 'tile' | 'row';
 
/**
 * The Product Item Component renders the product either as 'tile' or 'row'.
 * The 'tile' rendering is the default if no value is provided for the displayType.
 */
@Component({
  selector: 'ish-product-item',
  templateUrl: './product-item.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductItemComponent implements OnInit {
  @Input() displayType: ProductItemDisplayType = 'tile';
 
  product$: Observable<ProductView>;
  loading$: Observable<boolean>;
 
  constructor(private context: ProductContextFacade) {}
 
  ngOnInit() {
    this.product$ = this.context.select('product');
    this.loading$ = this.context.select('loading');
  }
 
  get isTile() {
    return this.displayType === 'tile';
  }
 
  get isRow() {
    return !this.isTile;
  }
}