@tetacom/ng-components 1.0.25 → 1.0.26

package/src/component/date-picker/time-part-control/time-part-control.component.ts

@@ -1,86 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-export const TIME_PART_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TimePartControlComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'teta-time-part-control',
-  templateUrl: './time-part-control.component.html',
-  styleUrls: ['./time-part-control.component.scss'],
-  providers: [TIME_PART_CONTROL_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TimePartControlComponent implements OnInit, ControlValueAccessor {
-  @Input() min = 0;
-  @Input() max = 59;
-  @Input() disabled: boolean;
-
-  private _value: number;
-
-  set value(value: number) {
-    this._value = value;
-    this.onChange(this._value);
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  constructor(private _cdr: ChangeDetectorRef) {}
-
-  up() {
-    this.value = this.value < this.max ? this.value + 1 : this.min;
-  }
-
-  down() {
-    this.value = this.value > this.min ? this.value - 1 : this.max;
-  }
-
-  scroll = (e: any) => {
-    const delta = e?.deltaY ?? e;
-
-    if (e instanceof WheelEvent) {
-      e.preventDefault();
-    }
-    if (delta > 0) {
-      this.down();
-    } else {
-      this.up();
-    }
-  };
-
-  ngOnInit() {}
-
-  writeValue(model: number) {
-    this._value = model;
-    this._cdr.markForCheck();
-  }
-
-  onChange(_: any) {}
-
-  onTouched() {}
-
-  registerOnChange(fn: (_: any) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this._cdr.markForCheck();
-  }
-}

package/src/component/date-picker/util/date-picker-util.spec.ts

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

package/src/component/date-picker/util/date-picker-util.ts

@@ -1,227 +0,0 @@
-import { DatePeriod } from '../model/date-period';
-import { DayModel } from '../model/day-model';
-
-export class DatePickerUtil {
-  static getFirstDay(
-    month: number,
-    year: number,
-    firstDayOfWeek: number
-  ): Date {
-    const lastDay = new Date(year, month, 0);
-    const lastDayIndex =
-      lastDay.getDay() >= firstDayOfWeek
-        ? lastDay.getDay() - firstDayOfWeek
-        : lastDay.getDay() + 7 - firstDayOfWeek;
-    return new Date(year, month - 1, lastDay.getDate() - lastDayIndex);
-  }
-
-  static getPickerDays(
-    date: Date,
-    firstDayOfWeek: number,
-    minDate: Date,
-    maxDate: Date,
-    disabledDates: Date[],
-    disabledDays: number[],
-    disabledPeriods: DatePeriod[]
-  ): DayModel[] {
-    const days = [];
-    const firstDay = DatePickerUtil.getFirstDay(
-      date.getMonth(),
-      date.getFullYear(),
-      firstDayOfWeek
-    );
-    for (let i = 0; i < 6 * 7; i++) {
-      const dat = new Date(firstDay);
-      dat.setDate(dat.getDate() + i);
-      days.push(
-        new DayModel({
-          date: dat,
-          disabled: DatePickerUtil.isDateInvalid(
-            dat,
-            minDate,
-            maxDate,
-            disabledDates,
-            disabledDays,
-            disabledPeriods
-          ),
-          today: DatePickerUtil.isToday(dat),
-          isCurrentMonth: dat.getMonth() === date.getMonth(),
-          selected:
-            dat.getFullYear() === date.getFullYear() &&
-            dat.getMonth() === date.getMonth() &&
-            dat.getDate() === date.getDate(),
-          weekend: dat.getDay() === 0 || dat.getDay() === 6,
-        })
-      );
-    }
-    return days;
-  }
-
-  static isDateInvalid(
-    dat: Date,
-    minDate: Date,
-    maxDate: Date,
-    disabledDates: Date[],
-    disabledDays: number[],
-    disabledPeriods: DatePeriod[]
-  ): boolean {
-    return (
-      DatePickerUtil.isDayDisabled(dat, disabledDays) ||
-      DatePickerUtil.isDateDisabled(dat, disabledDates) ||
-      DatePickerUtil.isDateInDisabledPeriod(dat, disabledPeriods) ||
-      DatePickerUtil.isMaxInvalid(dat, maxDate) ||
-      DatePickerUtil.isMinInvalid(dat, minDate)
-    );
-  }
-
-  static isDayDisabled(dat: Date, disabledDays: number[]): boolean {
-    if (
-      dat === null ||
-      dat === undefined ||
-      disabledDays === null ||
-      disabledDays === undefined ||
-      disabledDays.length < 1
-    ) {
-      return false;
-    }
-    return disabledDays.indexOf(dat.getDay()) >= 0;
-  }
-
-  static isMinInvalid(dat: Date, minDate: Date): boolean {
-    if (
-      dat === null ||
-      dat === undefined ||
-      minDate === null ||
-      minDate === undefined
-    ) {
-      return false;
-    }
-    return minDate.getTime() > dat.getTime();
-  }
-
-  static isMaxInvalid(dat: Date, maxDate: Date): boolean {
-    if (
-      dat === null ||
-      dat === undefined ||
-      maxDate === null ||
-      maxDate === undefined
-    ) {
-      return false;
-    }
-    return maxDate.getTime() < dat.getTime();
-  }
-
-  static isDateInDisabledPeriod(
-    dat: Date,
-    disabledPeriods: DatePeriod[]
-  ): boolean {
-    if (
-      dat === null ||
-      dat === undefined ||
-      disabledPeriods === null ||
-      disabledPeriods === undefined ||
-      disabledPeriods.length < 1
-    ) {
-      return false;
-    }
-    return disabledPeriods.some(
-      (d: DatePeriod) =>
-        d !== null &&
-        d !== undefined &&
-        d.start !== null &&
-        d.start !== undefined &&
-        d.end !== null &&
-        d.end !== undefined &&
-        d.start.getTime() <= dat.getTime() &&
-        d.end.getTime() >= dat.getTime()
-    );
-  }
-
-  static isDateDisabled(dat: Date, disabledDates: Date[]): boolean {
-    if (
-      disabledDates === null ||
-      disabledDates === undefined ||
-      disabledDates.length < 1 ||
-      dat === null ||
-      dat === undefined
-    ) {
-      return false;
-    }
-    return disabledDates.some(
-      (d: Date) =>
-        d !== null &&
-        d !== undefined &&
-        d.getFullYear() === dat.getFullYear() &&
-        d.getMonth() === dat.getMonth() &&
-        d.getDate() === dat.getDate()
-    );
-  }
-
-  static isToday(dat: Date): boolean {
-    if (dat === null || dat === undefined) {
-      return false;
-    }
-    const today = new Date();
-    return (
-      dat.getFullYear() === today.getFullYear() &&
-      dat.getMonth() === today.getMonth() &&
-      dat.getDate() === today.getDate()
-    );
-  }
-
-  static scrollMonth(delta: number, date: Date) {
-    const res = new Date(date);
-    let month = date.getMonth();
-    let year = date.getFullYear();
-    if (delta > 0) {
-      if (month === 11) {
-        month = 0;
-        year++;
-      } else {
-        month++;
-      }
-    } else {
-      if (month === 0) {
-        month = 11;
-        year--;
-      } else {
-        month--;
-      }
-    }
-    res.setFullYear(year, month);
-    return res;
-  }
-
-  static scrollYear(delta: number, date: Date) {
-    const res = new Date(date);
-    let year = date.getFullYear();
-    if (delta > 0) {
-      year++;
-    } else {
-      year--;
-    }
-    res.setFullYear(year);
-    return res;
-  }
-
-  // static isSelected(date: Date, selectedDate: Date): boolean {
-  //   if (date === null || date === undefined || selectedDate === null || selectedDate === undefined) {
-  //     return false;
-  //   }
-  //   return date.getFullYear() === selectedDate.getFullYear()
-  //     && date.getMonth() === selectedDate.getMonth()
-  //     && date.getDate() === selectedDate.getDate();
-  // }
-
-  // static nextMonth(date: Date): Date {
-  //   const dt = new Date(date);
-  //   dt.setMonth(dt.getMonth() + 1);
-  //   return dt;
-  // }
-
-  // static prevMonth(date: Date): Date {
-  //   const dt = new Date(date);
-  //   dt.setMonth(dt.getMonth() - 1);
-  //   return dt;
-  // }
-}

package/src/component/date-picker/year-select/year-select.component.html

@@ -1,11 +0,0 @@
-<div class="list row_auto margin-top-2"
-     (wheel)="scrollYearSelector($event);">
-  <div class="list-item list-item_interactive"
-       [class.list-item_active]="year === currentYear"
-       [class.list-item_disabled]="isYearDisabled(year)"
-       (click)="setYear($event, year)"
-       (dblclick)="applyYear($event, year)"
-       *ngFor="let year of years">
-    {{year}}
-  </div>
-</div>

package/src/component/date-picker/year-select/year-select.component.scss

@@ -1,3 +0,0 @@
-:host {
-  display: flex;
-}

package/src/component/date-picker/year-select/year-select.component.spec.ts

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

package/src/component/date-picker/year-select/year-select.component.ts

@@ -1,229 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { fromEvent } from 'rxjs';
-import { takeWhile, tap } from 'rxjs/operators';
-import { PickerTouchService } from '../service/picker-touch.service';
-
-@Component({
-  selector: 'teta-year-select',
-  templateUrl: './year-select.component.html',
-  styleUrls: ['./year-select.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class YearSelectComponent implements OnInit, OnDestroy, AfterViewInit {
-  @Input() currentYear: number;
-  @Input() today: Date;
-  @Input() size = 8;
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() allowableRange: number[] = [1900, 2100];
-  @Output() yearSelected = new EventEmitter<number>();
-  @Output() yearApplied = new EventEmitter<number>();
-
-  minYearDate: Date;
-  maxYearDate: Date;
-  years: number[];
-  minYearList: number[];
-  maxYearList: number[];
-  decreaseInterval: number;
-  increaseInterval: number;
-  private _alive = true;
-
-  constructor(
-    private _cdr: ChangeDetectorRef,
-    private _pickerTouchService: PickerTouchService,
-    private _elementRef: ElementRef
-  ) {}
-
-  ngOnInit() {
-    const [minRange, maxRange] = this.allowableRange;
-    this.minYearDate = new Date(minRange, 0, 1);
-    this.maxYearDate = new Date(maxRange, 11, 31);
-    this.initMinYearList();
-    this.initMaxYearList();
-    this.initYearSelector(this.currentYear);
-  }
-
-  ngAfterViewInit() {
-    const touchMove$ = fromEvent(
-      this._elementRef.nativeElement.parentElement,
-      'touchmove'
-    );
-
-    touchMove$
-      .pipe(
-        takeWhile((_) => this._alive),
-        tap((e: TouchEvent) => {
-          this._pickerTouchService.onTouchMove(e);
-        })
-      )
-      .subscribe();
-
-    this._pickerTouchService.step
-      .pipe(
-        takeWhile((_) => this._alive),
-        tap((_) => {
-          this.shiftYearSelector(_);
-          this._cdr.detectChanges();
-        })
-      )
-      .subscribe();
-  }
-
-  ngOnDestroy() {
-    window.clearInterval(this.decreaseInterval);
-    window.clearInterval(this.increaseInterval);
-    this._alive = false;
-  }
-
-  scrollYearSelector = (e: WheelEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const step = e.deltaY > 0 ? 1 : -1;
-    this.shiftYearSelector(step);
-  };
-
-  setYear = (e: any, year: number) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.isYearDisabled(year)) {
-      this.yearSelected.emit(year);
-    }
-  };
-
-  applyYear = (e: any, year: number) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.isYearDisabled(year)) {
-      this.yearApplied.emit(year);
-    }
-  };
-
-  initYearSelector = (year: number) => {
-    if (!year) {
-      year = this.today.getFullYear();
-    }
-    this.years = [year];
-    let direction = false;
-    for (let i = 1; i < this.size; i++) {
-      if (direction) {
-        this.years.unshift(this.years[0] - 1);
-      } else {
-        this.years.push(this.years[this.years.length - 1] + 1);
-      }
-      direction = !direction;
-    }
-    this.checkRanges();
-  };
-
-  initMinYearList = () => {
-    this.minYearList = [this.minYearDate.getFullYear()];
-    for (let i = 1; i < this.size; i++) {
-      this.minYearList.push(this.minYearList[this.minYearList.length - 1] + 1);
-    }
-  };
-
-  initMaxYearList = () => {
-    this.maxYearList = [this.maxYearDate.getFullYear()];
-    for (let i = 1; i < this.size; i++) {
-      this.maxYearList.unshift(this.maxYearList[0] - 1);
-    }
-  };
-
-  checkRanges = () => {
-    if (
-      this.years.some((year) => {
-        const dat = new Date(year, 0, 1);
-        return this.isMinYear(dat);
-      })
-    ) {
-      this.years = this.minYearList;
-    }
-    if (
-      this.years.some((year) => {
-        const dat = new Date(year, 0, 1);
-        return this.isMaxYear(dat);
-      })
-    ) {
-      this.years = this.maxYearList;
-    }
-  };
-
-  shiftYearSelector = (step: number = 0) => {
-    this.years = this.years.map((year) => year + step);
-    this.checkRanges();
-  };
-
-  decreaseYearSelector = (step: number = 3) => {
-    const dat = new Date(this.years[0] - step, 0, 1);
-    if (this.isMinYear(dat)) {
-      this.years = this.minYearList;
-      return;
-    }
-
-    this.years = this.years.map((year) => year - step);
-  };
-
-  increaseYearSelector = (step: number = 3) => {
-    const dat = new Date(this.years[this.years.length - 1] + step, 0, 1);
-    if (this.isMaxYear(dat)) {
-      this.years = this.maxYearList;
-      return;
-    }
-    this.years = this.years.map((year) => year + step);
-  };
-
-  // stopLongDecrease = () => {
-  //   window.clearInterval(this.decreaseInterval);
-  // };
-  //
-  // stopLongIncrease = () => {
-  //   window.clearInterval(this.increaseInterval);
-  // };
-
-  isMinYear = (dat: Date): boolean => {
-    if (!this.minYearDate || !(this.minYearDate instanceof Date) || !dat) {
-      return false;
-    }
-    return this.minYearDate.getFullYear() > dat.getFullYear();
-  };
-
-  isMaxYear = (dat: Date): boolean => {
-    if (!this.maxYearDate || !(this.maxYearDate instanceof Date) || !dat) {
-      return false;
-    }
-    return this.maxYearDate.getFullYear() < dat.getFullYear();
-  };
-
-  isYearDisabled = (year: number) => {
-    if (year) {
-      const dat = new Date(year, 0, 1);
-      return this.isMaxInvalid(dat) || this.isMinInvalid(dat);
-    }
-    return false;
-  };
-
-  isMinInvalid = (dat: Date): boolean => {
-    if (!this.minDate || !(this.minDate instanceof Date) || !dat) {
-      return false;
-    }
-    return this.minDate.getFullYear() > dat.getFullYear();
-  };
-
-  isMaxInvalid = (dat: Date): boolean => {
-    if (!this.maxDate || !(this.maxDate instanceof Date) || !dat) {
-      return false;
-    }
-    return this.maxDate.getFullYear() < dat.getFullYear();
-  };
-}

package/src/component/delimiter/Delimiter.stories.ts

@@ -1,54 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-// eslint-disable-next-line id-blacklist
-import { withKnobs } from '@storybook/addon-knobs';
-import { ButtonModule } from '../button/button.module';
-import { IconModule } from '../icon/icon.module';
-import { DelimiterComponent } from './delimiter/delimiter.component';
-import { DelimiterModule } from './delimiter.module';
-
-export default {
-  title: 'Component/Delimiter',
-  decorators: [withKnobs],
-  component: DelimiterComponent,
-  moduleMetadata: {
-    imports: [DelimiterModule],
-  },
-} as Meta;
-
-export const vertical = () => ({
-  moduleMetadata: {
-    imports: [DelimiterModule, ButtonModule, IconModule],
-  },
-  template: `<div class="padding-4 bg-panel-50 row" style="position: absolute; top: 50%;" [tetaIconSprite]="'assets/icons.svg'">
-    <button teta-button [palette]="'primary'">
-      <teta-icon [name]="'settings'"></teta-icon>
-    </button>
-    <teta-delimiter [direction]="'vertical'" class="height-4"></teta-delimiter>
-    <button teta-button [palette]="'primary'" [view]="'ghost'">
-      <teta-icon [name]="'add'"></teta-icon>
-    </button>
-    <teta-delimiter [direction]="'vertical'" class="height-4"></teta-delimiter>
-    <button teta-button [palette]="'red'" [view]="'ghost'">
-      <teta-icon [name]="'delete'"></teta-icon>
-    </button>
-  </div>`,
-});
-
-export const horizontal = () => ({
-  moduleMetadata: {
-    imports: [DelimiterModule, ButtonModule, IconModule],
-  },
-  template: `<div class="padding-4 bg-panel-50" style="position: absolute; top: 50%;" [tetaIconSprite]="'assets/icons.svg'">
-    <button teta-button [palette]="'primary'">
-      <teta-icon [name]="'settings'"></teta-icon>
-    </button>
-    <teta-delimiter [direction]="'horizontal'"></teta-delimiter>
-    <button teta-button [palette]="'primary'" [view]="'ghost'">
-      <teta-icon [name]="'add'"></teta-icon>
-    </button>
-    <teta-delimiter [direction]="'horizontal'"></teta-delimiter>
-    <button teta-button [palette]="'red'" [view]="'ghost'">
-      <teta-icon [name]="'delete'"></teta-icon>
-    </button>
-  </div>`,
-});

package/src/component/delimiter/delimiter/delimiter.component.scss

@@ -1,3 +0,0 @@
-:host.delimiter {
-  flex-shrink: 0;
-}

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

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