@tetacom/ng-components 1.0.21 → 1.0.25

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,91 @@
+<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,305 @@
+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());
+  }
+}