import { n as u, e as h, a as d } from "./provide-91b7b1ec.mjs";
import { P as f, x as y, n as l } from "./plus-base-10eea8a6.mjs";
import { e as b } from "./custom-element-eaccb8d2.mjs";
import { t as c } from "./state-f0bfed48.mjs";
import { s as m } from "./index-975d3293.mjs";
const x = m({
  slots: {
    base: "flex flex-col min-w-96 items-center justify-center relative"
  },
  variants: {
    size: {
      sm: {
        base: []
      },
      md: {
        base: []
      },
      lg: {
        base: []
      }
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md"
  }
});
var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, r, i, p) => {
  for (var s = p > 1 ? void 0 : p ? v(r, i) : r, a = e.length - 1, n; a >= 0; a--)
    (n = e[a]) && (s = (p ? n(r, i, s) : n(s)) || s);
  return p && s && $(r, i, s), s;
};
const g = u("selectContext");
let t = class extends f {
  constructor() {
    super(...arguments), this.position = "bottom-start", this.size = "md", this.placeholder = "", this.error = !1, this.clearable = !1, this.selected = "", this.open = !1, this.context = {
      onSelect: (e) => {
        var i;
        const r = (i = this.context) == null ? void 0 : i.slot;
        r == null || r.forEach((p) => {
          var s;
          p.active = p.id == e, p.active && (this.selected = ((s = p.textContent) == null ? void 0 : s.trim()) ?? "");
        }), this.emit("plus-select-change", { detail: { id: e } });
      },
      size: this.size
    };
  }
  connectedCallback() {
    var e;
    super.connectedCallback(), (e = this.input) == null || e.then((r) => {
      this.inputWrapper = new Promise((i) => {
        var s;
        const p = (s = r.shadowRoot) == null ? void 0 : s.querySelector(".input-wrapper");
        i(p);
      });
    });
  }
  update(e) {
    super.update(e);
  }
  render() {
    const { base: e } = x();
    return y`<div class=${e()}>
      <plus-input
        class="plus-input"
        full-width
        readonly
        .value=${this.selected}
        .error=${this.error}
        .caption=${this.caption}
        .clearable=${this.clearable}
        .disabled=${this.disabled}
        .size=${this.size}
        .laceholder=${this.placeholder}
        .label=${this.label}
        .required=${this.required}
      >
        <i slot="suffix" class=${this.open ? "fas fa-angle-up" : "fas fa-angle-down"}></i>
      </plus-input>
      <plus-sticky-box class="plus-sticky-box" .target=${this.inputWrapper} .position=${this.position} @plus-sticky-box-change=${({ detail: { open: r } }) => this.open = r}>
        <slot></slot>
      </plus-sticky-box>
    </div> `;
  }
};
o([
  h(".plus-input")
], t.prototype, "input", 2);
o([
  l({ attribute: !1 })
], t.prototype, "position", 2);
o([
  l({ type: String })
], t.prototype, "size", 2);
o([
  l()
], t.prototype, "placeholder", 2);
o([
  l({ type: String })
], t.prototype, "label", 2);
o([
  l({ type: Boolean, converter: (e) => e != "false" })
], t.prototype, "error", 2);
o([
  l({ type: String })
], t.prototype, "caption", 2);
o([
  l({ type: Boolean })
], t.prototype, "clearable", 2);
o([
  c()
], t.prototype, "selected", 2);
o([
  c()
], t.prototype, "open", 2);
o([
  c()
], t.prototype, "inputWrapper", 2);
o([
  d({ context: g })
], t.prototype, "context", 2);
t = o([
  b("plus-select")
], t);
export {
  t as SelectComponent,
  g as selectContext
};
