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

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

@@ -1,163 +1,452 @@
-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.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, input, numberAttribute, output } 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";
+var RtIconButtonComponent = class RtIconButtonComponent {
+	constructor() {
+		this.resolvedIconSize = computed(() => {
+			return this.iconSize() ?? {
+				"2xs": "sm",
+				xs: "sm",
+				sm: "sm",
+				md: "md",
+				lg: "lg",
+				xl: "xl",
+				"2xl": "2xl"
+			}[this.size()];
+		}, ...ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []);
+		this.isDisabled = computed(() => this.disabled() || this.loading(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+		this.bemMods = computed(() => ({
+			[this.variant()]: true,
+			[this.size()]: true,
+			loading: this.loading(),
+			active: this.active(),
+			hasIndicator: this.indicator()
+		}), ...ngDevMode ? [{ debugName: "bemMods" }] : /* istanbul ignore next */ []);
+		this.icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.glyph = input(null, ...ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.variant = input("ghost", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.iconColor = input("current", ...ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []);
+		this.iconFill = input(false, {
+			...ngDevMode ? { debugName: "iconFill" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.iconSize = input(null, ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+		this.type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+		this.tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+		this.tooltipHideOnClick = input(true, {
+			...ngDevMode ? { debugName: "tooltipHideOnClick" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.tabIndex = input(0, {
+			...ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.active = input(false, {
+			...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.expanded = input(null, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+		this.indicator = input(false, {
+			...ngDevMode ? { debugName: "indicator" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.clicked = output();
+	}
+	onClick(event) {
+		if (this.isDisabled()) return;
+		this.clicked.emit(event);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtIconButtonComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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
+				},
+				tooltipHideOnClick: {
+					classPropertyName: "tooltipHideOnClick",
+					publicName: "tooltipHideOnClick",
+					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
+				},
+				expanded: {
+					classPropertyName: "expanded",
+					publicName: "expanded",
+					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    [rtTooltipHideOnClick]=\"tooltipHideOnClick()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.aria-expanded]=\"expanded()\"\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: 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",
+						"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: RtIconButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-icon-button",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				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    [rtTooltipHideOnClick]=\"tooltipHideOnClick()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.aria-expanded]=\"expanded()\"\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
+			}]
+		}],
+		tooltipHideOnClick: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipHideOnClick",
+				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
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}],
+		indicator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indicator",
+				required: false
+			}]
+		}],
+		clicked: [{
+			type: i0.Output,
+			args: ["clicked"]
+		}]
+	}
+});
 export { RtIconButtonComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-icon-button.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-icon-button.mjs.map