@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/browse/browse-items.component.ts

@@ -0,0 +1,419 @@
+import { EventEmitter, Component, OnInit, OnDestroy, ViewChild, ChangeDetectorRef, OnChanges, SimpleChanges, Output, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { MatSort, SortDirection } from '@angular/material/sort';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material/paginator';
+import { Observable, forkJoin, of, Subject, debounceTime } from 'rxjs';
+import { takeUntil, tap, shareReplay, finalize, map, first } from 'rxjs/operators';
+import { Folder, HeaderModel, RecipientModel, Action, FolderColumn, DRAFT } from '../core/models';
+import { isMobile, queryParams } from '../core/functions';
+import { expandListItemAnimation, itemAnimation, listAnimation, listItemUpdatedAnimation } from '../core/animations';
+import { FilterType, ItemExtra, MailboxService } from '../core/mailbox.service';
+import { SessionService } from '../core/session.service';
+import { TranslateService } from '../core/translate.service';
+import { HubService } from '../core/hub.service';
+import { CubeService } from '../cube/cube.service';
+import { PromptService } from '../core/prompt.service';
+import { BrowseFilterArgs } from './filter/filter.component';
+
+export const TAKE = 200, SIZE = 20, HEADER_COLUMN_NAMES = ['number', 'subject', 'value', 'owner', 'sender', 'received', 'replied', 'stateId', 'issued'];
+@Component({
+  selector: 'bizdoc-browse-items',
+  templateUrl: './browse-items.component.html',
+  styleUrls: ['./browse-items.component.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation,
+    expandListItemAnimation,
+    listItemUpdatedAnimation
+  ],
+})
+/** browse items component*/
+export class BrowseItemsComponent implements OnInit, OnChanges, OnDestroy {
+  @Output('open') readonly onopen = new EventEmitter<RecipientModel>();
+  @Output('view') readonly onview = new EventEmitter<RecipientModel>();
+  @Input() folderId: string = null;
+  @Input() filterType: FilterType = null;
+  @Input() filters: BrowseFilterArgs;
+  @ViewChild(MatMenuTrigger)
+  contextMenu: MatMenuTrigger;
+
+  contextMenuPosition = { x: '0px', y: '0px' };
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  dataSource: MatTableDataSource<HeaderModel>;
+  displayedColumns: string[];
+  customColumns?: FolderColumn[];
+  expandedElement?: HeaderModel;
+  updatedElement?: HeaderModel;
+  selectedElement?: HeaderModel;
+  sharedActions: Action[] = [];
+  dragDisabled = true;
+  readonly PAGE_SIZE = SIZE;
+  readonly DRAFT = DRAFT;
+  readonly currencyFormat = this._cube.digitsInfo;
+  readonly isMobile = isMobile();
+  readonly selection = new SelectionModel<HeaderModel>(true, []);
+  loading: boolean;
+  private _pendingItems: { [id: string]: Observable<RecipientModel<any>>; } = {};
+  private readonly _destroy = new Subject<void>();
+  private readonly _loading$ = new Subject<boolean>();
+  /** browse ctor */
+  constructor(
+    private _mailbox: MailboxService,
+    private _cube: CubeService,
+    private _session: SessionService,
+    private _sb: PromptService,
+    private _translate: TranslateService,
+    private _cd: ChangeDetectorRef,
+    private _messaging: HubService) {
+  }
+  ngOnInit(): void {
+    this.selection.changed.pipe(takeUntil(this._destroy)).subscribe(() => this._sharedActions());
+    this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(m => {
+      if (!this.dataSource)
+        return;
+      const item = this.dataSource.data.find(c => c.id === m.id);
+      if (item) {
+        const extra = item as ItemExtra;
+        if (!extra.working) {
+          if (m.folderId && m.folderId !== this.folderId)
+            this._remove(item);
+          else {
+            this._assign(item, m);
+            this._cd.markForCheck();
+          }
+        }
+      }
+      else m.model &&
+        this._add(m);
+    });
+    this._mailbox.deleted.pipe(takeUntil(this._destroy)).subscribe(id => {
+      if (!this.dataSource)
+        return;
+      const item = this.dataSource.data.find(c => c.id === id);
+      item &&
+        this._remove(item);
+    });
+    this._messaging.new$.pipe(takeUntil(this._destroy)).subscribe(m => {
+      if (!this.dataSource)
+        return;
+      const item = this.dataSource.data.find(c => c.id === m.model.id);
+      if (!item && this.folderId === m.model.folderId) {
+        this._pendingItems[m.model.id] = of(m.model as RecipientModel);
+        this._add(m.model);
+      }
+    });
+    this._messaging.update$.pipe(takeUntil(this._destroy)).subscribe(m => {
+      if (!this.dataSource)
+        return;
+      const item = this.dataSource.data.find(c => c.id === m.model.id);
+      if (item) {
+        if (item.folderId === m.model.folderId) {
+          this._assign(item, m.model);
+          this._pendingItems[m.model.id] = of(item as RecipientModel);
+          this.updatedElement = item;
+        }
+        else
+          this._remove(item);
+      }
+    });
+    this._messaging.delete$.pipe(takeUntil(this._destroy)).subscribe(m => {
+      const item = this.dataSource.data.find(c => c.id === m.id);
+      item && this._remove(item);
+    });
+    this._messaging.comment$.pipe(takeUntil(this._destroy)).subscribe(c => {
+      const item = this.dataSource.data.find(i => i.id === c.id);
+      if (item && (item as RecipientModel).comments)
+        (item as RecipientModel<any>).comments.push(c.model);
+    });
+    this._messaging.vote$.pipe(takeUntil(this._destroy)).subscribe(v => {
+      const item = this.dataSource.data.find(c => c.id === v.id);
+      if (item && (item as RecipientModel).comments) {
+        const comment = (item as RecipientModel<any>).comments.find(c => c.id === v.commentId);
+        comment.votes = v.votes;
+      }
+    });
+    this._session.loaded.pipe(takeUntil(this._destroy)).
+      subscribe(() => this.refresh());
+    this._loading$.pipe(takeUntil(this._destroy),
+      debounceTime(100)).
+      subscribe(e => this.loading = e);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.displayedColumns = this._columns();
+    this.refresh();
+  }
+  private _assign(model1: HeaderModel, model2: HeaderModel) {
+    Object.assign(model1, model2, {
+      model: Object.deepAssign(model1.model, model1.model)
+    });
+  }
+  get folder(): Folder { return this.folderId ? this._session.profile.folders.find(f => f.name === this.folderId) : null; }
+  //drop(evt: CdkDragDrop<string, string>) {
+  //  (evt.previousContainer.id === 'tags') &&
+  //    this.tag(evt.currentIndex, evt.item.data);
+  //}
+  dragStarted(event: any) {
+  }
+  onContextMenu(event: MouseEvent, item: RecipientModel) {
+    event.preventDefault();
+    this.contextMenuPosition.x = event.clientX + 'px';
+    this.contextMenuPosition.y = event.clientY + 'px';
+    this.contextMenu.menuData = { item };
+    //this.contextMenu.menu.focusFirstItem('mouse');
+    this.contextMenu.openMenu();
+  }
+  toggleRead(item: RecipientModel) {
+    this.contextMenu.closeMenu();
+    this._mailbox.read(item.id, !item.read).
+      subscribe(() => item.read = !item.read)
+  }
+  select(id: number) {
+    if (this.dataSource) {
+      if (this.selectedElement && this.selectedElement.id === id) return;
+      this.selectedElement = this.dataSource.data.find(i => i.id === id);
+    }
+  }
+  tag(currentIndex: number, tag: string) {
+    const data = this.dataSource.sortData(this.dataSource.data, this.sort),
+      mail = data[this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize + currentIndex];
+    this._retrieve(mail).subscribe(item => {
+      if (item.tags && item.tags.indexOf(tag) > -1) return;
+      this._mailbox.tags(mail.id, item.tags).subscribe(() => {
+        if (!item.tags) item.tags = [tag];
+        else item.tags.push(tag)
+      });
+    });
+  }
+  open(item: RecipientModel<any>, evt: Event) {
+    this.contextMenu.closeMenu();
+    evt.stopPropagation();
+    this._retrieve(item).subscribe(() =>
+      this.onopen.next(item), () => this._sb.error());
+  }
+  view(item: RecipientModel<any>, evt: Event) {
+    this.contextMenu.closeMenu();
+    evt.stopPropagation();
+    this._retrieve(item).subscribe(() =>
+      this.onview.next(item), () => this._sb.error());
+  }
+  refresh() {
+    this._pendingItems = {};
+    this._loading$.next(true);
+    return this._mailbox.findAll({ ...this.filters, folderId: this.folderId, type: this.filterType }, { take: TAKE }).
+      pipe(finalize(() =>
+        this._loading$.next(false)
+      )).
+      subscribe(r => {
+        this.selection.clear();
+        this.dataSource = new MatTableDataSource(r);
+        this.sort.active = this.sorting;
+        this.sort.start = this.direction as any;
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+        this.paginator.pageIndex > 0 && this.paginator.firstPage();
+      }, () =>
+        this._sb.error()
+      );
+  }
+  private _group(data: HeaderModel[]) {
+    const groups = {};
+    data.forEach(i => {
+      if (!groups[i.documentId])
+        groups[i.documentId] = [i];
+      else (groups[i.documentId] as HeaderModel[]).push(i);
+    });
+
+  }
+  isGroup(_, item) {
+  }
+  sortData() {
+    this.sorting = this.sort.active;
+    this.direction = this.sort.direction;
+  }
+  isAllDraft(): boolean {
+    return this.selection.selected.length && this.selection.selected.every(m => m.draft);
+  }
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.selection.select(...this.dataSource.data);
+  }
+  flag(item: HeaderModel, evt: Event) {
+    const extra = item as ItemExtra;
+    extra.working = true;
+    this._mailbox.flag(item.id, !item.flag).subscribe(() => {
+      item.flag = !item.flag;
+      extra.working = false;
+    }, () => extra.working = false);
+    evt.stopPropagation();
+  }
+  get sorting(): string {
+    return localStorage.getItem('sorting');
+  }
+  set sorting(value: string) {
+    localStorage.setItem('sorting', value);
+  }
+  get direction(): SortDirection {
+    return localStorage.getItem('direction') as SortDirection || 'desc';
+  }
+  set direction(value: SortDirection) {
+    localStorage.setItem('direction', value);
+  }
+  submitAll() {
+    this._forEach(i => this._mailbox.submit(i.id, i.version, i.formId).pipe(tap(() => this.dataSource.data.remove(i))), 'SubmitErr').
+      subscribe(is => is.length > 1 ? this._sb.toast(
+        'SubmittedMany', is.length) :
+        this._sb.toast('Submitted', is[0].number));
+  }
+  discardAll() {
+    this._sb.ask('DiscardAsk', 'Discard', {
+      color: 'warn',
+      ok: 'Discard'
+    }).subscribe(ok => ok &&
+      this._forEach(i => this._mailbox.delete(i.id).pipe(tap(() => this.dataSource.data.remove(i))), 'Err').subscribe());
+  }
+  toggleExpanded(item: HeaderModel, event: Event) {
+    if (this.expandedElement != item) {
+      this._retrieve(item).subscribe(() => {
+        //playAudio('navigation_hover-tap');
+        this.expandedElement = item;
+      }, () => this._sb.error());
+    }
+    else
+      this.expandedElement = null;
+    this.contextMenu.closeMenu();
+    event.stopPropagation();
+  }
+  /**
+   * get full mesage body either from cache or network
+   * @param item
+   */
+  private _retrieve(item: HeaderModel): Observable<RecipientModel<any>> {
+    if (this._pendingItems[item.id])
+      return this._pendingItems[item.id];
+    else {
+      (item as ItemExtra).loading = true;
+      this._loading$.next(true);
+      return this._pendingItems[item.id] =
+        this._mailbox.get(item.id, item.read).pipe(first(), map(m => Object.assign(item, m)),
+          finalize(() => {
+            (item as ItemExtra).loading = false;
+            this._loading$.next(false);
+          }), shareReplay());
+    }
+  }
+  private _sharedActions() {
+    if (this.selection.hasValue() && !this.isAllDraft()) {
+      this.sharedActions = [];
+      forkJoin(this.selection.selected.map(i => this._retrieve(i))).subscribe((m: RecipientModel<any>[]) => {
+        const actions = m[0].actions;
+        if (!actions)
+          return [];
+        for (let i = 1; i < m.length; i++) {
+          const item = m[i];
+          for (let j = 0; j < actions.length; j++) {
+            if (item.actions.indexOf(actions[j]) === -1)
+              actions.splice(j, 1);
+          }
+        }
+        this.sharedActions = this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1 && (this.selection.selected.length === 1 || a.multiple !== false));
+      }, undefined);
+    }
+    else
+      this.sharedActions = [];
+  }
+  /**
+ * execute function per item in collection
+ * @param fn
+ * @param error
+ */
+  private _forEach(fn: (item: HeaderModel) => Observable<any>, error: string): Observable<HeaderModel[]> {
+    const items = this.selection.selected.slice();
+    const errors = new Subject<string>();
+    errors.pipe().subscribe(m => this._sb.errorString(m));
+    const promises = items.map(m => fn(m).pipe(tap(() => {
+    }, (e: HttpErrorResponse) => {
+      let message: string;
+      switch (e.status) {
+        case 404:
+          message = this._translate.get('Err');
+          break;
+        case 406:
+          message = e.error;
+          break;
+        case 409:
+          message = this._translate.get('VersionErr', m.number);
+          Object.assign(m, e.error);
+          break;
+        default:
+          message = this._translate.get(error);
+      }
+      errors.next(message);
+    }), finalize(() => (m as any).working = false)));
+    return forkJoin(promises).pipe(tap(() => {
+      errors.unsubscribe();
+      this.selection.clear();
+      this.dataSource.filter = '';
+    }), map(() => items));
+  }
+  private _add(m: RecipientModel<any>) {
+    this.dataSource.data.splice(0, 0, m);
+    this.dataSource.filter = '';
+  }
+
+  private _remove(item: HeaderModel) {
+    this.selection.deselect(item);
+    this.dataSource.data.remove(item);
+    this.dataSource.filter = '';
+    this._cd.markForCheck();
+  }
+
+  private _columns(): string[] {
+    const columns = ['select'];
+    if (this.folder && this.folder.columns) {
+      const customColumns = [];
+      this.folder.columns.forEach(c => {
+        if (HEADER_COLUMN_NAMES.indexOf(c.name) > -1)
+          columns.push(c.name);
+        else {
+          columns.push(`model.${c.name}`);
+          customColumns.push(c);
+        }
+      });
+      this.customColumns = customColumns;
+    }
+    else {
+      columns.push('number');
+      if (!this.isMobile) {
+        columns.push('subject');
+      }
+      columns.push('value');
+    }
+    columns.push('options');
+    return columns;
+  }
+  sendAll(action: string, args: any) {
+    const params = queryParams(args);
+    this._forEach(i => this._mailbox.send(i.id, i.version, i.formId, null, action, params).pipe(tap(() => (i.folderId !== this.folderId) && this.dataSource.data.remove(i))), 'SendErr').
+      subscribe(is => is.length > 1 ? this._sb.toast('SentMany', is.length.toString(), this._actionAdjective(action, true)) :
+        this._sb.toast('Sent', is[0].number, this._actionAdjective(action))
+      );
+  }
+  private _actionAdjective(name: string, plural?: boolean): string {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    return ((plural ? (action.adjectivePlural || action.adjective) : action.adjective) || action.title).toLowerCase();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/browse/browse.mobile.component.html

@@ -0,0 +1,33 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="items.refresh()" [matTooltip]="'Refresh' | translate" [attr.aria-label]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <button mat-icon-button *ngIf="items.isAllDraft()" (click)="items.discardAll()" [matTooltip]="'DiscardSelected' | translate : items.selection.selected.length" [attr.aria-label]="'DiscardSelected' | translate : items.selection.selected.length"><mat-icon>delete_sweep</mat-icon></button>
+  <button mat-button color="primary" fxShow [fxShow.xs]="false" *ngIf="items.isAllDraft()" (click)="items.submitAll()">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>
+  <button mat-icon-button color="primary" fxHide [fxHide.xs]="false" *ngIf="items.isAllDraft()" (click)="items.submitAll()" [matTooltip]="'Submit' | translate" [attr.aria-label]="'Submit' | translate"><mat-icon>send</mat-icon></button>
+  <button mat-button color="primary" *ngIf="items.sharedActions.length === 1" (click)="sendAll(items.sharedActions[0].name)" [matTooltip]="items.sharedActions[0].title"><mat-icon *ngIf="items.sharedActions[0].icon">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>
+  <button mat-button color="primary" *ngIf="items.sharedActions.length > 1" [matMenuTriggerFor]="action" [matTooltip]="'Send' | translate" [attr.aria-label]="'Send' | translate">
+    {{'SendSelected'| translate : items.selection.selected.length }}
+  </button>
+  <mat-menu #action>
+    <ng-container *ngFor="let a of items.sharedActions | sort : 'group'; let i = index">
+      <mat-divider *ngIf="i>0 && items.sharedActions[i-1].group !== a.group">
+      </mat-divider>
+      <button mat-menu-item (click)="sendAll(a.name)" [attr.aria-label]="a.title">
+        {{ a.title }}
+      </button>
+    </ng-container>
+  </mat-menu>
+  <span class="divider"></span>
+  <button mat-icon-button fxHide.xs (click)="items.paginator.previousPage()" [matTooltip]="'PrevPage' | translate" [attr.aria-label]="'PrevPage' | translate" [disabled]="!items.paginator.hasPreviousPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+  <button mat-icon-button fxHide.xs (click)="items.paginator.nextPage()" [matTooltip]="'NextPage' | translate" [attr.aria-label]="'NextPage' | translate" [disabled]="!items.paginator.hasNextPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>
+  <button mat-icon-button (click)="drawer.toggle()" [matTooltip]="'Filter' | translate" [attr.aria-label]="'Filter' | translate"><mat-icon>filter_list</mat-icon></button>
+</mat-toolbar>
+<mat-sidenav-container class="page-container" autosize>
+  <mat-sidenav #drawer mode="over" position="end" [opened]="false">
+    <ng-container [ngSwitch]="mode">
+    <bizdoc-browse-filter *ngSwitchDefault [values]=filters (valuesChange)="filterChange($event)" [folderId]="folderId"></bizdoc-browse-filter>
+    </ng-container>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <bizdoc-browse-items [filters]="filters" [folderId]="folderId" [filterType]="filterType" (open)="open($event)" (view)=view($event) #items></bizdoc-browse-items>
+  </mat-sidenav-content>
+</mat-sidenav-container>

package/src/lib/browse/browse.mobile.component.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSidenav } from '@angular/material/sidenav';
+import { Directionality } from '@angular/cdk/bidi';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Folder, RecipientModel } from '../core/models';
+import { WindowTitleService } from '../core/window-title.service';
+import { ActionDialog, ActionDialogData } from '../compose/action/action.dialog';
+import { BrowseFilterArgs } from './filter/filter.component';
+import { BrowseItemsComponent } from './browse-items.component';
+import { FilterType } from '../core/mailbox.service';
+import { SessionService } from '../core/session.service';
+
+@Component({
+  templateUrl: './browse.mobile.component.html'
+})
+/** browse component*/
+export class BrowseComponent implements OnInit, OnDestroy {
+  mode = 'filter';
+  @ViewChild(BrowseItemsComponent, { static: true }) items: BrowseItemsComponent;
+  @ViewChild(MatSidenav, { static: true }) drawer: MatSidenav;
+   folderId: string;
+  filterType: FilterType;
+  filters: BrowseFilterArgs;
+  private readonly _destroy = new Subject<void>();
+  /** browse ctor */
+  constructor(
+    private _router: Router,
+    private _title: WindowTitleService,
+    private _session: SessionService,
+    private _route: ActivatedRoute,
+    private _directionality: Directionality,
+    private _dialog: MatDialog) {
+  }
+  ngOnInit(): void {
+    this._route.params.pipe(takeUntil(this._destroy)).subscribe(p => {
+      this.folderId = p['id'];
+      this._title.set(this.folderId ? this.folder.title : null);
+    });
+    this._route.queryParams.pipe(takeUntil(this._destroy)).subscribe(p => {
+      this.filterType = p['type'];
+      this.filters = p;
+      Object.keys(p).length && this.drawer.open();
+    });
+  }
+  get folder(): Folder { return this._session.profile.folders.find(f => f.name === this.folderId); }
+  filterChange(filters: BrowseFilterArgs) {
+    this._router.navigate([], {
+      queryParams: filters
+    });
+  }
+  open(item: RecipientModel<any>) {
+    this._router.navigate(['mailbox/i', item.id.encodeId()],
+      {
+        state: {
+          item: { ...item }
+        }
+      });
+  }
+  view(item: RecipientModel<any>) {
+    this._router.navigate(['mailbox/i', item.id.encodeId(), 'views'],
+      {
+        state: {
+          item: { ...item }
+        }
+      })
+  }
+
+  sendAll(action: string) {
+    const { selected } = this.items.selection;
+    const data: ActionDialogData = {
+      action,
+      items: selected as RecipientModel[]
+    };
+    this._dialog.open(ActionDialog, {
+      data,
+      direction: this._directionality.value,
+      restoreFocus: false
+    }).afterClosed().subscribe(args =>
+      args &&
+      this.items.sendAll(action, args));
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/browse/browse.pane.component.html

@@ -0,0 +1,43 @@
+<mat-toolbar class="nav-toolbar" >
+  <ng-container *ngIf="!items.selection.isEmpty(); else search">
+    <!--<button mat-icon-button (click)="items.refresh()" [matTooltip]="'Refresh' | translate" [attr.aria-label]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>-->
+    <button mat-icon-button *ngIf="items.isAllDraft()" (click)="items.discardAll()" [matTooltip]="'DiscardSelected' | translate : items.selection.selected.length" [attr.aria-label]="'DiscardSelected' | translate : items.selection.selected.length"><mat-icon>delete_sweep</mat-icon></button>
+    <button mat-button color="primary" fxShow [fxShow.xs]="false" *ngIf="items.isAllDraft()" (click)="items.submitAll()">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>
+    <button mat-icon-button color="primary" fxHide [fxHide.xs]="false" *ngIf="items.isAllDraft()" (click)="items.submitAll()" [matTooltip]="'Submit' | translate" [attr.aria-label]="'Submit' | translate"><mat-icon>send</mat-icon></button>
+    <button mat-button color="primary" *ngIf="items.sharedActions.length === 1" (click)="sendAll(items.sharedActions[0].name)" [matTooltip]="items.sharedActions[0].title"><mat-icon *ngIf="items.sharedActions[0].icon">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>
+    <button mat-button color="primary" *ngIf="items.sharedActions.length > 1" [matMenuTriggerFor]="action" [matTooltip]="'Send' | translate" [attr.aria-label]="'Send' | translate">
+      {{'SendSelected'| translate : items.selection.selected.length }}
+    </button>
+    <mat-menu #action>
+      <ng-container *ngFor="let a of items.sharedActions | sort : 'group'; let i = index">
+        <mat-divider *ngIf="i>0 && items.sharedActions[i-1].group !== a.group">
+        </mat-divider>
+        <button mat-menu-item (click)="sendAll(a.name)" [attr.aria-label]="a.title">
+          {{ a.title }}
+        </button>
+      </ng-container>
+    </mat-menu>
+    <!--<button mat-icon-button (click)="items.paginator.previousPage()" [matTooltip]="'PrevPage' | translate" [attr.aria-label]="'PrevPage' | translate" [disabled]="!items.paginator.hasPreviousPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+  <button mat-icon-button (click)="items.paginator.nextPage()" [matTooltip]="'NextPage' | translate" [attr.aria-label]="'NextPage' | translate" [disabled]="!items.paginator.hasNextPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>-->
+  </ng-container>
+</mat-toolbar>
+<bizdoc-browse-items [filters]="filters" [folderId]="folderId" [filterType]="filterType"
+                     (open)="open($event)" (view)="view($event) " #items></bizdoc-browse-items>
+<ng-template #search>
+  <!--<button mat-icon-button (click)="openSearch()"
+          [matTooltip]="'Search'|translate" class="tool">
+    <mat-icon>search</mat-icon>
+  </button>
+  [@search]="searching"
+  (@search.done)="searching && focus()"-->
+  <input matInput
+         [formControl]="contains" autocomplete="off" placeholder="{{'Search' | translate}}"
+         class="search-box"
+         #searchInput
+         (keydown.escape)="clearSearch($event)">
+  <mat-icon *ngIf="contains.value" (click)="clearSearch()">close</mat-icon>
+  <span class="divider"></span>
+  <!--<button mat-icon-button (click)="items.paginator.previousPage()" [matTooltip]="'PrevPage' | translate" [attr.aria-label]="'PrevPage' | translate" [disabled]="!items.paginator.hasPreviousPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+  <button mat-icon-button (click)="items.paginator.nextPage()" [matTooltip]="'NextPage' | translate" [attr.aria-label]="'NextPage' | translate" [disabled]="!items.paginator.hasNextPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>-->
+  <button mat-icon-button (click)="openFilter($event)" [matTooltip]="'Filter' | translate" [attr.aria-label]="'Filter' | translate"><mat-icon>filter_list</mat-icon></button>
+</ng-template>

package/src/lib/browse/browse.pane.component.scss

@@ -0,0 +1,4 @@
+:host {
+  min-width: 540px;
+  display: contents;
+}