@rt-tools/ui-kit-v2 0.39.0 → 0.39.2

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

@@ -1,13 +1,14 @@
 import { Clipboard } from "@angular/cdk/clipboard";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, Pipe, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
-import { BlockDirective, ElemDirective, IDBStorageService, ModDirective } from "@rt-tools/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, Injector, Pipe, TemplateRef, ViewChild, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { BlockDirective, ElemDirective, IDBStorageService, ModDirective, WINDOW } from "@rt-tools/core";
 import { BreakpointsService, ERtStorageKeys, RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
 import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
 import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
 import { NgTemplateOutlet } from "@angular/common";
 import { EFilterOperatorType, EListSortOrder } from "@rt-tools/utils";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { rtAriaSortOf, rtFilterOf, rtFiltersWithOperator, rtFiltersWithValue, rtNextSort, rtSortDirectionOf } from "@rt-tools/ui-kit-v2/table-core";
 import { CDK_TABLE, CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef, CdkTable, DataRowOutlet, FooterRowOutlet, HeaderRowOutlet, NoDataRowOutlet } from "@angular/cdk/table";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { RtEmptyStateComponent } from "@rt-tools/ui-kit-v2/empty-state";
@@ -50,7 +51,7 @@ var RtCopyCellComponent = class RtCopyCellComponent {
 		this.#copiedLabel = rtKitLabel(COPIED_KEY);
 		this.copied = signal(false, ...ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []);
 		this.hint = signal("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
-		this.iconName = computed(() => this.copied() ? "check" : "copy", ...ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []);
+		this.iconName = computed(() => this.copied() ? "check" : "ico-copy", ...ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []);
 		this.actionLabel = computed(() => this.copied() ? this.#copiedLabel() : this.#copyLabel(), ...ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []);
 		this.value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 		this.variant = input("ghost", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
@@ -58,6 +59,10 @@ var RtCopyCellComponent = class RtCopyCellComponent {
 			...ngDevMode ? { debugName: "revealOnHover" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.framed = input(false, {
+			...ngDevMode ? { debugName: "framed" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
 		this.#destroyRef.onDestroy(() => this.#clearTimer());
 	}
 	measureTruncation() {
@@ -125,6 +130,13 @@ var RtCopyCellComponent = class RtCopyCellComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				framed: {
+					classPropertyName: "framed",
+					publicName: "framed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: {
@@ -132,12 +144,15 @@ var RtCopyCellComponent = class RtCopyCellComponent {
 					"mouseenter": "measureTruncation()",
 					"focusin": "measureTruncation()"
 				},
-				properties: { "class.rt-copy-cell--static": "!revealOnHover()" },
+				properties: {
+					"class.rt-copy-cell--static": "!revealOnHover() || framed()",
+					"class.rt-copy-cell--framed": "framed()"
+				},
 				classAttribute: "rt-copy-cell"
 			},
 			ngImport: i0,
 			template: "<ng-container rtBlock=\"rt-copy-cell\">\n    <span rtElem=\"content\" qa-dataid=\"copy-cell-content\" [rtTooltip]=\"hint()\"><ng-content /></span>\n    <rt-icon-button\n        rtElem=\"button\"\n        qa-dataid=\"copy-cell-button\"\n        size=\"sm\"\n        [icon]=\"iconName()\"\n        [variant]=\"variant()\"\n        [ariaLabel]=\"actionLabel()\"\n        [tooltip]=\"actionLabel()\"\n        (clicked)=\"onCopy($event)\" />\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-copy-cell{--rt-copy-cell-transition-duration: var(--rt-duration-fast);display:inline-flex;min-width:0;align-items:center;gap:var(--rt-space-xs)}.rt-copy-cell__content{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-copy-cell__button{flex:0 0 auto;opacity:0;transition:opacity var(--rt-copy-cell-transition-duration) ease}.rt-copy-cell:hover .rt-copy-cell__button,.rt-copy-cell:focus-within .rt-copy-cell__button{opacity:1}.rt-copy-cell--static .rt-copy-cell__button{opacity:1}.rt-table tbody tr:hover .rt-copy-cell__button,.rt-table tbody tr:focus-within .rt-copy-cell__button{opacity:1}}\n"],
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-copy-cell{--rt-copy-cell-transition-duration: var(--rt-duration-fast);display:inline-flex;min-width:0;align-items:center;gap:var(--rt-space-xs)}.rt-copy-cell__content{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-copy-cell__button{flex:0 0 auto;opacity:0;transition:opacity var(--rt-copy-cell-transition-duration) ease}.rt-copy-cell:hover .rt-copy-cell__button,.rt-copy-cell:focus-within .rt-copy-cell__button{opacity:1}.rt-copy-cell--static .rt-copy-cell__button{opacity:1}.rt-copy-cell--framed{display:flex;width:100%;box-sizing:border-box;padding:var(--rt-space-1) var(--rt-space-1) var(--rt-space-1) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);gap:var(--rt-space-sm);line-height:var(--rt-leading-normal)}.rt-copy-cell--framed .rt-copy-cell__content{flex:1 1 auto;overflow-wrap:anywhere;text-overflow:clip;white-space:normal}.rt-table tbody tr:hover .rt-copy-cell__button,.rt-table tbody tr:focus-within .rt-copy-cell__button{opacity:1}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -217,12 +232,13 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			host: {
 				class: BEM_BLOCK$5,
-				"[class.rt-copy-cell--static]": "!revealOnHover()",
+				"[class.rt-copy-cell--static]": "!revealOnHover() || framed()",
+				"[class.rt-copy-cell--framed]": "framed()",
 				"(mouseenter)": "measureTruncation()",
 				"(focusin)": "measureTruncation()"
 			},
 			template: "<ng-container rtBlock=\"rt-copy-cell\">\n    <span rtElem=\"content\" qa-dataid=\"copy-cell-content\" [rtTooltip]=\"hint()\"><ng-content /></span>\n    <rt-icon-button\n        rtElem=\"button\"\n        qa-dataid=\"copy-cell-button\"\n        size=\"sm\"\n        [icon]=\"iconName()\"\n        [variant]=\"variant()\"\n        [ariaLabel]=\"actionLabel()\"\n        [tooltip]=\"actionLabel()\"\n        (clicked)=\"onCopy($event)\" />\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-copy-cell{--rt-copy-cell-transition-duration: var(--rt-duration-fast);display:inline-flex;min-width:0;align-items:center;gap:var(--rt-space-xs)}.rt-copy-cell__content{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-copy-cell__button{flex:0 0 auto;opacity:0;transition:opacity var(--rt-copy-cell-transition-duration) ease}.rt-copy-cell:hover .rt-copy-cell__button,.rt-copy-cell:focus-within .rt-copy-cell__button{opacity:1}.rt-copy-cell--static .rt-copy-cell__button{opacity:1}.rt-table tbody tr:hover .rt-copy-cell__button,.rt-table tbody tr:focus-within .rt-copy-cell__button{opacity:1}}\n"]
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-copy-cell{--rt-copy-cell-transition-duration: var(--rt-duration-fast);display:inline-flex;min-width:0;align-items:center;gap:var(--rt-space-xs)}.rt-copy-cell__content{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-copy-cell__button{flex:0 0 auto;opacity:0;transition:opacity var(--rt-copy-cell-transition-duration) ease}.rt-copy-cell:hover .rt-copy-cell__button,.rt-copy-cell:focus-within .rt-copy-cell__button{opacity:1}.rt-copy-cell--static .rt-copy-cell__button{opacity:1}.rt-copy-cell--framed{display:flex;width:100%;box-sizing:border-box;padding:var(--rt-space-1) var(--rt-space-1) var(--rt-space-1) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);gap:var(--rt-space-sm);line-height:var(--rt-leading-normal)}.rt-copy-cell--framed .rt-copy-cell__content{flex:1 1 auto;overflow-wrap:anywhere;text-overflow:clip;white-space:normal}.rt-table tbody tr:hover .rt-copy-cell__button,.rt-table tbody tr:focus-within .rt-copy-cell__button{opacity:1}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -250,27 +266,25 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "revealOnHover",
 				required: false
 			}]
+		}],
+		framed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "framed",
+				required: false
+			}]
 		}]
 	}
 });
 function nextSort(current, propertyName) {
-	if (current === null || current.propertyName !== propertyName) return {
-		propertyName,
-		sortDirection: EListSortOrder.ASC
-	};
-	if (current.sortDirection === EListSortOrder.ASC) return {
-		propertyName,
-		sortDirection: EListSortOrder.DESC
-	};
-	return null;
+	return rtNextSort(current, propertyName, "clears");
 }
 function sortDirectionOf(current, propertyName) {
-	return current !== null && current.propertyName === propertyName ? current.sortDirection : null;
+	return rtSortDirectionOf(current, propertyName);
 }
 function ariaSortOf(current, propertyName) {
-	const direction = sortDirectionOf(current, propertyName);
-	if (direction === null) return "none";
-	return direction === EListSortOrder.ASC ? "ascending" : "descending";
+	return rtAriaSortOf(current, propertyName);
 }
 function isColumnSortable(config, key) {
 	const column = config.find((candidate) => candidate.key === key);
@@ -307,30 +321,15 @@ function withoutLockedHidden(config, settings) {
 function filterValueOf(value) {
 	return value instanceof Date ? value.toISOString() : value ?? "";
 }
+const RT_TABLE_EMPTY_MODE = "empty-string";
 function filterOf(filters, propertyName) {
-	return filters.find((filter) => filter.propertyName === propertyName) ?? null;
+	return rtFilterOf(filters, propertyName);
 }
 function filtersWithValue(filters, propertyName, operatorType, value) {
-	const current = filterOf(filters, propertyName);
-	if (value === "") return current === null ? filters : filters.filter((filter) => filter !== current);
-	if (current === null) return [...filters, {
-		propertyName,
-		operatorType,
-		value
-	}];
-	if (current.value === value) return filters;
-	return filters.map((filter) => filter === current ? {
-		...filter,
-		value
-	} : filter);
+	return rtFiltersWithValue(filters, propertyName, operatorType, value, RT_TABLE_EMPTY_MODE);
 }
 function filtersWithOperator(filters, propertyName, operatorType) {
-	const current = filterOf(filters, propertyName);
-	if (current === null || current.operatorType === operatorType) return filters;
-	return filters.map((filter) => filter === current ? {
-		...filter,
-		operatorType
-	} : filter);
+	return rtFiltersWithOperator(filters, propertyName, operatorType, "", RT_TABLE_EMPTY_MODE);
 }
 function startOperatorOf(allowed, start) {
 	if (start !== void 0) return start;
@@ -621,7 +620,9 @@ var RtTableFilterHeaderComponent = class RtTableFilterHeaderComponent {
 						"max",
 						"minFractionDigits",
 						"maxFractionDigits",
-						"grouped"
+						"grouped",
+						"step",
+						"stepper"
 					]
 				},
 				{
@@ -1166,6 +1167,70 @@ var RtTableColumnSettings = class {
 		if (tableId !== null) this.#persistence.save(tableId, settings);
 	}
 };
+const EDGE_TOLERANCE = 1;
+function hiddenEdges(scrollLeft, scrollWidth, clientWidth) {
+	const offset = Math.abs(scrollLeft);
+	return {
+		start: offset > EDGE_TOLERANCE,
+		end: offset + clientWidth < scrollWidth - EDGE_TOLERANCE
+	};
+}
+function horizontalScrollParentOf(element, view) {
+	let node = element.parentElement;
+	while (node) {
+		const overflowX = view.getComputedStyle(node).overflowX;
+		if (overflowX === "auto" || overflowX === "scroll") return node;
+		node = node.parentElement;
+	}
+	return null;
+}
+var RtTablePinnedEdges = class {
+	#changed;
+	#container = null;
+	#observer = null;
+	#scrollWidth = 0;
+	#clientWidth = 0;
+	#onScroll = () => this.#report();
+	#onResize = () => {
+		this.#measure();
+		this.#report();
+	};
+	constructor(changed) {
+		this.#changed = changed;
+	}
+	watch(table, view) {
+		this.stop();
+		const container = horizontalScrollParentOf(table, view);
+		if (!container) return;
+		this.#container = container;
+		const resizable = typeof ResizeObserver !== "undefined";
+		container.addEventListener("scroll", resizable ? this.#onScroll : this.#onResize, { passive: true });
+		if (resizable) {
+			this.#observer = new ResizeObserver(this.#onResize);
+			this.#observer.observe(container);
+			this.#observer.observe(table);
+		}
+		this.#onResize();
+	}
+	stop() {
+		this.#container?.removeEventListener("scroll", this.#onScroll);
+		this.#container?.removeEventListener("scroll", this.#onResize);
+		this.#observer?.disconnect();
+		this.#container = null;
+		this.#observer = null;
+	}
+	#measure() {
+		const container = this.#container;
+		if (container) {
+			this.#scrollWidth = container.scrollWidth;
+			this.#clientWidth = container.clientWidth;
+		}
+	}
+	#report() {
+		const container = this.#container;
+		if (container) this.#changed(hiddenEdges(container.scrollLeft, this.#scrollWidth, this.#clientWidth));
+	}
+};
 const BEM_BLOCK$3 = "rt-table";
 const DEFAULT_SKELETON_ROWS = 5;
 const DEFAULT_EMPTY_KEY = "uiNoRows";
@@ -1175,10 +1240,22 @@ var RtTableComponent = class RtTableComponent extends CdkTable {
 		this.#t_uiNoRows = rtKitLabel(DEFAULT_EMPTY_KEY);
 		this.#destroyRef = inject(DestroyRef);
 		this.#breakpoints = inject(BreakpointsService);
+		this.#injector = inject(Injector);
+		this.#host = inject(ElementRef).nativeElement;
+		this.#window = inject(WINDOW);
 		this.#dataSourceVersion = signal(0, ...ngDevMode ? [{ debugName: "#dataSourceVersion" }] : /* istanbul ignore next */ []);
+		this.#hiddenEdges = signal({
+			start: false,
+			end: false
+		}, {
+			...ngDevMode ? { debugName: "#hiddenEdges" } : /* istanbul ignore next */ {},
+			equal: (a, b) => a.start === b.start && a.end === b.end
+		});
+		this.#pinnedEdges = new RtTablePinnedEdges((edges) => this.#hiddenEdges.set(edges));
 		this.#sort = linkedSignal(() => this.sort(), ...ngDevMode ? [{ debugName: "#sort" }] : /* istanbul ignore next */ []);
 		this.#columnSettings = new RtTableColumnSettings(() => this.columnsConfig(), () => this.tableId());
 		this.hostRole = inject(ElementRef).nativeElement.tagName === "RT-TABLE" ? "table" : null;
+		this.hiddenEdges = this.#hiddenEdges.asReadonly();
 		this.isInitialLoading = computed(() => this.loading() && this.#hasData() === false, ...ngDevMode ? [{ debugName: "isInitialLoading" }] : /* istanbul ignore next */ []);
 		this.isEmpty = computed(() => !this.loading() && !this.fetching() && this.#hasData() === false, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
 		this.skeletonRowIndexes = computed(() => Array.from({ length: this.skeletonRows() }, (_, i) => i), ...ngDevMode ? [{ debugName: "skeletonRowIndexes" }] : /* istanbul ignore next */ []);
@@ -1250,7 +1327,12 @@ var RtTableComponent = class RtTableComponent extends CdkTable {
 	#t_uiNoRows;
 	#destroyRef;
 	#breakpoints;
+	#injector;
+	#host;
+	#window;
 	#dataSourceVersion;
+	#hiddenEdges;
+	#pinnedEdges;
 	#sort;
 	#columnSettings;
 	ngOnInit() {
@@ -1261,11 +1343,13 @@ var RtTableComponent = class RtTableComponent extends CdkTable {
 			this.addColumnDef(this.actionsColumnDef);
 		}
 		this.#columnSettings.start();
+		afterNextRender(() => this.#pinnedEdges.watch(this.#host, this.#window), { injector: this.#injector });
 		this.#columnSettings.saved().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((settings) => this.applyColumnSettings(settings));
 	}
 	ngOnDestroy() {
 		if (this.actionsColumnDef !== void 0) this.removeColumnDef(this.actionsColumnDef);
 		this.#columnSettings.stop();
+		this.#pinnedEdges.stop();
 		super.ngOnDestroy();
 	}
 	toggleSort(propertyName) {
@@ -1447,6 +1531,8 @@ var RtTableComponent = class RtTableComponent extends CdkTable {
 					"class.rt-table--fetching": "fetching()",
 					"class.rt-table--empty": "isEmpty()",
 					"class.rt-table--cards": "showCards()",
+					"class.rt-table--hidden-start": "hiddenEdges().start",
+					"class.rt-table--hidden-end": "hiddenEdges().end",
 					"attr.role": "hostRole",
 					"attr.aria-label": "ariaLabel()",
 					"attr.aria-busy": "isInitialLoading() || fetching() ? 'true' : null"
@@ -1518,7 +1604,7 @@ var RtTableComponent = class RtTableComponent extends CdkTable {
 			}],
 			ngImport: i0,
 			template: "<ng-container rtBlock=\"rt-table\">\n    <ng-content select=\"caption\" />\n    <ng-content select=\"colgroup, col\" />\n\n    <ng-container cdkColumnDef=\"rtRowActions\">\n        <th *cdkHeaderCellDef rtElem=\"actions-header\" cdk-header-cell aria-hidden=\"true\"></th>\n        <td *cdkCellDef=\"let row\" rtElem=\"actions-cell\" qa-dataid=\"table-row-actions\" cdk-cell>\n            @if (rowActions()?.template; as tpl) {\n                @if (row | rtRowHasActions: rowHasActions()) {\n                    <div rtElem=\"actions-float\">\n                        <rt-menu>\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </rt-menu>\n                    </div>\n                }\n            }\n        </td>\n    </ng-container>\n\n    <ng-container headerRowOutlet />\n\n    @if (showFilters()) {\n        <tr rtElem=\"filter-row\" qa-dataid=\"table-filter-row\">\n            @for (cell of filterCells(); track cell.key) {\n                <th\n                    rtElem=\"filter-cell\"\n                    qa-dataid=\"table-filter-cell\"\n                    [rtMod]=\"{ actions: cell.actions }\"\n                    [attr.aria-hidden]=\"cell.actions || null\">\n                    @if (cell.filter) {\n                        <rt-table-filter-header\n                            [propertyName]=\"cell.key\"\n                            [filter]=\"cell.filter\"\n                            [filters]=\"filters()\"\n                            (filtersChange)=\"reportFilters($event)\" />\n                    }\n                </th>\n            }\n        </tr>\n    }\n\n    @if (isInitialLoading()) {\n        @for (i of skeletonRowIndexes(); track i) {\n            <tr rtElem=\"skeleton-row\" qa-dataid=\"table-skeleton-row\">\n                @for (col of displayedColumns(); track col) {\n                    <td rtElem=\"skeleton-cell\">\n                        <rt-skeleton rtElem=\"skeleton-bar\" />\n                    </td>\n                }\n            </tr>\n        }\n    }\n\n    <ng-container rowOutlet />\n    <ng-container noDataRowOutlet />\n    <ng-container footerRowOutlet />\n\n    @if (isEmpty()) {\n        <tr rtElem=\"empty-row\" qa-dataid=\"table-empty-row\">\n            <td rtElem=\"empty\" [attr.colspan]=\"displayedColumns().length || null\">\n                @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                } @else {\n                    <rt-empty-state\n                        rtElem=\"empty-message\"\n                        qa-dataid=\"table-empty\"\n                        [icon]=\"emptyIcon()\"\n                        [title]=\"emptyText()\"\n                        [description]=\"emptyDescription()\" />\n                }\n            </td>\n        </tr>\n    }\n\n    @if (showCards()) {\n        <div rtElem=\"cards\" qa-dataid=\"table-cards\" role=\"list\">\n            @if (isInitialLoading()) {\n                @for (i of skeletonRowIndexes(); track i) {\n                    <article rtElem=\"card\" qa-dataid=\"table-skeleton-card\" [rtMod]=\"{ skeleton: true }\">\n                        <rt-skeleton rtElem=\"card-skeleton-bar\" />\n                        <rt-skeleton rtElem=\"card-skeleton-bar\" />\n                    </article>\n                }\n            } @else if (isEmpty()) {\n                @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                } @else {\n                    <rt-empty-state\n                        rtElem=\"empty-message\"\n                        qa-dataid=\"table-empty\"\n                        [icon]=\"emptyIcon()\"\n                        [title]=\"emptyText()\"\n                        [description]=\"emptyDescription()\" />\n                }\n            } @else {\n                @for (row of cardRows(); track row; let index = $index) {\n                    <article\n                        rtElem=\"card\"\n                        qa-dataid=\"table-card\"\n                        role=\"listitem\"\n                        [rtTableCardActivation]=\"index\"\n                        [rtTableCardActivationEnabled]=\"clickable()\">\n                        @if (cardTemplate()?.template; as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        } @else {\n                            @for (col of cardColumns(); track col.key) {\n                                <div rtElem=\"card-field\" qa-dataid=\"table-card-field\" [attr.data-key]=\"col.key\">\n                                    <span rtElem=\"card-label\" qa-dataid=\"table-card-label\">{{ col.label }}</span>\n                                    <div rtElem=\"card-value\" qa-dataid=\"table-card-value\">\n                                        <ng-container [ngTemplateOutlet]=\"col.cell\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                    </div>\n                                </div>\n                            }\n                            @if (rowActions()?.template; as tpl) {\n                                @if (row | rtRowHasActions: rowHasActions()) {\n                                    <div rtElem=\"card-actions\" qa-dataid=\"table-card-actions\">\n                                        <rt-menu>\n                                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                        </rt-menu>\n                                    </div>\n                                }\n                            }\n                        }\n                    </article>\n                }\n            }\n        </div>\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-table{--rt-table-border-width: var(--rt-border-width-thin);--rt-table-card-radius: var(--rt-radius-md);position:relative;display:table;width:100%;background:var(--rt-color-bg-surface);border-collapse:collapse;color:var(--rt-color-text-primary)}.rt-table .cdk-header-cell,.rt-table .cdk-cell,.rt-table__filter-cell,.rt-table__skeleton-cell{position:relative;height:50px;padding:var(--rt-space-2) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);border-left:var(--rt-table-border-width) solid var(--rt-color-border-subtle);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);text-align:start;vertical-align:middle}.rt-table .cdk-header-cell[data-align=right],.rt-table .cdk-cell[data-align=right],.rt-table__filter-cell[data-align=right],.rt-table__skeleton-cell[data-align=right],.rt-table .cdk-header-cell[data-align=right] input,.rt-table .cdk-cell[data-align=right] input,.rt-table__filter-cell[data-align=right] input,.rt-table__skeleton-cell[data-align=right] input{text-align:right}.rt-table .cdk-header-cell:first-child,.rt-table .cdk-cell:first-child,.rt-table__filter-cell:first-child,.rt-table__skeleton-cell:first-child{border-left:none}.rt-table .cdk-header-cell{border-top:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted)}.rt-table .cdk-cell{color:var(--rt-color-text-primary);overflow-wrap:anywhere}.rt-table__filter-row{display:table-row}.rt-table__filter-cell{height:auto;background:var(--rt-color-bg-surface);padding-block:var(--rt-space-1);vertical-align:middle}.rt-table__filter-cell--actions,.rt-table__actions-header.cdk-header-cell{width:0;padding:0;border:none}.rt-table__actions-cell.cdk-cell{position:sticky;z-index:1;right:0;width:0;padding:0;border:none;background:transparent}.rt-table__actions-float{position:absolute;display:flex;height:100%;align-items:center;padding:0 var(--rt-space-2) 0 var(--rt-space-8);background:linear-gradient(to right,transparent 0%,var(--rt-color-bg-hover) 45%);inset:0 0 0 auto;pointer-events:none}.rt-table__actions-float .rt-menu{pointer-events:auto}@media(hover:hover){.rt-table__actions-cell.cdk-cell{visibility:hidden}.cdk-row:hover .rt-table__actions-cell.cdk-cell,.cdk-row:focus-within .rt-table__actions-cell.cdk-cell,.rt-table__actions-cell.cdk-cell:has(.rt-menu--open){visibility:visible}}.rt-table .cdk-row:hover{background:var(--rt-color-bg-hover)}.rt-table .cdk-row.rt-table__row--danger,.rt-table .cdk-row.rt-table__row--danger:hover{background:var(--rt-color-state-danger-bg)}.rt-table--clickable .cdk-row,.rt-table--clickable .rt-table__card{cursor:pointer}.rt-table--clickable .cdk-row:focus-visible,.rt-table--clickable .rt-table__card:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-2px}.rt-table a{text-decoration:none}.rt-table--density--compact .cdk-header-cell,.rt-table--density--compact .cdk-cell,.rt-table--density--compact .rt-table__skeleton-cell{height:36px;padding:var(--rt-space-xs) var(--rt-space-sm)}.rt-table__skeleton-bar{display:block;width:80%;height:14px}.rt-table__empty-row{display:table-row}.rt-table__empty{padding:var(--rt-space-6) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);text-align:center}.rt-table__empty-message{margin:0;font-size:var(--rt-text-sm)}.rt-table__overlay{position:absolute;z-index:1;display:grid;min-height:100%;inset:0;place-items:center;pointer-events:none}.rt-table__overlay-backdrop{position:absolute;background:var(--rt-color-bg-surface);inset:0;opacity:.72}.rt-table__overlay-spinner{position:sticky;z-index:1;top:50%;display:flex;align-items:center;justify-content:center;transform:translateY(-50%)}.rt-table__cards{display:none}.rt-table--cards{display:block;min-width:0;max-width:100%}.rt-table--cards .cdk-header-row,.rt-table--cards .cdk-row,.rt-table--cards .rt-table__skeleton-row,.rt-table--cards .rt-table__empty-row,.rt-table--cards .rt-table__filter-row{display:none}.rt-table--cards .rt-table__cards{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-table--cards:not(.rt-table--empty){background:transparent}.rt-table__card{display:flex;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-table-border-width) solid var(--rt-color-border-default);border-radius:var(--rt-table-card-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-xs)}.rt-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--rt-space-md)}.rt-table__card-label{flex:0 0 auto;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-table__card-value{min-width:0;overflow-wrap:anywhere;text-align:right}.rt-table__card-value .cdk-cell{display:inline;height:auto;padding:0;border:none;font:inherit;min-inline-size:0;text-align:inherit}.rt-table__card-actions{display:flex;justify-content:flex-end}.rt-table__card-skeleton-bar{display:block;width:60%;height:14px}.rt-table__card-skeleton-bar:first-child{width:80%}.rt-table[data-rt-radius=none]{--rt-table-card-radius: var(--rt-radius-none)}.rt-table[data-rt-radius=xs]{--rt-table-card-radius: var(--rt-radius-xs)}.rt-table[data-rt-radius=sm]{--rt-table-card-radius: var(--rt-radius-sm)}.rt-table[data-rt-radius=ms]{--rt-table-card-radius: var(--rt-radius-ms)}.rt-table[data-rt-radius=md]{--rt-table-card-radius: var(--rt-radius-md)}.rt-table[data-rt-radius=lg]{--rt-table-card-radius: var(--rt-radius-lg)}.rt-table[data-rt-radius=xl]{--rt-table-card-radius: var(--rt-radius-xl)}.rt-table[data-rt-radius=\"2xl\"]{--rt-table-card-radius: var(--rt-radius-2xl)}.rt-table[data-rt-radius=full]{--rt-table-card-radius: var(--rt-radius-full)}:root[data-theme=dark] .rt-table,html.rt-theme-dark .rt-table{background:var(--rt-color-bg-page)}:root[data-theme=dark] .rt-table .cdk-header-cell,:root[data-theme=dark] .rt-table .rt-table__empty,:root[data-theme=dark] .rt-table .rt-table__overlay-backdrop,html.rt-theme-dark .rt-table .cdk-header-cell,html.rt-theme-dark .rt-table .rt-table__empty,html.rt-theme-dark .rt-table .rt-table__overlay-backdrop{background:var(--rt-color-bg-page)}}\n"],
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-table{--rt-table-border-width: var(--rt-border-width-thin);--rt-table-card-radius: var(--rt-radius-md);--rt-table-row-bg: transparent;--rt-table-pinned-bg: var(--rt-color-table-bg);--rt-table-pinned-shadow-color: var(--rt-color-table-pinned-shadow);--rt-table-pinned-shadow-width: 12px;position:relative;display:table;width:100%;background:var(--rt-color-table-bg);border-collapse:collapse;color:var(--rt-color-text-primary)}.rt-table .cdk-header-row,.rt-table .cdk-row,.rt-table__skeleton-row{height:50px}.rt-table .cdk-header-cell,.rt-table .cdk-cell,.rt-table__filter-cell,.rt-table__skeleton-cell{position:relative;padding:var(--rt-space-2) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);border-left:var(--rt-table-border-width) solid var(--rt-color-border-subtle);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);text-align:start;vertical-align:middle}.rt-table .cdk-header-cell[data-align=right],.rt-table .cdk-cell[data-align=right],.rt-table__filter-cell[data-align=right],.rt-table__skeleton-cell[data-align=right],.rt-table .cdk-header-cell[data-align=right] input,.rt-table .cdk-cell[data-align=right] input,.rt-table__filter-cell[data-align=right] input,.rt-table__skeleton-cell[data-align=right] input{text-align:right}.rt-table .cdk-header-cell:first-child,.rt-table .cdk-cell:first-child,.rt-table__filter-cell:first-child,.rt-table__skeleton-cell:first-child{border-left:none}.rt-table .cdk-header-cell{border-top:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-table-bg);color:var(--rt-color-text-muted)}.rt-table .cdk-cell{color:var(--rt-color-text-primary);overflow-wrap:anywhere}.rt-table__filter-row{display:table-row}.rt-table__filter-cell{height:auto;background:var(--rt-color-bg-surface);padding-block:var(--rt-space-1);vertical-align:middle}.rt-table__filter-cell--actions,.rt-table__actions-header.cdk-header-cell{width:0;padding:0;border:none}.rt-table__actions-cell.cdk-cell{position:sticky;z-index:1;right:0;width:0;padding:0;border:none;background:transparent}.rt-table__actions-float{position:absolute;display:flex;height:100%;align-items:center;padding:0 var(--rt-space-2) 0 var(--rt-space-8);background:linear-gradient(to right,transparent 0%,var(--rt-color-bg-hover) 45%);inset:0 0 0 auto;pointer-events:none}.rt-table__actions-float .rt-menu{pointer-events:auto}@media(hover:hover){.rt-table__actions-cell.cdk-cell{visibility:hidden}.cdk-row:hover .rt-table__actions-cell.cdk-cell,.cdk-row:focus-within .rt-table__actions-cell.cdk-cell,.rt-table__actions-cell.cdk-cell:has(.rt-menu--open){visibility:visible}}.rt-table .cdk-row,.rt-table .cdk-footer-row{background:var(--rt-table-row-bg)}.rt-table .cdk-row:hover{--rt-table-row-bg: var(--rt-color-bg-hover)}.rt-table .cdk-row.rt-table__row--danger,.rt-table .cdk-row.rt-table__row--danger:hover{--rt-table-row-bg: var(--rt-color-state-danger-bg)}.rt-table .cdk-cell.cdk-table-sticky,.rt-table .cdk-footer-cell.cdk-table-sticky{background:linear-gradient(var(--rt-table-row-bg),var(--rt-table-row-bg)),var(--rt-table-pinned-bg)}.rt-table .cdk-table-sticky-border-elem-left:after,.rt-table .cdk-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:0;width:var(--rt-table-pinned-shadow-width);pointer-events:none}.rt-table .cdk-table-sticky-border-elem-left:after{left:100%;background:linear-gradient(to right,var(--rt-table-pinned-shadow-color),transparent)}.rt-table .cdk-table-sticky-border-elem-right:after{right:100%;background:linear-gradient(to left,var(--rt-table-pinned-shadow-color),transparent)}.rt-table--hidden-start:dir(ltr) .cdk-table-sticky-border-elem-left:after,.rt-table--hidden-end:dir(ltr) .cdk-table-sticky-border-elem-right:after,.rt-table--hidden-start:dir(rtl) .cdk-table-sticky-border-elem-right:after,.rt-table--hidden-end:dir(rtl) .cdk-table-sticky-border-elem-left:after{content:\"\"}.rt-table--clickable .cdk-row,.rt-table--clickable .rt-table__card{cursor:pointer}.rt-table--clickable .cdk-row:focus-visible,.rt-table--clickable .rt-table__card:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-2px}.rt-table a{text-decoration:none}.rt-table--density--compact .cdk-header-row,.rt-table--density--compact .cdk-row,.rt-table--density--compact .rt-table__skeleton-row{height:36px}.rt-table--density--compact .cdk-header-cell,.rt-table--density--compact .cdk-cell,.rt-table--density--compact .rt-table__skeleton-cell{padding:var(--rt-space-xs) var(--rt-space-sm)}.rt-table__skeleton-bar{display:block;width:80%;height:14px}.rt-table__empty-row{display:table-row}.rt-table__empty{padding:var(--rt-space-6) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-table-bg);color:var(--rt-color-text-muted);text-align:center}.rt-table__empty-message{margin:0;font-size:var(--rt-text-sm)}.rt-table__overlay{position:absolute;z-index:1;display:grid;min-height:100%;inset:0;place-items:center;pointer-events:none}.rt-table__overlay-backdrop{position:absolute;background:var(--rt-color-table-bg);inset:0;opacity:.72}.rt-table__overlay-spinner{position:sticky;z-index:1;top:50%;display:flex;align-items:center;justify-content:center;transform:translateY(-50%)}.rt-table__cards{display:none}.rt-table--cards{display:block;min-width:0;max-width:100%}.rt-table--cards .cdk-header-row,.rt-table--cards .cdk-row,.rt-table--cards .rt-table__skeleton-row,.rt-table--cards .rt-table__empty-row,.rt-table--cards .rt-table__filter-row{display:none}.rt-table--cards .rt-table__cards{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-table--cards:not(.rt-table--empty){background:transparent}.rt-table__card{display:flex;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-table-border-width) solid var(--rt-color-border-default);border-radius:var(--rt-table-card-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-xs)}.rt-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--rt-space-md)}.rt-table__card-label{flex:0 0 auto;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-table__card-value{min-width:0;overflow-wrap:anywhere;text-align:right}.rt-table__card-value .cdk-cell{display:inline;height:auto;padding:0;border:none;font:inherit;min-inline-size:0;text-align:inherit}.rt-table__card-actions{display:flex;justify-content:flex-end}.rt-table__card-skeleton-bar{display:block;width:60%;height:14px}.rt-table__card-skeleton-bar:first-child{width:80%}.rt-table[data-rt-radius=none]{--rt-table-card-radius: var(--rt-radius-none)}.rt-table[data-rt-radius=xs]{--rt-table-card-radius: var(--rt-radius-xs)}.rt-table[data-rt-radius=sm]{--rt-table-card-radius: var(--rt-radius-sm)}.rt-table[data-rt-radius=ms]{--rt-table-card-radius: var(--rt-radius-ms)}.rt-table[data-rt-radius=md]{--rt-table-card-radius: var(--rt-radius-md)}.rt-table[data-rt-radius=lg]{--rt-table-card-radius: var(--rt-radius-lg)}.rt-table[data-rt-radius=xl]{--rt-table-card-radius: var(--rt-radius-xl)}.rt-table[data-rt-radius=\"2xl\"]{--rt-table-card-radius: var(--rt-radius-2xl)}.rt-table[data-rt-radius=full]{--rt-table-card-radius: var(--rt-radius-full)}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -1714,12 +1800,14 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.rt-table--fetching]": "fetching()",
 				"[class.rt-table--empty]": "isEmpty()",
 				"[class.rt-table--cards]": "showCards()",
+				"[class.rt-table--hidden-start]": "hiddenEdges().start",
+				"[class.rt-table--hidden-end]": "hiddenEdges().end",
 				"[attr.role]": "hostRole",
 				"[attr.aria-label]": "ariaLabel()",
 				"[attr.aria-busy]": "isInitialLoading() || fetching() ? 'true' : null"
 			},
 			template: "<ng-container rtBlock=\"rt-table\">\n    <ng-content select=\"caption\" />\n    <ng-content select=\"colgroup, col\" />\n\n    <ng-container cdkColumnDef=\"rtRowActions\">\n        <th *cdkHeaderCellDef rtElem=\"actions-header\" cdk-header-cell aria-hidden=\"true\"></th>\n        <td *cdkCellDef=\"let row\" rtElem=\"actions-cell\" qa-dataid=\"table-row-actions\" cdk-cell>\n            @if (rowActions()?.template; as tpl) {\n                @if (row | rtRowHasActions: rowHasActions()) {\n                    <div rtElem=\"actions-float\">\n                        <rt-menu>\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </rt-menu>\n                    </div>\n                }\n            }\n        </td>\n    </ng-container>\n\n    <ng-container headerRowOutlet />\n\n    @if (showFilters()) {\n        <tr rtElem=\"filter-row\" qa-dataid=\"table-filter-row\">\n            @for (cell of filterCells(); track cell.key) {\n                <th\n                    rtElem=\"filter-cell\"\n                    qa-dataid=\"table-filter-cell\"\n                    [rtMod]=\"{ actions: cell.actions }\"\n                    [attr.aria-hidden]=\"cell.actions || null\">\n                    @if (cell.filter) {\n                        <rt-table-filter-header\n                            [propertyName]=\"cell.key\"\n                            [filter]=\"cell.filter\"\n                            [filters]=\"filters()\"\n                            (filtersChange)=\"reportFilters($event)\" />\n                    }\n                </th>\n            }\n        </tr>\n    }\n\n    @if (isInitialLoading()) {\n        @for (i of skeletonRowIndexes(); track i) {\n            <tr rtElem=\"skeleton-row\" qa-dataid=\"table-skeleton-row\">\n                @for (col of displayedColumns(); track col) {\n                    <td rtElem=\"skeleton-cell\">\n                        <rt-skeleton rtElem=\"skeleton-bar\" />\n                    </td>\n                }\n            </tr>\n        }\n    }\n\n    <ng-container rowOutlet />\n    <ng-container noDataRowOutlet />\n    <ng-container footerRowOutlet />\n\n    @if (isEmpty()) {\n        <tr rtElem=\"empty-row\" qa-dataid=\"table-empty-row\">\n            <td rtElem=\"empty\" [attr.colspan]=\"displayedColumns().length || null\">\n                @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                } @else {\n                    <rt-empty-state\n                        rtElem=\"empty-message\"\n                        qa-dataid=\"table-empty\"\n                        [icon]=\"emptyIcon()\"\n                        [title]=\"emptyText()\"\n                        [description]=\"emptyDescription()\" />\n                }\n            </td>\n        </tr>\n    }\n\n    @if (showCards()) {\n        <div rtElem=\"cards\" qa-dataid=\"table-cards\" role=\"list\">\n            @if (isInitialLoading()) {\n                @for (i of skeletonRowIndexes(); track i) {\n                    <article rtElem=\"card\" qa-dataid=\"table-skeleton-card\" [rtMod]=\"{ skeleton: true }\">\n                        <rt-skeleton rtElem=\"card-skeleton-bar\" />\n                        <rt-skeleton rtElem=\"card-skeleton-bar\" />\n                    </article>\n                }\n            } @else if (isEmpty()) {\n                @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                } @else {\n                    <rt-empty-state\n                        rtElem=\"empty-message\"\n                        qa-dataid=\"table-empty\"\n                        [icon]=\"emptyIcon()\"\n                        [title]=\"emptyText()\"\n                        [description]=\"emptyDescription()\" />\n                }\n            } @else {\n                @for (row of cardRows(); track row; let index = $index) {\n                    <article\n                        rtElem=\"card\"\n                        qa-dataid=\"table-card\"\n                        role=\"listitem\"\n                        [rtTableCardActivation]=\"index\"\n                        [rtTableCardActivationEnabled]=\"clickable()\">\n                        @if (cardTemplate()?.template; as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        } @else {\n                            @for (col of cardColumns(); track col.key) {\n                                <div rtElem=\"card-field\" qa-dataid=\"table-card-field\" [attr.data-key]=\"col.key\">\n                                    <span rtElem=\"card-label\" qa-dataid=\"table-card-label\">{{ col.label }}</span>\n                                    <div rtElem=\"card-value\" qa-dataid=\"table-card-value\">\n                                        <ng-container [ngTemplateOutlet]=\"col.cell\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                    </div>\n                                </div>\n                            }\n                            @if (rowActions()?.template; as tpl) {\n                                @if (row | rtRowHasActions: rowHasActions()) {\n                                    <div rtElem=\"card-actions\" qa-dataid=\"table-card-actions\">\n                                        <rt-menu>\n                                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                        </rt-menu>\n                                    </div>\n                                }\n                            }\n                        }\n                    </article>\n                }\n            }\n        </div>\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-table{--rt-table-border-width: var(--rt-border-width-thin);--rt-table-card-radius: var(--rt-radius-md);position:relative;display:table;width:100%;background:var(--rt-color-bg-surface);border-collapse:collapse;color:var(--rt-color-text-primary)}.rt-table .cdk-header-cell,.rt-table .cdk-cell,.rt-table__filter-cell,.rt-table__skeleton-cell{position:relative;height:50px;padding:var(--rt-space-2) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);border-left:var(--rt-table-border-width) solid var(--rt-color-border-subtle);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);text-align:start;vertical-align:middle}.rt-table .cdk-header-cell[data-align=right],.rt-table .cdk-cell[data-align=right],.rt-table__filter-cell[data-align=right],.rt-table__skeleton-cell[data-align=right],.rt-table .cdk-header-cell[data-align=right] input,.rt-table .cdk-cell[data-align=right] input,.rt-table__filter-cell[data-align=right] input,.rt-table__skeleton-cell[data-align=right] input{text-align:right}.rt-table .cdk-header-cell:first-child,.rt-table .cdk-cell:first-child,.rt-table__filter-cell:first-child,.rt-table__skeleton-cell:first-child{border-left:none}.rt-table .cdk-header-cell{border-top:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted)}.rt-table .cdk-cell{color:var(--rt-color-text-primary);overflow-wrap:anywhere}.rt-table__filter-row{display:table-row}.rt-table__filter-cell{height:auto;background:var(--rt-color-bg-surface);padding-block:var(--rt-space-1);vertical-align:middle}.rt-table__filter-cell--actions,.rt-table__actions-header.cdk-header-cell{width:0;padding:0;border:none}.rt-table__actions-cell.cdk-cell{position:sticky;z-index:1;right:0;width:0;padding:0;border:none;background:transparent}.rt-table__actions-float{position:absolute;display:flex;height:100%;align-items:center;padding:0 var(--rt-space-2) 0 var(--rt-space-8);background:linear-gradient(to right,transparent 0%,var(--rt-color-bg-hover) 45%);inset:0 0 0 auto;pointer-events:none}.rt-table__actions-float .rt-menu{pointer-events:auto}@media(hover:hover){.rt-table__actions-cell.cdk-cell{visibility:hidden}.cdk-row:hover .rt-table__actions-cell.cdk-cell,.cdk-row:focus-within .rt-table__actions-cell.cdk-cell,.rt-table__actions-cell.cdk-cell:has(.rt-menu--open){visibility:visible}}.rt-table .cdk-row:hover{background:var(--rt-color-bg-hover)}.rt-table .cdk-row.rt-table__row--danger,.rt-table .cdk-row.rt-table__row--danger:hover{background:var(--rt-color-state-danger-bg)}.rt-table--clickable .cdk-row,.rt-table--clickable .rt-table__card{cursor:pointer}.rt-table--clickable .cdk-row:focus-visible,.rt-table--clickable .rt-table__card:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-2px}.rt-table a{text-decoration:none}.rt-table--density--compact .cdk-header-cell,.rt-table--density--compact .cdk-cell,.rt-table--density--compact .rt-table__skeleton-cell{height:36px;padding:var(--rt-space-xs) var(--rt-space-sm)}.rt-table__skeleton-bar{display:block;width:80%;height:14px}.rt-table__empty-row{display:table-row}.rt-table__empty{padding:var(--rt-space-6) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);text-align:center}.rt-table__empty-message{margin:0;font-size:var(--rt-text-sm)}.rt-table__overlay{position:absolute;z-index:1;display:grid;min-height:100%;inset:0;place-items:center;pointer-events:none}.rt-table__overlay-backdrop{position:absolute;background:var(--rt-color-bg-surface);inset:0;opacity:.72}.rt-table__overlay-spinner{position:sticky;z-index:1;top:50%;display:flex;align-items:center;justify-content:center;transform:translateY(-50%)}.rt-table__cards{display:none}.rt-table--cards{display:block;min-width:0;max-width:100%}.rt-table--cards .cdk-header-row,.rt-table--cards .cdk-row,.rt-table--cards .rt-table__skeleton-row,.rt-table--cards .rt-table__empty-row,.rt-table--cards .rt-table__filter-row{display:none}.rt-table--cards .rt-table__cards{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-table--cards:not(.rt-table--empty){background:transparent}.rt-table__card{display:flex;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-table-border-width) solid var(--rt-color-border-default);border-radius:var(--rt-table-card-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-xs)}.rt-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--rt-space-md)}.rt-table__card-label{flex:0 0 auto;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-table__card-value{min-width:0;overflow-wrap:anywhere;text-align:right}.rt-table__card-value .cdk-cell{display:inline;height:auto;padding:0;border:none;font:inherit;min-inline-size:0;text-align:inherit}.rt-table__card-actions{display:flex;justify-content:flex-end}.rt-table__card-skeleton-bar{display:block;width:60%;height:14px}.rt-table__card-skeleton-bar:first-child{width:80%}.rt-table[data-rt-radius=none]{--rt-table-card-radius: var(--rt-radius-none)}.rt-table[data-rt-radius=xs]{--rt-table-card-radius: var(--rt-radius-xs)}.rt-table[data-rt-radius=sm]{--rt-table-card-radius: var(--rt-radius-sm)}.rt-table[data-rt-radius=ms]{--rt-table-card-radius: var(--rt-radius-ms)}.rt-table[data-rt-radius=md]{--rt-table-card-radius: var(--rt-radius-md)}.rt-table[data-rt-radius=lg]{--rt-table-card-radius: var(--rt-radius-lg)}.rt-table[data-rt-radius=xl]{--rt-table-card-radius: var(--rt-radius-xl)}.rt-table[data-rt-radius=\"2xl\"]{--rt-table-card-radius: var(--rt-radius-2xl)}.rt-table[data-rt-radius=full]{--rt-table-card-radius: var(--rt-radius-full)}:root[data-theme=dark] .rt-table,html.rt-theme-dark .rt-table{background:var(--rt-color-bg-page)}:root[data-theme=dark] .rt-table .cdk-header-cell,:root[data-theme=dark] .rt-table .rt-table__empty,:root[data-theme=dark] .rt-table .rt-table__overlay-backdrop,html.rt-theme-dark .rt-table .cdk-header-cell,html.rt-theme-dark .rt-table .rt-table__empty,html.rt-theme-dark .rt-table .rt-table__overlay-backdrop{background:var(--rt-color-bg-page)}}\n"]
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-table{--rt-table-border-width: var(--rt-border-width-thin);--rt-table-card-radius: var(--rt-radius-md);--rt-table-row-bg: transparent;--rt-table-pinned-bg: var(--rt-color-table-bg);--rt-table-pinned-shadow-color: var(--rt-color-table-pinned-shadow);--rt-table-pinned-shadow-width: 12px;position:relative;display:table;width:100%;background:var(--rt-color-table-bg);border-collapse:collapse;color:var(--rt-color-text-primary)}.rt-table .cdk-header-row,.rt-table .cdk-row,.rt-table__skeleton-row{height:50px}.rt-table .cdk-header-cell,.rt-table .cdk-cell,.rt-table__filter-cell,.rt-table__skeleton-cell{position:relative;padding:var(--rt-space-2) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);border-left:var(--rt-table-border-width) solid var(--rt-color-border-subtle);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);text-align:start;vertical-align:middle}.rt-table .cdk-header-cell[data-align=right],.rt-table .cdk-cell[data-align=right],.rt-table__filter-cell[data-align=right],.rt-table__skeleton-cell[data-align=right],.rt-table .cdk-header-cell[data-align=right] input,.rt-table .cdk-cell[data-align=right] input,.rt-table__filter-cell[data-align=right] input,.rt-table__skeleton-cell[data-align=right] input{text-align:right}.rt-table .cdk-header-cell:first-child,.rt-table .cdk-cell:first-child,.rt-table__filter-cell:first-child,.rt-table__skeleton-cell:first-child{border-left:none}.rt-table .cdk-header-cell{border-top:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-table-bg);color:var(--rt-color-text-muted)}.rt-table .cdk-cell{color:var(--rt-color-text-primary);overflow-wrap:anywhere}.rt-table__filter-row{display:table-row}.rt-table__filter-cell{height:auto;background:var(--rt-color-bg-surface);padding-block:var(--rt-space-1);vertical-align:middle}.rt-table__filter-cell--actions,.rt-table__actions-header.cdk-header-cell{width:0;padding:0;border:none}.rt-table__actions-cell.cdk-cell{position:sticky;z-index:1;right:0;width:0;padding:0;border:none;background:transparent}.rt-table__actions-float{position:absolute;display:flex;height:100%;align-items:center;padding:0 var(--rt-space-2) 0 var(--rt-space-8);background:linear-gradient(to right,transparent 0%,var(--rt-color-bg-hover) 45%);inset:0 0 0 auto;pointer-events:none}.rt-table__actions-float .rt-menu{pointer-events:auto}@media(hover:hover){.rt-table__actions-cell.cdk-cell{visibility:hidden}.cdk-row:hover .rt-table__actions-cell.cdk-cell,.cdk-row:focus-within .rt-table__actions-cell.cdk-cell,.rt-table__actions-cell.cdk-cell:has(.rt-menu--open){visibility:visible}}.rt-table .cdk-row,.rt-table .cdk-footer-row{background:var(--rt-table-row-bg)}.rt-table .cdk-row:hover{--rt-table-row-bg: var(--rt-color-bg-hover)}.rt-table .cdk-row.rt-table__row--danger,.rt-table .cdk-row.rt-table__row--danger:hover{--rt-table-row-bg: var(--rt-color-state-danger-bg)}.rt-table .cdk-cell.cdk-table-sticky,.rt-table .cdk-footer-cell.cdk-table-sticky{background:linear-gradient(var(--rt-table-row-bg),var(--rt-table-row-bg)),var(--rt-table-pinned-bg)}.rt-table .cdk-table-sticky-border-elem-left:after,.rt-table .cdk-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:0;width:var(--rt-table-pinned-shadow-width);pointer-events:none}.rt-table .cdk-table-sticky-border-elem-left:after{left:100%;background:linear-gradient(to right,var(--rt-table-pinned-shadow-color),transparent)}.rt-table .cdk-table-sticky-border-elem-right:after{right:100%;background:linear-gradient(to left,var(--rt-table-pinned-shadow-color),transparent)}.rt-table--hidden-start:dir(ltr) .cdk-table-sticky-border-elem-left:after,.rt-table--hidden-end:dir(ltr) .cdk-table-sticky-border-elem-right:after,.rt-table--hidden-start:dir(rtl) .cdk-table-sticky-border-elem-right:after,.rt-table--hidden-end:dir(rtl) .cdk-table-sticky-border-elem-left:after{content:\"\"}.rt-table--clickable .cdk-row,.rt-table--clickable .rt-table__card{cursor:pointer}.rt-table--clickable .cdk-row:focus-visible,.rt-table--clickable .rt-table__card:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-2px}.rt-table a{text-decoration:none}.rt-table--density--compact .cdk-header-row,.rt-table--density--compact .cdk-row,.rt-table--density--compact .rt-table__skeleton-row{height:36px}.rt-table--density--compact .cdk-header-cell,.rt-table--density--compact .cdk-cell,.rt-table--density--compact .rt-table__skeleton-cell{padding:var(--rt-space-xs) var(--rt-space-sm)}.rt-table__skeleton-bar{display:block;width:80%;height:14px}.rt-table__empty-row{display:table-row}.rt-table__empty{padding:var(--rt-space-6) var(--rt-space-5);border-bottom:var(--rt-table-border-width) solid var(--rt-color-border-subtle);background:var(--rt-color-table-bg);color:var(--rt-color-text-muted);text-align:center}.rt-table__empty-message{margin:0;font-size:var(--rt-text-sm)}.rt-table__overlay{position:absolute;z-index:1;display:grid;min-height:100%;inset:0;place-items:center;pointer-events:none}.rt-table__overlay-backdrop{position:absolute;background:var(--rt-color-table-bg);inset:0;opacity:.72}.rt-table__overlay-spinner{position:sticky;z-index:1;top:50%;display:flex;align-items:center;justify-content:center;transform:translateY(-50%)}.rt-table__cards{display:none}.rt-table--cards{display:block;min-width:0;max-width:100%}.rt-table--cards .cdk-header-row,.rt-table--cards .cdk-row,.rt-table--cards .rt-table__skeleton-row,.rt-table--cards .rt-table__empty-row,.rt-table--cards .rt-table__filter-row{display:none}.rt-table--cards .rt-table__cards{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-table--cards:not(.rt-table--empty){background:transparent}.rt-table__card{display:flex;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-table-border-width) solid var(--rt-color-border-default);border-radius:var(--rt-table-card-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-xs)}.rt-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--rt-space-md)}.rt-table__card-label{flex:0 0 auto;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-table__card-value{min-width:0;overflow-wrap:anywhere;text-align:right}.rt-table__card-value .cdk-cell{display:inline;height:auto;padding:0;border:none;font:inherit;min-inline-size:0;text-align:inherit}.rt-table__card-actions{display:flex;justify-content:flex-end}.rt-table__card-skeleton-bar{display:block;width:60%;height:14px}.rt-table__card-skeleton-bar:first-child{width:80%}.rt-table[data-rt-radius=none]{--rt-table-card-radius: var(--rt-radius-none)}.rt-table[data-rt-radius=xs]{--rt-table-card-radius: var(--rt-radius-xs)}.rt-table[data-rt-radius=sm]{--rt-table-card-radius: var(--rt-radius-sm)}.rt-table[data-rt-radius=ms]{--rt-table-card-radius: var(--rt-radius-ms)}.rt-table[data-rt-radius=md]{--rt-table-card-radius: var(--rt-radius-md)}.rt-table[data-rt-radius=lg]{--rt-table-card-radius: var(--rt-radius-lg)}.rt-table[data-rt-radius=xl]{--rt-table-card-radius: var(--rt-radius-xl)}.rt-table[data-rt-radius=\"2xl\"]{--rt-table-card-radius: var(--rt-radius-2xl)}.rt-table[data-rt-radius=full]{--rt-table-card-radius: var(--rt-radius-full)}}\n"]
 		}]
 	}],
 	propDecorators: {