ngx-register-base 1.3.1 → 1.3.2

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

@@ -1,106 +0,0 @@
-<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
-  <ng-template #readTemplate>
-    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
-      @if (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>
-      }
-      <div [tuiHint]="value && showedValue !== '-' ? hintContent : undefined" class="value">
-        <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>
-      </div>
-
-      @if (searchable) {
-        <tui-textfield
-          tuiTextfieldSize="m"
-          tuiAppearance="sproc-input-appearance"
-          tuiChevron
-          [tuiTextfieldCleaner]="true"
-          [tuiHint]="value && showedValue !== '-' ? hintContent : undefined"
-          tuiHintDirection="top"
-          [content]="valueTemplate"
-        >
-          <input
-            (input)="search$.next($any($event.target).value)"
-            tuiComboBox
-            [strict]="strict()"
-            [placeholder]="placeholder()"
-            [formControl]="control"
-          />
-
-          <tui-loader [showLoader]="loading" [overlay]="true">
-            <tui-data-list-wrapper
-              new
-              *tuiTextfieldDropdown
-              [items]="items | tuiFilterByInput: matcher()"
-              [itemContent]="listItemTemplate ?? dropdownOptionContent"
-              [tuiDropdownMaxHeight]="maxDropdownHeight"
-              (itemClick)="onSelect.emit($event)"
-            />
-          </tui-loader>
-
-          <ng-container *ngTemplateOutlet="textfieldIcons"></ng-container>
-        </tui-textfield>
-      } @else {
-        <tui-textfield
-          tuiTextfieldSize="m"
-          tuiAppearance="sproc-input-appearance"
-          tuiChevron
-          [tuiTextfieldLabelOutside]="true"
-          [tuiTextfieldCleaner]="true"
-          [tuiHint]="value && showedValue !== '-' ? hintContent : undefined"
-          tuiHintDirection="top"
-          [content]="valueTemplate"
-          [tuiDropdownMaxHeight]="maxDropdownHeight"
-        >
-          <input tuiSelect [placeholder]="placeholder()" [formControl]="control" />
-
-          <tui-loader [showLoader]="loading" [overlay]="true">
-            <tui-data-list-wrapper
-              new
-              *tuiTextfieldDropdown
-              [items]="items"
-              [itemContent]="listItemTemplate ?? dropdownOptionContent"
-              (itemClick)="onSelect.emit($event)"
-            />
-          </tui-loader>
-
-          <ng-container *ngTemplateOutlet="textfieldIcons"></ng-container>
-        </tui-textfield>
-      }
-      <ng-template #dropdownOptionContent let-data>
-        <div>
-          {{ stringify()(data) }}
-        </div>
-      </ng-template>
-
-      <ng-template #textfieldIcons>
-        <div class="textfield-icons-container">
-          @if (isInvalidAndNotPristine) {
-            <sproc-param-invalid-icon></sproc-param-invalid-icon>
-          }
-        </div>
-      </ng-template>
-    </div>
-  </ng-template>
-</ng-container>
-
-<ng-template #hintContent> {{ showedValue }} </ng-template>

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

@@ -1,26 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      ._chevron-rotated {
-        .textfield-icons-container {
-          transition: all 0.4ms;
-
-          .chevron {
-            transform: rotate(-180deg);
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,318 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  forwardRef,
-  input,
-  OnDestroy,
-  Output,
-  signal,
-} from '@angular/core';
-import {
-  BehaviorSubject,
-  combineLatest,
-  debounceTime,
-  distinctUntilChanged,
-  filter,
-  map,
-  tap,
-} from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import {
-  TUI_ITEMS_HANDLERS,
-  TuiAppearance,
-  TuiDropdown,
-  TuiHint,
-  TuiLoader,
-  TuiTextfield,
-} from '@taiga-ui/core';
-import {
-  TuiChevron,
-  TuiComboBox,
-  TuiDataListWrapper,
-  TuiFilterByInputPipe,
-  TuiSelect,
-} from '@taiga-ui/kit';
-import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
-import { TuiStringMatcher } from '@taiga-ui/cdk';
-import { ParamInvalidIconComponent } from '../sub-components/param-invalid-icon/param-invalid-icon.component';
-import { FastQueryStore } from '../../../store/fast-query-store.service';
-import { ParamSelectBase } from '../../../core/param/param-select-base';
-import { IFilterSelectValue } from '../../../types/params.types';
-import { PARAM_SEARCH_INPUT_DEBOUNCE_TIME_MLS } from '../../../consts/params.consts';
-
-@Component({
-  selector: 'sproc-param-select',
-  templateUrl: './param-select.component.html',
-  styleUrls: ['./param-select.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    FastQueryStore,
-    {
-      provide: TUI_ITEMS_HANDLERS,
-      deps: [forwardRef(() => ParamSelectComponent)],
-      useFactory: (component: ParamSelectComponent) => ({
-        stringify: component.stringify,
-        identityMatcher: component.identityMatcher,
-        disabledItemHandler: signal(() => false),
-      }),
-    },
-  ],
-  standalone: true,
-  imports: [
-    TuiTextfield,
-    TuiAppearance,
-    TuiTextfieldControllerModule,
-    ReactiveFormsModule,
-    TuiDataListWrapper,
-    TuiFilterByInputPipe,
-    NgTemplateOutlet,
-    NgSwitch,
-    NgSwitchCase,
-    NgSwitchDefault,
-    TuiComboBox,
-    ParamInvalidIconComponent,
-    NgIf,
-    TuiSelect,
-    TuiDropdown,
-    TuiLoader,
-    TuiChevron,
-    TuiHint,
-  ],
-})
-export class ParamSelectComponent
-  extends ParamSelectBase<IFilterSelectValue | null, IFilterSelectValue | null>
-  implements OnDestroy
-{
-  override placeholder = input('Выберите значение');
-  readonly stringify = input<(item: IFilterSelectValue) => string>((item) =>
-    String(item.name ?? '')
-  );
-  readonly identityMatcher = input<(a: IFilterSelectValue, b: IFilterSelectValue) => boolean>(
-    (a, b) => a.id === b.id
-  );
-  readonly matcher = input<TuiStringMatcher<IFilterSelectValue>>(
-    (item: IFilterSelectValue, query: string) => {
-      if (!query || String(query).trim() === '') {
-        return true;
-      }
-      return String(item?.name ?? '')
-        .toLowerCase()
-        .includes(String(query).toLowerCase());
-    }
-  );
-  override buildShowedValue = input(
-    (value: IFilterSelectValue | null): string => value?.name ?? '-'
-  );
-  public strict = input<boolean>(true);
-
-  @Output() onSelect = new EventEmitter<IFilterSelectValue>();
-
-  protected readonly search$ = new BehaviorSubject<string | undefined>(undefined);
-
-  public override afterViewInit(): void {
-    this._observeFetchItems();
-    if (this.meta) {
-      this._subscribeOnMetaChanges();
-      this._subscribeOnSearch();
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this.search$.complete();
-  }
-
-  private _subscribeOnSearch(): void {
-    this.search$
-      .pipe(debounceTime(PARAM_SEARCH_INPUT_DEBOUNCE_TIME_MLS), takeUntilDestroyed(this.dr))
-      .subscribe((searchValue: string | undefined) => {
-        this.fetchItems(searchValue);
-      });
-  }
-
-  private _observeFetchItems(): void {
-    this._observeValueFill();
-    this._observeEmptyValue();
-    this._observeValueFetch();
-  }
-
-  private _observeValueFill(): void {
-    this.control.valueChanges
-      .pipe(
-        filter(Boolean),
-        filter((value) => !value.name),
-        takeUntilDestroyed(this.dr)
-      )
-      .subscribe((value) => {
-        const id = this._getIdFromValue(value);
-        const filledValue = this.items.find((item) => item.id === id);
-
-        if (filledValue) {
-          this.control.setValue(filledValue, { emitEvent: false });
-        }
-      });
-  }
-
-  private _observeEmptyValue(): void {
-    this.control.valueChanges
-      .pipe(
-        filter((value) => value === null),
-        takeUntilDestroyed(this.dr)
-      )
-      .subscribe(() => {
-        this.search$.next('');
-        this.fetchItems();
-      });
-  }
-
-  private _observeValueFetch(): void {
-    combineLatest([
-      this.control.valueChanges.pipe(
-        map((value) => value?.id ?? null),
-        distinctUntilChanged(),
-        filter((id) => !this.items.some((item) => item.id === id))
-      ),
-      this.meta$,
-    ])
-      .pipe(takeUntilDestroyed(this.dr))
-      .subscribe(() => this.fetchItems());
-  }
-
-  private _getIdFromValue(value: unknown): string | number | null {
-    return typeof value === 'object' && value !== null
-      ? ((value as { id?: string | number }).id ?? null)
-      : (value as string | number | null);
-  }
-
-  private _subscribeOnMetaChanges(): void {
-    this.meta$.pipe(takeUntilDestroyed(this.dr)).subscribe(() => {
-      this.fetchItems();
-    });
-  }
-
-  protected fetchItems(searchValue?: string): void {
-    const { idField, valueField } = this.metaFields;
-
-    if (!this.meta?.table?.name || idField === null || valueField === null) {
-      return;
-    }
-
-    const selectedItemIDs = this._getSelectedItemIDs(searchValue);
-
-    this.loading = true;
-    const where = this.buildWhere(searchValue);
-    const selectedItemIdsWhere = this._buildSelectedItemIdsWhere(where, selectedItemIDs, idField);
-
-    this.store
-      .getResults(
-        {
-          table: this.meta.table,
-          where,
-          order_by: this.meta.order_by,
-          offset: this.meta.offset,
-          distinct_on: this.meta.distinct_on,
-          subquery: this.meta.subquery,
-          limit: this.meta.limit ?? this.limit,
-        },
-        true,
-        selectedItemIdsWhere
-      )
-      .pipe(
-        tap((data) => {
-          this._handleResults(data, idField, valueField, selectedItemIDs);
-        }),
-        tap(() => {
-          this.loading = false;
-          this.cdr.markForCheck();
-        }),
-        takeUntilDestroyed(this.dr)
-      )
-      .subscribe();
-  }
-
-  private _getSelectedItemIDs(searchValue?: string): string[] | undefined {
-    if (this.value && (!searchValue || searchValue === '')) {
-      const idField = this.meta?.table.idField ?? 'id';
-      return [this.value[idField]];
-    }
-
-    return undefined;
-  }
-
-  private _buildSelectedItemIdsWhere(
-    where: any,
-    selectedItemIDs: string[] | undefined,
-    idField: string
-  ): object | undefined {
-    if (where && selectedItemIDs && selectedItemIDs.length > 0 && selectedItemIDs[0]) {
-      return { _and: [{ [idField]: { _in: selectedItemIDs } }, where] };
-    }
-
-    return undefined;
-  }
-
-  private _handleResults(
-    data: any,
-    idField: string,
-    valueField: string,
-    selectedItemIDs: string[] | undefined
-  ): void {
-    this.items = data.data.map((item: any) => ({
-      ...item,
-      id: item[idField] ?? '',
-      name: this._getNameFromField(item, valueField),
-    }));
-
-    this._updateControlValues(data, idField, valueField, selectedItemIDs);
-  }
-
-  private _getNameFromField(item: any, field: string): string {
-    if (field.includes('.')) {
-      return this._getNameFromDeepField(item, field);
-    }
-
-    return this.formatShowedValue(item, field);
-  }
-
-  private _getNameFromDeepField(item: any, field: string): string {
-    const deepFields = field.split('.');
-    let tempObject = { ...item };
-
-    for (const deepField of deepFields) {
-      tempObject = tempObject[deepField];
-    }
-
-    return tempObject;
-  }
-
-  private _updateControlValues(
-    data: any,
-    idField: string,
-    valueField: string,
-    selectedItemIDs: string[] | undefined
-  ): void {
-    const idSelectedValue = this.value?.[idField];
-    const availableItems =
-      data.selectedIdsQuery
-        ?.filter((item: any) => idSelectedValue === item[idField])
-        .map((item: any) => ({
-          ...item,
-          id: item[idField] ?? '',
-          name: this._getNameFromField(item, valueField),
-        })) ?? [];
-
-    if (selectedItemIDs && selectedItemIDs.length > 0 && availableItems.length > 0) {
-      const [item] = availableItems;
-      this.control?.setValue(item);
-    }
-
-    const itemsThatDontExist = availableItems.filter(
-      (new_item: any) => !this.items.some((value: any) => value.id === new_item.id)
-    );
-
-    this.items.push(...itemsThatDontExist);
-    this.itemsChange.emit(this.items);
-  }
-}

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

@@ -1,8 +0,0 @@
-<div class="param-switcher">
-  <div *ngIf="label" class="label">
-    <span *ngIf="label" class="label__text">{{ label }}</span>
-    <span *ngIf="required" class="label--required">*</span>
-  </div>
-
-  <prizm-switcher [formControl]="control" [switchers]="switchers"></prizm-switcher>
-</div>

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

@@ -1,53 +0,0 @@
-@import 'fonts';
-
-:host {
-  .param-switcher {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .label {
-      display: flex;
-      gap: 4px;
-
-      .input-label;
-
-      &__text {
-        color: var(--main-black);
-      }
-
-      &--required {
-        color: var(--brand-danger);
-      }
-    }
-
-    ::ng-deep {
-      prizm-switcher {
-        .container {
-          display: flex;
-          flex: 1;
-
-          prizm-switcher-item {
-            display: flex;
-            flex: 1;
-
-            button {
-              height: 24px !important;
-              min-height: 24px !important;
-              display: flex;
-              flex: 1;
-
-              prizm-wrapper {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding: unset !important;
-                border: 1px solid var(--chip-background);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { PrizmSwitcherItem } from '@prizm-ui/components';
-import { ParamBase } from '../../../core';
-
-@Component({
-  selector: 'sproc-param-switcher',
-  templateUrl: './param-switcher.component.html',
-  styleUrls: ['./param-switcher.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamSwitcherComponent extends ParamBase<number, number> {
-  @Input() switchers: PrizmSwitcherItem[] = [];
-}

package/src/lib/components/inputs/param-switcher-date-time-range/consts/param-switcher-date-time-range.consts.ts

@@ -1,29 +0,0 @@
-import { PrizmSwitcherItem } from '@prizm-ui/components';
-import { ESwitcherValue } from '../types/param-switcher-date-time-range.types';
-
-export const SwitcherItems: PrizmSwitcherItem[] = [
-  {
-    id: ESwitcherValue.MONTH,
-    title: 'мес',
-  },
-  {
-    id: ESwitcherValue.FIRST,
-    title: '1 кв',
-  },
-  {
-    id: ESwitcherValue.SECOND,
-    title: '2 кв',
-  },
-  {
-    id: ESwitcherValue.THIRD,
-    title: '3 кв',
-  },
-  {
-    id: ESwitcherValue.FOURTH,
-    title: '4 кв',
-  },
-  {
-    id: ESwitcherValue.YEAR,
-    title: 'год',
-  },
-];

package/src/lib/components/inputs/param-switcher-date-time-range/param-switcher-date-time-range.component.html

@@ -1,19 +0,0 @@
-<div class="param-custom-template">
-  <div *ngIf="label" class="label">
-    <span *ngIf="label" class="label__text">{{ label }}</span>
-    <span *ngIf="required" class="label--required">*</span>
-  </div>
-
-  <prizm-switcher [switchers]="switchers" [formControl]="switcherControl"></prizm-switcher>
-
-  <prizm-input-layout class="flex-shrink--zero" size="s" [forceClear]="forceClear">
-    <prizm-input-layout-date-time-range
-      [placeholder]="placeholder()"
-      [timeMode]="timeMode"
-      [maxLength]="maxLength"
-      [min]="$any(min)"
-      [max]="$any(max)"
-      [formControl]="control"
-    ></prizm-input-layout-date-time-range>
-  </prizm-input-layout>
-</div>

package/src/lib/components/inputs/param-switcher-date-time-range/param-switcher-date-time-range.component.less

@@ -1,76 +0,0 @@
-@import 'fonts';
-
-:host {
-  .param-custom-template {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 0 2px;
-    gap: 8px;
-
-    .label {
-      display: flex;
-      gap: 4px;
-
-      .input-label;
-
-      &__text {
-        color: var(--main-black);
-      }
-
-      &--required {
-        color: var(--brand-danger);
-      }
-    }
-
-    ::ng-deep {
-      prizm-switcher {
-        .container {
-          display: flex;
-          flex: 1;
-
-          prizm-switcher-item {
-            display: flex;
-            flex: 1;
-
-            button {
-              height: 24px !important;
-              min-height: 24px !important;
-              display: flex;
-              flex: 1;
-
-              prizm-wrapper {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding: unset !important;
-              }
-            }
-          }
-        }
-      }
-
-      .prizm-input-form:not(.prizm-input-form-focused) {
-        background: inherit;
-        border: none;
-        border-bottom: 1px solid #d7d8df;
-        padding: 0 3.5px 0 8px;
-      }
-
-      .prizm-input-form .prizm-input-form-focused {
-        background: inherit;
-        border: 1px !important;
-        border-bottom: 1px solid #d7d8df;
-      }
-
-      .prizm-input-form-inner {
-        min-height: 32px;
-        height: 32px;
-      }
-
-      input {
-        .input-text-12px;
-      }
-    }
-  }
-}