ngx-register-base 1.3.1 → 1.3.3

package/src/lib/components/page-menu/sproc-page-menu.component.ts

@@ -1,337 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  effect,
-  HostBinding,
-  inject,
-  input,
-  OnInit,
-  signal,
-} from '@angular/core';
-import {
-  EPageMenuIconsSrc,
-  SIDE_MENU_CLOSED_WIDTH,
-  SIDE_MENU_OPENED_WIDTH,
-} from './schema/sproc-page-menu.consts';
-import { Router, RouterLink } from '@angular/router';
-import { AbstractMenuStateService, IClsMenuItem } from './schema/sproc-page-menu.types';
-import { PAGE_MENU_STATE } from './schema/sproc-page-menu.tokens';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { INavigation } from './schema/sproc-page-menu.schema';
-import { AsyncPipe, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
-import { animate, style, transition, trigger } from '@angular/animations';
-
-@Component({
-  selector: 'sproc-page-menu',
-  templateUrl: './sproc-page-menu.component.html',
-  styleUrls: ['./sproc-page-menu.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [RouterLink, NgTemplateOutlet, NgClass, AsyncPipe, NgOptimizedImage],
-  animations: [
-    trigger('fadeInOut', [
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateY(-10px)',
-          transformOrigin: 'top',
-        }),
-        animate(
-          '0.15s ease-in',
-          style({
-            opacity: 1,
-            transform: 'translateY(0)',
-          })
-        ),
-      ]),
-    ]),
-  ],
-})
-export class SprocPageMenuComponent implements OnInit {
-  public menuItems = input.required<IClsMenuItem[]>();
-  public menuIconsSrc = input<string>('');
-  public openLogoSrc = input<string>('');
-  public closedLogoSrc = input<string>('');
-  public findActiveSection =
-    input.required<(reset: () => void, findRoute: (routeToFind: string) => void) => void>();
-
-  // TODO Добавить кастомную ширину меню
-  @HostBinding('style.--page-menu-opened-width')
-  public readonly menuOpenedWidth = `${SIDE_MENU_OPENED_WIDTH}px`;
-  @HostBinding('style.--page-menu-closed-width')
-  public readonly menuClosedWidth = `${SIDE_MENU_CLOSED_WIDTH}px`;
-
-  private readonly _router = inject(Router);
-  private readonly _state = inject<AbstractMenuStateService>(PAGE_MENU_STATE);
-  private readonly _dr = inject(DestroyRef);
-
-  protected readonly toggleDisabled$ = this._state.toggleDisabled$;
-  protected menuState = toSignal(this._state.isOpen$);
-  protected selectedSection = signal<string>('register');
-  protected expandedIds = signal<Set<string>>(new Set());
-
-  protected selectedItem = computed(() =>
-    this.selectedSection() ? this.codeToItem[this.selectedSection()] : null
-  );
-
-  // Хранит parent элементы выбранного пункта меню
-  protected parentItems = computed(() => {
-    const item = this.selectedItem();
-    if (!item) {
-      return [];
-    }
-
-    const parents: INavigation[] = [];
-    let current = item.parent;
-    while (current) {
-      parents.push(current);
-      current = current.parent;
-    }
-    return parents;
-  });
-  protected parentItemCodes = computed<Set<string>>(() => {
-    const parentItems = this.parentItems();
-
-    return new Set(parentItems.map((val) => val.code ?? ''));
-  });
-
-  public navigationHierarchy = signal<INavigation[]>([]);
-
-  protected codeToItem: Record<string, INavigation> = {};
-
-  protected isOpenServiceVersionInfo = false;
-
-  protected readonly ICONS_SRC = EPageMenuIconsSrc;
-
-  constructor() {
-    // Построить меню и найти активную секцию
-    effect(
-      () => {
-        const menuItems = this.menuItems();
-        this.buildMenu(menuItems);
-        this._findActiveSection();
-      },
-      { allowSignalWrites: true }
-    );
-  }
-
-  public addMenuScrollbar(id: string): void {
-    setTimeout(() => {
-      // TODO Меню второго уровня есть скролл,третьего нет
-      const collapsedMenu = document.querySelector<HTMLElement>(`[id="${id}"]`);
-      const sideMenu = collapsedMenu?.querySelector<HTMLElement>('#side-menu__subitems');
-      const sideMenuLevelTwo = sideMenu?.querySelector<HTMLElement>('#side-menu__subitems');
-
-      const subitem = sideMenuLevelTwo
-        ? sideMenuLevelTwo.querySelectorAll('.side-menu__subitem')
-        : sideMenu?.querySelectorAll('.side-menu__subitem');
-      if (subitem) {
-        const lastSubitem = subitem[subitem.length - 1];
-        const rect = lastSubitem?.getBoundingClientRect();
-
-        if (sideMenu && window.innerHeight - rect.bottom < 0) {
-          // 40 тк высота плашки меню
-          sideMenu.style.height = `${
-            subitem.length * 40 + (window.innerHeight - rect.bottom - 1)
-          }px`;
-          sideMenu.style.overflowY = 'scroll';
-          sideMenu.style.overflowX = 'hidden';
-        }
-        if (window.innerHeight - rect.bottom < 0 && sideMenuLevelTwo) {
-          // 40 тк высота плашки меню
-          sideMenuLevelTwo.style.height = `${
-            subitem.length * 40 + (window.innerHeight - rect.bottom - 1)
-          }px`;
-          sideMenuLevelTwo.style.overflowY = 'scroll';
-          sideMenuLevelTwo.style.overflowX = 'hidden';
-        }
-      }
-    }, 0);
-  }
-
-  public ngOnInit(): void {
-    this._state.isOpen$.subscribe((menuState) => {
-      if (menuState) {
-        this.findRoute(this.selectedSection());
-      } else {
-        this.collapseMenu();
-      }
-    });
-  }
-
-  protected toggleNavigation(): void {
-    this._state.toggle();
-  }
-
-  protected toggleItem(item: INavigation): void {
-    this.addMenuScrollbar(item.id || '');
-
-    this.expandedIds.update((currentExpand) => {
-      const code = item.code;
-      const copy = new Set<string>(currentExpand);
-
-      if (copy.has(code)) {
-        copy.delete(code);
-      } else {
-        copy.clear();
-        copy.add(code);
-
-        const parents = this.getParents(item);
-        for (const parent of parents) {
-          copy.add(parent.code);
-        }
-      }
-
-      return copy;
-    });
-  }
-
-  protected collapseMenu(exception?: INavigation): void {
-    let codes: string[] = [];
-    if (exception) {
-      const parents = this.getParents(exception);
-      codes = [exception.code, ...parents.map((parent) => parent.code)];
-    }
-
-    this.expandedIds.set(new Set<string>(codes));
-  }
-
-  protected get isMenuOpened(): boolean {
-    return this._state.isOpen;
-  }
-
-  protected get isMenuClosed(): boolean {
-    return !this._state.isOpen;
-  }
-
-  protected isExternalLink(route: string | undefined): boolean {
-    if (!route) {
-      return false;
-    }
-    return /^(https?:\/\/|www\.)/i.test(route);
-  }
-
-  protected handleNavigation(item: INavigation): void {
-    if (!item.route) {
-      return;
-    }
-
-    if (this.isExternalLink(item.route)) {
-      window.open(item.route, '_blank');
-    } else {
-      this._router.navigate([item.route]);
-      this.selectedSection.set(item.code ?? '');
-
-      if (this.isMenuClosed) {
-        this.collapseMenu();
-      }
-    }
-  }
-
-  protected serviceInfoOnActiveZone(active: boolean): void {
-    this.isOpenServiceVersionInfo = active && this.isOpenServiceVersionInfo;
-  }
-
-  protected serviceInfoOnObscured(obscured: boolean): void {
-    if (obscured) {
-      this.isOpenServiceVersionInfo = false;
-    }
-  }
-
-  private buildMenu(menu: IClsMenuItem[]): void {
-    const sortedMenuItems = [...menu].sort((a, b) => (a.order_num ?? 0) - (b.order_num ?? 0));
-
-    const menuHash: Record<string, INavigation> = {};
-    for (const item of sortedMenuItems) {
-      menuHash[item.id] = {
-        title: item.title ?? '',
-        route: item.route ?? '',
-        id: item.id,
-        children: [],
-        code: item.code,
-        icon: item.icon,
-        accessedRoles: undefined,
-        parent: undefined,
-      };
-    }
-
-    const rootMenuItems: INavigation[] = [];
-
-    for (const item of sortedMenuItems) {
-      if (item.id_parent && menuHash[item.id_parent]) {
-        const parent = menuHash[item.id_parent];
-        const child = menuHash[item.id];
-        child.parent = parent;
-        parent.children?.push(child);
-      } else {
-        rootMenuItems.push(menuHash[item.id]);
-      }
-    }
-
-    this.navigationHierarchy.set(rootMenuItems);
-
-    this.codeToItem = {};
-    for (const id of Object.keys(menuHash)) {
-      const item = menuHash[id];
-      if (item.code) {
-        this.codeToItem[item.code] = item;
-      }
-    }
-  }
-
-  private findRoute(routeToFind: string): void {
-    const routeItem = this.codeToItem[routeToFind];
-
-    if (!routeItem) {
-      return;
-    }
-
-    if (this.isMenuOpened) {
-      this.toggleItem(routeItem);
-    }
-
-    this.selectedSection.set(routeItem.code ?? '');
-  }
-
-  private _findActiveSection(): void {
-    this.findActiveSection()(this.resetSelection, this.findRoute);
-  }
-
-  private getParents(item: INavigation): INavigation[] {
-    const parents: INavigation[] = [];
-    let current = item.parent;
-
-    while (current) {
-      parents.push(current);
-      current = current.parent;
-    }
-
-    return parents;
-  }
-
-  private resetSelection(): void {
-    this.expandedIds.set(new Set<string>());
-    this.selectedSection.set('');
-  }
-
-  private collectChildren(item: INavigation): INavigation[] {
-    const result: INavigation[] = [];
-    const queue: INavigation[] = item.children?.slice() ?? [];
-
-    let index = 0;
-    while (index < queue.length) {
-      const node = queue[index];
-      result.push(node);
-
-      if (node.children) {
-        queue.push(...node.children);
-      }
-
-      index += 1;
-    }
-
-    return result;
-  }
-}

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

@@ -1,97 +0,0 @@
-<tui-loader class="loader" [showLoader]="isLoading()" [overlay]="true">
-  <div class="container">
-    <div class="content">
-      @if (!paginatorOptions().noRowsSelector && !paginatorOptions().noRowsSelectorLabel) {
-        <span class="rows rows__count">
-          <ng-container *polymorphOutlet="textOnPage() as title">
-            {{ title }}
-          </ng-container>
-        </span>
-      }
-      @if (!paginatorOptions().noRowsSelector) {
-        <div class="rows-selector">
-          <tui-combo-box
-            numberOnly
-            [ngModel]="currentRows"
-            [ngModelOptions]="{ standalone: true }"
-            [strict]="false"
-            [tuiTextfieldLabelOutside]="true"
-            [tuiTextfieldCleaner]="false"
-            tuiTextfieldSize="s"
-            [disabled]="disabled()"
-            [tuiHint]="rowsCountErrorMessage()"
-            [tuiHintManual]="isIncorrectRowsCount()"
-            (ngModelChange)="currentRowsInputChange.next($event)"
-          >
-            <tui-data-list-wrapper
-              *tuiDataList
-              [items]="rowsCountOptions().length ? rowsCountOptions() : [currentRows]"
-            />
-          </tui-combo-box>
-        </div>
-      }
-
-      <div class="selected-panel">
-        <div class="selected-container">
-          <span>Выбрано</span>
-          <span class="selected-counter">{{ selectedCounter() }}</span>
-        </div>
-        <sproc-divider layout="vertical"></sproc-divider>
-        @if (!paginatorOptions().noFilterInfo) {
-          <div class="selected-container">
-            <span>Отфильтровано</span>
-            <span class="selected-counter">{{ totalRecords() }}</span>
-            <span>из</span>
-            <span class="selected-counter">{{ totalNotFiltered() }}</span>
-          </div>
-        }
-      </div>
-    </div>
-
-    <div class="content">
-      @if (!paginatorOptions().noInfo) {
-        <span class="rows rows__show" [hidden]="disabled()">
-          Показано строк: {{ (currentPage - 1) * currentRows + 1 }}-{{
-            currentPage * currentRows > totalRecords() ? totalRecords() : currentPage * currentRows
-          }}
-          <ng-container> из {{ totalRecords() }} </ng-container>
-        </span>
-      }
-
-      <div class="paginator">
-        <button
-          tuiIconButton
-          class="paginator__control"
-          appearance="flat"
-          type="button"
-          size="xs"
-          tabIndex="-1"
-          [disabled]="disabled() || currentPage === 1"
-          (click)="toFirstPage()"
-        >
-          <img [src]="SvgSrc.CHEVRONS_DOUBLE_LEFT" />
-        </button>
-        <tui-pagination
-          [index]="currentPage - 1"
-          [length]="pagesCount()"
-          [activePadding]="pageLinkSize()"
-          (indexChange)="changePage($event + 1)"
-        />
-        @if (paginatorOptions().noToLastPageBtn ?? true) {
-          <button
-            tuiIconButton
-            class="paginator__control"
-            appearance="flat"
-            type="button"
-            size="xs"
-            tabIndex="-1"
-            [disabled]="disabled() || currentPage === pagesCount() || currentPage === 0"
-            (click)="toLastPage()"
-          >
-            <img [src]="SvgSrc.CHEVRONS_DOUBLE_RIGHT" />
-          </button>
-        }
-      </div>
-    </div>
-  </div>
-</tui-loader>

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

@@ -1,101 +0,0 @@
-@import 'fonts';
-
-:host {
-  height: 40px;
-  display: flex;
-
-  .container {
-    height: 100%;
-    width: 100%;
-    padding: 8px 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-    background: var(--main-white);
-    box-shadow: 0 -2px 4px 0 rgba(191, 198, 215, 50%);
-    z-index: 1;
-
-    .content {
-      display: flex;
-      align-items: center;
-    }
-
-    span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .rows {
-      .input-label;
-
-      color: var(--text-main);
-
-      &__count {
-        margin-right: 12px;
-      }
-
-      &__show {
-        margin-right: 32px;
-      }
-    }
-
-    .selected-panel {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-
-      sproc-divider {
-        height: 24px;
-      }
-
-      .selected-container {
-        width: 100%;
-        display: flex;
-        gap: 12px;
-
-        .input-label;
-
-        color: var(--text-main);
-
-        .selected-counter {
-          padding: 0 8px;
-          border-bottom: 1px solid var(--table-stroke);
-        }
-      }
-    }
-
-    .rows-selector {
-      margin-right: 12px;
-      width: 80px;
-      min-width: 80px;
-    }
-
-    .paginator {
-      display: flex;
-      gap: 8px;
-
-      &__control {
-        --tui-text-action: var(--gray-icon);
-
-        tui-icon {
-          font-size: var(--icon-font-size-m);
-        }
-      }
-    }
-
-    ::ng-deep [tuiAppearance][data-appearance='textfield'] {
-      box-shadow: none;
-      padding-right: 10px !important;
-
-      ::ng-deep tui-icon {
-        --t-icon: url('../../../../icons/chevrons-dropdown.svg') !important;
-      }
-    }
-  }
-}
-
-.loader {
-  width: 100%;
-}