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

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

@@ -0,0 +1,530 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
+import { S as StringInputFormatter, a as StringMaskStrategy } from './stringMaskStrategy-c463fad7.js';
+import { M as MinNumberRule, a as MaxNumberRule } from './minNumberRule-b73285c8.js';
+import { M as MinStringLengthRule, a as MaxStringLengthRule } from './minStringLengthRule-f294684c.js';
+import { R as RequiredFieldRule } from './requiredFieldRule-f549a39d.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { C as ComponentLoadRequired } from './componentLoadRequired-ec47331b.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-862c5c79.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { g as VegaChange, p as VegaFocus, q as VegaBlur } from './internalVegaEventManager-efa77ebb.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-bb1e9570.js';
+import { C as ChangeManager } from './changeManager-935d420b.js';
+import './typeGuard-5e282437.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
+import './typography-03d285b4.js';
+import './number-400b3bf2.js';
+import './log-a824be80.js';
+import './vega-slimmer-ce2e45d1.js';
+import './string-be824360.js';
+import './ui-6e5294cb.js';
+import './misc-c21a85c9.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './pageResizeObserverSlimmer-b476bb1f.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) {
+    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.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.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
+    this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
+    this.blurEventEmitter = createEventEmitSlimmer(VegaInput, 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.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.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 sanitizeVegaComponent(h(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.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 = new NumberMaskStrategy(this.maskConfig.options);
+        break;
+      case 'custom':
+        stringFormatStrategy = new 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 StringInputFormatter(this.inputRef, stringFormatStrategy);
+    }
+  }
+  prefixDom() {
+    if (this.prefixIcon) {
+      return (h("div", { class: "vega-input-prefix", part: "prefix-icon-container" }, h("vega-icon", { icon: this.prefixIcon, size: "size-16" })));
+    }
+  }
+  containerDom() {
+    return (h("div", { class: "vega-input-input" }, 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 (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.prefixDom(), 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 }));
+  }
+  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, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "focusEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "blurEventEmitter", void 0);
+__decorate([
+  ComponentLoadRequired()
+], VegaInput.prototype, "watchMaskChange", null);
+VegaInput.style = vegaInputCss;
+
+export { VegaInput as vega_input };

package/dist/esm/vega-item-toggle.entry.js

@@ -1,28 +1,16 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3e41c219.js';
-import { s as sanitizeVegaComponent } from './component-ff56c5f5.js';
-import { I as ItemToggleTransitionMillisecond } from './breakpoints-3152fa9c.js';
-import './vegaEnvManager-6d877f06.js';
-import { a as VegaClick, r as VegaToggleStatus } from './vegaEventId-78665c18.js';
-import './internalVegaEventManager-4ab886bc.js';
-import { F as FeatureFlag } from './featureFlagController-5d7e64f1.js';
-import './ui-608b4032.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { I as ItemToggleTransitionMillisecond } from './ui-535c5fb3.js';
+import { c as createEventEmitSlimmer, D as DomNodeSubjectObserverFactory } from './eventEmitSlimmer-d605ac81.js';
+import { V as VegaClick, s as VegaToggleStatus } from './internalVegaEventManager-efa77ebb.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
 import './log-a824be80.js';
-import { D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-8aeac4b6.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-da1fd54e.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-f1dec4a2.js';
-import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-0e6dd982.js';
-import './zIndexManager-ea603c97.js';
-import './number-400b3bf2.js';
-import './misc-9fdbcfbb.js';
-import './dynamic-slimmer-16826d2b.js';
-import './vega-slimmer-d63e92d9.js';
-import './map-to-component-method-4e36ea1f.js';
-import './pageResizeObserverSlimmer-ee15d7fd.js';
-import './_commonjsHelpers-9943807e.js';
+import './vega-slimmer-ce2e45d1.js';
+import './dynamic-slimmer-c8ad78de.js';
 import './changeManager-935d420b.js';
-import './observer-3959f9dd.js';
 
-const vegaItemToggleCss = ":host{display:inline-block;text-align:left;line-height:normal}div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));padding-right:8px;display:inline-block}@media screen and (min-width: 768px) and (max-width: 1023px){div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}div:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}vega-button-circle::part(button):hover{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}vega-button-circle::part(button):active{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.vega-toggled-status)>div,:host(.vega-toggled-status) vega-button-circle{animation:fadein 1.4s ease}:host(.vega-toggled-status)>div{cursor:default;color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.vega-toggled-status)>div:hover{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.vega-error-status:not(.vega-toggled-status))>div{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.vega-toggled-status) vega-button-circle::part(button){border:2px solid rgba(var(--v-border-success, 1, 128, 31, 1));cursor:default;box-shadow:0 0 0 0}:host(.vega-toggled-status) vega-button-circle::part(button):hover{border:2px solid rgba(var(--v-border-success, 1, 128, 31, 1))}:host(.vega-toggled-status) vega-button-circle::part(icon){color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.vega-error-status:not(.vega-toggled-status)) vega-button-circle::part(button){border:2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1))}:host(.vega-error-status:not(.vega-toggled-status)) vega-button-circle::part(icon){color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}@keyframes fadein{0%{opacity:0}10%{opacity:0.1}50%{opacity:0.5}80%{opacity:0.8}100%{opacity:1}}";
+const vegaItemToggleCss = ":host{display:inline-block;text-align:left;line-height:normal}div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));padding-right:8px;display:inline-block}@media screen and (min-width: 768px) and (max-width: 1023px){div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){div{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}div:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}vega-button-circle::part(button):hover{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}vega-button-circle::part(button):active{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.vega-toggled-status)>div,:host(.vega-toggled-status) vega-button-circle{animation:fadein 1.4s ease}:host(.vega-toggled-status)>div{cursor:default;color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.vega-toggled-status)>div:hover{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.vega-toggled-status) vega-button-circle::part(button){border:2px solid rgba(var(--v-border-success, 1, 128, 31, 1));cursor:default;box-shadow:0 0 0 0}:host(.vega-toggled-status) vega-button-circle::part(button):hover{border:2px solid rgba(var(--v-border-success, 1, 128, 31, 1))}:host(.vega-toggled-status) vega-button-circle::part(icon){color:rgba(var(--v-text-success, 1, 128, 31, 1))}@keyframes fadein{0%{opacity:0}10%{opacity:0.1}50%{opacity:0.5}80%{opacity:0.8}100%{opacity:1}}";
 
 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;
@@ -57,12 +45,6 @@ const VegaItemToggle = class {
      * Determines whether the item is toggled on.
      */
     this.isToggled = false;
-    /**
-     * Determines whether the toggle represents an error state.
-     *
-     * @deprecated This functionality will be removed in a future release.
-     */
-    this.isError = false;
     this.handleToggle = () => {
       if (!this.isTogglingOrUnToggling()) {
         this.updateToggleStatus();
@@ -78,13 +60,12 @@ const VegaItemToggle = class {
   render() {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-toggled-status': this.isTogglingOrUnToggling(),
-        'vega-error-status': this.getIsError(),
       } }, this.renderLabelDom(), h("vega-button-circle", { size: "small", variant: "secondary", icon: this.toggleItemStatus === 'unToggled'
         ? this.itemToggleStatusMap.unToggledIcon || 'plus-sign'
         : this.toggleItemStatus === 'toggled'
           ? this.itemToggleStatusMap.toggledIcon || 'delete-bin'
           : 'checkmark', ref: (ref) => {
-        DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaClick, this.handleToggle);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, this.handleToggle);
       } })), this.host);
   }
   renderLabelDom() {
@@ -132,15 +113,6 @@ const VegaItemToggle = class {
     this.isToggled ? (this.toggleItemStatus = 'toggled') : (this.toggleItemStatus = 'unToggled');
     this.toggleStatusEventEmitter.emit(this.isToggled);
   }
-  /**
-   * It checks if the feature flag `VEGA_ITEM_TOGGLE_ISERROR_DEPRECATED` is enabled. If the feature flag is enabled, it
-   * returns `false`. Otherwise, it returns the value of the `isError` property
-   *
-   * @returns {boolean} a boolean value
-   */
-  getIsError() {
-    return FeatureFlag.isEnabled('VEGA_ITEM_TOGGLE_ISERROR_DEPRECATED') ? false : this.isError;
-  }
   get host() { return getElement(this); }
   static get watchers() { return {
     "isToggled": ["onToggledPropsChange"]