Thiqah Lit-Element Header Component POC

Thiqah Lit-Element Header Component POC is the beta version of lit-element web components development developed by Thiqah Frontend Development Team

Installation

in case using NPM package installer run one of the following commnad lines

npm i header-test-c -D
npm install header-test-c --save-dev

in case using YARN package installer

yarn add header-test-c

Usage in regular web project

static pages, .NET or any none JS framework inside your html file

<!-- 
    add vendor custom element adapters and styles before the body tag be sure that file comes from 
    ./node-module/header-test-c/vendor/custom-elements-es5-adapter.js
    ./node-module/header-test-c/src/header.min.css

-->
<script src="./node-module/header-test-c/vendor/custom-elements-es5-adapter.js"></script>
<link rel="stylesheet" href="./node-module/header-test-c/src/header.min.css" />
<main>
   <header-component backgroundColor="#0d8a86" mainMenu='[]'
        userDetails='{"shortName": "علي الغامدي", "hasDetails": false}' logo='' logoLink='#' slogan=''
        sloganLink='#' projectName='الاسماء التجارية' languages='["EN", "AR"]' isSinglePage="false"
        currentLang="ar" />
    </header-component>
</main>
<!-- 
    add web components loader and header component source be sure that file comes from 
    /node-module/header-test-c/vendor/webcomponents-loader.js 
    /node-module/header-test-c/header.min.js 
-->
<script src="./node-module/header-test-c/vendor/webcomponents-loader.js"></script>
<script type="text/javascript" src="header.min.js"></script>

<!-- to listen to language changes please add the current listener -->
<script>
        var Thiqah = function () {
            this.header = document.querySelector('header-component');
            this.nav = {
                ar: [{
                        "name": "الشركات",
                        "link": "#"
                    },
                    {
                        "name": "الأسماء التجارية",
                        "link":"#"
                    },
                    {
                        "name": "طلباتي",
                        "link": "#"
                    },
                    {
                        "name": "المحفظة",
                        "link": "#",
                        "counter": 3000
                    }
                ],
                en: [{
                        "name": "companies",
                        "link": "#"
                    },
                    {
                        "name": "names",
                        "link": "#"
                    },
                    {
                        "name": "requests",
                        "link": "#"
                    },
                    {
                        "name": "walet",
                        "link": "#",
                        "counter": 200
                    }
                ]
            };
            this.init();
            this.eventListeners();
        };

        Thiqah.prototype.init = function () {
            this.header.mainMenu = this.nav['ar'];
        };

        Thiqah.prototype.eventListeners = function () {
            this.header.addEventListener('langValueChange', this.switchLanguage.bind(this));
        };

        Thiqah.prototype.switchLanguage = function (event) {
            event.detail.lang === 'ar' ?
                document.body.classList.add('rtl') :
                document.body.classList.remove('rtl');

            this.header.mainMenu = this.nav[event.detail.lang];
        };

        window.onload = new Thiqah();
    </script>

Usage in Angular Project

// inside app.module.ts allow CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

<!-- inside index.html add vendors and assets from node-modules -->
<!-- 
    add vendor custom element adapters before the body tag be sure that file comes from 
    /node-module/header-test-c/vendor/custom-elements-es5-adapter.js
    /node-module/header-test-c/vendor/webcomponents-loader.js
    /node-module/header-test-c/header.min.js
-->
<script src="./node-module/header-test-c/vendor/custom-elements-es5-adapter.js"></script>
<script src="./node-module/header-test-c/vendor/webcomponents-loader.js"></script>
<script type="text/javascript" src="header.min.js"></script>

Or import assets inside angular.json

// inside your app.component.ts add your event listener
import { Component, ElementRef, NgZone } from '@angular/core';
import { MainMenu } from './models/MainMenu.model';

/** 
 * MainMenu.model should contain the current models
  interface Menu {
      name: string;
      link: string;
      counter?: number;
  };

  export interface MainMenu {
      ar: Menu[];
      en: Menu[];
  }
*/

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public dir: string = 'ar';
  public mainMenu: MainMenu = {
    ar: [{ "name": "الشركات", "link": "#" },
    { "name": "الأسماء التجارية", "link": "my-names.html" },
    { "name": "طلباتي", "link": "#" },
    { "name": "المحفظة", "link": "/Wallet/Purchase", "counter": 3000 }],
    en: [{ "name": "compony", "link": "#" },
    { "name": "الأسماء التجارية", "link": "my-names.html" },
    { "name": "طلباتي", "link": "#" },
    { "name": "المحفظة", "link": "/Wallet/Purchase", "counter": 3000 }]
  };

  constructor(
    private elementRef: ElementRef,
    private _ngZone: NgZone
  ) { }

  switchLanguage() {
    const header = this.elementRef.nativeElement.querySelector('header-component');
    header.addEventListener('langValueChange', (event) => {
      this._ngZone.run(() => this.dir = event['detail'].lang);
    });
  }

  ngAfterViewInit() {
    this.switchLanguage();
  }
}

<!-- inside app.component.html render menu and current language -->
<div [ngClass]="dir === 'ar' ? 'rtl' : 'ltr'">
  <header-component backgroundColor="#0d8a86" [mainMenu]="mainMenu[dir]"
    userDetails='{"shortName": "علي الغامدي", "hasDetails": false}' logo='' logoLink='#' slogan='' sloganLink='#'
    projectName='الاسماء التجارية' languages='["EN", "AR"]' isSinglePage="false" currentLang="ar">
  </header-component>

  <router-outlet></router-outlet>
</div>

Contributing

License

THIQAH Frontend Team KSA