feat(cxl-ui): [cxl-dialog] add dialog web component

packages/cxl-ui/package.json

@@ -17,6 +17,7 @@
     "@pika/plugin-build-web": "^0.9.2",
     "@pika/plugin-bundle-web": "^0.9.2",
     "@pika/plugin-standard-pkg": "^0.9.2",
+    "@polymer/polymer": "^3.5.1",
     "@vaadin/accordion": "^23.1.1",
     "@vaadin/button": "^23.1.1",
     "@vaadin/checkbox": "^23.1.1",

packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-overlay.js

@@ -0,0 +1,61 @@
+import { DialogOverlay } from '@vaadin/dialog';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'cxl-dialog-overlay',
+  css`
+    :host {
+      position: absolute;
+    }
+
+    [part='backdrop'] {
+      position: absolute;
+    }
+  `,
+  { moduleId: 'cxl-dialog-overlay-styles' }
+);
+
+export class CXLDialogOverlay extends DialogOverlay {
+  static get is() {
+    return 'cxl-dialog-overlay';
+  }
+
+  static get properties() {
+    return {
+      container: Object,
+    };
+  }
+
+  /** @protected */
+  _attachOverlay() {
+    if(!this.container) return super._attachOverlay();
+
+    this._placeholder = document.createComment('vaadin-overlay-placeholder');
+    this.parentNode.insertBefore(this._placeholder, this);
+    this.container.appendChild(this);
+    this.bringToFront();
+  }
+
+  /** @protected */
+  _enterModalState() {
+    if(!this.container) return super._enterModalState();
+
+    if (document.body.style.pointerEvents !== 'none') {
+      // Set body pointer-events to 'none' to disable mouse interactions with
+      // other document nodes.
+      this._previousDocumentPointerEvents = document.body.style.pointerEvents;
+
+      // Don't set pointer-events
+      // document.body.style.pointerEvents = 'none';
+    }
+
+    // Disable pointer events in other attached overlays
+    CXLDialogOverlay.__attachedInstances.forEach((el) => {
+      if (el !== this) {
+        el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
+      }
+    });
+  }
+}
+
+customElements.define(CXLDialogOverlay.is, CXLDialogOverlay);

packages/cxl-ui/src/components/cxl-dialog/cxl-dialog.js

@@ -0,0 +1,76 @@
+import { html } from '@polymer/polymer/polymer-element.js';
+import { Dialog } from '@vaadin/dialog';
+import './cxl-dialog-overlay.js';
+
+export class CXLDialog extends Dialog {
+  static get template() {
+    /* eslint-disable lit/no-legacy-template-syntax */
+    return html`
+      <style>
+        :host(:not[opened]) {
+          display: none !important;
+        }
+      </style>
+      <cxl-dialog-overlay
+        id="overlay"
+        container="[[container]]"
+        header-title="[[headerTitle]]"
+        on-opened-changed="_onOverlayOpened"
+        on-mousedown="_bringOverlayToFront"
+        on-touchstart="_bringOverlayToFront"
+        theme$="[[_theme]]"
+        modeless="[[modeless]]"
+        with-backdrop="[[!modeless]]"
+        resizable$="[[resizable]]"
+        focus-trap
+      ></cxl-dialog-overlay>
+    `;
+    /* eslint-enable lit/no-legacy-template-syntax */
+  }
+
+  static get is() {
+    return 'cxl-dialog';
+  }
+
+  static get properties() {
+    return {
+      contained: Boolean,
+      container: Object,
+    };
+  }
+
+  constructor() {
+    super();
+
+    if (this.hasAttribute('contained')) {
+      this.container = this.parentNode;
+    }
+  }
+
+  ready() {
+    super.ready();
+
+    if (this.contained) {
+      this.addEventListener('click', this.onClick.bind(this));
+      this.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+  }
+
+  onClick(event) {
+    const { overlay } = this.$;
+    const overlayPart = overlay.shadowRoot.querySelector('[part="overlay"]');
+    const composedPath = event.composedPath();
+
+    if (!composedPath.includes(overlayPart)) {
+      this.opened = false;
+    }
+  }
+
+  onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this.opened = false;
+    }
+  }
+}
+
+customElements.define(CXLDialog.is, CXLDialog);

packages/storybook/cxl-ui/cxl-dialog/cxl-dialog.stories.js

@@ -0,0 +1,59 @@
+import '@conversionxl/cxl-ui/src/components/cxl-dialog/cxl-dialog.js';
+import { html, render } from 'lit';
+
+export default {
+  title: 'CXL UI/cxl-dialog',
+};
+
+/* eslint-disable no-param-reassign */
+// eslint-disable-next-line no-empty-pattern
+const Template = ({ opened }) => html`
+  <style>
+    #root-inner {
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      height: 100vh;
+    }
+
+    #container {
+      border: 1px solid #000;
+      height: 80vh;
+      padding: 1rem;
+      position: relative;
+      width: 80vw;
+    }
+  </style>
+  <div id="container">
+    This is a container
+    <cxl-dialog
+      contained
+      .headerRenderer=${(root, dialog) =>
+        render(
+          html`
+            <vaadin-button
+              theme="tertiary"
+              @click="${() => {
+                dialog.opened = false;
+              }}"
+            >
+              <vaadin-icon icon="lumo:cross"></vaadin-icon>
+            </vaadin-button>
+          `,
+          root
+        )}
+      header-title="Custom Header"
+      ?opened=${opened}
+      .renderer=${(root) => render(html`This is a dialog`, root)}
+    ></cxl-dialog>
+  </div>
+`;
+/* eslint-enable no-param-reassign */
+
+export const CXLDialog = Template.bind({});
+
+Object.assign(CXLDialog, {
+  args: {
+    opened: true,
+  },
+});