@vaadin/component-base - npm Package Compare versions

Comparing version 23.1.0-beta1 to 23.1.0-beta2

custom_typings/vaadin.d.ts

 interface Vaadin {
   developmentModeCallback?: {
-    'usage-statistics'?: () => void;
-    'vaadin-license-checker'?: () => void;
+    'usage-statistics'?(): void;
+    'vaadin-license-checker'?(): void;
   };
   registrations?: Array<{ is: string; version: string }>;
   usageStatsChecker?: {
-    maybeGatherAndSend: () => void;
+    maybeGatherAndSend(): void;
   };
@@ -10,0 +10,0 @@ }

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "23.1.0-beta1",
+  "version": "23.1.0-beta2",
   "publishConfig": {
@@ -45,3 +45,3 @@ "access": "public"
   },
-  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

src/async.d.ts

@@ -12,4 +12,4 @@ /**
 export interface AsyncInterface {
-  run: (fn: Function, delay?: number) => number;
-  cancel: (handle: number) => void;
+  run(fn: Function, delay?: number): number;
+  cancel(handle: number): void;
 }
@@ -16,0 +16,0 @@

src/browser-utils.js

@@ -19,3 +19,3 @@ /**
 
-// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
 export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
@@ -22,0 +22,0 @@

src/element-mixin.js

@@ -42,3 +42,3 @@ /**
     static get version() {
-      return '23.1.0-beta1';
+      return '23.1.0-beta2';
     }
@@ -45,0 +45,0 @@

src/focus-mixin.js

@@ -71,3 +71,3 @@ /**
 
-        // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
+        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
         // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
@@ -88,3 +88,3 @@ if (this.hasAttribute('focused')) {
 
-        // focus-ring is true when the element was focused from the keyboard.
+        // Focus-ring is true when the element was focused from the keyboard.
         // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
@@ -91,0 +91,0 @@ this.toggleAttribute('focus-ring', focused && this._keyboardActive);

src/gestures.d.ts

@@ -68,10 +68,10 @@ /**
 export interface GestureRecognizer {
-  reset: () => void;
-  mousedown?: (e: MouseEvent) => void;
-  mousemove?: (e: MouseEvent) => void;
-  mouseup?: (e: MouseEvent) => void;
-  touchstart?: (e: TouchEvent) => void;
-  touchmove?: (e: TouchEvent) => void;
-  touchend?: (e: TouchEvent) => void;
-  click?: (e: MouseEvent) => void;
+  reset(): void;
+  mousedown?(e: MouseEvent): void;
+  mousemove?(e: MouseEvent): void;
+  mouseup?(e: MouseEvent): void;
+  touchstart?(e: TouchEvent): void;
+  touchmove?(e: TouchEvent): void;
+  touchend?(e: TouchEvent): void;
+  click?(e: MouseEvent): void;
 }

src/gestures.js

@@ -29,3 +29,3 @@ /**
 
-// detect native touch action support
+// Detect native touch action support
 const HAS_NATIVE_TA = typeof document.head.style.touchAction === 'string';
@@ -35,10 +35,10 @@ const GESTURE_KEY = '__polymerGestures';
 const TOUCH_ACTION = '__polymerGesturesTouchAction';
-// radius for tap and track
+// Radius for tap and track
 const TAP_DISTANCE = 25;
 const TRACK_DISTANCE = 5;
-// number of last N track positions to keep
+// Number of last N track positions to keep
 const TRACK_LENGTH = 2;
 
 const MOUSE_EVENTS = ['mousedown', 'mousemove', 'mouseup', 'click'];
-// an array of bitmask values for mapping MouseEvent.which to MouseEvent.buttons
+// An array of bitmask values for mapping MouseEvent.which to MouseEvent.buttons
 const MOUSE_WHICH_TO_BUTTONS = [0, 1, 4, 2];
@@ -117,10 +117,10 @@ const MOUSE_HAS_BUTTONS = (function () {
   const type = ev.type;
-  // exit early if the event is not a mouse event
+  // Exit early if the event is not a mouse event
   if (!isMouseEvent(type)) {
     return false;
   }
-  // ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
+  // Ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
   // instead we use ev.buttons (bitmask of buttons) or fall back to ev.which (deprecated, 0 for no buttons, 1 for left button)
   if (type === 'mousemove') {
-    // allow undefined for testing events
+    // Allow undefined for testing events
     let buttons = ev.buttons === undefined ? 1 : ev.buttons;
@@ -130,8 +130,8 @@ if (ev instanceof window.MouseEvent && !MOUSE_HAS_BUTTONS) {
     }
-    // buttons is a bitmask, check that the left button bit is set (1)
+    // Buttons is a bitmask, check that the left button bit is set (1)
     return Boolean(buttons & 1);
   }
-  // allow undefined for testing events
+  // Allow undefined for testing events
   const button = ev.button === undefined ? 0 : ev.button;
-  // ev.button is 0 in mousedown/mouseup/click for left button activation
+  // Ev.button is 0 in mousedown/mouseup/click for left button activation
   return button === 0;
@@ -142,11 +142,11 @@ }
   if (ev.type === 'click') {
-    // ev.detail is 0 for HTMLElement.click in most browsers
+    // Ev.detail is 0 for HTMLElement.click in most browsers
     if (ev.detail === 0) {
       return true;
     }
-    // in the worst case, check that the x/y position of the click is within
+    // In the worst case, check that the x/y position of the click is within
     // the bounding box of the target of the event
     // Thanks IE 10 >:(
     const t = _findOriginalTarget(ev);
-    // make sure the target of the event is an element so we can use getBoundingClientRect,
+    // Make sure the target of the event is an element so we can use getBoundingClientRect,
     // if not, just assume it is a synthetic click
@@ -157,6 +157,6 @@ if (!t.nodeType || /** @type {Element} */ (t).nodeType !== Node.ELEMENT_NODE) {
     const bcr = /** @type {Element} */ (t).getBoundingClientRect();
-    // use page x/y to account for scrolling
+    // Use page x/y to account for scrolling
     const x = ev.pageX,
       y = ev.pageY;
-    // ev is a synthetic click if the position is outside the bounding box of the target
+    // Ev is a synthetic click if the position is outside the bounding box of the target
     return !(x >= bcr.left && x <= bcr.right && y >= bcr.top && y <= bcr.bottom);
@@ -237,10 +237,10 @@ }
   let next = node;
-  // this code path is only taken when native ShadowDOM is used
+  // This code path is only taken when native ShadowDOM is used
   // if there is a shadowroot, it may have a node at x/y
   // if there is not a shadowroot, exit the loop
   while (next && next.shadowRoot && !window.ShadyDOM) {
-    // if there is a node at x/y in the shadowroot, look deeper
+    // If there is a node at x/y in the shadowroot, look deeper
     const oldNext = next;
     next = next.shadowRoot.elementFromPoint(x, y);
-    // on Safari, elementFromPoint may return the shadowRoot host
+    // On Safari, elementFromPoint may return the shadowRoot host
     if (oldNext === next) {
@@ -257,3 +257,3 @@ break;
 /**
- * a cheaper check than ev.composedPath()[0];
+ * A cheaper check than ev.composedPath()[0];
  *
@@ -289,6 +289,5 @@ * @private
     if (type.slice(0, 5) === 'touch') {
-      // ev = /** @type {TouchEvent} */ (ev); // eslint-disable-line no-self-assign
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
-        // only handle the first finger
+        // Only handle the first finger
         if (ev.touches.length === 1) {
@@ -309,7 +308,7 @@ POINTERSTATE.touch.id = t.identifier;
   const handled = ev[HANDLED_OBJ];
-  // used to ignore synthetic mouse events
+  // Used to ignore synthetic mouse events
   if (handled.skip) {
     return;
   }
-  // reset recognizer state
+  // Reset recognizer state
   for (let i = 0, r; i < recognizers.length; i++) {
@@ -323,3 +322,3 @@ r = recognizers[i];
   }
-  // enforce gesture recognizer order
+  // Enforce gesture recognizer order
   for (let i = 0, r; i < recognizers.length; i++) {
@@ -356,3 +355,3 @@ r = recognizers[i];
     if (!ev.cancelable) {
-      // scrolling is happening
+      // Scrolling is happening
     } else if (ta === 'none') {
@@ -407,3 +406,3 @@ shouldPrevent = true;
 /**
- * automate the event listeners for the native events
+ * Automate the event listeners for the native events
  *
@@ -426,3 +425,3 @@ * @private
     dep = deps[i];
-    // don't add mouse handlers on iOS because they cause gray selection overlays
+    // Don't add mouse handlers on iOS because they cause gray selection overlays
     if (IS_TOUCH_ONLY && isMouseEvent(dep) && dep !== 'click') {
@@ -448,3 +447,3 @@ continue;
 /**
- * automate event listener removal for native events
+ * Automate event listener removal for native events
  *
@@ -546,3 +545,3 @@ * @private
   wrap(/** @type {!Node} */ (target)).dispatchEvent(ev);
-  // forward `preventDefault` in a clean way
+  // Forward `preventDefault` in a clean way
   if (ev.defaultPrevented) {
@@ -587,3 +586,3 @@ const preventer = detail.preventer || detail.sourceEvent;
    */
-  reset: function () {
+  reset() {
     untrackDocument(this.info);
@@ -597,3 +596,3 @@ },
    */
-  mousedown: function (e) {
+  mousedown(e) {
     if (!hasLeftMouseButton(e)) {
@@ -626,3 +625,3 @@ return;
    */
-  touchstart: function (e) {
+  touchstart(e) {
     downupFire('down', _findOriginalTarget(e), e.changedTouches[0], e);
@@ -636,3 +635,3 @@ },
    */
-  touchend: function (e) {
+  touchend(e) {
     downupFire('up', _findOriginalTarget(e), e.changedTouches[0], e);
@@ -657,4 +656,4 @@ },
     sourceEvent: event,
-    preventer: preventer,
-    prevent: function (e) {
+    preventer,
+    prevent(e) {
       return prevent(e);
@@ -682,3 +681,3 @@ },
     /** @this {GestureInfo} */
-    addMove: function (move) {
+    addMove(move) {
       if (this.moves.length > TRACK_LENGTH) {
@@ -698,3 +697,3 @@ this.moves.shift();
    */
-  reset: function () {
+  reset() {
     this.info.state = 'start';
@@ -714,3 +713,3 @@ this.info.started = false;
    */
-  mousedown: function (e) {
+  mousedown(e) {
     if (!hasLeftMouseButton(e)) {
@@ -726,11 +725,11 @@ return;
       if (trackHasMovedEnough(self.info, x, y)) {
-        // first move is 'start', subsequent moves are 'move', mouseup is 'end'
+        // First move is 'start', subsequent moves are 'move', mouseup is 'end'
         self.info.state = self.info.started ? (e.type === 'mouseup' ? 'end' : 'track') : 'start';
         if (self.info.state === 'start') {
-          // if and only if tracking, always prevent tap
+          // If and only if tracking, always prevent tap
           prevent('tap');
         }
-        self.info.addMove({ x: x, y: y });
+        self.info.addMove({ x, y });
         if (!hasLeftMouseButton(e)) {
-          // always fire "end"
+          // Always fire "end"
           self.info.state = 'end';
@@ -750,6 +749,6 @@ untrackDocument(self.info);
 
-      // remove the temporary listeners
+      // Remove the temporary listeners
       untrackDocument(self.info);
     };
-    // add temporary document listeners as mouse retargets
+    // Add temporary document listeners as mouse retargets
     trackDocument(this.info, movefn, upfn);
@@ -765,3 +764,3 @@ this.info.x = e.clientX;
    */
-  touchstart: function (e) {
+  touchstart(e) {
     const ct = e.changedTouches[0];
@@ -777,3 +776,3 @@ this.info.x = ct.clientX;
    */
-  touchmove: function (e) {
+  touchmove(e) {
     const t = _findOriginalTarget(e);
@@ -785,6 +784,6 @@ const ct = e.changedTouches[0];
       if (this.info.state === 'start') {
-        // if and only if tracking, always prevent tap
+        // If and only if tracking, always prevent tap
         prevent('tap');
       }
-      this.info.addMove({ x: x, y: y });
+      this.info.addMove({ x, y });
       trackFire(this.info, t, ct);
@@ -801,8 +800,8 @@ this.info.state = 'track';
    */
-  touchend: function (e) {
+  touchend(e) {
     const t = _findOriginalTarget(e);
     const ct = e.changedTouches[0];
-    // only trackend if track was started and not aborted
+    // Only trackend if track was started and not aborted
     if (this.info.started) {
-      // reset started state on up
+      // Reset started state on up
       this.info.state = 'end';
@@ -857,8 +856,8 @@ this.info.addMove({ x: ct.clientX, y: ct.clientY });
     y: touch.clientY,
-    dx: dx,
-    dy: dy,
-    ddx: ddx,
-    ddy: ddy,
+    dx,
+    dy,
+    ddx,
+    ddy,
     sourceEvent: touch,
-    hover: function () {
+    hover() {
       return deepTargetFind(touch.clientX, touch.clientY);
@@ -887,3 +886,3 @@ },
    */
-  reset: function () {
+  reset() {
     this.info.x = NaN;
@@ -899,3 +898,3 @@ this.info.y = NaN;
    */
-  mousedown: function (e) {
+  mousedown(e) {
     if (hasLeftMouseButton(e)) {
@@ -912,3 +911,3 @@ this.info.x = e.clientX;
    */
-  click: function (e) {
+  click(e) {
     if (hasLeftMouseButton(e)) {
@@ -924,3 +923,3 @@ trackForward(this.info, e);
    */
-  touchstart: function (e) {
+  touchstart(e) {
     const touch = e.changedTouches[0];
@@ -936,3 +935,3 @@ this.info.x = touch.clientX;
    */
-  touchend: function (e) {
+  touchend(e) {
     trackForward(this.info, e.changedTouches[0], e);
@@ -951,3 +950,3 @@ },
   const dy = Math.abs(e.clientY - info.y);
-  // find original target from `preventer` for TouchEvents, or `e` for MouseEvents
+  // Find original target from `preventer` for TouchEvents, or `e` for MouseEvents
   const t = _findOriginalTarget(preventer || e);
@@ -957,5 +956,5 @@ if (!t || (canBeDisabled[/** @type {!HTMLElement} */ (t).localName] && t.hasAttribute('disabled'))) {
   }
-  // dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
+  // Dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
   if (isNaN(dx) || isNaN(dy) || (dx <= TAP_DISTANCE && dy <= TAP_DISTANCE) || isSyntheticClick(e)) {
-    // prevent taps from being generated if an event has canceled them
+    // Prevent taps from being generated if an event has canceled them
     if (!info.prevent) {
@@ -966,3 +965,3 @@ _fire(t, 'tap', {
         sourceEvent: e,
-        preventer: preventer,
+        preventer,
       });
@@ -969,0 +968,0 @@ }

src/iron-list-core.js

@@ -169,3 +169,3 @@ /**
   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;
@@ -186,3 +186,3 @@ },
   get _maxVirtualStart() {
-    var virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
+    const virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
     return Math.max(0, virtualCount - this._physicalCount);
@@ -260,5 +260,5 @@ },
   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;
 
@@ -288,3 +288,3 @@ idx =
   get lastVisibleIndex() {
-    var idx = this._lastVisibleIndexVal;
+    let idx = this._lastVisibleIndexVal;
     if (idx == null) {
@@ -294,3 +294,3 @@ if (this.grid) {
       } else {
-        var physicalOffset = this._physicalTop + this._scrollOffset;
+        let physicalOffset = this._physicalTop + this._scrollOffset;
         this._iterateItems((pidx, vidx) => {
@@ -331,6 +331,6 @@ if (physicalOffset < this._scrollBottom) {
    */
-  _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.
@@ -344,3 +344,3 @@ this._scrollPosition = scrollTop;
       delta -= this._scrollOffset;
-      var idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
+      const idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
       this._virtualStart += idxAdjustment;
@@ -360,3 +360,3 @@ this._physicalStart += idxAdjustment;
     } else if (this._physicalCount > 0) {
-      var reusables = this._getReusables(isScrollingDown);
+      const reusables = this._getReusables(isScrollingDown);
       if (isScrollingDown) {
@@ -381,14 +381,14 @@ this._physicalTop = reusables.physicalTop;
    */
-  _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;
 
@@ -446,3 +446,3 @@ if (fromTop) {
    */
-  _update: function (itemSet, movingUp) {
+  _update(itemSet, movingUp) {
     if ((itemSet && itemSet.length === 0) || this._physicalCount === 0) {
@@ -457,3 +457,3 @@ return;
       while (movingUp.length) {
-        var idx = movingUp.pop();
+        const idx = movingUp.pop();
         this._physicalTop -= this._getPhysicalSizeIncrement(idx);
@@ -466,3 +466,3 @@ }
 
-  _isClientFull: function () {
+  _isClientFull() {
     return (
@@ -478,4 +478,4 @@ this._scrollBottom !== 0 &&
    */
-  _increasePoolIfNeeded: function (count) {
-    var nextPhysicalCount = this._clamp(
+  _increasePoolIfNeeded(count) {
+    let nextPhysicalCount = this._clamp(
       this._physicalCount + count,
@@ -487,3 +487,3 @@ DEFAULT_PHYSICAL_COUNT,
     if (this.grid) {
-      var correction = nextPhysicalCount % this._itemsPerRow;
+      const correction = nextPhysicalCount % this._itemsPerRow;
       if (correction && nextPhysicalCount - correction <= this._physicalCount) {
@@ -494,4 +494,4 @@ nextPhysicalCount += this._itemsPerRow;
     }
-    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);
 
@@ -502,3 +502,3 @@ if (delta < 0) {
     if (delta > 0) {
-      var ts = window.performance.now();
+      const ts = window.performance.now();
       // Concat arrays in place.
@@ -508,3 +508,3 @@ [].push.apply(this._physicalItems, this._createPool(delta));
       // support it.
-      for (var i = 0; i < delta; i++) {
+      for (let i = 0; i < delta; i++) {
         this._physicalSizes.push(0);
@@ -548,3 +548,3 @@ }
    */
-  _render: function () {
+  _render() {
     if (!this.isAttached || !this._isVisible) {
@@ -554,3 +554,3 @@ return;
     if (this._physicalCount !== 0) {
-      var reusables = this._getReusables(true);
+      const reusables = this._getReusables(true);
       this._physicalTop = reusables.physicalTop;
@@ -569,3 +569,3 @@ this._virtualStart += reusables.indexes.length;
 
-  _gridChanged: function (newGrid, oldGrid) {
+  _gridChanged(newGrid, oldGrid) {
     if (typeof oldGrid === 'undefined') {
@@ -585,3 +585,3 @@ return;
    */
-  _itemsChanged: function (change) {
+  _itemsChanged(change) {
     if (change.path === 'items') {
@@ -607,3 +607,3 @@ this._virtualStart = 0;
       // Only blur if at least one item is added or removed.
-      var itemAddedOrRemoved = change.value.indexSplices.some((splice) => {
+      const itemAddedOrRemoved = change.value.indexSplices.some((splice) => {
         return splice.addedCount > 0 || splice.removed.length > 0;
@@ -614,3 +614,3 @@ });
         // #507).
-        var activeElement = this._getActiveElement();
+        const activeElement = this._getActiveElement();
         if (this.contains(activeElement)) {
@@ -621,3 +621,3 @@ activeElement.blur();
       // Render only if the affected index is rendered.
-      var affectedIndexRendered = change.value.indexSplices.some((splice) => {
+      const affectedIndexRendered = change.value.indexSplices.some((splice) => {
         return splice.index + splice.addedCount >= this._virtualStart && splice.index <= this._virtualEnd;
@@ -641,4 +641,4 @@ });
    */
-  _iterateItems: function (fn, itemSet) {
-    var pidx, vidx, rtn, i;
+  _iterateItems(fn, itemSet) {
+    let pidx, vidx, rtn, i;
 
@@ -675,3 +675,3 @@ if (arguments.length === 2 && itemSet) {
    */
-  _computeVidx: function (pidx) {
+  _computeVidx(pidx) {
     if (pidx >= this._physicalStart) {
@@ -688,3 +688,3 @@ return this._virtualStart + (pidx - this._physicalStart);
    */
-  _updateMetrics: function (itemSet) {
+  _updateMetrics(itemSet) {
     // Make sure we distributed all the physical items
@@ -694,6 +694,6 @@ // so we can measure them.
 
-    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;
 
@@ -727,3 +727,3 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
-  _updateGridMetrics: function () {
+  _updateGridMetrics() {
     this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].getBoundingClientRect().width : 200;
@@ -737,14 +737,14 @@ this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetHeight : 200;
    */
-  _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) {
@@ -776,3 +776,3 @@ x *= -1;
 
-  _getPhysicalSizeIncrement: function (pidx) {
+  _getPhysicalSizeIncrement(pidx) {
     if (!this.grid) {
@@ -795,3 +795,3 @@ return this._physicalSizes[pidx];
    */
-  _shouldRenderNextRow: function (vidx) {
+  _shouldRenderNextRow(vidx) {
     return vidx % this._itemsPerRow === this._itemsPerRow - 1;
@@ -803,4 +803,4 @@ },
    */
-  _adjustScrollPosition: function () {
-    var deltaHeight =
+  _adjustScrollPosition() {
+    const deltaHeight =
       this._virtualStart === 0 ? this._physicalTop : Math.min(this._scrollPosition + this._physicalTop, 0);
@@ -811,4 +811,4 @@ // Note: the delta can be positive or negative.
       // 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) {
@@ -823,3 +823,3 @@ this._resetScrollPosition(scrollTop - deltaHeight);
    */
-  _resetScrollPosition: function (pos) {
+  _resetScrollPosition(pos) {
     if (this.scrollTarget && pos >= 0) {
@@ -836,3 +836,3 @@ this._scrollTop = pos;
    */
-  _updateScrollerSize: function (forceUpdate) {
+  _updateScrollerSize(forceUpdate) {
     if (this.grid) {
@@ -862,3 +862,3 @@ this._estScrollHeight = this._virtualRowCount * this._rowHeight;
    */
-  scrollToIndex: function (idx) {
+  scrollToIndex(idx) {
     if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
@@ -883,7 +883,7 @@ return;
 
-    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) {
@@ -898,3 +898,3 @@ targetOffsetTop += this._getPhysicalSizeIncrement(currentTopItem);
     this._increasePoolIfNeeded(0);
-    // clear cached visible index.
+    // Clear cached visible index.
     this._firstVisibleIndexVal = null;
@@ -907,3 +907,3 @@ this._lastVisibleIndexVal = null;
    */
-  _resetAverage: function () {
+  _resetAverage() {
     this._physicalAverage = 0;
@@ -917,7 +917,7 @@ this._physicalAverageCount = 0;
    */
-  _resizeHandler: function () {
+  _resizeHandler() {
     this._debounce(
       '_render',
       () => {
-        // clear cached visible index.
+        // Clear cached visible index.
         this._firstVisibleIndexVal = null;
@@ -946,3 +946,3 @@ this._lastVisibleIndexVal = null;
    */
-  updateSizeForItem: function (item) {
+  updateSizeForItem(item) {
     return this.updateSizeForIndex(this.items.indexOf(item));
@@ -957,3 +957,3 @@ },
    */
-  updateSizeForIndex: function (index) {
+  updateSizeForIndex(index) {
     if (!this._isIndexRendered(index)) {
@@ -971,4 +971,4 @@ return null;
    */
-  _convertIndexToCompleteRow: function (idx) {
-    // when grid == false _itemPerRow can be unset.
+  _convertIndexToCompleteRow(idx) {
+    // When grid == false _itemPerRow can be unset.
     this._itemsPerRow = this._itemsPerRow || 1;
@@ -978,19 +978,19 @@ 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 || {};
@@ -997,0 +997,0 @@ this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));

src/polylit-mixin.js

@@ -35,3 +35,3 @@ /**
   if (!Object.prototype.hasOwnProperty.call(obj, name)) {
-    // clone any existing entries (superclasses)
+    // Clone any existing entries (superclasses)
     obj[name] = new Map(obj[name]);
@@ -127,3 +127,3 @@ }
 
-        // set this method
+        // Set this method
         this.getOrCreateMap('__observers').set(name, method);
@@ -143,3 +143,3 @@
         } else if (!this.hasOwnProperty('__notifyProps')) {
-          // clone any existing observers (superclasses)
+          // Clone any existing observers (superclasses)
           const notifyProps = this.__notifyProps;
@@ -149,3 +149,3 @@ this.__notifyProps = new Set(notifyProps);
 
-        // set this method
+        // Set this method
         this.__notifyProps.add(name);
@@ -152,0 +152,0 @@ }

src/resize-mixin.d.ts

@@ -19,2 +19,8 @@ /**
   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;
 }

src/resize-mixin.js

@@ -11,3 +11,10 @@ /**
     entries.forEach((entry) => {
-      entry.target._onResize(entry.contentRect);
+      // Notify child resizables, if any
+      if (entry.target.resizables) {
+        entry.target.resizables.forEach((resizable) => {
+          resizable._onResize(entry.contentRect);
+        });
+      } else {
+        entry.target._onResize(entry.contentRect);
+      }
     });
@@ -29,2 +36,14 @@ });
         observer.observe(this);
+
+        if (this._observeParent) {
+          const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
+
+          if (!parent.resizables) {
+            parent.resizables = new Set();
+            observer.observe(parent);
+          }
+
+          parent.resizables.add(this);
+          this.__parent = parent;
+        }
       }
@@ -36,5 +55,30 @@
         observer.unobserve(this);
+
+        const parent = this.__parent;
+        if (this._observeParent && parent) {
+          const resizables = parent.resizables;
+
+          if (resizables) {
+            resizables.delete(this);
+
+            if (resizables.size === 0) {
+              observer.unobserve(parent);
+            }
+          }
+
+          this.__parent = null;
+        }
       }
 
       /**
+       * When true, the parent element resize will be also observed.
+       * Override this getter and return `true` to enable this.
+       *
+       * @protected
+       */
+      get _observeParent() {
+        return false;
+      }
+
+      /**
        * A handler invoked on host resize. By default, it does nothing.
@@ -41,0 +85,0 @@ * Override the method to implement your own behavior.

src/virtualizer-iron-list-adapter.js

@@ -11,3 +11,3 @@ /**
 
-// iron-list can by default handle sizes up to around 100000.
+// Iron-list can by default handle sizes up to around 100000.
 // When the size is larger than MAX_VIRTUAL_COUNT _vidxOffset is used
@@ -176,4 +176,4 @@ const MAX_VIRTUAL_COUNT = 100000;
     // Record the scroll position before changing the size
-    let fvi; // first visible index
-    let fviOffsetBefore; // scroll offset of the first visible index
+    let fvi; // First visible index
+    let fviOffsetBefore; // Scroll offset of the first visible index
     if (size > 0) {
@@ -309,2 +309,11 @@ fvi = this.adjustedFirstVisibleIndex;
 
+    if (this._physicalCount !== 0) {
+      // After running super._scrollHandler, fix _virtualStart to workaround an iron-list issue.
+      // See https://github.com/vaadin/web-components/issues/1691
+      const reusables = this._getReusables(true);
+      this._physicalTop = reusables.physicalTop;
+      this._virtualStart += reusables.indexes.length;
+      this._physicalStart += reusables.indexes.length;
+    }
+
     if (this.reorderElements) {
@@ -311,0 +320,0 @@ this.__scrollReorderDebouncer = Debouncer.debounce(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178117

increased by0.64%

Lines of code

5084

increased by0.95%

No dependency changes