# lz-pltheader

> npm i lz-header-lib-

Latest version **0.0.0** (published 2019-06-18) · 0 weekly downloads

## Install

```sh
npm install lz-pltheader
pnpm add lz-pltheader
yarn add lz-pltheader
bun add lz-pltheader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2019-06-18 |
| First published | 2019-06-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | liga_zakon |

## Links

- npm: https://www.npmjs.com/package/lz-pltheader
- npm.io page: https://npm.io/package/lz-pltheader

## Dependencies (21)

- [rxjs](https://npm.io/package/rxjs.md) ^6.0.0
- [jquery](https://npm.io/package/jquery.md) ^3.3.1
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.26
- [ngx-captcha](https://npm.io/package/ngx-captcha.md) ^4.0.1
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^6.1.0
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.1.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^6.1.0
- [lz-header-lib](https://npm.io/package/lz-header-lib.md) ^2.1.1
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.1.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.1.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^6.1.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^6.1.0
- [@angular/material](https://npm.io/package/@angular/material.md) ^6.1.0
- [angular2-text-mask](https://npm.io/package/angular2-text-mask.md) ^9.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^6.1.0
- [@ngx-translate/core](https://npm.io/package/@ngx-translate/core.md) ^10.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^6.1.0
- [@ngx-translate/http-loader](https://npm.io/package/@ngx-translate/http-loader.md) ^3.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^6.1.0

## Recent versions

- 0.0.0 (latest) — 2019-06-18

## README

# LIGAZAKON HEADER ANGULAR LIBRARY

## Installing

  ### 1. Install it

      npm i lz-header-lib-<current-project-version>


  ### 2.  Prepare your angular.json

      Exmaple:

      "lzDeveloperClient": {
      ...
        "architect": {
          "build": {
            "builder": ... ,
              "options": {
              "outputPath": ... ,
              "index": ... ,
              "main": ... ,
              "polyfills": ... ,
              "tsConfig": ... ,
              "assets": [
                ... ,
                {
                  "glob": "**/*",
                  "input": "node_modules/lz-header-lib/assets",
                  "output": "dist/ng2/src/assets/lz-header-assets/" // Папка "lz-header-assets" должна находиться по точно такому же пути в вашем проекте
                }
                ...
              ],
              "styles": [
                ...
                "node_modules/lz-header-lib/assets/less/fonts.less",
                "node_modules/lz-header-lib/assets/less/header-modals.less",
                "node_modules/font-awesome/css/font-awesome.css" // Шапка использует font-awesome-4.7
              ],
              "scripts": [ // Шапка использует набор js библиотек
                "node_modules/jquery/dist/jquery.min.js",
                "lib/sockjs/sockjs.min.js",
                "lib/stomp-websocket/lib/stomp.min.js",
                "lib/platform/platform.js",
                "lib/fingerprint/fingerprint.js"
              ]
            }
          }
        }
        ...
      }

  ### 3.  Prepare your app.module.ts

        Exmaple:
        

        import { NgModule } from '@angular/core';

        ...

        import { PLTHeaderModule, LzProductConfig, LzLanguageService } from 'lz-header-lib';

        export function createTranslateLoader(http: HttpClient) {
          // your path to translate sources *смотреть п.4 
          return new TranslateHttpLoader(http, './i18n/', '.json');
        }

        ...

          imports: [
            ...
            PLTHeaderModule,
            TranslateModule.forRoot({
              loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
              }
            }),
            ...
          ]

        ...

        export class AppModule { 
          constructor(private lzProductConfig: LzProductConfig, private lzLanguageService: LzLanguageService, private translateService: TranslateService) {
            this.lzProductConfig.setProductSettings({
              'ips_location': '/ips', // Ссылка на ИПС
              'ipas_location': '/ipas', // Ссылка на ПЛАТФОРМУ
              'order_code': 'lz_developer_client', // Алиас продукта, который подключает шапку
              'product_name': 'lzDeveloperClient', // Имя продукта, который подключает шапку
              'product_version': '1.0', // Версия клиента, который подключает шапку
              'api_path': 'dev', // Сервер, через который будут ходить ресты шапки: dev/test/prod
              'check_user_session': true, // Нужно ли проверять сессию пользователя каждую минуту,
                                          // в случае выбитой сессии всплывает модалка с авторизацией
            });
            this.translateService.use(this.lzLanguageService.identifyLanguage());
          }
        }

  ### 4. Add header component to your app.component.html

        Example:

        <lz-header-lib-component></lz-header-lib-component>
        <router-outlet></router-outlet>

  ### 5.  Translations
  
        translations and TranslateModule

        lz-header-lib have buttons to change project language. It's using 'LzLanguageService' from lz-header-lib.
        current language is saving in local storage (it can be 'ru' or 'ua' values). By default 'ua' language.

        After language change it triggers page reloading.

        You can use 'identifyLanguage' method from 'LzLanguageService' to get current language and apply it to your project.

        You shoud merge yours i18n .jsons with lz-header-lib translations via grunt, gulp, webpack etc. and import it into yours app.module.ts

          Example:
          
          Grunt task for merging

          grunt.initConfig({
            "merge-json": {
                "ru": {
                    src: [
                        "src/**/ru.json",
                        "lz-shared/**/ru.json",
                        "node_modules/lz-header-lib/assets/i18n/ru.json"
                    ],
                    dest: "dist/i18n/ru.json"
                },
                "ua": {
                    src: [
                        "src/**/ua.json",
                        "lz-shared/**/ua.json",
                        "node_modules/lz-header-lib/assets/i18n/ua.json"
                    ],
                    dest: "dist/i18n/ua.json"
                }
            }
          })

          app.module.ts

          import { HttpClient } from '@angular/common/http';
          import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
          import { TranslateHttpLoader } from '@ngx-translate/http-loader';

          import { LzLanguageService } from 'lz-header-lib';

          export function createTranslateLoader(http: HttpClient) {
            return new TranslateHttpLoader(http, '/dist/i18n/', '.json'); 
          }

          @NgModule({
            imports: [
              TranslateModule.forRoot({
                loader: {
                  provide: TranslateLoader,
                  useFactory: (createTranslateLoader),
                  deps: [HttpClient]
                }
              })
            ]
          })

          export class AppModule {
            constructor(private langService: LzLanguageService, private translate: TranslateService) { 
              translate.use(language.identifyLanguage());
            }
          }

---
_Source: https://npm.io/package/lz-pltheader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
