@rt-tools/ui-kit-v2 0.39.1 → 0.40.0

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

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, inject, input } from "@angular/core";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
@@ -15,18 +15,16 @@ function directionOf(percent) {
 	if (percent > 0) return "up";
 	return percent < 0 ? "down" : "flat";
 }
-function percentText(percent) {
-	if (percent === null) return "—";
-	return `${percent > 0 ? "+" : ""}${String(percent).replace(".", ",")} %`;
+function signedNumber(value) {
+	return `${value > 0 ? "+" : ""}${String(value).replace(".", ",")}`;
 }
-function deltaRow(key, delta) {
-	if (!delta) return null;
-	const direction = directionOf(delta.percent);
+function deltaRow(key, delta, percent, pointsText) {
+	const direction = directionOf(percent);
 	return {
 		key,
 		direction,
 		label: delta.label,
-		text: percentText(delta.percent),
+		text: delta.unit === "points" ? pointsText : `${signedNumber(percent)} %`,
 		baseline: delta.baseline ?? "",
 		icon: DIRECTION_ICONS[direction]
 	};
@@ -35,9 +33,11 @@ var RtStatTileComponent = class RtStatTileComponent {
 	constructor() {
 		this.#baselineParams = computed(() => ({ value: this.deltaPrimary()?.baseline ?? "" }), ...ngDevMode ? [{ debugName: "#baselineParams" }] : /* istanbul ignore next */ []);
 		this.#baselineLine = rtKitLabel("uiBaseline", this.#baselineParams);
+		this.#primaryPoints = rtKitLabel("uiPercentagePoints", computed(() => ({ value: signedNumber(this.deltaPrimary()?.percent ?? 0) })));
+		this.#yearPoints = rtKitLabel("uiPercentagePoints", computed(() => ({ value: signedNumber(this.deltaSecondary()?.percent ?? 0) })));
 		this.t = inject(RT_KIT_LABELS);
-		this.primaryDelta = computed(() => this.#visibleDelta(this.deltaPrimary()), ...ngDevMode ? [{ debugName: "primaryDelta" }] : /* istanbul ignore next */ []);
-		this.yearDelta = computed(() => this.#visibleDelta(this.deltaSecondary()), ...ngDevMode ? [{ debugName: "yearDelta" }] : /* istanbul ignore next */ []);
+		this.primaryDelta = computed(() => this.#visibleDelta("primary", this.deltaPrimary(), this.#primaryPoints()), ...ngDevMode ? [{ debugName: "primaryDelta" }] : /* istanbul ignore next */ []);
+		this.yearDelta = computed(() => this.#visibleDelta("year", this.deltaSecondary(), this.#yearPoints()), ...ngDevMode ? [{ debugName: "yearDelta" }] : /* istanbul ignore next */ []);
 		this.baselineText = computed(() => this.deltaPrimary()?.baseline ? this.#baselineLine() : "", ...ngDevMode ? [{ debugName: "baselineText" }] : /* istanbul ignore next */ []);
 		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -45,12 +45,18 @@ var RtStatTileComponent = class RtStatTileComponent {
 		this.deltaPrimary = input(null, ...ngDevMode ? [{ debugName: "deltaPrimary" }] : /* istanbul ignore next */ []);
 		this.deltaSecondary = input(null, ...ngDevMode ? [{ debugName: "deltaSecondary" }] : /* istanbul ignore next */ []);
 		this.hint = input(null, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.growthIsWorse = input(false, {
+			...ngDevMode ? { debugName: "growthIsWorse" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
 	}
 	#baselineParams;
 	#baselineLine;
-	#visibleDelta(delta) {
+	#primaryPoints;
+	#yearPoints;
+	#visibleDelta(key, delta, pointsText) {
 		if (!delta || delta.percent === null) return null;
-		return deltaRow("primary", delta);
+		return deltaRow(key, delta, delta.percent, pointsText);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -111,12 +117,19 @@ var RtStatTileComponent = class RtStatTileComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				growthIsWorse: {
+					classPropertyName: "growthIsWorse",
+					publicName: "growthIsWorse",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: { classAttribute: "rt-stat-tile" },
 			ngImport: i0,
-			template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon qa-dataid=\"stat-tile-delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ t().uiYearOverYear }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stat-tile{display:block}rt-stat-tile .rt-stat-tile{--rt-stat-tile-year-radius: var(--rt-radius-sm);display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}rt-stat-tile .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}rt-stat-tile .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-stat-tile .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}rt-stat-tile .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-4)}rt-stat-tile .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-stat-tile-year-radius);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}rt-stat-tile .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}rt-stat-tile .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}}\n"],
+			template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\" [rtMod]=\"{ 'growth-worse': growthIsWorse() }\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon qa-dataid=\"stat-tile-delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ t().uiYearOverYear }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stat-tile{display:block}rt-stat-tile .rt-stat-tile{--rt-stat-tile-year-radius: var(--rt-radius-sm);display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}rt-stat-tile .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}rt-stat-tile .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-stat-tile .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}rt-stat-tile .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-4)}rt-stat-tile .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-stat-tile-year-radius);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}rt-stat-tile .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__year--direction--up{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__year--direction--down{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -174,8 +187,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ModDirective
 			],
 			host: { class: BEM_BLOCK },
-			template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon qa-dataid=\"stat-tile-delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ t().uiYearOverYear }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stat-tile{display:block}rt-stat-tile .rt-stat-tile{--rt-stat-tile-year-radius: var(--rt-radius-sm);display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}rt-stat-tile .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}rt-stat-tile .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-stat-tile .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}rt-stat-tile .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-4)}rt-stat-tile .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-stat-tile-year-radius);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}rt-stat-tile .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}rt-stat-tile .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}}\n"]
+			template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\" [rtMod]=\"{ 'growth-worse': growthIsWorse() }\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon qa-dataid=\"stat-tile-delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ t().uiYearOverYear }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stat-tile{display:block}rt-stat-tile .rt-stat-tile{--rt-stat-tile-year-radius: var(--rt-radius-sm);display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}rt-stat-tile .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}rt-stat-tile .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-stat-tile .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}rt-stat-tile .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-4)}rt-stat-tile .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-stat-tile-year-radius);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}rt-stat-tile .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__year--direction--up{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile--growth-worse .rt-stat-tile__year--direction--down{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -226,6 +239,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "hint",
 				required: false
 			}]
+		}],
+		growthIsWorse: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "growthIsWorse",
+				required: false
+			}]
 		}]
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-stat-tile.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/stat-tile/rt-stat-tile.component.ts","../../../projects/ui-kit-v2/src/lib/components/stat-tile/rt-stat-tile.component.html"],"sourcesContent":["import { computed, inject, input, ChangeDetectionStrategy, Component, InputSignal, Signal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtStatTile } from './rt-stat-tile.model';\n\nconst BEM_BLOCK: string = 'rt-stat-tile';\n\n/** Строка дельты в готовом к рендеру виде — вся ветвистость решена здесь. */\ninterface IDeltaRow {\n    key: string;\n    label: string;\n    text: string;\n    baseline: string;\n    direction: IRtStatTile.Direction;\n    icon: IRtIcon.Name;\n}\n\nconst DIRECTION_ICONS: Readonly<Record<IRtStatTile.Direction, IRtIcon.Name>> = Object.freeze({\n    up: 'arrow-up',\n    down: 'arrow-down',\n    flat: 'minus',\n    unknown: 'minus',\n});\n\nfunction directionOf(percent: number | null): IRtStatTile.Direction {\n    if (percent === null) {\n        return 'unknown';\n    }\n    if (percent > 0) {\n        return 'up';\n    }\n    return percent < 0 ? 'down' : 'flat';\n}\n\n/**\n * Нулевая база — «—»: «+100 %» от нуля вводит в заблуждение, «∞» нечитаемо.\n * Дробная часть — через запятую, как и остальные проценты в интерфейсе: кит\n * форматирует сам, потому что не может зависеть от логики приложений.\n */\nfunction percentText(percent: number | null): string {\n    if (percent === null) {\n        return '—';\n    }\n    const sign: string = percent > 0 ? '+' : '';\n    return `${sign}${String(percent).replace('.', ',')} %`;\n}\n\nfunction deltaRow(key: string, delta: IRtStatTile.Delta | null): IDeltaRow | null {\n    if (!delta) {\n        return null;\n    }\n    const direction: IRtStatTile.Direction = directionOf(delta.percent);\n    return {\n        key,\n        direction,\n        label: delta.label,\n        text: percentText(delta.percent),\n        baseline: delta.baseline ?? '',\n        icon: DIRECTION_ICONS[direction],\n    };\n}\n\n/**\n * KPI-плитка: крупное значение, необязательная вторичная строка и до двух строк\n * сравнения (к предыдущему периоду и к прошлому году).\n *\n * Компонент ничего не считает и не форматирует: `value` и `baseline` приходят\n * готовыми строками, `percent` — посчитанным числом. Так плитка не знает ни про\n * валюты, ни про методику метрик и остаётся общей для любого домена.\n *\n * Нулевая база показывается как «—»: «+100 %» от нуля вводит в заблуждение, а\n * «∞» нечитаемо.\n */\n@Component({\n    selector: 'rt-stat-tile',\n    templateUrl: './rt-stat-tile.component.html',\n    styleUrl: './rt-stat-tile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtStatTileComponent {\n    /**\n     * Значение базы уходит параметром перевода, а не подставляется в готовую\n     * строку: Transloco интерполирует `{{value}}` в момент перевода, и к\n     * возвращённой строке подставлять уже нечего — от подписи оставалась одна\n     * приставка («было», «was»), а само число пропадало.\n     */\n    readonly #baselineParams: Signal<Record<string, string>> = computed((): Record<string, string> => ({\n        value: this.deltaPrimary()?.baseline ?? '',\n    }));\n\n    readonly #baselineLine: Signal<string> = rtKitLabel('uiBaseline', this.#baselineParams);\n\n    /**\n     * Дельта к предыдущему периоду — рядом со значением. Пустая база (`percent`\n     * = null) не рисуется вовсе: «—» рядом с цифрой читается как поломка, а не\n     * как «сравнивать не с чем».\n     */\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly primaryDelta: Signal<IDeltaRow | null> = computed((): IDeltaRow | null => this.#visibleDelta(this.deltaPrimary()));\n\n    /** Годовое сравнение — отдельным компактным чипом, без слов в строке. */\n    protected readonly yearDelta: Signal<IDeltaRow | null> = computed((): IDeltaRow | null => this.#visibleDelta(this.deltaSecondary()));\n\n    /**\n     * База сравнения — короткой строкой «было X» и ничем больше: всё остальное\n     * (занятость, состав воронки) живёт во вторичной строке, иначе одна плитка\n     * растягивает ряд под самую длинную подпись.\n     */\n    protected readonly baselineText: Signal<string> = computed((): string => (this.deltaPrimary()?.baseline ? this.#baselineLine() : ''));\n\n    /** Подпись метрики. */\n    public readonly label: InputSignal<string> = input.required<string>();\n\n    /** Уже отформатированное значение — плитка его не преобразует. */\n    public readonly value: InputSignal<string> = input.required<string>();\n\n    /** Вторичная строка под значением (занятость, доля оценки и т.п.). */\n    public readonly secondary: InputSignal<string | null> = input<string | null>(null);\n\n    /** Сравнение с предыдущим равным периодом. */\n    public readonly deltaPrimary: InputSignal<IRtStatTile.Delta | null> = input<IRtStatTile.Delta | null>(null);\n\n    /** Сравнение с тем же периодом год назад. */\n    public readonly deltaSecondary: InputSignal<IRtStatTile.Delta | null> = input<IRtStatTile.Delta | null>(null);\n\n    /** Пояснение методики — нативный title на иконке подсказки. */\n    public readonly hint: InputSignal<string | null> = input<string | null>(null);\n\n    #visibleDelta(delta: IRtStatTile.Delta | null): IDeltaRow | null {\n        if (!delta || delta.percent === null) {\n            return null;\n        }\n        return deltaRow('primary', delta);\n    }\n}\n","<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon qa-dataid=\"stat-tile-delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ t().uiYearOverYear }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-stat-tile.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/stat-tile/rt-stat-tile.component.ts","../../../projects/ui-kit-v2/src/lib/components/stat-tile/rt-stat-tile.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    inject,\n    input,\n    ChangeDetectionStrategy,\n    Component,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtStatTile } from './rt-stat-tile.model';\n\nconst BEM_BLOCK: string = 'rt-stat-tile';\n\n/** Строка дельты в готовом к рендеру виде — вся ветвистость решена здесь. */\ninterface IDeltaRow {\n    key: string;\n    label: string;\n    text: string;\n    baseline: string;\n    direction: IRtStatTile.Direction;\n    icon: IRtIcon.Name;\n}\n\nconst DIRECTION_ICONS: Readonly<Record<IRtStatTile.Direction, IRtIcon.Name>> = Object.freeze({\n    up: 'arrow-up',\n    down: 'arrow-down',\n    flat: 'minus',\n    unknown: 'minus',\n});\n\nfunction directionOf(percent: number | null): IRtStatTile.Direction {\n    if (percent === null) {\n        return 'unknown';\n    }\n    if (percent > 0) {\n        return 'up';\n    }\n    return percent < 0 ? 'down' : 'flat';\n}\n\n/**\n * Число со знаком роста. Дробная часть — через запятую, как и остальные\n * проценты в интерфейсе: кит форматирует сам, потому что не может зависеть от\n * логики приложений.\n */\nfunction signedNumber(value: number): string {\n    const sign: string = value > 0 ? '+' : '';\n    return `${sign}${String(value).replace('.', ',')}`;\n}\n\n/**\n * Строка изменения с известной базой. Пункты пишутся переведённой подписью\n * («+10 п.п.», «+10 pp») — её текст приходит готовым, проценты кит дописывает сам.\n */\nfunction deltaRow(key: string, delta: IRtStatTile.Delta, percent: number, pointsText: string): IDeltaRow {\n    const direction: IRtStatTile.Direction = directionOf(percent);\n    return {\n        key,\n        direction,\n        label: delta.label,\n        text: delta.unit === 'points' ? pointsText : `${signedNumber(percent)} %`,\n        baseline: delta.baseline ?? '',\n        icon: DIRECTION_ICONS[direction],\n    };\n}\n\n/**\n * KPI-плитка: крупное значение, необязательная вторичная строка и до двух строк\n * сравнения (к предыдущему периоду и к прошлому году).\n *\n * Компонент ничего не считает и не форматирует: `value` и `baseline` приходят\n * готовыми строками, `percent` — посчитанным числом. Так плитка не знает ни про\n * валюты, ни про методику метрик и остаётся общей для любого домена.\n *\n * Строка с неизвестной базой не рисуется: «+100 %» от нуля вводит в\n * заблуждение, а «—» рядом с цифрой читается как поломка.\n *\n * Цвет строки говорит, хорошо изменение или плохо, а стрелка — только знак\n * числа: у метрики, где рост хуже (отмены, потерянная выручка), рост красный и\n * со стрелкой вверх.\n */\n@Component({\n    selector: 'rt-stat-tile',\n    templateUrl: './rt-stat-tile.component.html',\n    styleUrl: './rt-stat-tile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtStatTileComponent {\n    /**\n     * Значение базы уходит параметром перевода, а не подставляется в готовую\n     * строку: Transloco интерполирует `{{value}}` в момент перевода, и к\n     * возвращённой строке подставлять уже нечего — от подписи оставалась одна\n     * приставка («было», «was»), а само число пропадало.\n     */\n    readonly #baselineParams: Signal<Record<string, string>> = computed((): Record<string, string> => ({\n        value: this.deltaPrimary()?.baseline ?? '',\n    }));\n\n    readonly #baselineLine: Signal<string> = rtKitLabel('uiBaseline', this.#baselineParams);\n\n    /** Пункты — тоже параметром подписи: порядок числа и единицы знает язык, а не кит. */\n    readonly #primaryPoints: Signal<string> = rtKitLabel(\n        'uiPercentagePoints',\n        computed((): Record<string, string> => ({ value: signedNumber(this.deltaPrimary()?.percent ?? 0) }))\n    );\n\n    readonly #yearPoints: Signal<string> = rtKitLabel(\n        'uiPercentagePoints',\n        computed((): Record<string, string> => ({ value: signedNumber(this.deltaSecondary()?.percent ?? 0) }))\n    );\n\n    /** Подписи кита для шаблона — приставка годового чипа. */\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    /**\n     * Дельта к предыдущему периоду — рядом со значением. Пустая база (`percent`\n     * = null) не рисуется вовсе: «—» рядом с цифрой читается как поломка, а не\n     * как «сравнивать не с чем».\n     */\n    protected readonly primaryDelta: Signal<IDeltaRow | null> = computed((): IDeltaRow | null =>\n        this.#visibleDelta('primary', this.deltaPrimary(), this.#primaryPoints())\n    );\n\n    /** Годовое сравнение — отдельным компактным чипом, без слов в строке. */\n    protected readonly yearDelta: Signal<IDeltaRow | null> = computed((): IDeltaRow | null =>\n        this.#visibleDelta('year', this.deltaSecondary(), this.#yearPoints())\n    );\n\n    /**\n     * База сравнения — короткой строкой «было X» и ничем больше: всё остальное\n     * (занятость, состав воронки) живёт во вторичной строке, иначе одна плитка\n     * растягивает ряд под самую длинную подпись.\n     */\n    protected readonly baselineText: Signal<string> = computed((): string => (this.deltaPrimary()?.baseline ? this.#baselineLine() : ''));\n\n    /** Подпись метрики. */\n    public readonly label: InputSignal<string> = input.required<string>();\n\n    /** Уже отформатированное значение — плитка его не преобразует. */\n    public readonly value: InputSignal<string> = input.required<string>();\n\n    /** Вторичная строка под значением (занятость, доля оценки и т.п.). */\n    public readonly secondary: InputSignal<string | null> = input<string | null>(null);\n\n    /** Сравнение с предыдущим равным периодом. */\n    public readonly deltaPrimary: InputSignal<IRtStatTile.Delta | null> = input<IRtStatTile.Delta | null>(null);\n\n    /** Сравнение с тем же периодом год назад. */\n    public readonly deltaSecondary: InputSignal<IRtStatTile.Delta | null> = input<IRtStatTile.Delta | null>(null);\n\n    /** Пояснение методики — нативный title на иконке подсказки. */\n    public readonly hint: InputSignal<string | null> = input<string | null>(null);\n\n    /**\n     * Рост метрики плох для владельца (отмены, потерянная выручка): рост обеих\n     * строк красный, падение зелёное. Стрелка по-прежнему показывает знак числа.\n     */\n    public readonly growthIsWorse: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    #visibleDelta(key: string, delta: IRtStatTile.Delta | null, pointsText: string): IDeltaRow | null {\n        if (!delta || delta.percent === null) {\n            return null;\n        }\n        return deltaRow(key, delta, delta.percent, pointsText);\n    }\n}\n","<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\" [rtMod]=\"{ 'growth-worse': growthIsWorse() }\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon qa-dataid=\"stat-tile-delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ t().uiYearOverYear }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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";
@@ -620,7 +620,9 @@ var RtTableFilterHeaderComponent = class RtTableFilterHeaderComponent {
 						"max",
 						"minFractionDigits",
 						"maxFractionDigits",
-						"grouped"
+						"grouped",
+						"step",
+						"stepper"
 					]
 				},
 				{
@@ -1165,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";
@@ -1174,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 */ []);
@@ -1249,7 +1327,12 @@ var RtTableComponent = class RtTableComponent extends CdkTable {
 	#t_uiNoRows;
 	#destroyRef;
 	#breakpoints;
+	#injector;
+	#host;
+	#window;
 	#dataSourceVersion;
+	#hiddenEdges;
+	#pinnedEdges;
 	#sort;
 	#columnSettings;
 	ngOnInit() {
@@ -1260,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) {
@@ -1446,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"
@@ -1517,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",
@@ -1713,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: {