import { r as h, c as m, h as n, H as p, g as d } from "./index.61732cef.js";
import { c as f } from "./index-orsBiyT_.fc4357c3.js";
import { p as r, i as o, f as l, I as a } from "./index-D3UoejeY.7db8c51e.js";
import { D as g } from "./media-query.service-CCYT6DU8.f0931fdc.js";
import "react";
import "react-dom";
import "./utils-CCck-DTo.e4e43b6a.js";
const b = () => ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}", u = "HH:mm:ss", w = class {
  constructor(t) {
    h(this, t), this.inputBlur = m(this, "inputBlur", 7), this.inputFocus = m(this, "inputFocus", 7), this.valueChange = m(this, "valueChange", 7), this.format = "HH:mm", this.placeholder = "hh:mm", this.iconSize = 24, this.mediaQueryUnsubscribe = () => {
    }, this.onBlur = (e) => {
      this.inputBlur.emit(e);
    }, this.onClick = (e) => {
      e.preventDefault();
    }, this.onFocus = (e) => {
      this.inputFocus.emit(e), this.handleAutoSelect(e);
    };
  }
  componentWillLoad() {
    const t = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
    this.id = `swirl-time-input-${t}`;
  }
  componentDidLoad() {
    this.setupMask(), this.mediaQueryUnsubscribe = g.subscribe((t) => {
      this.updateIconSize(t);
    }), this.autoFocus && setTimeout(() => {
      this.inputEl.focus();
    });
  }
  disconnectedCallback() {
    var t;
    (t = this.mask) == null || t.destroy(), this.mediaQueryUnsubscribe();
  }
  watchFormat() {
    this.setupMask();
  }
  watchValue(t, e) {
    if (t !== e)
      if (this.valueChange.emit(t), this.mask && t) {
        const i = this.getPattern();
        let s = r(t, u, new Date());
        if (o(s) || (s = r(t, i, new Date())), o(s)) {
          const c = l(s, i);
          this.mask.value = c;
        }
      } else
        this.mask && !t && (this.mask.value = "");
  }
  updateIconSize(t) {
    this.iconSize = t ? 20 : 24;
  }
  getPattern() {
    return this.format.replace(new RegExp("(?<!H)H(?!H)", "g"), "HH").replace(new RegExp("(?<!h)h(?!h)", "g"), "hh").replace(new RegExp("(?<!m)m(?!m)", "g"), "mm").replace(new RegExp("(?<!s)s(?!s)", "g"), "ss").replace(new RegExp("(?<!a)a(?!a)", "g"), "aa");
  }
  handleAutoSelect(t) {
    if (!this.autoSelect) {
      setTimeout(() => {
        t.target && t.target instanceof HTMLInputElement && t.target.setSelectionRange && t.target.setSelectionRange(0, 0);
      });
      return;
    }
    t.target && t.target instanceof HTMLInputElement && t.target.select();
  }
  setupMask() {
    var e;
    (e = this.mask) == null || e.destroy();
    const t = this.getPattern();
    if (this.mask = a(this.inputEl, {
      mask: Date,
      pattern: t.replace(/([^A-Za-z0-9])/g, "$1`"),
      autofix: "pad",
      lazy: !0,
      overwrite: !0,
      eager: "append",
      prepareChar: (i) => i.toUpperCase(),
      blocks: {
        HH: {
          mask: a.MaskedRange,
          from: 0,
          to: 23,
          maxLength: 2
        },
        hh: {
          mask: a.MaskedRange,
          from: 1,
          to: 12,
          maxLength: 2
        },
        mm: {
          mask: a.MaskedRange,
          from: 0,
          to: 59,
          maxLength: 2
        },
        ss: {
          mask: a.MaskedRange,
          from: 0,
          to: 59,
          maxLength: 2
        },
        aa: {
          mask: a.MaskedEnum,
          enum: ["AM", "PM"],
          maxLength: 2
        }
      },
      format: (i) => o(i) ? (this.value = l(i, u), l(i, t)) : "",
      parse: (i) => r(i, t, new Date())
    }), this.value) {
      const i = r(this.value, u, new Date());
      if (o(i)) {
        const s = l(i, t);
        this.mask.value = s;
      }
    }
  }
  render() {
    const t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = f("time-input", {
      "time-input--inline": this.inline
    });
    return n(p, { key: "e6c60f9bb0a282a93dffcf41a5a458c6a7d97885" }, n("div", { key: "ad6b2b03583c711dc1820a64cc420e7c203825a2", class: e }, n("input", { key: "c5b1b1065e3febd3845892ebe340d6aa4be6374f", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": t, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (i) => this.inputEl = i, required: this.required, type: "text", readonly: this.readonly }), n("span", { key: "4ef211f85e286729288a72d31b97e589e7ca4b65", class: "time-input__icon" }, n("swirl-icon-time-outlined", { key: "af3343d4e8c30eeec9519c7998f57a20f172d8a2", size: this.iconSize }))));
  }
  get el() {
    return d(this);
  }
  static get watchers() {
    return {
      format: [{
        watchFormat: 0
      }],
      value: [{
        watchValue: 0
      }]
    };
  }
};
w.style = b();
export {
  w as swirl_time_input
};
