Neat Paraskavedekatriaphobia's Meaning

    @phemium-costaisa/phemium-web-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.24 • Public • Published

    Phemium Web Components

    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:

    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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    11

    Version

    1.2.24

    License

    MIT

    Unpacked Size

    29.1 MB

    Total Files

    88

    Last publish

    Collaborators

    • phemiumcostaisa