@vaadin/component-base 24.0.0-alpha5 → 24.0.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha5",
+  "version": "24.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "fc0b1721eda9e39cb289b239e440fc9e29573a31"
+  "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
 }

package/src/element-mixin.js

@@ -15,14 +15,14 @@ import { DirMixin } from './dir-mixin.js';
 // for buttons that are based on `[role=button]` e.g vaadin-button.
 setCancelSyntheticClickEvents(false);
 
-window.Vaadin = window.Vaadin || {};
+window.Vaadin ||= {};
 
 /**
  * Array of Vaadin custom element classes that have been finalized.
  */
-window.Vaadin.registrations = window.Vaadin.registrations || [];
+window.Vaadin.registrations ||= [];
 
-window.Vaadin.developmentModeCallback = window.Vaadin.developmentModeCallback || {};
+window.Vaadin.developmentModeCallback ||= {};
 
 window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
   usageStatistics();
@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha5';
+      return '24.0.0-alpha7';
     }
 
     /** @protected */

package/src/iron-list-core.js

@@ -491,9 +491,9 @@ export const ironList = {
       this._physicalIndexForKey = {};
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
-      this._physicalCount = this._physicalCount || 0;
-      this._physicalItems = this._physicalItems || [];
-      this._physicalSizes = this._physicalSizes || [];
+      this._physicalCount ||= 0;
+      this._physicalItems ||= [];
+      this._physicalSizes ||= [];
       this._physicalStart = 0;
       if (this._scrollTop > this._scrollOffset) {
         this._resetScrollPosition(0);
@@ -639,8 +639,8 @@ export const ironList = {
       this._physicalBottom +
       Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
 
-    forceUpdate = forceUpdate || this._scrollHeight === 0;
-    forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
+    forceUpdate ||= this._scrollHeight === 0;
+    forceUpdate ||= this._scrollPosition >= this._estScrollHeight - this._physicalSize;
     // Amortize height adjustment, so it won't trigger large repaints too often.
     if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._viewportHeight) {
       this.$.items.style.height = `${this._estScrollHeight}px`;
@@ -740,7 +740,7 @@ export const ironList = {
   },
 
   _debounce(name, cb, asyncModule) {
-    this._debouncers = this._debouncers || {};
+    this._debouncers ||= {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
   },

package/src/overflow-controller.js

@@ -92,7 +92,7 @@ export class OverflowController {
       overflow += ' top';
     }
 
-    if (target.scrollTop < target.scrollHeight - target.clientHeight) {
+    if (Math.ceil(target.scrollTop) < Math.ceil(target.scrollHeight - target.clientHeight)) {
       overflow += ' bottom';
     }
 
@@ -101,7 +101,7 @@ export class OverflowController {
       overflow += ' start';
     }
 
-    if (scrollLeft < target.scrollWidth - target.clientWidth) {
+    if (Math.ceil(scrollLeft) < Math.ceil(target.scrollWidth - target.clientWidth)) {
       overflow += ' end';
     }
 

package/src/polylit-mixin.js

@@ -10,7 +10,7 @@ const caseMap = {};
 const CAMEL_TO_DASH = /([A-Z])/g;
 
 function camelToDash(camel) {
-  caseMap[camel] = caseMap[camel] || camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
+  caseMap[camel] ||= camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
   return caseMap[camel];
 }
 
@@ -169,7 +169,7 @@ const PolylitMixinImplementation = (superclass) => {
     firstUpdated() {
       super.firstUpdated();
 
-      this.$ = this.$ || {};
+      this.$ ||= {};
       this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
         this.$[node.id] = node;
       });

package/src/slot-controller.d.ts

@@ -54,10 +54,19 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   getSlotChild(): Node;
 
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   */
   protected attachDefaultNode(): Node | undefined;
 
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   */
   protected initAddedNode(node: Node): void;
 
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   */
   protected initNode(node: Node): void;
 
   /**

package/src/slot-controller.js

@@ -14,12 +14,12 @@ export class SlotController extends EventTarget {
   /**
    * Ensure that every instance has unique ID.
    *
-   * @param {string} slotName
    * @param {HTMLElement} host
+   * @param {string} slotName
    * @return {string}
    * @protected
    */
-  static generateId(slotName, host) {
+  static generateId(host, slotName) {
     const prefix = slotName || 'default';
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
@@ -42,7 +42,7 @@ export class SlotController extends EventTarget {
 
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
-      this.defaultId = SlotController.generateId(slotName, host);
+      this.defaultId = this.constructor.generateId(host, slotName);
     }
   }
 
@@ -92,7 +92,7 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Create and attach default node using the slot factory.
+   * Create and attach default node using the provided tag name, if any.
    * @return {Node | undefined}
    * @protected
    */
@@ -102,7 +102,7 @@ export class SlotController extends EventTarget {
     // Check if the node was created previously and if so, reuse it.
     let node = this.defaultNode;
 
-    // Slot factory is optional, some slots don't have default content.
+    // Tag name is optional, sometimes we don't init default content.
     if (!node && tagName) {
       node = document.createElement(tagName);
       if (node instanceof Element) {
@@ -145,6 +145,8 @@ export class SlotController extends EventTarget {
   }
 
   /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
    * @param {Node} node
    * @protected
    */
@@ -173,7 +175,12 @@ export class SlotController extends EventTarget {
    */
   teardownNode(_node) {}
 
-  /** @protected */
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
   initAddedNode(node) {
     if (node !== this.defaultNode) {
       this.initCustomNode(node);

package/src/slot-observe-controller.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller that observes slotted element mutations, especially ID attribute
+ * and the text content, and fires an event to notify host element about those.
+ */
+export class SlotObserveController extends SlotController {
+  /**
+   * Setup the mutation observer on the node to update ID and notify host.
+   * Node doesn't get observed automatically until this method is called.
+   */
+  protected observeNode(node: Node): void;
+
+  /**
+   * Override to restore default node when a custom one is removed.
+   */
+  protected restoreDefaultNode(): void;
+
+  /**
+   * Override to update default node text on property change.
+   */
+  protected updateDefaultNode(node: Node): void;
+}

package/src/slot-observe-controller.js

@@ -0,0 +1,176 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller that observes slotted element mutations, especially ID attribute
+ * and the text content, and fires an event to notify host element about those.
+ */
+export class SlotObserveController extends SlotController {
+  constructor(host, slot, tagName, config = {}) {
+    super(host, slot, tagName, { ...config, useUniqueId: true });
+  }
+
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initCustomNode(node) {
+    this.__updateNodeId(node);
+    this.__notifyChange(node);
+  }
+
+  /**
+   * Override to notify the controller host about removal of
+   * the custom node, and to apply the default one if needed.
+   *
+   * @param {Node} _node
+   * @protected
+   * @override
+   */
+  teardownNode(_node) {
+    const node = this.getSlotChild();
+
+    // Custom node is added to the slot
+    if (node && node !== this.defaultNode) {
+      this.__notifyChange(node);
+    } else {
+      this.restoreDefaultNode();
+      this.updateDefaultNode(this.node);
+    }
+  }
+
+  /**
+   * Override method inherited from `SlotMixin`
+   * to set ID attribute on the default node.
+   *
+   * @return {Node}
+   * @protected
+   * @override
+   */
+  attachDefaultNode() {
+    const node = super.attachDefaultNode();
+
+    if (node) {
+      this.__updateNodeId(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * Override to restore default node when a custom one is removed.
+   *
+   * @protected
+   */
+  restoreDefaultNode() {
+    // To be implemented
+  }
+
+  /**
+   * Override to update default node text on property change.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  updateDefaultNode(node) {
+    this.__notifyChange(node);
+  }
+
+  /**
+   * Setup the mutation observer on the node to update ID and notify host.
+   * Node doesn't get observed automatically until this method is called.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  observeNode(node) {
+    // Stop observing the previous node, if any.
+    if (this.__nodeObserver) {
+      this.__nodeObserver.disconnect();
+    }
+
+    this.__nodeObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
+
+        // Ensure the mutation target is the currently connected node
+        // to ignore async mutations dispatched for removed element.
+        const isCurrentNodeMutation = target === this.node;
+
+        if (mutation.type === 'attributes') {
+          // We use attributeFilter to only observe ID mutation,
+          // no need to check for attribute name separately.
+          if (isCurrentNodeMutation) {
+            this.__updateNodeId(target);
+          }
+        } else if (isCurrentNodeMutation || target.parentElement === this.node) {
+          // Node text content has changed.
+          this.__notifyChange(this.node);
+        }
+      });
+    });
+
+    // Observe changes to node ID attribute, text content and children.
+    this.__nodeObserver.observe(node, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+  }
+
+  /**
+   * Returns true if a node is an HTML element with children,
+   * or is a defined custom element, or has non-empty text.
+   *
+   * @param {Node} node
+   * @return {boolean}
+   * @private
+   */
+  __hasContent(node) {
+    if (!node) {
+      return false;
+    }
+
+    return (
+      (node.nodeType === Node.ELEMENT_NODE && (customElements.get(node.localName) || node.children.length > 0)) ||
+      (node.textContent && node.textContent.trim() !== '')
+    );
+  }
+
+  /**
+   * Fire an event to notify the controller host about node changes.
+   *
+   * @param {Node} node
+   * @private
+   */
+  __notifyChange(node) {
+    this.dispatchEvent(
+      new CustomEvent('slot-content-changed', {
+        detail: { hasContent: this.__hasContent(node), node },
+      }),
+    );
+  }
+
+  /**
+   * Set default ID on the node in case it is an HTML element.
+   *
+   * @param {Node} node
+   * @private
+   */
+  __updateNodeId(node) {
+    // When in multiple mode, only set ID attribute on the element in default slot.
+    const isFirstNode = !this.nodes || node === this.nodes[0];
+    if (node.nodeType === Node.ELEMENT_NODE && isFirstNode && !node.id) {
+      node.id = this.defaultId;
+    }
+  }
+}

package/src/virtualizer-iron-list-adapter.js

@@ -376,7 +376,7 @@ export class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    this._deltaYAcc = this._deltaYAcc || 0;
+    this._deltaYAcc ||= 0;
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed