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

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

@@ -0,0 +1,674 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, inject, Injectable, numberAttribute, ElementRef, computed, input, booleanAttribute, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { PlatformService, BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { iconsName } from '@rt-tools/ui-kit-v2/core';
+import { HttpClient } from '@angular/common/http';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, mergeMap, EMPTY, tap, map, catchError } from 'rxjs';
+
+/**
+ * Категории иконок rt-icon. 11 buckets: 8 prefix-based + Social (префикс `social-`) + Custom
+ * (префикс `ico-`) + Misc (fallback).
+ * Порядок фиксирован — соответствует порядку отображения в Catalog story (rt-icon.stories.ts).
+ *
+ * Аннотация типа намеренно не указывается: явный `readonly string[]` потерял бы узкий
+ * литеральный тип, нужный для {@link TIconCategory}. `as const` сохраняет литеральные ключи.
+ */
+// eslint-disable-next-line @typescript-eslint/typedef -- аннотация стёрла бы литеральный тип, на котором стоит TIconCategory
+const CATEGORY_ORDER = [
+    'Navigation',
+    'Alignment & Sorting',
+    'Status',
+    'Time & Calendar',
+    'Communication',
+    'Documents',
+    'People',
+    'Commerce',
+    'Social',
+    'Custom',
+    'Misc',
+];
+function startsWithAny(name, prefixes) {
+    return prefixes.some((p) => name.startsWith(p));
+}
+function isOneOf(name, names) {
+    return names.includes(name);
+}
+function matchPrefixOrExact(prefixes, exact) {
+    return (name) => startsWithAny(name, prefixes) || isOneOf(name, exact);
+}
+/**
+ * Упорядоченный список правил категоризации.
+ * `Custom` — единственная категория по строгому префиксу `ico-` и проверяется первой,
+ * чтобы исключить конфликты с другими prefix-based категориями.
+ * `Misc` — fallback в {@link categoryOf}, отдельным правилом не описывается.
+ */
+const ICON_CATEGORY_RULES = [
+    // Знаки соцсетей — цветные, со своей заливкой в файле; в каталоге они стоят своим рядом,
+    // чтобы не смешиваться с одноцветными, которые красит тема.
+    { category: 'Social', match: (n) => n.startsWith('social-') },
+    { category: 'Custom', match: (n) => n.startsWith('ico-') },
+    {
+        category: 'Navigation',
+        match: matchPrefixOrExact(['arrow', 'arrows', 'angle', 'chevron', 'directions'], []),
+    },
+    {
+        category: 'Alignment & Sorting',
+        match: matchPrefixOrExact(['align', 'sort', 'bars', 'ellipsis', 'sliders', 'filter', 'th'], []),
+    },
+    {
+        category: 'Status',
+        match: matchPrefixOrExact(['check', 'times', 'ban', 'exclamation', 'info', 'eye', 'lock', 'unlock', 'shield'], ['spinner', 'stop']),
+    },
+    {
+        category: 'Time & Calendar',
+        match: matchPrefixOrExact(['alarm', 'calendar'], ['clock']),
+    },
+    {
+        category: 'Communication',
+        match: matchPrefixOrExact(['comment', 'share'], ['bell', 'bot', 'telegram', 'at', 'email', 'send', 'phone', 'mobile']),
+    },
+    {
+        category: 'Documents',
+        match: matchPrefixOrExact(['attach', 'file', 'folder', 'bookmark'], ['book', 'copy', 'clone', 'tag', 'tags']),
+    },
+    {
+        category: 'People',
+        match: matchPrefixOrExact(['user'], ['users', 'id-card']),
+    },
+    {
+        category: 'Commerce',
+        match: (n) => isOneOf(n, ['wallet', 'money-bill', 'ticket', 'credit-card']),
+    },
+];
+/**
+ * Возвращает категорию для имени иконки.
+ * Первое совпавшее правило в {@link ICON_CATEGORY_RULES} выигрывает; иначе — `Misc`.
+ */
+function categoryOf(name) {
+    for (const rule of ICON_CATEGORY_RULES) {
+        if (rule.match(name)) {
+            return rule.category;
+        }
+    }
+    return 'Misc';
+}
+
+/**
+ * Как значки приложения рисуют имя Material. Задаётся третьим аргументом `provideRtIcons()`;
+ * по умолчанию `map-first` — пара из перечня кита, а без пары шрифт.
+ */
+const RT_ICON_GLYPH_STRATEGY = new InjectionToken('RT_ICON_GLYPH_STRATEGY', {
+    providedIn: 'root',
+    factory: () => 'map-first',
+});
+/**
+ * Готовность шрифтов страницы — одна на все значки.
+ *
+ * Лигатура до готовности шрифта рисуется словом в запасном шрифте: значок прячет её, пока страница
+ * не сказала, что шрифты готовы. Кит шрифт не везёт и семью не знает, поэтому ждёт общую готовность,
+ * а не загрузку одной семьи. На сервере шрифтов нет — лигатура там скрыта. Браузер без интерфейса
+ * шрифтов ждать нечем, и лигатура показывается сразу.
+ */
+class RtIconFontService {
+    #ready;
+    #isBrowser;
+    #document;
+    constructor() {
+        this.#ready = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#ready" }] : /* istanbul ignore next */ []));
+        this.#isBrowser = inject(PlatformService).isPlatformBrowser;
+        this.#document = inject(DOCUMENT);
+        this.ready = this.#ready.asReadonly();
+        this.#watchFonts();
+    }
+    #watchFonts() {
+        if (!this.#isBrowser) {
+            return;
+        }
+        const fonts = this.#document.fonts;
+        if (!fonts) {
+            this.#ready.set(true);
+            return;
+        }
+        void fonts.ready.then(() => this.#ready.set(true));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconFontService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconFontService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconFontService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Соответствие значков первого кита значкам этого набора.
+ *
+ * Первый кит рисует значки шрифтом Material: имя стоит прямо в шаблоне. Здесь у каждого такого
+ * имени ровно одна пара — иначе один и тот же смысл приезжает на разные экраны разными
+ * рисунками, а переезжающий выбирает значок заново на каждом экране.
+ *
+ * Перечень закрывает имена, которые видны поиском: голое слово в шаблоне, слово в тернарнике и
+ * слово внутри разбора по виду фильтра. Имена, подставляемые выражением, сюда не попадают: они
+ * приезжают из данных приложения и деревом кита не видны. Это граница перечня, а не его пробел.
+ *
+ * Пара ведёт на имя из фрейма, а не на своё с приставкой `ico-`, там где есть оба. Имён из
+ * фрейма 229 против 118, и они одной рисовки: смешанный набор дал бы разнобой на экране. Восемь
+ * таких пар помечены доводом — их можно переложить на свои одним местом.
+ *
+ * Имя без пары стоит здесь же, с причиной: молчание об имени неотличимо от того, что о нём
+ * забыли. Дорисовка недостающего — работа рисующего, и она вынесена за границу задачи.
+ *
+ * Держит перечень `tools/check-icon-map.mjs`: каждая пара ведёт на имя союза и на существующий
+ * файл, имена не повторяются, причина у имени без пары не пуста.
+ */
+/** Довод самой частой пары: имя первого кита и имя набора совпали после замены подчёркиваний. */
+const SAME_NAME = 'совпадает именем';
+const iconMaterialMap = [
+    { from: 'account_circle', to: 'ico-user', why: 'силуэт человека; у user уже стоит рисунок person, поэтому пара на двойнике ico-user' },
+    { from: 'add', to: 'ico-plus', why: 'простой плюс есть только в своей рисовке — во фрейме плюс лишь в круге и в составных' },
+    { from: 'arrow_back', to: 'arrow-left', why: 'стрелка влево, один в один' },
+    { from: 'arrow_forward', to: 'arrow-right', why: 'стрелка вправо, один в один' },
+    { from: 'backup', to: 'cloud-upload', why: 'у Material backup — облако со стрелкой вверх, это оно и есть' },
+    { from: 'block', to: 'ban', why: 'круг с перечёркиванием, один в один' },
+    { from: 'chat', to: 'comment', why: 'облачко реплики, ближний: у Material оно квадратное, здесь круглое' },
+    { from: 'chat_error', to: 'chat-error', why: SAME_NAME },
+    { from: 'chevron_left', to: 'chevron-left', why: SAME_NAME },
+    { from: 'chevron_right', to: 'chevron-right', why: SAME_NAME },
+    { from: 'close', to: 'close', why: `${SAME_NAME}; есть двойник ico-close` },
+    { from: 'content_copy', to: 'copy', why: 'два листа, один в один; есть двойник ico-copy' },
+    { from: 'dashboard', to: 'th-large', why: 'ближний: у Material четыре разных плитки, здесь четыре равных' },
+    { from: 'delete', to: 'trash', why: 'корзина, один в один; есть двойник ico-trash' },
+    { from: 'delete_forever', to: null, why: 'корзины с крестом в наборе нет — нужен рисунок' },
+    { from: 'done', to: 'check', why: 'галочка, один в один; есть двойник ico-check' },
+    { from: 'email', to: 'email', why: 'конверт, один в один' },
+    { from: 'download', to: 'ico-download', why: 'простая стрелка вниз есть только в своей рисовке — во фрейме лишь облако' },
+    {
+        from: 'drag_handle',
+        to: 'equals',
+        why: 'две горизонтальные полосы; рисунок дорисован по слову владельца — им таблица первого кита показывает сравнение «равно»',
+    },
+    { from: 'edit', to: 'pencil', why: 'карандаш, один в один' },
+    { from: 'fork_spoon', to: 'fork-spoon', why: SAME_NAME },
+    { from: 'fullscreen', to: 'fullscreen', why: SAME_NAME },
+    { from: 'home', to: 'home', why: SAME_NAME },
+    { from: 'info', to: 'info-circle', why: 'круг с буквой i — так рисует Material; голое info в наборе другое' },
+    { from: 'insert_chart', to: 'chart-bar', why: 'столбики диаграммы, ближний: у Material они в рамке' },
+    { from: 'keyboard_arrow_down', to: 'chevron-down', why: 'шеврон вниз, один в один; есть двойник ico-chevron-down' },
+    { from: 'layers', to: 'layers', why: SAME_NAME },
+    { from: 'light_mode', to: 'ico-sun', why: 'солнце, один в один; простого солнца во фрейме нет' },
+    { from: 'local_offer', to: 'tag', why: 'ярлык, один в один' },
+    { from: 'logout', to: 'ico-exit', why: 'дверь со стрелкой наружу, один в один' },
+    { from: 'menu', to: 'bars', why: 'три полосы, один в один' },
+    { from: 'monitoring', to: 'chart-line', why: 'ближний: у Material ломаная над осями, здесь ломаная' },
+    { from: 'moon_stars', to: 'moon', why: 'ближний: месяц без звёзд' },
+    { from: 'more_horiz', to: 'ellipsis-h', why: 'три точки по горизонтали' },
+    { from: 'more_vert', to: 'ellipsis-v', why: 'три точки по вертикали' },
+    { from: 'open_in_new', to: 'external-link', why: 'квадрат со стрелкой наружу' },
+    {
+        from: 'open_with',
+        to: 'arrows',
+        why: 'четыре стрелки из центра; рисунок дорисован — им панель колонок первого кита показывает ручку перетаскивания',
+    },
+    { from: 'person', to: 'user', why: 'силуэт человека, один в один; есть двойник ico-user' },
+    { from: 'person_off', to: 'user-off', why: 'силуэт человека, перечёркнутый наискось; рисунок дорисован по слову владельца' },
+    { from: 'push_pin', to: 'pin', why: 'канцелярская булавка; рисунок дорисован — ею первый кит закрепляет подменю' },
+    { from: 'refresh', to: 'refresh', why: SAME_NAME },
+    { from: 'remove', to: 'minus', why: 'горизонтальная черта, один в один' },
+    { from: 'search', to: 'search', why: `${SAME_NAME}; есть двойник ico-search` },
+    { from: 'settings', to: 'cog', why: 'шестерёнка, один в один' },
+    { from: 'star', to: 'star', why: SAME_NAME },
+    { from: 'sync', to: 'sync', why: SAME_NAME },
+    { from: 'troubleshoot', to: 'troubleshoot', why: SAME_NAME },
+    { from: 'view_column', to: 'table', why: 'ближний: у Material это колонки, здесь таблица — решение владельца' },
+    { from: 'visibility', to: 'eye', why: 'глаз, один в один; есть двойник ico-eye' },
+    { from: 'visibility_off', to: 'eye-slash', why: 'перечёркнутый глаз, один в один' },
+    { from: 'zoom_in', to: 'search-plus', why: 'лупа с плюсом, один в один' },
+];
+/**
+ * Имена кита, у которых в материальном наборе лежит свой рисунок.
+ *
+ * Считается из перечня, а не пишется списком: свой список разошёлся бы с перечнем молча — реестр
+ * ходил бы за файлом, которого нет, или не ходил бы за лежащим.
+ */
+const iconMaterialDrawn = new Set(iconMaterialMap
+    .map((entry) => entry.to)
+    .filter((name) => name !== null));
+
+const KIT_NAMES = new Set(iconsName);
+/** Имя значка кита — то, что рисует спрайт; остальное кит своим рисунком не закрывает. */
+function isKitIconName(name) {
+    return KIT_NAMES.has(name);
+}
+/** Пара имени Material из перечня кита; `null` — пары нет или имени нет. */
+function materialPairOf(glyph) {
+    if (!glyph) {
+        return null;
+    }
+    return iconMaterialMap.find((entry) => entry.from === glyph)?.to ?? null;
+}
+/**
+ * Чем рисуется значок: своим рисунком кита или лигатурой шрифта Material.
+ *
+ * Имя кита выигрывает у имени Material, если названы оба. Имя Material по способу `map-first`
+ * берёт пару из перечня, а без пары — шрифт; по способу `font` — шрифт сразу. Материальный рисунок
+ * для пары выбирает уже сам значок по признаку набора над собой: это не дело разбора.
+ *
+ * `null` — значку нечего рисовать.
+ */
+function resolveIconGlyph(name, glyph, strategy) {
+    if (name) {
+        return { kind: 'kit', name };
+    }
+    if (!glyph) {
+        return null;
+    }
+    if (strategy === 'map-first') {
+        const pair = isKitIconName(glyph) ? glyph : materialPairOf(glyph);
+        if (pair !== null) {
+            return { kind: 'kit', name: pair };
+        }
+    }
+    return { kind: 'font', glyph };
+}
+
+/**
+ * Имена, которыми набор значков виден со стороны страницы.
+ *
+ * Отдельный файл, а не константы реестра: те же имена читает обвязка снимков витрины, а она идёт
+ * под Playwright и ни одного объявления Angular поднять не может. Своя копия там уже стояла —
+ * второе объявление того же значения расходится с первым молча: ожидание набора ищет один узел,
+ * а реестр создаёт другой, и кадр выходит без значков.
+ */
+/** Селектор inline-sprite, создаваемого один раз при первом обращении. */
+const RT_ICON_SPRITE_ID = 'rt-icon-sprite';
+/** Префикс `id` для inline-sprite символов. Изолирует от внешних `id` на странице. */
+const RT_ICON_SYMBOL_ID_PREFIX = 'rt-icon-';
+/**
+ * Префикс `id` символов материального набора. Свой, а не общий: наборов на странице бывает два —
+ * признак набора стоит и на корне, и на контейнере, — а один `id` держит один рисунок. С общим
+ * префиксом второй набор молча забирал бы символ первого.
+ */
+const RT_ICON_MATERIAL_SYMBOL_ID_PREFIX = 'rt-icon-material-';
+/** Префикс `id` залитых рисунков материального набора: у имени их два, и `id` у каждого свой. */
+const RT_ICON_MATERIAL_FILL_SYMBOL_ID_PREFIX = 'rt-icon-material-fill-';
+/** Селекторы, которыми страница объявляет материальный набор. */
+const RT_ICON_MATERIAL_PRESET_SELECTOR = "[data-preset='material'],.rt-preset-material";
+
+/**
+ * Адрес, по которому приложение публикует набор из `assets/icons` пакета.
+ * Умолчание годится, когда сборка кладёт набор в корень статики; свой адрес
+ * задаётся аргументом `provideRtIcons()`.
+ */
+const RT_ICONS_BASE_URL = new InjectionToken('RT_ICONS_BASE_URL', {
+    providedIn: 'root',
+    factory: () => '/icons',
+});
+/**
+ * Адрес материального набора значков. Отдельный от своего: два набора стоят рядом, и приложение
+ * кладёт их двумя папками.
+ */
+const RT_ICONS_MATERIAL_BASE_URL = new InjectionToken('RT_ICONS_MATERIAL_BASE_URL', {
+    providedIn: 'root',
+    factory: () => '/icons-material',
+});
+class RtIconRegistry {
+    #http = inject(HttpClient);
+    #doc = inject(DOCUMENT);
+    #baseUrl = inject(RT_ICONS_BASE_URL);
+    #materialBaseUrl = inject(RT_ICONS_MATERIAL_BASE_URL);
+    #platform = inject(PlatformService);
+    /**
+     * Имена, за которыми уже сходили: второй раз в сеть за ними не ходят. Ключ несёт набор —
+     * одно имя приезжает двумя разными рисунками, и общий ключ отдал бы второму первый.
+     */
+    #requested = new Set();
+    /** Имена, которые попросила разметка. Загрузку по ним ведёт подписка из конструктора. */
+    #requestSource = new Subject();
+    constructor() {
+        // Потоки складываются, а не вытесняют друг друга: странице нужны все спрошенные
+        // значки, а не последний из них.
+        this.#requestSource
+            .pipe(mergeMap((asked) => this.#load(asked)), takeUntilDestroyed())
+            .subscribe();
+    }
+    /**
+     * Имя symbol для `<use href="#X">`. Возвращает строку с ведущим `#`.
+     *
+     * Набор назван явно, а не выведен из страницы: одна и та же страница держит оба набора
+     * рядом — признак стоит и на корне, и на контейнере, — и вывод по странице дал бы обоим
+     * один ответ.
+     */
+    symbolHref(name, drawing = 'base') {
+        return `#${this.#symbolId(name, drawing)}`;
+    }
+    /**
+     * Просит значок по имени: грузит файл и дописывает `<symbol>` в спрайт страницы.
+     *
+     * Ответа зовущий не ждёт и потока не получает: разметка рисует ссылку на символ сразу, а
+     * браузер дорисовывает её, когда символ приезжает. Подписка живёт здесь и только здесь —
+     * иначе каждая разметка гасила бы её сама, а таких мест у значка два.
+     */
+    request(name, drawing = 'base') {
+        const id = this.#symbolId(name, drawing);
+        // На сервере относительных запросов к статике нет вовсе: значок дорисуется после
+        // гидрации, когда разметка попросит его снова уже в браузере.
+        if (!this.#platform.isPlatformBrowser || this.#requested.has(id)) {
+            return;
+        }
+        this.#requested.add(id);
+        // Символ уже лежит в спрайте страницы: его положила соседняя история витрины или
+        // сама страница до старта приложения. Запроса не уходит вовсе.
+        if (this.#doc.getElementById(id)) {
+            return;
+        }
+        this.#requestSource.next({ name, drawing });
+    }
+    #load(asked) {
+        if (asked.drawing === 'base') {
+            return this.#loadInto(asked, `${this.#baseUrl}/${asked.name}.svg`, EMPTY);
+        }
+        // Материальный рисунок, который не приехал, закрывается своим. Материальный набор —
+        // слой переопределений: имени, которого в нём нет, кит и так рисует свой рисунок, и
+        // не приехавший файл обязан вести себя так же. Иначе страница, объявившая набор, но
+        // не опубликовавшая его папку, показывает пустое место там, где обещан значок, —
+        // разметка при этом верна, и промах виден только глазами. Залитый, которого нет,
+        // сперва закрывается контурным того же набора.
+        const own = this.#loadInto(asked, `${this.#baseUrl}/${asked.name}.svg`, EMPTY);
+        const outlined = asked.drawing === 'material-fill' ? this.#loadInto(asked, `${this.#materialBaseUrl}/${asked.name}.svg`, own) : own;
+        const file = asked.drawing === 'material-fill' ? `${asked.name}.fill.svg` : `${asked.name}.svg`;
+        return this.#loadInto(asked, `${this.#materialBaseUrl}/${file}`, outlined);
+    }
+    /**
+     * Рисунок по адресу под именем символа, которое просила разметка: подмена ссылки разметке
+     * не нужна. Отказ одного имени гасит только его значок — иначе один промах в наборе ронял бы
+     * всю страницу, а соседние значки уже приехали.
+     */
+    #loadInto(asked, url, fallback) {
+        return this.#http.get(url, { responseType: 'text' }).pipe(tap((raw) => this.#mountSymbol(asked, raw)), map(() => undefined), catchError(() => fallback));
+    }
+    #symbolId(name, drawing) {
+        const prefix = {
+            base: RT_ICON_SYMBOL_ID_PREFIX,
+            material: RT_ICON_MATERIAL_SYMBOL_ID_PREFIX,
+            'material-fill': RT_ICON_MATERIAL_FILL_SYMBOL_ID_PREFIX,
+        };
+        return `${prefix[drawing]}${name}`;
+    }
+    #mountSymbol(asked, raw) {
+        const symbol = this.#doc.createElementNS('http://www.w3.org/2000/svg', 'symbol');
+        symbol.id = this.#symbolId(asked.name, asked.drawing);
+        symbol.setAttribute('viewBox', this.#viewBox(raw));
+        symbol.innerHTML = this.#inner(raw);
+        this.#sprite().appendChild(symbol);
+    }
+    #viewBox(raw) {
+        const viewBoxMatch = /viewBox="([^"]+)"/.exec(raw);
+        return viewBoxMatch ? viewBoxMatch[1] : '0 0 24 24';
+    }
+    #inner(raw) {
+        // Тело корневого `<svg>` без него самого: оно и становится телом `<symbol>`.
+        return raw
+            .replace(/<\?xml[\s\S]*?\?>/g, '')
+            .replace(/<!DOCTYPE[\s\S]*?>/g, '')
+            .replace(/<svg\b[^>]*>/i, '')
+            .replace(/<\/svg>\s*$/i, '')
+            .trim();
+    }
+    #sprite() {
+        const existing = this.#doc.querySelector(`svg#${RT_ICON_SPRITE_ID}`);
+        if (existing) {
+            return existing;
+        }
+        const sprite = this.#doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        sprite.id = RT_ICON_SPRITE_ID;
+        sprite.setAttribute('aria-hidden', 'true');
+        sprite.setAttribute('style', 'position:absolute;width:0;height:0;overflow:hidden;');
+        this.#doc.body.insertBefore(sprite, this.#doc.body.firstChild);
+        return sprite;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const SIZES = Object.freeze({
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    '2xl': 40,
+});
+/* Без переданного цвета значок цвета не пишет: `currentColor` строкой стиля перебивал правило
+   стилей, которое красит значок снаружи, — значок опасного пункта меню оставался цвета текста. */
+const COLORS = Object.freeze({
+    current: null,
+    // Приглушённый тон можно переназначить свойством сверху: поле ввода называет так тон своего
+    // значка в наборе оформления. Цвет стоит встроенным стилем, и правилом его не перебить.
+    muted: 'var(--rt-icon-color-muted, var(--rt-neutral-600))',
+    info: 'var(--rt-color-state-info)',
+    success: 'var(--rt-color-state-success)',
+    warning: 'var(--rt-color-state-warning)',
+    danger: 'var(--rt-color-state-danger)',
+    inverse: 'var(--rt-color-text-inverse)',
+});
+function isSizeStep(value) {
+    return Object.hasOwn(SIZES, value);
+}
+/** Ступень или число пикселей — в пиксели. Числовая строка читается числом, прочее — ступенью `md`. */
+function toSizePx(value) {
+    if (typeof value === 'number') {
+        return value > 0 ? value : SIZES.md;
+    }
+    if (isSizeStep(value)) {
+        return SIZES[value];
+    }
+    const px = numberAttribute(value, 0);
+    return px > 0 ? px : SIZES.md;
+}
+const BEM_BLOCK = 'rt-icon';
+class RtIconComponent {
+    #registry;
+    #host;
+    #strategy;
+    #fontReady;
+    /**
+     * Набор, объявленный разметкой над этим значком.
+     *
+     * Читается у разметки, а не выбирается стилями: ссылку на символ спрайта CSS подменить нечем,
+     * и второй `<use>` рядом с первым тоже не годится — он вечно указывает на символ, за которым
+     * никто не ходил, а обвязка снимков ждёт, пока нарисуется каждый.
+     *
+     * Спрашивается ближайший предок, а не корень страницы: признак набора стоит и на контейнере,
+     * и на одной странице законно живут оба набора рядом.
+     *
+     * Один раз после первой отрисовки: на сервере разметки нет вовсе, а признак набора страница
+     * по ходу жизни не переставляет — его ставит приложение своей разметкой.
+     */
+    #preset;
+    constructor() {
+        this.#registry = inject(RtIconRegistry);
+        this.#host = inject(ElementRef);
+        this.#strategy = inject(RT_ICON_GLYPH_STRATEGY);
+        this.#fontReady = inject(RtIconFontService).ready;
+        /**
+         * Набор, объявленный разметкой над этим значком.
+         *
+         * Читается у разметки, а не выбирается стилями: ссылку на символ спрайта CSS подменить нечем,
+         * и второй `<use>` рядом с первым тоже не годится — он вечно указывает на символ, за которым
+         * никто не ходил, а обвязка снимков ждёт, пока нарисуется каждый.
+         *
+         * Спрашивается ближайший предок, а не корень страницы: признак набора стоит и на контейнере,
+         * и на одной странице законно живут оба набора рядом.
+         *
+         * Один раз после первой отрисовки: на сервере разметки нет вовсе, а признак набора страница
+         * по ходу жизни не переставляет — его ставит приложение своей разметкой.
+         */
+        this.#preset = signal('base', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#preset" }] : /* istanbul ignore next */ []));
+        /** Чем рисуется значок: именем кита или лигатурой шрифта. Ни имени, ни глифа — пустое место. */
+        this.resolved = computed(() => resolveIconGlyph(this.name(), this.glyph(), this.#strategy), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+        this.kitName = computed(() => {
+            const resolved = this.resolved();
+            return resolved?.kind === 'kit' ? resolved.name : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kitName" }] : /* istanbul ignore next */ []));
+        this.fontGlyph = computed(() => {
+            const resolved = this.resolved();
+            return resolved?.kind === 'font' ? resolved.glyph : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fontGlyph" }] : /* istanbul ignore next */ []));
+        /** Лигатура прячется, пока шрифты страницы не готовы: до того она рисуется словом. */
+        this.glyphMods = computed(() => ({
+            filled: this.fill(),
+            pending: !this.#fontReady(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyphMods" }] : /* istanbul ignore next */ []));
+        this.href = computed(() => {
+            const name = this.kitName();
+            return name === null ? null : this.#registry.symbolHref(name, this.drawing());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+        /**
+         * Набор, которым рисуется этот значок. Материальный закрывает не все имена кита — он слой
+         * переопределений, как набор оформления: имя без материального рисунка рисуется своим, и это
+         * не пробел.
+         */
+        this.preset = computed(() => {
+            const name = this.kitName();
+            return this.#preset() === 'material' && name !== null && iconMaterialDrawn.has(name) ? 'material' : 'base';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+        /** Рисунок значка: залитый бывает только у материального набора, свой набор заливки не знает. */
+        this.drawing = computed(() => {
+            if (this.preset() === 'base') {
+                return 'base';
+            }
+            return this.fill() ? 'material-fill' : 'material';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drawing" }] : /* istanbul ignore next */ []));
+        this.sizePx = computed(() => this.size(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizePx" }] : /* istanbul ignore next */ []));
+        this.colorValue = computed(() => COLORS[this.color()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorValue" }] : /* istanbul ignore next */ []));
+        this.rotateStyle = computed(() => {
+            const r = this.rotate();
+            return r !== null && r !== 0 ? `rotate(${r}deg)` : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rotateStyle" }] : /* istanbul ignore next */ []));
+        /** Имя кита. Стоит рядом с глифом и побеждает его, когда переданы оба. */
+        this.name = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /**
+         * Имя Material вместо имени кита. Как оно рисуется — парой из перечня кита или лигатурой
+         * шрифта Material Symbols — решает настройка `glyphStrategy` у `provideRtIcons()`. Шрифт
+         * приложение подключает само; семья берётся из свойства `--rt-icon-glyph-font`.
+         */
+        this.glyph = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        /**
+         * Ступень размера или число пикселей — для размеров между ступенями и крупнее последней.
+         * Числовая строка из статического атрибута читается числом, прочая строка вне ступеней — `md`.
+         * Внутри вход хранит пиксели: ступень переводится в них при записи.
+         */
+        this.size = input(SIZES.md, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: toSizePx });
+        this.color = input('current', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /**
+         * Залитый рисунок вместо контурного — как `FILL 1` у значка первого кита. Действует в
+         * материальном наборе; свой набор рисует значок одним рисунком. Дефолт `false`.
+         */
+        this.fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Значок вращается — как индикатор занятости внутри кнопки или строки. Когда система просит
+         * меньше движения, вращение медленнее. Поворот на время вращения уступает ему. Дефолт `false`.
+         */
+        this.spin = input(false, { ...(ngDevMode ? { debugName: "spin" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rotate = input(null, { ...(ngDevMode ? { debugName: "rotate" } : /* istanbul ignore next */ {}), transform: (v) => {
+                if (v === null || v === '') {
+                    return null;
+                }
+                return numberAttribute(v, 0);
+            } });
+        // Значок едет по запросу имени, а не вперёд всем набором: страница платит за то, что
+        // нарисовала. Смена имени просит новое — прежний символ остаётся в спрайте.
+        effect(() => {
+            const name = this.kitName();
+            if (name !== null) {
+                this.#registry.request(name, this.drawing());
+            }
+        });
+        // Разметка над значком видна только в браузере и только после первой отрисовки:
+        // контейнер с признаком набора рисует то же приложение.
+        afterNextRender(() => {
+            if (this.#host.nativeElement.closest(RT_ICON_MATERIAL_PRESET_SELECTOR)) {
+                this.#preset.set('material');
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtIconComponent, isStandalone: true, selector: "rt-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "'true'", "style.width.px": "sizePx()", "style.height.px": "sizePx()", "style.color": "colorValue()", "style.transform": "rotateStyle()", "class.rt-icon--spin": "spin()" }, classAttribute: "rt-icon" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-icon\">\n    @if (href(); as symbol) {\n        <svg focusable=\"false\" aria-hidden=\"true\" [attr.viewBox]=\"'0 0 24 24'\">\n            <use [attr.href]=\"symbol\" />\n        </svg>\n    } @else if (fontGlyph(); as ligature) {\n        <span rtElem=\"glyph\" aria-hidden=\"true\" [rtMod]=\"glyphMods()\" [style.font-size.px]=\"sizePx()\">{{ ligature }}</span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-icon{--rt-icon-spin-duration: 1s;--rt-icon-spin-duration-reduced: 4s;display:inline-flex;flex-shrink:0;line-height:0}.rt-icon svg{display:block;width:100%;height:100%;fill:currentcolor}.rt-icon__glyph{display:block;overflow:hidden;width:100%;font-family:var(--rt-icon-glyph-font, \"Material Symbols Outlined\"),sans-serif;font-feature-settings:\"liga\";font-style:normal;font-variation-settings:\"FILL\" 0;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-align:center;text-transform:none;white-space:nowrap}.rt-icon__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-icon__glyph--pending{visibility:hidden}.rt-icon--spin{animation:rt-icon-spin var(--rt-icon-spin-duration) linear infinite}@keyframes rt-icon-spin{to{transform:rotate(1turn)}}@media(prefers-reduced-motion:reduce){.rt-icon--spin{animation-duration:var(--rt-icon-spin-duration-reduced)}}}\n"], dependencies: [{ 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: RtIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-icon', imports: [BlockDirective, ElemDirective, ModDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: BEM_BLOCK,
+                        '[attr.aria-hidden]': "'true'",
+                        '[style.width.px]': 'sizePx()',
+                        '[style.height.px]': 'sizePx()',
+                        '[style.color]': 'colorValue()',
+                        '[style.transform]': 'rotateStyle()',
+                        '[class.rt-icon--spin]': 'spin()',
+                    }, template: "<ng-container rtBlock=\"rt-icon\">\n    @if (href(); as symbol) {\n        <svg focusable=\"false\" aria-hidden=\"true\" [attr.viewBox]=\"'0 0 24 24'\">\n            <use [attr.href]=\"symbol\" />\n        </svg>\n    } @else if (fontGlyph(); as ligature) {\n        <span rtElem=\"glyph\" aria-hidden=\"true\" [rtMod]=\"glyphMods()\" [style.font-size.px]=\"sizePx()\">{{ ligature }}</span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-icon{--rt-icon-spin-duration: 1s;--rt-icon-spin-duration-reduced: 4s;display:inline-flex;flex-shrink:0;line-height:0}.rt-icon svg{display:block;width:100%;height:100%;fill:currentcolor}.rt-icon__glyph{display:block;overflow:hidden;width:100%;font-family:var(--rt-icon-glyph-font, \"Material Symbols Outlined\"),sans-serif;font-feature-settings:\"liga\";font-style:normal;font-variation-settings:\"FILL\" 0;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-align:center;text-transform:none;white-space:nowrap}.rt-icon__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-icon__glyph--pending{visibility:hidden}.rt-icon--spin{animation:rt-icon-spin var(--rt-icon-spin-duration) linear infinite}@keyframes rt-icon-spin{to{transform:rotate(1turn)}}@media(prefers-reduced-motion:reduce){.rt-icon--spin{animation-duration:var(--rt-icon-spin-duration-reduced)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }] } });
+
+/**
+ * Называет адрес, по которому приложение опубликовало набор значков `rt-icon`.
+ *
+ * ```typescript
+ * export function withCoreProviders(): EnvironmentProviders {
+ *     return makeEnvironmentProviders([
+ *         provideHttpClient(...),
+ *         provideRtStorage(),
+ *         provideRtIcons(),
+ *     ]);
+ * }
+ * ```
+ *
+ * Вперёд отсюда не грузится ничего: значок едет тогда, когда его попросила разметка, и платит
+ * за него та страница, которая его нарисовала. Сборка спрайта и загрузка — дело `RtIconRegistry`.
+ *
+ * Сами файлы приложение публикует само — набор лежит в `assets/icons` пакета, и сборка копирует
+ * его в свою статику.
+ *
+ * Наборов значков два: свой и материальный. Второй нужен только приложению, которое объявляет
+ * материальный набор оформления, и адрес у него свой — набор лежит в `assets/icons-material`.
+ *
+ * Третий аргумент — настройки значков. `glyphStrategy` говорит, как рисуется имя Material на входе
+ * `glyph`: `map-first` (по умолчанию) — пара из перечня кита, а без пары шрифт Material Symbols;
+ * `font` — шрифт для любого имени. Шрифт приложение подключает само.
+ *
+ * @param baseUrl Адрес опубликованного набора. По умолчанию `/icons`.
+ * @param materialBaseUrl Адрес материального набора. По умолчанию `/icons-material`.
+ * @param options Настройки значков.
+ */
+function provideRtIcons(baseUrl, materialBaseUrl, options) {
+    return makeEnvironmentProviders([
+        ...(baseUrl === undefined ? [] : [{ provide: RT_ICONS_BASE_URL, useValue: baseUrl }]),
+        ...(materialBaseUrl === undefined ? [] : [{ provide: RT_ICONS_MATERIAL_BASE_URL, useValue: materialBaseUrl }]),
+        ...(options?.glyphStrategy === undefined ? [] : [{ provide: RT_ICON_GLYPH_STRATEGY, useValue: options.glyphStrategy }]),
+    ]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CATEGORY_ORDER, ICON_CATEGORY_RULES, RT_ICONS_BASE_URL, RT_ICONS_MATERIAL_BASE_URL, RT_ICON_GLYPH_STRATEGY, RT_ICON_MATERIAL_FILL_SYMBOL_ID_PREFIX, RT_ICON_MATERIAL_PRESET_SELECTOR, RT_ICON_MATERIAL_SYMBOL_ID_PREFIX, RT_ICON_SPRITE_ID, RT_ICON_SYMBOL_ID_PREFIX, RtIconComponent, RtIconFontService, RtIconRegistry, categoryOf, iconMaterialDrawn, iconMaterialMap, isKitIconName, materialPairOf, provideRtIcons, resolveIconGlyph };
+//# sourceMappingURL=rt-tools-ui-kit-v2-icon.mjs.map