@tetacom/ng-components 1.0.25 → 1.0.26

package/src/component/radio/radio/radio.component.ts

@@ -1,264 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Input,
-  forwardRef,
-  HostBinding,
-  HostListener,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { RadioButtonComponent } from '../radio-button/radio-button.component';
-
-type ButtonOrNullOrUndefined = RadioButtonComponent | undefined | null;
-
-@Component({
-  selector: 'teta-radio',
-  templateUrl: './radio.component.html',
-  styleUrls: ['./radio.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RadioComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class RadioComponent implements OnInit, ControlValueAccessor {
-  @HostBinding('tabindex') tabindex = 0;
-  @HostBinding('class.radio') radioClass = true;
-
-  /** Менять значение при изменении выбранного */
-  @Input()
-  @HostBinding('class.radio_inline')
-  inline: boolean;
-
-  @Input() checkChangeSelected = true;
-
-  @Input() set disabled(val: boolean) {
-    this.disabled$ = val;
-    this.buttons$.forEach((b) => (b.disabled = this.disabled));
-  }
-
-  get disabled() {
-    return this.disabled$;
-  }
-
-  @Input() get value(): any {
-    if (this.checkedButton$) {
-      return this.checkedButton$.value;
-    }
-    return null;
-  }
-
-  set value(val: any) {
-    this.writeValue(val);
-  }
-
-  private buttons$: RadioButtonComponent[] = [];
-  private checkedButton$: ButtonOrNullOrUndefined;
-  private selectedButton$: ButtonOrNullOrUndefined;
-  private disabled$ = false;
-
-  constructor(private _cdr: ChangeDetectorRef) {}
-
-  @HostListener('focus', ['$event'])
-  focusHandler(event: FocusEvent) {
-    this.selectFirst();
-  }
-
-  @HostListener('focusout', ['$event'])
-  focusoutHandler(event: FocusEvent) {
-    if (this.selectedButton$) {
-      this.selectedButton$.selected = false;
-      this.selectedButton$ = null;
-    }
-  }
-
-  @HostListener('keydown', ['$event'])
-  keyEvent(event: KeyboardEvent) {
-    const key = event.code || event.key;
-    switch (key) {
-      case 'Space':
-      case 'Enter':
-      case 'Spacebar':
-        this.checkSelected();
-        break;
-
-      case 'ArrowUp':
-      case 'Up':
-      case 'ArrowLeft':
-      case 'Left':
-        this.selectPrevious();
-        break;
-
-      case 'ArrowDown':
-      case 'Down':
-      case 'ArrowRight':
-      case 'Right':
-        this.selectNext();
-        break;
-      default:
-        return;
-    }
-
-    event.cancelBubble = true;
-    if (event.stopPropagation) {
-      event.stopPropagation();
-    }
-    return false;
-  }
-
-  ngOnInit() {}
-
-  selectFirst() {
-    if (!this.selectedButton$) {
-      if (this.checkedButton$) {
-        this.selectedButton$ = this.checkedButton$;
-        this.selectedButton$.selected = true;
-        return true;
-      }
-
-      for (const btn of this.buttons$) {
-        if (!btn.disabled) {
-          this.selectedButton$ = btn;
-          this.selectedButton$.selected = true;
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  _setChecked(btn: RadioButtonComponent) {
-    if (this.checkedButton$) {
-      this.checkedButton$.checked = false;
-    }
-    this.checkedButton$ = btn;
-    this.checkedButton$.checked = true;
-    if (this.selectedButton$) {
-      this.selectedButton$.selected = false;
-    }
-    this.selectedButton$ = btn;
-    this.selectedButton$.selected = true;
-    this._onChange(this.value);
-    this._cdr.markForCheck();
-  }
-
-  _addButton(btn: RadioButtonComponent) {
-    if (this.disabled) {
-      btn.disabled = this.disabled;
-    }
-    return this.buttons$.push(btn) - 1;
-  }
-
-  _removeButton(btn: RadioButtonComponent) {
-    const index = this.buttons$.indexOf(btn);
-    if (index > -1) {
-      this.buttons$.splice(index, 1);
-    }
-  }
-
-  /** Writes a new value to the element. */
-  writeValue(obj: any): void {
-    if (this.checkedButton$) {
-      this.checkedButton$.checked = false;
-    }
-
-    this.checkedButton$ = this.buttons$.find((b) => b.value === obj);
-    if (this.checkedButton$) {
-      this.checkedButton$.checked = true;
-    }
-    this._cdr.markForCheck();
-  }
-
-  /** model callback вызовется когда модель измениться из ui */
-  _onChange: (value: any) => void = () => {};
-
-  /** Registers a callback function that should be called when the control's value changes in the UI */
-  registerOnChange(fn: (value: any) => void): void {
-    this._onChange = fn;
-  }
-
-  _onTouched = () => {};
-
-  /** Registers a callback function that should be called when the control receives a blur event. */
-  registerOnTouched(fn: () => void): void {
-    this._onTouched = fn;
-  }
-
-  /** This function is called by the forms API when the control status changes to or from "DISABLED". */
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this._cdr.markForCheck();
-  }
-
-  private selectBtn(btn: RadioButtonComponent) {
-    if (this.selectedButton$) {
-      this.selectedButton$.selected = false;
-    }
-    this.selectedButton$ = btn;
-    this.selectedButton$.selected = true;
-    if (this.checkChangeSelected) {
-      this.checkSelected();
-    }
-    this._cdr.markForCheck();
-  }
-
-  private selectNext() {
-    if (this.selectFirst()) {
-      return;
-    }
-
-    const length = this.buttons$.length;
-    let newIndex = this.selectedButton$
-      ? this.buttons$.indexOf(this.selectedButton$)
-      : 0;
-    let firstCycle = true;
-    do {
-      newIndex++;
-      if (firstCycle && newIndex === length) {
-        newIndex = 0;
-        firstCycle = false;
-      }
-      const btn = this.buttons$[newIndex];
-      if (btn && !btn.disabled) {
-        this.selectBtn(btn);
-        return;
-      }
-    } while (newIndex < length);
-  }
-
-  private selectPrevious() {
-    if (this.selectFirst()) {
-      return;
-    }
-
-    let newIndex = this.selectedButton$
-      ? this.buttons$.indexOf(this.selectedButton$)
-      : 0;
-    let firstCycle = true;
-    do {
-      newIndex--;
-      if (firstCycle && newIndex === -1) {
-        newIndex = this.buttons$.length - 1;
-        firstCycle = false;
-      }
-      const btn = this.buttons$[newIndex];
-      if (btn && !btn.disabled) {
-        this.selectBtn(btn);
-        return;
-      }
-    } while (newIndex >= 0);
-  }
-
-  private checkSelected() {
-    if (this.selectFirst()) {
-      return;
-    }
-    if (this.selectedButton$) {
-      this._setChecked(this.selectedButton$);
-    }
-  }
-}

package/src/component/radio/radio-button/radio-button.component.html

@@ -1,4 +0,0 @@
-<div class="radio-button-icon">
-  <div *ngIf="checked" class="radio-button-small-icon"></div>
-</div>
-<ng-content></ng-content>

package/src/component/radio/radio-button/radio-button.component.spec.ts

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

package/src/component/radio/radio-button/radio-button.component.ts

@@ -1,71 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Host,
-  OnDestroy,
-  ViewContainerRef,
-  Input,
-  HostListener,
-  HostBinding,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import { RadioComponent } from '../radio/radio.component';
-
-@Component({
-  selector: 'teta-radio-button',
-  templateUrl: './radio-button.component.html',
-  styleUrls: ['./radio-button.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  // changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class RadioButtonComponent implements OnInit, OnDestroy {
-  @HostBinding('class.radio-button')
-  radioButton = true;
-
-  @HostBinding('class.radio-button-selected')
-  selected: boolean;
-
-  @Input()
-  @HostBinding('class.radio-button-checked')
-  checked: boolean;
-
-  @Input()
-  @HostBinding('class.radio-button_disabled')
-  disabled: boolean;
-
-  @Input() set value(val: any) {
-    this._value = val;
-  }
-
-  get value() {
-    if (this._value === undefined) {
-      if (this.container.element.nativeElement instanceof HTMLElement) {
-        return this.container.element.nativeElement.innerText;
-      }
-    }
-    return this._value;
-  }
-
-  private _value: any;
-
-  constructor(
-    private container: ViewContainerRef,
-    @Host() public radio: RadioComponent
-  ) {}
-
-  @HostListener('click')
-  hostClick() {
-    if (!this.disabled) {
-      this.radio._setChecked(this);
-    }
-  }
-
-  ngOnInit() {
-    this.radio._addButton(this);
-  }
-
-  ngOnDestroy(): void {
-    this.radio._removeButton(this);
-  }
-}

package/src/component/radio/radio.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RadioComponent } from './radio/radio.component';
-import { RadioButtonComponent } from './radio-button/radio-button.component';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-  declarations: [RadioComponent, RadioButtonComponent],
-  exports: [RadioComponent, RadioButtonComponent],
-  imports: [CommonModule, FormsModule],
-})
-export class RadioModule {}

package/src/component/resize-panel/Resize.stories.ts

@@ -1,83 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-// eslint-disable-next-line id-blacklist
-import { number, select, withKnobs } from '@storybook/addon-knobs';
-import { ResizePanelModule } from './resize-panel.module';
-
-export default {
-  title: 'Component/ResizePanel',
-  decorators: [withKnobs],
-} as Meta;
-
-export const horizontal = () => ({
-  moduleMetadata: {
-    imports: [ResizePanelModule],
-  },
-  props: {
-    maxSize: number('maxSize', 500, {
-      min: 300,
-      max: 450,
-      range: true,
-      step: 10,
-    }),
-    minSize: number('minSize', 50, {
-      min: 50,
-      max: 150,
-      range: true,
-      step: 10,
-    }),
-    grabPosition: select('grabPosition', ['left', 'right'], 'left'),
-  },
-  template: `<div class="bg-panel-50 padding-10 margin-10">
-                <div class="row bg-white-50"
-                      style="width: 500px; height: 500px;">
-                  <div class="column_6 bg-primary-5">
-                    I will surrender
-                  </div>
-                  <teta-resize-panel
-                        [maxSize]="maxSize"
-                        [minSize]="minSize"
-                        [direction]="'vertical'"
-                        [grabPosition]="grabPosition"
-                        class="column_6 bg-red-5">
-                    I will resize
-                  </teta-resize-panel>
-                </div>
-              </div>`,
-});
-
-export const vertical = () => ({
-  moduleMetadata: {
-    imports: [ResizePanelModule],
-  },
-  props: {
-    maxSize: number('maxSize', 500, {
-      min: 300,
-      max: 450,
-      range: true,
-      step: 10,
-    }),
-    minSize: number('minSize', 50, {
-      min: 50,
-      max: 150,
-      range: true,
-      step: 10,
-    }),
-    grabPosition: select('grabPosition', ['top', 'bottom'], 'top'),
-  },
-  template: `<div class="bg-panel-50 padding-10 margin-10">
-                <div class="column bg-white-50"
-                      style="width: 500px; height: 500px;">
-                  <div class="row_6 bg-primary-5">
-                    I will surrender
-                  </div>
-                  <teta-resize-panel
-                        [maxSize]="maxSize"
-                        [minSize]="minSize"
-                        [direction]="'horizontal'"
-                        [grabPosition]="grabPosition"
-                        class="row_6 bg-red-5">
-                    I will resize
-                  </teta-resize-panel>
-                </div>
-              </div>`,
-});

package/src/component/resize-panel/public-api.ts

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

package/src/component/resize-panel/resize-panel/resize-panel.component.html

@@ -1,9 +0,0 @@
-<ng-content></ng-content>
-<div #grab class="resize-grab"
-     (resizeStart)="resizeStart($event)"
-     (resizeProcess)="resizeProcess($event)"
-     (resizeEnd)="resizeEnd($event)"
-     [tetaResizeDrag]="direction"
-     [ngClass]="getClassName()">
-  <teta-icon [name]="direction"></teta-icon>
-</div>

package/src/component/resize-panel/resize-panel/resize-panel.component.spec.ts

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