@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/compose/form.component.ts

@@ -0,0 +1,401 @@
+import { Injector, OnDestroy, ElementRef, ViewContainerRef, Component, ViewChild, OnChanges, SimpleChanges, Input, EventEmitter, Output, OnInit } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Subject, Observable, of, from, filter } from 'rxjs';
+import { debounceTime, takeUntil, tap, switchMap, startWith, map } from 'rxjs/operators';
+import { isBoolean, isPromise, queryParams } from '../core/functions';
+import { RecipientModel, Form, Action } from '../core/models';
+import { FormComponent, ViewMode } from '../core/base';
+import { SessionService } from '../core/session.service';
+import { MailboxService, ItemExtra, DOCUMENT_MODEL } from '../core/mailbox.service';
+import { PromptService } from '../core/prompt.service';
+import { HubService } from '../core/hub.service';
+import { GuideService } from '../core/guide/guide.service';
+import { AccountService } from '../core/account.service';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { FormRef, SaveEventArgs } from './form-ref';
+import { AttachmentsComponent } from './attachments/attachments.component';
+import { TagsComponent } from './tag/tags.component';
+import { Popup } from '../core/popup/popup.service';
+import { RouterImpl } from "../core/router";
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '../core/translate.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ActionDialog, ActionDialogData } from './action/action.dialog';
+
+/** save draft ms */
+export const AUTO_SAVE_DELAY = 5000;
+
+@Component({
+  selector: 'bizdoc-form',
+  templateUrl: './form.component.html',
+  host: {
+    class: 'form-container bizdoc-compose'
+  }
+})
+export class ComposeFormComponent implements OnDestroy, OnInit, OnChanges {
+  @Input() model: RecipientModel<any>;
+  @Output() modelChange = new EventEmitter<RecipientModel<any>>();
+  form: Form;
+  @Input()
+  working = false;
+  @Output() readonly workingChange = new EventEmitter<boolean>();
+  @Input()
+  dirty = false;
+  @Output() readonly dirtyChange = new EventEmitter<boolean>();
+  @Input()
+  valid = false;
+  @Output() readonly validChange = new EventEmitter<boolean>();
+  @Input() mode: ViewMode;
+  @Input() contacts = true;
+  actions: Action[] = [];
+  page: string | number;
+  help: string;
+  @ViewChild('file', { static: true }) _fileElement: ElementRef<HTMLInputElement>;
+  @ViewChild(AttachmentsComponent, { static: true }) attachments: AttachmentsComponent;
+  @ViewChild('component', { read: ViewContainerRef, static: true }) _container: ViewContainerRef;
+  private _formRef: FormRef;
+  private _instance: FormComponent<any>;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _popup: Popup,
+    private _mailbox: MailboxService,
+    private _accounts: AccountService,
+    private _router: RouterImpl,
+    private _dialog: MatDialog,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _injector: Injector,
+    private _snackbar: MatSnackBar,
+    private _cf: BizDocComponentFactoryResolver,
+    private _guide: GuideService,
+    private _translate: TranslateService,
+    private _messaging: HubService
+  ) {
+  }
+  ngOnInit(): void {
+    this._fileElement.nativeElement.addEventListener('change', this._fileChangeListener.bind(this));
+    this._messaging.update$.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.model.id === this.model.id) {
+        (e.userId !== this._session.userId) &&
+          this._accounts.get(e.userId).subscribe(u =>
+            this._snackbar.open(this._translate.get('MailVersionUpdate', this.model.number, u.name),
+              this._translate.get('OK'), {
+              direction: this._session.direction,
+            }).onAction().subscribe(() => {
+              this._assign(e.model);
+              this._reset();
+            })
+          );
+      }
+    });
+    this._mailbox.changed.pipe(takeUntil(this._destroy), filter(e=> e.id === this.model.id)).subscribe(e => {
+      !this.working &&
+        this._assign(e);
+    });
+  }
+  ngOnChanges(_changes: SimpleChanges): void {
+    this._formRef && this._formRef._destroy();
+    this.form = this._session.profile.forms.find(f => f.name === this.model.formId);
+    this.help = this.form.guide;
+    if (!this.form.template)
+      throw (`Form '${this.form.name}' model missing '[Template()]' attribute.`);
+    const factory = this._cf.resolve(this.form.template);
+    this._formRef = new FormRef(this._router);
+    this._formRef._navigating.
+      subscribe(p => this.page = p);
+    this._formRef._stateChange.pipe(startWith()).
+      subscribe(() => this.help = this._formRef.help);
+    const injector = Injector.create([
+      {
+        provide: FormRef, useValue: this._formRef
+      }, {
+        provide: DOCUMENT_MODEL, useValue: this.model
+      }
+    ], this._injector
+    );
+    this._container.clear();
+    const componentRef = this._container.createComponent(factory, 0, injector);
+
+    this._instance = componentRef.instance as FormComponent<any>;
+    this._formRef._mode = this._instance.mode = this.mode;
+    this._instance.form.statusChanges.pipe(takeUntil(this._destroy)).subscribe(() => {
+      const { dirty, valid } = this._instance.form;
+      this.dirty = dirty;
+      this.dirtyChange.emit(dirty);
+      this.valid = valid;
+      this.validChange.emit(valid);
+    });
+    this.model.draft && this._instance.form.valueChanges.pipe(takeUntil(this._destroy),
+      debounceTime(AUTO_SAVE_DELAY)).subscribe(() => !this.working && this.dirty &&
+        this.save(false).subscribe());
+    this._reset();
+  }
+  private _fileChangeListener(ev: Event) {
+    const { files } = ev.srcElement as HTMLInputElement,
+      arr: File[] = [];
+    if (files && files.length) {
+      for (let i = 0; i < files.length; i++)
+        arr.push(files[i]);
+      this.upload(arr).subscribe(() => {
+        this._fileElement.nativeElement.value = null;
+        this.attachments.ngOnChanges();
+      });
+    }
+  }
+  private _applyChanges() {
+    Object.deepAssign(this.model.model, this._instance.form.value);
+  }
+  navigate(page: any) {
+    const pagen = parseInt(page);
+    this._formRef._navigating.next(isNaN(pagen) ? page : pagen);
+  }
+  private _getActionAdjective(name: string): string {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    return (action.adjective || action.past || action.title).toLowerCase();
+  }
+  private _save(feedback: boolean): Observable<boolean> {
+    this.working = true;
+    this.workingChange.emit(true);
+    const { id, version, formId, model, draft } = this.model;
+    return this._mailbox.save(id, version, formId, model).pipe(
+      tap(m => {
+        this._assign(m);
+        this._reset();
+        feedback &&
+          this._sb.toast(draft ? 'DraftSaved' : 'ChangesSaved');
+        this.working = false;
+        this.workingChange.emit(false);
+      }, e => {
+        feedback &&
+          this._handleError(e, 'SaveErr');
+        this.working = false;
+        this.workingChange.emit(false);
+      }), map(() => true));
+  }
+  upload(files: File[]): Observable<any> {
+    const exists = this.model.attachments.find(a => a.fileName === files[0].name && !a.deleted && !(a as any).failed);
+    this.working = true;
+    this.workingChange.emit(true);
+    return this._mailbox.upload(this.model, files).
+      pipe(tap(m => {
+        files.length === 1 ? this._sb.toast(
+          !exists ? 'UploadOk' : 'UploadVersionOk', files[0].name) :
+          this._sb.toast('UploadMany', files.length);
+        this._assign(m);
+        this._reset();
+        this.working = false;
+        this.workingChange.emit(false);
+      }, e => {
+        if (files.length === 1)
+          this._handleError(e, 'UploadFailed', files[0].name);
+
+        else
+          this._handleError(e, 'UploadFailed');
+        this.working = false;
+        this.workingChange.emit(false);
+      }));
+  }
+  tag(evt: MouseEvent) {
+    this._popup.open(TagsComponent, (evt.currentTarget as HTMLElement), {
+      data: this.model
+    })
+  }
+  private _reset() {
+    this._instance.onBind(this.model);
+    this._instance.form.patchValue(this.model.model, { emitEvent: false });
+    !this._instance.form.pristine && this._instance.form.markAsPristine();
+    this.valid = this._instance.form.valid;
+    this.validChange.emit(this.valid);
+    this.dirty = false;
+    this.dirtyChange.emit(this.dirty);
+    this.actions = this._session.profile.actions.filter(a => this.model.actions.indexOf(a.name) > -1).
+      sort(this._sortActions);
+  }
+  private _sortActions(a: Action, b: Action) {
+    if (a.group && b.group && a.group !== b.group)
+      return a.group < b.group ? -1 : 1;
+    return 0;
+  }
+
+  guide(name: string) {
+    this._guide.start(name);
+  }
+  attach() {
+    const elem = this._fileElement.nativeElement as HTMLInputElement;
+    elem.click();
+  }
+  /**
+   *
+   * @param feedback
+   */
+  save(feedback = true): Observable<boolean> {
+    this._applyChanges();
+    const saveArgs = { cancel: false } as SaveEventArgs;
+    this._formRef._saving.next(saveArgs);
+    if (saveArgs.cancel)
+      return of(false);
+    if (this._instance.onSave) {
+      const result = this._instance.onSave();
+      if (isBoolean(result)) {
+        if (!result) {
+          feedback && this._sb.toast('ValidateErr');
+          return of(false);
+        }
+      }
+      else if (isPromise(result))
+        return from(result).pipe(switchMap(() => this._save(feedback)));
+      else
+        return (result as Observable<boolean>).pipe(switchMap(() => this._save(feedback)));
+    }
+    return this._save(feedback);
+  }
+  flag() {
+    const extra = this.model as ItemExtra, { flag } = this.model;
+    extra.working = true;
+    this.working = true;
+    this._mailbox.flag(this.model.id, !flag).subscribe(() => {
+      this.model.flag = !flag;
+      extra.working = false;
+    }, () => {
+      extra.working = false;
+      this.working = false;
+    });
+  }
+  submit() {
+    this._applyChanges();
+    const { id, version, formId, model, number } = this.model;
+    this.working = true;
+    this.workingChange.emit(true);
+    return this._mailbox.submit(id, version, formId, model).
+      pipe(tap(() => {
+        this._sb.toast('Submitted', number);
+        this.working = false;
+        this.workingChange.emit(false);
+      }, e => {
+        this.working = false;
+        this.workingChange.emit(false);
+        this._handleError(e, 'SubmitErr');
+      }));
+  }
+  back() {
+    this._formRef.navigate();
+  }
+  discard() {
+    return new Observable(observe => {
+      this._sb.ask('DiscardAsk', 'Discard', {
+        color: 'warn', ok: 'Discard'
+      }).subscribe(ok => {
+        if (ok) {
+          this.workingChange.emit(true);
+          this._mailbox.delete(this.model.id).
+            subscribe(() => {
+              observe.next();
+              observe.complete();
+              this.workingChange.emit(false);
+            },
+              e => {
+                this.working = false;
+                this.workingChange.emit(false);
+                this._handleError(e, 'NetworkErr');
+                observe.error();
+                observe.complete();
+              });
+        }
+        else {
+          observe.complete();
+        }
+      });
+    });
+  }
+  send(action: string) {
+    return new Observable(observe => {
+      this._dialog.open(ActionDialog, {
+        data: {
+          action,
+          item: this.model
+        } as ActionDialogData,
+        closeOnNavigation: true
+      }).afterClosed().subscribe(args => {
+        if (args) {
+          this._applyChanges();
+          const params = queryParams(args);
+          this.working = true;
+          this.workingChange.emit(true);
+          const { id, version, number, model, formId } = this.model;
+          return this._mailbox.send(id, version, formId, model, action, params).
+            subscribe(() => {
+              this._sb.toast('Sent', number, this._getActionAdjective(action));
+              this.working = false;
+              this.workingChange.emit(false);
+              observe.next();
+              observe.complete();
+            }, e => {
+              this.working = false;
+              this.workingChange.emit(false);
+              this._handleError(e, 'SendErr');
+              observe.error();
+              observe.complete();
+            });
+        }
+        else {
+          observe.error();
+          observe.complete();
+        }
+      })
+    });
+  }
+  copy() {
+    return this._mailbox.copy(this.model.id).subscribe(i => {
+      this._sb.toast('Copied', i.number || this.form.title);
+      this._router.navigate(['mailbox/i', i.id.encodeId()], {
+        state: { item: i }
+      });
+    }, () => this._sb.error());
+  }
+  /**
+   *
+   * @param response
+   * @param item
+   * @param message resource
+   * @param args
+   */
+  private _handleError(response: HttpErrorResponse | any, message: string, ...args: string[]) {
+    if (response.constructor.name === 'PositionError')
+      switch (response.code) {
+        case 1:
+          this._sb.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._sb.error('GeoErr');
+      }
+    else
+      switch (response.status) {
+        case 401:
+          break;
+        case 409: // version change
+          {
+            const obj = response.error /* serialized model */ as RecipientModel<any>;
+            this._assign(obj);
+            this._reset();
+            this._sb.error('VersionErr', this.model.number);
+            break;
+          }
+        case 406: // validation exception
+          this._sb.errorString(response.error);
+          break;
+        default:
+          this._sb.error(message, ...args);
+      }
+  }
+  private _assign(model: RecipientModel) {
+    Object.assign(this.model, model, {
+      model: Object.deepAssign(this.model.model, model.model) // preserve object ref
+    });
+    this.modelChange.emit(this.model);
+    this._formRef._modelChange.next(this.model);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/maps/maps.component.html

@@ -0,0 +1,3 @@
+<div>
+  <button *ngFor="let l of locations" mat-icon-button (click)='open(l)'><mat-icon>map</mat-icon></button>
+</div>

package/src/lib/compose/maps/maps.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DocumentModel, LatLng } from '../../core/models';
+import { MapInfo } from '../../core/info/map-info';
+
+@Component({
+  selector: 'bizdoc-maps',
+  templateUrl: './maps.component.html'
+})
+/** */
+export class DocumentMapPinsComponent implements OnInit {
+  @Input()
+  item: DocumentModel;
+  locations: LatLng[];
+  constructor(private _info: MapInfo) {
+  }
+  ngOnInit(): void {
+    this.locations = [...this.item.locations.map(l => l.location), ...this.item.events.filter(e => e.location).map(e => e.location)]
+  }
+  open(location: LatLng) {
+    this._info.open(location);
+  }
+}

package/src/lib/compose/new-menu.component.html

@@ -0,0 +1,29 @@
+<mat-progress-bar mode="indeterminate" [style.visibility]="working ? 'visible':'hidden'"></mat-progress-bar>
+<div class="container">
+  <span class="mat-subheader">BizDoc</span>
+  <h1 class="mat-display-1">{{'New'|translate}}</h1>
+
+  <mat-nav-list>
+    <mat-list-item *ngFor="let f of forms" (click)="create(f.name)" [attr.data-help]="f.name + '-form'">
+      <mat-icon matListIcon>{{f.icon}}</mat-icon>
+      <span matLine>{{f.title}}</span>
+    </mat-list-item>
+  </mat-nav-list>
+
+  <!--<hr />
+
+  <form>
+    <mat-form-field floatLabel="never" data-help="copy">
+      <input matInput type="search" [placeholder]="'Copy'|translate" [formControl]="search" autocomplete="off" />
+      <mat-icon class="mat-icon-rtl-mirror" matSuffix aria-disabled="true">search</mat-icon>
+    </mat-form-field>
+    <ul class="mat-body-2">
+      <li *ngFor="let i of items | async" (click)="copy(i)">
+        <a>
+          {{i.number}}
+          <ng-container *ngIf="i.subject">&nbsp;{{i.subject}}</ng-container>
+        </a>
+      </li>
+    </ul>
+  </form>-->
+</div>

package/src/lib/compose/new-menu.component.scss

@@ -0,0 +1,11 @@
+h1 {
+  margin: 0 16px;
+}
+
+form {
+  padding: 8px;
+}
+
+hr {
+  opacity: .4;
+}

package/src/lib/compose/new-menu.component.ts

@@ -0,0 +1,106 @@
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { combineLatest, Observable, Subject, timer } from 'rxjs';
+import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { Form, HeaderModel, RecipientModel } from '../core/models';
+import { PromptService } from '../core/prompt.service';
+import { SessionService } from '../core/session.service';
+import { PanesRouter } from '../core/slots/router.service';
+import { OpenPolicy } from '../core/configuration';
+import { MailboxService } from '../core/mailbox.service';
+
+const DEBOUNCE_SEARCH_TIME = 200;
+@Component({
+  selector: 'bizdoc-new-menu',
+  templateUrl: './new-menu.component.html',
+  styleUrls: ['./new-menu.component.scss'],
+  animations: []
+})
+export class ComposeMenuComponent implements OnInit, OnDestroy {
+  @Output() readonly change = new EventEmitter();
+  forms: Form[];
+  readonly search = new FormControl();
+  items: Observable<HeaderModel[]>;
+  private readonly _destroy = new Subject<void>();
+  private readonly _working = new Subject<boolean>();
+  working: boolean;
+  constructor(private _session: SessionService,
+    private _mailbox: MailboxService,
+    private _ps: PromptService,
+    private _router: PanesRouter) { }
+  ngOnInit(): void {
+    this.forms = this._session.profile.forms.filter(f => f.creatable);
+    this.items = this.search.valueChanges.pipe(takeUntil(this._destroy),
+      debounceTime(DEBOUNCE_SEARCH_TIME),
+      switchMap(v => this._mailbox.findAll(v ? { contains: v } : { type: 'recent' }, { take: 5 })));
+    this._working.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(v => this.working = v);
+  }
+  clear() { this.search.setValue(null) }
+  create(form: string) {
+    this._working.next(true);
+    this._mailbox.create(form).subscribe(i => {
+      this._nav(i);
+      this._working.next(false)
+    }, e => {
+      this._working.next(false)
+      this._error(e);
+    });
+  }
+  copy(item: HeaderModel) {
+    this._working.next(true);
+    this.search.disable();
+    this._mailbox.copy(item.id).
+      subscribe(i => {
+        this.search.setValue(null);
+        this.search.enable();
+        this._working.next(false);
+        this._ps.toast('Copied', i.number);
+        this._nav(i);
+      }, e => {
+        this._working.next(false);
+        this.search.enable();
+        this._error(e);
+      });
+  }
+  private _nav(item: RecipientModel<any>) {
+    this.change.emit(item);
+    this._router.navigate(['mailbox/i', item.id.encodeId()],
+      {
+        policy: OpenPolicy.Clear,
+        state: { item }
+      });
+  }
+  /**
+   * Handle http error response
+   * @param e
+   */
+  private _error(e: any | PositionError) {
+    if (e.constructor.name === 'PositionError')
+      switch ((e as PositionError).code) {
+        case 1:
+          this._ps.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._ps.error('GeoErr');
+      }
+    else switch ((e as any).status) {
+      case 406: // server ValidationException thrown
+        const message = (e as any).error;
+        this._ps.errorString(message);
+        break;
+      default:
+        this._ps.error();
+    }
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface PositionError {
+  readonly code: number;
+  readonly message: string;
+  readonly PERMISSION_DENIED: number;
+  readonly POSITION_UNAVAILABLE: number;
+  readonly TIMEOUT: number;
+}

package/src/lib/compose/privilage.directive.ts

@@ -0,0 +1,43 @@
+import { ElementRef, Directive, OnInit, Input, Self, Inject } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { DOCUMENT_MODEL } from '../core/mailbox.service';
+import { DocumentModel } from '../core/models';
+
+export abstract class PrivilegeDirectiveBase {
+  private readonly _map = this._model.rules;
+
+  constructor(private _model: DocumentModel<any>) {
+  }
+  protected can(name): boolean {
+    return !this._map || this._map[name] === false;
+  }
+}
+
+@Directive({
+  selector: '[bizdocHidden]'
+})
+export class PrivilegeHiddenDirective extends PrivilegeDirectiveBase implements OnInit {
+  @Input('bizdocHidden') name: string;
+  constructor(@Inject(DOCUMENT_MODEL) model: DocumentModel<any>,
+    private _element: ElementRef) {
+    super(model);
+  }
+  ngOnInit(): void {
+    if (!this.can(this.name))
+      this._element.nativeElement.style.display = 'none';
+  }
+}
+@Directive({
+  selector: '[bizdocDisabled]'
+})
+export class PrivilegeDisabledDirective extends PrivilegeDirectiveBase implements OnInit {
+  @Input('bizdocDisabled') name: string;
+  constructor(@Inject(DOCUMENT_MODEL) model: DocumentModel<any>,
+    @Self() public ngControl: NgControl) {
+    super(model);
+  }
+  ngOnInit(): void {
+    if (!this.can(this.name) && this.ngControl)
+      this.ngControl.control.disable();
+  }
+}

package/src/lib/compose/recipient-resolver.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { RecipientModel } from "../core/models";
+import { MailboxService } from "../core/mailbox.service";
+import { ParamMap, PaneResolve } from "../core/configuration";
+
+
+@Injectable()
+export class RecipientResolver implements PaneResolve<RecipientModel<any>> {
+    constructor(private _mailbox: MailboxService) { }
+    onResolve(params: ParamMap): Observable<RecipientModel<any>> {
+      const id = (params['id'] as string).decodeId();
+      return this._mailbox.get(id);
+    }
+}

package/src/lib/compose/save-changes.dialog.html

@@ -0,0 +1,13 @@
+  <h2 mat-dialog-title>
+      {{'SaveChanges' | translate}}
+  </h2>
+  <mat-dialog-content>
+    <p class="mat-body">
+      {{'SaveChangesAsk' | translate}}
+    </p>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]=true color="primary" cdkFocusInitial>{{'Save'|translate}}</button>
+    <button mat-button [mat-dialog-close]="false">{{'ContinueEditing'|translate}}</button>
+    <button mat-button mat-dialog-close>{{'DiscardChanges'|translate}}</button>
+  </mat-dialog-actions>

package/src/lib/compose/save-changes.dialog.ts

@@ -0,0 +1,10 @@
+import { Component, OnInit } from "@angular/core";
+import { playAudio } from "../core/functions";
+
+@Component({ templateUrl: './save-changes.dialog.html' })
+export class SaveChangesDialog implements OnInit {
+  ngOnInit(): void {
+    playAudio('alert_error-03');
+  }
+
+}

package/src/lib/compose/state.component.ts

@@ -0,0 +1,29 @@
+import { OnChanges, SimpleChanges, Input, Directive, ElementRef } from '@angular/core';
+import { State } from '../core/models';
+import { SessionService } from '../core/session.service';
+
+@Directive({ selector: 'bizdoc-status' }) export class StateDirective implements OnChanges {
+  @Input() stateId: string;
+  private static _map = new Map<string, State>();
+  constructor(session: SessionService,
+    private _element: ElementRef<HTMLDivElement>) {
+    if (!StateDirective._map.size)
+      session.profile.states.forEach(s => StateDirective._map.set(s.name, s));
+  }
+  ngOnChanges(_: SimpleChanges): void {
+    const state = StateDirective._map.get(this.stateId);
+    if (state) {
+      const el = this._element.nativeElement;
+      el.className = 'document-state';
+      el.innerText = state.title;
+      if (state.backgroundColor) {
+        el.style.backgroundColor = el.style.borderColor = state.backgroundColor;
+        if (state.color) el.style.color = state.color;
+      }
+      else if (state.color)
+        el.style.color = el.style.borderColor = state.color;
+    }
+    else
+      this._element.nativeElement.innerText = this.stateId;
+  }
+}