@tetacom/ng-components 1.0.25 → 1.0.28

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

@@ -1,4 +0,0 @@
-export * from './input.module';
-export * from './input/input.component';
-export * from './text-field/text-field.component';
-export * from './form-group-title/form-group-title.component';

package/src/component/input/sample-input/sample-input/sample-input.component.html

@@ -1,28 +0,0 @@
-<form [formGroup]="form">
-  <teta-input label="onBlur">
-    <teta-text-field [formControlName]="'name'"></teta-text-field>
-  </teta-input>
-  <teta-input label="onBlur">
-    <input [formControlName]="'name2'"/>
-  </teta-input>
-  <teta-input label="onChange">
-    <teta-text-field [formControlName]="'surname'"></teta-text-field>
-  </teta-input>
-</form>
-<div style="margin-top: 50px;">
-  <div style="display: flex; flex-direction: row; flex-wrap: wrap;grid-gap: 8px;align-items: center;"
-       class="bg-text-20 padding-3">
-    <div style="display: flex;grid-gap: 8px;align-items: center;"
-         *ngFor="let i of [].constructor(20); let ind = index;">
-      <div>
-        MD
-      </div>
-      <div class="number-text position-relative">
-        <div (click)="show=ind">
-          {{value[ind]}}
-        </div>
-        <input  *ngIf="show===ind" (blur)="show=null" [(ngModel)]="value[ind]" class="number-input"/>
-      </div>
-    </div>
-  </div>
-</div>

package/src/component/input/sample-input/sample-input/sample-input.component.scss

@@ -1,25 +0,0 @@
-.number-text {
-  display: flex;
-  padding: 5px;
-  font-size: 16px;
-  height: 24px;
-  align-items: center;
-  width: auto;
-  flex-grow: 0;
-}
-
-.number-input {
-  height: 24px;
-  border: solid 1px;
-  display: flex;
-  padding: 4px;
-  font-size: 16px;
-  align-items: center;
-  flex-grow: 0;
-  position: absolute;
-  min-width: 0;
-  width: 100%;
-  left: 0;
-  right: 0;
-  background: grey;
-}

package/src/component/input/sample-input/sample-input/sample-input.component.spec.ts

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

package/src/component/input/sample-input/sample-input/sample-input.component.ts

@@ -1,38 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
-
-@Component({
-  selector: 'teta-sample-input',
-  templateUrl: './sample-input.component.html',
-  styleUrls: ['./sample-input.component.scss']
-})
-export class SampleInputComponent implements OnInit {
-  form: FormGroup;
-  show: number;
-  value = new Array(20).fill(1684);
-  constructor() {
-    this.form = new FormGroup({
-      name: new FormControl('', {
-        updateOn: 'blur'
-      }),
-      name2: new FormControl('', {
-        updateOn: 'blur'
-      }),
-      surname: new FormControl('', {
-        updateOn: 'change'
-      })
-    });
-
-    this.form.valueChanges.subscribe((changes) => {
-      console.log('changes', changes);
-    });
-  }
-
-  log(text) {
-    console.log(text);
-  }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/component/input/sample-input/sample-input.module.ts

@@ -1,22 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SampleInputComponent} from './sample-input/sample-input.component';
-import {InputModule} from '../input.module';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-
-@NgModule({
-  declarations: [
-    SampleInputComponent
-  ],
-  exports: [
-    SampleInputComponent
-  ],
-  imports: [
-    CommonModule,
-    InputModule,
-    ReactiveFormsModule,
-    FormsModule
-  ]
-})
-export class SampleInputModule {
-}

package/src/component/input/text-field/text-field.component.html

@@ -1,19 +0,0 @@
-<teta-icon *ngIf="leftIconName" [name]="leftIconName"></teta-icon>
-<input
-  #input
-  [ngModel]="value"
-  [tetaOnlyNumber]="onlyNumber"
-  (ngModelChange)="value = $event; onChange($event);"
-  [placeholder]="placeholder"
-  [disabled]="disabled"
-  (blur)="emitBlur()"
-  (keydown)="keyPress($event)"
-  autocomplete="off"
-  type="text"
-/>
-<teta-icon
-  *ngIf="value && !disabled"
-  class="close-icon"
-  [name]="'closeCircle'"
-  (click)="value = ''; onChange('');"
-></teta-icon>

package/src/component/input/text-field/text-field.component.spec.ts

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

package/src/component/input/text-field/text-field.component.ts

@@ -1,84 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  forwardRef,
-  HostBinding,
-  HostListener,
-  Input,
-  ViewChild,
-} from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-
-@Component({
-  selector: 'teta-text-field',
-  templateUrl: './text-field.component.html',
-  styleUrls: ['./text-field.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => TextFieldComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TextFieldComponent implements ControlValueAccessor {
-  @Input() placeholder = '';
-  @Input() leftIconName?: string;
-  @HostBinding('class.text-field_disabled')
-  @Input()
-  disabled = false;
-  @Input() onlyNumber = false;
-  @HostBinding('class.text-field_invalid')
-  @Input()
-  invalid: boolean;
-  @ViewChild('input', {static: false}) input: ElementRef;
-  @HostBinding('attr.tabindex')
-  private readonly tabindex = 0;
-  @HostBinding('class.text-field')
-  private readonly textField = true;
-  value = '';
-
-  constructor(private _cdr: ChangeDetectorRef) {
-  }
-
-  @HostListener('click') onFocus() {
-    this.input.nativeElement.focus();
-  }
-
-  keyPress(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.keyCode === 13) {
-      this.input.nativeElement.blur();
-    }
-  }
-
-  emitBlur() {
-    this.onTouched();
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this._cdr.detectChanges();
-  }
-
-  writeValue(input: string): void {
-    this.value = input;
-    this._cdr.detectChanges();
-  }
-
-  onChange(input: string): void {
-  }
-
-  onTouched(): void {
-  }
-}

package/src/component/list/List.stories.ts

@@ -1,56 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import { IconModule } from '../icon/icon.module';
-
-export default {
-  title: 'Component/List',
-} as Meta;
-
-export const basicList = () => ({
-  moduleMetadata: {
-    imports: [IconModule],
-  },
-  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="padding-10">
-<div class="list shadow-1" style="width: 200px">
-  <div class="list-item">
-    <teta-icon [name]="'user'" [palette]="'text'" class="margin-right-2"></teta-icon>Jerome Bell
-  </div>
-  <div class="list-item">
-    <teta-icon [name]="'calendar'" [palette]="'text'" class="margin-right-2"></teta-icon>Courtney Henry
-  </div>
-  <div class="list-item">
-    <teta-icon [name]="'eye'" [palette]="'text'" class="margin-right-2"></teta-icon>Wade Warren
-  </div>
-  <div class="list-item">
-    <teta-icon [name]="'folder'" [palette]="'text'" class="margin-right-2"></teta-icon>Ralph Edwards
-  </div>
-  <div class="list-item">
-    <teta-icon [name]="'map'" [palette]="'text'" class="margin-right-2"></teta-icon>Marvin McKinney
-  </div>
-</div>
-</div>`,
-});
-
-export const interactiveList = () => ({
-  moduleMetadata: {
-    imports: [IconModule],
-  },
-  template: `<div class="padding-10">
-<div class="list shadow-1" style="width: 200px">
-  <div class="list-item list-item_interactive">
-    <teta-icon [name]="'user'" [palette]="'text'" class="margin-right-2"></teta-icon>Jerome Bell
-  </div>
-  <div class="list-item list-item_interactive">
-    <teta-icon [name]="'calendar'" [palette]="'text'" class="margin-right-2"></teta-icon>Courtney Henry
-  </div>
-  <div class="list-item list-item_interactive">
-    <teta-icon [name]="'eye'" [palette]="'text'" class="margin-right-2"></teta-icon>Wade Warren
-  </div>
-  <div class="list-item list-item_interactive">
-    <teta-icon [name]="'folder'" [palette]="'text'" class="margin-right-2"></teta-icon>Ralph Edwards
-  </div>
-  <div class="list-item list-item_interactive">
-    <teta-icon [name]="'map'" [palette]="'text'" class="margin-right-2"></teta-icon>Marvin McKinney
-  </div>
-</div>
-</div>`,
-});

package/src/component/list/list.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule
-  ]
-})
-export class ListModule { }

package/src/component/message/Message.stories.ts

@@ -1,20 +0,0 @@
-import {Meta} from '@storybook/angular/types-6-0';
-import {select, withKnobs} from '@storybook/addon-knobs';
-import {MessageSampleComponent} from './message-samples/message-sample/message-sample.component';
-import {MessageSamplesModule} from './message-samples/message-samples.module';
-
-export default {
-  title: 'Component/Message',
-  decorators: [withKnobs],
-  component: MessageSampleComponent,
-  moduleMetadata: {
-    imports: [MessageSamplesModule]
-  }
-} as Meta;
-
-export const messageSample = () => ({
-  moduleMetadata: {
-    imports: [MessageSamplesModule]
-  },
-  template: `<teta-message-sample></teta-message-sample>`,
-});

package/src/component/message/message/message.component.html

@@ -1,18 +0,0 @@
-<div class="row align-center justify-content-between">
-  <div class="font-title-3 padding-left-1">
-    {{message.title}}
-  </div>
-  <button teta-button
-          [square]="true"
-          [palette]="message.palette"
-          [view]="'primary'"
-          (click)="closeMe($event)">
-    <teta-icon [name]="'closeBig'"></teta-icon>
-  </button>
-</div>
-<div class="font-body-3 padding-v-1" *ngIf="!message.template && message.text">
-  {{message.text}}
-</div>
-<ng-container *ngIf="message.template">
-  <ng-container *ngTemplateOutlet="message.template; context: {$implicit: message}"></ng-container>
-</ng-container>

package/src/component/message/message/message.component.spec.ts

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

package/src/component/message/message/message.component.ts

@@ -1,80 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Input,
-  OnDestroy,
-  Output,
-} from '@angular/core';
-import { Message } from '../model/message';
-
-@Component({
-  selector: 'teta-message',
-  templateUrl: './message.component.html',
-  styleUrls: ['./message.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MessageComponent implements AfterViewInit, OnDestroy {
-  @Input() message: Message;
-  @Input() index: number;
-  @Output() closed: EventEmitter<any> = new EventEmitter();
-  @Input() class;
-
-  @HostBinding('class')
-  private get getClass() {
-    const result = ['message'];
-    if (this.message.className?.length > 0) {
-      result.push(...this.message.className);
-    }
-    if (this.message.palette) {
-      result.push(`message-${this.message.palette}`);
-    }
-    return result.join(' ');
-  }
-
-  timeout: any;
-
-  constructor() {}
-
-  @HostListener('mouseleave')
-  init() {
-    if (!this.message.infinite) {
-      this.timeout = setTimeout(() => {
-        this.closed.emit({
-          index: this.index,
-          message: this.message,
-        });
-      }, this.message.duration);
-    }
-  }
-
-  @HostListener('mouseenter')
-  reset() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
-    }
-  }
-
-  closeMe(event: MouseEvent) {
-    this.reset();
-
-    this.closed.emit({
-      index: this.index,
-      message: this.message,
-    });
-
-    event.preventDefault();
-  }
-
-  ngAfterViewInit() {
-    this.init();
-  }
-
-  ngOnDestroy() {
-    this.reset();
-  }
-}

package/src/component/message/message-host/message-host.component.html

@@ -1,6 +0,0 @@
-<teta-message
-  *ngFor="let message of messages; let i=index"
-  (closed)="closedItem($event)"
-  [message]="message"
-  [index]="i">
-</teta-message>

package/src/component/message/message-host/message-host.component.spec.ts

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

package/src/component/message/message-host/message-host.component.ts

@@ -1,94 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { MessageService } from '../message.service';
-import { Message } from '../model/message';
-import { Align } from '../../../common/enum/align.enum';
-import { VerticalAlign } from '../../../common/enum/vertical-align.enum';
-import { takeWhile } from 'rxjs/operators';
-
-@Component({
-  selector: 'teta-message-host',
-  templateUrl: './message-host.component.html',
-  styleUrls: ['./message-host.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MessageHostComponent implements OnInit, OnDestroy {
-  @Input() class;
-  @Input() align: Align = Align.right;
-  @Input() verticalAlign: VerticalAlign = VerticalAlign.bottom;
-  @Output() itemClose: EventEmitter<any> = new EventEmitter();
-
-  messages: Message[] = [];
-  private readonly _alignMap: Map<Align, string> = new Map<Align, string>()
-    .set(Align.right, 'message-host_right')
-    .set(Align.left, 'message-host_left')
-    .set(Align.center, 'message-host_center');
-  private readonly _valignMap: Map<VerticalAlign, string> = new Map<
-    VerticalAlign,
-    string
-  >()
-    .set(VerticalAlign.top, 'message-host_top')
-    .set(VerticalAlign.center, 'message-host_vertical-center')
-    .set(VerticalAlign.bottom, 'message-host_bottom');
-
-  @HostBinding('class')
-  private get getClass(): string {
-    const result = [this.class, 'message-host'];
-    if (this._alignMap.has(this.align)) {
-      result.push(this._alignMap.get(this.align));
-    }
-    if (this._valignMap.has(this.verticalAlign)) {
-      result.push(this._valignMap.get(this.verticalAlign));
-    }
-    return result.join(' ');
-  }
-
-  private _alive = true;
-
-  constructor(private _svc: MessageService, private _cdr: ChangeDetectorRef) {}
-
-  ngOnInit() {
-    this._svc.message
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((messages) => {
-        if (messages) {
-          if (!this.messages) {
-            this.messages = [];
-          }
-          this.messages.push(messages);
-        }
-        this._cdr.markForCheck();
-      });
-
-    this._svc.clear
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((x: string) => {
-        if (!x) {
-          this.messages = [];
-        } else {
-          this.messages = this.messages?.filter((_) => _.name !== x);
-        }
-        this._cdr.markForCheck();
-      });
-  }
-
-  closedItem(event: any) {
-    this.messages.splice(event.index, 1);
-    this.itemClose.emit({
-      message: event.message,
-    });
-  }
-
-  ngOnDestroy() {
-    this._alive = false;
-  }
-}

package/src/component/message/message-samples/message-sample/message-sample.component.html

@@ -1,31 +0,0 @@
-<div class="padding-3 bg-panel-50" [tetaIconSprite]="'assets/icons.svg'">
-  <button teta-button [palette]="'primary'"
-          (click)="create('Simple' , 'I will close after 5 seconds', false, 'primary')">
-    Simple
-  </button>
-  <button teta-button [palette]="'primary'"
-          (click)="create('Infinite' , 'I will close after 5 seconds', true, 'primary')">
-    Infinite
-  </button>
-  <button teta-button [palette]="'green'"
-          (click)="create('Infinite' , 'I will close after 5 seconds', true, 'green')">
-    Infinite
-  </button>
-  <button teta-button [palette]="'red'"
-          (click)="create('Custom class' , 'I am supposed to have red background I am supposed to have red background I am supposed to have red background I am supposed to have red background I am supposed to have red background I am supposed to have red background I am supposed to have red background I am supposed to have red background I am supposed to have red background ', false, 'red','bg-red-20')">
-    With a custom class name
-  </button>
-  <button teta-button [palette]="'text'"
-          (click)="create('Template' , 'I have a custom template', false, 'text', '', messageTemplate)">
-    Template
-  </button>
-
-  <teta-message-host></teta-message-host>
-
-  <ng-template #messageTemplate let-message>
-    <div class="bg-green-10">
-      {{message.text}}
-    </div>
-
-  </ng-template>
-</div>