ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/inputs/param-text/param-text.component.html

@@ -0,0 +1,59 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <div class="value" [tuiHint]="value && showedValue !== '-' ? hintContent : undefined">
+        <span>{{ showedValue }}</span>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+        @if (errorMessage() && control.invalid) {
+          <div class="errorMessage">{{ errorMessage() }}</div>
+        }
+      </div>
+
+      <tui-textfield
+        tuiAppearance="sproc-input-appearance"
+        tuiTextfieldSize="m"
+        [tuiTextfieldLabelOutside]="true"
+        [tuiTextfieldCleaner]="forceClear"
+        [tuiHint]="value && showedValue !== '-' ? hintContent : undefined"
+        tuiHintDirection="top"
+      >
+        <input
+          tuiTextfield
+          [formControl]="control"
+          [maskito]="maskOptions()"
+          [placeholder]="placeholder()"
+          [maxLength]="maxLength()"
+        />
+        <div class="textfield-icons-container">
+          @if (isInvalidAndNotPristine) {
+            <sproc-param-invalid-icon></sproc-param-invalid-icon>
+          }
+        </div>
+      </tui-textfield>
+    </div>
+  </ng-template>
+</ng-container>
+
+<ng-template #hintContent> {{ showedValue }} </ng-template>

package/src/lib/components/inputs/param-text/param-text.component.less

@@ -0,0 +1,33 @@
+@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'] {
+        .label-wrapper {
+          .default-label-wrapper;
+
+          width: 100%;
+        }
+      }
+    }
+
+    .errorMessage {
+      display: inline-block;
+      text-align: end;
+      margin-left: auto;
+      color: #ff0000;
+      font-size: 12px;
+      white-space: pre-line;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { TuiAppearance, TuiHint, TuiTextfield } from '@taiga-ui/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import { MaskitoOptions } from '@maskito/core';
+import { MaskitoDirective } from '@maskito/angular';
+import { ParamInvalidIconComponent } from '../sub-components/param-invalid-icon/param-invalid-icon.component';
+import { ParamTextBase } from '../../../core/param';
+
+@Component({
+  selector: 'sproc-param-text',
+  templateUrl: './param-text.component.html',
+  styleUrls: ['./param-text.component.less'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgTemplateOutlet,
+    NgIf,
+    NgSwitch,
+    NgSwitchCase,
+    NgSwitchDefault,
+    TuiTextfield,
+    ParamInvalidIconComponent,
+    ReactiveFormsModule,
+    TuiHint,
+    TuiTextfieldControllerModule,
+    TuiAppearance,
+    MaskitoDirective,
+  ],
+})
+export class ParamTextComponent extends ParamTextBase {
+  public maskOptions = input<MaskitoOptions | null>(null);
+  /** сообщение об ошибке для текстового поля */
+  public errorMessage = input<string>('');
+}

package/src/lib/components/inputs/param-textarea/param-textarea.component.html

@@ -0,0 +1,61 @@
+<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 [tuiHint]="value && showedValue !== '-' ? showedValue : undefined">{{
+          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
+        tuiAppearance="sproc-input-appearance"
+        tuiTextfieldSize="m"
+        [tuiTextfieldLabelOutside]="true"
+        [tuiTextfieldCleaner]="forceClear"
+        [tuiHint]="value && showedValue !== '-' ? hintContent : undefined"
+      >
+        <textarea
+          tuiTextarea
+          tuiTextfieldSize="m"
+          [formControl]="control"
+          [max]="max()"
+          [min]="min()"
+          [maxLength]="maxLength()"
+          [limit]="maxLength()"
+          [placeholder]="placeholder()"
+        ></textarea>
+        <div class="textfield-icons-container">
+          @if (isInvalidAndNotPristine) {
+            <sproc-param-invalid-icon></sproc-param-invalid-icon>
+          }
+        </div>
+      </tui-textfield>
+
+      <ng-template #hintContent> {{ showedValue }} </ng-template>
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-textarea/param-textarea.component.less

@@ -0,0 +1,21 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+    }
+  }
+
+  [tuiAppearance][data-appearance='textfield'] {
+    border-block-end-width: unset !important;
+    padding: 7px 60px 7px 12px;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { TuiAppearance, TuiHint, TuiTextfield } from '@taiga-ui/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import { TuiTextarea, TuiTextareaLimit } from '@taiga-ui/kit';
+import { ParamInvalidIconComponent } from '../sub-components/param-invalid-icon/param-invalid-icon.component';
+import { ParamTextBase } from '../../../core/param';
+
+@Component({
+  selector: 'sproc-param-textarea',
+  templateUrl: './param-textarea.component.html',
+  styleUrls: ['./param-textarea.component.less'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgTemplateOutlet,
+    TuiTextfield,
+    ParamInvalidIconComponent,
+    ReactiveFormsModule,
+    TuiHint,
+    TuiTextfieldControllerModule,
+    TuiAppearance,
+    TuiTextarea,
+    TuiTextareaLimit,
+  ],
+})
+export class ParamTextareaComponent extends ParamTextBase {
+  /** Минимальное кол-во строк в инпуте */
+  public min = input(6);
+  /** Максимальное кол-во строк в инпуте */
+  public max = input(6);
+}

package/src/lib/components/inputs/param-toggle/param-toggle.component.html

@@ -0,0 +1,40 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <div class="value">
+        <span>{{ showedValue }}</span>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit empty-switcher" [attr.sproc-param-style]="paramStyle">
+      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+      </div>
+
+      <input
+        tuiSwitch
+        type="checkbox"
+        [size]="size()"
+        class="card-toggle-button"
+        [formControl]="control"
+      />
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-toggle/param-toggle.component.less

@@ -0,0 +1,69 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+
+      &[sproc-param-style='card'] {
+        .label-wrapper {
+          .toggle-label-wrapper;
+
+          width: fit-content;
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        .label-wrapper {
+          .toggle-label-wrapper;
+
+          width: 100%;
+        }
+      }
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+
+      &[sproc-param-style='card'] {
+        height: 20px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 2px 0 0;
+        margin: 8px 0 8px 0;
+
+        .label-wrapper {
+          .toggle-label-wrapper;
+
+          width: fit-content;
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        height: 20px;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .label-wrapper {
+          .toggle-label-wrapper;
+
+          width: fit-content;
+        }
+      }
+    }
+
+    .toggle-label-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ParamBase } from '../../../core/param/param-base';
+import { TuiSizeM, TuiSizeS } from '@taiga-ui/core';
+
+@Component({
+  selector: 'sproc-param-toggle',
+  templateUrl: './param-toggle.component.html',
+  styleUrls: ['./param-toggle.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamToggleComponent extends ParamBase<boolean, boolean> {
+  public override buildShowedValue = input((value: boolean): string => (value ? 'Да' : 'Нет'));
+  public size = input<TuiSizeS | TuiSizeM>('s');
+}

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

@@ -0,0 +1,59 @@
+import { ParamTreeService } from '../services/param-tree.service';
+import { ITreeNode } from '../types/param-tree.types';
+
+export const TREE_LOADING_NODE: ITreeNode = { name: 'LOADING' };
+
+export const DEBOUNCE_TIME_FOR_SYNC_NEXT_VALUES = 250;
+
+export const notEmpty: (children?: ITreeNode[]) => boolean = (children) =>
+  !!children && children.length > 0 && children[0] !== TREE_LOADING_NODE;
+
+function getCurrentChildren<T>(node: ITreeNode<T>, service: ParamTreeService<T>): ITreeNode<T>[] {
+  const serviceChildren = service.getChildren(node);
+  if (notEmpty(serviceChildren)) {
+    return serviceChildren;
+  }
+
+  return [];
+}
+
+export function treeNodesFlatten<T>(
+  node: ITreeNode<T>,
+  service: ParamTreeService<T>
+): ITreeNode<T>[] {
+  const children = getCurrentChildren(node, service);
+  const flattenedChildren: ITreeNode<T>[] = [node];
+
+  for (const child of children) {
+    const flattened = treeNodesFlatten<T>(child, service);
+    flattenedChildren.push(...flattened);
+  }
+
+  return flattenedChildren;
+}
+
+export function updatesCheckedNodesEqual<T>(
+  prev: ITreeNode<T>[] | undefined,
+  curr: ITreeNode<T>[] | undefined,
+  service: ParamTreeService<T>
+): boolean {
+  if (!prev && !curr) {
+    return true;
+  }
+
+  if (!prev || !curr) {
+    return false;
+  }
+
+  if (prev.length !== curr.length) {
+    return false;
+  }
+
+  for (const [i] of prev.entries()) {
+    if (!service.equals(prev[i], curr[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}

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

@@ -0,0 +1,51 @@
+<div class="tree-custom-class__container">
+  @for (node of treeNodes$ | async; track node) {
+    @if (node === TREE_LOADER) {
+      <tui-loader [showLoader]="true" [overlay]="true" size="s"></tui-loader>
+    } @else {
+      @if (defaultNodeOpenedState() === undefined) {
+        <tui-tree
+          class="tui_tree--not-collapsed"
+          [value]="node"
+          [content]="contentTemplate"
+          [childrenHandler]="childrenHandler"
+        >
+        </tui-tree>
+      } @else {
+        <tui-tree
+          [value]="node"
+          [content]="contentTemplate"
+          [childrenHandler]="childrenHandler"
+          [tuiTreeController]="!!defaultNodeOpenedState()"
+          [map]="openedNodesState()"
+          (toggled)="onToggle($event)"
+        >
+        </tui-tree>
+      }
+    }
+  }
+</div>
+
+<ng-template #contentTemplate let-node>
+  @let isChecked = checkedNodesState().get(node);
+
+  @if (node === TREE_LOADER) {
+    <tui-loader [showLoader]="true" [overlay]="true" size="s"></tui-loader>
+  } @else if (nodeTemplate()) {
+    <ng-container
+      [ngTemplateOutlet]="nodeTemplate()"
+      [ngTemplateOutletContext]="{ node, isChecked, onChecked }"
+    ></ng-container>
+  } @else {
+    <label tuiLabel class="tree-custom-class__label-checkbox-container">
+      <input
+        size="s"
+        tuiCheckbox
+        type="checkbox"
+        [ngModel]="isChecked"
+        (ngModelChange)="onChecked(node, $event)"
+      />
+      <small>{{ node.name }}</small>
+    </label>
+  }
+</ng-template>

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

@@ -0,0 +1,3 @@
+.tree-custom-class__label-checkbox-container {
+  margin-inline-start: 4px;
+}