npm package: @pilotdev/pilot-web-ui
Description: Для установки библиотеки выполните команду в терминале в директории вашего Angular-проекта: > `npm install @pilotdev/pilot-web-ui`
Latest version: 25.0.0-alpha10

# @pilotdev/pilot-web-ui

## Установка

Для установки библиотеки выполните команду в терминале в директории вашего Angular-проекта:
> `npm install @pilotdev/pilot-web-ui`

---

## Настройка `@pilotdev/pilot-web-ui/legacy`

### Копирование ресурсов

Для корректной работы компонентов и стилей требуется настроить копирование статических ресурсов библиотеки в сборку проекта.
В файле angular.json в секции build.options.assets добавьте следующую запись:
```json
{
  "glob": "**/*",
  "input": "node_modules/@pilotdev/pilot-web-ui/legacy/assets/",
  "output": "/assets/pilot-web-ui/"
}
```

Это обеспечит доступ к ассетам (иконкам, локализациям и др.) во время выполнения приложения.

---

### Настройка компонентов

#### Провайдеры

В массиве `providers` корневого модуля приложения (`AppModule`) зарегистрируйте путь к ассетам библиотеки:

```ts
{ provide: PLT_UI_ASSETS_PATH, useValue: '/assets/pilot-web-ui' },
```

#### Локализация

Для поддержки мультиязычности рекомендуется создать кастомную фабрику загрузчика переводов:

```ts
import { HttpClient } from '@angular/common/http';
import { MultiTranslateHttpLoader } from "@pilotdev/pilot-web-ui/legacy/services";

export function createTranslateLoader(http: HttpClient, pltUiAssetsPath: string) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: `${pltUiAssetsPath}/i18n/`, suffix: '.json' },
    // Добавьте дополнительные источники переводов при необходимости
  ]);
}
```

Подключите модуль локализации в секции `imports`:

```ts
imports: [
  ...,
  HttpClientModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [HttpClient, PLT_UI_ASSETS_PATH],
    },
  }),
  ...
]
```

#### Подключение UI-модуля

В `imports` корневого элемента вашего приложения добавьте основной модуль компонентов библиотеки:

```ts
imports: [
  ...,
  KitModule,
  ...
]
```

---

### Конфигурация стилей

#### Подключение SCSS

В корневом SCSS-файле (`styles.scss`) импортируйте стили и SCSS-модули библиотеки:

```scss
@use '@angular/material' as mat;
@use "@pilotdev/pilot-web-ui/legacy/styles/themes/material-theming" as mat-theming;
@use "@pilotdev/pilot-web-ui/legacy/styles/themes/material-functions" as mat-functions;
@use "@pilotdev/pilot-web-ui/legacy/styles/themes/material-mixins" as mat-mixins;

@import "@pilotdev/pilot-web-ui/legacy/styles/styles";
```


#### Настройка темы

Определите палитры и создайте объект темы:

```scss
$primary: mat.define-palette($theme-xxx-pallete);
$accent: mat.define-palette();

$warn: mat.define-palette(mat.$red-palette);

$theme: mat-functions.define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
      warn: $warn,
    ),
    typography: $custom-typography-config,
    density: -2,
  )
);

@include mat-theming.apply-mat-core($theme);
@include mat-mixins.apply-global-mixins($theme);
```

Список поставляемых палитр для `primary` и `accent` вариаций:
```scss
$theme-0-palette
$theme-90-palette
$theme-100-palette
$theme-101-palette
$theme-102-palette
$theme-103-palette
$theme-admin-palette
```

#### Использование переменных и миксинов

Для доступа к переменным библиотеки используйте:

```scss
@import "@pilotdev/pilot-web-ui/legacy/styles/variables";
```

Для подключения отдельных SCSS-файлов библиотеки:

```scss
@import "@pilotdev/pilot-web-ui/legacy/styles/...";
```