Thiqah Spinner Reusable Component

Thiqah Spinner 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 Spinner Reusable Component package run the following command line in your bash or command prompt

npm install th-spinner

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-spinner/vendors.js"></script>
<script type="text/javascript" src="node_modules/th-spinner/app.js"></script>

• Add spinner.css file in your header.

<link rel="stylesheet" rel="node_modules/th-spinner/spinner.css" />

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

<main>
  <th-spinner s-img="loader-img-path"></th-spinner>
</main>

Usage in Angular web project

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

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

• add spinner.css file inside angular.json styles.

"styles": [
  "node_modules/th-spinner/spinner.css"
]

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

```typescript
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.html add the custom element

<main>
  <th-spinner s-img="loader-img-path"></th-spinner>
</main>

Component Properties

1- s-img Property:-

 - Take STRING value.
 - Default Value => MCI Image if you did not ptha any image.
 - Value Must be an img path

License

THIQAH Frontend Team KSA