Скопировать
\n `\n})\nexport class App {\n private language = inject(LanguageService);\n private theme = inject(ThemeService);\n}\n```\n\n## Настройка приложения\n\n### provideVI и viProviders\n\n`provideVI` возвращает `EnvironmentProviders` и передаётся в `providers` при загрузке приложения:\n\n```ts\nprovideVI({\n loggerLevel: LoggerLevel.LOG,\n themeOptions: { name: 'theme' },\n languageOptions: { name: 'language' }\n})\n```\n\nЕсли провайдеры нужно смешать со своими или переопределить часть из них, используется `viProviders` — тот же список без обёртки:\n\n```ts\nproviders: [\n ...viProviders(options),\n { provide: LoginServiceBase, useClass: LoginService }\n]\n```\n\nВместе с сервисами регистрируется инициализатор приложения: он заполняет `ViewUtil.renderer` и `ViewUtil.document` до первой отрисовки. Без него утилиты работы с разметкой не смогут менять классы и стили.\n\n### Почему остались модули\n\n`VIModule.forRoot()` продолжает работать и настраивает то же самое. Все директивы и пайпы стали самостоятельными, а модуль их импортирует и отдаёт дальше — приложениям на `NgModule` менять ничего не нужно, а приложения на самостоятельных компонентах импортируют по отдельности только то, что используют.\n\n## Язык\n\n`LanguageService` из `@ts-core/frontend` регистрируется провайдерами пакета. Загрузчик выбирается приложением:\n\n```ts\nimport { LanguagePreloadLoader, LanguageUrlLoader } from '@ts-core/language';\n\nlanguage.loader = new LanguageUrlLoader('assets/language/'); // ru.json, en.json рядом с приложением\nlanguage.loader = new LanguagePreloadLoader(new Map([['ru', словарь]])); // словарь в памяти\nlanguage.loadIfExist('ru');\n```\n\nПереводы стоит загружать до первой отрисовки — тогда подписи попадают в разметку сразу:\n\n```ts\nprovideAppInitializer(() => {\n let language = inject(LanguageService);\n let value = firstValueFrom(language.completed);\n language.loadIfExist('ru');\n return value;\n})\n```\n\nВ шаблонах доступны пайпы `viTranslate`, `viTranslatePure`, `viTranslateHas` и директивы `[vi-translate]`, `[vi-language-toggle]`.\n\nПодстановка значений использует одинарные фигурные скобки:\n\n```json\n{ \"paginator\": { \"pageRange\": \"{current} из {total}\" } }\n```\n\n## Темы\n\nСписок тем задаёт приложение, выбранная тема сохраняется в куках и вешается классом на `body`:\n\n```ts\ntheme.initialize([\n { name: 'light', isDark: false, styles: { background: '#ffffff' } },\n { name: 'dark', isDark: true, styles: { background: '#202020' } }\n]);\ntheme.loadIfExist('light');\n```\n\n```scss\nbody.dark-theme {\n // палитра тёмной темы\n}\n```\n\nПереключение — директивой `[vi-theme-toggle]` либо присваиванием `theme.theme`. Директивы `[vi-theme-style]`, `[vi-theme-icon]`, `[vi-theme-image]`, `[vi-theme-background]` подставляют значения из описания текущей темы.\n\n## Директивы\n\n| Селектор | Назначение |\n|---|---|\n| `[vi-focus]` | ставит фокус на элемент после отрисовки |\n| `[vi-select-on-focus]` | выделяет содержимое поля при получении фокуса |\n| `[vi-click-to-copy]` | копирует содержимое указанного элемента по нажатию |\n| `[vi-click-to-select]` | выделяет содержимое элемента по нажатию |\n| `[vi-infinite-scroll]` | сообщает о достижении конца списка |\n| `[vi-scroll]`, `[vi-scroll-check]` | события прокрутки и проверка положения |\n| `[vi-auto-scroll-bottom]` | держит прокрутку внизу при добавлении содержимого |\n| `[vi-resize]`, `[vi-aspect-ratio]` | изменение размера и соотношение сторон |\n| `[vi-html-title]`, `[vi-html-content-title]` | всплывающая подсказка из содержимого |\n| `[viIsBrowser]`, `[viIsServer]` | показ содержимого в зависимости от среды выполнения |\n| `input[nullEmptyValue]`, `input[uppercaseValue]` | нормализация значения поля ввода |\n\n## Пайпы\n\n| Имя | Назначение |\n|---|---|\n| `viTranslate`, `viTranslatePure`, `viTranslateHas` | перевод и проверка наличия перевода |\n| `viTime` | длительность в секундах как `ч:мм:сс` |\n| `viTruncate` | обрезка строки до заданной длины |\n| `viFinance` | денежные суммы с разделителями |\n| `viMomentDate`, `viMomentTime`, `viMomentDateFromNow`, `viMomentAdaptiveDate` | даты и время |\n| `viCamelCase`, `viStartCase`, `viPrettify` | преобразование строк |\n| `viSanitize` | доверенное содержимое для `innerHTML` |\n| `viNgModelError` | текст ошибки для поля формы |\n| `viAssetImage`, `viAssetIcon`, `viAssetFile`, `viAssetSound`, `viAssetVideo`, `viAssetBackground` | адреса ресурсов |\n\n## Списки\n\n`ListItems` — коллекция пунктов меню и действий с переводом подписей и фильтрацией. Подписи переводятся автоматически при смене языка:\n\n```ts\nlet items = new ListItems