@vaadin/dialog 24.2.0-alpha1 → 24.2.0-alpha10

package/src/vaadin-dialog-styles.js

@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const dialogOverlay = 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;
+    }
+  }
+`;
+
+export const resizableOverlay = 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;
+  }
+`;

package/src/vaadin-dialog.d.ts

@@ -6,7 +6,9 @@
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
+import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 
 export { DialogOverlay, DialogOverlayBounds, DialogOverlayBoundsParam } from './vaadin-dialog-overlay.js';
@@ -101,26 +103,11 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Dialog extends OverlayClassMixin(
-  ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(HTMLElement)))),
+declare class Dialog extends DialogDraggableMixin(
+  DialogResizableMixin(
+    DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
+  ),
 ) {
-  /**
-   * 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 the `aria-label` attribute for assistive technologies like
    * screen readers. An empty string value for this property (the
@@ -128,66 +115,6 @@ declare class Dialog extends OverlayClassMixin(
    */
   ariaLabel: string;
 
-  /**
-   * 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;
-
-  /**
-   * Set to true to remove backdrop and allow click events on background elements.
-   */
-  modeless: boolean;
-
-  /**
-   * 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;
-
   addEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,

package/src/vaadin-dialog.js

@@ -9,7 +9,9 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
+import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 
 export { DialogOverlay } from './vaadin-dialog-overlay.js';
@@ -78,12 +80,16 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * @extends HTMLElement
  * @mixes ThemePropertyMixin
  * @mixes ElementMixin
+ * @mixes DialogBaseMixin
  * @mixes DialogDraggableMixin
+ * @mixes DialogRendererMixin
  * @mixes DialogResizableMixin
  * @mixes OverlayClassMixin
  */
-class Dialog extends OverlayClassMixin(
-  ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(PolymerElement)))),
+class Dialog extends DialogDraggableMixin(
+  DialogResizableMixin(
+    DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerElement))))),
+  ),
 ) {
   static get template() {
     return html`
@@ -115,36 +121,6 @@ class Dialog extends OverlayClassMixin(
 
   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 the `aria-label` attribute for assistive technologies like
        * screen readers. An empty string value for this property (the
@@ -154,65 +130,6 @@ class Dialog extends OverlayClassMixin(
         type: String,
         value: '',
       },
-
-      /**
-       * 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: Function,
-
-      /**
-       * 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: Function,
-
-      /**
-       * 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: Function,
-
-      /**
-       * Set to true to remove backdrop and allow click events on background elements.
-       * @type {boolean}
-       */
-      modeless: {
-        type: Boolean,
-        value: false,
-      },
     };
   }
 
@@ -228,58 +145,16 @@ class Dialog extends OverlayClassMixin(
   ready() {
     super.ready();
 
-    const overlay = this.$.overlay;
-    overlay.setAttribute('role', 'dialog');
-
-    overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
-    overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
-
-    this._overlayElement = overlay;
+    this._overlayElement.setAttribute('role', 'dialog');
 
     processTemplates(this);
   }
 
-  /**
-   * 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.$) {
-      this.$.overlay.requestContentUpdate();
-    }
-  }
-
   /** @private */
   _rendererChanged(renderer, headerRenderer, footerRenderer) {
     this.$.overlay.setProperties({ owner: this, renderer, headerRenderer, footerRenderer });
   }
 
-  /** @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;
-      }
-    });
-  }
-
   /** @private */
   _openedChanged(opened) {
     this.$.overlay.opened = opened;
@@ -293,40 +168,6 @@ class Dialog extends OverlayClassMixin(
       this.$.overlay.removeAttribute('aria-label');
     }
   }
-
-  /** @private */
-  _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.$.overlay.bringToFront();
-    }
-  }
 }
 
 customElements.define(Dialog.is, Dialog);

package/theme/lumo/vaadin-dialog-styles.js

@@ -103,3 +103,5 @@ const dialogOverlay = css`
 `;
 
 registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], { moduleId: 'lumo-dialog' });
+
+export { dialogOverlay };

package/theme/material/vaadin-dialog-styles.js

@@ -60,3 +60,5 @@ const dialogOverlay = css`
 registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], {
   moduleId: 'material-dialog',
 });
+
+export { dialogOverlay };