@heartlandone/vega 2.76.0 → 2.77.1

package/dist/collection/helpers/slimmers/position-calculation/base-position-calculation-strategy.js

@@ -27,19 +27,24 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
    * returns an ElementPositionBox.
    */
   getPositionBox(placement, alignment) {
-    const placements = placement || this.getPlacements();
-    const alignments = alignment || this.getAlignments();
+    const placements = placement && placement.length > 0 ? placement : this.getPlacements();
+    const alignments = alignment && alignment.length > 0 ? alignment : this.getAlignments();
     const targetBox = this.getTargetBoundBox();
     const elementBox = this.getElementBoundBox();
     const containerBox = this.getElementScrollDimension();
     const suitablePlacement = this.getSuitablePlacement(containerBox, elementBox, targetBox, placements);
-    const suitableAlignment = this.getSuitableAlignment(containerBox, elementBox, targetBox, suitablePlacement, alignments);
-    const positionBox = this.calculatePosition(elementBox, targetBox, suitablePlacement, suitableAlignment);
-    const translocationBox = this.getTranslocationBox(suitablePlacement);
+    const activePlacement = suitablePlacement || placements[0];
+    const suitableAlignment = this.getSuitableAlignment(containerBox, elementBox, targetBox, activePlacement, alignments);
+    const activeAlignment = suitableAlignment || alignments[0];
+    const positionBox = this.calculatePosition(elementBox, targetBox, activePlacement, activeAlignment);
+    const translocationBox = this.getTranslocationBox(activePlacement);
     positionBox.placement = suitablePlacement;
     positionBox.alignment = suitableAlignment;
     positionBox.left += translocationBox.X;
     positionBox.top += translocationBox.Y;
+    if (!this.showConfig.positionRelativeTo) {
+      this.adjustPositionForViewport(positionBox, elementBox, targetBox, activePlacement);
+    }
     return positionBox;
   }
   /**
@@ -178,7 +183,7 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
    * @param {ElementBoundBox} elementBox - The box of the element to be placed.
    * @param {ElementBoundBox} targetBox - The box of the target element.
    * @param {PlacementType[]} placements - The placements that we want to try.
-   * @returns {PlacementType} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
+   * @returns {Nullable<PlacementType>} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
    */
   getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
     const defaultPlacement = placements[0];
@@ -191,7 +196,7 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
                 No enough space found for placing element and we will keep using the defined placement:
                 ${defaultPlacement}
             `);
-      return defaultPlacement;
+      return null;
     }
   }
   /**
@@ -257,6 +262,115 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
       left: this.calculateLeft(elementBox, targetBox, placement, alignment),
     };
   }
+  /**
+   * Keeps the vertical position within the visible viewport
+   *
+   * @param {number} top - The calculated top position.
+   * @param {number} elementHeight - The height of the element.
+   * @returns {number} The top position constrained to the viewport.
+   */
+  keepVerticallyInView(top, elementHeight) {
+    return Math.max(0, Math.min(top, window.innerHeight - elementHeight));
+  }
+  /**
+   * Keeps the horizontal position within the visible viewport
+   *
+   * @param {number} left - The calculated left position.
+   * @param {number} elementWidth - The width of the element.
+   * @returns {number} The left position constrained to the viewport.
+   */
+  keepHorizontallyInView(left, elementWidth) {
+    return Math.max(0, Math.min(left, window.innerWidth - elementWidth));
+  }
+  /**
+   * Checks if the target element is visible in the viewport
+   *
+   * @param {ElementBoundBox} targetBox - The bounding box of the target element.
+   * @returns {boolean} True if target is visible in viewport.
+   */
+  isTargetInView(targetBox) {
+    const innerHeight = window.innerHeight;
+    const innerWidth = window.innerWidth;
+    const targetBottom = targetBox.top + targetBox.height;
+    const targetRight = targetBox.left + targetBox.width;
+    return (targetBox.top <= innerHeight &&
+      targetBottom >= 0 &&
+      targetBox.left <= innerWidth &&
+      targetRight >= 0);
+  }
+  /**
+   * Corrects `positionBox` so the element stays within the viewport after translocation.
+   * Only runs when the target is visible; skips correction entirely if the target has
+   * scrolled out of view so the element simply follows it.
+   *
+   * @param {ElementPositionBox} positionBox - The final position box to adjust (mutated in place).
+   * @param {ElementBoundBox} elementBox - Dimensions of the positioned element.
+   * @param {ElementBoundBox} targetBox - Bounding box of the target element.
+   * @param {PlacementType} placement - Active placement used to select the correction axis.
+   */
+  adjustPositionForViewport(positionBox, elementBox, targetBox, placement) {
+    if (!this.isTargetInView(targetBox)) {
+      return;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      positionBox.top = this.adjustForVerticalOverflow(positionBox.top, elementBox.height, targetBox.height);
+    }
+    else if (placement === 'left' || placement === 'right') {
+      positionBox.left = this.adjustForHorizontalOverflow(positionBox.left, elementBox.width, targetBox.width);
+    }
+    positionBox.top = this.keepVerticallyInView(positionBox.top, elementBox.height);
+    positionBox.left = this.keepHorizontallyInView(positionBox.left, elementBox.width);
+  }
+  /**
+   * Nudges `top` so the element stays within the viewport vertically.
+   * Only corrects when the overflow is less than `targetHeight` to keep the element
+   * visually anchored to its target; larger overflows are handled by `keepVerticallyInView`.
+   *
+   * @param {number} top - The calculated top position.
+   * @param {number} elementHeight - Height of the positioned element.
+   * @param {number} targetHeight - Height of the target, used as the max correctable overflow.
+   * @returns {number} The adjusted top position.
+   */
+  adjustForVerticalOverflow(top, elementHeight, targetHeight) {
+    // Pixels the element bleeds past the bottom of the viewport (positive = overflow).
+    const overflowBottom = top + elementHeight - window.innerHeight;
+    // Pixels the element bleeds past the top of the viewport (positive = overflow).
+    const overflowTop = -top;
+    // Only nudge when overflow is smaller than targetHeight; larger overflows are left to
+    // keepVerticallyInView to hard-clamp, since nudging that far would detach from the target.
+    if (overflowBottom > 0 && overflowBottom < targetHeight) {
+      return top - overflowBottom; // shift up until bottom edge is flush with viewport bottom
+    }
+    if (overflowTop > 0 && overflowTop < targetHeight) {
+      return top + overflowTop; // shift down until top edge is flush with viewport top
+    }
+    return top;
+  }
+  /**
+   * Nudges `left` so the element stays within the viewport horizontally.
+   * Only corrects when the overflow is less than `targetWidth` to keep the element
+   * visually anchored to its target; larger overflows are handled by `keepHorizontallyInView`.
+   *
+   * @param {number} left - The calculated left position.
+   * @param {number} elementWidth - Width of the positioned element.
+   * @param {number} targetWidth - Width of the target, used as the max correctable overflow.
+   * @returns {number} The adjusted left position.
+   */
+  adjustForHorizontalOverflow(left, elementWidth, targetWidth) {
+    // Pixels the element bleeds past the right edge of the viewport (positive = overflow).
+    const overflowRight = left + elementWidth - window.innerWidth;
+    // Pixels the element bleeds past the left edge of the viewport (positive = overflow).
+    const overflowLeft = -left;
+    // Only nudge when overflow is smaller than targetWidth; larger overflows are left to
+    // keepHorizontallyInView to hard-clamp, since nudging that far would detach from the target.
+    if (overflowRight > 0 && overflowRight < targetWidth) {
+      return left - overflowRight; // shift left until right edge is flush with viewport right
+    }
+    if (overflowLeft > 0 && overflowLeft < targetWidth) {
+      return left + overflowLeft; // shift right until left edge is flush with viewport left
+    }
+    return left;
+  }
   /**
    * It returns the translocation of the element relative to the target element
    *
@@ -301,7 +415,7 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
    * @param {ElementBoundBox} targetBox - The box of the element that the element to be positioned is aligned to.
    * @param {PlacementType} placement - The placement of the element relative to the target.
    * @param {PositionAlignmentType[]} alignments - An array of alignments to try.
-   * @returns {PositionAlignmentType} the alignment that is suitable for the element.
+   * @returns {Nullable<PositionAlignmentType>} the alignment that is suitable for the element.
    */
   getSuitableAlignment(containerBox, elementBox, targetBox, placement, alignments) {
     const defaultAlignment = alignments[0];
@@ -314,7 +428,7 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
                 No enough space found for placing element and we will keep using the defined alignment:
                 ${defaultAlignment}
             `);
-      return defaultAlignment;
+      return null;
     }
   }
   /**

package/dist/collection/helpers/slimmers/position-calculation/position-calculation-controller.js

@@ -63,10 +63,20 @@ export class PositionCalculationController extends VegaSlimmer {
     }
     appendableElement.style.left = `${positionBox.left}px`;
     appendableElement.style.top = `${positionBox.top}px`;
-    appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom');
-    appendableElement.classList.remove('vega-alignment-start', 'vega-alignment-center', 'vega-alignment-end');
-    appendableElement.classList.add(`vega-placement-${positionBox.placement}`);
-    appendableElement.classList.add(`vega-alignment-${positionBox.alignment}`);
+    appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom', 'vega-no-suitable-placement');
+    appendableElement.classList.remove('vega-alignment-start', 'vega-alignment-center', 'vega-alignment-end', 'vega-no-suitable-alignment');
+    if (positionBox.placement) {
+      appendableElement.classList.add(`vega-placement-${positionBox.placement}`);
+    }
+    else {
+      appendableElement.classList.add(`vega-no-suitable-placement`);
+    }
+    if (positionBox.alignment) {
+      appendableElement.classList.add(`vega-alignment-${positionBox.alignment}`);
+    }
+    else {
+      appendableElement.classList.add(`vega-no-suitable-alignment`);
+    }
   }
   /**
    * It sets the width of the appendable element to the width of the target element if the

package/dist/collection/helpers/slimmers/position-calculation/screen-position-calculation-strategy.js

@@ -9,6 +9,7 @@ import { BasePositionCalculationStrategy } from './base-position-calculation-str
 import { ScreenScrollPositionUpdate } from './screen-scroll-position-update';
 import { tryGetDocument } from '../../../utils/try-get-document';
 import { FeatureFlag } from '../../feature-control/feature-flag-controller';
+import { isNonNullable } from '../../../types/type-guard';
 /**
  * calculate position by screen container
  */
@@ -93,9 +94,17 @@ export class ScreenPositionCalculationStrategy extends BasePositionCalculationSt
    */
   getPosition(usePreviousPlacement) {
     const stayPlacement = usePreviousPlacement ? this.usePreviousPlacement : false;
-    const positionBox = stayPlacement
-      ? this.getPositionBox([this.previousPositionBox.placement], [this.previousPositionBox.alignment])
-      : this.getPositionBox();
+    let positionBox;
+    if (stayPlacement) {
+      positionBox = this.getPositionBox([this.previousPositionBox.placement].filter(isNonNullable), [this.previousPositionBox.alignment].filter(isNonNullable));
+      if (!FeatureFlag.isEnabled('VEGA_ELEMENT_APPENDER.AUTO_PLACEMENT')) {
+        positionBox.placement = this.previousPositionBox.placement;
+        positionBox.alignment = this.previousPositionBox.alignment;
+      }
+    }
+    else {
+      positionBox = this.getPositionBox();
+    }
     this.previousPositionBox = positionBox;
     return positionBox;
   }
@@ -154,7 +163,7 @@ export class ScreenPositionCalculationStrategy extends BasePositionCalculationSt
    * @param {ElementBoundBox} elementBox - The box of the element to place.
    * @param {ElementBoundBox} targetBox - The box of the target element.
    * @param {PlacementType[]} placements - Ordered list of placements to try.
-   * @returns {PlacementType} The chosen placement.
+   * @returns {Nullable<PlacementType>} The chosen placement.
    */
   getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
     const alignments = this.getAlignments();

package/dist/collection/helpers/slimmers/position-calculation/test/body-position-calculation-strategy.test.js

@@ -18,7 +18,7 @@ export class PositionCalculationMockedComponent {
   setIsScreenPosition(isScreenPosition) {
     this.isScreenPosition = isScreenPosition;
   }
-  getPositionBox(container, element, target, placement, alignment, translocation = { X: 0, Y: 0 }) {
+  getPositionBox(container, element, target, placement, alignment, translocation = { X: 0, Y: 0 }, positionRelativeTo) {
     this.container = container;
     this.showConfig = {
       target: target,
@@ -27,11 +27,12 @@ export class PositionCalculationMockedComponent {
       alignment: alignment,
       translocation: translocation,
       isScreenPosition: this.isScreenPosition,
+      positionRelativeTo: positionRelativeTo,
     };
     this.positionCalculationController.setCalculationStrategy();
     this.positionCalculationController.adjustPosition();
-    let placementResult;
-    let alignmentResult;
+    let placementResult = null;
+    let alignmentResult = null;
     element.className.split(' ').forEach((item) => {
       if (item.includes('vega-placement')) {
         placementResult = item.replace('vega-placement-', '');
@@ -291,7 +292,7 @@ describe('component.getPositionBox', () => {
         X: 100,
         Y: 100,
       });
-      expect(positionBox).toEqual({ top: -60, left: 200, placement: 'top', alignment: 'start' });
+      expect(positionBox).toEqual({ top: 0, left: 200, placement: 'top', alignment: 'start' });
       const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
@@ -301,7 +302,7 @@ describe('component.getPositionBox', () => {
         X: 100,
         Y: 100,
       });
-      expect(positionBox2).toEqual({ top: 200, left: -60, placement: 'left', alignment: 'start' });
+      expect(positionBox2).toEqual({ top: 200, left: 0, placement: 'left', alignment: 'start' });
     });
     test('return result as expected when container scrolled', () => {
       container.scrollTop = 20;
@@ -310,7 +311,7 @@ describe('component.getPositionBox', () => {
         X: 100,
         Y: 100,
       });
-      expect(positionBox).toEqual({ top: -40, left: 220, placement: 'top', alignment: 'start' });
+      expect(positionBox).toEqual({ top: 0, left: 220, placement: 'top', alignment: 'start' });
       const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,

package/dist/collection/helpers/slimmers/position-calculation/test/screen-position-calculation-strategy.test.js

@@ -11,28 +11,30 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
   const element = document.querySelector('.element');
   const target = document.querySelector('.target');
   const container = document.querySelector('.container');
-  function mockElementReturn(element, method, value) {
-    spyOn(element, method).and.returnValue(value);
-  }
   beforeAll(() => {
     Object.assign(window, { innerWidth: 500 });
     Object.assign(window, { innerHeight: 500 });
   });
   describe('directions', () => {
     let component;
+    let elementRectSpy;
+    let targetRectSpy;
     beforeEach(() => {
       component = new PositionCalculationMockedComponent();
       component.setIsScreenPosition(true);
-    });
-    beforeAll(() => {
-      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
-      mockElementReturn(target, 'getBoundingClientRect', {
+      elementRectSpy = jest
+        .spyOn(element, 'getBoundingClientRect')
+        .mockReturnValue({ width: 50, height: 50 });
+      targetRectSpy = jest.spyOn(target, 'getBoundingClientRect').mockReturnValue({
         width: 100,
         height: 100,
         top: 100,
         left: 100,
       });
     });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
     test('return result as expected in top-start', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['start'])).toEqual({
         top: 50,
@@ -129,6 +131,159 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
+    test('nudges element up when bottom placement slightly overflows viewport bottom edge', () => {
+      // no space for bottom → suitablePlacement=null, uses default bottom
+      // top=420+50=470, overflowBottom=470+50-500=20 < targetH(50) → top=450
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 50, height: 50 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 50,
+        top: 420,
+        left: 100,
+      });
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['start'])).toEqual({
+        top: 450,
+        left: 100,
+        placement: null,
+        alignment: null,
+      });
+    });
+    test('nudges element down when top placement slightly overflows viewport top edge', () => {
+      // no space for top → suitablePlacement=null, uses default top
+      // top=30-50=-20, overflowTop=20 < targetH(50) → top=0
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 50, height: 50 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 50,
+        top: 30,
+        left: 100,
+      });
+      expect(component.getPositionBox(container, element, target, ['top'], ['start'])).toEqual({
+        top: 0,
+        left: 100,
+        placement: null,
+        alignment: null,
+      });
+    });
+    test('nudges element left when right placement slightly overflows viewport right edge', () => {
+      // no space for right → suitablePlacement=null, uses default right
+      // left=380+100=480, overflowRight=480+50-500=30 < targetW(100) → left=450
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 50, height: 50 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 50,
+        top: 100,
+        left: 380,
+      });
+      expect(component.getPositionBox(container, element, target, ['right'], ['start'])).toEqual({
+        top: 100,
+        left: 450,
+        placement: null,
+        alignment: null,
+      });
+    });
+    test('nudges element right when left placement slightly overflows viewport left edge', () => {
+      // no space for left → suitablePlacement=null, uses default left
+      // left=30-50=-20, overflowLeft=20 < targetW(100) → left=0
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 50, height: 50 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 50,
+        top: 100,
+        left: 30,
+      });
+      expect(component.getPositionBox(container, element, target, ['left'], ['start'])).toEqual({
+        top: 100,
+        left: 0,
+        placement: null,
+        alignment: null,
+      });
+    });
+    test('positions element correctly for bottom+start when fully within viewport', () => {
+      // top=200+50=250, left=50, both within viewport → no adjustment
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 100, height: 100 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 50,
+        top: 200,
+        left: 50,
+      });
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['start'])).toEqual({
+        top: 250,
+        left: 50,
+        placement: 'bottom',
+        alignment: 'start',
+      });
+    });
+    test('positions element correctly for right+center when fully within viewport', () => {
+      // top=200-(100-100)/2=200, left=200+100=300, both within viewport → no adjustment
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 100, height: 100 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 100,
+        top: 200,
+        left: 200,
+      });
+      expect(component.getPositionBox(container, element, target, ['right'], ['center'])).toEqual({
+        top: 200,
+        left: 300,
+        placement: 'right',
+        alignment: 'center',
+      });
+    });
+    describe('positionRelativeTo — viewport adjustment is skipped', () => {
+      beforeEach(() => {
+        Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      });
+      test('does not clamp top when positionRelativeTo is set and element overflows window bottom', () => {
+        // Without positionRelativeTo: keepVerticallyInView would clamp top from 821 → 393
+        // (Math.min(821, 911-518)=393). With positionRelativeTo the raw calculated top is kept.
+        elementRectSpy.mockReturnValue({ width: 300, height: 518 });
+        targetRectSpy.mockReturnValue({
+          width: 137,
+          height: 40,
+          top: 781,
+          left: 11,
+        });
+        const result = component.getPositionBox(container, element, target, ['bottom'], ['start'], { X: 0, Y: 0 }, '#test2');
+        // top = 781 + 40 = 821, not clamped to 393
+        expect(result.top).toBe(821);
+        expect(result.left).toBe(11);
+      });
+      test('applies viewport adjustment normally when positionRelativeTo is not set', () => {
+        // Same geometry — without positionRelativeTo, keepVerticallyInView clamps top to 393
+        Object.assign(window, { innerHeight: 911, innerWidth: 500 });
+        elementRectSpy.mockReturnValue({ width: 300, height: 518 });
+        targetRectSpy.mockReturnValue({
+          width: 137,
+          height: 40,
+          top: 781,
+          left: 11,
+        });
+        const result = component.getPositionBox(container, element, target, ['bottom'], ['start']);
+        // keepVerticallyInView: Math.min(821, 911-518) = 393
+        expect(result.top).toBe(393);
+        expect(result.left).toBe(11);
+      });
+      test('does not clamp left when positionRelativeTo is set and element overflows window right', () => {
+        elementRectSpy.mockReturnValue({ width: 200, height: 50 });
+        targetRectSpy.mockReturnValue({
+          width: 60,
+          height: 40,
+          top: 100,
+          left: 380,
+        });
+        const result = component.getPositionBox(container, element, target, ['bottom'], ['start'], { X: 0, Y: 0 }, '#test2');
+        // left = 380, not clamped to Math.min(380, 500-200)=300
+        expect(result.left).toBe(380);
+      });
+    });
   });
 });
 describe('ScreenScrollPositionUpdate.shouldUpdatePosition', () => {

package/dist/collection/helpers/translation/locales/en.js

@@ -31,6 +31,8 @@ export const staticTranslations = {
   'Upload': 'Upload',
   'Clear': 'Clear',
   'Today': 'Today',
+  'Previous month': 'Previous month',
+  'Next month': 'Next month',
   'Day': 'Day',
   'Week': 'Week',
   'Month': 'Month',
@@ -48,6 +50,13 @@ export const staticTranslations = {
   'Thu-short': 'T',
   'Fri-short': 'F',
   'Sat-short': 'S',
+  'Sun-full': 'Sunday',
+  'Mon-full': 'Monday',
+  'Tue-full': 'Tuesday',
+  'Wed-full': 'Wednesday',
+  'Thu-full': 'Thursday',
+  'Fri-full': 'Friday',
+  'Sat-full': 'Saturday',
   'January': 'January',
   'February': 'February',
   'March': 'March',
@@ -103,6 +112,10 @@ export const staticTranslations = {
   'Less Indent': 'Less Indent',
   'Link': 'Link',
   'Image': 'Image',
+  'Upload from computer': 'Upload from computer',
+  'Insert via URL': 'Insert via URL',
+  'Image via URL': 'Image via URL',
+  'Insert': 'Insert',
   'Clear Style': 'Clear Style',
   'URL': 'URL',
   'Text': 'Text',
@@ -145,5 +158,7 @@ export const staticTranslations = {
   'Saturday': 'Saturday',
   'am': 'am',
   'pm': 'pm',
+  'date picker': 'Date Picker',
+  'Selected result': 'Selected result',
 };
 export default staticTranslations;

package/dist/collection/helpers/translation/tests/internal-translation-controller.test.js

@@ -119,6 +119,8 @@ describe('VegaTranslationController', () => {
       'Upload': 'Upload',
       'Clear': 'Clear',
       'Today': 'Today',
+      'Previous month': 'Previous month',
+      'Next month': 'Next month',
       'Day': 'Day',
       'Week': 'Week',
       'Month': 'Month',
@@ -136,6 +138,13 @@ describe('VegaTranslationController', () => {
       'Thu-short': 'T',
       'Fri-short': 'F',
       'Sat-short': 'S',
+      'Sun-full': 'Sunday',
+      'Mon-full': 'Monday',
+      'Tue-full': 'Tuesday',
+      'Wed-full': 'Wednesday',
+      'Thu-full': 'Thursday',
+      'Fri-full': 'Friday',
+      'Sat-full': 'Saturday',
       'January': 'January',
       'February': 'February',
       'March': 'March',
@@ -191,6 +200,10 @@ describe('VegaTranslationController', () => {
       'Less Indent': 'Less Indent',
       'Link': 'Link',
       'Image': 'Image',
+      'Image via URL': 'Image via URL',
+      'Insert': 'Insert',
+      'Insert via URL': 'Insert via URL',
+      'Upload from computer': 'Upload from computer',
       'Clear Style': 'Clear Style',
       'URL': 'URL',
       'Text': 'Text',
@@ -214,6 +227,8 @@ describe('VegaTranslationController', () => {
       'Select Language': 'Select Language',
       'Code Block': 'Code Block',
       'Copied': 'Copied',
+      'date picker': 'Date Picker',
+      'Selected result': 'Selected result',
       'Repeat every {0} days': 'Repeat every {0} days',
       'Repeat daily': 'Repeat daily',
       'Repeat every {0} weeks on {1}': 'Repeat every {0} weeks on {1}',

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -192,7 +192,7 @@ test('content should append to modal while in modal', () => {
 	  <div class="modal-dialog"></div>
 	</mock:shadow-root>
 	<vega-input-select slot="content"></vega-input-select>
-	<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-no-suitable-alignment vega-no-suitable-placement" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
   </vega-modal>`);
   drop.hide();
 });
@@ -213,7 +213,7 @@ test('content append proper while positionRelativeTo set', () => {
   expect(document.body).toEqualHtml(`
 	<div id="container">
 		<vega-input-select></vega-input-select>
-		<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+		<div class="dropdown vega-element-appender-appendable vega-no-suitable-alignment vega-no-suitable-placement" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
 	</div>
 	`);
   drop.hide();
@@ -244,7 +244,7 @@ test('content should append to modal content while in scroll modal content', ()
 	  </div>
 	</mock:shadow-root>
 	<vega-input-select></vega-input-select>
-	<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-no-suitable-alignment vega-no-suitable-placement" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
   </vega-modal>`);
   drop.hide();
 });
@@ -267,7 +267,7 @@ test('content should append to popover content while in scroll modal content', (
 	<vega-modal>
 		<vega-popover class="vega-popover">
 			<vega-input-select></vega-input-select>
-			<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-no-suitable-alignment vega-no-suitable-placement" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
 		</vega-popover>
 	</vega-modal>
 	`);
@@ -515,6 +515,7 @@ describe('screen position', () => {
     drop1.show();
     expect(element).toHaveClass('vega-placement-top');
     expect(element.style.top).toEqual('50px');
+    expect(element.style.left).toEqual('100px');
     targetRectSpyOn.and.returnValue({
       width: 100,
       height: 100,
@@ -523,6 +524,7 @@ describe('screen position', () => {
     });
     drop1.onScroll();
     expect(element).toHaveClass('vega-placement-top');
-    expect(element.style.top).toEqual('-10px');
+    expect(element.style.top).toEqual('0px');
+    expect(element.style.left).toEqual('100px');
   });
 });

package/dist/collection/helpers/validator/rules/valid-phone-number-rule.js

@@ -1,4 +1,4 @@
-import { getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js';
+import { getCountryCallingCode, parsePhoneNumber } from '../../../polyfill/libphonenumber';
 import { InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract';
 /**
  * A rule that checks if it's a valid phone number

package/dist/collection/helpers/validator/test/rules/valid-phone-number-rule.test.js

@@ -74,6 +74,16 @@ describe('ValidPhoneNumberRule', () => {
       visible: true,
     })).toEqual(false);
   });
+  test('should return invalid result when parsePhoneNumber throws an exception', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    // Input containing letters causes parsePhoneNumber to throw NOT_A_NUMBER
+    // when extract: false, exercising the catch block in isValidPhoneNumberForCountry
+    // eslint-disable-next-line spellcheck/spell-checker
+    expect(rule.evaluate('abc123')).toEqual({
+      isValid: false,
+      message: `Phone number is not valid`,
+    });
+  });
   test('should return false when the input is empty', () => {
     const rule = new ValidPhoneNumberRule(() => 'US', true);
     expect(rule.canEvaluate('')).toBeFalsy();