ngx-register-base 1.2.2 → 1.3.0

package/fesm2022/ngx-register-base.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, signal, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, Optional, DestroyRef, NgZone, afterNextRender, Input, viewChild, TemplateRef, effect, untracked, output, ɵRuntimeError as _RuntimeError, ChangeDetectorRef, forwardRef, Self, Directive, EventEmitter, Output, ViewChild, HostBinding, contentChildren, runInInjectionContext, Injector, NgModule, Pipe, Inject, HostListener, ElementRef, Renderer2, model, viewChildren } from '@angular/core';
+import { input, computed, signal, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, Optional, DestroyRef, NgZone, afterNextRender, Input, viewChild, TemplateRef, effect, untracked, output, HostBinding, ɵRuntimeError as _RuntimeError, ChangeDetectorRef, forwardRef, Self, Directive, EventEmitter, Output, ViewChild, contentChildren, runInInjectionContext, Injector, NgModule, Pipe, Inject, HostListener, ElementRef, Renderer2, model, viewChildren } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, NavigationStart, RouterLink } from '@angular/router';
 import { BehaviorSubject, Subject, distinctUntilChanged, asyncScheduler, of, filter, map, takeUntil, ReplaySubject, take, skip, fromEvent, debounceTime, tap, switchMap, combineLatest, catchError, throwError, pairwise, delay, mergeMap, iif, expand, from, EMPTY, Observable, animationFrameScheduler } from 'rxjs';
@@ -11,7 +11,7 @@ import { moveItemInArray, transferArrayItem, CdkDrag, CdkDragPlaceholder, CdkDro
 import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { WaResizeObserver } from '@ng-web-apis/resize-observer';
 import * as i1$2 from '@angular/common';
-import { NgOptimizedImage, CommonModule, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault, DOCUMENT, AsyncPipe, NgClass, NgForOf, NgStyle, DecimalPipe } from '@angular/common';
+import { NgOptimizedImage, NgTemplateOutlet, NgClass, AsyncPipe, CommonModule, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, DOCUMENT, NgForOf, NgStyle, DecimalPipe } from '@angular/common';
 import { TuiExpand } from '@taiga-ui/experimental';
 import * as i3 from '@prizm-ui/components';
 import { PrizmDialogService, PrizmOverlayInsidePlacement, PrizmDateTimeRange, PrizmDayRange, PrizmTimeRange, PrizmTime, PrizmDay, PrizmTableModule, PrizmScrollbarModule, PrizmCheckboxComponent, PrizmStickyModule, PrizmButtonComponent, PrizmInputTextModule, PrizmPaginatorComponent, PrizmInputSelectModule, PrizmPanelComponent, PrizmToggleComponent, PrizmTabsModule, PrizmDropdownHostModule, PrizmLoaderComponent, PrizmSelectInputComponent, PrizmInputMultiSelectModule, PrizmInputLayoutDateModule, PrizmInputLayoutDateRangeModule, PrizmDialogComponent, PrizmInputLayoutDateComponent, PrizmColumnSettingsComponent, PrizmSwitcherComponent, PrizmTooltipModule, PrizmInputMultiSelectComponent, PrizmInputLayoutDateRangeComponent, PrizmSidebarComponent, PrizmToastModule, PrizmInputLayoutDateTimeModule, PrizmInputCommonModule, PrizmInputIconButtonComponent, PrizmInputLayoutMonthModule, PrizmHintDirective, PrizmTreeModule, PrizmInputNumberModule, PrizmInputLayoutDateTimeRangeModule, PrizmProgressModule, PrizmInputLayoutTimeModule, PrizmInputLayoutMonthRangeComponent, PrizmInputLayoutDateTimeRangeComponent, PrizmSplitterModule, PrizmCardComponent, PrizmDropdownControllerDirective, PrizmRadioButtonComponent, PrizmBreadcrumbDirective, PrizmBreadcrumbsComponent, PrizmStepperModule, PrizmIndicatorComponent, PrizmScrollbarComponent, PrizmDateTime, PrizmMonth, PrizmMonthRange, PolymorphModule } from '@prizm-ui/components';
@@ -23,6 +23,7 @@ import * as i2 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, Validators, NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { observeOn, startWith, shareReplay, map as map$1, filter as filter$1, switchMap as switchMap$1, tap as tap$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import _, { isEqual } from 'lodash';
+import { trigger, transition, style, animate } from '@angular/animations';
 import { Apollo } from 'apollo-angular';
 import gql from 'graphql-tag';
 import { ComponentStore } from '@ngrx/component-store';
@@ -38,7 +39,6 @@ import * as i3$3 from '@taiga-ui/core/components/data-list';
 import * as i4 from '@taiga-ui/kit/components/data-list-wrapper';
 import { MaskitoDirective } from '@maskito/angular';
 import { TuiInputSearch } from '@taiga-ui/layout';
-import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$5 from '@taiga-ui/addon-table';
 import { TuiTable } from '@taiga-ui/addon-table';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
@@ -1526,140 +1526,420 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'sproc-filter-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TuiButton, TuiHint, NgOptimizedImage], template: "<button\n  tuiButton\n  size=\"m\"\n  appearance=\"outline-grayscale\"\n  tuiHint\n  tuiHintDirection=\"bottom\"\n  [class.--indicator]=\"filterApplied()\"\n  [disabled]=\"disabled()\"\n  (click)=\"filterToggle.emit()\"\n>\n  <img ngSrc=\"assets/ngx-register-base/icons/filter.svg\" alt=\"\" height=\"16\" width=\"16\" />\n\n  <tui-hint\n    *tuiHint\n    class=\"filter-button__tooltip\"\n    [class.filter-button__tooltip--showed]=\"filterApplied()\"\n  >\n    <span>\u041A \u0440\u0435\u0435\u0441\u0442\u0440\u0443 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u044B \u0444\u0438\u043B\u044C\u0442\u0440\u044B</span>\n  </tui-hint>\n</button>\n", styles: [":host button{width:var(--top-bar-button-width);height:var(--top-bar-button-height);border-radius:2px;padding:10px;position:relative}:host button:disabled{filter:grayscale(100%)!important;cursor:not-allowed}:host button.--indicator:after{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background-color: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}.filter-button__tooltip span{font:var(--input-text-12px);color:var(--main-black)}.filter-button__tooltip--showed{display:unset}\n"] }]
         }] });
 
-const MENU_STATE_SERVICE = new InjectionToken('MENU_STATE_SERVICE');
+const SIDE_MENU_OPENED_WIDTH = 350;
+const SIDE_MENU_CLOSED_WIDTH = 48;
+var EPageMenuIconsSrc;
+(function (EPageMenuIconsSrc) {
+    EPageMenuIconsSrc["CHEVRON_RIGHT"] = "assets/ngx-register-base/icons/chevron-right.svg";
+    EPageMenuIconsSrc["CHEVRON_UP"] = "assets/ngx-register-base/icons/chevron-up.svg";
+    EPageMenuIconsSrc["MENU_CHEVRON"] = "assets/ngx-register-base/icons/chevron-menu.svg";
+})(EPageMenuIconsSrc || (EPageMenuIconsSrc = {}));
 
-var ERuntimeErrorCode;
-(function (ERuntimeErrorCode) {
-    // Structure validation errors
-    ERuntimeErrorCode[ERuntimeErrorCode["NO_CONTROLS"] = 1000] = "NO_CONTROLS";
-    ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL"] = 1001] = "MISSING_CONTROL";
-    ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL_VALUE"] = 1002] = "MISSING_CONTROL_VALUE";
-})(ERuntimeErrorCode || (ERuntimeErrorCode = {}));
+const PAGE_MENU_STATE = new InjectionToken('PAGE_MENU_STATE');
+// export const PAGE_MENU_STORE = new InjectionToken<AbstractMenuStateService>('PAGE_MENU_STATE');
 
-function assertAllValuesPresent(control, isGroup, value) {
-    control._forEachChild((_, key) => {
-        if (value[key] === undefined) {
-            throw new _RuntimeError(ERuntimeErrorCode.MISSING_CONTROL_VALUE, '');
-        }
-    });
-}
-function assertControlPresent(parent, isGroup, key) {
-    const controls = parent.controls;
-    const collection = isGroup ? Object.keys(controls) : controls;
-    if (collection.length === 0) {
-        throw new _RuntimeError(ERuntimeErrorCode.NO_CONTROLS, '');
-    }
-    if (!controls[key]) {
-        throw new _RuntimeError(ERuntimeErrorCode.MISSING_CONTROL, '');
+class SprocPageMenuComponent {
+    constructor() {
+        this.menuItems = input.required();
+        this.menuIconsSrc = input('');
+        this.openLogoSrc = input('');
+        this.closedLogoSrc = input('');
+        this.findActiveSection = input.required();
+        // TODO Добавить кастомную ширину меню
+        this.menuOpenedWidth = `${SIDE_MENU_OPENED_WIDTH}px`;
+        this.menuClosedWidth = `${SIDE_MENU_CLOSED_WIDTH}px`;
+        this._router = inject(Router);
+        this._state = inject(PAGE_MENU_STATE);
+        this._dr = inject(DestroyRef);
+        this.toggleDisabled$ = this._state.toggleDisabled$;
+        this.menuState = toSignal(this._state.isOpen$);
+        this.selectedSection = signal('register');
+        this.expandedIds = signal(new Set());
+        this.selectedItem = computed(() => this.selectedSection() ? this.codeToItem[this.selectedSection()] : null);
+        // Хранит parent элементы выбранного пункта меню
+        this.parentItems = computed(() => {
+            const item = this.selectedItem();
+            if (!item) {
+                return [];
+            }
+            const parents = [];
+            let current = item.parent;
+            while (current) {
+                parents.push(current);
+                current = current.parent;
+            }
+            return parents;
+        });
+        this.parentItemCodes = computed(() => {
+            const parentItems = this.parentItems();
+            return new Set(parentItems.map((val) => val.code ?? ''));
+        });
+        this.navigationHierarchy = signal([]);
+        this.codeToItem = {};
+        this.isOpenServiceVersionInfo = false;
+        this.ICONS_SRC = EPageMenuIconsSrc;
+        // Построить меню и найти активную секцию
+        effect(() => {
+            const menuItems = this.menuItems();
+            this.buildMenu(menuItems);
+            this._findActiveSection();
+        }, { allowSignalWrites: true });
     }
-}
-/** @deprecated заменить на FormGroup */
-class FormGroupWrapper extends FormGroup {
-    setValue(value, options) {
-        assertAllValuesPresent(this, true, value);
-        for (const name of Object.keys(value)) {
-            assertControlPresent(this, true, name);
-            const control = this.controls[name];
-            const currentValue = value[name];
-            if (control instanceof FormArray && Array.isArray(currentValue)) {
-                control.clear();
-                for (const item of currentValue) {
-                    item.setParent(control);
-                    control.push(item, { emitEvent: options?.emitEvent });
+    addMenuScrollbar(id) {
+        setTimeout(() => {
+            // TODO Меню второго уровня есть скролл,третьего нет
+            const collapsedMenu = document.querySelector(`[id="${id}"]`);
+            const sideMenu = collapsedMenu?.querySelector('#side-menu__subitems');
+            const sideMenuLevelTwo = sideMenu?.querySelector('#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);
+    }
+    ngOnInit() {
+        this._state.isOpen$.subscribe((menuState) => {
+            if (menuState) {
+                this.findRoute(this.selectedSection());
+            }
             else {
-                control.setValue(currentValue, {
-                    onlySelf: true,
-                    emitEvent: options?.emitEvent,
-                });
+                this.collapseMenu();
             }
-        }
-        this.updateValueAndValidity(options);
+        });
     }
-    patchValue(value, options) {
-        if (value === null) {
-            return;
-        }
-        for (const name of Object.keys(value)) {
-            const control = this.controls[name];
-            const currentValue = value[name];
-            if (control) {
-                if (control instanceof FormArray && Array.isArray(currentValue)) {
-                    control.clear();
-                    for (const item of currentValue) {
-                        item.setParent(control);
-                        control.push(item, { emitEvent: options?.emitEvent });
-                    }
-                }
-                else {
-                    control.patchValue(currentValue, {
-                        onlySelf: true,
-                        emitEvent: options?.emitEvent,
-                    });
+    toggleNavigation() {
+        this._state.toggle();
+    }
+    toggleItem(item) {
+        this.addMenuScrollbar(item.id || '');
+        this.expandedIds.update((currentExpand) => {
+            const code = item.code;
+            const copy = new Set(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);
                 }
             }
-        }
-        this.updateValueAndValidity(options);
+            return copy;
+        });
     }
-    getDirtyValues() {
-        const values = {};
-        for (const key of Object.keys(this.controls)) {
-            const control = this.get(key);
-            if (control?.dirty) {
-                values[key] = control.getRawValue();
-            }
+    collapseMenu(exception) {
+        let codes = [];
+        if (exception) {
+            const parents = this.getParents(exception);
+            codes = [exception.code, ...parents.map((parent) => parent.code)];
         }
-        return values;
+        this.expandedIds.set(new Set(codes));
     }
-}
-
-/** Максимальное кол-во символов в текстовых полях */
-const MAX_LENGTH_TEXT_PARAMS = new InjectionToken('MAX_LENGTH_TEXT_PARAMS');
-
-class ParamBase {
-    /** Метод для конвертации значения control при сохранении (используется при сохранении фильтров в БД) */
-    set formatSavedValue(formatter) {
-        if (formatter) {
-            this.formatterSavedValue = formatter;
-        }
+    get isMenuOpened() {
+        return this._state.isOpen;
     }
-    /** Метод для конвертации сохраненного значения в control (используется при установке сохраненных фильтров из БД) */
-    set parseSavedValue(parser) {
-        if (parser) {
-            this.parserSavedValue = parser;
-        }
+    get isMenuClosed() {
+        return !this._state.isOpen;
     }
-    /** Метод для конвертации значения control в GQL-значение (используется при вычислении gql_value control) */
-    set formatGqlValue(formatter) {
-        if (formatter) {
-            this.formatterGqlValue = formatter;
+    isExternalLink(route) {
+        if (!route) {
+            return false;
         }
+        return /^(https?:\/\/|www\.)/i.test(route);
     }
-    set required(required) {
-        this._required = required;
-        this._setControlRequired(required);
-    }
-    get required() {
-        return this.control?.hasValidator(Validators.required) ?? false;
+    handleNavigation(item) {
+        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();
+            }
+        }
     }
-    set disabled(disabled) {
-        this._disabled = disabled;
-        this._setControlDisabled(disabled);
+    serviceInfoOnActiveZone(active) {
+        this.isOpenServiceVersionInfo = active && this.isOpenServiceVersionInfo;
     }
-    get disabled() {
-        return this.control?.disabled ?? false;
+    serviceInfoOnObscured(obscured) {
+        if (obscured) {
+            this.isOpenServiceVersionInfo = false;
+        }
     }
-    constructor(_injector) {
-        this._injector = _injector;
-        /** Название */
-        this.label = '';
-        /** Текст при пустом значении control (null) */
-        this.placeholder = input('');
-        /** Режим просмотра, по умолчанию выключен */
-        this.readmode = false;
-        /** Кнопка быстрой очистки поля, по умолчанию включена */
-        this.forceClear = true;
+    buildMenu(menu) {
+        const sortedMenuItems = [...menu].sort((a, b) => (a.order_num ?? 0) - (b.order_num ?? 0));
+        const menuHash = {};
+        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 = [];
+        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;
+            }
+        }
+    }
+    findRoute(routeToFind) {
+        const routeItem = this.codeToItem[routeToFind];
+        if (!routeItem) {
+            return;
+        }
+        if (this.isMenuOpened) {
+            this.toggleItem(routeItem);
+        }
+        this.selectedSection.set(routeItem.code ?? '');
+    }
+    _findActiveSection() {
+        this.findActiveSection()(this.resetSelection, this.findRoute);
+    }
+    getParents(item) {
+        const parents = [];
+        let current = item.parent;
+        while (current) {
+            parents.push(current);
+            current = current.parent;
+        }
+        return parents;
+    }
+    resetSelection() {
+        this.expandedIds.set(new Set());
+        this.selectedSection.set('');
+    }
+    collectChildren(item) {
+        const result = [];
+        const queue = 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SprocPageMenuComponent, isStandalone: true, selector: "sproc-page-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, menuIconsSrc: { classPropertyName: "menuIconsSrc", publicName: "menuIconsSrc", isSignal: true, isRequired: false, transformFunction: null }, openLogoSrc: { classPropertyName: "openLogoSrc", publicName: "openLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, closedLogoSrc: { classPropertyName: "closedLogoSrc", publicName: "closedLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, findActiveSection: { classPropertyName: "findActiveSection", publicName: "findActiveSection", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--page-menu-opened-width": "this.menuOpenedWidth", "style.--page-menu-closed-width": "this.menuClosedWidth" } }, ngImport: i0, template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n  <div class=\"side-menu__header\">\n    <img\n      [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n      alt=\"Logo Icon\"\n      class=\"side-menu__header__logo\"\n    />\n    <img\n      (click)=\"toggleNavigation()\"\n      [class.disabled]=\"toggleDisabled$ | async\"\n      [height]=\"16\"\n      [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n      [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n  </div>\n\n  @if (menuState()) {\n    <div class=\"expanded-menu-content\">\n      @for (navigation_item of navigationHierarchy(); track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItemOpened;\n            context: { navigation_item: navigation_item, level: 0 }\n          \"\n        ></ng-container>\n      }\n    </div>\n\n    <ng-content></ng-content>\n  } @else {\n    @for (navigation_item of navigationHierarchy(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n      ></ng-container>\n    }\n  }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code;\n\n  <a\n    (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n    [@fadeInOut]\n    [class.menu-item_selected]=\"isHighlighted\"\n    [class.padding-level-0]=\"level === 0\"\n    [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n    [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n    class=\"menu-item\"\n  >\n    @if (icon) {\n      <span class=\"menu-item__icon\">\n        <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n      </span>\n    }\n    <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n    @if (childrenCount > 0) {\n      <img\n        class=\"menu-item__chevron\"\n        [class.menu-item__chevron_rotated]=\"!isExpanded\"\n        [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n        [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n    }\n  </a>\n  @if (isExpanded && childrenCount > 0) {\n    @for (children of navigation_item.children ?? []; track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n  <div\n    (mouseleave)=\"collapseMenu()\"\n    [id]=\"navigation_item.id\"\n    class=\"collapsed-menu-content\"\n  >\n    @if (icon) {\n      <a\n        class=\"menu-item__icon_closed\"\n        [class.menu-item_selected]=\"isHighlighted\"\n        (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n        [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n        (mouseenter)=\"toggleItem(navigation_item)\">\n        <img\n          [height]=\"16\"\n          [width]=\"16\"\n          [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n      </a>\n    }\n    <ng-container\n      *ngTemplateOutlet=\"\n        menuClosedItem;\n        context: { item: navigation_item, level: 1, topPadding: 1 }\n      \"\n    >\n    </ng-container>\n    @if (isExpanded && childrenCount > 0) {\n      <div class=\"static-item\">\n        <span class=\"static-item__element\">\n        {{ navigation_item.title }}\n          </span>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n  @let isExpanded = expandedIds().has(item.code);\n  <div [id]=\"item.id\">\n    @if (isExpanded && item.children.length > 0) {\n      <div\n        class=\"side-menu__subitems\"\n        [class.padding-level-1]=\"level === 1\"\n        [style.top.px]=\"topPadding * 40\"\n        id=\"side-menu__subitems\"\n      >\n        @for (navigation_item of item.children; track navigation_item; let index = $index) {\n          @let childrenCount = navigation_item.children.length;\n          @let code = navigation_item.code;\n          @let route = navigation_item.code;\n          @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n          <a\n            class=\"side-menu__subitem\"\n            [class.menu-item_selected]=\"isHighlighted\"\n            (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n            (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n            [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n          >\n          <span\n            [class.padding-level-1]=\"level === 1\">{{\n              navigation_item.title\n            }}</span>\n\n            @if (childrenCount > 0) {\n              <img\n                class=\"chevron-right\"\n                [height]=\"16\"\n                [width]=\"16\"\n                [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n            }\n          </a>\n          <ng-container\n            *ngTemplateOutlet=\"\n            menuClosedItem;\n            context: { item: navigation_item, level: level + 1, topPadding: index }\n          \"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .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}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], animations: [
+            trigger('fadeInOut', [
+                transition(':enter', [
+                    style({
+                        opacity: 0,
+                        transform: 'translateY(-10px)',
+                        transformOrigin: 'top',
+                    }),
+                    animate('0.15s ease-in', style({
+                        opacity: 1,
+                        transform: 'translateY(0)',
+                    })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sproc-page-menu', 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)',
+                                })),
+                            ]),
+                        ]),
+                    ], template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n  <div class=\"side-menu__header\">\n    <img\n      [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n      alt=\"Logo Icon\"\n      class=\"side-menu__header__logo\"\n    />\n    <img\n      (click)=\"toggleNavigation()\"\n      [class.disabled]=\"toggleDisabled$ | async\"\n      [height]=\"16\"\n      [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n      [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n  </div>\n\n  @if (menuState()) {\n    <div class=\"expanded-menu-content\">\n      @for (navigation_item of navigationHierarchy(); track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItemOpened;\n            context: { navigation_item: navigation_item, level: 0 }\n          \"\n        ></ng-container>\n      }\n    </div>\n\n    <ng-content></ng-content>\n  } @else {\n    @for (navigation_item of navigationHierarchy(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n      ></ng-container>\n    }\n  }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code;\n\n  <a\n    (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n    [@fadeInOut]\n    [class.menu-item_selected]=\"isHighlighted\"\n    [class.padding-level-0]=\"level === 0\"\n    [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n    [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n    class=\"menu-item\"\n  >\n    @if (icon) {\n      <span class=\"menu-item__icon\">\n        <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n      </span>\n    }\n    <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n    @if (childrenCount > 0) {\n      <img\n        class=\"menu-item__chevron\"\n        [class.menu-item__chevron_rotated]=\"!isExpanded\"\n        [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n        [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n    }\n  </a>\n  @if (isExpanded && childrenCount > 0) {\n    @for (children of navigation_item.children ?? []; track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n  <div\n    (mouseleave)=\"collapseMenu()\"\n    [id]=\"navigation_item.id\"\n    class=\"collapsed-menu-content\"\n  >\n    @if (icon) {\n      <a\n        class=\"menu-item__icon_closed\"\n        [class.menu-item_selected]=\"isHighlighted\"\n        (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n        [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n        (mouseenter)=\"toggleItem(navigation_item)\">\n        <img\n          [height]=\"16\"\n          [width]=\"16\"\n          [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n      </a>\n    }\n    <ng-container\n      *ngTemplateOutlet=\"\n        menuClosedItem;\n        context: { item: navigation_item, level: 1, topPadding: 1 }\n      \"\n    >\n    </ng-container>\n    @if (isExpanded && childrenCount > 0) {\n      <div class=\"static-item\">\n        <span class=\"static-item__element\">\n        {{ navigation_item.title }}\n          </span>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n  @let isExpanded = expandedIds().has(item.code);\n  <div [id]=\"item.id\">\n    @if (isExpanded && item.children.length > 0) {\n      <div\n        class=\"side-menu__subitems\"\n        [class.padding-level-1]=\"level === 1\"\n        [style.top.px]=\"topPadding * 40\"\n        id=\"side-menu__subitems\"\n      >\n        @for (navigation_item of item.children; track navigation_item; let index = $index) {\n          @let childrenCount = navigation_item.children.length;\n          @let code = navigation_item.code;\n          @let route = navigation_item.code;\n          @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n          <a\n            class=\"side-menu__subitem\"\n            [class.menu-item_selected]=\"isHighlighted\"\n            (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n            (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n            [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n          >\n          <span\n            [class.padding-level-1]=\"level === 1\">{{\n              navigation_item.title\n            }}</span>\n\n            @if (childrenCount > 0) {\n              <img\n                class=\"chevron-right\"\n                [height]=\"16\"\n                [width]=\"16\"\n                [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n            }\n          </a>\n          <ng-container\n            *ngTemplateOutlet=\"\n            menuClosedItem;\n            context: { item: navigation_item, level: level + 1, topPadding: index }\n          \"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .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}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuOpenedWidth: [{
+                type: HostBinding,
+                args: ['style.--page-menu-opened-width']
+            }], menuClosedWidth: [{
+                type: HostBinding,
+                args: ['style.--page-menu-closed-width']
+            }] } });
+
+class AbstractMenuStateService {
+}
+
+var ERuntimeErrorCode;
+(function (ERuntimeErrorCode) {
+    // Structure validation errors
+    ERuntimeErrorCode[ERuntimeErrorCode["NO_CONTROLS"] = 1000] = "NO_CONTROLS";
+    ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL"] = 1001] = "MISSING_CONTROL";
+    ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL_VALUE"] = 1002] = "MISSING_CONTROL_VALUE";
+})(ERuntimeErrorCode || (ERuntimeErrorCode = {}));
+
+function assertAllValuesPresent(control, isGroup, value) {
+    control._forEachChild((_, key) => {
+        if (value[key] === undefined) {
+            throw new _RuntimeError(ERuntimeErrorCode.MISSING_CONTROL_VALUE, '');
+        }
+    });
+}
+function assertControlPresent(parent, isGroup, key) {
+    const controls = parent.controls;
+    const collection = isGroup ? Object.keys(controls) : controls;
+    if (collection.length === 0) {
+        throw new _RuntimeError(ERuntimeErrorCode.NO_CONTROLS, '');
+    }
+    if (!controls[key]) {
+        throw new _RuntimeError(ERuntimeErrorCode.MISSING_CONTROL, '');
+    }
+}
+/** @deprecated заменить на FormGroup */
+class FormGroupWrapper extends FormGroup {
+    setValue(value, options) {
+        assertAllValuesPresent(this, true, value);
+        for (const name of Object.keys(value)) {
+            assertControlPresent(this, true, name);
+            const control = this.controls[name];
+            const currentValue = value[name];
+            if (control instanceof FormArray && Array.isArray(currentValue)) {
+                control.clear();
+                for (const item of currentValue) {
+                    item.setParent(control);
+                    control.push(item, { emitEvent: options?.emitEvent });
+                }
+            }
+            else {
+                control.setValue(currentValue, {
+                    onlySelf: true,
+                    emitEvent: options?.emitEvent,
+                });
+            }
+        }
+        this.updateValueAndValidity(options);
+    }
+    patchValue(value, options) {
+        if (value === null) {
+            return;
+        }
+        for (const name of Object.keys(value)) {
+            const control = this.controls[name];
+            const currentValue = value[name];
+            if (control) {
+                if (control instanceof FormArray && Array.isArray(currentValue)) {
+                    control.clear();
+                    for (const item of currentValue) {
+                        item.setParent(control);
+                        control.push(item, { emitEvent: options?.emitEvent });
+                    }
+                }
+                else {
+                    control.patchValue(currentValue, {
+                        onlySelf: true,
+                        emitEvent: options?.emitEvent,
+                    });
+                }
+            }
+        }
+        this.updateValueAndValidity(options);
+    }
+    getDirtyValues() {
+        const values = {};
+        for (const key of Object.keys(this.controls)) {
+            const control = this.get(key);
+            if (control?.dirty) {
+                values[key] = control.getRawValue();
+            }
+        }
+        return values;
+    }
+}
+
+/** Максимальное кол-во символов в текстовых полях */
+const MAX_LENGTH_TEXT_PARAMS = new InjectionToken('MAX_LENGTH_TEXT_PARAMS');
+
+class ParamBase {
+    /** Метод для конвертации значения control при сохранении (используется при сохранении фильтров в БД) */
+    set formatSavedValue(formatter) {
+        if (formatter) {
+            this.formatterSavedValue = formatter;
+        }
+    }
+    /** Метод для конвертации сохраненного значения в control (используется при установке сохраненных фильтров из БД) */
+    set parseSavedValue(parser) {
+        if (parser) {
+            this.parserSavedValue = parser;
+        }
+    }
+    /** Метод для конвертации значения control в GQL-значение (используется при вычислении gql_value control) */
+    set formatGqlValue(formatter) {
+        if (formatter) {
+            this.formatterGqlValue = formatter;
+        }
+    }
+    set required(required) {
+        this._required = required;
+        this._setControlRequired(required);
+    }
+    get required() {
+        return this.control?.hasValidator(Validators.required) ?? false;
+    }
+    set disabled(disabled) {
+        this._disabled = disabled;
+        this._setControlDisabled(disabled);
+    }
+    get disabled() {
+        return this.control?.disabled ?? false;
+    }
+    constructor(_injector) {
+        this._injector = _injector;
+        /** Название */
+        this.label = '';
+        /** Текст при пустом значении control (null) */
+        this.placeholder = input('');
+        /** Режим просмотра, по умолчанию выключен */
+        this.readmode = false;
+        /** Кнопка быстрой очистки поля, по умолчанию включена */
+        this.forceClear = true;
         /** Текст при наведении на значение control */
         this.hint = null;
         /** Готовые стили для использования поля в панели фильтров/параметров или на карточке, по умолчанию стили для карточки */
@@ -3111,7 +3391,7 @@ class RegisterTableFilterComponent {
         this.filterListHeaderTitle = 'Фильтр';
         this.footerApplyButtonLabel = 'Применить';
         this.clickApplyButton = new EventEmitter();
-        this._menuState = inject(MENU_STATE_SERVICE);
+        this._menuState = inject(PAGE_MENU_STATE);
         this._unsubscribe$ = new Subject();
         this.FilterState = EInputsState;
         this.filterState$ = this._filterStateService.state$.pipe(map((filterState) => filterState.state));
@@ -4528,7 +4808,7 @@ class ParamSelectComponent extends ParamSelectBase {
                     disabledItemHandler: signal(() => false),
                 }),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      @if (label) {\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      }\n      <div class=\"value\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n      </div>\n\n      @if (searchable) {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          [content]=\"valueTemplate\"\n        >\n          <input\n            (input)=\"search$.next($any($event.target).value)\"\n            tuiComboBox\n            [strict]=\"strict()\"\n            [placeholder]=\"placeholder()\"\n            [formControl]=\"control\"\n          />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items | tuiFilterByInput: matcher()\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      } @else {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldLabelOutside]=\"true\"\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          [content]=\"valueTemplate\"\n          [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n        >\n          <input tuiSelect [placeholder]=\"placeholder()\" [formControl]=\"control\" />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      }\n      <ng-template #dropdownOptionContent let-data>\n        <div>\n          {{ stringify()(data) }}\n        </div>\n      </ng-template>\n\n      <ng-template #hintContent> {{ showedValue }} </ng-template>\n\n      <ng-template #textfieldIcons>\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit ._chevron-rotated .textfield-icons-container{transition:all .4ms}:host .container--edit ._chevron-rotated .textfield-icons-container .chevron{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i1$1.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1$4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiFilterByInputPipe, name: "tuiFilterByInput" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TuiComboBox, selector: "input[tuiComboBox]", inputs: ["strict", "matcher"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      @if (label) {\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      }\n      <div [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\" class=\"value\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n      </div>\n\n      @if (searchable) {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          tuiHintDirection=\"top\"\n          [content]=\"valueTemplate\"\n        >\n          <input\n            (input)=\"search$.next($any($event.target).value)\"\n            tuiComboBox\n            [strict]=\"strict()\"\n            [placeholder]=\"placeholder()\"\n            [formControl]=\"control\"\n          />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items | tuiFilterByInput: matcher()\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      } @else {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldLabelOutside]=\"true\"\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          tuiHintDirection=\"top\"\n          [content]=\"valueTemplate\"\n          [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n        >\n          <input tuiSelect [placeholder]=\"placeholder()\" [formControl]=\"control\" />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      }\n      <ng-template #dropdownOptionContent let-data>\n        <div>\n          {{ stringify()(data) }}\n        </div>\n      </ng-template>\n\n      <ng-template #textfieldIcons>\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #hintContent> {{ showedValue }} </ng-template>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit ._chevron-rotated .textfield-icons-container{transition:all .4ms}:host .container--edit ._chevron-rotated .textfield-icons-container .chevron{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i1$1.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1$4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiFilterByInputPipe, name: "tuiFilterByInput" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TuiComboBox, selector: "input[tuiComboBox]", inputs: ["strict", "matcher"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamSelectComponent, decorators: [{
             type: Component,
@@ -4562,7 +4842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TuiLoader,
                         TuiChevron,
                         TuiHint,
-                    ], template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      @if (label) {\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      }\n      <div class=\"value\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n      </div>\n\n      @if (searchable) {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          [content]=\"valueTemplate\"\n        >\n          <input\n            (input)=\"search$.next($any($event.target).value)\"\n            tuiComboBox\n            [strict]=\"strict()\"\n            [placeholder]=\"placeholder()\"\n            [formControl]=\"control\"\n          />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items | tuiFilterByInput: matcher()\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      } @else {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldLabelOutside]=\"true\"\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          [content]=\"valueTemplate\"\n          [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n        >\n          <input tuiSelect [placeholder]=\"placeholder()\" [formControl]=\"control\" />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      }\n      <ng-template #dropdownOptionContent let-data>\n        <div>\n          {{ stringify()(data) }}\n        </div>\n      </ng-template>\n\n      <ng-template #hintContent> {{ showedValue }} </ng-template>\n\n      <ng-template #textfieldIcons>\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit ._chevron-rotated .textfield-icons-container{transition:all .4ms}:host .container--edit ._chevron-rotated .textfield-icons-container .chevron{transform:rotate(-180deg)}\n"] }]
+                    ], template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      @if (label) {\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      }\n      <div [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\" class=\"value\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n      </div>\n\n      @if (searchable) {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          tuiHintDirection=\"top\"\n          [content]=\"valueTemplate\"\n        >\n          <input\n            (input)=\"search$.next($any($event.target).value)\"\n            tuiComboBox\n            [strict]=\"strict()\"\n            [placeholder]=\"placeholder()\"\n            [formControl]=\"control\"\n          />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items | tuiFilterByInput: matcher()\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      } @else {\n        <tui-textfield\n          tuiTextfieldSize=\"m\"\n          tuiAppearance=\"sproc-input-appearance\"\n          tuiChevron\n          [tuiTextfieldLabelOutside]=\"true\"\n          [tuiTextfieldCleaner]=\"true\"\n          [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n          tuiHintDirection=\"top\"\n          [content]=\"valueTemplate\"\n          [tuiDropdownMaxHeight]=\"maxDropdownHeight\"\n        >\n          <input tuiSelect [placeholder]=\"placeholder()\" [formControl]=\"control\" />\n\n          <tui-loader [showLoader]=\"loading\" [overlay]=\"true\">\n            <tui-data-list-wrapper\n              new\n              *tuiTextfieldDropdown\n              [items]=\"items\"\n              [itemContent]=\"listItemTemplate ?? dropdownOptionContent\"\n              (itemClick)=\"onSelect.emit($event)\"\n            />\n          </tui-loader>\n\n          <ng-container *ngTemplateOutlet=\"textfieldIcons\"></ng-container>\n        </tui-textfield>\n      }\n      <ng-template #dropdownOptionContent let-data>\n        <div>\n          {{ stringify()(data) }}\n        </div>\n      </ng-template>\n\n      <ng-template #textfieldIcons>\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #hintContent> {{ showedValue }} </ng-template>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit ._chevron-rotated .textfield-icons-container{transition:all .4ms}:host .container--edit ._chevron-rotated .textfield-icons-container .chevron{transform:rotate(-180deg)}\n"] }]
         }], propDecorators: { onSelect: [{
                 type: Output
             }] } });
@@ -4720,7 +5000,7 @@ class ParamTextComponent extends ParamTextBase {
         this.errorMessage = input('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParamTextComponent, isStandalone: true, selector: "sproc-param-text", inputs: { maskOptions: { classPropertyName: "maskOptions", publicName: "maskOptions", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      <ng-container *ngIf=\"label\">\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n      <div class=\"value\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n        @if (errorMessage() && control.invalid) {\n          <div class=\"errorMessage\">{{ errorMessage() }}</div>\n        }\n      </div>\n\n      <tui-textfield\n        tuiAppearance=\"sproc-input-appearance\"\n        tuiTextfieldSize=\"m\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [tuiTextfieldCleaner]=\"forceClear\"\n        [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n      >\n        <input\n          tuiTextfield\n          [formControl]=\"control\"\n          [maskito]=\"maskOptions()\"\n          [placeholder]=\"placeholder()\"\n          [maxLength]=\"maxLength()\"\n        />\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </tui-textfield>\n\n      <ng-template #hintContent> {{ showedValue }} </ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParamTextComponent, isStandalone: true, selector: "sproc-param-text", inputs: { maskOptions: { classPropertyName: "maskOptions", publicName: "maskOptions", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      <ng-container *ngIf=\"label\">\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n      <div class=\"value\" [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n        @if (errorMessage() && control.invalid) {\n          <div class=\"errorMessage\">{{ errorMessage() }}</div>\n        }\n      </div>\n\n      <tui-textfield\n        tuiAppearance=\"sproc-input-appearance\"\n        tuiTextfieldSize=\"m\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [tuiTextfieldCleaner]=\"forceClear\"\n        [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n        tuiHintDirection=\"top\"\n      >\n        <input\n          tuiTextfield\n          [formControl]=\"control\"\n          [maskito]=\"maskOptions()\"\n          [placeholder]=\"placeholder()\"\n          [maxLength]=\"maxLength()\"\n        />\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </tui-textfield>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #hintContent> {{ showedValue }} </ng-template>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextComponent, decorators: [{
             type: Component,
@@ -4737,7 +5017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TuiTextfieldControllerModule,
                         TuiAppearance,
                         MaskitoDirective,
-                    ], template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      <ng-container *ngIf=\"label\">\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n      <div class=\"value\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n        @if (errorMessage() && control.invalid) {\n          <div class=\"errorMessage\">{{ errorMessage() }}</div>\n        }\n      </div>\n\n      <tui-textfield\n        tuiAppearance=\"sproc-input-appearance\"\n        tuiTextfieldSize=\"m\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [tuiTextfieldCleaner]=\"forceClear\"\n        [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n      >\n        <input\n          tuiTextfield\n          [formControl]=\"control\"\n          [maskito]=\"maskOptions()\"\n          [placeholder]=\"placeholder()\"\n          [maxLength]=\"maxLength()\"\n        />\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </tui-textfield>\n\n      <ng-template #hintContent> {{ showedValue }} </ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"] }]
+                    ], template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n  <ng-template #readTemplate>\n    <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n      <ng-container *ngIf=\"label\">\n        <ng-container [ngSwitch]=\"paramStyle\">\n          <ng-template ngSwitchCase=\"filter\">\n            <div class=\"label-wrapper\">\n              <span class=\"label\">{{ label }}</span>\n              <div class=\"dashed-row\"></div>\n            </div>\n          </ng-template>\n          <ng-template ngSwitchDefault>\n            <span class=\"label\">{{ label }}</span>\n            <div class=\"dashed-row\"></div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n      <div class=\"value\" [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\">\n        <span>{{ showedValue }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #editTemplate>\n    <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n      <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n        <span class=\"label\" [class.required]=\"required\">\n          {{ label }}\n        </span>\n        @if (errorMessage() && control.invalid) {\n          <div class=\"errorMessage\">{{ errorMessage() }}</div>\n        }\n      </div>\n\n      <tui-textfield\n        tuiAppearance=\"sproc-input-appearance\"\n        tuiTextfieldSize=\"m\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [tuiTextfieldCleaner]=\"forceClear\"\n        [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n        tuiHintDirection=\"top\"\n      >\n        <input\n          tuiTextfield\n          [formControl]=\"control\"\n          [maskito]=\"maskOptions()\"\n          [placeholder]=\"placeholder()\"\n          [maxLength]=\"maxLength()\"\n        />\n        <div class=\"textfield-icons-container\">\n          @if (isInvalidAndNotPristine) {\n            <sproc-param-invalid-icon></sproc-param-invalid-icon>\n          }\n        </div>\n      </tui-textfield>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #hintContent> {{ showedValue }} </ng-template>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"] }]
         }] });
 
 class ParamTextareaComponent extends ParamTextBase {
@@ -5428,288 +5708,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-const SIDE_MENU_OPENED_WIDTH = 350;
-const SIDE_MENU_CLOSED_WIDTH = 48;
-var EPageMenuIconsSrc;
-(function (EPageMenuIconsSrc) {
-    EPageMenuIconsSrc["CHEVRON_RIGHT"] = "assets/ngx-register-base/icons/chevron-right.svg";
-    EPageMenuIconsSrc["CHEVRON_UP"] = "assets/ngx-register-base/icons/chevron-up.svg";
-    EPageMenuIconsSrc["MENU_CHEVRON"] = "assets/ngx-register-base/icons/chevron-menu.svg";
-})(EPageMenuIconsSrc || (EPageMenuIconsSrc = {}));
-
-const PAGE_MENU_STATE = new InjectionToken('PAGE_MENU_STATE');
-// export const PAGE_MENU_STORE = new InjectionToken<AbstractMenuStateService>('PAGE_MENU_STATE');
-
-class SprocPageMenuComponent {
-    constructor() {
-        this.menuItems = input.required();
-        this.menuIconsSrc = input('');
-        this.openLogoSrc = input('');
-        this.closedLogoSrc = input('');
-        this.findActiveSection = input.required();
-        // TODO Добавить кастомную ширину меню
-        this.menuOpenedWidth = `${SIDE_MENU_OPENED_WIDTH}px`;
-        this.menuClosedWidth = `${SIDE_MENU_CLOSED_WIDTH}px`;
-        this._router = inject(Router);
-        this._state = inject(PAGE_MENU_STATE);
-        this._dr = inject(DestroyRef);
-        this.toggleDisabled$ = this._state.toggleDisabled$;
-        this.menuState = toSignal(this._state.isOpen$);
-        this.selectedSection = signal('register');
-        this.expandedIds = signal(new Set());
-        this.selectedItem = computed(() => this.selectedSection() ? this.codeToItem[this.selectedSection()] : null);
-        // Хранит parent элементы выбранного пункта меню
-        this.parentItems = computed(() => {
-            const item = this.selectedItem();
-            if (!item) {
-                return [];
-            }
-            const parents = [];
-            let current = item.parent;
-            while (current) {
-                parents.push(current);
-                current = current.parent;
-            }
-            return parents;
-        });
-        this.parentItemCodes = computed(() => {
-            const parentItems = this.parentItems();
-            return new Set(parentItems.map((val) => val.code ?? ''));
-        });
-        this.navigationHierarchy = signal([]);
-        this.codeToItem = {};
-        this.isOpenServiceVersionInfo = false;
-        this.ICONS_SRC = EPageMenuIconsSrc;
-        // Построить меню и найти активную секцию
-        effect(() => {
-            const menuItems = this.menuItems();
-            this.buildMenu(menuItems);
-            this._findActiveSection();
-        }, { allowSignalWrites: true });
-    }
-    addMenuScrollbar(id) {
-        setTimeout(() => {
-            // TODO Меню второго уровня есть скролл,третьего нет
-            const collapsedMenu = document.querySelector(`[id="${id}"]`);
-            const sideMenu = collapsedMenu?.querySelector('#side-menu__subitems');
-            const sideMenuLevelTwo = sideMenu?.querySelector('#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);
-    }
-    ngOnInit() {
-        this._state.isOpen$.subscribe((menuState) => {
-            if (menuState) {
-                this.findRoute(this.selectedSection());
-            }
-            else {
-                this.collapseMenu();
-            }
-        });
-    }
-    toggleNavigation() {
-        this._state.toggle();
-    }
-    toggleItem(item) {
-        this.addMenuScrollbar(item.id || '');
-        this.expandedIds.update((currentExpand) => {
-            const code = item.code;
-            const copy = new Set(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;
-        });
-    }
-    collapseMenu(exception) {
-        let codes = [];
-        if (exception) {
-            const parents = this.getParents(exception);
-            codes = [exception.code, ...parents.map((parent) => parent.code)];
-        }
-        this.expandedIds.set(new Set(codes));
-    }
-    get isMenuOpened() {
-        return this._state.isOpen;
-    }
-    get isMenuClosed() {
-        return !this._state.isOpen;
-    }
-    isExternalLink(route) {
-        if (!route) {
-            return false;
-        }
-        return /^(https?:\/\/|www\.)/i.test(route);
-    }
-    handleNavigation(item) {
-        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();
-            }
-        }
-    }
-    serviceInfoOnActiveZone(active) {
-        this.isOpenServiceVersionInfo = active && this.isOpenServiceVersionInfo;
-    }
-    serviceInfoOnObscured(obscured) {
-        if (obscured) {
-            this.isOpenServiceVersionInfo = false;
-        }
-    }
-    buildMenu(menu) {
-        const sortedMenuItems = [...menu].sort((a, b) => (a.order_num ?? 0) - (b.order_num ?? 0));
-        const menuHash = {};
-        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 = [];
-        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;
-            }
-        }
-    }
-    findRoute(routeToFind) {
-        const routeItem = this.codeToItem[routeToFind];
-        if (!routeItem) {
-            return;
-        }
-        if (this.isMenuOpened) {
-            this.toggleItem(routeItem);
-        }
-        this.selectedSection.set(routeItem.code ?? '');
-    }
-    _findActiveSection() {
-        this.findActiveSection()(this.resetSelection, this.findRoute);
-    }
-    getParents(item) {
-        const parents = [];
-        let current = item.parent;
-        while (current) {
-            parents.push(current);
-            current = current.parent;
-        }
-        return parents;
-    }
-    resetSelection() {
-        this.expandedIds.set(new Set());
-        this.selectedSection.set('');
-    }
-    collectChildren(item) {
-        const result = [];
-        const queue = 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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SprocPageMenuComponent, isStandalone: true, selector: "sproc-page-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, menuIconsSrc: { classPropertyName: "menuIconsSrc", publicName: "menuIconsSrc", isSignal: true, isRequired: false, transformFunction: null }, openLogoSrc: { classPropertyName: "openLogoSrc", publicName: "openLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, closedLogoSrc: { classPropertyName: "closedLogoSrc", publicName: "closedLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, findActiveSection: { classPropertyName: "findActiveSection", publicName: "findActiveSection", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--page-menu-opened-width": "this.menuOpenedWidth", "style.--page-menu-closed-width": "this.menuClosedWidth" } }, ngImport: i0, template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n  <div class=\"side-menu__header\">\n    <img\n      [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n      alt=\"Logo Icon\"\n      class=\"side-menu__header__logo\"\n    />\n    <img\n      (click)=\"toggleNavigation()\"\n      [class.disabled]=\"toggleDisabled$ | async\"\n      [height]=\"16\"\n      [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n      [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n  </div>\n\n  @if (menuState()) {\n    <div class=\"expanded-menu-content\">\n      @for (navigation_item of navigationHierarchy(); track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItemOpened;\n            context: { navigation_item: navigation_item, level: 0 }\n          \"\n        ></ng-container>\n      }\n    </div>\n\n    <ng-content></ng-content>\n  } @else {\n    @for (navigation_item of navigationHierarchy(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n      ></ng-container>\n    }\n  }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code;\n\n  <a\n    (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n    [@fadeInOut]\n    [class.menu-item_selected]=\"isHighlighted\"\n    [class.padding-level-0]=\"level === 0\"\n    [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n    [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n    class=\"menu-item\"\n  >\n    @if (icon) {\n      <span class=\"menu-item__icon\">\n        <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n      </span>\n    }\n    <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n    @if (childrenCount > 0) {\n      <img\n        class=\"menu-item__chevron\"\n        [class.menu-item__chevron_rotated]=\"!isExpanded\"\n        [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n        [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n    }\n  </a>\n  @if (isExpanded && childrenCount > 0) {\n    @for (children of navigation_item.children ?? []; track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n  <div\n    (mouseleave)=\"collapseMenu()\"\n    [id]=\"navigation_item.id\"\n    class=\"collapsed-menu-content\"\n  >\n    @if (icon) {\n      <a\n        class=\"menu-item__icon_closed\"\n        [class.menu-item_selected]=\"isHighlighted\"\n        (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n        [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n        (mouseenter)=\"toggleItem(navigation_item)\">\n        <img\n          [height]=\"16\"\n          [width]=\"16\"\n          [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n      </a>\n    }\n    <ng-container\n      *ngTemplateOutlet=\"\n        menuClosedItem;\n        context: { item: navigation_item, level: 1, topPadding: 1 }\n      \"\n    >\n    </ng-container>\n    @if (isExpanded && childrenCount > 0) {\n      <div class=\"static-item\">\n        <span class=\"static-item__element\">\n        {{ navigation_item.title }}\n          </span>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n  @let isExpanded = expandedIds().has(item.code);\n  <div [id]=\"item.id\">\n    @if (isExpanded && item.children.length > 0) {\n      <div\n        class=\"side-menu__subitems\"\n        [class.padding-level-1]=\"level === 1\"\n        [style.top.px]=\"topPadding * 40\"\n        id=\"side-menu__subitems\"\n      >\n        @for (navigation_item of item.children; track navigation_item; let index = $index) {\n          @let childrenCount = navigation_item.children.length;\n          @let code = navigation_item.code;\n          @let route = navigation_item.code;\n          @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n          <a\n            class=\"side-menu__subitem\"\n            [class.menu-item_selected]=\"isHighlighted\"\n            (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n            (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n            [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n          >\n          <span\n            [class.padding-level-1]=\"level === 1\">{{\n              navigation_item.title\n            }}</span>\n\n            @if (childrenCount > 0) {\n              <img\n                class=\"chevron-right\"\n                [height]=\"16\"\n                [width]=\"16\"\n                [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n            }\n          </a>\n          <ng-container\n            *ngTemplateOutlet=\"\n            menuClosedItem;\n            context: { item: navigation_item, level: level + 1, topPadding: index }\n          \"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .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}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], animations: [
-            trigger('fadeInOut', [
-                transition(':enter', [
-                    style({
-                        opacity: 0,
-                        transform: 'translateY(-10px)',
-                        transformOrigin: 'top',
-                    }),
-                    animate('0.15s ease-in', style({
-                        opacity: 1,
-                        transform: 'translateY(0)',
-                    })),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sproc-page-menu', 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)',
-                                })),
-                            ]),
-                        ]),
-                    ], template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n  <div class=\"side-menu__header\">\n    <img\n      [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n      alt=\"Logo Icon\"\n      class=\"side-menu__header__logo\"\n    />\n    <img\n      (click)=\"toggleNavigation()\"\n      [class.disabled]=\"toggleDisabled$ | async\"\n      [height]=\"16\"\n      [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n      [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n  </div>\n\n  @if (menuState()) {\n    <div class=\"expanded-menu-content\">\n      @for (navigation_item of navigationHierarchy(); track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItemOpened;\n            context: { navigation_item: navigation_item, level: 0 }\n          \"\n        ></ng-container>\n      }\n    </div>\n\n    <ng-content></ng-content>\n  } @else {\n    @for (navigation_item of navigationHierarchy(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n      ></ng-container>\n    }\n  }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code;\n\n  <a\n    (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n    [@fadeInOut]\n    [class.menu-item_selected]=\"isHighlighted\"\n    [class.padding-level-0]=\"level === 0\"\n    [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n    [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n    class=\"menu-item\"\n  >\n    @if (icon) {\n      <span class=\"menu-item__icon\">\n        <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n      </span>\n    }\n    <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n    @if (childrenCount > 0) {\n      <img\n        class=\"menu-item__chevron\"\n        [class.menu-item__chevron_rotated]=\"!isExpanded\"\n        [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n        [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n    }\n  </a>\n  @if (isExpanded && childrenCount > 0) {\n    @for (children of navigation_item.children ?? []; track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n  @let isExpanded = expandedIds().has(navigation_item.code);\n  @let childrenCount = navigation_item.children.length;\n  @let code = navigation_item.code;\n  @let route = navigation_item.code;\n  @let icon = navigation_item.icon;\n  @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n  <div\n    (mouseleave)=\"collapseMenu()\"\n    [id]=\"navigation_item.id\"\n    class=\"collapsed-menu-content\"\n  >\n    @if (icon) {\n      <a\n        class=\"menu-item__icon_closed\"\n        [class.menu-item_selected]=\"isHighlighted\"\n        (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n        [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n        (mouseenter)=\"toggleItem(navigation_item)\">\n        <img\n          [height]=\"16\"\n          [width]=\"16\"\n          [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n      </a>\n    }\n    <ng-container\n      *ngTemplateOutlet=\"\n        menuClosedItem;\n        context: { item: navigation_item, level: 1, topPadding: 1 }\n      \"\n    >\n    </ng-container>\n    @if (isExpanded && childrenCount > 0) {\n      <div class=\"static-item\">\n        <span class=\"static-item__element\">\n        {{ navigation_item.title }}\n          </span>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n  @let isExpanded = expandedIds().has(item.code);\n  <div [id]=\"item.id\">\n    @if (isExpanded && item.children.length > 0) {\n      <div\n        class=\"side-menu__subitems\"\n        [class.padding-level-1]=\"level === 1\"\n        [style.top.px]=\"topPadding * 40\"\n        id=\"side-menu__subitems\"\n      >\n        @for (navigation_item of item.children; track navigation_item; let index = $index) {\n          @let childrenCount = navigation_item.children.length;\n          @let code = navigation_item.code;\n          @let route = navigation_item.code;\n          @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n          <a\n            class=\"side-menu__subitem\"\n            [class.menu-item_selected]=\"isHighlighted\"\n            (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n            (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n            [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n          >\n          <span\n            [class.padding-level-1]=\"level === 1\">{{\n              navigation_item.title\n            }}</span>\n\n            @if (childrenCount > 0) {\n              <img\n                class=\"chevron-right\"\n                [height]=\"16\"\n                [width]=\"16\"\n                [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n            }\n          </a>\n          <ng-container\n            *ngTemplateOutlet=\"\n            menuClosedItem;\n            context: { item: navigation_item, level: level + 1, topPadding: index }\n          \"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .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}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { menuOpenedWidth: [{
-                type: HostBinding,
-                args: ['style.--page-menu-opened-width']
-            }], menuClosedWidth: [{
-                type: HostBinding,
-                args: ['style.--page-menu-closed-width']
-            }] } });
-
-class AbstractMenuStateService {
-}
-
 const ROOT_TITLE = 'root';
 const NEW_ITEM_PREFIX = 'NEW_';
 const MIGRATION_HINT = 'Генерирует SQL код для миграции таблицы cls_menu_item. Генерация кода происходит на основе последней версии сохраненного меню.';
@@ -7463,5 +7461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMenuStateService, CARD, CellTemplateDirective, ColumnSettingsComponent, DateTimeService, DialogService, EColumnDataType, EColumnStatus, EInputsAction, EInputsState, EMPTY_UUID, EMonth, EOrder, EPageMenuIconsSrc, ERegisterObjectState, ESwitcherValue, FastQueryStore, FilterButtonComponent, FiltersService, FiltersStateService, FiltersTransmitService, FormGroupWrapper, INPUTS_STATE_CONFIG_KEY, InputControl, InputsModule, MAX_LENGTH_TEXT_PARAMS, MENU_CONSTRUCTOR_STORE_TOKEN, MENU_STATE_SERVICE, MIGRATION_HINT, MonthMapper, MonthsName, MonthsNumber, NEW_ITEM_PREFIX, NumberOnlyDirective, PAGE_MENU_STATE, ParamBase, ParamCalendarYearComponent, ParamCustomComponent, ParamDateBase, ParamDateComponent, ParamDateRangeComponent, ParamDateTimeComponent, ParamDateTimeRangeComponent, ParamMonthComponent, ParamMonthRangeComponent, ParamMultiSelectComponent, ParamSelectBase, ParamSelectComponent, ParamSwitcherComponent, ParamSwitcherDateTimeRangeComponent, ParamTextBase, ParamTextComponent, ParamTextareaComponent, ParamToggleComponent, ParamTreeComponent, ParamTreeMultiSelectComponent, ParamTreeSelectComponent, ParamTreeService, ROOT_TITLE, RegisterBase, RegisterBaseStore, RegisterTableComponent, RegisterTableFilterComponent, RegisterTableFilterModule, ResizeWindowObserverService, SELECT_ALL_ID, SELECT_ALL_NAME, SETTINGS_TYPE, SIDE_MENU_CLOSED_WIDTH, SIDE_MENU_OPENED_WIDTH, SearchInputComponent, SelectedObjectsStateService, SlidingPanelComponent, SlidingPanelModule, SprocAbstractMenuConstructorStore, SprocMenuConstructorComponent, SprocPageMenuComponent, StickyDirective, StickyRelativeDirective, SyncTreeLoaderService, TIME_ZONES, TIME_ZONE_HINTS, TREE_LOADER, TREE_LOADING_NODE, USER_PROFILE_LOADER, USER_SETTINGS_LOADER, distinctUntilChangedJSONs, getFirstSegmentOfPathName, getLastSegmentOfPathName, isDefined, isNonNull, just, moveInEventLoopIteration, removeSelectAll, selectAllItem, timezoneSelectItems, toPx, transformItemToNode };
+export { AbstractMenuStateService, CARD, CellTemplateDirective, ColumnSettingsComponent, DateTimeService, DialogService, EColumnDataType, EColumnStatus, EInputsAction, EInputsState, EMPTY_UUID, EMonth, EOrder, EPageMenuIconsSrc, ERegisterObjectState, ESwitcherValue, FastQueryStore, FilterButtonComponent, FiltersService, FiltersStateService, FiltersTransmitService, FormGroupWrapper, INPUTS_STATE_CONFIG_KEY, InputControl, InputsModule, MAX_LENGTH_TEXT_PARAMS, MENU_CONSTRUCTOR_STORE_TOKEN, MIGRATION_HINT, MonthMapper, MonthsName, MonthsNumber, NEW_ITEM_PREFIX, NumberOnlyDirective, PAGE_MENU_STATE, ParamBase, ParamCalendarYearComponent, ParamCustomComponent, ParamDateBase, ParamDateComponent, ParamDateRangeComponent, ParamDateTimeComponent, ParamDateTimeRangeComponent, ParamMonthComponent, ParamMonthRangeComponent, ParamMultiSelectComponent, ParamSelectBase, ParamSelectComponent, ParamSwitcherComponent, ParamSwitcherDateTimeRangeComponent, ParamTextBase, ParamTextComponent, ParamTextareaComponent, ParamToggleComponent, ParamTreeComponent, ParamTreeMultiSelectComponent, ParamTreeSelectComponent, ParamTreeService, ROOT_TITLE, RegisterBase, RegisterBaseStore, RegisterTableComponent, RegisterTableFilterComponent, RegisterTableFilterModule, ResizeWindowObserverService, SELECT_ALL_ID, SELECT_ALL_NAME, SETTINGS_TYPE, SIDE_MENU_CLOSED_WIDTH, SIDE_MENU_OPENED_WIDTH, SearchInputComponent, SelectedObjectsStateService, SlidingPanelComponent, SlidingPanelModule, SprocAbstractMenuConstructorStore, SprocMenuConstructorComponent, SprocPageMenuComponent, StickyDirective, StickyRelativeDirective, SyncTreeLoaderService, TIME_ZONES, TIME_ZONE_HINTS, TREE_LOADER, TREE_LOADING_NODE, USER_PROFILE_LOADER, USER_SETTINGS_LOADER, distinctUntilChangedJSONs, getFirstSegmentOfPathName, getLastSegmentOfPathName, isDefined, isNonNull, just, moveInEventLoopIteration, removeSelectAll, selectAllItem, timezoneSelectItems, toPx, transformItemToNode };
 //# sourceMappingURL=ngx-register-base.mjs.map