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

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

@@ -0,0 +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":";;;;;;AASA,MAAM,SAAS,GAAW,cAAc;AAYxC,MAAM,eAAe,GAA0D,MAAM,CAAC,MAAM,CAAC;AACzF,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,OAAO,EAAE,OAAO;AACnB,CAAA,CAAC;AAEF,SAAS,WAAW,CAAC,OAAsB,EAAA;AACvC,IAAA,IAAI,OAAO,KAAK,IAAI,EAAE;AAClB,QAAA,OAAO,SAAS;IACpB;AACA,IAAA,IAAI,OAAO,GAAG,CAAC,EAAE;AACb,QAAA,OAAO,IAAI;IACf;IACA,OAAO,OAAO,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM;AACxC;AAEA;;;;AAIG;AACH,SAAS,WAAW,CAAC,OAAsB,EAAA;AACvC,IAAA,IAAI,OAAO,KAAK,IAAI,EAAE;AAClB,QAAA,OAAO,GAAG;IACd;AACA,IAAA,MAAM,IAAI,GAAW,OAAO,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE;AAC3C,IAAA,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI;AAC1D;AAEA,SAAS,QAAQ,CAAC,GAAW,EAAE,KAA+B,EAAA;IAC1D,IAAI,CAAC,KAAK,EAAE;AACR,QAAA,OAAO,IAAI;IACf;IACA,MAAM,SAAS,GAA0B,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;IACnE,OAAO;QACH,GAAG;QACH,SAAS;QACT,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,QAAA,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;AAChC,QAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,EAAE;AAC9B,QAAA,IAAI,EAAE,eAAe,CAAC,SAAS,CAAC;KACnC;AACL;AAEA;;;;;;;;;;AAUG;MAkBU,mBAAmB,CAAA;AAjBhC,IAAA,WAAA,GAAA;AAkBI;;;;;AAKG;AACM,QAAA,IAAA,CAAA,eAAe,GAAmC,QAAQ,CAAC,OAA+B;YAC/F,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,QAAQ,IAAI,EAAE;SAC7C,CAAC;4FAAC;QAEM,IAAA,CAAA,aAAa,GAAmB,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC;AAEvF;;;;AAIG;AACgB,QAAA,IAAA,CAAA,CAAC,GAA2B,MAAM,CAAC,aAAa,CAAC;AAEjD,QAAA,IAAA,CAAA,YAAY,GAA6B,QAAQ,CAAC,MAAwB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;yFAAC;;AAGlH,QAAA,IAAA,CAAA,SAAS,GAA6B,QAAQ,CAAC,MAAwB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;sFAAC;AAEpI;;;;AAIG;QACgB,IAAA,CAAA,YAAY,GAAmB,QAAQ,CAAC,OAAe,IAAI,CAAC,YAAY,EAAE,EAAE,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC;yFAAC;;QAGrH,IAAA,CAAA,KAAK,GAAwB,KAAK,CAAC,QAAQ;kFAAU;;QAGrD,IAAA,CAAA,KAAK,GAAwB,KAAK,CAAC,QAAQ;kFAAU;;QAGrD,IAAA,CAAA,SAAS,GAA+B,KAAK,CAAgB,IAAI;sFAAC;;QAGlE,IAAA,CAAA,YAAY,GAA0C,KAAK,CAA2B,IAAI;yFAAC;;QAG3F,IAAA,CAAA,cAAc,GAA0C,KAAK,CAA2B,IAAI;2FAAC;;QAG7F,IAAA,CAAA,IAAI,GAA+B,KAAK,CAAgB,IAAI;iFAAC;AAQhF,IAAA;AAvDG;;;;;AAKG;AACM,IAAA,eAAe;AAIf,IAAA,aAAa;AAuCtB,IAAA,aAAa,CAAC,KAA+B,EAAA;QACzC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;AAClC,YAAA,OAAO,IAAI;QACf;AACA,QAAA,OAAO,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;IACrC;8GAvDS,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,q4BC9FhC,onDA2CA,EAAA,MAAA,EAAA,CAAA,smEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;AD0CQ,gBAAA,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,wEACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMP,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAjB/B,SAAS;+BACI,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,eAAe;wBACf,cAAc;wBACd,aAAa;wBACb,YAAY;qBACf,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,onDAAA,EAAA,MAAA,EAAA,CAAA,smEAAA,CAAA,EAAA;;;AE5FL;;AAEG;;;;"}

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

@@ -0,0 +1,117 @@
+import * as i0 from '@angular/core';
+import { computed, input, numberAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-stepper';
+/**
+ * Линейный прогресс-степпер: тонкая полоса, набор точек и подпись
+ * текущего шага. Шаги задаются через input `steps` (массив `IRtStepper.Step`
+ * со связкой label + description), активный шаг — через `currentIndex`.
+ *
+ * Активная точка увеличена и подсвечивается янтарным; над ней висит подпись
+ * текущего шага (тоже янтарная, выравнивается по краю на крайних шагах).
+ * Пройденные точки и заполненная часть полосы — progress-цвет; будущие точки
+ * и трек — приглушённый цвет (в dark-теме оба ухода от яркого синего). Под
+ * полосой — описание текущего шага, многоабзацное (`\n\n`). Сам список названий
+ * шагов на ui не выводится — публичен только текущий, остальные читаются
+ * скринридером через aria.
+ */
+class RtStepperComponent {
+    constructor() {
+        /**
+         * Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за
+         * границы; полоса и якорь подписи это уже переживали, а вот объявление для
+         * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре
+         * оказывалось `aria-valuenow="100"` при `aria-valuemax="3"`, а подпись шага
+         * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не
+         * могли разойтись.
+         */
+        this.#safeIndex = computed(() => {
+            const total = this.steps().length;
+            return Math.max(0, Math.min(this.currentIndex(), total - 1));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#safeIndex" }] : /* istanbul ignore next */ []));
+        this.currentStep = computed(() => this.steps()[this.#safeIndex()] ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+        /** Номер текущего шага для скринридера: `0`, когда шагов нет вовсе. */
+        this.currentStepNumber = computed(() => (this.steps().length === 0 ? 0 : this.#safeIndex() + 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentStepNumber" }] : /* istanbul ignore next */ []));
+        /**
+         * Доля заполненной полосы от 0 до 100. На один шаг и меньше — 0%, иначе
+         * `idx / (total - 1)`. Без clamp в шаблоне получаем переполнение если
+         * передадут `currentIndex > total`.
+         */
+        this.progressPercent = computed(() => {
+            const total = this.steps().length;
+            if (total <= 1) {
+                return 0;
+            }
+            return (this.#safeIndex() / (total - 1)) * 100;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []));
+        this.totalSteps = computed(() => this.steps().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
+        /**
+         * Якорь подписи текущего шага: подпись висит над активной точкой и не должна
+         * вылезать за края рельсы. Первый шаг — выравнивание по левому краю точки,
+         * последний — по правому, остальные центрируются над точкой.
+         */
+        this.labelAnchor = computed(() => {
+            const total = this.steps().length;
+            const idx = this.#safeIndex();
+            if (idx <= 0) {
+                return 'start';
+            }
+            if (idx >= total - 1) {
+                return 'end';
+            }
+            return 'center';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelAnchor" }] : /* istanbul ignore next */ []));
+        /** Абзацы описания текущего шага: бэк отдаёт плоскую строку, делим по `\n\n`. */
+        this.descriptionParagraphs = computed(() => {
+            const text = this.currentStep()?.description ?? '';
+            if (text.length === 0) {
+                return [];
+            }
+            return text.split('\n\n');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionParagraphs" }] : /* istanbul ignore next */ []));
+        this.steps = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.currentIndex = input(0, { ...(ngDevMode ? { debugName: "currentIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    }
+    /**
+     * Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за
+     * границы; полоса и якорь подписи это уже переживали, а вот объявление для
+     * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре
+     * оказывалось `aria-valuenow="100"` при `aria-valuemax="3"`, а подпись шага
+     * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не
+     * могли разойтись.
+     */
+    #safeIndex;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtStepperComponent, isStandalone: true, selector: "rt-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-stepper" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stepper{display:block}rt-stepper .rt-stepper{--rt-stepper-radius: var(--rt-radius-full);--rt-stepper-point-shadow: var(--rt-shadow-step-indicator);--rt-stepper-transition-duration: var(--rt-duration-fast);display:flex;flex-direction:column;gap:var(--rt-space-4)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-stepper-transition-duration) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-stepper-radius);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-stepper-radius);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-stepper-transition-duration) ease-out,block-size var(--rt-stepper-transition-duration) ease-out,background var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-stepper-point-shadow);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2)}rt-stepper[data-rt-radius=none]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-none)}rt-stepper[data-rt-radius=xs]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xs)}rt-stepper[data-rt-radius=sm]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-sm)}rt-stepper[data-rt-radius=ms]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-ms)}rt-stepper[data-rt-radius=md]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-md)}rt-stepper[data-rt-radius=lg]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-lg)}rt-stepper[data-rt-radius=xl]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xl)}rt-stepper[data-rt-radius=\"2xl\"]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-2xl)}rt-stepper[data-rt-radius=full]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                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: RtStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-stepper{display:block}rt-stepper .rt-stepper{--rt-stepper-radius: var(--rt-radius-full);--rt-stepper-point-shadow: var(--rt-shadow-step-indicator);--rt-stepper-transition-duration: var(--rt-duration-fast);display:flex;flex-direction:column;gap:var(--rt-space-4)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-stepper-transition-duration) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-stepper-radius);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-stepper-radius);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-stepper-transition-duration) ease-out,block-size var(--rt-stepper-transition-duration) ease-out,background var(--rt-stepper-transition-duration) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-stepper-point-shadow);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2)}rt-stepper[data-rt-radius=none]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-none)}rt-stepper[data-rt-radius=xs]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xs)}rt-stepper[data-rt-radius=sm]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-sm)}rt-stepper[data-rt-radius=ms]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-ms)}rt-stepper[data-rt-radius=md]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-md)}rt-stepper[data-rt-radius=lg]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-lg)}rt-stepper[data-rt-radius=xl]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-xl)}rt-stepper[data-rt-radius=\"2xl\"]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-2xl)}rt-stepper[data-rt-radius=full]>.rt-stepper{--rt-stepper-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtStepperComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-stepper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-stepper.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/stepper/rt-stepper.component.ts","../../../projects/ui-kit-v2/src/lib/components/stepper/rt-stepper.component.html","../../../projects/ui-kit-v2/src/lib/components/stepper/rt-tools-ui-kit-v2-stepper.ts"],"sourcesContent":["import {\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, ModDirective } from '@rt-tools/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtStepper } from './rt-stepper.model';\n\nconst BEM_BLOCK: string = 'rt-stepper';\n\n/**\n * Линейный прогресс-степпер: тонкая полоса, набор точек и подпись\n * текущего шага. Шаги задаются через input `steps` (массив `IRtStepper.Step`\n * со связкой label + description), активный шаг — через `currentIndex`.\n *\n * Активная точка увеличена и подсвечивается янтарным; над ней висит подпись\n * текущего шага (тоже янтарная, выравнивается по краю на крайних шагах).\n * Пройденные точки и заполненная часть полосы — progress-цвет; будущие точки\n * и трек — приглушённый цвет (в dark-теме оба ухода от яркого синего). Под\n * полосой — описание текущего шага, многоабзацное (`\\n\\n`). Сам список названий\n * шагов на ui не выводится — публичен только текущий, остальные читаются\n * скринридером через aria.\n */\n@Component({\n    selector: 'rt-stepper',\n    templateUrl: './rt-stepper.component.html',\n    styleUrl: './rt-stepper.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtStepperComponent {\n    /**\n     * Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за\n     * границы; полоса и якорь подписи это уже переживали, а вот объявление для\n     * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре\n     * оказывалось `aria-valuenow=\"100\"` при `aria-valuemax=\"3\"`, а подпись шага\n     * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не\n     * могли разойтись.\n     */\n    readonly #safeIndex: Signal<number> = computed((): number => {\n        const total: number = this.steps().length;\n        return Math.max(0, Math.min(this.currentIndex(), total - 1));\n    });\n\n    protected readonly currentStep: Signal<IRtStepper.Step | null> = computed(\n        (): IRtStepper.Step | null => this.steps()[this.#safeIndex()] ?? null\n    );\n\n    /** Номер текущего шага для скринридера: `0`, когда шагов нет вовсе. */\n    protected readonly currentStepNumber: Signal<number> = computed((): number => (this.steps().length === 0 ? 0 : this.#safeIndex() + 1));\n\n    /**\n     * Доля заполненной полосы от 0 до 100. На один шаг и меньше — 0%, иначе\n     * `idx / (total - 1)`. Без clamp в шаблоне получаем переполнение если\n     * передадут `currentIndex > total`.\n     */\n    protected readonly progressPercent: Signal<number> = computed((): number => {\n        const total: number = this.steps().length;\n        if (total <= 1) {\n            return 0;\n        }\n        return (this.#safeIndex() / (total - 1)) * 100;\n    });\n\n    protected readonly totalSteps: Signal<number> = computed((): number => this.steps().length);\n\n    /**\n     * Якорь подписи текущего шага: подпись висит над активной точкой и не должна\n     * вылезать за края рельсы. Первый шаг — выравнивание по левому краю точки,\n     * последний — по правому, остальные центрируются над точкой.\n     */\n    protected readonly labelAnchor: Signal<'start' | 'center' | 'end'> = computed((): 'start' | 'center' | 'end' => {\n        const total: number = this.steps().length;\n        const idx: number = this.#safeIndex();\n        if (idx <= 0) {\n            return 'start';\n        }\n        if (idx >= total - 1) {\n            return 'end';\n        }\n        return 'center';\n    });\n\n    /** Абзацы описания текущего шага: бэк отдаёт плоскую строку, делим по `\\n\\n`. */\n    protected readonly descriptionParagraphs: Signal<readonly string[]> = computed((): readonly string[] => {\n        const text: string = this.currentStep()?.description ?? '';\n        if (text.length === 0) {\n            return [];\n        }\n        return text.split('\\n\\n');\n    });\n\n    public readonly steps: InputSignal<readonly IRtStepper.Step[]> = input<readonly IRtStepper.Step[]>([]);\n\n    public readonly currentIndex: InputSignalWithTransform<number, number | string> = input<number, number | string>(0, {\n        transform: numberAttribute,\n    });\n}\n","@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}