/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import iconLoader from "../../globals/internal/icon-loader.js";
import FocusMixin from "../../globals/mixins/focus.js";
import progress_indicator_default from "./progress-indicator.scss.js";
import { PROGRESS_STEP_STAT } from "./defs.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import CheckmarkOutline16 from "@carbon/icons/es/checkmark--outline/16.js";
import Incomplete16 from "@carbon/icons/es/incomplete/16.js";
import CircleDash16 from "@carbon/icons/es/circle-dash/16.js";
import Warning16 from "@carbon/icons/es/warning/16.js";
//#region src/components/progress-indicator/progress-step.ts
/**
* Copyright IBM Corp. 2019, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Icons, keyed by state.
*/
const icons = {
	["complete"]: CheckmarkOutline16,
	["incomplete"]: CircleDash16,
	["invalid"]: Warning16,
	["current"]: Incomplete16
};
let CDSProgressStep = class CDSProgressStep extends FocusMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._explicitComplete = false;
		this._explicitCurrent = false;
		this._explicitState = null;
		this.disabled = false;
		this.spaceEqually = false;
		this.state = "incomplete";
		this.vertical = false;
		this.clickable = false;
		this.complete = false;
		this.current = false;
		this.invalid = false;
		this._fireStepClick = () => {
			if (this.current || this.state === "current" || this.disabled || !this.clickable) return;
			this.dispatchEvent(new CustomEvent(`cds-custom-progress-step-click`, {
				bubbles: true,
				composed: true,
				detail: {}
			}));
		};
		this._onKeyDown = (ev) => {
			if (ev.key === "Enter" || ev.key === " ") {
				ev.preventDefault();
				this._fireStepClick();
			}
		};
	}
	get hasExplicitState() {
		return this._explicitComplete || this._explicitCurrent || this._explicitState !== null;
	}
	connectedCallback() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
		this._explicitComplete = this.hasAttribute("complete");
		this._explicitCurrent = this.hasAttribute("current");
		this._explicitState = this.getAttribute("state");
		super.connectedCallback();
	}
	updated(changedProperties) {
		if (changedProperties.has("disabled")) this.setAttribute("aria-disabled", String(this.disabled));
	}
	_svgIcon(invalid, current, complete) {
		if (invalid) return "invalid";
		if (current) return "current";
		if (complete) return "complete";
		return false;
	}
	render() {
		const { description, iconLabel, label, secondaryLabelText, secondaryLabel, state, complete, current, invalid } = this;
		const svgLabel = iconLabel || description;
		const optionalLabel = secondaryLabel || secondaryLabelText;
		const isUnclickable = current || state === "current" || this.disabled || !this.clickable;
		return html`
      <div
        class="${"cds-custom"}--progress-step-button ${isUnclickable ? `cds-custom--progress-step-button--unclickable` : ""}"
        tabindex="${isUnclickable ? -1 : 0}"
        @click=${this._fireStepClick}
        @keydown=${this._onKeyDown}
        role="button"
        aria-disabled="${String(isUnclickable)}"
        title="${label}">
        ${iconLoader(icons[this._svgIcon(invalid, current, complete) || state], {
			class: invalid || state === "invalid" ? `cds-custom--progress__warning` : "",
			title: svgLabel
		})}
        <slot name="label-text">
          <p
            class="${"cds-custom"}--progress-label"
            aria-describedby="label-tooltip"
            title="${label}">
            ${label}
          </p>
        </slot>
        <slot name="secondary-label-text">
          ${!optionalLabel ? void 0 : html`<p class="${"cds-custom"}--progress-optional">
                ${optionalLabel}
              </p>`}
        </slot>
        <span class="${"cds-custom"}--progress-line"></span>
      </div>
    `;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = progress_indicator_default;
	}
};
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSProgressStep.prototype, "disabled", void 0);
__decorate([property({ attribute: "icon-label" })], CDSProgressStep.prototype, "iconLabel", void 0);
__decorate([property({ reflect: true })], CDSProgressStep.prototype, "description", void 0);
__decorate([property()], CDSProgressStep.prototype, "label", void 0);
__decorate([property({ attribute: "secondary-label-text" })], CDSProgressStep.prototype, "secondaryLabelText", void 0);
__decorate([property({ attribute: "secondary-label" })], CDSProgressStep.prototype, "secondaryLabel", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSProgressStep.prototype, "spaceEqually", void 0);
__decorate([property({ reflect: true })], CDSProgressStep.prototype, "state", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSProgressStep.prototype, "vertical", void 0);
__decorate([property({ type: Boolean })], CDSProgressStep.prototype, "clickable", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSProgressStep.prototype, "complete", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSProgressStep.prototype, "current", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSProgressStep.prototype, "invalid", void 0);
CDSProgressStep = __decorate([carbonElement(`cds-custom-progress-step`)], CDSProgressStep);
var progress_step_default = CDSProgressStep;
//#endregion
export { PROGRESS_STEP_STAT, progress_step_default as default };

//# sourceMappingURL=progress-step.js.map