@heartlandone/vega-sandbox-pr-1457-26ca806e919492b9064caacdcb37782f4b5aeb1c 2.25.0

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

@@ -0,0 +1,1147 @@
+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 { Component, Host, h, Prop, Element, Method, Event, Watch } from '@stencil/core';
+import { EmailFieldRule } from '../../helpers/validator/rules/email-field-rule';
+import { MaxNumberRule } from '../../helpers/validator/rules/max-number-rule';
+import { MaxStringLengthRule } from '../../helpers/validator/rules/max-string-length-rule';
+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, } 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';
+/**
+ * @version 1.0.5
+ */
+export class VegaInput {
+  constructor() {
+    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.
+     *
+     * @version 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.
+     *
+     * @version 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.
+     *
+     * @version 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.
+     *
+     * @version 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.
+     *
+     * @version 1.0.9
+     */
+    this.type = 'text';
+    /**
+     * Defines the specific name of the input field.
+     *
+     *
+     * @version 1.0.5
+     */
+    this.name = '';
+    /**
+     * Controls the autofill behavior and specifies whether the
+     *    input should receive automated suggestions or
+     *    previously entered values.
+     *
+     * @version 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.
+     * @version 1.0.5
+     */
+    this.email = false;
+    /**
+     * Determines whether the input field is required.
+     *
+     * @version 1.0.5
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Sets the minimum allowable numeric value for the input value.
+     *
+     * @version 1.0.5
+     */
+    this.min = null;
+    /**
+     * Sets the maximum allowable numeric value for the input value.
+     *
+     * @version 1.0.5
+     */
+    this.max = null;
+    /**
+     * Sets the minimum length requirement for the input value.
+     *
+     * @version 1.0.5
+     */
+    this.minLength = null;
+    /**
+     * Sets the maximum length requirement for the input value.
+     *
+     * @version 1.0.5
+     */
+    this.maxLength = null;
+    /**
+     * Determines whether the clear icon should be displayed or hidden.
+     *
+     * @version 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.
+     *
+     * @version 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.
+     *
+     * @version 1.0.10
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the input field.
+     *
+     * @version 1.0.10
+     */
+    this.validationRules = [];
+    /**
+     * Defines the size of the input field,
+     *    specifying its width or length.
+     *
+     * @version 1.3.0
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the input field is disabled.
+     *
+     * @version 1.3.0
+     */
+    this.disabled = false;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     *
+     * @version 1.3.0
+     */
+    this.hint = '';
+    /**
+     * Controls whether copying or pasting is enabled for the input.
+     *
+     * @version 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() {
+    methodPlaceholder();
+  }
+  /**
+   * 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.
+   *
+   * @version 1.12.0
+   */
+  async doFocus() {
+    this.focusInput();
+  }
+  /**
+   * Invoke this method to blur the current input.
+   *
+   * @version 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;
+  }
+  static get is() { return "vega-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-input.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Specifies the label or title for the input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "labelSuffixButtonProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "LabelSuffixButtonProps",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "references": {
+          "LabelSuffixButtonProps": {
+            "location": "import",
+            "path": "../vega-field-label/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\n related to the suffix button's role and behavior."
+      },
+      "defaultValue": "null"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Represents a pre-set or default value for the input field.\n\nIt allows you to initialize the field with a specific value,\n   which is displayed to the user when the input is\n   initially rendered.\n\nIf the value is too long, it may be truncated with\n   an ellipsis for visual presentation."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "valueUpdateTrigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "InputValueUpdateTriggeredBy",
+        "resolved": "\"change\" | \"input\"",
+        "references": {
+          "InputValueUpdateTriggeredBy": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.24.0"
+          }],
+        "text": "Specifies when the vegaChange event is triggered.\n    It controls whether the event is dispatched\n    after typing in the input or after a change event."
+      },
+      "attribute": "value-update-trigger",
+      "reflect": false,
+      "defaultValue": "'input'"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text' | 'email' | 'password' | 'number' | 'hidden'",
+        "resolved": "\"email\" | \"hidden\" | \"number\" | \"password\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.9"
+          }],
+        "text": "Defines the specific type or category of the input field.\n\nIt specifies the intended format or purpose of the\n   data to be entered by the user."
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "'text'"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Defines the specific name of the input field."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "autocomplete": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'on' | 'off'",
+        "resolved": "\"off\" | \"on\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Controls the autofill behavior and specifies whether the\n   input should receive automated suggestions or\n   previously entered values."
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "'off'"
+    },
+    "prefixIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Specifies an icon or symbol that appears before the input field,\n   providing visual context or enhancing the aesthetic appearance\n   of the input."
+      },
+      "attribute": "prefix-icon",
+      "reflect": true
+    },
+    "email": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "Please use `type='email'` instead."
+          }, {
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Enforces proper email format validation for the input field.\n\nIt ensures that the user enters a valid email address according to\n   standard email formatting rules."
+      },
+      "attribute": "email",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Determines whether the input field is required."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Sets the minimum allowable numeric value for the input value."
+      },
+      "attribute": "min",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Sets the maximum allowable numeric value for the input value."
+      },
+      "attribute": "max",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "minLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Sets the minimum length requirement for the input value."
+      },
+      "attribute": "min-length",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
+        "text": "Sets the maximum length requirement for the input value."
+      },
+      "attribute": "max-length",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "showClearIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Determines whether the clear icon should be displayed or hidden."
+      },
+      "attribute": "show-clear-icon",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "isValid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Indicates whether the current value in the field is considered valid or\n   invalid based on the defined validation rules."
+      },
+      "attribute": "is-valid",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "autoValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.10"
+          }],
+        "text": "Determines whether the input field should undergo automatic validation\n   during the user's input."
+      },
+      "attribute": "auto-validation",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "validationRules": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFieldValidationRule<unknown>[]",
+        "resolved": "FormFieldValidationRule<unknown>[]",
+        "references": {
+          "FormFieldValidationRule": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/form-field-validation-rule"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.10"
+          }],
+        "text": "Defines custom validation rules for the input field."
+      },
+      "defaultValue": "[]"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'small'",
+        "resolved": "\"default\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Defines the size of the input field,\n   specifying its width or length."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the input field.\n\nIt indicates the expected format or pattern of the input."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Determines whether the input field is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
+      },
+      "attribute": "hint",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "maskConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "MaskConfigType | MaskConfigType[]",
+        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; })",
+        "references": {
+          "MaskConfigType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies the configuration for applying a mask to the input field.\n\nIt provides a way to define a specific format or pattern for the input value,\n   restricting and guiding the user's input accordingly."
+      }
+    },
+    "disableCopyPaste": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.1.0"
+          }],
+        "text": "Controls whether copying or pasting is enabled for the input."
+      },
+      "attribute": "disable-copy-paste",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.0.10"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaBlur",
+      "name": "vegaBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "An event emitter notifying the blur of the inner input element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
+      }
+    }, {
+      "method": "blur",
+      "name": "blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying the blur of the inner input element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
+      }
+    }, {
+      "method": "vegaFocus",
+      "name": "vegaFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.12.0"
+          }],
+        "text": "An event emitter notifying the focus of the inner input element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
+      }
+    }, {
+      "method": "focus",
+      "name": "focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying the focus of the inner input element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
+      }
+    }, {
+      "method": "vegaLabelButtonClick",
+      "name": "vegaLabelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "labelButtonClick",
+      "name": "labelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "doFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to focus the current input.",
+        "tags": [{
+            "name": "version",
+            "text": "1.12.0"
+          }]
+      }
+    },
+    "doBlur": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to blur the current input.",
+        "tags": [{
+            "name": "version",
+            "text": "1.12.0"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "watchValue"
+    }, {
+      "propName": "validationRules",
+      "methodName": "watchValidationRules"
+    }, {
+      "propName": "maskConfig",
+      "methodName": "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);