103 lines
2.4 KiB
JavaScript
103 lines
2.4 KiB
JavaScript
/* eslint-disable max-classes-per-file */
|
||
/* eslint-disable import/no-extraneous-dependencies */
|
||
import { html, LitElement, css } from 'lit';
|
||
import { OverlayMixin } from '@lion/ui/overlays.js';
|
||
import { LionButton } from '@lion/ui/button.js';
|
||
|
||
/**
|
||
* @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
|
||
*/
|
||
class DemoElUsingOverlayMixin extends OverlayMixin(LitElement) {
|
||
// eslint-disable-next-line class-methods-use-this
|
||
_defineOverlayConfig() {
|
||
return /** @type {OverlayConfig} */ ({
|
||
placementMode: 'global',
|
||
});
|
||
}
|
||
|
||
render() {
|
||
return html`
|
||
<slot name="invoker"></slot>
|
||
<slot name="backdrop"></slot>
|
||
<slot name="content"></slot>
|
||
`;
|
||
}
|
||
}
|
||
customElements.define('demo-el-using-overlaymixin', DemoElUsingOverlayMixin);
|
||
|
||
class DemoOverlay extends OverlayMixin(LitElement) {
|
||
static get styles() {
|
||
return [
|
||
css`
|
||
::slotted([slot='content']) {
|
||
background-color: #333;
|
||
color: white;
|
||
padding: 8px;
|
||
}
|
||
|
||
.close-button {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
padding: 4px;
|
||
}
|
||
`,
|
||
];
|
||
}
|
||
|
||
// eslint-disable-next-line class-methods-use-this
|
||
_defineOverlayConfig() {
|
||
return /** @type {OverlayConfig} */ ({
|
||
placementMode: 'global',
|
||
});
|
||
}
|
||
|
||
_setupOpenCloseListeners() {
|
||
super._setupOpenCloseListeners();
|
||
|
||
if (this._overlayInvokerNode) {
|
||
this._overlayInvokerNode.addEventListener('click', this.toggle);
|
||
}
|
||
}
|
||
|
||
_teardownOpenCloseListeners() {
|
||
super._teardownOpenCloseListeners();
|
||
|
||
if (this._overlayInvokerNode) {
|
||
this._overlayInvokerNode.removeEventListener('click', this.toggle);
|
||
}
|
||
}
|
||
|
||
render() {
|
||
return html`
|
||
<slot name="invoker"></slot>
|
||
<slot name="backdrop"></slot>
|
||
<div id="overlay-content-node-wrapper">
|
||
<slot name="content"></slot>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
customElements.define('demo-overlay', DemoOverlay);
|
||
|
||
class DemoCloseButton extends LionButton {
|
||
static get styles() {
|
||
return [
|
||
css`
|
||
::host {
|
||
background: none;
|
||
}
|
||
`,
|
||
];
|
||
}
|
||
|
||
connectedCallback() {
|
||
super.connectedCallback();
|
||
|
||
this.innerText = '⨯';
|
||
this.setAttribute('aria-label', 'Close');
|
||
}
|
||
}
|
||
customElements.define('demo-close-button', DemoCloseButton);
|