@tetacom/ng-components 1.0.24 → 1.0.25

package/src/directive/drag-sort/drag-sort-item.directive.ts

@@ -0,0 +1,119 @@
+import {
+  Directive,
+  ElementRef,
+  Host,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+} from '@angular/core';
+import {DragSortContainerDirective} from './drag-sort-container.directive';
+
+@Directive({
+  selector: '[tetaDragSortItem]',
+})
+export class DragSortItemDirective<T> implements OnInit, OnDestroy {
+  @Input() tetaDragSortItem: T;
+  @Input() dragSortDirection: 'horizontal' | 'vertical' = 'horizontal';
+
+  @HostBinding('attr.draggable') private readonly draggable = true;
+  @HostBinding('class.position-relative') private readonly relative = true;
+
+  private _dragElement: HTMLElement;
+
+  private rect: any;
+
+  constructor(
+    @Host() private _container: DragSortContainerDirective<T>,
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2
+  ) {
+  }
+
+  @HostListener('dragstart', ['$event']) dragstart(event: DragEvent): void {
+    this._container.setDragItem(this.tetaDragSortItem);
+  }
+
+  @HostListener('dragenter', ['$event']) dragenter(event: DragEvent): void {
+    this.rect = this._elementRef.nativeElement.getBoundingClientRect();
+  }
+
+  @HostListener('dragover', ['$event']) dragover(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.rect && this._container.getDragItem()) {
+      this.showDrag(this.getDropPosition(event));
+    }
+  }
+
+  @HostListener('dragleave', ['$event']) dragleave(event: DragEvent): void {
+    event.preventDefault();
+    this.hideDrag();
+  }
+
+  @HostListener('dragend', ['$event']) dragend(event: DragEvent): void {
+    this._container.setDragItem(null);
+    this.hideDrag();
+  }
+
+  @HostListener('drop', ['$event']) drop(event: DragEvent): void {
+    event.stopPropagation();
+    this._container.updateSortOrder(
+      this._container.getDragItem(),
+      this.tetaDragSortItem,
+      this.getDropPosition(event) === 'start'
+    );
+    this.hideDrag();
+  }
+
+  ngOnInit() {
+    this.createDrag();
+  }
+
+  ngOnDestroy() {
+    this.destroyDrag();
+  }
+
+  private showDrag(position: 'start' | 'end') {
+    this.hideDrag();
+    this._renderer.addClass(this._dragElement, `drop-direction-${position}`);
+  }
+
+  private hideDrag() {
+    this._renderer.removeClass(this._dragElement, 'drop-direction-start');
+    this._renderer.removeClass(this._dragElement, 'drop-direction-end');
+  }
+
+  private createDrag() {
+    this._dragElement = this._renderer.createElement('div');
+    this._renderer.appendChild(
+      this._elementRef.nativeElement,
+      this._dragElement
+    );
+    this._renderer.addClass(this._dragElement, 'drop-direction');
+    this._renderer.addClass(
+      this._dragElement,
+      this.dragSortDirection === 'horizontal'
+        ? 'drop-direction-horizontal'
+        : 'drop-direction-vertical'
+    );
+  }
+
+  private destroyDrag() {
+    this._renderer.removeChild(this._renderer, this._dragElement);
+  }
+
+  private getDropPosition(event: DragEvent) {
+    if (this.dragSortDirection === 'horizontal') {
+      return event.clientX >= this.rect.x + this.rect.width / 2
+        ? 'end'
+        : 'start';
+    } else {
+      return event.clientY >= this.rect.y + this.rect.height / 2
+        ? 'end'
+        : 'start';
+    }
+  }
+}

package/src/directive/drag-sort/drag-sort.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DragSortContainerDirective } from './drag-sort-container.directive';
+import { DragSortItemDirective } from './drag-sort-item.directive';
+
+@NgModule({
+  declarations: [DragSortContainerDirective, DragSortItemDirective],
+  exports: [DragSortContainerDirective, DragSortItemDirective],
+  imports: [CommonModule],
+})
+export class DragSortModule {}

package/src/directive/drag-sort/public-api.ts

@@ -0,0 +1,4 @@
+export * from './drag-sort.module';
+export * from './drag-sort-container.directive';
+export * from './drag-sort-item.directive';
+export * from './drag-sort-event';

package/src/directive/dynamic-content-base.directive.ts

@@ -0,0 +1,113 @@
+import {
+  ChangeDetectorRef,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Injector,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  TemplateRef,
+  Type,
+} from '@angular/core';
+import { DynamicComponentService } from '../common/service/dynamic-component.service';
+import { Align } from '../common/enum/align.enum';
+import { VerticalAlign } from '../common/enum/vertical-align.enum';
+import { filter, takeWhile } from 'rxjs/operators';
+import { TetaContentRef } from '../common/contract/teta-content-ref';
+import { PopupContentComponent } from '../component/dynamic-component/popup-content/popup-content.component';
+
+@Directive()
+export abstract class DynamicContentBaseDirective implements OnInit, OnDestroy {
+  @Input() data: any;
+  @Input() className: string | string[];
+  @Input() align: Align = Align.left;
+  @Input() verticalAlign: VerticalAlign = VerticalAlign.bottom;
+  @Input() appendToBody: boolean;
+  @Input() set open(open: boolean) {
+    this._open = open;
+    if (this._open) {
+      this.createContentRef();
+    } else {
+      this.destroyContentRef();
+    }
+  }
+  @Output() openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  protected _alive = true;
+  protected _componentRef: ComponentRef<any>;
+  protected _content: TetaContentRef;
+  protected _open = false;
+
+  protected abstract get _dynamicContent():
+    | string
+    | TemplateRef<any>
+    | Type<any>;
+
+  protected constructor(
+    protected _document: any,
+    protected _elementRef: ElementRef,
+    protected _service: DynamicComponentService,
+    protected _injector: Injector,
+    protected _zone: NgZone,
+    protected _cdr: ChangeDetectorRef
+  ) {
+    this._zone.onStable
+      .pipe(
+        takeWhile((_) => this._alive),
+        filter((_) => this._open)
+      )
+      .subscribe((_) => {
+        this.setPosition();
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._alive = false;
+    this.destroyContentRef();
+  }
+
+  ngOnInit(): void {}
+
+  protected createContentRef<T>(
+    className?: string | string[]
+  ): ComponentRef<T> {
+    if (!this._componentRef) {
+      this._open = true;
+      const injector = this._service.getInjector(this.data, this._injector);
+      const context = this._service.getContext(this._dynamicContent, this.data);
+      this._content = this._service.createContent(
+        this._dynamicContent,
+        this._injector,
+        context
+      );
+      this._componentRef = this._service.createComponent(
+        PopupContentComponent,
+        this._content,
+        injector,
+        this.appendToBody ? this._document.body : this._elementRef.nativeElement
+      );
+      if (className) {
+        this._componentRef.instance.addClass(className);
+      }
+    }
+    return this._componentRef;
+  }
+
+  protected destroyContentRef(): void {
+    if (this._open) {
+      this._open = false;
+      this._service.destroy(
+        this._componentRef,
+        this._content,
+        this.appendToBody ? this._document.body : this._elementRef.nativeElement
+      );
+      this._componentRef = null;
+    }
+  }
+
+  protected abstract setPosition(): void;
+}

package/src/directive/highlight/highlight.directive.spec.ts

@@ -0,0 +1,8 @@
+import { HighlightDirective } from './highlight.directive';
+
+describe('HighlightDirective', () => {
+  it('should create an instance', () => {
+    const directive = new HighlightDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/src/directive/highlight/highlight.directive.ts

@@ -0,0 +1,68 @@
+import {Directive, ElementRef, Input} from '@angular/core';
+
+@Directive({
+  selector: '[tetaHighlight]',
+})
+export class HighlightDirective {
+  @Input() set tetaHighlight(text: string) {
+    setTimeout(() => {
+      if (this._initialElement) {
+        this.elementRef.nativeElement.innerHTML = this._initialElement;
+      }
+      if (!text) {
+        return;
+      }
+      const pattern = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
+      const searchWithOutRegExp = text
+        .toLowerCase()
+        .replace(pattern, '\\$&')
+        .split(' ')
+        .filter(t => t.length > 0)
+        .join('|');
+      this._initialElement = this.elementRef.nativeElement.innerHTML;
+      this.recursiveReplaceNode(this.elementRef.nativeElement.childNodes, searchWithOutRegExp);
+    }, 10);
+  }
+
+  private _initialElement = null;
+
+  constructor(private elementRef: ElementRef) {
+  }
+
+  private recursiveReplaceNode(nodes: NodeListOf<ChildNode>, searchWithOutRegExp: string): boolean {
+    let match = false;
+    const cacheNodes: ChildNode[] = [];
+    nodes.forEach((node: ChildNode) => {
+      cacheNodes.push(node);
+    });
+    cacheNodes.forEach(node => {
+      if (node.nodeType === 3) {
+        if (node.nodeValue && node.nodeValue.search(new RegExp(searchWithOutRegExp, 'i')) > -1) {
+          match = true;
+          this.wrapNode(node, searchWithOutRegExp);
+        }
+      } else {
+        match = this.recursiveReplaceNode(node.childNodes, searchWithOutRegExp) || match;
+      }
+    });
+
+    return match;
+  }
+
+  private wrapNode(textNode: ChildNode, searchWithOutRegExp: string) {
+    if (!textNode || !textNode.nodeValue) {
+      return;
+    }
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = textNode.nodeValue
+      .replace(new RegExp(searchWithOutRegExp, 'gi'), match => `<mark>${match}</mark>`);
+
+    const parentNode = textNode.parentNode;
+    if (parentNode) {
+      while (tempDiv.firstChild) {
+        parentNode.insertBefore(tempDiv.firstChild, textNode);
+      }
+      parentNode.removeChild(textNode);
+    }
+  }
+}

package/src/directive/highlight/highlight.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HighlightDirective} from './highlight.directive';
+
+@NgModule({
+  declarations: [HighlightDirective],
+  exports: [HighlightDirective],
+  imports: [
+    CommonModule
+  ]
+})
+export class HighlightModule {
+}

package/src/directive/highlight/public-api.ts

@@ -0,0 +1,2 @@
+export * from './highlight.module';
+export * from './highlight.directive';

package/src/directive/hint/Hint.stories.ts

@@ -0,0 +1,111 @@
+import { Meta } from '@storybook/angular/types-6-0';
+import { number, select, withKnobs } from '@storybook/addon-knobs';
+import { ButtonModule } from '../../component/button/button.module';
+import { PopupContentComponent } from '../../component/dynamic-component/popup-content/popup-content.component';
+import { IconModule } from '../../component/icon/icon.module';
+import { Align } from '../../common/enum/align.enum';
+import { VerticalAlign } from '../../common/enum/vertical-align.enum';
+import { HintModule } from './hint.module';
+
+export default {
+  title: 'Directive/Hint',
+  decorators: [withKnobs],
+} as Meta;
+
+export const fromString = () => ({
+  moduleMetadata: {
+    imports: [HintModule, ButtonModule, IconModule],
+    entryComponents: [PopupContentComponent],
+  },
+  props: {
+    align: select(
+      'align',
+      {
+        left: Align.left,
+        right: Align.right,
+        center: Align.center,
+        auto: Align.auto,
+      },
+      Align.center
+    ),
+    verticalAlign: select(
+      'verticalAlign',
+      {
+        bottom: VerticalAlign.bottom,
+        top: VerticalAlign.top,
+        center: VerticalAlign.center,
+        auto: VerticalAlign.auto,
+      },
+      VerticalAlign.top
+    ),
+    delay: number('delay', 0, {
+      max: 5000,
+      min: 0,
+      range: true,
+      step: 100,
+    }),
+  },
+  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="bg-panel-50 padding-10 margin-10">
+              <button teta-button
+                     [palette]="'primary'"
+                     [tetaHint]="'You can get it now, right?'"
+                     [align]="align"
+                     [verticalAlign]="verticalAlign"
+                     [delay]="delay"
+                     [className]="'one'">
+                <teta-icon [palette]="'background'" [name]="'settings'" class="margin-right-2"></teta-icon>
+                Hover me
+              </button>
+            </div>`,
+});
+
+export const fromTemplate = () => ({
+  moduleMetadata: {
+    imports: [HintModule, ButtonModule, IconModule],
+    entryComponents: [PopupContentComponent],
+  },
+  props: {
+    test: 'AAAAA',
+    align: select(
+      'align',
+      {
+        left: Align.left,
+        right: Align.right,
+        center: Align.center,
+        auto: Align.auto,
+      },
+      Align.center
+    ),
+    verticalAlign: select(
+      'verticalAlign',
+      {
+        bottom: VerticalAlign.bottom,
+        top: VerticalAlign.top,
+        center: VerticalAlign.center,
+        auto: VerticalAlign.auto,
+      },
+      VerticalAlign.top
+    ),
+    delay: number('delay', 0, {
+      max: 5000,
+      min: 0,
+      range: true,
+      step: 100,
+    }),
+  },
+  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="bg-panel-50 padding-10 margin-10">
+              <ng-template #hint>
+                <div>{{test}}</div>
+              </ng-template>
+              <button teta-button
+                     [palette]="'primary'"
+                     [tetaHint]="hint"
+                     [align]="align"
+                     [verticalAlign]="verticalAlign"
+                     [delay]="delay"
+                     [className]="'one'">
+                <teta-icon [palette]="'background'" [name]="'settings'" class="margin-right-2"></teta-icon>
+                Hover me
+              </button>
+            </div>`,
+});

package/src/directive/hint/hint.directive.spec.ts

@@ -0,0 +1,8 @@
+import { HintDirective } from './hint.directive';
+
+describe('HintDirective', () => {
+  it('should create an instance', () => {
+    const directive = new HintDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/src/directive/hint/hint.directive.ts

@@ -0,0 +1,117 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  Injector,
+  Input,
+  NgZone,
+  OnDestroy,
+  TemplateRef,
+  Type,
+} from '@angular/core';
+import {DynamicContentBaseDirective} from '../dynamic-content-base.directive';
+import {DOCUMENT} from '@angular/common';
+import {DynamicComponentService} from '../../common/service/dynamic-component.service';
+import {PositionUtil} from '../../common/util/position-util';
+import {ArrayUtil} from '../../common/util/array-util';
+import {Align} from '../../common/enum/align.enum';
+import {VerticalAlign} from '../../common/enum/vertical-align.enum';
+import {DomUtil} from '../../common/util/dom-util';
+import Timeout = NodeJS.Timeout;
+
+@Directive({
+  selector: '[tetaHint]',
+})
+export class HintDirective
+  extends DynamicContentBaseDirective
+  implements OnDestroy {
+  /**
+   * Строка, шаблон или компонент для создания контекстного меню
+   */
+  @Input() tetaHint: string | TemplateRef<any> | Type<any>;
+  @Input() override align: Align = Align.center;
+  @Input() override verticalAlign: VerticalAlign = VerticalAlign.top;
+  @Input() delay = 300;
+
+  get _dynamicContent() {
+    return this.tetaHint;
+  }
+
+  private _timeout: Timeout;
+  private _componentRect: any;
+
+  constructor(
+    @Inject(DOCUMENT)
+    protected override _document: any,
+    protected override _elementRef: ElementRef,
+    protected override _service: DynamicComponentService,
+    protected override _injector: Injector,
+    protected override _zone: NgZone,
+    protected override _cdr: ChangeDetectorRef
+  ) {
+    super(_document, _elementRef, _service, _injector, _zone, _cdr);
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  mouseenter(): void {
+    clearTimeout(this._timeout);
+    this._timeout = setTimeout(() => {
+      this.createHint();
+    }, this.delay);
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  mouseleave(): void {
+    clearTimeout(this._timeout);
+    if (this._open && this._componentRef) {
+      this._timeout = setTimeout(() => {
+        this.destroyContentRef();
+      }, this.delay);
+    }
+  }
+
+  @HostListener('click', ['$event'])
+  click(event: MouseEvent): void {
+    if (
+      this._open &&
+      this._componentRef &&
+      DomUtil.clickedInside(this._componentRef.location.nativeElement, event)
+    ) {
+      event.stopPropagation();
+    }
+  }
+
+  protected setPosition() {
+    if (this._componentRef && this._open) {
+      if (!this._componentRect) {
+        this._componentRect =
+          this._componentRef.location.nativeElement.getBoundingClientRect();
+      }
+      const position = PositionUtil.getPosition(
+        this._elementRef.nativeElement.getBoundingClientRect(),
+        this._componentRect,
+        this.align,
+        this.verticalAlign,
+        0,
+        4
+      );
+      PositionUtil.setElementPosition(
+        this._componentRef.location.nativeElement,
+        position
+      );
+    }
+  }
+
+  private createHint(): void {
+    if (!this._dynamicContent) {
+      return;
+    }
+    this._componentRef = this.createContentRef();
+    this._componentRef.instance.className = [
+      ...ArrayUtil.asArray(this.className),
+      'hint',
+    ];
+  }
+}

package/src/directive/hint/hint.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HintDirective} from './hint.directive';
+import {DynamicComponentModule} from '../../component/dynamic-component/dynamic-component.module';
+
+@NgModule({
+  declarations: [HintDirective],
+  exports: [HintDirective],
+  imports: [
+    CommonModule,
+    DynamicComponentModule
+  ]
+})
+export class HintModule {
+}

package/src/directive/hint/public-api.ts

@@ -0,0 +1,2 @@
+export * from './hint.module';
+export * from './hint.directive';

package/src/directive/loader/Loader.stories.ts

@@ -0,0 +1,21 @@
+import {Meta} from '@storybook/angular/types-6-0';
+// eslint-disable-next-line id-blacklist
+import {boolean, withKnobs} from '@storybook/addon-knobs';
+import {LoaderModule} from './loader.module';
+
+export default {
+  title: 'Directive/Loader',
+  decorators: [withKnobs]
+} as Meta;
+
+export const sample = () => ({
+  moduleMetadata: {
+    imports: [LoaderModule]
+  },
+  props: {
+    show: boolean('show', true)
+  },
+  template: `<div class="bg-panel-50 padding-10 margin-10" [tetaLoader]="show">
+                
+              </div>`,
+});

package/src/directive/loader/loader.directive.spec.ts

@@ -0,0 +1,8 @@
+import { LoaderDirective } from './loader.directive';
+
+describe('LoaderDirective', () => {
+  it('should create an instance', () => {
+    const directive = new LoaderDirective();
+    expect(directive).toBeTruthy();
+  });
+});