@vaadin/confirm-dialog 24.0.0-alpha6 → 24.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -36,13 +36,13 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha6",
-    "@vaadin/component-base": "24.0.0-alpha6",
-    "@vaadin/dialog": "24.0.0-alpha6",
-    "@vaadin/overlay": "24.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6"
+    "@vaadin/button": "24.0.0-alpha8",
+    "@vaadin/component-base": "24.0.0-alpha8",
+    "@vaadin/dialog": "24.0.0-alpha8",
+    "@vaadin/overlay": "24.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
+  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -142,6 +142,68 @@ class ConfirmDialogDialog extends Dialog {
       ></vaadin-confirm-dialog-overlay>
     `;
   }
+
+  static get properties() {
+    return {
+      /**
+       * Height to be set on the overlay content.
+       */
+      contentHeight: {
+        type: String,
+      },
+
+      /**
+       * Width to be set on the overlay content.
+       */
+      contentWidth: {
+        type: String,
+      },
+
+      /** @private */
+      _overlayElement: {
+        type: Object,
+      },
+    };
+  }
+
+  static get observers() {
+    return [
+      '__updateContentHeight(contentHeight, _overlayElement)',
+      '__updateContentWidth(contentWidth, _overlayElement)',
+    ];
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._overlayElement = this.$.overlay;
+  }
+
+  /** @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);
+    }
+  }
 }
 
 customElements.define(ConfirmDialogDialog.is, ConfirmDialogDialog);

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
@@ -28,7 +28,7 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
  * ```
- * <vaadin-confirm-dialog cancel>
+ * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
  * ```
@@ -109,9 +109,10 @@ declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMi
   noCloseOnEsc: boolean;
 
   /**
-   * Whether to show cancel button or not.
+   * Whether to show reject button or not.
+   * @attr {boolean} reject-button-visible
    */
-  reject: boolean;
+  rejectButtonVisible: boolean;
 
   /**
    * Text displayed on reject-button.
@@ -129,8 +130,9 @@ declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMi
 
   /**
    * Whether to show cancel button or not.
+   * @attr {boolean} cancel-button-visible
    */
-  cancel: boolean;
+  cancelButtonVisible: boolean;
 
   /**
    * Text displayed on cancel-button.

package/src/vaadin-confirm-dialog.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-confirm-dialog-overlay.js';
@@ -14,7 +14,7 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
  * ```
- * <vaadin-confirm-dialog cancel>
+ * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
  * ```
@@ -80,6 +80,8 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
         theme$="[[_theme]]"
         no-close-on-outside-click
         no-close-on-esc="[[noCloseOnEsc]]"
+        content-height="[[_contentHeight]]"
+        content-width="[[_contentWidth]]"
       ></vaadin-confirm-dialog-dialog>
 
       <div hidden>
@@ -158,10 +160,11 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
       },
 
       /**
-       * Whether to show cancel button or not.
+       * Whether to show reject button or not.
+       * @attr {boolean} reject-button-visible
        * @type {boolean}
        */
-      reject: {
+      rejectButtonVisible: {
         type: Boolean,
         reflectToAttribute: true,
         value: false,
@@ -191,9 +194,10 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
 
       /**
        * Whether to show cancel button or not.
+       * @attr {boolean} cancel-button-visible
        * @type {boolean}
        */
-      cancel: {
+      cancelButtonVisible: {
         type: Boolean,
         reflectToAttribute: true,
         value: false,
@@ -261,16 +265,32 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
       _rejectButton: {
         type: Object,
       },
+
+      /**
+       * Height to be set on the overlay content.
+       * @protected
+       */
+      _contentHeight: {
+        type: String,
+      },
+
+      /**
+       * Width to be set on the overlay content.
+       * @protected
+       */
+      _contentWidth: {
+        type: String,
+      },
     };
   }
 
   static get observers() {
     return [
       '__updateConfirmButton(_confirmButton, confirmText, confirmTheme)',
-      '__updateCancelButton(_cancelButton, cancelText, cancelTheme, cancel)',
+      '__updateCancelButton(_cancelButton, cancelText, cancelTheme, cancelButtonVisible)',
       '__updateHeaderNode(_headerNode, header)',
       '__updateMessageNodes(_messageNodes, message)',
-      '__updateRejectButton(_rejectButton, rejectText, rejectTheme, reject)',
+      '__updateRejectButton(_rejectButton, rejectText, rejectTheme, rejectButtonVisible)',
     ];
   }
 
@@ -295,12 +315,6 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
     this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
     this._overlayElement.addEventListener('vaadin-confirm-dialog-close', () => this.__onDialogClosed());
 
-    if (this._dimensions) {
-      Object.keys(this._dimensions).forEach((name) => {
-        this._setDimension(name, this._dimensions[name]);
-      });
-    }
-
     this._headerController = new SlotController(this, 'header', 'h3', {
       initializer: (node) => {
         this._headerNode = node;
@@ -455,31 +469,6 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
     return header || 'confirmation';
   }
 
-  /** @private */
-  _setWidth(width) {
-    this._setDimensionIfAttached('width', width);
-  }
-
-  /** @private */
-  _setHeight(height) {
-    this._setDimensionIfAttached('height', height);
-  }
-
-  /** @private */
-  _setDimensionIfAttached(name, value) {
-    if (this._overlayElement) {
-      this._setDimension(name, value);
-    } else {
-      this._dimensions = this._dimensions || {};
-      this._dimensions[name] = value;
-    }
-  }
-
-  /** @private */
-  _setDimension(name, value) {
-    this._overlayElement.style.setProperty(`--_vaadin-confirm-dialog-content-${name}`, value);
-  }
-
   /**
    * @event confirm
    * fired when Confirm button was pressed.

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-confirm-dialog",
-          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
+          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
           "attributes": [
             {
               "name": "opened",
@@ -67,8 +67,8 @@
               }
             },
             {
-              "name": "reject",
-              "description": "Whether to show cancel button or not.",
+              "name": "reject-button-visible",
+              "description": "Whether to show reject button or not.",
               "value": {
                 "type": [
                   "boolean"
@@ -94,7 +94,7 @@
               }
             },
             {
-              "name": "cancel",
+              "name": "cancel-button-visible",
               "description": "Whether to show cancel button or not.",
               "value": {
                 "type": [
@@ -191,8 +191,8 @@
                 }
               },
               {
-                "name": "reject",
-                "description": "Whether to show cancel button or not.",
+                "name": "rejectButtonVisible",
+                "description": "Whether to show reject button or not.",
                 "value": {
                   "type": [
                     "boolean"
@@ -218,7 +218,7 @@
                 }
               },
               {
-                "name": "cancel",
+                "name": "cancelButtonVisible",
                 "description": "Whether to show cancel button or not.",
                 "value": {
                   "type": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-confirm-dialog",
-          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
+          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
           "extension": true,
           "attributes": [
             {
@@ -34,14 +34,14 @@
               }
             },
             {
-              "name": "?reject",
-              "description": "Whether to show cancel button or not.",
+              "name": "?rejectButtonVisible",
+              "description": "Whether to show reject button or not.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?cancel",
+              "name": "?cancelButtonVisible",
               "description": "Whether to show cancel button or not.",
               "value": {
                 "kind": "expression"