@bizdoc/core 1.14.8 → 1.14.9

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.get-color-from-palette-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();
+  }
+}

package/src/lib/admin/diff/_configuration-diff-theme.scss

@@ -0,0 +1,84 @@
+@mixin configuration-diff-theme($theme) {
+  $accent: mat.get-color-from-palette($theme, accent);
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  .configuration-diff {
+    padding: 8px;
+    direction: ltr;
+
+    .scope {
+      .scope-content {
+        margin-left: 8px;
+      }
+
+      .alternate, .brackets {
+        cursor: pointer;
+      }
+
+      .alternate {
+        display: none;
+      }
+
+      &.collapse {
+        .alternate {
+          display: inline;
+        }
+
+        .scope-content {
+          display: none;
+        }
+      }
+
+      .structure {
+        font-weight: 500;
+      }
+
+      .color {
+        width: 10px;
+        height: 10px;
+        display: inline-block;
+      }
+
+      .value:hover {
+        -moz-text-decoration-line: underline;
+        text-decoration-line: underline;
+        -moz-text-decoration-style: dotted;
+        text-decoration-style: dotted;
+      }
+
+      &.focus {
+        /*        background:  mat.get-color-from-palette($background, 'hover');
+*/
+        > .brackets {
+          border: 1px solid black;
+        }
+      }
+    }
+  }
+
+  .timeline {
+    border-right: 1px solid lightgray;
+
+    .mat-list-item {
+      &:not(.active) {
+      }
+
+      &.active:after {
+        content: '\00a0';
+        background: mat.get-color-from-palette($accent);
+        width: 6px;
+        height: 100%;
+        top: 0;
+        position: absolute;
+        right: 0;
+      }
+    }
+  }
+
+  body[dir=rtl].timeline {
+    border-right: none;
+    border-left: 1px solid lightgray;
+  }
+}

package/src/lib/admin/diff/configuration-diff.component.html

@@ -0,0 +1,24 @@
+<mat-toolbar>
+  <button mat-icon-button (click)="properties.toggle()" [bizdocTooltip]="'Collapse' | translate"><mat-icon>view_sidebar</mat-icon></button>
+  <span class="divider"></span>
+</mat-toolbar>
+<mat-sidenav-container autosize fxFlex>
+  <mat-sidenav-content>
+    <mat-progress-bar mode="buffer" [value]=progress [bufferValue]=0 [style.visibility]="progress > 0 && progress < 100 ? 'visible':'hidden'"></mat-progress-bar>
+    <div [innerHTML]="html | sanitizeHtml" (mouseleave)="focusOut()" (mousemove)="focusIn($event)" class="configuration-diff" (click)="collapse($event)" #contents></div>
+  </mat-sidenav-content>
+  <mat-sidenav mode="side" opened #properties class="timeline">
+    <mat-nav-list *ngIf="versions">
+      <ng-container *ngFor="let v of versions; let index = index; let last = last">
+        <mat-list-item (click)="compare(index)" [class.active]="v.time === activeDate" *ngIf="!last">
+          <h3 matLine>
+            {{(v.author || 'System') | userName | async }}
+          </h3>
+          <p class="time" matLine>
+            {{v.time | amCalendar: null: CALENDAR_SPEC }}
+          </p>
+        </mat-list-item>
+      </ng-container>
+    </mat-nav-list>
+  </mat-sidenav>
+</mat-sidenav-container>

package/src/lib/admin/diff/configuration-diff.component.scss

@@ -0,0 +1,16 @@
+:host {
+  flex: 1 1 auto;
+}
+
+.timeline {
+  border: none;
+  width: 150px;
+
+  .time {
+    font-size: 12px !important;
+  }
+}
+
+:host ::ng-deep .mat-drawer-inner-container {
+  overflow: auto;
+}