@vaadin/dialog 22.0.0-alpha10

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

@@ -0,0 +1,250 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { getMouseOrFirstTouchEvent, eventInWindow } 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;
+    }
+
+    [part='overlay'][style] .resizer-container {
+      min-height: 100%;
+      width: 100%;
+    }
+
+    :host(:not([resizable])) .resizer {
+      display: none;
+    }
+
+    .resizer {
+      position: absolute;
+      height: 16px;
+      width: 16px;
+    }
+
+    .resizer.edge {
+      height: 8px;
+      width: 8px;
+      top: -4px;
+      right: -4px;
+      bottom: -4px;
+      left: -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
+ */
+export const DialogResizableMixin = (superClass) =>
+  class VaadinDialogResizableMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Set to true to enable resizing the dialog by dragging the corners and edges.
+         * @type {boolean}
+         */
+        resizable: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        }
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      this._originalBounds = {};
+      this._originalMouseCoords = {};
+      this._resizeListeners = { start: {}, resize: {}, stop: {} };
+      this._addResizeListeners();
+    }
+
+    /** @private */
+    _addResizeListeners() {
+      // Note: edge controls added before corners
+      ['n', 'e', 's', 'w', 'nw', 'ne', 'se', 'sw'].forEach((direction) => {
+        const resizer = document.createElement('div');
+        this._resizeListeners.start[direction] = (e) => this._startResize(e, direction);
+        this._resizeListeners.resize[direction] = (e) => this._resize(e, direction);
+        this._resizeListeners.stop[direction] = () => this._stopResize(direction);
+        if (direction.length === 1) {
+          resizer.classList.add('edge');
+        }
+        resizer.classList.add('resizer');
+        resizer.classList.add(direction);
+        resizer.addEventListener('mousedown', this._resizeListeners.start[direction]);
+        resizer.addEventListener('touchstart', this._resizeListeners.start[direction]);
+        this.$.overlay.$.resizerContainer.appendChild(resizer);
+      });
+    }
+
+    /**
+     * @param {!MouseEvent | !TouchEvent} e
+     * @param {!DialogResizableDirection} direction
+     * @protected
+     */
+    _startResize(e, direction) {
+      // Don't initiate when there's more than 1 touch (pinch zoom)
+      if (e.type === 'touchstart' && e.touches.length > 1) {
+        return;
+      }
+
+      if (e.button === 0 || e.touches) {
+        e.preventDefault();
+
+        this._originalBounds = this.$.overlay.getBounds();
+        const event = getMouseOrFirstTouchEvent(e);
+        this._originalMouseCoords = { top: event.pageY, left: event.pageX };
+        window.addEventListener('mousemove', this._resizeListeners.resize[direction]);
+        window.addEventListener('touchmove', this._resizeListeners.resize[direction]);
+        window.addEventListener('mouseup', this._resizeListeners.stop[direction]);
+        window.addEventListener('touchend', this._resizeListeners.stop[direction]);
+        if (this.$.overlay.$.overlay.style.position !== 'absolute') {
+          this.$.overlay.setBounds(this._originalBounds);
+        }
+      }
+    }
+
+    /**
+     * @param {!MouseEvent | !TouchEvent} e
+     * @param {!DialogResizableDirection} resizer
+     * @protected
+     */
+    _resize(e, resizer) {
+      const event = getMouseOrFirstTouchEvent(e);
+      if (eventInWindow(event)) {
+        const minimumSize = 40;
+        resizer.split('').forEach((direction) => {
+          switch (direction) {
+            case 'n': {
+              const height = this._originalBounds.height - (event.pageY - this._originalMouseCoords.top);
+              const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
+              if (height > minimumSize) {
+                this.$.overlay.setBounds({ top, height });
+              }
+              break;
+            }
+            case 'e': {
+              const width = this._originalBounds.width + (event.pageX - this._originalMouseCoords.left);
+              if (width > minimumSize) {
+                this.$.overlay.setBounds({ width });
+              }
+              break;
+            }
+            case 's': {
+              const height = this._originalBounds.height + (event.pageY - this._originalMouseCoords.top);
+              if (height > minimumSize) {
+                this.$.overlay.setBounds({ height });
+              }
+              break;
+            }
+            case 'w': {
+              const width = this._originalBounds.width - (event.pageX - this._originalMouseCoords.left);
+              const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
+              if (width > minimumSize) {
+                this.$.overlay.setBounds({ left, width });
+              }
+              break;
+            }
+          }
+        });
+
+        this.$.overlay.notifyResize();
+      }
+    }
+
+    /**
+     * @param {!DialogResizableDirection} direction
+     * @protected
+     */
+    _stopResize(direction) {
+      window.removeEventListener('mousemove', this._resizeListeners.resize[direction]);
+      window.removeEventListener('touchmove', this._resizeListeners.resize[direction]);
+      window.removeEventListener('mouseup', this._resizeListeners.stop[direction]);
+      window.removeEventListener('touchend', this._resizeListeners.stop[direction]);
+      this.dispatchEvent(new CustomEvent('resize', { detail: this._getResizeDimensions() }));
+    }
+
+    /**
+     * @return {!DialogResizeDimensions}
+     * @protected
+     */
+    _getResizeDimensions() {
+      const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
+      const { width, height } = getComputedStyle(this.$.overlay.$.overlay);
+      const content = this.$.overlay.$.content;
+      content.setAttribute(
+        'style',
+        'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;'
+      );
+      const { width: contentWidth, height: contentHeight } = getComputedStyle(content);
+      content.removeAttribute('style');
+      this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
+      return { width, height, contentWidth, contentHeight };
+    }
+  };

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Checks if the argument is a touch event and if so, returns a first touch.
+ * Otherwise, if the mouse event was passed, returns it as is.
+ */
+declare function getMouseOrFirstTouchEvent(e: MouseEvent | TouchEvent): MouseEvent | Touch;
+
+export { getMouseOrFirstTouchEvent };
+
+/**
+ * Checks whether a mouse or touch event is in window.
+ */
+declare function eventInWindow(e: MouseEvent | TouchEvent): boolean;
+
+export { eventInWindow };

package/src/vaadin-dialog-utils.js

@@ -0,0 +1,20 @@
+/**
+ * Checks if the argument is a touch event and if so, returns a first touch.
+ * Otherwise, if the mouse event was passed, returns it as is.
+ * @param {!MouseEvent | !TouchEvent} e
+ * @return {!MouseEvent | !Touch}
+ * @protected
+ */
+export function getMouseOrFirstTouchEvent(e) {
+  return e.touches ? e.touches[0] : e;
+}
+
+/**
+ * Checks whether a mouse or touch event is in window.
+ * @param {!MouseEvent | !TouchEvent} e
+ * @return {boolean}
+ * @protected
+ */
+export function eventInWindow(e) {
+  return e.clientX >= 0 && e.clientX <= window.innerWidth && e.clientY >= 0 && e.clientY <= window.innerHeight;
+}

package/src/vaadin-dialog.d.ts

@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
+import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
+
+export type DialogRenderer = (root: HTMLElement, dialog?: Dialog) => void;
+
+export type DialogResizableDirection = 'n' | 'e' | 's' | 'w' | 'nw' | 'ne' | 'se' | 'sw';
+
+export type DialogResizeDimensions = {
+  width: string;
+  height: string;
+  contentWidth: string;
+  contentHeight: string;
+};
+
+export type DialogOverlayBounds = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+export type DialogOverlayBoundsParam =
+  | DialogOverlayBounds
+  | {
+      top?: string | number;
+      left?: string | number;
+      width?: string | number;
+      height?: string | number;
+    };
+
+/**
+ * Fired when the `opened` property changes.
+ */
+export type DialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the dialog resize is finished.
+ */
+export type DialogResizeEvent = CustomEvent<DialogResizeDimensions>;
+
+export interface DialogCustomEventMap {
+  'opened-changed': DialogOpenedChangedEvent;
+
+  resize: DialogResizeEvent;
+}
+
+export type DialogEventMap = HTMLElementEventMap & DialogCustomEventMap;
+
+/**
+ * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
+ *
+ * ### Rendering
+ *
+ * The content of the dialog can be populated by using the renderer callback function.
+ *
+ * The renderer function provides `root`, `dialog` arguments.
+ * Generate DOM content, append it to the `root` element and control the state
+ * of the host element by accessing `dialog`. Before generating new content,
+ * users are able to check if there is already content in `root` for reusing it.
+ *
+ * ```html
+ * <vaadin-dialog id="dialog"></vaadin-dialog>
+ * ```
+ * ```js
+ * const dialog = document.querySelector('#dialog');
+ * dialog.renderer = function(root, dialog) {
+ *   root.textContent = "Sample dialog";
+ * };
+ * ```
+ *
+ * Renderer is called on the opening of the dialog.
+ * DOM generated during the renderer call can be reused
+ * in the next renderer call and will be provided with the `root` argument.
+ * On first call it will be empty.
+ *
+ * ### Styling
+ *
+ * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
+ * themable component as the actual visible dialog overlay.
+ *
+ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
+ * for `<vaadin-dialog-overlay>` parts.
+ *
+ * Note: the `theme` attribute value set on `<vaadin-dialog>` is
+ * propagated to the internal `<vaadin-dialog-overlay>` component.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ */
+declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(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
+   * default) means that the `aria-label` attribute is not present.
+   */
+  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;
+
+  /**
+   * Set to true to remove backdrop and allow click events on background elements.
+   */
+  modeless: boolean;
+
+  /**
+   * Requests an update for the content of the dialog.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   *
+   * 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,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof DialogEventMap>(
+    type: K,
+    listener: (this: Dialog, ev: DialogEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-dialog': Dialog;
+  }
+}
+
+export { Dialog };