@rt-tools/ui-kit-v2 0.18.0 → 0.19.1

package/fesm2022/rt-tools-ui-kit-v2-side-menu.mjs

@@ -723,7 +723,7 @@ class RtSideMenuSubItemComponent {
         this.menuRef.toggleFolder(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuSubItemComponent, isStandalone: true, selector: "rt-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, inFavorites: { classPropertyName: "inFavorites", publicName: "inFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rt-side-menu-sub-item" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu-sub-item\">\n    <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: item(), depth: 0 }\" />\n    <ng-template #rowTpl let-row let-depth=\"depth\">\n        @let isActive = menuRef.activeMenuIds().includes(row.id);\n        @let isHighlighted = !inFavorites() && menuRef.highlightedMenuId() === row.id;\n        @if (row.link) {\n            <!--\n                \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0431\u0435\u0437 \u043D\u043E\u043C\u0435\u0440\u0430: \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443 \u0441\u043F\u0438\u0441\u043A\u0430. \u0418 \u0431\u0435\u0437\n                \u0440\u043E\u0434\u043D\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F \u0441\u0441\u044B\u043B\u043A\u0438: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0440\u0443\u0447\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u0438\u0440\u0430\u043B \u0441\u0435\u0431\u0435,\n                \u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043D\u0435 \u043D\u0430\u0447\u0438\u043D\u0430\u043B\u043E\u0441\u044C.\n            -->\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"side-menu-sub-item\"\n                [id]=\"inFavorites() ? null : row.id\"\n                [attr.draggable]=\"inFavorites() ? 'false' : null\"\n                [routerLink]=\"row.link\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ active: isActive, highlighted: isHighlighted }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickSubMenu(row, $event)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    <!-- \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0433\u043E\u043B\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u043B\u0430 \u0431\u044B \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438. -->\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <!--\n                    \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u043D\u0435\u0441\u0451\u0442 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C. \u0417\u0432\u0435\u0437\u0434\u0430 \u2014\n                    \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u0441 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u044B\u043C: \u043F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C,\n                    \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C. \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435.\n                -->\n                @if (inFavorites() && favoritesIcons) {\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-remove\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ remove: true }\"\n                        [icon]=\"favoritesIcons.remove\"\n                        [ariaLabel]=\"removeLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : removeLabel()\"\n                        (clicked)=\"onRemoveFavorite(row, $event)\" />\n                } @else if (favoritesOn() && !row.favoriteDisabled) {\n                    @let isFavorite = favoriteIds().includes(row.id);\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-star\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ on: isFavorite }\"\n                        [icon]=\"isFavorite ? 'star-fill' : 'star'\"\n                        [iconFill]=\"isFavorite\"\n                        [ariaLabel]=\"isFavorite ? removeLabel() : addLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : isFavorite ? removeLabel() : addLabel()\"\n                        (clicked)=\"onToggleFavorite(row, $event)\" />\n                }\n\n                <!-- \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443. -->\n                <ng-content select=\"[rtSideMenuSubItemAction]\" />\n\n                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439: \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439. -->\n                @if (row.iconButton?.icon; as buttonIcon) {\n                    <!-- \u0418\u043C\u044F \u0431\u0435\u0437 \u0437\u043D\u0430\u0447\u043A\u0430 \u043A\u0438\u0442\u0430 \u0431\u0435\u0440\u0451\u0442 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E, \u043A\u0430\u043A \u0437\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438. \u0411\u0435\u0437 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0430 \u043F\u0443\u0441\u0442\u0430 \u0438\n                         \u043D\u0435\u0437\u043D\u0430\u043A\u043E\u043C\u043E\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u0437\u043D\u0430\u0447\u043A\u0443 \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442: \u0437\u043D\u0430\u0447\u043A\u0430 \u0441 \u0442\u0430\u043A\u0438\u043C \u0438\u043C\u0435\u043D\u0435\u043C \u043D\u0435\u0442, \u0438 \u0436\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u043D\u0435\u043A\u043E\u043C\u0443. -->\n                    @let buttonKitIcon = buttonIcon | rtSideMenuIcon;\n                    @let buttonOwnTpl = buttonKitIcon ? null : menuRef.ownIconTpl();\n                    <rt-icon-button\n                        rtElem=\"action\"\n                        qa-dataid=\"side-menu-sub-item-action\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [icon]=\"buttonKitIcon\"\n                        [ariaLabel]=\"row.name ?? ''\"\n                        (clicked)=\"onClickSubMenuAdditional(row, $event)\">\n                        @if (buttonOwnTpl) {\n                            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-button-icon\" aria-hidden=\"true\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"buttonOwnTpl\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row, icon: buttonIcon, slot: 'iconButton' }\" />\n                            </span>\n                        }\n                    </rt-icon-button>\n                }\n            </a>\n        } @else if (row.submenu) {\n            <!--\n                \u041F\u0430\u043F\u043A\u0430 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A\n                \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E. \u0428\u0435\u0432\u0440\u043E\u043D\u0430 \u0443 \u0442\u0430\u043A\u043E\u0439 \u043F\u0430\u043F\u043A\u0438 \u043D\u0435\u0442 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E. \u0420\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435\n                \u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u0435\u043D\u044E: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043E\u043E\u0431\u0449\u0430\u0435\u0442 \u043E \u043D\u0430\u0436\u0430\u0442\u0438\u0438, \u043C\u0435\u043D\u044E \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u043F\u0430\u043F\u043A\u0443. \u041A\u043D\u043E\u043F\u043A\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430\n                \u043E\u0442\u0434\u0430\u043D \u043D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u043F\u043E \u043D\u0435\u043C\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043C\u0435\u043D\u044E \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443.\n            -->\n            @let isOpen = menuRef.expandedMenuIds().includes(row.id);\n            <rt-expansion-panel\n                rtElem=\"folder\"\n                appearance=\"plain\"\n                [headerId]=\"'' + row.id\"\n                [hideToggle]=\"!row.submenu.length\"\n                [expanded]=\"isOpen\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ highlighted: isHighlighted }\"\n                (expandedChange)=\"onToggleFolder(row)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" qa-dataid=\"side-menu-folder\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <ng-template rtExpansionPanelContent>\n                    <div rtElem=\"children\" role=\"group\">\n                        @for (child of row.submenu; track child.id) {\n                            <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </div>\n                </ng-template>\n            </rt-expansion-panel>\n        }\n    </ng-template>\n\n    <!-- \u0417\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438: \u0438\u043C\u044F \u043A\u0438\u0442\u0430 \u0438\u043B\u0438 \u043F\u0430\u0440\u0430 \u0438\u043C\u0435\u043D\u0438 Material, \u0430 \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E. -->\n    <ng-template #iconTpl let-row>\n        @let kitIcon = row.icon | rtSideMenuIcon;\n        @if (kitIcon) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"kitIcon\" />\n        } @else if (menuRef.ownIconTpl(); as own) {\n            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: row, icon: row.icon, slot: 'icon' }\" />\n            </span>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-sub-item{--rt-side-menu-sub-item-radius: var(--rt-radius-full);--rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);--rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);--rt-side-menu-sub-item-match-color: var(--rt-neutral-950);--rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);display:block}.rt-side-menu-sub-item__row{--rt-side-menu-sub-item-depth: 0;display:flex;width:100%;min-height:var(--rt-control-height-md);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-sub-item-radius);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-sm);padding-block:var(--rt-space-2);padding-inline:calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-space-sm);text-align:start;text-decoration:none;transition:background-color var(--rt-side-menu-sub-item-transition-duration) ease}.rt-side-menu-sub-item__row:hover,.rt-side-menu-sub-item__row:active,.rt-side-menu-sub-item__row--highlighted{background:var(--rt-color-bg-hover)}.rt-side-menu-sub-item__row:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu-sub-item__row--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu-sub-item__icon{flex-shrink:0;color:inherit}.rt-side-menu-sub-item__own-icon{--rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);display:inline-flex;width:var(--rt-side-menu-sub-item-own-icon-size);height:var(--rt-side-menu-sub-item-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu-sub-item__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu-sub-item__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-sub-item__part{color:inherit}.rt-side-menu-sub-item__match{border-radius:var(--rt-side-menu-sub-item-match-radius);background:var(--rt-side-menu-sub-item-match-bg);color:var(--rt-side-menu-sub-item-match-color)}.rt-side-menu-sub-item__action{--rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);--rt-side-menu-sub-item-action-radius: var(--rt-radius-full);flex-shrink:0;border-radius:var(--rt-side-menu-sub-item-action-radius);outline:var(--rt-side-menu-sub-item-action-ring-width) solid transparent;outline-offset:calc(var(--rt-side-menu-sub-item-action-ring-width) * -1)}.rt-side-menu-sub-item__action:hover{outline-color:var(--rt-color-border-strong)}.rt-side-menu-sub-item__favorite{flex-shrink:0;opacity:0}.rt-side-menu-sub-item__favorite--on{--rt-icon-button-color: var(--rt-color-action-primary);opacity:1}@media(hover:hover){.rt-side-menu-sub-item__favorite--remove:hover{--rt-icon-button-color: var(--rt-color-state-danger)}}.rt-side-menu-sub-item__favorite--remove:has(:focus-visible){--rt-icon-button-color: var(--rt-color-state-danger)}@media(hover:none){.rt-side-menu-sub-item__favorite{opacity:1}}.rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{opacity:1}.rt-side-menu-sub-item__folder.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);--rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth)));--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-bg: transparent}.rt-side-menu-sub-item__folder--highlighted.rt-expansion-panel{--rt-expansion-panel-header-bg: var(--rt-color-bg-hover)}.rt-side-menu-sub-item__children{display:flex;flex-direction:column}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on){overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{overflow:visible;width:auto;margin-inline-start:0}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtExpansionPanelComponent, selector: "rt-expansion-panel", inputs: ["expanded", "disabled", "hideToggle", "appearance", "headerId", "ariaLabel"], outputs: ["expandedChange"] }, { kind: "directive", type: RtExpansionPanelContentDirective, selector: "ng-template[rtExpansionPanelContent]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: RtSideMenuTitlePartsPipe, name: "rtSideMenuTitleParts" }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuSubItemComponent, isStandalone: true, selector: "rt-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, inFavorites: { classPropertyName: "inFavorites", publicName: "inFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rt-side-menu-sub-item" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu-sub-item\">\n    <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: item(), depth: 0 }\" />\n    <ng-template #rowTpl let-row let-depth=\"depth\">\n        @let isActive = menuRef.activeMenuIds().includes(row.id);\n        @let isHighlighted = !inFavorites() && menuRef.highlightedMenuId() === row.id;\n        @if (row.link) {\n            <!--\n                \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0431\u0435\u0437 \u043D\u043E\u043C\u0435\u0440\u0430: \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443 \u0441\u043F\u0438\u0441\u043A\u0430. \u0418 \u0431\u0435\u0437\n                \u0440\u043E\u0434\u043D\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F \u0441\u0441\u044B\u043B\u043A\u0438: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0440\u0443\u0447\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u0438\u0440\u0430\u043B \u0441\u0435\u0431\u0435,\n                \u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043D\u0435 \u043D\u0430\u0447\u0438\u043D\u0430\u043B\u043E\u0441\u044C.\n            -->\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"side-menu-sub-item\"\n                [id]=\"inFavorites() ? null : row.id\"\n                [attr.draggable]=\"inFavorites() ? 'false' : null\"\n                [routerLink]=\"row.link\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ active: isActive, highlighted: isHighlighted }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickSubMenu(row, $event)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    <!-- \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0433\u043E\u043B\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u043B\u0430 \u0431\u044B \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438. -->\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <!--\n                    \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u043D\u0435\u0441\u0451\u0442 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C. \u0417\u0432\u0435\u0437\u0434\u0430 \u2014\n                    \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u0441 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u044B\u043C: \u043F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C,\n                    \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C. \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435.\n                -->\n                @if (inFavorites() && favoritesIcons) {\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-remove\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ remove: true }\"\n                        [icon]=\"favoritesIcons.remove\"\n                        [ariaLabel]=\"removeLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : removeLabel()\"\n                        (clicked)=\"onRemoveFavorite(row, $event)\" />\n                } @else if (favoritesOn() && !row.favoriteDisabled) {\n                    @let isFavorite = favoriteIds().includes(row.id);\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-star\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ on: isFavorite }\"\n                        [icon]=\"isFavorite ? 'star-fill' : 'star'\"\n                        [iconFill]=\"isFavorite\"\n                        [ariaLabel]=\"isFavorite ? removeLabel() : addLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : isFavorite ? removeLabel() : addLabel()\"\n                        (clicked)=\"onToggleFavorite(row, $event)\" />\n                }\n\n                <!-- \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443. -->\n                <ng-content select=\"[rtSideMenuSubItemAction]\" />\n\n                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439: \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439. -->\n                @if (row.iconButton?.icon; as buttonIcon) {\n                    <!-- \u0418\u043C\u044F \u0431\u0435\u0437 \u0437\u043D\u0430\u0447\u043A\u0430 \u043A\u0438\u0442\u0430 \u0431\u0435\u0440\u0451\u0442 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E, \u043A\u0430\u043A \u0437\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438. \u0411\u0435\u0437 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0430 \u043F\u0443\u0441\u0442\u0430 \u0438\n                         \u043D\u0435\u0437\u043D\u0430\u043A\u043E\u043C\u043E\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u0437\u043D\u0430\u0447\u043A\u0443 \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442: \u0437\u043D\u0430\u0447\u043A\u0430 \u0441 \u0442\u0430\u043A\u0438\u043C \u0438\u043C\u0435\u043D\u0435\u043C \u043D\u0435\u0442, \u0438 \u0436\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u043D\u0435\u043A\u043E\u043C\u0443. -->\n                    @let buttonKitIcon = buttonIcon | rtSideMenuIcon;\n                    @let buttonOwnTpl = buttonKitIcon ? null : menuRef.ownIconTpl();\n                    <rt-icon-button\n                        rtElem=\"action\"\n                        qa-dataid=\"side-menu-sub-item-action\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [icon]=\"buttonKitIcon\"\n                        [ariaLabel]=\"row.name ?? ''\"\n                        (clicked)=\"onClickSubMenuAdditional(row, $event)\">\n                        @if (buttonOwnTpl) {\n                            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-button-icon\" aria-hidden=\"true\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"buttonOwnTpl\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row, icon: buttonIcon, slot: 'iconButton' }\" />\n                            </span>\n                        }\n                    </rt-icon-button>\n                }\n            </a>\n        } @else if (row.submenu) {\n            <!--\n                \u041F\u0430\u043F\u043A\u0430 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A\n                \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E. \u0428\u0435\u0432\u0440\u043E\u043D\u0430 \u0443 \u0442\u0430\u043A\u043E\u0439 \u043F\u0430\u043F\u043A\u0438 \u043D\u0435\u0442 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E. \u0420\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435\n                \u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u0435\u043D\u044E: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043E\u043E\u0431\u0449\u0430\u0435\u0442 \u043E \u043D\u0430\u0436\u0430\u0442\u0438\u0438, \u043C\u0435\u043D\u044E \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u043F\u0430\u043F\u043A\u0443. \u041A\u043D\u043E\u043F\u043A\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430\n                \u043E\u0442\u0434\u0430\u043D \u043D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u043F\u043E \u043D\u0435\u043C\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043C\u0435\u043D\u044E \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443.\n            -->\n            @let isOpen = menuRef.expandedMenuIds().includes(row.id);\n            <rt-expansion-panel\n                rtElem=\"folder\"\n                appearance=\"plain\"\n                [headerId]=\"'' + row.id\"\n                [hideToggle]=\"!row.submenu.length\"\n                [expanded]=\"isOpen\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ highlighted: isHighlighted }\"\n                (expandedChange)=\"onToggleFolder(row)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" qa-dataid=\"side-menu-folder\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <ng-template rtExpansionPanelContent>\n                    <div rtElem=\"children\" role=\"group\">\n                        @for (child of row.submenu; track child.id) {\n                            <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </div>\n                </ng-template>\n            </rt-expansion-panel>\n        }\n    </ng-template>\n\n    <!-- \u0417\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438: \u0438\u043C\u044F \u043A\u0438\u0442\u0430 \u0438\u043B\u0438 \u043F\u0430\u0440\u0430 \u0438\u043C\u0435\u043D\u0438 Material, \u0430 \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E. -->\n    <ng-template #iconTpl let-row>\n        @let kitIcon = row.icon | rtSideMenuIcon;\n        @if (kitIcon) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"kitIcon\" />\n        } @else if (menuRef.ownIconTpl(); as own) {\n            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: row, icon: row.icon, slot: 'icon' }\" />\n            </span>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-sub-item{--rt-side-menu-sub-item-radius: var(--rt-radius-full);--rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);--rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);--rt-side-menu-sub-item-match-color: var(--rt-neutral-950);--rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);display:block}.rt-side-menu-sub-item__row{--rt-side-menu-sub-item-depth: 0;display:flex;width:100%;min-height:var(--rt-control-height-md);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-sub-item-radius);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-sm);padding-block:var(--rt-space-2);padding-inline:calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-space-sm);text-align:start;text-decoration:none;transition:background-color var(--rt-side-menu-sub-item-transition-duration) ease}.rt-side-menu-sub-item__row:hover,.rt-side-menu-sub-item__row:active,.rt-side-menu-sub-item__row--highlighted{background:var(--rt-color-bg-hover)}.rt-side-menu-sub-item__row:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu-sub-item__row--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu-sub-item__icon{flex-shrink:0;color:inherit}.rt-side-menu-sub-item__own-icon{--rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);display:inline-flex;width:var(--rt-side-menu-sub-item-own-icon-size);height:var(--rt-side-menu-sub-item-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu-sub-item__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu-sub-item__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-sub-item__part{color:inherit}.rt-side-menu-sub-item__match{border-radius:var(--rt-side-menu-sub-item-match-radius);background:var(--rt-side-menu-sub-item-match-bg);color:var(--rt-side-menu-sub-item-match-color)}.rt-side-menu-sub-item__action{--rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);--rt-side-menu-sub-item-action-radius: var(--rt-radius-full);flex-shrink:0;border-radius:var(--rt-side-menu-sub-item-action-radius);outline:var(--rt-side-menu-sub-item-action-ring-width) solid transparent;outline-offset:calc(var(--rt-side-menu-sub-item-action-ring-width) * -1)}.rt-side-menu-sub-item__action:hover{outline-color:var(--rt-color-border-strong)}.rt-side-menu-sub-item__favorite{flex-shrink:0;opacity:0}.rt-side-menu-sub-item__favorite--on{--rt-icon-button-color: var(--rt-color-action-primary);opacity:1}@media(hover:hover){.rt-side-menu-sub-item__favorite--remove:hover{--rt-icon-button-color: var(--rt-color-state-danger)}}.rt-side-menu-sub-item__favorite--remove:has(:focus-visible){--rt-icon-button-color: var(--rt-color-state-danger)}@media(hover:none){.rt-side-menu-sub-item__favorite{opacity:1}}.rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{opacity:1}.rt-side-menu-sub-item__folder.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);--rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth)));--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-bg: transparent}.rt-side-menu-sub-item__folder--highlighted.rt-expansion-panel{--rt-expansion-panel-header-bg: var(--rt-color-bg-hover)}.rt-side-menu-sub-item__children{display:flex;flex-direction:column}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on){overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{overflow:visible;width:auto;margin-inline-start:0}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtExpansionPanelComponent, selector: "rt-expansion-panel", inputs: ["expanded", "disabled", "hideToggle", "appearance", "headerId", "ariaLabel"], outputs: ["expandedChange"] }, { kind: "directive", type: RtExpansionPanelContentDirective, selector: "ng-template[rtExpansionPanelContent]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: RtSideMenuTitlePartsPipe, name: "rtSideMenuTitleParts" }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuSubItemComponent, decorators: [{
             type: Component,
@@ -891,7 +891,7 @@ class RtSideMenuFavoritesComponent {
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtExpansionPanelContentDirective, selector: "ng-template[rtExpansionPanelContent]" }, { kind: "component", type: 
                 // components
-                RtExpansionPanelComponent, selector: "rt-expansion-panel", inputs: ["expanded", "disabled", "hideToggle", "appearance", "headerId", "ariaLabel"], outputs: ["expandedChange"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtSideMenuSubItemComponent, selector: "rt-side-menu-sub-item", inputs: ["item", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                RtExpansionPanelComponent, selector: "rt-expansion-panel", inputs: ["expanded", "disabled", "hideToggle", "appearance", "headerId", "ariaLabel"], outputs: ["expandedChange"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtSideMenuSubItemComponent, selector: "rt-side-menu-sub-item", inputs: ["item", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuFavoritesComponent, decorators: [{
             type: Component,
@@ -1450,7 +1450,7 @@ class RtSideMenuComponent {
         rows.find((row) => row.id === String(item.id))?.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuComponent, isStandalone: true, selector: "rt-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 }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, favoritesCount: { classPropertyName: "favoritesCount", publicName: "favoritesCount", isSignal: true, isRequired: false, transformFunction: null }, favoriteActionsReserve: { classPropertyName: "favoriteActionsReserve", publicName: "favoriteActionsReserve", isSignal: true, isRequired: false, transformFunction: null }, isFavoritesSearchShown: { classPropertyName: "isFavoritesSearchShown", publicName: "isFavoritesSearchShown", isSignal: true, isRequired: false, transformFunction: null }, pinShown: { classPropertyName: "pinShown", publicName: "pinShown", isSignal: true, isRequired: false, transformFunction: null }, subMenuTooltipsShown: { classPropertyName: "subMenuTooltipsShown", publicName: "subMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", subMenuResizeStart: "subMenuResizeStart", subMenuResizeEnd: "subMenuResizeEnd", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rt-side-menu--pinned": "isPinned()", "style.--rt-side-menu-panel-dragged-width": "panelWidthStyle()", "class.rt-side-menu--favorite-actions-none": "favoriteActionsReserve() === 'none'" }, classAttribute: "rt-side-menu" }, providers: [{ provide: RT_SIDE_MENU, useExisting: RtSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ownIconTpl", first: true, predicate: RtSideMenuIconDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu\">\n    @if (narrow()) {\n        <!-- \u0423\u0437\u043A\u0438\u0439 \u044D\u043A\u0440\u0430\u043D: \u043E\u0434\u0438\u043D \u0441\u0442\u043E\u043B\u0431\u0435\u0446 \u2014 \u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u043F\u0443\u043D\u043A\u0442\u044B \u0438\u043B\u0438 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043D\u0430\u0437\u0430\u0434. -->\n        <rt-scroll-area rtElem=\"mobile\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                @if (selectedSubMenu()?.length) {\n                    <div rtElem=\"mobile-sub\">\n                        <button type=\"button\" rtElem=\"back\" qa-dataid=\"side-menu-back\" (click)=\"onBackToMainMenu()\">\n                            <rt-icon rtElem=\"back-icon\" size=\"sm\" name=\"arrow-left\" />\n                            <span rtElem=\"back-label\">{{ backLabel() }}</span>\n                        </button>\n\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </div>\n                } @else {\n                    <nav rtElem=\"mobile-list\">\n                        @for (item of menuItems(); track item.id) {\n                            <ng-container [ngTemplateOutlet]=\"mobileItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                        }\n                    </nav>\n                }\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n    } @else {\n        <rt-scroll-area rtElem=\"rail\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                <nav rtElem=\"rail-list\">\n                    @for (item of menuItems(); track item.id) {\n                        <ng-container [ngTemplateOutlet]=\"railItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                    }\n                </nav>\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n\n        @if (subMenuOpened()) {\n            @if (isSearchHeld()) {\n                <!-- \u041F\u043E\u0434\u043B\u043E\u0436\u043A\u0430 \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0439 \u043F\u0430\u043D\u0435\u043B\u0438: \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0432\u0437\u044F\u0442\u043E\u0435 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430, \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0441\u043D\u0430\u0440\u0443\u0436\u0438. -->\n                <div\n                    rtElem=\"backdrop\"\n                    qa-dataid=\"side-menu-backdrop\"\n                    tabindex=\"-1\"\n                    (click)=\"closeSubMenu()\"\n                    (keydown.escape)=\"closeSubMenu()\"></div>\n            }\n\n            <div\n                #panel\n                rtElem=\"panel\"\n                qa-dataid=\"side-menu-panel\"\n                [rtMod]=\"{ pinned: isPinned(), held: isSearchHeld() }\"\n                (mouseleave)=\"toggleSubMenu()\">\n                <div rtElem=\"panel-head\">\n                    <rt-input\n                        rtElem=\"search\"\n                        qa-dataid=\"side-menu-search\"\n                        size=\"sm\"\n                        iconLeft=\"search\"\n                        [placeholder]=\"searchLabel()\"\n                        [ariaLabel]=\"searchLabel()\"\n                        [formControl]=\"searchControl\"\n                        (focusin)=\"onSearchHold()\"\n                        (keydown)=\"onSearchKeydown($event)\" />\n\n                    @if (pinShown()) {\n                        <rt-icon-button\n                            rtElem=\"pin\"\n                            qa-dataid=\"side-menu-pin\"\n                            size=\"sm\"\n                            icon=\"pin\"\n                            [iconFill]=\"isPinned()\"\n                            [active]=\"isPinned()\"\n                            [ariaLabel]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            [tooltip]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            (clicked)=\"onSubMenuModeToggle()\" />\n                    }\n                </div>\n\n                <rt-scroll-area rtElem=\"panel-body\">\n                    <ng-container *rtScrollAreaContent>\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </ng-container>\n                </rt-scroll-area>\n            </div>\n\n            @if (isPinned()) {\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 \u0443\u0445\u043E\u0434\u0438\u0442 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430. -->\n                <div\n                    rtElem=\"resizer\"\n                    qa-dataid=\"side-menu-resize\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"resizeLabel()\"\n                    [attr.aria-valuenow]=\"resizeValueNow()\"\n                    [attr.aria-valuemin]=\"resizeValueNow() === null ? null : resizeValueMin\"\n                    [attr.aria-valuemax]=\"resizeValueNow() === null ? null : resizeValueMax\"\n                    (pointerdown)=\"onResizeStart($event)\"\n                    (keydown)=\"onResizeKeydown($event)\"></div>\n            }\n        }\n    }\n    <ng-template #subMenuTpl>\n        @if (narrow()) {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"side-menu-search\"\n                size=\"sm\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchLabel()\"\n                [ariaLabel]=\"searchLabel()\"\n                [formControl]=\"searchControl\"\n                (keydown)=\"onSearchKeydown($event)\" />\n        }\n\n        @if (isNothingFound()) {\n            <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel() }}</div>\n        }\n\n        <div rtElem=\"sub-list\">\n            <!-- \u0411\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430: \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u0438 \u0431\u0435\u0437 \u0441\u0442\u0440\u043E\u043A \u043C\u0435\u0441\u0442\u0430 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442. -->\n            <rt-side-menu-favorites\n                (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n\n            @for (item of visibleSubMenuItems(); track item.id) {\n                <rt-side-menu-sub-item\n                    [item]=\"item\"\n                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                    (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #railItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link) {\n            <a\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-expanded]=\"item.submenu?.length ? subMenuOpened() && selectedItem() === item : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #railItemBodyTpl let-item>\n        @if (item.icon) {\n            <!-- \u0418\u043C\u044F Material \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0435\u0439 \u043F\u0430\u0440\u043E\u0439; \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0438\u043C \u0448\u0430\u0431\u043B\u043E\u043D\u043E\u043C \u043C\u0435\u043D\u044E. -->\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            <span rtElem=\"rail-icon\">\n                @if (kitIcon) {\n                    <rt-icon [name]=\"kitIcon\" />\n                } @else if (ownIconTpl(); as own) {\n                    <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"own\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                    </span>\n                }\n            </span>\n        }\n\n        @if (item.name) {\n            <span rtElem=\"rail-title\">{{ item.name }}</span>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link && !item.submenu?.length) {\n            <a\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemBodyTpl let-item>\n        @if (item.icon) {\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            @if (kitIcon) {\n                <rt-icon rtElem=\"mobile-icon\" [name]=\"kitIcon\" />\n            } @else if (ownIconTpl(); as own) {\n                <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                    <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                </span>\n            }\n        }\n\n        <span rtElem=\"mobile-title\" [rtTooltip]=\"item.name\">{{ item.name }}</span>\n\n        @if (item.submenu?.length) {\n            <!-- \u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0443 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u0432\u043E\u0434\u0438\u0442 \u0432 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0430 \u043D\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435. -->\n            <rt-icon rtElem=\"mobile-chevron\" size=\"sm\" name=\"arrow-right\" />\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu{--rt-side-menu-rail-width: 5.5rem;--rt-side-menu-panel-width: 15rem;--rt-side-menu-panel-held-width: 30rem;--rt-side-menu-mobile-width: 15rem;--rt-side-menu-panel-radius: var(--rt-radius-lg);--rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);--rt-side-menu-item-radius: var(--rt-radius-full);--rt-side-menu-resizer-border-width: var(--rt-border-width-thick);--rt-side-menu-panel-border-width: var(--rt-border-width-thin);--rt-side-menu-transition-duration: var(--rt-duration-fast);--rt-side-menu-panel-dragged-width: 0px;--rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));position:relative;display:flex;height:100%;color:var(--rt-color-text-primary)}.rt-side-menu__rail{max-width:var(--rt-side-menu-rail-width);height:100%;box-sizing:border-box;flex:0 0 var(--rt-side-menu-rail-width);border-right:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface)}.rt-side-menu__rail .rt-scroll-area__body{padding-inline:var(--rt-space-1)}.rt-side-menu__rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--rt-space-md);padding-block:var(--rt-space-sm)}.rt-side-menu__rail-item{display:flex;width:100%;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-1);text-decoration:none}.rt-side-menu__rail-item:focus-visible{outline:none}.rt-side-menu__rail-item:focus-visible .rt-side-menu__rail-icon{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-side-menu__rail-item:hover .rt-side-menu__rail-icon,.rt-side-menu__rail-item:active .rt-side-menu__rail-icon{background:var(--rt-color-bg-hover)}.rt-side-menu__rail-item--active .rt-side-menu__rail-icon,.rt-side-menu__rail-item--active:hover .rt-side-menu__rail-icon{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__rail-icon{display:flex;width:3.5rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--rt-side-menu-item-radius);transition:background-color var(--rt-side-menu-transition-duration) ease}.rt-side-menu__rail-title{max-width:100%;font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);overflow-wrap:anywhere;text-align:center}.rt-side-menu__backdrop{position:fixed;z-index:var(--rt-z-dropdown);inset:0}.rt-side-menu__panel{position:absolute;z-index:var(--rt-z-dropdown);top:0;left:var(--rt-side-menu-rail-width);display:flex;width:var(--rt-side-menu-panel-shown-width);height:100%;box-sizing:border-box;flex-direction:column;border-radius:0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;border-left:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface);box-shadow:var(--rt-side-menu-panel-shadow)}.rt-side-menu__panel--held{width:max(var(--rt-side-menu-panel-held-width),var(--rt-side-menu-panel-shown-width))}.rt-side-menu__panel--pinned{--rt-side-menu-panel-radius: 0;--rt-side-menu-panel-shadow: var(--rt-shadow-none);position:relative;left:0;flex-shrink:0}.rt-side-menu__panel-head{display:flex;align-items:center;padding:var(--rt-space-sm);gap:var(--rt-space-2)}.rt-side-menu__search{min-width:0;flex:1 1 auto}.rt-side-menu__pin{flex-shrink:0}.rt-side-menu__panel-body{min-height:0;flex:1 1 auto}.rt-side-menu__sub-list{display:flex;flex-direction:column;padding-block-end:var(--rt-space-sm);padding-inline:var(--rt-space-2)}.rt-side-menu__empty{padding:var(--rt-space-md);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}.rt-side-menu__resizer{position:absolute;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));width:var(--rt-space-sm);cursor:col-resize}.rt-side-menu__resizer:before{position:absolute;top:0;bottom:0;left:50%;border-left:var(--rt-side-menu-resizer-border-width) solid transparent;content:\"\"}.rt-side-menu__resizer:hover:before,.rt-side-menu__resizer:focus-visible:before{border-left-color:var(--rt-color-border-strong)}.rt-side-menu__resizer:focus-visible{outline:none}.rt-side-menu__mobile{min-width:0;max-width:100%;height:100%;flex:0 0 var(--rt-side-menu-mobile-width);background:var(--rt-color-bg-surface)}.rt-side-menu__mobile .rt-scroll-area__body{padding-inline:0}.rt-side-menu__mobile-list,.rt-side-menu__mobile-sub{display:flex;flex-direction:column;padding:var(--rt-space-sm);gap:var(--rt-space-1)}.rt-side-menu__mobile-item,.rt-side-menu__back{display:flex;width:100%;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-item-radius);background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:calc(var(--rt-space-sm) + var(--rt-space-xs));padding-inline:var(--rt-space-md);text-align:start;text-decoration:none}.rt-side-menu__mobile-item:hover,.rt-side-menu__back:hover{background:var(--rt-color-bg-hover)}.rt-side-menu__mobile-item:focus-visible,.rt-side-menu__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu__mobile-item--active,.rt-side-menu__back--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__own-icon{--rt-side-menu-own-icon-size: var(--rt-size-5);display:inline-flex;width:var(--rt-side-menu-own-icon-size);height:var(--rt-side-menu-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu__mobile-icon,.rt-side-menu__back-icon,.rt-side-menu__mobile-chevron{flex-shrink:0}.rt-side-menu__mobile-title,.rt-side-menu__back-label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtScrollAreaComponent, selector: "rt-scroll-area", inputs: ["isScrollHintShown"] }, { kind: "directive", type: RtScrollAreaContentDirective, selector: "[rtScrollAreaContent]" }, { kind: "directive", type: RtScrollAreaFooterDirective, selector: "[rtScrollAreaFooter]" }, { kind: "directive", type: RtScrollAreaHeaderDirective, selector: "[rtScrollAreaHeader]" }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "component", type: RtSideMenuFavoritesComponent, selector: "rt-side-menu-favorites", outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "component", type: RtSideMenuSubItemComponent, selector: "rt-side-menu-sub-item", inputs: ["item", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuComponent, isStandalone: true, selector: "rt-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 }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, favoritesCount: { classPropertyName: "favoritesCount", publicName: "favoritesCount", isSignal: true, isRequired: false, transformFunction: null }, favoriteActionsReserve: { classPropertyName: "favoriteActionsReserve", publicName: "favoriteActionsReserve", isSignal: true, isRequired: false, transformFunction: null }, isFavoritesSearchShown: { classPropertyName: "isFavoritesSearchShown", publicName: "isFavoritesSearchShown", isSignal: true, isRequired: false, transformFunction: null }, pinShown: { classPropertyName: "pinShown", publicName: "pinShown", isSignal: true, isRequired: false, transformFunction: null }, subMenuTooltipsShown: { classPropertyName: "subMenuTooltipsShown", publicName: "subMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", subMenuResizeStart: "subMenuResizeStart", subMenuResizeEnd: "subMenuResizeEnd", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rt-side-menu--pinned": "isPinned()", "style.--rt-side-menu-panel-dragged-width": "panelWidthStyle()", "class.rt-side-menu--favorite-actions-none": "favoriteActionsReserve() === 'none'" }, classAttribute: "rt-side-menu" }, providers: [{ provide: RT_SIDE_MENU, useExisting: RtSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ownIconTpl", first: true, predicate: RtSideMenuIconDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu\">\n    @if (narrow()) {\n        <!-- \u0423\u0437\u043A\u0438\u0439 \u044D\u043A\u0440\u0430\u043D: \u043E\u0434\u0438\u043D \u0441\u0442\u043E\u043B\u0431\u0435\u0446 \u2014 \u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u043F\u0443\u043D\u043A\u0442\u044B \u0438\u043B\u0438 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043D\u0430\u0437\u0430\u0434. -->\n        <rt-scroll-area rtElem=\"mobile\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                @if (selectedSubMenu()?.length) {\n                    <div rtElem=\"mobile-sub\">\n                        <button type=\"button\" rtElem=\"back\" qa-dataid=\"side-menu-back\" (click)=\"onBackToMainMenu()\">\n                            <rt-icon rtElem=\"back-icon\" size=\"sm\" name=\"arrow-left\" />\n                            <span rtElem=\"back-label\">{{ backLabel() }}</span>\n                        </button>\n\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </div>\n                } @else {\n                    <nav rtElem=\"mobile-list\">\n                        @for (item of menuItems(); track item.id) {\n                            <ng-container [ngTemplateOutlet]=\"mobileItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                        }\n                    </nav>\n                }\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n    } @else {\n        <rt-scroll-area rtElem=\"rail\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                <nav rtElem=\"rail-list\">\n                    @for (item of menuItems(); track item.id) {\n                        <ng-container [ngTemplateOutlet]=\"railItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                    }\n                </nav>\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n\n        @if (subMenuOpened()) {\n            @if (isSearchHeld()) {\n                <!-- \u041F\u043E\u0434\u043B\u043E\u0436\u043A\u0430 \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0439 \u043F\u0430\u043D\u0435\u043B\u0438: \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0432\u0437\u044F\u0442\u043E\u0435 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430, \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0441\u043D\u0430\u0440\u0443\u0436\u0438. -->\n                <div\n                    rtElem=\"backdrop\"\n                    qa-dataid=\"side-menu-backdrop\"\n                    tabindex=\"-1\"\n                    (click)=\"closeSubMenu()\"\n                    (keydown.escape)=\"closeSubMenu()\"></div>\n            }\n\n            <div\n                #panel\n                rtElem=\"panel\"\n                qa-dataid=\"side-menu-panel\"\n                [rtMod]=\"{ pinned: isPinned(), held: isSearchHeld() }\"\n                (mouseleave)=\"toggleSubMenu()\">\n                <div rtElem=\"panel-head\">\n                    <rt-input\n                        rtElem=\"search\"\n                        qa-dataid=\"side-menu-search\"\n                        size=\"sm\"\n                        iconLeft=\"search\"\n                        [placeholder]=\"searchLabel()\"\n                        [ariaLabel]=\"searchLabel()\"\n                        [formControl]=\"searchControl\"\n                        (focusin)=\"onSearchHold()\"\n                        (keydown)=\"onSearchKeydown($event)\" />\n\n                    @if (pinShown()) {\n                        <rt-icon-button\n                            rtElem=\"pin\"\n                            qa-dataid=\"side-menu-pin\"\n                            size=\"sm\"\n                            icon=\"pin\"\n                            [iconFill]=\"isPinned()\"\n                            [active]=\"isPinned()\"\n                            [ariaLabel]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            [tooltip]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            (clicked)=\"onSubMenuModeToggle()\" />\n                    }\n                </div>\n\n                <rt-scroll-area rtElem=\"panel-body\">\n                    <ng-container *rtScrollAreaContent>\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </ng-container>\n                </rt-scroll-area>\n            </div>\n\n            @if (isPinned()) {\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 \u0443\u0445\u043E\u0434\u0438\u0442 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430. -->\n                <div\n                    rtElem=\"resizer\"\n                    qa-dataid=\"side-menu-resize\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"resizeLabel()\"\n                    [attr.aria-valuenow]=\"resizeValueNow()\"\n                    [attr.aria-valuemin]=\"resizeValueNow() === null ? null : resizeValueMin\"\n                    [attr.aria-valuemax]=\"resizeValueNow() === null ? null : resizeValueMax\"\n                    (pointerdown)=\"onResizeStart($event)\"\n                    (keydown)=\"onResizeKeydown($event)\"></div>\n            }\n        }\n    }\n    <ng-template #subMenuTpl>\n        @if (narrow()) {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"side-menu-search\"\n                size=\"sm\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchLabel()\"\n                [ariaLabel]=\"searchLabel()\"\n                [formControl]=\"searchControl\"\n                (keydown)=\"onSearchKeydown($event)\" />\n        }\n\n        @if (isNothingFound()) {\n            <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel() }}</div>\n        }\n\n        <div rtElem=\"sub-list\">\n            <!-- \u0411\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430: \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u0438 \u0431\u0435\u0437 \u0441\u0442\u0440\u043E\u043A \u043C\u0435\u0441\u0442\u0430 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442. -->\n            <rt-side-menu-favorites\n                (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n\n            @for (item of visibleSubMenuItems(); track item.id) {\n                <rt-side-menu-sub-item\n                    [item]=\"item\"\n                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                    (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #railItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link) {\n            <a\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-expanded]=\"item.submenu?.length ? subMenuOpened() && selectedItem() === item : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #railItemBodyTpl let-item>\n        @if (item.icon) {\n            <!-- \u0418\u043C\u044F Material \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0435\u0439 \u043F\u0430\u0440\u043E\u0439; \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0438\u043C \u0448\u0430\u0431\u043B\u043E\u043D\u043E\u043C \u043C\u0435\u043D\u044E. -->\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            <span rtElem=\"rail-icon\">\n                @if (kitIcon) {\n                    <rt-icon [name]=\"kitIcon\" />\n                } @else if (ownIconTpl(); as own) {\n                    <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"own\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                    </span>\n                }\n            </span>\n        }\n\n        @if (item.name) {\n            <span rtElem=\"rail-title\">{{ item.name }}</span>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link && !item.submenu?.length) {\n            <a\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemBodyTpl let-item>\n        @if (item.icon) {\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            @if (kitIcon) {\n                <rt-icon rtElem=\"mobile-icon\" [name]=\"kitIcon\" />\n            } @else if (ownIconTpl(); as own) {\n                <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                    <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                </span>\n            }\n        }\n\n        <span rtElem=\"mobile-title\" [rtTooltip]=\"item.name\">{{ item.name }}</span>\n\n        @if (item.submenu?.length) {\n            <!-- \u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0443 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u0432\u043E\u0434\u0438\u0442 \u0432 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0430 \u043D\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435. -->\n            <rt-icon rtElem=\"mobile-chevron\" size=\"sm\" name=\"arrow-right\" />\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu{--rt-side-menu-rail-width: 5.5rem;--rt-side-menu-panel-width: 15rem;--rt-side-menu-panel-held-width: 30rem;--rt-side-menu-mobile-width: 15rem;--rt-side-menu-panel-radius: var(--rt-radius-lg);--rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);--rt-side-menu-item-radius: var(--rt-radius-full);--rt-side-menu-resizer-border-width: var(--rt-border-width-thick);--rt-side-menu-panel-border-width: var(--rt-border-width-thin);--rt-side-menu-transition-duration: var(--rt-duration-fast);--rt-side-menu-panel-dragged-width: 0px;--rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));position:relative;display:flex;height:100%;color:var(--rt-color-text-primary)}.rt-side-menu__rail{max-width:var(--rt-side-menu-rail-width);height:100%;box-sizing:border-box;flex:0 0 var(--rt-side-menu-rail-width);border-right:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface)}.rt-side-menu__rail .rt-scroll-area__body{padding-inline:var(--rt-space-1)}.rt-side-menu__rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--rt-space-md);padding-block:var(--rt-space-sm)}.rt-side-menu__rail-item{display:flex;width:100%;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-1);text-decoration:none}.rt-side-menu__rail-item:focus-visible{outline:none}.rt-side-menu__rail-item:focus-visible .rt-side-menu__rail-icon{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-side-menu__rail-item:hover .rt-side-menu__rail-icon,.rt-side-menu__rail-item:active .rt-side-menu__rail-icon{background:var(--rt-color-bg-hover)}.rt-side-menu__rail-item--active .rt-side-menu__rail-icon,.rt-side-menu__rail-item--active:hover .rt-side-menu__rail-icon{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__rail-icon{display:flex;width:3.5rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--rt-side-menu-item-radius);transition:background-color var(--rt-side-menu-transition-duration) ease}.rt-side-menu__rail-title{max-width:100%;font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);overflow-wrap:anywhere;text-align:center}.rt-side-menu__backdrop{position:fixed;z-index:var(--rt-z-dropdown);inset:0}.rt-side-menu__panel{position:absolute;z-index:var(--rt-z-dropdown);top:0;left:var(--rt-side-menu-rail-width);display:flex;width:var(--rt-side-menu-panel-shown-width);height:100%;box-sizing:border-box;flex-direction:column;border-radius:0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;border-left:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface);box-shadow:var(--rt-side-menu-panel-shadow)}.rt-side-menu__panel--held{width:max(var(--rt-side-menu-panel-held-width),var(--rt-side-menu-panel-shown-width))}.rt-side-menu__panel--pinned{--rt-side-menu-panel-radius: 0;--rt-side-menu-panel-shadow: var(--rt-shadow-none);position:relative;left:0;flex-shrink:0}.rt-side-menu__panel-head{display:flex;align-items:center;padding:var(--rt-space-sm);gap:var(--rt-space-2)}.rt-side-menu__search{min-width:0;flex:1 1 auto}.rt-side-menu__pin{flex-shrink:0}.rt-side-menu__panel-body{min-height:0;flex:1 1 auto}.rt-side-menu__sub-list{display:flex;flex-direction:column;padding-block-end:var(--rt-space-sm);padding-inline:var(--rt-space-2)}.rt-side-menu__empty{padding:var(--rt-space-md);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}.rt-side-menu__resizer{position:absolute;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));width:var(--rt-space-sm);cursor:col-resize}.rt-side-menu__resizer:before{position:absolute;top:0;bottom:0;left:50%;border-left:var(--rt-side-menu-resizer-border-width) solid transparent;content:\"\"}.rt-side-menu__resizer:hover:before,.rt-side-menu__resizer:focus-visible:before{border-left-color:var(--rt-color-border-strong)}.rt-side-menu__resizer:focus-visible{outline:none}.rt-side-menu__mobile{min-width:0;max-width:100%;height:100%;flex:0 0 var(--rt-side-menu-mobile-width);background:var(--rt-color-bg-surface)}.rt-side-menu__mobile .rt-scroll-area__body{padding-inline:0}.rt-side-menu__mobile-list,.rt-side-menu__mobile-sub{display:flex;flex-direction:column;padding:var(--rt-space-sm);gap:var(--rt-space-1)}.rt-side-menu__mobile-item,.rt-side-menu__back{display:flex;width:100%;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-item-radius);background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:calc(var(--rt-space-sm) + var(--rt-space-xs));padding-inline:var(--rt-space-md);text-align:start;text-decoration:none}.rt-side-menu__mobile-item:hover,.rt-side-menu__back:hover{background:var(--rt-color-bg-hover)}.rt-side-menu__mobile-item:focus-visible,.rt-side-menu__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu__mobile-item--active,.rt-side-menu__back--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__own-icon{--rt-side-menu-own-icon-size: var(--rt-size-5);display:inline-flex;width:var(--rt-side-menu-own-icon-size);height:var(--rt-side-menu-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu__mobile-icon,.rt-side-menu__back-icon,.rt-side-menu__mobile-chevron{flex-shrink:0}.rt-side-menu__mobile-title,.rt-side-menu__back-label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtScrollAreaComponent, selector: "rt-scroll-area", inputs: ["isScrollHintShown"] }, { kind: "directive", type: RtScrollAreaContentDirective, selector: "[rtScrollAreaContent]" }, { kind: "directive", type: RtScrollAreaFooterDirective, selector: "[rtScrollAreaFooter]" }, { kind: "directive", type: RtScrollAreaHeaderDirective, selector: "[rtScrollAreaHeader]" }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "component", type: RtSideMenuFavoritesComponent, selector: "rt-side-menu-favorites", outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "component", type: RtSideMenuSubItemComponent, selector: "rt-side-menu-sub-item", inputs: ["item", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuComponent, decorators: [{
             type: Component,