133 lines
3.4 KiB
JavaScript
133 lines
3.4 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2022 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import '@tp/tp-icon/tp-icon.js';
|
|
import { LitElement, html, css, svg } from 'lit';
|
|
import { EventHelpers } from '@tp/helpers/event-helpers.js';
|
|
import { closest } from '@tp/helpers/closest.js';
|
|
|
|
class TpDialog extends EventHelpers(LitElement) {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
inset: 0px;
|
|
pointer-events: none;
|
|
overflow: auto;
|
|
z-index: 9999;
|
|
}
|
|
|
|
:host([open]) {
|
|
pointer-events: all;
|
|
}
|
|
|
|
dialog {
|
|
position: relative;
|
|
border-radius: var(--tp-dialog-border-radius);
|
|
background-color: var(--tp-dialog-bg);
|
|
color: var(--text);
|
|
border: var(--tp-dialog-border);
|
|
padding: var(--tp-dialog-padding);
|
|
}
|
|
|
|
.close-icon {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 5px;
|
|
--tp-icon-width: 18px;
|
|
--tp-icon-height: 18px;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
const { showClose } = this;
|
|
return html`
|
|
<dialog part="dialog">
|
|
${showClose ? html`
|
|
<div class="close-icon">
|
|
<tp-icon .icon=${this.icon ? this.icon : TpDialog.closeIcon} dialog-dismiss></tp-icon>
|
|
</div>
|
|
` : null}
|
|
<slot></slot>
|
|
</dialog>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
open: { type: Boolean, reflect: true },
|
|
showClose: { type: Boolean },
|
|
icon: { type: Object },
|
|
};
|
|
}
|
|
|
|
static get closeIcon() {
|
|
return svg`<path fill="var(--tp-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
|
|
}
|
|
|
|
get dialog() {
|
|
return this.shadowRoot.querySelector('dialog');
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.listen(this, 'click', '_onDialogClick');
|
|
this.listen(this, 'dialog-close', 'close');
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this.unlisten(this, 'click', '_onDialogClick');
|
|
this.unlisten(this, 'dialog-close', 'close');
|
|
}
|
|
|
|
show() {
|
|
this.dialog.show();
|
|
this.open = true;
|
|
}
|
|
|
|
showModal() {
|
|
this.dialog.showModal();
|
|
this.open = true;
|
|
}
|
|
|
|
close() {
|
|
this.dialog.close();
|
|
this.open = false;
|
|
}
|
|
|
|
_onDialogClick(event) {
|
|
var rootTarget = event.composedPath()[0];
|
|
var target = closest(rootTarget, '[dialog-dismiss]', true) || closest(rootTarget, '[dialog-confirm]', true);
|
|
while (target && target !== this) {
|
|
if (target.hasAttribute) {
|
|
if (target.hasAttribute('dialog-dismiss')) {
|
|
var reason = target.getAttribute('dialog-dismiss');
|
|
this.dispatchEvent(new CustomEvent('dismissed', { detail: reason.length > 0 ? reason : true, bubbles: true, composed: true }));
|
|
this.close();
|
|
event.stopPropagation();
|
|
break;
|
|
} else if (target.hasAttribute('dialog-confirm')) {
|
|
var reason = target.getAttribute('dialog-confirm');
|
|
this.dispatchEvent(new CustomEvent('confirmed', { detail: reason.length > 0 ? reason : true, bubbles: true, composed: true }));
|
|
this.close();
|
|
event.stopPropagation();
|
|
break;
|
|
}
|
|
}
|
|
target = target.parentNode;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-dialog', TpDialog);
|