import { Component , ViewEncapsulation } from '@angular/core' ; import { Observable } from 'rxjs' ; import { Store } from '@ngrx/store' ; import { AppStore , ToggleDocumentDisplayMode , getDocumentDisplayMode } from '@alfresco/aca-shared/store' ; @ Component ( { selector : 'app-document-display-mode' , template : `
    <ng-container *ngIf="displayMode$ | async as displayMode">
      <button
        id="app-document-display-mode-button"
        [attr.title]="getTitle(displayMode) | translate"
        [attr.aria-label]="getTitle(displayMode) | translate"
        mat-icon-button
        color="primary"
        (click)="onClick()"
      >
        <mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
      </button>
    </ng-container>
  ` , encapsulation : ViewEncapsulation . None , host : { class : 'app-document-display-mode' } } ) export class DocumentDisplayModeComponent { displayMode$ : Observable < string > ; constructor ( private store ) { this . displayMode$ = store . select ( getDocumentDisplayMode ) ; } getTitle ( displayMode ) { return displayMode === 'list' ? 'APP.ACTIONS.LIST_MODE' : 'APP.ACTIONS.GALLERY_MODE' ; } onClick ( ) { this . store . dispatch ( new ToggleDocumentDisplayMode ( ) ) ; } }