Phemium Web Components

• Introduction
• Installation
  • AngularJS (1.x)
  • Angular 2+
  • React
  • Vue
• Contribute

Introduction

The Phemium Web Components are web utilities to accelerate the integrations of some Phemium parts in web technologies projects.

Here you can find the list of the current available components:

• Phemium Card
• Phemium Push

Installation

The first step to use the Phemium Web Components is to download the dependency. Using npm you must execute:

 npm i @phemium-costaisa/phemium-web-components

Depending on the JS framework you're using, you'll need to follow the proper steps. These are the Frameworks now supported:

• AngularJS
• Angular 2+
• React
• Vue

AngularJS (1.x)

First of all you need to copy all the content from node_modules/@phemium-costaisa/phemium-web-components/dist into to somewhere else inside your project (e.g. your-app/phemium-web-components).

Once you have all the compiled files inside your project you will need to add the following line inside HEAD tag of your index.html:

<script src="phemium-web-components/phemium-web-components.js"></script>

Angular 2+

• Import the loader somewhere in your project (e.g. main.ts):

  import { defineCustomElements as phemiumLoader } from "@phemium-costaisa/phemium-web-components/loader";

• In the same file, you must add this line to initialize the loader:

  phemiumLoader(window);

• In your page modules definition you'll need to add CUSTOM_ELEMENTS_SCHEMA to your available schemas (e.g. app.module.ts):

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  // Other imports and declarations
  
  @NgModule({
    declarations: [AppComponent],
    providers: [
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
      Push,
    ],
    bootstrap: [AppComponent]
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- Add Here!
  })

React

On your index.js:

import { defineCustomElements as phemiumLoader } from "@phemium-costaisa/phemium-web-components/loader";
phemiumLoader(window);

Vue

import { defineCustomElements as phemiumLoader } from "@phemium-costaisa/phemium-web-components/loader";
Vue.config.ignoredElements = [/test-\w*/];
phemiumLoader(window);

Contribute

git clone https://gitlab.phemium.com/phemium/phemium-web-components
cd phemium-web-components

and run:

npm install
npm start

To build the component for production, run:

npm run build