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

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

@@ -1,117 +1,151 @@
-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.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, numberAttribute } 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";
+var RtStepperComponent = class RtStepperComponent {
+	constructor() {
+		this.#safeIndex = computed(() => {
+			const total = this.steps().length;
+			return Math.max(0, Math.min(this.currentIndex(), total - 1));
+		}, ...ngDevMode ? [{ debugName: "#safeIndex" }] : /* istanbul ignore next */ []);
+		this.currentStep = computed(() => this.steps()[this.#safeIndex()] ?? null, ...ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []);
+		this.currentStepNumber = computed(() => this.steps().length === 0 ? 0 : this.#safeIndex() + 1, ...ngDevMode ? [{ debugName: "currentStepNumber" }] : /* istanbul ignore next */ []);
+		this.progressPercent = computed(() => {
+			const total = this.steps().length;
+			if (total <= 1) return 0;
+			return this.#safeIndex() / (total - 1) * 100;
+		}, ...ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []);
+		this.totalSteps = computed(() => this.steps().length, ...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";
+		}, ...ngDevMode ? [{ debugName: "labelAnchor" }] : /* istanbul ignore next */ []);
+		this.descriptionParagraphs = computed(() => {
+			const text = this.currentStep()?.description ?? "";
+			if (text.length === 0) return [];
+			return text.split("\n\n");
+		}, ...ngDevMode ? [{ debugName: "descriptionParagraphs" }] : /* istanbul ignore next */ []);
+		this.steps = input([], ...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+		this.currentIndex = input(0, {
+			...ngDevMode ? { debugName: "currentIndex" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+	}
+	#safeIndex;
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtStepperComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtStepperComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-stepper",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				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
+			}]
+		}]
+	}
+});
 export { RtStepperComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-stepper.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-stepper.mjs.map

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

@@ -1 +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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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-stepper.mjs","names":[],"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"],"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"],"mappings":"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"}