@globalpayments/vega 2.64.0 → 2.66.0

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

@@ -0,0 +1,720 @@
+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-a84cc93e.js';
+import { s as sanitizeVegaComponent } from './component-7d906393.js';
+import { D as DomNodeSubjectObserverFactory, C as VegaFocus, E as VegaBlur, f as VegaChange, F as VegaPaste, G as VegaComplete } from './dom-node-subject-observer-factory-dca87b70.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-28fd360c.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-f39214e4.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-735cb880.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-b23d9ff3.js';
+import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
+import './observer-3959f9dd.js';
+import './ui-bb99c0c2.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-a5a5938d.js';
+import './try-get-document-bef0f526.js';
+import './keyboard-manager-5d8f3582.js';
+import './type-guard-12f7654b.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './typography-396de03f.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-51659753.js';
+import './index-e9da316f.js';
+import './_commonjsHelpers-9943807e.js';
+import './string-a953eafc.js';
+import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
+import './vega-internal-event-id-5c3e5f7f.js';
+import './translation-f10b1e19.js';
+import './page-resize-observer-slimmer-0bf7fbf3.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-3504e2f2.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, tabIndex: index !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', 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", 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 }));
+  }
+  /*
+   * 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, "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()],
+        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) {
+    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 label or title for the input passcode.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the input passcode.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.label = '';
+    /**
+     * Determines whether the input passcode is disabled.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.disabled = false;
+    /**
+     * Defines the size of the input passcode,
+     *    specifying its width or length.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.size = 'medium';
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input passcode.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.hint = '';
+    /**
+     * Specifies the number of input boxes to display.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.length = 4;
+    /**
+     * Specifies the input type of the input passcode
+     *    Numeric type: only 0-9 are accepted
+     *    Text type: any non-space character is accepted
+     *    Spaces are rejected for all types
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.inputType = 'numeric';
+    /**
+     * Specifies the value of the input passcode.
+     *
+     * @vegaVersion 2.66.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = '';
+    /**
+     * Determines whether the input passcode field is required.
+     *
+     * @vegaVersion 2.66.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Defines custom validation rules for the input passcode.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.validationRules = [];
+    /**
+     * Determines whether the input passcode should undergo automatic validation
+     *    during the user's input.
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the validation status of the input passcode.
+     *
+     * @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 };