import d from "./grid.js";
import p from "./grid-item.js";
import m from "./radio.js";
import x from "./radio-group.js";
import { n as h, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as g } from "../chunks/component.styles.CRO4Odto.js";
import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
import { L as f } from "../chunks/i18n.BABe9hN4.js";
import { i as v, x as C } from "../chunks/lit-element.jLBm65_O.js";
var r = /* @__PURE__ */ ((e) => (e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(r || {});
const b = v`.position-picker__column{width:fit-content}.position-picker__column::part(base){justify-content:center;align-items:center;gap:var(--cx-spacing-x-small);flex-direction:column;display:flex}.position-picker__radio{--checked-color:var(--cx-color-neutral-0);--checked-border-color:var(--cx-color-neutral-0);--checked-background-color:var(--cx-color-primary);--checked-hover-border-color:var(--cx-color-neutral-0);--checked-hover-background-color:var(--cx-color-primary)}`;
var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (e, t, a, c) => {
  for (var o = c > 1 ? void 0 : c ? $(t, a) : t, l = e.length - 1, s; l >= 0; l--)
    (s = e[l]) && (o = (c ? s(t, a, o) : s(o)) || o);
  return c && o && k(t, a, o), o;
};
let i = class extends u {
  constructor() {
    super(...arguments), this.localize = new f(this), this.value = r.TopLeft;
  }
  handleChange(e) {
    const t = e.target;
    this.value = t.value;
  }
  render() {
    return C`<div class="position-picker"><cx-radio-group value=${this.value} name="position" .form=${this.closest("form")} @cx-change=${this.handleChange}><cx-grid columns="3" spacing="var(--cx-spacing-small)"><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopLeft} checked-icon-radius="3" aria-label=${this.localize.term("topLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterLeft} checked-icon-radius="3" aria-label=${this.localize.term("centerLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomLeft} checked-icon-radius="3" aria-label=${this.localize.term("bottomLeft")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopCenter} checked-icon-radius="3" aria-label=${this.localize.term("topCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterCenter} checked-icon-radius="3" aria-label=${this.localize.term("centerCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomCenter} checked-icon-radius="3" aria-label=${this.localize.term("bottomCenter")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopRight} checked-icon-radius="3" aria-label=${this.localize.term("topRight")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterRight} checked-icon-radius="3" aria-label=${this.localize.term("centerRight")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomRight} checked-icon-radius="3" aria-label=${this.localize.term("bottomRight")}></cx-radio></cx-grid-item></cx-grid></cx-radio-group></div>`;
  }
};
i.styles = [g, b];
i.dependencies = {
  "cx-grid": d,
  "cx-grid-item": p,
  "cx-radio": m,
  "cx-radio-group": x
};
n([
  h({ reflect: !0 })
], i.prototype, "value", 2);
i = n([
  _("cx-position-picker")
], i);
export {
  i as default
};
