@heartlandone/vega 2.74.0 → 2.75.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-test-utils.js

@@ -0,0 +1,172 @@
+import { generateUUID } from '../../../../../utils/misc';
+/**
+ * Generate mock table data for testing purposes.
+ *
+ * @param {{ withHeader?: boolean }} options - Options for generating the table data.
+ * @param {boolean} options.withHeader - Whether to include a table header.
+ * @returns {VegaRTETableBlock} The generated mock table block data.
+ */
+export const mockRTETableData = ({ withHeader } = {}) => {
+  const tableHead = {
+    id: generateUUID(),
+    type: 'table-head',
+    children: [
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-head-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'H-A',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-head-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'H-B',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const tableBody = {
+    id: generateUUID(),
+    type: 'table-body',
+    children: [
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'A',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'B',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'C',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'D',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const children = [];
+  if (withHeader) {
+    children.push(tableHead, tableBody);
+  }
+  else {
+    children.push(tableBody);
+  }
+  return {
+    id: generateUUID(),
+    type: 'table-block',
+    children: children,
+  };
+};

package/dist/collection/components/vega-rich-text-editor/test/spec-utils.js

@@ -6,19 +6,22 @@ import { tryGetDocument } from '../../../utils/try-get-document';
  * @param {SpecPage} page - The SpecPage instance.
  * @param {{ textEl: HTMLElement; startOffset: number; endOffset: number }} options - Options for text selection.
  * @param {HTMLElement} options.textEl - The text element to select within.
+ * @param {HTMLElement} [options.endContainer] - The end container element of the selection.
+ * @param {HTMLElement} [options.commonAncestorContainer] - The common ancestor container of the selection.
  * @param {number} options.startOffset - The start offset of the selection.
  * @param {number} options.endOffset - The end offset of the selection.
  */
 export const mockTextSelection = async (page, options) => {
   const richTextEditorContent = find(page.body, 'vega-rich-text-editor >>> vega-rich-text-content');
   richTextEditorContent.shadowRoot['getSelection'] = jest.fn(() => {
+    var _a;
     return {
       rangeCount: 1,
       removeAllRanges: jest.fn(),
       getRangeAt: jest.fn().mockReturnValue({
         startContainer: options.textEl.firstChild,
-        endContainer: options.textEl.firstChild,
-        commonAncestorContainer: options.textEl,
+        endContainer: ((_a = options.endContainer) === null || _a === void 0 ? void 0 : _a.firstChild) || options.textEl.firstChild,
+        commonAncestorContainer: options.commonAncestorContainer || options.textEl,
         startOffset: options.startOffset,
         endOffset: options.endOffset,
         intersectsNode: jest.fn().mockReturnValue(true),

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -78,6 +78,10 @@
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
   cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 :host .rich-text-editor-container.disabled:hover, :host .rich-text-editor-container.disabled:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -38,7 +38,6 @@ import { RichTextEditorRequiredRule } from '../../helpers/validator/rules/rich-t
 import { InsertImageController } from './slimmers/controllers/insert-image-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { FocusController } from './slimmers/controllers/focus-controller';
-import { TextNodeColorController } from './slimmers/controllers/text-node-color-controller';
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
@@ -101,7 +100,6 @@ export class VegaRichTextEditor {
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
-    this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
@@ -787,9 +785,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -241,7 +241,7 @@ export class VegaSelectionChip {
       "mutable": false,
       "complexType": {
         "original": "VegaSelectionChipTooltipProps",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"click\" | \"hover\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
         "references": {
           "VegaSelectionChipTooltipProps": {
             "location": "import",

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-range-dropdown-controller.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The `VegaTimePickerRangeDropdownController` class is responsible for managing the dropdown menu for selecting a range of time in the VegaTimePicker component. */
 export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimmer {
   /**
@@ -29,7 +30,7 @@ export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimme
         placement: ['bottom', 'top'],
         matchTargetWidth: true,
       };
-    }, () => 'custom', 'isRangeDropdownShow');
+    }, () => new ClickOutsideOnlyToDismissStrategy(), 'isRangeDropdownShow');
     this.isRangeDropdownShow = false;
     this.rangeDropdownType = 'start';
     /*

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-single-dropdown-controller.js

@@ -8,6 +8,7 @@ import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { LogUtility } from '../../../../utils/log';
 import { pad } from '../../../../utils/date';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The `VegaTimePickerDropdownController` class is responsible for managing the dropdown functionality of the VegaTimePicker component in a TypeScript application. */
 export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimmer {
   /**
@@ -23,7 +24,7 @@ export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimm
       positionRelativeTo: this.positionRelativeTo,
       translocation: { X: 0, Y: 8 },
       placement: ['bottom', 'top'],
-    }), () => 'custom');
+    }), () => new ClickOutsideOnlyToDismissStrategy());
   }
   /**
    * The function initializes a value controller and dropdown source.

package/dist/collection/constants/ui.js

@@ -91,6 +91,8 @@ export const VegaNativeEventName = [
   'clear',
   'periodChange',
   'selectionChange',
+  'suggestionItemClick',
+  'nativeInputChange',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/global/scripts/before-vega-load.js

@@ -23,6 +23,7 @@ import { VegaRTETokenExtension } from '../../components/vega-rich-text-editor/ex
 import { VegaRTELanguageExtension } from '../../components/vega-rich-text-editor/extensions/languages/language-extension';
 import { VegaRTEPresetToolbarItems } from '../../components/vega-rich-text-editor/constants/constant';
 import { VegaRTEFunctionExtension } from '../../components/vega-rich-text-editor/extensions/functions/function-extension';
+import { VegaRTETableExtension } from '../../components/vega-rich-text-editor/extensions/table/table-extension';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -195,6 +196,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELanguageExtension = VegaRTELanguageExtension;
   globalThis.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
   globalThis.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+  globalThis.VegaRTETableExtension = VegaRTETableExtension;
 }
 /**
  * Inject VegaPublicValidationRules to global as a public api

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

@@ -1,4 +1,4 @@
-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, 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, VegaReset]],
@@ -35,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

@@ -107,3 +107,5 @@ 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

@@ -67,3 +67,5 @@ export const VegaInternalDatePickerCalendarUpdatePeriodByUser = new VegaInternal
 export const VegaInternalUpdateVegaInputValue = new VegaInternalEventID('updateVegaInputValue');
 export const VegaInternalFocusVegaInput = new VegaInternalEventID('focusVegaInput');
 export const VegaInternalSetupVegaInputMaskConfig = new VegaInternalEventID('setupVegaInputMaskConfig');
+export const VegaInternalRTEExtensionTableCellsSelectionAnchor = new VegaInternalEventID('rteExtensionTableCellsSelectionAnchor');
+export const VegaInternalRTEExtensionTableCellSelectionChange = new VegaInternalEventID('rteExtensionTableCellSelectionChange');

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 '@heartlandone/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,15 +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) &&
         (this.showConfig.isScreenPosition ||
           findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal'))) {
-        this.hide();
+        this.executeTriggerStrategy(triggerStrategy, e, 'click-outside');
       }
     };
     /* istanbul ignore next */
@@ -112,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);
     };
@@ -122,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;
@@ -236,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 {};
+  }
+}