@rt-tools/ui-kit 0.5.0 → 0.6.0

package/fesm2022/rt-tools-ui-kit.mjs

@@ -970,17 +970,26 @@ class RtuiSideMenuComponent {
         this.#searchHeld = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#searchHeld" }] : /* istanbul ignore next */ []));
         /**
-         * Что показывает закреплённое подменю: пункт активного адреса, а если активного нет — то,
-         * что открыто сейчас. Закрепление содержимого не меняет: человек закрепляет то подменю,
-         * которое перед ним, и потерять его нажатием он не должен.
+         * Что показывает закреплённое подменю: выбранный человеком раздел, а пока выбора нет —
+         * раздел активного адреса. Само закрепление содержимого не меняет: человек закрепляет то
+         * подменю, которое перед ним, и нажатие переключателя его не отнимает.
+         *
+         * Выбор стоит впереди активности, а не позади неё, потому что иначе до соседнего раздела не
+         * добраться вовсе: пока активный пункт несёт своё подменю, оно возвращалось на любое нажатие
+         * полосы, и закреплённый человек оставался запертым в том разделе, с которого начал. Ставит и
+         * снимает выбор `#pickPinnedSubMenu`.
          */
         this.#pinnedSubMenu = computed(() => {
             if (!this.isPinned()) {
                 return [];
             }
+            const picked = this.selectedSubMenu();
+            if (picked?.length) {
+                return picked;
+            }
             const active = this.activeMenuIds();
             const activeItem = this.menuItems().find((item) => active.includes(item.id) && !!item.submenu?.length) ?? null;
-            return activeItem?.submenu ?? this.selectedSubMenu() ?? [];
+            return activeItem?.submenu ?? [];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#pinnedSubMenu" }] : /* istanbul ignore next */ []));
         /**
@@ -1089,14 +1098,19 @@ class RtuiSideMenuComponent {
      */
     #searchHeld;
     /**
-     * Что показывает закреплённое подменю: пункт активного адреса, а если активного нет — то,
-     * что открыто сейчас. Закрепление содержимого не меняет: человек закрепляет то подменю,
-     * которое перед ним, и потерять его нажатием он не должен.
+     * Что показывает закреплённое подменю: выбранный человеком раздел, а пока выбора нет —
+     * раздел активного адреса. Само закрепление содержимого не меняет: человек закрепляет то
+     * подменю, которое перед ним, и нажатие переключателя его не отнимает.
+     *
+     * Выбор стоит впереди активности, а не позади неё, потому что иначе до соседнего раздела не
+     * добраться вовсе: пока активный пункт несёт своё подменю, оно возвращалось на любое нажатие
+     * полосы, и закреплённый человек оставался запертым в том разделе, с которого начал. Ставит и
+     * снимает выбор `#pickPinnedSubMenu`.
      */
     #pinnedSubMenu;
     onClickMenu(item) {
         if (this.isPinned()) {
-            // Закреплённое подменю ведёт вход активности: нажатие пункта его не переставляет.
+            this.#pickPinnedSubMenu(item);
             this.closeMobileMenu();
             return;
         }
@@ -1206,6 +1220,30 @@ class RtuiSideMenuComponent {
     #openSubMenu() {
         this.#hoverOpened.set(true);
     }
+    /**
+     * Нажат пункт полосы, пока подменю закреплено. Наведение здесь по-прежнему не делает ничего:
+     * рука идёт вдоль полосы к подвалу и к самой панели, и переставленное наведением подменю
+     * мелькало бы разделами по дороге. Нажатие — выбор человека, и для раздела без своего адреса
+     * это единственный способ его открыть.
+     *
+     * Пункт со своим адресом и без разделов выбор снимает: человек ушёл на страницу, разделов у
+     * которой нет, и оставленная от прежнего раздела панель врала бы о том, где он стоит.
+     */
+    #pickPinnedSubMenu(item) {
+        if (item?.submenu?.length) {
+            this.selectedItem.set(item);
+            this.selectedSubMenu.set(item.submenu);
+            this.subMenuQuery.set('');
+        }
+        else if (item?.link) {
+            this.selectedItem.set(null);
+            this.selectedSubMenu.set(null);
+            this.subMenuQuery.set('');
+        }
+        else {
+            // Пункт без разделов и без своего адреса: нажимать в нём нечего, и выбор остаётся прежним.
+        }
+    }
     /** Отпускание: слушатели снимаются, а ширина уходит просьбой наружу. */
     /**
      * Конец тяги. Наружу уходит натянутая ширина, а не та, что получилась на экране: нижний
@@ -1228,7 +1266,7 @@ class RtuiSideMenuComponent {
         return width > 0 ? width : SUB_MENU_WIDTH_MIN;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E\n                                \u0446\u0432\u0435\u0442\u043D\u044B\u043C \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u0432\u0438\u0434 \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434\n                                `variant`. \u0417\u0430\u043B\u0438\u0432\u043A\u043E\u0439 \u0441\u0430\u043C\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u044D\u0442\u043E \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u2014 \u0435\u0451 \u0432\u0435\u0434\u0451\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0432\u043E\u043B\u0435\u043D \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\n                                \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440, \u0438 \u0442\u043E\u0433\u0434\u0430 \u043E\u0431\u0430 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F \u0440\u0438\u0441\u0443\u044E\u0442\u0441\u044F \u043E\u0434\u043D\u0438\u043C \u0433\u043B\u0438\u0444\u043E\u043C.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441\n            \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{position:fixed;z-index:3;left:calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width) - .25rem);width:.25rem;cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:hover{background-color:var(--rt-border-neutral-default)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);position:relative;width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:var(--rt-side-menu-sub-menu-shown-width);height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);position:relative;width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerFooterDirective, selector: "[rtuiScrollableFooter]" }, { kind: "directive", type: RtScrollToElementDirective, selector: "[rtScrollToElement]", inputs: ["rtScrollToElement", "elements"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtNavigationDirective, selector: "[rtNavigationDirective]", inputs: ["rtNavigationDirective"] }, { kind: "component", type: 
                 // components
@@ -1270,7 +1308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiButtonComponent,
                         RtuiClearButtonComponent,
                         RtuiSideMenuSubItemComponent,
-                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E\n                                \u0446\u0432\u0435\u0442\u043D\u044B\u043C \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u0432\u0438\u0434 \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434\n                                `variant`. \u0417\u0430\u043B\u0438\u0432\u043A\u043E\u0439 \u0441\u0430\u043C\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u044D\u0442\u043E \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u2014 \u0435\u0451 \u0432\u0435\u0434\u0451\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0432\u043E\u043B\u0435\u043D \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\n                                \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440, \u0438 \u0442\u043E\u0433\u0434\u0430 \u043E\u0431\u0430 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F \u0440\u0438\u0441\u0443\u044E\u0442\u0441\u044F \u043E\u0434\u043D\u0438\u043C \u0433\u043B\u0438\u0444\u043E\u043C.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441\n            \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{position:fixed;z-index:3;left:calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width) - .25rem);width:.25rem;cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:hover{background-color:var(--rt-border-neutral-default)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);position:relative;width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:var(--rt-side-menu-sub-menu-shown-width);height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
+                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);position:relative;width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
@@ -1366,6 +1404,8 @@ class RtAsideService {
     #destroyRef = inject(DestroyRef);
     /** Источник открытий: метод толкает сюда поток закрытия новой панели, и больше ничего. */
     #closesSource = new Subject();
+    /** Открытые сейчас панели: по гибели того, кто службу выдал, снимать нужно каждую. */
+    #open = new Set();
     /**
      * Закрытие каждой открытой панели объявлено один раз, а не заводится вызовом открытия.
      *
@@ -1374,6 +1414,7 @@ class RtAsideService {
      */
     constructor() {
         this.#closesSource.pipe(mergeAll(), takeUntilDestroyed(this.#destroyRef)).subscribe();
+        this.#destroyRef.onDestroy(() => this.#closeOpened());
     }
     /**
      * Opens an aside panel with a specified component, position, and data.
@@ -1394,6 +1435,7 @@ class RtAsideService {
         const asideRef = new AsideRef(answer, overlayRef, component, position, data);
         const portal = this.#createPortal(asideRef);
         const componentRef = overlayRef.attach(portal);
+        this.#open.add(overlayRef);
         this.#closesSource.next(this.#closeOnFirstEvent(overlayRef, componentRef, answer, config));
         return answer ? answer.asObservable() : of(null);
     }
@@ -1405,6 +1447,7 @@ class RtAsideService {
      */
     #closeOnFirstEvent(overlayRef, componentRef, answer, config) {
         return merge(this.#closesOf(overlayRef, config), this.#router.events.pipe(filter((e) => e instanceof NavigationEnd)), answer.pipe(delay(10))).pipe(take(1), tap(() => {
+            this.#open.delete(overlayRef);
             componentRef.instance.startExitAnimation();
             overlayRef.detach();
             answer.complete();
@@ -1412,6 +1455,24 @@ class RtAsideService {
             overlayRef.dispose();
         }));
     }
+    /**
+     * Снятие всех открытых панелей по гибели того, кто службу выдал.
+     *
+     * Службу кладут в компонент экрана, и маршрутизатор гасит компонент раньше, чем издаёт смену
+     * маршрута: подписка на закрытия рвётся вместе с ним, событие приходит некому, а панель с
+     * подложкой остаётся поверх нового экрана — ни подложка, ни клавиша, ни кнопка внутри уже не
+     * работают. Здесь панель снимается прямо гибелью владельца, не дожидаясь события.
+     *
+     * Без выхода анимацией: содержимое панели гибнет вместе с тем, кто её открыл, и показывать
+     * выход уже нечем.
+     */
+    #closeOpened() {
+        for (const overlayRef of this.#open) {
+            overlayRef.detach();
+            overlayRef.dispose();
+        }
+        this.#open.clear();
+    }
     /**
      * Источники закрытия, которые потребитель разрешил настройкой открытия.
      *
@@ -2740,9 +2801,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'rtui-dynamic-selector-list-actions', host: { class: BEM_BLOCK$g }, imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective, MatIconButton, MatTooltip], providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"narrow()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"] }]
         }], propDecorators: { isResetButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetButtonDisabled", required: true }] }], isClearButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearButtonDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], clearAction: [{ type: i0.Output, args: ["clearAction"] }] } });
 
+/** Вид поля, с которым семейство рисовалось до того, как настройка появилась. */
+const DEFAULT_APPEARANCE = 'fill';
 class RtuiDynamicSelectorsDirective {
     constructor() {
         this.#breakpoints = inject(BreakpointService);
+        /** App-wide defaults; the resolution order is: instance input → `components.dynamicSelectors` → library default. */
+        this.#config = inject(RT_UI_CONFIG);
         /** Экран узкий: замер кита, и другого источника у этого признака нет. */
         this.narrow = computed(() => !!this.#breakpoints.isMobile(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
@@ -2765,11 +2830,28 @@ class RtuiDynamicSelectorsDirective {
         this.placeholderIcon = input('', { ...(ngDevMode ? { debugName: "placeholderIcon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Placeholder description */
         this.placeholderDescription = input('', { ...(ngDevMode ? { debugName: "placeholderDescription" } : /* istanbul ignore next */ {}), transform: transformStringInput });
-        /** Material elements appearance */
-        this.appearance = input('fill', /* @ts-ignore */
+        /**
+         * Material elements appearance.
+         *
+         * Пустота умолчанием, а не прежнее значение: значение, оставленное умолчанием входа, побеждает
+         * настройку всегда — вход задан, и цепочка разрешения на нём кончается, а настройка не
+         * срабатывает ни разу и выглядит сломанной.
+         */
+        this.appearance = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * Вид поля, с которым семейство рисуется: вход на месте, потом раздел настройки, потом
+         * умолчание кита.
+         *
+         * Считается один раз здесь, а шаблоны читают готовое: повторённая в каждом из пяти шаблонов
+         * семейства, эта цепочка разъехалась бы с настройкой в первом же месте, куда забыли заглянуть.
+         */
+        this.resolvedAppearance = computed(() => this.appearance() ?? this.#config.components?.dynamicSelectors?.appearance ?? DEFAULT_APPEARANCE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
     }
     #breakpoints;
+    /** App-wide defaults; the resolution order is: instance input → `components.dynamicSelectors` → library default. */
+    #config;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
@@ -3223,7 +3305,13 @@ class RtuiDynamicSelectorSelectedListComponent {
         this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is items editable */
         this.isItemsEditable = input(false, { ...(ngDevMode ? { debugName: "isItemsEditable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Material elements appearance */
+        /**
+         * Material elements appearance.
+         *
+         * Значение приходит уже разрешённым — от того, кто список рисует: вложенный компонент,
+         * разрешающий вид заново, заводит свою цепочку, и вид поля внутри списка отличается от вида
+         * поля под ним. Прежнее умолчание оставлено на случай одиночного употребления списка.
+         */
         this.appearance = input('fill', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         this.deleteFromSelectedAction = output();
@@ -3619,7 +3707,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                 useExisting: RtuiDynamicSelectorComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleProjectionDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: 
+        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleProjectionDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [appearance]=\"resolvedAppearance()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"resolvedAppearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtEscapeKeyDirective, selector: "[rtEscapeKey]", outputs: ["escapeKeyAction"] }, { kind: "directive", type: RtuiDynamicSelectorItemAdditionalControlDirective, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]" }, { kind: "directive", type: RtuiDynamicSelectorItemTitleDirective, selector: "[rtuiDynamicSelectorItemTitleDirective]" }, { kind: "component", type: 
                 // components
@@ -3656,7 +3744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: RtuiDynamicSelectorComponent,
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\n"] }]
+                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [appearance]=\"resolvedAppearance()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"resolvedAppearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\n"] }]
         }], propDecorators: { keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], isSelectionAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectionAvailable", required: false }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], isOpenPopupButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpenPopupButtonShown", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], additionalControlChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalControlChanged", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], selectionChangeAction: [{ type: i0.Output, args: ["selectionChangeAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorAdditionalControlDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], itemTitleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemTitleProjectionDirective), { ...{
@@ -5423,7 +5511,7 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
                 useExisting: RtuiDynamicInputComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button\n                        type=\"button\"\n                        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                        (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
+        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"resolvedAppearance()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if (isInputControlShown()) {\n                <mat-form-field [appearance]=\"resolvedAppearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button\n                        type=\"button\"\n                        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                        (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
                 // material
                 MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: 
                 // directives
@@ -5461,7 +5549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: RtuiDynamicInputComponent,
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button\n                        type=\"button\"\n                        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                        (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"] }]
+                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"resolvedAppearance()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if (isInputControlShown()) {\n                <mat-form-field [appearance]=\"resolvedAppearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button\n                        type=\"button\"\n                        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                        (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"] }]
         }], propDecorators: { isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }, { type: i0.Output, args: ["isPlaceholderShownChange"] }], isInputsEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInputsEditable", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicInputAdditionalControlDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }] } });