@tetacom/ng-components 1.0.25 → 1.0.26

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

@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DatePickerComponent } from './date-picker/date-picker.component';
-import { MonthPickerComponent } from './month-picker/month-picker.component';
-import { DropdownModule } from '../dropdown/dropdown.module';
-import { ClickOutsideModule } from '../../directive/click-outside/click-outside.module';
-import { IconModule } from '../icon/icon.module';
-import { DaySelectComponent } from './day-select/day-select.component';
-import { YearSelectComponent } from './year-select/year-select.component';
-import { MonthSelectComponent } from './month-select/month-select.component';
-import { PrependZeroModule } from '../../pipe/prepend-zero/prepend-zero.module';
-import { ButtonModule } from '../button/button.module';
-import { OnlyNumberModule } from '../../directive/only-number/only-number.module';
-import { FormsModule } from '@angular/forms';
-import { TimePartControlComponent } from './time-part-control/time-part-control.component';
-
-@NgModule({
-  declarations: [
-    DatePickerComponent,
-    MonthPickerComponent,
-    DaySelectComponent,
-    YearSelectComponent,
-    MonthSelectComponent,
-    TimePartControlComponent,
-  ],
-  exports: [DatePickerComponent, MonthPickerComponent],
-  imports: [
-    CommonModule,
-    DropdownModule,
-    ClickOutsideModule,
-    FormsModule,
-    IconModule,
-    PrependZeroModule,
-    ButtonModule,
-    OnlyNumberModule,
-  ],
-})
-export class DatePickerModule {}

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

@@ -1,23 +0,0 @@
-<div class="datepicker-week font-caption color-text-80">
-  <div class="datepicker-day"
-       [class.font-caption-bold]="day === 0 || day === 6"
-       *ngFor="let day of weekDays">
-    {{locale.dayNamesMin[day]}}
-  </div>
-</div>
-<div class="datepicker-picker color-text-90 font-body-3"
-     (wheel)="scrollMonth($event)"
->
-  <div *ngFor="let day of days"
-       class="datepicker-date"
-       (click)="setDate(day, $event);"
-       (dblclick)="applyValue(day, $event);"
-       [class.datepicker-date_active]="day.selected"
-       [class.datepicker-date_disabled]="day.disabled || !day.isCurrentMonth"
-       [class.datepicker-date_weekend]="day.weekend"
-       [class.datepicker-date_today]="day.today">
-    <ng-container *ngIf="day !== null && day !== undefined">
-      {{day.date.getDate()}}
-    </ng-container>
-  </div>
-</div>

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

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

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

@@ -1,216 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { DayModel } from '../model/day-model';
-import { DatePeriod } from '../model/date-period';
-import { PickerLocaleService } from '../service/picker-locale.service';
-import { takeWhile, tap, withLatestFrom } from 'rxjs/operators';
-import { PickerLocaleModel } from '../model/picker-locale-model';
-import { DatePickerUtil } from '../util/date-picker-util';
-import { fromEvent } from 'rxjs';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DateUtil } from '../../../util/date-util';
-
-export const DAY_SELECT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => DaySelectComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'teta-day-select',
-  templateUrl: './day-select.component.html',
-  styleUrls: ['./day-select.component.scss'],
-  providers: [DAY_SELECT_CONTROL_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DaySelectComponent
-  implements OnInit, OnDestroy, ControlValueAccessor
-{
-  @Input() firstDayOfWeek = 1;
-  @Input() disabledDates: Date[];
-  @Input() disabledPeriods: DatePeriod[];
-  @Input() disabledDays: number[];
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() disabled: boolean;
-
-  @Output() dateSelected = new EventEmitter<Date>();
-  @Output() monthSelected = new EventEmitter<number>();
-  @Output() yearSelected = new EventEmitter<number>();
-
-  locale: PickerLocaleModel;
-
-  value: Date;
-
-  _currentValue: Date;
-
-  set currentValue(val: Date) {
-    if (
-      !this._currentValue ||
-      DateUtil.truncateToDay(val)?.getTime() !==
-        DateUtil.truncateToDay(this._currentValue)?.getTime()
-    ) {
-      this._currentValue = val;
-      this.createDays();
-      this.checkDays();
-    } else {
-      this._currentValue = val;
-    }
-    this._cdr.markForCheck();
-  }
-
-  get currentValue(): Date {
-    return this._currentValue;
-  }
-
-  days: Array<DayModel>;
-  weekDays: number[] = [];
-
-  private _alive = true;
-
-  constructor(
-    public localeService: PickerLocaleService,
-    private _cdr: ChangeDetectorRef,
-    private _elementRef: ElementRef
-  ) {
-    localeService.locale
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((locale: PickerLocaleModel) => {
-        this.locale = locale;
-      });
-  }
-
-  ngOnInit() {
-    this.weekDays = this.createWeekDays();
-
-    const touchStart$ = fromEvent(this._elementRef.nativeElement, 'touchstart');
-    const touchEnd$ = fromEvent(this._elementRef.nativeElement, 'touchend');
-
-    touchEnd$
-      .pipe(
-        takeWhile((_) => this._alive),
-        withLatestFrom(touchStart$),
-        tap((touches: [TouchEvent, TouchEvent]) => {
-          const [start, end] = touches.map((_) => _.changedTouches?.item(0));
-          const deltaY = end?.clientY - start?.clientY;
-          if (deltaY !== 0) {
-            this.scrollMonth(deltaY);
-          }
-        })
-      )
-      .subscribe();
-  }
-
-  ngOnDestroy() {
-    this._alive = false;
-  }
-
-  writeValue(model: Date) {
-    this.value = model;
-    this.currentValue = model ? model : new Date();
-    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();
-  }
-
-  applyValue(day: DayModel, event: MouseEvent) {
-    this.preventEvent(event);
-    if (day === null || day === undefined || day.disabled) {
-      return;
-    }
-    this.value = day.date;
-    this.currentValue = day.date;
-    this.onChange(day.date);
-  }
-
-  setDate(day: DayModel, event: MouseEvent) {
-    if (day === null || day === undefined || day.disabled) {
-      return;
-    }
-    if (
-      day.date !== null &&
-      day.date !== undefined &&
-      day.date instanceof Date
-    ) {
-      this.currentValue = day.date;
-      this.dateSelected.emit(day.date);
-    }
-  }
-
-  scrollMonth(event: WheelEvent | number) {
-    const deltaY = event instanceof WheelEvent ? event.deltaY : event;
-
-    if (event instanceof WheelEvent) {
-      this.preventEvent(event);
-    }
-    this.currentValue = DatePickerUtil.scrollMonth(deltaY, this.currentValue);
-    this.monthSelected.emit(this.currentValue.getMonth());
-    this.yearSelected.emit(this.currentValue.getFullYear());
-    this._cdr.detectChanges();
-  }
-
-  private createWeekDays(): number[] {
-    const result = [];
-    let dayIndex = this.firstDayOfWeek;
-    for (let i = 0; i < 7; i++) {
-      result.push(dayIndex);
-      dayIndex = dayIndex === 6 ? 0 : ++dayIndex;
-    }
-    return result;
-  }
-
-  private createDays() {
-    this.days = DatePickerUtil.getPickerDays(
-      this.currentValue,
-      this.firstDayOfWeek,
-      this.minDate,
-      this.maxDate,
-      this.disabledDates,
-      this.disabledDays,
-      this.disabledPeriods
-    );
-  }
-
-  private checkDays() {
-    if (this.days) {
-      this.days = this.days.map((dat: DayModel) => ({
-        ...dat,
-        selected:
-          dat.date.getFullYear() === this.currentValue.getFullYear() &&
-          dat.date.getMonth() === this.currentValue.getMonth() &&
-          dat.date.getDate() === this.currentValue.getDate(),
-      }));
-    }
-  }
-
-  private preventEvent(event: any) {
-    event.stopPropagation();
-    event.preventDefault();
-    return false;
-  }
-}

package/src/component/date-picker/model/date-period.ts

@@ -1,9 +0,0 @@
-export class DatePeriod {
-  start: Date;
-  end: Date;
-
-  constructor(start: Date, end: Date) {
-    this.start = start;
-    this.end = end;
-  }
-}

package/src/component/date-picker/model/date-picker-mode.enum.ts

@@ -1,5 +0,0 @@
-export enum DatePickerMode {
-  date,
-  month,
-  year
-}

package/src/component/date-picker/model/day-model.ts

@@ -1,26 +0,0 @@
-export class DayModel {
-  disabled: boolean;
-  isCurrentMonth: boolean;
-  today: boolean;
-  selected: boolean;
-  date: Date;
-  weekend: boolean;
-
-  public constructor(options?: {
-    disabled?: boolean;
-    isCurrentMonth?: boolean;
-    today?: boolean;
-    selected?: boolean;
-    date: Date;
-    weekend?: boolean;
-  }) {
-    if (options) {
-      this.disabled = options.disabled;
-      this.isCurrentMonth = options.isCurrentMonth;
-      this.today = options.today;
-      this.selected = options.selected;
-      this.date = options.date;
-      this.weekend = options.weekend;
-    }
-  }
-}

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

@@ -1,26 +0,0 @@
-export class PickerLocaleModel {
-  dayNames: string[];
-  dayNamesShort: string[];
-  dayNamesMin: string[];
-  monthNames: string[];
-  monthNamesShort: string[];
-  today: string;
-
-  public constructor(options?: {
-    dayNames: string[];
-    dayNamesShort: string[];
-    dayNamesMin: string[];
-    monthNames: string[];
-    monthNamesShort: string[];
-    today: string;
-  }) {
-    if (options) {
-      this.dayNames = options.dayNames;
-      this.dayNamesShort = options.dayNamesShort;
-      this.dayNamesMin = options.dayNamesMin;
-      this.monthNames = options.monthNames;
-      this.monthNamesShort = options.monthNamesShort;
-      this.today = options.today;
-    }
-  }
-}

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

@@ -1,64 +0,0 @@
-<teta-dropdown
-  class="row row_auto"
-  [appendToBody]="appendToBody"
-  [(open)]="showPicker"
-  [disabled]="disabled">
-  <div tetaDropdownHead
-       (wheel)="scrollMonth($event)"
-       class="datepicker-head font-body-3">
-    <teta-icon [name]="'calendar'" class="margin-right-2"></teta-icon>
-    <div class="row_auto">
-      <ng-container *ngIf="_value !==null && _value!==undefined">
-        {{locale.monthNames[_value.getMonth()]}} {{_value.getFullYear()}}
-      </ng-container>
-    </div>
-    <teta-icon [name]="'closeBig'" (click)="clearPicker()" class="margin-left-2"></teta-icon>
-  </div>
-  <div tetaDropdownContent class="datepicker-body scrollable padding-3">
-    <div class="row align-center justify-content-between">
-      <div>
-        <button teta-button
-                [palette]="'text'"
-                [view]="displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'"
-                (click)="setMode(datePickerModeEnum.month)"
-                (wheel)="scrollMonth($event);">
-          {{locale.monthNames[_currentMonth || today.getMonth()]}}
-        </button>
-        <button teta-button
-                class="margin-left-2"
-                [palette]="'text'"
-                [view]="displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'"
-                (click)="setMode(datePickerModeEnum.year)"
-                (wheel)="scrollYear($event);">
-          {{_currentYear || today.getFullYear()}}
-        </button>
-      </div>
-      <button teta-button
-              [palette]="'text'"
-              [view]="'ghost'"
-              (click)="setToday()">
-        <teta-icon [name]="'calendar'"></teta-icon>
-      </button>
-    </div>
-    <div class="datepicker-content">
-      <teta-year-select
-        *ngIf="displayMode === datePickerModeEnum.year"
-        [currentYear]="_currentYear"
-        [today]="today"
-        [size]="8"
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        (yearSelected)="setYear($event)">
-      </teta-year-select>
-      <teta-month-select
-        *ngIf="displayMode === datePickerModeEnum.month"
-        [currentMonth]="_currentMonth"
-        [locale]="locale"
-        [currentYear]="_currentYear"
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        (monthSelected)="setMonth($event)">
-      </teta-month-select>
-    </div>
-  </div>
-</teta-dropdown>

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

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