@vaadin/confirm-dialog 24.0.0-alpha2 → 24.0.0-alpha4

package/package.json

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

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2018 - 2022 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';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
@@ -72,7 +72,7 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
  * @fires {Event} reject - Fired when Reject button was pressed.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HTMLElement))) {
+declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement))) {
   /**
    * True if the overlay is currently displayed.
    */

package/src/vaadin-confirm-dialog.js

@@ -4,10 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-confirm-dialog-overlay.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
@@ -59,11 +59,11 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
  * @extends HTMLElement
- * @mixes SlotMixin
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemePropertyMixin
  */
-class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerElement))) {
+class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -226,8 +226,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _cancelButton: {
-        type: HTMLElement,
-        observer: '_cancelButtonChanged',
+        type: Object,
       },
 
       /**
@@ -235,8 +234,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _confirmButton: {
-        type: HTMLElement,
-        observer: '_confirmButtonChanged',
+        type: Object,
       },
 
       /**
@@ -244,15 +242,16 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _headerNode: {
-        type: HTMLElement,
+        type: Object,
       },
 
       /**
-       * A reference to the message which will be placed in the overlay default slot.
+       * A list of message nodes which will be placed in the overlay default slot.
        * @private
        */
-      _messageNode: {
-        type: HTMLElement,
+      _messageNodes: {
+        type: Array,
+        value: () => [],
       },
 
       /**
@@ -260,8 +259,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _rejectButton: {
-        type: HTMLElement,
-        observer: '_rejectButtonChanged',
+        type: Object,
       },
     };
   }
@@ -271,64 +269,27 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
       '__updateConfirmButton(_confirmButton, confirmText, confirmTheme)',
       '__updateCancelButton(_cancelButton, cancelText, cancelTheme, cancel)',
       '__updateHeaderNode(_headerNode, header)',
-      '__updateMessageNode(_messageNode, message)',
+      '__updateMessageNodes(_messageNodes, message)',
       '__updateRejectButton(_rejectButton, rejectText, rejectTheme, reject)',
     ];
   }
 
-  /** @protected */
-  get slots() {
-    // NOTE: order in which slots are listed matches the template.
-    return {
-      ...super.slots,
-      header: () => {
-        const h3 = document.createElement('h3');
-        this.__defaultHeader = h3;
-        return h3;
-      },
-      '': () => {
-        const div = document.createElement('div');
-        this.__defaultMessage = div;
-        return div;
-      },
-      'cancel-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.setAttribute('theme', this.cancelTheme);
-        button.textContent = this.cancelText;
-        button._isDefaultButton = true;
-        return button;
-      },
-      'reject-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.setAttribute('theme', this.rejectTheme);
-        button.textContent = this.rejectText;
-        button._isDefaultButton = true;
-        return button;
-      },
-      'confirm-button': () => {
-        const button = document.createElement('vaadin-button');
-        button._isDefaultButton = true;
-        return button;
-      },
-    };
-  }
-
   constructor() {
     super();
-    this.__slottedNodes = [];
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      this.__onDomChange(info.addedNodes);
-    });
+
+    this.__cancel = this.__cancel.bind(this);
+    this.__confirm = this.__confirm.bind(this);
+    this.__reject = this.__reject.bind(this);
+  }
+
+  get __slottedNodes() {
+    return [this._headerNode, ...this._messageNodes, this._cancelButton, this._confirmButton, this._rejectButton];
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    this.__boundCancel = this._cancel.bind(this);
-    this.__boundConfirm = this._confirm.bind(this);
-    this.__boundReject = this._reject.bind(this);
-
     this._overlayElement = this.$.dialog.$.overlay;
     this._overlayElement.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
     this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
@@ -339,6 +300,45 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
         this._setDimension(name, this._dimensions[name]);
       });
     }
+
+    this._headerController = new SlotController(this, 'header', 'h3', {
+      initializer: (node) => {
+        this._headerNode = node;
+      },
+    });
+    this.addController(this._headerController);
+
+    this._messageController = new SlotController(this, '', 'div', {
+      // Allow providing multiple custom nodes in the default slot
+      multiple: true,
+      observe: false,
+      initializer: (node) => {
+        this._messageNodes = [...this._messageNodes, node];
+      },
+    });
+    this.addController(this._messageController);
+
+    // NOTE: order in which buttons are added should match the order of slots in template
+    this._cancelController = new SlotController(this, 'cancel-button', 'vaadin-button', {
+      initializer: (button) => {
+        this.__setupSlottedButton('cancel', button);
+      },
+    });
+    this.addController(this._cancelController);
+
+    this._rejectController = new SlotController(this, 'reject-button', 'vaadin-button', {
+      initializer: (button) => {
+        this.__setupSlottedButton('reject', button);
+      },
+    });
+    this.addController(this._rejectController);
+
+    this._confirmController = new SlotController(this, 'confirm-button', 'vaadin-button', {
+      initializer: (button) => {
+        this.__setupSlottedButton('confirm', button);
+      },
+    });
+    this.addController(this._confirmController);
   }
 
   /** @private */
@@ -358,73 +358,29 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
   /** @private */
   __onDialogClosed() {
-    const nodes = this.__slottedNodes;
-
-    // Reset the list of nodes, it will be re-created.
-    this.__slottedNodes = [];
-
     // Move nodes from the overlay back to the host.
-    nodes.forEach((node) => {
+    this.__slottedNodes.forEach((node) => {
       this.appendChild(node);
     });
   }
 
   /** @private */
-  __onDomChange(addedNodes) {
-    // TODO: restore default element when a corresponding slotted element is removed.
-    // Consider creating a controller to reuse custom helper logic from FieldMixin.
-    addedNodes.forEach((node) => {
-      this.__slottedNodes.push(node);
-
-      const isElementNode = node.nodeType === Node.ELEMENT_NODE;
-      const slotName = isElementNode ? node.getAttribute('slot') : '';
-
-      // Handle named slots (header and buttons).
-      if (slotName) {
-        if (slotName.indexOf('button') >= 0) {
-          const [button] = slotName.split('-');
-          this[`_${button}Button`] = node;
-        } else if (slotName === 'header') {
-          this._headerNode = node;
-        }
-      } else {
-        const isNotEmptyText = node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '';
-        // Handle default slot (message element).
-        if (isNotEmptyText || (isElementNode && node.slot === '')) {
-          this._messageNode = node;
-        }
-      }
-    });
-  }
-
-  /** @private */
-  _cancelButtonChanged(button, oldButton) {
-    this.__setupSlottedButton(button, oldButton, this.__boundCancel);
-  }
-
-  /** @private */
-  _confirmButtonChanged(button, oldButton) {
-    this.__setupSlottedButton(button, oldButton, this.__boundConfirm);
-  }
-
-  /** @private */
-  _rejectButtonChanged(button, oldButton) {
-    this.__setupSlottedButton(button, oldButton, this.__boundReject);
-  }
+  __setupSlottedButton(type, button) {
+    const property = `_${type}Button`;
+    const listener = `__${type}`;
 
-  /** @private */
-  __setupSlottedButton(slottedButton, currentButton, clickListener) {
-    if (currentButton && currentButton.parentElement) {
-      currentButton.remove();
+    if (this[property] && this[property] !== button) {
+      this[property].remove();
     }
 
-    slottedButton.addEventListener('click', clickListener);
+    button.addEventListener('click', this[listener]);
+    this[property] = button;
   }
 
   /** @private */
   __updateCancelButton(button, cancelText, cancelTheme, showCancel) {
     if (button) {
-      if (button._isDefaultButton) {
+      if (button === this._cancelController.defaultNode) {
         button.textContent = cancelText;
         button.setAttribute('theme', cancelTheme);
       }
@@ -434,7 +390,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
   /** @private */
   __updateConfirmButton(button, confirmText, confirmTheme) {
-    if (button && button._isDefaultButton) {
+    if (button && button === this._confirmController.defaultNode) {
       button.textContent = confirmText;
       button.setAttribute('theme', confirmTheme);
     }
@@ -443,23 +399,25 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   /** @private */
   __updateHeaderNode(headerNode, header) {
     // Only update text content for the default header node.
-    if (headerNode && headerNode === this.__defaultHeader) {
+    if (headerNode && headerNode === this._headerController.defaultNode) {
       headerNode.textContent = header;
     }
   }
 
   /** @private */
-  __updateMessageNode(messageNode, message) {
-    // Only update text content for the default message node.
-    if (messageNode && messageNode === this.__defaultMessage) {
-      messageNode.textContent = message;
+  __updateMessageNodes(nodes, message) {
+    if (nodes && nodes.length > 0) {
+      const defaultNode = nodes.find((node) => node === this._messageController.defaultNode);
+      if (defaultNode) {
+        defaultNode.textContent = message;
+      }
     }
   }
 
   /** @private */
   __updateRejectButton(button, rejectText, rejectTheme, showReject) {
     if (button) {
-      if (button._isDefaultButton) {
+      if (button === this._rejectController.defaultNode) {
         button.textContent = rejectText;
         button.setAttribute('theme', rejectTheme);
       }
@@ -470,24 +428,24 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   /** @private */
   _escPressed(event) {
     if (!event.defaultPrevented) {
-      this._cancel();
+      this.__cancel();
     }
   }
 
   /** @private */
-  _confirm() {
+  __confirm() {
     this.dispatchEvent(new CustomEvent('confirm'));
     this.opened = false;
   }
 
   /** @private */
-  _cancel() {
+  __cancel() {
     this.dispatchEvent(new CustomEvent('cancel'));
     this.opened = false;
   }
 
   /** @private */
-  _reject() {
+  __reject() {
     this.dispatchEvent(new CustomEvent('reject'));
     this.opened = false;
   }

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha4",
   "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-alpha2/#/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>\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-alpha4/#/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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha4",
   "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-alpha2/#/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>\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-alpha4/#/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": [
             {