@tetacom/ng-components 1.0.24 → 1.0.25

package/src/directive/tooltip/tooltip.directive.ts

@@ -0,0 +1,116 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  Injector,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  Type,
+} from '@angular/core';
+import { DynamicContentBaseDirective } from '../dynamic-content-base.directive';
+import { DOCUMENT } from '@angular/common';
+import { DynamicComponentService } from '../../common/service/dynamic-component.service';
+import { DomUtil } from '../../common/util/dom-util';
+import { PositionUtil } from '../../common/util/position-util';
+import { Align } from '../../common/enum/align.enum';
+import { VerticalAlign } from '../../common/enum/vertical-align.enum';
+import { merge } from 'rxjs';
+import { filter, takeWhile, tap } from 'rxjs/operators';
+import { ClickService } from '../../common/service/click.service';
+
+@Directive({
+  selector: '[tetaTooltip]',
+})
+export class TooltipDirective
+  extends DynamicContentBaseDirective
+  implements OnDestroy, OnInit
+{
+  /**
+   * Строка, шаблон или компонент для создания контекстного меню
+   */
+  @Input() tetaTooltip: string | TemplateRef<any> | Type<any>;
+  @Input() override align: Align = Align.center;
+  @Input() override verticalAlign: VerticalAlign = VerticalAlign.top;
+  private _componentRect: any;
+
+  get _dynamicContent() {
+    return this.tetaTooltip;
+  }
+
+  constructor(
+    @Inject(DOCUMENT)
+    protected override _document: any,
+    protected override _elementRef: ElementRef,
+    protected override _service: DynamicComponentService,
+    protected override _injector: Injector,
+    protected override _zone: NgZone,
+    protected override _cdr: ChangeDetectorRef,
+    private _click: ClickService
+  ) {
+    super(_document, _elementRef, _service, _injector, _zone, _cdr);
+  }
+
+  @HostListener('click', ['$event'])
+  showContent(event: MouseEvent): void {
+    event.preventDefault();
+    this.createTooltip();
+  }
+
+  override ngOnInit() {
+    super.ngOnInit();
+    merge(this._click.click, this._click.contextMenu)
+      .pipe(
+        takeWhile(() => this._alive),
+        filter(() => this._open),
+        filter(() => this._componentRef != null),
+        filter(
+          (event: MouseEvent) =>
+            !DomUtil.clickedInside(this._elementRef.nativeElement, event)
+        ),
+        filter(
+          (event: MouseEvent) =>
+            !DomUtil.clickedInside(
+              this._componentRef.location.nativeElement,
+              event
+            )
+        ),
+        tap((_) => this.destroyContentRef())
+      )
+      .subscribe();
+  }
+
+  protected setPosition() {
+    if (this._componentRef && this._open) {
+      if (!this._componentRect) {
+        this._componentRect =
+          this._componentRef.location.nativeElement.getBoundingClientRect();
+      }
+      const containerPosition =
+        this._elementRef.nativeElement.getBoundingClientRect();
+      const position = PositionUtil.getPosition(
+        containerPosition,
+        this._componentRect,
+        this.align,
+        this.verticalAlign,
+        0,
+        12
+      );
+      PositionUtil.setElementPosition(
+        this._componentRef.location.nativeElement,
+        position
+      );
+      const verticalClass =
+        containerPosition.top < position.top ? 'tooltip_bottom' : 'tooltip_top';
+      this._componentRef.instance.addClass(verticalClass);
+    }
+  }
+
+  private createTooltip(): void {
+    this._componentRef = this.createContentRef('tooltip');
+  }
+}

package/src/directive/tooltip/tooltip.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TooltipDirective } from './tooltip.directive';
+import { DynamicComponentModule } from '../../component/dynamic-component/dynamic-component.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  declarations: [TooltipDirective],
+  exports: [TooltipDirective],
+  imports: [CommonModule, DynamicComponentModule, BrowserAnimationsModule],
+})
+export class TooltipModule {}

package/src/pipe/number-pipe/number-pipe.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NumberPipe} from './number.pipe';
+
+@NgModule({
+  declarations: [NumberPipe],
+  exports: [
+    NumberPipe
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class NumberPipeModule {
+}

package/src/pipe/number-pipe/number.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { NumberPipe } from './number.pipe';
+
+describe('NumberPipe', () => {
+  it('create an instance', () => {
+    const pipe = new NumberPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/pipe/number-pipe/number.pipe.ts

@@ -0,0 +1,26 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {formatNumber} from '../util/number-helper';
+
+@Pipe({
+  name: 'tetaNumber'
+})
+export class NumberPipe implements PipeTransform {
+  transform(value: number,
+            decimalLength: number = 2,
+            chunkDelimiter: string = '',
+            decimalDelimiter: string = '.',
+            chunkLength: number = 3): string {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    if (value !== value / 1) {
+      return value.toString();
+    }
+    value /= 1;
+    return formatNumber(value,
+      decimalLength,
+      chunkDelimiter,
+      decimalDelimiter,
+      chunkLength);
+  }
+}

package/src/pipe/number-pipe/public-api.ts

@@ -0,0 +1,2 @@
+export * from './number-pipe.module';
+export * from './number.pipe';

package/src/pipe/prepend-zero/prepend-zero.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrependZeroPipe } from './prepend-zero.pipe';
+
+@NgModule({
+  declarations: [PrependZeroPipe],
+  exports: [PrependZeroPipe],
+  imports: [CommonModule],
+})
+export class PrependZeroModule {}

package/src/pipe/prepend-zero/prepend-zero.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { PrependZeroPipe } from './prepend-zero.pipe';
+
+describe('PrependZeroPipe', () => {
+  it('create an instance', () => {
+    const pipe = new PrependZeroPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/pipe/prepend-zero/prepend-zero.pipe.ts

@@ -0,0 +1,15 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {prependZero} from '../util/number-helper';
+
+@Pipe({
+  name: 'tetaPrependZero'
+})
+export class PrependZeroPipe implements PipeTransform {
+  transform(value: number, length: number): string {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    value /= 1;
+    return prependZero(value, length);
+  }
+}

package/src/pipe/prepend-zero/public-api.ts

@@ -0,0 +1,2 @@
+export * from './prepend-zero.module';
+export * from './prepend-zero.pipe';

package/src/pipe/public-api.ts

@@ -0,0 +1 @@
+export * from './number-pipe/public-api';

package/src/pipe/util/number-helper.ts

@@ -0,0 +1,37 @@
+export const getPrecision = (a: number) => {
+  if (!isFinite(a)) {
+    return 0;
+  }
+  let e = 1;
+  let p = 0;
+  while (Math.round(a * e) / e !== a) {
+    e *= 10;
+    p++;
+  }
+  return p;
+};
+
+export const formatNumber = (
+  value: any,
+  decimalLength: number,
+  chunkDelimiter: string,
+  decimalDelimiter: string,
+  chunkLength: number
+) => {
+  const abs = Math.abs(value);
+  if (0 < abs && 1 > abs) {
+    const firstDigitIndex = Math.floor(Math.abs(Math.log10(abs)));
+    decimalLength += firstDigitIndex;
+  }
+  const precision = Math.min(getPrecision(value), Math.floor(decimalLength));
+  const result =
+    '\\d(?=(\\d{' + chunkLength + '})+' + (precision > 0 ? '\\D' : '$') + ')';
+  const num = value.toFixed(precision);
+  return (decimalDelimiter ? num.replace('.', decimalDelimiter) : num).replace(
+    new RegExp(result, 'g'),
+    '$&' + chunkDelimiter
+  );
+};
+
+export const prependZero = (input: number, length: number) =>
+  ('0'.repeat(length) + input).slice(-length);

package/src/public-api.ts

@@ -0,0 +1,25 @@
+/**
+ * Components
+ */
+
+export * from './component/public-api';
+
+/**
+ * Directives
+ */
+export * from './directive/public-api';
+
+/**
+ * Pipes
+ */
+export * from './pipe/public-api';
+
+/**
+ * Common
+ */
+export * from './common/public-api';
+
+/**
+ * Util
+ */
+export * from './util/public-api';

package/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/src/util/date-util.ts

@@ -0,0 +1,247 @@
+export class DateUtil {
+  /**
+   * Вычесть n-дней
+   */
+
+  public static subtractDays(date: Date, days = 0): Date | null {
+    if (date && date instanceof Date) {
+      const dt = new Date(date.getTime());
+
+      dt.setDate(dt.getDate() - days);
+      return dt;
+    }
+
+    return null;
+  }
+
+  /**
+   * Добавить n-дней
+   */
+
+  public static addDays(date: Date, days = 0): Date | null {
+    if (date && date instanceof Date) {
+      const dt = new Date(date.getTime());
+
+      dt.setDate(dt.getDate() + days);
+      return dt;
+    }
+
+    return null;
+  }
+
+  /**
+   * Получить дату из строки
+   */
+  public static parseString(dat: string): Date | null {
+    if (!dat || dat.length < 1) {
+      return null;
+    }
+
+    const parts = dat.split(' ');
+    const dtPart = parts[0].split('.');
+    const tPart = parts[1]?.split(':') ?? ['0', '0', '0'];
+    const parsedDate = new Date(
+      parseInt(dtPart[2], 10),
+      parseInt(dtPart[1], 10) - 1,
+      parseInt(dtPart[0], 10),
+      parseInt(tPart[0], 10),
+      parseInt(tPart[1], 10),
+      parseInt(tPart[2], 10)
+    );
+    if (isNaN(parsedDate.getTime())) {
+      return null;
+    }
+    return parsedDate;
+  }
+
+  /**
+   * Привести дату к строке
+   */
+  public static toString(dat: Date): string {
+    if (!dat || !(dat instanceof Date)) {
+      return '';
+    }
+    const month = dat.getMonth() + 1;
+    const monthString = month < 10 ? '0' + month.toString() : month.toString();
+    return `${dat.getDate().toString()}.${monthString}.${dat
+      .getFullYear()
+      .toString()} ${dat.getHours()}:${dat.getMinutes()}:${dat.getSeconds()}`;
+  }
+
+  /**
+   * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
+   */
+  public static convertUTC2DateLocal(date?: Date): Date | null {
+    if (date && date instanceof Date) {
+      const timezoneOffsetMs: number =
+        new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate()
+        ).getTimezoneOffset() * 60000;
+      return new Date(date.getTime() - timezoneOffsetMs);
+    }
+    return null;
+  }
+
+  /**
+   * Подготовка даты к отправке на сервер, чтобы небыло смещения часов
+   */
+  public static convertDateLocal2UTC(date?: Date): Date | null {
+    if (date && date instanceof Date) {
+      const timezoneOffsetMs: number =
+        new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate()
+        ).getTimezoneOffset() * 60000;
+      return date == null ? null : new Date(date.getTime() + timezoneOffsetMs);
+    }
+    return null;
+  }
+
+  public static convertDateStringsToDates(input: any): any {
+    const regexIso8601 =
+      /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z)?$/i;
+    if (typeof input === 'string' && regexIso8601.test(input)) {
+      return DateUtil.convertStringToLocalDate(input);
+    }
+    if (typeof input !== 'object' || !input) {
+      return input;
+    }
+    let res: any | any[];
+    if (input instanceof Array) {
+      res = [];
+    } else {
+      res = {};
+    }
+    return DateUtil.fillConvertDateStringsToDates(res, input);
+  }
+
+  public static convertDates(input: any | any[]): any | any[] {
+    if (typeof input !== 'object' || !input) {
+      return input;
+    }
+    if (input instanceof Date) {
+      return DateUtil.convertUTC2DateLocal(input);
+    }
+    let res: any | any[];
+    if (input instanceof Array) {
+      res = [];
+    } else {
+      res = {};
+    }
+    return DateUtil.fillConvertDates(res, input);
+  }
+
+  public static getMonthDaysCount(date: Date): number {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  }
+
+  // Возвращает список месяцев между двумя датами
+  public static getRangeOfMonths(start: Date, end: Date): Date[] {
+    if (start > end || !start || !end) {
+      return null;
+    }
+    const resDates: Date[] = [];
+    let i = 0;
+    let dateTmp = new Date(start.getFullYear(), start.getMonth() + i, 1);
+    while (end >= dateTmp) {
+      resDates.push(dateTmp);
+      i++;
+      dateTmp = new Date(start.getFullYear(), start.getMonth() + i, 1);
+    }
+    return resDates;
+  }
+
+  public static truncateToMonth(date: Date): Date {
+    const res = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
+    return res;
+  }
+
+  public static truncateToDay(date: Date): Date {
+    const res = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      0,
+      0,
+      0
+    );
+    return res;
+  }
+
+  public static truncateToHour(date: Date): Date {
+    const res = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      date.getHours(),
+      0,
+      0
+    );
+    return res;
+  }
+
+  public static toISOString(date: number): string {
+    return (
+      new Date(date - new Date().getTimezoneOffset() * 60000)
+        .toISOString()
+        .slice(0, -5) + 'Z'
+    );
+  }
+
+  public static isValidDate(date: any): boolean {
+    return date instanceof Date && !isNaN(date.getTime());
+  }
+
+  private static fillConvertDates(result: any, input: any): any {
+    for (const key in input) {
+      if (!input.hasOwnProperty || !input.hasOwnProperty(key)) {
+        continue;
+      }
+      if (input.hasOwnProperty(key)) {
+        let value = input[key];
+        if (value instanceof Date) {
+          if (value !== null && value !== undefined) {
+            value = DateUtil.convertUTC2DateLocal(value);
+          }
+          result[key] = value;
+        } else if (typeof value === 'object') {
+          result[key] = DateUtil.convertDates(value);
+        } else {
+          result[key] = value;
+        }
+      }
+    }
+    return result;
+  }
+
+  private static fillConvertDateStringsToDates(result: any, input: any): any {
+    const regexIso8601 =
+      /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z?)?$/i;
+    for (const key in input) {
+      if (!input.hasOwnProperty(key)) {
+        continue;
+      }
+      const value = input[key];
+      if (typeof value === 'string' && regexIso8601.test(value)) {
+        result[key] = DateUtil.convertStringToLocalDate(value);
+      } else if (typeof value === 'object') {
+        result[key] = DateUtil.convertDateStringsToDates(value);
+      } else {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+
+  private static convertStringToLocalDate(dateString: string): Date | null {
+    const milliseconds = Date.parse(dateString);
+    if (!isNaN(milliseconds)) {
+      const dt = new Date(milliseconds);
+      return DateUtil.convertDateLocal2UTC(dt);
+    }
+    return null;
+  }
+}

package/src/util/forms-util.ts

@@ -0,0 +1,83 @@
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { TableColumn } from '../component/table/contract/table-column';
+import { ArrayUtil } from '../common/util/array-util';
+
+export class FormsUtil {
+  static validateAllFormFields(formGroup: FormGroup) {
+    Object.keys(formGroup.controls).forEach((field) => {
+      const control = formGroup.get(field);
+      if (control instanceof FormControl) {
+        control.markAsTouched({ onlySelf: true });
+        control.markAsDirty({ onlySelf: true });
+      } else if (control instanceof FormGroup) {
+        this.validateAllFormFields(control);
+      }
+    });
+  }
+
+  static controlIsInvalid(formGroup: FormGroup, controlName: string) {
+    return (
+      formGroup.controls[controlName]?.invalid &&
+      formGroup.controls[controlName]?.dirty
+    );
+  }
+
+  static matchValuesValidator(
+    matchTo: string
+  ): (control: AbstractControl) => ValidationErrors | null {
+    return (control: AbstractControl): ValidationErrors | null =>
+      !!control.parent &&
+      !!control.parent.value &&
+      control.value === control.parent.controls[matchTo].value
+        ? null
+        : { isMatching: false };
+  }
+
+  static requiredIf(
+    value: boolean
+  ): (control: AbstractControl) => ValidationErrors | null {
+    return (control: AbstractControl): ValidationErrors | null =>
+      !!control.parent &&
+      !!control.parent.value &&
+      control.value != null &&
+      value
+        ? null
+        : { isMatching: false };
+  }
+
+  static initFormFromColumns(columns: TableColumn[], dataItem: any) {
+    const form = new FormGroup({});
+    const flat = ArrayUtil.flatten(columns, 'columns');
+    flat.forEach((column: TableColumn) => {
+      const control = new FormControl(
+        {
+          value: dataItem ? dataItem[column.name] : undefined,
+          disabled: !column.editable,
+        },
+        FormsUtil.getValidators(column)
+      );
+      form.registerControl(column.name, control);
+    });
+    return form;
+  }
+
+  static getValidators(column: TableColumn) {
+    const validators = [];
+    if (column.required) {
+      validators.push(Validators.required);
+    }
+    if (column.minValue != null) {
+      validators.push(Validators.min(column.minValue));
+    }
+    if (column.maxValue != null) {
+      validators.push(Validators.max(column.maxValue));
+    }
+    return validators;
+  }
+}

package/src/util/public-api.ts

@@ -0,0 +1,3 @@
+export * from './date-util';
+export * from './forms-util';
+export * from './string-util';

package/src/util/string-util.ts

@@ -0,0 +1,5 @@
+export class StringUtil {
+  static firstLetterToLower(input: string) {
+    return input.charAt(0).toLocaleLowerCase() + input.slice(1);
+  };
+}

package/style/tabs.scss

@@ -7,7 +7,7 @@
 
   &-head {
     display: flex;
-    flex-grow: 1;
+    flex-grow: 0;
     flex-shrink: 0;
     height: 40px;
 

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [
+      "node",
+      "resize-observer-browser"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}