# NgxLibrary

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.

## Installation

`npm i @adjai/ngx-library`

## Including styles

Import styles to your main style.scss:

```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;