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

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

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, output, 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 { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-header';
+/**
+ * Общий хедер приложения.
+ *
+ * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),
+ * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда
+ * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark
+ * выравнивается слева.
+ *
+ * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»
+ * (`showInvite`), слот колокольчика и профиль.
+ *
+ * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот
+ * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.
+ *
+ * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,
+ * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном
+ * страницы в dark).
+ */
+class RtHeaderComponent {
+    constructor() {
+        this.t = inject(RT_KIT_LABELS);
+        this.canGoBack = input(false, { ...(ngDevMode ? { debugName: "canGoBack" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */
+        this.showInvite = input(false, { ...(ngDevMode ? { debugName: "showInvite" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.backClick = output();
+        this.inviteClick = output();
+        this.profileClick = output();
+    }
+    onBackClick() {
+        this.backClick.emit();
+    }
+    onInviteClick() {
+        this.inviteClick.emit();
+    }
+    onProfileClick() {
+        this.profileClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtHeaderComponent, isStandalone: true, selector: "rt-header", inputs: { canGoBack: { classPropertyName: "canGoBack", publicName: "canGoBack", isSignal: true, isRequired: false, transformFunction: null }, showInvite: { classPropertyName: "showInvite", publicName: "showInvite", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClick: "backClick", inviteClick: "inviteClick", profileClick: "profileClick" }, host: { classAttribute: "rt-header" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"], dependencies: [{ 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: RtLogoComponent, selector: "rt-logo", inputs: ["variant", "height", "aspect", "ariaLabel"] }, { 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: RtHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtLogoComponent,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-header{--rt-header-radius: var(--rt-radius-lg);--rt-header-shadow: var(--rt-shadow-card-soft);--rt-header-back-transition-duration: var(--rt-duration-base);display:block;height:45px;padding:0 var(--rt-space-5);background:var(--rt-color-bg-surface);border-bottom-left-radius:var(--rt-header-radius);border-bottom-right-radius:var(--rt-header-radius);box-shadow:var(--rt-header-shadow);color:var(--rt-color-text-primary)}.rt-header__content{display:flex;width:100%;max-width:var(--rt-header-content-max-width, 100%);height:100%;align-items:center;margin:0 auto;gap:0}.rt-header__back{display:inline-flex;overflow:hidden;width:0;height:45px;align-items:center;justify-content:flex-start;opacity:0;pointer-events:none;transform:translate(-8px);transition:width var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1),opacity var(--rt-header-back-transition-duration) ease-out,transform var(--rt-header-back-transition-duration) cubic-bezier(.34,1.56,.64,1)}.rt-header__back--visible{width:35px;opacity:1;pointer-events:auto;transform:translate(0)}.rt-header__logo{display:flex;min-width:0;flex:1 0 0;align-items:center}.rt-header[data-rt-radius=none]{--rt-header-radius: var(--rt-radius-none)}.rt-header[data-rt-radius=xs]{--rt-header-radius: var(--rt-radius-xs)}.rt-header[data-rt-radius=sm]{--rt-header-radius: var(--rt-radius-sm)}.rt-header[data-rt-radius=ms]{--rt-header-radius: var(--rt-radius-ms)}.rt-header[data-rt-radius=md]{--rt-header-radius: var(--rt-radius-md)}.rt-header[data-rt-radius=lg]{--rt-header-radius: var(--rt-radius-lg)}.rt-header[data-rt-radius=xl]{--rt-header-radius: var(--rt-radius-xl)}.rt-header[data-rt-radius=\"2xl\"]{--rt-header-radius: var(--rt-radius-2xl)}.rt-header[data-rt-radius=full]{--rt-header-radius: var(--rt-radius-full)}[data-theme=dark] .rt-header{background:var(--rt-color-bg-nav)}@media(prefers-reduced-motion:reduce){.rt-header__back{transition:none}}}\n"] }]
+        }], propDecorators: { canGoBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGoBack", required: false }] }], showInvite: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInvite", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], inviteClick: [{ type: i0.Output, args: ["inviteClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtHeaderComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-header.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-header.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.ts","../../../projects/ui-kit-v2/src/lib/components/header/rt-header.component.html","../../../projects/ui-kit-v2/src/lib/components/header/rt-tools-ui-kit-v2-header.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    input,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\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 { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtLogoComponent } from '@rt-tools/ui-kit-v2/logo';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-header';\n\n/**\n * Общий хедер приложения.\n *\n * Слева — slot 35×45 под back-button (rt-icon-button arrow-left, ghost variant),\n * который виден по входному сигналу `canGoBack` и эмитит `backClick`. Когда\n * `canGoBack=false` (default) — slot полностью скрыт через display:none, wordmark\n * выравнивается слева.\n *\n * Далее — wordmark, справа — action-иконки (rt-icon-button шагом md): опциональная «Пригласить пользователя»\n * (`showInvite`), слот колокольчика и профиль.\n *\n * Колокольчик уведомлений — проекция `[rtHeaderBell]`: домен кладёт в слот\n * `rt-notifications-bell` (общий попап-компонент), хедер про его устройство не знает.\n *\n * Темизация — через семантические `--rt-color-bg-surface` / `--rt-color-text-primary`,\n * dark override карточного фона выполняется в SCSS (header navy совпадает с фоном\n * страницы в dark).\n */\n@Component({\n    selector: 'rt-header',\n    templateUrl: './rt-header.component.html',\n    styleUrls: ['./rt-header.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtLogoComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtHeaderComponent {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    public readonly canGoBack: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Показывать action-иконку «Пригласить пользователя» слева от колокола. */\n    public readonly showInvite: InputSignalWithTransform<boolean, boolean | string> = input<boolean, boolean | string>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly backClick: OutputEmitterRef<void> = output<void>();\n    public readonly inviteClick: OutputEmitterRef<void> = output<void>();\n    public readonly profileClick: OutputEmitterRef<void> = output<void>();\n\n    protected onBackClick(): void {\n        this.backClick.emit();\n    }\n\n    protected onInviteClick(): void {\n        this.inviteClick.emit();\n    }\n\n    protected onProfileClick(): void {\n        this.profileClick.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-header\">\n    <div rtElem=\"content\">\n        <rt-icon-button\n            rtElem=\"back\"\n            qa-dataid=\"header-back\"\n            icon=\"arrow-left\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiBack\"\n            [tooltip]=\"t().uiBack\"\n            [rtMod]=\"{ visible: canGoBack() }\"\n            (clicked)=\"onBackClick()\" />\n\n        <div rtElem=\"logo\" qa-dataid=\"header-logo\">\n            <rt-logo variant=\"wordmark\" height=\"15\" />\n        </div>\n\n        @if (showInvite()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"header-invite\"\n                icon=\"user-plus\"\n                variant=\"ghost\"\n                size=\"md\"\n                radius=\"full\"\n                [ariaLabel]=\"t().uiInviteUser\"\n                [tooltip]=\"t().uiInviteUser\"\n                (clicked)=\"onInviteClick()\" />\n        }\n\n        <ng-content select=\"[rtHeaderBell]\" />\n\n        <rt-icon-button\n            rtElem=\"action\"\n            qa-dataid=\"header-profile\"\n            icon=\"user\"\n            variant=\"ghost\"\n            size=\"md\"\n            radius=\"full\"\n            [ariaLabel]=\"t().uiProfile\"\n            [tooltip]=\"t().uiProfile\"\n            (clicked)=\"onProfileClick()\" />\n    </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,SAAS,GAAW,WAAW;AAErC;;;;;;;;;;;;;;;;;AAiBG;MAoBU,iBAAiB,CAAA;AAnB9B,IAAA,WAAA,GAAA;AAoBuB,QAAA,IAAA,CAAA,CAAC,GAA2B,MAAM,CAAC,aAAa,CAAC;QAEpD,IAAA,CAAA,SAAS,GAAoD,KAAK,CAAwB,KAAK,iFAC3G,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,UAAU,GAAwD,KAAK,CAA4B,KAAK,kFACpH,SAAS,EAAE,gBAAgB,EAAA,CAC7B;QAEc,IAAA,CAAA,SAAS,GAA2B,MAAM,EAAQ;QAClD,IAAA,CAAA,WAAW,GAA2B,MAAM,EAAQ;QACpD,IAAA,CAAA,YAAY,GAA2B,MAAM,EAAQ;AAaxE,IAAA;IAXa,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;IACzB;IAEU,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;IAC3B;IAEU,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC5B;8GA1BS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,ujBC5D9B,q6CA6CA,EAAA,MAAA,EAAA,CAAA,06DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;ADIQ,gBAAA,qBAAqB,8PACrB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,wEACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOP,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;+BACI,WAAW,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,qBAAqB;wBACrB,eAAe;wBACf,cAAc;wBACd,aAAa;wBACb,YAAY;AACf,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,q6CAAA,EAAA,MAAA,EAAA,CAAA,06DAAA,CAAA,EAAA;;;AE1DL;;AAEG;;;;"}

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

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { computed, input, booleanAttribute, numberAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import { RtRippleDirective } from '@rt-tools/ui-kit-v2/ripple';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+
+const BEM_BLOCK = 'rt-icon-button';
+/**
+ * Универсальная icon-only кнопка кита.
+ *
+ * Рендерит свой собственный `<button type="...">` внутри template (НЕ host-button).
+ * Все цвета и размеры — через семантические `--rt-*` токены; геометрия квадрата
+ * берётся из `--rt-icon-button-size`, а без него — из шага `size`. Свойство, заданное на теге
+ * `<rt-icon-button>` или выше, доходит до кнопки; так же и `--rt-icon-button-bg`.
+ *
+ * Loading state — заменяет иконку на `<rt-icon name="spinner">` и блокирует
+ * клики (`button[disabled]`). Active state управляет `aria-pressed` (для toggle-кнопок).
+ * Indicator — небольшой dot top-right через BEM-элемент `__indicator`.
+ *
+ * BEM-разметка — через `rtBlock="rt-icon-button"` + `[rtMod]` объект; камелкейс
+ * модификаторов автоматически конвертируется директивой в kebab-case
+ * (`hasIndicator` → `rt-icon-button--has-indicator`).
+ */
+class RtIconButtonComponent {
+    constructor() {
+        /**
+         * Размер дочерней `<rt-icon>`. По умолчанию маппится 1-к-1 от размера кнопки,
+         * но потребитель может задать свой: у крупной кнопки-действия (плавающая
+         * кнопка чата) иконка во весь диаметр выглядит тяжеловесно, а сама кнопка
+         * должна остаться большой — в неё целятся пальцем.
+         */
+        this.resolvedIconSize = computed(() => {
+            const map = {
+                '2xs': 'sm',
+                xs: 'sm',
+                sm: 'sm',
+                md: 'md',
+                lg: 'lg',
+                xl: 'xl',
+                '2xl': '2xl',
+            };
+            return this.iconSize() ?? map[this.size()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []));
+        /** Кнопка отключена, если установлен disabled ИЛИ loading. */
+        this.isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * BEM-модификаторы для `[rtMod]`. Собираем в .ts (а не в шаблоне), потому что
+         * Angular template-parser не поддерживает computed property keys в inline-объектах.
+         * camelCase ключи `hasIndicator` директива автоматически конвертирует в `has-indicator`.
+         */
+        this.bemMods = computed(() => ({
+            [this.variant()]: true,
+            [this.size()]: true,
+            loading: this.loading(),
+            active: this.active(),
+            hasIndicator: this.indicator(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bemMods" }] : /* istanbul ignore next */ []));
+        /**
+         * Имя иконки в наборе кита. Нужно оно или `glyph`; когда переданы оба, побеждает имя. Нет ни
+         * того ни другого — значок кит не рисует, и кнопка показывает вложенное содержимое: свой
+         * рисунок приложения встаёт в кнопку с её размером, формой и состояниями.
+         */
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Имя Material вместо имени кита — рисуется так же, как вход `glyph` у `rt-icon`. */
+        this.glyph = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        /** Доступное имя для screen-reader'ов — обязательно (icon-only кнопка). */
+        this.ariaLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Семантическая палитра. */
+        this.variant = input('ghost', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Цвет самой иконки. Default `current` — иконка наследует цвет текста кнопки
+         * (поведение по умолчанию). Явное значение нужно, когда иконка должна
+         * отличаться от текста кнопки — например крестик-очистка внутри поля,
+         * который должен совпадать по цвету с иконками-аффордансами самого поля.
+         */
+        this.iconColor = input('current', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
+        /**
+         * Залитый рисунок значка вместо контурного — как `fill` у `rt-icon`. Рисует его материальный
+         * набор; значок своего набора один и от признака не меняется.
+         */
+        this.iconFill = input(false, { ...(ngDevMode ? { debugName: "iconFill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Размер квадрата. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Размер иконки; пусто — берётся от размера кнопки. */
+        this.iconSize = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        /** HTML-type для нативного `<button>`. */
+        this.type = input('button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Текст styled-tooltip'а (`rtTooltip`), показывается на hover/focus. Пустая
+         * строка → tooltip выключен. Для icon-only кнопок обычно дублирует `ariaLabel`.
+         */
+        this.tooltip = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        /**
+         * Tabindex внутренней `<button>`. Default `0` (в обычном таб-порядке).
+         * Значение `-1` исключает кнопку из таб-навигации, оставляя клик мышью —
+         * нужно для вспомогательных аффордансов вроде крестика-очистки внутри поля.
+         */
+        this.tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Состояние загрузки: показывает spinner вместо иконки + disabled. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Нативное отключение кнопки. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Toggle-состояние — превращается в `aria-pressed="true"`. */
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Бейдж-индикатор (dot top-right через BEM-модификатор). */
+        this.indicator = input(false, { ...(ngDevMode ? { debugName: "indicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Эмиттит MouseEvent при клике (только когда не disabled и не loading). */
+        this.clicked = output();
+    }
+    onClick(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtIconButtonComponent, isStandalone: true, selector: "rt-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconFill: { classPropertyName: "iconFill", publicName: "iconFill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "rt-icon-button" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    rtRipple\n    [rippleDisabled]=\"isDisabled() || loading()\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else if (icon() || glyph()) {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [glyph]=\"glyph()\" [size]=\"resolvedIconSize()\" [fill]=\"iconFill()\" />\n    } @else {\n        <span rtElem=\"content\" qa-dataid=\"icon-button-content\"><ng-content /></span>\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-icon-button{display:inline-flex;--rt-icon-button-color: var(--rt-color-text-primary)}rt-icon-button .rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md);--rt-icon-button-indicator-radius: var(--rt-radius-full);--rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);--rt-icon-button-shadow: var(--rt-shadow-none);--rt-icon-button-shadow-hover: var(--rt-icon-button-shadow);--rt-icon-button-color-hover: var(--rt-icon-button-color);--rt-icon-button-transition-duration: var(--rt-duration-fast);--rt-icon-button-bg-variant: transparent;--rt-icon-button-size-step: var(--rt-control-height-md);position:relative;display:inline-flex;width:var(--rt-icon-button-size, var(--rt-icon-button-size-step));height:var(--rt-icon-button-size, var(--rt-icon-button-size-step));align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-icon-button-radius);background-color:var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));box-shadow:var(--rt-icon-button-shadow);color:var(--rt-icon-button-color);cursor:pointer;transition:background-color var(--rt-icon-button-transition-duration) ease,box-shadow var(--rt-icon-button-transition-duration) ease}rt-icon-button .rt-icon-button--2xs{--rt-icon-button-size-step: var(--rt-size-5)}rt-icon-button .rt-icon-button--xs{--rt-icon-button-size-step: 22px}rt-icon-button .rt-icon-button--sm{--rt-icon-button-size-step: var(--rt-control-height-sm)}rt-icon-button .rt-icon-button--md{--rt-icon-button-size-step: var(--rt-control-height-md)}rt-icon-button .rt-icon-button--lg{--rt-icon-button-size-step: var(--rt-control-height-lg)}rt-icon-button .rt-icon-button--xl{--rt-icon-button-size-step: var(--rt-control-height-xl)}rt-icon-button .rt-icon-button--2xl{--rt-icon-button-size-step: var(--rt-control-height-2xl)}rt-icon-button .rt-icon-button:hover:not(:disabled){box-shadow:var(--rt-icon-button-shadow-hover)}rt-icon-button .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));color:var(--rt-icon-button-color-hover)}rt-icon-button .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--primary{--rt-icon-button-bg-variant: var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}rt-icon-button .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover))}rt-icon-button .rt-icon-button--secondary{--rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}rt-icon-button .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger{color:var(--rt-color-state-danger)}rt-icon-button .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success{color:var(--rt-color-state-success)}rt-icon-button .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning{color:var(--rt-color-state-warning)}rt-icon-button .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button:disabled{background-color:color-mix(in srgb,var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),transparent);cursor:not-allowed;opacity:var(--rt-icon-button-disabled-opacity)}rt-icon-button .rt-icon-button:disabled .rt-icon svg{color:var(--rt-icon-button-disabled-color)}rt-icon-button .rt-icon-button:focus-visible{box-shadow:var(--rt-icon-button-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-icon-button .rt-icon-button__content{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}rt-icon-button .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}rt-icon-button .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-icon-button-indicator-radius);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}rt-icon-button[data-rt-radius=none]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-none)}rt-icon-button[data-rt-radius=xs]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xs)}rt-icon-button[data-rt-radius=sm]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-sm)}rt-icon-button[data-rt-radius=ms]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-ms)}rt-icon-button[data-rt-radius=md]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md)}rt-icon-button[data-rt-radius=lg]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-lg)}rt-icon-button[data-rt-radius=xl]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xl)}rt-icon-button[data-rt-radius=\"2xl\"]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-2xl)}rt-icon-button[data-rt-radius=full]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-full)}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtRippleDirective, selector: "[rtRipple]", inputs: ["rippleDisabled"] }, { 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: RtIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        RtRippleDirective,
+                        RtTooltipDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    rtRipple\n    [rippleDisabled]=\"isDisabled() || loading()\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else if (icon() || glyph()) {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [glyph]=\"glyph()\" [size]=\"resolvedIconSize()\" [fill]=\"iconFill()\" />\n    } @else {\n        <span rtElem=\"content\" qa-dataid=\"icon-button-content\"><ng-content /></span>\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-icon-button{display:inline-flex;--rt-icon-button-color: var(--rt-color-text-primary)}rt-icon-button .rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md);--rt-icon-button-indicator-radius: var(--rt-radius-full);--rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);--rt-icon-button-shadow: var(--rt-shadow-none);--rt-icon-button-shadow-hover: var(--rt-icon-button-shadow);--rt-icon-button-color-hover: var(--rt-icon-button-color);--rt-icon-button-transition-duration: var(--rt-duration-fast);--rt-icon-button-bg-variant: transparent;--rt-icon-button-size-step: var(--rt-control-height-md);position:relative;display:inline-flex;width:var(--rt-icon-button-size, var(--rt-icon-button-size-step));height:var(--rt-icon-button-size, var(--rt-icon-button-size-step));align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-icon-button-radius);background-color:var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));box-shadow:var(--rt-icon-button-shadow);color:var(--rt-icon-button-color);cursor:pointer;transition:background-color var(--rt-icon-button-transition-duration) ease,box-shadow var(--rt-icon-button-transition-duration) ease}rt-icon-button .rt-icon-button--2xs{--rt-icon-button-size-step: var(--rt-size-5)}rt-icon-button .rt-icon-button--xs{--rt-icon-button-size-step: 22px}rt-icon-button .rt-icon-button--sm{--rt-icon-button-size-step: var(--rt-control-height-sm)}rt-icon-button .rt-icon-button--md{--rt-icon-button-size-step: var(--rt-control-height-md)}rt-icon-button .rt-icon-button--lg{--rt-icon-button-size-step: var(--rt-control-height-lg)}rt-icon-button .rt-icon-button--xl{--rt-icon-button-size-step: var(--rt-control-height-xl)}rt-icon-button .rt-icon-button--2xl{--rt-icon-button-size-step: var(--rt-control-height-2xl)}rt-icon-button .rt-icon-button:hover:not(:disabled){box-shadow:var(--rt-icon-button-shadow-hover)}rt-icon-button .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));color:var(--rt-icon-button-color-hover)}rt-icon-button .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--primary{--rt-icon-button-bg-variant: var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}rt-icon-button .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover))}rt-icon-button .rt-icon-button--secondary{--rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}rt-icon-button .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger{color:var(--rt-color-state-danger)}rt-icon-button .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success{color:var(--rt-color-state-success)}rt-icon-button .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning{color:var(--rt-color-state-warning)}rt-icon-button .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover))}rt-icon-button .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button:disabled{background-color:color-mix(in srgb,var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),transparent);cursor:not-allowed;opacity:var(--rt-icon-button-disabled-opacity)}rt-icon-button .rt-icon-button:disabled .rt-icon svg{color:var(--rt-icon-button-disabled-color)}rt-icon-button .rt-icon-button:focus-visible{box-shadow:var(--rt-icon-button-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-icon-button .rt-icon-button__content{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}rt-icon-button .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}rt-icon-button .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-icon-button-indicator-radius);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}rt-icon-button[data-rt-radius=none]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-none)}rt-icon-button[data-rt-radius=xs]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xs)}rt-icon-button[data-rt-radius=sm]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-sm)}rt-icon-button[data-rt-radius=ms]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-ms)}rt-icon-button[data-rt-radius=md]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-md)}rt-icon-button[data-rt-radius=lg]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-lg)}rt-icon-button[data-rt-radius=xl]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-xl)}rt-icon-button[data-rt-radius=\"2xl\"]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-2xl)}rt-icon-button[data-rt-radius=full]>.rt-icon-button{--rt-icon-button-radius: var(--rt-radius-full)}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], iconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFill", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+/**
+ * Модель `<rt-icon-button>`: один корневой неймспейс с префиксом `I`.
+ * Внутри — литеральные union-типы для variant / size / type, чтобы:
+ *  - использовать как контракт `input()` сигналов компонента;
+ *  - переиспользовать в `argTypes` Storybook.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtIconButtonComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-icon-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-icon-button.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/icon-button/rt-icon-button.component.ts","../../../projects/ui-kit-v2/src/lib/components/icon-button/rt-icon-button.component.html","../../../projects/ui-kit-v2/src/lib/components/icon-button/rt-icon-button.model.ts","../../../projects/ui-kit-v2/src/lib/components/icon-button/rt-tools-ui-kit-v2-icon-button.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    numberAttribute,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtRippleDirective } from '@rt-tools/ui-kit-v2/ripple';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { IRtIconButton } from './rt-icon-button.model';\n\nconst BEM_BLOCK: string = 'rt-icon-button';\n\n/**\n * Универсальная icon-only кнопка кита.\n *\n * Рендерит свой собственный `<button type=\"...\">` внутри template (НЕ host-button).\n * Все цвета и размеры — через семантические `--rt-*` токены; геометрия квадрата\n * берётся из `--rt-icon-button-size`, а без него — из шага `size`. Свойство, заданное на теге\n * `<rt-icon-button>` или выше, доходит до кнопки; так же и `--rt-icon-button-bg`.\n *\n * Loading state — заменяет иконку на `<rt-icon name=\"spinner\">` и блокирует\n * клики (`button[disabled]`). Active state управляет `aria-pressed` (для toggle-кнопок).\n * Indicator — небольшой dot top-right через BEM-элемент `__indicator`.\n *\n * BEM-разметка — через `rtBlock=\"rt-icon-button\"` + `[rtMod]` объект; камелкейс\n * модификаторов автоматически конвертируется директивой в kebab-case\n * (`hasIndicator` → `rt-icon-button--has-indicator`).\n */\n@Component({\n    selector: 'rt-icon-button',\n    templateUrl: './rt-icon-button.component.html',\n    styleUrls: ['./rt-icon-button.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        RtRippleDirective,\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 RtIconButtonComponent {\n    /**\n     * Размер дочерней `<rt-icon>`. По умолчанию маппится 1-к-1 от размера кнопки,\n     * но потребитель может задать свой: у крупной кнопки-действия (плавающая\n     * кнопка чата) иконка во весь диаметр выглядит тяжеловесно, а сама кнопка\n     * должна остаться большой — в неё целятся пальцем.\n     */\n    protected readonly resolvedIconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => {\n        const map: Readonly<Record<IRtIconButton.Size, IRtIcon.Size>> = {\n            '2xs': 'sm',\n            xs: 'sm',\n            sm: 'sm',\n            md: 'md',\n            lg: 'lg',\n            xl: 'xl',\n            '2xl': '2xl',\n        };\n        return this.iconSize() ?? map[this.size()];\n    });\n\n    /** Кнопка отключена, если установлен disabled ИЛИ loading. */\n    protected readonly isDisabled: Signal<boolean> = computed((): boolean => this.disabled() || this.loading());\n\n    /**\n     * BEM-модификаторы для `[rtMod]`. Собираем в .ts (а не в шаблоне), потому что\n     * Angular template-parser не поддерживает computed property keys в inline-объектах.\n     * camelCase ключи `hasIndicator` директива автоматически конвертирует в `has-indicator`.\n     */\n    protected readonly bemMods: Signal<Record<string, boolean>> = computed((): Record<string, boolean> => ({\n        [this.variant()]: true,\n        [this.size()]: true,\n        loading: this.loading(),\n        active: this.active(),\n        hasIndicator: this.indicator(),\n    }));\n\n    /**\n     * Имя иконки в наборе кита. Нужно оно или `glyph`; когда переданы оба, побеждает имя. Нет ни\n     * того ни другого — значок кит не рисует, и кнопка показывает вложенное содержимое: свой\n     * рисунок приложения встаёт в кнопку с её размером, формой и состояниями.\n     */\n    public readonly icon: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Имя Material вместо имени кита — рисуется так же, как вход `glyph` у `rt-icon`. */\n    public readonly glyph: InputSignal<string | null> = input<string | null>(null);\n\n    /** Доступное имя для screen-reader'ов — обязательно (icon-only кнопка). */\n    public readonly ariaLabel: InputSignal<string> = input.required<string>();\n\n    /** Семантическая палитра. */\n    public readonly variant: InputSignal<IRtIconButton.Variant> = input<IRtIconButton.Variant>('ghost');\n\n    /**\n     * Цвет самой иконки. Default `current` — иконка наследует цвет текста кнопки\n     * (поведение по умолчанию). Явное значение нужно, когда иконка должна\n     * отличаться от текста кнопки — например крестик-очистка внутри поля,\n     * который должен совпадать по цвету с иконками-аффордансами самого поля.\n     */\n    public readonly iconColor: InputSignal<IRtIcon.Color> = input<IRtIcon.Color>('current');\n\n    /**\n     * Залитый рисунок значка вместо контурного — как `fill` у `rt-icon`. Рисует его материальный\n     * набор; значок своего набора один и от признака не меняется.\n     */\n    public readonly iconFill: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Размер квадрата. */\n    public readonly size: InputSignal<IRtIconButton.Size> = input<IRtIconButton.Size>('md');\n\n    /** Размер иконки; пусто — берётся от размера кнопки. */\n    public readonly iconSize: InputSignal<IRtIcon.Size | null> = input<IRtIcon.Size | null>(null);\n\n    /** HTML-type для нативного `<button>`. */\n    public readonly type: InputSignal<IRtIconButton.Type> = input<IRtIconButton.Type>('button');\n\n    /**\n     * Текст styled-tooltip'а (`rtTooltip`), показывается на hover/focus. Пустая\n     * строка → tooltip выключен. Для icon-only кнопок обычно дублирует `ariaLabel`.\n     */\n    public readonly tooltip: InputSignal<string> = input<string>('');\n\n    /**\n     * Tabindex внутренней `<button>`. Default `0` (в обычном таб-порядке).\n     * Значение `-1` исключает кнопку из таб-навигации, оставляя клик мышью —\n     * нужно для вспомогательных аффордансов вроде крестика-очистки внутри поля.\n     */\n    public readonly tabIndex: InputSignalWithTransform<number, NumberInput> = input<number, NumberInput>(0, { transform: numberAttribute });\n\n    /** Состояние загрузки: показывает spinner вместо иконки + disabled. */\n    public readonly loading: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Нативное отключение кнопки. */\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Toggle-состояние — превращается в `aria-pressed=\"true\"`. */\n    public readonly active: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Бейдж-индикатор (dot top-right через BEM-модификатор). */\n    public readonly indicator: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Эмиттит MouseEvent при клике (только когда не disabled и не loading). */\n    public readonly clicked: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n    protected onClick(event: MouseEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        this.clicked.emit(event);\n    }\n}\n","<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    rtRipple\n    [rippleDisabled]=\"isDisabled() || loading()\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else if (icon() || glyph()) {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [glyph]=\"glyph()\" [size]=\"resolvedIconSize()\" [fill]=\"iconFill()\" />\n    } @else {\n        <span rtElem=\"content\" qa-dataid=\"icon-button-content\"><ng-content /></span>\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n","/**\n * Модель `<rt-icon-button>`: один корневой неймспейс с префиксом `I`.\n * Внутри — литеральные union-типы для variant / size / type, чтобы:\n *  - использовать как контракт `input()` сигналов компонента;\n *  - переиспользовать в `argTypes` Storybook.\n */\n\nexport namespace IRtIconButton {\n    /** Семантическая палитра кнопки. */\n    export type Variant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning';\n\n    /**\n     * Размер квадрата кнопки. Шаги — в SCSS; `xs` — 22px и `2xs` — 20px, оба со значком 16px.\n     * Свой размер задаёт `--rt-icon-button-size` на теге или выше.\n     */\n    export type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n    /** HTML-тип нативного `<button>`. */\n    export type Type = 'button' | 'submit';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,SAAS,GAAW,gBAAgB;AAE1C;;;;;;;;;;;;;;;AAeG;MAqBU,qBAAqB,CAAA;AApBlC,IAAA,WAAA,GAAA;AAqBI;;;;;AAKG;AACgB,QAAA,IAAA,CAAA,gBAAgB,GAAyB,QAAQ,CAAC,MAAmB;AACpF,YAAA,MAAM,GAAG,GAAuD;AAC5D,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,EAAE,EAAE,IAAI;AACR,gBAAA,EAAE,EAAE,IAAI;AACR,gBAAA,EAAE,EAAE,IAAI;AACR,gBAAA,EAAE,EAAE,IAAI;AACR,gBAAA,EAAE,EAAE,IAAI;AACR,gBAAA,KAAK,EAAE,KAAK;aACf;AACD,YAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAC9C,CAAC;6FAAC;;AAGiB,QAAA,IAAA,CAAA,UAAU,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;uFAAC;AAE3G;;;;AAIG;AACgB,QAAA,IAAA,CAAA,OAAO,GAAoC,QAAQ,CAAC,OAAgC;AACnG,YAAA,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;AACtB,YAAA,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;AACnB,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;AACrB,YAAA,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;SACjC,CAAC;oFAAC;AAEH;;;;AAIG;QACa,IAAA,CAAA,IAAI,GAAqC,KAAK,CAAsB,IAAI;iFAAC;;QAGzE,IAAA,CAAA,KAAK,GAA+B,KAAK,CAAgB,IAAI;kFAAC;;QAG9D,IAAA,CAAA,SAAS,GAAwB,KAAK,CAAC,QAAQ;sFAAU;;QAGzD,IAAA,CAAA,OAAO,GAAuC,KAAK,CAAwB,OAAO;oFAAC;AAEnG;;;;;AAKG;QACa,IAAA,CAAA,SAAS,GAA+B,KAAK,CAAgB,SAAS;sFAAC;AAEvF;;;AAGG;QACa,IAAA,CAAA,QAAQ,GAAoD,KAAK,CAAwB,KAAK,gFAC1G,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,IAAI,GAAoC,KAAK,CAAqB,IAAI;iFAAC;;QAGvE,IAAA,CAAA,QAAQ,GAAqC,KAAK,CAAsB,IAAI;qFAAC;;QAG7E,IAAA,CAAA,IAAI,GAAoC,KAAK,CAAqB,QAAQ;iFAAC;AAE3F;;;AAGG;QACa,IAAA,CAAA,OAAO,GAAwB,KAAK,CAAS,EAAE;oFAAC;AAEhE;;;;AAIG;QACa,IAAA,CAAA,QAAQ,GAAkD,KAAK,CAAsB,CAAC,gFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;;QAGvH,IAAA,CAAA,OAAO,GAAoD,KAAK,CAAwB,KAAK,+EACzG,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,QAAQ,GAAoD,KAAK,CAAwB,KAAK,gFAC1G,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,MAAM,GAAoD,KAAK,CAAwB,KAAK,8EACxG,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,SAAS,GAAoD,KAAK,CAAwB,KAAK,iFAC3G,SAAS,EAAE,gBAAgB,EAAA,CAC7B;;QAGc,IAAA,CAAA,OAAO,GAAiC,MAAM,EAAc;AAQ/E,IAAA;AANa,IAAA,OAAO,CAAC,KAAiB,EAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACnB;QACJ;AACA,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IAC5B;8GAtHS,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,mlEC/DlC,k8BAwBA,EAAA,MAAA,EAAA,CAAA,koLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBD2BQ,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,iBAAiB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,kBAAkB,wJAClB,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOP,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBApBjC,SAAS;+BACI,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,eAAe;wBACf,iBAAiB;wBACjB,kBAAkB;wBAClB,cAAc;wBACd,aAAa;wBACb,YAAY;AACf,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,k8BAAA,EAAA,MAAA,EAAA,CAAA,koLAAA,CAAA,EAAA;;;AE7DL;;;;;AAKG;;ACLH;;AAEG;;;;"}