ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(overlays): improve overlay-system storybook demo

Browse source
This commit is contained in:
qa46hx 2020-01-23 15:48:52 +01:00
parent 278ab917a6
commit 3a0c71e6aa
4 changed files with 100 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
packages/overlays/stories/20-index.stories.mdx
View file

@ -6,11 +6,11 @@ import {
withModalDialogConfig,
} from '../index.js';
import './lion-demo-overlay.js';
import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js';1
import { ref as r } from './directives/ref.js';
<Meta title="Overlays/System/Overview" parameters={{ component: 'lion-demo-overlay' }} />
<Meta title="Overlays/System/Overview" parameters={{ component: 'demo-overlay-system' }} />
# Overlay System
@ -23,9 +23,9 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
<Story name="default">
{html`
<lion-demo-overlay>
<demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -33,14 +33,14 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay>
<demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -48,7 +48,7 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## Features
@ -132,9 +132,9 @@ _defineOverlayConfig() {
or declaratively in your template with the `.config` property
```html
<lion-demo-overlay .config=${{ ...withModalDialogConfig() }}>
<demo-overlay-system .config=${{ ...withModalDialogConfig() }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -142,7 +142,7 @@ or declaratively in your template with the `.config` property
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
### Responsive switching
@ -157,7 +157,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
<Story name="Responsive switching">
{html`
<lion-demo-overlay
<demo-overlay-system
.config=${{ ...withBottomSheetConfig() }}
@before-opened=${e => {
if (window.innerWidth >= 600) {
@ -176,12 +176,12 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay
<demo-overlay-system
.config=${{ ...withBottomSheetConfig() }}
@before-opened=${e => {
if (window.innerWidth >= 600) {
@ -192,7 +192,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
}}
>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -200,7 +200,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance.
@ -262,7 +262,7 @@ Below is another demo where you can toggle between configurations using buttons.
Dropdown
</button>
</div>
<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -272,7 +272,7 @@ Below is another demo where you can toggle between configurations using buttons.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
@ -293,9 +293,9 @@ Change config to:
Dropdown
</button>
</div>
<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -303,7 +303,7 @@ Change config to:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## Opened state
@ -326,7 +326,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
}
return html`
appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -336,7 +336,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`;
}}
</Story>
@ -357,9 +357,9 @@ function onOpenClosed(ev) {
<div>
appState.opened: ${openedStateNode}
</div>
<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<button slot="invoker">Overlay</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -367,7 +367,7 @@ function onOpenClosed(ev) {
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## Intercepting open/close
@ -391,13 +391,13 @@ the `before-close` or `before-open` events.
blockOverlay = !blockOverlay;
refs.statusButton.textContent = blockOverlay;
}}">${blockOverlay}</button>
<lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button @click=${() => refs.overlay.opened = false}>⨯</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`;
}}
</Story>
@ -413,13 +413,13 @@ the `before-close` or `before-open` events.
```
```html
<lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button @click=${() => refs.overlay.opened = false}>⨯</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
@ -495,7 +495,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<Story name="OverlaysManager">
{html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -508,8 +508,8 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
</div>
</div>
</lion-demo-overlay>
<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
</demo-overlay-system>
<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here:
<button
@ -518,14 +518,14 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -536,9 +536,9 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
</div>
</div>
</lion-demo-overlay>
</demo-overlay-system>
<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here:
<button
@ -547,5 +547,5 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```

104
packages/overlays/stories/40-system-configuration.stories.mdx
View file

@ -1,9 +1,9 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook';
import './lion-demo-overlay.js';
import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js';
<Meta title="Overlays/System/Configuration" parameters={{ component: 'lion-demo-overlay' }} />
<Meta title="Overlays/System/Configuration" parameters={{ component: 'demo-overlay-system' }} />
# Overlay System - Configuration
@ -21,7 +21,7 @@ or in the `global-overlays` container at the bottom of the `<body>`.
Local:
<Story name="placementMode: local">
{html`
<lion-demo-overlay .config=${{ placementMode: 'local' }}>
<demo-overlay-system .config=${{ placementMode: 'local' }}>
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -32,12 +32,12 @@ Local:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ placementMode: 'local' }}>
<demo-overlay-system .config=${{ placementMode: 'local' }}>
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -48,13 +48,13 @@ Local:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
Global:
<Story name="placementMode: global">
{html`
<lion-demo-overlay .config=${{ placementMode: 'global' }}>
<demo-overlay-system .config=${{ placementMode: 'global' }}>
<button slot="invoker">Click me to open the global overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -65,12 +65,12 @@ Global:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ placementMode: 'global' }}>
<demo-overlay-system .config=${{ placementMode: 'global' }}>
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -81,7 +81,7 @@ Global:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## trapsKeyboardFocus
@ -95,7 +95,7 @@ You use the feature on any type of overlay.
<Story name="trapsKeyboardFocus">
{html`
<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}>
<demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div>
@ -108,12 +108,12 @@ You use the feature on any type of overlay.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}>
<demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div>
@ -126,7 +126,7 @@ You use the feature on any type of overlay.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## hidesOnEsc
@ -137,7 +137,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
<Story name="hidesOnEsc">
{html`
<lion-demo-overlay .config=${{ hidesOnEsc: true }}>
<demo-overlay-system .config=${{ hidesOnEsc: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -148,12 +148,12 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hidesOnEsc: true }}>
<demo-overlay-system .config=${{ hidesOnEsc: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -164,7 +164,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## hidesOnOutsideClick
@ -173,7 +173,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
<Story name="hidesOnOutsideClick">
{html`
<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}>
<demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -184,12 +184,12 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}>
<demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -200,7 +200,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## elementToFocusAfterHide
@ -211,7 +211,7 @@ In the example, we focus the body instead of the `invokerNode`.
<Story name="elementToFocusAfterHide">
{html`
<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}>
<demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -222,12 +222,12 @@ In the example, we focus the body instead of the `invokerNode`.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}>
<demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -238,7 +238,7 @@ In the example, we focus the body instead of the `invokerNode`.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## hasBackdrop
@ -258,7 +258,7 @@ This currently only supports CSS Animations, because it relies on the `animation
<Story name="hasBackdrop">
{html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -269,12 +269,12 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -285,7 +285,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## isBlocking
@ -305,13 +305,13 @@ This currently only supports CSS Animations, because it relies on the `animation
<Story name="isBlocking">
{html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div>
<lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
<button slot="invoker">Click me to open another overlay which is blocking</button>
<div slot="content" class="demo-overlay demo-overlay--second">
<div slot="content" class="demo-overlay demo-overlay--blocking">
Hello! You can close this notification here:
<button
class="close-button"
@ -320,7 +320,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
</div>
Hello! You can close this notification here:
<button
@ -330,18 +330,18 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div>
<lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
<button slot="invoker">Click me to open another overlay which is blocking</button>
<div slot="content" class="demo-overlay demo-overlay--second">
<div slot="content" class="demo-overlay demo-overlay--blocking">
Hello! You can close this notification here:
<button
class="close-button"
@ -350,7 +350,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
</div>
Hello! You can close this notification here:
<button
@ -360,7 +360,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated.
@ -372,7 +372,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
<Story name="preventsScroll">
{html`
<lion-demo-overlay .config=${{ preventsScroll: true }}>
<demo-overlay-system .config=${{ preventsScroll: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -383,12 +383,12 @@ Boolean property. When true, prevents scrolling content that is outside of the `
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ preventsScroll: true }}>
<demo-overlay-system .config=${{ preventsScroll: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -399,7 +399,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## viewportConfig
@ -420,7 +420,7 @@ Options:
<Story name="viewportConfig">
{html`
<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<button slot="invoker">Click me to open the overlay in the top left corner!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -431,12 +431,12 @@ Options:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<button slot="invoker">Click me to open the overlay in the top left corner!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -447,7 +447,7 @@ Options:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
@ -471,7 +471,7 @@ Here's a succinct overview of some often used popper properties:
<Story name="popperConfig">
{html`
<lion-demo-overlay .config=${{
<demo-overlay-system .config=${{
placementMode: 'local',
popperConfig: {
/* Placement of content node, relative to invoker node */
@ -514,12 +514,12 @@ Here's a succinct overview of some often used popper properties:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```js
<lion-demo-overlay .config=${{
<demo-overlay-system .config=${{
placementMode: 'local',
popperConfig: {
/* Placement of content node, relative to invoker node */
@ -562,7 +562,7 @@ Here's a succinct overview of some often used popper properties:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
> Note: popperConfig reflects <a href="https://popper.js.org/popper-documentation.html" target="_blank">Popper.js API</a>

2
packages/overlays/stories/applyDemoOverlayStyles.js
View file

@ -7,7 +7,7 @@ const applyDemoOverlayStyles = () => {
padding: 10px;
}
.demo-overlay--second {
.demo-overlay--blocking {
background-color: pink;
}
`;

4
packages/overlays/stories/lion-demo-overlay.js → packages/overlays/stories/demo-overlay-system.js
View file

@ -1,7 +1,7 @@
import { html, LitElement } from '@lion/core';
import { OverlayMixin } from '../src/OverlayMixin.js';
class LionDemoOverlay extends OverlayMixin(LitElement) {
class DemoOverlaySystem extends OverlayMixin(LitElement) {
_defineOverlayConfig() {
return {
placementMode: 'global',
@ -35,4 +35,4 @@ class LionDemoOverlay extends OverlayMixin(LitElement) {
`;
}
}
customElements.define('lion-demo-overlay', LionDemoOverlay);
customElements.define('demo-overlay-system', DemoOverlaySystem);