@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

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

@@ -1,228 +1,699 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, TemplateRef, input, Directive, DestroyRef, computed, contentChild, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { map, distinctUntilChanged } from 'rxjs';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { rtKitLabel, RT_KIT_LABELS, searchDebounce, RtInfiniteScrollDirective } from '@rt-tools/ui-kit-v2/core';
-import { RtEmptyStateComponent } from '@rt-tools/ui-kit-v2/empty-state';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
-import { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-import { RtSkeletonComponent } from '@rt-tools/ui-kit-v2/skeleton';
-
-/**
- * Помечает `<ng-template>` содержимого строки списка. Входом `[rtThreadListRow]`
- * потребитель передаёт свой массив строк — из него выводится тип `TRow`, поэтому
- * `let-row` в темплейте типизируется строго (context-guard ниже это подтверждает).
- */
-class RtThreadListRowDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.rows = input([], { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), alias: 'rtThreadListRow' });
-    }
-    static ngTemplateContextGuard(_directive, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас
-    context) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtThreadListRowDirective, isStandalone: true, selector: "ng-template[rtThreadListRow]", inputs: { rows: { classPropertyName: "rows", publicName: "rtThreadListRow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListRowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[rtThreadListRow]',
-                }]
-        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtThreadListRow", required: false }] }] } });
-/**
- * Помечает `<ng-template>` действий строки (удалить, закрепить). Действия рисуются рядом с
- * кнопкой строки, а не внутри неё: вложенная кнопка в `<button>` недопустима и крадёт клик
- * выбора строки. Видны при наведении и фокусе внутри строки.
- */
-class RtThreadListRowActionsDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.rows = input([], { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), alias: 'rtThreadListRowActions' });
-    }
-    static ngTemplateContextGuard(_directive, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас
-    context) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtThreadListRowActionsDirective, isStandalone: true, selector: "ng-template[rtThreadListRowActions]", inputs: { rows: { classPropertyName: "rows", publicName: "rtThreadListRowActions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListRowActionsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[rtThreadListRowActions]',
-                }]
-        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtThreadListRowActions", required: false }] }] } });
-/**
- * Помечает `<ng-template>` с фильтрами — его содержимое рендерится в поповере,
- * который открывает иконка-фильтр в шапке списка.
- */
-class RtThreadListFiltersDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListFiltersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtThreadListFiltersDirective, isStandalone: true, selector: "ng-template[rtThreadListFilters]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListFiltersDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[rtThreadListFilters]',
-                }]
-        }] });
-/**
- * Помечает `<ng-template>` с кастомным контролом поиска. Когда потребитель его
- * проецирует, шапка списка рендерит его содержимое вместо встроенного `rt-input`
- * — так воркспейс подставляет свой автокомплит по каталогу вместо текстового
- * поиска, не ломая generic-природу списка.
- */
-class RtThreadListSearchDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListSearchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtThreadListSearchDirective, isStandalone: true, selector: "ng-template[rtThreadListSearch]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListSearchDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[rtThreadListSearch]',
-                }]
-        }] });
-
-const BEM_BLOCK = 'rt-thread-list';
-/** Кол-во скелетон-строк на первичной загрузке (пока `rows` пусты). */
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, TemplateRef, ViewEncapsulation, booleanAttribute, computed, contentChild, inject, input, output } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i2 from "@angular/forms";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { distinctUntilChanged, map } from "rxjs";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS, RtInfiniteScrollDirective, rtKitLabel, searchDebounce } from "@rt-tools/ui-kit-v2/core";
+import { RtEmptyStateComponent } from "@rt-tools/ui-kit-v2/empty-state";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtInputComponent } from "@rt-tools/ui-kit-v2/input";
+import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+import { RtSkeletonComponent } from "@rt-tools/ui-kit-v2/skeleton";
+var RtThreadListRowDirective = class RtThreadListRowDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+		this.rows = input([], {
+			...ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {},
+			alias: "rtThreadListRow"
+		});
+	}
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtThreadListRowDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtThreadListRowDirective,
+			isStandalone: true,
+			selector: "ng-template[rtThreadListRow]",
+			inputs: { rows: {
+				classPropertyName: "rows",
+				publicName: "rtThreadListRow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtThreadListRowDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[rtThreadListRow]" }]
+	}],
+	propDecorators: { rows: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "rtThreadListRow",
+			required: false
+		}]
+	}] }
+});
+var RtThreadListRowActionsDirective = class RtThreadListRowActionsDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+		this.rows = input([], {
+			...ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {},
+			alias: "rtThreadListRowActions"
+		});
+	}
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtThreadListRowActionsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtThreadListRowActionsDirective,
+			isStandalone: true,
+			selector: "ng-template[rtThreadListRowActions]",
+			inputs: { rows: {
+				classPropertyName: "rows",
+				publicName: "rtThreadListRowActions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtThreadListRowActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[rtThreadListRowActions]" }]
+	}],
+	propDecorators: { rows: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "rtThreadListRowActions",
+			required: false
+		}]
+	}] }
+});
+var RtThreadListFiltersDirective = class RtThreadListFiltersDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtThreadListFiltersDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtThreadListFiltersDirective,
+			isStandalone: true,
+			selector: "ng-template[rtThreadListFilters]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtThreadListFiltersDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[rtThreadListFilters]" }]
+	}]
+});
+var RtThreadListSearchDirective = class RtThreadListSearchDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtThreadListSearchDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtThreadListSearchDirective,
+			isStandalone: true,
+			selector: "ng-template[rtThreadListSearch]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtThreadListSearchDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[rtThreadListSearch]" }]
+	}]
+});
+const BEM_BLOCK = "rt-thread-list";
 const SKELETON_ROWS_COUNT = 6;
-/** Значки строк-превью пустого списка по умолчанию: люди переписки. */
-const PREVIEW_ICONS = ['user', 'users', 'user'];
-/**
- * Презентационный список тредов для воркспейсов:
- * поиск с дебаунсом, фильтр-поповер и бесконечная прокрутка. Данные и оркестрация
- * — на вызывающем; список стора/api не видит.
- *
- * Строку рисует потребитель через `<ng-template rtThreadListRow let-row>` (body +
- * meta); оболочка владеет кнопкой строки (active/unread/overdue), поиском, кнопкой
- * фильтров (точка-индикатор при `filtersActive`) и скроллом. Фильтры потребитель
- * кладёт в `<ng-template rtThreadListFilters>` — они рендерятся в поповере.
- */
-class RtThreadListComponent {
-    constructor() {
-        this.#destroyRef = inject(DestroyRef);
-        this.#t_uiSearch = rtKitLabel('uiSearch');
-        this.#t_uiNothingFound = rtKitLabel('uiNothingFound');
-        this.t = inject(RT_KIT_LABELS);
-        this.searchPlaceholderText = computed(() => this.searchPlaceholder() || this.#t_uiSearch(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []));
-        this.emptyTitle = computed(() => this.emptyText() || this.#t_uiNothingFound(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
-        this.skeletonRows = Array.from({ length: SKELETON_ROWS_COUNT }, (_, i) => i);
-        /** Декоративные строки-превью пустого состояния: значок строки из `emptyPreviewIcons`, каждая вторая сдвинута. */
-        this.emptyPreviewRows = computed(() => this.emptyPreviewIcons().map((icon, index) => ({
-            icon,
-            id: index,
-            offset: index % 2 === 1,
-        })), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "emptyPreviewRows" }] : /* istanbul ignore next */ []));
-        this.searchControl = new FormControl('', {
-            nonNullable: true,
-        });
-        this.rowTemplate = contentChild((RtThreadListRowDirective), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []));
-        this.rowActionsTemplate = contentChild((RtThreadListRowActionsDirective), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rowActionsTemplate" }] : /* istanbul ignore next */ []));
-        this.filtersTemplate = contentChild(RtThreadListFiltersDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filtersTemplate" }] : /* istanbul ignore next */ []));
-        this.searchTemplate = contentChild(RtThreadListSearchDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchTemplate" }] : /* istanbul ignore next */ []));
-        this.rows = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-        this.activeId = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
-        /** Пусто — берётся переведённая подпись по умолчанию */
-        this.searchPlaceholder = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
-        this.emptyText = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
-        /** Значки декоративных строк-превью пустого состояния, по строке на значок */
-        this.emptyPreviewIcons = input(PREVIEW_ICONS, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "emptyPreviewIcons" }] : /* istanbul ignore next */ []));
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.filtersActive = input(false, { ...(ngDevMode ? { debugName: "filtersActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        // Имя `select` зарезервировано под нативное DOM-событие
-        // (@angular-eslint/no-output-native), поэтому output переименован.
-        this.selectRow = output();
-        // Ctrl/⌘+клик по строке: потребитель открывает строку в новой вкладке.
-        // Обычный клик остаётся на `selectRow`.
-        this.openInNewTab = output();
-        this.searchChange = output();
-        this.loadMore = output();
-    }
-    #destroyRef;
-    #t_uiSearch;
-    #t_uiNothingFound;
-    ngOnInit() {
-        // Дебаунс непустого ввода; очистка крестиком применяется сразу (searchDebounce).
-        this.searchControl.valueChanges
-            .pipe(map((value) => value.trim()), searchDebounce(), distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef))
-            .subscribe((value) => this.searchChange.emit(value));
-    }
-    onSelect(id, event) {
-        // Ctrl (Win/Linux) или ⌘ (macOS) — «открыть в новой вкладке», как у
-        // нативных ссылок. Иначе — обычный выбор строки в текущей вкладке.
-        if (event.ctrlKey || event.metaKey) {
-            this.openInNewTab.emit(id);
-            return;
-        }
-        this.selectRow.emit(id);
-    }
-    onLoadMore() {
-        this.loadMore.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtThreadListComponent, isStandalone: true, selector: "rt-thread-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyPreviewIcons: { classPropertyName: "emptyPreviewIcons", publicName: "emptyPreviewIcons", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, filtersActive: { classPropertyName: "filtersActive", publicName: "filtersActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectRow: "selectRow", openInNewTab: "openInNewTab", searchChange: "searchChange", loadMore: "loadMore" }, host: { classAttribute: "rt-thread-list" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: (RtThreadListRowDirective), descendants: true, isSignal: true }, { propertyName: "rowActionsTemplate", first: true, predicate: (RtThreadListRowActionsDirective), descendants: true, isSignal: true }, { propertyName: "filtersTemplate", first: true, predicate: RtThreadListFiltersDirective, descendants: true, isSignal: true }, { propertyName: "searchTemplate", first: true, predicate: RtThreadListSearchDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-thread-list\">\n    <header rtElem=\"head\">\n        @if (searchTemplate()) {\n            <div rtElem=\"search\" qa-dataid=\"thread-list-search\">\n                <ng-container [ngTemplateOutlet]=\"searchTemplate()?.templateRef ?? null\" />\n            </div>\n        } @else {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"thread-list-search\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchPlaceholderText()\"\n                [formControl]=\"searchControl\" />\n        }\n        @if (filtersTemplate()) {\n            <rt-icon-button\n                rtElem=\"filter-trigger\"\n                qa-dataid=\"thread-list-filter\"\n                icon=\"filter\"\n                variant=\"secondary\"\n                rtPopoverAlign=\"end\"\n                [ariaLabel]=\"t().uiFilters\"\n                [indicator]=\"filtersActive()\"\n                [rtPopover]=\"filtersPanel\" />\n        }\n    </header>\n\n    <ng-template #rowButton let-row>\n        <button\n            rtElem=\"row\"\n            qa-dataid=\"thread-list-row\"\n            type=\"button\"\n            [attr.data-id]=\"row.id\"\n            [attr.data-unread]=\"row.hasUnread\"\n            [attr.aria-current]=\"row.id === activeId() ? 'true' : null\"\n            [rtMod]=\"{\n                active: row.id === activeId(),\n                unread: row.hasUnread,\n                overdue: !!row.overdue,\n            }\"\n            (click)=\"onSelect(row.id, $event)\">\n            <ng-container [ngTemplateOutlet]=\"rowTemplate()?.templateRef ?? null\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        </button>\n    </ng-template>\n\n    <ng-template #filtersPanel>\n        <div rtElem=\"filters-panel\" qa-dataid=\"thread-list-filters-panel\">\n            <ng-container [ngTemplateOutlet]=\"filtersTemplate()?.templateRef ?? null\" />\n        </div>\n    </ng-template>\n\n    <div rtElem=\"rows\" qa-dataid=\"thread-list-rows\">\n        @if (loading() && !rows().length) {\n            @for (i of skeletonRows; track i) {\n                <div rtElem=\"row-skeleton\" qa-dataid=\"thread-list-row-skeleton\" aria-hidden=\"true\">\n                    <rt-skeleton width=\"60%\" height=\"14px\" />\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n        } @else if (!rows().length) {\n            <rt-empty-state rtElem=\"empty\" qa-dataid=\"thread-list-empty\" [description]=\"t().uiThreadListEmptyHint\" [title]=\"emptyTitle()\">\n                <div rtEmptyIllustration rtElem=\"empty-preview\">\n                    @for (row of emptyPreviewRows(); track row.id) {\n                        <div rtElem=\"empty-card\" [rtMod]=\"{ offset: row.offset }\">\n                            <span rtElem=\"empty-avatar\">\n                                <rt-icon size=\"sm\" [name]=\"row.icon\" />\n                            </span>\n                            <span rtElem=\"empty-lines\">\n                                <span rtElem=\"empty-line\" [rtMod]=\"{ short: true }\"></span>\n                                <span rtElem=\"empty-line\"></span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </rt-empty-state>\n        } @else {\n            @for (row of rows(); track row.id) {\n                @if (rowActionsTemplate(); as actions) {\n                    <div rtElem=\"row-wrap\" qa-dataid=\"thread-list-row-wrap\">\n                        <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        <div rtElem=\"row-actions\" qa-dataid=\"thread-list-row-actions\">\n                            <ng-container [ngTemplateOutlet]=\"actions.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n            }\n            @if (fetching()) {\n                <div rtElem=\"row-loader\" qa-dataid=\"thread-list-row-loader\">\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n            @if (hasMore()) {\n                <div\n                    rtElem=\"load-anchor\"\n                    qa-dataid=\"thread-list-load-more\"\n                    aria-hidden=\"true\"\n                    rtInfiniteScroll\n                    [disabled]=\"fetching()\"\n                    (loadMore)=\"onLoadMore()\"></div>\n            }\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-thread-list{--rt-thread-list-border-width: var(--rt-border-width-thin);--rt-thread-list-card-radius: var(--rt-radius-lg);--rt-thread-list-tag-radius: var(--rt-radius-sm);--rt-thread-list-dot-radius: var(--rt-radius-full);--rt-thread-list-avatar-radius: var(--rt-radius-full);--rt-thread-list-line-radius: var(--rt-radius-full);display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.rt-thread-list__head{display:flex;flex:0 0 auto;align-items:center;block-size:56px;border-block-end:var(--rt-thread-list-border-width) solid var(--rt-color-border-strong);gap:var(--rt-space-2);padding-inline:var(--rt-space-4)}.rt-thread-list__search{flex:1 1 auto;max-inline-size:400px;min-inline-size:0}.rt-thread-list__filter-trigger{flex:0 0 auto}.rt-thread-list__filters-panel{display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-2);min-inline-size:220px}.rt-thread-list__rows{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto}.rt-thread-list__row{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4);border:none;background:none;border-inline-start:3px solid transparent;cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-4);inline-size:100%;text-align:start}.rt-thread-list__row:hover{background:var(--rt-color-bg-subtle)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread{position:relative;background:var(--rt-color-bg-subtle);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread .rt-thread-list__row-title{font-weight:var(--rt-font-weight-semibold)}.rt-thread-list__row--unread:before{position:absolute;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-action-primary);block-size:var(--rt-space-2);content:\"\";inline-size:var(--rt-space-2);inset-block-start:50%;inset-inline-start:var(--rt-space-2);transform:translateY(-50%)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg)}.rt-thread-list__row--overdue .rt-thread-list__row-time{color:var(--rt-color-state-error-text)}.rt-thread-list__row-wrap{position:relative}.rt-thread-list__row-wrap:hover .rt-thread-list__row-actions,.rt-thread-list__row-wrap:focus-within .rt-thread-list__row-actions,.rt-thread-list__row-wrap:has(.rt-menu--open) .rt-thread-list__row-actions{opacity:1;pointer-events:auto}.rt-thread-list__row-actions{position:absolute;display:flex;align-items:center;background:var(--rt-color-bg-subtle);gap:var(--rt-space-1);inset-block:0;inset-inline-end:0;opacity:0;padding-inline:var(--rt-space-2) var(--rt-space-4);pointer-events:none}.rt-thread-list__row--active+.rt-thread-list__row-actions{background:var(--rt-color-state-info-bg)}.rt-thread-list__row-body{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-thread-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-id{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-thread-list__row:hover .rt-copy-cell__button,.rt-thread-list__row:focus-within .rt-copy-cell__button{opacity:1}.rt-thread-list__row-subtitle{overflow:hidden;color:var(--rt-color-text-muted);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-meta{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2)}.rt-thread-list__row-time{color:var(--rt-color-text-muted);white-space:nowrap}.rt-thread-list__row-tag{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-thread-list-tag-radius);background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning-text);font-size:var(--rt-text-xs);white-space:nowrap}.rt-thread-list__row-dot{display:inline-block;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-text-link);block-size:6px;inline-size:6px}.rt-thread-list__row-skeleton{display:flex;flex-direction:column;padding:var(--rt-space-2) var(--rt-space-4);gap:var(--rt-space-2)}.rt-thread-list__row-loader{display:flex;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4)}.rt-thread-list__load-anchor{block-size:1px}.rt-thread-list__empty{padding:var(--rt-space-6) var(--rt-space-4)}.rt-thread-list__empty-preview{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-thread-list__empty-card{display:flex;align-items:center;padding:var(--rt-space-2);border:var(--rt-thread-list-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-thread-list-card-radius);background:var(--rt-color-bg-surface-subtle);gap:var(--rt-space-2)}.rt-thread-list__empty-card--offset{transform:translate(20px)}.rt-thread-list__empty-avatar{display:grid;flex:0 0 auto;border-radius:var(--rt-thread-list-avatar-radius);background:var(--rt-color-text-muted);block-size:24px;color:var(--rt-color-bg-surface);inline-size:24px;place-items:center}.rt-thread-list__empty-lines{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-thread-list__empty-line{border-radius:var(--rt-thread-list-line-radius);background:var(--rt-color-border-strong);block-size:6px;inline-size:112px}.rt-thread-list__empty-line--short{inline-size:48px}.rt-thread-list[data-rt-radius=none]{--rt-thread-list-card-radius: var(--rt-radius-none)}.rt-thread-list[data-rt-radius=xs]{--rt-thread-list-card-radius: var(--rt-radius-xs)}.rt-thread-list[data-rt-radius=sm]{--rt-thread-list-card-radius: var(--rt-radius-sm)}.rt-thread-list[data-rt-radius=ms]{--rt-thread-list-card-radius: var(--rt-radius-ms)}.rt-thread-list[data-rt-radius=md]{--rt-thread-list-card-radius: var(--rt-radius-md)}.rt-thread-list[data-rt-radius=lg]{--rt-thread-list-card-radius: var(--rt-radius-lg)}.rt-thread-list[data-rt-radius=xl]{--rt-thread-list-card-radius: var(--rt-radius-xl)}.rt-thread-list[data-rt-radius=\"2xl\"]{--rt-thread-list-card-radius: var(--rt-radius-2xl)}.rt-thread-list[data-rt-radius=full]{--rt-thread-list-card-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
-                // Angular
-                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 
-                // standalone components / directives
-                RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { 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: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "component", type: RtSkeletonComponent, selector: "rt-skeleton", inputs: ["shape", "size", "width", "height", "animation"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtInfiniteScrollDirective, selector: "[rtInfiniteScroll]", inputs: ["disabled", "rootMargin"], outputs: ["loadMore"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThreadListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-thread-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // Angular
-                        NgTemplateOutlet,
-                        ReactiveFormsModule,
-                        // standalone components / directives
-                        RtEmptyStateComponent,
-                        RtIconComponent,
-                        RtIconButtonComponent,
-                        RtInputComponent,
-                        RtPopoverDirective,
-                        RtSkeletonComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        RtInfiniteScrollDirective,
-                        ModDirective,
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                    }, template: "<ng-container rtBlock=\"rt-thread-list\">\n    <header rtElem=\"head\">\n        @if (searchTemplate()) {\n            <div rtElem=\"search\" qa-dataid=\"thread-list-search\">\n                <ng-container [ngTemplateOutlet]=\"searchTemplate()?.templateRef ?? null\" />\n            </div>\n        } @else {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"thread-list-search\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchPlaceholderText()\"\n                [formControl]=\"searchControl\" />\n        }\n        @if (filtersTemplate()) {\n            <rt-icon-button\n                rtElem=\"filter-trigger\"\n                qa-dataid=\"thread-list-filter\"\n                icon=\"filter\"\n                variant=\"secondary\"\n                rtPopoverAlign=\"end\"\n                [ariaLabel]=\"t().uiFilters\"\n                [indicator]=\"filtersActive()\"\n                [rtPopover]=\"filtersPanel\" />\n        }\n    </header>\n\n    <ng-template #rowButton let-row>\n        <button\n            rtElem=\"row\"\n            qa-dataid=\"thread-list-row\"\n            type=\"button\"\n            [attr.data-id]=\"row.id\"\n            [attr.data-unread]=\"row.hasUnread\"\n            [attr.aria-current]=\"row.id === activeId() ? 'true' : null\"\n            [rtMod]=\"{\n                active: row.id === activeId(),\n                unread: row.hasUnread,\n                overdue: !!row.overdue,\n            }\"\n            (click)=\"onSelect(row.id, $event)\">\n            <ng-container [ngTemplateOutlet]=\"rowTemplate()?.templateRef ?? null\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        </button>\n    </ng-template>\n\n    <ng-template #filtersPanel>\n        <div rtElem=\"filters-panel\" qa-dataid=\"thread-list-filters-panel\">\n            <ng-container [ngTemplateOutlet]=\"filtersTemplate()?.templateRef ?? null\" />\n        </div>\n    </ng-template>\n\n    <div rtElem=\"rows\" qa-dataid=\"thread-list-rows\">\n        @if (loading() && !rows().length) {\n            @for (i of skeletonRows; track i) {\n                <div rtElem=\"row-skeleton\" qa-dataid=\"thread-list-row-skeleton\" aria-hidden=\"true\">\n                    <rt-skeleton width=\"60%\" height=\"14px\" />\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n        } @else if (!rows().length) {\n            <rt-empty-state rtElem=\"empty\" qa-dataid=\"thread-list-empty\" [description]=\"t().uiThreadListEmptyHint\" [title]=\"emptyTitle()\">\n                <div rtEmptyIllustration rtElem=\"empty-preview\">\n                    @for (row of emptyPreviewRows(); track row.id) {\n                        <div rtElem=\"empty-card\" [rtMod]=\"{ offset: row.offset }\">\n                            <span rtElem=\"empty-avatar\">\n                                <rt-icon size=\"sm\" [name]=\"row.icon\" />\n                            </span>\n                            <span rtElem=\"empty-lines\">\n                                <span rtElem=\"empty-line\" [rtMod]=\"{ short: true }\"></span>\n                                <span rtElem=\"empty-line\"></span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </rt-empty-state>\n        } @else {\n            @for (row of rows(); track row.id) {\n                @if (rowActionsTemplate(); as actions) {\n                    <div rtElem=\"row-wrap\" qa-dataid=\"thread-list-row-wrap\">\n                        <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        <div rtElem=\"row-actions\" qa-dataid=\"thread-list-row-actions\">\n                            <ng-container [ngTemplateOutlet]=\"actions.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n            }\n            @if (fetching()) {\n                <div rtElem=\"row-loader\" qa-dataid=\"thread-list-row-loader\">\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n            @if (hasMore()) {\n                <div\n                    rtElem=\"load-anchor\"\n                    qa-dataid=\"thread-list-load-more\"\n                    aria-hidden=\"true\"\n                    rtInfiniteScroll\n                    [disabled]=\"fetching()\"\n                    (loadMore)=\"onLoadMore()\"></div>\n            }\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-thread-list{--rt-thread-list-border-width: var(--rt-border-width-thin);--rt-thread-list-card-radius: var(--rt-radius-lg);--rt-thread-list-tag-radius: var(--rt-radius-sm);--rt-thread-list-dot-radius: var(--rt-radius-full);--rt-thread-list-avatar-radius: var(--rt-radius-full);--rt-thread-list-line-radius: var(--rt-radius-full);display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.rt-thread-list__head{display:flex;flex:0 0 auto;align-items:center;block-size:56px;border-block-end:var(--rt-thread-list-border-width) solid var(--rt-color-border-strong);gap:var(--rt-space-2);padding-inline:var(--rt-space-4)}.rt-thread-list__search{flex:1 1 auto;max-inline-size:400px;min-inline-size:0}.rt-thread-list__filter-trigger{flex:0 0 auto}.rt-thread-list__filters-panel{display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-2);min-inline-size:220px}.rt-thread-list__rows{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto}.rt-thread-list__row{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4);border:none;background:none;border-inline-start:3px solid transparent;cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-4);inline-size:100%;text-align:start}.rt-thread-list__row:hover{background:var(--rt-color-bg-subtle)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread{position:relative;background:var(--rt-color-bg-subtle);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread .rt-thread-list__row-title{font-weight:var(--rt-font-weight-semibold)}.rt-thread-list__row--unread:before{position:absolute;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-action-primary);block-size:var(--rt-space-2);content:\"\";inline-size:var(--rt-space-2);inset-block-start:50%;inset-inline-start:var(--rt-space-2);transform:translateY(-50%)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg)}.rt-thread-list__row--overdue .rt-thread-list__row-time{color:var(--rt-color-state-error-text)}.rt-thread-list__row-wrap{position:relative}.rt-thread-list__row-wrap:hover .rt-thread-list__row-actions,.rt-thread-list__row-wrap:focus-within .rt-thread-list__row-actions,.rt-thread-list__row-wrap:has(.rt-menu--open) .rt-thread-list__row-actions{opacity:1;pointer-events:auto}.rt-thread-list__row-actions{position:absolute;display:flex;align-items:center;background:var(--rt-color-bg-subtle);gap:var(--rt-space-1);inset-block:0;inset-inline-end:0;opacity:0;padding-inline:var(--rt-space-2) var(--rt-space-4);pointer-events:none}.rt-thread-list__row--active+.rt-thread-list__row-actions{background:var(--rt-color-state-info-bg)}.rt-thread-list__row-body{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-thread-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-id{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-thread-list__row:hover .rt-copy-cell__button,.rt-thread-list__row:focus-within .rt-copy-cell__button{opacity:1}.rt-thread-list__row-subtitle{overflow:hidden;color:var(--rt-color-text-muted);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-meta{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2)}.rt-thread-list__row-time{color:var(--rt-color-text-muted);white-space:nowrap}.rt-thread-list__row-tag{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-thread-list-tag-radius);background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning-text);font-size:var(--rt-text-xs);white-space:nowrap}.rt-thread-list__row-dot{display:inline-block;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-text-link);block-size:6px;inline-size:6px}.rt-thread-list__row-skeleton{display:flex;flex-direction:column;padding:var(--rt-space-2) var(--rt-space-4);gap:var(--rt-space-2)}.rt-thread-list__row-loader{display:flex;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4)}.rt-thread-list__load-anchor{block-size:1px}.rt-thread-list__empty{padding:var(--rt-space-6) var(--rt-space-4)}.rt-thread-list__empty-preview{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-thread-list__empty-card{display:flex;align-items:center;padding:var(--rt-space-2);border:var(--rt-thread-list-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-thread-list-card-radius);background:var(--rt-color-bg-surface-subtle);gap:var(--rt-space-2)}.rt-thread-list__empty-card--offset{transform:translate(20px)}.rt-thread-list__empty-avatar{display:grid;flex:0 0 auto;border-radius:var(--rt-thread-list-avatar-radius);background:var(--rt-color-text-muted);block-size:24px;color:var(--rt-color-bg-surface);inline-size:24px;place-items:center}.rt-thread-list__empty-lines{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-thread-list__empty-line{border-radius:var(--rt-thread-list-line-radius);background:var(--rt-color-border-strong);block-size:6px;inline-size:112px}.rt-thread-list__empty-line--short{inline-size:48px}.rt-thread-list[data-rt-radius=none]{--rt-thread-list-card-radius: var(--rt-radius-none)}.rt-thread-list[data-rt-radius=xs]{--rt-thread-list-card-radius: var(--rt-radius-xs)}.rt-thread-list[data-rt-radius=sm]{--rt-thread-list-card-radius: var(--rt-radius-sm)}.rt-thread-list[data-rt-radius=ms]{--rt-thread-list-card-radius: var(--rt-radius-ms)}.rt-thread-list[data-rt-radius=md]{--rt-thread-list-card-radius: var(--rt-radius-md)}.rt-thread-list[data-rt-radius=lg]{--rt-thread-list-card-radius: var(--rt-radius-lg)}.rt-thread-list[data-rt-radius=xl]{--rt-thread-list-card-radius: var(--rt-radius-xl)}.rt-thread-list[data-rt-radius=\"2xl\"]{--rt-thread-list-card-radius: var(--rt-radius-2xl)}.rt-thread-list[data-rt-radius=full]{--rt-thread-list-card-radius: var(--rt-radius-full)}}\n"] }]
-        }], propDecorators: { rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtThreadListRowDirective), { isSignal: true }] }], rowActionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtThreadListRowActionsDirective), { isSignal: true }] }], filtersTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtThreadListFiltersDirective), { isSignal: true }] }], searchTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtThreadListSearchDirective), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], emptyPreviewIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPreviewIcons", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], filtersActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersActive", required: false }] }], selectRow: [{ type: i0.Output, args: ["selectRow"] }], openInNewTab: [{ type: i0.Output, args: ["openInNewTab"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const PREVIEW_ICONS = [
+	"user",
+	"users",
+	"user"
+];
+var RtThreadListComponent = class RtThreadListComponent {
+	constructor() {
+		this.#destroyRef = inject(DestroyRef);
+		this.#t_uiSearch = rtKitLabel("uiSearch");
+		this.#t_uiNothingFound = rtKitLabel("uiNothingFound");
+		this.t = inject(RT_KIT_LABELS);
+		this.searchPlaceholderText = computed(() => this.searchPlaceholder() || this.#t_uiSearch(), ...ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []);
+		this.emptyTitle = computed(() => this.emptyText() || this.#t_uiNothingFound(), ...ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []);
+		this.skeletonRows = Array.from({ length: SKELETON_ROWS_COUNT }, (_, i) => i);
+		this.emptyPreviewRows = computed(() => this.emptyPreviewIcons().map((icon, index) => ({
+			icon,
+			id: index,
+			offset: index % 2 === 1
+		})), ...ngDevMode ? [{ debugName: "emptyPreviewRows" }] : /* istanbul ignore next */ []);
+		this.searchControl = new FormControl("", { nonNullable: true });
+		this.rowTemplate = contentChild(RtThreadListRowDirective, ...ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []);
+		this.rowActionsTemplate = contentChild(RtThreadListRowActionsDirective, ...ngDevMode ? [{ debugName: "rowActionsTemplate" }] : /* istanbul ignore next */ []);
+		this.filtersTemplate = contentChild(RtThreadListFiltersDirective, ...ngDevMode ? [{ debugName: "filtersTemplate" }] : /* istanbul ignore next */ []);
+		this.searchTemplate = contentChild(RtThreadListSearchDirective, ...ngDevMode ? [{ debugName: "searchTemplate" }] : /* istanbul ignore next */ []);
+		this.rows = input([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.activeId = input(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+		this.searchPlaceholder = input("", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+		this.emptyText = input("", ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+		this.emptyPreviewIcons = input(PREVIEW_ICONS, ...ngDevMode ? [{ debugName: "emptyPreviewIcons" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.fetching = input(false, {
+			...ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.hasMore = input(false, {
+			...ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.filtersActive = input(false, {
+			...ngDevMode ? { debugName: "filtersActive" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.selectRow = output();
+		this.openInNewTab = output();
+		this.searchChange = output();
+		this.loadMore = output();
+	}
+	#destroyRef;
+	#t_uiSearch;
+	#t_uiNothingFound;
+	ngOnInit() {
+		this.searchControl.valueChanges.pipe(map((value) => value.trim()), searchDebounce(), distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef)).subscribe((value) => this.searchChange.emit(value));
+	}
+	onSelect(id, event) {
+		if (event.ctrlKey || event.metaKey) {
+			this.openInNewTab.emit(id);
+			return;
+		}
+		this.selectRow.emit(id);
+	}
+	onLoadMore() {
+		this.loadMore.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtThreadListComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtThreadListComponent,
+			isStandalone: true,
+			selector: "rt-thread-list",
+			inputs: {
+				rows: {
+					classPropertyName: "rows",
+					publicName: "rows",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activeId: {
+					classPropertyName: "activeId",
+					publicName: "activeId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				searchPlaceholder: {
+					classPropertyName: "searchPlaceholder",
+					publicName: "searchPlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyText: {
+					classPropertyName: "emptyText",
+					publicName: "emptyText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyPreviewIcons: {
+					classPropertyName: "emptyPreviewIcons",
+					publicName: "emptyPreviewIcons",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fetching: {
+					classPropertyName: "fetching",
+					publicName: "fetching",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasMore: {
+					classPropertyName: "hasMore",
+					publicName: "hasMore",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filtersActive: {
+					classPropertyName: "filtersActive",
+					publicName: "filtersActive",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				selectRow: "selectRow",
+				openInNewTab: "openInNewTab",
+				searchChange: "searchChange",
+				loadMore: "loadMore"
+			},
+			host: { classAttribute: "rt-thread-list" },
+			queries: [
+				{
+					propertyName: "rowTemplate",
+					first: true,
+					predicate: RtThreadListRowDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "rowActionsTemplate",
+					first: true,
+					predicate: RtThreadListRowActionsDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "filtersTemplate",
+					first: true,
+					predicate: RtThreadListFiltersDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "searchTemplate",
+					first: true,
+					predicate: RtThreadListSearchDirective,
+					descendants: true,
+					isSignal: true
+				}
+			],
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-thread-list\">\n    <header rtElem=\"head\">\n        @if (searchTemplate()) {\n            <div rtElem=\"search\" qa-dataid=\"thread-list-search\">\n                <ng-container [ngTemplateOutlet]=\"searchTemplate()?.templateRef ?? null\" />\n            </div>\n        } @else {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"thread-list-search\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchPlaceholderText()\"\n                [formControl]=\"searchControl\" />\n        }\n        @if (filtersTemplate()) {\n            <rt-icon-button\n                rtElem=\"filter-trigger\"\n                qa-dataid=\"thread-list-filter\"\n                icon=\"filter\"\n                variant=\"secondary\"\n                rtPopoverAlign=\"end\"\n                [ariaLabel]=\"t().uiFilters\"\n                [indicator]=\"filtersActive()\"\n                [rtPopover]=\"filtersPanel\" />\n        }\n    </header>\n\n    <ng-template #rowButton let-row>\n        <button\n            rtElem=\"row\"\n            qa-dataid=\"thread-list-row\"\n            type=\"button\"\n            [attr.data-id]=\"row.id\"\n            [attr.data-unread]=\"row.hasUnread\"\n            [attr.aria-current]=\"row.id === activeId() ? 'true' : null\"\n            [rtMod]=\"{\n                active: row.id === activeId(),\n                unread: row.hasUnread,\n                overdue: !!row.overdue,\n            }\"\n            (click)=\"onSelect(row.id, $event)\">\n            <ng-container [ngTemplateOutlet]=\"rowTemplate()?.templateRef ?? null\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        </button>\n    </ng-template>\n\n    <ng-template #filtersPanel>\n        <div rtElem=\"filters-panel\" qa-dataid=\"thread-list-filters-panel\">\n            <ng-container [ngTemplateOutlet]=\"filtersTemplate()?.templateRef ?? null\" />\n        </div>\n    </ng-template>\n\n    <div rtElem=\"rows\" qa-dataid=\"thread-list-rows\">\n        @if (loading() && !rows().length) {\n            @for (i of skeletonRows; track i) {\n                <div rtElem=\"row-skeleton\" qa-dataid=\"thread-list-row-skeleton\" aria-hidden=\"true\">\n                    <rt-skeleton width=\"60%\" height=\"14px\" />\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n        } @else if (!rows().length) {\n            <rt-empty-state rtElem=\"empty\" qa-dataid=\"thread-list-empty\" [description]=\"t().uiThreadListEmptyHint\" [title]=\"emptyTitle()\">\n                <div rtEmptyIllustration rtElem=\"empty-preview\">\n                    @for (row of emptyPreviewRows(); track row.id) {\n                        <div rtElem=\"empty-card\" [rtMod]=\"{ offset: row.offset }\">\n                            <span rtElem=\"empty-avatar\">\n                                <rt-icon size=\"sm\" [name]=\"row.icon\" />\n                            </span>\n                            <span rtElem=\"empty-lines\">\n                                <span rtElem=\"empty-line\" [rtMod]=\"{ short: true }\"></span>\n                                <span rtElem=\"empty-line\"></span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </rt-empty-state>\n        } @else {\n            @for (row of rows(); track row.id) {\n                @if (rowActionsTemplate(); as actions) {\n                    <div rtElem=\"row-wrap\" qa-dataid=\"thread-list-row-wrap\">\n                        <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        <div rtElem=\"row-actions\" qa-dataid=\"thread-list-row-actions\">\n                            <ng-container [ngTemplateOutlet]=\"actions.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n            }\n            @if (fetching()) {\n                <div rtElem=\"row-loader\" qa-dataid=\"thread-list-row-loader\">\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n            @if (hasMore()) {\n                <div\n                    rtElem=\"load-anchor\"\n                    qa-dataid=\"thread-list-load-more\"\n                    aria-hidden=\"true\"\n                    rtInfiniteScroll\n                    [disabled]=\"fetching()\"\n                    (loadMore)=\"onLoadMore()\"></div>\n            }\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-thread-list{--rt-thread-list-border-width: var(--rt-border-width-thin);--rt-thread-list-card-radius: var(--rt-radius-lg);--rt-thread-list-tag-radius: var(--rt-radius-sm);--rt-thread-list-dot-radius: var(--rt-radius-full);--rt-thread-list-avatar-radius: var(--rt-radius-full);--rt-thread-list-line-radius: var(--rt-radius-full);display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.rt-thread-list__head{display:flex;flex:0 0 auto;align-items:center;block-size:56px;border-block-end:var(--rt-thread-list-border-width) solid var(--rt-color-border-strong);gap:var(--rt-space-2);padding-inline:var(--rt-space-4)}.rt-thread-list__search{flex:1 1 auto;min-inline-size:0}.rt-thread-list__filter-trigger{flex:0 0 auto}.rt-thread-list__filters-panel{display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-2);min-inline-size:220px}.rt-thread-list__rows{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto}.rt-thread-list__row{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4);border:none;background:none;border-inline-start:3px solid transparent;cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-4);inline-size:100%;text-align:start}.rt-thread-list__row:hover{background:var(--rt-color-bg-subtle)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread{position:relative;background:var(--rt-color-bg-subtle);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread .rt-thread-list__row-title{font-weight:var(--rt-font-weight-semibold)}.rt-thread-list__row--unread:before{position:absolute;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-action-primary);block-size:var(--rt-space-2);content:\"\";inline-size:var(--rt-space-2);inset-block-start:50%;inset-inline-start:var(--rt-space-2);transform:translateY(-50%)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg)}.rt-thread-list__row--overdue .rt-thread-list__row-time{color:var(--rt-color-state-error-text)}.rt-thread-list__row-wrap{position:relative}.rt-thread-list__row-wrap:hover .rt-thread-list__row-actions,.rt-thread-list__row-wrap:focus-within .rt-thread-list__row-actions,.rt-thread-list__row-wrap:has(.rt-menu--open) .rt-thread-list__row-actions{opacity:1;pointer-events:auto}.rt-thread-list__row-actions{position:absolute;display:flex;align-items:center;background:var(--rt-color-bg-subtle);gap:var(--rt-space-1);inset-block:0;inset-inline-end:0;opacity:0;padding-inline:var(--rt-space-2) var(--rt-space-4);pointer-events:none}.rt-thread-list__row--active+.rt-thread-list__row-actions{background:var(--rt-color-state-info-bg)}.rt-thread-list__row-body{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-thread-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-id{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-thread-list__row:hover .rt-copy-cell__button,.rt-thread-list__row:focus-within .rt-copy-cell__button{opacity:1}.rt-thread-list__row-subtitle{overflow:hidden;color:var(--rt-color-text-muted);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-meta{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2)}.rt-thread-list__row-time{color:var(--rt-color-text-muted);white-space:nowrap}.rt-thread-list__row-tag{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-thread-list-tag-radius);background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning-text);font-size:var(--rt-text-xs);white-space:nowrap}.rt-thread-list__row-dot{display:inline-block;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-text-link);block-size:6px;inline-size:6px}.rt-thread-list__row-skeleton{display:flex;flex-direction:column;padding:var(--rt-space-2) var(--rt-space-4);gap:var(--rt-space-2)}.rt-thread-list__row-loader{display:flex;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4)}.rt-thread-list__load-anchor{block-size:1px}.rt-thread-list__empty{padding:var(--rt-space-6) var(--rt-space-4)}.rt-thread-list__empty-preview{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-thread-list__empty-card{display:flex;align-items:center;padding:var(--rt-space-2);border:var(--rt-thread-list-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-thread-list-card-radius);background:var(--rt-color-bg-surface-subtle);gap:var(--rt-space-2)}.rt-thread-list__empty-card--offset{transform:translate(20px)}.rt-thread-list__empty-avatar{display:grid;flex:0 0 auto;border-radius:var(--rt-thread-list-avatar-radius);background:var(--rt-color-text-muted);block-size:24px;color:var(--rt-color-bg-surface);inline-size:24px;place-items:center}.rt-thread-list__empty-lines{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-thread-list__empty-line{border-radius:var(--rt-thread-list-line-radius);background:var(--rt-color-border-strong);block-size:6px;inline-size:112px}.rt-thread-list__empty-line--short{inline-size:48px}.rt-thread-list[data-rt-radius=none]{--rt-thread-list-card-radius: var(--rt-radius-none)}.rt-thread-list[data-rt-radius=xs]{--rt-thread-list-card-radius: var(--rt-radius-xs)}.rt-thread-list[data-rt-radius=sm]{--rt-thread-list-card-radius: var(--rt-radius-sm)}.rt-thread-list[data-rt-radius=ms]{--rt-thread-list-card-radius: var(--rt-radius-ms)}.rt-thread-list[data-rt-radius=md]{--rt-thread-list-card-radius: var(--rt-radius-md)}.rt-thread-list[data-rt-radius=lg]{--rt-thread-list-card-radius: var(--rt-radius-lg)}.rt-thread-list[data-rt-radius=xl]{--rt-thread-list-card-radius: var(--rt-radius-xl)}.rt-thread-list[data-rt-radius=\"2xl\"]{--rt-thread-list-card-radius: var(--rt-radius-2xl)}.rt-thread-list[data-rt-radius=full]{--rt-thread-list-card-radius: var(--rt-radius-full)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					kind: "directive",
+					type: i2.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i2.FormControlDirective,
+					selector: "[formControl]",
+					inputs: [
+						"formControl",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "component",
+					type: RtEmptyStateComponent,
+					selector: "rt-empty-state",
+					inputs: [
+						"icon",
+						"glyph",
+						"title",
+						"description",
+						"framed"
+					]
+				},
+				{
+					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",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtInputComponent,
+					selector: "rt-input",
+					inputs: [
+						"appearance",
+						"type",
+						"placeholder",
+						"iconLeft",
+						"iconRight",
+						"passwordToggle",
+						"autocomplete"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "component",
+					type: RtSkeletonComponent,
+					selector: "rt-skeleton",
+					inputs: [
+						"shape",
+						"size",
+						"width",
+						"height",
+						"animation"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: RtInfiniteScrollDirective,
+					selector: "[rtInfiniteScroll]",
+					inputs: ["disabled", "rootMargin"],
+					outputs: ["loadMore"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtThreadListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-thread-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				ReactiveFormsModule,
+				RtEmptyStateComponent,
+				RtIconComponent,
+				RtIconButtonComponent,
+				RtInputComponent,
+				RtPopoverDirective,
+				RtSkeletonComponent,
+				BlockDirective,
+				ElemDirective,
+				RtInfiniteScrollDirective,
+				ModDirective
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-thread-list\">\n    <header rtElem=\"head\">\n        @if (searchTemplate()) {\n            <div rtElem=\"search\" qa-dataid=\"thread-list-search\">\n                <ng-container [ngTemplateOutlet]=\"searchTemplate()?.templateRef ?? null\" />\n            </div>\n        } @else {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"thread-list-search\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchPlaceholderText()\"\n                [formControl]=\"searchControl\" />\n        }\n        @if (filtersTemplate()) {\n            <rt-icon-button\n                rtElem=\"filter-trigger\"\n                qa-dataid=\"thread-list-filter\"\n                icon=\"filter\"\n                variant=\"secondary\"\n                rtPopoverAlign=\"end\"\n                [ariaLabel]=\"t().uiFilters\"\n                [indicator]=\"filtersActive()\"\n                [rtPopover]=\"filtersPanel\" />\n        }\n    </header>\n\n    <ng-template #rowButton let-row>\n        <button\n            rtElem=\"row\"\n            qa-dataid=\"thread-list-row\"\n            type=\"button\"\n            [attr.data-id]=\"row.id\"\n            [attr.data-unread]=\"row.hasUnread\"\n            [attr.aria-current]=\"row.id === activeId() ? 'true' : null\"\n            [rtMod]=\"{\n                active: row.id === activeId(),\n                unread: row.hasUnread,\n                overdue: !!row.overdue,\n            }\"\n            (click)=\"onSelect(row.id, $event)\">\n            <ng-container [ngTemplateOutlet]=\"rowTemplate()?.templateRef ?? null\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        </button>\n    </ng-template>\n\n    <ng-template #filtersPanel>\n        <div rtElem=\"filters-panel\" qa-dataid=\"thread-list-filters-panel\">\n            <ng-container [ngTemplateOutlet]=\"filtersTemplate()?.templateRef ?? null\" />\n        </div>\n    </ng-template>\n\n    <div rtElem=\"rows\" qa-dataid=\"thread-list-rows\">\n        @if (loading() && !rows().length) {\n            @for (i of skeletonRows; track i) {\n                <div rtElem=\"row-skeleton\" qa-dataid=\"thread-list-row-skeleton\" aria-hidden=\"true\">\n                    <rt-skeleton width=\"60%\" height=\"14px\" />\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n        } @else if (!rows().length) {\n            <rt-empty-state rtElem=\"empty\" qa-dataid=\"thread-list-empty\" [description]=\"t().uiThreadListEmptyHint\" [title]=\"emptyTitle()\">\n                <div rtEmptyIllustration rtElem=\"empty-preview\">\n                    @for (row of emptyPreviewRows(); track row.id) {\n                        <div rtElem=\"empty-card\" [rtMod]=\"{ offset: row.offset }\">\n                            <span rtElem=\"empty-avatar\">\n                                <rt-icon size=\"sm\" [name]=\"row.icon\" />\n                            </span>\n                            <span rtElem=\"empty-lines\">\n                                <span rtElem=\"empty-line\" [rtMod]=\"{ short: true }\"></span>\n                                <span rtElem=\"empty-line\"></span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </rt-empty-state>\n        } @else {\n            @for (row of rows(); track row.id) {\n                @if (rowActionsTemplate(); as actions) {\n                    <div rtElem=\"row-wrap\" qa-dataid=\"thread-list-row-wrap\">\n                        <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        <div rtElem=\"row-actions\" qa-dataid=\"thread-list-row-actions\">\n                            <ng-container [ngTemplateOutlet]=\"actions.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"rowButton\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n            }\n            @if (fetching()) {\n                <div rtElem=\"row-loader\" qa-dataid=\"thread-list-row-loader\">\n                    <rt-skeleton width=\"90%\" height=\"12px\" />\n                </div>\n            }\n            @if (hasMore()) {\n                <div\n                    rtElem=\"load-anchor\"\n                    qa-dataid=\"thread-list-load-more\"\n                    aria-hidden=\"true\"\n                    rtInfiniteScroll\n                    [disabled]=\"fetching()\"\n                    (loadMore)=\"onLoadMore()\"></div>\n            }\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-thread-list{--rt-thread-list-border-width: var(--rt-border-width-thin);--rt-thread-list-card-radius: var(--rt-radius-lg);--rt-thread-list-tag-radius: var(--rt-radius-sm);--rt-thread-list-dot-radius: var(--rt-radius-full);--rt-thread-list-avatar-radius: var(--rt-radius-full);--rt-thread-list-line-radius: var(--rt-radius-full);display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.rt-thread-list__head{display:flex;flex:0 0 auto;align-items:center;block-size:56px;border-block-end:var(--rt-thread-list-border-width) solid var(--rt-color-border-strong);gap:var(--rt-space-2);padding-inline:var(--rt-space-4)}.rt-thread-list__search{flex:1 1 auto;min-inline-size:0}.rt-thread-list__filter-trigger{flex:0 0 auto}.rt-thread-list__filters-panel{display:flex;flex-direction:column;padding:var(--rt-space-4);gap:var(--rt-space-2);min-inline-size:220px}.rt-thread-list__rows{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto}.rt-thread-list__row{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4);border:none;background:none;border-inline-start:3px solid transparent;cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-4);inline-size:100%;text-align:start}.rt-thread-list__row:hover{background:var(--rt-color-bg-subtle)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread{position:relative;background:var(--rt-color-bg-subtle);border-inline-start-color:var(--rt-color-action-primary)}.rt-thread-list__row--unread .rt-thread-list__row-title{font-weight:var(--rt-font-weight-semibold)}.rt-thread-list__row--unread:before{position:absolute;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-action-primary);block-size:var(--rt-space-2);content:\"\";inline-size:var(--rt-space-2);inset-block-start:50%;inset-inline-start:var(--rt-space-2);transform:translateY(-50%)}.rt-thread-list__row--active,.rt-thread-list__row--active:hover{background:var(--rt-color-state-info-bg)}.rt-thread-list__row--overdue .rt-thread-list__row-time{color:var(--rt-color-state-error-text)}.rt-thread-list__row-wrap{position:relative}.rt-thread-list__row-wrap:hover .rt-thread-list__row-actions,.rt-thread-list__row-wrap:focus-within .rt-thread-list__row-actions,.rt-thread-list__row-wrap:has(.rt-menu--open) .rt-thread-list__row-actions{opacity:1;pointer-events:auto}.rt-thread-list__row-actions{position:absolute;display:flex;align-items:center;background:var(--rt-color-bg-subtle);gap:var(--rt-space-1);inset-block:0;inset-inline-end:0;opacity:0;padding-inline:var(--rt-space-2) var(--rt-space-4);pointer-events:none}.rt-thread-list__row--active+.rt-thread-list__row-actions{background:var(--rt-color-state-info-bg)}.rt-thread-list__row-body{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-thread-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-id{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-thread-list__row:hover .rt-copy-cell__button,.rt-thread-list__row:focus-within .rt-copy-cell__button{opacity:1}.rt-thread-list__row-subtitle{overflow:hidden;color:var(--rt-color-text-muted);text-overflow:ellipsis;white-space:nowrap}.rt-thread-list__row-meta{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2)}.rt-thread-list__row-time{color:var(--rt-color-text-muted);white-space:nowrap}.rt-thread-list__row-tag{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-thread-list-tag-radius);background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning-text);font-size:var(--rt-text-xs);white-space:nowrap}.rt-thread-list__row-dot{display:inline-block;border-radius:var(--rt-thread-list-dot-radius);background:var(--rt-color-text-link);block-size:6px;inline-size:6px}.rt-thread-list__row-skeleton{display:flex;flex-direction:column;padding:var(--rt-space-2) var(--rt-space-4);gap:var(--rt-space-2)}.rt-thread-list__row-loader{display:flex;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4)}.rt-thread-list__load-anchor{block-size:1px}.rt-thread-list__empty{padding:var(--rt-space-6) var(--rt-space-4)}.rt-thread-list__empty-preview{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-thread-list__empty-card{display:flex;align-items:center;padding:var(--rt-space-2);border:var(--rt-thread-list-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-thread-list-card-radius);background:var(--rt-color-bg-surface-subtle);gap:var(--rt-space-2)}.rt-thread-list__empty-card--offset{transform:translate(20px)}.rt-thread-list__empty-avatar{display:grid;flex:0 0 auto;border-radius:var(--rt-thread-list-avatar-radius);background:var(--rt-color-text-muted);block-size:24px;color:var(--rt-color-bg-surface);inline-size:24px;place-items:center}.rt-thread-list__empty-lines{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-thread-list__empty-line{border-radius:var(--rt-thread-list-line-radius);background:var(--rt-color-border-strong);block-size:6px;inline-size:112px}.rt-thread-list__empty-line--short{inline-size:48px}.rt-thread-list[data-rt-radius=none]{--rt-thread-list-card-radius: var(--rt-radius-none)}.rt-thread-list[data-rt-radius=xs]{--rt-thread-list-card-radius: var(--rt-radius-xs)}.rt-thread-list[data-rt-radius=sm]{--rt-thread-list-card-radius: var(--rt-radius-sm)}.rt-thread-list[data-rt-radius=ms]{--rt-thread-list-card-radius: var(--rt-radius-ms)}.rt-thread-list[data-rt-radius=md]{--rt-thread-list-card-radius: var(--rt-radius-md)}.rt-thread-list[data-rt-radius=lg]{--rt-thread-list-card-radius: var(--rt-radius-lg)}.rt-thread-list[data-rt-radius=xl]{--rt-thread-list-card-radius: var(--rt-radius-xl)}.rt-thread-list[data-rt-radius=\"2xl\"]{--rt-thread-list-card-radius: var(--rt-radius-2xl)}.rt-thread-list[data-rt-radius=full]{--rt-thread-list-card-radius: var(--rt-radius-full)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		rowTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtThreadListRowDirective), { isSignal: true }]
+		}],
+		rowActionsTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtThreadListRowActionsDirective), { isSignal: true }]
+		}],
+		filtersTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtThreadListFiltersDirective), { isSignal: true }]
+		}],
+		searchTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtThreadListSearchDirective), { isSignal: true }]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}],
+		activeId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeId",
+				required: false
+			}]
+		}],
+		searchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchPlaceholder",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		emptyPreviewIcons: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyPreviewIcons",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		fetching: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fetching",
+				required: false
+			}]
+		}],
+		hasMore: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasMore",
+				required: false
+			}]
+		}],
+		filtersActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filtersActive",
+				required: false
+			}]
+		}],
+		selectRow: [{
+			type: i0.Output,
+			args: ["selectRow"]
+		}],
+		openInNewTab: [{
+			type: i0.Output,
+			args: ["openInNewTab"]
+		}],
+		searchChange: [{
+			type: i0.Output,
+			args: ["searchChange"]
+		}],
+		loadMore: [{
+			type: i0.Output,
+			args: ["loadMore"]
+		}]
+	}
+});
 export { RtThreadListComponent, RtThreadListFiltersDirective, RtThreadListRowActionsDirective, RtThreadListRowDirective, RtThreadListSearchDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-thread-list.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-thread-list.mjs.map