@tetacom/ng-components 1.0.24 → 1.0.25

package/src/Introduction.stories.mdx

@@ -0,0 +1,178 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/storybook-examples` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div class="subheading">Configure</div>
+
+<div class="link-list">
+  <a class="link-item" href="https://storybook.js.org/docs/react/api/presets" target="_blank">
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a class="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a class="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a class="link-item" href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" target="_blank">
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div class="subheading">Learn</div>
+
+<div class="link-list">
+  <a class="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a class="link-item" href="https://www.learnstorybook.com" target="_blank">
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a class="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a class="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div class="tip-wrapper">
+  <span class="tip">Tip</span>Edit the Markdown in <code>src/storybook-examples/welcome.mdx</code>
+</div>

package/src/common/contract/auto-close-ignore-case.ts

@@ -0,0 +1 @@
+export type AutoCloseIgnoreCase = 'esc' | 'enter' | 'inside' | 'outside';

package/src/common/contract/constructor-type.ts

@@ -0,0 +1 @@
+export type Ctor<T> = new (...params: any[]) => T;

package/src/common/contract/dynamic-data.ts

@@ -0,0 +1,11 @@
+export class DynamicData {
+  [key: string]: any;
+
+  constructor(value: { [key: string]: any }) {
+    for (const key in value) {
+      if (value.hasOwnProperty(key)) {
+        this[key] = value[key];
+      }
+    }
+  }
+}

package/src/common/contract/i-dictionary.ts

@@ -0,0 +1,3 @@
+export interface IDictionary<T> {
+  [key: string]: T;
+}

package/src/common/contract/i-id-name.ts

@@ -0,0 +1,6 @@
+export interface IIdName<T> {
+  [key: string]: any;
+  id: T;
+  name: string;
+  parentId?: T;
+}

package/src/common/contract/i-rect.ts

@@ -0,0 +1,8 @@
+export interface IRect {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+  maxHeight?: number;
+  minWidth?: number;
+}

package/src/common/contract/i-tree-data.ts

@@ -0,0 +1,4 @@
+export interface ITreeData {
+  children?: ITreeData[] | undefined | null;
+  [key: string]: any;
+}

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

@@ -0,0 +1,8 @@
+export * from './constructor-type';
+export * from './dynamic-data';
+export * from './i-id-name';
+export * from './i-dictionary';
+export * from './i-tree-data';
+export * from './i-rect';
+export * from './teta-content-ref';
+export * from './auto-close-ignore-case';

package/src/common/contract/teta-content-ref.ts

@@ -0,0 +1,6 @@
+import {ComponentRef, ViewRef} from '@angular/core';
+
+export class TetaContentRef {
+  constructor(public nodes: any[], public viewRef?: ViewRef, public componentRef?: ComponentRef<any>) {
+  }
+}

package/src/common/enum/align.enum.ts

@@ -0,0 +1,8 @@
+export enum Align {
+  left,
+  right,
+  center,
+  auto,
+  fitWidth,
+  minWidth,
+}

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

@@ -0,0 +1,3 @@
+export * from './teta-size.enum';
+export * from './align.enum';
+export * from './vertical-align.enum';

package/src/common/enum/teta-size.enum.ts

@@ -0,0 +1,7 @@
+export enum TetaSize {
+  XS,
+  S,
+  M,
+  L,
+  XL
+}

package/src/common/enum/vertical-align.enum.ts

@@ -0,0 +1,6 @@
+export enum VerticalAlign {
+  top,
+  bottom,
+  center,
+  auto
+}

package/src/common/public-api.ts

@@ -0,0 +1,4 @@
+export * from './contract/public-api';
+export * from './enum/public-api';
+export * from './service/public-api';
+export * from './util/public-api';

package/src/common/service/click.service.spec.ts

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

package/src/common/service/click.service.ts

@@ -0,0 +1,16 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { fromEvent, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ClickService {
+  click: Observable<MouseEvent>;
+  contextMenu: Observable<MouseEvent>;
+
+  constructor(@Inject(DOCUMENT) protected _document: any) {
+    this.click = fromEvent(this._document, 'click');
+    this.contextMenu = fromEvent(this._document, 'contextmenu');
+  }
+}

package/src/common/service/dynamic-component.service.spec.ts

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

package/src/common/service/dynamic-component.service.ts

@@ -0,0 +1,134 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Injectable,
+  Injector,
+  Renderer2,
+  RendererFactory2,
+  TemplateRef,
+  Type,
+} from '@angular/core';
+import { TetaContentRef } from '../contract/teta-content-ref';
+import { DynamicData } from '../contract/dynamic-data';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicComponentService {
+  private _renderer: Renderer2;
+
+  constructor(
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    private _rendererFactory: RendererFactory2,
+    private _appRef: ApplicationRef
+  ) {
+    this._renderer = this._rendererFactory.createRenderer(null, null);
+  }
+
+  createComponent<T>(
+    component: Type<T>,
+    contentRef: TetaContentRef,
+    injector: Injector,
+    container: any
+  ): ComponentRef<T> {
+    const componentRef = this._componentFactoryResolver
+      .resolveComponentFactory(component)
+      .create(injector, contentRef.nodes);
+    this._appRef.attachView(componentRef.hostView);
+    container.appendChild(componentRef.location.nativeElement);
+    return componentRef;
+  }
+
+  createContent(
+    content: string | TemplateRef<any> | Type<any>,
+    injector: Injector,
+    context?: any
+  ): TetaContentRef {
+    if (content === null || content === undefined) {
+      throw new Error('Content is undefined');
+    }
+    if (typeof content === 'string') {
+      return this.fromString(content);
+    } else if (content instanceof TemplateRef) {
+      return this.fromTemplate(content, context);
+    } else {
+      return this.fromComponent(content, injector, context);
+    }
+  }
+
+  destroy<T>(
+    component: ComponentRef<T>,
+    content: TetaContentRef,
+    container: HTMLElement
+  ): void {
+    if (component) {
+      this._appRef.detachView(component.hostView);
+      component.destroy();
+    }
+    if (content && content.viewRef) {
+      content.viewRef.destroy();
+    }
+    content = null;
+  }
+
+  getContext(
+    content: string | TemplateRef<any> | Type<any>,
+    context: any
+  ): any {
+    if (content instanceof TemplateRef) {
+      return {
+        $implicit: context,
+        data: context,
+      };
+    }
+    return context;
+  }
+
+  getInjector(data: DynamicData, parent: Injector): Injector {
+    return Injector.create({
+      providers: [
+        {
+          provide: DynamicData,
+          useValue: data,
+        },
+      ],
+      parent,
+    });
+  }
+
+  private fromString(content: string): TetaContentRef {
+    return new TetaContentRef([[this._renderer.createText(`${content}`)]]);
+  }
+
+  private fromTemplate(
+    content: TemplateRef<any>,
+    context: any
+  ): TetaContentRef {
+    const viewRef = content.createEmbeddedView(context);
+    this._appRef.attachView(viewRef);
+    return new TetaContentRef([viewRef.rootNodes], viewRef);
+  }
+
+  private fromComponent(
+    content: any,
+    injector: Injector,
+    context: any
+  ): TetaContentRef {
+    const componentFactory =
+      this._componentFactoryResolver.resolveComponentFactory<any>(content);
+    const componentRef = componentFactory.create(injector);
+    for (const key in context) {
+      if (context.hasOwnProperty(key)) {
+        componentRef.instance[key] = context[key];
+      }
+    }
+    const componentNativeEl = componentRef.location.nativeElement;
+    this._appRef.attachView(componentRef.hostView);
+    return new TetaContentRef(
+      [[componentNativeEl]],
+      componentRef.hostView,
+      componentRef
+    );
+  }
+}

package/src/common/service/overlay-container.service.spec.ts

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

package/src/common/service/overlay-container.service.ts

@@ -0,0 +1,37 @@
+import {Inject, Injectable, OnDestroy} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OverlayContainerService implements OnDestroy {
+  private _containerClass = 'overlay-container';
+  private _container: HTMLElement;
+
+  constructor(@Inject(DOCUMENT) private document$: any) {
+  }
+
+  getContainer(): HTMLElement {
+    if (!this._container) {
+      this.createContainer();
+    }
+    return this._container;
+  }
+
+  private createContainer(): void {
+    const container = this.document$.createElement('div');
+    container.classList.add(this._containerClass);
+    this.document$.body.appendChild(container);
+    this._container = container;
+  }
+
+  private removeContainer(): void {
+    if (this._container && this._container.parentNode) {
+      this._container.parentNode.removeChild(this._container);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeContainer();
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './click.service';
+export * from './dynamic-component.service';
+export * from './overlay-container.service';

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

@@ -0,0 +1,140 @@
+export class ArrayUtil {
+  public static asArray<T>(value: T | T[]): T[] {
+    if (value === null || value === undefined) {
+      return [];
+    }
+    if (value instanceof Array) {
+      return value;
+    }
+    return [value];
+  }
+
+  public static flatten(
+    data: any[],
+    children?: string | ((item: any) => any[]),
+    onlyLeafs?: boolean
+  ): any[] {
+    const result: any[] = [];
+    data.forEach((child) => {
+      let childItems: any[];
+      if (children) {
+        if (typeof children === 'string') {
+          childItems = child[children];
+        }
+        if (typeof children === 'function') {
+          childItems = children(child);
+        }
+      } else {
+        childItems = child.children;
+      }
+      if (
+        childItems !== null &&
+        childItems !== undefined &&
+        childItems.length > 0
+      ) {
+        if (!onlyLeafs) {
+          result.push(child);
+        }
+        result.push(...ArrayUtil.flatten(childItems, children, onlyLeafs));
+      } else {
+        result.push(child);
+      }
+    });
+    return result;
+  }
+
+  static findRecursive(
+    tree: any[],
+    comparer: (iterableNode: any) => boolean,
+    children: string = 'children'
+  ): any {
+    const found = tree.find((x) => comparer(x));
+    if (found !== null && found !== undefined) {
+      return found;
+    }
+    for (let i = 0, l = tree.length; i < l; i++) {
+      const item = tree[i];
+      if (item[children] && item[children].length) {
+        const res = ArrayUtil.findRecursive(item[children], comparer);
+        if (res !== null && res !== undefined) {
+          return res;
+        }
+      }
+    }
+    return null;
+  }
+
+  static filterRecursive(
+    array: any[],
+    filter: (item: any) => boolean,
+    children: string = 'children',
+    keepChildren: boolean = true
+  ): any {
+    const result = [];
+    if (array && array.length) {
+      for (const item of array) {
+        const resultItem = Object.assign({}, item);
+        if (filter(resultItem)) {
+          result.push(resultItem);
+          if (!keepChildren) {
+            resultItem[children] = [];
+            break;
+          }
+        } else if (item[children] && item[children].length > 0) {
+          resultItem[children] = [];
+          const found = ArrayUtil.filterRecursive(
+            item[children],
+            filter,
+            children,
+            keepChildren
+          );
+          if (found?.length > 0) {
+            resultItem[children] = found;
+            result.push(resultItem);
+          }
+        }
+      }
+    }
+    return result;
+  }
+
+  static distinct<T>(array: T[], comparator: (item: T) => any): T[] {
+    const result: T[] = [];
+    if (array && array.length) {
+      for (const item of array) {
+        const found = result.find((_) => comparator(_) === comparator(item));
+        if (!found) {
+          result.push(item);
+        }
+      }
+    }
+    return result;
+  }
+
+  static findParents(tree: any[], item: any) {
+    if (tree.indexOf(item) >= 0) {
+      return tree;
+    }
+    if (Array.isArray(tree)) {
+      for (const treeNode of tree) {
+        const childResult = this.findParents(treeNode.children, item);
+        if (Array.isArray(childResult)) {
+          return [treeNode].concat(childResult);
+        }
+      }
+    }
+  }
+
+  static moveItem(list: any[], sourceIndex, targetIndex) {
+    const res = [...list];
+    const item = list[sourceIndex];
+    if (targetIndex > sourceIndex) {
+      res.splice(targetIndex, 0, item);
+      res.splice(sourceIndex, 1);
+    } else {
+      res.splice(sourceIndex, 1);
+      res.splice(targetIndex, 0, item);
+    }
+    return res;
+  }
+}

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

@@ -0,0 +1,16 @@
+export class DomUtil {
+  public static clickedInside(target: HTMLElement, event: MouseEvent): boolean {
+    return event.composedPath().indexOf(target) >= 0;
+  }
+
+  public static findTransformedParent(node: HTMLElement) {
+    while (node !== null && node.tagName !== 'BODY') {
+      const style = getComputedStyle(node);
+      if (style.transform !== 'none') {
+        return node;
+      }
+      node = node.parentNode as HTMLElement;
+    }
+    return null;
+  }
+}