@globalpayments/vega 2.69.1 → 2.73.0

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-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-value-controller.js

@@ -0,0 +1,79 @@
+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 { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { VegaInternalUpdateVegaInputValue } 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';
+/** Value controller */
+export class VegaInputValueController extends VegaSlimmer {
+  /** connectedCallback */
+  connectedCallback() {
+    this.initValueUpdateObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeValueUpdateObserver();
+  }
+  /**
+   * Watch value changes
+   *
+   * @param {string} value The new value
+   */
+  watchValue(value) {
+    this.changeEventEmitter.emit(value);
+    const inputRef = this.inputRenderer.getInputRef();
+    if (inputRef.value !== this.value) {
+      inputRef.value = this.value;
+    }
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initValueUpdateObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalUpdateVegaInputValue, this.setValue.bind(this));
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeValueUpdateObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalUpdateVegaInputValue);
+  }
+  /**
+   * Set value
+   *
+   * @param {string} newValue The new value
+   */
+  setValue(newValue) {
+    this.value = newValue;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputValueController.prototype, "inputRenderer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaInputValueController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaInputValueController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], VegaInputValueController.prototype, "watchValue", null);

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-container-renderer.js

@@ -0,0 +1,100 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalFocusVegaInput, VegaInternalUpdateVegaInputValue, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+export class VegaInputInputContainerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderPrefixText = () => {
+      return this.prefixText && h("div", { class: "prefix-text" }, this.prefixText);
+    };
+    this.renderSuffixText = () => {
+      return this.suffixText && h("div", { class: "suffix-text" }, this.suffixText);
+    };
+    this.onClickClearIcon = () => {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalUpdateVegaInputValue), '');
+    };
+    this.isClearIconVisible = () => {
+      return !this.disabled && Boolean(this.value);
+    };
+    this.onClearInputFocus = () => {
+      this.inputContainerRef.classList.add('no-focus');
+    };
+    this.onClearInputBlur = () => {
+      this.inputContainerRef.classList.remove('no-focus');
+    };
+    this.onContainerClick = () => {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalFocusVegaInput), {});
+    };
+  }
+  getInputContainerRef() {
+    return this.inputContainerRef;
+  }
+  render() {
+    return (h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: {
+        'vega-input-container': true,
+        'with-value': !!this.value,
+        [`vega-input-size-${this.size}`]: true,
+        'vega-input-disabled': this.disabled,
+        'compact-input-width': this.isCompactInputWidth,
+      }, onClick: this.onContainerClick, "aria-label": "input container", "aria-disabled": `${this.disabled}`, role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      this.prefixSlotRenderer.render(),
+      this.renderPrefixText(),
+      this.inputRenderer.render(),
+      this.renderSuffixText(),
+      this.type === 'password'
+        ? this.passwordEyeRenderer.render()
+        : this.showClearIcon && this.renderClearIcon()));
+  }
+  renderClearIcon() {
+    return (h("div", { class: {
+        'vega-input-clear-icon': true,
+        'invisible': !this.isClearIconVisible(),
+      }, tabIndex: !this.disabled ? 0 : -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), onFocusin: this.onClearInputFocus, onFocusout: this.onClearInputBlur },
+      h("vega-icon", { icon: "close" })));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "showClearIcon", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "prefixText", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "suffixText", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "isCompactInputWidth", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "prefixSlotRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "passwordEyeRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputContainerRenderer.prototype, "inputRenderer", void 0);