@heartlandone/vega-sandbox-pr-1520-2a966c88373d88d647fdbb391f3ef2dfaa8265c5 2.27.0

package/dist/esm/vega-input.entry.js

@@ -0,0 +1,1011 @@
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-187f71d1.js';
+import { M as MinNumberRule, a as MaxNumberRule } from './min-number-rule-8f643dbd.js';
+import { M as MinStringLengthRule, a as MaxStringLengthRule } from './min-string-length-rule-c6a69eeb.js';
+import { R as RequiredFieldRule } from './required-field-rule-5da360cc.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { C as ComponentLoadRequired } from './component-load-required-ce710ef5.js';
+import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { s as slotPlaceholder } from './placeholder-bf562081.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-edbaaf7c.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-eee9fd41.js';
+import { e as VegaChange, x as VegaFocus, y as VegaBlur, o as VegaLabelButtonClick } from './vega-event-id-7465a011.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6987a80b.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { S as StringInputFormatterSlimmer, a as StringMaskStrategy } from './string-input-formatter-slimmer-bfe3f5e5.js';
+import { M as isNonNullable } from './type-guard-63caf78b.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-9461cd67.js';
+import './number-e2519d1c.js';
+import './string-be824360.js';
+import './observer-3959f9dd.js';
+import './ui-0132dbb5.js';
+import './create-public-api-runtime-metrics-slimmer-928ad7f0.js';
+import './dynamic-slimmer-90b8af32.js';
+import './vega-internal-event-id-7e05cf4a.js';
+import './translation-0fa7cf77.js';
+import './page-resize-observer-slimmer-994c1e1b.js';
+import './breakpoints-36a3ed69.js';
+import './ui-8424715a.js';
+import './mutation-observer-slimmer-6cef9549.js';
+import './mutation-observer-filters-9086b5cc.js';
+import './array-506b88b9.js';
+import './internal-vega-event-manager-722461c1.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+
+/**
+ * This email regex from https://stackoverflow.com/a/201378
+ * Added valid complete email by this ticket https://gethired.atlassian.net/browse/VD-2616
+ */
+const EMAIL_VALIDATION_REGEX = 
+// eslint-disable-next-line no-control-regex
+/^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/;
+
+/**
+ * This class is a rule that checks if the input is a valid email address
+ *
+ * @implements {FormFieldValidationRule<string>}
+ */
+class EmailFieldRule {
+  /**
+   * It checks if the input is a valid email address.
+   *
+   * @param {string} input - string
+   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
+   * @throws {Error} if input is unable to evaluate
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Unexpected type of input: ${typeof input}: ${input}`);
+    }
+    const isValid = EMAIL_VALIDATION_REGEX.test(input.toLowerCase());
+    return {
+      isValid: isValid,
+      message: isValid ? '' : 'Please enter the correct email format.',
+    };
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * This function returns true if the input is a string with a length greater than zero, otherwise it returns false.
+   *
+   * @param {unknown} input - The input to be validated.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    return typeof input === 'string' && input.length > 0;
+  }
+}
+
+var __decorate$3 = (undefined && undefined.__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;
+};
+/** The `VegaInputCopyPasteController` class extends `VegaSlimmer` and provides methods to handle copy, cut, and paste events based on the `disableCopyPaste` property of a `VegaInput` component. */
+class VegaInputCopyPasteController extends VegaSlimmer {
+  /**
+   * The function `getCopyPasteProps` returns an object with event handlers that prevent default behavior for copy, cut, and paste events if `disableCopyPaste` is true.
+   *
+   * @returns {Record<string, (e: ClipboardEvent) => void>} If `this.disableCopyPaste` is true, an object with `onCopy`, `onCut`, and `onPaste`
+   * properties is being returned. Each property is a function that takes a `ClipboardEvent` parameter
+   * and prevents the default behavior of the event. If `this.disableCopyPaste` is false, an empty
+   * object is being returned.
+   */
+  getCopyPasteProps() {
+    if (this.disableCopyPaste) {
+      return {
+        onCopy: this.preventDefault,
+        onCut: this.preventDefault,
+        onPaste: this.preventDefault,
+      };
+    }
+    else {
+      return {};
+    }
+  }
+  /**
+   * The `preventDefault` function in TypeScript prevents the default behavior of a ClipboardEvent.
+   *
+   * @param {ClipboardEvent} e - The parameter "e" in the function "preventDefault" is of type
+   * ClipboardEvent. This parameter represents the event object that is passed to the function when it
+   * is called.
+   */
+  preventDefault(e) {
+    e.preventDefault();
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaInputCopyPasteController.prototype, "disableCopyPaste", void 0);
+
+var __decorate$2 = (undefined && undefined.__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;
+};
+/** The `VegaInputPrefixSlotRenderer` class in TypeScript React renders a prefix icon for a VegaInput component, checking for the existence of a specific slot named "prefix-icon" in the host element. */
+class VegaInputPrefixSlotRenderer extends VegaSlimmer {
+  render() {
+    const hasSlotContent = this.hasPrefixSlot();
+    if (this.prefixIcon || hasSlotContent) {
+      return (h("div", { class: {
+          'vega-input-prefix': true,
+          'vega-input-prefix-slot': hasSlotContent,
+        }, part: "prefix-icon-container" },
+        this.prefixIcon && !hasSlotContent ? (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })) : null,
+        h("slot", { name: "prefix-icon" })));
+    }
+  }
+  /**
+   * The function checks if a specific slot named "prefix-icon" exists in the host element.
+   *
+   * @returns {boolean} The `hasPrefixSlot()` method returns a boolean value - `true` if the host element has a
+   * child element with the slot attribute set to "prefix-icon", and `false` otherwise.
+   */
+  hasPrefixSlot() {
+    return this.host.querySelector('[slot="prefix-icon"]') ? true : false;
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaInputPrefixSlotRenderer.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaInputPrefixSlotRenderer.prototype, "prefixIcon", void 0);
+
+/**
+ * A class for formatting string with the "," as the thousand separator
+ *
+ * @augments StringFormatStrategy
+ */
+class ThousandCommaStrategy {
+  /**
+   * If the input is a number, format it as a string
+   *
+   * @param {string} input - string
+   * @returns {string} The input string, but with commas as thousands separator.
+   */
+  format(input) {
+    if (!input.length)
+      return input;
+    const numValue = Number(input.replace(/,/g, ''));
+    if (!isNaN(numValue) && numValue <= Number.MAX_SAFE_INTEGER) {
+      return numValue.toLocaleString('en-US');
+    }
+    return input;
+  }
+  /**
+   * Get the position of caret
+   *
+   * @param {string} input - The input string
+   * @param {number} caretPosition - The current caret position
+   * @returns {number} The new position of caret
+   */
+  calculateCaretPosition(input, caretPosition) {
+    const formatInput = this.format(input);
+    const oldFrontInput = input.substring(0, caretPosition);
+    const newFrontInput = formatInput.substring(0, caretPosition);
+    const oldFrontCommaCount = (oldFrontInput.match(/,/g) || []).length;
+    const newFrontCommaCount = (newFrontInput.match(/,/g) || []).length;
+    return caretPosition + (newFrontCommaCount - oldFrontCommaCount);
+  }
+}
+
+/**
+ * A class for formatting number with the given mask format
+ */
+class NumberMaskStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {NumberMaskConfig} maskConfig - MaskConfig
+   */
+  constructor(maskConfig) {
+    this.maskConfig = { allowNegative: true };
+    /**
+     * if allow negative, will skip '-', e.g. when input '-' -> '-1.2'
+     * if precision is not null, then user can fill input with decimal places, e.g. when input '1.' -> '1.2'
+     *
+     * @param {string} input - input number
+     * @returns {boolean} need skip if return true, otherwise false
+     */
+    this.skipFormat = (input) => {
+      return ((this.maskConfig.allowNegative && input === '-') ||
+        (this.maskConfig.precision != undefined &&
+          this.maskConfig.precision > 0 &&
+          input.split('.').length - 1 === 1 &&
+          input.endsWith('.') &&
+          !input.startsWith('.')));
+    };
+    this.maskConfig = Object.assign(Object.assign({}, this.maskConfig), maskConfig);
+    this.mask = new RegExp(this.getRegExp());
+  }
+  /**
+   * Given a number string, it replaces the mask with the matched input value
+   *
+   * @param {string} input - input number
+   * @returns {string} The formatted number string.
+   */
+  format(input) {
+    if (this.skipFormat(input)) {
+      return input;
+    }
+    const resultStringBuilder = [...input];
+    for (let i = input.length - 1; i >= 0; i--) {
+      const value = resultStringBuilder.join('');
+      if (this.inputNeedFormat(value)) {
+        resultStringBuilder.pop();
+      }
+    }
+    return resultStringBuilder.join('');
+  }
+  /**
+   * Whether the input string need delete the latest char
+   *
+   * @param {string} value - the input value
+   * @returns {boolean} return true if the value need mask format. otherwise false
+   */
+  inputNeedFormat(value) {
+    return !this.mask.test(value);
+  }
+  /**
+   * Get the number RegExp
+   *
+   * @returns {string} - The number regExp
+   */
+  getRegExp() {
+    const negativeMask = this.maskConfig.allowNegative ? `(\\-)?` : '';
+    let precisionMask;
+    if (this.maskConfig.precision === 0) {
+      precisionMask = `^${negativeMask}(0|[1-9][0-9]*)$`;
+    }
+    else if (this.maskConfig.precision && this.maskConfig.precision > 0) {
+      precisionMask = `^${negativeMask}(0|0\\.\\d{1,${this.maskConfig.precision}}|[1-9][0-9]*(\\.\\d{1,${this.maskConfig.precision}})?)$`;
+    }
+    else {
+      precisionMask = `^${negativeMask}(0|0\\.\\d*|[1-9][0-9]*(\\.\\d*)?)$`;
+    }
+    return precisionMask;
+  }
+}
+
+/**
+ * Used to format a string using a custom formatter.
+ */
+class CustomFormatterStrategy {
+  /**
+   * The constructor function takes a CustomStringFormatter parameter and assigns it to the formatter
+   * property of the class.
+   *
+   * @param {CustomStringFormatter} formatter - The `formatter` parameter is an instance of a custom
+   * string formatter class that you are passing to the constructor of the class. This custom string
+   * formatter class likely contains methods or properties related to formatting strings in a specific
+   * way according to your requirements.
+   * @param {boolean} resetCaretPosition - The caret position should update to the last or keep the current position after format
+   */
+  constructor(formatter, resetCaretPosition = false) {
+    this.resetCaretPositionFlag = false;
+    this.formatter = formatter;
+    this.resetCaretPositionFlag = resetCaretPosition;
+  }
+  /**
+   * The format function in TypeScript takes a string input and returns the formatted output using a
+   * formatter method.
+   *
+   * @param {string} input - The `format` function takes a string input and passes it to the `formatter`
+   * function to format it.
+   * @returns {string} The `format` function is returning the result of calling the `formatter` function with the
+   * `input` string as its argument.
+   */
+  format(input) {
+    return this.formatter(input);
+  }
+  /**
+   * The function calculates the caret position in a formatted input string.
+   *
+   * @param {string} input - The `input` parameter in the `calculateCaretPosition` function is a string
+   * that represents the text input where you want to calculate the caret position.
+   * @param {number} caretPosition - The current position of caret
+   * @returns {Nullable<number>} The `calculateCaretPosition` function is returning the length of the formatted input
+   * string.
+   */
+  calculateCaretPosition(input, caretPosition) {
+    if (this.resetCaretPositionFlag === true) {
+      return this.format(input).length;
+    }
+    else if (isNonNullable(caretPosition)) {
+      const startValue = input.substring(0, caretPosition);
+      const maskedStartValue = this.format(startValue);
+      return caretPosition + (maskedStartValue.length - startValue.length);
+    }
+  }
+  /**
+   * Trigger the formatter at init
+   *
+   * @returns {boolean} true or false
+   */
+  shouldTriggerAtInit() {
+    return true;
+  }
+}
+
+/**
+ * A class for formatting number string with the "," as the thousand separator
+ */
+class NumberThousandCommaStrategy extends NumberMaskStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {NumberMaskConfig} maskConfig - MaskConfig
+   */
+  constructor(maskConfig) {
+    super(maskConfig);
+  }
+  /**
+   * If the input is a number, format it as a thousand comma string
+   *
+   * @param {string} input - string
+   * @returns {string} The input string, but with commas as thousands separator.
+   */
+  format(input) {
+    if (this.skipFormat(input)) {
+      return input;
+    }
+    const resultStringBuilder = [...input];
+    for (let i = input.length - 1; i >= 0; i--) {
+      const value = resultStringBuilder.join('');
+      if (this.inputNeedFormat(value.replace(/,/g, ''))) {
+        resultStringBuilder.pop();
+      }
+    }
+    return this.thousandCommaFormat(resultStringBuilder.join(''));
+  }
+  /**
+   * Get the position of caret
+   *
+   * @param {string} input - The input string
+   * @param {number} caretPosition - The current caret position
+   * @returns {number} The new position of caret
+   */
+  calculateCaretPosition(input, caretPosition) {
+    const formatInput = this.format(input);
+    const oldFrontInput = input.substring(0, caretPosition);
+    const newFrontInput = formatInput.substring(0, caretPosition);
+    const oldFrontCommaCount = (oldFrontInput.match(/,/g) || []).length;
+    const newFrontCommaCount = (newFrontInput.match(/,/g) || []).length;
+    return caretPosition + (newFrontCommaCount - oldFrontCommaCount);
+  }
+  /**
+   * The function `thousandCommaFormat` takes a string input, removes non-numeric characters, formats the number with thousand commas, and returns the result.
+   *
+   * @param {string} input - Takes a string input and formats it by adding commas to separate thousands. It also handles decimal values based on the precision specified in the `maskConfig`.
+   * @returns {string} Returns a formatted string with commas for thousands separator and optional decimal places.
+   */
+  thousandCommaFormat(input) {
+    if (!input.length)
+      return input;
+    const inputValue = input.replace(/[^\d.-]/g, '');
+    const { precision } = this.maskConfig;
+    const pointIndex = inputValue.indexOf('.');
+    const decimals = precision && inputValue.length > 1 && pointIndex >= 1 ? inputValue.slice(pointIndex) : '';
+    const numValue = Number(inputValue.split('.')[0]);
+    if (!isNaN(numValue) && numValue <= Number.MAX_SAFE_INTEGER) {
+      return numValue.toLocaleString('en-US') + decimals;
+    }
+    else {
+      return inputValue;
+    }
+  }
+}
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+/** The `VegaInputMaskConfigController` class in TypeScript manages input mask configuration and string formatting for an input element within a component's shadow root. */
+class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Get the input element which will add mask
+     *
+     * @returns {Nullable<HTMLInputElement>} the input element
+     */
+    this.getInputElementRef = () => {
+      return this.inputRef;
+    };
+    /**
+     * Determining the string format strategy to be applied when the input field trigger is set to 'input'.
+     *
+     * @returns {Nullable<StringFormatStrategy>} the input mode mask strategy
+     */
+    this.getInputModeStrategy = () => {
+      return this.generateMaskStrategy('input');
+    };
+    /**
+     * Determining the string format strategy to be applied when the input field trigger is set to 'blur'.
+     *
+     * @returns {Nullable<StringFormatStrategy>} the blur mode mask strategy
+     */
+    this.getBlurModeStrategy = () => {
+      return this.generateMaskStrategy('blur');
+    };
+  }
+  /**
+   * The function `setupStringFormatter` sets up a string formatter for an input element based on provided mask configurations.
+   *
+   * @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`.
+   */
+  setupStringFormatter(inputRef) {
+    this.inputRef = inputRef;
+    this.setup();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-mask-type-thousand-comma-e2e}
+   * @see{module:vega-input-mask-type-zipcode-e2e}
+   * @see{module:vega-input-mask-type-taxId-e2e}
+   * @see{module:vega-input-mask-type-phone-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * This TypeScript function generates a string format strategy based on the provided mask configuration and trigger type.
+   *
+   * @param {'blur' | 'input'} maskTrigger - The `maskTrigger` parameter in the `generateMaskStrategy` function determines when the mask should be applied to the input field. It can have two possible values:
+   * @returns {StringFormatStrategy|null} The function `generateMaskStrategy` returns a nullable `StringFormatStrategy` based on the provided `maskConfig` and `maskTrigger` parameters.
+   */
+  generateMaskStrategy(maskTrigger) {
+    let maskConfig = null;
+    if (Array.isArray(this.maskConfig)) {
+      maskConfig = this.maskConfig.find((item) => maskTrigger === 'blur' ? this.isBlurModeMaskConfig(item) : !this.isBlurModeMaskConfig(item));
+    }
+    else if (this.maskConfig) {
+      if (maskTrigger === 'blur' && this.isBlurModeMaskConfig(this.maskConfig)) {
+        maskConfig = this.maskConfig;
+      }
+      else if (maskTrigger === 'input' && !this.isBlurModeMaskConfig(this.maskConfig)) {
+        maskConfig = this.maskConfig;
+      }
+    }
+    let stringFormatStrategy = null;
+    switch (maskConfig === null || maskConfig === void 0 ? void 0 : maskConfig.type) {
+      case 'phone':
+        stringFormatStrategy = StringMaskStrategy.PHONE_MASK;
+        break;
+      case 'taxId':
+        stringFormatStrategy = StringMaskStrategy.TAX_ID_MASK;
+        break;
+      case 'zipcode':
+        stringFormatStrategy = StringMaskStrategy.ZIPCODE_MASK;
+        break;
+      case 'thousand-comma':
+        stringFormatStrategy = new ThousandCommaStrategy();
+        break;
+      case 'number':
+        stringFormatStrategy = this.getNumberTypeMaskStrategy(maskConfig.options);
+        break;
+      case 'custom':
+        stringFormatStrategy = new StringMaskStrategy(maskConfig.options);
+        break;
+      case 'custom-formatter':
+        stringFormatStrategy = new CustomFormatterStrategy(maskConfig.formatter, maskConfig.resetCaretPosition);
+        break;
+    }
+    if (this.type === 'number' && maskTrigger === 'input' && !maskConfig) {
+      stringFormatStrategy = new NumberMaskStrategy();
+    }
+    return stringFormatStrategy;
+  }
+  /**
+   * The function `getNumberTypeMaskStrategy` returns a specific formatting strategy based on the provided options for number masking.
+   *
+   * @param {NumberMaskConfig} options - The `options` parameter is of type `NumberMaskConfig`, which likely contains configuration options for formatting numbers. It seems to have a property `thousandComma` which, if true, indicates that the number should be formatted with thousand commas.
+   * @returns {StringFormatStrategy} an instance of numberMaskStrategy or numberThousandCommaStrategy
+   */
+  getNumberTypeMaskStrategy(options) {
+    if (options && options.thousandComma) {
+      return new NumberThousandCommaStrategy(options);
+    }
+    else {
+      return new NumberMaskStrategy(options);
+    }
+  }
+  /**
+   * The function `isBlurModeMaskConfig` checks if a given `maskConfig` is of type 'custom' and has a trigger of 'blur'.
+   *
+   * @param {MaskConfigType} maskConfig - MaskConfigType
+   * @returns {boolean} a boolean value, which indicates whether the provided `maskConfig` object has a type of
+   * 'custom' and a trigger of 'blur'.
+   */
+  isBlurModeMaskConfig(maskConfig) {
+    return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaInputMaskConfigController.prototype, "maskConfig", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaInputMaskConfigController.prototype, "disableCopyPaste", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaInputMaskConfigController.prototype, "type", void 0);
+
+const VegaInputRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: "Determines whether the input field should undergo automatic validation during the user's input",
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: "Determines whether the input field should undergo automatic validation during the user's input",
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+  {
+    payloadKey: 'EMAIL_IS_TRUE',
+    payloadDescription: '@deprecated Enforces proper email format validation for the input field.',
+    /**
+     * The function checks if the `email` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.email === true,
+  },
+  {
+    payloadKey: 'EMAIL_IS_FALSE',
+    payloadDescription: '@deprecated Enforces proper email format validation for the input field.',
+    /**
+     * The function checks if the `email` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.email === false,
+  },
+];
+
+const vegaInputCss = ":host{cursor:text;display:block;text-align:left;line-height:normal}:host(.vega-input-inline-block){display:inline-block;width:100%}:host(.vega-input-hidden){display:none}vega-field-label{margin-bottom:8px}.vega-input-container{display:flex;align-items:center;border-radius:8px;gap:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}.vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.vega-input-container.vega-input-disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-container.vega-input-disabled:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.vega-input-container.vega-input-disabled input{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}.vega-input-container.with-value{border-width:1px;border-style:solid;border-radius:8px}.vega-input-container:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}.vega-input-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.vega-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}.vega-input-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}.vega-input-prefix{text-align:center;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-size:0px}.vega-input-prefix.vega-input-prefix-slot{height:24px;overflow:hidden}.vega-input-input{flex:1 1 0%;position:relative}.vega-input-input input{width:100%;outline:2px solid transparent;outline-offset:2px;border-style:none;height:24px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-input-input input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.vega-input-input input::placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}.vega-input-size-small{padding-top:8px;padding-right:12px;padding-bottom:8px;padding-left:12px}.vega-input-size-default{padding-top:12px;padding-right:16px;padding-bottom:12px;padding-left:16px}.vega-input-input input:disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.vega-hint{padding-top:12px;padding-right:8px;padding-left:8px}.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-hint>label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none}.vega-input-clear-icon{width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-input-clear-icon.invisible{visibility:hidden}.vega-input-clear-icon vega-icon{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaBlur = createEvent(this, "vegaBlur", 7);
+    this.blur = createEvent(this, "blur", 7);
+    this.vegaFocus = createEvent(this, "vegaFocus", 7);
+    this.focus = createEvent(this, "focus", 7);
+    this.vegaLabelButtonClick = createEvent(this, "vegaLabelButtonClick", 7);
+    this.labelButtonClick = createEvent(this, "labelButtonClick", 7);
+    this.globalSlimmers = {};
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
+        },
+        {
+          propertyName: 'min',
+          ruleFactory: (min) => (min ? new MinNumberRule({ minValue: min }) : null),
+        },
+        {
+          propertyName: 'max',
+          ruleFactory: (max) => (max ? new MaxNumberRule({ maxValue: max }) : null),
+        },
+        {
+          propertyName: 'minLength',
+          ruleFactory: (minLength) => minLength ? new MinStringLengthRule({ minStrLength: minLength }) : null,
+        },
+        {
+          propertyName: 'maxLength',
+          ruleFactory: (maxLength) => maxLength ? new MaxStringLengthRule({ maxStrLength: maxLength }) : null,
+        },
+        {
+          propertyName: 'email',
+          ruleFactory: (email) => (email ? new EmailFieldRule() : null),
+        },
+        {
+          propertyName: 'type',
+          ruleFactory: (type) => (type === 'email' ? new EmailFieldRule() : null),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => [this.inputRef],
+    });
+    this.copyPasteController = new VegaInputCopyPasteController();
+    this.maskConfigController = new VegaInputMaskConfigController();
+    this.prefixSlotRenderer = new VegaInputPrefixSlotRenderer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
+    this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
+    this.blurEventEmitter = createEventEmitSlimmer(VegaInput, VegaBlur);
+    this.labelButtonClickEventEmitter = createEventEmitSlimmer(VegaInput, VegaLabelButtonClick);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputRuntimeMetricsPayloadDefinition);
+    /**
+     * Specifies the label or title for the input field.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the input field.
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.label = '';
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality
+     *  related to the suffix button's role and behavior.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.labelSuffixButtonProps = null;
+    /**
+     * Represents a pre-set or default value for the input field.
+     *
+     * It allows you to initialize the field with a specific value,
+     *    which is displayed to the user when the input is
+     *    initially rendered.
+     *
+     * If the value is too long, it may be truncated with
+     *    an ellipsis for visual presentation.
+     *
+     * @vegaVersion 1.0.5
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = '';
+    /**
+     * Specifies when the vegaChange event is triggered.
+     *     It controls whether the event is dispatched
+     *     after typing in the input or after a change event.
+     *
+     * @vegaVersion 2.24.0
+     */
+    this.valueUpdateTrigger = 'input';
+    /**
+     * Defines the specific type or category of the input field.
+     *
+     * It specifies the intended format or purpose of the
+     *    data to be entered by the user.
+     *
+     * @vegaVersion 1.0.9
+     */
+    this.type = 'text';
+    /**
+     * Defines the specific name of the input field.
+     *
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.name = '';
+    /**
+     * Controls the autofill behavior and specifies whether the
+     *    input should receive automated suggestions or
+     *    previously entered values.
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.autocomplete = 'off';
+    /**
+     * Enforces proper email format validation for the input field.
+     *
+     * It ensures that the user enters a valid email address according to
+     *    standard email formatting rules.
+     *
+     * @deprecated Please use `type='email'` instead.
+     * @vegaVersion 1.0.5
+     */
+    this.email = false;
+    /**
+     * Determines whether the input field is required.
+     *
+     * @vegaVersion 1.0.5
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Sets the minimum allowable numeric value for the input value.
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.min = null;
+    /**
+     * Sets the maximum allowable numeric value for the input value.
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.max = null;
+    /**
+     * Sets the minimum length requirement for the input value.
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.minLength = null;
+    /**
+     * Sets the maximum length requirement for the input value.
+     *
+     * @vegaVersion 1.0.5
+     */
+    this.maxLength = null;
+    /**
+     * Determines whether the clear icon should be displayed or hidden.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.showClearIcon = true;
+    /**
+     * Indicates whether the current value in the field is considered valid or
+     *    invalid based on the defined validation rules.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the input field should undergo automatic validation
+     *    during the user's input.
+     *
+     * @vegaVersion 1.0.10
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the input field.
+     *
+     * @vegaVersion 1.0.10
+     */
+    this.validationRules = [];
+    /**
+     * Defines the size of the input field,
+     *    specifying its width or length.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the input field is disabled.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.disabled = false;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.hint = '';
+    /**
+     * Controls whether copying or pasting is enabled for the input.
+     *
+     * @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.handleInputFocus = (e) => {
+      this.focusEventEmitter.emit(undefined, e);
+    };
+    this.handleInputBlur = (e) => {
+      this.blurEventEmitter.emit(undefined, e);
+    };
+    this.onClickClearIcon = () => {
+      this.value = '';
+    };
+    this.isClearIconVisible = () => {
+      return !this.disabled && Boolean(this.value);
+    };
+    /**
+     * 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();
+    };
+  }
+  /**
+   * The input component is embedded in other components.
+   *
+   * If modifying the input value does not meet the requirements
+   *    of other components, such as limiting the maximum value, etc.,
+   *    you need to modify the value of the input component and
+   *    display it in real time.
+   *
+   * Since the value of `inputRef` is still the old value retained,
+   *    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,
+    });
+  }
+  watchValidationRules() {
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-mask-change-with-custom-e2e}
+   * For the ComponentLoadRequired, the test can not be added in e2e at now, we will add it while have better solution,
+   * releated issue: https://gitlab.com/heartland1/vega/tiger/-/issues/646
+   */
+  /* istanbul ignore next */
+  watchMaskChange() {
+    this.maskConfigController.setupStringFormatter(this.inputRef);
+  }
+  /**
+   * Invoke this method to focus the current input.
+   *
+   * @vegaVersion 1.12.0
+   */
+  async doFocus() {
+    this.focusInput();
+  }
+  /**
+   * Invoke this method to blur the current input.
+   *
+   * @vegaVersion 1.12.0
+   */
+  async doBlur() {
+    this.inputRef.blur();
+  }
+  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.type === 'number' ? 'text' : this.type, 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 }, this.copyPasteController.getCopyPasteProps()))));
+  }
+  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' : '';
+    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", role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() }, this.prefixSlotRenderer.render(), this.containerDom(), 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, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
+      } }));
+  }
+  renderClearIcon() {
+    return (h("div", { class: {
+        'vega-input-clear-icon': true,
+        'invisible': !this.isClearIconVisible(),
+      }, tabIndex: -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() }, h("vega-icon", { icon: "close" })));
+  }
+  renderHintDom() {
+    return this.hint !== '' ? (h("div", { class: "vega-hint" }, h("label", null, this.hint))) : null;
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"],
+    "maskConfig": ["watchMaskChange"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInput.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "copyPasteController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "maskConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "prefixSlotRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "focusEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "labelButtonClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  ComponentLoadRequired()
+], VegaInput.prototype, "watchMaskChange", null);
+VegaInput.style = vegaInputCss;
+
+export { VegaInput as vega_input };