@rt-tools/ui-kit-v2 0.4.0 → 0.5.0

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

@@ -5,7 +5,7 @@ import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed, outputToObservable, toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { Subject, mergeMap, map, EMPTY, merge, takeUntil, of, shareReplay, forkJoin, tap, firstValueFrom, switchMap, debounce, timer, filter, catchError, exhaustMap, startWith, take, fromEvent, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Subject, mergeMap, map, EMPTY, merge, takeUntil, of, shareReplay, forkJoin, tap, firstValueFrom, switchMap, debounce, timer, filter, catchError, exhaustMap, startWith, take, finalize, defer, fromEvent, debounceTime, distinctUntilChanged } from 'rxjs';
 import { DOCUMENT, NgTemplateOutlet, DatePipe, DecimalPipe, formatDate } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import * as i1 from '@angular/forms';
@@ -1665,7 +1665,13 @@ function provideRtIcons(baseUrl) {
             // Не блокируем bootstrap: sprite иконок грузится в фоне, приложение
             // стартует сразу. Иначе Angular ждёт forkJoin из сотен SVG-запросов
             // (первая загрузка +5с). rt-icon рендерит через <use> по мере готовности sprite.
-            void firstValueFrom(registry.preloadAll());
+            //
+            // Умолчание обязательно. Приложение, снесённое до прихода набора, обрывает запросы,
+            // `forkJoin` завершается ничего не отдав, и без умолчания обещание отказывает
+            // необработанным `no elements in sequence`. Видно это там, где приложения живут
+            // коротко: витрина роняла на этом по одной-две истории за заход, и причина читалась
+            // как дефект обвязки снимков.
+            void firstValueFrom(registry.preloadAll(), { defaultValue: undefined });
         }),
     ]);
 }
@@ -2663,7 +2669,7 @@ const LOADING_FADE_OUT_BUFFER_MS = 50;
  * ```html
  * <button rtButton label="Войти" theme="primary"></button>
  * <button rtButton label="Скачать" icon="ico-download" theme="success"></button>
- * <button rtButton icon="ico-pencil" theme="info" appearance="text"></button>
+ * <button rtButton icon="pencil" theme="info" appearance="text"></button>
  * <button rtButton label="Сохранение..." [loading]="saving()" [disabled]="saving()"></button>
  * <a rtButton label="Главная" [routerLink]="'/'"></a>
  * ```
@@ -6534,6 +6540,77 @@ function rootSegmentsOf(commands) {
     return [...head.split('/').filter(Boolean), ...rest];
 }
 
+/**
+ * Учёт панелей, стоящих на экране: из него роутерный гард узнаёт, кого спрашивать
+ * о несохранённых правках.
+ *
+ * Спрашивать компонент, который роутер подставляет в гард, нельзя: когда
+ * ro-маршрут объявлен под уровнем без своего компонента, Angular отдаёт детям
+ * контекст родителя, и в гард приходит компонент первичного аутлета — экран
+ * раздела, а не панель.
+ *
+ * Ключ записи — объявление маршрута, а не порядок постановки. Гард стоит на
+ * каждом ro-маршруте, и одна навигация зовёт его за каждый уходящий маршрут
+ * отдельно: учёт стеком дал бы ответ не той панели и два вопроса о правках
+ * подряд. Объявление маршрута — та же ссылка на объект и у панели, и у снимка,
+ * который роутер отдаёт гарду, поэтому два каркаса на экране не путаются даже
+ * при одинаково названных аутлетах: маршруты у них разные.
+ *
+ * Служба корневая: гард живёт в инжекторе маршрута и до службы, поставленной на
+ * уровне компонента, не дотянулся бы вовсе. Одного учёта на приложение хватает —
+ * записи различает маршрут. Переменной уровня модуля учёт быть не может: та
+ * пережила бы запрос при отдаче страницы сервером и оказалась бы общей на два
+ * приложения, поднятых на одной странице.
+ */
+class RtRouteAsideRegistry {
+    #panels = new Map();
+    /**
+     * Панель встала на экран. Повторная постановка под тем же маршрутом заменяет
+     * запись: аутлет держит одну панель, и отвечать должна нынешняя.
+     */
+    register(route, panel) {
+        const key = route.routeConfig;
+        if (key === null) {
+            return;
+        }
+        this.#panels.set(key, panel);
+    }
+    /**
+     * Панель ушла с экрана. Запись снимается только своя: пока уходящая панель
+     * доигрывает уход, её место мог занять сосед, и снятие вслепую стёрло бы
+     * запись того, кто на экране остался.
+     */
+    unregister(route, panel) {
+        const key = route.routeConfig;
+        if (key === null || this.#panels.get(key) !== panel) {
+            return;
+        }
+        this.#panels.delete(key);
+    }
+    /** Снятие панели, чей ответ о правках отказал: спрашивать её больше нечем. */
+    forget(panel) {
+        for (const [key, registered] of this.#panels) {
+            if (registered === panel) {
+                this.#panels.delete(key);
+            }
+        }
+    }
+    /** Панель, отвечающая за уход с этого маршрута, или её отсутствие. */
+    find(route) {
+        const key = route.routeConfig;
+        if (key === null) {
+            return null;
+        }
+        return this.#panels.get(key) ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtRouteAsideRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtRouteAsideRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtRouteAsideRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Открытие ждёт `panel.ready()`, а не `ngAfterViewInit`: на F5 rt-container
  * создаёт overlay асинхронно, иначе `open()` гонится с ещё не готовым overlay.
@@ -6563,7 +6640,20 @@ class RtRouteAsideComponent {
     #notificationBus;
     #dialog;
     #injector;
+    #registry;
     #opened;
+    /**
+     * Уход санкционирован самой панелью, и о правках спрашивать не надо: они либо
+     * записаны, либо пользователь уже решил их судьбу. Признак живёт до первого
+     * же вопроса о правках и снимается вместе с ответом на него.
+     */
+    #leaveAllowed;
+    /**
+     * Вопрос о правках, заданный роутерному уходу и ещё не отвеченный. Второй
+     * уход, пришедший пока окно открыто, ждёт того же ответа: своё окно он
+     * поставил бы поверх первого, и убрать его было бы некому.
+     */
+    #pendingAsk$;
     constructor() {
         this.#entity = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#entity" }] : /* istanbul ignore next */ []));
@@ -6587,7 +6677,20 @@ class RtRouteAsideComponent {
         this.#notificationBus = inject(NotificationBus);
         this.#dialog = inject(RtDialogService);
         this.#injector = inject(Injector);
+        this.#registry = inject(RtRouteAsideRegistry);
         this.#opened = false;
+        /**
+         * Уход санкционирован самой панелью, и о правках спрашивать не надо: они либо
+         * записаны, либо пользователь уже решил их судьбу. Признак живёт до первого
+         * же вопроса о правках и снимается вместе с ответом на него.
+         */
+        this.#leaveAllowed = false;
+        /**
+         * Вопрос о правках, заданный роутерному уходу и ещё не отвеченный. Второй
+         * уход, пришедший пока окно открыто, ждёт того же ответа: своё окно он
+         * поставил бы поверх первого, и убрать его было бы некому.
+         */
+        this.#pendingAsk$ = null;
         this.router = inject(Router);
         this.route = inject(ActivatedRoute);
         this.destroyRef = inject(DestroyRef);
@@ -6623,7 +6726,14 @@ class RtRouteAsideComponent {
             }
             this.#opened = true;
             panel.open();
+            // Панель встала в аутлет — с этого мгновения о правках спрашивают её,
+            // а не тот компонент, который роутер подставит гарду.
+            this.#registry.register(this.route.snapshot, this);
         });
+        // Снятие с учёта идёт по уничтожению, а не по уходу с экрана: уход может и
+        // не состояться — роутер отклоняет навигацию молча, — и панель, снятая с
+        // учёта раньше времени, осталась бы на экране, не отвечая о своих правках.
+        this.destroyRef.onDestroy(() => this.#registry.unregister(this.route.snapshot, this));
         // Мутации из runMutation(): mergeMap подписывает каждый op$ независимо
         // (как раньше — по подписке на вызов, без отмены предыдущей in-flight
         // мутации); handler'ы замыкают opts вызова, catchError гасит ошибку
@@ -6692,16 +6802,21 @@ class RtRouteAsideComponent {
      */
     canDeactivate() {
         const intent = this.#closeIntent();
+        // Признак идущей записи старше разрешения на уход: панель, выдавшая себе
+        // разрешение и не дождавшаяся ответа сервера, уходить не должна — исход
+        // записи решит её судьбу сам.
         if (intent === ERtAsideCloseIntent.Ignore) {
             return of(false);
         }
+        // Уход начала сама панель: правки либо записаны секунду назад, либо их
+        // судьбу пользователь уже решил. Вопрос был бы задан про то, чего нет.
+        if (this.#consumeLeaveAllowance()) {
+            return of(true);
+        }
         if (intent === ERtAsideCloseIntent.Close) {
             return of(true);
         }
-        return this.#dialog
-            .open(RtAsideUnsavedDialogComponent)
-            .afterClosed()
-            .pipe(switchMap((outcome) => this.#deactivateAfter(outcome)));
+        return this.#askUnsaved();
     }
     setEntity(entity) {
         this.#entity.set(entity);
@@ -6802,9 +6917,11 @@ class RtRouteAsideComponent {
                     opts.onSuccess();
                     return;
                 }
-                // Закрытие после успеха идёт мимо гарда: форма к этому моменту
-                // ещё тронута, и вопрос о несохранённых правках был бы задан
-                // ровно про то, что только что сохранилось.
+                // Закрытие после успеха идёт мимо обоих гардов — и кнопочного, и
+                // роутерного. Форма к этому моменту ещё тронута, и вопрос о
+                // несохранённых правках был бы задан ровно про то, что только что
+                // сохранилось; роутерный гард закрывает разрешение на уход,
+                // которое панель выдаёт себе перед вызовом роутера.
                 if (opts?.closeOnSuccess === true || this.#isCreateMode()) {
                     this.#closePanel();
                     return;
@@ -6885,6 +7002,53 @@ class RtRouteAsideComponent {
         }
         return toObservable(this.#submitting, { injector: this.#injector }).pipe(filter((submitting) => !submitting), take(1), map(() => this.submitError() === null));
     }
+    /**
+     * Вопрос о правках роутерному уходу. Окно открывается одно на все уходы,
+     * пришедшие пока оно висит: второе поставило бы поверх первого оверлей,
+     * убрать который было бы некому — от того же и `exhaustMap` на пути кнопок.
+     */
+    #askUnsaved() {
+        const pending = this.#pendingAsk$;
+        if (pending !== null) {
+            return pending;
+        }
+        const ask$ = this.#dialog
+            .open(RtAsideUnsavedDialogComponent)
+            .afterClosed()
+            .pipe(switchMap((outcome) => this.#deactivateAfter(outcome)), finalize(() => {
+            this.#pendingAsk$ = null;
+        }), shareReplay({ bufferSize: 1, refCount: false }));
+        this.#pendingAsk$ = ask$;
+        return ask$;
+    }
+    /**
+     * Разрешение на уход читается один раз: иначе первое же закрытие после записи
+     * сняло бы вопрос о правках со всех следующих уходов, и тронутая форма
+     * уезжала бы молча.
+     */
+    #consumeLeaveAllowance() {
+        const allowed = this.#leaveAllowed;
+        this.#leaveAllowed = false;
+        return allowed;
+    }
+    /**
+     * Уход, начатый самой панелью. Разрешение выдаётся здесь, вплотную к вызову
+     * роутера, а не при закрытии панели: между закрытием и навигацией оверлей
+     * доигрывает уход, и разрешение, выданное раньше, достаётся чужому уходу,
+     * пришедшему в это окно, — тронутая форма уехала бы без вопроса.
+     *
+     * Невостребованное разрешение снимается итогом навигации: роутер отклоняет
+     * навигацию молча, её может отменить другой гард, и оставшееся разрешение
+     * сняло бы вопрос о правках со следующего ухода, которого панель не начинала.
+     */
+    #navigateAllowed(navigate) {
+        this.#leaveAllowed = true;
+        void navigate()
+            .catch(() => false)
+            .then(() => {
+            this.#leaveAllowed = false;
+        });
+    }
     #closePanel() {
         this.panel()?.close();
     }
@@ -6892,7 +7056,7 @@ class RtRouteAsideComponent {
         const params = queryParams ?? this.#relatedQueryParams;
         this.#relatedCommands = null;
         this.#relatedQueryParams = null;
-        void this.router.navigateByUrl(this.#relatedTree(commands, params));
+        this.#navigateAllowed(() => this.router.navigateByUrl(this.#relatedTree(commands, params)));
     }
     /**
      * Адрес, на который уходит панель. Свой аутлет она снимает здесь же, тем же
@@ -6931,9 +7095,9 @@ class RtRouteAsideComponent {
         this.#relatedCommands = null;
     }
     #navigateAway() {
-        void this.router.navigate([{ outlets: this.closeOutlets() }], {
+        this.#navigateAllowed(() => this.router.navigate([{ outlets: this.closeOutlets() }], {
             relativeTo: this.route.parent,
-        });
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtRouteAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: RtRouteAsideComponent, isStandalone: true, viewQueries: [{ propertyName: "panel", first: true, predicate: RtContainerRightSidenavPanelDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
@@ -6950,12 +7114,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Ставится на каждый ro-маршрут: гард висит на кнопках, нажатии мимо и Esc, а
  * смену маршрута ловит только роутер.
  *
- * Панели может не быть: роутер зовёт гард и для маршрута, чей компонент не создан.
- * Спрашивать тогда не о чем — уступить место можно. Без этой проверки первая же
- * такая навигация падает, а следом отказывает любая другая: маршрут остаётся
- * активным, и приложение застревает на адресе панели.
- */
-const rtAsideUnsavedGuard = (component) => component?.canDeactivate() ?? of(true);
+ * Спрашивается панель, учтённая под маршрутом ухода, а не компонент, который
+ * подставил роутер. Компонент — не панель, когда ro-маршрут объявлен под уровнем
+ * без своего компонента: Angular отдаёт детям контекст родителя, и в гард
+ * приходит компонент первичного аутлета. Ответ такого компонента к правкам
+ * отношения не имеет, а вызов у него метода, которого нет, ронял навигацию — она
+ * падала необработанным отказом, адрес не менялся, и приложение оставалось
+ * запертым на панели.
+ *
+ * Компонент от роутера остаётся запасным путём: гард выведен наружу кита, и
+ * панель приложения может отвечать о правках, не наследуя базовый класс, — на
+ * учёт такая панель не встаёт никогда. Без запасного пути у неё вопрос о правках
+ * исчез бы молча, а это тихая потеря правок.
+ *
+ * Спрашивать некого — уступить место можно: роутер зовёт гард и для маршрута,
+ * чей компонент не создан. Без этого первая же такая навигация падает, а следом
+ * отказывает любая другая.
+ *
+ * Отказом навигации гард не отвечает никогда, в том числе когда ответ панели
+ * отказал: разрешить уход значило бы унести правки, о которых спросить не
+ * удалось, а отменить и оставить всё как есть — запереть приложение на панели
+ * навсегда. Поэтому уход отменяется один раз, а панель снимается с учёта, и
+ * следующий уход идёт запасным путём.
+ */
+/** Компонент от роутера годится в ответчики, только если умеет отвечать. */
+function fallbackPanel(component) {
+    return typeof component?.canDeactivate === 'function' ? component : null;
+}
+const rtAsideUnsavedGuard = (component, currentRoute) => {
+    const registry = inject(RtRouteAsideRegistry);
+    const registered = registry.find(currentRoute);
+    const panel = registered ?? fallbackPanel(component);
+    if (panel === null) {
+        return of(true);
+    }
+    // defer: ответ панели может отказать и синхронным броском, а гард обязан
+    // пережить и его.
+    return defer(() => panel.canDeactivate()).pipe(catchError(() => {
+        registry.forget(panel);
+        return of(false);
+    }));
+};
 
 /** Контракт счётчика common/ui. */
 /**
@@ -11221,11 +11420,11 @@ class RtTableSortHeaderComponent {
         this.#table.toggleSort(this.rtSortHeader());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTableSortHeaderComponent, isStandalone: true, selector: "rt-table-sort-header, th[rtSortHeader]", inputs: { rtSortHeader: { classPropertyName: "rtSortHeader", publicName: "rtSortHeader", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-sort": "ariaSort()" }, classAttribute: "rt-table-sort-header" }, ngImport: i0, template: "<ng-template #label>\n    <ng-content />\n</ng-template>\n\n@if (sortable()) {\n    <button\n        rtElem=\"button\"\n        qa-dataid=\"table-sort-header\"\n        type=\"button\"\n        [attr.data-column]=\"rtSortHeader()\"\n        [attr.data-direction]=\"direction()\"\n        [rtMod]=\"{ active: direction() !== null }\"\n        (click)=\"onToggle()\">\n        <ng-container [ngTemplateOutlet]=\"label\" />\n        <rt-icon rtElem=\"icon\" size=\"xs\" [name]=\"icon()\" />\n    </button>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"label\" />\n}\n", styles: ["@charset \"UTF-8\";.rt-table-sort-header__button{display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-xs);text-align:inherit}.rt-table-sort-header__button:hover{color:var(--rt-color-text-primary)}.rt-table-sort-header__button:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:2px}.rt-table-sort-header__icon{flex:0 0 auto;color:var(--rt-color-text-muted)}.rt-table-sort-header__button--active{color:var(--rt-color-text-primary)}.rt-table-sort-header__button--active .rt-table-sort-header__icon{color:var(--rt-color-action-primary)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTableSortHeaderComponent, isStandalone: true, selector: "rt-table-sort-header, th[rtSortHeader]", inputs: { rtSortHeader: { classPropertyName: "rtSortHeader", publicName: "rtSortHeader", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-sort": "ariaSort()" }, classAttribute: "rt-table-sort-header" }, ngImport: i0, template: "<ng-template #label>\n    <ng-content />\n</ng-template>\n\n<ng-container rtBlock=\"rt-table-sort-header\">\n    @if (sortable()) {\n        <button\n            rtElem=\"button\"\n            qa-dataid=\"table-sort-header\"\n            type=\"button\"\n            [attr.data-column]=\"rtSortHeader()\"\n            [attr.data-direction]=\"direction()\"\n            [rtMod]=\"{ active: direction() !== null }\"\n            (click)=\"onToggle()\">\n            <ng-container [ngTemplateOutlet]=\"label\" />\n            <rt-icon rtElem=\"icon\" size=\"xs\" [name]=\"icon()\" />\n        </button>\n    } @else {\n        <ng-container [ngTemplateOutlet]=\"label\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-table-sort-header__button{display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-xs);text-align:inherit}.rt-table-sort-header__button:hover{color:var(--rt-color-text-primary)}.rt-table-sort-header__button:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:2px}.rt-table-sort-header__icon{flex:0 0 auto;color:var(--rt-color-text-muted)}.rt-table-sort-header__button--active{color:var(--rt-color-text-primary)}.rt-table-sort-header__button--active .rt-table-sort-header__icon{color:var(--rt-color-action-primary)}\n"], dependencies: [{ kind: "directive", type: 
                 // angular
                 NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
                 // rt-tools
-                ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: 
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: 
                 // components
                 RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -11235,6 +11434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         // angular
                         NgTemplateOutlet,
                         // rt-tools
+                        BlockDirective,
                         ElemDirective,
                         ModDirective,
                         // components
@@ -11242,7 +11442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: BEM_BLOCK$b,
                         '[attr.aria-sort]': 'ariaSort()',
-                    }, template: "<ng-template #label>\n    <ng-content />\n</ng-template>\n\n@if (sortable()) {\n    <button\n        rtElem=\"button\"\n        qa-dataid=\"table-sort-header\"\n        type=\"button\"\n        [attr.data-column]=\"rtSortHeader()\"\n        [attr.data-direction]=\"direction()\"\n        [rtMod]=\"{ active: direction() !== null }\"\n        (click)=\"onToggle()\">\n        <ng-container [ngTemplateOutlet]=\"label\" />\n        <rt-icon rtElem=\"icon\" size=\"xs\" [name]=\"icon()\" />\n    </button>\n} @else {\n    <ng-container [ngTemplateOutlet]=\"label\" />\n}\n", styles: ["@charset \"UTF-8\";.rt-table-sort-header__button{display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-xs);text-align:inherit}.rt-table-sort-header__button:hover{color:var(--rt-color-text-primary)}.rt-table-sort-header__button:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:2px}.rt-table-sort-header__icon{flex:0 0 auto;color:var(--rt-color-text-muted)}.rt-table-sort-header__button--active{color:var(--rt-color-text-primary)}.rt-table-sort-header__button--active .rt-table-sort-header__icon{color:var(--rt-color-action-primary)}\n"] }]
+                    }, template: "<ng-template #label>\n    <ng-content />\n</ng-template>\n\n<ng-container rtBlock=\"rt-table-sort-header\">\n    @if (sortable()) {\n        <button\n            rtElem=\"button\"\n            qa-dataid=\"table-sort-header\"\n            type=\"button\"\n            [attr.data-column]=\"rtSortHeader()\"\n            [attr.data-direction]=\"direction()\"\n            [rtMod]=\"{ active: direction() !== null }\"\n            (click)=\"onToggle()\">\n            <ng-container [ngTemplateOutlet]=\"label\" />\n            <rt-icon rtElem=\"icon\" size=\"xs\" [name]=\"icon()\" />\n        </button>\n    } @else {\n        <ng-container [ngTemplateOutlet]=\"label\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-table-sort-header__button{display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-xs);text-align:inherit}.rt-table-sort-header__button:hover{color:var(--rt-color-text-primary)}.rt-table-sort-header__button:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:2px}.rt-table-sort-header__icon{flex:0 0 auto;color:var(--rt-color-text-muted)}.rt-table-sort-header__button--active{color:var(--rt-color-text-primary)}.rt-table-sort-header__button--active .rt-table-sort-header__icon{color:var(--rt-color-action-primary)}\n"] }]
         }], propDecorators: { rtSortHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtSortHeader", required: true }] }] } });
 
 /**
@@ -11543,8 +11743,15 @@ class RtTabsControlDirective {
     constructor() {
         /** Шаблон контрола, выводимый в header-слоте. */
         this.templateRef = inject(TemplateRef);
-        /** Сторона размещения относительно полосы вкладок. */
-        this.side = input('right', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: 'rtTabsControl' });
+        /**
+         * Сторона размещения относительно полосы вкладок.
+         *
+         * Пустое значение приводится к правой стороне: `<ng-template rtTabsControl>` без значения
+         * задаёт входу пустую строку, а не умолчание, и такой контрол не попадал ни в левый слот,
+         * ни в правый — он пропадал из шапки вовсе.
+         */
+        this.side = input('right', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: 'rtTabsControl',
+            transform: (value) => (value === '' ? 'right' : value) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTabsControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtTabsControlDirective, isStandalone: true, selector: "[rtTabsControl]", inputs: { side: { classPropertyName: "side", publicName: "rtTabsControl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }