@globalpayments/vega 2.70.0 → 2.73.0

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

@@ -0,0 +1,178 @@
+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, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalFocusVegaInput, VegaInternalSetupVegaInputMaskConfig, 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';
+export class VegaInputInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.setInputRef = (inputRef) => {
+      if (inputRef && this.inputRef !== inputRef) {
+        this.inputRef = inputRef;
+        this.notifySetupMaskConfig();
+      }
+    };
+    this.handleInputFocus = (e) => {
+      this.focusEventEmitter.emit(undefined, e);
+    };
+    this.handleInputBlur = (e) => {
+      this.blurEventEmitter.emit(undefined, e);
+    };
+    this.handleInputPaste = (e) => {
+      const event = this.pasteEventEmitter.emit(e.clipboardData);
+      /* istanbul ignore next */
+      if (event.defaultPrevented) {
+        e.preventDefault();
+      }
+    };
+    /**
+     * Handles input event and updates the value based on a specified trigger.
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-on-value-input}
+     */
+    /* istanbul ignore next */
+    this.onInputHandler = () => {
+      if (this.valueUpdateTrigger !== 'change') {
+        this.notifyInputValueChange();
+      }
+    };
+    /**
+     * Handles input change events and updates the value based on a specified trigger.
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-on-value-change}
+     */
+    /* istanbul ignore next */
+    this.inputChangeHandler = () => {
+      if (this.valueUpdateTrigger === 'change') {
+        this.notifyInputValueChange();
+      }
+    };
+  }
+  connectedCallback() {
+    this.initInputFocusObserver();
+  }
+  disconnectedCallback() {
+    this.removeInputFocusObserver();
+  }
+  doFocus() {
+    this.focusInput();
+  }
+  doBlur() {
+    this.inputRef.blur();
+  }
+  getInputRef() {
+    return this.inputRef;
+  }
+  render() {
+    return (h("div", { class: "vega-input-input" },
+      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onBlur: (e) => this.handleInputBlur(e), 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onFocus: (e) => this.handleInputFocus(e), onChange: this.inputChangeHandler, onInput: this.onInputHandler, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onPaste: (e) => this.handleInputPaste(e) }, this.copyPasteController.getCopyPasteProps()))));
+  }
+  getInputType() {
+    switch (this.type) {
+      case 'number':
+        return 'text';
+      case 'password':
+        return this.isPasswordDisplay ? 'text' : 'password';
+      default:
+        return this.type;
+    }
+  }
+  /** Notify to update current period */
+  notifyInputValueChange() {
+    changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalUpdateVegaInputValue), this.inputRef.value);
+  }
+  notifySetupMaskConfig() {
+    changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalSetupVegaInputMaskConfig), {});
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initInputFocusObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalFocusVegaInput, this.focusInput.bind(this));
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeInputFocusObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalFocusVegaInput);
+  }
+  focusInput() {
+    this.inputRef.focus();
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "name", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "autocomplete", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "inputmode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "placeholder", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "minLength", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "maxLength", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "isPasswordDisplay", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "valueUpdateTrigger", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "focusEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "blurEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "pasteEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "copyPasteController", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaInputInputRenderer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaInputInputRenderer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('doFocus')
+], VegaInputInputRenderer.prototype, "doFocus", null);
+__decorate([
+  MapToComponentMethod('doBlur')
+], VegaInputInputRenderer.prototype, "doBlur", null);

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

@@ -0,0 +1,72 @@
+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 { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaLabelButtonClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalFocusVegaInput } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+export class VegaInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleLabelButtonClick = () => {
+      this.labelButtonClickEventEmitter.emit();
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-focus-by-label}
+     */
+    /* istanbul ignore next */
+    this.handleLabelClick = () => {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalFocusVegaInput), {});
+    };
+  }
+  render() {
+    return (h("div", { class: "vega-input", part: "container-wrapper" },
+      this.renderLabelDom(),
+      this.inputContainerRenderer.render(),
+      this.renderHintDom()));
+  }
+  renderLabelDom() {
+    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, this.handleLabelClick);
+      } }));
+  }
+  renderHintDom() {
+    return this.hint !== '' ? (h("div", { class: "vega-hint" },
+      h("label", null, this.hint))) : null;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "hint", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "labelSuffixButtonProps", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "labelSuffixButtonConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "labelButtonClickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "inputContainerRenderer", void 0);

package/dist/collection/components/vega-input/vega-input.css

@@ -402,4 +402,12 @@ input[type=password]::-ms-reveal {
 }
 .vega-input-container .password-eye-button::part(button):hover {
   background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
+}
+
+@supports (-webkit-touch-callout: none) {
+  :host([data-vega-form=pageSelectorMobile_goTo]) .vega-input-container input {
+    box-sizing: border-box;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 }

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

@@ -12,26 +12,24 @@ import { MinNumberRule } from '../../helpers/validator/rules/min-number-rule';
 import { MinStringLengthRule } from '../../helpers/validator/rules/min-string-length-rule';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaPaste, } from '../../helpers/event-manager/event-id/vega-event-id';
-import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
-import ChangeManager from '../../helpers/change-manager/change-manager';
 import { VegaInputCopyPasteController } from './slimmers/controllers/vega-input-copy-paste-controller';
 import { VegaInputPrefixSlotRenderer } from './slimmers/renderers/vega-input-prefix-slot-renderer';
 import { VegaInputMaskConfigController } from './slimmers/controllers/vega-input-mask-config-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input/runtime-metrics-payload-definition';
-import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaInputCompactWidthController } from './slimmers/controllers/vega-input-compact-width-controller';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaInputStateController } from './slimmers/controllers/vega-input-state-controller';
-import { isArrayEqual } from '../../utils/array';
-import { deepEqual } from '../../utils/object';
 import { VegaInputPasswordEyeRenderer } from './slimmers/renderers/vega-input-password-eye-renderer';
+import { VegaInputInputContainerRenderer } from './slimmers/renderers/vega-input-input-container-renderer';
+import { VegaInputInputRenderer } from './slimmers/renderers/vega-input-input-renderer';
+import { VegaInputRenderer } from './slimmers/renderers/vega-input-renderer';
+import { VegaInputValueController } from './slimmers/controllers/vega-input-value-controller';
 /**
  * @vegaVersion 1.0.5
  */
@@ -72,8 +70,8 @@ export class VegaInput {
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
-      inputContainerGetter: () => this.inputContainerRef,
-      touchableAreaGetter: () => [this.inputRef],
+      inputContainerGetter: () => this.inputContainerRenderer.getInputContainerRef(),
+      touchableAreaGetter: () => [this.inputRenderer.getInputRef()],
     });
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
       /*
@@ -86,7 +84,11 @@ export class VegaInput {
     this.compactWidthController = new VegaInputCompactWidthController();
     this.stateController = new VegaInputStateController();
     this.maskConfigController = new VegaInputMaskConfigController();
+    this.valueController = new VegaInputValueController();
     this.prefixSlotRenderer = new VegaInputPrefixSlotRenderer();
+    this.renderer = new VegaInputRenderer();
+    this.inputContainerRenderer = new VegaInputInputContainerRenderer();
+    this.inputRenderer = new VegaInputInputRenderer();
     this.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
     this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
     this.blurEventEmitter = createEventEmitSlimmer(VegaInput, VegaBlur);
@@ -263,71 +265,6 @@ export class VegaInput {
      * @vegaVersion 2.1.0
      */
     this.disableCopyPaste = false;
-    this.focusInput = () => {
-      this.inputRef.focus();
-    };
-    this.setInputRef = (inputRef) => {
-      if (inputRef && this.inputRef !== inputRef) {
-        this.inputRef = inputRef;
-        this.maskConfigController.setupStringFormatter(inputRef);
-      }
-    };
-    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.handleInputFocus = (e) => {
-      this.focusEventEmitter.emit(undefined, e);
-    };
-    this.handleInputBlur = (e) => {
-      this.blurEventEmitter.emit(undefined, e);
-    };
-    this.handleInputPaste = (e) => {
-      const event = this.pasteEventEmitter.emit(e.clipboardData);
-      /* istanbul ignore next */
-      if (event.defaultPrevented) {
-        e.preventDefault();
-      }
-    };
-    this.onClickClearIcon = () => {
-      this.value = '';
-    };
-    this.isClearIconVisible = () => {
-      return !this.disabled && Boolean(this.value);
-    };
-    this.onClearInputFocus = () => {
-      this.inputContainerRef.classList.add('no-focus');
-    };
-    this.onClearInputBlur = () => {
-      this.inputContainerRef.classList.remove('no-focus');
-    };
-    /**
-     * Handles input event and updates the value based on a specified trigger.
-     * The below method is e2e-test covered in
-     * @see{module:vega-input-on-value-input}
-     */
-    /* istanbul ignore next */
-    this.onInputHandler = (e) => {
-      if (this.valueUpdateTrigger !== 'change') {
-        this.value = e.target.value;
-      }
-    };
-    /**
-     * Handles input change events and updates the value based on a specified trigger.
-     * The below method is e2e-test covered in
-     * @see{module:vega-input-on-value-change}
-     */
-    /* istanbul ignore next */
-    this.inputChangeHandler = (e) => {
-      if (this.valueUpdateTrigger === 'change') {
-        this.value = e.target.value;
-      }
-    };
-    this.handleLabelButtonClick = () => {
-      this.labelButtonClickEventEmitter.emit();
-    };
   }
   watchSuffixText() {
     methodPlaceholder();
@@ -344,14 +281,7 @@ export class VegaInput {
    *    when the value changes, which needs to be updated manually.
    */
   watchValue(value) {
-    this.changeEventEmitter.emit(value);
-    if (this.inputRef.value !== this.value) {
-      this.inputRef.value = this.value;
-    }
-    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
-      host: this.host,
-      detail: this.value,
-    });
+    methodPlaceholder(value);
   }
   /**
    * The below method is e2e-test covered in
@@ -359,9 +289,7 @@ export class VegaInput {
    */
   /* istanbul ignore next */
   watchTypeChange(newType, oldType) {
-    if (newType === 'number' || oldType === 'number') {
-      this.maskConfigController.setupStringFormatter(this.inputRef);
-    }
+    methodPlaceholder(newType, oldType);
   }
   watchValidationRules() {
     methodPlaceholder();
@@ -374,9 +302,7 @@ export class VegaInput {
    */
   /* istanbul ignore next */
   watchMaskChange(newValue, oldValue) {
-    if (this.areMaskConfigsEqual(newValue, oldValue))
-      return;
-    this.maskConfigController.setupStringFormatter(this.inputRef);
+    methodPlaceholder(newValue, oldValue);
   }
   /**
    * Invoke this method to focus the current input.
@@ -384,7 +310,7 @@ export class VegaInput {
    * @vegaVersion 1.12.0
    */
   async doFocus() {
-    this.focusInput();
+    methodPlaceholder();
   }
   /**
    * Invoke this method to blur the current input.
@@ -392,79 +318,11 @@ export class VegaInput {
    * @vegaVersion 1.12.0
    */
   async doBlur() {
-    this.inputRef.blur();
+    methodPlaceholder();
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(h(Host, { class: this.type === 'hidden' ? 'vega-input-hidden' : 'vega-input-inline-block' }, this.groupDom()), this.host);
-  }
-  containerDom() {
-    return (h("div", { class: "vega-input-input" },
-      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onBlur: (e) => this.handleInputBlur(e), 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onFocus: (e) => this.handleInputFocus(e), onChange: this.inputChangeHandler, onInput: this.onInputHandler, 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onPaste: (e) => this.handleInputPaste(e) }, this.copyPasteController.getCopyPasteProps()))));
-  }
-  getInputType() {
-    switch (this.type) {
-      case 'number':
-        return 'text';
-      case 'password':
-        return this.isPasswordDisplay ? 'text' : 'password';
-      default:
-        return this.type;
-    }
-  }
-  groupDom() {
-    let containerClass = 'vega-input-container';
-    if (this.value) {
-      containerClass += ' with-value';
-    }
-    containerClass += this.size === 'small' ? ' vega-input-size-small' : ' vega-input-size-default';
-    containerClass += this.disabled ? ' vega-input-disabled' : '';
-    if (this.isCompactInputWidth)
-      containerClass += ' compact-input-width';
-    return (h("div", { class: "vega-input", part: "container-wrapper" },
-      this.renderLabelDom(),
-      h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: containerClass, onClick: this.focusInput, "aria-label": "input container", "aria-disabled": `${this.disabled}`, role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-        this.prefixSlotRenderer.render(),
-        this.renderPrefixText(),
-        this.containerDom(),
-        this.renderSuffixText(),
-        this.type === 'password'
-          ? this.passwordEyeRenderer.render()
-          : this.showClearIcon && this.renderClearIcon()),
-      this.renderHintDom()));
-  }
-  renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
-      } }));
-  }
-  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" })));
-  }
-  renderHintDom() {
-    return this.hint !== '' ? (h("div", { class: "vega-hint" },
-      h("label", null, this.hint))) : null;
-  }
-  /**
-   * Compares two MaskConfigType objects or arrays for equality.
-   */
-  /* istanbul ignore next */
-  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;
-    });
+    return sanitizeVegaComponent(h(Host, { class: this.type === 'hidden' ? 'vega-input-hidden' : 'vega-input-inline-block' }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-input"; }
   static get encapsulation() { return "shadow"; }
@@ -675,6 +533,26 @@ export class VegaInput {
       "reflect": false,
       "defaultValue": "'off'"
     },
+    "inputmode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text' | 'numeric'",
+        "resolved": "\"numeric\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.71.0"
+          }],
+        "text": "A hint to the browser for which keyboard to display.\nPlease refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode for more details."
+      },
+      "attribute": "inputmode",
+      "reflect": false
+    },
     "prefixIcon": {
       "type": "string",
       "mutable": false,
@@ -1330,9 +1208,21 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "maskConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "valueController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "prefixSlotRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "inputContainerRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "inputRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "changeEventEmitter", void 0);

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

@@ -94,7 +94,7 @@ export class VegaInputPasscodeRenderer extends VegaSlimmer {
     return this.inputPasscodeContainerRef;
   }
   render() {
-    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, tabIndex: index !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (ref) => {
+    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, tabIndex: index !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
         this.vegaInputRefs[index] = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, this.handleVegaFocus(index));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleVegaBlur(index));
@@ -155,6 +155,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputPasscodeRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "inputType", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputPasscodeRenderer.prototype, "vegaInputValues", void 0);

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

@@ -39,7 +39,7 @@ export class PhoneNumberInputRenderer extends VegaSlimmer {
       h("vega-input", { size: this.size, disabled: this.disabled, placeholder: this.placeholder, ref: (ref) => {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleInputChange.bind(this));
-        }, value: this.phoneNumberInputValue, maskConfig: {
+        }, inputmode: "numeric", value: this.phoneNumberInputValue, maskConfig: {
           type: 'custom',
           strategy: () => new VegaPhoneNumberInputStrategy(this.phoneNumberMaskFormatter),
         } })));

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -566,7 +566,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; matchContainerHeight?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; resettable?: boolean; preserveValueIfNotInSource?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-layout-controller.js

@@ -9,6 +9,7 @@ import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map
 import { DefaultModalSize } from '../../../../constants/ui';
 import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import { parseToPixelString } from '../../../../utils/pixel';
 /**
  * Modal layout controller
  */
@@ -90,8 +91,8 @@ export class VegaModalLayoutController extends VegaSlimmer {
    */
   setContentMaxHeight() {
     const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
-    if (maxHeight) {
-      this.renderer.getModalContentRef().style.maxHeight = `${maxHeight}px`;
+    if (typeof maxHeight === 'number' || typeof maxHeight === 'string') {
+      this.renderer.getModalContentRef().style.maxHeight = parseToPixelString(maxHeight);
     }
   }
   /*

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

@@ -457,11 +457,11 @@ export class VegaModal {
       "defaultValue": "'size-24'"
     },
     "contentMaxHeight": {
-      "type": "number",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "ResponsiveType<number>",
-        "resolved": "number | { S?: number; M?: number; L?: number; XL?: number; default?: number; }",
+        "original": "ResponsiveType<number | string>",
+        "resolved": "number | string | { S?: string | number; M?: string | number; L?: string | number; XL?: string | number; default?: string | number; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -476,7 +476,7 @@ export class VegaModal {
             "name": "vegaVersion",
             "text": "1.4.0"
           }],
-        "text": "Defines the maximum height of the content within\n   the modal element."
+        "text": "Defines the maximum height of the content within\n   the modal element.\n\nIt accepts values in numeric, string and ResponsiveType.\nNumeric values represent maximum height of the content in pixels\n   (e.g., 100 translates to 100px).\nString values allow the use of CSS units like 'vh' or 'calc' expressions.\n   (e.g., '100vh' or 'calc(100vh - 20px)')."
       },
       "attribute": "content-max-height",
       "reflect": false