ngx-register-base 1.3.1 → 1.3.3

package/src/lib/components/column-settings/components/column-settings-template/column-settings-template.component.less

@@ -1,79 +0,0 @@
-@import 'fonts';
-
-.column-item {
-  display: flex;
-  align-items: center;
-  padding: 0 12px 0 8px;
-  gap: 8px;
-  height: 32px;
-
-  &__name {
-    flex-grow: 1;
-    color: var(--text-main);
-
-    .table-text-12px;
-  }
-
-  .pointer {
-    cursor: pointer;
-  }
-
-  .expanded {
-    .pointer;
-
-    transition: transform 0.2s linear;
-
-    &[expanded='true'] {
-      transform: rotate(90deg);
-      transform-origin: center center;
-    }
-  }
-
-  .eye-icon {
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  &.hidden {
-    .eye-icon {
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    background: var(--brand-hovered);
-    cursor: ns-resize;
-
-    .eye-icon {
-      opacity: 1;
-    }
-  }
-}
-
-.nested-columns {
-  margin-left: 24px;
-}
-
-.custom-placeholder {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-  border: 1px dashed #cccccc;
-  border-radius: 3px;
-  background-color: #fafafa;
-  box-sizing: border-box;
-  color: #888888;
-  font-style: italic;
-  user-select: none;
-  width: 100%;
-  margin: 0;
-}
-
-.cdk-drag-preview {
-  .column-item;
-
-  box-shadow: -1px 0 12px rgba(71, 83, 38, 23%);
-  background: var(--main-white);
-}

package/src/lib/components/column-settings/components/column-settings-template/column-settings-template.component.ts

@@ -1,114 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
-import { EColumnStatus, IColumnSettings } from '../../types/column-settings.types';
-import {
-  CdkDrag,
-  CdkDragDrop,
-  CdkDragPlaceholder,
-  CdkDropList,
-  moveItemInArray,
-  transferArrayItem,
-} from '@angular/cdk/drag-drop';
-import { NgOptimizedImage } from '@angular/common';
-import { TuiHintDirective } from '@taiga-ui/core';
-import {
-  ICON_CHEVRONS_RIGHT,
-  ICON_EDITOR_DOTS,
-  ICON_EYE,
-  ICON_EYE_CLOSED,
-  ICON_LOCK,
-} from '../../consts/column-settings.consts';
-import { TuiExpand } from '@taiga-ui/experimental';
-
-@Component({
-  selector: 'sproc-column-settings-template',
-  standalone: true,
-  imports: [
-    NgOptimizedImage,
-    CdkDrag,
-    CdkDragPlaceholder,
-    CdkDropList,
-    TuiExpand,
-    TuiHintDirective,
-  ],
-  templateUrl: './column-settings-template.component.html',
-  styleUrl: './column-settings-template.component.less',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ColumnSettingsTemplateComponent {
-  public column = input.required<IColumnSettings>();
-  public parent = input<IColumnSettings>();
-  public expand = input(true);
-
-  protected readonly iconEditorDots = ICON_EDITOR_DOTS;
-  protected readonly iconChevron = ICON_CHEVRONS_RIGHT;
-  protected readonly iconEye = ICON_EYE;
-  protected readonly iconEyeClosed = ICON_EYE_CLOSED;
-  protected readonly iconLock = ICON_LOCK;
-
-  protected readonly EColumnStatus = EColumnStatus;
-
-  protected readonly status = computed(() => this.column().status);
-  protected readonly canExpand = computed(() => {
-    const wantExpand = this.expand();
-    const children = this.column().children ?? [];
-    const haveChildren = children.length > 0;
-
-    return wantExpand && haveChildren;
-  });
-  protected readonly expanded = signal(false);
-
-  protected collapseNested(): void {
-    this.expanded.set(false);
-  }
-
-  protected toggleNested(): void {
-    this.expanded.update((value) => !value);
-  }
-
-  protected isHiddenColumn(column: IColumnSettings): boolean {
-    return column.status === EColumnStatus.HIDDEN;
-  }
-
-  protected toggleVisibility(column: IColumnSettings): void {
-    const isHidden = column.status === EColumnStatus.HIDDEN;
-    column.status = isHidden ? EColumnStatus.DEFAULT : EColumnStatus.HIDDEN;
-
-    const { children } = column;
-
-    // Если есть дочерние узлы то устанавливать статус текущего узла
-    if (children) {
-      column.children = children.map((childColumn) => ({ ...childColumn, status: column.status }));
-    }
-
-    const parentColumn = this.parent();
-    const parentChildren = parentColumn?.children;
-
-    if (parentColumn && parentChildren && parentChildren.length > 0) {
-      const allChildrenHidden = parentChildren.every(
-        (childColumn) => childColumn.status === EColumnStatus.HIDDEN
-      );
-
-      parentColumn.status = allChildrenHidden ? EColumnStatus.HIDDEN : EColumnStatus.DEFAULT;
-    }
-  }
-
-  protected dropIntoChildren(event: CdkDragDrop<IColumnSettings[]>): void {
-    const currentChildren = this.column().children;
-
-    if (!currentChildren) {
-      console.warn('Попытка переместить в столбец без дочернего массива:', this.column());
-      return;
-    }
-
-    if (event.previousContainer === event.container) {
-      moveItemInArray(currentChildren, event.previousIndex, event.currentIndex);
-    } else {
-      transferArrayItem(
-        event.previousContainer.data,
-        currentChildren,
-        event.previousIndex,
-        event.currentIndex
-      );
-    }
-  }
-}

package/src/lib/components/column-settings/consts/column-settings.consts.ts

@@ -1,9 +0,0 @@
-// Icons
-export const ICON_SETTINGS = '/assets/ngx-register-base/icons/settings.svg';
-export const ICON_ERASER = '/assets/ngx-register-base/icons/eraser.svg';
-export const ICON_CANCEL_CLOSE = '/assets/ngx-register-base/icons/cancel-close.svg';
-export const ICON_EDITOR_DOTS = '/assets/ngx-register-base/icons/16-editor-dots.svg';
-export const ICON_CHEVRONS_RIGHT = '/assets/ngx-register-base/icons/chevrons/chevrons-right.svg';
-export const ICON_EYE = '/assets/ngx-register-base/icons/eye.svg';
-export const ICON_EYE_CLOSED = '/assets/ngx-register-base/icons/eye-closed.svg';
-export const ICON_LOCK = '/assets/ngx-register-base/icons/lock.svg';

package/src/lib/components/column-settings/types/column-settings.types.ts

@@ -1,26 +0,0 @@
-export interface ITableColumnSettings {
-  columns: IColumnSettings[];
-  stickyLeft: IColumnSettings[];
-  stickyRight: IColumnSettings[];
-}
-
-export interface IColumnSettings {
-  id: string;
-  name: string;
-  status: EColumnStatus | IColumnStatus;
-  children?: IColumnSettings[];
-}
-
-/** @deprecated используйте EColumnStatus */
-export type IColumnStatus = 'sticky' | 'hidden' | 'default';
-
-export enum EColumnStatus {
-  STICKY = 'sticky',
-  HIDDEN = 'hidden',
-  DEFAULT = 'default',
-}
-
-export interface IColumnSettingsChanges {
-  settings: ITableColumnSettings | null;
-  id?: string;
-}

package/src/lib/components/divider/divider.component.html

@@ -1,4 +0,0 @@
-<div
-  [class.horizontal-solid]="layout === 'horizontal'"
-  [class.vertical-solid]="layout === 'vertical'"
-></div>

package/src/lib/components/divider/divider.component.less

@@ -1,10 +0,0 @@
-:host {
-  .horizontal-solid {
-    border-top: 1px solid #d5d7dd;
-  }
-
-  .vertical-solid {
-    border-left: 1px solid #d5d7dd;
-    height: 100%;
-  }
-}

package/src/lib/components/divider/divider.component.ts

@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'sproc-divider',
-  templateUrl: './divider.component.html',
-  styleUrls: ['./divider.component.less'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DividerComponent {
-  @Input() layout: 'horizontal' | 'vertical' = 'horizontal';
-}

package/src/lib/components/filter-button/filter-button.component.html

@@ -1,20 +0,0 @@
-<button
-  tuiButton
-  size="m"
-  appearance="outline-grayscale"
-  tuiHint
-  tuiHintDirection="bottom"
-  [class.--indicator]="filterApplied()"
-  [disabled]="disabled()"
-  (click)="filterToggle.emit()"
->
-  <img ngSrc="assets/ngx-register-base/icons/filter.svg" alt="" height="16" width="16" />
-
-  <tui-hint
-    *tuiHint
-    class="filter-button__tooltip"
-    [class.filter-button__tooltip--showed]="filterApplied()"
-  >
-    <span>К реестру применены фильтры</span>
-  </tui-hint>
-</button>

package/src/lib/components/filter-button/filter-button.component.less

@@ -1,41 +0,0 @@
-@import 'buttons';
-@import 'indicator';
-
-:host {
-  button {
-    .top-icon-button();
-
-    position: relative;
-
-    &:disabled {
-      .top-icon-button--disabled();
-    }
-
-    &.--indicator {
-      &::after {
-        .indicator(8px, var(--brand-danger));
-
-        position: absolute;
-        top: 10px;
-        right: 6px;
-      }
-    }
-  }
-}
-
-.filter-button__tooltip {
-  background-color: var(--brand-danger-light) !important;
-  padding: 16px;
-  border: 1px solid var(--brand-danger);
-  border-left-width: 4px;
-  display: none;
-
-  span {
-    font: var(--input-text-12px);
-    color: var(--main-black);
-  }
-
-  &--showed {
-    display: unset;
-  }
-}

package/src/lib/components/filter-button/filter-button.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
-import { TuiButton, TuiHint } from '@taiga-ui/core';
-import { NgOptimizedImage } from '@angular/common';
-
-@Component({
-  selector: 'sproc-filter-button',
-  templateUrl: './filter-button.component.html',
-  styleUrl: './filter-button.component.less',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, TuiHint, NgOptimizedImage],
-})
-export class FilterButtonComponent {
-  public filterApplied = input.required<boolean>();
-  public disabled = input(false);
-
-  public filterToggle = output<void>();
-}

package/src/lib/components/filters/components/filter-list/filter-edit/filter-edit.component.html

@@ -1,22 +0,0 @@
-<div class="input-wrapper">
-  <prizm-input-layout [clearButton]="clearButtonTemplate" size="s">
-    <input [formControl]="valueControl" placeholder="Введите название фильтра" prizmInput />
-  </prizm-input-layout>
-</div>
-
-<ng-template
-  #clearButtonTemplate
-  let-showStatusButton="showStatusButton"
-  let-disabled="disabled"
-  let-clear="clear"
->
-  <button
-    class="{{ showStatusButton ? '' : 'alone' }}"
-    [interactive]="true"
-    [disabled]="disabled"
-    [prizmHint]="'Нажмите для очистки'"
-    [prizmHintTheme]="'light'"
-    [prizmInputIconButton]="'cancel-delete-content'"
-    (click)="clear($event)"
-  ></button>
-</ng-template>

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

@@ -1,23 +0,0 @@
-@import 'fonts';
-
-:host {
-  .input-wrapper {
-    padding: 16px;
-  }
-
-  ::ng-deep {
-    .prizm-input-form {
-      background: inherit;
-      border: 1px solid #d7d8df;
-    }
-
-    .prizm-input-form-inner {
-      min-height: 32px;
-      height: 32px;
-    }
-
-    input {
-      .input-text-12px;
-    }
-  }
-}

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

@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { FiltersStateService } from '../../../../../services';
-
-@Component({
-  selector: 'sproc-filter-edit',
-  templateUrl: './filter-edit.component.html',
-  styleUrls: ['./filter-edit.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FilterEditComponent implements OnInit, OnDestroy {
-  public readonly valueControl: FormControl<string | null> = new FormControl<string | null>('');
-  private subscription: Subscription | null = null;
-
-  constructor(private readonly _filterStateService: FiltersStateService<any>) {}
-
-  public ngOnInit(): void {
-    const name = this._filterStateService.getSelectedSavedFilter()?.name ?? '';
-
-    this.valueControl.setValue(name);
-    this._filterStateService.setName(name);
-    this.subscription = this.valueControl.valueChanges.subscribe((value) => {
-      this._filterStateService.setName(value ?? '');
-    });
-  }
-
-  public ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
-  }
-}

package/src/lib/components/filters/components/filter-list/filter-list-footer/filter-list-footer.component.html

@@ -1,49 +0,0 @@
-<div class="sproc-filter-list-footer-container">
-  <ng-container [ngSwitch]="filterState$ | async">
-    <ng-container *ngSwitchCase="FilterState.FILTER_LIST">
-      <button
-        class="filter-list__button"
-        prizmButton
-        size="s"
-        [disabled]="applyButtonDisabled"
-        (click)="onApplyFilter()"
-      >
-        {{ footerApplyButtonLabel }}
-      </button>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="FilterState.SAVED_LIST">
-      <button
-        class="filter-list__button"
-        prizmButton
-        size="s"
-        [disabled]="acceptButtonDisabled"
-        (click)="onApplySavedFilter()"
-      >
-        Применить
-      </button>
-    </ng-container>
-
-    <ng-container
-      *ngSwitchCase="FilterState.ON_EDIT_FILTER"
-      [ngTemplateOutlet]="onEditFilter"
-    ></ng-container>
-
-    <ng-container
-      *ngSwitchCase="FilterState.ON_SAVE_FILTER"
-      [ngTemplateOutlet]="onEditFilter"
-    ></ng-container>
-
-    <ng-template #onEditFilter>
-      <button
-        class="filter-list__button"
-        prizmButton
-        size="s"
-        [disabled]="acceptButtonDisabled"
-        (click)="onSaveFilter()"
-      >
-        Сохранить
-      </button>
-    </ng-template>
-  </ng-container>
-</div>

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

@@ -1,37 +0,0 @@
-:host {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-
-  .sproc-filter-list-footer-container {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    height: 48px;
-    width: 100%;
-    border-top: 1px;
-    gap: 8px;
-    padding: 8px 16px 8px 16px;
-    background: var(--main-white);
-
-    .filter-list__button {
-      width: 100%;
-      height: 32px;
-    }
-
-    button {
-      ::ng-deep .z-wrapper {
-        display: flex !important;
-
-        ::ng-deep .z-content .prizm-font-btn-links-14 {
-          font-weight: 400 !important;
-        }
-
-        ::ng-deep .z-content {
-          margin: auto !important;
-          font-weight: 400;
-        }
-      }
-    }
-  }
-}

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

@@ -1,66 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  EventEmitter,
-  inject,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { Router } from '@angular/router';
-import { map } from 'rxjs';
-import { FilterListService } from '../filter-list.service';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { EInputsState, GqlFields } from '../../../../../types';
-import { FiltersStateService } from '../../../../../services';
-import { getLastSegmentOfPathName } from '../../../../../utils/get-url-segment';
-
-@Component({
-  selector: 'sproc-filter-list-footer',
-  templateUrl: './filter-list-footer.component.html',
-  styleUrls: ['./filter-list-footer.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [FilterListService],
-})
-export class FilterListFooterComponent implements OnInit {
-  @Input() acceptButtonDisabled = false;
-  @Input() applyButtonDisabled = false;
-  @Input() footerApplyButtonLabel = 'Применить';
-  @Output() apply: EventEmitter<GqlFields> = new EventEmitter<GqlFields>();
-
-  private readonly _dr = inject(DestroyRef);
-
-  public readonly filterState$ = this._filterStateService.state$.pipe(
-    map((filterState) => filterState.state)
-  );
-
-  public readonly FilterState = EInputsState;
-
-  constructor(
-    private readonly _router: Router,
-    private readonly _filterStateService: FiltersStateService<any>,
-    private readonly _filterListService: FilterListService
-  ) {}
-
-  public ngOnInit(): void {
-    this._filterListService.modulePath = getLastSegmentOfPathName(this._router.url);
-
-    this._filterListService.apply$.pipe(takeUntilDestroyed(this._dr)).subscribe((gql) => {
-      this.apply.emit(gql);
-      this._filterListService.savePinnedFilters();
-    });
-  }
-
-  public onApplyFilter(): void {
-    this._filterListService.applyFilter();
-  }
-
-  public onApplySavedFilter(): void {
-    this._filterListService.applySavedFilter();
-  }
-
-  public onSaveFilter(): void {
-    this._filterListService.saveFilter();
-  }
-}