@tetacom/ng-components 1.0.21 → 1.0.25

package/src/component/pager/pager.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PagerComponent} from './pager/pager.component';
+import {IconModule} from '../icon/icon.module';
+
+@NgModule({
+  declarations: [PagerComponent],
+  exports: [PagerComponent],
+  imports: [
+    CommonModule,
+    IconModule
+  ]
+})
+export class PagerModule {
+}

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

@@ -0,0 +1,4 @@
+export * from './pager.module';
+export * from './pager/pager.component';
+export * from './model/pager-state';
+export * from './util/pager-util';

package/src/component/pager/util/pager-util.spec.ts

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

package/src/component/pager/util/pager-util.ts

@@ -0,0 +1,7 @@
+import {PagerState} from '../model/pager-state';
+
+export class PagerUtil {
+  static getPage<T>(data: T[], paging: PagerState): T[] {
+    return data.slice(paging.page * paging.pageSize, (paging.page + 1) * paging.pageSize);
+  }
+}

package/src/component/panel/panel/panel.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/component/panel/panel/panel.component.spec.ts

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

package/src/component/panel/panel/panel.component.ts

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'teta-panel',
+  templateUrl: './panel.component.html',
+  styleUrls: ['./panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('panel', [
+      transition('void => *', [
+        style({ opacity: '0' }),
+        animate(300, style({ opacity: '1' })),
+      ]),
+      transition('* => void', [animate(150, style({ opacity: '0' }))]),
+    ]),
+  ],
+})
+export class PanelComponent implements OnInit {
+  @Input() width = 500;
+
+  @HostBinding('@panel')
+  private get panel() {
+    return {
+      value: true,
+      params: { width: this.width },
+    };
+  }
+
+  @HostBinding('class.column') private readonly column = true;
+  @HostBinding('class.column_fixed') private readonly auto = true;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/component/panel/panel.module.ts

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

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

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

package/src/component/progress-bar/ProgressBar.stories.ts

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/angular/types-6-0';
+// eslint-disable-next-line id-blacklist
+import { number, withKnobs } from '@storybook/addon-knobs';
+import { ProgressBarModule } from './progress-bar.module';
+import { FormsModule } from '@angular/forms';
+
+export default {
+  title: 'Component/ProgressBar',
+  decorators: [withKnobs],
+  moduleMetadata: {
+    imports: [ProgressBarModule, FormsModule],
+  },
+} as Meta;
+
+export const sample = () => ({
+  moduleMetadata: {
+    imports: [ProgressBarModule, FormsModule],
+    entryComponents: [],
+  },
+  props: {
+    min: number('min', 0),
+    max: number('max', 100),
+    value: number('value', 50),
+    step: number('step', 0),
+  },
+  template: `<div class="bg-panel-50 padding-3" style="display: flex; width: 900px; height: 600px;">
+              <teta-progress-bar [min]="min" [max]="max" [step]="step" [(ngModel)]="value"></teta-progress-bar>
+            </div>`,
+});

package/src/component/progress-bar/progress-bar/progress-bar.component.html

@@ -0,0 +1,7 @@
+<div class="progress-bar" [style.width.%]="percent"></div>
+<div class="progress-slider"
+     [class.progress-slider_visible]="moving"
+     #progressSlider
+     (mousedown)="mousedown()"
+     (click)="click($event)"
+     [style.left.%]="percent"></div>

package/src/component/progress-bar/progress-bar/progress-bar.component.spec.ts

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

package/src/component/progress-bar/progress-bar/progress-bar.component.ts

@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  Inject,
+  Input,
+  OnInit,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const SLIDER_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ProgressBarComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'teta-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss'],
+  providers: [SLIDER_CONTROL_VALUE_ACCESSOR],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressBarComponent implements OnInit, ControlValueAccessor {
+  @Input() min = 0;
+  @Input() max = 100;
+  @Input() step = 0;
+
+  @ViewChild('progressSlider', { static: true })
+  private readonly slider: ElementRef;
+  @HostBinding('class.progress') private readonly progressBar = true;
+
+  percent: number;
+  moving: boolean;
+
+  set value(value: number) {
+    this._value = value;
+    this.percent = this.setPercentFromValue();
+    this._cdr.detectChanges();
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  get containerPosition() {
+    const rect = this._elementRef.nativeElement.getBoundingClientRect();
+    return { min: rect.x, max: rect.x + rect.width };
+  }
+
+  private _value;
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2,
+    private _cdr: ChangeDetectorRef,
+    @Inject(DOCUMENT) private _document: any
+  ) {}
+
+  @HostListener('document:mouseup', ['$event']) mouseup() {
+    this.moving = false;
+    this.restoreGlobalMouseEvents();
+    this.removeListener();
+  }
+
+  @HostListener('click', ['$event']) click = (event: MouseEvent) => {
+    this.getMousePositionInPercents(event);
+  };
+
+  onChange(_: any) {}
+
+  onTouched() {}
+
+  registerOnChange(fn: (_: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {}
+
+  writeValue(value: number): void {
+    this.value = value;
+  }
+
+  mousedown = () => {
+    this.moving = true;
+    this.preventGlobalMouseEvents();
+    this.addListener();
+  };
+
+  ngOnInit(): void {}
+
+  private mousemove = (event: MouseEvent) => {
+    event.preventDefault();
+    this.getMousePositionInPercents(event);
+  };
+
+  private getMousePositionInPercents = (event: MouseEvent) => {
+    const position = event.clientX - this.containerPosition.min;
+    let percent =
+      (100 / (this.containerPosition.max - this.containerPosition.min)) *
+      position;
+    percent = percent <= 0 ? 0 : percent > 100 ? 100 : percent;
+    this.setValue(this.getValueFromPercent(percent));
+  };
+
+  private setValue(value: number) {
+    this.value = value;
+    this.onChange(this.value);
+  }
+
+  private getValueFromPercent(percent: number): number {
+    if (percent === 0) {
+      return this.min;
+    }
+    if (percent === 100) {
+      return this.max;
+    }
+    const exactValue = this.min + (percent * (this.max - this.min)) / 100;
+    if (!this.step || this.step <= 0 || isNaN(this.step)) {
+      return exactValue;
+    }
+    return (
+      Math.round((exactValue - this.min) / this.step) * this.step + this.min
+    );
+  }
+
+  private preventGlobalMouseEvents = () => {
+    this._document.body.style['pointer-events'] = 'none';
+  };
+
+  private restoreGlobalMouseEvents = () => {
+    this._document.body.style['pointer-events'] = 'auto';
+  };
+
+  private addListener() {
+    this._document.addEventListener('mousemove', this.mousemove);
+  }
+
+  private removeListener() {
+    this._document.removeEventListener('mousemove', this.mousemove);
+  }
+
+  private setPercentFromValue() {
+    const range = this.max - this.min;
+    return (100 / range) * (this.value - this.min);
+  }
+}

package/src/component/progress-bar/progress-bar.module.ts

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

package/src/component/progress-bar/public-api.ts

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

package/src/component/property-grid/PropertyGrid.stories.ts

@@ -0,0 +1,110 @@
+import { Meta } from '@storybook/angular/types-6-0';
+import { withKnobs } from '@storybook/addon-knobs';
+import * as faker from 'faker';
+import { FilterType } from '../filter/enum/filter-type.enum';
+import { action } from '@storybook/addon-actions';
+import { PropertyGridModule } from './property-grid.module';
+import { TableColumn } from '../table/contract/table-column';
+import { IconModule } from '../icon/icon.module';
+
+export default {
+  title: 'Component/PropertyGrid',
+  decorators: [withKnobs],
+  moduleMetadata: {
+    imports: [PropertyGridModule],
+  },
+} as Meta;
+
+const item = () => ({
+  name: `${faker.name.firstName()} ${faker.name.lastName()}`,
+  date: faker.date.between(new Date(2010, 0, 1), new Date(2021, 0, 1)),
+  value: faker.datatype.number({ min: 0, max: 100 }),
+  summary: faker.datatype.number({ min: 0, max: 100000 }),
+  ram: faker.helpers.randomize([8, 16, 32, 64, 128]),
+  address: faker.address.streetAddress(),
+  state: faker.address.state(),
+  city: faker.address.city(),
+  zip: faker.address.zipCode(),
+});
+
+export const simplePropertyGrid = () => ({
+  moduleMetadata: {
+    imports: [PropertyGridModule, IconModule],
+    entryComponents: [],
+  },
+  props: {
+    item: item(),
+    columns,
+    dict,
+    log: (name, value) => {
+      action(name)(value);
+    },
+  },
+  template: `<div [tetaIconSprite]="'assets/icons.svg'"
+                  class="bg-panel-50 padding-3" style="display: flex; width: 900px; height: 600px;">
+              <teta-property-grid [dataItem]="item"
+                          [dict]="dict"
+                          [columns]="columns">
+              </teta-property-grid>
+            </div>`,
+});
+
+const dict = {
+  filterOptions: [
+    { id: 8, name: 8 },
+    { id: 16, name: 16 },
+    { id: 32, name: 32 },
+    { id: 64, name: 64 },
+    { id: 128, name: 128 },
+  ],
+};
+
+const columns = [
+  new TableColumn({
+    name: 'name',
+    flex: 1,
+    locked: true,
+    filterType: FilterType.string,
+  }),
+  new TableColumn({
+    name: 'date',
+    locked: true,
+    filterType: FilterType.date,
+  }),
+  new TableColumn({
+    name: 'value',
+    locked: true,
+    filterType: FilterType.number,
+  }),
+  new TableColumn({
+    name: 'summary',
+    filterType: FilterType.number,
+  }),
+  new TableColumn({
+    name: 'ram',
+    caption: 'RAM',
+    filterType: FilterType.list,
+  }),
+  new TableColumn({
+    name: 'location',
+    columns: [
+      new TableColumn({
+        name: 'city',
+        filterType: FilterType.string,
+      }),
+      new TableColumn({
+        name: 'state',
+        filterType: FilterType.string,
+      }),
+      new TableColumn({
+        name: 'address',
+        flex: 2,
+        filterType: FilterType.string,
+      }),
+      new TableColumn({
+        name: 'zip',
+        filterType: FilterType.string,
+      }),
+    ],
+  }),
+];

package/src/component/property-grid/default/date-item-default/date-item-default.component.html

@@ -0,0 +1 @@
+<p>date-item-default works!</p>

package/src/component/property-grid/default/date-item-default/date-item-default.component.spec.ts

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

package/src/component/property-grid/default/date-item-default/date-item-default.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'teta-date-item-default',
+  templateUrl: './date-item-default.component.html',
+  styleUrls: ['./date-item-default.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateItemDefaultComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/component/property-grid/default/list-item-default/list-item-default.component.html

@@ -0,0 +1 @@
+<p>list-item-default works!</p>

package/src/component/property-grid/default/list-item-default/list-item-default.component.spec.ts

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

package/src/component/property-grid/default/list-item-default/list-item-default.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'teta-list-item-default',
+  templateUrl: './list-item-default.component.html',
+  styleUrls: ['./list-item-default.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ListItemDefaultComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/component/property-grid/default/numeric-item-default/numeric-item-default.component.html

@@ -0,0 +1 @@
+<p>numeric-item-default works!</p>

package/src/component/property-grid/default/numeric-item-default/numeric-item-default.component.spec.ts

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

package/src/component/property-grid/default/numeric-item-default/numeric-item-default.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'teta-numeric-item-default',
+  templateUrl: './numeric-item-default.component.html',
+  styleUrls: ['./numeric-item-default.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NumericItemDefaultComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/component/property-grid/default/string-item-default/string-item-default.component.html

@@ -0,0 +1 @@
+<p>string-item-default works!</p>

package/src/component/property-grid/default/string-item-default/string-item-default.component.spec.ts

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

package/src/component/property-grid/default/string-item-default/string-item-default.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'teta-string-item-default',
+  templateUrl: './string-item-default.component.html',
+  styleUrls: ['./string-item-default.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StringItemDefaultComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}