@vaadin/vaadin-dialog 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-dialog",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-dialog",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-dialog"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-dialog/issues"
+  },
   "main": "vaadin-dialog.js",
   "module": "vaadin-dialog.js",
-  "repository": "vaadin/vaadin-dialog",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-dialog",
@@ -12,36 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-dialog/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/text-area": "^22.0.0-alpha6",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha6",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/dialog": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

package/src/vaadin-dialog.d.ts

@@ -1,130 +1,18 @@
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-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';
-
-import { DialogEventMap, DialogRenderer } from './interfaces';
-
 /**
- * `<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.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class DialogElement 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 `undefined` value for this property (the
-   * default) means that the `aria-label` attribute is not present at
-   * all.
-   */
-  ariaLabel: string | null | undefined;
-
-  /**
-   * 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;
+import { Dialog } from '@vaadin/dialog/src/vaadin-dialog.js';
 
-  /**
-   * 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;
-
-  /**
-   * Manually invoke existing renderer.
-   *
-   * @deprecated Since Vaadin 21, `render()` is deprecated. Please use `requestContentUpdate()` instead.
-   */
-  render(): void;
-
-  addEventListener<K extends keyof DialogEventMap>(
-    type: K,
-    listener: (this: DialogElement, ev: DialogEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof DialogEventMap>(
-    type: K,
-    listener: (this: DialogElement, ev: DialogEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `Dialog` from `@vaadin/dialog` instead.
+ */
+export type DialogElement = Dialog;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-dialog': DialogElement;
-  }
-}
+/**
+ * @deprecated Import `Dialog` from `@vaadin/dialog` instead.
+ */
+export const DialogElement: typeof Dialog;
 
-export { DialogElement };
+export * from '@vaadin/dialog/src/vaadin-dialog.js';

package/src/vaadin-dialog.js

@@ -3,362 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
-import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
-
-registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    /*
-      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;
-    }
-  `,
-  { moduleId: 'vaadin-dialog-overlay-styles' }
-);
-
-let memoizedTemplate;
-
-/**
- * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
- *
- * @extends OverlayElement
- * @private
- */
-class DialogOverlayElement extends mixinBehaviors(IronResizableBehavior, OverlayElement) {
-  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('div');
-      resizerContainer.id = 'resizerContainer';
-      resizerContainer.classList.add('resizer-container');
-      resizerContainer.appendChild(contentPart);
-      overlayPart.appendChild(resizerContainer);
-    }
-    return memoizedTemplate;
-  }
-
-  static get properties() {
-    return {
-      modeless: Boolean,
-
-      withBackdrop: Boolean
-    };
-  }
-
-  /**
-   * Updates the coordinates of the overlay.
-   * @param {!DialogOverlayBoundsParam} bounds
-   */
-  setBounds(bounds) {
-    const overlay = this.$.overlay;
-    const parsedBounds = Object.assign({}, bounds);
-
-    if (overlay.style.position !== 'absolute') {
-      overlay.style.position = 'absolute';
-      this.setAttribute('has-bounds-set', '');
-      this.__forceSafariReflow();
-    }
-
-    for (const arg in parsedBounds) {
-      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 };
-  }
-
-  /**
-   * Safari 13 renders overflowing elements incorrectly.
-   * This forces it to recalculate height.
-   * @private
-   */
-  __forceSafariReflow() {
-    const scrollPosition = this.$.resizerContainer.scrollTop;
-    const overlay = this.$.overlay;
-    overlay.style.display = 'block';
-
-    requestAnimationFrame(() => {
-      overlay.style.display = '';
-      this.$.resizerContainer.scrollTop = scrollPosition;
-    });
-  }
-}
-
-customElements.define(DialogOverlayElement.is, DialogOverlayElement);
+import { Dialog } from '@vaadin/dialog/src/vaadin-dialog.js';
 
 /**
- * `<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.
- *
- * @extends HTMLElement
- * @mixes ThemePropertyMixin
- * @mixes ElementMixin
- * @mixes DialogDraggableMixin
- * @mixes DialogResizableMixin
+ * @deprecated Import `Dialog` from `@vaadin/dialog` instead.
  */
-class DialogElement extends ThemePropertyMixin(
-  ElementMixin(DialogDraggableMixin(DialogResizableMixin(PolymerElement)))
-) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: none;
-        }
-      </style>
-
-      <vaadin-dialog-overlay
-        id="overlay"
-        on-opened-changed="_onOverlayOpened"
-        on-mousedown="_bringOverlayToFront"
-        on-touchstart="_bringOverlayToFront"
-        theme$="[[theme]]"
-        modeless="[[modeless]]"
-        with-backdrop="[[!modeless]]"
-        resizable$="[[resizable]]"
-        focus-trap
-      ></vaadin-dialog-overlay>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-dialog';
-  }
-
-  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 `undefined` value for this property (the
-       * default) means that the `aria-label` attribute is not present at
-       * all.
-       */
-      ariaLabel: {
-        type: 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.
-       * @type {DialogRenderer | undefined}
-       */
-      renderer: Function,
-
-      /**
-       * Set to true to remove backdrop and allow click events on background elements.
-       * @type {boolean}
-       */
-      modeless: {
-        type: Boolean,
-        value: false
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_openedChanged(opened)', '_ariaLabelChanged(ariaLabel)', '_rendererChanged(renderer)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.$.overlay.setAttribute('role', 'dialog');
-    this.$.overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
-    this.$.overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
-
-    processTemplates(this);
-  }
-
-  /**
-   * 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() {
-    this.$.overlay.requestContentUpdate();
-  }
-
-  /**
-   * Manually invoke existing renderer.
-   *
-   * @deprecated Since Vaadin 21, `render()` is deprecated. Please use `requestContentUpdate()` instead.
-   */
-  render() {
-    console.warn('WARNING: Since Vaadin 21, render() is deprecated. Please use requestContentUpdate() instead.');
-
-    this.requestContentUpdate();
-  }
-
-  /** @private */
-  _rendererChanged(renderer) {
-    this.$.overlay.setProperties({ owner: this, renderer });
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.opened = false;
-  }
-
-  /** @private */
-  _openedChanged(opened) {
-    this.$.overlay.opened = opened;
-  }
-
-  /** @private */
-  _ariaLabelChanged(ariaLabel) {
-    if (ariaLabel !== undefined && ariaLabel !== null) {
-      this.$.overlay.setAttribute('aria-label', ariaLabel);
-    } else {
-      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(DialogElement.is, DialogElement);
+export const DialogElement = Dialog;
 
-export { DialogElement };
+export * from '@vaadin/dialog/src/vaadin-dialog.js';

package/theme/lumo/vaadin-dialog.js

@@ -1,2 +1 @@
-import './vaadin-dialog-styles.js';
-import '../../src/vaadin-dialog.js';
+import '@vaadin/dialog/theme/lumo/vaadin-dialog.js';

package/theme/material/vaadin-dialog.js

@@ -1,2 +1 @@
-import './vaadin-dialog-styles.js';
-import '../../src/vaadin-dialog.js';
+import '@vaadin/dialog/theme/material/vaadin-dialog.js';

package/vaadin-dialog.d.ts

@@ -1,2 +1 @@
 export * from './src/vaadin-dialog.js';
-export * from './src/interfaces';

package/src/interfaces.d.ts

@@ -1,46 +0,0 @@
-import { DialogElement } from './vaadin-dialog.js';
-
-export type DialogRenderer = (root: HTMLElement, dialog?: DialogElement) => 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 DialogElementEventMap {
-  'opened-changed': DialogOpenedChangedEvent;
-
-  resize: DialogResizeEvent;
-}
-
-export type DialogEventMap = HTMLElementEventMap & DialogElementEventMap;

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

@@ -1,23 +0,0 @@
-declare function DialogDraggableMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & DialogDraggableMixinConstructor;
-
-interface DialogDraggableMixinConstructor {
-  new (...args: any[]): DialogDraggableMixin;
-}
-
-interface DialogDraggableMixin {
-  /**
-   * Set to true to enable repositioning the dialog by clicking and dragging.
-   *
-   * By default, only the overlay area can be used to drag the element. But,
-   * a child element can be marked as a draggable area by adding a
-   * "`draggable`" class to it, this will by default make all of its children draggable also.
-   * If you want a child element to be draggable
-   * but still have its children non-draggable (by default), mark it with
-   * "`draggable-leaf-only`" class name.
-   */
-  draggable: boolean;
-}
-
-export { DialogDraggableMixin, DialogDraggableMixinConstructor };

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

@@ -1,118 +0,0 @@
-import { getMouseOrFirstTouchEvent, eventInWindow } from './vaadin-dialog-utils.js';
-
-const TOUCH_DEVICE = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
-/**
- * @polymerMixin
- */
-export const DialogDraggableMixin = (superClass) =>
-  class VaadinDialogDraggableMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * Set to true to enable repositioning the dialog by clicking and dragging.
-         *
-         * By default, only the overlay area can be used to drag the element. But,
-         * a child element can be marked as a draggable area by adding a
-         * "`draggable`" class to it, this will by default make all of its children draggable also.
-         * If you want a child element to be draggable
-         * but still have its children non-draggable (by default), mark it with
-         * "`draggable-leaf-only`" class name.
-         *
-         * @type {boolean}
-         */
-        draggable: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true
-        },
-
-        /** @private */
-        _touchDevice: {
-          type: Boolean,
-          value: TOUCH_DEVICE
-        },
-
-        /* TODO: Expose as a public property (check naming) */
-        __dragHandleClassName: {
-          type: String
-        }
-      };
-    }
-
-    /** @protected */
-    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);
-      this.$.overlay.$.overlay.addEventListener('mousedown', this._startDrag);
-      this.$.overlay.$.overlay.addEventListener('touchstart', this._startDrag);
-    }
-
-    /** @private */
-    _startDrag(e) {
-      // Don't initiate when there's more than 1 touch (pinch zoom)
-      if (e.type === 'touchstart' && e.touches.length > 1) {
-        return;
-      }
-
-      if (this.draggable && (e.button === 0 || e.touches)) {
-        const resizerContainer = this.$.overlay.$.resizerContainer;
-        const isResizerContainer = e.target === resizerContainer;
-        const isResizerContainerScrollbar =
-          e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight;
-        const isContentPart = e.target === this.$.overlay.$.content;
-
-        const isDraggable = e.composedPath().some((node, index) => {
-          if (node.classList) {
-            const isDraggableNode = node.classList.contains(this.__dragHandleClassName || 'draggable');
-            const isDraggableLeafOnly = node.classList.contains('draggable-leaf-only');
-            const isLeafNode = index === 0;
-            return (isDraggableLeafOnly && isLeafNode) || (isDraggableNode && (!isDraggableLeafOnly || isLeafNode));
-          }
-        });
-
-        if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
-          !isDraggable && e.preventDefault();
-          this._originalBounds = this.$.overlay.getBounds();
-          const event = getMouseOrFirstTouchEvent(e);
-          this._originalMouseCoords = { top: event.pageY, left: event.pageX };
-          window.addEventListener('mouseup', this._stopDrag);
-          window.addEventListener('touchend', this._stopDrag);
-          window.addEventListener('mousemove', this._drag);
-          window.addEventListener('touchmove', this._drag);
-          if (this.$.overlay.$.overlay.style.position !== 'absolute') {
-            this.$.overlay.setBounds(this._originalBounds);
-          }
-        }
-      }
-    }
-
-    /** @private */
-    _drag(e) {
-      const event = getMouseOrFirstTouchEvent(e);
-      if (eventInWindow(event)) {
-        const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
-        const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
-        this.$.overlay.setBounds({ top, left });
-      }
-    }
-
-    /** @private */
-    _stopDrag() {
-      window.removeEventListener('mouseup', this._stopDrag);
-      window.removeEventListener('touchend', this._stopDrag);
-      window.removeEventListener('mousemove', this._drag);
-      window.removeEventListener('touchmove', this._drag);
-    }
-  };

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

@@ -1,26 +0,0 @@
-import { DialogResizableDirection, DialogResizeDimensions } from './interfaces';
-
-declare function DialogResizableMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & DialogResizableMixinConstructor;
-
-interface DialogResizableMixinConstructor {
-  new (...args: any[]): DialogResizableMixin;
-}
-
-interface DialogResizableMixin {
-  /**
-   * Set to true to enable resizing the dialog by dragging the corners and edges.
-   */
-  resizable: boolean;
-
-  _startResize(e: MouseEvent | TouchEvent, direction: DialogResizableDirection): void;
-
-  _resize(e: MouseEvent | TouchEvent, resizer: DialogResizableDirection): void;
-
-  _stopResize(direction: DialogResizableDirection): void;
-
-  _getResizeDimensions(): DialogResizeDimensions;
-}
-
-export { DialogResizableMixin, DialogResizableMixinConstructor };

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

@@ -1,250 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/**
- * 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/theme/lumo/vaadin-dialog-styles.js

@@ -1,69 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-
-const dialogOverlay = css`
-  /* Optical centering */
-  :host::before,
-  :host::after {
-    content: '';
-    flex-basis: 0;
-    flex-grow: 1;
-  }
-
-  :host::after {
-    flex-grow: 1.1;
-  }
-
-  [part='overlay'] {
-    border-radius: var(--lumo-border-radius-l);
-    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
-    background-image: none;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  [part='content'] {
-    padding: var(--lumo-space-l);
-  }
-
-  /* No padding */
-  :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
-  }
-
-  /* Animations */
-
-  :host([opening]),
-  :host([closing]) {
-    animation: 0.25s lumo-overlay-dummy-animation;
-  }
-
-  :host([opening]) [part='overlay'] {
-    animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
-  }
-
-  @keyframes vaadin-dialog-enter {
-    0% {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-
-  :host([closing]) [part='overlay'] {
-    animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
-  }
-
-  :host([closing]) [part='backdrop'] {
-    animation-delay: 0.05s;
-  }
-
-  @keyframes vaadin-dialog-exit {
-    100% {
-      opacity: 0;
-      transform: scale(1.02);
-    }
-  }
-`;
-
-registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], { moduleId: 'lumo-dialog' });

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

@@ -1,26 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-
-const dialogOverlay = css`
-  [part='overlay'] {
-    box-shadow: var(--material-shadow-elevation-24dp);
-    outline: none;
-    max-width: 560px;
-    min-width: 280px;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  [part='content'] {
-    padding: 24px;
-  }
-
-  /* No padding */
-  :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
-  }
-`;
-
-registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], {
-  moduleId: 'material-dialog'
-});