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

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

@@ -0,0 +1,123 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-skeleton';
+/**
+ * Visual primitive для loading-state'а: серая полоска с shimmer-анимацией.
+ *
+ * Не использовать напрямую — оборачивай реальный content в `<rt-skeleton-wrapper>`
+ * с input'ом `[isLoading]`. Wrapper решает что показать (skeleton или content),
+ * этот компонент только рисует placeholder.
+ *
+ * Скругление прямоугольника и квадрата — шаг общего входа `radius`; круг остаётся кругом.
+ *
+ * Shimmer через background-position keyframes; `@media (prefers-reduced-motion)`
+ * убирает анимацию для пользователей с reduced-motion preference.
+ */
+class RtSkeletonComponent {
+    constructor() {
+        this.#sizeMap = {
+            sm: '10px',
+            md: '15px',
+            lg: '20px',
+        };
+        this.shape = input('rectangle', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.width = input('100%', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.height = input(this.#sizeMap.sm, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.animation = input(true, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    #sizeMap;
+    get isRectangle() {
+        return this.shape() === 'rectangle';
+    }
+    get isCircle() {
+        return this.shape() === 'circle';
+    }
+    get isSquare() {
+        return this.shape() === 'square';
+    }
+    get isSizeSm() {
+        return this.size() === 'sm';
+    }
+    get isSizeMd() {
+        return this.size() === 'md';
+    }
+    get isSizeLg() {
+        return this.size() === 'lg';
+    }
+    get isAnimated() {
+        return this.animation();
+    }
+    get hostWidth() {
+        switch (this.shape()) {
+            case 'circle':
+            case 'square':
+                return this.#getSizeValue();
+            case 'rectangle':
+            default:
+                return this.width();
+        }
+    }
+    get hostHeight() {
+        switch (this.shape()) {
+            case 'circle':
+            case 'square':
+                return this.#getSizeValue();
+            case 'rectangle':
+            default:
+                return this.height();
+        }
+    }
+    #getSizeValue() {
+        return this.#sizeMap[this.size()];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtSkeletonComponent, isStandalone: true, selector: "rt-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-skeleton--rectangle": "this.isRectangle", "class.rt-skeleton--circle": "this.isCircle", "class.rt-skeleton--square": "this.isSquare", "class.rt-skeleton--sm": "this.isSizeSm", "class.rt-skeleton--md": "this.isSizeMd", "class.rt-skeleton--lg": "this.isSizeLg", "class.rt-skeleton--animated": "this.isAnimated", "style.width": "this.hostWidth", "style.height": "this.hostHeight" }, classAttribute: "rt-skeleton" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-skeleton{--rt-skeleton-wave-duration: 2.5s;--rt-skeleton-radius: var(--rt-radius-sm);--rt-skeleton-circle-radius: var(--rt-radius-full);position:relative;display:inline-block;overflow:hidden;background:linear-gradient(90deg,var(--rt-color-skeleton-base) 0%,var(--rt-color-skeleton-wave) 50%,var(--rt-color-skeleton-base) 100%);background-size:200% 100%}.rt-skeleton--rectangle{border-radius:var(--rt-skeleton-radius)}.rt-skeleton--circle{border-radius:var(--rt-skeleton-circle-radius)}.rt-skeleton--square{border-radius:var(--rt-skeleton-radius)}.rt-skeleton[data-rt-radius=none]{--rt-skeleton-radius: var(--rt-radius-none)}.rt-skeleton[data-rt-radius=xs]{--rt-skeleton-radius: var(--rt-radius-xs)}.rt-skeleton[data-rt-radius=sm]{--rt-skeleton-radius: var(--rt-radius-sm)}.rt-skeleton[data-rt-radius=ms]{--rt-skeleton-radius: var(--rt-radius-ms)}.rt-skeleton[data-rt-radius=md]{--rt-skeleton-radius: var(--rt-radius-md)}.rt-skeleton[data-rt-radius=lg]{--rt-skeleton-radius: var(--rt-radius-lg)}.rt-skeleton[data-rt-radius=xl]{--rt-skeleton-radius: var(--rt-radius-xl)}.rt-skeleton[data-rt-radius=\"2xl\"]{--rt-skeleton-radius: var(--rt-radius-2xl)}.rt-skeleton[data-rt-radius=full]{--rt-skeleton-radius: var(--rt-radius-full)}.rt-skeleton--sm{min-width:10px;min-height:10px}.rt-skeleton--md{min-width:15px;min-height:15px}.rt-skeleton--lg{min-width:20px;min-height:20px}.rt-skeleton--animated{animation:rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite}@keyframes rt-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.rt-skeleton--animated{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-skeleton', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-skeleton{--rt-skeleton-wave-duration: 2.5s;--rt-skeleton-radius: var(--rt-radius-sm);--rt-skeleton-circle-radius: var(--rt-radius-full);position:relative;display:inline-block;overflow:hidden;background:linear-gradient(90deg,var(--rt-color-skeleton-base) 0%,var(--rt-color-skeleton-wave) 50%,var(--rt-color-skeleton-base) 100%);background-size:200% 100%}.rt-skeleton--rectangle{border-radius:var(--rt-skeleton-radius)}.rt-skeleton--circle{border-radius:var(--rt-skeleton-circle-radius)}.rt-skeleton--square{border-radius:var(--rt-skeleton-radius)}.rt-skeleton[data-rt-radius=none]{--rt-skeleton-radius: var(--rt-radius-none)}.rt-skeleton[data-rt-radius=xs]{--rt-skeleton-radius: var(--rt-radius-xs)}.rt-skeleton[data-rt-radius=sm]{--rt-skeleton-radius: var(--rt-radius-sm)}.rt-skeleton[data-rt-radius=ms]{--rt-skeleton-radius: var(--rt-radius-ms)}.rt-skeleton[data-rt-radius=md]{--rt-skeleton-radius: var(--rt-radius-md)}.rt-skeleton[data-rt-radius=lg]{--rt-skeleton-radius: var(--rt-radius-lg)}.rt-skeleton[data-rt-radius=xl]{--rt-skeleton-radius: var(--rt-radius-xl)}.rt-skeleton[data-rt-radius=\"2xl\"]{--rt-skeleton-radius: var(--rt-radius-2xl)}.rt-skeleton[data-rt-radius=full]{--rt-skeleton-radius: var(--rt-radius-full)}.rt-skeleton--sm{min-width:10px;min-height:10px}.rt-skeleton--md{min-width:15px;min-height:15px}.rt-skeleton--lg{min-width:20px;min-height:20px}.rt-skeleton--animated{animation:rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite}@keyframes rt-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.rt-skeleton--animated{animation:none}}}\n"] }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], isRectangle: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--rectangle']
+            }], isCircle: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--circle']
+            }], isSquare: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--square']
+            }], isSizeSm: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--sm']
+            }], isSizeMd: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--md']
+            }], isSizeLg: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--lg']
+            }], isAnimated: [{
+                type: HostBinding,
+                args: ['class.rt-skeleton--animated']
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtSkeletonComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-skeleton.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/skeleton/rt-skeleton.component.ts","../../../projects/ui-kit-v2/src/lib/components/skeleton/rt-tools-ui-kit-v2-skeleton.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nexport type TRtSkeletonShape = 'rectangle' | 'circle' | 'square';\nexport type TRtSkeletonSize = 'sm' | 'md' | 'lg';\n\nconst BEM_BLOCK: string = 'rt-skeleton';\n\n/**\n * Visual primitive для loading-state'а: серая полоска с shimmer-анимацией.\n *\n * Не использовать напрямую — оборачивай реальный content в `<rt-skeleton-wrapper>`\n * с input'ом `[isLoading]`. Wrapper решает что показать (skeleton или content),\n * этот компонент только рисует placeholder.\n *\n * Скругление прямоугольника и квадрата — шаг общего входа `radius`; круг остаётся кругом.\n *\n * Shimmer через background-position keyframes; `@media (prefers-reduced-motion)`\n * убирает анимацию для пользователей с reduced-motion preference.\n */\n@Component({\n    selector: 'rt-skeleton',\n    template: '',\n    styleUrls: ['./rt-skeleton.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtSkeletonComponent {\n    readonly #sizeMap: Record<TRtSkeletonSize, string> = {\n        sm: '10px',\n        md: '15px',\n        lg: '20px',\n    };\n\n    public readonly shape: InputSignal<TRtSkeletonShape> = input<TRtSkeletonShape>('rectangle');\n\n    public readonly size: InputSignal<TRtSkeletonSize> = input<TRtSkeletonSize>('md');\n\n    public readonly width: InputSignal<string> = input<string>('100%');\n\n    public readonly height: InputSignal<string> = input<string>(this.#sizeMap.sm);\n\n    public readonly animation: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(true, {\n        transform: booleanAttribute,\n    });\n\n    @HostBinding('class.rt-skeleton--rectangle')\n    protected get isRectangle(): boolean {\n        return this.shape() === 'rectangle';\n    }\n\n    @HostBinding('class.rt-skeleton--circle')\n    protected get isCircle(): boolean {\n        return this.shape() === 'circle';\n    }\n\n    @HostBinding('class.rt-skeleton--square')\n    protected get isSquare(): boolean {\n        return this.shape() === 'square';\n    }\n\n    @HostBinding('class.rt-skeleton--sm')\n    protected get isSizeSm(): boolean {\n        return this.size() === 'sm';\n    }\n\n    @HostBinding('class.rt-skeleton--md')\n    protected get isSizeMd(): boolean {\n        return this.size() === 'md';\n    }\n\n    @HostBinding('class.rt-skeleton--lg')\n    protected get isSizeLg(): boolean {\n        return this.size() === 'lg';\n    }\n\n    @HostBinding('class.rt-skeleton--animated')\n    protected get isAnimated(): boolean {\n        return this.animation();\n    }\n\n    @HostBinding('style.width')\n    protected get hostWidth(): string {\n        switch (this.shape()) {\n            case 'circle':\n            case 'square':\n                return this.#getSizeValue();\n\n            case 'rectangle':\n            default:\n                return this.width();\n        }\n    }\n\n    @HostBinding('style.height')\n    protected get hostHeight(): string {\n        switch (this.shape()) {\n            case 'circle':\n            case 'square':\n                return this.#getSizeValue();\n\n            case 'rectangle':\n            default:\n                return this.height();\n        }\n    }\n\n    #getSizeValue(): string {\n        return this.#sizeMap[this.size()];\n    }\n}\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-spinner.mjs

@@ -0,0 +1,70 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, input, numberAttribute, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective } from '@rt-tools/core';
+
+const BEM_BLOCK = 'rt-spinner';
+/**
+ * Атомарный rotating-spinner для loading-индикаторов.
+ *
+ * Без новых режимов кольцо рисует сам host: border с одной цветной стороной и вращение, своей
+ * разметки нет. Так спиннер стоит у семи компонентов кита, и их разметка от режимов не меняется.
+ *
+ * Режимы `overlay`, `plate` и вид `arc` рисуют внутреннюю разметку, а host перестаёт быть кольцом:
+ * - `overlay` — спиннер занимает позиционированного родителя целиком и ставит кольцо в центр;
+ *   слой — ступень `sticky`, ниже всего, что открывается поверх страницы;
+ * - `backdrop` — полупрозрачная подложка оверлея, без `overlay` не действует;
+ * - `plate` — круглая плашка с тенью под кольцом;
+ * - `appearance="arc"` — дуга без дорожки, как у Material.
+ *
+ * Анимация уважает `@media (prefers-reduced-motion)` — вращение замедляется.
+ */
+class RtSpinnerComponent {
+    constructor() {
+        /** Кольцо рисуется внутренней разметкой, а не самим host-ом. */
+        this.framed = computed(() => this.overlay() || this.plate() || this.appearance() === 'arc', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "framed" }] : /* istanbul ignore next */ []));
+        this.modifiers = computed(() => ({
+            [`${BEM_BLOCK}--${this.color()}`]: true,
+            [`${BEM_BLOCK}--framed`]: this.framed(),
+            [`${BEM_BLOCK}--overlay`]: this.overlay(),
+            [`${BEM_BLOCK}--backdrop`]: this.overlay() && this.backdrop(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modifiers" }] : /* istanbul ignore next */ []));
+        this.cssDiameter = computed(() => `${this.diameter()}px`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssDiameter" }] : /* istanbul ignore next */ []));
+        /** Диаметр spinner'а в px. Default 32. */
+        this.diameter = input(32, { ...(ngDevMode ? { debugName: "diameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Семантическая палитра. Default `primary`. */
+        this.color = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Вид кольца: `border` — с дорожкой, `arc` — дуга без дорожки. Default `border`. */
+        this.appearance = input('border', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /** Спиннер накрывает позиционированного родителя и стоит в его центре. Default `false`. */
+        this.overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Полупрозрачная подложка оверлея; без `overlay` не действует. Default `false`. */
+        this.backdrop = input(false, { ...(ngDevMode ? { debugName: "backdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Круглая плашка с тенью под кольцом. Default `false`. */
+        this.plate = input(false, { ...(ngDevMode ? { debugName: "plate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSpinnerComponent, isStandalone: true, selector: "rt-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, plate: { classPropertyName: "plate", publicName: "plate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "modifiers()", "style.--rt-spinner-diameter": "cssDiameter()" }, classAttribute: "rt-spinner" }, ngImport: i0, template: "@if (framed()) {\n    <ng-container rtBlock=\"rt-spinner\">\n        @if (plate()) {\n            <span rtElem=\"plate\">\n                <ng-container [ngTemplateOutlet]=\"ring\" />\n            </span>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"ring\" />\n        }\n\n        <ng-template #ring>\n            @if (appearance() === 'arc') {\n                <svg rtElem=\"arc\" viewBox=\"0 0 48 48\" focusable=\"false\" aria-hidden=\"true\">\n                    <circle rtElem=\"arc-circle\" cx=\"24\" cy=\"24\" r=\"20\" />\n                </svg>\n            } @else {\n                <span rtElem=\"ring\"></span>\n            }\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-spinner{--rt-spinner-diameter: 32px;--rt-spinner-border-width: 3px;--rt-spinner-track-color: var(--rt-color-border-subtle);--rt-spinner-progress-color: var(--rt-color-action-primary);--rt-spinner-rotation-duration: 1s;--rt-spinner-rotation-duration-reduced: 4s;--rt-spinner-radius: var(--rt-radius-full);--rt-spinner-overlay-z: var(--rt-z-sticky);--rt-spinner-plate-size: calc(var(--rt-spinner-diameter) + 2 * var(--rt-space-2));--rt-spinner-plate-bg: var(--rt-color-bg-surface);--rt-spinner-plate-shadow: var(--rt-shadow-md);--rt-spinner-plate-radius: var(--rt-radius-full);--rt-spinner-backdrop-bg: color-mix(in srgb, var(--rt-color-bg-subtle) 85%, transparent);--rt-spinner-arc-duration: 1.4s;--rt-spinner-arc-duration-reduced: 5.6s}.rt-spinner,.rt-spinner__ring{display:inline-block;width:var(--rt-spinner-diameter);height:var(--rt-spinner-diameter);box-sizing:border-box;border:var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);border-radius:var(--rt-spinner-radius);border-right-color:var(--rt-spinner-progress-color);animation:rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite}.rt-spinner--primary{--rt-spinner-progress-color: var(--rt-color-action-primary)}.rt-spinner--neutral{--rt-spinner-progress-color: var(--rt-color-text-primary)}.rt-spinner--on-primary{--rt-spinner-track-color: var(--rt-overlay-white-25);--rt-spinner-progress-color: var(--rt-color-action-on-primary)}.rt-spinner--framed{display:inline-flex;width:auto;height:auto;align-items:center;justify-content:center;border:0;border-radius:0;animation:none}.rt-spinner--overlay{position:absolute;z-index:var(--rt-spinner-overlay-z);display:flex;inset:0}.rt-spinner--backdrop{background:var(--rt-spinner-backdrop-bg)}.rt-spinner__plate{display:inline-flex;width:var(--rt-spinner-plate-size);height:var(--rt-spinner-plate-size);align-items:center;justify-content:center;border-radius:var(--rt-spinner-plate-radius);background:var(--rt-spinner-plate-bg);box-shadow:var(--rt-spinner-plate-shadow)}.rt-spinner__arc{display:block;width:var(--rt-spinner-diameter);height:var(--rt-spinner-diameter);animation:rt-spinner-rotate var(--rt-spinner-arc-duration) linear infinite}.rt-spinner__arc-circle{animation:rt-spinner-arc-dash var(--rt-spinner-arc-duration) ease-in-out infinite;fill:none;stroke:var(--rt-spinner-progress-color);stroke-dasharray:89 200;stroke-dashoffset:-35;stroke-linecap:round;stroke-width:4}@keyframes rt-spinner-rotate{to{transform:rotate(1turn)}}@keyframes rt-spinner-arc-dash{0%{stroke-dasharray:89 200;stroke-dashoffset:-35}50%{stroke-dasharray:89 200;stroke-dashoffset:-124}50.01%{stroke-dasharray:1 200;stroke-dashoffset:0}to{stroke-dasharray:89 200;stroke-dashoffset:-35}}@media(prefers-reduced-motion:reduce){.rt-spinner,.rt-spinner__ring{animation-duration:var(--rt-spinner-rotation-duration-reduced)}.rt-spinner__arc,.rt-spinner__arc-circle{animation-duration:var(--rt-spinner-arc-duration-reduced)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, BlockDirective, ElemDirective], host: {
+                        class: BEM_BLOCK,
+                        role: 'status',
+                        'aria-live': 'polite',
+                        '[class]': 'modifiers()',
+                        '[style.--rt-spinner-diameter]': 'cssDiameter()',
+                    }, template: "@if (framed()) {\n    <ng-container rtBlock=\"rt-spinner\">\n        @if (plate()) {\n            <span rtElem=\"plate\">\n                <ng-container [ngTemplateOutlet]=\"ring\" />\n            </span>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"ring\" />\n        }\n\n        <ng-template #ring>\n            @if (appearance() === 'arc') {\n                <svg rtElem=\"arc\" viewBox=\"0 0 48 48\" focusable=\"false\" aria-hidden=\"true\">\n                    <circle rtElem=\"arc-circle\" cx=\"24\" cy=\"24\" r=\"20\" />\n                </svg>\n            } @else {\n                <span rtElem=\"ring\"></span>\n            }\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-spinner{--rt-spinner-diameter: 32px;--rt-spinner-border-width: 3px;--rt-spinner-track-color: var(--rt-color-border-subtle);--rt-spinner-progress-color: var(--rt-color-action-primary);--rt-spinner-rotation-duration: 1s;--rt-spinner-rotation-duration-reduced: 4s;--rt-spinner-radius: var(--rt-radius-full);--rt-spinner-overlay-z: var(--rt-z-sticky);--rt-spinner-plate-size: calc(var(--rt-spinner-diameter) + 2 * var(--rt-space-2));--rt-spinner-plate-bg: var(--rt-color-bg-surface);--rt-spinner-plate-shadow: var(--rt-shadow-md);--rt-spinner-plate-radius: var(--rt-radius-full);--rt-spinner-backdrop-bg: color-mix(in srgb, var(--rt-color-bg-subtle) 85%, transparent);--rt-spinner-arc-duration: 1.4s;--rt-spinner-arc-duration-reduced: 5.6s}.rt-spinner,.rt-spinner__ring{display:inline-block;width:var(--rt-spinner-diameter);height:var(--rt-spinner-diameter);box-sizing:border-box;border:var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);border-radius:var(--rt-spinner-radius);border-right-color:var(--rt-spinner-progress-color);animation:rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite}.rt-spinner--primary{--rt-spinner-progress-color: var(--rt-color-action-primary)}.rt-spinner--neutral{--rt-spinner-progress-color: var(--rt-color-text-primary)}.rt-spinner--on-primary{--rt-spinner-track-color: var(--rt-overlay-white-25);--rt-spinner-progress-color: var(--rt-color-action-on-primary)}.rt-spinner--framed{display:inline-flex;width:auto;height:auto;align-items:center;justify-content:center;border:0;border-radius:0;animation:none}.rt-spinner--overlay{position:absolute;z-index:var(--rt-spinner-overlay-z);display:flex;inset:0}.rt-spinner--backdrop{background:var(--rt-spinner-backdrop-bg)}.rt-spinner__plate{display:inline-flex;width:var(--rt-spinner-plate-size);height:var(--rt-spinner-plate-size);align-items:center;justify-content:center;border-radius:var(--rt-spinner-plate-radius);background:var(--rt-spinner-plate-bg);box-shadow:var(--rt-spinner-plate-shadow)}.rt-spinner__arc{display:block;width:var(--rt-spinner-diameter);height:var(--rt-spinner-diameter);animation:rt-spinner-rotate var(--rt-spinner-arc-duration) linear infinite}.rt-spinner__arc-circle{animation:rt-spinner-arc-dash var(--rt-spinner-arc-duration) ease-in-out infinite;fill:none;stroke:var(--rt-spinner-progress-color);stroke-dasharray:89 200;stroke-dashoffset:-35;stroke-linecap:round;stroke-width:4}@keyframes rt-spinner-rotate{to{transform:rotate(1turn)}}@keyframes rt-spinner-arc-dash{0%{stroke-dasharray:89 200;stroke-dashoffset:-35}50%{stroke-dasharray:89 200;stroke-dashoffset:-124}50.01%{stroke-dasharray:1 200;stroke-dashoffset:0}to{stroke-dasharray:89 200;stroke-dashoffset:-35}}@media(prefers-reduced-motion:reduce){.rt-spinner,.rt-spinner__ring{animation-duration:var(--rt-spinner-rotation-duration-reduced)}.rt-spinner__arc,.rt-spinner__arc-circle{animation-duration:var(--rt-spinner-arc-duration-reduced)}}}\n"] }]
+        }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], plate: [{ type: i0.Input, args: [{ isSignal: true, alias: "plate", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtSpinnerComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-spinner.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-spinner.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/spinner/rt-spinner.component.ts","../../../projects/ui-kit-v2/src/lib/components/spinner/rt-spinner.component.html","../../../projects/ui-kit-v2/src/lib/components/spinner/rt-tools-ui-kit-v2-spinner.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    numberAttribute,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { IRtSpinner } from './rt-spinner.model';\n\nconst BEM_BLOCK: string = 'rt-spinner';\n\n/**\n * Атомарный rotating-spinner для loading-индикаторов.\n *\n * Без новых режимов кольцо рисует сам host: border с одной цветной стороной и вращение, своей\n * разметки нет. Так спиннер стоит у семи компонентов кита, и их разметка от режимов не меняется.\n *\n * Режимы `overlay`, `plate` и вид `arc` рисуют внутреннюю разметку, а host перестаёт быть кольцом:\n * - `overlay` — спиннер занимает позиционированного родителя целиком и ставит кольцо в центр;\n *   слой — ступень `sticky`, ниже всего, что открывается поверх страницы;\n * - `backdrop` — полупрозрачная подложка оверлея, без `overlay` не действует;\n * - `plate` — круглая плашка с тенью под кольцом;\n * - `appearance=\"arc\"` — дуга без дорожки, как у Material.\n *\n * Анимация уважает `@media (prefers-reduced-motion)` — вращение замедляется.\n */\n@Component({\n    selector: 'rt-spinner',\n    templateUrl: './rt-spinner.component.html',\n    styleUrls: ['./rt-spinner.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [NgTemplateOutlet, BlockDirective, ElemDirective],\n    host: {\n        class: BEM_BLOCK,\n        role: 'status',\n        'aria-live': 'polite',\n        '[class]': 'modifiers()',\n        '[style.--rt-spinner-diameter]': 'cssDiameter()',\n    },\n})\nexport class RtSpinnerComponent {\n    /** Кольцо рисуется внутренней разметкой, а не самим host-ом. */\n    protected readonly framed: Signal<boolean> = computed((): boolean => this.overlay() || this.plate() || this.appearance() === 'arc');\n\n    protected readonly modifiers: Signal<Record<string, boolean>> = computed((): Record<string, boolean> => ({\n        [`${BEM_BLOCK}--${this.color()}`]: true,\n        [`${BEM_BLOCK}--framed`]: this.framed(),\n        [`${BEM_BLOCK}--overlay`]: this.overlay(),\n        [`${BEM_BLOCK}--backdrop`]: this.overlay() && this.backdrop(),\n    }));\n\n    protected readonly cssDiameter: Signal<string> = computed((): string => `${this.diameter()}px`);\n\n    /** Диаметр spinner'а в px. Default 32. */\n    public readonly diameter: InputSignalWithTransform<number, NumberInput> = input<number, NumberInput>(32, {\n        transform: numberAttribute,\n    });\n\n    /** Семантическая палитра. Default `primary`. */\n    public readonly color: InputSignal<IRtSpinner.Color> = input<IRtSpinner.Color>('primary');\n\n    /** Вид кольца: `border` — с дорожкой, `arc` — дуга без дорожки. Default `border`. */\n    public readonly appearance: InputSignal<IRtSpinner.Appearance> = input<IRtSpinner.Appearance>('border');\n\n    /** Спиннер накрывает позиционированного родителя и стоит в его центре. Default `false`. */\n    public readonly overlay: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Полупрозрачная подложка оверлея; без `overlay` не действует. Default `false`. */\n    public readonly backdrop: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Круглая плашка с тенью под кольцом. Default `false`. */\n    public readonly plate: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n}\n","@if (framed()) {\n    <ng-container rtBlock=\"rt-spinner\">\n        @if (plate()) {\n            <span rtElem=\"plate\">\n                <ng-container [ngTemplateOutlet]=\"ring\" />\n            </span>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"ring\" />\n        }\n\n        <ng-template #ring>\n            @if (appearance() === 'arc') {\n                <svg rtElem=\"arc\" viewBox=\"0 0 48 48\" focusable=\"false\" aria-hidden=\"true\">\n                    <circle rtElem=\"arc-circle\" cx=\"24\" cy=\"24\" r=\"20\" />\n                </svg>\n            } @else {\n                <span rtElem=\"ring\"></span>\n            }\n        </ng-template>\n    </ng-container>\n}\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-split-button.mjs

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { viewChild, computed, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective } from '@rt-tools/core';
+import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
+import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
+import { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-split-button';
+/**
+ * Кнопка с раздельным действием: основной CTA («лицо») + каретка, по клику на
+ * которую раскрывается меню второстепенных действий. Применяется, когда у
+ * сценария ДВА позитивных действия и нужно явно выделить главное, не пряча
+ * второстепенное (например, футер формы: лицо «Сохранить», в меню
+ * «Сохранить черновик»).
+ *
+ * Меню — поверх `[rtPopover]` (CDK Overlay): авто-flip у края, outside-click и
+ * Escape закрывают, не режется `overflow: hidden` предками (футер aside'а).
+ * Лицо и каретка — две `[rtButton]`, визуально сшитые в один контрол.
+ *
+ * `ViewEncapsulation.None` — стили префиксованы `.rt-split-button`.
+ */
+class RtSplitButtonComponent {
+    constructor() {
+        this.#t_uiMoreActions = rtKitLabel('uiMoreActions');
+        this.menu = viewChild(RtPopoverDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        /** Своё имя каретки важнее умолчания: экран знает, что за действия в меню */
+        this.menuAriaText = computed(() => this.menuAriaLabel() || this.#t_uiMoreActions(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuAriaText" }] : /* istanbul ignore next */ []));
+        /** Подпись основного действия («лицо»). */
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Пункты выпадающего меню второстепенных действий. */
+        this.menuItems = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        /** Семантическая палитра лица и каретки. */
+        this.theme = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        /** Размер контрола. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Доступное имя для каретки (icon-only кнопка открытия меню). */
+        this.menuAriaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Загрузка: спиннер на лице + блокировка обеих кнопок. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Нативное отключение обеих кнопок. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Клик по лицу (основное действие). */
+        this.faceClick = output();
+        /** Выбор пункта меню — эмитит `value` выбранного пункта. */
+        this.itemSelect = output();
+    }
+    #t_uiMoreActions;
+    onFace() {
+        if (this.disabled() || this.loading()) {
+            return;
+        }
+        this.faceClick.emit();
+    }
+    onToggle() {
+        if (this.disabled() || this.loading()) {
+            return;
+        }
+        this.menu()?.toggle();
+    }
+    onItem(item) {
+        if (item.disabled) {
+            return;
+        }
+        this.menu()?.close();
+        this.itemSelect.emit(item.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSplitButtonComponent, isStandalone: true, selector: "rt-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { faceClick: "faceClick", itemSelect: "itemSelect" }, host: { properties: { "class.rt-split-button--open": "menu()?.isOpen()" }, classAttribute: "rt-split-button" }, viewQueries: [{ propertyName: "menu", first: true, predicate: RtPopoverDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-split-button\">\n    <!-- Popover \u0432\u0438\u0441\u0438\u0442 \u043D\u0430 \u0432\u0441\u0451\u043C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0435 (\u0430 \u043D\u0435 \u043D\u0430 \u0443\u0437\u043A\u043E\u0439 \u043A\u0430\u0440\u0435\u0442\u043A\u0435): width=\"trigger\"\n         \u0434\u0435\u043B\u0430\u0435\u0442 \u043C\u0435\u043D\u044E \u043F\u043E \u0448\u0438\u0440\u0438\u043D\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, originX:start \u2014 \u0440\u043E\u0432\u043D\u043E \u043F\u043E\u0434 \u0435\u0451 \u043B\u0435\u0432\u044B\u043C \u043A\u0440\u0430\u0435\u043C,\n         \u0431\u0435\u0437 \u0433\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0432\u044B\u043B\u0435\u0442\u0430 \u0437\u0430 \u044D\u043A\u0440\u0430\u043D. \u0422\u0440\u0438\u0433\u0433\u0435\u0440 manual \u2014 \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043A\u0430\u0440\u0435\u0442\u043A\u0430. -->\n    <div\n        rtElem=\"control\"\n        rtPopoverTrigger=\"manual\"\n        rtPopoverWidth=\"trigger\"\n        rtPopoverPanelClass=\"rt-split-button-menu-panel\"\n        [rtPopover]=\"menuTpl\"\n        [rtPopoverOffsetY]=\"6\"\n        [rtPopoverDisabled]=\"disabled() || loading()\">\n        <button\n            rtButton\n            rtElem=\"face\"\n            qa-dataid=\"split-button-face\"\n            type=\"button\"\n            [label]=\"label()\"\n            [theme]=\"theme()\"\n            [size]=\"size()\"\n            [attr.aria-label]=\"label()\"\n            [loading]=\"loading()\"\n            [disabled]=\"disabled()\"\n            (click)=\"onFace()\"></button>\n\n        <button\n            rtButton\n            rtElem=\"toggle\"\n            qa-dataid=\"split-button-toggle\"\n            type=\"button\"\n            icon=\"chevron-down\"\n            [theme]=\"theme()\"\n            [size]=\"size()\"\n            [attr.aria-label]=\"menuAriaText()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onToggle()\"></button>\n    </div>\n\n    <ng-template #menuTpl>\n        <ul rtElem=\"menu\" qa-dataid=\"split-button-menu\" role=\"menu\">\n            @for (item of menuItems(); track item.value) {\n                <li role=\"none\">\n                    <button\n                        rtButton\n                        rtElem=\"menu-item\"\n                        qa-dataid=\"split-button-menu-item\"\n                        type=\"button\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        size=\"sm\"\n                        role=\"menuitem\"\n                        [attr.data-value]=\"item.value\"\n                        [label]=\"item.label\"\n                        [icon]=\"item.icon ?? null\"\n                        [attr.aria-label]=\"item.label\"\n                        [disabled]=\"item.disabled ?? false\"\n                        (click)=\"onItem(item)\"></button>\n                </li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-split-button{--rt-split-button-divider-width: var(--rt-border-width-thin);--rt-split-button-caret-transition-duration: var(--rt-duration-fast);display:inline-flex}.rt-split-button[data-rt-radius=none]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-none)}.rt-split-button[data-rt-radius=xs]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-xs)}.rt-split-button[data-rt-radius=sm]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-sm)}.rt-split-button[data-rt-radius=ms]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-ms)}.rt-split-button[data-rt-radius=md]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-md)}.rt-split-button[data-rt-radius=lg]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-lg)}.rt-split-button[data-rt-radius=xl]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-xl)}.rt-split-button[data-rt-radius=\"2xl\"]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-2xl)}.rt-split-button[data-rt-radius=full]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-full)}.rt-split-button__control{display:inline-flex;width:100%;align-items:stretch}.rt-split-button__face.rt-button{border-end-end-radius:0;border-start-end-radius:0}.rt-split-button__toggle.rt-button{min-width:0;border-end-start-radius:0;border-inline-start:var(--rt-split-button-divider-width) solid color-mix(in srgb,var(--rt-color-text-inverse) 24%,transparent);border-start-start-radius:0;padding-inline:var(--rt-space-sm)}.rt-split-button__toggle.rt-button .rt-button__icon{fill:currentcolor;transition:transform var(--rt-split-button-caret-transition-duration) ease}.rt-split-button--open .rt-split-button__toggle.rt-button .rt-button__icon{transform:rotate(180deg)}.rt-split-button__menu{--rt-split-button-menu-radius: var(--rt-radius-md);--rt-split-button-menu-border-width: var(--rt-border-width-thin);--rt-split-button-menu-shadow: var(--rt-shadow-lg);display:flex;width:100%;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2xs);border:var(--rt-split-button-menu-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-split-button-menu-radius);margin:0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-split-button-menu-shadow);gap:var(--rt-space-2xs);list-style:none}.rt-split-button__menu-item.rt-button{overflow:hidden;width:100%;justify-content:flex-start}.rt-split-button__menu-item.rt-button .rt-button__label{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis}}\n"], dependencies: [{ kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtButtonDirective, RtPopoverDirective, BlockDirective, ElemDirective], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-split-button--open]': 'menu()?.isOpen()',
+                    }, template: "<ng-container rtBlock=\"rt-split-button\">\n    <!-- Popover \u0432\u0438\u0441\u0438\u0442 \u043D\u0430 \u0432\u0441\u0451\u043C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0435 (\u0430 \u043D\u0435 \u043D\u0430 \u0443\u0437\u043A\u043E\u0439 \u043A\u0430\u0440\u0435\u0442\u043A\u0435): width=\"trigger\"\n         \u0434\u0435\u043B\u0430\u0435\u0442 \u043C\u0435\u043D\u044E \u043F\u043E \u0448\u0438\u0440\u0438\u043D\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, originX:start \u2014 \u0440\u043E\u0432\u043D\u043E \u043F\u043E\u0434 \u0435\u0451 \u043B\u0435\u0432\u044B\u043C \u043A\u0440\u0430\u0435\u043C,\n         \u0431\u0435\u0437 \u0433\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0432\u044B\u043B\u0435\u0442\u0430 \u0437\u0430 \u044D\u043A\u0440\u0430\u043D. \u0422\u0440\u0438\u0433\u0433\u0435\u0440 manual \u2014 \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043A\u0430\u0440\u0435\u0442\u043A\u0430. -->\n    <div\n        rtElem=\"control\"\n        rtPopoverTrigger=\"manual\"\n        rtPopoverWidth=\"trigger\"\n        rtPopoverPanelClass=\"rt-split-button-menu-panel\"\n        [rtPopover]=\"menuTpl\"\n        [rtPopoverOffsetY]=\"6\"\n        [rtPopoverDisabled]=\"disabled() || loading()\">\n        <button\n            rtButton\n            rtElem=\"face\"\n            qa-dataid=\"split-button-face\"\n            type=\"button\"\n            [label]=\"label()\"\n            [theme]=\"theme()\"\n            [size]=\"size()\"\n            [attr.aria-label]=\"label()\"\n            [loading]=\"loading()\"\n            [disabled]=\"disabled()\"\n            (click)=\"onFace()\"></button>\n\n        <button\n            rtButton\n            rtElem=\"toggle\"\n            qa-dataid=\"split-button-toggle\"\n            type=\"button\"\n            icon=\"chevron-down\"\n            [theme]=\"theme()\"\n            [size]=\"size()\"\n            [attr.aria-label]=\"menuAriaText()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onToggle()\"></button>\n    </div>\n\n    <ng-template #menuTpl>\n        <ul rtElem=\"menu\" qa-dataid=\"split-button-menu\" role=\"menu\">\n            @for (item of menuItems(); track item.value) {\n                <li role=\"none\">\n                    <button\n                        rtButton\n                        rtElem=\"menu-item\"\n                        qa-dataid=\"split-button-menu-item\"\n                        type=\"button\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        size=\"sm\"\n                        role=\"menuitem\"\n                        [attr.data-value]=\"item.value\"\n                        [label]=\"item.label\"\n                        [icon]=\"item.icon ?? null\"\n                        [attr.aria-label]=\"item.label\"\n                        [disabled]=\"item.disabled ?? false\"\n                        (click)=\"onItem(item)\"></button>\n                </li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-split-button{--rt-split-button-divider-width: var(--rt-border-width-thin);--rt-split-button-caret-transition-duration: var(--rt-duration-fast);display:inline-flex}.rt-split-button[data-rt-radius=none]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-none)}.rt-split-button[data-rt-radius=xs]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-xs)}.rt-split-button[data-rt-radius=sm]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-sm)}.rt-split-button[data-rt-radius=ms]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-ms)}.rt-split-button[data-rt-radius=md]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-md)}.rt-split-button[data-rt-radius=lg]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-lg)}.rt-split-button[data-rt-radius=xl]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-xl)}.rt-split-button[data-rt-radius=\"2xl\"]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-2xl)}.rt-split-button[data-rt-radius=full]>.rt-split-button__control>.rt-button{--rt-btn-radius: var(--rt-radius-full)}.rt-split-button__control{display:inline-flex;width:100%;align-items:stretch}.rt-split-button__face.rt-button{border-end-end-radius:0;border-start-end-radius:0}.rt-split-button__toggle.rt-button{min-width:0;border-end-start-radius:0;border-inline-start:var(--rt-split-button-divider-width) solid color-mix(in srgb,var(--rt-color-text-inverse) 24%,transparent);border-start-start-radius:0;padding-inline:var(--rt-space-sm)}.rt-split-button__toggle.rt-button .rt-button__icon{fill:currentcolor;transition:transform var(--rt-split-button-caret-transition-duration) ease}.rt-split-button--open .rt-split-button__toggle.rt-button .rt-button__icon{transform:rotate(180deg)}.rt-split-button__menu{--rt-split-button-menu-radius: var(--rt-radius-md);--rt-split-button-menu-border-width: var(--rt-border-width-thin);--rt-split-button-menu-shadow: var(--rt-shadow-lg);display:flex;width:100%;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2xs);border:var(--rt-split-button-menu-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-split-button-menu-radius);margin:0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-split-button-menu-shadow);gap:var(--rt-space-2xs);list-style:none}.rt-split-button__menu-item.rt-button{overflow:hidden;width:100%;justify-content:flex-start}.rt-split-button__menu-item.rt-button .rt-button__label{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis}}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], faceClick: [{ type: i0.Output, args: ["faceClick"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtSplitButtonComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-split-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-split-button.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/split-button/rt-split-button.component.ts","../../../projects/ui-kit-v2/src/lib/components/split-button/rt-split-button.component.html","../../../projects/ui-kit-v2/src/lib/components/split-button/rt-tools-ui-kit-v2-split-button.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    viewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtSplitButton } from './rt-split-button.model';\n\nconst BEM_BLOCK: string = 'rt-split-button';\n\n/**\n * Кнопка с раздельным действием: основной CTA («лицо») + каретка, по клику на\n * которую раскрывается меню второстепенных действий. Применяется, когда у\n * сценария ДВА позитивных действия и нужно явно выделить главное, не пряча\n * второстепенное (например, футер формы: лицо «Сохранить», в меню\n * «Сохранить черновик»).\n *\n * Меню — поверх `[rtPopover]` (CDK Overlay): авто-flip у края, outside-click и\n * Escape закрывают, не режется `overflow: hidden` предками (футер aside'а).\n * Лицо и каретка — две `[rtButton]`, визуально сшитые в один контрол.\n *\n * `ViewEncapsulation.None` — стили префиксованы `.rt-split-button`.\n */\n@Component({\n    selector: 'rt-split-button',\n    templateUrl: './rt-split-button.component.html',\n    styleUrl: './rt-split-button.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [RtButtonDirective, RtPopoverDirective, BlockDirective, ElemDirective],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-split-button--open]': 'menu()?.isOpen()',\n    },\n})\nexport class RtSplitButtonComponent {\n    readonly #t_uiMoreActions: Signal<string> = rtKitLabel('uiMoreActions');\n\n    protected readonly menu: Signal<RtPopoverDirective | undefined> = viewChild(RtPopoverDirective);\n\n    /** Своё имя каретки важнее умолчания: экран знает, что за действия в меню */\n    protected readonly menuAriaText: Signal<string> = computed((): string => this.menuAriaLabel() || this.#t_uiMoreActions());\n\n    /** Подпись основного действия («лицо»). */\n    public readonly label: InputSignal<string> = input.required<string>();\n\n    /** Пункты выпадающего меню второстепенных действий. */\n    public readonly menuItems: InputSignal<readonly IRtSplitButton.MenuItem[]> = input.required<readonly IRtSplitButton.MenuItem[]>();\n\n    /** Семантическая палитра лица и каретки. */\n    public readonly theme: InputSignal<IRtSplitButton.Theme> = input<IRtSplitButton.Theme>('primary');\n\n    /** Размер контрола. */\n    public readonly size: InputSignal<IRtSplitButton.Size> = input<IRtSplitButton.Size>('md');\n\n    /** Доступное имя для каретки (icon-only кнопка открытия меню). */\n    public readonly menuAriaLabel: InputSignal<string> = input<string>('');\n\n    /** Загрузка: спиннер на лице + блокировка обеих кнопок. */\n    public readonly loading: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Нативное отключение обеих кнопок. */\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Клик по лицу (основное действие). */\n    public readonly faceClick: OutputEmitterRef<void> = output<void>();\n\n    /** Выбор пункта меню — эмитит `value` выбранного пункта. */\n    public readonly itemSelect: OutputEmitterRef<string> = output<string>();\n\n    protected onFace(): void {\n        if (this.disabled() || this.loading()) {\n            return;\n        }\n        this.faceClick.emit();\n    }\n\n    protected onToggle(): void {\n        if (this.disabled() || this.loading()) {\n            return;\n        }\n        this.menu()?.toggle();\n    }\n\n    protected onItem(item: IRtSplitButton.MenuItem): void {\n        if (item.disabled) {\n            return;\n        }\n        this.menu()?.close();\n        this.itemSelect.emit(item.value);\n    }\n}\n","<ng-container rtBlock=\"rt-split-button\">\n    <!-- Popover висит на всём контроле (а не на узкой каретке): width=\"trigger\"\n         делает меню по ширине кнопки, originX:start — ровно под её левым краем,\n         без горизонтального вылета за экран. Триггер manual — открывает каретка. -->\n    <div\n        rtElem=\"control\"\n        rtPopoverTrigger=\"manual\"\n        rtPopoverWidth=\"trigger\"\n        rtPopoverPanelClass=\"rt-split-button-menu-panel\"\n        [rtPopover]=\"menuTpl\"\n        [rtPopoverOffsetY]=\"6\"\n        [rtPopoverDisabled]=\"disabled() || loading()\">\n        <button\n            rtButton\n            rtElem=\"face\"\n            qa-dataid=\"split-button-face\"\n            type=\"button\"\n            [label]=\"label()\"\n            [theme]=\"theme()\"\n            [size]=\"size()\"\n            [attr.aria-label]=\"label()\"\n            [loading]=\"loading()\"\n            [disabled]=\"disabled()\"\n            (click)=\"onFace()\"></button>\n\n        <button\n            rtButton\n            rtElem=\"toggle\"\n            qa-dataid=\"split-button-toggle\"\n            type=\"button\"\n            icon=\"chevron-down\"\n            [theme]=\"theme()\"\n            [size]=\"size()\"\n            [attr.aria-label]=\"menuAriaText()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onToggle()\"></button>\n    </div>\n\n    <ng-template #menuTpl>\n        <ul rtElem=\"menu\" qa-dataid=\"split-button-menu\" role=\"menu\">\n            @for (item of menuItems(); track item.value) {\n                <li role=\"none\">\n                    <button\n                        rtButton\n                        rtElem=\"menu-item\"\n                        qa-dataid=\"split-button-menu-item\"\n                        type=\"button\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        size=\"sm\"\n                        role=\"menuitem\"\n                        [attr.data-value]=\"item.value\"\n                        [label]=\"item.label\"\n                        [icon]=\"item.icon ?? null\"\n                        [attr.aria-label]=\"item.label\"\n                        [disabled]=\"item.disabled ?? false\"\n                        (click)=\"onItem(item)\"></button>\n                </li>\n            }\n        </ul>\n    </ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,147 @@
+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';
+const DIRECTION_ICONS = Object.freeze({
+    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';
+}
+/**
+ * Нулевая база — «—»: «+100 %» от нуля вводит в заблуждение, «∞» нечитаемо.
+ * Дробная часть — через запятую, как и остальные проценты в интерфейсе: кит
+ * форматирует сам, потому что не может зависеть от логики приложений.
+ */
+function percentText(percent) {
+    if (percent === null) {
+        return '—';
+    }
+    const sign = percent > 0 ? '+' : '';
+    return `${sign}${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", "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,
+            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.
+ */
+
+export { RtStatTileComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-stat-tile.mjs.map