@vaadin/confirm-dialog 24.2.3 → 24.3.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "24.2.3",
+  "version": "24.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,9 @@
   "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",
@@ -35,24 +38,25 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.2.3",
-    "@vaadin/component-base": "~24.2.3",
-    "@vaadin/dialog": "~24.2.3",
-    "@vaadin/overlay": "~24.2.3",
-    "@vaadin/vaadin-lumo-styles": "~24.2.3",
-    "@vaadin/vaadin-material-styles": "~24.2.3",
-    "@vaadin/vaadin-themable-mixin": "~24.2.3"
+    "@vaadin/button": "24.3.0-alpha10",
+    "@vaadin/component-base": "24.3.0-alpha10",
+    "@vaadin/dialog": "24.3.0-alpha10",
+    "@vaadin/overlay": "24.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "~24.2.3",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/a11y-base": "24.3.0-alpha10",
+    "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "72e557e765e72559e9c6a525e257d185ad186dc5"
+  "gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
 }

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function ConfirmDialogBaseMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ConfirmDialogBaseMixinClass> & T;
+
+export declare class ConfirmDialogBaseMixin {
+  /**
+   * 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;
+
+  /**
+   * Height to be set on the overlay content.
+   */
+  contentHeight: string;
+
+  /**
+   * Width to be set on the overlay content.
+   */
+  contentWidth: string;
+}

package/src/vaadin-confirm-dialog-base-mixin.js

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const ConfirmDialogBaseMixin = (superClass) =>
+  class ConfirmDialogBaseMixinClass extends superClass {
+    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);
+      }
+    }
+  };

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

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+/*
+ * 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;
+
+export declare function ConfirmDialogMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ConfirmDialogMixinClass> & T;
+
+export declare class ConfirmDialogMixinClass {
+  /**
+   * 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;
+}