npm package: @phemium-costaisa/phemium-web-components-v2
Description: This is a collection of web components generated with Angular Elements ([Angular CLI](https://github.com/angular/angular-cli) version 9.1.1).
Author: Phemium - Costaisa
Latest version: 1.1.4

# PhemiumWebComponentsV2

This is a collection of web components generated with Angular Elements ([Angular CLI](https://github.com/angular/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.

<!-- TOC -->

- [Installation](#installation)
  - [Angular 2+](#angular-2)
- [Environment installation](#environment-installation)
- [Development server](#development-server)
- [Steps to create a new Custom Element into this library](#steps-to-create-a-new-custom-element-into-this-library)
- [Build bundles for a specific project](#build-bundles-for-a-specific-project)
- [Build bundles for all web components at once](#build-bundles-for-all-web-components-at-once)
- [Running unit tests](#running-unit-tests)
- [Running unit tests for a specific project](#running-unit-tests-for-a-specific-project)
- [Running end-to-end tests](#running-end-to-end-tests)
- [Publish to npm](#publish-to-npm)
- [Further help](#further-help)

<!-- /TOC -->

## Installation

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

```bash
 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.

  ```Example
             "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.

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

- Same for styling in the styles section.

  ```Example
  "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`):

  ```typescript
  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

```bash
npm install
```

- Install Bower dependencies

```bash
npx bower -- install
```

- Install the following Visual Studio Code extensions:

  - Prettier ([download here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode))
  - ESlint: ([download here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint))

## 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:

```bash
npm run build:videocall
```

```bash
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`:

```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:

```bash
$ 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](https://karma-runner.github.io).

## 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](http://www.protractortest.org/).

## 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:

```bash
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:

```bash
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](https://github.com/angular/angular-cli/blob/master/README.md).