@tetacom/ng-components 1.0.25 → 1.0.28

package/src/component/checkbox/checkbox/checkbox.component.spec.ts

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

package/src/component/checkbox/checkbox/checkbox.component.ts

@@ -1,149 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  HostBinding,
-  HostListener,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-export const CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => CheckboxComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'teta-checkbox',
-  templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss'],
-  providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CheckboxComponent implements ControlValueAccessor, OnInit {
-  @HostBinding('attr.tabindex') tabindex = 0;
-
-  @Input() class;
-
-  @HostBinding('class')
-  private get getClass() {
-    const result = [this.class, 'checkbox'];
-    if (this.palette) {
-      result.push(`checkbox-${this.palette}`);
-    }
-    return result.join(' ');
-  }
-
-  @Input() palette = 'primary';
-  @Input() noLabel: boolean;
-
-  /**
-   * компонент неактивен
-   */
-  @HostBinding('class.checkbox_disabled')
-  @Input()
-  disabled: boolean;
-  /**
-   * true/false или list
-   */
-  @Input() value: any;
-  /**
-   * true/false или list
-   */
-  @Input() binary: boolean;
-
-  @Input() allowNull: boolean;
-
-  checked: boolean;
-
-  /**
-   * Значение
-   */
-  private model$: any = null;
-
-  get model(): any {
-    return this.model$;
-  }
-
-  set model(v: any) {
-    if (v !== this.model$) {
-      this.model$ = v;
-      this.onChange(v);
-    }
-  }
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  @HostListener('click')
-  changeValue() {
-    if (this.disabled) {
-      return;
-    }
-    if (this.binary) {
-      this.model = !this.model;
-    } else {
-      if (!this.isChecked()) {
-        this.addValue();
-      } else {
-        this.removeValue();
-      }
-    }
-    this.checked = this.isChecked();
-  }
-
-  writeValue(model: any) {
-    if (this.binary) {
-      this.model$ = model;
-    } else {
-      if (model && model instanceof Array) {
-        this.model$ = model;
-      } else {
-        this.model$ = [];
-      }
-    }
-    this.checked = this.isChecked();
-    this.cdr.detectChanges();
-  }
-
-  isChecked(): boolean {
-    if (this.binary) {
-      return this.allowNull ? this.model : !!this.model;
-    } else {
-      return this.model && this.model.indexOf(this.value) >= 0;
-    }
-  }
-
-  removeValue() {
-    this.model = this.model.filter((val: any) => val !== this.value);
-  }
-
-  addValue() {
-    if (this.model) {
-      this.model = [...this.model, this.value];
-    } else {
-      this.model = [this.value];
-    }
-  }
-
-  ngOnInit() {}
-
-  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.detectChanges();
-  }
-}

package/src/component/checkbox/checkbox.module.ts

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

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

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

package/src/component/date-picker/DatePicker.stories.ts

@@ -1,51 +0,0 @@
-import {Meta} from '@storybook/angular/types-6-0';
-import {date, select, withKnobs} from '@storybook/addon-knobs';
-import {action} from '@storybook/addon-actions';
-import {DatePickerModule} from './date-picker.module';
-import {DatePickerComponent} from './date-picker/date-picker.component';
-import {IconModule} from '../icon/icon.module';
-import {FormsModule} from '@angular/forms';
-
-export default {
-  title: 'Component/DatePicker',
-  decorators: [withKnobs],
-  component: DatePickerComponent,
-  moduleMetadata: {
-    imports: [DatePickerModule, FormsModule],
-  },
-} as Meta;
-
-export const datePicker = () => ({
-  moduleMetadata: {
-    imports: [DatePickerModule, IconModule, FormsModule],
-  },
-  props: {
-    date: new Date(),
-    log: (name, value) => {
-      action(name)(value);
-    },
-    getDate: (num) => new Date(num),
-  },
-  template: `<div>{{date}}</div>
-              <teta-date-picker [tetaIconSprite]="'assets/icons.svg'"
-                                [ngModel]="date"
-                                (ngModelChange)="date = $event; log('date', $event)"></teta-date-picker>`,
-});
-
-export const dateTimePicker = () => ({
-  moduleMetadata: {
-    imports: [DatePickerModule, IconModule, FormsModule],
-  },
-  props: {
-    date: null,
-    log: (name, value) => {
-      action(name)(value);
-    },
-    getDate: (num) => new Date(num),
-  },
-  template: `<div>{{date}}</div>
-              <teta-date-picker [tetaIconSprite]="'assets/icons.svg'"
-                                [showTime]="true"
-                                [ngModel]="date"
-                                (ngModelChange)="date = $event;log('date', $event)"></teta-date-picker>`,
-});

package/src/component/date-picker/MonthPicker.stories.ts

@@ -1,32 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import { withKnobs } from '@storybook/addon-knobs';
-import { DatePickerModule } from './date-picker.module';
-import { MonthPickerComponent } from './month-picker/month-picker.component';
-import { action } from '@storybook/addon-actions';
-import { IconModule } from '../icon/icon.module';
-import { FormsModule } from '@angular/forms';
-
-export default {
-  title: 'Component/MonthPicker',
-  decorators: [withKnobs],
-  component: MonthPickerComponent,
-  moduleMetadata: {
-    imports: [DatePickerModule, FormsModule],
-  },
-} as Meta;
-
-export const monthPicker = () => ({
-  moduleMetadata: {
-    imports: [DatePickerModule, IconModule, FormsModule],
-  },
-  props: {
-    date: new Date(),
-    log: (name, value) => {
-      action(name)(value);
-    },
-    getDate: (num) => new Date(num),
-  },
-  template: `<teta-month-picker [tetaIconSprite]="'assets/icons.svg'"
-                                [ngModel]="date"
-                                (ngModelChange)="log('date', $event)"></teta-month-picker>`,
-});

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

@@ -1,91 +0,0 @@
-<teta-dropdown
-  class="row row_auto"
-  [disabled]="disabled"
-  [open]="open"
-  [autoCloseIgnore]="['esc']"
-  (openChange)="openPicker($event)"
-  [align]="align"
-  [verticalAlign]="verticalAlign"
-  [appendToBody]="appendToBody">
-  <div tetaDropdownHead
-       class="datepicker-head font-body-3"
-       [class.datepicker-head_disabled]="disabled"
-       [class.datepicker-head_invalid]="invalid">
-    <teta-icon [name]="'calendar'" class="margin-right-1"></teta-icon>
-    <div class="row_auto">
-      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}
-    </div>
-    <teta-icon [name]="'closeBig'" (click)="clearPicker($event);" class="margin-left-1"></teta-icon>
-  </div>
-  <div tetaDropdownContent class="datepicker-body scrollable" (click)="$event.preventDefault()">
-    <div class="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[internalValue?.getMonth()]}}
-          </button>
-          <button teta-button
-                  class="margin-left-2"
-                  [palette]="'text'"
-                  [view]="displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'"
-                  (click)="setMode(datePickerModeEnum.year)"
-                  (wheel)="scrollYear($event);">
-            {{internalValue?.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]="internalValue?.getFullYear()"
-          [today]="today"
-          [minDate]="minDate"
-          [maxDate]="maxDate"
-          (yearSelected)="setYear($event)">
-        </teta-year-select>
-        <teta-month-select
-          *ngIf="displayMode === datePickerModeEnum.month"
-          [currentMonth]="internalValue?.getMonth()"
-          [currentYear]="internalValue?.getFullYear()"
-          [locale]="locale"
-          [minDate]="minDate"
-          [maxDate]="maxDate"
-          (monthSelected)="setMonth($event)">
-        </teta-month-select>
-        <teta-day-select
-          *ngIf="displayMode === datePickerModeEnum.date"
-          [ngModel]="currentValue"
-          (ngModelChange)="applyValue($event)"
-          (dateSelected)="setDate($event)"
-          (yearSelected)="setYear($event)"
-          (monthSelected)="setMonth($event)"
-          [minDate]="minDate"
-          [maxDate]="maxDate"
-          [firstDayOfWeek]="firstDayOfWeek"
-          [disabledDays]="disabledDays"
-          [disabledDates]="disabledDates"
-          [disabledPeriods]="disabledPeriods"></teta-day-select>
-      </div>
-    </div>
-    <div *ngIf="showTime" class="datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90">
-      <teta-time-part-control [max]="23" [ngModel]="internalValue?.getHours()"
-                              (ngModelChange)="setHour($event)"></teta-time-part-control>
-      :
-      <teta-time-part-control [ngModel]="internalValue?.getMinutes()"
-                              (ngModelChange)="setMinute($event)"></teta-time-part-control>
-      :
-      <teta-time-part-control [ngModel]="internalValue?.getSeconds()"
-                              (ngModelChange)="setSecond($event)"></teta-time-part-control>
-    </div>
-  </div>
-</teta-dropdown>

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

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

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

@@ -1,305 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  forwardRef,
-  HostBinding,
-  HostListener,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {PickerLocaleService} from '../service/picker-locale.service';
-import {takeWhile} from 'rxjs/operators';
-import {DatePeriod} from '../model/date-period';
-import {PickerLocaleModel} from '../model/picker-locale-model';
-import {DatePickerMode} from '../model/date-picker-mode.enum';
-import {DateUtil} from '../../../util/date-util';
-import {DatePickerUtil} from '../util/date-picker-util';
-import {Align} from '../../../common/enum/align.enum';
-import {VerticalAlign} from '../../../common/enum/vertical-align.enum';
-
-export const DATE_PICKER_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => DatePickerComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'teta-date-picker',
-  templateUrl: './date-picker.component.html',
-  styleUrls: ['./date-picker.component.scss'],
-  providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DatePickerComponent
-  implements ControlValueAccessor, OnInit, OnDestroy {
-  @Input() disabled: boolean;
-  @Input() invalid: boolean;
-  @Input() firstDayOfWeek = 1;
-  @Input() disabledDates: Date[];
-  @Input() disabledPeriods: DatePeriod[];
-  @Input() disabledDays: number[];
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() minYearDate: Date;
-  @Input() maxYearDate: Date;
-  @Input() align: Align = Align.left;
-  @Input() verticalAlign: VerticalAlign = VerticalAlign.auto;
-  @Input() appendToBody: boolean;
-
-  @HostBinding('class.datepicker-wide')
-  @Input()
-  showTime = false;
-
-  @Input()
-  set format(val: string) {
-    this._format = val;
-  }
-
-  get format(): string {
-    if (this._format) {
-      return this._format;
-    }
-    return this.showTime ? 'dd.MM.yyyy HH:mm:ss' : 'dd.MM.yyyy';
-  }
-
-  @HostBinding('class.datepicker_open') open: boolean;
-  @HostBinding('class.datepicker') private readonly classDatepicker = true;
-  @HostBinding('tabindex') private readonly tabindex = 0;
-
-  locale: PickerLocaleModel;
-  today: Date = new Date();
-
-  datePickerModeEnum = DatePickerMode;
-  displayMode: DatePickerMode = DatePickerMode.date;
-  _format: string;
-
-  _value: Date | null = null;
-  _currentValue: Date;
-
-  private _alive = true;
-
-  get value(): Date | null {
-    return this._value;
-  }
-
-  set value(v: Date | null) {
-    if (v?.getTime() !== this._value?.getTime()) {
-      this._value = v;
-      this.currentValue = this._value;
-    }
-  }
-
-  get currentValue(): Date {
-    return this._currentValue;
-  }
-
-  set currentValue(date: Date) {
-    this._currentValue = date;
-    this._cdr.markForCheck();
-  }
-
-  get internalValue() {
-    return this.currentValue ?? this.emptyDate();
-  }
-
-  constructor(
-    public localeService: PickerLocaleService,
-    private _cdr: ChangeDetectorRef,
-    private _elementRef: ElementRef
-  ) {
-    localeService.locale
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((locale: PickerLocaleModel) => {
-        this.locale = locale;
-      });
-  }
-
-  @HostListener('window:keyup', ['$event']) keyUp(event: KeyboardEvent): void {
-    if (!this.open) {
-      return;
-    }
-    if (event.code === 'Escape') {
-      this.currentValue = this.value;
-      this.open = false;
-    }
-  }
-
-  writeValue(value: any) {
-    this.value = value;
-    this._cdr.markForCheck();
-  }
-
-  onChange = (_: any) => {
-  };
-
-  onTouched = () => {
-  };
-
-  registerOnChange(fn: (_: any) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  ngOnInit() {
-  }
-
-  ngOnDestroy() {
-    this._alive = false;
-  }
-
-  applyValue(date: Date) {
-    this.setDate(date);
-    this.value = this.currentValue;
-    this.onChange(this.value);
-    this.open = false;
-  }
-
-  setDate = (day: Date) => {
-    if (day === null || day === undefined) {
-      this.currentValue = null;
-      return;
-    }
-    const dt = this.internalValue;
-    dt.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
-    this.currentValue = new Date(dt);
-    this._cdr.markForCheck();
-  };
-
-  setYear = (year: number) => {
-    const dt = this.internalValue;
-    dt.setFullYear(year);
-    this.currentValue = new Date(dt);
-    this.setMode(DatePickerMode.date);
-    this._cdr.markForCheck();
-  };
-
-  setMonth = (month: number) => {
-    const dt = this.internalValue;
-    dt.setMonth(month);
-    this.currentValue = new Date(dt);
-    this.setMode(DatePickerMode.date);
-    this._cdr.markForCheck();
-  };
-
-  setHour = (hours: number) => {
-    const dt = this.internalValue;
-    dt.setHours(hours);
-    this.currentValue = new Date(dt);
-    this._cdr.markForCheck();
-  };
-
-  setMinute = (minute: number) => {
-    const dt = this.internalValue;
-    dt.setMinutes(minute);
-    this.currentValue = new Date(dt);
-    this._cdr.markForCheck();
-  };
-
-  setSecond = (seconds: number) => {
-    const dt = this.internalValue;
-    dt.setSeconds(seconds);
-    this.currentValue = new Date(dt);
-    this._cdr.markForCheck();
-  };
-
-  setToday = () => {
-    this.currentValue = this.emptyDate();
-    this._cdr.markForCheck();
-  };
-
-  clearPicker = (event: MouseEvent): void => {
-    this.preventEvent(event);
-    this.value = null;
-    this.onChange(null);
-  };
-
-  isDateInDisabledPeriod = (dat: Date): boolean => {
-    if (!this.disabledPeriods || this.disabledPeriods.length < 1 || !dat) {
-      return false;
-    }
-    return this.disabledPeriods.some(
-      (d: DatePeriod) =>
-        d &&
-        d.start &&
-        d.end &&
-        d.start.getTime() <= dat.getTime() &&
-        d.end.getTime() >= dat.getTime()
-    );
-  };
-
-  isScrollIgnored = (): boolean =>
-    this.displayMode === DatePickerMode.month ||
-    this.displayMode === DatePickerMode.year;
-
-  scrollMonth = (e: any) => {
-    const delta = e?.deltaY ?? e;
-
-    if (e instanceof WheelEvent) {
-      this.preventEvent(e);
-    }
-
-    if (this.isScrollIgnored()) {
-      return false;
-    }
-    this.currentValue = DatePickerUtil.scrollMonth(delta, this.internalValue);
-  };
-
-  scrollYear = (e: any) => {
-    this.preventEvent(e);
-    if (this.isScrollIgnored()) {
-      return false;
-    }
-    this.currentValue = DatePickerUtil.scrollMonth(
-      e.deltaY,
-      this.internalValue
-    );
-  };
-
-  openPicker = (show: boolean) => {
-    if (this.disabled) {
-      return;
-    }
-    if (!show) {
-      this.setMode(DatePickerMode.date);
-      this.applyValue(this.currentValue);
-    }
-    this.open = show;
-    this._cdr.markForCheck();
-  };
-
-  closePicker = () => {
-    this.openPicker(false);
-    this.onTouched();
-  };
-
-  preventEvent = (event: any) => {
-    event.stopPropagation();
-    event.preventDefault();
-    return false;
-  };
-
-  focus() {
-    this._elementRef.nativeElement.focus();
-  }
-
-  setMode(mode: DatePickerMode) {
-    let result: DatePickerMode;
-    if (mode === this.displayMode || mode === DatePickerMode.date) {
-      result = DatePickerMode.date;
-    } else {
-      result = mode;
-    }
-    this.displayMode = result;
-  }
-
-  private emptyDate() {
-    return DateUtil.truncateToDay(new Date());
-  }
-}