@globalpayments/vega 2.70.0 → 2.75.1

package/dist/collection/helpers/code-format/code-formatter.js

@@ -5,6 +5,7 @@ class CodeFormatter {
   constructor() {
     /**
      * Formats a given HTML source string by applying indentation and cleaning up styles.
+     * Content inside preserve tags (pre) is preserved as-is without formatting.
      *
      * @param {string} source - The HTML source string to format.
      * @param {CodeFormatOptions} options - Formatting options.
@@ -19,9 +20,25 @@ class CodeFormatter {
       const tokens = source.split(tagRegex).filter((t) => t.length > 0);
       let indentLevel = 0;
       let output = '';
+      let preserveDepth = 0;
       for (let i = 0; i < tokens.length; i++) {
         let token = tokens[i];
-        // Decrease indentation for closing tags
+        const tagName = CodeFormatter.getTagName(token);
+        // Track if we're entering or exiting preserve tags
+        if (CodeFormatter.PRESERVE_CONTENT_TAGS.has(tagName)) {
+          if (token.startsWith('</')) {
+            preserveDepth = Math.max(0, preserveDepth - 1);
+          }
+          else if (token.startsWith('<')) {
+            preserveDepth++;
+          }
+        }
+        // If inside preserve tag, output as-is without formatting
+        if (preserveDepth > 0) {
+          output += token;
+          continue;
+        }
+        // Decrease indentation for closing tags (after exiting preserve tags)
         if (token.startsWith('</')) {
           indentLevel = Math.max(0, indentLevel - 1);
         }
@@ -31,15 +48,20 @@ class CodeFormatter {
           token = token.replace(/style\s*=\s*"([^"]*)"/g, (_, styleContent) => {
             return `style="${this.formatStyle(styleContent)}"`;
           });
-          const tagName = CodeFormatter.getTagName(token);
           const isInline = CodeFormatter.INLINE_TAGS.has(tagName);
-          // Inline tag grouping: e.g., <strong>Text</strong> stays on one line
-          if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
-            // Group consecutive inline tags
+          // Inline tag grouping: e.g., <strong>Text</strong> or <span></span> stays on one line
+          // Check for empty tags: <tag></tag> (closing tag immediately follows opening tag)
+          if (isInline && i + 1 < tokens.length && tokens[i + 1] === `</${tagName}>`) {
+            // Empty inline tag: <span></span>
+            output += `${indent}${token}${tokens[i + 1]}\n`;
+            i += 1;
+          }
+          else if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
+            // Group consecutive inline tags with content
             let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
             i += 2;
             // Keep merging consecutive inline tag pairs
-            while (i + 2 < tokens.length &&
+            while (i + 3 < tokens.length &&
               tokens[i + 1].startsWith('<') &&
               CodeFormatter.INLINE_TAGS.has(CodeFormatter.getTagName(tokens[i + 1])) &&
               tokens[i + 3] === `</${CodeFormatter.getTagName(tokens[i + 1])}>`) {
@@ -53,7 +75,7 @@ class CodeFormatter {
             // Increase indentation for non-void opening tags
             if (!token.startsWith('</') &&
               !token.endsWith('/>') &&
-              !/^<br|^<img|^<meta|^<input|^<hr/i.test(token)) {
+              !CodeFormatter.VOID_TAGS.has(tagName)) {
               indentLevel++;
             }
           }
@@ -94,6 +116,10 @@ class CodeFormatter {
       .join('; ');
   }
 }
+/**
+ * Inline/phrasing elements that should be kept on a single line with their content.
+ * These tags are formatted as: <tag>content</tag> on one line.
+ */
 CodeFormatter.INLINE_TAGS = new Set([
   'span',
   'strong',
@@ -113,4 +139,28 @@ CodeFormatter.INLINE_TAGS = new Set([
   'del',
   'ins',
 ]);
+/**
+ * Void/self-closing elements that don't have closing tags.
+ * Used to avoid increasing indentation for these elements.
+ */
+CodeFormatter.VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+/**
+ * Tags whose content should be preserved as-is without formatting.
+ */
+CodeFormatter.PRESERVE_CONTENT_TAGS = new Set(['pre']);
 export default new CodeFormatter();

package/dist/collection/helpers/code-format/test/code-formatter.test.js

@@ -359,4 +359,52 @@ describe('Code formatter', () => {
     ]).toHtml();
     expect(CodeFormatter.format(input)).toMatchSnapshot();
   });
+  it('should preserve pre content without formatting', () => {
+    const input = `<pre>
+             S
+             A
+            LUT
+             M
+            O N
+            D  E
+            DONT
+          JE SUIS
+          LA  LAN
+          G U E  É
+         L O Q U E N
+        TE      QUESA
+       B  O  U  C  H  E
+      O        P A R I S
+     T I R E   ET   TIRERA
+    T O U             JOURS
+   AUX                  A  L
+ LEM                      ANDS   - Apollinaire
+</pre>
+`;
+    expect(CodeFormatter.format(input)).toMatchSnapshot();
+  });
+  it('should format empty inline tags on a single line', () => {
+    const input = `<p><span></span></p>`;
+    const output = CodeFormatter.format(input);
+    expect(output).toMatchSnapshot();
+    // Verify empty span stays inline
+    expect(output).toContain('<span></span>');
+    expect(output).not.toContain('<span>\n');
+  });
+  it('should format multiple empty inline tags', () => {
+    const input = `<p><span></span><strong></strong><em></em></p>`;
+    const output = CodeFormatter.format(input);
+    expect(output).toMatchSnapshot();
+    // Verify all empty inline tags stay inline
+    expect(output).toContain('<span></span>');
+    expect(output).toContain('<strong></strong>');
+    expect(output).toContain('<em></em>');
+  });
+  it('should format mixed empty and non-empty inline tags', () => {
+    const input = `<p><span></span><strong>Text</strong><em></em></p>`;
+    const output = CodeFormatter.format(input);
+    expect(output).toMatchSnapshot();
+    expect(output).toContain('<span></span>');
+    expect(output).toContain('<em></em>');
+  });
 });

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,7 +1,7 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaDropdownShow, VegaDropdownHide, VegaReset, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaReset, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaNativeInputChange, VegaFocus, VegaBlur, VegaSuggestionItemClick, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
-  ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
+  ['vega-app-header-button', [VegaClick, VegaDropdownClick, VegaReset]],
   ['vega-banner', [VegaClose, VegaActionButtonClick]],
   ['vega-breadcrumb', [VegaClick]],
   ['vega-button', [VegaClick]],
@@ -16,7 +16,8 @@ const entries = [
   ['vega-code-block', [VegaChange, VegaRemove]],
   ['vega-color-picker', [VegaChange]],
   ['vega-combo-box', [VegaChange, VegaCreate, VegaSearch]],
-  ['vega-date-picker', [VegaMonthYearChange, VegaChange]],
+  ['vega-date-picker', [VegaChange, VegaMonthYearChange]],
+  ['vega-date-picker-calendar', [VegaClear, VegaMonthYearChange, VegaSelectionChange]],
   [
     'vega-dropdown',
     [
@@ -34,7 +35,18 @@ const entries = [
   ['vega-file-uploader', [VegaChange, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview]],
   ['vega-form', [VegaFormSubmit, VegaFormReset, VegaValidate]],
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
-  ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick, VegaPaste]],
+  [
+    'vega-input',
+    [
+      VegaChange,
+      VegaNativeInputChange,
+      VegaFocus,
+      VegaBlur,
+      VegaLabelButtonClick,
+      VegaSuggestionItemClick,
+      VegaPaste,
+    ],
+  ],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
   ['vega-input-numeric', [VegaChange]],
   ['vega-input-passcode', [VegaChange, VegaComplete]],

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -101,7 +101,11 @@ export const VegaRetry = new VegaEventID('vegaRetry', 'retry');
 export const VegaPreview = new VegaEventID('vegaPreview', 'preview');
 export const VegaLabelButtonClick = new VegaEventID('vegaLabelButtonClick', 'labelButtonClick');
 export const VegaReset = new VegaEventID('vegaReset', 'reset');
-export const VegaMonthYearChange = new VegaEventID('vegaMonthYearChange', 'monthYearChange');
+export const VegaClear = new VegaEventID('vegaClear', 'clear');
 export const VegaComplete = new VegaEventID('vegaComplete', 'complete');
 export const VegaPaste = new VegaEventID('vegaPaste', 'paste');
 export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur, VegaPaste];
+export const VegaMonthYearChange = new VegaEventID('vegaMonthYearChange', 'monthYearChange');
+export const VegaSelectionChange = new VegaEventID('vegaSelectionChange', 'selectionChange');
+export const VegaSuggestionItemClick = new VegaEventID('vegaSuggestionItemClick', 'suggestionItemClick');
+export const VegaNativeInputChange = new VegaEventID('vegaNativeInputChange', 'nativeInputChange');

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -36,7 +36,6 @@ export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLink
 export const VegaInternalLeftNavGroupExpand = new VegaInternalEventID('leftNavGroupExpand');
 export const VegaInternalLeftNavLinkSelected = new VegaInternalEventID('leftNavLinkSelected');
 export const VegaInternalInitializeLeftNavLinkSelected = new VegaInternalEventID('initializeLeftNavLinkSelected');
-export const VegaInternalDropdownUpdateTarget = new VegaInternalEventID('dropdownUpdateTarget');
 export const VegaInternalRichTextEditorFlushChanges = new VegaInternalEventID('richTextEditorFlushChanges');
 export const VegaInternalRichTextEditorSelectionRangeChange = new VegaInternalEventID('richTextEditorSelectionRangeChange');
 export const VegaInternalRichTextImageClick = new VegaInternalEventID('richTextImageClick');
@@ -56,8 +55,15 @@ export const VegaInternalColumnBodyCellRenderInputRIC = new VegaInternalEventID(
 export const VegaInternalCalendarEventPreviewUpdate = new VegaInternalEventID('calendarEventPreviewUpdate');
 export const VegaInternalCalendarEventPreviewClear = new VegaInternalEventID('calendarEventPreviewClear');
 export const VegaInternalUpdateRTECursorPosition = new VegaInternalEventID('InternalUpdateRTECursorPosition');
-export const VegaInternalMonthYearChange = new VegaInternalEventID('internalMonthYearChange');
 export const VegaInternalLeftNavLinkSelectedTopic = new VegaInternalEventID('leftNavLinkSelectedTopic');
 export const VegaInternalCalendarEventPreviewHide = new VegaInternalEventID('calendarEventPreviewHide');
 export const VegaInternalFormSubmit = new VegaInternalEventID('formSubmit');
 export const VegaInternalFormReset = new VegaInternalEventID('formReset');
+export const VegaInternalProgressTrackerStepClick = new VegaInternalEventID('progressTrackerStepClick');
+export const VegaInternalDatePickerCalendarSelectionChange = new VegaInternalEventID('datePickerCalendarSelectionChange');
+export const VegaInternalDatePickerCalendarInputClick = new VegaInternalEventID('datePickerCalendarInputClick');
+export const VegaInternalDatePickerCalendarClear = new VegaInternalEventID('datePickerCalendarClear');
+export const VegaInternalDatePickerCalendarUpdatePeriodByUser = new VegaInternalEventID('datePickerCalendarUpdatePeriodByUser');
+export const VegaInternalUpdateVegaInputValue = new VegaInternalEventID('updateVegaInputValue');
+export const VegaInternalFocusVegaInput = new VegaInternalEventID('focusVegaInput');
+export const VegaInternalSetupVegaInputMaskConfig = new VegaInternalEventID('setupVegaInputMaskConfig');

package/dist/collection/helpers/event-manager/test/component-event-id-map.test.js

@@ -1,14 +1,16 @@
 import { VEGA_COMPONENT_EVENT_MAP } from '../event-id/component-event-id-map';
-import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaPaste } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaNativeInputChange, VegaPaste, VegaSuggestionItemClick, } from '../event-id/vega-event-id';
 test('VEGA_COMPONENT_EVENT_MAP size', () => {
   expect(VEGA_COMPONENT_EVENT_MAP.size).not.toEqual(0);
 });
 test('VEGA_COMPONENT_EVENT_MAP vega-input', () => {
   expect(VEGA_COMPONENT_EVENT_MAP.get('vega-input')).toEqual([
     VegaChange,
+    VegaNativeInputChange,
     VegaFocus,
     VegaBlur,
     VegaLabelButtonClick,
+    VegaSuggestionItemClick,
     VegaPaste,
   ]);
 });

package/dist/collection/helpers/event-manager/test/vega-event-manager.test.js

@@ -1,5 +1,5 @@
 import { VegaEventManager } from '../../public-api';
-import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaPaste, VegaReset, VegaSearchTrigger, } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaNativeInputChange, VegaPaste, VegaReset, VegaSearchTrigger, VegaSuggestionItemClick, } from '../event-id/vega-event-id';
 import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/index';
 import { sleep } from '../../../utils/test-utils';
 describe('VegaEventManager', () => {
@@ -20,9 +20,11 @@ describe('VegaEventManager', () => {
   it('should work proper while call getNativeEventName', () => {
     expect(VegaEventManager.getEnabledEventIdsByComponent('vega-input')).toEqual([
       VegaChange,
+      VegaNativeInputChange,
       VegaFocus,
       VegaBlur,
       VegaLabelButtonClick,
+      VegaSuggestionItemClick,
       VegaPaste,
     ]);
     expect(VegaEventManager.getEnabledEventIdsByComponent('vega-dropdown')).toEqual([

package/dist/collection/helpers/slimmers/element-appender/element-appender-slimmer.js

@@ -11,6 +11,10 @@ import ChangeManager from '../../change-manager/change-manager';
 import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../change-manager/observer/observer';
 import { ElementAppenderHierarchyTreeManager } from './element-appender-hierarchy-tree-manager';
+import { ClickTriggerStrategy } from './trigger-strategies/click-trigger-strategy';
+import { HoverTriggerStrategy } from './trigger-strategies/hover-trigger-strategy';
+import { NoneTriggerStrategy } from './trigger-strategies/none-trigger-strategy';
+import { isEATriggerStrategy } from '../../../types/type-guard';
 export class ElementAppenderSlimmer extends VegaSlimmer {
   constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow', disableInteractiveGetter = () => false) {
     super();
@@ -36,25 +40,28 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     };
     /* It's a function that listens to the click event on the dropdown. It checks if the trigger
     property is equal to 'click'. If it is, then it toggles the dropdown. */
-    this.targetClickHandler = () => {
-      if (this.shouldListenerWork('click')) {
-        this.isShowing() ? this.hide() : this.show();
+    this.targetClickHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-click')) {
+        this.executeTriggerStrategy(triggerStrategy, event, 'target-click');
       }
     };
     /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it clears the timer. */
-    this.targetMouseEnterHandler = () => {
-      if (this.shouldListenerWork('hover')) {
-        this.isShowing() === false && this.show();
+    this.targetMouseEnterHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-mouseenter')) {
+        this.executeTriggerStrategy(triggerStrategy, event, 'target-mouseenter');
         this.clearDelayHideTimer();
       }
     };
     /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
     certain amount of time. */
-    this.targetMouseLeaveHandler = () => {
-      if (this.shouldListenerWork('hover')) {
-        this.createDelayHideTimer();
+    this.targetMouseLeaveHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-mouseleave')) {
+        this.createDelayHideTimer(event, 'target-mouseleave');
       }
     };
     /* istanbul ignore next */
@@ -62,7 +69,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     this.targetFocusoutHandler = (e) => {
       var _a;
       if (!isParent(e.relatedTarget, (_a = this.showConfig) === null || _a === void 0 ? void 0 : _a.appendableElement)) {
-        this.targetMouseLeaveHandler();
+        this.targetMouseLeaveHandler(e);
       }
     };
     /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
@@ -70,18 +77,20 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     this.elementMouseEnterHandler = () => {
       var _a;
       (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseEnterHandler();
-      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('element-mouseenter') && !this.disableInteractiveGetter()) {
         this.clearDelayHideTimer();
       }
     };
     /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
     certain amount of time. */
-    this.elementMouseLeaveHandler = () => {
+    this.elementMouseLeaveHandler = (event) => {
       var _a;
-      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler();
-      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
-        this.createDelayHideTimer();
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler(event);
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('element-mouseleave') && !this.disableInteractiveGetter()) {
+        this.createDelayHideTimer(event, 'element-mouseleave');
       }
     };
     /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
@@ -92,14 +101,15 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       const hasChildShowing = this.hierarchyTreeManager
         .getChildren()
         .some((child) => child.isShowing());
+      const triggerStrategy = this.getTriggerStrategy();
       if (!hasChildShowing &&
-        this.shouldListenerWork('custom') &&
-        this.isShowing() &&
+        triggerStrategy.canEvaluate('click-outside') &&
         this.showConfig &&
         !isParent(currentTarget, this.showConfig.appendableElement) &&
         !isParent(currentTarget, this.showConfig.target) &&
-        findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
-        this.hide();
+        (this.showConfig.isScreenPosition ||
+          findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal'))) {
+        this.executeTriggerStrategy(triggerStrategy, e, 'click-outside');
       }
     };
     /* istanbul ignore next */
@@ -111,9 +121,10 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       }
     };
     /* A timer that will hide the dropdown after a certain amount of time. */
-    this.createDelayHideTimer = () => {
+    this.createDelayHideTimer = (event, eventType) => {
+      const triggerStrategy = this.getTriggerStrategy();
       this.delayHideTimer = setTimeout(() => {
-        this.hide();
+        this.executeTriggerStrategy(triggerStrategy, event, eventType);
         clearTimeout(this.delayHideTimer);
       }, ElementAppenderSlimmer.DELAY_HIDE_TIME);
     };
@@ -121,19 +132,22 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     this.clearDelayHideTimer = () => {
       this.delayHideTimer && clearTimeout(this.delayHideTimer);
     };
-    /* It's a function that checks if the listener should work or not. */
-    this.shouldListenerWork = (trigger) => {
-      const currentTrigger = this.getTrigger();
-      switch (trigger) {
-        case 'custom':
-          return currentTrigger !== 'none';
-        case 'click':
-          return currentTrigger === 'click';
-        case 'hover':
-          return currentTrigger === 'hover';
+    this.executeTriggerStrategy = (triggerStrategy, event, eventType) => {
+      if (this.showConfig) {
+        const result = triggerStrategy.evaluate({
+          target: this.showConfig.target,
+          appendableElement: this.showConfig.appendableElement,
+          htmlEvent: event,
+          eventType: eventType,
+          currentState: {
+            isVisible: this.isShowing(),
+          },
+        });
+        if (result) {
+          result.nextAction === 'hide' && this.hide();
+          result.nextAction === 'show' && this.show();
+        }
       }
-      /* istanbul ignore next */
-      throw new Error(`Unexpected trigger: ${trigger}. Expected values are custom, click, or hover.`);
     };
     this.showConfigFactory = showConfigFactory;
     this.getTrigger = getTrigger;
@@ -235,6 +249,21 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
   removeShadowRootElementScrolling() {
     ChangeManager.unregister(SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
   }
+  getTriggerStrategy() {
+    const trigger = this.getTrigger();
+    if (trigger === 'click') {
+      return new ClickTriggerStrategy();
+    }
+    else if (trigger === 'hover') {
+      return new HoverTriggerStrategy();
+    }
+    else if (isEATriggerStrategy(trigger)) {
+      return trigger;
+    }
+    else {
+      return new NoneTriggerStrategy();
+    }
+  }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
 __decorate([

package/dist/collection/helpers/slimmers/element-appender/test/element-appender-slimmer.test.js

@@ -12,6 +12,7 @@ import { ElementAppenderSlimmer } from '../element-appender-slimmer';
 import { LogUtility } from '../../../../utils/log';
 import ChangeManager from '../../../change-manager/change-manager';
 import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../change-manager/subject/static-subject/static-subject-title';
+import { ClickOutsideOnlyToDismissStrategy } from '../trigger-strategies/click-outside-only-to-dismiss-strategy';
 describe('ElementAppender slimmer test suite', () => {
   const mockedComponentDidLoadMethod = jest.fn();
   const mockedComponentDisconnectedCallbackMethod = jest.fn();
@@ -184,14 +185,14 @@ describe('ElementAppender slimmer test suite', () => {
       expect((appendableElement.style.display = 'block'));
       jest.useRealTimers();
     });
-    test('should listen event proper while trigger is custom', () => {
+    test('should listen event proper while trigger is custom trigger', () => {
       const mockedComponent = new MockedComponent();
       const target = new MockHTMLElement('body', 'div');
       const appendableElement = new MockHTMLElement('body', 'div');
       appendableElement.classList.add('vega-force-hidden');
       mockedComponent.target = target;
       mockedComponent.appendableElement = appendableElement;
-      mockedComponent.trigger = 'custom';
+      mockedComponent.trigger = new ClickOutsideOnlyToDismissStrategy();
       mockedComponent.componentDidLoad();
       mockedComponent.show();
       expect(mockedComponent.appendableElement).not.toHaveClass('vega-force-hidden');

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy.js

@@ -0,0 +1,28 @@
+/**
+ * A trigger strategy that hides the appendable element when a global mouse down event occurs outside the element.
+ */
+export class ClickOutsideOnlyToDismissStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is 'globalMouseDown', otherwise false.
+   */
+  canEvaluate(type) {
+    return type === 'click-outside';
+  }
+  /**
+   * Evaluates the trigger context and determines whether to hide the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to hide the appendable element.
+   */
+  evaluate(context) {
+    if (context.eventType === 'click-outside' && context.currentState.isVisible) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/click-trigger-strategy.js

@@ -0,0 +1,33 @@
+/**
+ * ClickTriggerStrategy handles 'targetClick' and 'globalMouseDown' events to toggle or hide the appendable element.
+ */
+export class ClickTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is 'targetClick' or 'globalMouseDown', otherwise false.
+   */
+  canEvaluate(type) {
+    return type === 'target-click' || type === 'click-outside';
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (context.eventType === 'target-click') {
+      return {
+        nextAction: context.currentState.isVisible ? 'hide' : 'show',
+      };
+    }
+    if (context.eventType === 'click-outside' && context.currentState.isVisible) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/hover-trigger-strategy.js

@@ -0,0 +1,42 @@
+/**
+ * HoverTriggerStrategy handles mouse enter and leave events on the target and appendable elements,
+ * as well as global mouse down events to show or hide the appendable element.
+ */
+export class HoverTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is related to hover actions or global mouse down, otherwise false.
+   */
+  canEvaluate(type) {
+    return [
+      'target-mouseenter',
+      'target-mouseleave',
+      'element-mouseenter',
+      'element-mouseleave',
+    ].includes(type);
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (['target-mouseenter', 'element-mouseenter'].includes(context.eventType)) {
+      return !context.currentState.isVisible
+        ? {
+          nextAction: 'show',
+        }
+        : {};
+    }
+    if (['target-mouseleave', 'element-mouseleave'].includes(context.eventType)) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    /* istanbul ignore next */
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/none-trigger-strategy.js

@@ -0,0 +1,22 @@
+/**
+ * NoneTriggerStrategy does not respond to any events and always indicates no action.
+ */
+export class NoneTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @returns {boolean} Always false as this strategy does not respond to any events.
+   */
+  canEvaluate() {
+    return false;
+  }
+  /* istanbul ignore next */
+  /**
+   * Evaluates the trigger context and always indicates no action.
+   *
+   * @returns {VegaEATriggerResult} An object indicating no action (no show, hide, or toggle).
+   */
+  evaluate() {
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/trigger-strategy.interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -42,9 +42,16 @@ export class PositionCalculationController extends VegaSlimmer {
    */
   applyPosition(positionBox) {
     const appendableElement = this.showConfig.appendableElement;
+    // TODO: should control position style in element appender but in component level
+    // https://gethired.atlassian.net/browse/VD-7883
     if (this.showConfig.isScreenPosition) {
       appendableElement.style.position = 'fixed';
     }
+    else {
+      if (appendableElement.classList.contains('date-picker-content-box')) {
+        appendableElement.style.position = 'absolute';
+      }
+    }
     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');