@vaadin/component-base 23.2.14 → 23.2.16

package/src/tooltip-controller.js

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 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 manages the slotted tooltip element.
+ */
+export class TooltipController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
+
+    this.setTarget(host);
+  }
+
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
+
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
+
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
+
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
+    }
+
+    if (this.position !== undefined) {
+      tooltipNode._position = this.position;
+    }
+
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
+    }
+  }
+
+  /**
+   * Set a context object to be used by generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
+    }
+  }
+
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
+  }
+
+  /**
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
+   */
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
+  }
+
+  /**
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
+    }
+  }
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
+  }
+
+  /**
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
+    }
+  }
+}

package/src/unique-id-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/unique-id-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,8 +1,10 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+/* eslint-disable @typescript-eslint/member-ordering */
+// https://github.com/vaadin/eslint-config-vaadin/issues/33
 import { animationFrame, timeOut } from './async.js';
 import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
@@ -141,6 +143,56 @@ export class IronListAdapter {
     });
   }
 
+  /**
+   * Updates the height for a given set of items.
+   *
+   * @param {!Array<number>=} itemSet
+   */
+  _updateMetrics(itemSet) {
+    // Make sure we distributed all the physical items
+    // so we can measure them.
+    flush();
+
+    let newPhysicalSize = 0;
+    let oldPhysicalSize = 0;
+    const prevAvgCount = this._physicalAverageCount;
+    const prevPhysicalAvg = this._physicalAverage;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this._iterateItems((pidx, vidx) => {
+      oldPhysicalSize += this._physicalSizes[pidx];
+      this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
+      newPhysicalSize += this._physicalSizes[pidx];
+      this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
+    }, itemSet);
+
+    this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
+
+    // Update the average if it measured something.
+    if (this._physicalAverageCount !== prevAvgCount) {
+      this._physicalAverage = Math.round(
+        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
+      );
+    }
+  }
+
+  __getBorderBoxHeight(el) {
+    const style = getComputedStyle(el);
+
+    const itemHeight = parseFloat(style.height) || 0;
+
+    if (style.boxSizing === 'border-box') {
+      return itemHeight;
+    }
+
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const borderBottomWidth = parseFloat(style.borderBottomWidth) || 0;
+    const borderTopWidth = parseFloat(style.borderTopWidth) || 0;
+
+    return itemHeight + paddingBottom + paddingTop + borderBottomWidth + borderTopWidth;
+  }
+
   __updateElement(el, index, forceSameIndexUpdates) {
     // Clean up temporary placeholder sizing
     if (el.style.paddingTop) {
@@ -430,7 +482,9 @@ export class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    this._deltaYAcc = this._deltaYAcc || 0;
+    if (!this._deltaYAcc) {
+      this._deltaYAcc = 0;
+    }
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed

package/src/virtualizer.js

@@ -15,6 +15,24 @@ export class Virtualizer {
     this.__adapter = new IronListAdapter(config);
   }
 
+  /**
+   * Gets the index of the first visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get firstVisibleIndex() {
+    return this.__adapter.adjustedFirstVisibleIndex;
+  }
+
+  /**
+   * Gets the index of the last visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get lastVisibleIndex() {
+    return this.__adapter.adjustedLastVisibleIndex;
+  }
+
   /**
    * The size of the virtualizer
    * @return {number | undefined} The size of the virtualizer
@@ -62,22 +80,4 @@ export class Virtualizer {
   flush() {
     this.__adapter.flush();
   }
-
-  /**
-   * Gets the index of the first visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get firstVisibleIndex() {
-    return this.__adapter.adjustedFirstVisibleIndex;
-  }
-
-  /**
-   * Gets the index of the last visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get lastVisibleIndex() {
-    return this.__adapter.adjustedLastVisibleIndex;
-  }
 }

package/src/dir-helper.d.ts

@@ -1,42 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Helper that provides a set of functions for RTL.
- */
-declare class DirHelper {
-  /**
-   * Get the scroll type in the current browser view.
-   *
-   * @returns the scroll type. Possible values are `default|reverse|negative`
-   */
-  static detectScrollType(): string;
-
-  /**
-   * Get the scrollLeft value of the element relative to the direction
-   *
-   * @param scrollType type of the scroll detected with `detectScrollType`
-   * @param direction current direction of the element
-   * @returns the scrollLeft value.
-   */
-  static getNormalizedScrollLeft(scrollType: string, direction: string, element: Element | null): number;
-
-  /**
-   * Set the scrollLeft value of the element relative to the direction
-   *
-   * @param scrollType type of the scroll detected with `detectScrollType`
-   * @param direction current direction of the element
-   * @param scrollLeft the scrollLeft value to be set
-   */
-  static setNormalizedScrollLeft(
-    scrollType: string,
-    direction: string,
-    element: Element | null,
-    scrollLeft: number,
-  ): void;
-}
-
-export { DirHelper };

package/src/dir-helper.js

@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Helper that provides a set of functions for RTL.
- */
-class DirHelper {
-  /**
-   * Get the scroll type in the current browser view.
-   *
-   * @return {string} the scroll type. Possible values are `default|reverse|negative`
-   */
-  static detectScrollType() {
-    const dummy = document.createElement('div');
-    dummy.textContent = 'ABCD';
-    dummy.dir = 'rtl';
-    dummy.style.fontSize = '14px';
-    dummy.style.width = '4px';
-    dummy.style.height = '1px';
-    dummy.style.position = 'absolute';
-    dummy.style.top = '-1000px';
-    dummy.style.overflow = 'scroll';
-    document.body.appendChild(dummy);
-
-    let cachedType = 'reverse';
-    if (dummy.scrollLeft > 0) {
-      cachedType = 'default';
-    } else {
-      dummy.scrollLeft = 2;
-      if (dummy.scrollLeft < 2) {
-        cachedType = 'negative';
-      }
-    }
-    document.body.removeChild(dummy);
-    return cachedType;
-  }
-
-  /**
-   * Get the scrollLeft value of the element relative to the direction
-   *
-   * @param {string} scrollType type of the scroll detected with `detectScrollType`
-   * @param {string} direction current direction of the element
-   * @param {Element} element
-   * @return {number} the scrollLeft value.
-   */
-  static getNormalizedScrollLeft(scrollType, direction, element) {
-    const { scrollLeft } = element;
-    if (direction !== 'rtl' || !scrollType) {
-      return scrollLeft;
-    }
-
-    switch (scrollType) {
-      case 'negative':
-        return element.scrollWidth - element.clientWidth + scrollLeft;
-      case 'reverse':
-        return element.scrollWidth - element.clientWidth - scrollLeft;
-      default:
-        return scrollLeft;
-    }
-  }
-
-  /**
-   * Set the scrollLeft value of the element relative to the direction
-   *
-   * @param {string} scrollType type of the scroll detected with `detectScrollType`
-   * @param {string} direction current direction of the element
-   * @param {Element} element
-   * @param {number} scrollLeft the scrollLeft value to be set
-   */
-  static setNormalizedScrollLeft(scrollType, direction, element, scrollLeft) {
-    if (direction !== 'rtl' || !scrollType) {
-      element.scrollLeft = scrollLeft;
-      return;
-    }
-
-    switch (scrollType) {
-      case 'negative':
-        element.scrollLeft = element.clientWidth - element.scrollWidth + scrollLeft;
-        break;
-      case 'reverse':
-        element.scrollLeft = element.scrollWidth - element.clientWidth - scrollLeft;
-        break;
-      default:
-        element.scrollLeft = scrollLeft;
-        break;
-    }
-  }
-}
-
-export { DirHelper };

package/src/slot-mixin.d.ts

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 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';
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
-
-export declare class SlotMixinClass {
-  /**
-   * List of named slots to initialize.
-   */
-  protected readonly slots: Record<string, () => HTMLElement>;
-}

package/src/slot-mixin.js

@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-
-/**
- * A mixin to provide content for named slots defined by component.
- *
- * @polymerMixin
- */
-export const SlotMixin = dedupingMixin(
-  (superclass) =>
-    class SlotMixinClass extends superclass {
-      /**
-       * List of named slots to initialize.
-       * @protected
-       */
-      get slots() {
-        return {};
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-        this._connectSlotMixin();
-      }
-
-      /** @private */
-      _connectSlotMixin() {
-        Object.keys(this.slots).forEach((slotName) => {
-          // Ignore labels of nested components, if any
-          const hasContent = this._getDirectSlotChild(slotName) !== undefined;
-
-          if (!hasContent) {
-            const slotFactory = this.slots[slotName];
-            const slotContent = slotFactory();
-            if (slotContent instanceof Element) {
-              if (slotName !== '') {
-                slotContent.setAttribute('slot', slotName);
-              }
-              this.appendChild(slotContent);
-            }
-          }
-        });
-      }
-
-      /** @protected */
-      _getDirectSlotChild(slotName) {
-        return Array.from(this.childNodes).find((node) => {
-          // Either an element (any slot) or a text node (only un-named slot).
-          return (
-            (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
-            (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
-          );
-        });
-      }
-    },
-);