@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/core/configuration.ts

@@ -0,0 +1,95 @@
+import { InjectionToken, Type } from '@angular/core';
+import { Observable } from 'rxjs';
+
+export const BIZDOC_CONFIG = new InjectionToken<BizDocConfig>('bizdoc');
+
+export interface PaneRoute {
+  path: string;
+  guide?: string;
+  component?: Type<any>;
+  resolve?: { [key: string]: Type<PaneResolve<any>> };
+  canDismiss?: Type<CanDismiss<any>>;
+  icon?: string;
+  help?: string;
+  children?: PaneRoute[];
+  policy?: OpenPolicy;
+}
+
+export type ParamMap = { [key: string]: any };
+
+export interface PaneResolve<T> {
+  onResolve(params: ParamMap, queryParams?: ParamMap): Observable<T> | Promise<T> | T;
+}
+export interface CanDismiss<T> {
+  onDismiss(component: T): boolean | Promise<boolean> | Observable<boolean>;
+}
+
+export enum OpenPolicy {
+  Replace = 1 << 0,
+  Clear = 1 << 1,
+  Tab = 1 << 2,
+  Pinnable = 1 << 3,
+  Scope = 1 << 4,
+  Defer = 1 << 5,
+  Expandable = 1 << 6,
+  Preserve = 1 << 7,
+  Dialog = 1 << 8
+}
+
+export const DEFAULT_POLICY = OpenPolicy.Replace | OpenPolicy.Pinnable;
+
+export interface BizDocChildConfig {
+  components: Type<any>[];
+}
+/** BizDoc app options */
+export interface BizDocConfig {
+  baseUrl?: string;
+  currencyCode?: string;
+  /** available user interface languages */
+  languages?: string[];
+  appTitle?: string;
+  firebase?: FirebaseSettings;
+  chating?: ChatSettings | boolean;
+  comments?: CommentsSettings;
+  maps?: GoogleMapsSettings | boolean;
+  formats?: FormatsSettings;
+  routes?: PaneRoute[];
+  components: Type<any>[];
+}
+export interface FormatsSettings {
+  date?: string;
+  dateTime?: string;
+  fractionDigits?: number;
+}
+export interface CommentsSettings {
+  preserveDraft?: boolean;
+  voting?: boolean;
+}
+export interface ChatSettings {
+  preserveDraft?: boolean;
+  app?: string | ChatLauncherFn;
+}
+export declare interface ChatLauncherFn {
+  (identity: string): void;
+}
+
+export interface FirebaseSettings {
+  apiKey: string;
+  vapidKey?: string;
+  projectId: string;
+  senderId: string;
+  appId: string;
+  /** millisecondes before user is prompt to approve receiving messages */
+  grace?: number;
+}
+export interface GoogleMapsSettings {
+  apiKey: string;
+}
+
+export interface configuration { }
+
+export interface SharedConfig {
+  maps?: GoogleMapsSettings | boolean;
+  formats?: FormatsSettings;
+  routing?: 'ng' | 'pane'
+}

package/src/lib/core/controls/_daterange-theme.scss

@@ -0,0 +1,16 @@
+@mixin daterange-theme($theme) {
+  $primary: map-get($theme, primary);
+
+  .mat-daterange-content {
+    .date-start-range .mat-calendar-body-cell-content,
+    .date-end-range .mat-calendar-body-cell-content {
+      background-color: mat-color($primary);
+      color: mat-color($primary, default-contrast);
+    }
+
+    .date-in-range .mat-calendar-body-cell-content {
+      background-color: mat-color($primary, 200);
+      color: mat-color($primary, default-contrast);
+    }
+  }
+}

package/src/lib/core/controls/address.input.ts

@@ -0,0 +1,158 @@
+import { Component, Input, OnDestroy, HostBinding, Optional, Self, OnInit, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { NgControl, ControlValueAccessor, FormControl, Validators } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { isObject } from '../functions';
+const DEBOUNCE_TIME = 250;
+@Component({
+  selector: 'bizdoc-address',
+  providers: [{ provide: MatFormFieldControl, useExisting: AddressInput }],
+  template: `<div class="address-container">
+    <input matInput [matAutocomplete]="address" [formControl]="control" [placeholder]="placeholder" #input
+      (focus)="onFocus()" (blur)="onBlur()"/>
+    <mat-autocomplete #address (optionSelected)="selected($event)" [displayWith]="displayFn">
+      <mat-option *ngFor="let a of _addresses" [value]="a">
+        <span matLine>{{a.description}}</span>
+      </mat-option>
+    </mat-autocomplete></div>`,
+  styles: ['.address-container {display: flex}'],
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[attr.aria-describedby]': 'describedBy'
+  }
+})
+export
+  class AddressInput implements MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, OnInit {
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _value?: string;
+  private _onChange: any;
+  private _onTouched: any;
+  _addresses: google.maps.places.QueryAutocompletePrediction[];
+  readonly control = new FormControl();
+  readonly stateChanges = new Subject<void>();
+  @HostBinding() readonly id = `address-input-${AddressInput.nextId++}`;
+  @ViewChild('input', { static: true }) inputElement: ElementRef;
+  @Output() readonly optionSelected = new EventEmitter<AddressChangeEvent>();
+  @Input() debounce = DEBOUNCE_TIME;
+  @Input() get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  focused = false;
+  get empty(): boolean { return !this.control.value; }
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required() {
+    return this._required;
+  }
+  set required(req) {
+    this._required = req;
+    if (req)
+      this.control.setValidators(Validators.required);
+    else
+      this.control.clearValidators();
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = value || (value as any) === '';
+    if (this.control.disabled !== this._disabled) {
+      if (value)
+        this.control.disable();
+      else
+        this.control.enable();
+    }
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'bizdoc-address-input';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(): void {
+    this.inputElement.nativeElement.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.control.setValue(val ? { description: val } : null);
+      this.stateChanges.next();
+  }
+  onFocus() {
+    this.focused = true;
+    this._onTouched();
+  }
+  onBlur() {
+    this.focused = false;
+  }
+  displayFn(address: google.maps.places.QueryAutocompletePrediction) {
+    return isObject(address) ? address.description : address;
+  }
+  selected(e: MatAutocompleteSelectedEvent) {
+    const address = e.option.value as google.maps.places.QueryAutocompletePrediction;
+    this._onChange(address.description);
+    this.optionSelected.emit({ address: address.description, placeId: address.place_id });
+  }
+  private readonly _destroy = new Subject<void>();
+  constructor(@Optional() @Self() public ngControl: NgControl, private _fm: FocusMonitor, private _elRef: ElementRef<HTMLElement>) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+    _fm.monitor(_elRef.nativeElement, true).subscribe(origin => {
+      this.focused = !!origin;
+      this.stateChanges.next();
+    });
+  }
+  public focus() {
+    this.inputElement.nativeElement.focus();
+  }
+  ngOnInit(): void {
+    const service = new google.maps.places.AutocompleteService();
+    this.control.valueChanges.pipe(debounceTime(this.debounce), takeUntil(this._destroy)).subscribe(input => {
+      service.getQueryPredictions({ input }, (r, s) => {
+        if (s === google.maps.places.PlacesServiceStatus.OK)
+          this._addresses = r;
+        else
+          console.log(`address google api error code: ${s}`)
+      });
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._fm.stopMonitoring(this._elRef.nativeElement);
+    this.stateChanges.complete();
+  }
+}
+export interface AddressChangeEvent {
+  address: string;
+  placeId: string;
+}

package/src/lib/core/controls/auto-complete.input.ts

@@ -0,0 +1,218 @@
+import { Component, Input, OnDestroy, HostBinding, Optional, Self, OnInit, ElementRef, Output, EventEmitter, ViewChild, DoCheck } from '@angular/core';
+import { NgControl, ControlValueAccessor, FormControl, Validators } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, Observable } from 'rxjs';
+import { debounceTime, takeUntil, switchMap, filter } from 'rxjs/operators';
+import { SessionService } from '../session.service';
+import { DatasourceService } from '../datasource.service';
+import { Type, FieldInfo } from '../models';
+import { isObject, isString } from '../functions';
+@Component({
+  selector: 'bizdoc-autocomplete',
+  providers: [{ provide: MatFormFieldControl, useExisting: TypeAutocomplete }],
+  template: `<input matInput [matAutocomplete]="auto" [placeholder]="placeholder" [formControl]="_control" #input
+    (focus)="_onFocus()" (blur)="_onBlur()" [required]="required"/>
+    <mat-autocomplete #auto (optionSelected)="_optionSelected($event)" [displayWith]='displayFn'>
+      <mat-option *ngFor="let v of _items$ | async" [value]="v">
+        <span *ngIf="!_column">{{v.value}}</span>
+        <span *ngIf="_column">{{v.value[_column.name]}}</span>
+      </mat-option>
+    </mat-autocomplete>
+    <button mat-icon-button matSuffix (click)="clear()" *ngIf="_control.value"><mat-icon>close</mat-icon></button>`,
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[attr.aria-describedby]': 'describedBy'
+  },
+  styles: ['[matsuffix].mat-icon-button { opacity: .54 }']
+})
+export
+  class TypeAutocomplete implements MatFormFieldControl<string>, DoCheck, ControlValueAccessor, OnDestroy, OnInit {
+  focus() {
+    this.inputElement.nativeElement.focus();
+  }
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _value?: string;
+  private _onChange: any;
+  private _onTouched: any;
+  readonly _control = new FormControl();
+  readonly stateChanges = new Subject<void>();
+  _items$: Observable<KeyValue[]>;
+  _column: FieldInfo;
+  private _configuration: Type;
+  @ViewChild('input', { static: true }) inputElement: ElementRef;
+  @ViewChild('input', { static: true, read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
+  @HostBinding() readonly id = `type-auto-complete-${TypeAutocomplete.nextId++}`;
+  @Input('type') _type!: string;
+  private _textFormControl: FormControl;
+  @Input() get placeholder(): string {
+    return this._placeholder;
+  }
+  set placeholder(plh: string) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  @Input() text: string;
+  @Output() readonly textChange = new EventEmitter<string>();
+  @Output() readonly optionSelected = new EventEmitter<AutocompleteSelectedEvent>();
+  displayFn = (item: { value: any }) => {
+    if (!item)
+      return undefined;
+    if (!isObject(item.value))
+      return item.value;
+    else {
+      let name = Object.keys(item.value)[0];
+      return item.value[name];
+    }
+  }
+  _optionSelected(e: MatAutocompleteSelectedEvent) {
+    const { value, key } = e.option.value as KeyValue || {};
+    const text = this._column ? value[this._column.name] : value;
+    this._value = key;
+    this._textFormControl && this._textFormControl.setValue(text, { emitEvent: false });
+    this.textChange.emit(text);
+    this.optionSelected.emit({ value: key, text });
+    this._onChange && this._onChange(key);
+  }
+  focused = false;
+  get empty(): boolean { return !this._control.value || this._control.value === ''; }
+  @HostBinding('class.floating')
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required(): boolean {
+    return this._required;
+  }
+  set required(req: boolean) {
+    this._required = coerceBooleanProperty(req);
+    if (this._required)
+      this._control.setValidators(Validators.required);
+    else
+      this._control.clearValidators();
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+    if (this._control.disabled !== this._disabled) {
+      if (this._disabled)
+        this._control.disable();
+      else
+        this._control.enable();
+    }
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'bizdoc-type-auto-complete';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(): void {
+    this.inputElement.nativeElement.focus();
+    this.trigger.openPanel();
+  }
+  clear() {
+    this._setValue(null, true);
+    this._onChange && this._onChange(null);
+  }
+  writeValue(obj: any): void {
+    this._setValue(obj, false);
+  }
+  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._setValue(val, true);
+    this.stateChanges.next();
+  }
+  private _minimumChars = 1;
+  @Input() set minimumChars(val: number) { this._minimumChars = val; }
+  private _setValue(val: string, emitEvent: boolean) {
+    this._value = val;
+    //if (val)
+    //this.service.get(this.source, val).subscribe(v => {
+    //});
+    this._control.setValue(val ? { key: val, value: this.text || val } : val, { emitEvent });
+  }
+  ngDoCheck(): void {
+    if (this.ngControl) {
+      this.errorState = this.ngControl.invalid && this.ngControl.touched;
+      this.stateChanges.next();
+    }
+  }
+
+  _onFocus() {
+    this.focused = true;
+    this._onTouched && this._onTouched();
+  }
+  _onBlur() {
+    this.focused = false;
+  }
+  @Input() set textFormControlName(val: string) {
+    this._textFormControl = ((this.ngControl.control as FormControl).parent).controls[val] as FormControl;
+  }
+  @Input() set textFormControl(val: FormControl) {
+    this._textFormControl = val;
+  }
+  private readonly _destroy = new Subject<void>();
+  constructor(@Optional() @Self() public ngControl: NgControl, private _fm: FocusMonitor, private _elRef: ElementRef<HTMLElement>, private _session: SessionService, private _service: DatasourceService) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+    _fm.monitor(_elRef.nativeElement, true).subscribe(origin => {
+      this.focused = !!origin;
+      this.stateChanges.next();
+    });
+  }
+  ngOnInit(): void {
+    this._configuration = this._session.profile.types.find(t => t.name === this._type);
+    if (!this._configuration)
+      throw `${this._type} is not a known type.`;
+    this._column = this._configuration.columns ? this._configuration.columns.find(c => !c.key) : null;
+    this._items$ = this._control.valueChanges.pipe(
+      takeUntil(this._destroy),
+      debounceTime(250),
+      filter(v => isString(v) && v.length > this._minimumChars),
+      switchMap(v =>
+        this._service.all(this._type, v)));
+    this._control.statusChanges.pipe(takeUntil(this._destroy)).subscribe(() => {
+      this.errorState = this._control.errors != null;
+    });
+    const val = this.value;
+    if (val)
+      this._service.get(this._type, val).subscribe(v =>
+        this._control.setValue({ key: val, value: v || val }, { emitEvent: false }));
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._fm.stopMonitoring(this._elRef.nativeElement);
+    this.stateChanges.complete();
+    this.textChange.complete();
+    this.optionSelected.complete();
+  }
+}
+interface KeyValue { key: any, value: any }
+
+export interface AutocompleteSelectedEvent {
+  readonly text: string;
+  readonly value: any;
+}

package/src/lib/core/controls/combination-picker-body.html

@@ -0,0 +1,34 @@
+<div [ngSwitch]="mode" class="account-picker-popup" cdkTrapFocus>
+  <!--[@transformPanel]="enter"-->
+  <ng-container *ngSwitchCase="'filter'">
+    <mat-progress-bar mode="indeterminate" [style.visibility]="_working ? 'visible':'hidden'"></mat-progress-bar>
+    <!-- filter -->
+    <form [formGroup]="_form">
+      <mat-form-field *ngFor="let a of _axes; let i = index">
+        <mat-label>{{a.title}}</mat-label>
+        <mat-select [formControlName]="a.name">
+          <mat-option *ngIf="_keys[a.name].length>1">{{'All'|translate}}</mat-option>
+          <mat-option *ngFor="let key of _keys[a.name]" [value]="key">{{_values[a.dataType][key]}}</mat-option>
+        </mat-select>
+        <mat-hint>{{_form.controls[a.name].value}}</mat-hint>
+      </mat-form-field>
+    </form>
+    <div class="actions">
+      <button mat-icon-button (click)="_filter()" [disabled]="_working" [matTooltip]="'Search'|translate" class="mat-icon-rtl-mirror" [tabIndex]="_axes.length">
+        <mat-icon>search</mat-icon>
+      </button>
+    </div>
+  </ng-container>
+  <!-- results -->
+  <ng-container *ngSwitchCase="'results'">
+    <div class="actions">
+      <button mat-icon-button (click)="_switchMode('filter')" [matTooltip]="'Filter'|translate"><mat-icon>filter_list</mat-icon></button>
+    </div>
+    <mat-action-list>
+      <mat-list-item *ngFor="let codes of _combinations" (click)="_select(codes)">
+        <h3 matLine>{{_nameOf(codes)}}</h3>
+        <p matLine *ngIf="_explorable"><a (click)="_info(codes, $event)">{{_codeOf(codes)}}</a></p>
+      </mat-list-item>
+    </mat-action-list>
+  </ng-container>
+</div>

package/src/lib/core/controls/combination-picker-body.scss

@@ -0,0 +1,40 @@
+.account-picker-popup {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  form {
+    padding: 8px;
+    flex-flow: column wrap;
+    box-sizing: border-box;
+    display: flex;
+
+    > * {
+      flex: 1 1 100%;
+      box-sizing: border-box;
+      max-width: 50%;
+      padding: 0px 5px 5px 0px;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    place-content: center flex-end;
+    align-items: center;
+    padding: 8px;
+  }
+
+  ::ng-deep .mat-list-base {
+    overflow: auto;
+
+    .mat-list-item .mat-line:nth-child(n+2) {
+      font-size: 14px;
+    }
+  }
+}
+@media screen and (min-width: 600px) {
+  .account-picker-popup form {
+    flex-flow: row wrap;
+  }
+}