import {
  watch
} from "./chunk.X2OQMWGY.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/step-group/step-group.ts
import { css, html, nothing } from "lit";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdStepGroup = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.steps = [];
    this.size = "lg";
    this.orientation = "horizontal";
    this.activeStep = 0;
    this.notInteractive = false;
    this.label = "";
  }
  connectedCallback() {
    super.connectedCallback();
    this.updateComplete.then(() => {
      this.steps = this.getAllSteps();
      this.steps[this.steps.length - 1].noTail = true;
      let activeStep;
      this.steps.forEach((step, index) => {
        step.index = index + 1;
        step.size = this.size;
        step.orientation = this.orientation;
        if (this.notInteractive) {
          step.current = false;
          step.disabled = false;
          step.notInteractive = true;
        } else if (step.current) {
          activeStep = index;
        }
      });
      if (this.activeStep !== -1) {
        this.setActiveStep(activeStep || this.activeStep);
      }
    });
  }
  handleActiveStepChange() {
    const index = Number(this.activeStep);
    if (Number.isNaN(index)) return;
    this.setActiveStep(index);
  }
  updateSize() {
    this.steps.forEach((step) => {
      step.size = this.size;
    });
  }
  updateOrientation() {
    this.steps.forEach((step) => {
      step.orientation = this.orientation;
    });
  }
  getAllSteps() {
    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-22-0-step");
  }
  /**
   * Sets the active step.
   * @param index The index of the step to set as active.
   */
  setActiveStep(index) {
    if (index >= 0 && index < this.steps.length && !this.notInteractive) {
      this.activeStep = index;
      this.steps.forEach((step, i) => {
        if (i === index) {
          step.current = true;
        } else if (i > index) {
          step.waiting = true;
          step.current = false;
        } else {
          step.current = false;
          step.waiting = false;
        }
      });
    }
  }
  handleInteractivityChange() {
    if (this.notInteractive) {
      this.steps.forEach((step) => {
        step.current = false;
        step.disabled = false;
        step.notInteractive = true;
      });
    }
  }
  render() {
    if (this.size === "xs" && this.orientation !== "vertical") {
      console.warn('Size "xs" is only supported when orientation is "vertical". The element will not be rendered.');
      return nothing;
    }
    return html`<div role="${!this.notInteractive ? "navigation" : "group"}" class="h-full" aria-label="${this.label}"><div role="list" part="base" class="${cx("flex", this.orientation === "vertical" && "flex-col h-full")}"><slot part="body"></slot></div></div>`;
  }
};
SdStepGroup.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{width:-moz-max-content;width:max-content}`
];
__decorateClass([
  query("[part=body]")
], SdStepGroup.prototype, "body", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStepGroup.prototype, "size", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStepGroup.prototype, "orientation", 2);
__decorateClass([
  property({ type: Number, reflect: true, attribute: "active-step" })
], SdStepGroup.prototype, "activeStep", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
], SdStepGroup.prototype, "notInteractive", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStepGroup.prototype, "label", 2);
__decorateClass([
  watch("activeStep", { waitUntilFirstUpdate: true })
], SdStepGroup.prototype, "handleActiveStepChange", 1);
__decorateClass([
  watch("size", { waitUntilFirstUpdate: true })
], SdStepGroup.prototype, "updateSize", 1);
__decorateClass([
  watch("orientation", { waitUntilFirstUpdate: true })
], SdStepGroup.prototype, "updateOrientation", 1);
__decorateClass([
  watch("notInteractive")
], SdStepGroup.prototype, "handleInteractivityChange", 1);
SdStepGroup = __decorateClass([
  customElement("sd-6-22-0-step-group")
], SdStepGroup);

export {
  SdStepGroup
};
