@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

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

@@ -0,0 +1,534 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const stringMaskStrategy = require('./stringMaskStrategy-b22eb314.js');
+const minNumberRule = require('./minNumberRule-2441c3e6.js');
+const minStringLengthRule = require('./minStringLengthRule-66ee0c3c.js');
+const requiredFieldRule = require('./requiredFieldRule-56f10b25.js');
+const component = require('./component-b50f0483.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const componentLoadRequired = require('./componentLoadRequired-bcc5c8a1.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
+const injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
+const formFieldControllerSlimmer = require('./formFieldControllerSlimmer-69ea8396.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-f0546f9d.js');
+const internalVegaEventManager = require('./internalVegaEventManager-cfb1df83.js');
+const staticSubjectTitle = require('./staticSubjectTitle-b02c917c.js');
+const changeManager = require('./changeManager-1dd5ac2a.js');
+require('./typeGuard-70b919b6.js');
+require('./breakpoints-97c1f5c8.js');
+require('./ui-ef822fe1.js');
+require('./typography-3d2ba97d.js');
+require('./number-7e7d9981.js');
+require('./log-5d8066e0.js');
+require('./vega-slimmer-af488dc3.js');
+require('./string-21427167.js');
+require('./ui-23cd9abb.js');
+require('./misc-0197689b.js');
+require('./dynamic-slimmer-c718b7d9.js');
+require('./pageResizeObserverSlimmer-9751395d.js');
+
+/**
+ * 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;
+  }
+}
+
+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 {EvaluateResult} 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;
+  }
+}
+
+/**
+ * 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('');
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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);
+  }
+}
+
+const vegaInputCss = ":host{cursor:text;display:block;text-align:left;line-height:normal}:host(.vega-input-inline-block){display:inline-block;width:100%}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{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}.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{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}.vega-input-prefix{text-align:center;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-size:0px}.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) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaBlur = index.createEvent(this, "vegaBlur", 7);
+    this.blur = index.createEvent(this, "blur", 7);
+    this.vegaFocus = index.createEvent(this, "vegaFocus", 7);
+    this.focus = index.createEvent(this, "focus", 7);
+    this.globalSlimmers = {};
+    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new requiredFieldRule.RequiredFieldRule() : null),
+        },
+        {
+          propertyName: 'min',
+          ruleFactory: (min) => (min ? new minNumberRule.MinNumberRule({ minValue: min }) : null),
+        },
+        {
+          propertyName: 'max',
+          ruleFactory: (max) => (max ? new minNumberRule.MaxNumberRule({ maxValue: max }) : null),
+        },
+        {
+          propertyName: 'minLength',
+          ruleFactory: (minLength) => minLength ? new minStringLengthRule.MinStringLengthRule({ minStrLength: minLength }) : null,
+        },
+        {
+          propertyName: 'maxLength',
+          ruleFactory: (maxLength) => maxLength ? new minStringLengthRule.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.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInput, internalVegaEventManager.VegaChange);
+    this.focusEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInput, internalVegaEventManager.VegaFocus);
+    this.blurEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInput, internalVegaEventManager.VegaBlur);
+    /**
+     * 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.
+     */
+    this.label = '';
+    /**
+     * 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.
+     */
+    this.value = '';
+    /**
+     * 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.
+     */
+    this.type = 'text';
+    /**
+     * Controls the autofill behavior and specifies whether the
+     *    input should receive automated suggestions or
+     *    previously entered values.
+     */
+    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.
+     */
+    this.email = false;
+    /**
+     * Determines whether the input field is required.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Sets the minimum allowable numeric value for the input value.
+     */
+    this.min = null;
+    /**
+     * Sets the maximum allowable numeric value for the input value.
+     */
+    this.max = null;
+    /**
+     * Sets the minimum length requirement for the input value.
+     */
+    this.minLength = null;
+    /**
+     * Sets the maximum length requirement for the input value.
+     */
+    this.maxLength = null;
+    /**
+     * Determines whether the clear icon should be displayed or hidden.
+     */
+    this.showClearIcon = true;
+    /**
+     * Indicates whether the current value in the field is considered valid or
+     *    invalid based on the defined validation rules.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the input field should undergo automatic validation
+     *    during the user's input.
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the input field.
+     */
+    this.validationRules = [];
+    /**
+     * Defines the size of the input field,
+     *    specifying its width or length.
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the input field is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     */
+    this.hint = '';
+    this.focusInput = () => {
+      this.inputRef.focus();
+    };
+    this.setInputRef = (inputRef) => {
+      if (inputRef && this.inputRef !== inputRef) {
+        this.inputRef = inputRef;
+        this.setupStringFormatter();
+      }
+    };
+    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);
+    };
+  }
+  /**
+   * 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.ChangeManager.notify(staticSubjectTitle.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.setupStringFormatter();
+  }
+  connectedCallback() {
+    const name = this.host.getAttribute('name');
+    if (name) {
+      this.name = name;
+      this.host.removeAttribute('name');
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-on-value-input}
+   */
+  /* istanbul ignore next */
+  handleValueInput() {
+    this.value = this.inputRef.value;
+  }
+  /**
+   * Invoke this method to focus the current input.
+   */
+  async doFocus() {
+    this.focusInput();
+  }
+  /**
+   * Invoke this method to blur the current input.
+   */
+  async doBlur() {
+    this.inputRef.blur();
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: "vega-input-inline-block" }, this.groupDom()), this.host);
+  }
+  /**
+   * 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 */
+  setupStringFormatter() {
+    var _a;
+    let stringFormatStrategy = null;
+    switch ((_a = this.maskConfig) === null || _a === void 0 ? void 0 : _a.type) {
+      case 'phone':
+        stringFormatStrategy = stringMaskStrategy.StringMaskStrategy.PHONE_MASK;
+        break;
+      case 'taxId':
+        stringFormatStrategy = stringMaskStrategy.StringMaskStrategy.TAX_ID_MASK;
+        break;
+      case 'zipcode':
+        stringFormatStrategy = stringMaskStrategy.StringMaskStrategy.ZIPCODE_MASK;
+        break;
+      case 'thousand-comma':
+        stringFormatStrategy = new ThousandCommaStrategy();
+        break;
+      case 'number':
+        stringFormatStrategy = new NumberMaskStrategy(this.maskConfig.options);
+        break;
+      case 'custom':
+        stringFormatStrategy = new stringMaskStrategy.StringMaskStrategy(this.maskConfig.options);
+        break;
+    }
+    if (this.type === 'number' && !this.maskConfig) {
+      stringFormatStrategy = new NumberMaskStrategy();
+    }
+    if (this.stringInputFormatter)
+      this.stringInputFormatter.destroy();
+    if (stringFormatStrategy) {
+      this.stringInputFormatter = new stringMaskStrategy.StringInputFormatter(this.inputRef, stringFormatStrategy);
+    }
+  }
+  prefixDom() {
+    if (this.prefixIcon) {
+      return (index.h("div", { class: "vega-input-prefix", part: "prefix-icon-container" }, index.h("vega-icon", { icon: this.prefixIcon, size: "size-16" })));
+    }
+  }
+  containerDom() {
+    return (index.h("div", { class: "vega-input-input" }, index.h("input", { 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) })));
+  }
+  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 (index.h("div", { class: "vega-input", part: "container-wrapper" }, this.renderLabelDom(), index.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: accessibility.createEnterKeyHandlerToTriggerClick() }, this.prefixDom(), this.containerDom(), this.showClearIcon && this.renderClearIcon()), this.renderHintDom()));
+  }
+  renderLabelDom() {
+    return (index.h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+  }
+  renderClearIcon() {
+    return (index.h("div", { class: {
+        'vega-input-clear-icon': true,
+        'invisible': !this.isClearIconVisible(),
+      }, tabIndex: -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, index.h("vega-icon", { icon: "close" })));
+  }
+  renderHintDom() {
+    return this.hint !== '' ? (index.h("div", { class: "vega-hint" }, index.h("label", null, this.hint))) : null;
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"],
+    "maskConfig": ["watchMaskChange"]
+  }; }
+};
+__decorate([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaInput.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "formFieldController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "changeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "focusEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInput.prototype, "blurEventEmitter", void 0);
+__decorate([
+  componentLoadRequired.ComponentLoadRequired()
+], VegaInput.prototype, "watchMaskChange", null);
+VegaInput.style = vegaInputCss;
+
+exports.vega_input = VegaInput;