@bizdoc/core 1.14.9 → 1.14.10

package/src/lib/core/controls/combination-picker.ts

@@ -1,243 +0,0 @@
-import { Component, ViewContainerRef, ElementRef, Input, EventEmitter, Output, Optional, OnDestroy, HostBinding, Self, OnInit, DoCheck, Injector } from "@angular/core";
-import { ControlValueAccessor, NgControl } from "@angular/forms";
-import { Overlay, OverlayRef } from "@angular/cdk/overlay";
-import { ComponentPortal } from "@angular/cdk/portal";
-import { MatFormField, MatFormFieldControl } from "@angular/material/form-field";
-import { MatDialog, MatDialogRef } from "@angular/material/dialog";
-import { FocusMonitor } from "@angular/cdk/a11y";
-import { Directionality } from "@angular/cdk/bidi";
-import { coerceNumberProperty, coerceBooleanProperty } from "@angular/cdk/coercion";
-import { UP_ARROW, ESCAPE, DOWN_ARROW } from "@angular/cdk/keycodes";
-import { merge, Subject } from "rxjs";
-import { filter, tap } from "rxjs/operators";
-import { ACCOUNT_DELIMITER } from "../../cube/cube.service";
-import { CombinationBodyData, CombinationPickerBody, CombinationSelectedEvent, COMBINATION_PICKER_BODY, ExploreSettings } from "./combination-picker-body";
-
-const RECORDS_LIMIT = 50;
-
-@Component({
-  selector: 'bizdoc-combination-picker',
-  templateUrl: 'combination-picker.html',
-  styleUrls: ['combination-picker.scss'],
-  providers: [{ provide: MatFormFieldControl, useExisting: CombinationPicker }],
-  host: {
-    '[class.floating]': 'shouldLabelFloat',
-    '[attr.aria-describedby]': 'describedBy'
-  }
-})
-export class CombinationPicker implements MatFormFieldControl<string>, ControlValueAccessor, OnInit, DoCheck, OnDestroy {
-  private static nextId = 0;
-  private _placeholder: string;
-  private _required = false;
-  private _disabled = false;
-  private _onChange = (_: any) => { };
-  private _onTouched = () => { };
-  private _value: string;
-  private _opened = false;
-  private _limit: number = RECORDS_LIMIT;
-  private _overlayRef: OverlayRef;
-  private _portal: ComponentPortal<CombinationPickerBody>;
-  private _dialogRef: MatDialogRef<CombinationPickerBody>;
-  readonly stateChanges = new Subject<void>();
-  @Input('divider') _divider: string = ACCOUNT_DELIMITER;
-  @Input('displayDivider') _displayDivider: string;
-  @Input() set limit(val: number) { this._limit = coerceNumberProperty(val); }
-  get limit(): number { return this._limit; }
-  @Input() cube: string;
-  @Input() exploreSettings?: ExploreSettings;
-  @Output()
-  readonly optionSelected = new EventEmitter<CombinationSelectedEvent>();
-  private _description: string = null;
-  @Input() set description(val: string) { this._description = val; }
-  get description(): string { return this._description || ''; }
-  @Output()
-  readonly descriptionChange = new EventEmitter<string>();
-  @HostBinding() readonly id = `account-picker-${CombinationPicker.nextId++}`;
-  @Input() touchUi: boolean;
-  @Input() get placeholder() {
-    return this._placeholder;
-  }
-  set placeholder(plh) {
-    this._placeholder = plh;
-    this.stateChanges.next();
-  }
-  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 = coerceBooleanProperty(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 = 'account-picker-input';
-  @HostBinding('attr.aria-describedby') describedBy = '';
-  setDescribedByIds(ids: string[]) {
-    this.describedBy = ids.join(' ');
-  }
-  onContainerClick(evt: MouseEvent): void {
-    if ((evt.target as Element).tagName !== 'INPUT') {
-    }
-    this._open();
-  }
-  open(evt: Event) {
-    this._open();
-    evt.stopPropagation();
-  }
-  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 | null {
-    return this._value;
-  }
-  set value(value: string | null) {
-    this._value = value;
-    this.stateChanges.next();
-  }
-  private readonly _destroy = new Subject<void>();
-  constructor(@Optional() @Self() public ngControl: NgControl, @Optional() private _formField: MatFormField,
-    private _overlay: Overlay, private _dialog: MatDialog,
-    private _vc: ViewContainerRef,
-    private _injector: Injector,
-    private _fm: FocusMonitor,
-    private _elementRef: ElementRef,
-    private _dir: Directionality) {
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-    _fm.monitor(_elementRef.nativeElement, true).subscribe(origin => {
-      if (this.focused && !origin) {
-        this._onTouched();
-      }
-      this.focused = !!origin;
-      this.stateChanges.next();
-    });
-  }
-  ngOnInit(): void {
-  }
-  ngDoCheck(): void {
-    if (this.ngControl) {
-      this.errorState = this.ngControl.invalid && this.ngControl.touched;
-      this.stateChanges.next();
-    }
-  }
-  _keyDown(evt: KeyboardEvent) {
-    if (evt.altKey && evt.keyCode === DOWN_ARROW)
-      this._open();
-    else if (evt.keyCode)
-      return;
-    evt.preventDefault();
-  }
-  private _open() {
-    if (this._opened) return;
-    this._onTouched();
-    const data = {
-      divider: this._divider,
-      displayDivider: this._displayDivider,
-      limit: this._limit,
-      value: this._value,
-      cube: this.cube,
-      exploreSettings: this.exploreSettings
-    } as CombinationBodyData;
-    if (this.touchUi) {
-      this._dialogRef = this._dialog.open(CombinationPickerBody, {
-        direction: this._dir.value,
-        data,
-        maxHeight: '90vh'
-      });
-      this._attach(this._dialogRef.componentInstance);
-    }
-    else {
-      if (!this._overlayRef) {
-        this._overlayRef = this._createOverlayRef();
-        const injector = Injector.create([{
-          provide: COMBINATION_PICKER_BODY, useValue: data
-        }], this._injector
-        );
-        this._portal = new ComponentPortal(CombinationPickerBody, this._vc, injector);
-      }
-      else
-        this._reposition();
-      const componentRef = this._overlayRef.attach(this._portal);
-      this._attach(componentRef.instance);
-      this._opened = true;
-    }
-  }
-  private _attach(body: CombinationPickerBody) {
-    body.modeChange.
-      subscribe(() => setTimeout(() => this._reposition(), 0));
-    body.selectionChange.
-      subscribe(e => {
-        const { value, description } = e;
-        this.value = value;
-        this.description = description;
-        this.descriptionChange.emit(description);
-        this._onChange(this.value);
-        this.close();
-        this.optionSelected.emit(e);
-      });
-  }
-  private _reposition() {
-    const el = this._getConnectedOverlayOrigin();
-    this._overlayRef.updateSize({ minWidth: `${el.nativeElement.getBoundingClientRect().width}px` });
-  }
-  private _createOverlayRef(): OverlayRef {
-    const el = this._getConnectedOverlayOrigin();
-    const overlayRef = this._overlay.create({
-      positionStrategy: this._overlay.position().flexibleConnectedTo(el).
-        withViewportMargin(8).
-        withFlexibleDimensions().
-        withPositions([{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }]),
-      hasBackdrop: true,
-      direction: this._dir.value,
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      minWidth: `${el.nativeElement.getBoundingClientRect().width}px`,
-      panelClass: 'home-panel'
-    });
-    merge(overlayRef.backdropClick(), overlayRef.keydownEvents().
-      pipe(filter(e => e.keyCode === ESCAPE || (e.keyCode === UP_ARROW && e.altKey)),
-        tap(e => e.stopPropagation()))).
-      subscribe(() => this.close());
-    return overlayRef;
-  }
-  private _getConnectedOverlayOrigin(): ElementRef {
-    return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
-  }
-  close() {
-    if (this._overlayRef) this._overlayRef.detach();
-    else this._dialogRef.close();
-    this._opened = false;
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-    this._destroy.complete();
-    this._fm.stopMonitoring(this._elementRef.nativeElement);
-    this.optionSelected.complete();
-    this.descriptionChange.complete();
-    this.stateChanges.complete();
-  }
-}

package/src/lib/core/controls/combination-pool.html

@@ -1,10 +0,0 @@
-<form [formGroup]="form">
-  <mat-form-field *ngFor="let a of _axes" [appearance]="appearance">
-    <mat-label>{{a.title}}</mat-label>
-    <mat-select [formControlName]="a.name">
-      <mat-option *ngIf="form.controls[a.name].value">{{'Dashes'|translate:('Clear'|translate)}}</mat-option>
-      <mat-option *ngFor="let key of _keys[a.dataType]" [value]="key">{{_values[a.dataType][key]}}</mat-option>
-    </mat-select>
-    <mat-hint>{{form.controls[a.name].value}}</mat-hint>
-  </mat-form-field>
-</form>

package/src/lib/core/controls/combination-pool.scss

@@ -1,35 +0,0 @@
-:host {
-  -ms-flex: 1 1 auto;
-  -webkit-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-form {
-  flex-flow: row wrap;
-  box-sizing: border-box;
-  display: flex;
-  padding: 0 !important;
-
-  > * {
-    flex: 1 1 auto;
-    box-sizing: border-box;
-    width: 50%;
-    padding: 0px 5px 0px 0px;
-  }
-}
-
-[dir=rtl] form {
-  > * {
-    padding: 0px 0px 5px 0px;
-  }
-}
-
-@media(max-width: 599px) {
-  form {
-    flex-flow: column;
-
-    > * {
-      width: unset;
-    }
-  }
-}

package/src/lib/core/controls/combination-pool.ts

@@ -1,92 +0,0 @@
-import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from "@angular/core";
-import { debounceTime, takeUntil, tap } from "rxjs/operators";
-import { FormBuilder, Validators, FormGroup } from "@angular/forms";
-import { SessionService } from "../session.service";
-import { CubeService } from "../../cube/cube.service";
-import { CubeAxis, Cube } from "../models";
-import { Subject, Observable } from "rxjs";
-import { MatFormFieldAppearance } from "@angular/material/form-field";
-@Component({
-  selector: 'bizdoc-combination-pool',
-  templateUrl: 'combination-pool.html',
-  styleUrls: ['combination-pool.scss']
-})
-export class CombinationPool implements OnInit, OnDestroy {
-  @Input('formGroup')
-  form!: FormGroup;
-  @Input()
-  appearance?: MatFormFieldAppearance;
-  @Input()
-  cube: string;
-  @Input()
-  model: { [axis: string]: (string | number) } = {};
-  @Input()
-  source: 'constraints' | 'combinations' = 'combinations';
-  @Output()
-  readonly modelChange = new EventEmitter<{ [axis: string]: (string | number) }>();
-  _axes: CubeAxis[] = [];
-  _cube: Cube;
-  working = true;
-  readonly _keys: { [type: string]: string[] } = {};
-  readonly _values: { [type: string]: { [key: string]: any } } = {};
-  private readonly _destroy = new Subject<void>();
-  constructor(private _service: CubeService,
-    private _fb: FormBuilder,
-    private _session: SessionService) { }
-  ngOnInit(): void {
-    this._cube = this.cube ? this._session.profile.cubes.find(c => c.name === this.cube) : this._session.profile.cubes[0];
-    this._axes = this._cube.axes.filter(a => a.combination && !a.hidden);
-    this._axes.forEach(a => {
-      let control = this.form.controls[a.name];
-      if (!control) {
-        control = this._fb.control(null, Validators.required);
-        this.form.addControl(a.name, control);
-      }
-      this._keys[a.dataType] = [];
-      control.valueChanges.pipe(debounceTime(250), takeUntil(this._destroy)).subscribe(v => {
-        this.model[a.name] = v;
-        this._populate().
-          then(() =>
-            this.modelChange.next(this.model));
-      });
-    });
-    this._populate();
-  }
-  private _populate() {
-    this.working = true;
-    const values = {};
-    this._axes.forEach(a => {
-      const val = this.model[a.name];
-      if (val) values[a.name] = val;
-    });
-    return this._service.constraints(this._cube.name, values, { source: this.source }).toPromise().then(r => {
-      Object.keys(r).forEach(t => {
-        this._values[t] = r[t];
-        const keys = this._keys[t] = Object.keys(r[t]);
-        const axis = this._axes.find(a => a.dataType === t), control = this.form.controls[axis.name];
-        if (keys.length < 2) {
-          if (keys.length === 1)
-            control.patchValue(this.model[axis.name] = keys[0], { emitEvent: false });
-          control.disable({ emitEvent: false });
-        }
-        else if (control.disabled) control.enable({ emitEvent: false });
-      });
-      Object.assign(this._values, r);
-      this.working = false;
-    });
-  }
-  clear(axis: string) {
-    const control = this.form.controls[axis];
-    control.patchValue(null);
-  }
-  clearAll() {
-    const values = {};
-    this._axes.forEach(a => {
-      values[a.name] = null;
-    });
-    this.form.patchValue(values);
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-  }
-}

package/src/lib/core/controls/file.input.html

@@ -1,50 +0,0 @@
-<button mat-button *ngIf="!items.length; else preview" (click)="open()">
-  <mat-icon class="filled">{{icon}}</mat-icon>
-  <span class="mat-h3">{{placeholder}}</span>
-</button>
-<input type="file" #input
-       [accept]=accept [multiple]=multiple (change)='_change($event)' style="display: none" />
-<ng-template #preview>
-  <div *ngFor='let a of items' class="attachment-item"
-       [class.deleted]="a.deleted" [class.failed]="a.failed"
-       [progressIndicator]="a.progress">
-    <div class="file-preview">
-      <img *ngIf="a.isImage" [src]="a.url" (click)="apreview(a)" height="80">
-      <button mat-icon-button *ngIf="a.hasPreview && !a.isImage" [bizdocTooltip]="'Preview'|translate" (click)="apreview(a)" [ngSwitch]="a.icon !== undefined">
-        <mat-icon *ngSwitchCase="true" [svgIcon]="a.icon" [inline]="false"></mat-icon>
-        <mat-icon *ngSwitchDefault class="mat-icon-rtl-mirror">find_in_page</mat-icon>
-      </button>
-      <mat-icon *ngIf="!a.hasPreview && a.icon" [svgIcon]="a.icon" [inline]="false"></mat-icon>
-    </div>
-    <div class="file-overlay row">
-      <span class="filename">{{a.fileName}}</span>
-      <span class="divider"></span>
-      <button mat-icon-button class="options" [matMenuTriggerFor]="menu" [bizdocTooltip]="'Options' | translate">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-    </div>
-    <mat-menu #menu>
-      <ng-container *ngIf="!a.failed">
-        <ng-container *ngIf="canEdit(a) && !a.failed">
-          <ng-container *ngIf="!a.checkedOut">
-            <button mat-menu-item (click)="checkOut(a)">{{"CheckOut" | translate}}</button>
-            <button mat-menu-item *ngIf="multiple" (click)="open()">{{"Add" | translate}}</button>
-          </ng-container>
-          <button mat-menu-item (click)="checkIn(a)" *ngIf="a.checkedOut">{{"CheckIn" | translate}}</button>
-        </ng-container>
-        <mat-divider></mat-divider>
-        <button mat-menu-item (click)="download(a)">{{"Download" | translate}}</button>
-        <button mat-menu-item *ngIf="a.hasPreview" (click)="apreview(a)"><mat-icon>landscape</mat-icon> {{"Preview" | translate}}</button>
-        <ng-container *ngIf="hasVersions(a)">
-          <mat-divider></mat-divider>
-          <button mat-menu-item *ngFor="let v of getVersions(a)" (click)="previewOrDownload(v)">{{v.time |  amCalendar}}</button>
-        </ng-container>
-        <ng-container *ngIf="canEdit(a)">
-          <mat-divider></mat-divider>
-          <button mat-menu-item (click)="discard(a)">{{"Discard" | translate}}</button>
-        </ng-container>
-      </ng-container>
-      <button mat-menu-item (click)="cancel(a)" *ngIf="a.failed">{{"Cancel" | translate}}</button>
-    </mat-menu>
-  </div>
-</ng-template>

package/src/lib/core/controls/file.input.scss

@@ -1,41 +0,0 @@
-:host {
-  display: flex
-}
-
-.attachment-item {
-  height: 80px;
-  position: relative;
-  display: inline-flex;
-
-  &.deleted {
-  }
-
-  &.failed {
-  }
-
-  img {
-    cursor: zoom-in;
-  }
-
-  .file-preview {
-    /*position: absolute;*/
-  }
-
-  .file-overlay {
-    position: relative;
-    height: inherit;
-
-    .filename {
-      font-size: x-small;
-      cursor: pointer;
-      background: rgb(255 255 255 / 40%);
-      align-self: flex-end;
-    }
-
-
-    &:hover .filename {
-      background: white;
-      opacity: .5
-    }
-  }
-}