@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/core/layout/autocomplete.field.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable, Subject } from 'rxjs';
+import { debounceTime, switchMap, takeUntil } from 'rxjs/operators';
+import { TypeAutocomplete } from '../controls/auto-complete.input';
+import { DatasourceService } from '../datasource.service';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+ <bizdoc-autocomplete [placeholder]="field.placeholder || field.label || field.name" [formControl]=control
+  [required]="field.required" ></bizdoc-autocomplete>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class AutocompleteField extends FieldBase implements OnInit, OnDestroy {
+    readonly control = new FormControl();
+    @Input() params: any;
+  @ViewChild(TypeAutocomplete) input: TypeAutocomplete;
+    source: Observable<any[]>;
+    private readonly _destroy = new Subject<void>();
+    constructor(private _ds: DatasourceService) {
+        super();
+    }
+    ngOnInit(): void {
+        if (!this.field.options)
+            this.source = this.control.valueChanges.pipe(debounceTime(250), takeUntil(this._destroy),
+              switchMap(v => this._ds.all(this.field.source, v)));
+    }
+  focus() { this.input.focus(); }
+    ngOnDestroy(): void {
+        this._destroy.next();
+        this._destroy.complete();
+    }
+}

package/src/lib/core/layout/checkbox.field.ts

@@ -0,0 +1,21 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<div>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <mat-checkbox [formControl]=control> {{ field.label || field.name }}</mat-checkbox>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</div>`
+})
+/** layout component*/
+export class CheckField extends FieldBase {
+  @ViewChild(MatCheckbox) input: MatCheckbox;
+  readonly control = new FormControl(false);
+  focus() { this.input.focus(); }
+}

package/src/lib/core/layout/checkbox.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  align-items: center;
+
+  * {
+    align-self: center
+  }
+
+  :last-child {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}

package/src/lib/core/layout/checkbox.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+import { ThemePalette } from "@angular/material/core";
+/** */
+@Component({
+  selector: 'bizdoc-checkbox',
+  template: `
+      <div *ngIf="value" class="container">
+        <mat-icon [color]="color">{{icon == 'checkbox' ? 'check_box' : 'toggle_on'}}</mat-icon>
+        <span class="mat-body-1">
+          <ng-content></ng-content>
+        </span>
+      </div>`,
+  styleUrls: ['checkbox.scss']
+})
+export class CheckboxComponent {
+  @Input()
+  value: boolean;
+  @Input() color: ThemePalette;
+  @Input()
+  icon: 'switch' | 'checkbox' = 'checkbox';
+}

package/src/lib/core/layout/date-range.field.ts

@@ -0,0 +1,32 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+<mat-label>{{field.label || field.name}}</mat-label>
+                <mat-date-range-input [formGroup]="control" [rangePicker]="picker"
+  [required]="field.required" [min]="field.min" [max]="field.max">
+                  <input matStartDate formControlName="start" #inp>
+                  <input matEndDate formControlName="end" placeholder="">
+                </mat-date-range-input>
+                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-date-range-picker #picker></mat-date-range-picker>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+</mat-form-field>`
+})
+/** layout component*/
+export class DateRangeField extends FieldBase {
+  @ViewChild('inp') inp: ElementRef<HTMLInputElement>;
+    readonly control = this._fb.group({
+        start: this._fb.control(null),
+        end: this._fb.control(null)
+    });
+    constructor(private _fb: FormBuilder) {
+      super();
+  }
+  focus() {
+    this.inp.nativeElement.focus();
+  }
+}

package/src/lib/core/layout/date.field.ts

@@ -0,0 +1,26 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+ <input matInput [placeholder]="field.placeholder || field.label || field.name" [formControl]=control
+  [required]="field.required" [min]="field.min" [max]="field.max" 
+  [matDatepicker]="picker" />
+                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                <mat-datepicker #picker></mat-datepicker>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class DateField extends FieldBase {
+    readonly control = new FormControl();
+  @ViewChild(MatInput) input: MatInput;
+  focus() { this.input.focus(); }
+}

package/src/lib/core/layout/expression.field.ts

@@ -0,0 +1,26 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { AceInput } from '../../admin/core/ace.input';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+ <bizdoc-ace-input
+ [placeholder]="field.placeholder || field.label || field.name" [formControl]=control
+  [required]="field.required" 
+[params]="params"></bizdoc-ace-input>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class ExpressionField extends FieldBase {
+    readonly control = new FormControl();
+  @ViewChild(AceInput) input: AceInput;
+    @Input() params: any;
+  focus() { this.input.focus(); }
+}

package/src/lib/core/layout/file.field.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FileInput } from '../controls/file.input';
+import { FieldBase } from './input.base';
+
+
+@Component({
+  template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+  <bizdoc-file-upload [formControl]=control [placeholder]="field.placeholder || field.label || field.name"
+  [required]="field.required" [multiple]="multiple"></bizdoc-file-upload>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class FileField extends FieldBase implements OnInit {
+  readonly control = new FormControl();
+  multiple: boolean;
+  @ViewChild(FileInput) input: FileInput;
+  type: string;
+  ngOnInit(): void {
+    this.multiple = this.field.isArray;
+  }
+}

package/src/lib/core/layout/html.field.ts

@@ -0,0 +1,28 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { RichTextEditorComponent, ToolbarSettingsModel, ToolbarType } from '@syncfusion/ej2-angular-richtexteditor';
+import { FieldBase } from './input.base';
+
+
+@Component({
+  template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+  <ejs-richtexteditor [formControl]=control
+  [placeholder]="field.placeholder||field.label || field.name" [maxlength]="field.max"
+  [required]="field.required" ></ejs-richtexteditor>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <mat-hint *ngIf="field.max" align="end">{{control.value?.length || 0}} / {{field.max}}</mat-hint>`
+})
+/** layout component*/
+export class HtmlField extends FieldBase {
+  @ViewChild(RichTextEditorComponent) input: RichTextEditorComponent;
+  readonly toolbarSettings = {
+    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+      '|',
+      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+      'Outdent', 'Indent'],
+    type: ToolbarType.MultiRow
+  } as ToolbarSettingsModel;
+  focus() { this.input.focus(); }
+  readonly control = new FormControl();
+}

package/src/lib/core/layout/input.base.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { FieldInfo } from '../models';
+
+@Directive()
+export
+  abstract class FieldBase {
+  abstract control: AbstractControl;
+  field: FieldInfo;
+  focus() { }
+}
+

package/src/lib/core/layout/input.field.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { FieldType } from '../models';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+  <input matInput [type]="type" autocomplete="off" [formControl]=control [placeholder]="field.placeholder || field.label || field.name"
+  [required]="field.required" [minlength]="field.min" [maxlength]="field.max" [pattern]="field.pattern"/>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class InputField extends FieldBase implements OnInit {
+  readonly control = new FormControl();
+  @ViewChild(MatInput) input: MatInput;
+    type: string;
+    ngOnInit(): void {
+        switch (this.field.type) {
+            case FieldType.EmailAddress:
+                this.type = 'email';
+                break;
+            case FieldType.PhoneNumber:
+                this.type = 'tel';
+                break;
+            case FieldType.Time:
+                this.type = 'time';
+                break;
+            case FieldType.Password:
+                this.type = 'password';
+                break;
+            default:
+                this.type = 'text';
+        }
+  }
+  focus() { this.input.focus();}
+}

package/src/lib/core/layout/layout.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+}
+
+::ng-deep .layout > * {
+  display: contents;
+}

package/src/lib/core/layout/layout.component.ts

@@ -0,0 +1,189 @@
+import { Component, Input, Output, EventEmitter, ViewContainerRef, OnDestroy, ComponentRef, OnChanges, SimpleChanges, ComponentFactoryResolver, AfterViewInit, NgZone, ViewChild, OnInit } from '@angular/core';
+import { FieldInfo, FieldType, ValidationType } from '../models';
+import { FormGroup, AbstractControl, ValidatorFn, Validators } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil, startWith } from 'rxjs/operators';
+import { FieldBase } from './input.base';
+import { CheckField } from "./checkbox.field";
+import { SwitchField } from "./switch.field";
+import { TimespanField } from "./timespan.field";
+import { ExpressionField } from "./expression.field";
+import { SelectField } from "./select.field";
+import { AutocompleteField } from "./autocomplete.field";
+import { DateField } from "./date.field";
+import { DateRangeField } from "./date-range.field";
+import { TextareaField } from "./textarea.field";
+import { NumericField } from "./numeric.field";
+import { InputField } from "./input.field";
+import { HtmlField } from './html.field';
+import { FileField } from './file.field';
+@Component({
+  selector: 'bizdoc-layout',
+  template: '<ng-container #container></ng-container>',
+  styleUrls: ['./layout.component.scss'],
+  host: { class: 'layout' }
+})
+/** layout component*/
+export class LayoutComponent implements OnChanges, AfterViewInit, OnDestroy {
+  @Input() fields: FieldInfo[];
+  @Input() model!: {};
+  @Output() readonly modelChange = new EventEmitter<{}>();
+  @Input() dirty: boolean;
+  @Output() readonly dirtyChange = new EventEmitter<boolean>();
+  @Input() params: any;
+  @Input() valid: boolean;
+  @Output() readonly validChange = new EventEmitter<boolean>();
+  @ViewChild('container', { static: true, read: ViewContainerRef }) containerRef: ViewContainerRef;
+  private _cmpRef: ComponentRef<any>;
+  private readonly _destroy = new Subject<void>();
+  form: FormGroup;
+  private _instance: any;
+  private _children: FieldBase[];
+  /** layout ctor */
+  constructor(
+    private _resolver: ComponentFactoryResolver,
+    private _zone: NgZone) {
+  }
+  ngAfterViewInit(): void {
+    this._children.length && this.focus();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fields'] || changes['template']) {
+      this._cmpRef && this._cmpRef.destroy();
+      this.create();
+    }
+    else if (changes['model']) {
+      this._instance.form.patchValue(this.model, { emitEvent: false });
+    }
+  }
+  create() {
+    this.containerRef.clear();
+    this._children = this.fields.map(f => {
+      let comp;
+      switch (f.type) {
+        case FieldType.Text:
+          comp = TextareaField;
+          break;
+        case FieldType.Html:
+          comp = HtmlField;
+          break;
+        case FieldType.Checkbox:
+          comp = CheckField;
+          break;
+        case FieldType.Switch:
+          comp = SwitchField;
+          break;
+        case FieldType.Date:
+        case FieldType.DateTime:
+          comp = DateField;
+          break;
+        case FieldType.DateRange:
+          comp = DateRangeField;
+          break;
+        case (FieldType.Expression):
+          comp = ExpressionField;
+          break;
+        case (FieldType.Duration):
+          comp = TimespanField;
+          break;
+        case (FieldType.Address):
+          break;
+        case FieldType.Select:
+          comp = SelectField;
+          break;
+        case FieldType.Autocomplete:
+          comp = AutocompleteField;
+          break;
+        case FieldType.File:
+          comp = FileField;
+          break;
+        case FieldType.Number:
+        case FieldType.Currency:
+        case FieldType.Percent:
+          comp = NumericField;
+          break;
+        default:
+          comp = InputField;
+      }
+      const factory = this._resolver.resolveComponentFactory<FieldBase>(comp);
+      const cRef = this.containerRef.createComponent(factory);
+      cRef.instance.field = f;
+      this.params && Object.assign(cRef.instance, this.params);
+      return cRef.instance;
+    });
+
+    const controls = {};
+    this._children.forEach(c => {
+      const { control, field } = c;
+      const value = this.model[field.name] !== undefined ? this.model[field.name] : field.defaultValue;
+      (value !== undefined) && control.setValue(value);
+      controls[field.name] = control;
+      field.validations &&
+        this._validations(field, control);
+    });
+    this.form = new FormGroup(controls);
+    this._bind(this.form);
+  }
+
+  private _validations(field: FieldInfo, control: AbstractControl) {
+    const validators: ValidatorFn[] = [];
+    field.validations.forEach(v => {
+      switch (v.type) {
+        case ValidationType.Required:
+          if (field.type === FieldType.Checkbox || field.type === FieldType.Switch)
+            validators.push(Validators.requiredTrue);
+          else
+            validators.push(Validators.required);
+          break;
+        case ValidationType.Pattern:
+          validators.push(Validators.pattern(field.pattern));
+          break;
+        case ValidationType.Min:
+          validators.push(Validators.min(field.min));
+          break;
+        case ValidationType.Max:
+          validators.push(Validators.max(field.max));
+          break;
+        case ValidationType.MinLength:
+          validators.push(Validators.minLength(field.min));
+          break;
+        case ValidationType.MaxLength:
+          validators.push(Validators.maxLength(field.max));
+          break;
+        case ValidationType.Email:
+          validators.push(Validators.email);
+          break;
+        case ValidationType.Range:
+          validators.push(Validators.min(field.min));
+          validators.push(Validators.max(field.max));
+          break;
+      }
+    });
+    control.setValidators(validators);
+  }
+
+  private _bind(form: FormGroup): any {
+    form.patchValue(this.model);
+    form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(c => {
+      Object.assign(this.model, c);
+      this.modelChange.emit(c);
+    });
+    form.statusChanges.pipe(startWith(), takeUntil(this._destroy)).subscribe(() => {
+      this.dirtyChange.emit(form.dirty);
+      this.valid = form.valid;
+      this.validChange.emit(form.valid);
+    });
+  }
+  focus() {
+    this._children[0].focus();
+    //this._zone.runOutsideAngular(() => {
+    //  const inp = (this.containerRef.element.nativeElement as HTMLElement).querySelectorAll('.mat-select, textarea, input')[0];
+    //  inp && (inp as HTMLInputElement).focus();
+    //})
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._cmpRef && this._cmpRef.destroy();
+  }
+}

package/src/lib/core/layout/numeric.field.ts

@@ -0,0 +1,24 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+  <input matInput autocomplete="off" type="number" [formControl]=control [placeholder]="field.placeholder || field.label || field.name"
+  [required]="field.required" [min]="field.min" [max]="field.max" [pattern]="field.pattern"/>
+  <span matSuffix *ngIf="field.type === 'Percent'">% </span>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class NumericField extends FieldBase {
+  @ViewChild(MatInput) input: MatInput;
+    readonly control = new FormControl();
+  focus() { this.input.focus();}
+}

package/src/lib/core/layout/select.field.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatSelect } from '@angular/material/select';
+import { Observable } from 'rxjs';
+import { TypeSelect } from '../controls/select.input';
+import { DatasourceService } from '../datasource.service';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+ <bizdoc-select *ngIf="!field.options; else options" [type]="field.source"
+  [placeholder]="field.placeholder || field.label || field.name" [formControl]=control
+  [required]="field.required" [multiple]="field.isArray"></bizdoc-select>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>
+<ng-template #options>
+  <mat-select [placeholder]="field.placeholder || field.label || field.name" [formControl]=control
+  [required]="field.required" [multiple]="field.isArray">
+      <mat-option *ngFor="let k of keys" [value]="k">{{field.options[k]}}</mat-option>
+  </mat-select>
+</ng-template>
+`
+})
+/** layout component*/
+export class SelectField extends FieldBase implements OnInit {
+    @Input() params: any;
+    readonly control = new FormControl();
+  @ViewChild(TypeSelect) input: TypeSelect;
+  @ViewChild(MatSelect) input2: MatSelect;
+    source: Observable<any[]>;
+    keys: string[];
+    constructor(private _ds: DatasourceService) {
+        super();
+    }
+    ngOnInit(): void {
+        if (this.field.options)
+            this.keys = Object.keys(this.field.options);
+
+        else
+          this.source = this._ds.all(this.field.source, this.params);
+    }
+  focus() {
+    if (this.input) this.input.focus();
+    else this.input2.focus();
+  }
+
+}

package/src/lib/core/layout/switch.field.ts

@@ -0,0 +1,21 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<div>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <mat-slide-toggle [formControl]=control> {{ field.label || field.name }}</mat-slide-toggle>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</div>`
+})
+/** layout component*/
+export class SwitchField extends FieldBase {
+  @ViewChild(MatSlideToggle) input: MatSlideToggle;
+    readonly control = new FormControl(false);
+  focus() { this.input.focus();}
+}

package/src/lib/core/layout/textarea.field.ts

@@ -0,0 +1,21 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+  <textarea matInput [formControl]=control cdkTextareaAutosize [placeholder]="field.placeholder || field.label || field.name"
+  [required]="field.required" [minlength]="field.min" [maxlength]="field.max" [pattern]="field.pattern"></textarea>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <mat-hint *ngIf="field.max" align="end">{{control.value?.length || 0}} / {{field.max}}</mat-hint>
+</mat-form-field>`
+})
+/** layout component*/
+export class TextareaField extends FieldBase {
+  @ViewChild(MatInput) input: MatInput;
+  focus() { this.input.focus(); }
+    readonly control = new FormControl();
+}

package/src/lib/core/layout/timespan.field.ts

@@ -0,0 +1,25 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { TimespanInput } from '../controls/timespan.input';
+import { FieldBase } from './input.base';
+
+
+@Component({
+    template: `<mat-form-field>
+  <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
+<bizdoc-timespan-input
+[placeholder]="field.placeholder || field.label || field.name" [formControl]=control
+  [required]="field.required"></bizdoc-timespan-input>
+                <mat-icon matSuffix>timer</mat-icon>
+  <mat-hint *ngIf="field.hint"> {{ field.hint }}</mat-hint>
+  <ng-container>
+    <mat-error *ngFor="let v of field.validations" [style.display]="control.hasError(v.type) ? '': 'none'"> {{ v.message }} </mat-error>
+  </ng-container>
+</mat-form-field>`
+})
+/** layout component*/
+export class TimespanField extends FieldBase {
+  @ViewChild(TimespanInput) input: TimespanInput;
+    readonly control = new FormControl();
+  focus() { this.input.focus(); }
+}