@vaadin/dialog 24.2.0-alpha4 → 24.2.0-dev.538d07bdf

package/src/vaadin-dialog-overlay.js

@@ -3,379 +3,45 @@
  * 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 { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
+import { dialogOverlay, resizableOverlay } from './vaadin-dialog-styles.js';
 
-registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    [part='header'],
-    [part='header-content'],
-    [part='footer'] {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      flex: none;
-      pointer-events: none;
-      z-index: 1;
-    }
-
-    [part='header'] {
-      flex-wrap: nowrap;
-    }
-
-    ::slotted([slot='header-content']),
-    ::slotted([slot='title']),
-    ::slotted([slot='footer']) {
-      display: contents;
-      pointer-events: auto;
-    }
-
-    ::slotted([slot='title']) {
-      font: inherit !important;
-      overflow-wrap: anywhere;
-    }
-
-    [part='header-content'] {
-      flex: 1;
-    }
-
-    :host([has-title]) [part='header-content'],
-    [part='footer'] {
-      justify-content: flex-end;
-    }
-
-    :host(:not([has-title]):not([has-header])) [part='header'],
-    :host(:not([has-header])) [part='header-content'],
-    :host(:not([has-title])) [part='title'],
-    :host(:not([has-footer])) [part='footer'] {
-      display: none !important;
-    }
-
-    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-      height: auto;
-    }
-
-    @media (min-height: 320px) {
-      :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-        flex: 1;
-        overflow: auto;
-      }
-    }
-
-    /*
-      NOTE(platosha): Make some min-width to prevent collapsing of the content
-      taking the parent width, e. g., <vaadin-grid> and such.
-    */
-    [part='content'] {
-      min-width: 12em; /* matches the default <vaadin-text-field> width */
-    }
-
-    :host([has-bounds-set]) [part='overlay'] {
-      max-width: none;
-    }
-
-    @media (forced-colors: active) {
-      [part='overlay'] {
-        outline: 3px solid !important;
-      }
-    }
-  `,
-  { moduleId: 'vaadin-dialog-overlay-styles' },
-);
-
-let memoizedTemplate;
+registerStyles('vaadin-dialog-overlay', [overlayStyles, dialogOverlay, resizableOverlay], {
+  moduleId: 'vaadin-dialog-overlay-styles',
+});
 
 /**
  * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
  *
- * @extends Overlay
+ * @extends HTMLElement
+ * @mixes DialogOverlayMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
  * @private
  */
-export class DialogOverlay extends Overlay {
+export class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-dialog-overlay';
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
-      const overlayPart = memoizedTemplate.content.querySelector('[part="overlay"]');
-      const resizerContainer = document.createElement('section');
-      resizerContainer.id = 'resizerContainer';
-      resizerContainer.classList.add('resizer-container');
-      resizerContainer.appendChild(contentPart);
-      overlayPart.appendChild(resizerContainer);
-
-      const headerContainer = document.createElement('header');
-      headerContainer.setAttribute('part', 'header');
-      resizerContainer.insertBefore(headerContainer, contentPart);
-
-      const titleContainer = document.createElement('div');
-      titleContainer.setAttribute('part', 'title');
-      headerContainer.appendChild(titleContainer);
-
-      const titleSlot = document.createElement('slot');
-      titleSlot.setAttribute('name', 'title');
-      titleContainer.appendChild(titleSlot);
-
-      const headerContentContainer = document.createElement('div');
-      headerContentContainer.setAttribute('part', 'header-content');
-      headerContainer.appendChild(headerContentContainer);
-
-      const headerSlot = document.createElement('slot');
-      headerSlot.setAttribute('name', 'header-content');
-      headerContentContainer.appendChild(headerSlot);
-
-      const footerContainer = document.createElement('footer');
-      footerContainer.setAttribute('part', 'footer');
-      resizerContainer.appendChild(footerContainer);
-
-      const footerSlot = document.createElement('slot');
-      footerSlot.setAttribute('name', 'footer');
-      footerContainer.appendChild(footerSlot);
-    }
-    return memoizedTemplate;
-  }
-
-  static get observers() {
-    return [
-      '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
-      '_headerTitleChanged(headerTitle, opened)',
-    ];
-  }
-
-  static get properties() {
-    return {
-      modeless: Boolean,
-
-      withBackdrop: Boolean,
-
-      headerTitle: String,
-
-      headerRenderer: Function,
-
-      footerRenderer: Function,
-    };
-  }
-
-  /** @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');
-    }
+    return html`
+      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <section id="resizerContainer" class="resizer-container">
+          <header part="header">
+            <div part="title"><slot name="title"></slot></div>
+            <div part="header-content"><slot name="header-content"></slot></div>
+          </header>
+          <div part="content" id="content"><slot></slot></div>
+          <footer part="footer"><slot name="footer"></slot></footer>
+        </section>
+      </div>
+    `;
   }
 }
 

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

@@ -0,0 +1,68 @@
+/**
+ * @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 { DialogRenderer } from './vaadin-dialog.js';
+
+export declare function DialogRendererMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DialogRendererMixinClass> & T;
+
+export declare class DialogRendererMixinClass {
+  /**
+   * Custom function for rendering the content of the dialog.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   */
+  renderer: DialogRenderer | null | undefined;
+
+  /**
+   * String used for rendering a dialog title.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+   * @attr {string} header-title
+   */
+  headerTitle: string | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog header.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+   */
+  headerRenderer: DialogRenderer | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog footer.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+   */
+  footerRenderer: DialogRenderer | null | undefined;
+
+  /**
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+}

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

@@ -0,0 +1,84 @@
+/**
+ * @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 DialogRendererMixin = (superClass) =>
+  class DialogRendererMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Custom function for rendering the content of the dialog.
+         * Receives two arguments:
+         *
+         * - `root` The root container DOM element. Append your content to it.
+         * - `dialog` The reference to the `<vaadin-dialog>` element.
+         * @type {DialogRenderer | undefined}
+         */
+        renderer: {
+          type: Object,
+        },
+
+        /**
+         * String used for rendering a dialog title.
+         *
+         * If both `headerTitle` and `headerRenderer` are defined, the title
+         * and the elements created by the renderer will be placed next to
+         * each other, with the title coming first.
+         *
+         * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+         * @attr {string} header-title
+         */
+        headerTitle: String,
+
+        /**
+         * Custom function for rendering the dialog header.
+         * Receives two arguments:
+         *
+         * - `root` The root container DOM element. Append your content to it.
+         * - `dialog` The reference to the `<vaadin-dialog>` element.
+         *
+         * If both `headerTitle` and `headerRenderer` are defined, the title
+         * and the elements created by the renderer will be placed next to
+         * each other, with the title coming first.
+         *
+         * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+         * @type {DialogRenderer | undefined}
+         */
+        headerRenderer: {
+          type: Object,
+        },
+
+        /**
+         * Custom function for rendering the dialog footer.
+         * Receives two arguments:
+         *
+         * - `root` The root container DOM element. Append your content to it.
+         * - `dialog` The reference to the `<vaadin-dialog>` element.
+         *
+         * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+         * @type {DialogRenderer | undefined}
+         */
+        footerRenderer: {
+          type: Object,
+        },
+      };
+    }
+
+    /**
+     * Requests an update for the content of the dialog.
+     * While performing the update, it invokes the renderer passed in the `renderer` property,
+     * as well as `headerRender` and `footerRenderer` properties, if these are defined.
+     *
+     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     */
+    requestContentUpdate() {
+      if (this._overlayElement) {
+        this._overlayElement.requestContentUpdate();
+      }
+    }
+  };

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

@@ -3,108 +3,7 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
-
-registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    [part='overlay'] {
-      position: relative;
-      overflow: visible;
-      max-height: 100%;
-      display: flex;
-    }
-
-    [part='content'] {
-      box-sizing: border-box;
-      height: 100%;
-    }
-
-    .resizer-container {
-      overflow: auto;
-      flex-grow: 1;
-      border-radius: inherit; /* prevent child elements being drawn outside part=overlay */
-    }
-
-    [part='overlay'][style] .resizer-container {
-      min-height: 100%;
-      width: 100%;
-    }
-
-    :host(:not([resizable])) .resizer {
-      display: none;
-    }
-
-    :host([resizable]) [part='title'] {
-      cursor: move;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    .resizer {
-      position: absolute;
-      height: 16px;
-      width: 16px;
-    }
-
-    .resizer.edge {
-      height: 8px;
-      width: 8px;
-      inset: -4px;
-    }
-
-    .resizer.edge.n {
-      width: auto;
-      bottom: auto;
-      cursor: ns-resize;
-    }
-
-    .resizer.ne {
-      top: -4px;
-      right: -4px;
-      cursor: nesw-resize;
-    }
-
-    .resizer.edge.e {
-      height: auto;
-      left: auto;
-      cursor: ew-resize;
-    }
-
-    .resizer.se {
-      bottom: -4px;
-      right: -4px;
-      cursor: nwse-resize;
-    }
-
-    .resizer.edge.s {
-      width: auto;
-      top: auto;
-      cursor: ns-resize;
-    }
-
-    .resizer.sw {
-      bottom: -4px;
-      left: -4px;
-      cursor: nesw-resize;
-    }
-
-    .resizer.edge.w {
-      height: auto;
-      right: auto;
-      cursor: ew-resize;
-    }
-
-    .resizer.nw {
-      top: -4px;
-      left: -4px;
-      cursor: nwse-resize;
-    }
-  `,
-  { moduleId: 'vaadin-dialog-resizable-overlay-styles' },
-);
-
 /**
  * @polymerMixin
  */
@@ -125,11 +24,14 @@ export const DialogResizableMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
+    async ready() {
       super.ready();
       this._originalBounds = {};
       this._originalMouseCoords = {};
       this._resizeListeners = { start: {}, resize: {}, stop: {} };
+
+      // Wait for overlay render
+      await new Promise(requestAnimationFrame);
       this._addResizeListeners();
     }
 

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const dialogOverlay: CSSResult;
+
+export const resizableOverlay: CSSResult;