'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const checkIcon = require('./check-icon-7225d79b.js');
const helpers = require('./helpers-fc4016d2.js');

const warningIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>
</svg>`;

const icStepCss = ":host{display:flex;flex:auto;--ic-typography-color:currentcolor}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.heading,.subheading,.step-status,.next-step{white-space:pre-line}.next-step{color:var(--ic-stepper-compact-step-next-text)}.visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.visually-hidden:dir(rtl){right:-9999px}:host(.ic-step-compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-step-indicator-status-current);--compact-step-outer-color:var(--ic-step-indicator-status-remaining);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.ic-step-compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.ic-step-compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host() ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-step-indicator-background)}:host(.ic-step-compact) .heading-area{display:flex;flex-direction:column;width:14.25rem}:host(.ic-step-compact) .heading{color:var(--ic-stepper-compact-step-title)}:host(.ic-step-compact) .disabled .heading{color:var(--ic-stepper-compact-step-title-disabled)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-stepper-compact-step-requirement-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-stepper-compact-step-completed-text)}.compact-step-disabled :is(.heading,.step-status){color:var(--ic-stepper-compact-step-requirement-text-disabled)}.step-num{color:var(--ic-stepper-compact-step-stage-text);white-space:nowrap}:host(.ic-step-compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.ic-step-compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-step-default) .step{flex-direction:column}:host(.ic-step-default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.ic-step-default) .step-icon{border-radius:50%;background-color:var(--ic-step-number-inactive)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--ic-step-number-text-inactive)}:host(.ic-step-default) .current{color:var(--ic-status-info-default)}:host(.ic-step-default) .heading-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.ic-step-default) .heading,.subheading{width:-moz-fit-content;width:fit-content}.heading{color:var(--ic-step-title)}.current .heading{color:var(--ic-step-title-current)}.completed .heading{color:var(--ic-step-title-success)}.disabled .heading{color:var(--ic-step-title-disabled)}.subheading{color:var(--ic-step-title-status-text-inactive)}.current .subheading{color:var(--ic-step-title-status-text-current)}.disabled .subheading{color:var(--ic-step-title-status-text-disabled)}:host(.ic-step-default) .completed{color:var(--ic-status-success-default)}.active .step-icon-inner{box-shadow:inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem}.current .step-icon-inner{background-color:var(--ic-step-number-background-active);color:var(--ic-step-number-text-current)}.disabled{color:var(--ic-color-text-disabled-mid)}.disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-step-number-disabled);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs));color:var(--ic-step-number-text-disabled)}.disabled .step-icon{background-color:transparent !important}.completed .step-icon-inner{background:var(--ic-step-number-background-success);box-shadow:inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);border-radius:100%}:host(.ic-step-default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));background-color:var(--ic-step-number-current-outer-fill);}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-stepper-connector-remaining-status);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-stepper-connector-disabled);border-radius:0}.completed .step-connect{background-color:var(--ic-stepper-connector-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-stepper-connector-current-status)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-step-number-icon-success)}@media (forced-colors: active){.compact-step-disabled :is(.heading,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-border-hc)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.ic-step-default) .current .step-icon{padding:0;border:none}.disabled,.disabled .heading-area,.disabled .step-icon-inner,.disabled .heading{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
const IcStepStyle0 = icStepCss;

const Step = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
         */
        this.current = false;
        /**
         * @internal Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The state of the step within the stepper.
         */
        this.type = "active";
    }
    typeChangeHandler() {
        if (this.variant === "compact" && this.type === "current") {
            this.current = true;
        }
        else {
            this.current = false;
        }
    }
    render() {
        var _a, _b;
        // ARIA LABEL
        let ariaLabel = "";
        if (this.type === "completed") {
            ariaLabel = ". Completed step";
        }
        else if (this.type === "disabled") {
            ariaLabel = ". Non-required step";
        }
        else if (this.status === "required") {
            ariaLabel = ". Required step";
        }
        else if (this.status === "optional") {
            ariaLabel = ". Optional step";
        }
        // STEP STATUS
        let stepStatus;
        if (this.status && helpers.isPropDefined(this.status)) {
            stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
        }
        // STEP TYPE
        let stepType;
        if (this.type === "disabled" || this.compactStepStyling === "disabled") {
            stepType = "Not required";
        }
        else if (this.compactStepStyling === "completed") {
            stepType = "Completed";
        }
        // STATUS ICON FOR COMPACT STEP
        let statusIcon;
        if (this.type === "completed" || this.compactStepStyling === "completed") {
            statusIcon = (index.h("span", { key: '8831990f0422a89e28d83c33bf98e6f5e47d09a6', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon.Check }));
        }
        else if (this.type === "disabled" ||
            this.compactStepStyling === "disabled") {
            statusIcon = (index.h("span", { key: 'aedd81eacbe9ca6a4e331142d09053926b00dcd4', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
        }
        // COMPACT STEP COMPONENT
        const compactStep = (index.h("div", { key: '384c84c08600c48982959a9a19a54e638bdd76a9', class: {
                ["step"]: true,
                ["current"]: !!this.current,
                [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
            } }, index.h("ic-loading-indicator", { key: 'fb3373a16a3519a77689395882b77b07f84d00b2', class: {
                "compact-step-progress-indicator": true,
                "not-required": this.type === "disabled" ||
                    this.compactStepStyling === "disabled",
            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), index.h("div", { key: 'e404a8d7fd56af5a6c3b38e7dd146ccbf6c0a921', class: "heading-area" }, index.h("ic-typography", { key: 'e2d2d3a3b2e2d1080a500f06c11fd2b19305e733', variant: "h4", class: "heading" }, this.heading), index.h("div", { key: 'a04253bd63d0e9cbc2ebd2ccc6c6cf1d684611b4', class: "info-line" }, index.h("ic-typography", { key: '35699c8fd101642bcedacbb0e636f5f5e72d87d0', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, index.h("span", { key: '0bc9e891b17f66419150733982711999983197a1', class: "visually-hidden" }, " steps")), (this.subheading ||
            this.type === "completed" ||
            this.type === "disabled" ||
            (this.variant === "compact" &&
                !!this.compactStepStyling &&
                this.compactStepStyling !== "active") ||
            !!this.status) && (index.h("div", { key: 'ce2356ecbc86e3805ddf84d7fa785f2a1495ef60', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (index.h("ic-typography", { key: 'f9ada98e6d45ff5dcd8784dbb24c4402b7bd378e', variant: "caption" }, this.subheading !== null && helpers.isPropDefined(this.subheading)
            ? this.subheading
            : this.type === "disabled" ||
                (this.variant === "compact" &&
                    this.compactStepStyling === "disabled") ||
                this.type === "completed" ||
                (this.variant === "compact" &&
                    this.compactStepStyling === "completed")
                ? stepType
                : this.status && stepStatus))))), this.lastStep ? (index.h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (helpers.isPropDefined(this.nextStepHeading) && (index.h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", index.h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepHeading))))));
        // ICON FOR DEFAULT STEP
        let icon;
        if (this.type !== "completed") {
            icon = (index.h("ic-typography", { key: '5b3734765f9d5e5db8f0b2818ffd471817a96cc5', variant: "subtitle-small" }, index.h("span", { key: 'd4d3ffd87c95a0b98fce8a437a6afb3f4639993f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
        }
        else {
            icon = (index.h("div", { key: '42447f9ec070e7e284aecfd49983259650d9abd3', class: "step-icon-inner", "aria-hidden": "true" }, index.h("span", { key: '4c7469fba1cf544d1d48c209c25db0bcaca14309', class: "check-icon", innerHTML: checkIcon.Check })));
        }
        // STEP CONNECT FOR DEFAULT STEP
        const partialBar = this.type === "current" && (index.h("div", { key: '800764f8ca21ac1118c77ed860a163b3103fe62e', class: "step-connect-inner" }));
        const finalStep = !this.lastStep && (index.h("div", { key: 'e5c0f38f7140800d60e5046d77d6cde34c5e7bd5', class: {
                ["step-connect"]: true,
                ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
            } }, partialBar));
        // DEFAULT STEP COMPONENT
        const defaultStep = (index.h("div", { key: 'cdfd23786b75a88fe1630318d8a1369a89090544', class: {
                ["step"]: true,
                [`${this.type}`]: true,
            } }, index.h("div", { key: 'c83625070a1ffe89fc53f66d55f06c994f868570', class: "step-top" }, index.h("div", { key: 'a6758050efffeb98522092fefa9b1261b3d9217b', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (index.h("div", { key: '3ecf8d32da66fe336b7c0540c47726d060e8eaf8', class: "heading-area" }, this.heading && (index.h("ic-typography", { key: '79557ec3d9a26be0fee2253a58c2f09132322017', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (index.h("ic-typography", { key: 'f5a90f68ebc0721fec936541824ab79b415f566d', variant: "caption", class: "subheading" }, this.subheading !== null && helpers.isPropDefined(this.subheading)
            ? this.subheading
            : stepStatus))))));
        return (index.h(index.Host, { key: '0cb6b6649c9af4565e5f663131b800a79b9b040d', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
                ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                [`ic-step-${this.variant}`]: true,
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
            } }, this.variant === "compact" ? compactStep : defaultStep));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "type": ["typeChangeHandler"]
    }; }
};
Step.style = IcStepStyle0;

exports.ic_step = Step;

//# sourceMappingURL=ic-step.cjs.entry.js.map