@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/compose/version-compare/version-compare.directive.ts

@@ -0,0 +1,292 @@
+import { Input, Directive, OnInit, ElementRef, Optional, Host, AfterViewInit, ChangeDetectorRef, SkipSelf, ViewContainerRef, TemplateRef } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { isObject } from "../../core/functions";
+import { FieldInfo } from "../../core/models";
+import { TranslateService } from "../../core/translate.service";
+import { VersionCompareComponent } from "./version-compare.component";
+
+enum CompareState {
+  Removed = -1,
+  Unchanged = 0,
+  Added = 1,
+  Modified = 2
+}
+
+export abstract class CompareDirectiveBase {
+  abstract get base(): any;
+  abstract get version(): any;
+  abstract get structure(): FieldInfo;
+}
+/** */
+@Directive({ selector: '[bizdocCompareGroup],[bizdocCompareArray]' })
+export
+  class CompareGroupDirective extends CompareDirectiveBase implements OnInit {
+  @Input('bizdocCompareGroup') name: string;
+  private _keys: string[];
+  private _structure: FieldInfo;
+  private _base: any;
+  private _version: any;
+  public get structure(): FieldInfo { return this._structure; }
+  public get base(): any { return this._base ? this._base[this.name] : null; }
+  public get version(): any { return this._version[this.name]; }
+  public get keys(): string[] { return this._keys; }
+  constructor(
+    @Optional() private _comparision: VersionCompareComponent,
+    @Optional() @Host() private _context: CompareContextDirective,
+    @Optional() @Host() @SkipSelf() private _parent: CompareGroupDirective) {
+    super();
+  }
+  ngOnInit(): void {
+    if (!this._comparision) return;
+    if (this._context) {
+      this._structure = this._context.structure.fields.find(e => e.name === this.name);
+      this._base = this._context.base;
+      this._version = this._context.version;
+    }
+    else if (this._parent) {
+      this._structure = this._parent.structure.fields.find(e => e.name === this.name);
+      this._base = this._parent.base;
+      this._version = this._parent.version;
+    }
+    else {
+      this._structure = this._comparision.form.structure.find(e => e.name === this.name);
+      const { currentVersion, baseVersion } = this._comparision;
+      this._base = baseVersion;
+      this._version = currentVersion;
+    }
+    if (!this._structure) throw `No form field with name ${this.name}`;
+    if (!this._structure.isObject) throw `bizdocCompareGroup ${this.name}`;
+    this.structure.isArray && this._normalize();
+  }
+  private _normalize() {
+    this._keys = this.structure.fields.filter(f => f.key).map(k => k.name);
+    this.base.forEach((b, i) => !this.version.find(v => this._keys.every(k => v[k] === b[k])) /* doesn't have a version */ &&
+      this.version.splice(i, 0, Object.assign({ _compare: CompareState.Removed }, b)));
+    this.version.forEach(v => {
+      if (v['_compare'] === undefined) {
+        const base = this.base.find(b => this._keys.every(k => b[k] === v[k]));
+        if (!base)
+          v['_compare'] = CompareState.Added;
+        else if (JSON.stringify(v) !== JSON.stringify(base))
+          v['_compare'] = CompareState.Modified;
+      }
+    });
+  }
+}
+/** */
+@Directive({ selector: '[bizdocCompareName]' })
+export
+  class CompareNameDirective extends CompareDirectiveBase implements OnInit, AfterViewInit {
+  private _name: string[];
+  @Input('bizdocCompareName') set name(val: string) {
+    this._name = val.split(',');
+  }
+  private _structure: FieldInfo;
+  private _base: any;
+  private _version: any;
+  private _state: CompareState = CompareState.Unchanged;
+  public get structure(): FieldInfo { return this._structure; }
+  public get base(): any { return this._base ? this._base[this._name[0]] : null; }
+  public get version(): any { return this._version[this._name[0]]; }
+  get state(): CompareState { return this._state };
+  constructor(
+    @Optional() private _comparision: VersionCompareComponent,
+    @Optional() @Host() private _context: CompareContextDirective,
+    @Optional() @Host() private _group: CompareGroupDirective,
+    private _translate: TranslateService,
+    private _cd: ChangeDetectorRef,
+    private _dom: DomSanitizer,
+    private _element: ElementRef<HTMLElement>) {
+    super();
+  }
+  ngOnInit(): void {
+    if (!this._comparision) return;
+    if (this._context) {
+      this._structure = this._context.structure.fields.find(e => e.name === this._name[0]);
+      this._base = this._context.base;
+      this._version = this._context.version;
+    }
+    else if (this._group) {
+      this._structure = this._group.structure.fields.find(e => e.name === this._name[0]);
+      this._base = this._group.base;
+      this._version = this._group.version;
+    }
+    else {
+      this._structure = this._comparision.form.structure.find(e => e.name === this._name[0]);
+      const { currentVersion, baseVersion } = this._comparision;
+      this._base = baseVersion;
+      this._version = currentVersion;
+    }
+    if (!this._structure) throw `No form field with name ${this._name[0]}`;
+  }
+  ngAfterViewInit(): void {
+    if (!this._comparision) return;
+    // if object has state
+    const state = this._version['_compare'];
+    if (state !== undefined) {
+      switch (state) {
+        case CompareState.Removed:
+          this._decorate('removed', 'Deleted');
+          this._state = state;
+          return;
+        case CompareState.Added:
+          this._decorate('added', 'Added');
+          this._state = state;
+          return;
+      }
+    }
+    const versionData: { [field: string]: any } = {};
+    // iterate names
+    let name: string, i = 0;
+    while (i < this._name.length) {
+      name = this._name[i];
+      if (!this._base) {
+        if (this._version[name] !== undefined)
+          this._state = CompareState.Added;
+      }
+      else if (this._version[name] !== this._base[name]) {
+        if (this._version[name] === undefined) {
+          this._version[name] = this._base[name];
+          versionData[name] = undefined;
+          this._state = CompareState.Removed;
+        }
+        else if (this._base[name] === undefined)
+          this._state = CompareState.Added;
+        else if (JSON.stringify(this._version[name]) !== JSON.stringify(this._base[name])) {
+          // store version data
+          versionData[name] = this._version[name];
+          this._version[name] = this._base[name];
+          this._state = CompareState.Modified;
+        }
+      }
+      i++;
+    }
+    if (this._state !== CompareState.Unchanged)
+      switch (this._state) {
+        case CompareState.Removed:
+          // detect with base value(s)
+          setTimeout(() => {
+            this._cd.detectChanges();
+            this._decorate('removed', 'Deleted');
+            Object.assign(this._version, versionData);
+          });
+          break;
+        case CompareState.Added:
+          this._decorate('added', 'Added');
+          break;
+        case CompareState.Modified:
+          {
+            const versionHTML = this._element.nativeElement.innerHTML;
+//            this._cd.markForCheck();
+            setTimeout(() => {
+              // detect again with base value(s)
+              this._cd.detectChanges();
+              const originalHTML = this._element.nativeElement.innerHTML;
+              // restore version html
+              this._element.nativeElement.innerHTML = versionHTML;
+              const labelEl = this._decorate('modified', 'Modified');
+              const el = document.createElement('span');
+              el.className = 'original';
+              el.innerHTML = originalHTML; //this._dom.sanitize();
+              labelEl.append(el);
+              // restore version value(s)
+              Object.assign(this._version, versionData);
+            });
+            break;
+          }
+      }
+  }
+  private _decorate(className: string, label: string): HTMLElement {
+    this._element.nativeElement.classList.add('compare', className);
+    const labelContainerEl = document.createElement('div');
+    labelContainerEl.className = 'label';
+    const labelEl = document.createElement('span');
+    labelEl.innerText = this._translate.get(label);
+    labelContainerEl.append(labelEl);
+    this._element.nativeElement.appendChild(labelContainerEl);
+    return labelEl;
+  }
+}
+/** */
+@Directive({ selector: '[bizdocCompareContext],[bizdocCompare]', exportAs: 'bizdocCompare' })
+export
+  class CompareContextDirective extends CompareDirectiveBase implements OnInit, AfterViewInit {
+  private _version: {};
+  @Input('bizdocCompareOf') set compareOf(val: {}) { this._version = val; }
+  @Input('bizdocCompareContext') set context(val: {}) { this._version = val; }
+  get version(): {} { return this._version; }
+  @Input('bizdocCompareDecorate') decorate: 'group' | 'single' | 'table';
+  private _base: {};
+  public get base(): {} { return this._base; }
+  public get structure(): FieldInfo { return this._group.structure; }
+  constructor(
+    @Optional() private _comparision: VersionCompareComponent,
+    @Optional() @Host() private _group: CompareGroupDirective,
+    private _vc: ViewContainerRef,
+    @Optional() private _template: TemplateRef<any>,
+    private _element: ElementRef<HTMLElement>) {
+    super();
+    this.decorate = _element.nativeElement.tagName === 'TR' ? 'table' : 'group';
+  }
+  ngOnInit(): void {
+    if (this._comparision) {
+      if (!this._group) throw `Missing enclosing bizdocCompareGroup directive`;
+      if (!isObject(this.version)) throw `[bizdocCompareContext] syntax`;
+      this._base = this._group.base.find(b => this._group.keys.every(k => b[k] === this.version[k]));
+    }
+    if (this._template) {
+      this._vc.createEmbeddedView(this._template, {
+        $implicit: this._base
+      });
+    }
+  }
+  ngAfterViewInit(): void {
+    if (!this._comparision) return;
+    switch (this.decorate) {
+      case 'table':
+        this._table();
+        break;
+      case 'group':
+        this._collapse();
+        break;
+    }
+  }
+  /** */
+  private _table() {
+    let className: string;
+    switch (this._version['_compare'] as CompareState) {
+      case CompareState.Added:
+        className = 'added';
+        break;
+      case CompareState.Removed:
+        className = 'removed';
+        break;
+      case CompareState.Modified:
+        className = 'modified';
+        break;
+    }
+    this._element.nativeElement.classList.add('compare', className);
+  }
+  /** removes repeated added and removed tags */
+  private _collapse() {
+    const els = this._element.nativeElement.parentElement.querySelectorAll('.compare');
+    let prevState: CompareState = CompareState.Unchanged;
+    for (let i = els.length - 1; i >= 0; i--) {
+      const el = els[i];
+      let state: CompareState;
+      if (el.classList.contains('added'))
+        state = CompareState.Added;
+      else if (el.classList.contains('removed'))
+        state = CompareState.Removed;
+      else {
+        state = CompareState.Unchanged;
+        continue;
+      }
+      if (prevState === state) {
+        const labelEl = el.querySelector('.label');
+        labelEl && labelEl.remove();
+      }
+      prevState = state;
+    }
+  }
+}

package/src/lib/compose/version-compare/version.pane.component.html

@@ -0,0 +1,19 @@
+<div class="row">
+  <span class="divider"></span>
+  <button mat-icon-button *ngIf="versions.length" [matMenuTriggerFor]="menu" [attr.aria-label]="'Version' | translate">
+    <mat-icon>filter_list</mat-icon>
+  </button>
+  <mat-menu #menu>
+    <button mat-menu-item (click)="switch(l.time)" *ngFor="let l of versions">
+      <bizdoc-identity-name [identity]="l.userId" [by]="l.byId" chating="none"></bizdoc-identity-name>
+      {{l.time | amCalendar : null : CALENDAR_SPEC}}
+    </button>
+  </mat-menu>
+</div>
+<div class="info mat-body-1">
+  <bizdoc-identity-name [identity]="log.userId" [by]="log.byId"></bizdoc-identity-name>
+  | <span>{{log.time | amCalendar : null : CALENDAR_SPEC }}</span>
+</div>
+<div>
+  <bizdoc-version-compare [model]="model" [version]="log.time"></bizdoc-version-compare>
+</div>

package/src/lib/compose/version-compare/version.pane.component.scss

@@ -0,0 +1,8 @@
+:host {
+  padding: 0 8px;
+  display: block;
+  min-width: 350px;
+}
+
+.info {
+}

package/src/lib/compose/version-compare/version.pane.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { CalendarSpec } from 'moment';
+import { DocumentModel, Log } from '../../core/models';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { TranslateService } from '../../core/translate.service';
+import { OpenPolicy } from '../../core/configuration';
+
+@Component({
+  selector: 'bizdoc-version.pane',
+  templateUrl: './version.pane.component.html',
+  styleUrls: ['./version.pane.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+export class VersionPaneComponent implements OnInit {
+  model: DocumentModel<any>;
+  log: Log;
+  versions: Log[];
+  readonly CALENDAR_SPEC: CalendarSpec = {
+    lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+    lastWeek: 'dddd HH:mm',
+    sameDay: `[${this._translate.get('Today')}] HH:mm`,
+    sameElse: 'MMM Do HH:mm'
+  };
+  constructor(
+    private _pane: PaneRef<VersionPaneComponent>,
+    private _translate: TranslateService,
+    private _router: PanesRouter
+  ) {
+    _pane.title = _translate.get('Version');
+  }
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => {
+      this.model = d['item'];
+      this._pane.group = `#${this.model.number}`;
+    });
+    this._pane.paramsChange.subscribe(p => {
+      const version = p['version'].decodeId();
+      this.log = this.model.log.find(l => l.type === 'ModelChange' && new Date(l.time).valueOf() === version);
+      this.versions = this.model.log.filter(l => l.type === 'ModelChange' && l !== this.log);
+    });
+  }
+  switch(time: Date) {
+    this._router.navigate(['../', 'version', new Date(time).valueOf().encodeId()], {policy: OpenPolicy.Tab});
+  }
+}

package/src/lib/core/NgComponentOutlet.ts

@@ -0,0 +1,31 @@
+import { Type, Injector, ComponentFactoryResolver, ComponentRef, Directive, Input, ViewContainerRef, Output, EventEmitter, OnInit } from "@angular/core";
+
+@Directive({ selector: 'ngx-component-outlet' })
+export class NgxComponentOutlet implements OnInit {
+  @Input('type') ngxComponentOutlet!: Type<any>;
+  @Input('injector') ngxComponentOutletInjector!: Injector;
+  @Input() ngxComponentOutletContent!: any[][];
+
+  @Output('create') createEvents = new EventEmitter<any>();
+
+  private _componentRef: ComponentRef<any> | null = null;
+
+  constructor(private _viewContainerRef: ViewContainerRef,
+    private _componentFactoryResolver: ComponentFactoryResolver  ) { }
+
+  ngOnInit() {
+    this._viewContainerRef.clear();
+    this._componentRef = null;
+
+    if (this.ngxComponentOutlet) {
+      const elInjector = this.ngxComponentOutletInjector || this._viewContainerRef.parentInjector;
+
+      const componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.ngxComponentOutlet);
+
+      this._componentRef = this._viewContainerRef.createComponent(
+        componentFactory, this._viewContainerRef.length, elInjector,
+        this.ngxComponentOutletContent);
+      this.createEvents.emit(this._componentRef.instance);
+    }
+  }
+}

package/src/lib/core/account.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { UserInfo } from '../core/models';
+import { HubService } from './hub.service';
+import { Observable, forkJoin } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+
+@Injectable({ providedIn: "root" })
+export class AccountService {
+  private readonly _cache: { [key: string]: Observable<UserInfo> } = {};
+  constructor(private _http: HttpClient, messaging: HubService) {
+    messaging.profileChange$.subscribe(c => {
+      const info = this._cache[c.userId];
+      info && Object.assign(info, { mode: c.mode });
+    });
+  }
+  getAll(ids: string[]): Observable<UserInfo[]> {
+    return forkJoin(ids.map(i => this.get(i)));
+  }
+  get(id: string): Observable<UserInfo> {
+    return this._cache[id] || (this._cache[id] = this._http.get<UserInfo>(`/api/account/info/${id}`).pipe(shareReplay()));
+  }
+  findAll(name?: string, options?: { skip?: number, take?: number }): Observable<UserInfo[]> {
+    return this._http.get<UserInfo[]>('/api/account/list', {
+      params: { name, ...options } as any
+    });
+  }
+}

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

@@ -0,0 +1,3 @@
+<mat-icon
+  
+  [ngClass]="{'animate' : animate}" color="{{animate ? colorEnd : colorStart}}" (click)="toggle()">{{animate ? end : start}}</mat-icon>

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

@@ -0,0 +1,12 @@
+/*@import '../../../scss/mixins';*/
+
+:host {
+  /*@include mat-design-icon-mixin();*/
+
+  .material-icons {
+    transition: transform .5s;
+    &.animate {
+      transform: rotate(360deg);
+    }
+  }
+}

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,196 @@
+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 = trigger('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 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({})))]);