@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/core/animated-icon/animated-icon.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, ElementRef } from "@angular/core";
+
+@Directive({ selector: '[matAnimate]' })
+export
+    class MatIconAnimate {
+    constructor(element: ElementRef<HTMLElement>, ) {
+        element.nativeElement.addEventListener('click', () => {
+            element.nativeElement.classList.add('rotate');
+            setTimeout(() => element.nativeElement.classList.remove('rotate'), 1000);
+        });
+    }
+}
+
+//import { Component, Input, OnInit } from '@angular/core';
+
+//@Component({
+//  selector: 'animated-icon',
+//  templateUrl: './animated-icon.component.html',
+//  styleUrls: ['./animated-icon.component.scss']
+//})
+//export class MatAnimatedIconComponent implements OnInit {
+
+//  @Input() start: String;
+//  @Input() end: String;
+//  @Input() colorStart: String;
+//  @Input() colorEnd: String;
+//  @Input() animate: boolean;
+//  @Input() animateFromParent?: boolean = false;
+
+//  constructor() { }
+
+//  ngOnInit() {
+//    // console.log(this.colorStart);
+//    // console.log(this.colorEnd);
+//  }
+
+//  toggle() {
+//    if(!this.animateFromParent) this.animate = !this.animate;
+//  }
+
+//}

package/src/lib/core/animations.ts

@@ -0,0 +1,207 @@
+import { trigger, transition, animate, style, sequence, query, stagger, animateChild, state, group, keyframes } from '@angular/animations';
+
+export const expandListItemAnimation = trigger('detailExpand', [
+  state('collapsed', style({ height: '0px', minHeight: '0', display: '' })),
+  state('expanded', style({ height: '*', minHeight: '50px', display: '' })),
+  transition('expanded => collapsed', animate('1s cubic-bezier(0.4, 0.0, 0.2, 1)')),
+  transition('collapsed => expanded', animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+]);
+export const listItemUpdatedAnimation = trigger('updated', [state('true', style({ opacity: 1, /*background: 'white'*/ })),
+transition('*=>true', animate('300ms ease-in', style({ opacity: 0, /*background: 'darkgray'*/ })))]);
+
+export const searchAnimation = trigger('search',
+  [state('false', style({ width: 0, padding: 0, borderWidth: 0 })),
+  state('true', style({ width: '300px', padding: '2px 6px', borderWidth: '1px' })),
+  transition('* <=> *', animate(200, style({})))]);
+
+export const deshboardAnimation = trigger('deshboard',
+  [transition('* <=> *', [query('@card',
+    stagger(250, animateChild()), { optional: true })])]);
+
+export const cardsAnimation = trigger('card', [
+  transition(':enter', [
+    style({
+      transform: 'rotateY(180deg)',
+      '-webkit-transform': 'rotateY(180deg)'
+    }),
+    animate(".5s ease", style({
+      transform: 'rotateY(0deg)',
+      '-webkit-transform': 'rotateY(0deg)'
+    }))
+  ])
+]);
+
+export const ShakeAnimation = [
+  style({ transform: 'rotate(0)' }),
+  animate('0.1s', style({ transform: 'rotate(2deg)' })),
+  animate('0.1s', style({ transform: 'rotate(-2deg)' })),
+  animate('0.1s', style({ transform: 'rotate(2deg)' })),
+  animate('0.1s', style({ transform: 'rotate(0)' })),
+];
+export const EnterExitLeft = [
+  transition(':enter', [
+    style({ opacity: 0, transform: 'translateX(-200px)' }),
+    animate(
+      '300ms ease-in',
+      style({ opacity: 1, transform: 'translateX(0)' })
+    ),
+  ]),
+  transition(':leave', [
+    animate(
+      '300ms ease-in',
+      style({ opacity: 0, transform: 'translateX(-200px)' })
+    )
+  ])
+];
+export const EnterExitRight = [
+  transition(':enter', [
+    style({ opacity: 0, transform: 'translateX(200px)' }),
+    animate(
+      '300ms ease-in',
+      style({ opacity: 1, transform: 'translateX(0)' })
+    ),
+  ]),
+  transition(':leave', [
+    animate(
+      '300ms ease-in',
+      style({ opacity: 0, transform: 'translateX(200px)' })
+    )
+  ])
+];
+export const EnterExitTop = [
+  transition(':enter', [
+    style({ opacity: 0, transform: 'translateY(-200px)' }),
+    animate(
+      '300ms ease-in',
+      style({ opacity: 1, transform: 'translateY(0)' })
+    ),
+  ]),
+  transition(':leave', [
+    animate(
+      '300ms ease-in',
+      style({ opacity: 0, transform: 'translateY(200px)' })
+    )
+  ])
+];
+export const FadeSlideInOut = [
+  transition(':enter', [
+    style({ opacity: 0, transform: 'translateY(10px)' }),
+    animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
+  ]),
+  transition(':leave', [
+    animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
+  ]),
+];
+export const PulseAnimation = animate('1s', keyframes([
+  style({ opacity: 0.1, offset: 0.1 }),
+  style({ opacity: 0.6, offset: 0.2 }),
+  style({ opacity: 1, offset: 0.5 }),
+  style({ opacity: 0.2, offset: 0.7 })
+]));
+export const SwapAnimation = [
+    transition(':increment', [style({ transform: 'translateX(100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))]),
+    transition(':decrement', [style({ transform: 'translateX(-100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))])
+];
+export const matrixAnimation = trigger('table',
+  [transition('void=>*',
+    [
+      query('.mat-row',
+        [
+          style({ opacity: 0, transform: 'translateX(10px)' }),
+          stagger(100,
+            style({ opacity: 1, transform: 'none' }))
+        ],
+        { optional: true })
+    ])]);
+export const swapAnimation = trigger('swape', SwapAnimation)
+
+export const pageAnimation = trigger('page', [
+  state(':enter', style({ transform: 'translateX(0)' })),
+  state(':leave', style({ transform: 'translateX(-50%)' })),
+  transition('* => *', animate(300))]);
+
+export const fabAnimation = trigger('fabFull', [
+  state('working', style({ height: '100%', width: '100%' })),
+  //query('mat-icon', style({ 'font-size': '200px' }))
+  transition('* <=> working', [animate('350ms')])
+]);
+
+export const submenuAnimation = trigger('submenu', [
+  state('full', style({ minWidth: '200px', width: '*' })),
+  state('shrink', style({ minWidth: '60px', width: '60px' })),
+  transition('full<=>shrink, void=>shrink', [animate('100ms ease-out')]),
+  transition(':enter', [
+    style({ width: 0 }),
+    animate(
+      '200ms ease-in',
+      style({ minWidth: '200px', width: '*' })
+    ),
+  ]),
+  transition(':leave', [
+    animate(
+      '200ms ease-out',
+      style({ minWidth: 0, width: 0 })
+    )
+  ])
+]);
+
+export const listAnimation = trigger('list', [
+  //  transition('* <=> *', [
+  //    query('@item',
+  //      stagger(50, animateChild()), { optional: true }
+  //    )
+  //  ])
+]);
+export const itemAnimation =
+  trigger('item', [
+    transition(':enter', [
+      style({ opacity: 0, transform: 'translateX(100px)' }),
+      animate("200ms ease-out", style({ opacity: 1, transform: 'none' }))
+    ])
+  ]);
+
+export const tabsAnimation = trigger('tabs', [
+  //transition(':enter', [
+  //  style({ width: 0 }),
+  //  animate(
+  //    '250ms ease-out',
+  //    style({ minWidth: '200px', width: '*' })
+  //  ),
+  //]),
+  transition(':leave', [
+    animate(
+      '200ms ease-out'
+      , style({ minWidth: 0, width: 0 }))
+  ]),
+  transition('* <=> *',
+    [style({ width: '{{startWidth}}px' }), animate('.5s ease')], { params: { startWidth: 0 } })
+]);
+
+export const tabAnimation = trigger('tab', SwapAnimation);
+
+export const panesAnimation = trigger('panes', [transition(':enter, :leave', [
+  query('@pane',
+    stagger(150, animateChild()), { optional: true }),
+])]);
+export const panesTitleAnimation = trigger('title', [
+  transition(':leave', [
+    query('h1',
+      animate('500ms', style({ opacity: 0, transform: 'translateX(10px)' }))),
+  ]),
+  transition('*<=>*', [
+    query('h1',
+      [style({ opacity: 0, transform: 'translateX(10px)' }),
+      animate('500ms', style({ opacity: 1, transform: 'translateX(0)' }))]),
+  ])
+]);
+export const paneAnimation = trigger('pane', [
+  //transition(':enter', [style({ opacity: 0, transform: 'translateX(100%)' }),
+  //  animate('500ms', style({ opacity: 1, transform: 'translateX(0)' }))]),
+  //transition(':leave', [animate('500ms', style({ opacity: 0, transform: 'translateX(10px)' }))])
+]);
+export const paramAnimation = trigger('param', [state('*', style({ backgroundColor: 'unset', transform: 'scale(1)' })),
+transition('*<=>*', animate(200,
+  style({ backgroundColor: 'unset', transform: 'scale(1)' })))]);
+
+export const queryAnimation = trigger('query', [state('*', style({})),
+transition('*<=>*', animate(0, style({})))]);

package/src/lib/core/authentication.ts

@@ -0,0 +1,7 @@
+import { Observable } from "rxjs";
+
+export abstract class AuthenticationImpl {
+  abstract authorize(): Observable<any>;
+  abstract signOut?(): Promise<any>;
+  abstract getAccessToken();
+}

package/src/lib/core/avatar/_avatar-theme.scss

@@ -0,0 +1,60 @@
+@mixin avatar-theme($theme) {
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  $active-background:  mat.get-color-from-palette($background, dialog);
+  $size: 30px;
+  $dense-size: 22px;
+
+  .avatar {
+    margin: 1px;
+    font-size: small;
+    width: $size;
+    height: $size;
+    line-height: $size;
+    /*border-radius: $size;*/
+    color: white;
+    border: 4px solid;
+    display: inline-block;
+    text-align: center;
+
+    &.interactive {
+      cursor: pointer;
+    }
+
+    &.dense {
+      width: $dense-size;
+      height: $dense-size;
+      line-height: $dense-size;
+      /*border-radius: $dense-size;*/
+    }
+
+    .initials {
+      vertical-align: middle;
+    }
+
+    .mode {
+      /*display: none;*/
+      font-size: 11px;
+      position: relative;
+      top: -15px;
+      left: 13px;
+      color: white;
+      border: 2px solid white;
+      border-radius: 9px;
+      padding: 2px;
+    }
+
+    &:hover .mode {
+      /*display: inline;*/
+    }
+  }
+
+  [dir=rtl] .avatar .mode {
+    left: unset;
+    right: 13px;
+  }
+}

package/src/lib/core/avatar/avatar.component.html

@@ -0,0 +1,6 @@
+<div class="avatar mat-elevation-z3" [class.dense]=dense [class.interactive]=interactive
+     [style.backgroundColor]='color' [style.borderColor]='borderColor' [style.backgroundImage]='image'>
+  <div class="initials">{{initials}}</div>
+  <i class="material-icons filled mode" [bizdocTooltip]="mode | translate"
+     [style.backgroundColor]='modeColor' *ngIf=modeIcon>{{modeIcon}}</i>
+</div>

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

@@ -0,0 +1,108 @@
+import { ChangeDetectorRef, Component, HostListener, Input, OnChanges, OnDestroy, SimpleChanges } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { filter, Subject, takeUntil } from "rxjs";
+import { MATERIAL_PALETTES } from "../colors";
+import { AvailabilityState, UserInfo } from "../models";
+import { HubService } from "../hub.service";
+import { ChatInfo } from "../../chat/chat-info";
+
+const palettes = Object.keys(MATERIAL_PALETTES);
+
+const REGEX = /[\-\s]/g;
+
+const MODE_MAP = {
+  'Offline': { icon: 'timer', color: '#f57c00' },
+  'Online': { icon: 'check', color: '#43a047' },
+  'OutOfOffice': { icon: 'priority_high', color: '#90a4ae' },
+  'Vacation': { icon: 'beach_access', color: '#fdd835' },
+  'WorkingHome': { icon: 'home', color: '#fdd835' }
+};
+
+@Component({
+  selector: 'bizdoc-avatar',
+  templateUrl: 'avatar.component.html'
+})
+export class AvatarComponent implements OnChanges, OnDestroy {
+  @Input() person!: UserInfo;
+  modeIcon: string;
+  modeColor: string;
+  mode: AvailabilityState;
+  image: string;
+  initials: string;
+  color: string;
+  borderColor: string;
+  private _interactive: boolean = true;
+  public get interactive(): boolean {
+    return this._interactive;
+  }
+  @Input()
+  public set interactive(value: boolean) {
+    this._interactive = coerceBooleanProperty(value);
+  }
+  private _dense: boolean;
+  public get dense(): boolean {
+    return this._dense;
+  }
+  @Input()
+  public set dense(value: boolean) {
+    this._dense = coerceBooleanProperty(value);
+  }
+  private static _userMap: { [id: string]: { initials: string; borderColor: string; color: string } } = {};
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _hub: HubService,
+    private _cd: ChangeDetectorRef,
+    private _chat: ChatInfo) {
+  }
+  @HostListener('click')
+  chat() {
+    this._interactive && this._chat.open(this.person.id);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['person']) {
+      if (this.person.pictureUrl)
+        this.image = this.person.pictureUrl;
+      else if (AvatarComponent._userMap[this.person.id]) {
+        const { initials, color, borderColor } = AvatarComponent._userMap[this.person.id];
+        this.initials = initials;
+        this.borderColor = borderColor;
+        this.color = color;
+      }
+      else {
+        this._initials(this.person.name);
+        AvatarComponent._userMap[this.person.id] = {
+          color: this.color,
+          borderColor: this.borderColor,
+          initials: this.initials
+        };
+      }
+      !this.dense && this._mode(this.person.mode);
+    }
+    this._hub.profileChange$.pipe(takeUntil(this._destroy),
+      filter(u => u.userId === this.person.id)).subscribe(u =>
+        this._mode(u.mode));
+  }
+
+  private _mode(mode: AvailabilityState) {
+    this.mode = mode;
+    const state = MODE_MAP[mode || 'Online'];
+    this.modeIcon = state.icon;
+    this.modeColor = state.color;
+    this._cd.markForCheck();
+  }
+
+  private _initials(name: string) {
+    this.initials = name.split(REGEX).map(p => p.charAt(0).toUpperCase()).
+      join('').substr(0, 3);
+    let c = this.initials.charCodeAt(0);
+    if (this.initials.length > 1)
+      c += this.initials.charCodeAt(1) * 18;
+    const palette = MATERIAL_PALETTES[palettes[c - Math.floor(c / 18) * 18]];
+    this.color = palette['500'];
+    this.borderColor = palette['700'];
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/core/base.ts

@@ -0,0 +1,43 @@
+import { Attachment, DocumentModel } from "../core/models";
+import { FormGroup } from "@angular/forms";
+import { Observable } from "rxjs";
+
+export declare type ViewMode = 'compose' | 'preview' | 'print' | 'version';
+
+export declare type FormMode = '';
+
+export interface FormComponent<TModel> extends ManagedComponent<TModel> {
+  form: FormGroup;
+  mode: ViewMode;
+  onBind(data: DocumentModel<TModel>, version?: TModel): void;
+  onMessage?<T = any>(obj: T);
+  onSave?(): Observable<boolean> | Promise<boolean> | boolean;
+}
+
+export interface ReportComponent<TResult, TArgs = any, TOptions = any> {
+  onBind(data: TResult[], args?: TArgs);
+}
+
+export interface ArgumentsComponent<TArgs = any> extends ManagedComponent<TArgs>{
+  form: FormGroup;
+  //onBind?(data: FieldInfo[]): void;
+}
+
+export interface ManagedComponent<TArgs> {
+  //modelChange: Observable<TArgs>;
+    //readonly validChanges: Observable<boolean>;
+    //readonly dirtyChanges: Observable<boolean>;
+}
+
+export interface WidgetComponent<TResult, TArgs = any> {
+  onBind(data: TResult, args?: TArgs);
+}
+
+export interface UtilityComponent<TResult = any, TArgs = any, TOptions = any> {
+}
+export interface ExploreItemComponent<TModel> {
+  onBind(data: TModel);
+}
+export interface DocumentViewComponent<TResult = any, TArgs = any, TOptions = any> {
+  onBind(model: DocumentModel<any>);
+}

package/src/lib/core/can-activate.service.exp.ts

@@ -0,0 +1,31 @@
+////import { Injectable } from '@angular/core';
+////import { RouterStateSnapshot, ActivatedRouteSnapshot, CanActivate } from '@angular/router';
+////import { Observable } from 'rxjs';
+////import { SessionService } from './session.service';
+////import { SignInInfo } from "../login/signin-info.service";
+
+////@Injectable()
+////export class CanActivateLoggedIn implements CanActivate {
+////  canActivate(_childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {
+////    if (!this._session.ok)
+////      return new Observable(observe => {
+////        this._session.refresh().subscribe(() => {
+////          observe.next(true);
+////          observe.complete();
+////        }, () =>
+////          this._signIn.pop().subscribe(() => {
+////            observe.next(true);
+////            observe.complete();
+////          }, () => {
+////            observe.error();
+////            observe.complete();
+////          })
+////        );
+////      });
+////    else
+////      return true;
+////  }
+////  constructor(private _session: SessionService,
+////    private _signIn: SignInInfo) {
+////  }
+////}