import h from "./icon.js";
import m from "./resize-observer.js";
import x from "./step.js";
import f from "./stepper.js";
import { n as d, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as b } from "../chunks/component.styles.CRO4Odto.js";
import { c as $ } from "../chunks/custom-element.L4WJXn1j.js";
import { i as v, x as a } from "../chunks/lit-element.jLBm65_O.js";
import { c as y } from "../chunks/repeat.DbF2p5ae.js";
import { o as W } from "../chunks/style-map.llVFPd__.js";
import { n as l } from "../chunks/when.Dr1es41R.js";
const C = v`:host{display:block}`;
var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (t, r, n, o) => {
  for (var e = o > 1 ? void 0 : o ? w(r, n) : r, p = t.length - 1, s; p >= 0; p--)
    (s = t[p]) && (e = (o ? s(r, n, e) : s(e)) || e);
  return o && e && z(r, n, e), e;
};
let i = class extends u {
  constructor() {
    super(...arguments), this.data = [], this.maxWidth = 280, this.minWidth = 178, this.disabled = !1;
  }
  get columnCount() {
    const t = this.getBoundingClientRect().width, r = 0, n = Math.floor((t + r) / (this.minWidth + r));
    let o = 1;
    for (let e = n; e > 0; e--) {
      const s = (t - (e - 1) * r) / e;
      s >= this.minWidth && s <= this.maxWidth && (o = e);
    }
    return o;
  }
  handleResize() {
    this.requestUpdate("columnCount");
  }
  render() {
    return a`<cx-resize-observer @cx-resize=${this.handleResize}><div><cx-stepper items-per-row=${this.columnCount}>${y(
      this.data,
      (t) => t.id,
      (t) => a`<cx-step slot="step" data-id=${t.id} .completed=${t.state === "Done"} .disabled=${this.disabled || t.state === "Disabled"} .readonly=${t.readonly} .active=${t.state === "Active"} .color=${t.color} .description=${t.description ?? ""} style=${W({
        maxWidth: `${this.maxWidth}px`,
        minWidth: `${this.minWidth}px`
      })}>${l(
        t.state === "Done",
        () => a`<cx-icon slot="prefix" variant="filled" name="check_circle"></cx-icon>`,
        () => a`${l(
          t.icon,
          () => a`<cx-icon slot="prefix" variant=${t.iconVariant || "outlined"} name=${t.icon}></cx-icon>`
        )}`
      )}
                  ${t.name}</cx-step>`
    )}</cx-stepper></div></cx-resize-observer>`;
  }
};
i.styles = [b, C];
i.dependencies = {
  "cx-icon": h,
  "cx-resize-observer": m,
  "cx-step": x,
  "cx-stepper": f
};
c([
  d({ type: Array })
], i.prototype, "data", 2);
c([
  d({ attribute: "max-width", reflect: !0, type: Number })
], i.prototype, "maxWidth", 2);
c([
  d({ attribute: "min-width", reflect: !0, type: Number })
], i.prototype, "minWidth", 2);
c([
  d({ reflect: !0, type: Boolean })
], i.prototype, "disabled", 2);
i = c([
  $("cx-stepper-wizard")
], i);
export {
  i as default
};
