@lion/ui 0.25.0 → 0.26.0

package/docs/fundamentals/tools/index.md

@@ -1,11 +0,0 @@
----
-parts:
-  - Tools
-title: Tools
-eleventyNavigation:
-  key: Tools
-  title: Tools
-  order: 20
----
-
-# Tools

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

@@ -1,95 +0,0 @@
-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-complex/index.md

@@ -1,34 +0,0 @@
----
-parts:
-  - Example Complex
-  - Singleton Manager
-  - Tools
-title: 'Example Complex'
-eleventyNavigation:
-  key: Tools >> Singleton Manager >> Example Complex
-  title: Example Complex
-  order: 40
-  parent: Tools >> Singleton Manager
----
-
-# Example Complex
-
-In this SPA (Single Page Application) demo you will be able to reproduce the solution.
-
-The outcome is the same but this time internally there are two instances of Overlay Managers.
-And both are kept in sync buy an mediator with which the user actually interacts.
-
-1. Click on Page A
-2. Click on `block`
-3. Click on Page B
-4. Click on `unblock` => state is unblocked globally as there is only a single instance
-
-With this solutions users can not break the app anymore.
-
-<demo-app>Loading App...</demo-app>
-
-<div id="overlay-target" style="margin-top: 50px;"></div>
-
-```js script
-import './demo-app.js';
-```

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

@@ -1,30 +0,0 @@
-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-complex/node_modules/overlays/instance.js

@@ -1,4 +0,0 @@
-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-complex/node_modules/page-a/page-a.js

@@ -1,35 +0,0 @@
-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-complex/node_modules/page-b/node_modules/overlays/index.js

@@ -1,30 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,69 +0,0 @@
-import { OverlaysManager, OverlaysManager as OverlaysManager2 } from 'overlays';
-import { singletonManager } from 'singleton-manager';
-
-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

@@ -1,93 +0,0 @@
-import { LitElement, css, html } from 'lit';
-
-import 'page-c/page-c.js';
-import 'page-d/page-d.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-c></page-c> ` : html` <page-d></page-d> `}
-    `;
-  }
-}
-
-customElements.define('demo-app-fail', DemoApp);

package/docs/fundamentals/tools/singleton-manager/example-fail/index.md

@@ -1,32 +0,0 @@
----
-parts:
-  - Example Fail
-  - Singleton Manager
-  - Tools
-title: 'Example Fail'
-eleventyNavigation:
-  key: Tools >> Singleton Manager >> Example Fail
-  title: Example Fail
-  order: 20
-  parent: Tools >> Singleton Manager
----
-
-# Example Fail
-
-In this SPA (Single Page Application) demo you will be able to reproduce the issue.
-
-1. Click on Page A
-2. Click on `block`
-3. Click on Page B
-4. Click on `unblock` => nothing happens
-5. Click on `block` => both overlays are now blocked
-
-In an real application this would now mean that your users can no longer interact with your application.
-
-<demo-app-fail>Loading App...</demo-app-fail>
-
-<div id="overlay-target" style="margin-top: 50px;"></div>
-
-```js script
-import './demo-app.js';
-```

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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-import { overlays } from 'overlays/instance.js';
-
-export class PageC 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-c', PageC);

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

@@ -1,30 +0,0 @@
-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-d/node_modules/overlays/instance.js

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

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

@@ -1,34 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-import { overlays } from 'overlays/instance.js';
-
-export class PageD 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-d', PageD);