ESN Application Grid

This is a project for building the application grid component as a standalone Web Component using Stencil that is used within OpenPaaS, LinShare, and Twake.

Component details

Properties

Please refer to ./src/components/esn-app-grid/readme.md.

CSS Variables

CSS Variables	Description	Example	Default
--primary-color-h	The Hue value of the primary color.	0	undefined
--primary-color-s	The Saturation value of the primary color.	0%	undefined
--primary-color-l	The Lightness value of the primary color.	100%	undefined
--accent-color-h	The Hue value of the accent/secondary color.	0	undefined
--accent-color-s	The Saturation value of the accent/secondary color.	0%	undefined
--accent-color-l	The Lightness value of the accent/secondary color.	100%	undefined

Importing the component

Using the component in another app is quite straightforward, you just have to register them somewhere in your app (preferrably where you initialize your app):

import { applyPolyfills, defineCustomElements } from 'esn-frontend-application-grid/loader';

applyPolyfills().then(() => defineCustomElements());

Note that StencilJS will utilize ES Modules by default and lazy-load the components. The lazy-loading of a component will happen at its connectedCallback phase. If you want to disable lazy-loading, you can opt out of ES Modules and use CommonJS instead (do note that this way it will load the entire list of components, even the unused ones):

import { applyPolyfills, defineCustomElements } from 'esn-frontend-application-grid/loader/index.cjs';

applyPolyfills().then(() => defineCustomElements());

Development workflow

Run the command below and Stencil will build and watch for any changes to rebuild:

npm run build:watch

Then if you have npm link-ed properly, every rebuild in this module should trigger a rebuild in the module(s) using it.