@tetacom/ng-components 1.0.25 → 1.0.26

package/src/common/util/position-util.ts

@@ -1,112 +0,0 @@
-import {IRect} from '../contract/i-rect';
-import {Align} from '../enum/align.enum';
-import {VerticalAlign} from '../enum/vertical-align.enum';
-
-export class PositionUtil {
-  public static getPosition(
-    containerPosition: IRect,
-    elementPosition: IRect,
-    align: Align,
-    verticalAlign: VerticalAlign,
-    margin: number = 0,
-    verticalMargin: number = 0,
-    transformedParentRect: IRect = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    }
-  ): IRect {
-    const rect: IRect = {};
-    const elementWidth = elementPosition.right - elementPosition.left;
-    const elementHeight = elementPosition.bottom - elementPosition.top;
-    const containerWidth = containerPosition.right - containerPosition.left;
-    const containerHeight = containerPosition.bottom - containerPosition.top;
-    if (align === Align.left) {
-      rect.left = containerPosition.left + margin;
-    }
-    if (align === Align.right) {
-      rect.left = containerPosition.right - elementWidth - margin;
-    }
-    if (align === Align.center) {
-      rect.left =
-        (containerPosition.left + containerPosition.right) / 2 -
-        elementWidth / 2;
-    }
-    if (align === Align.fitWidth) {
-      rect.left = containerPosition.left + margin;
-      rect.right = window.innerWidth - containerPosition.right + margin;
-    }
-
-    if (align === Align.minWidth) {
-      rect.left = containerPosition.left + margin;
-      rect.minWidth = containerWidth;
-    }
-
-    if (verticalAlign === VerticalAlign.auto) {
-      if (
-        containerPosition.bottom +
-        (elementPosition.bottom - elementPosition.top) <=
-        window.innerHeight
-      ) {
-        verticalAlign = VerticalAlign.bottom;
-      } else {
-        verticalAlign = VerticalAlign.top;
-      }
-    }
-    if (verticalAlign === VerticalAlign.top) {
-      rect.top = containerPosition.top - elementHeight - verticalMargin;
-    }
-    if (verticalAlign === VerticalAlign.bottom) {
-      rect.top = containerPosition.bottom + verticalMargin;
-    }
-    if (verticalAlign === VerticalAlign.center) {
-      rect.top =
-        (containerPosition.top + containerPosition.bottom) / 2 -
-        elementHeight / 2;
-    }
-
-    if (rect.left < 0) {
-      rect.left = 0;
-    }
-    if (rect.top + elementHeight > window.innerHeight || rect.bottom < 0) {
-      rect.bottom = 0;
-    }
-    if (rect.top < 0) {
-      rect.top = 0;
-    }
-    if (verticalAlign === VerticalAlign.bottom || verticalAlign === VerticalAlign.center) {
-      rect.maxHeight = window.innerHeight - rect.top;
-    }
-    if (verticalAlign === VerticalAlign.top) {
-      rect.maxHeight = containerPosition.top;
-    }
-    rect.left = rect.left - transformedParentRect.left;
-    rect.right = rect.right - transformedParentRect.left;
-    rect.top = rect.top - transformedParentRect.top;
-    rect.bottom = rect.bottom ? rect.bottom - transformedParentRect.bottom : rect.bottom;
-    return rect;
-  }
-
-  public static setElementPosition(element: HTMLElement, rect: IRect): void {
-    element.style.left = rect.left != null ? `${rect.left}px` : '';
-    element.style.right = rect.right != null ? `${rect.right}px` : '';
-    element.style.top = rect.top != null ? `${rect.top}px` : '';
-    element.style.bottom = rect.bottom != null ? `${rect.bottom}px` : '';
-    element.style.maxHeight =
-      rect.maxHeight != null ? `${rect.maxHeight}px` : '';
-    element.style.minWidth = rect.minWidth != null ? `${rect.minWidth}px` : '';
-  }
-
-  public static getMaxHeight(position: IRect): number | null {
-    let maxHeight = null;
-    maxHeight = 1;
-    return maxHeight;
-  }
-
-  public static getMaxWidth(position: IRect): number | null {
-    let maxWidth = null;
-    maxWidth = 1;
-    return maxWidth;
-  }
-}

package/src/common/util/public-api.ts

@@ -1,3 +0,0 @@
-export * from './array-util';
-export * from './dom-util';
-export * from './position-util';

package/src/component/accordion/Accordion.stories.ts

@@ -1,49 +0,0 @@
-import {Meta} from '@storybook/angular/types-6-0';
-import {withKnobs} from '@storybook/addon-knobs';
-import {AccordionComponent} from './accordion/accordion.component';
-import {AccordionModule} from './accordion.module';
-import {IconModule} from '../icon/icon.module';
-
-export default {
-  title: 'Component/Accordion',
-  decorators: [withKnobs],
-  component: AccordionComponent,
-  moduleMetadata: {
-    imports: [AccordionModule]
-  }
-} as Meta;
-
-export const basicAccordion = () => ({
-  moduleMetadata: {
-    imports: [AccordionModule, IconModule]
-  },
-  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="font-body-3 padding-3 bg-panel-50">
-      <teta-accordion class="bg-white-50">
-        <teta-accordion-item>
-          <teta-accordion-head>
-            Heading 1
-          </teta-accordion-head>
-          <ng-template tetaAccordionContent>
-            <div class="padding-v-3 padding-h-5">I am the content 1</div>
-          </ng-template>
-        </teta-accordion-item>
-        <teta-accordion-item [disabled]="true">
-          <teta-accordion-head>
-            Heading 2 (disabled)
-          </teta-accordion-head>
-          <ng-template tetaAccordionContent>
-            <div class="padding-v-3 padding-h-5">I am the content 2</div>
-          </ng-template>
-        </teta-accordion-item>
-        <teta-accordion-item>
-          <teta-accordion-head>
-            Heading 3
-          </teta-accordion-head>
-          <ng-template tetaAccordionContent>
-            <div class="padding-v-3 padding-h-5">I am the content 3</div>
-          </ng-template>
-        </teta-accordion-item>
-      </teta-accordion>
-    </div>`,
-});
-

package/src/component/accordion/accordion/accordion.component.html

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

package/src/component/accordion/accordion/accordion.component.spec.ts

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

package/src/component/accordion/accordion/accordion.component.ts

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

package/src/component/accordion/accordion-content.directive.spec.ts

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

package/src/component/accordion/accordion-content.directive.ts

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

package/src/component/accordion/accordion-head/accordion-head.component.html

@@ -1,6 +0,0 @@
-<ng-content></ng-content>
-<div *ngIf="showToggle" class="accordion-toggle">
-  <teta-icon [name]="open ? 'arrowUpKey' : 'arrowDownKey'"
-             [palette]="'text'"></teta-icon>
-</div>
-

package/src/component/accordion/accordion-head/accordion-head.component.spec.ts

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

package/src/component/accordion/accordion-head/accordion-head.component.ts

@@ -1,54 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Host,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  OnInit,
-} from '@angular/core';
-import { AccordionItemComponent } from '../accordion-item/accordion-item.component';
-
-@Component({
-  selector: 'teta-accordion-head',
-  templateUrl: './accordion-head.component.html',
-  styleUrls: ['./accordion-head.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AccordionHeadComponent implements OnInit {
-  @HostBinding('class.accordion-head') private readonly accordionHeadClass =
-    true;
-
-  @Input() showToggle = true;
-
-  private readonly accordionItem$: AccordionItemComponent;
-
-  constructor(
-    @Host()
-    @Inject(AccordionItemComponent)
-    accordionItem: AccordionItemComponent
-  ) {
-    this.accordionItem$ = accordionItem;
-  }
-
-  @HostListener('click')
-  toggle(): void {
-    if (this.disabled) {
-      return;
-    }
-    this.accordionItem$.toggle();
-  }
-
-  @HostBinding('class.accordion-head_open')
-  get open(): boolean {
-    return this.accordionItem$.open;
-  }
-
-  @HostBinding('class.accordion-head_disabled')
-  get disabled(): boolean {
-    return this.accordionItem$.disabled;
-  }
-
-  ngOnInit() {}
-}

package/src/component/accordion/accordion-item/accordion-item.component.html

@@ -1,4 +0,0 @@
-<ng-content select="teta-accordion-head"></ng-content>
-<div class="accordion-content" *ngIf="open">
-  <ng-container *ngTemplateOutlet="content.template"></ng-container>
-</div>

package/src/component/accordion/accordion-item/accordion-item.component.spec.ts

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

package/src/component/accordion/accordion-item/accordion-item.component.ts

@@ -1,48 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  HostBinding,
-  Inject,
-  Input,
-  OnInit,
-  Optional,
-} from '@angular/core';
-import { AccordionContentDirective } from '../accordion-content.directive';
-import { AccordionComponent } from '../accordion/accordion.component';
-
-@Component({
-  selector: 'teta-accordion-item',
-  templateUrl: './accordion-item.component.html',
-  styleUrls: ['./accordion-item.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AccordionItemComponent implements OnInit {
-  @ContentChild(AccordionContentDirective, { static: false })
-  content: AccordionContentDirective;
-
-  @HostBinding('class.accordion-item_active')
-  @Input()
-  open: boolean;
-  @Input() disabled: boolean;
-
-  @HostBinding('class.accordion-item') private readonly accordionItemClass =
-    true;
-
-  private readonly accordion$: AccordionComponent;
-
-  constructor(
-    @Optional() @Inject(AccordionComponent) accordion: AccordionComponent,
-    private cdr$: ChangeDetectorRef
-  ) {
-    this.accordion$ = accordion;
-  }
-
-  toggle() {
-    this.open = !this.open;
-    this.cdr$.detectChanges();
-  }
-
-  ngOnInit() {}
-}

package/src/component/accordion/accordion.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {AccordionComponent} from './accordion/accordion.component';
-import {AccordionHeadComponent} from './accordion-head/accordion-head.component';
-import {AccordionContentDirective} from './accordion-content.directive';
-import {IconModule} from '../icon/icon.module';
-import {AccordionItemComponent} from './accordion-item/accordion-item.component';
-
-@NgModule({
-  declarations: [AccordionComponent, AccordionHeadComponent, AccordionContentDirective, AccordionItemComponent],
-  exports: [AccordionComponent, AccordionHeadComponent, AccordionContentDirective, AccordionItemComponent],
-  imports: [
-    CommonModule,
-    IconModule
-  ]
-})
-export class AccordionModule {
-}

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

@@ -1,5 +0,0 @@
-export * from './accordion.module';
-export * from './accordion/accordion.component';
-export * from './accordion-head/accordion-head.component';
-export * from './accordion-item/accordion-item.component';
-export * from './accordion-content.directive';

package/src/component/button/Button.stories.ts

@@ -1,61 +0,0 @@
-import { Meta } from '@storybook/angular/types-6-0';
-import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
-import { ButtonComponent } from './button/button.component';
-import { ButtonModule } from './button.module';
-import { IconModule } from '../icon/icon.module';
-
-export default {
-  title: 'Component/Button',
-  decorators: [withKnobs],
-  component: ButtonComponent,
-  moduleMetadata: {
-    imports: [ButtonModule],
-  },
-} as Meta;
-
-export const buttons = () => ({
-  moduleMetadata: {
-    imports: [ButtonModule, IconModule],
-  },
-  props: {
-    palettes: ['primary', 'text', 'red', 'yellow', 'green'],
-    text: text('text', 'Push me'),
-    leftIcon: boolean('leftIcon', true),
-    rightIcon: boolean('rightIcon', true),
-    disabled: boolean('disabled', false),
-  },
-  template: `<div class="row" [tetaIconSprite]="'assets/icons.svg'"  style="grid-gap: 12px">
-  <div *ngFor="let palette of palettes" class="column" style="grid-gap: 8px">
-    <div class="font-body-3">
-      Default
-    </div>
-    <button teta-button [disabled]="disabled" [palette]="palette">
-      <teta-icon *ngIf="leftIcon" [name]="'addCircle'"></teta-icon>
-      {{text}}
-      <teta-icon *ngIf="rightIcon" [name]="'user'"></teta-icon>
-    </button>
-    <div class="font-body-3">
-      Only Icon
-    </div>
-    <button teta-button [disabled]="disabled" [palette]="palette" [square]="true">
-      <teta-icon *ngIf="leftIcon" [name]="'addCircle'"></teta-icon>
-    </button>
-    <div class="font-body-3">
-      Outline
-    </div>
-    <button teta-button [disabled]="disabled" [palette]="palette" [view]="'outline'">
-      <teta-icon *ngIf="leftIcon" [name]="'addCircle'"></teta-icon>
-      {{text}}
-      <teta-icon *ngIf="rightIcon" [name]="'user'"></teta-icon>
-    </button>
-    <div class="font-body-3">
-      Ghost
-    </div>
-    <button teta-button [disabled]="disabled" [palette]="palette" [view]="'ghost'">
-      <teta-icon *ngIf="leftIcon" [name]="'addCircle'"></teta-icon>
-      {{text}}
-      <teta-icon *ngIf="rightIcon" [name]="'user'"></teta-icon>
-    </button>
-  </div>
-</div>`,
-});

package/src/component/button/button/button.component.html

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

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

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

package/src/component/button/button/button.component.ts

@@ -1,42 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  OnInit,
-} from '@angular/core';
-
-export type ButtonViewType = 'primary' | 'outline' | 'ghost';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'button[teta-button], teta-button',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ButtonComponent implements OnInit {
-  @Input() palette: string;
-  @Input() class;
-  @Input() view: ButtonViewType = 'primary';
-  @Input() square = false;
-
-  @HostBinding('class')
-  private get getClass(): string {
-    const result = [this.class, 'button'];
-    if (this.palette) {
-      result.push(`button-${this.palette}`);
-    }
-    if (this.view) {
-      result.push(`button_${this.view}`);
-    }
-    if (this.square) {
-      result.push(`button-square`);
-    }
-    return result.join(' ');
-  }
-
-  constructor() {}
-
-  ngOnInit(): void {}
-}

package/src/component/button/button.module.ts

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

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

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