ngx-register-base 1.3.1 → 1.3.2

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

@@ -1,109 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      &[sproc-param-style='card'] {
-        padding: 0 2px;
-
-        .label-wrapper {
-          .default-label-wrapper;
-
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-        }
-
-        ::ng-deep {
-          input {
-            .input-text-14px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-
-      &[sproc-param-style='filter'] {
-        ::ng-deep {
-          input {
-            .input-text-12px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-
-      .selected-item-wrapper {
-        display: flex;
-        flex-direction: row;
-        padding: 4px;
-        margin: 0 2px;
-        min-width: 4px;
-        max-width: 100%;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: 2px;
-        background: var(--chip-background);
-        font-size: 14px;
-        line-height: 16px;
-        color: var(--main-black);
-        cursor: pointer;
-      }
-    }
-
-    .default-label {
-      .input-label;
-
-      color: var(--main-black);
-
-      &.required::after {
-        content: '*';
-        color: var(--brand-danger);
-        margin-left: 2px;
-      }
-    }
-  }
-
-  .hintIcon {
-    width: 16px;
-    height: 16px;
-  }
-
-  ::ng-deep {
-    .choosed {
-      display: none;
-    }
-
-    .empty {
-      position: relative;
-
-      .choosed {
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        position: absolute;
-        justify-content: space-between;
-        top: 7px;
-        left: 8px;
-        z-index: 2;
-        font-size: 12px;
-        font-family: Inter, sans-serif;
-        color: #000000;
-        padding: 6px;
-        border-radius: 2px;
-        width: 95px;
-        height: 18px;
-        background: var(--prizm-v3-status-none-secondary-default);
-      }
-    }
-  }
-}

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

@@ -1,89 +0,0 @@
-import { Component, effect, inject, Injector, input, signal } from '@angular/core';
-import { TuiAppearance, TuiHint, TuiIcon, TuiTextfield } from '@taiga-ui/core';
-import { TUI_TREE_LOADING, TuiChevron, TuiComboBox } from '@taiga-ui/kit';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
-import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
-import { ITreeNode } from '../param-tree/types/param-tree.types';
-import { ParamTreeComponent } from '../param-tree/param-tree.component';
-import { ParamTreeService } from '../param-tree/services/param-tree.service';
-import { TREE_LOADING_NODE } from '../param-tree/consts/param-tree.consts';
-import { FastQueryStore } from '../../../store/fast-query-store.service';
-import { ParamSelectBase } from '../../../core/param/param-select-base';
-import { distinctUntilChangedJSONs } from '../../../utils';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-export type InputTreeSelectSavedValue<T> = ITreeNode<T> & { [key: string]: any };
-
-/** Компонент выбора единственного значения из иерархического списка */
-@Component({
-  selector: 'sproc-param-tree-multi-select',
-  standalone: true,
-  imports: [
-    NgTemplateOutlet,
-    TuiIcon,
-    TuiHint,
-    ReactiveFormsModule,
-    TuiTextfieldControllerModule,
-    ParamTreeComponent,
-    TuiAppearance,
-    TuiTextfield,
-    TuiChevron,
-    TuiComboBox,
-  ],
-  templateUrl: './param-tree-multi-select.component.html',
-  styleUrl: './param-tree-multi-select.component.less',
-  providers: [
-    ParamTreeService,
-    { provide: TUI_TREE_LOADING, useValue: TREE_LOADING_NODE },
-    FastQueryStore,
-  ],
-})
-export class ParamTreeMultiSelectComponent<T> extends ParamSelectBase<
-  ITreeNode<T>[],
-  InputTreeSelectSavedValue<T>[]
-> {
-  /** Передача загрузочного узла для загрузки начального уровня иерархического списка */
-  public loaderNode = input.required<ITreeNode<T>>();
-  /**
-   * Возможность раскрывать/скрывать узлы иерархического списка.
-   * Логическое значение - это значение узла по умолчанию (раскрыты/скрыты).
-   *
-   * @default Без указания параметра (или значении null) - все узлы раскрыты без возможности изменять состояние.
-   * */
-  public defaultNodeOpenedState = input<boolean>();
-  public stringify = input<(item: ITreeNode<T>) => string>((item) => String(item.name));
-  public shortPickedLength = input(true);
-
-  public override readonly buildShowedValue = input(
-    (values: ITreeNode[]): string => values?.map((v) => v.name).join(',\n') ?? '-'
-  );
-  public override placeholder = input('Выберите значения');
-
-  private readonly _treeService = inject(ParamTreeService);
-
-  protected readonly checkedNodes = signal<ITreeNode<T>[]>([]);
-
-  constructor(injector: Injector) {
-    super(injector);
-    effect(() => {
-      this._treeService.setLoaderNode(this.loaderNode(), this.defaultNodeOpenedState());
-    });
-  }
-
-  protected override afterViewInit(): void {
-    this._subscribeForUpdateCheckedNodes();
-  }
-
-  private _subscribeForUpdateCheckedNodes(): void {
-    this.control.valueChanges
-      .pipe(distinctUntilChangedJSONs(), takeUntilDestroyed(this.dr))
-      .subscribe((value) => {
-        this.checkedNodes.set(value ?? []);
-      });
-  }
-
-  protected setSelectedNodes(node: ITreeNode<T>[]): void {
-    this.control.setValue(node);
-  }
-}

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

@@ -1,54 +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>
-          }
-        }
-      }
-      <div class="value">
-        <span>{{ showedValue }}</span>
-      </div>
-    </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>
-        </div>
-      }
-      <tui-textfield
-        tuiChevron
-        tuiTextfieldSize="m"
-        tuiAppearance="sproc-input-appearance"
-        [stringify]="stringify()"
-        [tuiTextfieldLabelOutside]="forceClear"
-        [tuiTextfieldCleaner]="true"
-        [tuiDropdownMaxHeight]="maxDropdownHeight"
-      >
-        <input tuiSelect [placeholder]="placeholder()" [formControl]="control" />
-        <ng-container *tuiTextfieldDropdown [ngTemplateOutlet]="paramTreeTemplate"></ng-container>
-      </tui-textfield>
-    </div>
-  </ng-template>
-</ng-container>
-
-<ng-template #paramTreeTemplate>
-  <sproc-param-tree
-    [multi]="false"
-    [checkedNodes]="checkedNodes()"
-    (selectedNodesChange)="setSelectedNodes($event)"
-  ></sproc-param-tree>
-</ng-template>

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

@@ -1,56 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      &[sproc-param-style='card'] {
-        padding: 0 2px;
-
-        ::ng-deep {
-          input {
-            .input-text-14px;
-
-            color: var(--text-contrast);
-          }
-
-          .placeholder {
-            .input-text-12px;
-          }
-        }
-      }
-
-      &[sproc-param-style='filter'] {
-        ::ng-deep {
-          input {
-            .input-text-12px;
-
-            color: var(--text-contrast);
-          }
-
-          .placeholder {
-            .input-text-12px;
-          }
-        }
-      }
-
-      ._chevron-rotated {
-        .textfield-icons-container {
-          transition: all 0.4ms;
-
-          .chevron {
-            transform: rotate(-180deg);
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,91 +0,0 @@
-import { Component, effect, inject, Injector, input, signal } from '@angular/core';
-import { ParamTreeComponent } from '../param-tree/param-tree.component';
-import { ITreeNode } from '../param-tree/types/param-tree.types';
-import { TuiAppearance, TuiDropdown, TuiTextfield } from '@taiga-ui/core';
-import { TUI_TREE_LOADING, TuiChevron, TuiSelect, } from '@taiga-ui/kit';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TREE_LOADING_NODE } from '../param-tree/consts/param-tree.consts';
-import { NgTemplateOutlet } from '@angular/common';
-import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ParamTreeService } from '../param-tree/services/param-tree.service';
-import { FastQueryStore } from '../../../store/fast-query-store.service';
-import { ParamSelectBase } from '../../../core/param/param-select-base';
-import { distinctUntilChangedJSONs } from '../../../utils';
-
-export type InputTreeSelectSavedValue<T> = ITreeNode<T> & { [key: string]: any };
-
-/** Компонент выбора единственного значения из иерархического списка */
-@Component({
-  selector: 'sproc-param-tree-select',
-  standalone: true,
-  imports: [
-    ParamTreeComponent,
-    TuiTextfield,
-    TuiSelect,
-    TuiChevron,
-    FormsModule,
-    TuiDropdown,
-    ReactiveFormsModule,
-    NgTemplateOutlet,
-    TuiAppearance,
-    TuiTextfieldControllerModule,
-  ],
-  templateUrl: './param-tree-select.component.html',
-  styleUrl: './param-tree-select.component.less',
-  providers: [
-    ParamTreeService,
-    { provide: TUI_TREE_LOADING, useValue: TREE_LOADING_NODE },
-    FastQueryStore,
-  ],
-})
-export class ParamTreeSelectComponent<T> extends ParamSelectBase<
-  ITreeNode<T>,
-  InputTreeSelectSavedValue<T>
-> {
-  /** Передача загрузочного узла для загрузки начального уровня иерархического списка */
-  public loaderNode = input.required<ITreeNode<T>>();
-  /**
-   * Возможность раскрывать/скрывать узлы иерархического списка.
-   * Логическое значение - это значение узла по умолчанию (раскрыты/скрыты).
-   *
-   * @default Без указания параметра (или значении null) - все узлы раскрыты без возможности изменять состояние.
-   * */
-  public defaultNodeOpenedState = input<boolean>();
-
-  public stringify = input<(item: ITreeNode<T>) => string>((item) => String(item.name));
-
-  public override buildShowedValue = input((value: ITreeNode<T>): string => value?.name ?? '-');
-  public override placeholder = input('Выберите значение');
-
-  private readonly _treeService = inject(ParamTreeService);
-
-  protected readonly checkedNodes = signal<ITreeNode<T>[]>([]);
-
-  constructor(injector: Injector) {
-    super(injector);
-    effect(() => {
-      this._treeService.setLoaderNode(this.loaderNode(), this.defaultNodeOpenedState());
-    });
-  }
-
-  protected override afterViewInit(): void {
-    this._subscribeForUpdateCheckedNodes();
-  }
-
-  private _subscribeForUpdateCheckedNodes(): void {
-    this.control.valueChanges
-      .pipe(distinctUntilChangedJSONs(), takeUntilDestroyed(this.dr))
-      .subscribe((value) => {
-        if (value) {
-          this.checkedNodes.set([value]);
-        } else {
-          this.checkedNodes.set([]);
-        }
-      });
-  }
-
-  protected setSelectedNodes([node]: ITreeNode<T>[]): void {
-    this.control.setValue(node ?? null);
-  }
-}

package/src/lib/components/inputs/sub-components/param-delete-content-icon/param-delete-content-btn.component.html

@@ -1,5 +0,0 @@
-<tui-icon
-  class="cleaner-icon"
-  (click)="iconClicked.emit()"
-  icon="assets/ngx-register-base/icons/delete-content.svg"
-></tui-icon>

package/src/lib/components/inputs/sub-components/param-delete-content-icon/param-delete-content-btn.component.ts

@@ -1,13 +0,0 @@
-import { ChangeDetectionStrategy, Component, output } from '@angular/core';
-import { TuiIcon } from '@taiga-ui/core';
-
-@Component({
-  selector: 'sproc-param-delete-content-button',
-  standalone: true,
-  imports: [TuiIcon],
-  templateUrl: './param-delete-content-btn.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamDeleteContentBtnComponent {
-  readonly iconClicked = output<void>();
-}

package/src/lib/components/inputs/sub-components/param-invalid-icon/param-invalid-icon.component.html

@@ -1,4 +0,0 @@
-<tui-icon
-  class="invalid-icon"
-  icon="assets/ngx-register-base/icons/circle-exclamation-fill.svg"
-></tui-icon>

package/src/lib/components/inputs/sub-components/param-invalid-icon/param-invalid-icon.component.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { TuiIcon } from '@taiga-ui/core';
-
-@Component({
-  selector: 'sproc-param-invalid-icon',
-  standalone: true,
-  imports: [TuiIcon],
-  templateUrl: './param-invalid-icon.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamInvalidIconComponent {}

package/src/lib/components/menu-constructor/sproc-menu-constructor.component.html

@@ -1,95 +0,0 @@
-<div class="menu-constructor">
-  <div class="pane editor">
-    <div class="pane-header">
-      <h2>Редактор меню</h2>
-      <div class="buttons">
-        <button [disabled]="$any(loading$ | async)" class="btn secondary" (click)="addNewItem()">
-          +
-        </button>
-        <button [disabled]="$any(loading$ | async)" class="btn secondary" (click)="reset()">
-          Сбросить
-        </button>
-        <button [disabled]="$any(loading$ | async)" class="btn primary" (click)="save()">
-          Сохранить
-        </button>
-        <button [disabled]="$any(loading$ | async)" class="btn primary" (click)="handleFold(false)">
-          Раскрыть все элементы
-        </button>
-        <button [disabled]="$any(loading$ | async)" class="btn primary" (click)="handleFold(true)">
-          Скрыть все элементы
-        </button>
-      </div>
-    </div>
-
-    <div
-      class="list-wrapper"
-      cdkDropList
-      [cdkDropListData]="visibleFlatTree()"
-      (cdkDropListDropped)="drop($event)"
-      [cdkDropListLockAxis]="'y'"
-    >
-      @for (node of visibleFlatTree(); track node.id + '-' + node.order_num) {
-        <div
-          class="node"
-          [style.marginLeft.px]="node.depth * 24"
-          [class.dragged]="isDragged(node)"
-          cdkDrag
-          (cdkDragStarted)="dragStarted(node)"
-          (cdkDragEnded)="dragEnded()"
-        >
-          <div class="node-bar" cdkDragHandle>
-            @if (hasChildren(node)) {
-              <button
-                class="collapse-btn"
-                (click)="toggleCollapse(node); $event.stopPropagation()"
-                [title]="node.collapsed ? 'Развернуть' : 'Свернуть'"
-              >
-                {{ node.collapsed ? '▶' : '▼' }}
-              </button>
-            }
-
-            @if (node.title === ROOT_TITLE) {
-              <span class="root-title">Корневой элемент</span>
-            } @else {
-              <div class="left-control">
-                <span class="grip">⋮⋮</span>
-                <input class="inp title" [(ngModel)]="node.title" placeholder="Название" />
-                <input
-                  class="inp code"
-                  [required]="true"
-                  [(ngModel)]="node.code"
-                  placeholder="code"
-                />
-                <input class="inp route" [(ngModel)]="node.route" placeholder="route" />
-                <input class="inp icon" [(ngModel)]="node.icon" placeholder="icon" />
-                <input class="inp roles" [(ngModel)]="node.allowed_roles" placeholder="Роли" />
-              </div>
-
-              <div class="depth-controls">
-                <button class="btn small" (click)="outdent(node)">←</button>
-                <button class="btn small" (click)="indent(node)">→</button>
-                @if (hasChildren(node)) {
-                  <button class="btn small" (click)="outdentBranch(node)">⇐</button>
-                  <button class="btn small" (click)="indentBranch(node)">⇒</button>
-                }
-                <button class="btn small" (click)="deleteItem(node)">Удалить</button>
-              </div>
-            }
-          </div>
-
-          <ng-template cdkDragPreview>
-            <div class="drag-branch-preview">
-              <div
-                class="preview-bar"
-                *ngFor="let n of draggedBranch()"
-                [style.marginLeft.px]="(n.depth - node.depth) * 20"
-              >
-                {{ n.title }}
-              </div>
-            </div>
-          </ng-template>
-        </div>
-      }
-    </div>
-  </div>
-</div>