Cybrid-sdk-ui-js NPM

Shell

This project is an Angular shell that acts as factory and demo for Cybrid SDK ui components.

Installation

Run npm i from the project root /sdk-ui-web to install dependencies.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. Changes made to component source files will not be reflected on refresh of the running application. To see changes you will have to rebuild the component library.

Component overview

The ui components are stored in /components. Each component is an Angular Element which bootstraps and wraps itself in a Web Component. For more information visit Angular Elements or Web Components.

Library requirements

To include the ui library, simply load it into your index.html as a script. All included ui components will be accessible via their html tag names. In the example below we are using the <list-element>'

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="cybrid-ui.js"></script>
  </head>
  <body>
  <list-element></list-element>
  </body>
</html>

Build

To build the shell project run ng build.

Component and library build commands

# Build a component to dist/element-name/
ng run component-name:build

# Build and bundle component to dist/element-name/element-name.js
npm run component:element-name

# Build ui and core libraries
npm run component:library