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

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

@@ -0,0 +1,122 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, signal, computed, input, booleanAttribute, output, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-tag';
+/** Ступень значка по ступени пилюли. `md` оставляет значок таким, каким он был до ступеней. */
+const ICON_BY_SIZE = { sm: 'xs', md: 'sm', lg: 'md' };
+/**
+ * Status/label pill для отображения статусов и счётчиков.
+ * Поддерживает 6 severity-вариантов (`info` / `success` / `warning` / `danger` /
+ * `secondary` / `neutral`), любой шаг скругления входом `radius` и опциональный close-control
+ * (рендерит `rt-icon-button` с иконкой `ico-close` и emits `closed` MouseEvent).
+ *
+ * Все цвета — через семантические `--rt-color-state-*` токены; layout через
+ * primitive `--rt-space-*` / `--rt-radius-*` / `--rt-text-*`. BEM-разметка через
+ * директивы `rtBlock` / `rtElem` / `rtMod` из `@rt-tools/core`.
+ */
+class RtTagComponent {
+    #resizeObserver;
+    constructor() {
+        /** Текст pill — обязательный input. */
+        this.t = inject(RT_KIT_LABELS);
+        this.#resizeObserver = null;
+        this.textRef = viewChild('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textRef" }] : /* istanbul ignore next */ []));
+        /** Подписи не хватило места: она урезана многоточием, и целое значение показывает подсказка. */
+        this.overflowing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []));
+        /** Размер значка ведёт ступень пилюли: свой вход у него был бы вторым числом об одном. */
+        this.iconSize = computed(() => ICON_BY_SIZE[this.size()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Семантическая палитра. По умолчанию `neutral` (нейтральный серый). */
+        this.severity = input('neutral', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /**
+         * Ступень размера. Умолчание `md` — тот размер, каким метка рисовалась до появления ступеней.
+         * Отступы, кегль и значок двигаются вместе: кегль, названный отдельно, оставил бы отступы от
+         * другой ступени, и ряд пилюль перестал бы выстраиваться.
+         */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Вид заливки. По умолчанию `solid`; `outlined` — прозрачный фон + рамка. */
+        this.appearance = input('solid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /** Префикс-иконка слева от текста. `null` (дефолт) — без иконки. */
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Суффикс-иконка справа от текста (напр. `external-link` у тега-ссылки). */
+        this.iconEnd = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconEnd" }] : /* istanbul ignore next */ []));
+        /** Рендерит крестик `rt-icon-button` справа от текста. */
+        this.closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Эмиттит MouseEvent при клике на close-button (только если `closable=true`). */
+        this.closed = output();
+        afterRenderEffect(() => {
+            this.value();
+            this.size();
+            this.#observeText();
+            this.#measure();
+        });
+    }
+    ngOnDestroy() {
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = null;
+    }
+    onClose(event) {
+        event.stopPropagation();
+        this.closed.emit(event);
+    }
+    /**
+     * Переполнение считается наблюдателем за размером, а не отсчётом после отрисовки: отсчёт
+     * отвечает о машине, а не о раскладке — на свободной его всегда хватает, на занятой нет, а
+     * подпись, переполнившаяся позже, подсказки не получила бы вовсе.
+     */
+    #observeText() {
+        const node = this.textRef()?.nativeElement;
+        if (node === undefined || this.#resizeObserver !== null || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.#resizeObserver = new ResizeObserver(() => this.#measure());
+        this.#resizeObserver.observe(node);
+    }
+    #measure() {
+        const node = this.textRef()?.nativeElement;
+        if (node !== undefined) {
+            this.overflowing.set(node.scrollWidth > node.clientWidth);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtTagComponent, isStandalone: true, selector: "rt-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "rt-tag" }, viewQueries: [{ propertyName: "textRef", first: true, predicate: ["text"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        size: size(),\n        appearance: appearance(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [size]=\"iconSize()\" [name]=\"iconName\" />\n    }\n    <!--\n        \u0426\u0435\u043B\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435 \u0445\u0432\u0430\u0442\u0438\u043B\u043E \u043C\u0435\u0441\u0442\u0430:\n        \u0443\u0440\u0435\u0437\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442 \u0431\u0435\u0437 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u0446\u0435\u043B\u044B\u0439 \u2014 \u0443\u0437\u043D\u0430\u0442\u044C, \u0433\u0434\u0435 \u043E\u043D \u043D\u0430 \u0434\u0435\u043B\u0435 \u043A\u043E\u043D\u0447\u0430\u0435\u0442\u0441\u044F,\n        \u0447\u0435\u043B\u043E\u0432\u0435\u043A\u0443 \u043D\u0435\u043E\u0442\u043A\u0443\u0434\u0430. \u041F\u0443\u0441\u0442\u043E\u0439 \u0442\u0435\u043A\u0441\u0442 \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0443 \u0432\u044B\u043A\u043B\u044E\u0447\u0430\u0435\u0442.\n    -->\n    <span rtElem=\"text\" qa-dataid=\"tag-text\" #text [rtTooltip]=\"overflowing() ? value() : ''\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" [size]=\"iconSize()\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiRemove\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-tag{--rt-tag-radius: var(--rt-radius-full);--rt-tag-border-width: var(--rt-border-width-thin);display:inline-flex;max-width:100%}rt-tag .rt-tag{--rt-tag-severity-bg: var(--rt-neutral-100);--rt-tag-severity-text: var(--rt-neutral-700);--rt-tag-size-padding-block: var(--rt-space-1);--rt-tag-size-padding-inline: var(--rt-space-2);display:inline-flex;max-width:100%;align-items:center;padding:var(--rt-tag-padding-block, var(--rt-tag-size-padding-block)) var(--rt-tag-padding-inline, var(--rt-tag-size-padding-inline));border-radius:var(--rt-tag-radius);background:var(--rt-tag-color-bg, var(--rt-tag-severity-bg));color:var(--rt-tag-color-text, var(--rt-tag-severity-text));font-size:var(--rt-text-sm);gap:var(--rt-space-1);letter-spacing:var(--rt-tag-letter-spacing);line-height:var(--rt-leading-tight)}rt-tag .rt-tag--size--sm{--rt-tag-size-padding-block: var(--rt-space-0-5);--rt-tag-size-padding-inline: var(--rt-space-1);font-size:var(--rt-text-xs);gap:var(--rt-space-0-5)}rt-tag .rt-tag--size--md{--rt-tag-size-padding-block: var(--rt-space-1);--rt-tag-size-padding-inline: var(--rt-space-2);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}rt-tag .rt-tag--size--lg{--rt-tag-size-padding-block: var(--rt-space-2);--rt-tag-size-padding-inline: var(--rt-space-4);font-size:var(--rt-text-md);gap:var(--rt-space-2)}rt-tag .rt-tag--severity--info{--rt-tag-severity-bg: var(--rt-color-state-info-bg);--rt-tag-severity-text: var(--rt-color-state-info)}rt-tag .rt-tag--severity--success{--rt-tag-severity-bg: var(--rt-color-state-success-bg);--rt-tag-severity-text: var(--rt-color-state-success)}rt-tag .rt-tag--severity--warning{--rt-tag-severity-bg: var(--rt-color-state-warning-bg);--rt-tag-severity-text: var(--rt-color-state-warning)}rt-tag .rt-tag--severity--danger{--rt-tag-severity-bg: var(--rt-color-state-danger-bg);--rt-tag-severity-text: var(--rt-color-state-danger)}rt-tag .rt-tag--severity--secondary,rt-tag .rt-tag--severity--neutral{--rt-tag-severity-bg: var(--rt-color-bg-subtle);--rt-tag-severity-text: var(--rt-color-text-primary)}rt-tag .rt-tag--appearance--outlined{--rt-tag-severity-bg: transparent;border:var(--rt-tag-border-width) solid var(--rt-tag-color-border, currentcolor)}rt-tag .rt-tag__icon{flex-shrink:0}rt-tag .rt-tag__icon-end{flex-shrink:0}rt-tag .rt-tag__text{overflow:hidden;min-width:0;line-height:var(--rt-leading-none);text-overflow:ellipsis;white-space:nowrap}rt-tag .rt-tag__close{margin-inline-start:var(--rt-space-0-5)}rt-tag[data-rt-radius=none]{--rt-tag-radius: var(--rt-radius-none)}rt-tag[data-rt-radius=xs]{--rt-tag-radius: var(--rt-radius-xs)}rt-tag[data-rt-radius=sm]{--rt-tag-radius: var(--rt-radius-sm)}rt-tag[data-rt-radius=ms]{--rt-tag-radius: var(--rt-radius-ms)}rt-tag[data-rt-radius=md]{--rt-tag-radius: var(--rt-radius-md)}rt-tag[data-rt-radius=lg]{--rt-tag-radius: var(--rt-radius-lg)}rt-tag[data-rt-radius=xl]{--rt-tag-radius: var(--rt-radius-xl)}rt-tag[data-rt-radius=\"2xl\"]{--rt-tag-radius: var(--rt-radius-2xl)}rt-tag[data-rt-radius=full]{--rt-tag-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { 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: RtTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        RtIconButtonComponent,
+                        RtTooltipDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        size: size(),\n        appearance: appearance(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [size]=\"iconSize()\" [name]=\"iconName\" />\n    }\n    <!--\n        \u0426\u0435\u043B\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435 \u0445\u0432\u0430\u0442\u0438\u043B\u043E \u043C\u0435\u0441\u0442\u0430:\n        \u0443\u0440\u0435\u0437\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442 \u0431\u0435\u0437 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u0446\u0435\u043B\u044B\u0439 \u2014 \u0443\u0437\u043D\u0430\u0442\u044C, \u0433\u0434\u0435 \u043E\u043D \u043D\u0430 \u0434\u0435\u043B\u0435 \u043A\u043E\u043D\u0447\u0430\u0435\u0442\u0441\u044F,\n        \u0447\u0435\u043B\u043E\u0432\u0435\u043A\u0443 \u043D\u0435\u043E\u0442\u043A\u0443\u0434\u0430. \u041F\u0443\u0441\u0442\u043E\u0439 \u0442\u0435\u043A\u0441\u0442 \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0443 \u0432\u044B\u043A\u043B\u044E\u0447\u0430\u0435\u0442.\n    -->\n    <span rtElem=\"text\" qa-dataid=\"tag-text\" #text [rtTooltip]=\"overflowing() ? value() : ''\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" [size]=\"iconSize()\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiRemove\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-tag{--rt-tag-radius: var(--rt-radius-full);--rt-tag-border-width: var(--rt-border-width-thin);display:inline-flex;max-width:100%}rt-tag .rt-tag{--rt-tag-severity-bg: var(--rt-neutral-100);--rt-tag-severity-text: var(--rt-neutral-700);--rt-tag-size-padding-block: var(--rt-space-1);--rt-tag-size-padding-inline: var(--rt-space-2);display:inline-flex;max-width:100%;align-items:center;padding:var(--rt-tag-padding-block, var(--rt-tag-size-padding-block)) var(--rt-tag-padding-inline, var(--rt-tag-size-padding-inline));border-radius:var(--rt-tag-radius);background:var(--rt-tag-color-bg, var(--rt-tag-severity-bg));color:var(--rt-tag-color-text, var(--rt-tag-severity-text));font-size:var(--rt-text-sm);gap:var(--rt-space-1);letter-spacing:var(--rt-tag-letter-spacing);line-height:var(--rt-leading-tight)}rt-tag .rt-tag--size--sm{--rt-tag-size-padding-block: var(--rt-space-0-5);--rt-tag-size-padding-inline: var(--rt-space-1);font-size:var(--rt-text-xs);gap:var(--rt-space-0-5)}rt-tag .rt-tag--size--md{--rt-tag-size-padding-block: var(--rt-space-1);--rt-tag-size-padding-inline: var(--rt-space-2);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}rt-tag .rt-tag--size--lg{--rt-tag-size-padding-block: var(--rt-space-2);--rt-tag-size-padding-inline: var(--rt-space-4);font-size:var(--rt-text-md);gap:var(--rt-space-2)}rt-tag .rt-tag--severity--info{--rt-tag-severity-bg: var(--rt-color-state-info-bg);--rt-tag-severity-text: var(--rt-color-state-info)}rt-tag .rt-tag--severity--success{--rt-tag-severity-bg: var(--rt-color-state-success-bg);--rt-tag-severity-text: var(--rt-color-state-success)}rt-tag .rt-tag--severity--warning{--rt-tag-severity-bg: var(--rt-color-state-warning-bg);--rt-tag-severity-text: var(--rt-color-state-warning)}rt-tag .rt-tag--severity--danger{--rt-tag-severity-bg: var(--rt-color-state-danger-bg);--rt-tag-severity-text: var(--rt-color-state-danger)}rt-tag .rt-tag--severity--secondary,rt-tag .rt-tag--severity--neutral{--rt-tag-severity-bg: var(--rt-color-bg-subtle);--rt-tag-severity-text: var(--rt-color-text-primary)}rt-tag .rt-tag--appearance--outlined{--rt-tag-severity-bg: transparent;border:var(--rt-tag-border-width) solid var(--rt-tag-color-border, currentcolor)}rt-tag .rt-tag__icon{flex-shrink:0}rt-tag .rt-tag__icon-end{flex-shrink:0}rt-tag .rt-tag__text{overflow:hidden;min-width:0;line-height:var(--rt-leading-none);text-overflow:ellipsis;white-space:nowrap}rt-tag .rt-tag__close{margin-inline-start:var(--rt-space-0-5)}rt-tag[data-rt-radius=none]{--rt-tag-radius: var(--rt-radius-none)}rt-tag[data-rt-radius=xs]{--rt-tag-radius: var(--rt-radius-xs)}rt-tag[data-rt-radius=sm]{--rt-tag-radius: var(--rt-radius-sm)}rt-tag[data-rt-radius=ms]{--rt-tag-radius: var(--rt-radius-ms)}rt-tag[data-rt-radius=md]{--rt-tag-radius: var(--rt-radius-md)}rt-tag[data-rt-radius=lg]{--rt-tag-radius: var(--rt-radius-lg)}rt-tag[data-rt-radius=xl]{--rt-tag-radius: var(--rt-radius-xl)}rt-tag[data-rt-radius=\"2xl\"]{--rt-tag-radius: var(--rt-radius-2xl)}rt-tag[data-rt-radius=full]{--rt-tag-radius: var(--rt-radius-full)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textRef: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtTagComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-tag.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-tag.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/tag/rt-tag.component.ts","../../../projects/ui-kit-v2/src/lib/components/tag/rt-tag.component.html","../../../projects/ui-kit-v2/src/lib/components/tag/rt-tools-ui-kit-v2-tag.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    afterRenderEffect,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ElementRef,\n    InputSignal,\n    InputSignalWithTransform,\n    OnDestroy,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } 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 { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtTag } from './rt-tag.model';\n\nconst BEM_BLOCK: string = 'rt-tag';\n\n/** Ступень значка по ступени пилюли. `md` оставляет значок таким, каким он был до ступеней. */\nconst ICON_BY_SIZE: Readonly<Record<IRtTag.Size, IRtIcon.Size>> = { sm: 'xs', md: 'sm', lg: 'md' };\n\n/**\n * Status/label pill для отображения статусов и счётчиков.\n * Поддерживает 6 severity-вариантов (`info` / `success` / `warning` / `danger` /\n * `secondary` / `neutral`), любой шаг скругления входом `radius` и опциональный close-control\n * (рендерит `rt-icon-button` с иконкой `ico-close` и emits `closed` MouseEvent).\n *\n * Все цвета — через семантические `--rt-color-state-*` токены; layout через\n * primitive `--rt-space-*` / `--rt-radius-*` / `--rt-text-*`. BEM-разметка через\n * директивы `rtBlock` / `rtElem` / `rtMod` из `@rt-tools/core`.\n */\n@Component({\n    selector: 'rt-tag',\n    templateUrl: './rt-tag.component.html',\n    styleUrl: './rt-tag.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        RtIconButtonComponent,\n        RtTooltipDirective,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtTagComponent implements OnDestroy {\n    /** Текст pill — обязательный input. */\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    #resizeObserver: ResizeObserver | null = null;\n\n    protected readonly textRef: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('text');\n\n    /** Подписи не хватило места: она урезана многоточием, и целое значение показывает подсказка. */\n    protected readonly overflowing: WritableSignal<boolean> = signal<boolean>(false);\n\n    /** Размер значка ведёт ступень пилюли: свой вход у него был бы вторым числом об одном. */\n    protected readonly iconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => ICON_BY_SIZE[this.size()]);\n\n    public readonly value: InputSignal<string> = input.required<string>();\n\n    /** Семантическая палитра. По умолчанию `neutral` (нейтральный серый). */\n    public readonly severity: InputSignal<IRtTag.Severity> = input<IRtTag.Severity>('neutral');\n\n    /**\n     * Ступень размера. Умолчание `md` — тот размер, каким метка рисовалась до появления ступеней.\n     * Отступы, кегль и значок двигаются вместе: кегль, названный отдельно, оставил бы отступы от\n     * другой ступени, и ряд пилюль перестал бы выстраиваться.\n     */\n    public readonly size: InputSignal<IRtTag.Size> = input<IRtTag.Size>('md');\n\n    /** Вид заливки. По умолчанию `solid`; `outlined` — прозрачный фон + рамка. */\n    public readonly appearance: InputSignal<IRtTag.Appearance> = input<IRtTag.Appearance>('solid');\n\n    /** Префикс-иконка слева от текста. `null` (дефолт) — без иконки. */\n    public readonly icon: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Суффикс-иконка справа от текста (напр. `external-link` у тега-ссылки). */\n    public readonly iconEnd: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Рендерит крестик `rt-icon-button` справа от текста. */\n    public readonly closable: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Эмиттит MouseEvent при клике на close-button (только если `closable=true`). */\n    public readonly closed: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n    constructor() {\n        afterRenderEffect((): void => {\n            this.value();\n            this.size();\n            this.#observeText();\n            this.#measure();\n        });\n    }\n\n    public ngOnDestroy(): void {\n        this.#resizeObserver?.disconnect();\n        this.#resizeObserver = null;\n    }\n\n    protected onClose(event: MouseEvent): void {\n        event.stopPropagation();\n        this.closed.emit(event);\n    }\n\n    /**\n     * Переполнение считается наблюдателем за размером, а не отсчётом после отрисовки: отсчёт\n     * отвечает о машине, а не о раскладке — на свободной его всегда хватает, на занятой нет, а\n     * подпись, переполнившаяся позже, подсказки не получила бы вовсе.\n     */\n    #observeText(): void {\n        const node: HTMLElement | undefined = this.textRef()?.nativeElement;\n\n        if (node === undefined || this.#resizeObserver !== null || typeof ResizeObserver === 'undefined') {\n            return;\n        }\n\n        this.#resizeObserver = new ResizeObserver((): void => this.#measure());\n        this.#resizeObserver.observe(node);\n    }\n\n    #measure(): void {\n        const node: HTMLElement | undefined = this.textRef()?.nativeElement;\n\n        if (node !== undefined) {\n            this.overflowing.set(node.scrollWidth > node.clientWidth);\n        }\n    }\n}\n","<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        size: size(),\n        appearance: appearance(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [size]=\"iconSize()\" [name]=\"iconName\" />\n    }\n    <!--\n        Целое значение показывает подсказка, и только когда подписи не хватило места:\n        урезанный текст без подсказки читается как целый — узнать, где он на деле кончается,\n        человеку неоткуда. Пустой текст директиву выключает.\n    -->\n    <span rtElem=\"text\" qa-dataid=\"tag-text\" #text [rtTooltip]=\"overflowing() ? value() : ''\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" [size]=\"iconSize()\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiRemove\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\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-textarea.mjs

@@ -0,0 +1,85 @@
+import * as i0 from '@angular/core';
+import { viewChild, computed, input, booleanAttribute, numberAttribute, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-textarea';
+/**
+ * Шеренный textarea common/ui. CVA через общий `RtFormControlBase` —
+ * авто-подсветка invalid. Размерные варианты sm/md/lg через host-класс. Resize
+ * policy none/vertical.
+ *
+ * Крестик-очистка НЕ рендерится: в многострочном поле он нетипичен (`clearable`
+ * наследуется, но шаблон его не использует).
+ *
+ * Размеры/цвета — через `--rt-input-*` / `--rt-textarea-*` semantic-токены.
+ * `font-family: inherit` явно — textarea иначе падает на UA-default (monospace).
+ */
+class RtTextareaComponent extends RtFormControlBase {
+    constructor() {
+        super(...arguments);
+        this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value() !== '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rows = input(3, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.resize = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    }
+    getEmptyValue() {
+        return '';
+    }
+    focusAfterClear() {
+        this.fieldEl()?.nativeElement.focus();
+    }
+    onInput(event) {
+        const target = event.target;
+        const next = target.value;
+        this.value.set(next);
+        this.emitChange(next);
+    }
+    onBlur() {
+        this.markTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtTextareaComponent, isStandalone: true, selector: "rt-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-textarea--size--sm": "size() === 'sm'", "class.rt-textarea--size--lg": "size() === 'lg'", "class.rt-textarea--disabled": "isDisabled()", "class.rt-textarea--readonly": "readonly()", "class.rt-textarea--invalid": "isInvalid()", "class.rt-textarea--borderless": "!bordered()" }, classAttribute: "rt-textarea" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtTextareaComponent) },
+        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-textarea{--rt-textarea-radius: var(--rt-input-radius);display:block;width:100%}.rt-textarea--borderless .rt-textarea__control{border-color:transparent}.rt-textarea__control{width:100%;min-height:var(--rt-textarea-min-height);box-sizing:border-box;padding:var(--rt-textarea-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-textarea-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);line-height:var(--rt-textarea-line-height);transition:var(--rt-input-transition)}.rt-textarea__control::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-textarea__control:focus-visible{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-textarea__control:disabled{background-color:var(--rt-input-color-bg-disabled);cursor:not-allowed}.rt-textarea--size--sm .rt-textarea__control{min-height:var(--rt-textarea-min-height-sm)}.rt-textarea--size--lg .rt-textarea__control{min-height:var(--rt-textarea-min-height-lg)}.rt-textarea--invalid .rt-textarea__control{border-color:var(--rt-input-color-border-error)}.rt-textarea--invalid .rt-textarea__control:focus-visible{box-shadow:var(--rt-input-focus-shadow-error)}.rt-textarea--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-textarea__readonly{display:block;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size);white-space:pre-wrap}.rt-textarea__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-textarea[data-rt-radius=none]{--rt-textarea-radius: var(--rt-radius-none)}.rt-textarea[data-rt-radius=xs]{--rt-textarea-radius: var(--rt-radius-xs)}.rt-textarea[data-rt-radius=sm]{--rt-textarea-radius: var(--rt-radius-sm)}.rt-textarea[data-rt-radius=ms]{--rt-textarea-radius: var(--rt-radius-ms)}.rt-textarea[data-rt-radius=md]{--rt-textarea-radius: var(--rt-radius-md)}.rt-textarea[data-rt-radius=lg]{--rt-textarea-radius: var(--rt-radius-lg)}.rt-textarea[data-rt-radius=xl]{--rt-textarea-radius: var(--rt-radius-xl)}.rt-textarea[data-rt-radius=\"2xl\"]{--rt-textarea-radius: var(--rt-radius-2xl)}.rt-textarea[data-rt-radius=full]{--rt-textarea-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: RtTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-textarea', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtTextareaComponent) },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-textarea--size--sm]': "size() === 'sm'",
+                        '[class.rt-textarea--size--lg]': "size() === 'lg'",
+                        '[class.rt-textarea--disabled]': 'isDisabled()',
+                        '[class.rt-textarea--readonly]': 'readonly()',
+                        '[class.rt-textarea--invalid]': 'isInvalid()',
+                        '[class.rt-textarea--borderless]': '!bordered()',
+                    }, template: "<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-textarea{--rt-textarea-radius: var(--rt-input-radius);display:block;width:100%}.rt-textarea--borderless .rt-textarea__control{border-color:transparent}.rt-textarea__control{width:100%;min-height:var(--rt-textarea-min-height);box-sizing:border-box;padding:var(--rt-textarea-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-textarea-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);line-height:var(--rt-textarea-line-height);transition:var(--rt-input-transition)}.rt-textarea__control::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-textarea__control:focus-visible{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-textarea__control:disabled{background-color:var(--rt-input-color-bg-disabled);cursor:not-allowed}.rt-textarea--size--sm .rt-textarea__control{min-height:var(--rt-textarea-min-height-sm)}.rt-textarea--size--lg .rt-textarea__control{min-height:var(--rt-textarea-min-height-lg)}.rt-textarea--invalid .rt-textarea__control{border-color:var(--rt-input-color-border-error)}.rt-textarea--invalid .rt-textarea__control:focus-visible{box-shadow:var(--rt-input-focus-shadow-error)}.rt-textarea--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-textarea__readonly{display:block;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size);white-space:pre-wrap}.rt-textarea__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-textarea[data-rt-radius=none]{--rt-textarea-radius: var(--rt-radius-none)}.rt-textarea[data-rt-radius=xs]{--rt-textarea-radius: var(--rt-radius-xs)}.rt-textarea[data-rt-radius=sm]{--rt-textarea-radius: var(--rt-radius-sm)}.rt-textarea[data-rt-radius=ms]{--rt-textarea-radius: var(--rt-radius-ms)}.rt-textarea[data-rt-radius=md]{--rt-textarea-radius: var(--rt-radius-md)}.rt-textarea[data-rt-radius=lg]{--rt-textarea-radius: var(--rt-radius-lg)}.rt-textarea[data-rt-radius=xl]{--rt-textarea-radius: var(--rt-radius-xl)}.rt-textarea[data-rt-radius=\"2xl\"]{--rt-textarea-radius: var(--rt-radius-2xl)}.rt-textarea[data-rt-radius=full]{--rt-textarea-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { fieldEl: [{ type: i0.ViewChild, args: ['fieldEl', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtTextareaComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-textarea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-textarea.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/textarea/rt-textarea.component.ts","../../../projects/ui-kit-v2/src/lib/components/textarea/rt-textarea.component.html","../../../projects/ui-kit-v2/src/lib/components/textarea/rt-tools-ui-kit-v2-textarea.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ElementRef,\n    forwardRef,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    numberAttribute,\n    Signal,\n    viewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-textarea';\n\nexport type TRtTextareaResize = 'none' | 'vertical';\n\n/**\n * Шеренный textarea common/ui. CVA через общий `RtFormControlBase` —\n * авто-подсветка invalid. Размерные варианты sm/md/lg через host-класс. Resize\n * policy none/vertical.\n *\n * Крестик-очистка НЕ рендерится: в многострочном поле он нетипичен (`clearable`\n * наследуется, но шаблон его не использует).\n *\n * Размеры/цвета — через `--rt-input-*` / `--rt-textarea-*` semantic-токены.\n * `font-family: inherit` явно — textarea иначе падает на UA-default (monospace).\n */\n@Component({\n    selector: 'rt-textarea',\n    templateUrl: './rt-textarea.component.html',\n    styleUrls: ['./rt-textarea.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtTextareaComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-textarea--size--sm]': \"size() === 'sm'\",\n        '[class.rt-textarea--size--lg]': \"size() === 'lg'\",\n        '[class.rt-textarea--disabled]': 'isDisabled()',\n        '[class.rt-textarea--readonly]': 'readonly()',\n        '[class.rt-textarea--invalid]': 'isInvalid()',\n        '[class.rt-textarea--borderless]': '!bordered()',\n    },\n})\nexport class RtTextareaComponent extends RtFormControlBase<string> {\n    protected readonly fieldEl: Signal<ElementRef<HTMLTextAreaElement> | undefined> = viewChild<ElementRef<HTMLTextAreaElement>>('fieldEl');\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value() !== '');\n\n    public readonly displayText: Signal<string> = computed((): string => this.value());\n\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly readonly: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n    public readonly rows: InputSignalWithTransform<number, NumberInput> = input<number, NumberInput>(3, { transform: numberAttribute });\n    public readonly resize: InputSignal<TRtTextareaResize> = input<TRtTextareaResize>('vertical');\n\n    protected getEmptyValue(): string {\n        return '';\n    }\n\n    protected focusAfterClear(): void {\n        this.fieldEl()?.nativeElement.focus();\n    }\n\n    protected onInput(event: Event): void {\n        const target: HTMLTextAreaElement = event.target as HTMLTextAreaElement;\n        const next: string = target.value;\n        this.value.set(next);\n        this.emitChange(next);\n    }\n\n    protected onBlur(): void {\n        this.markTouched();\n    }\n}\n","<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\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-theme-toggle.mjs

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+import { inject, computed, input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { rtKitLabel, ThemeService } from '@rt-tools/ui-kit-v2/core';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtToggleSwitchComponent } from '@rt-tools/ui-kit-v2/toggle-switch';
+
+const BEM_BLOCK = 'rt-theme-toggle';
+/**
+ * Переключатель темы в двух видах (`appearance`):
+ *  - `icon` — круглая icon-кнопка, рендер делегирован в `rt-icon-button`
+ *    (ghost-стиль, focus-visible, hover, aria-pressed через `[active]`);
+ *  - `switch` — тоггл-рельса `rt-toggle-switch` с иконками внутри трека.
+ *
+ * В обоих видах видна иконка противоположной темы — кликом пользователь
+ * переходит к ней. В `switch` это получается само: бегунок стоит над иконкой
+ * текущей темы и закрывает её.
+ *
+ * Инжектит ThemeService напрямую — допустимо благодаря расширенному boundary
+ * ThemeService сам провайден root.
+ */
+class RtThemeToggleComponent {
+    constructor() {
+        /** Тексты компонента: сигналы, потому что язык может смениться без перезагрузки */
+        this.#t_themeToggleLabel = rtKitLabel('themeToggleLabel');
+        this.#theme = inject(ThemeService);
+        this.iconName = computed(() => (this.#theme.isDark() ? 'ico-sun' : 'moon'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        this.isSwitch = computed(() => this.appearance() === 'switch', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSwitch" }] : /* istanbul ignore next */ []));
+        this.isDark = this.#theme.isDark;
+        this.label = this.#t_themeToggleLabel();
+        /** Внешний вид. Default `icon` — компактная кнопка для шапки. */
+        this.appearance = input('icon', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    }
+    /** Тексты компонента: сигналы, потому что язык может смениться без перезагрузки */
+    #t_themeToggleLabel;
+    #theme;
+    onToggle() {
+        this.#theme.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtThemeToggleComponent, isStandalone: true, selector: "rt-theme-toggle", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-theme-toggle" }, ngImport: i0, template: "@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        radius=\"full\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-theme-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // angular
+                FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
+                // standalone components / directives
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "label", "size", "iconOff", "iconOn", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // angular
+                        FormsModule,
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtToggleSwitchComponent,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        radius=\"full\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-theme-toggle{display:inline-flex}}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
+
+/**
+ * Модель `<rt-theme-toggle>`: один корневой неймспейс с префиксом `I`.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtThemeToggleComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-theme-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-theme-toggle.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/theme-toggle/rt-theme-toggle.component.ts","../../../projects/ui-kit-v2/src/lib/components/theme-toggle/rt-theme-toggle.component.html","../../../projects/ui-kit-v2/src/lib/components/theme-toggle/rt-theme-toggle.model.ts","../../../projects/ui-kit-v2/src/lib/components/theme-toggle/rt-tools-ui-kit-v2-theme-toggle.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, InputSignal, Signal, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { ThemeService } from '@rt-tools/ui-kit-v2/core';\n\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtToggleSwitchComponent } from '@rt-tools/ui-kit-v2/toggle-switch';\nimport { IRtThemeToggle } from './rt-theme-toggle.model';\n\nconst BEM_BLOCK: string = 'rt-theme-toggle';\n\n/**\n * Переключатель темы в двух видах (`appearance`):\n *  - `icon` — круглая icon-кнопка, рендер делегирован в `rt-icon-button`\n *    (ghost-стиль, focus-visible, hover, aria-pressed через `[active]`);\n *  - `switch` — тоггл-рельса `rt-toggle-switch` с иконками внутри трека.\n *\n * В обоих видах видна иконка противоположной темы — кликом пользователь\n * переходит к ней. В `switch` это получается само: бегунок стоит над иконкой\n * текущей темы и закрывает её.\n *\n * Инжектит ThemeService напрямую — допустимо благодаря расширенному boundary\n * ThemeService сам провайден root.\n */\n@Component({\n    selector: 'rt-theme-toggle',\n    templateUrl: './rt-theme-toggle.component.html',\n    styleUrls: ['./rt-theme-toggle.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // angular\n        FormsModule,\n\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtToggleSwitchComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtThemeToggleComponent {\n    /** Тексты компонента: сигналы, потому что язык может смениться без перезагрузки */\n    readonly #t_themeToggleLabel: Signal<string> = rtKitLabel('themeToggleLabel');\n\n    readonly #theme: ThemeService = inject(ThemeService);\n\n    protected readonly iconName: Signal<IRtIcon.Name> = computed((): IRtIcon.Name => (this.#theme.isDark() ? 'ico-sun' : 'moon'));\n\n    protected readonly isSwitch: Signal<boolean> = computed((): boolean => this.appearance() === 'switch');\n\n    protected readonly isDark: Signal<boolean> = this.#theme.isDark;\n\n    protected readonly label: string = this.#t_themeToggleLabel();\n\n    /** Внешний вид. Default `icon` — компактная кнопка для шапки. */\n    public readonly appearance: InputSignal<IRtThemeToggle.Appearance> = input<IRtThemeToggle.Appearance>('icon');\n\n    public onToggle(): void {\n        this.#theme.toggle();\n    }\n}\n","@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        radius=\"full\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n","/**\n * Модель `<rt-theme-toggle>`: один корневой неймспейс с префиксом `I`.\n */\n\nexport namespace IRtThemeToggle {\n    /**\n     * Внешний вид переключателя:\n     *  - `icon` — круглая icon-кнопка с иконкой противоположной темы;\n     *  - `switch` — тоггл-рельса с иконками солнца и луны внутри трека.\n     */\n    export type Appearance = 'icon' | 'switch';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAS,GAAW,iBAAiB;AAE3C;;;;;;;;;;;;AAYG;MAmBU,sBAAsB,CAAA;AAlBnC,IAAA,WAAA,GAAA;;AAoBa,QAAA,IAAA,CAAA,mBAAmB,GAAmB,UAAU,CAAC,kBAAkB,CAAC;AAEpE,QAAA,IAAA,CAAA,MAAM,GAAiB,MAAM,CAAC,YAAY,CAAC;QAEjC,IAAA,CAAA,QAAQ,GAAyB,QAAQ,CAAC,OAAqB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,GAAG,MAAM,CAAC;qFAAC;QAE1G,IAAA,CAAA,QAAQ,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,UAAU,EAAE,KAAK,QAAQ;qFAAC;AAEnF,QAAA,IAAA,CAAA,MAAM,GAAoB,IAAI,CAAC,MAAM,CAAC,MAAM;AAE5C,QAAA,IAAA,CAAA,KAAK,GAAW,IAAI,CAAC,mBAAmB,EAAE;;QAG7C,IAAA,CAAA,UAAU,GAA2C,KAAK,CAA4B,MAAM;uFAAC;AAKhH,IAAA;;AAlBY,IAAA,mBAAmB;AAEnB,IAAA,MAAM;IAaR,QAAQ,GAAA;AACX,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;IACxB;8GAnBS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,2QC5CnC,wiBAoBA,EAAA,MAAA,EAAA,CAAA,sFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA;;gBDcQ,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;AAGX,gBAAA,qBAAqB,8PACrB,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMlB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAlBlC,SAAS;+BACI,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,WAAW;;wBAGX,qBAAqB;wBACrB,uBAAuB;qBAC1B,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,wiBAAA,EAAA,MAAA,EAAA,CAAA,sFAAA,CAAA,EAAA;;;AE1CL;;AAEG;;ACFH;;AAEG;;;;"}