import { r as u, s as c, u as m, y as d, e as b, g as v } from "./base-408a2cb0.js";
import { e as a } from "./property-ca27685b.js";
const g = `.sil-select{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-select,.sil-select *{box-sizing:border-box}.sil-select__input{background-color:var(--input-field--background-color, var(--background, transparent));border-radius:var(--border-radius-top-left, var(--input-field--border-radius, var(--border-radius, .25em))) var(--border-radius-top-right, var(--input-field--border-radius, var(--border-radius, .25em))) var(--border-radius-bottom-left, var(--input-field--border-radius, var(--border-radius, .25em))) var(--border-radius-bottom-right, var(--input-field--border-radius, var(--border-radius, .25em)));position:relative;border:var(--input-field--border-width, 2px) solid var(--input-field--border-color, var(--foreground, currentColor))}.sil-select__input:has(:focus){outline:none;border-color:var(--primary, lightblue)}.sil-select__control{width:100%;padding:var(--input-field--padding, 1em);font-family:var(--input-field--font-family, .75em 1em);font-size:1em;border:none;color:var(--input-field--text-color, var(--foreground, #fff));background-color:transparent}.sil-select__control:focus{outline:none;border-color:rgba(var(--primary-r),var(--primary-g),var(--primary-b),.5)}.sil-select__input:before{content:"";aspect-ratio:1/1;height:100%;position:absolute;right:0;top:0;mask-image:url("data:image/svg+xml,%3Csvg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' fill='\${color}' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='36,54 6.2,24.2 11.8,18.5 36,42.7 60.2,18.5 65.8,24.2 '/%3E%3C/g%3E%3C/svg%3E%0A");mask-position:center center;mask-size:1em 1em;mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' fill='\${color}' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='36,54 6.2,24.2 11.8,18.5 36,42.7 60.2,18.5 65.8,24.2 '/%3E%3C/g%3E%3C/svg%3E%0A");-webkit-mask-position:center center;-webkit-mask-size:1em 1em;-webkit-mask-repeat:no-repeat;background-color:#fff}.sil-select__control{-webkit-appearance:none;-moz-appearance:none;appearance:none}.sil-select__label{padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}.sil-select__preview{padding:var(--input-field--preview-opacity, .5)}
`;
var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, t, s, l) => {
  for (var i = l > 1 ? void 0 : l ? w(t, s) : t, n = e.length - 1, p; n >= 0; n--)
    (p = e[n]) && (i = (l ? p(t, s, i) : p(i)) || i);
  return l && i && f(t, s, i), i;
};
let r = class extends c {
  constructor() {
    super(...arguments), this.label = "", this.value = "", this.required = !1, this.preview = !1, this.items = [{ name: "", value: "" }];
  }
  handleChange(e) {
    this.value = e.target.value;
  }
  render() {
    const e = m(v("select"));
    return d`
      <div class="${e()}">
        ${this.preview ? `<div class="${e("preview")}">${this.value}</div>` : null}
        <div class="${e("input")}">
          <select
            class="${e("control")}"
            value="${this.value}"
            @change="${this.handleChange}"
          >
            ${this.items.map(
      (t) => d`<option value="${t.value}">${t.name}</option>`
    )}
          </select>
        </div>
        <label class="${e("label")}">${this.label}</label>
      </div>
    `;
  }
};
r.styles = u(g);
o([
  a({ type: String })
], r.prototype, "label", 2);
o([
  a({ type: String })
], r.prototype, "value", 2);
o([
  a({ type: Boolean })
], r.prototype, "required", 2);
o([
  a({ type: Boolean })
], r.prototype, "preview", 2);
o([
  a({ type: Array })
], r.prototype, "items", 2);
r = o([
  b(v("select"))
], r);
export {
  r as SelectField
};
