@tetacom/ng-components 1.0.24 → 1.0.25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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