@tetacom/ng-components 1.0.25 → 1.0.26

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

@@ -1,210 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
-
-@Component({
-  selector: 'teta-resize-panel',
-  templateUrl: './resize-panel.component.html',
-  styleUrls: ['./resize-panel.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ResizePanelComponent implements OnInit, OnDestroy {
-  @Input()
-  set direction(val: 'vertical' | 'horizontal') {
-    this._direction = val;
-  }
-
-  get direction() {
-    return this._direction;
-  }
-
-  @Input()
-  set grabPosition(val: 'top' | 'left' | 'bottom' | 'right') {
-    this._grabPosition = val;
-  }
-
-  get grabPosition() {
-    if (this.direction === 'vertical') {
-      if (['left', 'right'].includes(this._grabPosition)) {
-        return this._grabPosition;
-      }
-      return 'left';
-    }
-    if (['top', 'bottom'].includes(this._grabPosition)) {
-      return this._grabPosition;
-    }
-    return 'bottom';
-  }
-
-  @Input() name: string;
-  @Input() minSize: number;
-  @Input() maxSize: number;
-  @HostBinding('class.resize-panel') private readonly resizePanelClass = true;
-
-  private _direction: 'vertical' | 'horizontal' = 'horizontal';
-  private _grabPosition: 'top' | 'left' | 'bottom' | 'right' = 'left';
-  private _startSize: number;
-  private _startPosition: number;
-
-  private _positionMap: Map<string, string> = new Map<string, string>()
-    .set('left', 'resize-grab_left')
-    .set('right', 'resize-grab_right')
-    .set('top', 'resize-grab_top')
-    .set('bottom', 'resize-grab_bottom');
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer2,
-    @Inject(DOCUMENT) private _document: any
-  ) {
-  }
-
-  resizeStart(event: MouseEvent) {
-    this.setStartPosition();
-    if (this.direction === 'vertical') {
-      this._startSize = this._elementRef.nativeElement.clientWidth;
-      this._startPosition = event.clientX;
-    } else {
-      this._startSize = this._elementRef.nativeElement.clientHeight;
-      this._startPosition = event.clientY;
-    }
-  }
-
-  resizeProcess(event: MouseEvent) {
-    event.preventDefault();
-    if (this.direction === 'vertical') {
-      this.manageVertical(event);
-    } else {
-      this.manageHorizontal(event);
-    }
-  }
-
-  resizeEnd(event: MouseEvent) {
-    window.dispatchEvent(new Event('resize'));
-  }
-
-  ngOnInit() {
-    this.restorePosition();
-  }
-
-  ngOnDestroy(): void {
-  }
-
-  getClassName() {
-    return this._positionMap.get(this.grabPosition) || '';
-  }
-
-  private setStartPosition() {
-    if (this.direction === 'vertical') {
-      this._renderer.setStyle(
-        this._elementRef.nativeElement,
-        'width',
-        `${this._elementRef.nativeElement.offsetWidth}px`
-      );
-    } else {
-      this._renderer.setStyle(
-        this._elementRef.nativeElement,
-        'height',
-        `${this._elementRef.nativeElement.offsetHeight}px`
-      );
-    }
-    this._renderer.setStyle(this._elementRef.nativeElement, 'flex-grow', `0`);
-    this._renderer.setStyle(this._elementRef.nativeElement, 'flex-shrink', `0`);
-    this._renderer.setStyle(this._elementRef.nativeElement, 'flex', `none`);
-  }
-
-  private manageHorizontal(event: MouseEvent) {
-    let newSize =
-      this.grabPosition === 'bottom'
-        ? this._startSize + (event.clientY - this._startPosition)
-        : this._startSize - (event.clientY - this._startPosition);
-    if (this.maxSize && newSize > this.maxSize) {
-      newSize = this.maxSize;
-    }
-    if (this.minSize && newSize < this.minSize) {
-      newSize = this.minSize;
-    }
-    this._renderer.setStyle(
-      this._elementRef.nativeElement,
-      'height',
-      `${newSize}px`
-    );
-    this.save();
-  }
-
-  private manageVertical(event: MouseEvent) {
-    let newSize =
-      this.grabPosition === 'right'
-        ? this._startSize + (event.clientX - this._startPosition)
-        : this._startSize - (event.clientX - this._startPosition);
-    if (this.maxSize && newSize > this.maxSize) {
-      newSize = this.maxSize;
-    }
-    if (this.minSize && newSize < this.minSize) {
-      newSize = this.minSize;
-    }
-    this._renderer.setStyle(
-      this._elementRef.nativeElement,
-      'width',
-      `${newSize}px`
-    );
-    this.save();
-  }
-
-  private restore() {
-    if (this.name?.length > 0) {
-      return JSON.parse(localStorage.getItem(`resize-panel${this.name}`));
-    }
-  }
-
-  private restorePosition() {
-    const savedSize = this.restore();
-    if (savedSize) {
-      if (this.direction === 'vertical') {
-        this._renderer.setStyle(
-          this._elementRef.nativeElement,
-          'width',
-          `${savedSize}px`
-        );
-      } else {
-        this._renderer.setStyle(
-          this._elementRef.nativeElement,
-          'height',
-          `${savedSize}px`
-        );
-      }
-      this._renderer.setStyle(this._elementRef.nativeElement, 'flex-grow', `0`);
-      this._renderer.setStyle(
-        this._elementRef.nativeElement,
-        'flex-shrink',
-        `0`
-      );
-      this._renderer.setStyle(this._elementRef.nativeElement, 'flex', `none`);
-    }
-  }
-
-  private save() {
-    if (this.name?.length > 0) {
-      if (this.direction === 'vertical') {
-        localStorage.setItem(
-          `resize-panel${this.name}`,
-          this._elementRef.nativeElement.clientWidth
-        );
-      } else {
-        localStorage.setItem(
-          `resize-panel${this.name}`,
-          this._elementRef.nativeElement.clientHeight
-        );
-      }
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ResizePanelComponent } from './resize-panel/resize-panel.component';
-import { IconModule } from '../icon/icon.module';
-import { ResizeDragModule } from '../../directive/resize-drag/resize-drag.module';
-
-@NgModule({
-  declarations: [ResizePanelComponent],
-  exports: [ResizePanelComponent],
-  imports: [CommonModule, IconModule, ResizeDragModule],
-})
-export class ResizePanelModule {}

package/src/component/select/Select.stories.ts

@@ -1,254 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import {
-  boolean,
-  optionsKnob,
-  select,
-  withKnobs,
-} from '@storybook/addon-knobs';
-import { Align } from '../../common/enum/align.enum';
-import { VerticalAlign } from '../../common/enum/vertical-align.enum';
-import { SelectComponent } from './select/select.component';
-import { SelectModule } from './select.module';
-import * as faker from 'faker';
-import { iconsList } from '../icon/icons-list';
-import { IconModule } from '../icon/icon.module';
-import { FormsModule } from '@angular/forms';
-
-export default {
-  title: 'Component/Select',
-  decorators: [withKnobs],
-  component: SelectComponent,
-  moduleMetadata: {
-    imports: [SelectModule, FormsModule],
-  },
-} as Meta;
-
-const getOptions = (size) => {
-  const res = [];
-  for (let i = 0; i < size; i++) {
-    res.push({
-      id: i,
-      name: faker.address.city(),
-    });
-  }
-  return res;
-};
-
-export const singleSelect = () => ({
-  moduleMetadata: {
-    imports: [SelectModule, IconModule, FormsModule],
-  },
-  props: {
-    icon: 'user',
-    options: getOptions(10),
-    align: select(
-      'align',
-      {
-        left: Align.left,
-        right: Align.right,
-        center: Align.center,
-        auto: Align.auto,
-        fitWidth: Align.fitWidth,
-      },
-      Align.fitWidth
-    ),
-    verticalAlign: select(
-      'verticalAlign',
-      {
-        bottom: VerticalAlign.bottom,
-        top: VerticalAlign.top,
-        center: VerticalAlign.center,
-        auto: VerticalAlign.auto,
-      },
-      VerticalAlign.bottom
-    ),
-    autoClose: boolean('autoClose', true),
-    virtual: boolean('virtual', false),
-    autoCloseIgnore: optionsKnob(
-      'autoCloseIgnore',
-      {
-        esc: 'esc',
-        enter: 'enter',
-        inside: 'inside',
-        outside: 'outside',
-      },
-      ['inside'],
-      {
-        display: 'check',
-      }
-    ),
-    selected: null,
-  },
-  template: `<div class="padding-4 bg-panel-50" [tetaIconSprite]="'assets/icons.svg'">
-    <teta-select  style="width: 200px;"
-                  [options]="options"
-                  [icon]="icon"
-                  [align]="align"
-                  [verticalAlign]="verticalAlign"
-                  [ngModel]="selected"
-                  (ngModelChange)="selected = $event"
-                  [searchRef]="'name'"
-                  [textRef]="'name'"
-                  [virtual]="virtual"
-                  [valueRef]="'id'"
-                  [autoClose]="autoClose"
-                  [autoCloseIgnore]="autoCloseIgnore"
-                  [disabled]="false">
-      <ng-template tetaSelectOption let-option>
-        {{option.name}}
-      </ng-template>
-      <ng-template tetaSelectValue let-value>
-        {{value?.name}}
-      </ng-template>
-    </teta-select>
-    <div class="margin-top-3">
-      value: {{selected | json}}
-    </div>
-  </div>`,
-});
-
-export const multipleSelect = () => ({
-  moduleMetadata: {
-    imports: [SelectModule, IconModule, FormsModule],
-  },
-  props: {
-    icon: select('icon', iconsList, null),
-    options: getOptions(10),
-    align: select(
-      'align',
-      {
-        left: Align.left,
-        right: Align.right,
-        center: Align.center,
-        auto: Align.auto,
-        fitWidth: Align.fitWidth,
-      },
-      Align.fitWidth
-    ),
-    verticalAlign: select(
-      'verticalAlign',
-      {
-        bottom: VerticalAlign.bottom,
-        top: VerticalAlign.top,
-        center: VerticalAlign.center,
-        auto: VerticalAlign.auto,
-      },
-      VerticalAlign.bottom
-    ),
-    autoClose: boolean('autoClose', true),
-    autoCloseIgnore: optionsKnob(
-      'autoCloseIgnore',
-      {
-        esc: 'esc',
-        enter: 'enter',
-        inside: 'inside',
-        outside: 'outside',
-      },
-      ['inside'],
-      {
-        display: 'check',
-      }
-    ),
-    selected: null,
-  },
-  template: `<div class="padding-4 bg-panel-50" [tetaIconSprite]="'assets/icons.svg'">
-    <teta-select  style="width: 300px;"
-                  [options]="options"
-                  [multiple]="true"
-                  [icon]="icon"
-                  [align]="align"
-                  [verticalAlign]="verticalAlign"
-                  [ngModel]="selected"
-                  (ngModelChange)="selected = $event"
-                  [searchRef]="'name'"
-                  [valueRef]="'id'"
-                  [textRef]="'name'"
-                  [autoClose]="autoClose"
-                  [autoCloseIgnore]="autoCloseIgnore">
-      <ng-template tetaSelectOption let-option>
-        {{option.name}}
-      </ng-template>
-<!--      <ng-template tetaSelectValue let-value>-->
-<!--        {{value?.name}}-->
-<!--      </ng-template>-->
-    </teta-select>
-    <div class="margin-top-3">
-      value: {{selected | json}}
-    </div>
-  </div>`,
-});
-
-export const multipleCustom = () => ({
-  moduleMetadata: {
-    imports: [SelectModule, IconModule, FormsModule],
-  },
-  props: {
-    icon: select('icon', iconsList, null),
-    options: getOptions(10),
-    align: select(
-      'align',
-      {
-        left: Align.left,
-        right: Align.right,
-        center: Align.center,
-        auto: Align.auto,
-        fitWidth: Align.fitWidth,
-      },
-      Align.fitWidth
-    ),
-    verticalAlign: select(
-      'verticalAlign',
-      {
-        bottom: VerticalAlign.bottom,
-        top: VerticalAlign.top,
-        center: VerticalAlign.center,
-        auto: VerticalAlign.auto,
-      },
-      VerticalAlign.bottom
-    ),
-    autoClose: boolean('autoClose', true),
-    autoCloseIgnore: optionsKnob(
-      'autoCloseIgnore',
-      {
-        esc: 'esc',
-        enter: 'enter',
-        inside: 'inside',
-        outside: 'outside',
-      },
-      ['inside'],
-      {
-        display: 'check',
-      }
-    ),
-    selected: null,
-  },
-  template: `<div class="padding-4 bg-panel-50" [tetaIconSprite]="'assets/icons.svg'">
-    <teta-select  style="width: 300px;"
-                  [options]="options"
-                  [multiple]="true"
-                  [icon]="icon"
-                  [align]="align"
-                  [verticalAlign]="verticalAlign"
-                  [ngModel]="selected"
-                  (ngModelChange)="selected = $event"
-                  [searchRef]="'name'"
-                  [valueRef]="'id'"
-                  [textRef]="'name'"
-                  [autoClose]="autoClose"
-                  [autoCloseIgnore]="autoCloseIgnore">
-      <ng-template tetaSelectOption let-option>
-        {{option.name}}
-      </ng-template>
-      <ng-template tetaSelectValue let-value>
-      <div class="row row_auto overflow-hidden">
-        <div *ngFor="let item of value" class="color-red-50">
-          {{item?.name}},
-        </div>
-      </div>
-      </ng-template>
-    </teta-select>
-    <div class="margin-top-3">
-      value: {{selected | json}}
-    </div>
-  </div>`,
-});

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

@@ -1,4 +0,0 @@
-export * from './select.module';
-export * from './select-option.directive';
-export * from './select-value.directive';
-export * from './select/select.component';

package/src/component/select/select/select.component.html

@@ -1,92 +0,0 @@
-<teta-dropdown [align]="align"
-               [verticalAlign]="verticalAlign"
-               [autoClose]="autoClose"
-               [autoCloseIgnore]="autoCloseIgnore"
-               [(open)]="open"
-               [appendToBody]="appendToBody"
-               [disabled]="disabled"
-               class="row row_auto">
-  <div tetaDropdownHead
-       class="row row_auto select-head"
-       [class.select-head_invalid]="invalid">
-    <div class="row_auto flex align-center">
-      <teta-icon *ngIf="icon" [name]="icon" class="margin-right-1"></teta-icon>
-      <span class="placeholder" *ngIf="(value == null || value?.length === 0) && placeholder">
-          {{placeholder}}
-        </span>
-      <ng-container
-        *ngTemplateOutlet="valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}"></ng-container>
-    </div>
-    <teta-icon [name]="'arrowDownSmall'"></teta-icon>
-  </div>
-  <div *ngIf="options?.length" tetaDropdownContent class="select-list scrollable row_auto" (click)="$event.preventDefault()">
-    <ng-container *ngIf="searchRef">
-      <div class="select-search">
-        <teta-text-field [ngModel]="searchText"
-                         (ngModelChange)="search($event)"
-                         [placeholder]="'Поиск'"
-                         [leftIconName]="'search'"></teta-text-field>
-      </div>
-      <div class="list-divider"></div>
-    </ng-container>
-    <ng-container *ngIf="!multiple && allowNull">
-      <div class="list-item list-item_interactive"
-           (click)="clear()"
-           [class.list-item_active]="value==null">
-        Не выбрано
-      </div>
-      <div class="list-divider"></div>
-    </ng-container>
-    <ng-container *ngIf="!virtual">
-      <div class="list-item list-item_interactive"
-           *ngFor="let option of visibleOptions"
-           [class.select-list-item_active]="itemSelected(option) && multiple"
-           [class.list-item_active]="itemSelected(option)"
-           [class.select-list-item]="multiple"
-           (click)="clickOption(option, $event)">
-        <teta-icon *ngIf="itemSelected(option) && multiple" [name]="'tick'" [palette]="'primary'"></teta-icon>
-        <span [tetaHighlight]="searchText">
-          <ng-container
-            *ngTemplateOutlet="optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}">
-          </ng-container>
-        </span>
-      </div>
-    </ng-container>
-    <cdk-virtual-scroll-viewport *ngIf="virtual"
-                                 [itemSize]="40"
-                                 minBufferPx="200"
-                                 maxBufferPx="600">
-      <div class="select-list-item select-list-item_interactive"
-           *cdkVirtualFor="let option of visibleOptions; templateCacheSize: 0;"
-           [class.select-list-item_active]="itemSelected(option)"
-           [tetaHighlight]="searchText"
-           (click)="clickOption(option, $event)">
-        <teta-icon *ngIf="itemSelected(option)" [name]="'tick'" [palette]="'primary'" class="margin-left-2"></teta-icon>
-        <div [tetaHighlight]="searchText">
-          <ng-container
-            *ngTemplateOutlet="optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}">
-          </ng-container>
-        </div>
-      </div>
-    </cdk-virtual-scroll-viewport>
-    <div class="row row_auto select-chip-field flex-wrap" *ngIf="multiple && value?.length">
-      <div *ngFor="let item of value" class="chip">
-        <teta-icon [name]="'closeCircle'" (click)="removeItemClick(item, $event)"></teta-icon>
-        {{getText(item)}}
-      </div>
-    </div>
-  </div>
-</teta-dropdown>
-
-<ng-template #optionDefault let-option>
-  {{getText(option)}}
-</ng-template>
-<ng-template #valueDefault let-value>
-  <div class="row_auto overflow-hidden text-overflow-ellipsis" *ngIf="multiple">
-    <ng-container
-      *ngFor="let item of value; let i = index">{{getText(item) + (value.length === i + 1 ? '' : ', ') }}</ng-container>
-  </div>
-  <ng-container *ngIf="!multiple">
-    <span class="row row_auto  overflow-hidden text-overflow-ellipsis">{{getText(value)}}</span>
-  </ng-container>
-</ng-template>

package/src/component/select/select/select.component.spec.ts

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