@vaadin/confirm-dialog 24.2.0-beta3 → 24.2.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "24.2.0-beta3",
+  "version": "24.2.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/vaadin-lit-confirm-dialog-overlay.js",
-    "!src/vaadin-lit-confirm-dialog.d.ts",
-    "!src/vaadin-lit-confirm-dialog.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -38,19 +35,18 @@
     "polymer"
   ],
   "dependencies": {
-    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.2.0-beta3",
-    "@vaadin/component-base": "24.2.0-beta3",
-    "@vaadin/dialog": "24.2.0-beta3",
-    "@vaadin/overlay": "24.2.0-beta3",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-beta3",
-    "@vaadin/vaadin-material-styles": "24.2.0-beta3",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-beta3"
+    "@vaadin/button": "24.2.0-beta4",
+    "@vaadin/component-base": "24.2.0-beta4",
+    "@vaadin/dialog": "24.2.0-beta4",
+    "@vaadin/overlay": "24.2.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta4",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.2.0-beta3",
+    "@vaadin/a11y-base": "24.2.0-beta4",
     "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
@@ -58,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "91ea11e7ad706065340acdb93b92316919ce5e69"
+  "gitHead": "04da1e1e5c5713ea45e4b7d659dc6ac6b4604f4c"
 }

package/src/vaadin-confirm-dialog-overlay.js

@@ -11,10 +11,29 @@ import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js'
 import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-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 { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { ConfirmDialogBaseMixin } from './vaadin-confirm-dialog-base-mixin.js';
-import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js';
+
+const confirmDialogOverlay = css`
+  :host {
+    --_vaadin-confirm-dialog-content-width: auto;
+    --_vaadin-confirm-dialog-content-height: auto;
+  }
+
+  [part='overlay'] {
+    width: var(--_vaadin-confirm-dialog-content-width);
+    height: var(--_vaadin-confirm-dialog-content-height);
+  }
+
+  ::slotted([slot='header']) {
+    pointer-events: auto;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] > * {
+    pointer-events: all;
+  }
+`;
 
 registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, confirmDialogOverlay], {
   moduleId: 'vaadin-confirm-dialog-overlay-styles',
@@ -79,9 +98,7 @@ defineCustomElement(ConfirmDialogOverlay);
  * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
  * @private
  */
-class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
-  DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))),
-) {
+class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-confirm-dialog-dialog';
   }
@@ -110,6 +127,66 @@ class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
       ></vaadin-confirm-dialog-overlay>
     `;
   }
+
+  static get properties() {
+    return {
+      /**
+       * 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: '',
+      },
+
+      /**
+       * Height to be set on the overlay content.
+       */
+      contentHeight: {
+        type: String,
+      },
+
+      /**
+       * Width to be set on the overlay content.
+       */
+      contentWidth: {
+        type: String,
+      },
+    };
+  }
+
+  static get observers() {
+    return [
+      '__updateContentHeight(contentHeight, _overlayElement)',
+      '__updateContentWidth(contentWidth, _overlayElement)',
+    ];
+  }
+
+  /** @private */
+  __updateDimension(overlay, dimension, value) {
+    const prop = `--_vaadin-confirm-dialog-content-${dimension}`;
+
+    if (value) {
+      overlay.style.setProperty(prop, value);
+    } else {
+      overlay.style.removeProperty(prop);
+    }
+  }
+
+  /** @private */
+  __updateContentHeight(height, overlay) {
+    if (overlay) {
+      this.__updateDimension(overlay, 'height', height);
+    }
+  }
+
+  /** @private */
+  __updateContentWidth(width, overlay) {
+    if (overlay) {
+      this.__updateDimension(overlay, 'width', width);
+    }
+  }
 }
 
 defineCustomElement(ConfirmDialogDialog);

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

@@ -6,9 +6,23 @@
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { type ConfirmDialogEventMap, ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
 
-export * from './vaadin-confirm-dialog-mixin.js';
+/**
+ * Fired when the `opened` property changes.
+ */
+export type ConfirmDialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface ConfirmDialogCustomEventMap {
+  'opened-changed': ConfirmDialogOpenedChangedEvent;
+
+  confirm: Event;
+
+  cancel: Event;
+
+  reject: Event;
+}
+
+export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEventMap;
 
 /**
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
@@ -58,7 +72,103 @@ export * from './vaadin-confirm-dialog-mixin.js';
  * @fires {Event} reject - Fired when Reject button was pressed.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement)))) {
+declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement))) {
+  /**
+   * Sets the `aria-describedby` attribute of the overlay element.
+   *
+   * By default, all elements inside the message area are linked
+   * through the `aria-describedby` attribute. However, there are
+   * cases where this can confuse screen reader users (e.g. the dialog
+   * may present a password confirmation form). For these cases,
+   * it's better to associate only the elements that will help describe
+   * the confirmation dialog through this API.
+   * @attr {string} accessible-description-ref
+   */
+  accessibleDescriptionRef: string | null | undefined;
+
+  /**
+   * True if the overlay is currently displayed.
+   */
+  opened: boolean;
+
+  /**
+   * Set the confirmation dialog title.
+   */
+  header: string;
+
+  /**
+   * Set the message or confirmation question.
+   */
+  message: string | null | undefined;
+
+  /**
+   * Text displayed on confirm-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
+   * @attr {string} confirm-text
+   */
+  confirmText: string;
+
+  /**
+   * Theme for a confirm-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
+   * @attr {string} confirm-theme
+   */
+  confirmTheme: string;
+
+  /**
+   * Set to true to disable closing dialog on Escape press
+   * @attr {boolean} no-close-on-esc
+   */
+  noCloseOnEsc: boolean;
+
+  /**
+   * Whether to show reject button or not.
+   * @attr {boolean} reject-button-visible
+   */
+  rejectButtonVisible: boolean;
+
+  /**
+   * Text displayed on reject-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
+   * @attr {string} reject-text
+   */
+  rejectText: string;
+
+  /**
+   * Theme for a reject-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
+   * @attr {string} reject-theme
+   */
+  rejectTheme: string;
+
+  /**
+   * Whether to show cancel button or not.
+   * @attr {boolean} cancel-button-visible
+   */
+  cancelButtonVisible: boolean;
+
+  /**
+   * Text displayed on cancel-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
+   * @attr {string} cancel-text
+   */
+  cancelText: string;
+
+  /**
+   * Theme for a cancel-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
+   * @attr {string} cancel-theme
+   */
+  cancelTheme: string;
+
+  /**
+   * A space-delimited list of CSS class names
+   * to set on the underlying overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   addEventListener<K extends keyof ConfirmDialogEventMap>(
     type: K,
     listener: (this: ConfirmDialog, ev: ConfirmDialogEventMap[K]) => void,