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

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

@@ -0,0 +1,196 @@
+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>` с фильтрами — его содержимое рендерится в поповере,
+ * который открывает иконка-фильтр в шапке списка.
+ */
+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` пусты). */
+const SKELETON_ROWS_COUNT = 6;
+/**
+ * Презентационный список тредов для воркспейсов:
+ * поиск с дебаунсом, фильтр-поповер и бесконечная прокрутка. Данные и оркестрация
+ * — на вызывающем; список стора/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);
+        /** Декоративные строки-превью для иллюстрации пустого состояния списка. */
+        this.emptyPreviewRows = [
+            { id: 1, icon: 'user', offset: false },
+            { id: 2, icon: 'users', offset: true },
+            { id: 3, icon: 'user', offset: false },
+        ];
+        this.searchControl = new FormControl('', {
+            nonNullable: true,
+        });
+        this.rowTemplate = contentChild((RtThreadListRowDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowTemplate" }] : /* 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.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 }, 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: "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 #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                <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            }\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-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", "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 #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                <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            }\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-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 }] }], 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 }] }], 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.
+ */
+
+export { RtThreadListComponent, RtThreadListFiltersDirective, RtThreadListRowDirective, RtThreadListSearchDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-thread-list.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-thread-list.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/thread-list/rt-thread-list.directives.ts","../../../projects/ui-kit-v2/src/lib/components/thread-list/rt-thread-list.component.ts","../../../projects/ui-kit-v2/src/lib/components/thread-list/rt-thread-list.component.html","../../../projects/ui-kit-v2/src/lib/components/thread-list/rt-tools-ui-kit-v2-thread-list.ts"],"sourcesContent":["import { Directive, inject, input, InputSignal, TemplateRef } from '@angular/core';\n\nimport { IRtThreadList } from './rt-thread-list.model';\n\n/**\n * Помечает `<ng-template>` содержимого строки списка. Входом `[rtThreadListRow]`\n * потребитель передаёт свой массив строк — из него выводится тип `TRow`, поэтому\n * `let-row` в темплейте типизируется строго (context-guard ниже это подтверждает).\n */\n@Directive({\n    selector: 'ng-template[rtThreadListRow]',\n})\nexport class RtThreadListRowDirective<TRow extends IRtThreadList.Row> {\n    public readonly templateRef: TemplateRef<IRtThreadList.RowContext<TRow>> =\n        inject<TemplateRef<IRtThreadList.RowContext<TRow>>>(TemplateRef);\n\n    public readonly rows: InputSignal<readonly TRow[]> = input<readonly TRow[]>([], {\n        alias: 'rtThreadListRow',\n    });\n\n    public static ngTemplateContextGuard<TRow extends IRtThreadList.Row>(\n        _directive: RtThreadListRowDirective<TRow>,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n        context: unknown\n    ): context is IRtThreadList.RowContext<TRow> {\n        return true;\n    }\n}\n\n/**\n * Помечает `<ng-template>` с фильтрами — его содержимое рендерится в поповере,\n * который открывает иконка-фильтр в шапке списка.\n */\n@Directive({\n    selector: 'ng-template[rtThreadListFilters]',\n})\nexport class RtThreadListFiltersDirective {\n    public readonly templateRef: TemplateRef<unknown> = inject<TemplateRef<unknown>>(TemplateRef);\n}\n\n/**\n * Помечает `<ng-template>` с кастомным контролом поиска. Когда потребитель его\n * проецирует, шапка списка рендерит его содержимое вместо встроенного `rt-input`\n * — так воркспейс подставляет свой автокомплит по каталогу вместо текстового\n * поиска, не ломая generic-природу списка.\n */\n@Directive({\n    selector: 'ng-template[rtThreadListSearch]',\n})\nexport class RtThreadListSearchDirective {\n    public readonly templateRef: TemplateRef<unknown> = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    computed,\n    contentChild,\n    inject,\n    input,\n    output,\n    ChangeDetectionStrategy,\n    Component,\n    DestroyRef,\n    InputSignal,\n    InputSignalWithTransform,\n    OnInit,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\n\nimport { distinctUntilChanged, map } from 'rxjs';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { searchDebounce } from '@rt-tools/ui-kit-v2/core';\n\nimport { RtInfiniteScrollDirective } from '@rt-tools/ui-kit-v2/core';\nimport { RtEmptyStateComponent } from '@rt-tools/ui-kit-v2/empty-state';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtInputComponent } from '@rt-tools/ui-kit-v2/input';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtSkeletonComponent } from '@rt-tools/ui-kit-v2/skeleton';\nimport { RtThreadListFiltersDirective, RtThreadListRowDirective, RtThreadListSearchDirective } from './rt-thread-list.directives';\nimport { IRtThreadList } from './rt-thread-list.model';\n\nconst BEM_BLOCK: string = 'rt-thread-list';\n\n/** Кол-во скелетон-строк на первичной загрузке (пока `rows` пусты). */\nconst SKELETON_ROWS_COUNT: number = 6;\n\n/**\n * Презентационный список тредов для воркспейсов:\n * поиск с дебаунсом, фильтр-поповер и бесконечная прокрутка. Данные и оркестрация\n * — на вызывающем; список стора/api не видит.\n *\n * Строку рисует потребитель через `<ng-template rtThreadListRow let-row>` (body +\n * meta); оболочка владеет кнопкой строки (active/unread/overdue), поиском, кнопкой\n * фильтров (точка-индикатор при `filtersActive`) и скроллом. Фильтры потребитель\n * кладёт в `<ng-template rtThreadListFilters>` — они рендерятся в поповере.\n */\n@Component({\n    selector: 'rt-thread-list',\n    templateUrl: './rt-thread-list.component.html',\n    styleUrls: ['./rt-thread-list.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n        ReactiveFormsModule,\n\n        // standalone components / directives\n        RtEmptyStateComponent,\n        RtIconComponent,\n        RtIconButtonComponent,\n        RtInputComponent,\n        RtPopoverDirective,\n        RtSkeletonComponent,\n        BlockDirective,\n        ElemDirective,\n        RtInfiniteScrollDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtThreadListComponent<TRow extends IRtThreadList.Row> implements OnInit {\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    readonly #t_uiSearch: Signal<string> = rtKitLabel('uiSearch');\n    readonly #t_uiNothingFound: Signal<string> = rtKitLabel('uiNothingFound');\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly searchPlaceholderText: Signal<string> = computed((): string => this.searchPlaceholder() || this.#t_uiSearch());\n    protected readonly emptyTitle: Signal<string> = computed((): string => this.emptyText() || this.#t_uiNothingFound());\n\n    protected readonly skeletonRows: number[] = Array.from({ length: SKELETON_ROWS_COUNT }, (_: unknown, i: number): number => i);\n\n    /** Декоративные строки-превью для иллюстрации пустого состояния списка. */\n    protected readonly emptyPreviewRows: readonly {\n        id: number;\n        icon: IRtIcon.Name;\n        offset: boolean;\n    }[] = [\n        { id: 1, icon: 'user', offset: false },\n        { id: 2, icon: 'users', offset: true },\n        { id: 3, icon: 'user', offset: false },\n    ];\n\n    protected readonly searchControl: FormControl<string> = new FormControl<string>('', {\n        nonNullable: true,\n    });\n\n    protected readonly rowTemplate: Signal<RtThreadListRowDirective<TRow> | undefined> = contentChild(RtThreadListRowDirective<TRow>);\n\n    protected readonly filtersTemplate: Signal<RtThreadListFiltersDirective | undefined> = contentChild(RtThreadListFiltersDirective);\n\n    protected readonly searchTemplate: Signal<RtThreadListSearchDirective | undefined> = contentChild(RtThreadListSearchDirective);\n\n    public readonly rows: InputSignal<readonly TRow[]> = input<readonly TRow[]>([]);\n\n    public readonly activeId: InputSignal<IRtThreadList.TRowId | null> = input<IRtThreadList.TRowId | null>(null);\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly searchPlaceholder: InputSignal<string> = input<string>('');\n\n    public readonly emptyText: InputSignal<string> = input<string>('');\n\n    public readonly loading: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly fetching: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly hasMore: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly filtersActive: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    // Имя `select` зарезервировано под нативное DOM-событие\n    // (@angular-eslint/no-output-native), поэтому output переименован.\n    public readonly selectRow: OutputEmitterRef<IRtThreadList.TRowId> = output<IRtThreadList.TRowId>();\n\n    // Ctrl/⌘+клик по строке: потребитель открывает строку в новой вкладке.\n    // Обычный клик остаётся на `selectRow`.\n    public readonly openInNewTab: OutputEmitterRef<IRtThreadList.TRowId> = output<IRtThreadList.TRowId>();\n\n    public readonly searchChange: OutputEmitterRef<string> = output<string>();\n\n    public readonly loadMore: OutputEmitterRef<void> = output<void>();\n\n    public ngOnInit(): void {\n        // Дебаунс непустого ввода; очистка крестиком применяется сразу (searchDebounce).\n        this.searchControl.valueChanges\n            .pipe(\n                map((value: string): string => value.trim()),\n                searchDebounce(),\n                distinctUntilChanged(),\n                takeUntilDestroyed(this.#destroyRef)\n            )\n            .subscribe((value: string): void => this.searchChange.emit(value));\n    }\n\n    protected onSelect(id: IRtThreadList.TRowId, event: MouseEvent): void {\n        // Ctrl (Win/Linux) или ⌘ (macOS) — «открыть в новой вкладке», как у\n        // нативных ссылок. Иначе — обычный выбор строки в текущей вкладке.\n        if (event.ctrlKey || event.metaKey) {\n            this.openInNewTab.emit(id);\n            return;\n        }\n        this.selectRow.emit(id);\n    }\n\n    protected onLoadMore(): void {\n        this.loadMore.emit();\n    }\n}\n","<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 #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                <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            }\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+
+const BEM_BLOCK = 'rt-timeline';
+/**
+ * Вертикальный таймлайн-степпер: список шагов сверху вниз, каждый — точка на
+ * соединительной линии, заголовок и вторичная строка (время + инициатор). Шаги
+ * задаются через input `steps`; статус точки (`complete`/`current`/`pending`)
+ * приходит готовым в каждом шаге — компонент презентационный и порядок не считает.
+ */
+class RtTimelineComponent {
+    constructor() {
+        this.steps = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtTimelineComponent, isStandalone: true, selector: "rt-timeline", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-timeline" }, ngImport: i0, template: "<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-timeline{display:block}rt-timeline .rt-timeline{--rt-timeline-dot-radius: var(--rt-radius-full);--rt-timeline-dot-shadow: var(--rt-shadow-step-indicator);--rt-timeline-dot-border-width: var(--rt-border-width-thin);display:flex;flex-direction:column;padding:0;margin:0;list-style:none}rt-timeline .rt-timeline__item{display:flex;gap:var(--rt-space-sm)}rt-timeline .rt-timeline__item:last-child .rt-timeline__body{padding-block-end:0}rt-timeline .rt-timeline__rail{display:flex;flex-direction:column;align-items:center;inline-size:16px}rt-timeline .rt-timeline__dot{box-sizing:border-box;flex:none;border-radius:var(--rt-timeline-dot-radius);background:var(--rt-color-stepper-track);block-size:10px;inline-size:10px;margin-block-start:var(--rt-space-xs)}rt-timeline .rt-timeline__dot--status--complete{background:var(--rt-color-stepper-progress)}rt-timeline .rt-timeline__dot--status--current{background:var(--rt-color-stepper-current);block-size:14px;box-shadow:var(--rt-timeline-dot-shadow);inline-size:14px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__dot--status--pending{border:var(--rt-timeline-dot-border-width) solid var(--rt-color-stepper-track);background:transparent}rt-timeline .rt-timeline__line{flex:1 1 auto;background:var(--rt-color-stepper-track);inline-size:2px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__body{display:flex;flex-direction:column;gap:var(--rt-space-2xs);padding-block-end:var(--rt-space-md)}rt-timeline .rt-timeline__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__meta{display:inline-flex;flex-wrap:wrap;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);gap:var(--rt-space-xs);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__actor:before{content:\"\\b7\";margin-inline-end:var(--rt-space-xs)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { 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: RtTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-timeline{display:block}rt-timeline .rt-timeline{--rt-timeline-dot-radius: var(--rt-radius-full);--rt-timeline-dot-shadow: var(--rt-shadow-step-indicator);--rt-timeline-dot-border-width: var(--rt-border-width-thin);display:flex;flex-direction:column;padding:0;margin:0;list-style:none}rt-timeline .rt-timeline__item{display:flex;gap:var(--rt-space-sm)}rt-timeline .rt-timeline__item:last-child .rt-timeline__body{padding-block-end:0}rt-timeline .rt-timeline__rail{display:flex;flex-direction:column;align-items:center;inline-size:16px}rt-timeline .rt-timeline__dot{box-sizing:border-box;flex:none;border-radius:var(--rt-timeline-dot-radius);background:var(--rt-color-stepper-track);block-size:10px;inline-size:10px;margin-block-start:var(--rt-space-xs)}rt-timeline .rt-timeline__dot--status--complete{background:var(--rt-color-stepper-progress)}rt-timeline .rt-timeline__dot--status--current{background:var(--rt-color-stepper-current);block-size:14px;box-shadow:var(--rt-timeline-dot-shadow);inline-size:14px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__dot--status--pending{border:var(--rt-timeline-dot-border-width) solid var(--rt-color-stepper-track);background:transparent}rt-timeline .rt-timeline__line{flex:1 1 auto;background:var(--rt-color-stepper-track);inline-size:2px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__body{display:flex;flex-direction:column;gap:var(--rt-space-2xs);padding-block-end:var(--rt-space-md)}rt-timeline .rt-timeline__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__meta{display:inline-flex;flex-wrap:wrap;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);gap:var(--rt-space-xs);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__actor:before{content:\"\\b7\";margin-inline-end:var(--rt-space-xs)}}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtTimelineComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-timeline.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-timeline.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/timeline/rt-timeline.component.ts","../../../projects/ui-kit-v2/src/lib/components/timeline/rt-timeline.component.html","../../../projects/ui-kit-v2/src/lib/components/timeline/rt-tools-ui-kit-v2-timeline.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, InputSignal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { IRtTimeline } from './rt-timeline.model';\n\nconst BEM_BLOCK: string = 'rt-timeline';\n\n/**\n * Вертикальный таймлайн-степпер: список шагов сверху вниз, каждый — точка на\n * соединительной линии, заголовок и вторичная строка (время + инициатор). Шаги\n * задаются через input `steps`; статус точки (`complete`/`current`/`pending`)\n * приходит готовым в каждом шаге — компонент презентационный и порядок не считает.\n */\n@Component({\n    selector: 'rt-timeline',\n    templateUrl: './rt-timeline.component.html',\n    styleUrl: './rt-timeline.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtTimelineComponent {\n    public readonly steps: InputSignal<readonly IRtTimeline.Step[]> = input<readonly IRtTimeline.Step[]>([]);\n}\n","<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAMA,MAAM,SAAS,GAAW,aAAa;AAEvC;;;;;AAKG;MAiBU,mBAAmB,CAAA;AAhBhC,IAAA,WAAA,GAAA;QAiBoB,IAAA,CAAA,KAAK,GAA6C,KAAK,CAA8B,EAAE;kFAAC;AAC3G,IAAA;8GAFY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,oPC9BhC,spCAyBA,EAAA,MAAA,EAAA,CAAA,o4DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBDHQ,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMP,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,SAAS;+BACI,aAAa,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,cAAc;wBACd,aAAa;wBACb,YAAY;qBACf,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,spCAAA,EAAA,MAAA,EAAA,CAAA,o4DAAA,CAAA,EAAA;;;AE5BL;;AAEG;;;;"}