@vaadin/component-base 23.1.0-alpha3 → 23.1.0-beta2

package/src/iron-list-core.js

@@ -166,7 +166,7 @@ export const ironList = {
    * The height of the physical content that isn't on the screen.
    */
   get _hiddenContentSize() {
-    var size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
+    const size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
     return size - this._viewportHeight;
   },
 
@@ -182,7 +182,7 @@ export const ironList = {
    * `_physicalStart`.
    */
   get _maxVirtualStart() {
-    var virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
+    const virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
     return Math.max(0, virtualCount - this._physicalCount);
   },
 
@@ -255,9 +255,9 @@ export const ironList = {
    * @type {number}
    */
   get firstVisibleIndex() {
-    var idx = this._firstVisibleIndexVal;
+    let idx = this._firstVisibleIndexVal;
     if (idx == null) {
-      var physicalOffset = this._physicalTop + this._scrollOffset;
+      let physicalOffset = this._physicalTop + this._scrollOffset;
 
       idx =
         this._iterateItems((pidx, vidx) => {
@@ -282,12 +282,12 @@ export const ironList = {
    * @type {number}
    */
   get lastVisibleIndex() {
-    var idx = this._lastVisibleIndexVal;
+    let idx = this._lastVisibleIndexVal;
     if (idx == null) {
       if (this.grid) {
         idx = Math.min(this._virtualCount, this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1);
       } else {
-        var physicalOffset = this._physicalTop + this._scrollOffset;
+        let physicalOffset = this._physicalTop + this._scrollOffset;
         this._iterateItems((pidx, vidx) => {
           if (physicalOffset < this._scrollBottom) {
             idx = vidx;
@@ -323,10 +323,10 @@ export const ironList = {
   /**
    * Recycles the physical items when needed.
    */
-  _scrollHandler: function () {
-    var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
-    var delta = scrollTop - this._scrollPosition;
-    var isScrollingDown = delta >= 0;
+  _scrollHandler() {
+    const scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
+    let delta = scrollTop - this._scrollPosition;
+    const isScrollingDown = delta >= 0;
     // Track the current scroll position.
     this._scrollPosition = scrollTop;
     // Clear indexes for first and last visible indexes.
@@ -335,7 +335,7 @@ export const ironList = {
     // Random access.
     if (Math.abs(delta) > this._physicalSize && this._physicalSize > 0) {
       delta -= this._scrollOffset;
-      var idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
+      const idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
       this._virtualStart += idxAdjustment;
       this._physicalStart += idxAdjustment;
       // Estimate new physical offset based on the virtual start index.
@@ -346,11 +346,11 @@ export const ironList = {
       // _increasePoolIfNeeded to run away creating items to try to fill it.
       this._physicalTop = Math.min(
         Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage,
-        this._scrollPosition
+        this._scrollPosition,
       );
       this._update();
     } else if (this._physicalCount > 0) {
-      var reusables = this._getReusables(isScrollingDown);
+      const reusables = this._getReusables(isScrollingDown);
       if (isScrollingDown) {
         this._physicalTop = reusables.physicalTop;
         this._virtualStart += reusables.indexes.length;
@@ -370,18 +370,18 @@ export const ironList = {
    *
    * @param {boolean} fromTop If the potential reusable items are above the scrolling region.
    */
-  _getReusables: function (fromTop) {
-    var ith, lastIth, offsetContent, physicalItemHeight;
-    var idxs = [];
-    var protectedOffsetContent = this._hiddenContentSize * this._ratio;
-    var virtualStart = this._virtualStart;
-    var virtualEnd = this._virtualEnd;
-    var physicalCount = this._physicalCount;
-    var top = this._physicalTop + this._scrollOffset;
-    var bottom = this._physicalBottom + this._scrollOffset;
+  _getReusables(fromTop) {
+    let ith, lastIth, offsetContent, physicalItemHeight;
+    const idxs = [];
+    const protectedOffsetContent = this._hiddenContentSize * this._ratio;
+    const virtualStart = this._virtualStart;
+    const virtualEnd = this._virtualEnd;
+    const physicalCount = this._physicalCount;
+    let top = this._physicalTop + this._scrollOffset;
+    const bottom = this._physicalBottom + this._scrollOffset;
     // This may be called outside of a scrollHandler, so use last cached position
-    var scrollTop = this._scrollPosition;
-    var scrollBottom = this._scrollBottom;
+    const scrollTop = this._scrollPosition;
+    const scrollBottom = this._scrollBottom;
 
     if (fromTop) {
       ith = this._physicalStart;
@@ -434,7 +434,7 @@ export const ironList = {
    * @param {!Array<number>=} itemSet
    * @param {!Array<number>=} movingUp
    */
-  _update: function (itemSet, movingUp) {
+  _update(itemSet, movingUp) {
     if ((itemSet && itemSet.length === 0) || this._physicalCount === 0) {
       return;
     }
@@ -444,7 +444,7 @@ export const ironList = {
     // Adjust offset after measuring.
     if (movingUp) {
       while (movingUp.length) {
-        var idx = movingUp.pop();
+        const idx = movingUp.pop();
         this._physicalTop -= this._getPhysicalSizeIncrement(idx);
       }
     }
@@ -452,9 +452,9 @@ export const ironList = {
     this._updateScrollerSize();
   },
 
-  _isClientFull: function () {
+  _isClientFull() {
     return (
-      this._scrollBottom != 0 &&
+      this._scrollBottom !== 0 &&
       this._physicalBottom - 1 >= this._scrollBottom &&
       this._physicalTop <= this._scrollPosition
     );
@@ -463,33 +463,33 @@ export const ironList = {
   /**
    * Increases the pool size.
    */
-  _increasePoolIfNeeded: function (count) {
-    var nextPhysicalCount = this._clamp(
+  _increasePoolIfNeeded(count) {
+    let nextPhysicalCount = this._clamp(
       this._physicalCount + count,
       DEFAULT_PHYSICAL_COUNT,
-      this._virtualCount - this._virtualStart
+      this._virtualCount - this._virtualStart,
     );
     nextPhysicalCount = this._convertIndexToCompleteRow(nextPhysicalCount);
     if (this.grid) {
-      var correction = nextPhysicalCount % this._itemsPerRow;
+      const correction = nextPhysicalCount % this._itemsPerRow;
       if (correction && nextPhysicalCount - correction <= this._physicalCount) {
         nextPhysicalCount += this._itemsPerRow;
       }
       nextPhysicalCount -= correction;
     }
-    var delta = nextPhysicalCount - this._physicalCount;
-    var nextIncrease = Math.round(this._physicalCount * 0.5);
+    const delta = nextPhysicalCount - this._physicalCount;
+    let nextIncrease = Math.round(this._physicalCount * 0.5);
 
     if (delta < 0) {
       return;
     }
     if (delta > 0) {
-      var ts = window.performance.now();
+      const ts = window.performance.now();
       // Concat arrays in place.
       [].push.apply(this._physicalItems, this._createPool(delta));
       // Push 0s into physicalSizes. Can't use Array.fill because IE11 doesn't
       // support it.
-      for (var i = 0; i < delta; i++) {
+      for (let i = 0; i < delta; i++) {
         this._physicalSizes.push(0);
       }
       this._physicalCount += delta;
@@ -520,7 +520,7 @@ export const ironList = {
       this._debounce(
         '_increasePoolIfNeeded',
         this._increasePoolIfNeeded.bind(this, this._clamp(Math.round(50 / this._templateCost), 1, nextIncrease)),
-        idlePeriod
+        idlePeriod,
       );
     }
   },
@@ -528,12 +528,12 @@ export const ironList = {
   /**
    * Renders the a new list.
    */
-  _render: function () {
+  _render() {
     if (!this.isAttached || !this._isVisible) {
       return;
     }
     if (this._physicalCount !== 0) {
-      var reusables = this._getReusables(true);
+      const reusables = this._getReusables(true);
       this._physicalTop = reusables.physicalTop;
       this._virtualStart += reusables.indexes.length;
       this._physicalStart += reusables.indexes.length;
@@ -547,20 +547,22 @@ export const ironList = {
     }
   },
 
-  _gridChanged: function (newGrid, oldGrid) {
+  _gridChanged(newGrid, oldGrid) {
     if (typeof oldGrid === 'undefined') {
       return;
     }
     this.notifyResize();
     flush();
-    newGrid && this._updateGridMetrics();
+    if (newGrid) {
+      this._updateGridMetrics();
+    }
   },
 
   /**
    * Called when the items have changed. That is, reassignments
    * to `items`, splices or updates to a single item.
    */
-  _itemsChanged: function (change) {
+  _itemsChanged(change) {
     if (change.path === 'items') {
       this._virtualStart = 0;
       this._physicalTop = 0;
@@ -581,21 +583,21 @@ export const ironList = {
       this._adjustVirtualIndex(change.value.indexSplices);
       this._virtualCount = this.items ? this.items.length : 0;
       // Only blur if at least one item is added or removed.
-      var itemAddedOrRemoved = change.value.indexSplices.some(function (splice) {
+      const itemAddedOrRemoved = change.value.indexSplices.some((splice) => {
         return splice.addedCount > 0 || splice.removed.length > 0;
       });
       if (itemAddedOrRemoved) {
         // Only blur activeElement if it is a descendant of the list (#505,
         // #507).
-        var activeElement = this._getActiveElement();
+        const activeElement = this._getActiveElement();
         if (this.contains(activeElement)) {
           activeElement.blur();
         }
       }
       // Render only if the affected index is rendered.
-      var affectedIndexRendered = change.value.indexSplices.some(function (splice) {
+      const affectedIndexRendered = change.value.indexSplices.some((splice) => {
         return splice.index + splice.addedCount >= this._virtualStart && splice.index <= this._virtualEnd;
-      }, this);
+      });
       if (!this._isClientFull() || affectedIndexRendered) {
         this._debounce('_render', this._render, animationFrame);
       }
@@ -612,8 +614,8 @@ export const ironList = {
    * @param {!function(number, number)} fn
    * @param {!Array<number>=} itemSet
    */
-  _iterateItems: function (fn, itemSet) {
-    var pidx, vidx, rtn, i;
+  _iterateItems(fn, itemSet) {
+    let pidx, vidx, rtn, i;
 
     if (arguments.length === 2 && itemSet) {
       for (i = 0; i < itemSet.length; i++) {
@@ -645,7 +647,7 @@ export const ironList = {
    * @param {number} pidx Physical index
    * @return {number}
    */
-  _computeVidx: function (pidx) {
+  _computeVidx(pidx) {
     if (pidx >= this._physicalStart) {
       return this._virtualStart + (pidx - this._physicalStart);
     }
@@ -657,15 +659,15 @@ export const ironList = {
    *
    * @param {!Array<number>=} itemSet
    */
-  _updateMetrics: function (itemSet) {
+  _updateMetrics(itemSet) {
     // Make sure we distributed all the physical items
     // so we can measure them.
     flush();
 
-    var newPhysicalSize = 0;
-    var oldPhysicalSize = 0;
-    var prevAvgCount = this._physicalAverageCount;
-    var prevPhysicalAvg = this._physicalAverage;
+    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) => {
@@ -689,12 +691,12 @@ export const ironList = {
     // Update the average if it measured something.
     if (this._physicalAverageCount !== prevAvgCount) {
       this._physicalAverage = Math.round(
-        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount
+        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
       );
     }
   },
 
-  _updateGridMetrics: function () {
+  _updateGridMetrics() {
     this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].getBoundingClientRect().width : 200;
     this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetHeight : 200;
     this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / this._itemWidth) : this._itemsPerRow;
@@ -703,22 +705,22 @@ export const ironList = {
   /**
    * Updates the position of the physical items.
    */
-  _positionItems: function () {
+  _positionItems() {
     this._adjustScrollPosition();
 
-    var y = this._physicalTop;
+    let y = this._physicalTop;
 
     if (this.grid) {
-      var totalItemWidth = this._itemsPerRow * this._itemWidth;
-      var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
+      const totalItemWidth = this._itemsPerRow * this._itemWidth;
+      const rowOffset = (this._viewportWidth - totalItemWidth) / 2;
 
       this._iterateItems((pidx, vidx) => {
-        var modulus = vidx % this._itemsPerRow;
-        var x = Math.floor(modulus * this._itemWidth + rowOffset);
+        const modulus = vidx % this._itemsPerRow;
+        let x = Math.floor(modulus * this._itemWidth + rowOffset);
         if (this._isRTL) {
           x *= -1;
         }
-        this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
+        this.translate3d(`${x}px`, `${y}px`, 0, this._physicalItems[pidx]);
         if (this._shouldRenderNextRow(vidx)) {
           y += this._rowHeight;
         }
@@ -728,7 +730,7 @@ export const ironList = {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       this._iterateItems((pidx, vidx) => {
         const item = this._physicalItems[pidx];
-        this.translate3d(0, y + 'px', 0, item);
+        this.translate3d(0, `${y}px`, 0, item);
         y += this._physicalSizes[pidx];
         const itemId = item.id;
         if (itemId) {
@@ -741,7 +743,7 @@ export const ironList = {
     }
   },
 
-  _getPhysicalSizeIncrement: function (pidx) {
+  _getPhysicalSizeIncrement(pidx) {
     if (!this.grid) {
       return this._physicalSizes[pidx];
     }
@@ -759,22 +761,22 @@ export const ironList = {
    * @param {number} vidx Virtual index
    * @return {boolean}
    */
-  _shouldRenderNextRow: function (vidx) {
+  _shouldRenderNextRow(vidx) {
     return vidx % this._itemsPerRow === this._itemsPerRow - 1;
   },
 
   /**
    * Adjusts the scroll position when it was overestimated.
    */
-  _adjustScrollPosition: function () {
-    var deltaHeight =
+  _adjustScrollPosition() {
+    const deltaHeight =
       this._virtualStart === 0 ? this._physicalTop : Math.min(this._scrollPosition + this._physicalTop, 0);
     // Note: the delta can be positive or negative.
     if (deltaHeight !== 0) {
       this._physicalTop -= deltaHeight;
       // This may be called outside of a scrollHandler, so use last cached position
-      var scrollTop = this._scrollPosition;
-      // juking scroll position during interial scrolling on iOS is no bueno
+      const scrollTop = this._scrollPosition;
+      // Juking scroll position during interial scrolling on iOS is no bueno
       if (!IOS_TOUCH_SCROLLING && scrollTop > 0) {
         this._resetScrollPosition(scrollTop - deltaHeight);
       }
@@ -784,7 +786,7 @@ export const ironList = {
   /**
    * Sets the position of the scroll.
    */
-  _resetScrollPosition: function (pos) {
+  _resetScrollPosition(pos) {
     if (this.scrollTarget && pos >= 0) {
       this._scrollTop = pos;
       this._scrollPosition = this._scrollTop;
@@ -796,7 +798,7 @@ export const ironList = {
    *
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
-  _updateScrollerSize: function (forceUpdate) {
+  _updateScrollerSize(forceUpdate) {
     if (this.grid) {
       this._estScrollHeight = this._virtualRowCount * this._rowHeight;
     } else {
@@ -809,7 +811,7 @@ export const ironList = {
     forceUpdate = forceUpdate || (this.grid && this.$.items.style.height < this._estScrollHeight);
     // 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';
+      this.$.items.style.height = `${this._estScrollHeight}px`;
       this._scrollHeight = this._estScrollHeight;
     }
   },
@@ -821,7 +823,7 @@ export const ironList = {
    * @method scrollToIndex
    * @param {number} idx The index of the item
    */
-  scrollToIndex: function (idx) {
+  scrollToIndex(idx) {
     if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
       return;
     }
@@ -841,11 +843,11 @@ export const ironList = {
     // Estimate new physical offset.
     this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage;
 
-    var currentTopItem = this._physicalStart;
-    var currentVirtualItem = this._virtualStart;
-    var targetOffsetTop = 0;
-    var hiddenContentSize = this._hiddenContentSize;
-    // scroll to the item as much as we can.
+    let currentTopItem = this._physicalStart;
+    let currentVirtualItem = this._virtualStart;
+    let targetOffsetTop = 0;
+    const hiddenContentSize = this._hiddenContentSize;
+    // Scroll to the item as much as we can.
     while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
       targetOffsetTop += this._getPhysicalSizeIncrement(currentTopItem);
       currentTopItem = (currentTopItem + 1) % this._physicalCount;
@@ -855,7 +857,7 @@ export const ironList = {
     this._positionItems();
     this._resetScrollPosition(this._physicalTop + this._scrollOffset + targetOffsetTop);
     this._increasePoolIfNeeded(0);
-    // clear cached visible index.
+    // Clear cached visible index.
     this._firstVisibleIndexVal = null;
     this._lastVisibleIndexVal = null;
   },
@@ -863,7 +865,7 @@ export const ironList = {
   /**
    * Reset the physical average and the average count.
    */
-  _resetAverage: function () {
+  _resetAverage() {
     this._physicalAverage = 0;
     this._physicalAverageCount = 0;
   },
@@ -872,11 +874,11 @@ export const ironList = {
    * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
    * when the element is resized.
    */
-  _resizeHandler: function () {
+  _resizeHandler() {
     this._debounce(
       '_render',
       () => {
-        // clear cached visible index.
+        // Clear cached visible index.
         this._firstVisibleIndexVal = null;
         this._lastVisibleIndexVal = null;
         if (this._isVisible) {
@@ -890,7 +892,7 @@ export const ironList = {
           this.toggleScrollListener(false);
         }
       },
-      animationFrame
+      animationFrame,
     );
   },
 
@@ -900,7 +902,7 @@ export const ironList = {
    * @method updateSizeForItem
    * @param {Object} item The item instance.
    */
-  updateSizeForItem: function (item) {
+  updateSizeForItem(item) {
     return this.updateSizeForIndex(this.items.indexOf(item));
   },
 
@@ -910,7 +912,7 @@ export const ironList = {
    * @method updateSizeForIndex
    * @param {number} index The index of the item in the items array.
    */
-  updateSizeForIndex: function (index) {
+  updateSizeForIndex(index) {
     if (!this._isIndexRendered(index)) {
       return null;
     }
@@ -923,31 +925,31 @@ export const ironList = {
    * Converts a random index to the index of the item that completes it's row.
    * Allows for better order and fill computation when grid == true.
    */
-  _convertIndexToCompleteRow: function (idx) {
-    // when grid == false _itemPerRow can be unset.
+  _convertIndexToCompleteRow(idx) {
+    // When grid == false _itemPerRow can be unset.
     this._itemsPerRow = this._itemsPerRow || 1;
     return this.grid ? Math.ceil(idx / this._itemsPerRow) * this._itemsPerRow : idx;
   },
 
-  _isIndexRendered: function (idx) {
+  _isIndexRendered(idx) {
     return idx >= this._virtualStart && idx <= this._virtualEnd;
   },
 
-  _isIndexVisible: function (idx) {
+  _isIndexVisible(idx) {
     return idx >= this.firstVisibleIndex && idx <= this.lastVisibleIndex;
   },
 
-  _getPhysicalIndex: function (vidx) {
+  _getPhysicalIndex(vidx) {
     return (this._physicalStart + (vidx - this._virtualStart)) % this._physicalCount;
   },
 
-  _clamp: function (v, min, max) {
+  _clamp(v, min, max) {
     return Math.min(max, Math.max(min, v));
   },
 
-  _debounce: function (name, cb, asyncModule) {
+  _debounce(name, cb, asyncModule) {
     this._debouncers = this._debouncers || {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
-  }
+  },
 };

package/src/keyboard-mixin.js

@@ -49,5 +49,5 @@ export const KeyboardMixin = dedupingMixin(
       _onKeyUp(_event) {
         // To be implemented.
       }
-    }
+    },
 );

package/src/polylit-mixin.js

@@ -26,13 +26,13 @@ function parseObserver(observerString) {
 
   return {
     method,
-    observerProps
+    observerProps,
   };
 }
 
 function getOrCreateMap(obj, name) {
   if (!Object.prototype.hasOwnProperty.call(obj, name)) {
-    // clone any existing entries (superclasses)
+    // Clone any existing entries (superclasses)
     obj[name] = new Map(obj[name]);
   }
   return obj[name];
@@ -43,7 +43,7 @@ const PolylitMixinImplementation = (superclass) => {
     static createProperty(name, options) {
       if ([String, Boolean, Number, Array].includes(options)) {
         options = {
-          type: options
+          type: options,
         };
       }
 
@@ -105,7 +105,7 @@ const PolylitMixinImplementation = (superclass) => {
 
         this.addCheckedInitializer((instance) => {
           // This is run during construction of the element
-          instance['_set' + upper(name)] = function (value) {
+          instance[`_set${upper(name)}`] = function (value) {
             setter.call(instance, value);
           };
         });
@@ -116,14 +116,14 @@ const PolylitMixinImplementation = (superclass) => {
             // Do nothing, property is read-only.
           },
           configurable: true,
-          enumerable: true
+          enumerable: true,
         };
       }
 
       if (options.observer) {
         const method = options.observer;
 
-        // set this method
+        // Set this method
         this.getOrCreateMap('__observers').set(name, method);
 
         this.addCheckedInitializer((instance) => {
@@ -138,12 +138,12 @@ const PolylitMixinImplementation = (superclass) => {
           this.__notifyProps = new Set();
           // eslint-disable-next-line no-prototype-builtins
         } else if (!this.hasOwnProperty('__notifyProps')) {
-          // clone any existing observers (superclasses)
+          // Clone any existing observers (superclasses)
           const notifyProps = this.__notifyProps;
           this.__notifyProps = new Set(notifyProps);
         }
 
-        // set this method
+        // Set this method
         this.__notifyProps.add(name);
       }
 
@@ -238,9 +238,9 @@ const PolylitMixinImplementation = (superclass) => {
           this.dispatchEvent(
             new CustomEvent(`${camelToDash(k)}-changed`, {
               detail: {
-                value: this[k]
-              }
-            })
+                value: this[k],
+              },
+            }),
           );
         }
       });

package/src/resize-mixin.d.ts

@@ -16,4 +16,10 @@ export declare class ResizeMixinClass {
    * Override the method to implement your own behavior.
    */
   protected _onResize(contentRect: DOMRect): void;
+
+  /**
+   * When true, the parent element resize will be also observed.
+   * Override this getter and return `true` to enable this.
+   */
+  protected readonly _observeParent: boolean;
 }