@tetacom/ng-components 1.0.21 → 1.0.25

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

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

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

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

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

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

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

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

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

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

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