@tetacom/ng-components 1.0.25 → 1.0.28

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

@@ -1,119 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,111 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,21 +0,0 @@
-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

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