@pilotdev/pilot-web-ui

Установка

Для установки библиотеки выполните команду в терминале в директории вашего Angular-проекта:

npm install @pilotdev/pilot-web-ui

Настройка @pilotdev/pilot-web-ui/legacy

Копирование ресурсов

Для корректной работы компонентов и стилей требуется настроить копирование статических ресурсов библиотеки в сборку проекта. В файле angular.json в секции build.options.assets добавьте следующую запись:

{
  "glob": "**/*",
  "input": "node_modules/@pilotdev/pilot-web-ui/legacy/assets/",
  "output": "/assets/pilot-web-ui/"
}

Это обеспечит доступ к ассетам (иконкам, локализациям и др.) во время выполнения приложения.

Настройка компонентов

Провайдеры

В массиве providers корневого модуля приложения (AppModule) зарегистрируйте путь к ассетам библиотеки:

{ provide: PLT_UI_ASSETS_PATH, useValue: '/assets/pilot-web-ui' },

Локализация

Для поддержки мультиязычности рекомендуется создать кастомную фабрику загрузчика переводов:

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:

imports: [
  ...,
  HttpClientModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [HttpClient, PLT_UI_ASSETS_PATH],
    },
  }),
  ...
]

Подключение UI-модуля

В imports корневого элемента вашего приложения добавьте основной модуль компонентов библиотеки:

imports: [
  ...,
  KitModule,
  ...
]

Конфигурация стилей

Подключение SCSS

В корневом SCSS-файле (styles.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";

Настройка темы

Определите палитры и создайте объект темы:

$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 вариаций:

$theme-0-palette
$theme-90-palette
$theme-100-palette
$theme-101-palette
$theme-102-palette
$theme-103-palette
$theme-admin-palette

Использование переменных и миксинов

Для доступа к переменным библиотеки используйте:

@import "@pilotdev/pilot-web-ui/legacy/styles/variables";

Для подключения отдельных SCSS-файлов библиотеки:

@import "@pilotdev/pilot-web-ui/legacy/styles/...";