@vaadin/dialog 22.0.0-alpha10

package/src/vaadin-dialog.js

@@ -0,0 +1,351 @@
+/**
+ * @license
+ * 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 { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.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 DialogOverlay 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(DialogOverlay.is, DialogOverlay);
+
+/**
+ * `<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
+ */
+class Dialog 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 empty string value for this property (the
+       * default) means that the `aria-label` attribute is not present.
+       */
+      ariaLabel: {
+        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,
+
+      /**
+       * 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();
+  }
+
+  /** @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) {
+      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(Dialog.is, Dialog);
+
+export { Dialog };

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

@@ -0,0 +1,69 @@
+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/lumo/vaadin-dialog.js

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

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

@@ -0,0 +1,26 @@
+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'
+});

package/theme/material/vaadin-dialog.js

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

package/vaadin-dialog.d.ts

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

package/vaadin-dialog.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-dialog.js';
+export * from './src/vaadin-dialog.js';