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

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":"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"}