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

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

@@ -1,122 +1,336 @@
-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", "glyphStrategy", "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.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, inject, input, output, signal, viewChild } 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";
+import { splitTitleByWords } from "@rt-tools/ui-kit-v2/side-menu";
+const BEM_BLOCK = "rt-tag";
+const ICON_BY_SIZE = {
+	sm: "xs",
+	md: "sm",
+	lg: "md"
+};
+var RtTagComponent = class RtTagComponent {
+	#resizeObserver;
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.#resizeObserver = null;
+		this.textRef = viewChild("text", ...ngDevMode ? [{ debugName: "textRef" }] : /* istanbul ignore next */ []);
+		this.overflowing = signal(false, ...ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []);
+		this.iconSize = computed(() => ICON_BY_SIZE[this.size()], ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+		this.parts = computed(() => splitTitleByWords(this.value(), this.highlight()), ...ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []);
+		this.value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.highlight = input("", ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
+		this.severity = input("neutral", ...ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []);
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.iconEnd = input(null, ...ngDevMode ? [{ debugName: "iconEnd" }] : /* istanbul ignore next */ []);
+		this.closable = input(false, {
+			...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		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 === void 0 || 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 !== void 0) this.overflowing.set(node.scrollWidth > node.clientWidth);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTagComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtTagComponent,
+			isStandalone: true,
+			selector: "rt-tag",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				highlight: {
+					classPropertyName: "highlight",
+					publicName: "highlight",
+					isSignal: true,
+					isRequired: false,
+					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        Целое значение показывает подсказка, и только когда подписи не хватило места:\n        урезанный текст без подсказки читается как целый — узнать, где он на деле кончается,\n        человеку неоткуда. Пустой текст директиву выключает.\n    -->\n    <span rtElem=\"text\" qa-dataid=\"tag-text\" #text [rtTooltip]=\"overflowing() ? value() : ''\">\n        @for (part of parts(); track $index) {\n            <span rtElem=\"part\" [rtMod]=\"{ match: part.matched }\">{{ part.text }}</span>\n        }\n    </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);--rt-tag-match-bg: var(--rt-yellow-400);--rt-tag-match-color: var(--rt-neutral-950);--rt-tag-match-radius: var(--rt-radius-xs);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__part--match{border-radius:var(--rt-tag-match-radius);background:var(--rt-tag-match-bg);color:var(--rt-tag-match-color)}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: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					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.2.2",
+	ngImport: i0,
+	type: RtTagComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-tag",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				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        Целое значение показывает подсказка, и только когда подписи не хватило места:\n        урезанный текст без подсказки читается как целый — узнать, где он на деле кончается,\n        человеку неоткуда. Пустой текст директиву выключает.\n    -->\n    <span rtElem=\"text\" qa-dataid=\"tag-text\" #text [rtTooltip]=\"overflowing() ? value() : ''\">\n        @for (part of parts(); track $index) {\n            <span rtElem=\"part\" [rtMod]=\"{ match: part.matched }\">{{ part.text }}</span>\n        }\n    </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);--rt-tag-match-bg: var(--rt-yellow-400);--rt-tag-match-color: var(--rt-neutral-950);--rt-tag-match-radius: var(--rt-radius-xs);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__part--match{border-radius:var(--rt-tag-match-radius);background:var(--rt-tag-match-bg);color:var(--rt-tag-match-color)}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
+			}]
+		}],
+		highlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlight",
+				required: false
+			}]
+		}],
+		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"]
+		}]
+	}
+});
 export { RtTagComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-tag.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-tag.mjs.map

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

@@ -1 +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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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-tag.mjs","names":[],"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"],"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 { IRtSideMenu, splitTitleByWords } from '@rt-tools/ui-kit-v2/side-menu';\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    /** Подпись, разрезанная по словам `highlight`: без них — один кусок целиком. */\n    protected readonly parts: Signal<ReadonlyArray<IRtSideMenu.TitlePart>> = computed((): ReadonlyArray<IRtSideMenu.TitlePart> =>\n        splitTitleByWords(this.value(), this.highlight())\n    );\n\n    public readonly value: InputSignal<string> = input.required<string>();\n\n    /**\n     * Слова поиска, найденные куски которых метка отмечает: приложение, что ищет и по меткам,\n     * показывает, где слово нашлось. Пустая строка ничего не отмечает.\n     */\n    public readonly highlight: InputSignal<string> = input<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() : ''\">\n        @for (part of parts(); track $index) {\n            <span rtElem=\"part\" [rtMod]=\"{ match: part.matched }\">{{ part.text }}</span>\n        }\n    </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"],"mappings":"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"}