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

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

@@ -124,7 +124,7 @@ class RtStatTileComponent {
     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", "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 }); }
+                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.1.6", ngImport: i0, type: RtStatTileComponent, decorators: [{
             type: Component,

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","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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"}

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

@@ -1383,7 +1383,7 @@ class RtTableSortHeaderComponent {
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: 
                 // components
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableSortHeaderComponent, decorators: [{
             type: Component,
@@ -1477,7 +1477,7 @@ class RtTableSettingsPanelComponent {
                 // @angular/cdk
                 CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: 
                 // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "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 }); }
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: 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.1.6", ngImport: i0, type: RtTableSettingsPanelComponent, decorators: [{
             type: Component,