ngx-register-base 1.2.3 → 1.3.1

package/src/lib/directives/date/date-time.types.ts

@@ -0,0 +1,36 @@
+import { PrizmDay, PrizmTime } from '@prizm-ui/components';
+
+export enum EDatePattern {
+  MONTH_YEAR = 'MM.yyyy',
+  DATE = 'dd.MM.yyyy',
+  SHORT_YEAR_DATE = 'dd.MM.yy',
+  DATE_TIME_WITHOUT_SECONDS = 'dd.MM.yyyy HH:mm',
+  DATE_TIME = 'dd.MM.yyyy HH:mm:ss',
+  YEAR_MONTH_DAY = 'yyyy-MM-dd',
+  DD_MM_YYYY = 'dd-MM-yyyy',
+  DATE_TIME_ISO_MARKED_TIMEZONE = `yyyy-MM-dd'T'HH:mm:ss`,
+  YYYY_MM_DD = 'yyyy/MM/dd',
+  MMMM_YYYY = 'MMMM YYYY',
+  DATE_TIME_ISO_PATTERN = 'YYYY-MM-DDTHH:mm:ss',
+  DATE_TIME_FOR_TRACKER = 'YYYY-MM-DD HH:mm:ss',
+  DATE_TIME_FOR_TRACKER_NOT_SIMPLE = 'yyyy-MM-dd HH:mm:ss',
+  TUI_YMD = 'YMD',
+  DAY = 'd',
+  HOUR_MINUTE = 'HH:mm',
+}
+
+export enum EMomentPattern {
+  YYYY_MM_DD = 'YYYY-MM-DD',
+  YYYYMMDD = 'yyyy/MM/DD',
+}
+
+export enum ETimezone {
+  UTC = '+00:00',
+  MSK = '+03:00',
+  AQT = '+05:00',
+  NVS = '+07:00',
+  IRK = '+08:00',
+  YAK = '+09:00',
+}
+
+export type SmaPrizmDateTime = [PrizmDay, PrizmTime | undefined];

package/src/lib/directives/date/format-date.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import moment from 'moment';
+import { DateTimeService, ITimeZone } from '../../services/date-time.service';
+
+@Pipe({
+  name: 'formatDate',
+  standalone: true,
+})
+export class FormatDatePipe implements PipeTransform {
+  constructor(private readonly _dateTimeService: DateTimeService) {}
+
+  transform(value: unknown, valueTZ: string, pattern: string, _?: ITimeZone | null): unknown {
+    let utc = null;
+
+    if (value instanceof Date) {
+      const iso = this._dateTimeService.convertDateToISOWithTZ(value, valueTZ);
+      utc = moment(iso).toISOString();
+    } else if (typeof value === 'string') {
+      utc = value;
+    }
+
+    if (!utc) {
+      return value;
+    }
+
+    return this._dateTimeService.parseDate(utc, pattern);
+  }
+}

package/src/lib/directives/number/number-only.directive.ts

@@ -0,0 +1,36 @@
+import { Directive, HostListener, input } from '@angular/core';
+import { InputElementEvent } from '../../types';
+
+/** Ввод только числовых выражений */
+@Directive({
+  standalone: true,
+  selector: '[numberOnly]',
+})
+export class NumberOnlyDirective {
+  /** Разрешать пользователю вводить дробные числа (возможность использовать точку или запятую) */
+  public allowFractional = input(false);
+
+  @HostListener('input', ['$event'])
+  public onInput(event: InputElementEvent): void {
+    const element = event.target;
+    let value = element.value;
+
+    if (this.allowFractional()) {
+      value = value.replace(/,/g, '.');
+
+      value = value.replace(/[^\d.]/g, '');
+
+      // Проверяем, чтобы точка была только одна
+      const parts: string[] = value.split('.');
+      if (parts.length > 2) {
+        value = `${parts.shift()!}.${parts.join('')}`;
+      }
+    } else {
+      value = value.replace(/\D/g, '');
+    }
+
+    if (element.value !== value) {
+      element.value = value;
+    }
+  }
+}

package/src/lib/directives/sticky/sticky-relative.directive.ts

@@ -0,0 +1,30 @@
+import { DestroyRef, Directive, ElementRef, inject, input, OnInit } from '@angular/core';
+import { StickyRelativeService } from './sticky-relative.service';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { skip } from 'rxjs';
+import {distinctUntilChangedJSONs} from '../../utils';
+
+@Directive({
+  selector: '[stickyRelative]',
+  standalone: true,
+  providers: [StickyRelativeService],
+})
+export class StickyRelativeDirective implements OnInit {
+  public columns = input.required<unknown[]>();
+
+  private _columnsChanges$ = toObservable(this.columns).pipe(distinctUntilChangedJSONs(), skip(1));
+
+  private readonly _stickyRelativeService = inject(StickyRelativeService);
+  private readonly _dr = inject(DestroyRef);
+  private readonly _elRef = inject(ElementRef);
+
+  constructor() {
+    this._columnsChanges$.pipe(takeUntilDestroyed(this._dr)).subscribe(() => {
+      this._stickyRelativeService.nextChangesChildren();
+    });
+  }
+
+  public ngOnInit(): void {
+    this._stickyRelativeService.element = this._elRef.nativeElement;
+  }
+}

package/src/lib/directives/sticky/sticky-relative.service.ts

@@ -0,0 +1,34 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { StickyDirective } from './sticky.directive';
+import { Subject } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+
+@Injectable()
+export class StickyRelativeService implements OnDestroy {
+  public element!: HTMLElement;
+
+  private readonly _changesChildren$ = new Subject<void>();
+
+  private readonly _resizeObserver = new ResizeObserver(() => {
+    this._changesChildren$.next();
+  });
+
+  public readonly changesChildren$ = this._changesChildren$.pipe(shareReplay(1));
+
+  public add(item: StickyDirective): void {
+    this._resizeObserver.observe(item.elRef.nativeElement);
+  }
+
+  public delete(item: StickyDirective): void {
+    this._resizeObserver.unobserve(item.elRef.nativeElement);
+  }
+
+  public nextChangesChildren(): void {
+    this._changesChildren$.next();
+  }
+
+  public ngOnDestroy(): void {
+    this._resizeObserver.disconnect();
+    this._changesChildren$.complete();
+  }
+}

package/src/lib/directives/sticky/sticky.directive.ts

@@ -0,0 +1,189 @@
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  HostBinding,
+  inject,
+  input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+} from '@angular/core';
+import { filter, map, observeOn, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { StickyRelativeService } from './sticky-relative.service';
+import { animationFrameScheduler, of, Subject } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toPx } from '../../utils';
+import { moveInEventLoopIteration } from '../../utils';
+
+@Directive({
+  selector: '[stickyLeft], [stickyRight], [stickyTop], [stickyBottom]',
+  standalone: true,
+})
+export class StickyDirective implements OnChanges, OnDestroy, OnInit {
+  @HostBinding('class.sticky-left')
+  public stickyLeft = input<boolean>();
+  @HostBinding('class.sticky-right')
+  public stickyRight = input<boolean>();
+  @HostBinding('class.sticky-top')
+  public stickyTop = input<boolean>();
+  @HostBinding('class.sticky-bottom')
+  public stickyBottom = input<boolean>();
+  public stickyRelative = input<HTMLElement | undefined>();
+  public position = input('sticky');
+  public stylesOnSticky = input<Record<string, unknown> | undefined>();
+
+  @HostBinding('style.position')
+  get applySticky(): string {
+    return this.stickyLeft() || this.stickyRight() || this.stickyTop() || this.stickyBottom()
+      ? this.position()
+      : '';
+  }
+
+  public readonly elRef = inject(ElementRef);
+
+  private readonly _relativeService = inject(StickyRelativeService);
+  private readonly _renderer = inject(Renderer2);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  private readonly _destroyPrevious = new Subject<void>();
+  private readonly _changedSides = {
+    right: true,
+    left: true,
+    top: true,
+    bottom: true,
+  };
+
+  private _setActiveStyle = false;
+
+  public ngOnInit(): void {
+    this._relativeService.add(this);
+  }
+
+  public ngOnDestroy(): void {
+    this._relativeService.delete(this);
+    this._destroyPrevious.complete();
+  }
+
+  public ngOnChanges(): void {
+    this._init();
+  }
+
+  private _init(): void {
+    this._destroyPrevious.next();
+
+    const parent = this.stickyRelative() ?? this._relativeService?.element;
+    this._relativeService?.changesChildren$
+      .pipe(
+        map(() => this.elRef.nativeElement.getBoundingClientRect()),
+        observeOn(animationFrameScheduler),
+        filter((i) => Boolean(i.width || i.height)),
+        switchMap((result) => {
+          if (this.stickyRight() || this._changedSides.right) {
+            this._renderer.removeStyle(this.elRef.nativeElement, 'right');
+          }
+          if (this.stickyLeft() || this._changedSides.left) {
+            this._renderer.removeStyle(this.elRef.nativeElement, 'left');
+          }
+          if (this.stickyTop() || this._changedSides.top) {
+            this._renderer.removeStyle(this.elRef.nativeElement, 'top');
+          }
+          if (this.stickyBottom() || this._changedSides.bottom) {
+            this._renderer.removeStyle(this.elRef.nativeElement, 'bottom');
+          }
+
+          this._clearStylesIfSet();
+
+          return of(result).pipe(moveInEventLoopIteration(1));
+        }),
+        tap(() => {
+          const parentRect = parent?.getBoundingClientRect();
+          const elRect = this.elRef.nativeElement.getBoundingClientRect();
+          let styleRight = 0;
+
+          this._setStylesIfExist();
+
+          if (this.stickyLeft()) {
+            const left = parentRect?.left ? elRect.left - parentRect.left : elRect.left;
+            this._renderer.setStyle(this.elRef.nativeElement, 'left', toPx(left));
+            this._changedSides.left = true;
+          } else {
+            this._changedSides.left = true;
+          }
+          if (this.stickyRight()) {
+            styleRight = Number.parseInt(this.elRef.nativeElement.style.right || '0', 10);
+
+            let right = elRect.right;
+            let scrollOffset = 0;
+            let diff = 0;
+            if (parent) {
+              scrollOffset = parent.scrollWidth - parent.clientWidth - parent.scrollLeft;
+              diff = Math.abs(elRect.right - parentRect.right - scrollOffset - styleRight);
+              right = Math.floor(diff);
+            }
+            this._renderer.setStyle(this.elRef.nativeElement, 'right', toPx(right));
+            this._changedSides.right = true;
+          } else {
+            this._changedSides.right = true;
+          }
+          if (this.stickyTop()) {
+            const top = parentRect?.top ? elRect.top - parentRect.top : elRect.top;
+            this._renderer.setStyle(this.elRef.nativeElement, 'top', toPx(top));
+            this._changedSides.top = true;
+          } else {
+            this._changedSides.top = true;
+          }
+          if (this.stickyBottom()) {
+            const bottom = parentRect?.bottom ? elRect.bottom - parentRect.bottom : elRect.bottom;
+            this._renderer.setStyle(this.elRef.nativeElement, 'bottom', toPx(bottom));
+            this._changedSides.bottom = true;
+          } else {
+            this._changedSides.bottom = true;
+          }
+
+          this._setStylesIfExist();
+        }),
+        // eslint-disable-next-line rxjs/no-unsafe-takeuntil
+        takeUntil(this._destroyPrevious),
+        takeUntilDestroyed(this._destroyRef)
+      )
+      .subscribe();
+  }
+
+  private _clearStylesIfSet(): void {
+    if (!this._setActiveStyle) {
+      return;
+    }
+
+    const stylesOnSticky = this.stylesOnSticky();
+    const keys = stylesOnSticky && Object.keys(stylesOnSticky);
+    if (!keys?.length) {
+      return;
+    }
+
+    for (const key of keys) {
+      this.elRef.nativeElement.style[key] = '';
+    }
+
+    this._setActiveStyle = false;
+  }
+
+  private _setStylesIfExist(): void {
+    if (!this.stickyRight() && !this.stickyLeft() && !this.stickyBottom() && !this.stickyTop()) {
+      return;
+    }
+
+    const stylesOnSticky = this.stylesOnSticky();
+    const keys = stylesOnSticky && Object.keys(stylesOnSticky);
+    if (!keys?.length) {
+      return;
+    }
+
+    for (const key of keys) {
+      this.elRef.nativeElement.style[key] = (this.stylesOnSticky()?.[key] as string) ?? '';
+    }
+
+    this._setActiveStyle = true;
+  }
+}