@bizdoc/core 1.13.8 → 1.13.12

package/src/lib/admin/profiler/profiler.component.ts

@@ -0,0 +1,268 @@
+import { Component, ViewChild, OnInit, OnDestroy, Inject, TemplateRef, ElementRef, HostListener } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MediaObserver } from '@angular/flex-layout';
+import { AxisModel, BorderModel, ChartComponent, IPointEventArgs, ITooltipRenderEventArgs, LegendSeriesModel, MarkerOptionsModel, SeriesModel, TooltipSettingsModel, ZoomSettingsModel } from '@syncfusion/ej2-angular-charts';
+import { Subject, Observable } from 'rxjs';
+import { takeUntil, debounceTime, switchMap, filter, map } from 'rxjs/operators';
+import dayjs from 'dayjs';
+import { isObject } from '../../core/functions';
+import { BizDoc } from '../../core/decorators';
+import { GuideStep, UserInfo } from '../../core/models';
+import { UtilityRef } from '../utility-ref';
+import { PromptService } from '../../core/prompt.service';
+import { AccountService } from '../../core/account.service';
+import { DocumentInfo } from '../../core/info/document-info.service';
+import { SessionService } from '../../core/session.service';
+import { GuideService } from '../../core/guide/guide.service';
+import { TranslateService } from '../../core/translate.service';
+import { FONT_FAMILY } from '../../core/colors';
+import { PanesRouter } from '../../core/slots/router.service';
+import { ChatInfo } from '../../chat/chat-info';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { OpenPolicy } from '../../core/configuration';
+
+@Component({
+  templateUrl: './profiler.component.html',
+  styleUrls: ['./profiler.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+@BizDoc({ selector: 'bizdoc-user-profiler' })
+/** component*/
+export class ProfilerComponent implements OnInit, OnDestroy {
+  readonly search = this._fb.control(null);
+  @ViewChild('activity') chart: ChartComponent;
+  @ViewChild('activity', { read: ElementRef }) chartElement: ElementRef;
+  @ViewChild('assign') assign: TemplateRef<any>;
+  readonly who = this._fb.control(null, Validators.required);
+  readonly primaryXAxis = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  } as AxisModel;
+  readonly primaryYAxis = {
+    labelStyle: {
+      size: '0px'
+    },
+  } as AxisModel;
+  readonly zoomSettings: ZoomSettingsModel = {
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    shared: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: false,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly border = { width: 0 } as BorderModel;
+  readonly marker: MarkerOptionsModel = {
+    visible: true,
+    width: 10,
+    height: 10
+  }
+  users$: Observable<UserInfo[]>;
+  assignable$: Observable<UserInfo[]>;
+  palettes: string[] = this._session.accentPalette;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  data: ProfileInfo;
+  cols = 2;
+  private readonly _destroy = new Subject<void>();
+  /** ctor */
+  constructor(private _sb: PromptService,
+    private _utilityRef: UtilityRef<boolean, ReassignModel, ProfileInfo, string>,
+    private _session: SessionService,
+    private _dialog: MatDialog,
+    private _documentInfo: DocumentInfo,
+    media: MediaObserver,
+    private _chat: ChatInfo,
+    private _guide: GuideService,
+    private _router: PanesRouter,
+    private _slot: PaneRef<ProfilerComponent>,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _fb: FormBuilder) {
+    media.media$.pipe(takeUntil(this._destroy)).subscribe(m => this.cols = m.mqAlias === 'sm' || m.mqAlias === 'xm' ? 1 : 2);
+    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.palettes = _session.accentPalette;
+    });
+  }
+  ngOnInit(): void {
+    this._slot.queryParamsChange.subscribe(p => {
+      const { id } = p;
+      id && this._open(id);
+    });
+    this._slot.resize.pipe(takeUntil(this._destroy)).subscribe(this.resize.bind(this));
+    this.users$ = this.search.valueChanges.pipe(takeUntil(this._destroy),
+      debounceTime(250),
+      filter(v => !isObject(v)),
+      switchMap(v => this._accounts.findAll(v)));
+  }
+  @HostListener('window:keydown.f1', ['$event'])
+  guide(evt?: Event | KeyboardEvent) {
+    const steps: GuideStep[] = [{
+      selector: '[data-help=search]',
+      position: 'Below',
+      content: this._translate.get('ProfilerSearchHelp')
+    }];
+    if (this.data) {
+      steps.push({
+        selector: '[data-help=reassign]',
+        content: this._translate.get('ReassignHelp')
+      });
+      Object.keys(this.data.activity).length &&
+        steps.push({
+          selector: '[data-help=activity]',
+          content: this._translate.get('ActivityHelp')
+        });
+      this.data.pending.length &&
+        steps.push({
+          selector: '[data-help=pending]',
+          content: this._translate.get('PendingHelp')
+        });
+      this.data.positions.length &&
+        steps.push({
+          selector: '[data-help=positions]',
+          content: this._translate.get('PositionsHelp')
+        });
+    }
+    this._guide.start({
+      name: 'profiler',
+      steps
+    });
+    evt && evt.preventDefault();
+  }
+  change(evt: MatAutocompleteSelectedEvent) {
+    const { id } = evt.option.value;
+    this._router.navigate([], { queryParams: { id } });
+  }
+  /**
+   * 
+   * @param userId
+   */
+  private _open(userId: string) {
+    this._utilityRef.populate(userId).subscribe(e => {
+      this.data = e;
+      while (this.chart.series.length) this.chart.removeSeries(0);
+      this.chart.addSeries(this._series());
+    }, () => this._sb.error());
+  }
+  /** */
+  private _series(): SeriesModel[] {
+    return Object.keys(this.data.activity).map(a => {
+      const log = this.data.activity[a];
+      return {
+        type: 'Scatter',
+        name: this._actionName(a),
+        xName: 'time',
+        yName: 'duration',
+        dataSource: log.map(l => {
+          return {
+            id: l.id,
+            time: new Date(l.time),
+            duration: l.duration
+          };
+        })
+      };
+    });
+  }
+
+  private _actionName(name: string): string {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    return action ? action.past || action.title : name;
+  }
+  @HostListener('window:resize')
+  resize() {
+    const { width, height } = getComputedStyle(this.chartElement.nativeElement.parentElement);
+    this.chart.width = width;
+    this.chart.height = height;
+  }
+  pointClick(evt: IPointEventArgs) {
+    const { id } = evt.series.dataSource[evt.pointIndex];
+    this._documentInfo.open(id);
+  }
+  display(item: UserInfo) {
+    return item ? item.name : null;
+  }
+  trace(id: number) {
+    this._router.navigate(['admin', 'utilities', 'document-trace'], {
+      queryParams: { id },
+      policy: OpenPolicy.Defer | OpenPolicy.Pinnable
+    });
+  }
+  chat(userId) {
+    this._chat.open(userId);
+  }
+  reassign(position?: PositionInfo) {
+    this.assignable$ = this._accounts.findAll().pipe(map(u => u.filter(u => u.id !== this.data.info.id)));
+    this._dialog.open(this.assign, {}).afterClosed().
+      subscribe(u =>
+        u && this._reassign(u, position)
+      );
+  }
+  /** */
+  private _reassign(who: string, position?: PositionInfo) {
+    this._utilityRef.execute({ who, ...position, userId: this.data.info.id }).subscribe(() => {
+      this._sb.toast('Assigned');
+      if (position)
+        this.data.positions.remove(position);
+      else
+        this.data.positions = [];
+    }, () =>
+      this._sb.error());
+  }
+  tooltipRender(e: ITooltipRenderEventArgs) {
+    e.text = `${dayjs.duration(e.point.y as number, 's').humanize()}`;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface ProfileInfo {
+  positions: PositionInfo[];
+  activity: {
+    [action: string]: {
+      id: number;
+      /** seconds */
+      duration: number;
+      number: string;
+      time: Date;
+    }[]
+  };
+  pending: {
+    id: number;
+    received: Date;
+    number: string;
+  }[];
+  info: UserInfo;
+}
+interface PositionInfo {
+  type: string;
+  key: string;
+  value: string;
+  role: string;
+}
+interface ReassignModel {
+  userId: string;
+  who: string;
+  role?: string;
+  key?: any;
+}

package/src/lib/admin/utility-ref.ts

@@ -0,0 +1,44 @@
+import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { tap, map, filter, catchError } from 'rxjs/operators';
+import { HubService, JobProgress } from '../core/hub.service';
+import { Utility } from '../core/models';
+import { isObject } from '../core/functions';
+import { PromptService } from '../core/prompt.service';
+
+export class UtilityRef<TResult = any, TResultArgs = any, TModel = any, TModelArgs = any, O = any> {
+  private _jobId: string;
+  get jobId(): string { return this._jobId; }
+  constructor(private _utility: Utility,
+    private _hub: HubService,
+    private _sb: PromptService,
+    private _http: HttpClient) {
+  }
+  public get progress(): Observable<JobProgress> {
+    return this._hub.jobProgress$.pipe(
+      filter(e => e.jobId === this.jobId),
+      map(e => e.event));
+  }
+  execute(args?: TResultArgs): Observable<TResult> {
+    return this._http.post(`/api/utility/${this._utility.name}`, args, { observe: 'response' }).pipe(tap((r: HttpResponse<TResult>) => {
+      this._jobId = r.headers.get('job-id');
+    }), map((r: HttpResponse<TResult>) => r.body), catchError((e: HttpErrorResponse) => {
+      if (e.status === 406) // validation exception
+        this._sb.errorString(e.error);
+      else
+        this._sb.error('NetworkErr');
+      return throwError(e);
+    }));
+  }
+  abort(): Observable<any> {
+    return this._http.delete(`/api/utility/${this.jobId}`, null);
+  }
+  populate(args?: TModelArgs): Observable<TModel> {
+    return this._http.get<TModel>(`/api/utility/${this._utility.name}`, {
+      params: isObject(args) ? args : args !== undefined ? { value: args } as any: undefined,
+    });
+  }
+  get options(): O {
+    return this._utility.options || {};
+  }
+}

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,89 @@
+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 enable-background="new 0 0 334.371 380.563" 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: ''
+})
+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

@@ -0,0 +1,71 @@
+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 } 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';
+
+@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 } = config;
+    registerComponents(components);
+    return {
+      ngModule: BizDocModule,
+      providers: []
+    };
+  }
+  static forRoot(config: BizDocConfig): ModuleWithProviders<BizDocModule> {
+    const { formats, routes, components } = config;
+    registerComponents(components);
+    const providers = [
+      { provide: PANES_DATA, useValue: PANES_CONFIG.concat(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
+    };
+  }
+}

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

@@ -0,0 +1,86 @@
+@mixin browse-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $background: map-get($theme, background);
+  $is-dark-theme: map-get($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;
+    min-height: 15px !important;
+    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;
+    }
+  }
+}