@bizdoc/core 1.8.8 → 1.8.9

package/LICENSE.md

@@ -0,0 +1 @@
+© All rights reserved to Moding Ltd. (IL)

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/core'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/core",
+  "assets": [ "./assets" ],
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "lottie-web": "lottie",
+      "@syncfusion/ej2-angular-spreadsheet": "ej2spreadsheet",
+      "@syncfusion/ej2-angular-diagrams": "ej2diagrams",
+      "@syncfusion/ej2-angular-charts": "ej2charts",
+      "@syncfusion/ej2-angular-schedule": "ej2schedule",
+      "@syncfusion/ej2-angular-kanban": "ej2kanban",
+      "@syncfusion/ej2-angular-circulargauge'": "ej2circulargauge",
+      "@syncfusion/ej2-angular-richtexteditor": "ej2richtexteditor",
+      "@syncfusion/ej2-angular-pivotview": "ej2pivotview",
+      "@syncfusion/ej2-angular-grids": "ej2grids",
+      "@syncfusion/ej2-angular-gantt": "ej2angulargantt",
+      "@syncfusion/ej2-spreadsheet": "ej2spreadsheet1",
+      "@syncfusion/ej2-diagrams": "ej2diagrams1",
+      "@syncfusion/ej2-charts": "ej2charts1",
+      "@syncfusion/ej2-schedule": "ej2schedule1",
+      "@syncfusion/ej2-kanban": "ej2kanban1",
+      "@syncfusion/ej2-circulargauge": "ej2circulargauge1",
+      "@syncfusion/ej2-richtexteditor": "ej2richtexteditor1",
+      "@syncfusion/ej2-pivotview": "ej2pivotview1",
+      "@syncfusion/ej2-grids": "ej2grids1",
+      "@syncfusion/ej2-angular-circulargauge": "ej2angularcirculargauge",
+      "xlsx": "xlsx",
+      "moment": "moment",
+      "ngx-moment": "ngxmoment",
+      "@ctrl/ngx-emoji-mart": "ngxemojimart"
+    }
+  },
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}

package/package.json

@@ -1,71 +1,81 @@
-{
-  "name": "@bizdoc/core",
-  "version": "1.8.8",
-  "author": "Moding Ltd.",
-  "homepage": "https://github.com/moding-il/bizdoc.core",
-  "license": "https://github.com/moding-il/bizdoc.core/blob/master/License.md",
-  "private": false,
-  "repository": {
-    "private": true
-  },
-  "dependencies": {
-    "@ctrl/ngx-emoji-mart": "^6.0.1",
-    "@microsoft/signalr": "^5.0.11",
-    "@syncfusion/ej2": "^19.3.45",
-    "@syncfusion/ej2-angular-charts": "^19.3.45",
-    "@syncfusion/ej2-angular-circulargauge": "^19.3.44",
-    "@syncfusion/ej2-angular-diagrams": "^19.3.45",
-    "@syncfusion/ej2-angular-gantt": "^19.3.45",
-    "@syncfusion/ej2-angular-grids": "^19.3.45",
-    "@syncfusion/ej2-angular-kanban": "^19.3.45",
-    "@syncfusion/ej2-angular-layouts": "^19.3.44",
-    "@syncfusion/ej2-angular-lineargauge": "^19.3.43",
-    "@syncfusion/ej2-angular-pivotview": "^19.3.44",
-    "@syncfusion/ej2-angular-richtexteditor": "^19.3.45",
-    "@syncfusion/ej2-angular-schedule": "^19.3.44",
-    "@syncfusion/ej2-angular-spreadsheet": "^19.3.45",
-    "@syncfusion/ej2-base": "^19.3.43",
-    "@teamhive/lottie-player": "^1.0.0",
-    "ajv": "^8.6.3",
-    "brace": "^0.11.1",
-    "cookie": "^0.4.1",
-    "firebase": "^9.1.2",
-    "hammerjs": "~2",
-    "lottie-web": "^5.7.14",
-    "moment": "^2.29.1",
-    "ngx-cookie-service": "^12.0.3",
-    "ngx-moment": "^5.0.0",
-    "xlsx": "^0.17.2",
-    "zone.js": "^0.11.4",
-    "tslib": "^2.2.0"
-  },
-  "peerDependencies": {
-    "@angular/animations": "^12.2.9",
-    "@angular/cdk": "^12.2.9",
-    "@angular/common": "^12.2.9",
-    "@angular/compiler": "^12.2.9",
-    "@angular/core": "^12.2.9",
-    "@angular/flex-layout": "^12.0.0-beta.35",
-    "@angular/forms": "^12.2.9",
-    "@angular/material": "^12.2.9",
-    "@angular/material-moment-adapter": "^12.2.9",
-    "@angular/platform-browser": "^12.2.9",
-    "@angular/platform-browser-dynamic": "^12.2.9",
-    "@angular/platform-server": "^12.2.9",
-    "@angular/router": "^12.2.9",
-    "rxjs": "7.3.0"
-  },
-  "assets": [
-    "src/assets"
-  ],
-  "optionalDependencies": {
-    "fsevents": "^2.3.2"
-  },
-  "main": "bundles/bizdoc-core.umd.js",
-  "module": "fesm2015/bizdoc-core.js",
-  "es2015": "fesm2015/bizdoc-core.js",
-  "esm2015": "esm2015/bizdoc-core.js",
-  "fesm2015": "fesm2015/bizdoc-core.js",
-  "typings": "bizdoc-core.d.ts",
-  "sideEffects": false
-}
+{
+  "name": "@bizdoc/core",
+  "version": "1.8.9",
+  "author": "Moding Ltd.",
+  "homepage": "https://github.com/moding-il/bizdoc.core",
+  "license": "https://github.com/moding-il/bizdoc.core/blob/master/License.md",
+  "private": false,
+  "repository": {
+    "private": true
+  },
+  "scripts": {
+    "ng": "ng",
+    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",
+    "build": "ng build",
+    "build-prod": "npm run ng-high-memory build -- --configuration=production",
+    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
+    "ng-high-memory": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "dist": "cd dist/core && npm publish"
+  },
+  "devDependencies": {
+    "@types/googlemaps": "^3.43.3",
+    "@types/jasmine": "^3.9.1",
+    "@types/jasminewd2": "^2.0.10",
+    "@types/node": "^16.10.4"
+  },
+  "dependencies": {
+    "@ctrl/ngx-emoji-mart": "^6.0.1",
+    "@microsoft/signalr": "^5.0.11",
+    "@syncfusion/ej2": "^19.3.45",
+    "@syncfusion/ej2-angular-charts": "^19.3.45",
+    "@syncfusion/ej2-angular-circulargauge": "^19.3.44",
+    "@syncfusion/ej2-angular-diagrams": "^19.3.45",
+    "@syncfusion/ej2-angular-gantt": "^19.3.45",
+    "@syncfusion/ej2-angular-grids": "^19.3.45",
+    "@syncfusion/ej2-angular-kanban": "^19.3.45",
+    "@syncfusion/ej2-angular-layouts": "^19.3.44",
+    "@syncfusion/ej2-angular-lineargauge": "^19.3.43",
+    "@syncfusion/ej2-angular-pivotview": "^19.3.44",
+    "@syncfusion/ej2-angular-richtexteditor": "^19.3.45",
+    "@syncfusion/ej2-angular-schedule": "^19.3.44",
+    "@syncfusion/ej2-angular-spreadsheet": "^19.3.45",
+    "@syncfusion/ej2-base": "^19.3.43",
+    "@teamhive/lottie-player": "^1.0.0",
+    "ajv": "^8.6.3",
+    "brace": "^0.11.1",
+    "cookie": "^0.4.1",
+    "firebase": "^9.1.2",
+    "hammerjs": "~2",
+    "lottie-web": "^5.7.14",
+    "moment": "^2.29.1",
+    "ngx-cookie-service": "^12.0.3",
+    "ngx-moment": "^5.0.0",
+    "xlsx": "^0.17.2",
+    "zone.js": "^0.11.4"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^12.2.9",
+    "@angular/cdk": "^12.2.9",
+    "@angular/common": "^12.2.9",
+    "@angular/compiler": "^12.2.9",
+    "@angular/core": "^12.2.9",
+    "@angular/flex-layout": "^12.0.0-beta.35",
+    "@angular/forms": "^12.2.9",
+    "@angular/material": "^12.2.9",
+    "@angular/material-moment-adapter": "^12.2.9",
+    "@angular/platform-browser": "^12.2.9",
+    "@angular/platform-browser-dynamic": "^12.2.9",
+    "@angular/platform-server": "^12.2.9",
+    "@angular/router": "^12.2.9",
+    "rxjs": "7.3.0"
+  },
+  "assets": [
+    "src/assets"
+  ],
+  "optionalDependencies": {
+    "fsevents": "^2.3.2"
+  }
+}

package/src/lib/admin/admin-dismiss.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { CanDismiss } from "../core/configuration";
+import { PromptService } from "../core/prompt.service";
+
+
+@Injectable()
+export class AdminDismiss implements CanDismiss<AdminComponent> {
+    constructor(private _sb: PromptService) {
+    }
+  onDismiss(component: AdminComponent): Promise<boolean> | boolean {
+        if (component.dirty)
+          return this._sb.ask('SaveChangesAsk', 'SaveChanges', { i18n: true, color: 'primary', ok: 'Save', cancel: 'DiscardChanges' }).
+            toPromise().
+            then(ok => ok ? component.save().then(() => true) : true
+            );
+        else
+            return true;
+    }
+
+}
+export interface AdminComponent {
+  save(): Promise<any>;
+  dirty: boolean;
+}

package/src/lib/admin/admin-menu.component.html

@@ -0,0 +1,18 @@
+<!--<span class="mat-subheader">BizDoc</span>
+<h1 class="mat-display-1">{{'System'|translate}}</h1>-->
+
+<mat-nav-list>
+  <h3 matSubheader *ngIf="!collapsed">{{'Workflow'|translate}}</h3>
+    <mat-list-item *ngFor="let f of profile.forms" [slotRouterLink]='["admin/forms", f.name]' slotRouterLinkActive="active">
+      <mat-icon matListIcon [bizdocTooltip]="f.title" [bizdocTooltipDisabled]="!collapsed">{{f.icon}}</mat-icon>
+      <span matLine>{{f.title}}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <h3 matSubheader *ngIf="!collapsed">{{'Utilities'|translate}}</h3>
+
+    <mat-list-item *ngFor="let u of profile.utilities" [slotRouterLink]='["admin/utilities", u.name]' slotRouterLinkActive="active">
+      <mat-icon matListIcon [bizdocTooltip]="u.title" [bizdocTooltipDisabled]="!collapsed">{{u.icon || 'build'}}</mat-icon>
+      <span matLine>{{u.title}}</span>
+    </mat-list-item>
+</mat-nav-list>

package/src/lib/admin/admin-menu.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Profile } from '../core/models';
+import { SessionService } from '../core/session.service';
+
+@Component({
+  selector: 'bizdoc-admin-menu',
+  templateUrl: './admin-menu.component.html'
+})
+export class AdminMenuComponent implements OnInit {
+  @Input() collapsed: boolean;
+  profile: Profile;
+
+  constructor(session: SessionService) {
+    this.profile = session.profile;
+  }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/admin/core/ace.input.ts

@@ -0,0 +1,133 @@
+import { Component, Input, OnDestroy, HostBinding, Optional, Self, OnInit, ElementRef } from '@angular/core';
+import { NgControl, ControlValueAccessor } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import * as brace from 'brace';
+import 'brace/mode/javascript';
+import 'brace/theme/github';
+import 'brace/ext/language_tools';
+@Component({
+  selector: 'bizdoc-ace-input',
+  providers: [{ provide: MatFormFieldControl, useExisting: AceInput }],
+  template: `<div></div>`,
+  styles: [':host ::ng-deep textarea {position: unset}',
+    ':host ::ng-deep .ace_scrollbar.ace_scrollbar-h {height: 5px !important}',
+    ':host ::ng-deep .ace_editor {min-height: 50px;}']
+})
+export
+  class AceInput implements MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, OnInit {
+  focus() {
+  this._editor.focus();
+  }
+
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _value?: string;
+  private _onChange: any;
+  private _onTouched: any;
+  private _editor: brace.Editor;
+  readonly stateChanges = new Subject<void>();
+  @HostBinding() id = `ace-input-${AceInput.nextId++}`;
+  @Input() params: any;
+  @Input() get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  focused = false;
+  get empty(): boolean { return this._value === ''; }
+  @HostBinding('class.floating')
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required() {
+    return this._required;
+  }
+  set required(req) {
+    this._required = req;
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = value;
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'bizdoc-ace-input';
+  autofilled?: boolean;
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(): void {
+    this.focus();
+  }
+  writeValue(obj: any): void {
+    this.value = obj;
+  }
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+  @Input() get value(): string {
+    return this._value;
+  }
+  set value(val: string) {
+    this._value = val;
+    this.stateChanges.next();
+  }
+  constructor(@Optional() @Self() public ngControl: NgControl, private _el: ElementRef,
+    private _http: HttpClient) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+  ngOnInit(): void {
+    this._editor = brace.edit(this._el.nativeElement.firstChild);
+    this._editor.getSession().setMode('ace/mode/javascript');
+    this._editor.setTheme('ace/theme/github');
+    this._editor.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true
+    });
+    this._editor.setValue(this._value || '');
+    const rules = this._http.get<{ [name: string]: Rule }>(`api/form/rules`, { params: this.params });
+    this._editor.addEventListener('change', () => {
+      const val = this._editor.getValue();
+      this._value = val;
+      this._onChange(val);
+    });
+    this._editor.addEventListener('focus', () => {
+      this.focused = true;
+      this._onTouched();
+    });
+    this._editor.addEventListener('blur', () => this.focused = false);
+    brace.acequire("ace/ext/language_tools").addCompleter({
+      getCompletions: (_editor, _session, _pos, _prefix, callback) => {
+        rules.subscribe(r =>
+          callback(null, Object.keys(r).map(n => {
+            return { name: n, value: n, score: 1, meta: 'BizDoc' };
+          })));
+      }
+    });
+  }
+  ngOnDestroy(): void {
+    this.stateChanges.complete();
+  }
+}
+interface Rule {
+  title: string;
+}

package/src/lib/admin/core/color-picker.input.scss

@@ -0,0 +1,17 @@
+.color-palette {
+  display: flex;
+  flex-direction: column;
+}
+
+.color-palette .color-container {
+  display: flex;
+}
+
+button {
+  width: 100%;
+}
+
+.color-item {
+  width: 20px;
+  height: 20px;
+}

package/src/lib/admin/core/color-picker.input.ts

@@ -0,0 +1,175 @@
+import { Component, OnDestroy, ViewContainerRef, TemplateRef, ViewChild, Self, Optional, ElementRef, HostBinding, Input, Output } from "@angular/core";
+import { MatFormFieldControl } from "@angular/material/form-field";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+import { OverlayRef, Overlay } from "@angular/cdk/overlay";
+import { merge, Subject } from "rxjs";
+import { filter } from "rxjs/operators";
+import { ESCAPE } from "@angular/cdk/keycodes";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { MatButton } from "@angular/material/button";
+import { MATERIAL_PALETTES } from "../../core/colors";
+import { Directionality } from "@angular/cdk/bidi";
+//[style.background-color]='value'
+@Component({
+  selector: 'mat-color-picker',
+  providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }],
+  template: `<button mat-button (click)='open()'>
+<span>{{label}}</span>
+      <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+<ng-template>
+  <div class="color-palette">
+    <div *ngFor='let p of Object.keys(_palettes)' class="color-container">
+      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class="color-item"></span>
+    </div>
+  </div>
+</ng-template>`,
+  styleUrls: ['./color-picker.input.scss'],
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[id]': 'id',
+    '[attr.aria-describedby]': 'describedBy'
+  }
+})
+export class ColorPicker implements MatFormFieldControl<string>, ControlValueAccessor, OnDestroy {
+  private static nextId = 0;
+  readonly _palettes = MATERIAL_PALETTES;
+  @Input() label: string;
+  scales = ["50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900"];
+  colors = ["red",
+    "pink",
+    "purple",
+    "deepPurple",
+    "indigo",
+    "blue",
+    "lightBlue",
+    "cyan",
+    "teal",
+    "green",
+    "lightGreen",
+    "lime",
+    "yellow",
+    "amber",
+    "orange",
+    "brown",
+    "grey",
+    "blueGrey"];
+
+  readonly Object = Object;
+  private _onChange: any;
+  private _onTouched: any;
+  private _required = false;
+  private _disabled = false;
+  private _opened = false;
+  private _value: string;
+  writeValue(obj: any): void {
+    this._value = obj;
+  }
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+  get value(): string { return this._value; }
+  set value(val: string) {
+    this._value = val;
+    this._onChange && this._onChange(val);
+    this.valueChanges.next(val);
+    this.stateChanges.next();
+  }
+  readonly stateChanges = new Subject<void>();
+  @Output()
+  readonly valueChanges = new Subject<string>();
+  @HostBinding() id = `color-picker-${ColorPicker.nextId++}`;
+  placeholder: string;
+  focused = false;
+  get empty(): boolean {
+    return this._value === null;
+  }
+  @HostBinding('class.floating')
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required() {
+    return this._required;
+  }
+  set required(req) {
+    this._required = req;
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._trigger.disabled = this._disabled = value;
+    this.stateChanges.next();
+  }
+  errorState = false;
+  @HostBinding('attr.aria-describedby') describedBy = '';
+  setDescribedByIds(ids: string[]): void {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(_event: MouseEvent): void {
+    this._onTouched && this._onTouched();
+    !this._opened && this.open();
+  }
+  @ViewChild(MatButton, { static: true }) _trigger: MatButton;
+  @ViewChild(TemplateRef, { static: true }) _colorPalette: TemplateRef<any>;
+  ngOnDestroy(): void {
+    this._destroy.next();
+  }
+  private _overlayRef: OverlayRef;
+  private readonly _destroy = new Subject<void>();
+  constructor(@Optional() @Self() public ngControl: NgControl, private _overlay: Overlay, private _vc: ViewContainerRef, private _element: ElementRef, private _dir: Directionality) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+  open() {
+    if (!this._overlayRef) this._overlayRef = this._createOverlay();
+    const portal = new TemplatePortal(this._colorPalette, this._vc);
+    this._overlayRef.attach(portal);
+    this._opened = true;
+  }
+  close() {
+    this._overlayRef.detach();
+    this._opened = false;
+  }
+  _pick(color: string) {
+    this.value = color;
+    this.close();
+  }
+  private _createOverlay(): OverlayRef {
+    const ref = this._overlay.create({
+      positionStrategy: this._overlay.position().flexibleConnectedTo(this._element).withPositions([{
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top'
+      }, {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom'
+      }]),
+      direction: this._dir.value,
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop'
+    });
+    merge(ref.backdropClick(), ref.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).subscribe(() => this.close());
+    return ref;
+  }
+}

package/src/lib/admin/core/search.input.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output } from "@angular/core";
+import { FormControl } from "@angular/forms";
+
+@Component({
+  selector: 'bizdoc-search-input',
+  template: `<input matInput [formControl]=_search autocomplete="off" #searchInput />
+  <mat-icon class="mat-icon-rtl-mirror" (click)="searchInput.focus()">search</mat-icon>`,
+  styles: [`input {width: 0px;
+    text-align: end;
+    transition: all 0.2s ease-in-out;}`,
+    `input:focus {width: 200px}`]
+})
+export
+  class SearchInput implements OnInit, OnDestroy {
+  @Output()
+  readonly valueChange = new EventEmitter<string>();
+  readonly _search = new FormControl(null);
+  constructor() {
+  }
+  ngOnInit(): void {
+    this._search.valueChanges.subscribe(v =>
+      this.valueChange.emit(v));
+  }
+  @HostListener('keydown.escape')
+  _leave() {
+    this._search.setValue(null);
+    (document.activeElement as HTMLInputElement).blur();
+  }
+  ngOnDestroy(): void {
+    this.valueChange.complete();
+  }
+}