import { n as r, C as _ } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as x } from "../chunks/component.styles.CRO4Odto.js";
import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
import { i as u, x as o } from "../chunks/lit-element.jLBm65_O.js";
import { e as h } from "../chunks/query.BBf1UFkC.js";
import { e as v } from "../chunks/class-map.BiVq-cVR.js";
import { o as g } from "../chunks/style-map.llVFPd__.js";
import { n as c } from "../chunks/when.Dr1es41R.js";
import f from "./icon.js";
import b from "./line-clamp.js";
import y from "./progress-bar.js";
import w from "./tooltip.js";
const $ = u`:host{--color:var(--color);flex:calc(100% / var(--columns) + var(--cx-spacing-small));margin-left:calc(-1 * var(--cx-spacing-small))}:host([round]){max-width:100%;margin-left:0}.step{font-family:var(--cx-font-sans);gap:var(--cx-spacing-x-small);width:100%;display:flex}.step__arrow{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-x-small);padding-left:var(--cx-spacing-x-large);padding-right:var(--cx-spacing-medium);background-color:var(--cx-color-neutral-100);cursor:pointer;clip-path:polygon(calc(100% - var(--cx-spacing-medium)) 0%, 100% 50%, calc(100% - var(--cx-spacing-medium)) 100%, 0% 100%, var(--cx-spacing-medium) 50%, 0% 0%);align-items:center;width:100%;display:inline-flex;position:relative}.step--first .step__arrow{clip-path:polygon(calc(100% - var(--cx-spacing-medium)) 0%, 100% 50%, calc(100% - var(--cx-spacing-medium)) 100%, 0% 100%, 0 50%, 0% 0%);border-top-left-radius:var(--cx-border-radius-large);border-bottom-left-radius:var(--cx-border-radius-large);padding-left:var(--cx-spacing-small)}.step--last .step__arrow{clip-path:polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, var(--cx-spacing-medium) 50%, 0% 0%);border-top-right-radius:var(--cx-border-radius-large);border-bottom-right-radius:var(--cx-border-radius-large)}.step--first.step--last .step__arrow{clip-path:polygon(100% 0%,100% 50%,100% 100%,0% 100%,0 50%,0% 0%)}.step--active .step__arrow{background-color:color-mix(in srgb, var(--color) 15%, white);cursor:default}.step--completed .step__arrow{opacity:.5}.step--disabled .step__arrow,.step--readonly .step__arrow{cursor:default}.step--disabled.step--has-description .step__arrow,.step--readonly.step--has-description .step__arrow,.step--active.step--has-description .step__arrow{cursor:help}.step__circle{background-color:color-mix(in srgb, var(--color) 15%, white);border:2px solid var(--color);border-radius:var(--cx-border-radius-circle);color:var(--color);font-weight:var(--cx-font-weight-semibold);flex:0 0 32px;justify-content:center;align-items:center;height:32px;display:flex;& cx-icon{font-size:var(--cx-font-size-medium)}}.step--round.step--active .step__circle,.step--round.step--completed .step__circle{background-color:var(--color);color:var(--cx-color-neutral-0)}.step--round.step--disabled .step__circle{background-color:var(--cx-color-neutral-0);border-color:var(--cx-color-neutral-400);color:var(--cx-color-neutral-400)}.step--round.step--error .step__circle{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.step__content{align-items:center;gap:var(--cx-spacing-x-small);max-width:100%;display:flex;position:relative}.step--round .step__content{flex-direction:column;justify-content:center;align-items:flex-start;gap:0}.step__content__prefix::slotted(cx-icon),.step__content__label{color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-medium)}.step--active .step__content__label,.step--active .step__content__help-text,.step--active .step__content__prefix::slotted(cx-icon),.step--round.step--completed .step__content__label,.step--round.step--completed .step__content__help-text{color:var(--color)}.step--disabled .step__content__label,.step--disabled .step__content__help-text,.step--disabled .step__content__prefix::slotted(cx-icon){color:var(--cx-color-neutral-400)}.step--error .step__content__label,.step--error .step__content__help-text{color:var(--cx-color-danger)}.step--round .step__content__progress{justify-content:center;align-items:center;gap:var(--cx-spacing-small);min-width:120px;line-height:1;display:flex}.step--round .step__content__progress__text{color:var(--color)}.step--round.step__content__help-text{color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-small);line-height:1}.step__line{background-color:var(--color);height:2rem;margin:var(--cx-spacing-medium) calc(32px / 2) 0;flex:1;width:2px}.step--last~.step__line{display:none}cx-progress-bar{--height:8px;flex:1}`;
var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, t = (d, i, p, l) => {
  for (var s = l > 1 ? void 0 : l ? C(i, p) : i, a = d.length - 1, n; a >= 0; a--)
    (n = d[a]) && (s = (l ? n(i, p, s) : n(s)) || s);
  return l && s && S(i, p, s), s;
};
let e = class extends _ {
  constructor() {
    super(), this.active = !1, this.completed = !1, this.disabled = !1, this.readonly = !1, this.error = !1, this.index = 0, this.last = !1, this.helpText = "", this.progress = 0, this.color = "var(--cx-color-primary)", this.round = !1, this.description = "", this.renderDefaultStep = this.renderDefaultStep.bind(this), this.renderRoundStep = this.renderRoundStep.bind(this);
  }
  handleClick() {
    this.disabled || this.active || this.readonly || this.emit("cx-step-select", {
      detail: { id: this.dataset.id }
    });
  }
  renderDefaultStep() {
    return o`<div class="step__arrow"><div class="step__content"><slot name="prefix" class="step__content__prefix"></slot><cx-line-clamp lines="1"><slot class="step__content__label"></slot></cx-line-clamp></div></div>`;
  }
  renderRoundStep() {
    return o`<div class="step__circle">${this.completed ? o`<cx-icon name="check"></cx-icon>` : o`<div class="step__circle__number">${this.index + 1}</div>`}</div><div class="step__content"><slot class="step__content__label"></slot>${c(
      this.progress && this.progress > 0,
      () => o`<div class="step__content__progress"><cx-progress-bar value=${this.progress}></cx-progress-bar><div class="step__content__progress__text">${this.progress}%</div></div>`,
      () => o`
        ${c(
        this.helpText,
        () => o`<div class="step__content__help-text">${this.helpText}</div>`
      )}
      `
    )}</div>`;
  }
  render() {
    return o`<cx-tooltip ?disabled=${!this.description.trim()} .content=${this.description} hoist><div style=${g({
      "--color": this.color
    })}><div part="base" aria-label="step" role="button" class=${v({
      step: !0,
      "step--active": this.active,
      "step--completed": this.completed,
      "step--disabled": this.disabled,
      "step--error": this.error,
      "step--first": this.index === 0,
      "step--has-description": !!this.description.trim(),
      "step--last": this.last,
      "step--readonly": this.readonly,
      "step--round": this.round
    })} @click=${this.handleClick}>${c(this.round, this.renderRoundStep, this.renderDefaultStep)}</div>${c(this.round, () => o`<div class="step__line"></div>`)}</div></cx-tooltip>`;
  }
};
e.styles = [x, $];
e.dependencies = {
  "cx-icon": f,
  "cx-line-clamp": b,
  "cx-progress-bar": y,
  "cx-tooltip": w
};
t([
  h('div[part="base"]')
], e.prototype, "step", 2);
t([
  r({ reflect: !0, type: Boolean })
], e.prototype, "active", 2);
t([
  r({ reflect: !0, type: Boolean })
], e.prototype, "completed", 2);
t([
  r({ reflect: !0, type: Boolean })
], e.prototype, "disabled", 2);
t([
  r({ reflect: !0, type: Boolean })
], e.prototype, "readonly", 2);
t([
  r({ reflect: !0, type: Boolean })
], e.prototype, "error", 2);
t([
  r({ type: Number })
], e.prototype, "index", 2);
t([
  r({ type: Boolean })
], e.prototype, "last", 2);
t([
  r({ attribute: "help-text", reflect: !0, type: String })
], e.prototype, "helpText", 2);
t([
  r({ reflect: !0, type: Number })
], e.prototype, "progress", 2);
t([
  r({ reflect: !0, type: String })
], e.prototype, "color", 2);
t([
  r({ reflect: !0, type: Boolean })
], e.prototype, "round", 2);
t([
  r({ attribute: "description", reflect: !0, type: String })
], e.prototype, "description", 2);
e = t([
  m("cx-step")
], e);
export {
  e as default
};
