@bizdoc/core 1.14.9 → 1.14.10

package/src/lib/admin/utility-wrapper.component.ts

@@ -1,52 +0,0 @@
-import { Component, OnInit, OnDestroy, Injector, ViewContainerRef } from '@angular/core';
-import { SessionService } from '../core/session.service';
-import { HttpClient } from '@angular/common/http';
-import { Subscription } from 'rxjs';
-import { Utility } from '../core/models';
-import { UtilityRef } from "./utility-ref";
-import { WindowTitleService } from '../core/window-title.service';
-import { HubService } from '../core/hub.service';
-import { PromptService } from '../core/prompt.service';
-import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
-  template: ''
-})
-/** utility-wrapper component*/
-export class UtilityWrapperComponent implements OnInit, OnDestroy {
-  private _utility: Utility;
-  private _routing: Subscription;
-  /** ctor */
-  constructor(private _session: SessionService, private _route: ActivatedRoute,
-    private _title: WindowTitleService, private _http: HttpClient,
-    private _sb: PromptService,
-    private _messaging: HubService,
-    private _vc: ViewContainerRef,
-    private _cf: BizDocComponentFactoryResolver,
-    private _injector: Injector) {
-  }
-  ngOnInit(): void {
-    this._routing = this._route.params.subscribe(p => {
-      const id = p['id'];
-      this._utility = this._session.profile.utilities.find(u => u.name === id);
-
-      const factory = this._cf.resolve(this._utility.template);
-      this._vc.clear();
-      const uRef = new UtilityRef(this._utility, this._messaging,
-        this._sb,
-        this._http);
-      const injector = Injector.create(
-        [{
-          provide: UtilityRef, useValue: uRef
-        }],
-        this._injector);
-      this._vc.createComponent(factory, 0, injector);
-      this._title.set(this._utility.title);
-    });
-  }
-  ngOnDestroy(): void {
-    this._routing.unsubscribe();
-  }
-}
-

package/src/lib/admin/utility.pane.component.ts

@@ -1,49 +0,0 @@
-import { Component, OnInit, Injector, ViewContainerRef, ViewChild } from '@angular/core';
-import { SessionService } from '../core/session.service';
-import { HttpClient } from '@angular/common/http';
-import { Utility } from '../core/models';
-import { UtilityRef } from "./utility-ref";
-import { HubService } from '../core/hub.service';
-import { PromptService } from '../core/prompt.service';
-import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
-import { PaneRef } from '../core/slots/pane-ref';
-
-
-@Component({
-  template: '<ng-container #container></ng-container>',
-  host: {
-    class: 'pane'
-  }
-})
-/** utility-wrapper component*/
-export class UtilityPaneComponent implements OnInit {
-  @ViewChild('container', { static: true, read: ViewContainerRef }) vc: ViewContainerRef;
-  private _utility: Utility;
-  /** ctor */
-  constructor(private _session: SessionService,
-    private _pane: PaneRef<UtilityPaneComponent>,
-    private _http: HttpClient,
-    private _sb: PromptService,
-    private _messaging: HubService,
-    private _cf: BizDocComponentFactoryResolver,
-    private _injector: Injector) {
-  }
-  ngOnInit(): void {
-    this._pane.paramsChange.subscribe(p => {
-      const id = p['id'];
-      this._utility = this._session.profile.utilities.find(u => u.name === id);
-      this._pane.title = this._utility.title;
-      const factory = this._cf.resolve(this._utility.template);
-      this.vc.clear();
-      const uRef = new UtilityRef(this._utility, this._messaging,
-        this._sb,
-        this._http);
-      const injector = Injector.create(
-        [{
-          provide: UtilityRef, useValue: uRef
-        }],
-        this._injector);
-      this.vc.createComponent(factory, 0, injector);
-    });
-  }
-}

package/src/lib/app.component.ts

@@ -1,90 +0,0 @@
-import { Component, ComponentFactoryResolver, OnInit, ViewContainerRef } from '@angular/core';
-import { Direction } from '@angular/cdk/bidi';
-import { HubConnectionState } from '@microsoft/signalr';
-import { Subject } from 'rxjs';
-import { startWith, debounceTime } from 'rxjs/operators';
-import { enableRtl } from '@syncfusion/ej2-base';
-import { SessionService } from './core/session.service';
-import { HubService } from './core/hub.service';
-import { isMobile } from './core/functions';
-import { HomeComponent } from './home/home.desktop.component';
-import { HomeMobileComponent } from './home/home.mobile.component';
-import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-
-const REVISIT_TAB_REFRESH = 10000;
-const EXCEL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M38,8H19.3335A2.33373,2.33373,0,0,0,17,10.3335V20H38Z" fill="#21a366"/><path d="M56.6665,8H38V20H59V10.3335A2.33373,2.33373,0,0,0,56.6665,8Z" fill="#33c481"/><rect x="38" y="32" width="21" height="12" fill="#107c41"/><path d="M38,44V32H17V53.6665A2.33373,2.33373,0,0,0,19.3335,56h37.333A2.33373,2.33373,0,0,0,59,53.6665V44Z" fill="#185c37"/><rect x="17" y="20" width="21" height="12" fill="#107c41"/><rect x="38" y="20" width="21" height="12" fill="#21a366"/><path d="M33,20.33008V46.66992a1.73444,1.73444,0,0,1-.04.3999A2.31378,2.31378,0,0,1,30.66992,49H17V18H30.66992A2.326,2.326,0,0,1,33,20.33008Z" opacity="0.2"/><path d="M34,20.33008V44.66992A3.36171,3.36171,0,0,1,30.66992,48H17V17H30.66992A3.34177,3.34177,0,0,1,34,20.33008Z" opacity="0.1"/><path d="M33,20.33008V44.66992A2.326,2.326,0,0,1,30.66992,47H17V18H30.66992A2.326,2.326,0,0,1,33,20.33008Z" opacity="0.2"/><path d="M32,20.33008V44.66992A2.326,2.326,0,0,1,29.66992,47H17V18H29.66992A2.326,2.326,0,0,1,32,20.33008Z" opacity="0.1"/><rect x="4" y="18.00002" width="27.99996" height="27.99996" rx="2.33333" fill="#107c41"/><path d="M11.2256,39.5835l4.90759-7.60465-4.4951-7.56235h3.61724l2.45379,4.83356q.33839.68763.46538,1.02594h.03173q.24318-.54984.50768-1.06825l2.623-4.79125H24.658l-4.61145,7.52,4.72779,7.647H21.24174L18.40718,34.274a4.43255,4.43255,0,0,1-.33845-.70864h-.04231a3.345,3.345,0,0,1-.32788.68749L14.77937,39.5835Z" fill="#fff"/></svg>',
-  WORD_ICON = '<svg viewBox="0 0 560 400" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="m380.829 103.753h-146.659c-5.028 0-9.165 4.137-9.165 9.165v38.959l82.498 24.062 82.497-24.062v-38.959c0-5.028-4.137-9.165-9.164-9.165z" fill="#41a5ee"/><path d="m389.993 151.877h-164.994v48.123l82.497 24.062 82.497-24.062z" fill="#2b7cd3"/><path d="m389.993 200h-164.994v48.124l82.497 24.061 82.497-24.061z" fill="#185abd"/><path d="m389.993 248.124h-164.994v38.959c0 5.027 4.136 9.164 9.163 9.164h146.66c5.027 0 9.164-4.137 9.164-9.164z" fill="#103f91"/><path d="m284.582 138.127h-59.583v130.621h59.583c5.022-.015 9.149-4.143 9.164-9.164v-112.286c-.015-5.021-4.142-9.149-9.164-9.164z" fill-opacity=".098039"/><path d="m277.708 145.002h-52.709v130.621h52.709c5.021-.015 9.149-4.143 9.163-9.165v-112.285c-.014-5.021-4.142-9.149-9.163-9.164zm0 0h-52.709v116.871h52.709c5.021-.015 9.149-4.143 9.163-9.164v-98.536c-.014-5.021-4.142-9.149-9.163-9.164zm-6.875 0h-45.834v116.871h45.834c5.021-.015 9.149-4.143 9.163-9.164v-98.536c-.014-5.021-4.142-9.149-9.163-9.164z" fill-opacity=".2"/><path d="m179.164 145.002h91.661c5.028 0 9.165 4.136 9.165 9.164v91.662c0 5.027-4.137 9.163-9.165 9.163h-91.661c-5.027 0-9.164-4.136-9.164-9.163v-91.662c0-5.028 4.137-9.164 9.164-9.164z" fill="#185abd"/><path d="m252.154 234.374h-12.375l-14.437-47.436-15.125 47.436h-12.374l-13.75-68.748h12.375l9.624 48.123 14.438-46.748h10.312l13.75 46.748 9.624-48.123h11.687z" fill="#fff"/></g><path d="m170 90.004h219.993v219.993h-219.993z" fill="none"/></svg>',
-  POWERPOINT_ICON = '<svg viewBox="-0.12979372698077785 0 32.152389301176754 32" xmlns="http://www.w3.org/2000/svg" width="2500" height="2478"><path d="M18 2A14.041 14.041 0 0 0 4 16l17.737 3.737z" fill="#ed6c47"/><path d="M18 2a14.041 14.041 0 0 1 14 14l-7 4.758L18 16z" fill="#ff8f6b"/><path d="M18 30a14.041 14.041 0 0 0 14-14H4a14.041 14.041 0 0 0 14 14z" fill="#d35230"/><path d="M16.666 7h-9.36a13.914 13.914 0 0 0 .93 19h8.43A1.337 1.337 0 0 0 18 24.667V8.333A1.337 1.337 0 0 0 16.666 7z" opacity=".1"/><path d="M15.666 8H6.54a13.906 13.906 0 0 0 2.845 19h6.282A1.337 1.337 0 0 0 17 25.667V9.333A1.337 1.337 0 0 0 15.666 8z" opacity=".2"/><path d="M15.666 8H6.54a13.89 13.89 0 0 0 .766 17h8.361A1.337 1.337 0 0 0 17 23.667V9.333A1.337 1.337 0 0 0 15.666 8z" opacity=".2"/><path d="M14.666 8H6.54a13.89 13.89 0 0 0 .766 17h7.361A1.337 1.337 0 0 0 16 23.667V9.333A1.337 1.337 0 0 0 14.666 8z" opacity=".2"/><path d="M1.333 8h13.334A1.333 1.333 0 0 1 16 9.333v13.334A1.333 1.333 0 0 1 14.667 24H1.333A1.333 1.333 0 0 1 0 22.667V9.333A1.333 1.333 0 0 1 1.333 8z" fill="#c43e1c"/><path d="M7.997 11a4.168 4.168 0 0 1 2.755.805 2.878 2.878 0 0 1 .956 2.331 2.726 2.726 0 0 1-.473 1.588 3.164 3.164 0 0 1-1.344 1.186 4.57 4.57 0 0 1-2.02.424h-1.91V21H4V11zM5.96 15.683h1.687a2.194 2.194 0 0 0 1.492-.444 1.107 1.107 0 0 0 .504-1.026q0-1.659-1.933-1.659H5.96z" fill="#f9f7f7"/><path d="M0 0h32v32H0z" fill="none"/></svg>',
-  PDF_ICON = '<svg version="1.1" viewBox="0 0 14 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)"><polygon points="51.791 356.65 51.791 23.99 204.5 23.99 282.65 102.07 282.65 356.65" fill="#fff" stroke-width="212.65"/><path d="m201.19 31.99 73.46 73.393v243.26h-214.86v-316.66h141.4m6.623-16h-164.02v348.66h246.85v-265.9z" stroke-width="21.791"/></g><g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)"><polygon points="282.65 356.65 51.791 356.65 51.791 23.99 204.5 23.99 206.31 25.8 206.31 100.33 280.9 100.33 282.65 102.07" fill="#fff" stroke-width="212.65"/><path d="m198.31 31.99v76.337h76.337v240.32h-214.86v-316.66h138.52m9.5-16h-164.02v348.66h246.85v-265.9l-6.43-6.424h-69.907v-69.842z" stroke-width="21.791"/></g><g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)" stroke-width="21.791"><polygon points="258.31 87.75 219.64 87.75 219.64 48.667 258.31 86.38"/>		<path d="m227.64 67.646 12.41 12.104h-12.41v-12.104m-5.002-27.229h-10.998v55.333h54.666v-12.742z"/></g><g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)" fill="#ed1c24" stroke-width="212.65"><polygon points="311.89 284.49 22.544 284.49 22.544 167.68 37.291 152.94 37.291 171.49 297.15 171.49 297.15 152.94 311.89 167.68"/><path d="m303.65 168.63 1.747 1.747v107.62h-276.35v-107.62l1.747-1.747v9.362h272.85v-9.362m-12.999-31.385v27.747h-246.86v-27.747l-27.747 27.747v126h302.35v-126z"/></g><rect x="1.7219" y="7.9544" width="10.684" height="4.0307" fill="none"/><g transform="matrix(.04589 0 0 .04589 1.7219 11.733)" fill="#fff" stroke-width="21.791" aria-label="PDF"><path d="m9.216 0v-83.2h30.464q6.784 0 12.928 1.408 6.144 1.28 10.752 4.608 4.608 3.2 7.296 8.576 2.816 5.248 2.816 13.056 0 7.68-2.816 13.184-2.688 5.504-7.296 9.088-4.608 3.456-10.624 5.248-6.016 1.664-12.544 1.664h-8.96v26.368zm22.016-43.776h7.936q6.528 0 9.6-3.072 3.2-3.072 3.2-8.704t-3.456-7.936-9.856-2.304h-7.424z"/><path d="m87.04 0v-83.2h24.576q9.472 0 17.28 2.304 7.936 2.304 13.568 7.296t8.704 12.8q3.2 7.808 3.2 18.816t-3.072 18.944-8.704 13.056q-5.504 5.12-13.184 7.552-7.552 2.432-16.512 2.432zm22.016-17.664h1.28q4.48 0 8.448-1.024 3.968-1.152 6.784-3.84 2.944-2.688 4.608-7.424t1.664-12.032-1.664-11.904-4.608-7.168q-2.816-2.56-6.784-3.456-3.968-1.024-8.448-1.024h-1.28z"/><path d="m169.22 0v-83.2h54.272v18.432h-32.256v15.872h27.648v18.432h-27.648v30.464z"/></g></svg>';
-
-@Component({
-  template: '',
-  host: { class: 'mat-app-background' }
-})
-export class BrokenPage {
-}
-
-@Component({
-  selector: 'bizdoc',
-  template: ''
-})
-export class BizDocApp implements OnInit {
-  readonly dir: Direction = 'ltr';
-  private readonly _refresh = new Subject<void>();
-  constructor(
-    private _vc: ViewContainerRef,
-    private _cfr: ComponentFactoryResolver,
-    private _session: SessionService,
-    private _messaging: HubService,
-    iconRegistry: MatIconRegistry,
-    sanitizer: DomSanitizer
-  ) {
-    const doc = document.getElementsByTagName('html')[0],
-      body = doc.getElementsByTagName('body')[0];
-    doc.lang = _session.language;
-    if (_session.inverse) {
-      document.dir = doc.dir = body.dir = this.dir = 'rtl';
-      enableRtl();
-    }
-    iconRegistry.addSvgIconLiteral('excel', sanitizer.bypassSecurityTrustHtml(EXCEL_ICON));
-    iconRegistry.addSvgIconLiteral('word', sanitizer.bypassSecurityTrustHtml(WORD_ICON));
-    iconRegistry.addSvgIconLiteral('powerpoint', sanitizer.bypassSecurityTrustHtml(POWERPOINT_ICON));
-    iconRegistry.addSvgIconLiteral('pdf', sanitizer.bypassSecurityTrustHtml(PDF_ICON));
-    this._session.refresh().subscribe(this._initialize.bind(this));
-  }
-  private _initialize() {
-    if (isMobile()) {
-      const factory = this._cfr.resolveComponentFactory(HomeMobileComponent);
-      this._vc.createComponent(factory);
-    }
-    else {
-      const factory = this._cfr.resolveComponentFactory(HomeComponent);
-      this._vc.createComponent(factory);
-    }
-    this._refresh.pipe(debounceTime(REVISIT_TAB_REFRESH)).
-      subscribe(() => this._session.refresh().subscribe());
-    document.addEventListener('visibilitychange', () => {
-      if (!document.hidden && this._messaging.state === HubConnectionState.Disconnected && this._session.ok)
-        this._refresh.next();
-    });
-    window.addEventListener('online', () => this._refresh.next());
-  }
-
-  ngOnInit(): void {
-    const meta = document.querySelector('meta[name=theme-color]') as HTMLMetaElement;
-    this._session.themeChange.
-      pipe(startWith(this._session.theme)).
-      subscribe(t => {
-        if (meta) meta.content = this._session.getPrimery();
-        document.body.classList.value = t.name;
-      });
-
-    if (isMobile())
-      try {
-        document.documentElement.requestFullscreen();
-      } catch (e) {
-        console.log(e);
-      }
-  }
-}

package/src/lib/bizdoc.module.ts

@@ -1,82 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MaterialModule } from './modules/material.module'
-import { BIZDOC_CONFIG, BizDocConfig, BizDocChildConfig, PaneRoute } from './core/configuration';
-import { PANES_DATA } from './core/slots/pane-ref';
-import { PANES_CONFIG } from './routes.desktop';
-import { ROUTES } from './routes.mobile';
-import { SharedModule } from './shared.module';
-import { MobileModule } from './mobile.module';
-import { SystemModule } from './system.module';
-import { DesktopModule } from './desktop.module';
-import { registerComponents } from './core/component-factory-resolver';
-import { isMobile } from './core/functions';
-import { MAT_DATE_FORMATS } from '@angular/material/core';
-
-import { registerLicense } from '@syncfusion/ej2-base';
-registerLicense('ORg4AjUWIQA/Gnt2VVhhQlFaclhJXGFWfVJpTGpQdk5xdV9DaVZUTWY/P1ZhSXxRdkFjXX5ecnBUQ2lfVUI=');
-
-@NgModule({
-  declarations: [],
-  imports: [
-    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
-    BrowserAnimationsModule,
-    RouterModule.forRoot(ROUTES, { initialNavigation: 'disabled' }),
-    MobileModule,
-    DesktopModule,
-    SystemModule.forChild(),
-    SharedModule.forChild({ routing: isMobile() ? 'ng' : 'pane' })
-  ],
-  exports: [
-    SharedModule,
-    MaterialModule
-  ]
-})
-export class BizDocModule {
-  static forChild(config: BizDocChildConfig): ModuleWithProviders<BizDocModule> {
-    const { components, routes } = config;
-    registerComponents(components);
-    return {
-      ngModule: BizDocModule,
-      providers: [
-        { provide: PANES_DATA, useValue: withRoute(routes) }
-      ]
-    };
-
-  }
-  static forRoot(config: BizDocConfig): ModuleWithProviders<BizDocModule> {
-    const { formats, routes, components } = config;
-    registerComponents(components);
-    const providers = [
-      { provide: PANES_DATA, useValue: withRoute(routes) },
-      {
-        provide: BIZDOC_CONFIG,
-        useValue: config
-      },
-      {
-        provide: MAT_DATE_FORMATS, useValue: {
-          parse: {
-            dateInput: 'LL',
-          },
-          display: {
-            dateInput: (formats || {}).date || 'll',
-            monthYearLabel: 'MMM YYYY',
-            dateA11yLabel: 'LL',
-            monthYearA11yLabel: 'MMMM YYYY',
-          }
-        }
-      },
-    ] as Provider[];
-    return {
-      ngModule: BizDocModule,
-      providers
-    };
-  }
-}
-
-function withRoute(routes: PaneRoute[]): any {
-    return !routes ? PANES_CONFIG:
-  PANES_CONFIG.concat(routes);
-}

package/src/lib/browse/_browse-theme.scss

@@ -1,86 +0,0 @@
-@mixin browse-theme($theme) {
-  $primary: mat.get-color-from-palette($theme, primary);
-  $accent: mat.get-color-from-palette($theme, accent);
-  $background: mat.get-color-from-palette($theme, background);
-  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
-  $gray: mat.define-palette(mat.$gray-palette);
-  $selected-row-background: mat.get-color-from-palette($accent, 500);
-  $odd-row-background: mat.get-color-from-palette($gray, if($is-dark-theme, 900, 50));
-
-  input.search-box {
-    border: solid 1px mat.get-color-from-palette($gray, if($is-dark-theme, 700, 300));
-    border-radius: 2px;
-    padding: 2px 5px;
-    height: 28px;
-    width: 320px;
-    font-weight: 400;
-    background: mat.get-color-from-palette($gray, if($is-dark-theme, 800, 200));
-    font-size: medium;
-
-    &:hover {
-      background: mat.get-color-from-palette($gray, if($is-dark-theme, 900, 300));
-    }
-
-    &::-webkit-input-placeholder { /* Edge */
-      font-weight: 100;
-    }
-
-    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    }
-
-    &::placeholder {
-      font-weight: 100;
-    }
-
-    ~ .mat-icon {
-      position: relative;
-      left: -30px;
-      color: mat.get-color-from-palette($gray, 400);
-    }
-  }
-
-  [dir=rtl]
-  input.search-box {
-    ~ .mat-icon {
-      right: -30px;
-      left: auto;
-    }
-  }
-
-  .small-chip {
-    border-radius: 5px;
-    font-size: 11px;
-    padding: 3px 5px;
-    line-height: 18px;
-    margin: 2px;
-  }
-
-  .selecteded-row {
-
-    .mat-cell:last-child {
-      border-right: 4px solid $selected-row-background;
-      padding-right: 20px;
-    }
-  }
-
-  [dir=rtl] .selecteded-row {
-    .mat-cell:last-child {
-      border-right: none;
-      border-left: 4px solid $selected-row-background;
-      padding-left: 20px;
-      padding-right: 24px;
-    }
-  }
-
-  .element-row {
-    border-bottom-width: 0;
-  }
-
-  .data-table {
-    width: 100%;
-
-    .odd-row {
-      background-color: $odd-row-background;
-    }
-  }
-}

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

@@ -1,171 +0,0 @@
-<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
-<bizdoc-none *ngIf="dataSource?.data.length === 0" title="NoMessages" [subtitle]="!isMobile && folderId === DRAFT ? 'AltN' : null" icon="mail_outline"></bizdoc-none>
-<mat-table cdkDropList class="data-table"
-           [cdkDropListDisabled]="isMobile"
-           [cdkDropListData]="dataSource?.data"
-           cdkDropListConnectedTo="folders"
-           cdkDropListSortingDisabled
-           [dataSource]="dataSource" matSort multiTemplateDataRows (matSortChange)="sortData()"
-           id="browse-table" [@list]="dataSource" [style.display]="dataSource?.data.length ?'':'none'">
-  <ng-container matColumnDef="select">
-    <mat-header-cell *matHeaderCellDef>
-      <div class=""></div>
-      <mat-checkbox (change)="$event ? masterToggle() : null" [aria-label]="'Check'|translate"
-                    [checked]="selection.hasValue() && isAllSelected()"
-                    [indeterminate]="selection.hasValue() && !isAllSelected()">
-      </mat-checkbox>
-    </mat-header-cell>
-    <mat-cell *matCellDef="let item">
-      <mat-checkbox (click)="$event.stopPropagation()" [aria-label]="'Check'|translate"
-                    (change)="$event ? selection.toggle(item) : null"
-                    [checked]="selection.isSelected(item)">
-      </mat-checkbox>
-      <!-- drag -->
-      <!--<button mat-icon-button cdkDragHandle
-              (mousedown)="dragDisabled = false"
-              (mouseup)="dragDisabled = true"
-              (touchstart)="dragDisabled = false"
-              (touchend)="dragDisabled = true"
-              class="drag" aria-disabled="true" fxHide.xs>
-        <mat-icon>drag_indicator</mat-icon>
-      </button>-->
-      <button mat-icon-button (click)="toggleExpanded(item, $event)" [bizdocTooltip]="'Details' | translate" [attr.aria-label]="'Details' | translate" class="tool"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>
-    </mat-cell>
-  </ng-container>
-  <!-- Number column -->
-  <ng-container matColumnDef="number">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column"> {{item.number}} </mat-cell>
-  </ng-container>
-
-  <!-- Subject column -->
-  <ng-container matColumnDef="subject">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column"> {{item.subject}} </mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="owner">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column">
-      <bizdoc-identity-name *ngIf="item.ownerId" [identity]="item.ownerId" [by]="item.ownerById"></bizdoc-identity-name>
-    </mat-cell>
-  </ng-container>
-  <ng-container matColumnDef="sender">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column">
-      <bizdoc-identity-name *ngIf="item.senderId" [identity]="item.senderId" [by]="item.byId"></bizdoc-identity-name>
-    </mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="received">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column"> {{item.received | amCalendar}} </mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="receivedAgo">
-    <mat-header-cell *matHeaderCellDef mat-sort-header="received">{{'Received' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column" [bizdocTooltip]="item.received | amCalendar">{{item.received | amTimeAgo}}</mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="replied">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column"> {{item.replied | amCalendar}} </mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="issued">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column"> {{item.issued | amCalendar}} </mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="issuedAgo">
-    <mat-header-cell *matHeaderCellDef mat-sort-header="issued">{{'Issued' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column" [bizdocTooltip]="item.issued | amCalendar"> {{item.issued | amTimeAgo}} </mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="state">
-    <mat-header-cell *matHeaderCellDef mat-sort-header="stateId">{{'Status' | translate }}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column">
-      <bizdoc-status [stateId]="item.stateId"></bizdoc-status>
-    </mat-cell>
-  </ng-container>
-
-  <ng-container *ngIf="customColumns">
-    <ng-container *ngFor="let c of customColumns" [matColumnDef]="c.name">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>
-      <mat-cell *matCellDef="let item" class="data-column">
-        <ng-container [ngSwitch]="c.type">
-          <span *ngSwitchCase="'Date'">
-            {{item.model[c.name] | amCalendar }}
-          </span>
-          <span *ngSwitchCase="'Decimal'">
-            {{item.model[c.name] | number }}
-          </span>
-          <span *ngSwitchCase="'Boolean'">
-            <mat-checkbox [checked]="item.model[c.name]" [disabled]="true"></mat-checkbox>
-          </span>
-          <span *ngSwitchDefault>
-            {{item.model[c.name]}}z
-          </span>
-        </ng-container>
-      </mat-cell>
-    </ng-container>
-  </ng-container>
-
-  <!-- Value column -->
-  <ng-container matColumnDef="value">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>
-    <mat-cell *matCellDef="let item" class="data-column"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>
-  </ng-container>
-
-  <!-- options column -->
-  <ng-container matColumnDef="options">
-    <mat-header-cell *matHeaderCellDef></mat-header-cell>
-    <mat-cell *matCellDef="let item">
-      <button mat-icon-button (click)="flag(item, $event)" [bizdocTooltip]="'Flagged'| translate" [attr.aria-label]="'ToggleFlagged' | translate" class="tool"><mat-icon [class.document-flag]="item.flag">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>
-      <button mat-icon-button (click)="view(item, $event)" [bizdocTooltip]="'View' | translate" [attr.aria-label]="'View' | translate" class="tool" *ngIf="enableAnalysis"><mat-icon>data_usage</mat-icon></button>
-      <button mat-icon-button (click)="$event.stopPropagation()" [matMenuTriggerFor]="menu" fxHide.xs [matMenuTriggerData]="{item: item}" [bizdocTooltip]="'Options' | translate" [attr.aria-label]="'Options' | translate" class="tool"><mat-icon>more_vert</mat-icon></button>
-    </mat-cell>
-  </ng-container>
-  <!-- Expanded Content Column -->
-  <ng-container matColumnDef="expandedDetail">
-    <mat-cell *matCellDef="let item" [attr.colspan]="displayedColumns.length" [@updated]="item == updatedElement"
-              [class.read-row]="item.read">
-      <div [@detailExpand]="item == expandedElement ? 'expanded' : 'collapsed'" style="width: 100%">
-        <bizdoc-expanded-item [model]="item" *ngIf="item == expandedElement"></bizdoc-expanded-item>
-      </div>
-    </mat-cell>
-  </ng-container>
-  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-  <mat-row @item [@updated]="item == updatedElement"
-           *matRowDef="let item; let dataIndex = dataIndex; columns: displayedColumns;" class="element-row"
-           cdkDrag [cdkDragData]="item"
-           [cdkDragDisabled]="dragDisabled"
-           (cdkDragReleased)="dragDisabled = true"
-           [ngClass]="{'selecteded-row': selectedElement === item,
-      'expanded-row': expandedElement === item,
-           'odd-row': dataIndex % 2,
-      'read-row': item.read}" matRipple
-           (click)="open(item, $event)">
-    <div *cdkDragPreview>
-      <button mat-icon-button aria-disabled="true"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>
-    </div>
-    <div *cdkDragPlaceholder>
-      <!-- none -->
-    </div>
-  </mat-row>
-  <mat-row *matRowDef="let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']"
-           class="detail-row" matRipple
-           [ngClass]="{ 'selecteded-row': selectedElement === item,
-           'odd-row': dataIndex % 2
-           }"></mat-row>
-</mat-table>
-<mat-paginator #paginator [hidePageSize]="true" [pageSize]="PAGE_SIZE" [style.display]="!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'"></mat-paginator>
-<mat-menu #menu="matMenu">
-  <ng-template matMenuContent let-item="item">
-    <button mat-menu-item (click)="open(item, $event)">{{'Open'|translate}}</button>
-    <mat-divider></mat-divider>
-    <button mat-menu-item (click)="toggleRead(item)">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>
-    <mat-divider></mat-divider>
-    <button mat-menu-item (click)="copy(item)">{{'Copy'| translate}}</button>
-  </ng-template>
-</mat-menu>

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

@@ -1,52 +0,0 @@
-#browse-table {
-  width: 100%;
-
-  .detail-row {
-    min-height: 0;
-  }
-
-  .element-row {
-    cursor: pointer;
-
-    .drag {
-      cursor: move
-    }
-  }
-
-  .read-row {
-    font-weight: 100
-  }
-}
-
-
-@media screen and (min-width: 600px) {
-  .mat-row .tool {
-    opacity: .05
-  }
-
-  .mat-row:hover .tool {
-    opacity: 1
-  }
-}
-
-.element-row.cdk-drag-preview {
-}
-
-::ng-deep .mat-column-options {
-  /*text-align: end;*/
-  justify-content: end;
-  padding-inline-end: 8px;
-}
-
-::ng-deep .mat-column-value {
-  /*text-align: right;*/
-  justify-content: right;
-}
-
-::ng-deep .mat-column-select {
-  white-space: nowrap;
-}
-
-::ng-deep .mat-column-number {
-  white-space: nowrap;
-}