ngx-register-base 1.3.1 → 1.3.3

package/src/lib/components/filters/components/filter-list/filters-section/filters-section.component.less

@@ -1,55 +0,0 @@
-@import 'fonts';
-@import 'indicator';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  padding-top: 8px;
-  gap: 8px;
-
-  .panel-head {
-    display: flex;
-    justify-content: space-between;
-    padding-right: 4px;
-    height: 24px;
-    align-items: center;
-    border-bottom: 1px solid var(--brand-blue);
-    cursor: pointer;
-
-    .title {
-      display: flex;
-      align-items: center;
-      height: 20px;
-
-      &__font {
-        .main-subtitle;
-      }
-
-      &--has-filters {
-        &::after {
-          .indicator(6px, var(--brand-danger));
-
-          margin-left: 5px;
-        }
-      }
-    }
-  }
-
-  .filters-block {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 0 2px;
-    transform-origin: top;
-    transition: max-height 0.4s;
-    overflow: hidden;
-
-    &[show='true'] {
-      max-height: 1000px;
-    }
-
-    &[show='false'] {
-      max-height: 0;
-    }
-  }
-}

package/src/lib/components/filters/components/filter-list/filters-section/filters-section.component.ts

@@ -1,69 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChildren,
-  inject,
-  Injector,
-  input,
-  runInInjectionContext,
-  signal,
-} from '@angular/core';
-import { NgControl } from '@angular/forms';
-import { combineLatest, of, switchMap } from 'rxjs';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { IInputControl } from '../../../../../types';
-
-@Component({
-  selector: 'sproc-filters-section',
-  templateUrl: './filters-section.component.html',
-  styleUrls: ['./filters-section.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FiltersSectionComponent {
-  public controls = contentChildren<NgControl>(NgControl, { descendants: true });
-
-  public label = input<string>('');
-
-  protected isOpen = signal(true);
-  protected haveAppliedFilters = computed(() => this._sameControlApplied());
-
-  private _sameControlApplied = computed(() => this._checkSomeControlApplied());
-
-  private _controlsChanges = toSignal(
-    toObservable(this.controls).pipe(
-      switchMap((controls) =>
-        combineLatest(
-          controls.map(({ control }) =>
-            runInInjectionContext(this._injector, () => {
-              const applied = (control as IInputControl)?.applied;
-
-              return applied ? toObservable(applied) : of(false);
-            })
-          )
-        )
-      )
-    ),
-    { initialValue: [] }
-  );
-
-  private readonly _injector = inject(Injector);
-
-  protected toggleHeader(): void {
-    this.isOpen.update((isOpen) => !isOpen);
-  }
-
-  private _checkSomeControlApplied(): boolean {
-    return this._controlsChanges().some((controlValue) => {
-      if (!controlValue) {
-        return false;
-      }
-
-      if (Array.isArray(controlValue)) {
-        return controlValue.some((value) => !!value);
-      }
-
-      return true;
-    });
-  }
-}

package/src/lib/components/filters/components/filter-list.module.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FilterListFooterComponent } from './filter-list/filter-list-footer/filter-list-footer.component';
-import { FilterListHeaderComponent } from './filter-list/filter-list-header/filter-list-header.component';
-import { FilterEditComponent } from './filter-list/filter-edit/filter-edit.component';
-import { FilterListSavedComponent } from './filter-list/filter-list-saved/filter-list-saved.component';
-import { FiltersSectionComponent } from './filter-list/filters-section/filters-section.component';
-import { DividerComponent } from '../../divider/divider.component';
-import { PrizmSharedModule } from '../../../utils/prizm.shared.module';
-
-@NgModule({
-  declarations: [
-    FilterListHeaderComponent,
-    FilterEditComponent,
-    FilterListSavedComponent,
-    FiltersSectionComponent,
-    FilterListFooterComponent,
-  ],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, PrizmSharedModule, DividerComponent],
-  exports: [
-    FilterEditComponent,
-    FilterListSavedComponent,
-    FiltersSectionComponent,
-    FilterListHeaderComponent,
-    FilterListFooterComponent,
-  ],
-})
-export class FilterListModule {}

package/src/lib/components/filters/register-table-filter.component.html

@@ -1,53 +0,0 @@
-<sproc-sliding-panel [isOpen]="isOpen$ | async" [subOffsetHeight]="subOffsetHeight">
-  <sproc-filter-list-header
-    header
-    [showTotal]="showTotal"
-    [showPin]="showPin"
-    [showCloseButton]="showCloseButton"
-    [total]="total$ | async"
-    [acceptButtonDisabled]="acceptButtonDisabled"
-    [applyButtonDisabled]="applyButtonDisabled"
-    [filterListHeaderTitle]="filterListHeaderTitle"
-    (pinnedChange)="closeMenu($event)"
-    (applyFilter)="onApplyFilter($event)"
-  ></sproc-filter-list-header>
-
-  <ng-container [ngSwitch]="filterState$ | async">
-    <ng-container *ngSwitchCase="FilterState.FILTER_LIST" [ngTemplateOutlet]="filtersTemplate">
-    </ng-container>
-
-    <div *ngSwitchCase="FilterState.SAVED_LIST">
-      <sproc-filter-list-saved></sproc-filter-list-saved>
-    </div>
-
-    <div *ngSwitchCase="FilterState.ON_EDIT_FILTER">
-      <sproc-filter-edit></sproc-filter-edit>
-
-      <sproc-divider></sproc-divider>
-
-      <ng-container [ngTemplateOutlet]="filtersTemplate"></ng-container>
-    </div>
-
-    <div *ngSwitchCase="FilterState.ON_SAVE_FILTER">
-      <sproc-filter-edit></sproc-filter-edit>
-    </div>
-
-    <ng-template #filtersTemplate>
-      @defer (on viewport) {
-        <ng-content />
-      } @loading (minimum 1s) {
-        <tui-loader size="m" class="loader"></tui-loader>
-      } @placeholder {
-        <span>...</span>
-      }
-    </ng-template>
-  </ng-container>
-
-  <sproc-filter-list-footer
-    footer
-    [acceptButtonDisabled]="acceptButtonDisabled"
-    [applyButtonDisabled]="applyButtonDisabled"
-    (apply)="onApplyFilter($event)"
-    [footerApplyButtonLabel]="footerApplyButtonLabel"
-  ></sproc-filter-list-footer>
-</sproc-sliding-panel>

package/src/lib/components/filters/register-table-filter.component.less

@@ -1,17 +0,0 @@
-@import 'indicator';
-
-:host {
-  .loader {
-    height: 100%;
-  }
-
-  ::ng-deep {
-    .label-wrapper.applied {
-      &::after {
-        .indicator(5px, var(--brand-danger));
-
-        margin-left: 5px;
-      }
-    }
-  }
-}

package/src/lib/components/filters/register-table-filter.component.ts

@@ -1,167 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { combineLatest, debounceTime, map, Subject, takeUntil, of } from 'rxjs';
-import {
-  EInputsAction,
-  EInputsState,
-  GqlFields,
-  IInputsState,
-  ITpUserSettings,
-  ITpUserSettingsSettingsFilter,
-} from '../../types';
-import { FiltersService, FiltersStateService } from '../../services';
-import { RegisterBaseStore } from '../../core';
-import { PAGE_MENU_STATE } from '../page-menu';
-
-@Component({
-  selector: 'sproc-register-table-filter',
-  templateUrl: './register-table-filter.component.html',
-  styleUrls: ['./register-table-filter.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class RegisterTableFilterComponent<Type extends Record<string, any>>
-  implements OnInit, AfterViewInit, OnDestroy
-{
-  /** Высота всего компонента фильтров */
-  @Input() height: string | undefined;
-  @Input() showTotal = true;
-  @Input() showPin = true;
-  @Input() showCloseButton = true;
-  @Input() acceptButtonDisabled = false;
-  @Input() applyButtonDisabled = false;
-  /** Доп. отступ для вычисления высоты панели (в пикселях) */
-  @Input() subOffsetHeight = 0;
-  @Input() filterListHeaderTitle = 'Фильтр';
-  @Input() footerApplyButtonLabel = 'Применить';
-
-  @Output() clickApplyButton = new EventEmitter<void>();
-
-  private readonly _menuState = inject(PAGE_MENU_STATE);
-
-  private readonly _unsubscribe$: Subject<void> = new Subject<void>();
-
-  public readonly FilterState = EInputsState;
-  public readonly filterState$ = this._filterStateService.state$.pipe(
-    map((filterState) => filterState.state)
-  );
-  public readonly isOpen$ = this.filterState$.pipe(map((state) => state !== EInputsState.HIDDEN));
-  public readonly total$ = this._store.total$ ?? of(0);
-
-  private _currentFilters: ITpUserSettingsSettingsFilter[] = [];
-  private _previousState: IInputsState = {
-    state: EInputsState.HIDDEN,
-    action: EInputsAction.CANCEL,
-  };
-
-  constructor(
-    private readonly _store: RegisterBaseStore<Type>,
-    private readonly _filterStateService: FiltersStateService<Type>,
-    private readonly _filterListService: FiltersService<Type>
-  ) {}
-
-  public ngOnInit(): void {
-    combineLatest([this._filterStateService.state$, this._filterStateService.selectedSavedFilter])
-      .pipe(takeUntil(this._unsubscribe$))
-      .subscribe({
-        next: ([state, selected]) => {
-          if (state.state === EInputsState.SAVED_LIST) {
-            this.acceptButtonDisabled = !selected;
-            return;
-          }
-
-          if (state.state === EInputsState.ON_EDIT_FILTER) {
-            this.acceptButtonDisabled = false;
-            return;
-          }
-
-          if (state.state === EInputsState.ON_SAVE_FILTER) {
-            this.acceptButtonDisabled = false;
-            return;
-          }
-          this.acceptButtonDisabled = true;
-        },
-      });
-
-    if (this._filterStateService.isPin) {
-      this._filterStateService.setState({
-        state: EInputsState.FILTER_LIST,
-        action: EInputsAction.OPEN,
-      });
-    }
-  }
-
-  protected closeMenu(isPin: boolean): void {
-    if (isPin) {
-      this._menuState.setOpen(false);
-    }
-  }
-
-  public onApplyFilter(gqlFilter: GqlFields, savePage?: boolean): void {
-    if (!savePage) {
-      this._filterStateService.setOffset(0);
-      this._filterStateService.setPage(1);
-    }
-    this._filterStateService.setGqlValues(gqlFilter);
-    this.clickApplyButton.next();
-  }
-
-  public ngAfterViewInit(): void {
-    this._subscribeOnState();
-  }
-
-  private _subscribeOnState(): void {
-    combineLatest([this._filterStateService.state$, this._filterStateService.selectedSavedFilter])
-      .pipe(debounceTime(500), takeUntil(this._unsubscribe$))
-      .subscribe(([state, settings]) => {
-        this._setFilters(state, settings);
-      });
-  }
-
-  private _setFilters(state: IInputsState, settings: ITpUserSettings | null): void {
-    const { state: currentState, action: currentAction } = state;
-    const { state: previousState } = this._previousState;
-
-    switch (currentState) {
-      case EInputsState.ON_EDIT_FILTER:
-        if (previousState !== EInputsState.ON_EDIT_FILTER) {
-          this._filterListService.setUserSettingsFilterValues(settings?.settings?.filter ?? []);
-        }
-        break;
-      case EInputsState.SAVED_LIST:
-        if (
-          previousState !== EInputsState.SAVED_LIST &&
-          previousState !== EInputsState.ON_EDIT_FILTER &&
-          previousState !== EInputsState.ON_SAVE_FILTER
-        ) {
-          this._currentFilters = this._filterListService.userSettingsFilter;
-        }
-        break;
-      case EInputsState.FILTER_LIST:
-        if (previousState !== EInputsState.FILTER_LIST) {
-          if (currentAction === EInputsAction.CANCEL) {
-            this._filterListService.setUserSettingsFilterValues(this._currentFilters);
-          } else if (currentAction === EInputsAction.APPLY_SAVED_FILTER) {
-            this._currentFilters = settings?.settings?.filter ?? [];
-          }
-        }
-        break;
-      default:
-        console.warn('Состояние фильтра', currentState);
-        break;
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this._unsubscribe$.next();
-    this._unsubscribe$.complete();
-  }
-}

package/src/lib/components/filters/register-table-filter.module.ts

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RegisterTableFilterComponent } from './register-table-filter.component';
-import { FilterListModule } from './components/filter-list.module';
-import { SlidingPanelModule } from '../sliding-panel/sliding-panel.module';
-import { DividerComponent } from '../divider/divider.component';
-import { TuiLoader } from '@taiga-ui/core';
-
-@NgModule({
-  declarations: [RegisterTableFilterComponent],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FilterListModule,
-    DividerComponent,
-    SlidingPanelModule,
-    TuiLoader,
-  ],
-  exports: [RegisterTableFilterComponent],
-})
-export class RegisterTableFilterModule {}

package/src/lib/components/inputs/inputs.module.ts

@@ -1,104 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ParamSelectComponent } from './param-select/param-select.component';
-import { ParamMultiSelectComponent } from './param-multi-select/param-multi-select.component';
-import { ParamDateRangeComponent } from './param-date-range/param-date-range.component';
-import { ParamMonthComponent } from './param-month/param-month.component';
-import { ParamMonthRangeComponent } from './param-month-range/param-month-range.component';
-import { ParamToggleComponent } from './param-toggle/param-toggle.component';
-import { ParamTextComponent } from './param-text/param-text.component';
-import { ParamDateTimeRangeComponent } from './param-date-time-range/param-date-time-range.component';
-import { ParamCustomComponent } from './param-custom/param-custom.component';
-import { ParamSwitcherComponent } from './param-switcher/param-switcher.component';
-import { ParamDateComponent } from './param-date/param-date.component';
-import { ParamSwitcherDateTimeRangeComponent } from './param-switcher-date-time-range/param-switcher-date-time-range.component';
-import { ParamDateTimeComponent } from './param-date-time/param-date-time.component';
-import {
-  TuiAppearance,
-  TuiButton,
-  TuiIcon,
-  TuiTextfieldComponent,
-  TuiTextfieldDirective,
-  TuiTextfieldDropdownDirective,
-  TuiTextfieldOptionsDirective,
-} from '@taiga-ui/core';
-import { TuiInputModule, TuiInputYearModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy';
-import {
-  TuiChevron,
-  TuiDataListWrapperComponent,
-  TuiFilterByInputPipe,
-  TuiSelectDirective,
-  TuiSwitch,
-} from '@taiga-ui/kit';
-import { TuiInputSearch } from '@taiga-ui/layout';
-import { ParamTextareaComponent } from './param-textarea/param-textarea.component';
-import { ParamCalendarYearComponent } from './param-calendar-year/param-calendar-year.component';
-import { FormatDatePipe } from '../../directives/date/format-date.pipe';
-import { PrizmSharedModule } from '../../utils/prizm.shared.module';
-import { PrizmInputMultiSelectModule } from '@prizm-ui/components';
-import { ParamDeleteContentBtnComponent } from './sub-components/param-delete-content-icon/param-delete-content-btn.component';
-import { ParamInvalidIconComponent } from './sub-components/param-invalid-icon/param-invalid-icon.component';
-
-@NgModule({
-  declarations: [
-    ParamDateRangeComponent,
-    ParamDateTimeComponent,
-    ParamMonthComponent,
-    ParamMonthRangeComponent,
-    ParamToggleComponent,
-    ParamDateTimeRangeComponent,
-    ParamCustomComponent,
-    ParamSwitcherComponent,
-    ParamSwitcherDateTimeRangeComponent,
-    ParamSwitcherDateTimeRangeComponent,
-    ParamCalendarYearComponent,
-  ],
-  imports: [
-    CommonModule,
-    ParamTextComponent,
-    PrizmSharedModule,
-    PrizmInputMultiSelectModule,
-    TuiTextfieldComponent,
-    TuiTextfieldDirective,
-    TuiTextfieldOptionsDirective,
-    TuiAppearance,
-    TuiInputModule,
-    TuiTextfieldControllerModule,
-    TuiIcon,
-    TuiButton,
-    TuiChevron,
-    TuiSelectDirective,
-    TuiDataListWrapperComponent,
-    TuiTextfieldDropdownDirective,
-    TuiFilterByInputPipe,
-    TuiInputSearch,
-    ParamMultiSelectComponent,
-    ParamSelectComponent,
-    ParamDateComponent,
-    TuiSwitch,
-    ParamTextareaComponent,
-    TuiInputYearModule,
-    FormatDatePipe,
-    ParamDeleteContentBtnComponent,
-    ParamInvalidIconComponent,
-  ],
-  exports: [
-    ParamSelectComponent,
-    ParamMultiSelectComponent,
-    ParamDateRangeComponent,
-    ParamDateTimeComponent,
-    ParamMonthComponent,
-    ParamMonthRangeComponent,
-    ParamToggleComponent,
-    ParamTextComponent,
-    ParamDateTimeRangeComponent,
-    ParamCustomComponent,
-    ParamSwitcherComponent,
-    ParamDateComponent,
-    ParamSwitcherDateTimeRangeComponent,
-    ParamSwitcherDateTimeRangeComponent,
-    ParamTextareaComponent,
-    ParamCalendarYearComponent,
-  ],
-})
-export class InputsModule {}

package/src/lib/components/inputs/param-calendar-year/param-calendar-year.component.html

@@ -1,49 +0,0 @@
-<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" [attr.sproc-param-style]="paramStyle">
-      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
-        <span class="label" [class.required]="required">
-          {{ label }}
-        </span>
-      </div>
-
-      <tui-textfield
-        [tuiTextfieldSize]="size()"
-        [tuiTextfieldLabelOutside]="true"
-        [tuiTextfieldCleaner]="true"
-        (click)="click()"
-      >
-        <tui-input-year
-          #yearInput
-          [formControl]="control"
-          [max]="max()"
-          [min]="min()"
-          [disabledItemHandler]="disabledHandler"
-        >
-          Выберите год
-        </tui-input-year>
-      </tui-textfield>
-    </div>
-  </ng-template>
-</ng-container>

package/src/lib/components/inputs/param-calendar-year/param-calendar-year.component.less

@@ -1,70 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  ::ng-deep {
-    tui-textfield {
-      padding: 0;
-    }
-
-    [tuiWrapper][data-appearance='textfield'] {
-      box-shadow: none !important;
-    }
-
-    tui-textfield > .t-content {
-      width: 100% !important;
-      height: 100% !important;
-      margin-inline-end: 0 !important;
-    }
-
-    tui-input-year {
-      height: 100% !important;
-      width: 100% !important;
-
-      tui-primitive-textfield {
-        height: 100% !important;
-        max-block-size: none !important;
-      }
-    }
-
-    .t-wrapper label {
-      .input-label;
-      .input-text-14px;
-    }
-
-    [automation-id='tui-primitive-textfield__wrapper'] {
-      padding-inline-start: calc(var(--t-start, 0rem) + var(--t-padding));
-    }
-
-    [tuiAppearance][data-appearance='textfield'] {
-      min-height: 32px;
-    }
-
-    .t-icons {
-      margin-inline-end: 0.5rem !important;
-      min-height: 32px;
-    }
-  }
-
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      &[sproc-param-style='card'] {
-        ::ng-deep {
-          input {
-            .input-text-14px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/inputs/param-calendar-year/param-calendar-year.component.ts

@@ -1,52 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  inject,
-  input,
-  viewChild,
-} from '@angular/core';
-import { type TuiBooleanHandler } from '@taiga-ui/cdk';
-import { TuiSizeL, TuiSizeM } from '@taiga-ui/core';
-import { ParamBase } from '../../../core/param/param-base';
-import { TuiInputYearComponent } from '@taiga-ui/legacy';
-
-@Component({
-  selector: 'sproc-param-calendar-year',
-  templateUrl: './param-calendar-year.component.html',
-  styleUrls: ['./param-calendar-year.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamCalendarYearComponent extends ParamBase<number, string> {
-  private readonly _cdr = inject(ChangeDetectorRef);
-  public yearInputComponent = viewChild<TuiInputYearComponent>('yearInput');
-
-  override buildShowedValue = input((value: number): string => value?.toString() ?? '-');
-  protected readonly disabledHandler: TuiBooleanHandler<number> = (value) =>
-    this.disabledYears().includes(value);
-
-  public disabledYears = input<number[]>([]);
-  public min = input<number | null>(null);
-  public max = input<number | null>(null);
-  public size = input<TuiSizeL | TuiSizeM>('m');
-  protected isYearPickerOpen = false;
-
-  protected click(): void {
-    this.isYearPickerOpen = !this.isYearPickerOpen;
-
-    const yearComponent = this.yearInputComponent();
-    if (yearComponent) {
-      const inputEl = yearComponent.nativeFocusableElement!;
-      const onDocumentClick = (event: MouseEvent) => {
-        if (!inputEl.contains(event.target as Node) && this.isYearPickerOpen) {
-          (yearComponent as any).onOpenChange(false);
-          yearComponent.checkControlUpdate();
-          document.removeEventListener('click', onDocumentClick);
-          this.isYearPickerOpen = false;
-          this._cdr.markForCheck();
-        }
-      };
-      document.addEventListener('click', onDocumentClick);
-    }
-  }
-}