import {
  defaultDocument,
  defaultWindow,
  reactiveOmit,
  useEventListener,
  usePrevious
} from "./chunk-3N7LPPPD.js";
import {
  useForwardProps
} from "./chunk-Y6VANI34.js";
import {
  Fragment,
  computed,
  createBaseVNode,
  createBlock,
  createCommentVNode,
  createElementBlock,
  defineComponent,
  h,
  inject,
  mergeModels,
  mergeProps,
  normalizeClass,
  normalizeStyle,
  onMounted,
  onUnmounted,
  openBlock,
  provide,
  ref,
  renderSlot,
  shallowRef,
  unref,
  useModel,
  watch,
  watchEffect
} from "./chunk-YTEMLF43.js";
import "./chunk-G3PMV62Z.js";

// node_modules/vue-input-otp/dist/index.js
var NOSCRIPT_CSS_FALLBACK = `
[data-input-otp] {
  --nojs-bg: white !important;
  --nojs-fg: black !important;

  background-color: var(--nojs-bg) !important;
  color: var(--nojs-fg) !important;
  caret-color: var(--nojs-fg) !important;
  letter-spacing: .25em !important;
  text-align: center !important;
  border: 1px solid var(--nojs-fg) !important;
  border-radius: 4px !important;
  width: 100% !important;
}
@media (prefers-color-scheme: dark) {
  [data-input-otp] {
    --nojs-bg: black !important;
    --nojs-fg: white !important;
  }
}`;
var NoSciptCssFallback = defineComponent({
  props: { fallback: {
    type: String,
    required: true
  } },
  setup(props) {
    return () => h("noscript", { innerHTML: `<style>${props.fallback}</style>` });
  }
});
var PublicVueOTPContextKey = /* @__PURE__ */ Symbol("vue-otp-context");
function syncTimeouts(cb) {
  return [
    setTimeout(cb, 0),
    setTimeout(cb, 10),
    setTimeout(cb, 50)
  ];
}
var PWM_BADGE_MARGIN_RIGHT = 18;
var PWM_BADGE_SPACE_WIDTH_PX = 40;
var PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
var PASSWORD_MANAGERS_SELECTORS = [
  "[data-lastpass-icon-root]",
  "com-1password-button",
  "[data-dashlanecreated]",
  '[style$="2147483647 !important;"]'
].join(",");
function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused }) {
  const pwmMetadata = ref({
    done: false,
    refocused: false
  });
  const hasPWMBadge = ref(false);
  const hasPWMBadgeSpace = ref(false);
  const done = ref(false);
  const willPushPWMBadge = computed(() => {
    if (pushPasswordManagerStrategy === "none") return false;
    return (pushPasswordManagerStrategy === "increase-width" || pushPasswordManagerStrategy === "experimental-no-flickering") && hasPWMBadge.value && hasPWMBadgeSpace.value;
  });
  const trackPWMBadge = () => {
    const container = containerRef.value;
    const input = inputRef.value;
    if (!container || !input || done.value || pushPasswordManagerStrategy === "none") return;
    const elementToCompare = container;
    const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
    const centereredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
    const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
    const y = centereredY;
    if (document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS).length === 0) {
      if (document.elementFromPoint(x, y) === container) return;
    }
    hasPWMBadge.value = true;
    done.value = true;
    if (!pwmMetadata.value.refocused && document.activeElement === input) {
      const sel = [input.selectionStart, input.selectionEnd];
      input.blur();
      input.focus();
      input.setSelectionRange(sel[0], sel[1]);
      pwmMetadata.value.refocused = true;
    }
  };
  const checkHasSpace = () => {
    const container = containerRef.value;
    if (!container || pushPasswordManagerStrategy === "none") return;
    hasPWMBadgeSpace.value = window.innerWidth - container.getBoundingClientRect().right >= PWM_BADGE_SPACE_WIDTH_PX;
  };
  let spaceInterval;
  onMounted(() => {
    checkHasSpace();
    spaceInterval = setInterval(checkHasSpace, 1e3);
  });
  onUnmounted(() => {
    clearInterval(spaceInterval);
  });
  watch([isFocused, inputRef], (newValues, _, onInvalidate) => {
    const [newIsFocused, newInputRef] = newValues;
    const _isFocused = newIsFocused || document.activeElement === newInputRef;
    if (pushPasswordManagerStrategy === "none" || !_isFocused) return;
    const t1 = setTimeout(trackPWMBadge, 0);
    const t2 = setTimeout(trackPWMBadge, 2e3);
    const t3 = setTimeout(trackPWMBadge, 5e3);
    const t4 = setTimeout(() => {
      done.value = true;
    }, 6e3);
    onInvalidate(() => {
      clearTimeout(t1);
      clearTimeout(t2);
      clearTimeout(t3);
      clearTimeout(t4);
    });
  });
  return {
    hasPWMBadge,
    willPushPWMBadge,
    PWM_BADGE_SPACE_WIDTH
  };
}
var _hoisted_1 = { style: {
  "position": "absolute",
  "inset": "0",
  "pointer-events": "none"
} };
var _hoisted_2 = [
  "value",
  "data-input-otp-placeholder-shown",
  "data-input-otp-mss",
  "data-input-otp-mse",
  "aria-placeholder",
  "pattern"
];
var _sfc_main = defineComponent({
  name: "OTPInput",
  inheritAttrs: false,
  __name: "OTPInput",
  props: mergeModels({
    maxlength: {},
    textAlign: { default: "left" },
    inputmode: { default: "numeric" },
    containerClass: {},
    pushPasswordManagerStrategy: { default: "increase-width" },
    noScriptCssFallback: { default: NOSCRIPT_CSS_FALLBACK },
    defaultValue: { default: "" },
    pasteTransformer: {},
    accept: {},
    alt: {},
    autocomplete: { default: "one-time-code" },
    autofocus: { type: Boolean },
    capture: { type: [Boolean, String] },
    checked: { type: [
      Boolean,
      Array,
      Set
    ] },
    crossorigin: {},
    disabled: { type: Boolean },
    enterKeyHint: {},
    form: {},
    formaction: {},
    formenctype: {},
    formmethod: {},
    formnovalidate: { type: Boolean },
    formtarget: {},
    height: {},
    indeterminate: { type: Boolean },
    list: {},
    max: {},
    min: {},
    minlength: {},
    multiple: { type: Boolean },
    name: {},
    pattern: {},
    placeholder: {},
    readonly: { type: Boolean },
    required: { type: Boolean },
    size: {},
    src: {},
    step: {},
    type: {},
    value: {},
    width: {}
  }, {
    "modelValue": { default(props) {
      return props.defaultValue;
    } },
    "modelModifiers": {}
  }),
  emits: mergeModels([
    "complete",
    "change",
    "select",
    "input",
    "focus",
    "blur",
    "mouseover",
    "mouseleave",
    "paste"
  ], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const [internalValue] = useModel(__props, "modelValue");
    const previousValue = usePrevious(internalValue);
    const regexp = computed(() => props.pattern ? typeof props.pattern === "string" ? new RegExp(props.pattern) : props.pattern : null);
    const isHoveringInput = shallowRef(false);
    const isFocused = shallowRef(false);
    const mirrorSelectionStart = shallowRef(null);
    const mirrorSelectionEnd = shallowRef(null);
    const inputRef = shallowRef(null);
    const containerRef = shallowRef(null);
    const isIOS = defaultWindow?.CSS?.supports?.("-webkit-touch-callout", "none");
    let inputMetadataRef = { prev: [
      inputRef.value?.selectionStart,
      inputRef.value?.selectionEnd,
      inputRef.value?.selectionDirection
    ] };
    function safeInsertRule(sheet, rule) {
      try {
        sheet.insertRule(rule);
      } catch {
        console.error("input-otp could not insert CSS rule:", rule);
      }
    }
    onMounted(() => {
      const input = inputRef.value;
      const container = containerRef.value;
      if (!input || !container) return;
      inputMetadataRef.prev = [
        input.selectionStart,
        input.selectionEnd,
        input.selectionDirection ?? "none"
      ];
      const removeSelectionchangeListener = useEventListener(defaultDocument, "selectionchange", onDocumentSelectionChange, { capture: true });
      function onDocumentSelectionChange() {
        if (!input) return;
        if (defaultDocument?.activeElement !== input) {
          mirrorSelectionStart.value = null;
          mirrorSelectionEnd.value = null;
          return;
        }
        const _s = input.selectionStart;
        const _e = input.selectionEnd;
        const _dir = input.selectionDirection;
        const _ml = input.maxLength;
        const _val = input.value;
        const _prev = inputMetadataRef.prev;
        let start = -1;
        let end = -1;
        let direction = void 0;
        if (_val.length !== 0 && _s !== null && _e !== null) {
          const isSingleCaret = _s === _e;
          const isInsertMode = _s === _val.length && _val.length < _ml;
          if (isSingleCaret && !isInsertMode) {
            const c = _s;
            if (c === 0) {
              start = 0;
              end = 1;
              direction = "forward";
            } else if (c === _ml) {
              start = c - 1;
              end = c;
              direction = "backward";
            } else if (_ml > 1 && _val.length > 1) {
              let offset = 0;
              if (_prev[0] !== null && _prev[1] !== null) {
                direction = c < _prev[1] ? "backward" : "forward";
                const wasPreviouslyInserting = _prev[0] === _prev[1] && _prev[0] < _ml;
                if (direction === "backward" && !wasPreviouslyInserting) offset = -1;
              }
              start = offset + c;
              end = offset + c + 1;
            }
          }
          if (start !== -1 && end !== -1 && start !== end) input.setSelectionRange(start, end, direction);
        }
        const s = start !== -1 ? start : _s;
        const e = end !== -1 ? end : _e;
        const dir = direction ?? _dir;
        mirrorSelectionStart.value = s;
        mirrorSelectionEnd.value = e;
        inputMetadataRef.prev = [
          s,
          e,
          dir
        ];
      }
      onDocumentSelectionChange();
      if (defaultDocument?.activeElement === input) isFocused.value = true;
      if (!defaultDocument?.getElementById("input-otp-style")) {
        const styleEl = defaultDocument?.createElement("style");
        styleEl.id = "input-otp-style";
        defaultDocument?.head.appendChild(styleEl);
        if (styleEl.sheet) {
          const autofillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
          safeInsertRule(styleEl.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }");
          safeInsertRule(styleEl.sheet, `[data-input-otp]:autofill { ${autofillStyles} }`);
          safeInsertRule(styleEl.sheet, `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`);
          safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
          safeInsertRule(styleEl.sheet, `[data-input-otp] + * { pointer-events: all !important; }`);
        }
      }
      const updateRootHeight = () => {
        if (container) container.style.setProperty("--root-height", `${input.clientHeight}px`);
      };
      updateRootHeight();
      const resizeObserver = new ResizeObserver(updateRootHeight);
      resizeObserver.observe(input);
      onUnmounted(() => {
        removeSelectionchangeListener();
        resizeObserver.disconnect();
      });
    });
    watch([internalValue], () => {
      syncTimeouts(() => {
        if (!inputRef.value) return;
        inputRef.value?.dispatchEvent(new Event("input"));
        const s = inputRef.value?.selectionStart;
        const e = inputRef.value?.selectionEnd;
        const dir = inputRef.value?.selectionDirection;
        if (s !== null && e !== null) {
          mirrorSelectionStart.value = s ?? null;
          mirrorSelectionEnd.value = e ?? null;
          inputMetadataRef.prev = [
            s,
            e,
            dir
          ];
        }
      });
    }, { immediate: true });
    watchEffect(() => {
      if (previousValue.value === void 0) return;
      if (internalValue.value !== previousValue.value && previousValue.value.length < props.maxlength && internalValue.value.length === props.maxlength) emit("complete", internalValue.value);
    });
    const pwmb = usePasswordManagerBadge({
      containerRef,
      inputRef,
      pushPasswordManagerStrategy: props.pushPasswordManagerStrategy,
      isFocused
    });
    function _beforeInputListener(e) {
      if (e.inputType === "insertText" && e.data !== null) {
        const target = e.currentTarget;
        const start = target.selectionStart ?? 0;
        const end = target.selectionEnd ?? 0;
        const currentValue = target.value;
        const newValue = (start !== end ? currentValue.slice(0, start) + e.data + currentValue.slice(end) : currentValue.slice(0, start) + e.data + currentValue.slice(start)).slice(0, props.maxlength);
        if (newValue.length > 0 && regexp.value && !regexp.value.test(newValue)) e.preventDefault();
      }
    }
    function _inputListener(e) {
      const newValue = e.currentTarget.value.slice(0, props.maxlength);
      if (newValue.length > 0 && regexp.value && !regexp.value.test(newValue)) {
        e.preventDefault();
        return;
      }
      if (typeof previousValue.value === "string" && newValue.length < previousValue.value.length) defaultDocument?.dispatchEvent(new Event("selectionchange"));
      internalValue.value = newValue;
      emit("input", newValue);
    }
    function _focusListener() {
      const input = inputRef.value;
      if (input) {
        const start = Math.min(input.value.length, props.maxlength - 1);
        const end = input.value.length;
        input.setSelectionRange(start, end);
        mirrorSelectionStart.value = start;
        mirrorSelectionEnd.value = end;
      }
      isFocused.value = true;
    }
    function _pasteListener(e) {
      const input = inputRef.value;
      if (!input) return;
      if (!props.pasteTransformer && (!isIOS || !e.clipboardData || !input)) return;
      const _content = e?.clipboardData?.getData("text/plain");
      const content = props?.pasteTransformer ? props.pasteTransformer(_content) : _content;
      e.preventDefault();
      const start = inputRef.value?.selectionStart;
      const end = inputRef.value?.selectionEnd;
      const newValue = (start !== end ? internalValue.value.slice(0, start) + content + internalValue.value.slice(end) : internalValue.value.slice(0, start) + content + internalValue.value.slice(start)).slice(0, props.maxlength);
      if (newValue.length > 0 && regexp.value && !regexp.value.test(newValue)) return;
      internalValue.value = newValue;
      emit("input", newValue);
      const _start = Math.min(newValue.length, props.maxlength - 1);
      const _end = newValue.length;
      input?.setSelectionRange(_start, _end);
      mirrorSelectionStart.value = _start;
      mirrorSelectionEnd.value = _end;
    }
    const inputProps = useForwardProps(reactiveOmit(props, "containerClass", "value", "pattern", "defaultValue", "pushPasswordManagerStrategy", "noScriptCssFallback", "modelValue"));
    const rootStyle = computed(() => ({
      position: "relative",
      cursor: props.disabled ? "default" : "text",
      userSelect: "none",
      WebkitUserSelect: "none",
      pointerEvents: "none"
    }));
    const inputStyle = computed(() => ({
      position: "absolute",
      inset: 0,
      width: pwmb.willPushPWMBadge.value ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})` : "100%",
      clipPath: pwmb.willPushPWMBadge.value ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0,
      height: "100%",
      display: "flex",
      textAlign: props.textAlign,
      opacity: "1",
      color: "transparent",
      pointerEvents: "all",
      background: "transparent",
      caretColor: "transparent",
      border: "0 solid transparent",
      outline: "0 solid transparent",
      boxShadow: "none",
      lineHeight: "1",
      letterSpacing: "-.5em",
      fontSize: "var(--root-height)",
      fontFamily: "monospace",
      fontVariantNumeric: "tabular-nums"
    }));
    const contextValue = computed(() => {
      return {
        slots: Array.from({ length: Number(props.maxlength) }).map((_, slotIdx) => {
          const isActive = isFocused.value && mirrorSelectionStart.value !== null && mirrorSelectionEnd.value !== null && (mirrorSelectionStart.value === mirrorSelectionEnd.value && slotIdx === mirrorSelectionStart.value || slotIdx >= mirrorSelectionStart.value && slotIdx < mirrorSelectionEnd.value);
          const char = internalValue.value[slotIdx] !== void 0 ? internalValue.value[slotIdx] : null;
          return {
            char,
            placeholderChar: char ?? props?.placeholder?.[slotIdx] ?? null,
            isActive,
            hasFakeCaret: isActive && char === null
          };
        }),
        isFocused: isFocused.value,
        isHovering: !props.disabled && isHoveringInput.value
      };
    });
    provide(PublicVueOTPContextKey, contextValue);
    __expose(Object.defineProperty({}, "$el", {
      enumerable: true,
      configurable: true,
      get: () => inputRef
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [__props.noScriptCssFallback !== null ? (openBlock(), createBlock(unref(NoSciptCssFallback), {
        key: 0,
        fallback: __props.noScriptCssFallback
      }, null, 8, ["fallback"])) : createCommentVNode("v-if", true), createBaseVNode("div", {
        ref_key: "containerRef",
        ref: containerRef,
        "data-input-otp-container": "",
        style: normalizeStyle(rootStyle.value),
        class: normalizeClass(__props.containerClass)
      }, [renderSlot(_ctx.$slots, "default", {
        slots: contextValue.value.slots,
        isFocused: isFocused.value,
        isHovering: !__props.disabled && isHoveringInput.value
      }), createBaseVNode("div", _hoisted_1, [createBaseVNode("input", mergeProps({
        ref_key: "inputRef",
        ref: inputRef,
        value: unref(internalValue),
        "data-input-otp": "",
        "data-input-otp-placeholder-shown": unref(internalValue).length === 0 || void 0,
        "data-input-otp-mss": mirrorSelectionStart.value,
        "data-input-otp-mse": mirrorSelectionEnd.value,
        "aria-placeholder": __props.placeholder,
        style: inputStyle.value,
        pattern: regexp.value?.source
      }, {
        ..._ctx.$attrs,
        ...unref(inputProps)
      }, {
        onBeforeinput: _beforeInputListener,
        onMouseover: _cache[0] || (_cache[0] = (e) => {
          isHoveringInput.value = true;
          emit("mouseover", e);
        }),
        onMouseleave: _cache[1] || (_cache[1] = (e) => {
          isHoveringInput.value = false;
          emit("mouseleave", e);
        }),
        onPaste: _cache[2] || (_cache[2] = (e) => {
          _pasteListener(e);
          emit("paste", e);
        }),
        onInput: _inputListener,
        onFocus: _cache[3] || (_cache[3] = (e) => {
          _focusListener();
          emit("focus", e);
        }),
        onBlur: _cache[4] || (_cache[4] = (e) => {
          isFocused.value = false;
          emit("blur", e);
        })
      }), null, 16, _hoisted_2)])], 6)], 64);
    };
  }
});
var OTPInput_default = _sfc_main;
var REGEXP_ONLY_DIGITS = "^\\d+$";
var REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
var REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
function useVueOTPContext() {
  return inject(PublicVueOTPContextKey);
}
export {
  OTPInput_default as OTPInput,
  PublicVueOTPContextKey,
  REGEXP_ONLY_CHARS,
  REGEXP_ONLY_DIGITS,
  REGEXP_ONLY_DIGITS_AND_CHARS,
  useVueOTPContext
};
//# sourceMappingURL=vue-input-otp.js.map
