@tetacom/ng-components 1.0.24 → 1.0.25

package/src/component/icon/icon/icon.component.html

@@ -0,0 +1,3 @@
+<svg class="icon__image">
+  <use [attr.xlink:href]="getName()"></use>
+</svg>

package/src/component/icon/icon/icon.component.spec.ts

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

package/src/component/icon/icon/icon.component.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { TetaSize } from '../../../common/enum/teta-size.enum';
+
+@Component({
+  selector: 'teta-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IconComponent implements OnInit {
+  @Input() name: string;
+  @Input() size: TetaSize = TetaSize.M;
+  @Input() palette: string;
+
+  @Input() class;
+
+  @HostBinding('class')
+  private get getClass(): string {
+    const result = [this.class, 'icon'];
+    if (this.palette) {
+      result.push(`icon-${this.palette}`);
+    }
+    return result.join(' ');
+  }
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  getName(): string {
+    return `#${this.name}`;
+  }
+}

package/src/component/icon/icon-sprite.directive.spec.ts

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

package/src/component/icon/icon-sprite.directive.ts

@@ -0,0 +1,24 @@
+import {Directive, Input, OnInit} from '@angular/core';
+import {IconService} from './icon.service';
+
+@Directive({
+  selector: '[tetaIconSprite]'
+})
+export class IconSpriteDirective implements OnInit {
+  @Input() tetaIconSprite: string | string[];
+  @Input() bypassInterceptors = true;
+
+  constructor(private _iconService: IconService) {
+  }
+
+  ngOnInit(): void {
+    if (typeof this.tetaIconSprite === 'string') {
+      this._iconService.addSprite(this.tetaIconSprite, this.bypassInterceptors);
+    }
+    if (this.tetaIconSprite instanceof Array && this.tetaIconSprite?.length) {
+      this.tetaIconSprite.forEach((sprite: string) => {
+        this._iconService.addSprite(sprite, this.bypassInterceptors);
+      });
+    }
+  }
+}

package/src/component/icon/icon.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IconComponent} from './icon/icon.component';
+import {IconSpriteDirective} from './icon-sprite.directive';
+import {HttpClientModule} from '@angular/common/http';
+
+
+@NgModule({
+  declarations: [
+    IconComponent,
+    IconSpriteDirective
+  ],
+  exports: [
+    IconComponent,
+    IconSpriteDirective
+  ],
+  imports: [
+    CommonModule,
+    HttpClientModule
+  ]
+})
+export class IconModule {
+}

package/src/component/icon/icon.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { IconService } from './icon.service';
+
+describe('IconService', () => {
+  let service: IconService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(IconService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/component/icon/icon.service.ts

@@ -0,0 +1,57 @@
+import {Inject, Injectable, Renderer2, RendererFactory2} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {HttpBackend, HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IconService {
+  private static _loaded: string[] = [];
+  private static _pending: string[] = [];
+  private _renderer: Renderer2;
+
+  constructor(@Inject(DOCUMENT) protected _document: any,
+              private _rendererFactory: RendererFactory2,
+              private _httpBackend: HttpBackend,
+              private _http: HttpClient) {
+    this._renderer = this._rendererFactory.createRenderer(null, null);
+  }
+
+  addSprite(url: string, bypassInterceptors: boolean = true) {
+    if (IconService._loaded.indexOf(url) < 0 && IconService._pending.indexOf(url) < 0) {
+      IconService._pending.push(url);
+      this.getSVG(url, bypassInterceptors).subscribe(svg => {
+        IconService._pending = IconService._pending.filter(_ => _ !== url);
+        IconService._loaded.push(url);
+        this._renderer.insertBefore(this._document.body, svg, this._document.body.firstChild);
+      });
+    }
+  }
+
+  private getSVG(url: string, bypassInterceptors: boolean = true): Observable<SVGElement> {
+    const http = bypassInterceptors ? new HttpClient(this._httpBackend) : this._http;
+    return http.get(url, {responseType: 'text'})
+      .pipe(
+        map((svgText: string) => {
+          const svgEl = this.svgElementFromString(svgText);
+          return this.cloneSVG(svgEl);
+        })
+      );
+  }
+
+  private svgElementFromString(str: string): SVGElement | never {
+    const div = this._renderer.createElement('DIV');
+    div.innerHTML = str;
+    const svg = div.querySelector('svg') as SVGElement;
+    if (!svg) {
+      throw new Error('No SVG found in loaded contents');
+    }
+    return svg;
+  }
+
+  private cloneSVG(svg: SVGElement): SVGElement {
+    return svg.cloneNode(true) as SVGElement;
+  }
+}

package/src/component/icon/icons-list.ts

@@ -0,0 +1,173 @@
+export const iconsList = [
+  'add',
+  'addArea',
+  'addCircle',
+  'addComment',
+  'arrowDown',
+  'arrowDownKey',
+  'arrowDownSmall',
+  'arrowLeft',
+  'arrowLeftKey',
+  'arrowLeftSmall',
+  'arrowRight',
+  'arrowRightKey',
+  'arrowRightSmall',
+  'arrowUp',
+  'arrowUpDownSmall',
+  'arrowUpKey',
+  'arrowUpSmall',
+  'autoSize',
+  'autoSizeAll',
+  'backspace',
+  'bullet',
+  'calc',
+  'calendar',
+  'camera',
+  'chart',
+  'checkCircle',
+  'clock',
+  'clockChange',
+  'closeBig',
+  'closeCircle',
+  'comment',
+  'copy',
+  'copySelected',
+  'cut',
+  'dash',
+  'delete',
+  'deleteSelected',
+  'document',
+  'documentAnalyze',
+  'dots',
+  'download',
+  'drop',
+  'edit',
+  'end',
+  'eye',
+  'fader',
+  'filter',
+  'filterSortDown',
+  'filterSortUp',
+  'flag',
+  'folder',
+  'fullScreen',
+  'gantt',
+  'gisMonochrome',
+  'handbag',
+  'info',
+  'isoline',
+  'lamp',
+  'layers',
+  'layersLines',
+  'link',
+  'list',
+  'lock',
+  'map',
+  'measurement',
+  'menu',
+  'minus',
+  'monitoringDepth',
+  'monitoringTime',
+  'moreHorizontal',
+  'moreVertical',
+  'multiCopy',
+  'newTemplate',
+  'noSignal',
+  'paste',
+  'pause',
+  'pc',
+  'pdf',
+  'pieChart',
+  'pin',
+  'play',
+  'playBackRight',
+  'playForwardRight',
+  'print',
+  'question',
+  'redo',
+  'rewBack',
+  'rewForward',
+  'ring',
+  'save',
+  'search',
+  'settings',
+  'signal',
+  'square',
+  'star',
+  'start',
+  'stop',
+  'sum',
+  'table',
+  'tabletGraph',
+  'templateDownload',
+  'templateSettings',
+  'templateUpload',
+  'tick',
+  'timeOut',
+  'tree',
+  'treeTurn',
+  'undo',
+  'unpin',
+  'update',
+  'upload',
+  'user',
+  'warning',
+  'well',
+  'wrench',
+  'xls',
+  'xyz',
+  'horizontal',
+  'vertical',
+  'srt',
+  'nolteAnalysis',
+  'miniFrac',
+  'hornerAnalysis',
+];
+
+export const coloredIconsList = [
+  'gisColor',
+  'gisInnerColor',
+  'gisSimpleColor',
+  'grpAddColor',
+  'grpColor',
+  'handbagAddColor',
+  'handbagColor',
+  'improveColor',
+  'lineColor',
+  'lineDashedColor',
+  'lineGradientColor',
+  'liquidAddColor',
+  'liquidSystemColor',
+  'lithotypeColor',
+  'mapColor',
+  'nktColor',
+  'opzAddColor',
+  'opzColor',
+  'sortDownColor',
+  'sortUpColor',
+  'sumAddColor',
+  'sumColor',
+  'wellAddColor',
+  'wellColor',
+  'wellConstructionColor',
+  'addColor',
+  'areasColor',
+  'barChart',
+  'barChart',
+  'calcColor',
+  'calendarColor',
+  'chartLineColor',
+  'chartLineDashed',
+  'chartLineGradientColor',
+  'clusterColor',
+  'coinColor',
+  'deleteColor',
+  'documentColor',
+  'favorite',
+  'filterColor',
+  'filterSortDownColor',
+  'filterSortUpColor',
+  'folderAddColor',
+  'folderColor',
+  'geomechColor',
+];

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

@@ -0,0 +1,4 @@
+export * from './icon.module';
+export * from './icon.service';
+export * from './icon-sprite.directive';
+export * from './icon/icon.component';

package/src/component/input/Input.stories.ts

@@ -0,0 +1,142 @@
+import {Meta} from '@storybook/angular/types-6-0';
+import {withKnobs} from '@storybook/addon-knobs';
+import {IconComponent} from '../icon/icon/icon.component';
+import {IconModule} from '../icon/icon.module';
+import {InputModule} from './input.module';
+import {FormsModule} from '@angular/forms';
+import {SelectModule} from '../select/select.module';
+import {RadioModule} from '../radio/radio.module';
+import {DatePickerModule} from '../date-picker/date-picker.module';
+import {ToggleModule} from '../toggle/toggle.module';
+import {CheckboxModule} from '../checkbox/checkbox.module';
+import {action} from '@storybook/addon-actions';
+import {SampleInputModule} from './sample-input/sample-input.module';
+
+export default {
+  title: 'Component/Input',
+  decorators: [withKnobs],
+  component: IconComponent,
+  moduleMetadata: {
+    imports: [IconModule],
+  },
+} as Meta;
+
+export const reactiveForm = () => ({
+  moduleMetadata: {
+    imports: [
+      SampleInputModule,
+      IconModule,
+      InputModule,
+      FormsModule,
+      SelectModule,
+      RadioModule,
+      DatePickerModule,
+      ToggleModule,
+      CheckboxModule,
+    ],
+  },
+  props: {
+    log: (name, value) => {
+      action(name)(value);
+    },
+  },
+  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="border border-text-10 padding-3" style="width: 500px;">
+              <teta-sample-input></teta-sample-input>
+            </div>`,
+});
+
+export const basicInput = () => ({
+  moduleMetadata: {
+    imports: [
+      IconModule,
+      InputModule,
+      FormsModule,
+      SelectModule,
+      RadioModule,
+      DatePickerModule,
+      ToggleModule,
+      CheckboxModule,
+    ],
+  },
+  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="border border-text-10 padding-3" style="width: 500px;">
+  <div class="form-container">
+    <div class="form-row">
+      <teta-input [label]="'text-field'">
+        <teta-text-field [leftIconName]="'user'" [placeholder]="'placeholder'"></teta-text-field>
+      </teta-input>
+      <teta-input [label]="'text-field disabled'">
+        <teta-text-field [leftIconName]="'user'" [disabled]="true" [placeholder]="'placeholder'"></teta-text-field>
+      </teta-input>
+      <teta-input [label]="'text-field invalid'">
+        <teta-text-field [leftIconName]="'user'" [invalid]="true" [placeholder]="'placeholder'"></teta-text-field>
+        <div ngProjectAs="message" class="color-red-50">
+          Has errors
+        </div>
+      </teta-input>
+    </div>
+    <div class="form-row">
+      <teta-input [label]="'input'">
+        <input class="input" [placeholder]="'placeholder'" />
+      </teta-input>
+      <teta-input [label]="'input disabled'">
+        <input class="input" disabled [placeholder]="'placeholder'" />
+      </teta-input>
+      <teta-input [label]="'input invalid'">
+        <input class="input" [class.input_invalid]="true" [placeholder]="'placeholder'" />
+        <div ngProjectAs="message" class="color-red-50">
+          Has errors
+        </div>
+      </teta-input>
+    </div>
+    <div class="form-row">
+      <teta-input [label]="'input required'" [required]="true">
+        <input class="input" [placeholder]="'placeholder'" />
+      </teta-input>
+    </div>
+    <div class="form-row">
+      <teta-input [label]="'Select'">
+        <teta-select></teta-select>
+      </teta-input>
+      <teta-input [label]="'Select disabled'">
+        <teta-select [disabled]="true"></teta-select>
+      </teta-input>
+      <teta-input [label]="'Select invalid'">
+        <teta-select [invalid]="true"></teta-select>
+      </teta-input>
+    </div>
+    <teta-input [label]="'Selection'">
+      <teta-radio>
+        <teta-radio-button>Option 1</teta-radio-button>
+        <teta-radio-button>Option 2</teta-radio-button>
+        <teta-radio-button [disabled]="true">Option 3</teta-radio-button>
+      </teta-radio>
+    </teta-input>
+    <teta-toggle>Off / On</teta-toggle>
+    <teta-toggle [disabled]="true">Off / On</teta-toggle>
+    <div class="form-row">
+      <teta-input [label]="'Date'">
+        <teta-date-picker></teta-date-picker>
+      </teta-input>
+      <teta-input [label]="'Date disabled'">
+        <teta-date-picker [disabled]="true"></teta-date-picker>
+      </teta-input>
+      <teta-input [label]="'Date invalid'">
+        <teta-date-picker [invalid]="true"></teta-date-picker>
+      </teta-input>
+    </div>
+    <teta-checkbox [binary]="true">Check Me, babe</teta-checkbox>
+    <teta-checkbox [binary]="true" [disabled]="true">I am disabled</teta-checkbox>
+    <div class="form-row">
+      <teta-input [label]="'textarea'">
+        <textarea class="textarea" [placeholder]="'textarea'"></textarea>
+      </teta-input>
+      <teta-input [label]="'textarea disabled'">
+        <textarea class="textarea" disabled [placeholder]="'textarea'"></textarea>
+      </teta-input>
+      <teta-input [label]="'textarea invalid'">
+        <textarea class="textarea textarea_invalid" [placeholder]="'textarea'"></textarea>
+      </teta-input>
+    </div>
+  </div>
+</div>`,
+});

package/src/component/input/form-group-title/form-group-title.component.html

@@ -0,0 +1,4 @@
+<div class="font-overline form-group-title-text">
+  <ng-content></ng-content>
+</div>
+<div class="form-group-title-line"></div>

package/src/component/input/form-group-title/form-group-title.component.spec.ts

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

package/src/component/input/form-group-title/form-group-title.component.ts

@@ -0,0 +1,20 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  OnInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'teta-form-group-title',
+  templateUrl: './form-group-title.component.html',
+  styleUrls: ['./form-group-title.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormGroupTitleComponent implements OnInit {
+  @HostBinding('class.form-group-title') private readonly className = true;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/component/input/input/input.component.html

@@ -0,0 +1,12 @@
+<div class="font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis"
+     [class.row_6]="horizontal"
+     [class.text-field_required]="required"
+     *ngIf="label?.length > 0">
+  {{label}}
+</div>
+<div class="input-container" [class.row_6]="horizontal">
+  <ng-content></ng-content>
+  <div class="input-message font-error-message">
+    <ng-content select="message"></ng-content>
+  </div>
+</div>

package/src/component/input/input/input.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  grid-gap: 8px;
+  flex-grow: 1;
+  flex-basis: 10px;
+}

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

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

package/src/component/input/input/input.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'teta-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputComponent implements OnInit {
+  @Input() label: string;
+
+  @Input()
+  @HostBinding('class.row')
+  horizontal: boolean;
+
+  @Input()
+  required = false;
+
+  @HostBinding('class.column')
+  get column() {
+    return !this.horizontal;
+  }
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputComponent } from './input/input.component';
+import { TextFieldComponent } from './text-field/text-field.component';
+import { IconModule } from '../icon/icon.module';
+import { FormsModule } from '@angular/forms';
+import { OnlyNumberModule } from '../../directive/only-number/only-number.module';
+import { FormGroupTitleComponent } from './form-group-title/form-group-title.component';
+
+@NgModule({
+  declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent],
+  exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent],
+  imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule],
+})
+export class InputModule {}