import { h, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-090d31ca.js';
import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { H as VegaFocus, I as VegaBlur, i as VegaChange, K as VegaPaste, L as VegaComplete } from './vega-event-id-578c6c6d.js';
import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3897e95b.js';
import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
import { C as ChangeManager } from './change-manager-6a7eb88c.js';
import { c as createEventEmitSlimmer } from './event-emit-slimmer-697ad0b7.js';
import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-012a9a9b.js';
import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2fcba81b.js';
import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9e70a18d.js';
import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
import './observer-3959f9dd.js';
import './ui-64815a12.js';
import './dynamic-slimmer-90b8af32.js';
import './internal-vega-event-manager-1ac5ee9a.js';
import './try-get-document-bef0f526.js';
import './keyboard-manager-26e2fc32.js';
import './type-guard-ed1004cc.js';
import './breakpoints-d9faf11c.js';
import './ui-93922c59.js';
import './typography-396de03f.js';
import './internal-translation-controller-d8217d93.js';
import './vega-env-manager-8f8dc473.js';
import './feature-flag-controller-30f7b625.js';
import './index-bfc6dfa2.js';
import './string-a953eafc.js';
import './misc-9fdbcfbb.js';
import './vega-internal-event-id-913e8be6.js';
import './index-3b327f29.js';
import './page-resize-observer-slimmer-e24d36c5.js';
import './breakpoints-332702ed.js';
import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
import './mutation-observer-slimmer-58ebc13c.js';
import './mutation-observer-filters-1a054fb0.js';
import './array-7888f339.js';
import './number-4398f2e1.js';
import './sub-state-observer-slimmer-81538a8c.js';

var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
class VegaInputPasscodeRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.vegaInputRefs = [];
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-input-passcode-on-label-click}
     */
    /* istanbul ignore next */
    this.focusInputPasscode = () => {
      this.vegaInputRefs[0] && void this.vegaInputRefs[0].doFocus();
    };
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-input-passcode-on-input-value-input}
     */
    /* istanbul ignore next */
    this.handleVegaFocus = (index) => () => {
      if (index !== 0) {
        this.vegaInputRefs[index].tabIndex = null;
      }
      // If the clicked box has a value, focus it. Otherwise focus the first empty box
      const targetIndex = this.vegaInputValues.get(index)
        ? index
        : this.valueController.getFirstEmptyIndex();
      const finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
      // Focus the target box
      this.currentIndex = finalIndex;
      void this.vegaInputRefs[finalIndex].doFocus();
    };
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-input-passcode-on-input-value-input}
     */
    /* istanbul ignore next */
    this.handleVegaBlur = (index) => () => {
      if (index !== 0) {
        this.vegaInputRefs[index].tabIndex = -1;
      }
    };
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-input-passcode-on-input-value-input}
     */
    /* istanbul ignore next */
    this.handleVegaChange = (index) => (e) => {
      var _a;
      const inputValue = e.detail || '';
      if (inputValue.length === 2 || (inputValue.length === 1 && !this.vegaInputValues.get(index))) {
        const newValue = this.generateNewInputValue(index, inputValue);
        this.vegaInputValues.set(index, newValue);
        void ((_a = this.vegaInputRefs[index + 1]) === null || _a === void 0 ? void 0 : _a.doFocus());
      }
    };
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-input-passcode-on-input-value-input}
     */
    /* istanbul ignore next */
    this.handleVegaPaste = () => (e) => {
      e.preventDefault();
      const pastedText = e.detail.getData('text');
      this.valueController.setValuesArray(pastedText);
      // Focus the next empty input after pasting, if all boxes are filled, focus the last input
      const nextEmptyIndex = this.value.length < this.length ? this.value.length : this.length - 1;
      void this.vegaInputRefs[nextEmptyIndex].doFocus();
    };
  }
  watchLengthAndInputType() {
    this.valueController.setValuesArray(this.value);
  }
  getVegaInputRefs() {
    return this.vegaInputRefs;
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-input-passcode-on-arrow-keyboard-press}
   */
  /* istanbul ignore next */
  getCurrentIndex() {
    return this.currentIndex;
  }
  getInputPasscodeContainerRef() {
    return this.inputPasscodeContainerRef;
  }
  render() {
    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, "data-tabindex": index !== 0 ? -1 : 0, showClearIcon: false, disabled: this.disabled, "data-aria-hidden": String(!this.isInputAccessibleForScreenReader(index)), "data-aria-label": `Passcode input ${index + 1} of ${this.length}`, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
        this.vegaInputRefs[index] = ref;
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, this.handleVegaFocus(index));
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleVegaBlur(index));
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleVegaChange(index));
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPaste, this.handleVegaPaste());
      }, maskConfig: {
        type: 'custom-formatter',
        formatter: (value) => this.valueController.valueValidationFilter(value),
      } })));
    return (h(Host, null,
      this.label && this.renderLabel(),
      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", role: "group", "aria-label": this.label || 'One-time password input', ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
      this.hint && h("vega-hint", null, this.hint)));
  }
  renderLabel() {
    return (h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
  }
  /**
   * Find the index of the first empty input box for rendering purposes. If all boxes are filled, return -1.
   *
   * @param {number} inputLength - the input length of the passcode, which is also the number of input boxes to render
   * @returns {number} - the index of the first empty input box, or -1 if all boxes are filled
   */
  getFirstEmptyIndexForRender(inputLength) {
    for (let index = 0; index < inputLength; index++) {
      const currentValue = this.vegaInputValues.get(index);
      if (!currentValue) {
        return index;
      }
    }
    return -1;
  }
  /**
   * Determine whether the input box at the given index should be accessible to screen readers. Only the boxes up to and including the first empty box should be accessible, as screen readers will read out all accessible boxes and we don't want them to read out empty boxes that come before filled boxes.
   *
   * @param {number} index - the index of the input box to check
   * @returns {boolean} - true if the input box should be accessible to screen readers, false otherwise
   */
  isInputAccessibleForScreenReader(index) {
    const firstEmptyIndexForRender = this.getFirstEmptyIndexForRender(this.length);
    if (firstEmptyIndexForRender === -1) {
      return true;
    }
    return index <= firstEmptyIndexForRender;
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-input-passcode-on-input-value-input}
   */
  /* istanbul ignore next */
  generateNewInputValue(index, inputValue) {
    if (inputValue.length === 2) {
      for (let i = 0; i < inputValue.length; i++) {
        if (inputValue[i] !== this.vegaInputValues.get(index)) {
          return inputValue[i];
        }
      }
      return this.vegaInputValues.get(index);
    }
    else {
      return inputValue;
    }
  }
}
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "host", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "value", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "label", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "required", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "length", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "disabled", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "hint", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "size", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "inputType", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "vegaInputValues", void 0);
__decorate$3([
  MapToComponentField()
], VegaInputPasscodeRenderer.prototype, "valueController", void 0);
__decorate$3([
  MapToComponentMethod('watchLengthAndInputType')
], VegaInputPasscodeRenderer.prototype, "watchLengthAndInputType", null);

var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * Input passcode value controller
 */
class VegaInputPasscodeValueController extends VegaSlimmer {
  /** initialize input values on load */
  componentWillLoad() {
    this.setValuesArray(this.value);
    this.value = this.vegaInputValues.join('');
  }
  /**
   * The `watchValue` function emits a change event with the current value and notifies the
   * `ChangeManager` about a form element value change.
   */
  watchValue() {
    this.setValuesArray(this.value);
    this.changeEventEmitter.emit(this.value);
    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
      host: this.host,
      detail: this.value,
    });
    if (this.value.length === this.length) {
      this.completeEventEmitter.emit(this.value);
    }
  }
  /**
   * Synchronizes the rendered input elements with the controller's internal passcode values.
   */
  watchVegaInputValues() {
    for (let index = 0; index < this.length; index++) {
      if (this.inputPasscodeRenderer.getVegaInputRefs()[index]) {
        this.inputPasscodeRenderer.getVegaInputRefs()[index].value =
          this.vegaInputValues.get(index) || '';
      }
    }
    this.value = this.vegaInputValues.join('');
  }
  /**
   * initialize input values
   *
   * @param {string} value - the value to be initialized
   */
  setValuesArray(value) {
    const newValueArray = this.valueValidationFilter(value).slice(0, this.length).split('');
    this.vegaInputValues.setAll(newValueArray);
  }
  /**
   * Filters an input value according to the controller's input type.
   *
   * @param {string} value - The raw input string to validate and filter.
   * @returns {string} - The filtered string: white space free in text type, or digits-only otherwise.
   */
  valueValidationFilter(value) {
    return this.inputType === 'text' ? value.replace(/\s/g, '') : value.replace(/\D/g, '');
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-input-passcode-on-click-empty-input-field}
   */
  /* istanbul ignore next */
  /**
   * Searches through the input values and returns the index
   * of the first empty input.
   * Returns -1 if all inputs are filled.
   *
   * @returns {number} - the index of the first empty input field
   */
  getFirstEmptyIndex() {
    var _a;
    const { length } = this;
    const values = Array.from({ length }, (_, i) => this.vegaInputValues.get(i) || '');
    return (_a = values.findIndex((value) => !value || value === '')) !== null && _a !== void 0 ? _a : -1;
  }
}
__decorate$2([
  MapToComponentField()
], VegaInputPasscodeValueController.prototype, "host", void 0);
__decorate$2([
  MapToComponentField({ writable: true })
], VegaInputPasscodeValueController.prototype, "value", void 0);
__decorate$2([
  MapToComponentField({ writable: true })
], VegaInputPasscodeValueController.prototype, "vegaInputValues", void 0);
__decorate$2([
  MapToComponentField()
], VegaInputPasscodeValueController.prototype, "length", void 0);
__decorate$2([
  MapToComponentField()
], VegaInputPasscodeValueController.prototype, "inputType", void 0);
__decorate$2([
  MapToComponentField()
], VegaInputPasscodeValueController.prototype, "inputPasscodeRenderer", void 0);
__decorate$2([
  MapToComponentField()
], VegaInputPasscodeValueController.prototype, "changeEventEmitter", void 0);
__decorate$2([
  MapToComponentField()
], VegaInputPasscodeValueController.prototype, "completeEventEmitter", void 0);
__decorate$2([
  MapToComponentMethod('componentWillLoad')
], VegaInputPasscodeValueController.prototype, "componentWillLoad", null);
__decorate$2([
  MapToComponentMethod('watchValue')
], VegaInputPasscodeValueController.prototype, "watchValue", null);
__decorate$2([
  MapToComponentMethod('watchVegaInputValues')
], VegaInputPasscodeValueController.prototype, "watchVegaInputValues", null);

var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * Input passcode keyboard controller
 */
class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer {
  constructor() {
    super((target) => [
      {
        keyCode: 'Backspace',
        activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
        eventName: 'keydown',
        callback: 
        /* istanbul ignore next */
        /* eslint-disable jsdoc/require-jsdoc */
        (event) => {
          target.deletePasscode(event);
        },
      },
      {
        keyCode: ['ArrowLeft', 'ArrowRight'],
        activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
        eventName: 'keydown',
        callback: 
        /* istanbul ignore next */
        /* eslint-disable jsdoc/require-jsdoc */
        (event) => {
          target.controlDirectionByKeyboard(event);
        },
      },
    ]);
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-input-passcode-on-input-value-delete}
     */
    /* istanbul ignore next */
    /**
     * handle logic of delete input passcode values
     *
     * @param {KeyboardEvent} event - the keyboard event of delete
     */
    this.deletePasscode = (event) => {
      event.preventDefault();
      const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
      if (this.vegaInputValues.get(currentIndex)) {
        this.vegaInputValues.withMutation((arr) => {
          for (let index = currentIndex; index < this.length - 1; index++) {
            arr[index] = arr[index + 1];
          }
          arr[this.length - 1] = '';
        });
      }
      else if (!this.vegaInputValues.get(currentIndex) && currentIndex > 0) {
        this.vegaInputValues.set(currentIndex - 1, '');
        void this.inputPasscodeRenderer.getVegaInputRefs()[currentIndex - 1].doFocus();
      }
    };
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-input-passcode-on-arrow-keyboard-press}
   */
  /* istanbul ignore next */
  /**
   * handle logic of directions of ArrowLeft and ArrowRight
   *
   * @param {KeyboardEvent} event - the keyboard event of ArrowLeft and ArrowRight
   */
  controlDirectionByKeyboard(event) {
    event.preventDefault();
    const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
    const vegaInputRefs = this.inputPasscodeRenderer.getVegaInputRefs();
    if (event.key === 'ArrowLeft' && currentIndex > 0) {
      void vegaInputRefs[currentIndex - 1].doFocus();
    }
    if (event.key === 'ArrowRight' &&
      this.vegaInputValues.get(currentIndex) &&
      currentIndex < this.length - 1) {
      void vegaInputRefs[currentIndex + 1].doFocus();
    }
  }
}
__decorate$1([
  MapToComponentField()
], VegaInputPasscodeKeyboardController.prototype, "value", void 0);
__decorate$1([
  MapToComponentField()
], VegaInputPasscodeKeyboardController.prototype, "length", void 0);
__decorate$1([
  MapToComponentField()
], VegaInputPasscodeKeyboardController.prototype, "vegaInputValues", void 0);
__decorate$1([
  MapToComponentField()
], VegaInputPasscodeKeyboardController.prototype, "valueController", void 0);
__decorate$1([
  MapToComponentField()
], VegaInputPasscodeKeyboardController.prototype, "inputPasscodeRenderer", void 0);

/**
 * Immutable Array cannot be changed once created
 */
class ImmutableArray {
  /**
   * The constructor of ImmutableArray
   *
   * @typedef T generic type parameter
   * @param {T[]} initialArray - Optional initial array
   * @param {() => void} onMutate - Optional callback invoked with the new ImmutableArray whenever a mutation is performed
   */
  constructor(initialArray, onMutate) {
    this.length = 0;
    this.array = [];
    if (initialArray) {
      this.array = initialArray;
      this.length = initialArray.length;
    }
    if (onMutate) {
      this.onMutate = onMutate;
    }
  }
  /**
   * The function is called when the array is mutated
   *
   * @typedef T generic type parameter
   * @param {ImmutableArray<T>} _newArr - The new array that was created.
   */
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  onMutate(_newArr) {
    return;
  }
  /**
   * Append items to the array and return a new ImmutableArray
   *
   * @param {T[]} items - The items to be appended to the array
   * @returns {ImmutableArray<T>} - a new ImmutableArray with new items pushed.
   */
  push(...items) {
    return this.withMutation((arr) => {
      arr.push(...items);
    });
  }
  /**
   * Remove the last item from the array and return a new ImmutableArray.
   * If the array is empty, a new ImmutableArray with the same (empty) contents is returned.
   *
   * @returns {ImmutableArray<T>} - a new ImmutableArray with the last one popped
   */
  pop() {
    return this.withMutation((arr) => {
      if (arr.length > 0)
        arr.pop();
    });
  }
  /**
   * Update the item at the specified index and return a new ImmutableArray.
   * If the index is out of range, no change is made and a new ImmutableArray (same contents) is returned.
   *
   * @param {number} index - Index of the item to update.
   * @param {T} value - New value to set at the given index.
   * @returns {ImmutableArray<T>} - a new ImmutableArray with updated item.
   */
  set(index, value) {
    return this.withMutation((arr) => {
      if (index >= 0)
        arr[index] = value;
    });
  }
  /**
   * Set values from the provided array into this ImmutableArray one by one
   *
   * @param {T[]} values - Array of values to write into this array.
   * @returns {ImmutableArray<T>} - a new ImmutableArray with updated items.
   */
  setAll(values) {
    return this.withMutation((arr) => {
      arr.length = 0;
      for (let i = 0; i < values.length; i++) {
        arr[i] = values[i];
      }
    });
  }
  /**
   * Clear the array and return a new ImmutableArray
   *
   * @returns {ImmutableArray<T>} return a new ImmutableArray.
   */
  clear() {
    return this.withMutation((arr) => {
      arr.length = 0;
    });
  }
  /**
   * Performs a mutation on a copy of the internal array and returns a new ImmutableArray
   *
   * @param {(arr: T[]) => void} fn - (arr: T[]) => void
   * @returns {ImmutableArray<T>} A new ImmutableArray
   */
  withMutation(fn) {
    const newArr = [...this.array];
    fn(newArr);
    const newImmutable = new ImmutableArray(newArr, this.onMutate);
    this.onMutate(newImmutable);
    return newImmutable;
  }
  /**
   * Get item by index
   *
   * @param {number} index - index of the array items
   * @returns {T | undefined} The array item with the index
   */
  get(index) {
    return this.array[index];
  }
  /**
   * Join array elements into a string separated by the given separator.
   *
   * @param {string} [separator=','] - Separator to use between elements.
   * @returns {string} The joined string.
   */
  join(separator) {
    return this.array.join(separator);
  }
  /**
   * It returns an array of the values in the array
   *
   * @returns {T[]} An array of the values in the array.
   */
  toArray() {
    return this.array;
  }
}

const vegaInputPasscodeCss = ":host{display:inline-block}:host vega-field-label{margin-bottom:8px}:host vega-input::part(input-container){padding-left:0px;padding-right:0px}:host vega-input.small{width:38px;height:42px;box-sizing:border-box}:host vega-input.medium{width:42px;height:50px;box-sizing:border-box}:host vega-input::part(input){text-align:center}:host vega-input.small::part(input-container){padding-top:8px;padding-bottom:8px}:host vega-input.medium::part(input-container){padding-top:12px;padding-bottom:12px}:host .vega-input-passcode-container.error vega-input::part(input-container){border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-input-passcode-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-passcode-container.error vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));box-shadow:0 0 0}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:8px;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))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .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){:host .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){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}";

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 VegaInputPasscode = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.vegaChange = createEvent(this, "vegaChange", 7);
    this.change = createEvent(this, "change", 7);
    this.vegaComplete = createEvent(this, "vegaComplete", 7);
    this.complete = createEvent(this, "complete", 7);
    this.globalSlimmers = {};
    this.formFieldController = new FormFieldControllerSlimmer({
      propertyRules: [
        {
          propertyName: 'required',
          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
        },
      ],
      validationRulesName: 'validationRules',
      defaultValue: '',
      attributeGetter: (propertyName) => this[propertyName],
      inputContainerGetter: () => this.inputPasscodeRenderer.getInputPasscodeContainerRef(),
      touchableAreaGetter: () => [...this.inputPasscodeRenderer.getVegaInputRefs()],
    });
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.keyboardController = new VegaInputPasscodeKeyboardController();
    this.valueController = new VegaInputPasscodeValueController();
    this.inputPasscodeRenderer = new VegaInputPasscodeRenderer();
    this.changeEventEmitter = createEventEmitSlimmer(VegaInputPasscode, VegaChange);
    this.completeEventEmitter = createEventEmitSlimmer(VegaInputPasscode, VegaComplete);
    this.eventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, { useCapture: true });
    this.vegaInputValues = new ImmutableArray(new Array(), (newArr) => {
      this.vegaInputValues = newArr;
    });
    /**
     * Specifies the visible label text rendered above the passcode input.
     * The label identifies the purpose of the field (e.g., "Enter verification
     * code") and serves as the accessible name for screen readers.
     *
     * @default ''
     * @vegaVersion 2.66.0
     */
    this.label = '';
    /**
     * Specifies whether the passcode input is disabled. When `true`, all
     * individual input boxes become non-interactive — the user cannot type,
     * paste, or focus any box.
     *
     * @default false
     * @vegaVersion 2.66.0
     */
    this.disabled = false;
    /**
     * Controls the visual size of the passcode input boxes.
     *
     * - `'medium'` — Standard height, suitable for most form layouts.
     * - `'small'` — Compact height, useful for dense UIs.
     *
     * @default 'medium'
     * @vegaVersion 2.66.0
     */
    this.size = 'medium';
    /**
     * Supplementary helper message displayed below the passcode input that
     * assists users in understanding the expected input. For example,
     * `'Enter the 4-digit code sent to your email'`.
     *
     * @default ''
     * @vegaVersion 2.66.0
     */
    this.hint = '';
    /**
     * Specifies the number of individual input boxes rendered for the passcode.
     * Each box accepts a single character. Common values are `4` for a PIN and
     * `6` for a two-factor authentication code.
     *
     * @default 4
     * @vegaVersion 2.66.0
     */
    this.length = 4;
    /**
     * Specifies the type of characters accepted by each passcode box.
     *
     * - `'numeric'` — Only digits `0`–`9` are accepted.
     * - `'text'` — Any non-space character is accepted.
     *
     * Spaces are always rejected regardless of the selected type.
     *
     * @default 'numeric'
     * @vegaVersion 2.66.0
     */
    this.inputType = 'numeric';
    /**
     * The current value of the passcode input, represented as a concatenated
     * string of all box values (e.g., `'1234'` for a 4-digit passcode).
     *
     * This property is mutable and reflected to the host element attribute.
     * It updates as the user types into the boxes and can be set externally
     * to pre-populate or reset the field.
     *
     * @default ''
     * @vegaVersion 2.66.0
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.value = '';
    /**
     * Determines whether the passcode field must have a value before the form
     * can be submitted. When `true`, the built-in `RequiredFieldRule` is
     * applied during validation and a required indicator is shown on the label.
     *
     * @default false
     * @vegaVersion 2.66.0
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.required = false;
    /**
     * An array of custom validation rules applied to the passcode input in
     * addition to the built-in `RequiredFieldRule`. Each rule must implement
     * the `FormFieldValidationRule` interface.
     *
     * Rules are evaluated in order when `autoValidation` is enabled or when
     * validation is triggered programmatically.
     *
     * @default []
     * @vegaVersion 2.66.0
     */
    this.validationRules = [];
    /**
     * Determines whether the passcode input should be validated automatically
     * as the user types. When `true`, validation rules (including `required`
     * and custom `validationRules`) are evaluated and the `isValid` property
     * is updated accordingly.
     *
     * Set to `false` to handle validation manually.
     *
     * @default true
     * @vegaVersion 2.66.0
     */
    this.autoValidation = true;
    /**
     * Reflects the current validation status of the passcode input.
     *
     * - `true` — the field value passes all validation rules.
     * - `false` — one or more validation rules have failed.
     * - `null` — the field has not been validated yet (initial state).
     *
     * This property is mutable: it is updated automatically when
     * `autoValidation` is enabled, but can also be set manually to override
     * the validation state.
     *
     * @default null
     * @vegaVersion 2.66.0
     */
    /* eslint-disable-next-line @stencil/strict-mutable */
    this.isValid = null;
  }
  watchVegaInputValues() {
  }
  watchLengthAndInputType() {
  }
  watchValue() {
  }
  watchValidationRules() {
  }
  render() {
    return sanitizeVegaComponent(this.inputPasscodeRenderer.render(), this.host);
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "vegaInputValues": ["watchVegaInputValues"],
    "length": ["watchLengthAndInputType"],
    "inputType": ["watchLengthAndInputType"],
    "value": ["watchValue"],
    "validationRules": ["watchValidationRules"]
  }; }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaInputPasscode.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "formFieldController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "keyboardController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "valueController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "inputPasscodeRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "changeEventEmitter", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "completeEventEmitter", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaInputPasscode.prototype, "eventPreventSlimmer", void 0);
VegaInputPasscode.style = vegaInputPasscodeCss;

export { VegaInputPasscode as vega_input_passcode };
