@lion/ui 0.0.11 → 0.0.13

package/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js

@@ -0,0 +1,30 @@
+export class OverlaysManager {
+  name = 'OverlayManager 2.x';
+
+  _blockBody = false;
+
+  constructor() {
+    this._setupBlocker();
+  }
+
+  _setupBlocker() {
+    const blocker = document.createElement('div');
+    blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
+    blocker.innerText = `Blocker for ${this.name}`;
+
+    const target = document.getElementById('overlay-target');
+    target.appendChild(blocker);
+
+    this.blocker = blocker;
+  }
+
+  blockBody() {
+    this._blockBody = true;
+    this.blocker.style.backgroundColor = '#ff6161';
+  }
+
+  unBlockBody() {
+    this._blockBody = false;
+    this.blocker.style.backgroundColor = 'transparent';
+  }
+}

package/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js

@@ -0,0 +1,4 @@
+import { OverlaysManager } from './index.js';
+import { singletonManager } from 'singleton-manager';
+
+export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager();

package/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js

@@ -0,0 +1,49 @@
+import { LitElement, html, css } from 'lit-element';
+import { overlays } from 'overlays/instance.js';
+
+export class PageB extends LitElement {
+  getInstance(sym, fallback) {
+    const ev = new CustomEvent('request-instance', {
+      detail: { key: sym },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    });
+    this.dispatchEvent(ev);
+    return ev.detail.instance || fallback();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        padding: 10px;
+        border: 2px solid #ccc;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h3>I am page B</h3>
+      <p>Overlays Status:</p>
+      <p>Name: ${overlays.name}</p>
+      <p>Blocked: ${overlays._blockBody}</p>
+      <button @click=${() => {
+        overlays.blockBody(); this.requestUpdate();
+      }}>block</button>
+      <button @click=${() => {
+        overlays.unBlockBody(); this.requestUpdate();
+      }}>un-block</button>
+      <button @click=${() => {
+        this.requestUpdate();
+      }}>refresh</button>
+    `;
+  }
+}
+
+customElements.define('page-b', PageB);

package/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js

@@ -0,0 +1,70 @@
+import { OverlaysManager } from 'overlays';
+import { singletonManager } from 'singleton-manager';
+import { OverlaysManager as OverlaysManager2 } from './node_modules/page-b/node_modules/overlays/index.js';
+
+let compatibleManager1;
+let compatibleManager2;
+
+const blocker = document.createElement('div');
+blocker.setAttribute(
+  'style',
+  'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;',
+);
+blocker.innerText = `Shared Blocker for App`;
+document.body.appendChild(blocker);
+
+class CompatibleManager1 extends OverlaysManager {
+  constructor() {
+    super();
+    this.name = 'Compatible1 from App';
+  }
+
+  block(sync = true) {
+    super.block();
+    if (sync) {
+      compatibleManager2.blockBody(false);
+    }
+  }
+
+  unBlock(sync = true) {
+    super.unBlock();
+    if (sync) {
+      compatibleManager2.unBlockBody(false);
+    }
+  }
+
+  _setupBlocker() {
+    this.blocker = blocker;
+  }
+}
+
+class CompatibleManager2 extends OverlaysManager2 {
+  constructor() {
+    super();
+    this.name = 'Compatible2 from App';
+  }
+
+  blockBody(sync = true) {
+    super.blockBody();
+    if (sync) {
+      compatibleManager1.block();
+    }
+  }
+
+  unBlockBody(sync = true) {
+    super.unBlockBody();
+    if (sync) {
+      compatibleManager1.unBlock();
+    }
+  }
+
+  _setupBlocker() {
+    this.blocker = blocker;
+  }
+}
+
+compatibleManager1 = new CompatibleManager1();
+compatibleManager2 = new CompatibleManager2();
+
+singletonManager.set('overlays::overlays::1.x', compatibleManager1);
+singletonManager.set('overlays::overlays::2.x', compatibleManager2);

package/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js

@@ -0,0 +1,91 @@
+import { LitElement, css, html } from 'lit';
+
+import 'page-a/page-a.js';
+import 'page-b/page-b.js';
+
+class DemoApp extends LitElement {
+  constructor() {
+    super();
+    this.page = 'A';
+  }
+
+  static get properties() {
+    return {
+      page: { type: String },
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        max-width: 680px;
+        margin: 0 auto;
+      }
+
+      nav {
+        padding: 0 10px 10px 10px;
+      }
+
+      button {
+        border: none;
+        padding: 1rem 2rem;
+        background: #0069ed;
+        color: #fff;
+        font-size: 1rem;
+        cursor: pointer;
+        text-align: center;
+        transition: background 250ms ease-in-out, transform 150ms ease;
+      }
+
+      button:hover,
+      button:focus {
+        background: #0053ba;
+      }
+
+      button:focus {
+        outline: 1px solid #fff;
+        outline-offset: -4px;
+      }
+
+      button:active {
+        transform: scale(0.99);
+      }
+
+      button.active {
+        background: #33a43f;
+      }
+
+      h1 {
+        text-align: center;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h1>Demo App</h1>
+      <nav>
+        <button
+          class=${this.page === 'A' ? 'active' : ''}
+          @click=${() => {
+            this.page = 'A';
+          }}
+        >
+          Page A
+        </button>
+        <button
+          class=${this.page === 'B' ? 'active' : ''}
+          @click=${() => {
+            this.page = 'B';
+          }}
+        >
+          Page B
+        </button>
+      </nav>
+      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
+    `;
+  }
+}
+
+customElements.define('demo-app', DemoApp);

package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/overlays/index.js

@@ -0,0 +1,30 @@
+export class OverlaysManager {
+  name = 'OverlayManager 1.x';
+
+  blockBody = false;
+
+  constructor() {
+    this._setupBlocker();
+  }
+
+  _setupBlocker() {
+    const blocker = document.createElement('div');
+    blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;');
+    blocker.innerText = `Blocker for ${this.name}`;
+
+    const target = document.getElementById('overlay-target');
+    target.appendChild(blocker);
+
+    this.blocker = blocker;
+  }
+
+  block() {
+    this.blockBody = true;
+    this.blocker.style.backgroundColor = '#ff6161';
+  }
+
+  unBlock() {
+    this.blockBody = false;
+    this.blocker.style.backgroundColor = 'transparent';
+  }
+}

package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/overlays/instance.js

@@ -0,0 +1,3 @@
+import { OverlaysManager } from './index.js';
+
+export const overlays = new OverlaysManager();

package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/page-a.js

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit-element';
+import { overlays } from 'overlays/instance.js';
+
+export class PageA extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        padding: 10px;
+        border: 2px solid #ccc;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h3>I am page A</h3>
+      <p>Overlays Status:</p>
+      <p>Name: ${overlays.name}</p>
+      <p>Blocked: ${overlays.blockBody}</p>
+      <button @click=${() => {
+        overlays.block(); this.requestUpdate();
+      }}>block</button>
+      <button @click=${() => {
+        overlays.unBlock(); this.requestUpdate();
+      }}>un-block</button>
+      <button @click=${() => {
+        this.requestUpdate();
+      }}>refresh</button>
+    `;
+  }
+}
+
+customElements.define('page-a', PageA);

package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js

@@ -0,0 +1,30 @@
+export class OverlaysManager {
+  name = 'OverlayManager 2.x';
+
+  _blockBody = false;
+
+  constructor() {
+    this._setupBlocker();
+  }
+
+  _setupBlocker() {
+    const blocker = document.createElement('div');
+    blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;');
+    blocker.innerText = `Blocker for ${this.name}`;
+
+    const target = document.getElementById('overlay-target');
+    target.appendChild(blocker);
+
+    this.blocker = blocker;
+  }
+
+  blockBody() {
+    this._blockBody = true;
+    this.blocker.style.backgroundColor = '#ff6161';
+  }
+
+  unBlockBody() {
+    this._blockBody = false;
+    this.blocker.style.backgroundColor = 'transparent';
+  }
+}

package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js

@@ -0,0 +1,3 @@
+import { OverlaysManager } from './index.js';
+
+export const overlays = new OverlaysManager();

package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit-element';
+import { overlays } from 'overlays/instance.js';
+
+export class PageB extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        padding: 10px;
+        border: 2px solid #ccc;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h3>I am page B</h3>
+      <p>Overlays Status:</p>
+      <p>Name: ${overlays.name}</p>
+      <p>Blocked: ${overlays._blockBody}</p>
+      <button @click=${() => {
+        overlays.blockBody(); this.requestUpdate();
+      }}>block</button>
+      <button @click=${() => {
+        overlays.unBlockBody(); this.requestUpdate();
+      }}>un-block</button>
+      <button @click=${() => {
+        this.requestUpdate();
+      }}>refresh</button>
+    `;
+  }
+}
+
+customElements.define('page-b', PageB);

package/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js

@@ -0,0 +1,93 @@
+import { LitElement, css, html } from 'lit';
+
+import './overlayCompatibility.js';
+
+import 'page-a/page-a.js';
+import 'page-b/page-b.js';
+
+class DemoApp extends LitElement {
+  constructor() {
+    super();
+    this.page = 'A';
+  }
+
+  static get properties() {
+    return {
+      page: { type: String },
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        max-width: 680px;
+        margin: 0 auto;
+      }
+
+      nav {
+        padding: 0 10px 10px 10px;
+      }
+
+      button {
+        border: none;
+        padding: 1rem 2rem;
+        background: #0069ed;
+        color: #fff;
+        font-size: 1rem;
+        cursor: pointer;
+        text-align: center;
+        transition: background 250ms ease-in-out, transform 150ms ease;
+      }
+
+      button:hover,
+      button:focus {
+        background: #0053ba;
+      }
+
+      button:focus {
+        outline: 1px solid #fff;
+        outline-offset: -4px;
+      }
+
+      button:active {
+        transform: scale(0.99);
+      }
+
+      button.active {
+        background: #33a43f;
+      }
+
+      h1 {
+        text-align: center;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h1>Demo App</h1>
+      <nav>
+        <button
+          class=${this.page === 'A' ? 'active' : ''}
+          @click=${() => {
+            this.page = 'A';
+          }}
+        >
+          Page A
+        </button>
+        <button
+          class=${this.page === 'B' ? 'active' : ''}
+          @click=${() => {
+            this.page = 'B';
+          }}
+        >
+          Page B
+        </button>
+      </nav>
+      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
+    `;
+  }
+}
+
+customElements.define('demo-app', DemoApp);

package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/overlays/index.js

@@ -0,0 +1,30 @@
+export class OverlaysManager {
+  name = 'OverlayManager 1.x';
+
+  blockBody = false;
+
+  constructor() {
+    this._setupBlocker();
+  }
+
+  _setupBlocker() {
+    const blocker = document.createElement('div');
+    blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
+    blocker.innerText = `Blocker for ${this.name}`;
+
+    const target = document.getElementById('overlay-target');
+    target.appendChild(blocker);
+
+    this.blocker = blocker;
+  }
+
+  block() {
+    this.blockBody = true;
+    this.blocker.style.backgroundColor = '#ff6161';
+  }
+
+  unBlock() {
+    this.blockBody = false;
+    this.blocker.style.backgroundColor = 'transparent';
+  }
+}

package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/overlays/instance.js

@@ -0,0 +1,4 @@
+import { OverlaysManager } from './index.js';
+import { singletonManager } from 'singleton-manager';
+
+export const overlays = singletonManager.get('overlays::overlays::1.x') || new OverlaysManager();

package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/page-a.js

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit-element';
+import { overlays } from 'overlays/instance.js';
+
+export class PageA extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        padding: 10px;
+        border: 2px solid #ccc;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h3>I am page A</h3>
+      <p>Overlays Status:</p>
+      <p>Name: ${overlays.name}</p>
+      <p>Blocked: ${overlays.blockBody}</p>
+      <button @click=${() => {
+        overlays.block(); this.requestUpdate();
+      }}>block</button>
+      <button @click=${() => {
+        overlays.unBlock(); this.requestUpdate();
+      }}>un-block</button>
+      <button @click=${() => {
+        this.requestUpdate();
+      }}>refresh</button>
+    `;
+  }
+}
+
+customElements.define('page-a', PageA);

package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js

@@ -0,0 +1,30 @@
+export class OverlaysManager {
+  name = 'OverlayManager 2.x';
+
+  blockBody = false;
+
+  constructor() {
+    this._setupBlocker();
+  }
+
+  _setupBlocker() {
+    const blocker = document.createElement('div');
+    blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
+    blocker.innerText = `Blocker for ${this.name}`;
+
+    const target = document.getElementById('overlay-target');
+    target.appendChild(blocker);
+
+    this.blocker = blocker;
+  }
+
+  blockingBody() {
+    this.blockBody = true;
+    this.blocker.style.backgroundColor = '#ff6161';
+  }
+
+  unBlockingBody() {
+    this.blockBody = false;
+    this.blocker.style.backgroundColor = 'transparent';
+  }
+}

package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js

@@ -0,0 +1,4 @@
+import { OverlaysManager } from './index.js';
+import { singletonManager } from 'singleton-manager';
+
+export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager();

package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit-element';
+import { overlays } from 'overlays/instance.js';
+
+export class PageB extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        padding: 10px;
+        border: 2px solid #ccc;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <h3>I am page B</h3>
+      <p>Overlays Status:</p>
+      <p>Name: ${overlays.name}</p>
+      <p>Blocked: ${overlays.blockBody}</p>
+      <button @click=${() => {
+        overlays.blockingBody(); this.requestUpdate();
+      }}>block</button>
+      <button @click=${() => {
+        overlays.unBlockingBody(); this.requestUpdate();
+      }}>un-block</button>
+      <button @click=${() => {
+        this.requestUpdate();
+      }}>refresh</button>
+    `;
+  }
+}
+
+customElements.define('page-b', PageB);

package/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js

@@ -0,0 +1,23 @@
+import { OverlaysManager } from 'overlays';
+import { singletonManager } from 'singleton-manager';
+
+class CompatibleManager extends OverlaysManager {
+  constructor() {
+    super();
+    this.name = 'Compatible from App';
+    this.blocker.innerText = `Blocker for ${this.name}`;
+  }
+
+  blockingBody() {
+    this.block();
+  }
+
+  unBlockingBody() {
+    this.unBlock();
+  }
+}
+
+const compatibleManager = new CompatibleManager();
+
+singletonManager.set('overlays::overlays::1.x', compatibleManager);
+singletonManager.set('overlays::overlays::2.x', compatibleManager);

package/docs/fundamentals/tools/singleton-manager/overview.md

@@ -9,7 +9,7 @@ Primarily useful if two major version of a package with a singleton is used.
 npm i --save singleton-manager
 ```
 
-⚠️ You need to make SURE that only ONE version of `singleton-manager` is installed. For how see [Non Goals](https://github.com/ing-bank/lion/blob/ab906fc13bf192b10758b8b9e868c8b404e16958/docs/fundamentals/tools/singleton-manager/#non-goals).
+⚠️ You need to make SURE that only ONE version of `singleton-manager` is installed. For how see [Non Goals](https://github.com/ing-bank/lion/blob/2c104e9b2b56458f1eb75d2d8ee8c3aadfef1af3/docs/fundamentals/tools/singleton-manager/#non-goals).
 
 ### Example Singleton Users
 
@@ -159,7 +159,7 @@ Steps to reproduce:
 1. Page A click on block
 2. Page B => "Blocked: false" (even when hitting the refresh button)
 
-➡️ See [it on the example page](https://github.com/ing-bank/lion/blob/ab906fc13bf192b10758b8b9e868c8b404e16958/docs/fundamentals/tools/singleton-manager/example-fail/index.md). <br>
+➡️ See [it on the example page](https://github.com/ing-bank/lion/blob/2c104e9b2b56458f1eb75d2d8ee8c3aadfef1af3/docs/fundamentals/tools/singleton-manager/example-fail/index.md). <br>
 ➡️ See [the code](https://github.com/ing-bank/lion/tree/master/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js).
 
 ---
@@ -202,7 +202,7 @@ See it in action
 npm run start:singleton
 ```
 
-➡️ See [it on the example page](https://github.com/ing-bank/lion/blob/ab906fc13bf192b10758b8b9e868c8b404e16958/docs/fundamentals/tools/singleton-manager/example-success/index.md). <br>
+➡️ See [it on the example page](https://github.com/ing-bank/lion/blob/2c104e9b2b56458f1eb75d2d8ee8c3aadfef1af3/docs/fundamentals/tools/singleton-manager/example-success/index.md). <br>
 ➡️ See [the code](https://github.com/ing-bank/lion/tree/master/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js).
 
 ---
@@ -243,7 +243,7 @@ See it in action
 npm run start:singleton-complex
 ```
 
-➡️ See [it on the example page](https://github.com/ing-bank/lion/blob/ab906fc13bf192b10758b8b9e868c8b404e16958/docs/fundamentals/tools/singleton-manager/example-complex/index.md). <br>
+➡️ See [it on the example page](https://github.com/ing-bank/lion/blob/2c104e9b2b56458f1eb75d2d8ee8c3aadfef1af3/docs/fundamentals/tools/singleton-manager/example-complex/index.md). <br>
 ➡️ See [the code](https://github.com/ing-bank/lion/tree/master/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js).
 
 ---