@elduris/isa-webcomponents NPM

Isa web component library

Why Isa?

The word Isa is runic symbol for Ice. As explained so well on: https://runesecrets.com/rune-meanings/isa

“Ice only appears to stop a river’s flow.”

Isa – “Iss-ah” – Literally: “Ice” – Esoteric: Stasis, Stillness

Rune of concentration of things in a static or frozen state. Rune of stillness and the Ego-Self.

Psi: mental faculties, focus, ego, self-image/self-identity

Energy: stillness, contraction, stasis

Mundane: cold, self-preservation, harsh reality

Divinations: Concentrated self, ego-consciousness, self-control, unity of being; or egomania, dullness, blindness, dissipation, immobility, self-centeredness, lack of change, psychopathy.

Governs: Development of concentration, will and focus Halting of unwanted dynamic forces as an act of self-defense (ard against demonic influences) Basic ego integration within a balanced multiversal system Power of control and constraint over other wights (entities), emotional outbursts Focus of the will into single-minded action

Use this library to create webcomponents for Isa applications. The base class does all the boilerplate required to wire your component up to EIIS backend services.

Getting Started

Install into your project

npm install @elduris/isa-webcomponents

Include JavaScript module on your page. Copy the .js file to an appropriate location and include it:

<script type="module">
	include { Isa } from "<location>/Isa.esm.js"
</script>

Optionally include css on your page:

	<link rel="stylesheet" href="/css/Isa.css"/>

Add custom tags to your HTML, for example:

<isa-page header="My page" drawer footer>
  <div slot="drawer">
		Content in side drawer
  </div>

	<isa-panel header="Panel" border>
		<p>
			Content for page content area, in a panel
		</p>
	</isa-panel>

  <div slot="footer">
		Content in page footer
  </div>
</isa-page>

To use the livrary in JavaScript, create a JavaScript class that extends Isa.Element:

customElements.define('my-cool-component', class MyCoolComponent extends Isa.Element {

    constructor() {
        super();
        ...

    render() {
        ...

}

Elements can be data driven. Create stateful, data aware components by extending Isa.Component:

customElements.define('isa-data-component', class MyDataComponent extends Isa.Element {

    constructor() {
        super();
        ...

	// add data store
    this.configureStore({
        element: this,
        name: 'ServiceStore',
        endpoint: 'gateway/services',
        dataItems: 'services',
        autoLoad: true,
        cache: true
    });

    render() {
        ...

}

Styling

<style>
	:root {
		/* style coloring */
		--isa-color: navy;
		--isa-theme-color: #ffc107;
		/* optional style coloring */
		--isa-background: white;
		--isa-banner-color: darkblue;
		--isa-banner-background-color: orange;
		--isa-button-color: var(--isa-color);
		--isa-button-background-color: var(--isa-theme-color);
		--isa-navbar-color: navy;
		--isa-navbar-background-color: #ffc107;
		--isa-navbar-button-color: navy;
		--isa-navbar-button-background-color: #ffc107;
		--isa-page-drawer-color: var(--isa-color);
		--isa-page-drawer-background-color: #fafafa;
		--isa-menu-color: var(--isa-color);
		--isa-menu-background-color: #fafafa;
		--isa-panel-header-color: gray;
		--isa-panel-header-background-color: yellow;
		--isa-grid-header-color: {{.Page.GridColor}};
		--isa-grid-header-background-color: {{.Page.GridHeaderColor}};
		--isa-grid-headerbar-background-color: {{.Page.GridHeaderColor}};
		--isa-dialog-header-color: black;
		--isa-dialog-header-background-color: darkgray;
		--isa-font-family: verdana, sans-serif;
		--isa-footer-color: gray;
		--isa-footer-background: navy;
		--isa-footer-min-width: 300;
		--isa-footer-max-width: 800;
		
		--primary: red;
	}
<style>