@tetacom/ng-components 1.0.25 → 1.0.28

package/src/component/delimiter/delimiter/delimiter.component.ts

@@ -1,56 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  OnInit,
-} from '@angular/core';
-
-@Component({
-  selector: 'teta-delimiter',
-  templateUrl: './delimiter.component.html',
-  styleUrls: ['./delimiter.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DelimiterComponent implements OnInit {
-  @Input() direction: 'vertical' | 'horizontal' = 'vertical';
-  @Input() palette = 'text';
-  @Input() height = 32;
-  @Input() verticalMargin = 4;
-  @Input() horizontalMargin = 8;
-
-  @Input() class;
-
-  @HostBinding('class')
-  private get getClass(): string {
-    return [
-      this.class,
-      'delimiter',
-      this.getBgColor(),
-      this.direction === 'horizontal' ? 'display-flex' : 'display-inline-flex',
-    ].join(' ');
-  }
-
-  @HostBinding('style.height')
-  private get getHeight(): string {
-    return this.direction === 'vertical' ? '' : '1px';
-  }
-
-  @HostBinding('style.width')
-  private get getWidth(): string {
-    return this.direction === 'horizontal' ? '' : '1px';
-  }
-
-  @HostBinding('style.margin')
-  private get getMargin(): string {
-    return this.direction === 'horizontal' ? '8px' : '0';
-  }
-
-  constructor() {}
-
-  getBgColor() {
-    return this.palette ? `bg-${this.palette}-10` : '';
-  }
-
-  ngOnInit(): void {}
-}

package/src/component/delimiter/delimiter.module.ts

@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DelimiterComponent} from './delimiter/delimiter.component';
-
-@NgModule({
-  declarations: [DelimiterComponent],
-  exports: [DelimiterComponent],
-  imports: [
-    CommonModule
-  ]
-})
-export class DelimiterModule {
-}

package/src/component/delimiter/public-api.ts

@@ -1,2 +0,0 @@
-export * from './delimiter.module';
-export * from './delimiter/delimiter.component';

package/src/component/dropdown/Dropdown.stories.ts

@@ -1,167 +0,0 @@
-import {Meta} from '@storybook/angular/types-6-0';
-// eslint-disable-next-line id-blacklist
-import {boolean, optionsKnob, select, withKnobs} from '@storybook/addon-knobs';
-import {ButtonModule} from '../button/button.module';
-import {IconModule} from '../icon/icon.module';
-import {DropdownComponent} from './dropdown/dropdown.component';
-import {DropdownModule} from './dropdown.module';
-import {Align} from '../../common/enum/align.enum';
-import {VerticalAlign} from '../../common/enum/vertical-align.enum';
-
-export default {
-  title: 'Component/Dropdown',
-  decorators: [withKnobs],
-  // component: DropdownComponent,
-  moduleMetadata: {
-    imports: [DropdownModule]
-  },
-  argTypes: {
-    align: {
-      defaultValue: Align.right,
-      control: {
-        type: 'select',
-        options: [Align.left, Align.right, Align.center, Align.auto],
-        labels: ['left', 'right', 'center', 'auto'],
-      },
-    },
-    autoCloseIgnore: {
-      defaultValue: [2],
-      options: ['esc', 'enter', 'inside', 'outside'],
-      control: {
-        type: 'check'
-      },
-    },
-    transform: {
-      defaultValue: 0,
-      control: {
-        type: 'radio',
-        options: [0, 1],
-        labels: ['False', 'True']
-      }
-    },
-    autoClose: {
-      defaultValue: 1,
-      control: {
-        type: 'radio',
-        options: [0, 1],
-        labels: ['False', 'True']
-      }
-    },
-    appendToBody: {
-      defaultValue: 0,
-      control: {
-        type: 'radio',
-        options: [0, 1],
-        labels: ['False', 'True']
-      }
-    }
-  }
-} as Meta;
-
-const alignMap = new Map<VerticalAlign, string>().set(
-  VerticalAlign.bottom, 'bottom'
-).set(
-  VerticalAlign.top, 'top'
-).set(
-  VerticalAlign.center, 'center'
-).set(
-  VerticalAlign.auto, 'auto'
-);
-
-export const dropdownDirective = (args) => ({
-  moduleMetadata: {
-    imports: [DropdownModule, ButtonModule, IconModule]
-  },
-  props: {
-    ...args,
-    verticalAlign: [
-      VerticalAlign.bottom,
-      VerticalAlign.top,
-      VerticalAlign.center,
-      VerticalAlign.auto],
-    alignMap
-  },
-  template: `<div class="padding-10 bg-panel-50 row"
-                  style="width: 500px;"
-                  [style.transform]="transform ? 'translate(100px, 100px)' : ''"
-                  [style.margin]="transform ? '' : '100px 100px'"
-                  [tetaIconSprite]="'assets/icons.svg'">
-                  <div style="position: fixed; top: 0; left: 0;">Fixed</div>
-                  <div style="position: fixed; top: 0; right: 0;transform: translateX(0px)">Fixed trans</div>
-    <div tetaDropdown
-          class="margin-right-4"
-          *ngFor="let valign of verticalAlign"
-          [align]="align"
-          [verticalAlign]="valign"
-          [appendToBody]="appendToBody"
-          [autoClose]="autoClose"
-          [autoCloseIgnore]="autoCloseIgnore">
-      <button teta-button tetaDropdownHead [palette]="'primary'">
-        {{alignMap.get(valign)}}
-      </button>
-      <div tetaDropdownContent class="list scrollable" style="width: 200px">
-        <ng-container *ngFor="let i of [1,2,3]">
-          <div class="list-item">
-            <teta-icon [name]="'user'" [palette]="'text'" class="margin-right-2"></teta-icon>Jerome Bell
-          </div>
-          <div class="list-item">
-            <teta-icon [name]="'calendar'" [palette]="'text'" class="margin-right-2"></teta-icon>Courtney Henry
-          </div>
-          <div class="list-item">
-            <teta-icon [name]="'eye'" [palette]="'text'" class="margin-right-2"></teta-icon>Wade Warren
-          </div>
-          <div class="list-item">
-            <teta-icon [name]="'folder'" [palette]="'text'" class="margin-right-2"></teta-icon>Ralph Edwards
-          </div>
-          <div class="list-item">
-            <teta-icon [name]="'map'" [palette]="'text'" class="margin-right-2"></teta-icon>Marvin McKinney
-          </div>
-        </ng-container>
-      </div>
-    </div>
-  </div>`
-});
-export const dropdownComponent = (args) => ({
-  moduleMetadata: {
-    imports: [DropdownModule, ButtonModule, IconModule]
-  },
-  props: {
-    ...args,
-    verticalAlign: [
-      VerticalAlign.bottom,
-      VerticalAlign.top,
-      VerticalAlign.center,
-      VerticalAlign.auto],
-  },
-  template: `<div class="padding-10 bg-panel-50"
-                  [style.transform]="transform ? 'translate(100px, 100px)' : ''"
-                  [tetaIconSprite]="'assets/icons.svg'">
-    <teta-dropdown *ngFor="let valign of verticalAlign"
-                    [align]="align"
-                    [verticalAlign]="valign"
-                    [appendToBody]="appendToBody"
-                    [autoClose]="autoClose"
-                    [autoCloseIgnore]="autoCloseIgnore">
-      <button teta-button tetaDropdownHead [palette]="'primary'">
-        Click to open
-      </button>
-      <div tetaDropdownContent class="list overflow-auto" style="width: 200px">
-        <div class="list-item">
-          <teta-icon [name]="'user'" [palette]="'text'" class="margin-right-2"></teta-icon>Jerome Bell
-        </div>
-        <div class="list-item">
-          <teta-icon [name]="'calendar'" [palette]="'text'" class="margin-right-2"></teta-icon>Courtney Henry
-        </div>
-        <div class="list-item">
-          <teta-icon [name]="'eye'" [palette]="'text'" class="margin-right-2"></teta-icon>Wade Warren
-        </div>
-        <div class="list-item">
-          <teta-icon [name]="'folder'" [palette]="'text'" class="margin-right-2"></teta-icon>Ralph Edwards
-        </div>
-        <div class="list-item">
-          <teta-icon [name]="'map'" [palette]="'text'" class="margin-right-2"></teta-icon>Marvin McKinney
-        </div>
-      </div>
-    </teta-dropdown>
-  </div>`
-});

package/src/component/dropdown/dropdown/dropdown.component.html

@@ -1 +0,0 @@
-<ng-content select="[tetaDropdownHead]"></ng-content>

package/src/component/dropdown/dropdown/dropdown.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DropdownComponent } from './dropdown.component';
-
-describe('DropdownComponent', () => {
-  let component: DropdownComponent;
-  let fixture: ComponentFixture<DropdownComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ DropdownComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DropdownComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/component/dropdown/dropdown/dropdown.component.ts

@@ -1,41 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Inject,
-  NgZone,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { DropdownBase } from '../dropdown-base';
-
-@Component({
-  selector: 'teta-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DropdownComponent
-  extends DropdownBase
-  implements OnInit, OnDestroy
-{
-  constructor(
-    protected override _cdr: ChangeDetectorRef,
-    @Inject(DOCUMENT) protected override _document: any,
-    protected override _elementRef: ElementRef<HTMLElement>,
-    protected override _zone: NgZone,
-    protected override _renderer: Renderer2
-  ) {
-    super(_cdr, _document, _elementRef, _zone, _renderer);
-  }
-
-  ngOnInit(): void {}
-
-  ngOnDestroy(): void {
-    this.closeDropdown();
-    this._alive = false;
-  }
-}

package/src/component/dropdown/dropdown-base.spec.ts

@@ -1,7 +0,0 @@
-import { DropdownBase } from './dropdown-base';
-
-describe('DropdownBase', () => {
-  it('should create an instance', () => {
-    expect(new DropdownBase()).toBeTruthy();
-  });
-});

package/src/component/dropdown/dropdown-base.ts

@@ -1,225 +0,0 @@
-import {
-  ChangeDetectorRef,
-  ContentChild,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  NgZone,
-  Output,
-  Renderer2,
-} from '@angular/core';
-import {DomUtil} from '../../common/util/dom-util';
-import {PositionUtil} from '../../common/util/position-util';
-import {Align} from '../../common/enum/align.enum';
-import {VerticalAlign} from '../../common/enum/vertical-align.enum';
-import {DropdownHeadDirective} from './dropdown-head.directive';
-import {DropdownContentDirective} from './dropdown-content.directive';
-import {AutoCloseIgnoreCase} from '../../common/contract/auto-close-ignore-case';
-import {IRect} from '../../common/contract/i-rect';
-import {takeWhile, throttleTime} from 'rxjs/operators';
-
-@Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class DropdownBase {
-  @Input() align: Align = Align.left;
-  @Input() verticalAlign: VerticalAlign = VerticalAlign.bottom;
-  @Input() appendToBody: boolean;
-  @Input() disabled: boolean;
-  @Input() shadow = true;
-  @Input() className: string | string[];
-
-  @Input()
-  set open(val: boolean) {
-    if (val != null && val !== this._open && !this.disabled) {
-      if (val) {
-        this.openDropdown();
-      } else {
-        this.closeDropdown();
-      }
-    }
-  }
-
-  get open(): boolean {
-    return this._open;
-  }
-
-  get container() {
-    return this.appendToBody
-      ? this._document.body
-      : this._elementRef.nativeElement;
-  }
-
-  @Output() openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-  @Input() autoClose = true;
-  @Input() autoCloseIgnore: Array<AutoCloseIgnoreCase> = ['inside'];
-
-  @ContentChild(DropdownHeadDirective, {
-    static: false,
-    read: ElementRef,
-  })
-  protected _head: ElementRef;
-
-  @ContentChild(DropdownContentDirective, {static: false})
-  protected _content: DropdownContentDirective;
-
-  protected _body: HTMLElement | null = null;
-  protected _open = false;
-  protected _alive = true;
-
-  constructor(
-    protected _cdr: ChangeDetectorRef,
-    protected _document: any,
-    protected _elementRef: ElementRef<HTMLElement>,
-    protected _zone: NgZone,
-    protected _renderer: Renderer2
-  ) {
-    this._zone.onStable
-      .pipe(
-        takeWhile((_) => this._alive),
-        throttleTime(10, undefined, {trailing: true})
-      )
-      .subscribe((_) => {
-        if (this._head?.nativeElement && this._body) {
-          setTimeout(() => {
-            if (this._head?.nativeElement && this._body) {
-              this.setPosition(this._head.nativeElement, this._body);
-            }
-          });
-        }
-      });
-  }
-
-  @HostListener('click', ['$event']) click(event: MouseEvent): void {
-    if (this.open) {
-      if (!DomUtil.clickedInside(this._body, event)) {
-        this.closeDropdown();
-      }
-    } else {
-      if (DomUtil.clickedInside(this._head.nativeElement, event)) {
-        this.openDropdown();
-      }
-    }
-  }
-
-  @HostListener('document:click', ['$event']) documentClick(
-    event: MouseEvent
-  ): void {
-    if (
-      !this.open ||
-      !this.autoClose ||
-      event.detail === 0 ||
-      DomUtil.clickedInside(this._head.nativeElement, event) ||
-      DomUtil.clickedInside(this._body, event)
-    ) {
-      return;
-    }
-    if (DomUtil.clickedInside(this._body, event)) {
-      if (this.autoCloseIgnore.indexOf('inside') < 0) {
-        this.closeDropdown();
-      }
-    } else {
-      if (this.autoCloseIgnore.indexOf('outside') < 0) {
-        this.closeDropdown();
-      }
-    }
-  }
-
-  @HostListener('window:keyup', ['$event']) keyUp(event: KeyboardEvent): void {
-    if (
-      !this.open ||
-      !this.autoClose ||
-      ['esc', 'enter'].every(
-        (_: 'esc' | 'enter') => this.autoCloseIgnore.indexOf(_) >= 0
-      )
-    ) {
-      return;
-    }
-    if (
-      (event.code === 'Escape' && this.autoCloseIgnore.indexOf('esc') < 0) ||
-      (event.code === 'Enter' && this.autoCloseIgnore.indexOf('enter') < 0)
-    ) {
-      this.closeDropdown();
-    }
-  }
-
-  protected closeDropdown(): void {
-    if (this.open && this._body && this.container.contains(this._body)) {
-      this._renderer.removeChild(this.container, this._body);
-      this._open = false;
-      this._body = null;
-      this.openChange.emit(this.open);
-    }
-  }
-
-  private openDropdown(): void {
-    if (this._open || !this._content || this.disabled) {
-      return;
-    }
-    this._open = true;
-    this.openChange.emit(this.open);
-    const renderer = this._renderer;
-    const content = this._content.nativeElement;
-    const container = (this._body =
-      this._body || renderer.createElement('div'));
-    renderer.addClass(container, 'dropdown');
-    if (this.className != null) {
-      if (this.className instanceof Array && this.className.length > 0) {
-        this.className.forEach((_) => {
-          renderer.addClass(container, _);
-        });
-      }
-      if (typeof this.className === 'string') {
-        renderer.addClass(container, this.className);
-      }
-    }
-
-    renderer.appendChild(container, content);
-    renderer.appendChild(this.container, container);
-
-    this.setPosition(this._head.nativeElement, this._body);
-  }
-
-  private setPosition(container: HTMLElement, target: HTMLElement): void {
-    const containerPosition = container.getBoundingClientRect();
-    const targetPosition = target.getBoundingClientRect();
-
-    const rect: IRect = {
-      bottom: containerPosition.bottom,
-      top: containerPosition.top,
-      left: containerPosition.left,
-      right: containerPosition.right,
-    };
-
-    const targetRect: IRect = {
-      bottom: targetPosition.bottom,
-      top: targetPosition.top,
-      left: targetPosition.left,
-      right: targetPosition.right,
-    };
-
-    const targetTransformedParent = DomUtil.findTransformedParent(target);
-    let parentPosition = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    };
-    if (targetTransformedParent) {
-      parentPosition = targetTransformedParent.getBoundingClientRect();
-    }
-
-    const position = PositionUtil.getPosition(
-      rect,
-      targetRect,
-      this.align,
-      this.verticalAlign,
-      0,
-      0,
-      parentPosition
-    );
-
-    PositionUtil.setElementPosition(target, position);
-  }
-}

package/src/component/dropdown/dropdown-content.directive.spec.ts

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

package/src/component/dropdown/dropdown-content.directive.ts

@@ -1,12 +0,0 @@
-import {Directive, ElementRef} from '@angular/core';
-
-@Directive({
-  selector: '[tetaDropdownContent]'
-})
-export class DropdownContentDirective {
-  nativeElement: HTMLElement;
-
-  constructor(private _elementRef: ElementRef<HTMLElement>) {
-    this.nativeElement = _elementRef.nativeElement;
-  }
-}

package/src/component/dropdown/dropdown-head.directive.spec.ts

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

package/src/component/dropdown/dropdown-head.directive.ts

@@ -1,9 +0,0 @@
-import {Directive, Optional, TemplateRef} from '@angular/core';
-
-@Directive({
-  selector: '[tetaDropdownHead]'
-})
-export class DropdownHeadDirective {
-  constructor(@Optional() public template: TemplateRef<any>) {
-  }
-}

package/src/component/dropdown/dropdown.directive.spec.ts

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

package/src/component/dropdown/dropdown.directive.ts

@@ -1,39 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-  Inject,
-  NgZone, OnDestroy,
-  OnInit,
-  Renderer2
-} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
-import {DropdownBase} from './dropdown-base';
-
-@Directive({
-  selector: '[tetaDropdown]'
-})
-export class DropdownDirective extends DropdownBase implements OnInit, OnDestroy, AfterViewInit {
-  constructor(protected override _cdr: ChangeDetectorRef,
-              @Inject(DOCUMENT) protected override _document: any,
-              protected override _elementRef: ElementRef<HTMLElement>,
-              protected override _zone: NgZone,
-              protected override _renderer: Renderer2) {
-    super(_cdr, _document, _elementRef, _zone, _renderer);
-  }
-
-  ngOnInit(): void {
-  }
-
-  ngOnDestroy(): void {
-    this.closeDropdown();
-    this._alive = false;
-  }
-
-  ngAfterViewInit(): void {
-    if (this._content) {
-      this._renderer.removeChild(this._content.nativeElement.parentNode, this._content.nativeElement);
-    }
-  }
-}

package/src/component/dropdown/dropdown.module.ts

@@ -1,26 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {DropdownComponent} from './dropdown/dropdown.component';
-import {DropdownHeadDirective} from './dropdown-head.directive';
-import {DropdownContentDirective} from './dropdown-content.directive';
-import {DropdownDirective} from './dropdown.directive';
-
-@NgModule({
-  declarations: [
-    DropdownComponent,
-    DropdownHeadDirective,
-    DropdownContentDirective,
-    DropdownDirective
-  ],
-  exports: [
-    DropdownComponent,
-    DropdownHeadDirective,
-    DropdownContentDirective,
-    DropdownDirective
-  ],
-  imports: [
-    CommonModule
-  ]
-})
-export class DropdownModule {
-}

package/src/component/dropdown/public-api.ts

@@ -1,5 +0,0 @@
-export * from './dropdown.module';
-export * from './dropdown/dropdown.component';
-export * from './dropdown-content.directive';
-export * from './dropdown-head.directive';
-export * from './dropdown.directive';

package/src/component/dynamic-component/dynamic-component.module.ts

@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {PopupContentComponent} from './popup-content/popup-content.component';
-
-@NgModule({
-  declarations: [PopupContentComponent],
-  exports: [PopupContentComponent],
-  imports: [
-    CommonModule
-  ]
-})
-export class DynamicComponentModule {
-}