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

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

@@ -1,147 +1,234 @@
-import * as i0 from '@angular/core';
-import { computed, inject, input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { rtKitLabel, RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-
-const BEM_BLOCK = 'rt-stat-tile';
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, 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";
+const BEM_BLOCK = "rt-stat-tile";
 const DIRECTION_ICONS = Object.freeze({
-    up: 'arrow-up',
-    down: 'arrow-down',
-    flat: 'minus',
-    unknown: 'minus',
+	up: "arrow-up",
+	down: "arrow-down",
+	flat: "minus",
+	unknown: "minus"
 });
 function directionOf(percent) {
-    if (percent === null) {
-        return 'unknown';
-    }
-    if (percent > 0) {
-        return 'up';
-    }
-    return percent < 0 ? 'down' : 'flat';
+	if (percent === null) return "unknown";
+	if (percent > 0) return "up";
+	return percent < 0 ? "down" : "flat";
 }
-/**
- * Нулевая база — «—»: «+100 %» от нуля вводит в заблуждение, «∞» нечитаемо.
- * Дробная часть — через запятую, как и остальные проценты в интерфейсе: кит
- * форматирует сам, потому что не может зависеть от логики приложений.
- */
 function percentText(percent) {
-    if (percent === null) {
-        return '—';
-    }
-    const sign = percent > 0 ? '+' : '';
-    return `${sign}${String(percent).replace('.', ',')} %`;
+	if (percent === null) return "—";
+	return `${percent > 0 ? "+" : ""}${String(percent).replace(".", ",")} %`;
 }
 function deltaRow(key, delta) {
-    if (!delta) {
-        return null;
-    }
-    const direction = directionOf(delta.percent);
-    return {
-        key,
-        direction,
-        label: delta.label,
-        text: percentText(delta.percent),
-        baseline: delta.baseline ?? '',
-        icon: DIRECTION_ICONS[direction],
-    };
-}
-/**
- * KPI-плитка: крупное значение, необязательная вторичная строка и до двух строк
- * сравнения (к предыдущему периоду и к прошлому году).
- *
- * Компонент ничего не считает и не форматирует: `value` и `baseline` приходят
- * готовыми строками, `percent` — посчитанным числом. Так плитка не знает ни про
- * валюты, ни про методику метрик и остаётся общей для любого домена.
- *
- * Нулевая база показывается как «—»: «+100 %» от нуля вводит в заблуждение, а
- * «∞» нечитаемо.
- */
-class RtStatTileComponent {
-    constructor() {
-        /**
-         * Значение базы уходит параметром перевода, а не подставляется в готовую
-         * строку: Transloco интерполирует `{{value}}` в момент перевода, и к
-         * возвращённой строке подставлять уже нечего — от подписи оставалась одна
-         * приставка («было», «was»), а само число пропадало.
-         */
-        this.#baselineParams = computed(() => ({
-            value: this.deltaPrimary()?.baseline ?? '',
-        }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#baselineParams" }] : /* istanbul ignore next */ []));
-        this.#baselineLine = rtKitLabel('uiBaseline', this.#baselineParams);
-        /**
-         * Дельта к предыдущему периоду — рядом со значением. Пустая база (`percent`
-         * = null) не рисуется вовсе: «—» рядом с цифрой читается как поломка, а не
-         * как «сравнивать не с чем».
-         */
-        this.t = inject(RT_KIT_LABELS);
-        this.primaryDelta = computed(() => this.#visibleDelta(this.deltaPrimary()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "primaryDelta" }] : /* istanbul ignore next */ []));
-        /** Годовое сравнение — отдельным компактным чипом, без слов в строке. */
-        this.yearDelta = computed(() => this.#visibleDelta(this.deltaSecondary()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "yearDelta" }] : /* istanbul ignore next */ []));
-        /**
-         * База сравнения — короткой строкой «было X» и ничем больше: всё остальное
-         * (занятость, состав воронки) живёт во вторичной строке, иначе одна плитка
-         * растягивает ряд под самую длинную подпись.
-         */
-        this.baselineText = computed(() => (this.deltaPrimary()?.baseline ? this.#baselineLine() : ''), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "baselineText" }] : /* istanbul ignore next */ []));
-        /** Подпись метрики. */
-        this.label = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Уже отформатированное значение — плитка его не преобразует. */
-        this.value = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        /** Вторичная строка под значением (занятость, доля оценки и т.п.). */
-        this.secondary = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "secondary" }] : /* istanbul ignore next */ []));
-        /** Сравнение с предыдущим равным периодом. */
-        this.deltaPrimary = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "deltaPrimary" }] : /* istanbul ignore next */ []));
-        /** Сравнение с тем же периодом год назад. */
-        this.deltaSecondary = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "deltaSecondary" }] : /* istanbul ignore next */ []));
-        /** Пояснение методики — нативный title на иконке подсказки. */
-        this.hint = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    }
-    /**
-     * Значение базы уходит параметром перевода, а не подставляется в готовую
-     * строку: Transloco интерполирует `{{value}}` в момент перевода, и к
-     * возвращённой строке подставлять уже нечего — от подписи оставалась одна
-     * приставка («было», «was»), а само число пропадало.
-     */
-    #baselineParams;
-    #baselineLine;
-    #visibleDelta(delta) {
-        if (!delta || delta.percent === null) {
-            return null;
-        }
-        return deltaRow('primary', delta);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtStatTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtStatTileComponent, isStandalone: true, selector: "rt-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, deltaPrimary: { classPropertyName: "deltaPrimary", publicName: "deltaPrimary", isSignal: true, isRequired: false, transformFunction: null }, deltaSecondary: { classPropertyName: "deltaSecondary", publicName: "deltaSecondary", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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"], dependencies: [{ kind: "component", type: 
-                // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+	if (!delta) return null;
+	const direction = directionOf(delta.percent);
+	return {
+		key,
+		direction,
+		label: delta.label,
+		text: percentText(delta.percent),
+		baseline: delta.baseline ?? "",
+		icon: DIRECTION_ICONS[direction]
+	};
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtStatTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-stat-tile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        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"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], deltaPrimary: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaPrimary", required: false }] }], deltaSecondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSecondary", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+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.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.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 */ []);
+		this.secondary = input(null, ...ngDevMode ? [{ debugName: "secondary" }] : /* istanbul ignore next */ []);
+		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 */ []);
+	}
+	#baselineParams;
+	#baselineLine;
+	#visibleDelta(delta) {
+		if (!delta || delta.percent === null) return null;
+		return deltaRow("primary", delta);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtStatTileComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtStatTileComponent,
+			isStandalone: true,
+			selector: "rt-stat-tile",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				secondary: {
+					classPropertyName: "secondary",
+					publicName: "secondary",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				deltaPrimary: {
+					classPropertyName: "deltaPrimary",
+					publicName: "deltaPrimary",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				deltaSecondary: {
+					classPropertyName: "deltaSecondary",
+					publicName: "deltaSecondary",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hint: {
+					classPropertyName: "hint",
+					publicName: "hint",
+					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"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtStatTileComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-stat-tile",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective,
+				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"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		secondary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondary",
+				required: false
+			}]
+		}],
+		deltaPrimary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deltaPrimary",
+				required: false
+			}]
+		}],
+		deltaSecondary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deltaSecondary",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}]
+	}
+});
 export { RtStatTileComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-stat-tile.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-stat-tile.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-stat-tile.mjs","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","../../../projects/ui-kit-v2/src/lib/components/stat-tile/rt-tools-ui-kit-v2-stat-tile.ts"],"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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"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 { 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":";;;;;AASA,MAAM,YAAoB;AAY1B,MAAM,kBAAyE,OAAO,OAAO;CACzF,IAAI;CACJ,MAAM;CACN,MAAM;CACN,SAAS;AACZ,CAAA;AAED,SAAS,YAAY,SAAsB;CACvC,IAAI,YAAY,MACZ,OAAO;CAEX,IAAI,UAAU,GACV,OAAO;CAEX,OAAO,UAAU,IAAI,SAAS;AAClC;AAOA,SAAS,YAAY,SAAsB;CACvC,IAAI,YAAY,MACZ,OAAO;CAGX,OAAO,GADc,UAAU,IAAI,MAAM,KACxB,OAAO,OAAO,CAAC,CAAC,QAAQ,KAAK,GAAG,EAAC;AACtD;AAEA,SAAS,SAAS,KAAa,OAA+B;CAC1D,IAAI,CAAC,OACD,OAAO;CAEX,MAAM,YAAmC,YAAY,MAAM,OAAO;CAClE,OAAO;EACH;EACA;EACA,OAAO,MAAM;EACb,MAAM,YAAY,MAAM,OAAO;EAC/B,UAAU,MAAM,YAAY;EAC5B,MAAM,gBAAgB;CACzB;AACL;AA8BA,IAAa,sBAAb,MAAa,oBAAmB;CAjBhC,cAAA;EAwBa,KAAA,kBAAkD,gBAAwC,EAC/F,OAAO,KAAK,aAAY,CAAE,EAAE,YAAY,GAC3C,IAAE,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;EAEM,KAAA,gBAAgC,WAAW,cAAc,KAAK,eAAe;EAOnE,KAAA,IAA4B,OAAO,aAAa;EAEhD,KAAA,eAAyC,eAAiC,KAAK,cAAc,KAAK,aAAY,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;EAGlH,KAAA,YAAsC,eAAiC,KAAK,cAAc,KAAK,eAAc,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAOjH,KAAA,eAA+B,eAAwB,KAAK,aAAY,CAAE,EAAE,WAAW,KAAK,cAAa,IAAK,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;EAGrH,KAAA,QAA6B,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAGrD,KAAA,QAA6B,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAGrD,KAAA,YAAwC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAGlE,KAAA,eAAsD,MAAgC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;EAG3F,KAAA,iBAAwD,MAAgC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;EAG7F,KAAA,OAAmC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQhF;CAjDY;CAIA;CAuCT,cAAc,OAA+B;EACzC,IAAI,CAAC,SAAS,MAAM,YAAY,MAC5B,OAAO;EAEX,OAAO,SAAS,WAAW,KAAK;CACpC;CAvDS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAmB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAnB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAmB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,cAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,gBAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,MAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,MAAA,EAAA,gBAAA,eAAA;GAAA,UAAA;GAAA,UC9FhC;GA2CA,QAAA,CAAA,smEAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MD0CQ;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACf;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAY,UAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAMP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAjB/B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAc,iBAGP,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;IACA;GACH;GAAA,MACK,EACF,OAAO,UACV;GAAA,UAAA;GAAA,QAAA,CAAA,smEAAA;EAAA,CAAA"}