@globalpayments/vega 2.25.0 → 2.27.0

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -28,12 +28,14 @@ import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDatePickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-date-picker/runtime-metrics-payload-definition';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 /**
- * @version 1.3.0
+ * @vegaVersion 1.3.0
  */
 export class VegaDatePicker {
   constructor() {
     this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaDatePickerMobileController = new VegaDatePickerMobileController();
     this.vegaDatePickerCalendarController = new VegaDatePickerCalendarController();
     this.vegaDatePickerZIndexController = new VegaDatePickerZIndexController();
@@ -90,13 +92,13 @@ export class VegaDatePicker {
      *  - Use `single` to allow selecting a single date.
      *  - Use `range` to allow selecting a date range.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.mode = 'single';
     /**
      * Specifies the selected date or date range in the date picker.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = this.mode === 'range' ? ['', ''] : '';
@@ -106,13 +108,13 @@ export class VegaDatePicker {
      * Specifies whether a date or range must be selected for
      *    the date picker to pass form validation.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.required = false;
     /**
      * Specifies the validation status of the date picker component.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
@@ -120,31 +122,31 @@ export class VegaDatePicker {
      * Determines whether automatic validation should be implemented
      *    when a date or range is selected.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.autoValidation = true;
     /**
      * Specifies the desired date format.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.format = 'MM/DD/YYYY';
     /**
      * Specifies the size of the date picker field.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.size = 'default';
     /**
      * Specifies custom validation rules for the date picker field.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.validationRules = [];
     /**
      * Specifies whether to display the clear button when the calendar is shown.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.clearButton = false;
     /**
@@ -153,7 +155,7 @@ export class VegaDatePicker {
      * If set to `true`, keyboards and touch devices will skip
      *    interacting with this element.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.readOnly = false;
     /**
@@ -161,20 +163,20 @@ export class VegaDatePicker {
      *    start date or end date of an already selected date range
      *    without completely resetting the selected range.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.allowRepick = false;
     /**
      * Specifies the configuration for the calendar dropdown
      *    associated with the date picker.
      *
-     * @version 1.5.0
+     * @vegaVersion 1.5.0
      */
     this.dropdownConfig = {};
     /**
      * Specifies whether the date picker field is disabled.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.disabled = false;
   }
@@ -231,7 +233,7 @@ export class VegaDatePicker {
    *    associated with the date picker.
    *
    * @see{module:vega-date-picker-click-call-do-open-close}
-   * @version 1.3.0
+   * @vegaVersion 1.3.0
    */
   /* istanbul ignore next */
   async doClose() {
@@ -242,7 +244,7 @@ export class VegaDatePicker {
    *    associated with the date picker.
    *
    * @see{module:vega-date-picker-click-call-do-open-close}
-   * @version 1.3.0
+   * @vegaVersion 1.3.0
    */
   /* istanbul ignore next */
   async doOpen() {
@@ -277,7 +279,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the selection mode of the date picker.\n\n - Use `single` to allow selecting a single date.\n - Use `range` to allow selecting a date range."
@@ -307,7 +309,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the selected date or date range in the date picker."
@@ -328,7 +330,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the label or title for the date picker field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the date picker field."
@@ -348,7 +350,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Determines whether the date picker field is required.\n\nSpecifies whether a date or range must be selected for\n   the date picker to pass form validation."
@@ -369,7 +371,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the validation status of the date picker component."
@@ -390,7 +392,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Determines whether automatic validation should be implemented\n   when a date or range is selected."
@@ -411,7 +413,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the desired date format."
@@ -432,7 +434,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the size of the date picker field."
@@ -458,7 +460,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies custom validation rules for the date picker field."
@@ -477,7 +479,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the minimum selectable date in the date picker."
@@ -497,7 +499,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the maximum selectable date in the date picker."
@@ -517,7 +519,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the date picker field.\n\nIt indicates the expected format or pattern of the date picker field."
@@ -537,7 +539,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether to display the clear button when the calendar is shown."
@@ -558,7 +560,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the date picker field is set to read-only.\n\nIf set to `true`, keyboards and touch devices will skip\n   interacting with this element."
@@ -579,7 +581,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the user is allowed to change either the\n   start date or end date of an already selected date range\n   without completely resetting the selected range."
@@ -605,7 +607,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.5.0"
           }],
         "text": "Specifies the configuration for the calendar dropdown\n   associated with the date picker."
@@ -624,7 +626,7 @@ export class VegaDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the date picker field is disabled."
@@ -642,7 +644,7 @@ export class VegaDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
@@ -663,7 +665,7 @@ export class VegaDatePicker {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
@@ -692,7 +694,7 @@ export class VegaDatePicker {
             "name": "see",
             "text": "{module :vega-date-picker-click-call-do-open-close}"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }]
       }
@@ -714,7 +716,7 @@ export class VegaDatePicker {
             "name": "see",
             "text": "{module :vega-date-picker-click-call-do-open-close}"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }]
       }
@@ -750,6 +752,9 @@ export class VegaDatePicker {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaDatePicker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerMobileController", void 0);

package/dist/collection/components/vega-dialog/vega-dialog.js

@@ -13,7 +13,7 @@ import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subj
 import { VegaClick, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 1.24.0
+ * @vegaVersion 1.24.0
  */
 export class VegaDialog {
   constructor() {
@@ -34,20 +34,20 @@ export class VegaDialog {
      *
      * Use the value `danger` when the dialog's primary action is destructive.
      *
-     * @version 1.24.0
+     * @vegaVersion 1.24.0
      */
     this.type = 'default';
     /**
      * Determines whether the cancel button should be displayed.
      *
-     * @version 1.24.0
+     * @vegaVersion 1.24.0
      */
     this.showCancel = true;
     /**
      * Represents a dictionary that contains the configuration options
      *    for the modal component used to display the dialog.
      *
-     * @version 1.24.0
+     * @vegaVersion 1.24.0
      */
     this.modalProps = {};
     this.handleCancelBtnClick = (e) => {
@@ -122,7 +122,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Specifies the title of the dialog."
@@ -142,7 +142,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Specifies the text content of the dialog."
@@ -162,7 +162,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Specifies the type of the dialog.\n\nUse the value `danger` when the dialog's primary action is destructive."
@@ -188,7 +188,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Represents a dictionary that contains the configuration options\n   for the action button in the dialog."
@@ -211,7 +211,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Represents the function that will be executed when the\n   user clicks the action button in the dialog."
@@ -234,7 +234,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Represents a dictionary that contains the configuration options\n   for the cancel button in the dialog."
@@ -257,7 +257,7 @@ export class VegaDialog {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Represents the function that will be executed when the user\n   clicks the cancel button in the dialog."
@@ -275,7 +275,7 @@ export class VegaDialog {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Determines whether the cancel button should be displayed."
@@ -307,7 +307,7 @@ export class VegaDialog {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.24.0"
           }],
         "text": "Represents a dictionary that contains the configuration options\n   for the modal component used to display the dialog."

package/dist/collection/components/vega-divider/vega-divider.js

@@ -14,7 +14,7 @@ import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-ob
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 2.10.0
+ * @vegaVersion 2.10.0
  */
 export class VegaDivider {
   constructor() {
@@ -29,13 +29,13 @@ export class VegaDivider {
      * It can be set to either horizontal or vertical,
      *    determining the orientation of the separation.
      *
-     * @version 2.10.0
+     * @vegaVersion 2.10.0
      */
     this.direction = 'horizontal';
     /**
      * Determines the rendering style for the divider.
      *
-     * @version 2.10.0
+     * @vegaVersion 2.10.0
      */
     this.variant = 'primary';
     /**
@@ -44,7 +44,7 @@ export class VegaDivider {
      * It can be set as ResponsiveType or any sizing token
      *    for precise control over layout and appearance.
      *
-     * @version 2.10.0
+     * @vegaVersion 2.10.0
      */
     this.margin = '0';
   }
@@ -85,7 +85,7 @@ export class VegaDivider {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.10.0"
           }],
         "text": "Specifies the direction of the divider.\n\nIt can be set to either horizontal or vertical,\n   determining the orientation of the separation."
@@ -111,7 +111,7 @@ export class VegaDivider {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.10.0"
           }],
         "text": "Determines the rendering style for the divider."
@@ -141,7 +141,7 @@ export class VegaDivider {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.10.0"
           }],
         "text": "Specifies the margin within the divider,\n   offering flexibility in adjusting spacing.\nIt can be set as ResponsiveType or any sizing token\n   for precise control over layout and appearance."

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-remote-invocation-controller.js

@@ -0,0 +1,54 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import { VegaDropdownRenderItemInternalOverridden, VegaDropdownSearchInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+/** Manager remote invocation */
+export class VegaDropdownRemoteInvocationController extends VegaSlimmer {
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.remotePhoneNumberSearchSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaDropdownSearchInternalOverridden);
+    this.remotePhoneNumberItemRenderSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaDropdownRenderItemInternalOverridden);
+  }
+  /**
+   *  Call the search function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote search function
+   * @returns {VegaDropdownSourceItem[]} - searched items.
+   */
+  callRemoteSearch(...args) {
+    if (this.remotePhoneNumberSearchSubject) {
+      const searchResult = remoteInvocationRegistry.call(this.remotePhoneNumberSearchSubject, ...args);
+      if (searchResult)
+        return searchResult;
+    }
+    return null;
+  }
+  /**
+   * Call the item render function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote item render function
+   * @returns {HTMLElement} - rendered item
+   */
+  callRemoteItemRender(...args) {
+    if (this.remotePhoneNumberItemRenderSubject) {
+      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberItemRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownRemoteInvocationController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownRemoteInvocationController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-search-controller.js

@@ -5,8 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
-import { DROPDOWN_SEARCH_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 /**
  * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
  * and filtering dropdown items based on a search string.
@@ -48,10 +46,9 @@ export class VegaDropdownSearchController extends VegaSlimmer {
    * @returns {VegaDropdownSourceItem[]} an array of VegaDropdownSourceItem objects.
    */
   searchSource(source, result) {
-    const searchResult = staticRemoteInvocationCallRegistry.call(DROPDOWN_SEARCH_INTERNAL_OVERRIDEN, source, this.searchString, this.caseSensitive);
-    if (searchResult) {
+    const searchResult = this.remoteInvocationController.callRemoteSearch(source, this.searchString, this.caseSensitive);
+    if (searchResult)
       return searchResult;
-    }
     source.forEach((item) => {
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);
@@ -90,6 +87,9 @@ export class VegaDropdownSearchController extends VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
@@ -102,3 +102,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "remoteInvocationController", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-item-level-renderer.js

@@ -6,14 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
-import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 export class VegaDropdownItemLevelRenderer extends VegaSlimmer {
   render(item, fixHeight) {
-    const renderResult = staticRemoteInvocationCallRegistry.call(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, item, fixHeight);
-    if (renderResult) {
+    const renderResult = this.remoteInvocationController.callRemoteItemRender(item, fixHeight);
+    if (renderResult)
       return renderResult;
-    }
     return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
@@ -35,3 +32,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "remoteInvocationController", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-list-renderer.js

@@ -46,7 +46,9 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
       h("div", { class: {
           'vega-dropdown-empty-list': true,
           'v-hidden': this.sourceForRender.length > 0,
-        } }, this.searchString ? 'No results found' : 'No options'),
+        } }, this.searchString
+        ? this.translationSlimmer.t('No results found')
+        : this.translationSlimmer.t('No options')),
       h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
           'v-hidden': this.sourceForRender.length === 0,
         } },
@@ -96,3 +98,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-search-renderer.js

@@ -19,7 +19,7 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
     this.onInputSearch = (node) => {
       this.searchInputRef = node;
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
-        this.search(input.detail);
+        this.searchTriggerBy === 'input' && this.search(input.detail);
       });
     };
     this.search = (input) => {
@@ -48,7 +48,18 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
   }
   render() {
     return (this.searchable && (h("div", { class: "vega-dropdown-search" },
-      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
+      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
+         */
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onKeyDown: 
+        /* istanbul ignore next */ (e) => {
+          if (this.searchTriggerBy === 'enter' && e.code === 'Enter') {
+            this.search(this.searchInputRef.value);
+          }
+        } }))));
   }
 }
 __decorate([
@@ -75,6 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerBy", void 0);
 __decorate([
   MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);