ngx-register-base 1.3.1 → 1.3.2

package/src/lib/components/menu-constructor/store/sproc-abstract-menu-constructor.store.ts

@@ -1,32 +0,0 @@
-import { BehaviorSubject, Observable } from 'rxjs';
-import { IClsMenuItemInput } from './sproc-menu-constructor.consts';
-import { IClsMenuItem } from '../../page-menu';
-import { Apollo } from 'apollo-angular';
-import { DestroyRef, Injectable } from '@angular/core';
-import { ScalarUUID } from 'hasura';
-
-export abstract class SprocAbstractMenuConstructorStore {
-  protected abstract _menuItems$: BehaviorSubject<IClsMenuItem[]>;
-  protected abstract _loading$: BehaviorSubject<boolean>;
-  protected abstract _apollo: Apollo;
-  protected abstract _dr: DestroyRef;
-
-  public abstract menuItems$: Observable<IClsMenuItem[]>;
-  public abstract loading$: Observable<boolean>;
-  public abstract originalMenu: IClsMenuItem[];
-
-  public abstract getMenu(): IClsMenuItem[];
-
-  public abstract updateMenu(
-    objectsToUpdate: {
-      _set: IClsMenuItemInput;
-      where: { [key: string]: any };
-    }[],
-    objectsToInsert?: IClsMenuItemInput[],
-    idsToDelete?: ScalarUUID[]
-  ): void;
-
-  protected abstract setLoading(state: boolean): void;
-
-  protected abstract _fetchMenu(): void;
-}

package/src/lib/components/menu-constructor/store/sproc-menu-constructor.consts.ts

@@ -1,46 +0,0 @@
-import { ScalarUUID } from 'hasura';
-import { IClsMenuItem } from '../../page-menu';
-
-export interface FlatNode {
-  id: ScalarUUID;
-  id_parent: ScalarUUID | null;
-  title: string;
-  code: string;
-  route: string;
-  icon: string;
-  order_num: number;
-  allowed_roles: string | null;
-  depth: number;
-  collapsed?: boolean;
-}
-
-export const ROOT_TITLE = 'root';
-
-export const NEW_ITEM_PREFIX = 'NEW_';
-
-export const MIGRATION_HINT =
-  'Генерирует SQL код для миграции таблицы cls_menu_item. Генерация кода происходит на основе последней версии сохраненного меню.';
-
-export interface IClsMenuItemResponse {
-  usr_cls_menu_item: IClsMenuItem[];
-}
-
-export type AlertAppearance = 'info' | 'negative' | 'warning' | 'positive' | 'neutral';
-
-export interface IClsMenuItemInput {
-  title: string | null;
-  route: string | null;
-  code: string | null;
-  icon: string | null;
-  order_num: number;
-  allowed_roles: string[] | null;
-  id_parent: ScalarUUID | null;
-}
-
-export interface IMenuConstructorError {
-  label: string;
-  content: any;
-  appearance: AlertAppearance;
-}
-
-export const EMPTY_UUID = '00000000-0000-0000-0000-000000000000';

package/src/lib/components/page-menu/README.md

@@ -1,60 +0,0 @@
-# Sibdigital Page Menu
-
-- Боковое навигационное меню с двумя состояниями: **открытое** ↔ **свёрнутое**
-- Angular 18
-
-### Использование компонента
-
-1. В **angular.json** Добавить ассеты меню (выше определения директории assets проекта). Путь - app -> architect -> build -> options -> assets:
-
-    ```
-    {
-      "glob": "**/*",
-      "input": "node_modules/ngx-register-base/assets/sibdigital-page-menu",
-      "output": "assets/sibdigital-page-menu"
-    },
-    ```
-
-2. Для использования компонента необходимо реализовать абстрактный класс сервиса [**AbstractMenuStateService**](/TODO)
-1. Создать инстанс сервиса с использованием токена **PAGE_MENU_STATE** и сервисом, который был создан на первом пункте:
-2.
-   ```
-   {
-     provide: PAGE_MENU_STATE,
-     useExisting: MenuStateService,
-   },
-   ```
-
-1. Добавить компонент
-    ```angular2html
-    
-    <sibdigital-page-menu
-      [findActiveSection]="findActiveSession" -> Реализация метода нахождения активной сессии
-      [menuItems]="menu" -> Массив объектов типа IClsMenuItem
-      >
-      Для отображения данных внизу меню используется провайдер ng-content
-    </sibdigital-page-menu>
-    ```
-
-### Переменные стилей для переопределения:
-
-- `var(--main-black)` - цвет текста (по умолчанию черный);
-- `var(--main-white)` - цвет текста (по умолчанию белый);
-- `var(--page-menu-main)` - основной цвет меню
-- `var(--page-menu-main-hovered)` - цвет при наведении
-- `var(--page-menu-active)` - используется для подсветки активного пункта меню
-- `var(--page-menu-transition-time)` - время открытия меню
-- `var(--page-menu-opened-width)` - ширина открытого меню
-- `var(--page-menu-closed-width)` - ширина закрытого меню
-- `page-menu-text-14px` - шрифт меню
-
-### SVG файлы для переопределения:
-
-#### Все svg файлы хранятся по пути `/assets/sibdigital-page-menu/`
-
-1. Логотип (открытое состояние меню): `/assets/sibdigital-page-menu/logo/logo.svg`
-1. Логотип (закрытое состояние меню): `/assets/sibdigital-page-menu/logo/logo_closed.svg`
-1. Шеврон вправо: `/assets/sibdigital-page-menu/chevrons/chevron-right.svg`
-1. Шеврон вправо: `/assets/sibdigital-page-menu/chevrons/chevron-up.svg`
-1. Шеврон меню (клювик): `/assets/sibdigital-page-menu/chevrons/menu-chevron.svg`
-1. Все иконки которые должно отображать меню на первом уровне: `/assets/sibdigital-page-menu/page-menu`

package/src/lib/components/page-menu/schema/sproc-page-menu.consts.ts

@@ -1,8 +0,0 @@
-export const SIDE_MENU_OPENED_WIDTH = 350;
-export const SIDE_MENU_CLOSED_WIDTH = 48;
-
-export enum EPageMenuIconsSrc {
-  CHEVRON_RIGHT = 'assets/ngx-register-base/icons/chevron-right.svg',
-  CHEVRON_UP = 'assets/ngx-register-base/icons/chevron-up.svg',
-  MENU_CHEVRON = 'assets/ngx-register-base/icons/chevron-menu.svg',
-}

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

@@ -1,35 +0,0 @@
-import { TemplateRef } from '@angular/core';
-
-export interface IScreen {
-  title: string;
-  icon?: string;
-}
-
-export interface NavigationMenuItem {
-  text: string;
-  extraTemplate?: TemplateRef<unknown> | null;
-  icon?: string | null;
-  isGroup?: boolean;
-  children?: NavigationMenuItem[];
-}
-
-export interface CustomItem extends NavigationMenuItem {
-  id: string;
-  children?: CustomItem[];
-}
-
-export interface INavigationBase extends IScreen {
-  isExpanded?: boolean;
-  children?: INavigationBase[];
-  route?: string;
-  code?: string;
-  id?: string;
-  accessedRoles?: string[]; // если не задан, то доступен для всех
-  parent?: INavigationBase;
-}
-
-export interface INavigation extends Omit<INavigationBase, 'isExpanded'> {
-  code: string;
-  children?: INavigation[];
-  parent?: INavigation;
-}

package/src/lib/components/page-menu/schema/sproc-page-menu.tokens.ts

@@ -1,5 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { AbstractMenuStateService } from './sproc-page-menu.types';
-
-export const PAGE_MENU_STATE = new InjectionToken<AbstractMenuStateService>('PAGE_MENU_STATE');
-// export const PAGE_MENU_STORE = new InjectionToken<AbstractMenuStateService>('PAGE_MENU_STATE');

package/src/lib/components/page-menu/schema/sproc-page-menu.types.ts

@@ -1,42 +0,0 @@
-import { Observable } from 'rxjs';
-import { ScalarUUID } from 'hasura';
-
-export interface IClsMenuItem {
-  code: string;
-  id: ScalarUUID;
-  id_parent: string;
-  route: string | null;
-  title: string | null;
-  icon: string | undefined;
-  allowed_roles: string[] | null;
-  is_deleted: boolean;
-  order_num: number | null;
-  children?: IClsMenuItem[];
-}
-
-export abstract class AbstractMenuStateService {
-  /**
-   * Observable, отражающий текущее состояние меню (открыто / закрыто)
-   */
-  public abstract readonly isOpen$: Observable<boolean>;
-
-  /**
-   * Observable, сигнализирующий, доступно ли переключение меню
-   */
-  public abstract readonly toggleDisabled$: Observable<boolean>;
-
-  /**
-   * Текущее синхронное состояние меню
-   */
-  public abstract get isOpen(): boolean;
-
-  /**
-   * Принудительно установить состояние меню
-   */
-  public abstract setOpen(value: boolean): void;
-
-  /**
-   * Переключить состояние меню
-   */
-  public abstract toggle(): void;
-}

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

@@ -1,166 +0,0 @@
-<section [class]="menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'">
-  <div class="side-menu__header">
-    <img
-      [src]="menuState() ? openLogoSrc() : closedLogoSrc()"
-      alt="Logo Icon"
-      class="side-menu__header__logo"
-    />
-    <img
-      (click)="toggleNavigation()"
-      [class.disabled]="toggleDisabled$ | async"
-      [height]="16"
-      [ngClass]="menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'"
-      [ngSrc]="ICONS_SRC.MENU_CHEVRON" [width]="16" alt="Menu Chevron"/>
-  </div>
-
-  @if (menuState()) {
-    <div class="expanded-menu-content">
-      @for (navigation_item of navigationHierarchy(); track $index) {
-        <ng-container
-          *ngTemplateOutlet="
-            menuItemOpened;
-            context: { navigation_item: navigation_item, level: 0 }
-          "
-        ></ng-container>
-      }
-    </div>
-
-    <ng-content></ng-content>
-  } @else {
-    @for (navigation_item of navigationHierarchy(); track $index) {
-      <ng-container
-        *ngTemplateOutlet="closedMenu; context: { navigation_item: navigation_item }"
-      ></ng-container>
-    }
-  }
-</section>
-
-<ng-template #menuItemOpened let-level="level" let-navigation_item="navigation_item">
-  @let isExpanded = expandedIds().has(navigation_item.code);
-  @let childrenCount = navigation_item.children.length;
-  @let code = navigation_item.code;
-  @let route = navigation_item.code;
-  @let icon = navigation_item.icon;
-  @let isHighlighted = selectedSection() === code;
-
-  <a
-    (click)="childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)"
-    [@fadeInOut]
-    [class.menu-item_selected]="isHighlighted"
-    [class.padding-level-0]="level === 0"
-    [routerLink]="childrenCount > 0 || isExternalLink(route) ? undefined : route"
-    [style.padding-left.px]="level === 0 ? 0 : 44 + level * 20"
-    class="menu-item"
-  >
-    @if (icon) {
-      <span class="menu-item__icon">
-        <img [alt]="icon" [width]="16" [height]="16" [ngSrc]="menuIconsSrc() + icon + '.svg'">
-      </span>
-    }
-    <span class="menu-item__title"> {{ navigation_item.title }} </span>
-    @if (childrenCount > 0) {
-      <img
-        class="menu-item__chevron"
-        [class.menu-item__chevron_rotated]="!isExpanded"
-        [alt]="icon" [width]="16" [height]="16"
-        [ngSrc]="ICONS_SRC.CHEVRON_UP">
-    }
-  </a>
-  @if (isExpanded && childrenCount > 0) {
-    @for (children of navigation_item.children ?? []; track $index) {
-      <ng-container
-        *ngTemplateOutlet="menuItemOpened; context: { navigation_item: children, level: level + 1 }"
-      ></ng-container>
-    }
-  }
-</ng-template>
-
-<ng-template #closedMenu let-navigation_item="navigation_item">
-  @let isExpanded = expandedIds().has(navigation_item.code);
-  @let childrenCount = navigation_item.children.length;
-  @let code = navigation_item.code;
-  @let route = navigation_item.code;
-  @let icon = navigation_item.icon;
-  @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);
-
-  <div
-    (mouseleave)="collapseMenu()"
-    [id]="navigation_item.id"
-    class="collapsed-menu-content"
-  >
-    @if (icon) {
-      <a
-        class="menu-item__icon_closed"
-        [class.menu-item_selected]="isHighlighted"
-        (click)="childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)"
-        [routerLink]="childrenCount > 0 || isExternalLink(route) ? undefined : route"
-        (mouseenter)="toggleItem(navigation_item)">
-        <img
-          [height]="16"
-          [width]="16"
-          [ngSrc]="menuIconsSrc() + icon + '.svg'" alt="Menu Chevron"/>
-      </a>
-    }
-    <ng-container
-      *ngTemplateOutlet="
-        menuClosedItem;
-        context: { item: navigation_item, level: 1, topPadding: 1 }
-      "
-    >
-    </ng-container>
-    @if (isExpanded && childrenCount > 0) {
-      <div class="static-item">
-        <span class="static-item__element">
-        {{ navigation_item.title }}
-          </span>
-      </div>
-    }
-  </div>
-</ng-template>
-
-<ng-template #menuClosedItem let-item="item" let-level="level" let-topPadding="topPadding">
-  @let isExpanded = expandedIds().has(item.code);
-  <div [id]="item.id">
-    @if (isExpanded && item.children.length > 0) {
-      <div
-        class="side-menu__subitems"
-        [class.padding-level-1]="level === 1"
-        [style.top.px]="topPadding * 40"
-        id="side-menu__subitems"
-      >
-        @for (navigation_item of item.children; track navigation_item; let index = $index) {
-          @let childrenCount = navigation_item.children.length;
-          @let code = navigation_item.code;
-          @let route = navigation_item.code;
-          @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);
-          <a
-            class="side-menu__subitem"
-            [class.menu-item_selected]="isHighlighted"
-            (mouseenter)="childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)"
-            (click)="childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)"
-            [routerLink]="childrenCount > 0 || isExternalLink(route) ? undefined : route"
-          >
-          <span
-            [class.padding-level-1]="level === 1">{{
-              navigation_item.title
-            }}</span>
-
-            @if (childrenCount > 0) {
-              <img
-                class="chevron-right"
-                [height]="16"
-                [width]="16"
-                [ngSrc]="ICONS_SRC.CHEVRON_RIGHT" alt="Menu Chevron"/>
-            }
-          </a>
-          <ng-container
-            *ngTemplateOutlet="
-            menuClosedItem;
-            context: { item: navigation_item, level: level + 1, topPadding: index }
-          "
-          ></ng-container>
-        }
-      </div>
-    }
-  </div>
-</ng-template>

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

@@ -1,228 +0,0 @@
-:host {
-  @closedMenuWidth: 48px;
-  @closedMenuLevelWidth: 294px;
-  @closedMenuLabelPaddingLevel1: 64px;
-  @closedMenuLabelPadding: 16px;
-
-  background: var(--page-menu-main);
-  height: 100vh;
-  max-height: 100vh;
-  z-index: 1000;
-  display: flex;
-
-  tui-icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    background: var(--page-menu-main);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    width: 6px;
-    background: #c3c7cf;
-    border-radius: 2px;
-  }
-
-  .side-menu {
-    transition: all var(--page-menu-transition-time);
-    display: flex;
-    color: var(--main-white);
-    flex-direction: column;
-    flex-shrink: 0;
-    font-size: 14px;
-
-    &__header {
-      height: 64px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      &__chevron {
-        cursor: pointer;
-        transition: rotate 0.15s linear;
-
-        &_opened {
-          margin: 0 8px 0 0;
-          rotate: 0deg;
-        }
-
-        &_closed {
-          margin: 0 0 0 -4px;
-          rotate: 180deg;
-        }
-      }
-
-      .disabled {
-        pointer-events: none;
-      }
-
-      &__logo {
-        margin-left: 8px;
-      }
-    }
-
-    &_opened {
-      width: var(--page-menu-opened-width);
-    }
-
-    &_closed {
-      width: var(--page-menu-closed-width);
-    }
-
-    &__subitems,
-    .static-item {
-      position: absolute;
-      display: flex;
-      z-index: 3;
-      right: 0;
-      top: 0;
-      flex-direction: column;
-    }
-
-    &__subitems {
-      width: @closedMenuLevelWidth;
-      box-shadow: 0 2px 6px 0 rgba(40, 40, 40, 25%);
-      left: @closedMenuLevelWidth;
-
-      &.padding-level-1 {
-        left: @closedMenuWidth;
-      }
-
-      .chevron-right {
-        margin-right: 16px;
-      }
-
-      a {
-        span {
-          height: 40px;
-          display: flex;
-          align-items: center;
-          padding-left: 40px;
-
-          .padding-level-1 {
-            padding-left: @closedMenuLabelPaddingLevel1;
-          }
-        }
-      }
-    }
-
-    .static-item {
-      color: var(--main-black);
-      left: 48px;
-      top: 0;
-    }
-
-    &__subitem,
-    .static-item__element {
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      color: var(--main-white);
-      height: 40px;
-      width: 294px;
-      background: var(--page-menu-main);
-      justify-content: space-between;
-    }
-
-    &__subitem:hover {
-      background: var(--page-menu-main-hovered);
-      cursor: pointer;
-    }
-
-    .static-item__element {
-      justify-content: unset;
-      padding-left: 16px;
-    }
-
-    .expanded-menu-content {
-      height: calc(100vh - 103px);
-      -ms-overflow-style: none; /* for Internet Explorer, Edge */
-      scrollbar-width: none; /* for Firefox */
-      overflow-y: scroll;
-    }
-
-    .expanded-menu-content::-webkit-scrollbar {
-      display: none;
-    }
-
-    .collapsed-menu-content {
-      position: relative;
-    }
-
-    .menu-item {
-      display: flex;
-      flex-direction: row;
-      cursor: pointer;
-      justify-content: start;
-      align-items: center;
-      box-sizing: border-box;
-      transition: background 0.9ms;
-      height: 40px;
-
-      &_selected {
-        background: var(--page-menu-active) !important;
-        box-shadow: inset 3px 0 var(--main-white);
-      }
-
-      &_selected:hover {
-        background: var(--page-menu-active) !important;
-      }
-
-      &__chevron {
-        margin-left: auto;
-        margin-right: 8px;
-        transition: rotate 0.15s linear;
-
-        &_rotated {
-          rotate: 180deg;
-        }
-      }
-
-      &__title {
-        .page-menu-text-14px {
-          font-family: Inter, serif;
-          font-size: 14px;
-          font-weight: 300;
-        }
-
-        padding: 10px 0 10px 8px;
-        overflow: hidden;
-        color: var(--main-white);
-        font-variant-numeric: lining-nums tabular-nums;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        .page-menu-text-14px;
-      }
-
-      &__icon {
-        padding: 0 8px 0 16px;
-
-        &_closed {
-          display: flex;
-          height: 40px;
-          justify-content: center;
-          align-items: center;
-        }
-
-        &_closed:hover {
-          background: var(--page-menu-main-hovered);
-          cursor: pointer;
-        }
-      }
-    }
-
-    .menu-item:hover {
-      background: var(--page-menu-main-hovered);
-    }
-  }
-
-  a {
-    text-decoration: none;
-    color: unset;
-  }
-}