ngx-register-base 1.3.1 → 1.3.2

package/src/lib/components/inputs/param-tree/param-tree.component.ts

@@ -1,282 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  effect,
-  inject,
-  input,
-  output,
-  TemplateRef,
-  untracked,
-} from '@angular/core';
-import { TuiCheckbox, TuiTree } from '@taiga-ui/kit';
-import { TuiLabel, TuiLoader } from '@taiga-ui/core';
-import { FormsModule } from '@angular/forms';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { EMPTY, expand, filter, from, of, switchMap, take, takeUntil, tap } from 'rxjs';
-import { ChildrenHandlerType, ITreeNode } from './types/param-tree.types';
-import { ParamTreeService } from './services/param-tree.service';
-import {
-  TREE_LOADING_NODE,
-  treeNodesFlatten,
-  updatesCheckedNodesEqual,
-} from './consts/param-tree.consts';
-
-/** Компонент иерархического списка */
-@Component({
-  selector: 'sproc-param-tree',
-  standalone: true,
-  imports: [TuiTree, TuiLabel, TuiCheckbox, FormsModule, AsyncPipe, TuiLoader, NgTemplateOutlet],
-  templateUrl: './param-tree.component.html',
-  styleUrl: './param-tree.component.less',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamTreeComponent<T> {
-  /**
-   * Режим выбора нескольких значений
-   *
-   * @default Выбор единственного узла */
-  public multi = input(false);
-  /** Задать выбранные узлы */
-  public checkedNodes = input<ITreeNode<T>[]>([]);
-  /** Кастомный шаблон узла */
-  public nodeTemplate = input<TemplateRef<any> | null>(null);
-
-  /** Выбранные узлы верхнего уровня */
-  public readonly selectedNodesChange = output<ITreeNode<T>[]>();
-
-  private readonly _treeService = inject(ParamTreeService<T>);
-  private readonly _dr = inject(DestroyRef);
-
-  protected readonly defaultNodeOpenedState = toSignal(this._treeService.defaultNodeOpenedState$);
-  protected readonly openedNodesState = this._treeService.openedNodesState;
-  protected readonly checkedNodesState = this._treeService.checkedNodesState;
-
-  private readonly _lastCheckedNode = toSignal(this._treeService.lastCheckedNode$, {
-    initialValue: null,
-  });
-  private readonly updatesCheckedNodes = computed(() => this.checkedNodes(), {
-    equal: (prev, curr) => updatesCheckedNodesEqual(prev, curr, this._treeService),
-  });
-
-  protected readonly treeNodes$ = this._treeService.nodes$;
-
-  protected readonly TREE_LOADER = TREE_LOADING_NODE;
-  protected readonly childrenHandler: ChildrenHandlerType<T> = (node) =>
-    this._treeService.getChildren(node);
-
-  constructor() {
-    effect(() => {
-      const nodes = this.updatesCheckedNodes();
-
-      untracked(() => {
-        if (nodes.length === 0) {
-          this.checkedNodesState.set(new Map<ITreeNode<T>, boolean | null>());
-        } else {
-          this._tryToSetNodesRecursive(nodes);
-        }
-      });
-    });
-  }
-
-  protected getValue(
-    currentNode: ITreeNode<T>,
-    state: Map<ITreeNode<T>, boolean | null>
-  ): boolean | null {
-    return this.multi()
-      ? this._isSelectedMulti(currentNode, state)
-      : this._isSelectedSingle(currentNode, state);
-  }
-
-  private _isSelectedMulti(
-    currentNode: ITreeNode<T>,
-    state: Map<ITreeNode<T>, boolean | null>
-  ): boolean | null {
-    let result: boolean | null = null;
-    const flattenNodes = treeNodesFlatten<T>(currentNode, this._treeService);
-    const firstNode = flattenNodes[0];
-
-    if (firstNode) {
-      result = !!state.get(firstNode);
-    }
-
-    for (const node of flattenNodes) {
-      if (result !== !!state.get(node)) {
-        const currentLevelNode = flattenNodes.filter((value) => value.parent === node.parent);
-
-        return currentLevelNode.every((value) => !!state.get(value)) ? true : null;
-      }
-    }
-
-    return result;
-  }
-
-  private _isSelectedSingle(
-    currentNode: ITreeNode<T>,
-    state: Map<ITreeNode<T>, boolean | null>
-  ): boolean | null {
-    const lastNode = this._lastCheckedNode();
-    const flattenNodes = treeNodesFlatten<T>(currentNode, this._treeService);
-    const isLinkedNode = flattenNodes.some((node) => !!state.get(node));
-
-    if (!isLinkedNode || !lastNode) {
-      return false;
-    }
-
-    return lastNode === currentNode ||
-      this._isDeepParent(currentNode, lastNode) ||
-      this._isDeepChild(currentNode, lastNode)
-      ? true
-      : null;
-  }
-
-  private _isDeepParent(parent: ITreeNode<T>, child: ITreeNode<T>): boolean {
-    if (!child.parent) {
-      return false;
-    }
-
-    if (parent === child.parent && parent.children!.length === 1) {
-      return true;
-    }
-
-    if (child.parent.children && child.parent.children.length !== 1) {
-      return false;
-    }
-
-    return this._isDeepParent(parent, child.parent);
-  }
-
-  private _isDeepChild(child: ITreeNode<T>, parent: ITreeNode<T>): boolean {
-    if (!parent.children || parent.children.length === 0) {
-      return false;
-    }
-
-    for (const node of parent.children) {
-      if (node === child) {
-        return true;
-      }
-
-      if (this._isDeepChild(child, node)) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  protected onToggle(currentNode: ITreeNode<T>): void {
-    this._treeService
-      .loadChildren(currentNode)
-      .pipe(takeUntilDestroyed(this._dr))
-      .subscribe((children) => {
-        const parent = children?.[0]?.parent;
-
-        if (parent && this.checkedNodesState().get(parent)) {
-          for (const child of children) {
-            this.checkedNodesState().set(child, true);
-          }
-        }
-      });
-  }
-
-  protected onChecked = (currentNode: ITreeNode<T>, check: boolean) => {
-    this._treeService.setLastCheckedNode(check ? currentNode : null);
-    const flattenNodes = treeNodesFlatten<T>(currentNode, this._treeService);
-
-    if (this.multi()) {
-      for (const node of flattenNodes) {
-        this.checkedNodesState().set(node, check);
-      }
-    } else {
-      this.checkedNodesState().clear();
-
-      for (const node of flattenNodes) {
-        this.checkedNodesState().set(node, true);
-      }
-    }
-
-    this._updateCheckedNodes();
-  };
-
-  private _updateCheckedNodes(options?: { emitEvent: boolean }): void {
-    const topLevelNodes = this._treeService.getTopLevelNodes();
-    const state = new Map<ITreeNode<T>, boolean | null>();
-    this._calcCheckedStateNodes(topLevelNodes, state);
-    this.checkedNodesState.set(state);
-
-    if (options?.emitEvent !== false) {
-      this.selectedNodesChange.emit(this._findFullySelectedNodes(topLevelNodes));
-    }
-  }
-
-  private _findFullySelectedNodes(nodes: ITreeNode<T>[]): ITreeNode<T>[] {
-    const fullySelectedNodes: ITreeNode<T>[] = [];
-
-    for (const node of nodes) {
-      const checked = this.getValue(node, this.checkedNodesState());
-
-      if (checked) {
-        fullySelectedNodes.push(node);
-      } else if (checked === null) {
-        const children = this._treeService.getChildren(node);
-        const fullySelectedChildren = this._findFullySelectedNodes(children);
-        fullySelectedNodes.push(...fullySelectedChildren);
-      }
-    }
-
-    return fullySelectedNodes;
-  }
-
-  private _calcCheckedStateNodes(
-    nodes: ITreeNode<T>[],
-    state: Map<ITreeNode<T>, boolean | null>
-  ): void {
-    for (const node of nodes) {
-      const checked = this.getValue(node, this.checkedNodesState());
-
-      if (checked !== false) {
-        state.set(node, checked);
-        const children = this._treeService.getChildren(node);
-        this._calcCheckedStateNodes(children, state);
-      }
-    }
-  }
-
-  private _tryToSetNodesRecursive(newNodes: ITreeNode<T>[]): void {
-    const topLevelNodes = this._treeService.getTopLevelNodes();
-    const searchNodesCompleteState = new Map(newNodes.map((newNode) => [newNode, false]));
-    const allComplete = (state: Map<ITreeNode<T>, boolean>) => [...state.values()].every(Boolean);
-    const analogNodes: ITreeNode<T>[] = [];
-
-    from(topLevelNodes)
-      .pipe(
-        expand((node) =>
-          this._treeService.hasChildren(node)
-            ? this._treeService.loadChildren(node).pipe(switchMap((children) => from(children)))
-            : EMPTY
-        ),
-        tap((node) => {
-          const foundNode = newNodes.find((newNode) => this._treeService.equals(node, newNode));
-
-          if (foundNode) {
-            searchNodesCompleteState.set(foundNode, true);
-            analogNodes.push(node);
-          }
-        }),
-        filter(() => allComplete(searchNodesCompleteState)),
-        take(1),
-        // eslint-disable-next-line rxjs/no-unsafe-takeuntil
-        takeUntil(of(null).pipe(filter(() => allComplete(searchNodesCompleteState)))),
-        takeUntilDestroyed(this._dr)
-      )
-      .subscribe({
-        complete: () => {
-          for (const node of analogNodes) {
-            this.onChecked(node, true);
-          }
-        },
-      });
-  }
-}

package/src/lib/components/inputs/param-tree/services/param-tree.service.ts

@@ -1,176 +0,0 @@
-import { DestroyRef, inject, Injectable, signal } from '@angular/core';
-import {
-  BehaviorSubject,
-  catchError,
-  combineLatest,
-  debounceTime,
-  EMPTY,
-  expand,
-  filter,
-  from,
-  iif,
-  map,
-  mergeMap,
-  Observable,
-  of,
-  Subject,
-  switchMap,
-  take,
-  tap,
-} from 'rxjs';
-import { TUI_TREE_LOADING, TUI_TREE_START } from '@taiga-ui/kit';
-import { startWith } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ILoadConfig, ITreeNode, SmaTreeLoader } from '../types/param-tree.types';
-import { TREE_LOADER } from '../tokens/param-tree.tokens';
-import { just } from '../../../../utils';
-import { DEBOUNCE_TIME_FOR_SYNC_NEXT_VALUES } from '../consts/param-tree.consts';
-
-@Injectable()
-export class ParamTreeService<T> {
-  private readonly _loading = inject<ITreeNode<T>>(TUI_TREE_LOADING);
-  private readonly _start$ = inject<ITreeNode<T>>(TUI_TREE_START, { optional: true });
-  private readonly _loader = inject<SmaTreeLoader<ITreeNode<T>>>(TREE_LOADER);
-  private readonly _destroyRef = inject(DestroyRef);
-
-  private readonly _loaderNode$ = new Subject<ITreeNode<T>>();
-  private readonly _defaultNodeOpenedState$ = new BehaviorSubject<boolean | undefined>(undefined);
-  private readonly _lastCheckedNode$ = new BehaviorSubject<ITreeNode<T> | null>(null);
-  private readonly _load$ = new Subject<ILoadConfig<T>>();
-  private readonly _parentChildrenMap = new Map<ITreeNode<T>, ITreeNode<T>[]>([
-    [this._loading, []],
-  ]);
-  private readonly _nodes$ = new BehaviorSubject<ITreeNode<T>[]>([]);
-  private readonly _loadedChildren$ = new Subject<ITreeNode<T>[]>();
-
-  public readonly defaultNodeOpenedState$ = this._defaultNodeOpenedState$.asObservable();
-  public readonly lastCheckedNode$ = this._lastCheckedNode$.asObservable();
-  public readonly loaderNode$ = this._loaderNode$.asObservable();
-
-  public readonly openedNodesState = signal(new Map<ITreeNode<T>, boolean>());
-  public readonly checkedNodesState = signal(new Map<ITreeNode<T>, boolean | null>());
-
-  private _firstLevelNodes: ITreeNode<T>[] = this._start$ ? [this._start$] : [];
-  private _firstLevelNodesLoaded = false;
-
-  public readonly nodes$ = this._nodes$.asObservable();
-
-  constructor() {
-    this._load$
-      .pipe(
-        mergeMap((load) =>
-          this._load(load.node, !load.config?.initial).pipe(
-            map((firstLevelNodes) => ({ load, firstLevelNodes }))
-          )
-        ),
-        tap(({ load: { config }, firstLevelNodes }) => {
-          if (config?.initial) {
-            this._firstLevelNodes = firstLevelNodes ?? [];
-          }
-        }),
-        mergeMap(({ load }) =>
-          iif(() => !!load.config?.opened, this._recursiveLoad(load.node), just())
-        ),
-        map(() => this._firstLevelNodes),
-        startWith([this._loading]),
-        takeUntilDestroyed(this._destroyRef)
-      )
-      .subscribe((nodes) => {
-        this._nodes$.next(nodes);
-      });
-
-    combineLatest([this.loaderNode$, this.defaultNodeOpenedState$])
-      .pipe(debounceTime(DEBOUNCE_TIME_FOR_SYNC_NEXT_VALUES), takeUntilDestroyed(this._destroyRef))
-      .subscribe(([loader, opened]) => {
-        this.loadFirstLevelNodes(loader, opened);
-      });
-  }
-
-  private _recursiveLoad(startedNode: ITreeNode<T>) {
-    return of(startedNode).pipe(
-      expand((node) => {
-        if (this.hasChildren(node)) {
-          return this._load(node).pipe(
-            switchMap((children) => from(children)),
-            catchError(() => EMPTY)
-          );
-        }
-
-        if (node.children) {
-          return from(node.children);
-        }
-
-        return EMPTY;
-      })
-    );
-  }
-
-  public loadFirstLevelNodes(node: ITreeNode<T>, opened: boolean = true): void {
-    if (!this._firstLevelNodesLoaded) {
-      this._load$.next({ node, config: { initial: true, opened } });
-      this._firstLevelNodesLoaded = true;
-    }
-  }
-
-  private _load(node: ITreeNode<T>, setChildren = true): Observable<ITreeNode<T>[]> {
-    return this._loader.loadChildren(node).pipe(
-      tap((children) => {
-        if (setChildren) {
-          for (const child of children) {
-            child.parent = node;
-          }
-          node.children = children;
-          this._parentChildrenMap.set(node, children);
-          this._loadedChildren$.next(children);
-        }
-
-        const childfree = [node, ...children].filter((item) => !this.hasChildren(item));
-        for (const item of childfree) {
-          this._parentChildrenMap.set(item, []);
-        }
-      })
-    );
-  }
-
-  public loadChildren(node: ITreeNode<T>): Observable<ITreeNode<T>[]> {
-    const result = this._loadedChildren$.asObservable().pipe(
-      filter(([firstChild]) => firstChild?.parent === node),
-      take(1)
-    );
-    const children = this.getChildren(node);
-
-    if (children && children[0] !== this._loading) {
-      return of(children);
-    }
-
-    this._parentChildrenMap.set(node, [this._loading]);
-    this._load$.next({ node });
-
-    return result;
-  }
-
-  public getChildren(node: ITreeNode<T>): ITreeNode<T>[] {
-    return this._parentChildrenMap.get(node) || [this._loading];
-  }
-
-  public hasChildren(node: ITreeNode<T>): boolean {
-    return this._loader.hasChildren(node);
-  }
-
-  public getTopLevelNodes(): ITreeNode<T>[] {
-    return this._firstLevelNodes;
-  }
-
-  public setLoaderNode(loaderNode: ITreeNode<T>, defaultNodeOpenedState?: boolean): void {
-    this._loaderNode$.next(loaderNode);
-    this._defaultNodeOpenedState$.next(defaultNodeOpenedState);
-  }
-
-  public setLastCheckedNode(node: ITreeNode<T> | null): void {
-    this._lastCheckedNode$.next(node);
-  }
-
-  public equals(node1: ITreeNode<T>, node2: ITreeNode<T>): boolean {
-    return this._loader.equals(node1, node2);
-  }
-}

package/src/lib/components/inputs/param-tree/services/sync-tree-loader.service.ts

@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { ITreeNode, SmaTreeLoader } from '../types/param-tree.types';
-
-@Injectable()
-export class SyncTreeLoaderService<T> implements SmaTreeLoader<ITreeNode<T>> {
-  public loadChildren({ children }: ITreeNode<T>): Observable<ITreeNode<T>[]> {
-    return of(children ?? []);
-  }
-
-  public hasChildren({ haveChildren }: ITreeNode<T>): boolean {
-    return !!haveChildren;
-  }
-
-  public equals(value1: ITreeNode<T>, value2: ITreeNode<T>): boolean {
-    return value1 === value2;
-  }
-}

package/src/lib/components/inputs/param-tree/types/param-tree.types.ts

@@ -1,39 +0,0 @@
-import { TuiHandler } from '@taiga-ui/cdk';
-import { TuiTreeLoader } from '@taiga-ui/kit';
-
-export interface SmaTreeLoader<T> extends TuiTreeLoader<T> {
-  equals(value1: T, value2: T): boolean;
-}
-
-/** Конфиг для подгрузки дочерних узлов */
-export interface ILoadConfig<T> {
-  /** Узел для которого происходит загрузка */
-  node: ITreeNode<T>;
-  /** Дополнительная конфигурация загрузки */
-  config?: {
-    /** Является ли текущая загрузка начальной (для инициализации верхнего уровня узлов) */
-    initial?: boolean;
-    /**
-     * Режим загрузки дочерних узлов.
-     * Если true - дочерние узлы загружаются рекурсивно до последнего уровня
-     * */
-    opened?: boolean;
-  };
-}
-
-export interface ITreeNode<T = any> {
-  /** Название узла */
-  name: string;
-  parent?: ITreeNode<T>;
-  /** Есть дочерние узлы которые можно загрузить */
-  haveChildren?: boolean;
-  /** Дочерние загруженные узлы */
-  children?: ITreeNode<T>[];
-  /** Дополнительные свойства узла */
-  data?: T;
-}
-
-export type ChildrenHandlerType<NodeType> = TuiHandler<
-  ITreeNode<NodeType>,
-  readonly ITreeNode<NodeType>[]
->;

package/src/lib/components/inputs/param-tree/utils/param-tree.utils.ts

@@ -1,18 +0,0 @@
-import { ITreeNode } from '../types/param-tree.types';
-
-interface IArgs<T> {
-  item: T;
-  children?: ITreeNode<T>[];
-}
-
-export function transformItemToNode<T extends Record<string, any>>({
-  item,
-  children,
-}: IArgs<T>): ITreeNode<T> {
-  return {
-    name: item['name'],
-    haveChildren: !!children,
-    children: children || [],
-    data: item,
-  };
-}

package/src/lib/components/inputs/param-tree-multi-select/param-tree-multi-select.component.html

@@ -1,78 +0,0 @@
-<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
-  <ng-template #readTemplate>
-    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
-      @if (label) {
-        @switch (paramStyle) {
-          @case ('filter') {
-            <div class="label-wrapper">
-              <span class="label">{{ label }}</span>
-              <div class="dashed-row"></div>
-            </div>
-          }
-          @default {
-            <span class="label">{{ label }}</span>
-            <div class="dashed-row"></div>
-          }
-        }
-      }
-      <ng-container [ngTemplateOutlet]="value ? showedValueTemplate : emptyTemplate">
-        <ng-template #showedValueTemplate>
-          @switch (paramStyle) {
-            @case ('filter') {
-              <pre class="value">{{ showedValue }}</pre>
-            }
-            @default {
-              <div class="value">
-                <span>{{ showedValue }}</span>
-              </div>
-            }
-          }
-        </ng-template>
-        <ng-template #emptyTemplate>
-          <span class="value">-</span>
-        </ng-template>
-      </ng-container>
-    </div>
-  </ng-template>
-  <ng-template #editTemplate>
-    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
-      @if (label) {
-        <div class="label-wrapper" [class.applied]="applied()">
-          <span class="label" [class.required]="required">
-            {{ label }}
-          </span>
-          @if (hint) {
-            <tui-icon
-              icon="assets/ngx-register-base/icons/circle-info-empty.svg"
-              [tuiHint]="hint"
-              class="hintIcon"
-            ></tui-icon>
-          }
-        </div>
-      }
-      <tui-textfield
-        tuiChevron
-        tuiTextfieldSize="m"
-        tuiAppearance="sproc-input-appearance"
-        [stringify]="stringify()"
-        [tuiTextfieldCleaner]="forceClear"
-        [tuiTextfieldLabelOutside]="true"
-        [content]="valueContent"
-      >
-        <input tuiComboBox [placeholder]="placeholder()" [formControl]="control" />
-        <ng-container *tuiTextfieldDropdown [ngTemplateOutlet]="paramTreeTemplate"></ng-container>
-      </tui-textfield>
-      <ng-template #valueContent let-list>
-        {{ shortPickedLength() ? 'Выбрано: ' : null }} {{ list.length }}
-      </ng-template>
-    </div>
-  </ng-template>
-</ng-container>
-
-<ng-template #paramTreeTemplate>
-  <sproc-param-tree
-    [multi]="true"
-    [checkedNodes]="checkedNodes()"
-    (selectedNodesChange)="setSelectedNodes($event)"
-  ></sproc-param-tree>
-</ng-template>