Thiqah Card Reusable Component

Thiqah card Reusable Component is a lit-element web component that developed by Thiqah Frontend Team

Installation

• 1- configure .npmrc create .npmrc file inside your project and add thiqah NPM registry on thiqah TFS to allow your machine from installing our NPM package.

registry=https://tf.thiqah.sa/tfs/DefaultCollection/_packaging/Thiqah.ReusableComponent.FrontEnd/npm/registry/
always-auth=true

• 2- install package: to install card Reusable Component package run the following command line in your bash or command prompt

npm install th-card

Usage in regular web project

Static pages any none JS framework inside your html file,

• Add vendor and app JS Files at the end of BODY tag:

<script type="text/javascript" src="node_modules/th-card/vendors.js"></script>
<script type="text/javascript" src="node_modules/th-card/app.js"></script>

• in case you need to add any global style files such as bootstrap, be sure that you are injecting it inside BODY tag

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

• inside your HTML, be sure from passing all needed properties

<main>
  <th-card 
    c-title="alert title here !" 
    c-image="image src"
    c-actionPrim="1" 
    c-actionSec="1">
      <p slot="c-body">
        body will be here !!
      </p>
  </th-card>
</main>

• to integrate with the implemented component, listen to its events and update its data

var ThCard = function () {
  this.element = document.querySelector("th-card");
      this.events();
  };

  ThCard.prototype.events = function () {
        this.element.addEventListener("cardActionPrim", this.cardactionPrim.bind(this));
        this.element.addEventListener("cardActionSec", this.cardactionSec.bind(this));
  };

  ThCard.prototype.cardactionPrim = function (event) {
        console.log(event)
  };

  ThCard.prototype.cardactionSec = function (event) {
        console.log(event)
  };

  window.addEventListener("load", event => {
        new ThCard();
  });

Usage in Angular web project

• First, add vendors.js and app.js files into angular.json file.

"scripts": [
  "node_modules/th-card/vendors.js",
  "node_modules/th-card/app.js"
]

• Now, import CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA inside app.nodule.ts and add schemas to @NgModule

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ]
})

• inside component.ts add

import { Component, ElementRef, NgZone } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild("card", { static: false }) card: ElementRef;
  public isRtl: boolean;
  data;
  
  constructor(
    private elementRef: ElementRef,
    private _ngZone: NgZone) {}
  
  preparecard() {
    const mycard = this.card.nativeElement;
    mycard.addEventListener('cardActionPrim', (event) => {
      this._ngZone.run(() => this.data = console.log(event));
    });

    mycard.addEventListener('cardActionSec', (event) => {
      this._ngZone.run(() => this.data = console.log(event));
    });
  }
   
   ngAfterViewInit() {
     this.preparecard();
    }
 }

• inside component.html add the custom element

<main>
 <th-card
    #card
    c-title="alert title here !" 
    c-image="image src"
    c-actionPrim="1" 
    c-actionSec="1">
      <p slot="c-body">
        body will be here !!
      </p>
  </th-card>
</main>

Component Properties

| Property Name | Description | value | | ------------- |:-------------: | -----: | | c-title | title for card | string | | c-image | src for image | string | | c-actionPrim | primary action | 0 or 1 | | c-actionSec | secondary action | 0 or 1 |

Events

| Events Name | Description | return | | ------------- |:-------------: | -----: | | cardactionPrim |for thr primary card action | JSON Object | | cardactionSec |for thr secondary card action | JSON Object |

License

THIQAH Frontend Team KSA