@tetacom/ng-components 1.0.25 → 1.0.28

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

@@ -1,278 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { PickerLocaleModel } from '../model/picker-locale-model';
-import { PickerLocaleService } from '../service/picker-locale.service';
-import { takeWhile } from 'rxjs/operators';
-import { DatePickerMode } from '../model/date-picker-mode.enum';
-
-export const MONTH_PICKER_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => MonthPickerComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'teta-month-picker',
-  templateUrl: './month-picker.component.html',
-  styleUrls: ['./month-picker.component.scss'],
-  providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MonthPickerComponent
-  implements ControlValueAccessor, OnInit, OnDestroy
-{
-  @Input() disabled: boolean;
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() showToday = true;
-  @Input() appendToBody = true;
-
-  @HostBinding('class.datepicker_open') showPicker: boolean;
-  @HostBinding('class.datepicker') private readonly classDatepicker = true;
-  @HostBinding('tabindex') private readonly tabindex = 0;
-
-  datePickerModeEnum = DatePickerMode;
-
-  locale: PickerLocaleModel;
-  today: Date;
-
-  displayMode: DatePickerMode = DatePickerMode.month;
-
-  _value: Date | null = null;
-  _currentMonth: number | null;
-  _currentYear: number | null;
-
-  get value(): any {
-    return this._value;
-  }
-
-  set value(v: any) {
-    if (v !== this._value) {
-      this._value = v;
-      this.onChange(v);
-    }
-  }
-
-  get currentMonth(): number | null {
-    return this._currentMonth;
-  }
-
-  set currentMonth(v: number | null) {
-    if (v === null || v === undefined || v < 0 || v > 11) {
-      return;
-    }
-    if (v !== this._currentMonth) {
-      this._currentMonth = v;
-    }
-  }
-
-  get currentYear(): number | null {
-    return this._currentYear;
-  }
-
-  set currentYear(v: number | null) {
-    if (v !== this._currentYear) {
-      this._currentYear = v;
-    }
-  }
-
-  private _alive = true;
-
-  constructor(
-    public localeService: PickerLocaleService,
-    private _cdr: ChangeDetectorRef
-  ) {
-    localeService.locale
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((locale: PickerLocaleModel) => {
-        this.locale = locale;
-      });
-    this.setDefaults();
-  }
-
-  writeValue(value: any) {
-    this._value = value;
-    this.initPicker(value);
-  }
-
-  initPicker(date: Date) {
-    if (!date || !(date instanceof Date)) {
-      this.setDefaults();
-    } else {
-      this.currentMonth = date.getMonth();
-      this.currentYear = date.getFullYear();
-    }
-    this._cdr.markForCheck();
-  }
-
-  setDefaults() {
-    this.today = new Date();
-    this.currentMonth = null;
-    this.currentYear = null;
-  }
-
-  clearPicker() {
-    this.value = null;
-  }
-
-  onChange = (_: any) => {};
-
-  onTouched = () => {};
-
-  registerOnChange(fn: (_: any) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  ngOnInit() {
-    if (!this.minDate || !(this.minDate instanceof Date)) {
-      this.minDate = new Date('1900-01-01T00:00:00Z');
-    }
-    if (!this.maxDate || !(this.maxDate instanceof Date)) {
-      this.maxDate = new Date('2100-12-31T00:00:00Z');
-    }
-    this.initPicker(this.value);
-  }
-
-  ngOnDestroy() {
-    this._alive = false;
-  }
-
-  isMinInvalid = (dat: Date): boolean => {
-    if (!this.minDate || !(this.minDate instanceof Date) || !dat) {
-      return false;
-    }
-    const min = new Date(
-      this.minDate.getFullYear(),
-      this.minDate.getMonth(),
-      1
-    );
-    return min.getTime() > dat.getTime();
-  };
-
-  isMaxInvalid = (dat: Date): boolean => {
-    if (!this.maxDate || !(this.maxDate instanceof Date) || !dat) {
-      return false;
-    }
-    const max = new Date(
-      this.maxDate.getFullYear(),
-      this.maxDate.getMonth(),
-      1
-    );
-    return max.getTime() < dat.getTime();
-  };
-
-  scrollMonth = (e: any) => {
-    if (this.showPicker) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this._value) {
-      return;
-    }
-    if (this.currentYear === null || this.currentYear === undefined) {
-      this.currentYear = this.today.getFullYear();
-    }
-    if (this.currentMonth === null || this.currentMonth === undefined) {
-      this.currentMonth = this.today.getMonth();
-    }
-    if (e.deltaY > 0) {
-      if (this.currentMonth === 11) {
-        this.currentMonth = 0;
-        this.currentYear++;
-      } else {
-        this.currentMonth++;
-      }
-    } else {
-      if (this.currentMonth === 0) {
-        this.currentMonth = 11;
-        this.currentYear--;
-      } else {
-        this.currentMonth--;
-      }
-    }
-    const newDate = new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0);
-    if (!this.isMinInvalid(newDate) && !this.isMaxInvalid(newDate)) {
-      this.value = newDate;
-    }
-  };
-
-  scrollYear = (e: any) => {
-    if (this.showPicker) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this._value) {
-      return;
-    }
-    if (!this.currentYear) {
-      this.currentYear = this.today.getFullYear();
-    }
-    if (!this.currentMonth) {
-      this.currentMonth = this.today.getMonth();
-    }
-    if (e.deltaY > 0) {
-      this.currentYear++;
-    } else {
-      this.currentYear--;
-    }
-    const newDate = new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0);
-    if (!this.isMinInvalid(newDate) && !this.isMaxInvalid(newDate)) {
-      this.value = newDate;
-    }
-  };
-
-  setMonth = (month: number) => {
-    this.currentMonth = month;
-    if (!this.currentYear) {
-      this.currentYear = this.today.getFullYear();
-    }
-    const newDate = new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0);
-    if (!this.isMinInvalid(newDate) && !this.isMaxInvalid(newDate)) {
-      this.value = newDate;
-    }
-  };
-
-  setYear = (year: number) => {
-    this.currentYear = year;
-    if (!this.currentMonth) {
-      this.currentMonth = this.today.getMonth();
-    }
-    const newDate = new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0);
-    if (!this.isMinInvalid(newDate) && !this.isMaxInvalid(newDate)) {
-      this.value = newDate;
-    }
-  };
-
-  setToday = () => {
-    const today = new Date();
-    this.currentYear = today.getFullYear();
-    this.currentMonth = today.getMonth();
-    this.value = new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0);
-    this.showPicker = false;
-  };
-
-  setMode(mode: DatePickerMode) {
-    let result: DatePickerMode;
-    if (mode === this.displayMode || mode === DatePickerMode.month) {
-      result = DatePickerMode.month;
-    } else {
-      result = mode;
-    }
-    this.displayMode = result;
-  }
-}

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

@@ -1,15 +0,0 @@
-<div class="list row_auto margin-top-2"
-     (wheel)="scrollMonthSelector($event);">
-  <div *ngFor="let month of months"
-       class="list-item list-item_interactive"
-       [class.list-item_active]="month === _currentMonth"
-       [class.list-item_disabled]="isMonthDisabled(month)"
-       [class.datepicker__month__item_current]="month === today?.getMonth() && currentYear === today?.getFullYear()"
-       (click)="setMonth($event, month)"
-       (dblclick)="applyMonth($event, month)">
-    <span class="color-text-20 margin-right-2">
-      {{month + 1 | tetaPrependZero: 2}}
-    </span>
-    {{locale.monthNames[month]}}
-  </div>
-</div>

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

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

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

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

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

@@ -1,193 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { PickerLocaleModel } from '../model/picker-locale-model';
-import { fromEvent, merge } from 'rxjs';
-import { takeWhile, tap } from 'rxjs/operators';
-import { PickerTouchService } from '../service/picker-touch.service';
-
-@Component({
-  selector: 'teta-month-select',
-  templateUrl: './month-select.component.html',
-  styleUrls: ['./month-select.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MonthSelectComponent implements OnInit, AfterViewInit, OnDestroy {
-  @Input() locale: PickerLocaleModel;
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() size = 8;
-  @Output() monthSelected = new EventEmitter<number>();
-  @Output() monthApplied = new EventEmitter<number>();
-
-  _currentMonth: number;
-
-  @Input()
-  set currentMonth(val: number) {
-    this._currentMonth = val;
-    this.makeMonths();
-  }
-
-  get currentMonth(): number {
-    return this._currentMonth;
-  }
-
-  _currentYear: number;
-
-  @Input()
-  set currentYear(val: number) {
-    this._currentYear = val;
-  }
-
-  get currentYear(): number {
-    return this._currentYear;
-  }
-
-  today: Date;
-  months: number[] = [];
-  shift = 0;
-
-  private _alive = true;
-
-  private get _displayDate(): Date {
-    let month = 0;
-    let year = 0;
-    if (
-      this.currentMonth !== null &&
-      this.currentMonth !== undefined &&
-      this.currentMonth >= 0 &&
-      this.currentMonth <= 11
-    ) {
-      month = this.currentMonth;
-    }
-    if (this.currentYear !== null && this.currentYear !== undefined) {
-      year = this.currentYear;
-    }
-    return new Date(year, month, 1);
-  }
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _cdr: ChangeDetectorRef,
-    private _pickerTouchService: PickerTouchService
-  ) {
-    this.today = new Date();
-    this.today.setHours(0, 0, 0, 0);
-  }
-
-  ngOnInit() {}
-
-  ngOnDestroy() {
-    this._alive = false;
-  }
-
-  ngAfterViewInit() {
-    const touchMove$ = fromEvent(
-      this._elementRef.nativeElement.parentElement,
-      'touchmove'
-    );
-
-    touchMove$
-      .pipe(
-        takeWhile((_) => this._alive),
-        tap((e: TouchEvent) => {
-          if (e.type === 'touchmove') {
-            this._pickerTouchService.onTouchMove(e);
-          }
-        })
-      )
-      .subscribe();
-
-    this._pickerTouchService.step
-      .pipe(
-        takeWhile((_) => this._alive),
-        tap((_) => {
-          this.shiftMonthSelector(_);
-          this._cdr.detectChanges();
-        })
-      )
-      .subscribe();
-  }
-
-  scrollMonthSelector = (e: WheelEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const step = e.deltaY > 0 ? 1 : -1;
-    this.shiftMonthSelector(step);
-  };
-
-  shiftMonthSelector = (step: number = 0) => {
-    this.shift += step;
-    this.makeMonths();
-  };
-
-  setMonth = (e: any, month: number) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.isMonthDisabled(month)) {
-      this.shift = 0;
-      this.monthSelected.emit(month);
-    }
-  };
-
-  applyMonth = (e: any, month: number) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.isMonthDisabled(month)) {
-      this.monthApplied.emit(month);
-    }
-  };
-
-  isMonthDisabled = (month: number) => {
-    if (!month && !this.currentYear) {
-      const dat = new Date(this.currentYear, month, 1);
-      return this.isMaxInvalid(dat) || this.isMinInvalid(dat);
-    }
-    return false;
-  };
-
-  isMinInvalid = (dat: Date): boolean => {
-    if (!this.minDate || !(this.minDate instanceof Date) || !dat) {
-      return false;
-    }
-    const min = new Date(
-      this.minDate.getFullYear(),
-      this.minDate.getMonth(),
-      1
-    );
-    return min.getTime() > dat.getTime();
-  };
-
-  isMaxInvalid = (dat: Date): boolean => {
-    if (!this.maxDate || !(this.maxDate instanceof Date) || !dat) {
-      return false;
-    }
-    const max = new Date(
-      this.maxDate.getFullYear(),
-      this.maxDate.getMonth(),
-      1
-    );
-    return max.getTime() < dat.getTime();
-  };
-
-  private makeMonths() {
-    const start = this._displayDate;
-    this.months = [];
-    start.setMonth(start.getMonth() - 3);
-    for (let i = this.shift; i < this.size + this.shift; i++) {
-      const dt = new Date(start.getFullYear(), start.getMonth() + i, 1);
-      this.months.push(dt.getMonth());
-    }
-  }
-}

package/src/component/date-picker/public-api.ts

@@ -1,5 +0,0 @@
-export * from './date-picker.module';
-export * from './date-picker/date-picker.component';
-export * from './month-picker/month-picker.component';
-export * from './day-select/day-select.component';
-export * from './model/date-period';

package/src/component/date-picker/service/picker-locale.service.spec.ts

@@ -1,14 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-import { PickerLocaleService } from './picker-locale.service';
-
-describe('PickerLocaleService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [PickerLocaleService]
-    });
-  });
-
-  it('should be created', inject([PickerLocaleService], (service: PickerLocaleService) => {
-    expect(service).toBeTruthy();
-  }));
-});

package/src/component/date-picker/service/picker-locale.service.ts

@@ -1,27 +0,0 @@
-import {Injectable} from '@angular/core';
-import {PickerLocaleModel} from '../model/picker-locale-model';
-import {BehaviorSubject} from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class PickerLocaleService {
-  private _defaults = new PickerLocaleModel({
-    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-    monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
-      'July', 'August', 'September', 'October', 'November', 'December'],
-    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    today: 'Today'
-  });
-
-  public locale: BehaviorSubject<PickerLocaleModel> = new BehaviorSubject<PickerLocaleModel>(this._defaults);
-
-  public setLocale(locale: PickerLocaleModel) {
-    this.locale.next(locale);
-  }
-
-  constructor() {
-  }
-}

package/src/component/date-picker/service/picker-touch.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PickerTouchService } from './picker-touch.service';
-
-describe('PickerTouchService', () => {
-  let service: PickerTouchService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(PickerTouchService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/component/date-picker/service/picker-touch.service.ts

@@ -1,38 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { bufferCount, tap, throttleTime } from 'rxjs/operators';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PickerTouchService {
-  step: Observable<number>;
-
-  private touchMove: Observable<TouchEvent>;
-  private touchMove$: Subject<TouchEvent> = new Subject<TouchEvent>();
-  private step$: Subject<number> = new Subject<number>();
-
-  constructor() {
-    this.touchMove = this.touchMove$.asObservable();
-    this.step = this.step$.asObservable();
-
-    this.touchMove
-      .pipe(
-        throttleTime(25),
-        bufferCount(2),
-        tap((touches: [TouchEvent, TouchEvent]) => {
-          const [start, end] = touches.map((_) => _.changedTouches?.item(0));
-          const deltaY = start?.clientY - end?.clientY;
-          if (deltaY !== 0) {
-            const step = deltaY > 0 ? 1 : -1;
-            this.step$.next(step);
-          }
-        })
-      )
-      .subscribe();
-  }
-
-  onTouchMove(event: TouchEvent) {
-    this.touchMove$.next(event);
-  }
-}

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

@@ -1,9 +0,0 @@
-<button teta-button [square]="true" (click)="up()" [palette]="'text'" [view]="'ghost'">
-  <teta-icon [name]="'arrowUpKey'"></teta-icon>
-</button>
-<div (wheel)="scroll($event);" class="row row_auto font-body-3 height-6 width-6 align-center justify-content-center">
-  {{value | tetaPrependZero: 2}}
-</div>
-<button teta-button [square]="true" (click)="down()" [palette]="'text'" [view]="'ghost'">
-  <teta-icon [name]="'arrowDownKey'"></teta-icon>
-</button>

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

@@ -1,4 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-}

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

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