@adjai/ngx-library v0.0.162

NgxLibrary

This library was generated with Angular CLI version 12.2.0.

Installation

npm i @adjai/ngx-library

Including styles

Import styles to your main style.scss:

@import "../node_modules/@adjai/ngx-library/assets/styles/base";
@import "../node_modules/@adjai/ngx-library/assets/styles/default";

Configuring

Import required modules into your main module (bmqd):

  imports: [
    ApiModule.forRoot({apiBaseUrl: environment.apiBaseUrl}), // apiBaseUrll - url to api with ending slash
      AuthModule.forRoot({
        homePage: '/',
        loginPage: '/auth',
        loggedInPage: '/cabinet',
        providers: {
          [Oauth2Providers.Google]: {
            clientId: '86040793363-bpg8a9eg4qj31f5rpifap8453s18repl.apps.googleusercontent.com', // clientId for development purposes only
          },
        }
      }),
      LanguageModule.forRoot({
        language: 'russian',
        supportedLanguages: ['english', 'russian'],
        translations: {}
      })
  ]

Регистрация Oauth2-сервисов

Mail.ru: https://api.mail.ru/sites/my/

VK: https://vk.com/apps?act=manage

Google: https://console.cloud.google.com/apis/credentials

Ссылка на редирект: https://домен/auth/oauth2/redirect

Если авторизация через Google выполняется из расширения Chrome, то в настройках модуля указываем провайдера Google, а clientId оставляем пустым. В приложение добавляем manifest.json, а в нем добавляем раздел:

"oauth2": {
    "client_id": "******-*****.apps.googleusercontent.com",
    "scopes":[
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"]
  }

Также в раздел/массив permissions добавляем "identity". Чтобы manifest.json копировался в билд в файле angular.json в раздел projects.showcase.architect.build.options.assets добавляем src/manifest.json

Работа с формами

.form-row > .control > (label + input) # Несколько полей в одной строке (label и input одного поля друг под другом):

.form-row > .control-row > (label + input) # Несколько полей в одной строке (все label и input в одну строку):

.form-row.single-element-row > .control > (label + input) # Все поля располагаются друг под другом, label и input одного поля также друг под другом

Стили

• --global-ngxlib-control-gap
• --global-ngxlib-control-radius
• --global-ngxlib-control-padding

• --global-ngxlib-button-color
• --global-ngxlib-button-color-hover
• --global-ngxlib-button-bg
• --global-ngxlib-button-bg-hover
• --global-ngxlib-button-border-color

• --global-ngxlib-button-primary-color
• --global-ngxlib-button-primary-color-hover
• --global-ngxlib-button-primary-bg
• --global-ngxlib-button-primary-bg-hover
• --global-ngxlib-button-primary-border-color

• --global-ngxlib-button-secondary-color
• --global-ngxlib-button-secondary-color-hover
• --global-ngxlib-button-secondary-bg
• --global-ngxlib-button-secondary-bg-hover
• --global-ngxlib-button-secondary-border-color

• --global-ngxlib-input-border-color: #ddd;
• --global-ngxlib-input-bg: #fff;
• --global-ngxlib-input-disabled-color: #999;
• --global-ngxlib-input-disabled-bg: #f5f5f5;
• --global-ngxlib-input-readonly-bg: #f5f5f5;