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

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

@@ -1,365 +1,439 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, computed, input, booleanAttribute, afterNextRender, untracked, effect, HostBinding, Directive } from '@angular/core';
-import { rtKitDefault, RT_RADIUS_DEFAULT } from '@rt-tools/ui-kit-v2/core';
-import * as i2 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-import { RtIconRegistry, RT_ICON_GLYPH_STRATEGY, RtIconFontService, resolveIconGlyph, RT_ICON_MATERIAL_PRESET_SELECTOR, iconMaterialDrawn } from '@rt-tools/ui-kit-v2/icon';
-import * as i1 from '@rt-tools/ui-kit-v2/ripple';
-import { RtRippleDirective } from '@rt-tools/ui-kit-v2/ripple';
-
-const BEM_BLOCK = 'rt-button';
-/** Длительность затухания спиннера при выходе из загрузки. */
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, HostBinding, Renderer2, afterNextRender, booleanAttribute, computed, effect, inject, input, untracked } from "@angular/core";
+import { RT_RADIUS_DEFAULT, rtKitDefault } from "@rt-tools/ui-kit-v2/core";
+import * as i2 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+import { RT_ICON_GLYPH_STRATEGY, RT_ICON_MATERIAL_PRESET_SELECTOR, RtIconFontService, RtIconRegistry, iconMaterialDrawn, resolveIconGlyph } from "@rt-tools/ui-kit-v2/icon";
+import * as i1 from "@rt-tools/ui-kit-v2/ripple";
+import { RtRippleDirective } from "@rt-tools/ui-kit-v2/ripple";
+const BEM_BLOCK = "rt-button";
 const LOADING_FADE_OUT_MS = 300;
-/** Запас поверх затухания, после которого подпись возвращается без анимации. */
-const LOADING_FADE_OUT_BUFFER_MS = 50;
-/**
- * Директива стилизованной кнопки. Применяется к `<button>` или `<a>`
- * (для ссылок-кнопок с `routerLink`/`href`).
- *
- * Иконка и лейбл рендерятся внутрь элемента через `Renderer2`, чтобы можно
- * было применять директиву к существующему элементу без обёртки.
- * Поддерживает анимированный переход в/из loading.
- *
- * @example
- * ```html
- * <button rtButton label="Войти" theme="primary"></button>
- * <button rtButton label="Скачать" icon="ico-download" theme="success"></button>
- * <button rtButton icon="pencil" theme="info" appearance="text"></button>
- * <button rtButton label="Сохранение..." [loading]="saving()" [disabled]="saving()"></button>
- * <a rtButton label="Главная" [routerLink]="'/'"></a>
- * ```
- */
-class RtButtonDirective {
-    #el;
-    #renderer;
-    #doc;
-    #iconRegistry;
-    #glyphStrategy;
-    #fontReady;
-    /* С чего стартуют три входа, которые приложение вправе задать киту разом. Значение считается
-       из настроек при объявлении входа: так публичный вид входа не меняется — ни тип, ни имя, — а
-       вход, написанный в разметке, по-прежнему перебивает всё. Цена — настройки читаются один раз,
-       когда узел создан. */
-    #appearance;
-    #size;
-    #iconEl;
-    #labelEl;
-    #spinnerEl;
-    #wasLoading;
-    constructor() {
-        this.#el = inject(ElementRef);
-        this.#renderer = inject(Renderer2);
-        this.#doc = inject(DOCUMENT);
-        this.#iconRegistry = inject(RtIconRegistry);
-        this.#glyphStrategy = inject(RT_ICON_GLYPH_STRATEGY);
-        this.#fontReady = inject(RtIconFontService).ready;
-        /* С чего стартуют три входа, которые приложение вправе задать киту разом. Значение считается
-           из настроек при объявлении входа: так публичный вид входа не меняется — ни тип, ни имя, — а
-           вход, написанный в разметке, по-прежнему перебивает всё. Цена — настройки читаются один раз,
-           когда узел создан. */
-        this.#appearance = rtKitDefault('button', (it) => it.appearance, 'filled');
-        this.#size = rtKitDefault('button', (it) => it.size, 'md');
-        this.#iconEl = null;
-        this.#labelEl = null;
-        this.#spinnerEl = null;
-        this.#wasLoading = false;
-        this.isIconOnly = computed(() => !!this.icon() && !this.label(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
-        /** Текстовый лейбл кнопки. Если null — кнопка только с иконкой. */
-        this.label = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /**
-         * Значок кнопки: имя кита (`check`) или имя Material (`arrow_back`). Имя Material рисуется
-         * так же, как вход `glyph` у `rt-icon`: парой из перечня кита или лигатурой шрифта — по
-         * настройке `glyphStrategy` у `provideRtIcons()`. Если null — без иконки.
-         */
-        this.icon = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        /** Сторона размещения иконки относительно лейбла. */
-        this.iconPos = input('left', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
-        /** Семантическая палитра. */
-        this.theme = input('primary', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-        /** Внешний вид (filled / outlined / text). Умолчание — из настроек кита. */
-        this.appearance = input(this.#appearance, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-        /** Размер. Умолчание — из настроек кита. */
-        this.size = input(this.#size, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        /** Состояние загрузки: показывает спиннер вместо иконки, блокирует клики. */
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Кастомный CSS-класс иконки в loading. Если null — встроенный CSS-спиннер. */
-        this.loadingIcon = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
-        /**
-         * Подпись во время загрузки. `hide` оставляет подпись и иконку в кнопке невидимыми — ширина
-         * не скачет, — а спиннер ставит по центру; имя кнопки для скринридера остаётся.
-         */
-        this.loadingLabel = input('keep', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * Положение двухпозиционной кнопки: `true` — нажата, `false` — отжата, `null` — положения нет
-         * вовсе.
-         *
-         * Три значения, а не два, потому что обычная кнопка переключателем не является и объявлять
-         * себя двухпозиционной не должна: сказанное вспомогательным средствам «эта кнопка отжата» на
-         * кнопке, которая просто запускает действие, — ложь, а не умолчание. Отжатое положение при
-         * этом объявляется наравне с нажатым: молчащая в отжатом виде кнопка неотличима от обычной, и
-         * о втором положении узнают только нажав.
-         *
-         * Само по нажатию положение не меняется: кнопка говорит о нажатии наружу, а положение
-         * возвращает вызывающий — иначе вид кнопки и состояние приложения расходятся при первом же
-         * отказе сохранения.
-         */
-        this.pressed = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => untracked(() => this.#updateContent()));
-        effect(() => {
-            this.label();
-            this.icon();
-            this.iconPos();
-            this.loading();
-            this.loadingIcon();
-            this.loadingLabel();
-            // Лигатура до готовности шрифтов скрыта: готовность перерисовывает содержимое.
-            this.#fontReady();
-            untracked(() => this.#updateContent());
-        });
-    }
-    /** Положение наружу: атрибута нет вовсе там, где положения у кнопки не бывает. */
-    get ariaPressed() {
-        const pressed = this.pressed();
-        return pressed === null ? null : String(pressed);
-    }
-    get hostClasses() {
-        const theme = this.theme();
-        const appearance = this.appearance();
-        const size = this.size();
-        return {
-            [BEM_BLOCK]: true,
-            [`${BEM_BLOCK}--${theme}`]: theme !== 'primary',
-            [`${BEM_BLOCK}--outlined`]: appearance === 'outlined',
-            [`${BEM_BLOCK}--text`]: appearance === 'text',
-            [`${BEM_BLOCK}--loading`]: this.loading(),
-            [`${BEM_BLOCK}--loading-label-hidden`]: this.loading() && this.loadingLabel() === 'hide',
-            [`${BEM_BLOCK}--icon-only`]: this.isIconOnly(),
-            [`${BEM_BLOCK}--${size}`]: size !== 'md',
-            [`${BEM_BLOCK}--pressed`]: this.pressed() === true,
-        };
-    }
-    #updateContent() {
-        const button = this.#el.nativeElement;
-        const isLoading = this.loading();
-        const wasLoading = this.#wasLoading;
-        this.#wasLoading = isLoading;
-        if (wasLoading && !isLoading) {
-            this.#transitionFromLoading(button);
-            return;
-        }
-        this.#clearContent(button);
-        if (isLoading) {
-            this.#renderLoading(button);
-            return;
-        }
-        this.#renderIconAndLabel(button);
-    }
-    #transitionFromLoading(button) {
-        const spinnerEl = this.#spinnerEl;
-        if (spinnerEl === null) {
-            this.#restoreContent(button);
-            return;
-        }
-        spinnerEl.style.animation = `rt-button-fade-out ${LOADING_FADE_OUT_MS}ms ease-out forwards`;
-        // settled-гард делает animationend и страховочный таймаут взаимно
-        // идемпотентными — сработает и снимет listener только то, что раньше.
-        // Без таймаута подпись возвращалась бы только по анимации, а она не
-        // идёт, пока кнопка спрятана (свёрнутая панель, неактивная вкладка):
-        // выход из загрузки не наступал никогда, и на кнопке навсегда
-        // оставался голый спиннер.
-        let settled = false;
-        const finish = () => {
-            if (settled) {
-                return;
-            }
-            settled = true;
-            spinnerEl.removeEventListener('animationend', finish);
-            this.#restoreContent(button);
-        };
-        spinnerEl.addEventListener('animationend', finish);
-        setTimeout(finish, LOADING_FADE_OUT_MS + LOADING_FADE_OUT_BUFFER_MS);
-    }
-    #restoreContent(button) {
-        this.#clearContent(button);
-        this.#renderIconAndLabel(button);
-    }
-    /**
-     * Чистим по классу, а не по своим ссылкам. Под серверным рендером разметку
-     * кнопки рисует сервер: после гидратации лейбл и иконка уже лежат в DOM, но создавал их
-     * другой экземпляр директивы, и `#labelEl` у клиентского — пустой. Ссылки
-     * тогда не находят ничего, а `#renderIconAndLabel` дорисовывает второй
-     * лейбл — подпись кнопки удваивается («СохранитьСохранить»).
-     */
-    #clearContent(button) {
-        const ownClasses = [`${BEM_BLOCK}__icon`, `${BEM_BLOCK}__label`, `${BEM_BLOCK}__spinner`];
-        // Обход по детям, а не селектором `:scope >`: тот же код исполняется на
-        // сервере, где DOM эмулированный и селекторный движок урезан
-        for (const child of Array.from(button.children)) {
-            if (ownClasses.some((ownClass) => child.classList.contains(ownClass))) {
-                this.#renderer.removeChild(button, child);
-            }
-        }
-        this.#iconEl = null;
-        this.#labelEl = null;
-        this.#spinnerEl = null;
-    }
-    #renderLoading(button) {
-        const loadingIcon = this.loadingIcon();
-        const loader = loadingIcon ? this.#createIcon(loadingIcon) : this.#createSpinner();
-        if (this.loadingLabel() === 'hide') {
-            // Обычное содержимое остаётся и держит ширину; стили гасят его и ставят
-            // загрузчик поверх по центру
-            this.#renderIconAndLabel(button);
-            this.#renderer.addClass(loader, `${BEM_BLOCK}__loader`);
-            this.#renderer.appendChild(button, loader);
-            if (!loadingIcon) {
-                this.#spinnerEl = loader;
-            }
-            return;
-        }
-        if (loadingIcon) {
-            this.#iconEl = loader;
-            this.#renderer.appendChild(button, this.#iconEl);
-        }
-        else {
-            this.#spinnerEl = loader;
-            this.#renderer.appendChild(button, this.#spinnerEl);
-        }
-        const label = this.label();
-        if (label) {
-            this.#labelEl = this.#createLabel(label);
-            this.#renderer.appendChild(button, this.#labelEl);
-        }
-    }
-    #renderIconAndLabel(button) {
-        const iconClass = this.icon();
-        const label = this.label();
-        const pos = this.iconPos();
-        const iconEl = iconClass ? this.#createIcon(iconClass) : null;
-        const labelEl = label ? this.#createLabel(label) : null;
-        if (pos === 'left') {
-            if (iconEl) {
-                this.#renderer.appendChild(button, iconEl);
-            }
-            if (labelEl) {
-                this.#renderer.appendChild(button, labelEl);
-            }
-        }
-        else {
-            if (labelEl) {
-                this.#renderer.appendChild(button, labelEl);
-            }
-            if (iconEl) {
-                this.#renderer.appendChild(button, iconEl);
-            }
-        }
-        this.#iconEl = iconEl;
-        this.#labelEl = labelEl;
-    }
-    #createIcon(iconName) {
-        const resolved = resolveIconGlyph(null, iconName, this.#glyphStrategy);
-        if (resolved?.kind === 'kit') {
-            return this.#createKitIcon(resolved.name);
-        }
-        return this.#createGlyph(iconName);
-    }
-    #createKitIcon(name) {
-        const svg = this.#doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('focusable', 'false');
-        svg.setAttribute('aria-hidden', 'true');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.classList.add(`${BEM_BLOCK}__icon`);
-        // Тот же путь, что и у компонента значка: имя просится у реестра, а он ходит за файлом
-        // один раз на страницу — значок, спрошенный обеими разметками сразу, едет одним запросом.
-        const drawing = this.#drawingOf(name);
-        this.#iconRegistry.request(name, drawing);
-        const use = this.#doc.createElementNS('http://www.w3.org/2000/svg', 'use');
-        use.setAttribute('href', this.#iconRegistry.symbolHref(name, drawing));
-        svg.appendChild(use);
-        return svg;
-    }
-    /**
-     * Набор рисунка — как у компонента значка: материальный рисунок под разметкой с признаком
-     * материального набора, если у имени он есть. Признак читается при каждой отрисовке
-     * содержимого, а после первой отрисовки она повторяется — контейнер к тому времени на месте.
-     */
-    #drawingOf(name) {
-        const underMaterial = this.#el.nativeElement.closest(RT_ICON_MATERIAL_PRESET_SELECTOR) !== null;
-        return underMaterial && iconMaterialDrawn.has(name) ? 'material' : 'base';
-    }
-    /** Лигатура шрифта Material Symbols для имени без пары. Шрифт подключает приложение. */
-    #createGlyph(glyph) {
-        const el = this.#renderer.createElement('span');
-        this.#renderer.addClass(el, `${BEM_BLOCK}__icon`);
-        this.#renderer.addClass(el, `${BEM_BLOCK}__glyph`);
-        if (!this.#fontReady()) {
-            this.#renderer.addClass(el, `${BEM_BLOCK}__glyph--pending`);
-        }
-        this.#renderer.setAttribute(el, 'aria-hidden', 'true');
-        this.#renderer.appendChild(el, this.#renderer.createText(glyph));
-        return el;
-    }
-    #createLabel(text) {
-        const el = this.#renderer.createElement('span');
-        this.#renderer.addClass(el, `${BEM_BLOCK}__label`);
-        this.#renderer.appendChild(el, this.#renderer.createText(text));
-        return el;
-    }
-    #createSpinner() {
-        const wrapper = this.#renderer.createElement('span');
-        this.#renderer.addClass(wrapper, `${BEM_BLOCK}__spinner`);
-        const circle = this.#renderer.createElement('span');
-        this.#renderer.addClass(circle, `${BEM_BLOCK}__spinner-circle`);
-        this.#renderer.appendChild(wrapper, circle);
-        return wrapper;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtButtonDirective, isStandalone: true, selector: "button[rtButton], a[rtButton]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-pressed": "this.ariaPressed", "class": "this.hostClasses" } }, providers: [
-            {
-                provide: RT_RADIUS_DEFAULT,
-                useFactory: () => rtKitDefault('button', (it) => it.radius, null),
-            },
-        ], hostDirectives: [{ directive: i1.RtRippleDirective, inputs: ["rippleDisabled", "rippleDisabled"] }, { directive: i2.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[rtButton], a[rtButton]',
-                    hostDirectives: [
-                        { directive: RtRippleDirective, inputs: ['rippleDisabled'] },
-                        { directive: RtRadiusDirective, inputs: ['radius'] },
-                    ],
-                    /* Шаг скругления без входа берётся из настроек кита: приложение, скруглившее все кнопки разом,
-                       называет шаг один раз, а вход на кнопке по-прежнему сильнее. */
-                    providers: [
-                        {
-                            provide: RT_RADIUS_DEFAULT,
-                            useFactory: () => rtKitDefault('button', (it) => it.radius, null),
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], ariaPressed: [{
-                type: HostBinding,
-                args: ['attr.aria-pressed']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtButtonDirective = class RtButtonDirective {
+	#el;
+	#renderer;
+	#doc;
+	#iconRegistry;
+	#glyphStrategy;
+	#fontReady;
+	#appearance;
+	#size;
+	#iconEl;
+	#labelEl;
+	#spinnerEl;
+	#wasLoading;
+	constructor() {
+		this.#el = inject(ElementRef);
+		this.#renderer = inject(Renderer2);
+		this.#doc = inject(DOCUMENT);
+		this.#iconRegistry = inject(RtIconRegistry);
+		this.#glyphStrategy = inject(RT_ICON_GLYPH_STRATEGY);
+		this.#fontReady = inject(RtIconFontService).ready;
+		this.#appearance = rtKitDefault("button", (it) => it.appearance, "filled");
+		this.#size = rtKitDefault("button", (it) => it.size, "md");
+		this.#iconEl = null;
+		this.#labelEl = null;
+		this.#spinnerEl = null;
+		this.#wasLoading = false;
+		this.isIconOnly = computed(() => !!this.icon() && !this.label(), ...ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []);
+		this.label = input(null, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.iconPos = input("left", ...ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []);
+		this.theme = input("primary", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+		this.appearance = input(this.#appearance, ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.size = input(this.#size, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.loadingIcon = input(null, ...ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []);
+		this.loadingLabel = input("keep", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+		this.pressed = input(null, ...ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []);
+		afterNextRender(() => untracked(() => this.#updateContent()));
+		effect(() => {
+			this.label();
+			this.icon();
+			this.iconPos();
+			this.loading();
+			this.loadingIcon();
+			this.loadingLabel();
+			this.#fontReady();
+			untracked(() => this.#updateContent());
+		});
+	}
+	get ariaPressed() {
+		const pressed = this.pressed();
+		return pressed === null ? null : String(pressed);
+	}
+	get hostClasses() {
+		const theme = this.theme();
+		const appearance = this.appearance();
+		const size = this.size();
+		return {
+			[BEM_BLOCK]: true,
+			[`${BEM_BLOCK}--${theme}`]: theme !== "primary",
+			[`${BEM_BLOCK}--outlined`]: appearance === "outlined",
+			[`${BEM_BLOCK}--text`]: appearance === "text",
+			[`${BEM_BLOCK}--loading`]: this.loading(),
+			[`${BEM_BLOCK}--loading-label-hidden`]: this.loading() && this.loadingLabel() === "hide",
+			[`${BEM_BLOCK}--icon-only`]: this.isIconOnly(),
+			[`${BEM_BLOCK}--${size}`]: size !== "md",
+			[`${BEM_BLOCK}--pressed`]: this.pressed() === true
+		};
+	}
+	#updateContent() {
+		const button = this.#el.nativeElement;
+		const isLoading = this.loading();
+		const wasLoading = this.#wasLoading;
+		this.#wasLoading = isLoading;
+		if (wasLoading && !isLoading) {
+			this.#transitionFromLoading(button);
+			return;
+		}
+		this.#clearContent(button);
+		if (isLoading) {
+			this.#renderLoading(button);
+			return;
+		}
+		this.#renderIconAndLabel(button);
+	}
+	#transitionFromLoading(button) {
+		const spinnerEl = this.#spinnerEl;
+		if (spinnerEl === null) {
+			this.#restoreContent(button);
+			return;
+		}
+		spinnerEl.style.animation = `rt-button-fade-out ${LOADING_FADE_OUT_MS}ms ease-out forwards`;
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			spinnerEl.removeEventListener("animationend", finish);
+			this.#restoreContent(button);
+		};
+		spinnerEl.addEventListener("animationend", finish);
+		setTimeout(finish, 350);
+	}
+	#restoreContent(button) {
+		this.#clearContent(button);
+		this.#renderIconAndLabel(button);
+	}
+	#clearContent(button) {
+		const ownClasses = [
+			`${BEM_BLOCK}__icon`,
+			`${BEM_BLOCK}__label`,
+			`${BEM_BLOCK}__spinner`
+		];
+		for (const child of Array.from(button.children)) if (ownClasses.some((ownClass) => child.classList.contains(ownClass))) this.#renderer.removeChild(button, child);
+		this.#iconEl = null;
+		this.#labelEl = null;
+		this.#spinnerEl = null;
+	}
+	#renderLoading(button) {
+		const loadingIcon = this.loadingIcon();
+		const loader = loadingIcon ? this.#createIcon(loadingIcon) : this.#createSpinner();
+		if (this.loadingLabel() === "hide") {
+			this.#renderIconAndLabel(button);
+			this.#renderer.addClass(loader, `${BEM_BLOCK}__loader`);
+			this.#renderer.appendChild(button, loader);
+			if (!loadingIcon) this.#spinnerEl = loader;
+			return;
+		}
+		if (loadingIcon) {
+			this.#iconEl = loader;
+			this.#renderer.appendChild(button, this.#iconEl);
+		} else {
+			this.#spinnerEl = loader;
+			this.#renderer.appendChild(button, this.#spinnerEl);
+		}
+		const label = this.label();
+		if (label) {
+			this.#labelEl = this.#createLabel(label);
+			this.#renderer.appendChild(button, this.#labelEl);
+		}
+	}
+	#renderIconAndLabel(button) {
+		const iconClass = this.icon();
+		const label = this.label();
+		const pos = this.iconPos();
+		const iconEl = iconClass ? this.#createIcon(iconClass) : null;
+		const labelEl = label ? this.#createLabel(label) : null;
+		if (pos === "left") {
+			if (iconEl) this.#renderer.appendChild(button, iconEl);
+			if (labelEl) this.#renderer.appendChild(button, labelEl);
+		} else {
+			if (labelEl) this.#renderer.appendChild(button, labelEl);
+			if (iconEl) this.#renderer.appendChild(button, iconEl);
+		}
+		this.#iconEl = iconEl;
+		this.#labelEl = labelEl;
+	}
+	#createIcon(iconName) {
+		const resolved = resolveIconGlyph(null, iconName, this.#glyphStrategy);
+		if (resolved?.kind === "kit") return this.#createKitIcon(resolved.name);
+		return this.#createGlyph(iconName);
+	}
+	#createKitIcon(name) {
+		const svg = this.#doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+		svg.setAttribute("focusable", "false");
+		svg.setAttribute("aria-hidden", "true");
+		svg.setAttribute("viewBox", "0 0 24 24");
+		svg.classList.add(`${BEM_BLOCK}__icon`);
+		const drawing = this.#drawingOf(name);
+		this.#iconRegistry.request(name, drawing);
+		const use = this.#doc.createElementNS("http://www.w3.org/2000/svg", "use");
+		use.setAttribute("href", this.#iconRegistry.symbolHref(name, drawing));
+		svg.appendChild(use);
+		return svg;
+	}
+	#drawingOf(name) {
+		return this.#el.nativeElement.closest(RT_ICON_MATERIAL_PRESET_SELECTOR) !== null && iconMaterialDrawn.has(name) ? "material" : "base";
+	}
+	#createGlyph(glyph) {
+		const el = this.#renderer.createElement("span");
+		this.#renderer.addClass(el, `${BEM_BLOCK}__icon`);
+		this.#renderer.addClass(el, `${BEM_BLOCK}__glyph`);
+		if (!this.#fontReady()) this.#renderer.addClass(el, `${BEM_BLOCK}__glyph--pending`);
+		this.#renderer.setAttribute(el, "aria-hidden", "true");
+		this.#renderer.appendChild(el, this.#renderer.createText(glyph));
+		return el;
+	}
+	#createLabel(text) {
+		const el = this.#renderer.createElement("span");
+		this.#renderer.addClass(el, `${BEM_BLOCK}__label`);
+		this.#renderer.appendChild(el, this.#renderer.createText(text));
+		return el;
+	}
+	#createSpinner() {
+		const wrapper = this.#renderer.createElement("span");
+		this.#renderer.addClass(wrapper, `${BEM_BLOCK}__spinner`);
+		const circle = this.#renderer.createElement("span");
+		this.#renderer.addClass(circle, `${BEM_BLOCK}__spinner-circle`);
+		this.#renderer.appendChild(wrapper, circle);
+		return wrapper;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtButtonDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtButtonDirective,
+			isStandalone: true,
+			selector: "button[rtButton], a[rtButton]",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconPos: {
+					classPropertyName: "iconPos",
+					publicName: "iconPos",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				theme: {
+					classPropertyName: "theme",
+					publicName: "theme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				appearance: {
+					classPropertyName: "appearance",
+					publicName: "appearance",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingIcon: {
+					classPropertyName: "loadingIcon",
+					publicName: "loadingIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingLabel: {
+					classPropertyName: "loadingLabel",
+					publicName: "loadingLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				pressed: {
+					classPropertyName: "pressed",
+					publicName: "pressed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { properties: {
+				"attr.aria-pressed": "this.ariaPressed",
+				"class": "this.hostClasses"
+			} },
+			providers: [{
+				provide: RT_RADIUS_DEFAULT,
+				useFactory: () => rtKitDefault("button", (it) => it.radius, null)
+			}],
+			hostDirectives: [{
+				directive: i1.RtRippleDirective,
+				inputs: ["rippleDisabled", "rippleDisabled"]
+			}, {
+				directive: i2.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtButtonDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[rtButton], a[rtButton]",
+			hostDirectives: [{
+				directive: RtRippleDirective,
+				inputs: ["rippleDisabled"]
+			}, {
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			providers: [{
+				provide: RT_RADIUS_DEFAULT,
+				useFactory: () => rtKitDefault("button", (it) => it.radius, null)
+			}]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconPos: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconPos",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		loadingIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingIcon",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		pressed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pressed",
+				required: false
+			}]
+		}],
+		ariaPressed: [{
+			type: HostBinding,
+			args: ["attr.aria-pressed"]
+		}],
+		hostClasses: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
 export { RtButtonDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-button.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-button.mjs.map