@vaadin/dialog 24.2.0-alpha4 → 24.2.0-dev.385a0a5b2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-dev.385a0a5b2",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,10 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/vaadin-lit-dialog-overlay.d.ts",
+    "!src/vaadin-lit-dialog-overlay.js",
+    "!src/vaadin-lit-dialog.d.ts",
+    "!src/vaadin-lit-dialog.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -39,18 +43,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.2.0-alpha4",
-    "@vaadin/lit-renderer": "24.2.0-alpha4",
-    "@vaadin/overlay": "24.2.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha4"
+    "@vaadin/component-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/lit-renderer": "24.2.0-dev.385a0a5b2",
+    "@vaadin/overlay": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-material-styles": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.385a0a5b2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.2.0-alpha4",
-    "@vaadin/testing-helpers": "^0.4.2",
-    "@vaadin/text-area": "24.2.0-alpha4",
+    "@vaadin/a11y-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/text-area": "24.2.0-dev.385a0a5b2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -58,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
+  "gitHead": "9d84e4049890430a33e91ff64a6e751a1ba9b9d9"
 }

package/src/lit/renderer-directives.d.ts

@@ -4,12 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */
-import type { TemplateResult } from 'lit';
 import type { DirectiveResult } from 'lit/directive.js';
+import type { LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
 import type { Dialog } from '../vaadin-dialog.js';
 
-export type DialogLitRenderer = (dialog: Dialog) => TemplateResult;
+export type DialogLitRenderer = (dialog: Dialog) => LitRendererResult;
 
 declare abstract class AbstractDialogRendererDirective extends LitRendererDirective<Dialog, DialogLitRenderer> {
   /**

package/src/vaadin-dialog-base-mixin.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function DialogBaseMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DialogBaseMixinClass> & T;
+
+export declare class DialogBaseMixinClass {
+  /**
+   * True if the overlay is currently displayed.
+   */
+  opened: boolean;
+
+  /**
+   * Set to true to disable closing dialog on outside click
+   * @attr {boolean} no-close-on-outside-click
+   */
+  noCloseOnOutsideClick: boolean;
+
+  /**
+   * Set to true to disable closing dialog on Escape press
+   * @attr {boolean} no-close-on-esc
+   */
+  noCloseOnEsc: boolean;
+
+  /**
+   * Set to true to remove backdrop and allow click events on background elements.
+   */
+  modeless: boolean;
+}

package/src/vaadin-dialog-base-mixin.js

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const DialogBaseMixin = (superClass) =>
+  class DialogBaseMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * True if the overlay is currently displayed.
+         * @type {boolean}
+         */
+        opened: {
+          type: Boolean,
+          value: false,
+          notify: true,
+        },
+
+        /**
+         * Set to true to disable closing dialog on outside click
+         * @attr {boolean} no-close-on-outside-click
+         * @type {boolean}
+         */
+        noCloseOnOutsideClick: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * Set to true to disable closing dialog on Escape press
+         * @attr {boolean} no-close-on-esc
+         * @type {boolean}
+         */
+        noCloseOnEsc: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * Set to true to remove backdrop and allow click events on background elements.
+         * @type {boolean}
+         */
+        modeless: {
+          type: Boolean,
+          value: false,
+        },
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      const overlay = this.$.overlay;
+
+      overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
+      overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
+
+      this._overlayElement = overlay;
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      // Restore opened state if overlay was opened when disconnecting
+      if (this.__restoreOpened) {
+        this.opened = true;
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      // Automatically close the overlay when dialog is removed from DOM
+      // Using a timeout to avoid toggling opened state, and dispatching change
+      // events, when just moving the dialog in the DOM
+      setTimeout(() => {
+        if (!this.isConnected) {
+          this.__restoreOpened = this.opened;
+          this.opened = false;
+        }
+      });
+    }
+
+    /** @protected */
+    _onOverlayOpened(e) {
+      if (e.detail.value === false) {
+        this.opened = false;
+      }
+    }
+
+    /**
+     * Close the dialog if `noCloseOnOutsideClick` isn't set to true
+     * @private
+     */
+    _handleOutsideClick(e) {
+      if (this.noCloseOnOutsideClick) {
+        e.preventDefault();
+      }
+    }
+
+    /**
+     * Close the dialog if `noCloseOnEsc` isn't set to true
+     * @private
+     */
+    _handleEscPress(e) {
+      if (this.noCloseOnEsc) {
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    _bringOverlayToFront() {
+      if (this.modeless) {
+        this._overlayElement.bringToFront();
+      }
+    }
+  };

package/src/vaadin-dialog-draggable-mixin.js

@@ -45,13 +45,16 @@ export const DialogDraggableMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
+    async ready() {
       super.ready();
       this._originalBounds = {};
       this._originalMouseCoords = {};
       this._startDrag = this._startDrag.bind(this);
       this._drag = this._drag.bind(this);
       this._stopDrag = this._stopDrag.bind(this);
+
+      // Wait for overlay render
+      await new Promise(requestAnimationFrame);
       this.$.overlay.$.overlay.addEventListener('mousedown', this._startDrag);
       this.$.overlay.$.overlay.addEventListener('touchstart', this._startDrag);
     }

package/src/vaadin-dialog-overlay-mixin.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { OverlayMixinClass } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import type { DialogRenderer } from './vaadin-dialog.js';
+
+export type DialogOverlayBounds = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+export type DialogOverlayBoundsParam =
+  | DialogOverlayBounds
+  | {
+      top?: number | string;
+      left?: number | string;
+      width?: number | string;
+      height?: number | string;
+    };
+
+export declare function DialogOverlayMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DialogOverlayMixinClass> & Constructor<OverlayMixinClass> & T;
+
+export declare class DialogOverlayMixinClass {
+  /**
+   * String used for rendering a dialog title.
+   * @attr {string} header-title
+   */
+  headerTitle: string;
+
+  /**
+   * Custom function for rendering the dialog header.
+   */
+  headerRenderer: DialogRenderer | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog footer.
+   */
+  footerRenderer: DialogRenderer | null | undefined;
+
+  /**
+   * Retrieves the coordinates of the overlay.
+   */
+  getBounds(): DialogOverlayBounds;
+
+  /**
+   * Updates the coordinates of the overlay.
+   */
+  setBounds(bounds: DialogOverlayBoundsParam): void;
+}

package/src/vaadin-dialog-overlay-mixin.js

@@ -0,0 +1,257 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes OverlayMixin
+ */
+export const DialogOverlayMixin = (superClass) =>
+  class DialogOverlayMixin extends OverlayMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * String used for rendering a dialog title.
+         */
+        headerTitle: {
+          type: String,
+        },
+
+        /**
+         * Custom function for rendering the dialog header.
+         */
+        headerRenderer: {
+          type: Object,
+        },
+
+        /**
+         * Custom function for rendering the dialog footer.
+         */
+        footerRenderer: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return [
+        '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
+        '_headerTitleChanged(headerTitle, opened)',
+      ];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // Update overflow attribute on resize
+      this.__resizeObserver = new ResizeObserver(() => {
+        this.__updateOverflow();
+      });
+      this.__resizeObserver.observe(this.$.resizerContainer);
+
+      // Update overflow attribute on scroll
+      this.$.content.addEventListener('scroll', () => {
+        this.__updateOverflow();
+      });
+    }
+
+    /** @private */
+    __createContainer(slot) {
+      const container = document.createElement('div');
+      container.setAttribute('slot', slot);
+      return container;
+    }
+
+    /** @private */
+    __clearContainer(container) {
+      container.innerHTML = '';
+      // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+      // When clearing the rendered content, this part needs to be manually disposed of.
+      // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+      delete container._$litPart$;
+    }
+
+    /** @private */
+    __initContainer(container, slot) {
+      if (container) {
+        // Reset existing container in case if a new renderer is set.
+        this.__clearContainer(container);
+      } else {
+        // Create the container, but wait to append it until requestContentUpdate is called.
+        container = this.__createContainer(slot);
+      }
+      return container;
+    }
+
+    /** @private */
+    _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+      const headerRendererChanged = this.__oldHeaderRenderer !== headerRenderer;
+      this.__oldHeaderRenderer = headerRenderer;
+
+      const footerRendererChanged = this.__oldFooterRenderer !== footerRenderer;
+      this.__oldFooterRenderer = footerRenderer;
+
+      const openedChanged = this._oldOpenedFooterHeader !== opened;
+      this._oldOpenedFooterHeader = opened;
+
+      // Set attributes here to update styles before detecting content overflow
+      this.toggleAttribute('has-header', !!headerRenderer);
+      this.toggleAttribute('has-footer', !!footerRenderer);
+
+      if (headerRendererChanged) {
+        if (headerRenderer) {
+          this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
+        } else if (this.headerContainer) {
+          this.headerContainer.remove();
+          this.headerContainer = null;
+          this.__updateOverflow();
+        }
+      }
+
+      if (footerRendererChanged) {
+        if (footerRenderer) {
+          this.footerContainer = this.__initContainer(this.footerContainer, 'footer');
+        } else if (this.footerContainer) {
+          this.footerContainer.remove();
+          this.footerContainer = null;
+          this.__updateOverflow();
+        }
+      }
+
+      if (
+        (headerRenderer && (headerRendererChanged || openedChanged)) ||
+        (footerRenderer && (footerRendererChanged || openedChanged))
+      ) {
+        if (opened) {
+          this.requestContentUpdate();
+        }
+      }
+    }
+
+    /** @private */
+    _headerTitleChanged(headerTitle, opened) {
+      this.toggleAttribute('has-title', !!headerTitle);
+
+      if (opened && (headerTitle || this._oldHeaderTitle)) {
+        this.requestContentUpdate();
+      }
+      this._oldHeaderTitle = headerTitle;
+    }
+
+    /** @private */
+    _headerTitleRenderer() {
+      if (this.headerTitle) {
+        if (!this.headerTitleElement) {
+          this.headerTitleElement = document.createElement('h2');
+          this.headerTitleElement.setAttribute('slot', 'title');
+          this.headerTitleElement.classList.add('draggable');
+        }
+        this.appendChild(this.headerTitleElement);
+        this.headerTitleElement.textContent = this.headerTitle;
+      } else if (this.headerTitleElement) {
+        this.headerTitleElement.remove();
+        this.headerTitleElement = null;
+      }
+    }
+
+    /**
+     * @override
+     */
+    requestContentUpdate() {
+      super.requestContentUpdate();
+
+      if (this.headerContainer) {
+        // If a new renderer has been set, make sure to reattach the container
+        if (!this.headerContainer.parentElement) {
+          this.appendChild(this.headerContainer);
+        }
+
+        if (this.headerRenderer) {
+          // Only call header renderer after the container has been initialized
+          this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
+        }
+      }
+
+      if (this.footerContainer) {
+        // If a new renderer has been set, make sure to reattach the container
+        if (!this.footerContainer.parentElement) {
+          this.appendChild(this.footerContainer);
+        }
+
+        if (this.footerRenderer) {
+          // Only call header renderer after the container has been initialized
+          this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
+        }
+      }
+
+      this._headerTitleRenderer();
+
+      this.__updateOverflow();
+    }
+
+    /**
+     * Updates the coordinates of the overlay.
+     * @param {!DialogOverlayBoundsParam} bounds
+     */
+    setBounds(bounds) {
+      const overlay = this.$.overlay;
+      const parsedBounds = { ...bounds };
+
+      if (overlay.style.position !== 'absolute') {
+        overlay.style.position = 'absolute';
+        this.setAttribute('has-bounds-set', '');
+      }
+
+      Object.keys(parsedBounds).forEach((arg) => {
+        if (typeof parsedBounds[arg] === 'number') {
+          parsedBounds[arg] = `${parsedBounds[arg]}px`;
+        }
+      });
+
+      Object.assign(overlay.style, parsedBounds);
+    }
+
+    /**
+     * Retrieves the coordinates of the overlay.
+     * @return {!DialogOverlayBounds}
+     */
+    getBounds() {
+      const overlayBounds = this.$.overlay.getBoundingClientRect();
+      const containerBounds = this.getBoundingClientRect();
+      const top = overlayBounds.top - containerBounds.top;
+      const left = overlayBounds.left - containerBounds.left;
+      const width = overlayBounds.width;
+      const height = overlayBounds.height;
+      return { top, left, width, height };
+    }
+
+    /** @private */
+    __updateOverflow() {
+      let overflow = '';
+
+      // Only set "overflow" attribute if the dialog has a header, title or footer.
+      // Check for state attributes as extending components might not use renderers.
+      if (this.hasAttribute('has-header') || this.hasAttribute('has-footer') || this.headerTitle) {
+        const content = this.$.content;
+
+        if (content.scrollTop > 0) {
+          overflow += ' top';
+        }
+
+        if (content.scrollTop < content.scrollHeight - content.clientHeight) {
+          overflow += ' bottom';
+        }
+      }
+
+      const value = overflow.trim();
+      if (value.length > 0 && this.getAttribute('overflow') !== value) {
+        this.setAttribute('overflow', value);
+      } else if (value.length === 0 && this.hasAttribute('overflow')) {
+        this.removeAttribute('overflow');
+      }
+    }
+  };

package/src/vaadin-dialog-overlay.d.ts

@@ -3,38 +3,16 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
 
-export type DialogOverlayBounds = {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-};
-
-export type DialogOverlayBoundsParam =
-  | DialogOverlayBounds
-  | {
-      top?: number | string;
-      left?: number | string;
-      width?: number | string;
-      height?: number | string;
-    };
+export { DialogOverlayBounds, DialogOverlayBoundsParam } from './vaadin-dialog-overlay-mixin.js';
 
 /**
  * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
  */
-export class DialogOverlay extends Overlay {
-  /**
-   * Retrieves the coordinates of the overlay.
-   */
-  getBounds(): DialogOverlayBounds;
-
-  /**
-   * Updates the coordinates of the overlay.
-   */
-  setBounds(bounds: DialogOverlayBoundsParam): void;
-}
+export class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {