@tetacom/ng-components 1.0.25 → 1.0.28

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

@@ -1,222 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ElementRef,
-  forwardRef,
-  HostBinding,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { Align } from '../../../common/enum/align.enum';
-import { VerticalAlign } from '../../../common/enum/vertical-align.enum';
-import { AutoCloseIgnoreCase } from '../../../common/contract/auto-close-ignore-case';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SelectOptionDirective } from '../select-option.directive';
-import { SelectValueDirective } from '../select-value.directive';
-
-@Component({
-  selector: 'teta-select',
-  templateUrl: './select.component.html',
-  styleUrls: ['./select.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SelectComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SelectComponent implements ControlValueAccessor, OnInit {
-  @HostBinding('class.select_multiple')
-  @Input()
-  multiple: boolean;
-  @Input() options: any[];
-  @Input() invalid: boolean;
-  @Input() align: Align = Align.minWidth;
-  @Input() verticalAlign: VerticalAlign = VerticalAlign.bottom;
-  @Input() autoClose = true;
-  @Input() autoCloseIgnore: Array<AutoCloseIgnoreCase> = ['inside'];
-  @Input() disabled: boolean;
-  @Input() itemSize = 32;
-  @Input() virtual: boolean;
-  @Input() icon: string;
-  @Input() placeholder: string;
-  @Input() appendToBody: boolean;
-  @Input() allowNull = true;
-
-  @Input() valueRef: ((item: any) => any) | string;
-  @Input() textRef: ((item: any) => string) | string;
-  @Input() searchRef: string | ((item: any) => string);
-
-  @ContentChild(SelectOptionDirective, { static: true })
-  optionDirective: SelectOptionDirective;
-
-  @ContentChild(SelectValueDirective, { static: true })
-  valueDirective: SelectValueDirective;
-
-  @HostBinding('class.select_open') open = false;
-
-  @HostBinding('class.select') private readonly selectClass = true;
-  @HostBinding('tabindex') private readonly tabindex = 0;
-
-  @HostBinding('class.select_disabled')
-  get isDisabled() {
-    return this.disabled;
-  }
-
-  value: any | any[];
-  searchText: string;
-
-  get visibleOptions(): any[] {
-    if (!this.searchText) {
-      return this.options;
-    }
-    return this.options?.filter(
-      (option) =>
-        this.getSearchString(option)
-          .toLowerCase()
-          .indexOf(this.searchText.toLowerCase()) >= 0
-    );
-  }
-
-  constructor(
-    private _cdr: ChangeDetectorRef,
-    private _elementRef: ElementRef
-  ) {}
-
-  clear() {
-    let val: any;
-    if (this.multiple === true) {
-      val = [];
-    } else {
-      val = null;
-    }
-    this.value = val;
-    this.onChange(this.value);
-    this.open = false;
-    this._cdr.markForCheck();
-    this._cdr.detectChanges();
-  }
-
-  clickOption(option: any, event: MouseEvent): void {
-    if (this.multiple === true) {
-      if (!this.value?.length) {
-        this.value = [];
-      }
-      if (this.value.indexOf(option) >= 0) {
-        this.removeItem(option);
-      } else {
-        this.value = [...this.value, option];
-      }
-      this.onChange(this.value.map((_) => this.getValue(_)));
-    } else {
-      this.value = option;
-      this.onChange(this.getValue(this.value));
-      this.open = false;
-    }
-    this._cdr.markForCheck();
-    this._cdr.detectChanges();
-  }
-
-  itemSelected(option: any): boolean {
-    if (this.multiple) {
-      return this.value?.indexOf(option) >= 0;
-    } else {
-      return this.value === option;
-    }
-  }
-
-  removeItemClick(option: any, event: MouseEvent): void {
-    event.stopPropagation();
-    this.removeItem(option);
-    this.onChange(this.value.map((_) => this.getValue(_)));
-  }
-
-  removeItem(option: any): void {
-    this.value = this.value.filter((_) => _ !== option);
-  }
-
-  search(text: string): void {
-    this.searchText = text;
-  }
-
-  getText(option: any): string {
-    if (option == null) {
-      return '';
-    }
-    switch (typeof this.textRef) {
-      case 'string':
-        return option[this.textRef];
-      case 'function':
-        return this.textRef(option);
-      default:
-        return option;
-    }
-  }
-
-  getValue(option: any): any {
-    switch (typeof this.valueRef) {
-      case 'string':
-        return option[this.valueRef];
-      case 'function':
-        return this.valueRef(option);
-      default:
-        return option;
-    }
-  }
-
-  getSearchString(option: any): string {
-    switch (typeof this.searchRef) {
-      case 'string':
-        return option[this.searchRef];
-      case 'function':
-        return this.searchRef(option);
-      default:
-        return '';
-    }
-  }
-
-  focus() {
-    this._elementRef.nativeElement.focus();
-  }
-
-  ngOnInit(): void {}
-
-  writeValue(value: any | any[]): void {
-    if (this.multiple) {
-      this.value =
-        value && this.options
-          ? this.options.filter(
-              (option) => value.indexOf(this.getValue(option)) > -1
-            )
-          : [];
-    } else {
-      this.value =
-        this.options &&
-        this.options.find((option) => this.getValue(option) === value);
-    }
-    this._cdr.detectChanges();
-  }
-
-  onChange: (value: any) => void = () => {};
-
-  registerOnChange(fn: (value: any) => void): void {
-    this.onChange = fn;
-  }
-
-  onTouched = () => {};
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this._cdr.markForCheck();
-  }
-
-  private getSelectedValue() {}
-}

package/src/component/select/select-option.directive.spec.ts

@@ -1,8 +0,0 @@
-import { SelectOptionDirective } from './select-option.directive';
-
-describe('SelectOptionDirective', () => {
-  it('should create an instance', () => {
-    const directive = new SelectOptionDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/src/component/select/select-option.directive.ts

@@ -1,9 +0,0 @@
-import {Directive, TemplateRef} from '@angular/core';
-
-@Directive({
-  selector: '[tetaSelectOption]'
-})
-export class SelectOptionDirective {
-  constructor(public template: TemplateRef<any>) {
-  }
-}

package/src/component/select/select-value.directive.spec.ts

@@ -1,8 +0,0 @@
-import { SelectValueDirective } from './select-value.directive';
-
-describe('SelectValueDirective', () => {
-  it('should create an instance', () => {
-    const directive = new SelectValueDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/src/component/select/select-value.directive.ts

@@ -1,9 +0,0 @@
-import {Directive, TemplateRef} from '@angular/core';
-
-@Directive({
-  selector: '[tetaSelectValue]'
-})
-export class SelectValueDirective {
-  constructor(public template: TemplateRef<any>) {
-  }
-}

package/src/component/select/select.module.ts

@@ -1,26 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SelectComponent} from './select/select.component';
-import {DropdownModule} from '../dropdown/dropdown.module';
-import {SelectOptionDirective} from './select-option.directive';
-import {SelectValueDirective} from './select-value.directive';
-import {ScrollingModule} from '@angular/cdk/scrolling';
-import {FormsModule} from '@angular/forms';
-import {IconModule} from '../icon/icon.module';
-import {HighlightModule} from '../../directive/highlight/highlight.module';
-import {InputModule} from '../input/input.module';
-
-@NgModule({
-  declarations: [SelectComponent, SelectOptionDirective, SelectValueDirective],
-  exports: [SelectComponent, SelectOptionDirective, SelectValueDirective],
-  imports: [
-    DropdownModule,
-    CommonModule,
-    ScrollingModule,
-    FormsModule,
-    IconModule,
-    HighlightModule,
-    InputModule,
-  ],
-})
-export class SelectModule {}

package/src/component/sidebar/Sidebar.stories.ts

@@ -1,61 +0,0 @@
-import {Meta} from '@storybook/angular/types-6-0';
-import {boolean, withKnobs} from '@storybook/addon-knobs';
-import {SidebarComponent} from './sidebar/sidebar.component';
-import {SidebarModule} from './sidebar.module';
-import {SidebarPosition} from './sidebar-position.enum';
-import {IconModule} from '../icon/icon.module';
-import {ButtonModule} from '../button/button.module';
-
-export default {
-  title: 'Component/Sidebar',
-  decorators: [withKnobs],
-  component: SidebarComponent,
-  moduleMetadata: {
-    imports: [SidebarModule]
-  }
-} as Meta;
-
-export const basic = () => ({
-  moduleMetadata: {
-    imports: [SidebarModule, IconModule, ButtonModule]
-  },
-  props: {
-    backdrop: boolean('backdrop', false),
-    position: SidebarPosition,
-    open1: false,
-    open2: false,
-    open3: false,
-    open4: false
-  },
-  template: `<div class="padding-14 bg-panel-50" [tetaIconSprite]="'assets/icons.svg'">
-    <teta-sidebar [backdrop]="backdrop" [position]="position.left" [open]="open1" [className]="'bg-primary-30'">
-      <div class="font-title-1">Sidebar</div>
-      <div>Sidebar content</div>
-    </teta-sidebar>
-    <teta-sidebar [backdrop]="backdrop" [position]="position.right" [open]="open2" [className]="'bg-primary-30'">
-      <div class="font-title-1">Sidebar</div>
-      <div>Sidebar content</div>
-    </teta-sidebar>
-    <teta-sidebar [backdrop]="backdrop" [position]="position.top" [open]="open3" [className]="'bg-primary-30'">
-      <div class="font-title-1">Sidebar</div>
-      <div>Sidebar content</div>
-    </teta-sidebar>
-    <teta-sidebar [backdrop]="backdrop" [position]="position.bottom" [open]="open4" [className]="'bg-primary-30'">
-      <div class="font-title-1">Sidebar</div>
-      <div>Sidebar content</div>
-    </teta-sidebar>
-    <button teta-button [palette]="'primary'" (click)="open1=!open1;open2=open3=open4=false;">
-      <teta-icon [name]="'arrowLeft'"></teta-icon>
-    </button>
-    <button teta-button [palette]="'primary'" (click)="open2=!open2;open1=open3=open4=false;">
-      <teta-icon [name]="'arrowRight'"></teta-icon>
-    </button>
-    <button teta-button [palette]="'primary'" (click)="open3=!open3;open2=open1=open4=false;">
-      <teta-icon [name]="'arrowUp'"></teta-icon>
-    </button>
-    <button teta-button [palette]="'primary'" (click)="open4=!open4;open2=open3=open1=false;">
-      <teta-icon [name]="'arrowDown'"></teta-icon>
-    </button>
-  </div>`
-});
-

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

@@ -1,3 +0,0 @@
-export * from './sidebar.module';
-export * from './sidebar/sidebar.component';
-export * from './sidebar-position.enum';

package/src/component/sidebar/sidebar/sidebar.component.html

@@ -1,14 +0,0 @@
-<div *ngIf="backdrop && open"
-     [@sidebar]
-     (click)="setOpen(false)"
-     class="sidebar-backdrop"></div>
-<div class="sidebar"
-     [@sidebar]
-     [ngClass]="className"
-     [class.sidebar-top]="position === sidebarPosition.top"
-     [class.sidebar-bottom]="position === sidebarPosition.bottom"
-     [class.sidebar-left]="position === sidebarPosition.left"
-     [class.sidebar-right]="position === sidebarPosition.right"
-     *ngIf="open">
-  <ng-content></ng-content>
-</div>

package/src/component/sidebar/sidebar/sidebar.component.spec.ts

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

package/src/component/sidebar/sidebar/sidebar.component.ts

@@ -1,47 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { SidebarPosition } from '../sidebar-position.enum';
-import { animate, style, transition, trigger } from '@angular/animations';
-
-@Component({
-  selector: 'teta-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('sidebar', [
-      transition('void => *', [
-        style({ opacity: '0' }),
-        animate(300, style({ opacity: '1' })),
-      ]),
-      transition('* => void', [animate(300, style({ opacity: '0' }))]),
-    ]),
-  ],
-})
-export class SidebarComponent implements OnInit {
-  @Input() position: SidebarPosition = SidebarPosition.left;
-  @Input() backdrop: boolean;
-  @Input() open: boolean;
-  @Output() openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-  @Input() className: string | string[];
-
-  @HostBinding('style.z-index') zIndex = 10;
-
-  sidebarPosition = SidebarPosition;
-
-  constructor() {}
-
-  setOpen(value: boolean) {
-    this.open = value;
-    this.openChange.emit(this.open);
-  }
-
-  ngOnInit(): void {}
-}

package/src/component/sidebar/sidebar-position.enum.ts

@@ -1,6 +0,0 @@
-export enum SidebarPosition {
-  left,
-  right,
-  bottom,
-  top
-}

package/src/component/sidebar/sidebar.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SidebarComponent } from './sidebar/sidebar.component';
-import {ButtonModule} from '../button/button.module';
-import {IconModule} from '../icon/icon.module';
-
-@NgModule({
-  declarations: [SidebarComponent],
-  exports: [SidebarComponent],
-  imports: [
-    CommonModule,
-    ButtonModule,
-    IconModule
-  ]
-})
-export class SidebarModule { }

package/src/component/switch/Switch.stories.ts

@@ -1,37 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import { select, withKnobs } from '@storybook/addon-knobs';
-import { IconModule } from '../icon/icon.module';
-import { SwitchComponent } from './switch/switch.component';
-import { SwitchModule } from './switch.module';
-import { action } from '@storybook/addon-actions';
-import { FormsModule } from '@angular/forms';
-
-export default {
-  title: 'Component/Switch',
-  decorators: [withKnobs],
-  component: SwitchComponent,
-  moduleMetadata: {
-    imports: [SwitchModule, FormsModule, IconModule],
-  },
-} as Meta;
-
-export const switchSample = () => ({
-  moduleMetadata: {
-    imports: [SwitchModule, IconModule, FormsModule],
-  },
-  props: {
-    model: 'item 1',
-    palette: select('palette', ['primary', 'grey', 'red', 'white'], 'grey'),
-    values: ['item 1', 'item 2', 'item 3'],
-    log: (name, value) => {
-      action(name)(value);
-    },
-  },
-  template: `<teta-switch [tetaIconSprite]="'assets/icons.svg'"
-                          [ngModel]="model"
-                          (ngModelChange)="log('switch', $event)">
-  <teta-switch-button *ngFor="let val of values" [value]="val">
-    <teta-icon [name]="'settings'" class="margin-right-2"></teta-icon> {{val}}
-  </teta-switch-button>
-</teta-switch>`,
-});

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

@@ -1,3 +0,0 @@
-export * from './switch.module';
-export * from './switch/switch.component';
-export * from './switch-button/switch-button.component';

package/src/component/switch/switch/switch.component.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/src/component/switch/switch/switch.component.spec.ts

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

package/src/component/switch/switch/switch.component.ts

@@ -1,70 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  HostBinding,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SwitchService } from '../switch.service';
-import { filter, takeWhile } from 'rxjs/operators';
-
-export const SWITCH_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => SwitchComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'teta-switch',
-  templateUrl: './switch.component.html',
-  styleUrls: ['./switch.component.scss'],
-  providers: [SWITCH_CONTROL_VALUE_ACCESSOR, SwitchService],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SwitchComponent
-  implements OnInit, OnDestroy, ControlValueAccessor
-{
-  @HostBinding('class.switch') switchClass = true;
-
-  private _alive = true;
-  private _value: any;
-
-  constructor(private svc: SwitchService, private cdr: ChangeDetectorRef) {
-    this.svc.value
-      .pipe(
-        takeWhile((_) => this._alive),
-        filter((_) => _ !== this._value)
-      )
-      .subscribe((_) => {
-        this.onChange(_);
-        this._value = _;
-      });
-  }
-
-  writeValue(model: any) {
-    this._value = model;
-    this.svc.setValue(model);
-    this.cdr.markForCheck();
-  }
-
-  onChange(_: any) {}
-
-  onTouched() {}
-
-  registerOnChange(fn: (_: any) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  ngOnInit(): void {}
-
-  ngOnDestroy(): void {
-    this._alive = false;
-  }
-}

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

@@ -1 +0,0 @@
-<ng-content></ng-content>

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

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