Initial version

2022-03-12 22:36:52 +01:00
parent 71a6055d03
commit fefa2fa99b
5 changed files with 218 additions and 40 deletions
--- a/tp-dialog.js
+++ b/tp-dialog.js
@@ -0,0 +1,129 @@
+/**
+@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 } 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;
+        }
+
+        :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>
+        ${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');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unlisten(this, 'click', '_onDialogClick');
+  }
+
+  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);