PhemiumWebComponentsV2

This is a collection of web components generated with Angular Elements (Angular CLI version 9.1.1).

Note: The output of each component is an ES2015 bundle, so supported browsers are the ones compatibles with this EcmaScript version.

• Installation
  • Angular 2+
• Environment installation
• Development server
• Steps to create a new Custom Element into this library
• Build bundles for a specific project
• Build bundles for all web components at once
• Running unit tests
• Running unit tests for a specific project
• Running end-to-end tests
• Publish to npm
• Further help

Installation

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

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

Angular 2+

• Add the javascript file of the web component you want to use in the scripts section of 'angular.json' file.

             "scripts": [
              "node_modules/@phemium-costaisa/phemium-web-components-v2/build/components/tuningApp/element/phemium-tuningApp-es2015.js"
            ],

• In the same file and in the assets section, you must add these lines to use the assets.

   "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/@phemium-costaisa/phemium-web-components-v2/build/components/tuningApp/assets",
                "output": "assets"
              },
            ]

• Same for styling in the styles section.

  "styles": [
              {
                "input": "node_modules/@phemium-costaisa/phemium-web-components-v2/build/components/tuningApp/styles/styles.css"
              }
            ]

• 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 },
      Push,
    ],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- Add Here!
  })

Environment installation

• Install NodeJS (latest version)
• Install NPM dependencies

npm install

• Install Bower dependencies

npx bower -- install

• Install the following Visual Studio Code extensions:

  • Prettier (download here)
  • ESlint: (download here)

Development server

Run ng serve [project] for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Local development for the videocall library:

npm run build:videocall

sudo npm link ./dist/videocall

// TODO Gulp task to copy index.js from the phemium softphone library to projects/videocall/assets/scripts, minify and rename it to softphone.js.

If you need to watch for the changes in a library first execute npm run build:watch:videocall followed by npm run build:scss in another terminal to copy the global styles and finally run ng serve videocallApp -o for the videocall App to see the changes.

Steps to create a new Custom Element into this library

• Run ng generate application newApp (inside projects folder), where newApp is the name of the new application that will be used to create the new Custom Element/Web Component.
  • Remember to answer "NO" to the question: Would you like to add Angular routing?.
  • Use SCSS for your styles.
• In package.json add script build:newApp:element (take tuningApp as reference), and add this new script into build:all:element.
• Use the content of projects/tuningApp/src/app/app.module.ts again as reference for projects/newApp/src/app/app.module.ts:

constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const customComponentElement = createCustomElement(CustomComponent, {
      injector: this.injector,
    });
    customElements.define('custom-element-tag', customComponentElement);
  }
}

• Create file projects/newApp/src/package.json. Use some existing custom elements as reference.
• Create file projects/newApp/src/README.md. Use some existing custom elements as reference.
• Add projects/newApp/src/package.json and projects/newApp/src/README.md in section assets of angular.json.
• Create file build/components/newApp/index.html. Use some existing custom elements as reference.

Build bundles for a specific project

Run npm run build:<componentNameApp>:element. So, for phemiumTuning run npm run build:tuningApp:element. The build artifacts will be stored in the dist/<componentNameApp> directory and merged into a ES6 bundle, located in directory build/components/<componentNameApp>:

• build/components/componentNameApp/phemium-<componentNameApp>-es2015.js.

Folder assets will be also copied from dist/<componentNameApp>/assets to build/components/<componentNameApp>/assets.

To run the final build/components, run:

$ cd build/components/<componentNameApp>
$ http-server .

or, if having a ssl certificate:

$ http-server -S -C localhost.pem -K localhost-key.pem

And navigate to http://localhost:8080 (phemiumTuning needs to be run under a localhost or https)

Build bundles for all web components at once

Run npm run build:all:element. This will run the script described in the previous step for every single web component.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running unit tests for a specific project

Run ng test --project <componentNameApp>.

For example, run ng test --project tuningApp.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Publish to npm

There are two ways to publish the web components to npm. You can do it locally:

• Run npm run build:all:element to build all bundles.
• Run npm login using the phemium costaisa credentials.
• Run npm publish --access public.

Or you can create a tag with the required version in 'package.json' file.

To publish the videocall library you need to change the version in 'package.json' file and then you must do it locally using the following commands:

npm run build:videocall
cd dist/videocall
npm publish --access public

To publish the card-viewer library you need to change the version in 'package.json' file and then you must do it locally using the following commands:

npm run build:card-viewer
cd dist/card-viewer
npm publish --access public

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.