@tetacom/ng-components 1.0.25 → 1.0.26

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

@@ -1,80 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Inject,
-  Input,
-  OnDestroy,
-  Renderer2,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-@Directive({
-  selector: '[tetaLoader]',
-})
-export class LoaderDirective implements OnDestroy {
-  @Input() appendToBody = false;
-
-  @Input()
-  set tetaLoader(value: boolean) {
-    this._loading = value;
-    if (this._loading) {
-      this.show();
-    } else {
-      this.hide();
-    }
-  }
-
-  get tetaLoader() {
-    return this._loading;
-  }
-
-  private _element: HTMLElement;
-  private _loader: any;
-  private _alive = true;
-  private _loading: boolean;
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer2,
-    @Inject(DOCUMENT) private _document: any
-  ) {
-    this._element = this._elementRef.nativeElement;
-  }
-
-  ngOnDestroy(): void {
-    this._alive = false;
-    this.hide();
-  }
-
-  private show() {
-    if (this._loader === null || this._loader === undefined) {
-      this._loader = this._renderer.createElement('div');
-      this._loader.setAttribute('class', 'loader');
-    }
-    this._renderer.appendChild(
-      this.appendToBody ? this._document.body : this._element,
-      this._loader
-    );
-    this.setPosition();
-  }
-
-  private hide() {
-    if (this._loader && this._loader.parentElement) {
-      this._renderer.removeChild(this._loader.parentElement, this._loader);
-    }
-  }
-
-  private setPosition() {
-    const position = this._element.getBoundingClientRect();
-    this._renderer.setStyle(
-      this._loader,
-      'top',
-      `${position.y + position.height / 2}px`
-    );
-    this._renderer.setStyle(
-      this._loader,
-      'left',
-      `${position.x + +position.width / 2}px`
-    );
-  }
-}

package/src/directive/loader/loader.module.ts

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

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

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

package/src/directive/no-autofill/no-autofill.directive.spec.ts

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

package/src/directive/no-autofill/no-autofill.directive.ts

@@ -1,28 +0,0 @@
-import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[tetaNoAutofill]',
-})
-
-/**
- * Disable autofill inputs in Chrome. Append hidden inputs with text/password type, to element.
- */
-export class NoAutofillDirective implements OnInit {
-  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
-
-  ngOnInit() {
-    const inputsTypes = ['text', 'password'];
-
-    inputsTypes.forEach((_) => {
-      const inputElement = this._renderer.createElement('input');
-      this._renderer.setAttribute(inputElement, 'type', _);
-      this._renderer.setAttribute(inputElement, 'class', 'position-absolute');
-      this._renderer.setStyle(inputElement, 'left', '-9999px');
-      this._renderer.insertBefore(
-        this._elementRef.nativeElement,
-        inputElement,
-        this._elementRef.nativeElement.firstChild
-      );
-    });
-  }
-}

package/src/directive/no-autofill/no-autofill.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NoAutofillDirective } from './no-autofill.directive';
-
-@NgModule({
-  exports: [NoAutofillDirective],
-  declarations: [NoAutofillDirective],
-  imports: [CommonModule],
-})
-export class NoAutofillModule {}

package/src/directive/no-autofill/public-api.ts

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

package/src/directive/only-number/OnlyNumber.stories.ts

@@ -1,29 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import { withKnobs } from '@storybook/addon-knobs';
-import { OnlyNumberModule } from './only-number.module';
-import { FormsModule } from '@angular/forms';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Directive/OnlyNumber',
-  decorators: [withKnobs],
-} as Meta;
-
-export const onlyNumber = () => ({
-  moduleMetadata: {
-    imports: [OnlyNumberModule, FormsModule],
-  },
-  props: {
-    data: 123,
-    log: (name, value) => {
-      action(name)(value);
-    },
-  },
-  template: `<div class="bg-panel-50 padding-10 margin-10">
-                <input tetaOnlyNumber
-                        class="input"
-                        [ngModel]="data"
-                        (ngModelChange)="data=$event;log('tetaOnlyNumber', $event)"/>
-                <div>{{data}}</div>
-              </div>`,
-});

package/src/directive/only-number/only-number.directive.spec.ts

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

package/src/directive/only-number/only-number.directive.ts

@@ -1,174 +0,0 @@
-import {Directive, ElementRef, HostListener, Input} from '@angular/core';
-import {NgControl} from '@angular/forms';
-
-@Directive({
-  selector: '[tetaOnlyNumber]',
-})
-export class OnlyNumberDirective {
-  @Input() tetaOnlyNumber = true;
-  @Input() allowDecimals = true;
-  @Input() allowSign = true;
-  @Input() decimalSeparator = '.';
-  @Input() commaSeparator = ',';
-
-  private _previousValue = '';
-
-  private _integerUnsigned = '^[0-9]*$';
-  private _integerSigned = '^-?[0-9]+$';
-  private _decimalUnsigned = '^[0-9]+(.[0-9]+)?$';
-  private _decimalSigned = '^-?[0-9]+(.[0-9]+)?$';
-
-  private readonly _minusSign: string = '-';
-
-  constructor(private _elementRef: ElementRef, private _control: NgControl) {
-  }
-
-  @HostListener('change', ['$event']) onChange(e: any) {
-    if (this.tetaOnlyNumber === false) {
-      return;
-    }
-    this.validateValue(this._elementRef.nativeElement.value);
-  }
-
-  @HostListener('paste', ['$event']) onPaste(e: any) {
-    if (this.tetaOnlyNumber === false) {
-      return;
-    }
-    this.validateValue(e.clipboardData.getData('text/plain'));
-    e.preventDefault();
-  }
-
-  @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
-    if (this.tetaOnlyNumber === false) {
-      return;
-    }
-    const cursorPosition: number =
-      (e.target as HTMLInputElement).selectionStart ?? 0;
-    const originalValue: string = (e.target as HTMLInputElement).value;
-    const controlOrCommand = e.ctrlKey === true || e.metaKey === true;
-    const signExists = originalValue.includes('-');
-    const separatorExists =
-      originalValue.includes(this.decimalSeparator) ||
-      originalValue.includes(this.commaSeparator);
-
-    const allowedKeys = [
-      'Backspace',
-      'ArrowLeft',
-      'ArrowRight',
-      'Delete',
-      'Escape',
-      'Tab',
-      'Home',
-      'End',
-    ];
-
-    const separatorIsCloseToSign = signExists && cursorPosition <= 1;
-    if (this.allowDecimals && !separatorIsCloseToSign && !separatorExists) {
-      // if (this.decimalSeparator === '.') {
-      allowedKeys.push('.');
-      // } else {
-      // allowedKeys.push(',');
-      // }
-    }
-
-    const firstCharacterIsSeparator =
-      originalValue.charAt(0) !== this.decimalSeparator;
-    if (
-      this.allowSign &&
-      !signExists &&
-      firstCharacterIsSeparator &&
-      cursorPosition === 0
-    ) {
-      allowedKeys.push('-');
-    }
-
-    if (
-      allowedKeys.indexOf(e.key) !== -1 ||
-      (e.code === 'KeyA' && controlOrCommand) ||
-      (e.code === 'KeyC' && controlOrCommand) ||
-      (e.code === 'KeyV' && controlOrCommand) ||
-      (e.code === 'KeyZ' && controlOrCommand) ||
-      (e.code === 'KeyX' && controlOrCommand)
-    ) {
-      return;
-    }
-    this._previousValue = originalValue;
-
-    const isNumber = new RegExp(this._integerUnsigned).test(e.key);
-    if (isNumber) {
-      return;
-    } else {
-      if (e.key === ',' && originalValue.indexOf('.') < 0) {
-        this._elementRef.nativeElement.value = originalValue + '.';
-      }
-      e.preventDefault();
-    }
-  }
-
-  validateValue(value: string): void {
-    if (this.tetaOnlyNumber === false) {
-      return;
-    }
-    value = value.replace(',', '.').trim();
-    let regex: string = this._integerUnsigned;
-    if (!this.allowDecimals && !this.allowSign) {
-      regex = this._integerUnsigned;
-    }
-    if (!this.allowDecimals && this.allowSign) {
-      regex = this._integerSigned;
-    }
-    if (this.allowDecimals && !this.allowSign) {
-      regex = this._decimalUnsigned;
-    }
-    if (this.allowDecimals && this.allowSign) {
-      regex = this._decimalSigned;
-    }
-
-    let firstCharacter = value.charAt(0);
-    if (firstCharacter === this.decimalSeparator) {
-      value = 0 + value;
-    }
-
-    const lastCharacter = value.charAt(value.length - 1);
-    if (lastCharacter === this.decimalSeparator) {
-      value = value + 0;
-    }
-
-    let signedValue = false;
-    if (firstCharacter === this._minusSign) {
-      signedValue = true;
-      value = value.substring(1);
-      firstCharacter = value.charAt(0);
-    }
-    let secondChar = value.charAt(1);
-    while (
-      firstCharacter === '0' &&
-      secondChar !== '' &&
-      secondChar !== this.decimalSeparator
-      ) {
-      value = value.substring(1);
-      firstCharacter = value.charAt(0);
-      secondChar = value.charAt(1);
-    }
-    if (signedValue === true) {
-      value = this._minusSign + value;
-    }
-
-    const valueParts = value.split(this.decimalSeparator);
-    const naturalPart = valueParts?.[0];
-    let decimalPart = valueParts?.[1];
-
-    if (decimalPart != null && /^0+$/.test(decimalPart)) {
-      decimalPart = '0';
-      value = naturalPart + '.' + decimalPart;
-    }
-    if (value === '-0') {
-      value = '0';
-    }
-    if (value === '-0.0') {
-      value = '0.0';
-    }
-    const valid: boolean = new RegExp(regex).test(value.toString());
-    this._control.control.setValue(valid ? value : this._previousValue ?? 0);
-  }
-}

package/src/directive/only-number/only-number.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OnlyNumberDirective } from './only-number.directive';
-
-@NgModule({
-  declarations: [OnlyNumberDirective],
-  exports: [OnlyNumberDirective],
-  imports: [CommonModule],
-})
-export class OnlyNumberModule {}

package/src/directive/only-number/public-api.ts

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

package/src/directive/public-api.ts

@@ -1,14 +0,0 @@
-export * from './click-outside/public-api';
-export * from './context-menu/public-api';
-export * from './disable-control/public-api';
-export * from './drag-sort/public-api';
-export * from './dynamic-content-base.directive';
-export * from './highlight/public-api';
-export * from './hint/public-api';
-export * from './loader/public-api';
-export * from './only-number/public-api';
-export * from '../component/resize-panel/public-api';
-export * from './teta-template/public-api';
-export * from './tooltip/public-api';
-export * from './no-autofill/public-api';
-export * from './resize-drag/public-api';

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

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

package/src/directive/resize-drag/resize-drag.directive.spec.ts

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

package/src/directive/resize-drag/resize-drag.directive.ts

@@ -1,62 +0,0 @@
-import {
-  Directive,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  Output,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-@Directive({
-  selector: '[tetaResizeDrag]',
-})
-export class ResizeDragDirective {
-  @Input() tetaResizeDrag: 'horizontal' | 'vertical' = 'vertical';
-
-  @Output() resizeStart = new EventEmitter<MouseEvent>();
-  @Output() resizeProcess = new EventEmitter<MouseEvent>();
-  @Output() resizeEnd = new EventEmitter<MouseEvent>();
-
-  @HostBinding('class.resize-drag_active')
-  private _active: boolean;
-
-  @HostBinding('class.resize-drag_horizontal')
-  private get horizontal() {
-    return this.tetaResizeDrag === 'horizontal';
-  }
-
-  @HostBinding('class.resize-drag_vertical')
-  private get vertical() {
-    return this.tetaResizeDrag === 'vertical';
-  }
-
-  constructor(@Inject(DOCUMENT) private _document: any) {}
-
-  @HostListener('mousedown', ['$event']) mouseDown(event: MouseEvent) {
-    this.resizeStart.emit(event);
-    this.addListeners();
-  }
-
-  private addListeners() {
-    this._active = true;
-    this._document.addEventListener('mouseup', this.handleMouseUp);
-    this._document.addEventListener('mousemove', this.handleMouseMove);
-  }
-
-  private removeListeners() {
-    this._active = false;
-    this._document.removeEventListener('mouseup', this.handleMouseUp);
-    this._document.removeEventListener('mousemove', this.handleMouseMove);
-  }
-
-  private handleMouseUp = (event: MouseEvent) => {
-    this.resizeEnd.emit(event);
-    this.removeListeners();
-  };
-
-  private handleMouseMove = (event: MouseEvent) => {
-    this.resizeProcess.emit(event);
-  };
-}

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ResizeDragDirective } from './resize-drag.directive';
-
-@NgModule({
-  declarations: [ResizeDragDirective],
-  exports: [ResizeDragDirective],
-  imports: [CommonModule],
-})
-export class ResizeDragModule {}

package/src/directive/teta-template/public-api.ts

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

package/src/directive/teta-template/teta-template.directive.spec.ts

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

package/src/directive/teta-template/teta-template.directive.ts

@@ -1,15 +0,0 @@
-import {Directive, Input, TemplateRef} from '@angular/core';
-
-@Directive({
-  selector: '[tetaTemplate]'
-})
-export class TetaTemplateDirective {
-  @Input('tetaTemplate') id: string;
-
-  constructor(public template: TemplateRef<any>) {
-  }
-
-  getId(): string {
-    return this.id;
-  }
-}

package/src/directive/teta-template/teta-template.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {TetaTemplateDirective} from './teta-template.directive';
-
-
-@NgModule({
-  declarations: [
-    TetaTemplateDirective
-  ],
-  exports: [
-    TetaTemplateDirective
-  ],
-  imports: [
-    CommonModule
-  ]
-})
-export class TetaTemplateModule {
-}

package/src/directive/tooltip/Tooltip.stories.ts

@@ -1,96 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import { 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 { TooltipModule } from './tooltip.module';
-
-export default {
-  title: 'Directive/Tooltip',
-  decorators: [withKnobs],
-} as Meta;
-
-export const fromString = () => ({
-  moduleMetadata: {
-    imports: [TooltipModule, 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
-    ),
-  },
-  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="bg-panel-50 padding-10 margin-10">
-                <button teta-button
-                         [palette]="'primary'"
-                         [tetaTooltip]="'You can get it now, right?'"
-                         [align]="align"
-                         [verticalAlign]="verticalAlign"
-                         [className]="'one'">
-                  <teta-icon [palette]="'background'" [name]="'settings'" class="margin-right-2"></teta-icon>
-                  Click me
-                </button>
-              </div>`,
-});
-
-export const fromTemplate = () => ({
-  moduleMetadata: {
-    imports: [TooltipModule, 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
-    ),
-  },
-  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="bg-panel-50 padding-10 margin-10">
-                <ng-template #hint>
-                  From template
-                </ng-template>
-                <button teta-button
-                         [palette]="'primary'"
-                         [tetaTooltip]="hint"
-                         [align]="align"
-                         [verticalAlign]="verticalAlign"
-                         [className]="'one'">
-                  <teta-icon [palette]="'background'" [name]="'settings'" class="margin-right-2"></teta-icon>
-                  Click me
-                </button>
-              </div>`,
-});

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

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

package/src/directive/tooltip/tooltip.directive.spec.ts

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