@globalpayments/vega 2.70.0 → 2.75.1

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

@@ -289,15 +289,4 @@
 
 :host(.disabled) .vega-input-container input {
   color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
-}
-
-.litepicker-backdrop {
-  display: none;
-  background-color: var(--litepicker-mobilefriendly-backdrop-color-bg);
-  opacity: 0.3;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Element, Event, Method, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, Method, Prop, State, Watch } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { DateRequiredRule } from '../../helpers/validator/rules/date-required-rule';
 import { DateRangeRule } from '../../helpers/validator/rules/date-range-rule';
@@ -12,25 +12,22 @@ import { MinAndMaxDateRule } from '../../helpers/validator/rules/min-and-max-dat
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { VegaDatePickerRenderer } from './slimmers/renderers/vega-date-picker-renderer';
-import { VegaDatePickerMobileController } from './slimmers/controllers/vega-date-picker-mobile-controller';
 import { VegaDatePickerSingleInputRenderer } from './slimmers/renderers/vega-date-picker-single-input-renderer';
 import { VegaDatePickerRangeInputRenderer } from './slimmers/renderers/vega-date-picker-range-input-renderer';
-import { VegaDatePickerCalendarController } from './slimmers/controllers/vega-date-picker-calendar-controller';
 import { VegaDatePickerCalendarRenderer } from './slimmers/renderers/vega-date-picker-calendar-renderer';
-import { VegaDatePickerZIndexController } from './slimmers/controllers/vega-date-picker-zindex-controller';
 import { VegaDatePickerValueController } from './slimmers/controllers/vega-date-picker-value-controller';
 import { VegaDatePickerFormatController } from './slimmers/controllers/vega-date-picker-format-controller';
-import { VegaDatePickerElementAppenderController } from './slimmers/controllers/vega-date-picker-element-appender-controller';
 import { VegaDatePickerKeyboardController } from './slimmers/controllers/vega-date-picker-keyboard-controller';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaMonthYearChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaClear, VegaMonthYearChange, } 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';
-import { VegaDatePickerMonthYearDropdownRenderer } from './slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
-import { VegaDatePickerMonthYearChangeEventController } from './slimmers/controllers/vega-date-picker-month-year-change-event-controller';
+import { DeviceType } from '../../types/ui.type';
+import { getDeviceType } from '../../utils/ui';
+import { VegaDatePickerCalendarOpenStateController } from './slimmers/controllers/vega-date-picker-calendar-open-state-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -38,14 +35,11 @@ export class VegaDatePicker {
   constructor() {
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
-    this.vegaDatePickerMobileController = new VegaDatePickerMobileController();
-    this.vegaDatePickerCalendarController = new VegaDatePickerCalendarController();
-    this.vegaDatePickerZIndexController = new VegaDatePickerZIndexController();
+    this.calendarOpenStateController = new VegaDatePickerCalendarOpenStateController();
     this.vegaDatePickerValueController = new VegaDatePickerValueController();
     this.vegaDatePickerFormatController = new VegaDatePickerFormatController('single');
     this.startInputFormatController = new VegaDatePickerFormatController('rangeStart');
     this.endInputFormatController = new VegaDatePickerFormatController('rangeEnd');
-    this.vegaDatePickerElementAppenderController = new VegaDatePickerElementAppenderController();
     this.vegaDatePickerKeyboardController = new VegaDatePickerKeyboardController();
     this.vegaDatePickerRenderer = new VegaDatePickerRenderer();
     this.vegaDatePickerSingleInputRenderer = new VegaDatePickerSingleInputRenderer();
@@ -85,12 +79,12 @@ export class VegaDatePicker {
         ].filter(Boolean);
       },
     });
-    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
-    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
+    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClear, VegaMonthYearChange], () => this.vegaDatePickerCalendarRenderer.getCalendarRef());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
-    this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
-    this.vegaDatePickerMonthYearChangeEventController = new VegaDatePickerMonthYearChangeEventController();
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isCalendarShow = false;
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -211,6 +205,9 @@ export class VegaDatePicker {
      */
     this.isDateDisabled = () => false;
   }
+  watchIsCalendarShow() {
+    methodPlaceholder();
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-date-picker-mode-change}
@@ -262,9 +259,6 @@ export class VegaDatePicker {
   watchDisabled() {
     methodPlaceholder();
   }
-  watchIsDateDisabled() {
-    methodPlaceholder();
-  }
   /**
    * Invoke this method to close the calendar dropdown
    *    associated with the date picker.
@@ -765,6 +759,10 @@ export class VegaDatePicker {
       "defaultValue": "() => false"
     }
   }; }
+  static get states() { return {
+    "isMobileDevice": {},
+    "isCalendarShow": {}
+  }; }
   static get events() { return [{
       "method": "vegaChange",
       "name": "vegaChange",
@@ -902,6 +900,9 @@ export class VegaDatePicker {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "isCalendarShow",
+      "methodName": "watchIsCalendarShow"
+    }, {
       "propName": "mode",
       "methodName": "watchMode"
     }, {
@@ -928,9 +929,6 @@ export class VegaDatePicker {
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
-    }, {
-      "propName": "isDateDisabled",
-      "methodName": "watchIsDateDisabled"
     }]; }
 }
 __decorate([
@@ -941,13 +939,7 @@ __decorate([
 ], VegaDatePicker.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerMobileController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerCalendarController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerZIndexController", void 0);
+], VegaDatePicker.prototype, "calendarOpenStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
@@ -960,9 +952,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "endInputFormatController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerElementAppenderController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
@@ -983,22 +972,16 @@ __decorate([
 ], VegaDatePicker.prototype, "formFieldController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
+], VegaDatePicker.prototype, "changeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "changeEventEmitter", void 0);
+], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "inputEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);

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

@@ -289,7 +289,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
-        "resolved": "{ size?: ResponsiveType<SizeType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<number>; handleClose?: () => boolean; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; handleClose?: () => boolean; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
         "references": {
           "Partial": {
             "location": "global"

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

@@ -4,11 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, methodPlaceholder } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
-import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
-import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -25,13 +22,13 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
    */
   connectedCallback() {
-    this.registerRemoteMethod();
+    methodPlaceholder();
   }
   /**
    * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
    */
   disconnectedCallback() {
-    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget));
+    methodPlaceholder();
   }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
@@ -85,15 +82,6 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
       isScreenPosition: this.isScreenPosition,
     };
   }
-  /**
-   * Register a remote method to update the target element of the dropdown.
-   */
-  registerRemoteMethod() {
-    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget), (target) => {
-      this.target = target;
-      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
-    });
-  }
 }
 __decorate([
   MapToComponentField()

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

@@ -5,6 +5,7 @@ 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 { sanitizeHtmlLabel } from '../../../../utils/sanitize';
 /**
  * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
  * and filtering dropdown items based on a search string.
@@ -50,6 +51,7 @@ export class VegaDropdownSearchController extends VegaSlimmer {
     if (searchResult)
       return searchResult;
     source.forEach((item) => {
+      item.label = sanitizeHtmlLabel(item.label);
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);
         if (filtered.length > 0) {
@@ -84,7 +86,9 @@ export class VegaDropdownSearchController extends VegaSlimmer {
    * then returned.
    */
   replaceLabelBySearchString(label) {
-    return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
+    const escaped = this.searchString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const flags = 'g' + (this.caseSensitive ? '' : 'i');
+    return label.replace(new RegExp(`(${escaped})`, flags), `<b>$1</b>`);
   }
 }
 __decorate([

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

@@ -23,6 +23,10 @@ export class VegaDropdownSourceController extends VegaSlimmer {
   watchSource() {
     this.handleSource();
   }
+  /** watchCaseSensitive */
+  watchCaseSensitive() {
+    this.handleSource();
+  }
   /**
    * The function sets the source for rendering by searching for a formatted source.
    */
@@ -66,3 +70,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
+__decorate([
+  MapToComponentMethod('watchCaseSensitive')
+], VegaDropdownSourceController.prototype, "watchCaseSensitive", null);

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

@@ -45,12 +45,12 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
     return (h(Fragment, null,
       h("div", { class: {
           'vega-dropdown-empty-list': true,
-          'v-hidden': this.sourceForRender.length > 0,
+          'v-hidden': this.isLoading || this.sourceForRender.length > 0,
         } }, this.searchString
-        ? this.translationSlimmer.t('No results found')
+        ? this.translationSlimmer.t(this.searchNoResultsText)
         : this.translationSlimmer.t('No options')),
       h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
-          'v-hidden': this.sourceForRender.length === 0,
+          'v-hidden': this.isLoading || this.sourceForRender.length === 0,
         } },
         h("vega-virtual-scroll", { source: this.sourceForRender, 
           /* eslint-disable-next-line react/jsx-no-bind */
@@ -95,6 +95,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "searchNoResultsText", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderModeController", void 0);

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { sanitizeHtmlLabel } from '../../../../../utils/sanitize';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -60,7 +61,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     }
     else {
       return (h(Fragment, null,
-        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label", ref: this.setLabelRef }),
+        h("span", { class: "vega-dropdown-item-label", innerHTML: sanitizeHtmlLabel(this.label), ref: this.setLabelRef }),
         h("span", { class: "v-hidden" },
           h("slot", null))));
     }
@@ -80,7 +81,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         if (ref) {
           this.tooltipRef = ref;
         }
-      }, text: this.label.replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
+      }, text: sanitizeHtmlLabel(this.label).replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: () => {
         const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;

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

@@ -75,6 +75,10 @@ export class VegaDropdown {
     this.isDropdownShow = false;
     /**
      * Specifies the trigger mode for the dropdown.
+     *   hover: The dropdown is shown/hidden on hover, and listens for global area clicks.
+     *   click: The dropdown is shown/hidden on click, and listens for global area clicks.
+     *   none: The dropdown does not listen for any events; you must control its visibility within the component.
+     *   custom: Custom trigger strategy, more information can refer to https://gethired.atlassian.net/wiki/spaces/VKB/pages/657031171/Trigger+strategy.
      *
      * @vegaVersion 1.3.0
      */
@@ -194,6 +198,7 @@ export class VegaDropdown {
      * Note that the `dynamicOption` property will not work when
      *    this property is set to `false`.
      *
+     * @VegaWarning Set `preserveValueIfNotInSource` to 'true' to get custom filter fully supported when set to 'false'.
      * @vegaVersion 1.24.0
      */
     this.useDefaultFilter = true;
@@ -252,6 +257,12 @@ export class VegaDropdown {
      * @vegaVersion 2.69.0
      */
     this.preserveValueIfNotInSource = false;
+    /**
+     * Specifies the no search results text for the dropdown.
+     *
+     * @vegaVersion 2.74.0
+     */
+    this.searchNoResultsText = 'No results found';
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -271,6 +282,9 @@ export class VegaDropdown {
   watchItemDisplayRule() {
     methodPlaceholder();
   }
+  watchCaseSensitive() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to programmatically display the dropdown menu.
    *
@@ -374,9 +388,14 @@ export class VegaDropdown {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'hover' | 'click' | 'none'",
-        "resolved": "\"click\" | \"hover\" | \"none\"",
-        "references": {}
+        "original": "VegaEATriggerType",
+        "resolved": "\"click\" | \"hover\" | \"none\" | VegaEATriggerStrategy",
+        "references": {
+          "VegaEATriggerType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -385,7 +404,7 @@ export class VegaDropdown {
             "name": "vegaVersion",
             "text": "1.3.0"
           }],
-        "text": "Specifies the trigger mode for the dropdown."
+        "text": "Specifies the trigger mode for the dropdown.\n  hover: The dropdown is shown/hidden on hover, and listens for global area clicks.\n  click: The dropdown is shown/hidden on click, and listens for global area clicks.\n  none: The dropdown does not listen for any events; you must control its visibility within the component.\n  custom: Custom trigger strategy, more information can refer to https://gethired.atlassian.net/wiki/spaces/VKB/pages/657031171/Trigger+strategy."
       },
       "attribute": "trigger",
       "reflect": false,
@@ -749,6 +768,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaWarning",
+            "text": "Set `preserveValueIfNotInSource` to 'true' to get custom filter fully supported when set to 'false'."
+          }, {
             "name": "vegaVersion",
             "text": "1.24.0"
           }],
@@ -963,6 +985,27 @@ export class VegaDropdown {
       "attribute": "preserve-value-if-not-in-source",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "searchNoResultsText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.74.0"
+          }],
+        "text": "Specifies the no search results text for the dropdown."
+      },
+      "attribute": "search-no-results-text",
+      "reflect": false,
+      "defaultValue": "'No results found'"
     }
   }; }
   static get states() { return {
@@ -1401,6 +1444,9 @@ export class VegaDropdown {
     }, {
       "propName": "itemDisplayRule",
       "methodName": "watchItemDisplayRule"
+    }, {
+      "propName": "caseSensitive",
+      "methodName": "watchCaseSensitive"
     }]; }
 }
 __decorate([

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -111,7 +111,7 @@ export class VegaFieldLabel {
       "mutable": false,
       "complexType": {
         "original": "LabelSuffixButtonProps",
-        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"hover\" | \"click\"; }",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
         "references": {
           "LabelSuffixButtonProps": {
             "location": "import",

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-mask-config-controller.js

@@ -11,6 +11,10 @@ import { NumberMaskStrategy, } from '../../../../helpers/formatter/string-format
 import { StringInputFormatterSlimmer } from '../../../../helpers/slimmers/string-input-formatter-slimmer';
 import { CustomFormatterStrategy } from '../../../../helpers/formatter/string-formatter/custom-formatter-strategy';
 import { NumberThousandCommaStrategy } from '../../../../helpers/formatter/string-formatter/number-thousand-comma-strategy';
+import { isArrayEqual } from '../../../../utils/array';
+import { deepEqual } from '../../../../utils/object';
+import { VegaInternalSetupVegaInputMaskConfig } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 /** The `VegaInputMaskConfigController` class in TypeScript manages input mask configuration and string formatting for an input element within a component's shadow root. */
 export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
   constructor() {
@@ -21,7 +25,7 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
      * @returns {Nullable<HTMLInputElement>} the input element
      */
     this.getInputElementRef = () => {
-      return this.inputRef;
+      return this.inputRenderer.getInputRef();
     };
     /**
      * Determining the string format strategy to be applied when the input field trigger is set to 'input'.
@@ -40,6 +44,14 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
       return this.generateMaskStrategy('blur');
     };
   }
+  /** connectedCallback */
+  connectedCallback() {
+    this.initSetupMaskConfigObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeSetupMaskConfigObserver();
+  }
   /**
    * Detect value change and initialize mask formatting
    *
@@ -52,16 +64,32 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
     }
   }
   /**
-   * The function `setupStringFormatter` sets up a string formatter for an input element based on provided mask configurations.
+   * Watch mask changes
    *
-   * @param {HTMLInputElement|null} inputRef - The `inputRef` parameter in the `setupStringFormatter` function is a reference to
-   * an HTML input element. This function sets up a string formatter for the input element based on the
-   * provided configurations. It first assigns the input element reference to `this.inputRef`.
+   * @param {MaskConfigType | MaskConfigType[]} newValue The new mask config value
+   * @param {MaskConfigType | MaskConfigType[]} oldValue The old mask config value
    */
-  setupStringFormatter(inputRef) {
-    this.inputRef = inputRef;
+  watchMaskChange(newValue, oldValue) {
+    if (this.areMaskConfigsEqual(newValue, oldValue))
+      return;
     this.setup();
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-on-type-change}
+   */
+  /* istanbul ignore next */
+  /**
+   * Watch type changes
+   *
+   * @param {InputType} newType The new input type
+   * @param {InputType} oldType The old input type
+   */
+  watchTypeChange(newType, oldType) {
+    if (newType === 'number' || oldType === 'number') {
+      this.setup();
+    }
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-mask-type-thousand-comma-e2e}
@@ -144,6 +172,33 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
   isBlurModeMaskConfig(maskConfig) {
     return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
   }
+  /* istanbul ignore next */
+  /**
+   * Compares two MaskConfigType objects or arrays for equality.
+   *
+   * @param {MaskConfigType | MaskConfigType[]} a The first MaskConfigType object or array to compare.
+   * @param {MaskConfigType | MaskConfigType[]} b The second MaskConfigType object or array to compare.
+   * @returns {boolean} True if the two MaskConfigType objects or arrays are equal, false otherwise.
+   */
+  areMaskConfigsEqual(a, b) {
+    const arrA = Array.isArray(a) ? a : [a];
+    const arrB = Array.isArray(b) ? b : [b];
+    return isArrayEqual(arrA, arrB, true, (a, b) => {
+      return deepEqual(a, b) ? 0 : -1;
+    });
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initSetupMaskConfigObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalSetupVegaInputMaskConfig, this.setup.bind(this));
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeSetupMaskConfigObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalSetupVegaInputMaskConfig);
+  }
 }
 __decorate([
   MapToComponentField()
@@ -154,6 +209,21 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputMaskConfigController.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputMaskConfigController.prototype, "inputRenderer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaInputMaskConfigController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaInputMaskConfigController.prototype, "disconnectedCallback", null);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaInputMaskConfigController.prototype, "watchValue", null);
+__decorate([
+  MapToComponentMethod('watchMaskChange')
+], VegaInputMaskConfigController.prototype, "watchMaskChange", null);
+__decorate([
+  MapToComponentMethod('watchTypeChange')
+], VegaInputMaskConfigController.prototype, "watchTypeChange", null);

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-render-mode-controller.js

@@ -0,0 +1,51 @@
+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';
+/** Controller class for managing the render mode of the VegaInput component. */
+export class VegaInputRenderModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.hasItemsSlot = false;
+    this.hasDropdownSource = false;
+  }
+  /** Sets the render mode based on the presence of the items slot. */
+  connectedCallback() {
+    this.setRenderMode();
+  }
+  /**
+   * Checks if the render mode is source mode.
+   *
+   * @returns {boolean} True if in source render mode, false otherwise.
+   */
+  isSource() {
+    return this.hasDropdownSource;
+  }
+  /**
+   * Checks if the render mode is template mode.
+   *
+   * @returns {boolean} True if in template render mode, false otherwise.
+   */
+  isTemplate() {
+    return this.hasItemsSlot;
+  }
+  /**
+   * Sets the render mode based on the presence of the items slot.
+   */
+  setRenderMode() {
+    this.hasItemsSlot = !!this.host.querySelector('[slot=items]');
+    this.hasDropdownSource = Array.isArray(this.suggestionsDropdownSource);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputRenderModeController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderModeController.prototype, "suggestionsDropdownSource", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaInputRenderModeController.prototype, "connectedCallback", null);