@heartlandone/vega 2.75.1 → 2.76.0

package/dist/collection/helpers/slimmers/mutation-observer/test/aria-attributes-value-mapper.test.js

@@ -0,0 +1,196 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+import { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { AriaAttributesValueMapper } from '../aria-attributes-value-mapper';
+import { MockedMutationObserver } from '../../../../utils/spec-utils';
+import { LogUtility } from '../../../../utils/log';
+describe('AriaAttributesValueMapper', () => {
+  const mockedConnectedCallback = jest.fn();
+  const mockedDisconnectedCallback = jest.fn();
+  const mockedComponentDidLoad = jest.fn();
+  beforeEach(() => {
+    // ensure MutationObserver is mocked
+    global.MutationObserver = MockedMutationObserver;
+    MockedMutationObserver.mockClear();
+  });
+  class MockedComponent {
+    constructor() {
+      this.host = new MockHTMLElement('body', 'mocked-component');
+    }
+    connectedCallback() {
+      mockedConnectedCallback();
+    }
+    disconnectedCallback() {
+      mockedDisconnectedCallback();
+    }
+    componentDidLoad() {
+      mockedComponentDidLoad();
+    }
+    setMapper(mapper) {
+      this.ariaAttributesValueMapper = mapper;
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedComponent.prototype, "ariaAttributesValueMapper", void 0);
+  it('should map initial attribute value to target aria attribute', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    // simulate lifecycle
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+  it('should update aria attribute when observed attribute changes', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'apple');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // change attribute and trigger mutation
+    comp.host.setAttribute('data-aria-label', 'banana');
+    MockedMutationObserver.mock.instances[0].trigger([
+      { attributeName: 'data-aria-label', oldValue: 'apple' },
+    ]);
+    expect(button.getAttribute('aria-label')).toBe('banana');
+  });
+  it('should respect dependency priority and not overwrite when higher-priority exists', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    // higher priority present
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.host.setAttribute('label', 'initial');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('test');
+    // lower-priority 'label' changes
+    comp.host.setAttribute('label', 'apple');
+    MockedMutationObserver.mock.instances[0].trigger([{ attributeName: 'label', oldValue: 'initial' }]);
+    // should remain the higher-priority value
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+  it('should read camelCase host property when dashed attribute not present', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    // set property instead of attribute
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    comp.host.dataAriaLabel = 'propVal';
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('propVal');
+  });
+  it('should use default value when dependencies are empty', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('No label');
+  });
+  it('should ignore unrelated attribute mutations', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // unrelated attribute changes should not affect mapping
+    comp.host.setAttribute('some-other-attr', 'val');
+    MockedMutationObserver.mock.instances[0].trigger([
+      { attributeName: 'some-other-attr', oldValue: null },
+    ]);
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+  it('should warn when setting aria attribute throws', () => {
+    const comp = new MockedComponent();
+    // create a target that throws when setAttribute is called
+    const target = {
+      getAttribute: () => null,
+      setAttribute: () => {
+        throw new Error('boom');
+      },
+    };
+    const warnSpy = jest.spyOn(LogUtility, 'warn').mockImplementation(() => {
+      return 'warn mock';
+    });
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => target, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(warnSpy).toBeCalled();
+    warnSpy.mockRestore();
+  });
+  it('should be no-op when targetGetter returns null or targetGetter is null', () => {
+    const comp = new MockedComponent();
+    // Case 1: constructor targetGetter returns null
+    comp.setMapper(new AriaAttributesValueMapper(() => null, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    expect(() => {
+      comp.connectedCallback();
+      comp.componentDidLoad();
+    }).not.toThrow();
+    // Case 2: targetGetter property explicitly set to null after construction
+    const button = document.createElement('button');
+    const mapper = new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    });
+    // force targetGetter to null
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mapper.targetGetter = null;
+    comp.setMapper(mapper);
+    expect(() => {
+      comp.connectedCallback();
+      comp.componentDidLoad();
+    }).not.toThrow();
+  });
+  it('should set empty string when no defaultValue provided', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    // no dependencies present on host and no defaultValue in map
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'] },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // should set attribute to empty string when no defaultValue provided
+    expect(button.getAttribute('aria-label')).toBe('');
+  });
+  it('should handle empty mutations array (pass undefined to performMapping)', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // trigger with empty mutations array -> changedAttrs.size === 0 -> undefined passed
+    MockedMutationObserver.mock.instances[0].trigger([]);
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+});

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

@@ -7,6 +7,17 @@ import ResponsiveFormatFacade from '../../formatter/responsive-map-formatter/res
  * calculate position
  */
 export class BasePositionCalculationStrategy extends VegaSlimmer {
+  /**
+   * Whether the controller should adjust/recompute position at this time.
+   *
+   * This hook allows strategies to avoid unnecessary work (for example, on scroll) by deciding
+   * whether a re-position is required.
+   *
+   * @returns {boolean} True when the controller should proceed with width/height/position adjustments.
+   */
+  shouldAdjustPosition() {
+    return true;
+  }
   /**
    * Get the position box.
    *
@@ -32,121 +43,46 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
     return positionBox;
   }
   /**
-   * "Get the width, height, and top position of an element."
-   *
-   * The function takes an element as an argument and returns an object with three properties: width,
-   * height, and top.
-   *
-   * Note: If element is hide, we should temporary change it to `block` to get the bounding client rect of element,
-   * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
-   *
-   * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
-   */
-  getElementBoundBox() {
-    const element = this.showConfig.appendableElement;
-    const isElementHide = element.classList.contains('vega-force-hidden');
-    if (isElementHide)
-      element.classList.remove('vega-force-hidden');
-    const elementRect = element.getBoundingClientRect();
-    if (isElementHide)
-      element.classList.add('vega-force-hidden');
-    return {
-      width: elementRect.width,
-      height: elementRect.height,
-      left: elementRect.left,
-      top: elementRect.top,
-    };
-  }
-  /**
-   * It takes a placement string or array of placements and returns an array of placements
-   * if given placement is single, we should completion the placements with the default {@link Placements}
-   * and make given placement as default.
-   * if given placement is array, we should use it directly, even it partial of {@link Placements}.
-   * if not placement give. we should use {@link Placements}.
-   *
-   * @returns {PlacementType[]} ordered placements.
-   */
-  getPlacements() {
-    const placement = this.showConfig.placement;
-    if (typeof placement === 'string') {
-      const partial = Placements.filter((direction) => direction !== placement);
-      return [placement, ...partial];
-    }
-    else if (Array.isArray(placement)) {
-      return placement;
-    }
-    else {
-      return [...Placements];
-    }
-  }
-  /**
-   * It returns acceptable alignments.
-   *
-   * @returns {PositionAlignmentType[]} acceptable alignments
-   */
-  getAlignments() {
-    const alignment = this.showConfig.alignment;
-    if (typeof alignment === 'string') {
-      const partial = Alignments.filter((item) => item !== alignment);
-      return [alignment, ...partial];
-    }
-    else if (Array.isArray(alignment)) {
-      return alignment;
-    }
-    else {
-      return [...Alignments];
-    }
-  }
-  /**
-   * It takes a placement, a target box, and a element box, and returns an element box
+   * Whether the alignment space is enough
    *
-   * @param {ElementBoundBox} elementBox - The position of the element element.
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
    * @param {ElementBoundBox} targetBox - The position of the target element.
-   * @param {PlacementType} placement - The placement of the element.
-   * @param {PositionAlignmentType} alignment - The alignment of the element
-   * @returns {ElementPositionBox} An object with top and left properties.
-   */
-  calculatePosition(elementBox, targetBox, placement, alignment) {
-    return {
-      top: this.calculateTop(elementBox, targetBox, placement, alignment),
-      left: this.calculateLeft(elementBox, targetBox, placement, alignment),
-    };
-  }
-  /**
-   * It returns the translocation of the element relative to the target element
-   *
-   * @param {PlacementType} placement - The suitable placement of the element.
-   * @returns {TranslocationType} A translocation object with X and Y properties.
+   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
+   * @param {PlacementType} placement - The placement of the element relative to the target.
+   * @param {PlacementType} alignment - The alignment of the element relative to the target.
+   * @returns {boolean} return true if it has enough space, otherwise false
    */
-  getTranslocationBox(placement) {
-    const originPlacement = Array.isArray(this.showConfig.placement)
-      ? this.showConfig.placement[0]
-      : this.showConfig.placement;
-    const translocation = this.getTranslocation();
-    const result = { X: 0, Y: 0 };
-    if (isTranslocationType(translocation)) {
-      let xValue = translocation.X;
-      let yValue = translocation.Y;
-      // If originPlacement and placement is not in same axis, it should reverse axis.
-      if ((originPlacement &&
-        ['left', 'right'].includes(originPlacement) &&
-        ['top', 'bottom'].includes(placement)) ||
-        (originPlacement &&
-          ['top', 'bottom'].includes(originPlacement) &&
-          ['left', 'right'].includes(placement))) {
-        xValue = translocation.Y;
-        yValue = translocation.X;
-      }
-      if (['bottom', 'top'].includes(placement)) {
-        result.Y = placement === 'top' ? -yValue : yValue;
-        result.X = xValue;
+  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
+    if (['top', 'bottom'].includes(placement)) {
+      switch (alignment) {
+        case 'start': {
+          return targetBox.left + elementBox.width <= containerBox.width;
+        }
+        case 'center': {
+          return (targetBox.left >= (elementBox.width - targetBox.width) / 2 &&
+            targetBox.left + targetBox.width / 2 + elementBox.width / 2 <= containerBox.width);
+        }
+        case 'end': {
+          return targetBox.left + targetBox.width >= elementBox.width;
+        }
       }
-      if (['left', 'right'].includes(placement)) {
-        result.X = placement === 'left' ? -xValue : xValue;
-        result.Y = yValue;
+    }
+    if (['right', 'left'].includes(placement)) {
+      switch (alignment) {
+        case 'start': {
+          return targetBox.top + elementBox.height <= containerBox.height;
+        }
+        case 'center': {
+          return (targetBox.top >= (elementBox.height - targetBox.height) / 2 &&
+            targetBox.top + targetBox.height / 2 + elementBox.height / 2 <= containerBox.height);
+        }
+        case 'end': {
+          return targetBox.top + targetBox.height >= elementBox.height;
+        }
       }
     }
-    return result;
+    /* istanbul ignore next */
+    return false;
   }
   /**
    * Calculate the left position of the element
@@ -216,6 +152,24 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
         throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
     }
   }
+  /**
+   * It returns acceptable alignments.
+   *
+   * @returns {PositionAlignmentType[]} acceptable alignments
+   */
+  getAlignments() {
+    const alignment = this.showConfig.alignment;
+    if (typeof alignment === 'string') {
+      const partial = Alignments.filter((item) => item !== alignment);
+      return [alignment, ...partial];
+    }
+    else if (Array.isArray(alignment)) {
+      return alignment;
+    }
+    else {
+      return [...Alignments];
+    }
+  }
   /**
    * It takes a list of placements and returns the first placement that has enough space to place the
    * element
@@ -240,6 +194,105 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
       return defaultPlacement;
     }
   }
+  /**
+   * "Get the width, height, and top position of an element."
+   *
+   * The function takes an element as an argument and returns an object with three properties: width,
+   * height, and top.
+   *
+   * Note: If element is hide, we should temporary change it to `block` to get the bounding client rect of element,
+   * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
+   *
+   * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
+   */
+  getElementBoundBox() {
+    const element = this.showConfig.appendableElement;
+    const isElementHide = element.classList.contains('vega-force-hidden');
+    if (isElementHide)
+      element.classList.remove('vega-force-hidden');
+    const elementRect = element.getBoundingClientRect();
+    if (isElementHide)
+      element.classList.add('vega-force-hidden');
+    return {
+      width: elementRect.width,
+      height: elementRect.height,
+      left: elementRect.left,
+      top: elementRect.top,
+    };
+  }
+  /**
+   * It takes a placement string or array of placements and returns an array of placements
+   * if given placement is single, we should completion the placements with the default {@link Placements}
+   * and make given placement as default.
+   * if given placement is array, we should use it directly, even it partial of {@link Placements}.
+   * if not placement give. we should use {@link Placements}.
+   *
+   * @returns {PlacementType[]} ordered placements.
+   */
+  getPlacements() {
+    const placement = this.showConfig.placement;
+    if (typeof placement === 'string') {
+      const partial = Placements.filter((direction) => direction !== placement);
+      return [placement, ...partial];
+    }
+    else if (Array.isArray(placement)) {
+      return placement;
+    }
+    else {
+      return [...Placements];
+    }
+  }
+  /**
+   * It takes a placement, a target box, and a element box, and returns an element box
+   *
+   * @param {ElementBoundBox} elementBox - The position of the element element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {PlacementType} placement - The placement of the element.
+   * @param {PositionAlignmentType} alignment - The alignment of the element
+   * @returns {ElementPositionBox} An object with top and left properties.
+   */
+  calculatePosition(elementBox, targetBox, placement, alignment) {
+    return {
+      top: this.calculateTop(elementBox, targetBox, placement, alignment),
+      left: this.calculateLeft(elementBox, targetBox, placement, alignment),
+    };
+  }
+  /**
+   * It returns the translocation of the element relative to the target element
+   *
+   * @param {PlacementType} placement - The suitable placement of the element.
+   * @returns {TranslocationType} A translocation object with X and Y properties.
+   */
+  getTranslocationBox(placement) {
+    const originPlacement = Array.isArray(this.showConfig.placement)
+      ? this.showConfig.placement[0]
+      : this.showConfig.placement;
+    const translocation = this.getTranslocation();
+    const result = { X: 0, Y: 0 };
+    if (isTranslocationType(translocation)) {
+      let xValue = translocation.X;
+      let yValue = translocation.Y;
+      // If originPlacement and placement is not in same axis, it should reverse axis.
+      if ((originPlacement &&
+        ['left', 'right'].includes(originPlacement) &&
+        ['top', 'bottom'].includes(placement)) ||
+        (originPlacement &&
+          ['top', 'bottom'].includes(originPlacement) &&
+          ['left', 'right'].includes(placement))) {
+        xValue = translocation.Y;
+        yValue = translocation.X;
+      }
+      if (['bottom', 'top'].includes(placement)) {
+        result.Y = placement === 'top' ? -yValue : yValue;
+        result.X = xValue;
+      }
+      if (['left', 'right'].includes(placement)) {
+        result.X = placement === 'left' ? -xValue : xValue;
+        result.Y = yValue;
+      }
+    }
+    return result;
+  }
   /**
    * It takes a list of alignments and returns the suitable one that has enough space to fit the element
    *
@@ -264,48 +317,6 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
       return defaultAlignment;
     }
   }
-  /**
-   * Whether the alignment space is enough
-   *
-   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
-   * @param {ElementBoundBox} targetBox - The position of the target element.
-   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
-   * @param {PlacementType} placement - The placement of the element relative to the target.
-   * @param {PlacementType} alignment - The alignment of the element relative to the target.
-   * @returns {boolean} return true if it has enough space, otherwise false
-   */
-  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
-    if (['top', 'bottom'].includes(placement)) {
-      switch (alignment) {
-        case 'start': {
-          return targetBox.left + elementBox.width <= containerBox.width;
-        }
-        case 'center': {
-          return (targetBox.left >= (elementBox.width - targetBox.width) / 2 &&
-            targetBox.left + targetBox.width / 2 + elementBox.width / 2 <= containerBox.width);
-        }
-        case 'end': {
-          return targetBox.left + targetBox.width >= elementBox.width;
-        }
-      }
-    }
-    if (['right', 'left'].includes(placement)) {
-      switch (alignment) {
-        case 'start': {
-          return targetBox.top + elementBox.height <= containerBox.height;
-        }
-        case 'center': {
-          return (targetBox.top >= (elementBox.height - targetBox.height) / 2 &&
-            targetBox.top + targetBox.height / 2 + elementBox.height / 2 <= containerBox.height);
-        }
-        case 'end': {
-          return targetBox.top + targetBox.height >= elementBox.height;
-        }
-      }
-    }
-    /* istanbul ignore next */
-    return false;
-  }
   /**
    * If the placement is top or left, then the target's top or left position must be greater than or
    * equal to the element's height or width. If the placement is bottom or right, then the container's

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

@@ -17,6 +17,13 @@ export class PositionCalculationController extends VegaSlimmer {
     this.bodyPositionStrategy = new BodyPositionCalculationStrategy();
     this.screenPositionStrategy = new ScreenPositionCalculationStrategy();
   }
+  /**
+   * Clears any pending screen-position scroll animation frame callback.
+   * Call this when the appendable is hidden/destroyed.
+   */
+  clearScreenPositionScrollFrame() {
+    this.screenPositionStrategy.clearScrollFrame();
+  }
   /**
    * Sets the calculate postion strategy.
    */
@@ -31,6 +38,8 @@ export class PositionCalculationController extends VegaSlimmer {
    * @param {boolean} [usePreviousPlacement] - Should keep use previous placement and alignment.
    */
   adjustPosition(usePreviousPlacement) {
+    if (!this.positionStrategy.shouldAdjustPosition())
+      return;
     this.adjustWidth();
     this.adjustHeight();
     this.applyPosition(this.positionStrategy.getPosition(usePreviousPlacement));