'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-81cd6930.js');
require('./constants-4d389abc.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,::slotted([slot=\"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,:host(.ic-step-compact) ::slotted([slot=\"heading\"]){color:var(--ic-stepper-compact-step-title)}:host(.ic-step-compact) .disabled .heading,:host(.ic-step-compact) .disabled ::slotted([slot=\"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,:host(.ic-step-default) ::slotted([slot=\"heading\"]),.subheading{width:-moz-fit-content;width:fit-content}.heading,::slotted([slot=\"heading\"]){color:var(--ic-step-title)}.current .heading,.current ::slotted([slot=\"heading\"]){color:var(--ic-step-title-current)}.completed .heading,.completed ::slotted([slot=\"heading\"]){color:var(--ic-step-title-success)}.disabled .heading,.disabled ::slotted([slot=\"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,.disabled ::slotted([slot=\"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;
        /**
         * Words within the component that can be replaced to translate the component into a different language
         */
        this.icI18n = {
            next: "Next",
            step: "Step",
            steps: "Steps",
            of: "of",
            lastStep: "Last step",
            completed: "Completed",
            notRequired: "Not required",
            required: "Required",
            optional: "Optional",
        };
        /**
         * @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;
        const { compactStepStyling, current, heading, icI18n, lastStep, lastStepNum, nextStepHeading, progress, status, stepNum, subheading, theme, type, variant, } = this;
        // ARIA LABEL
        let ariaLabel = "";
        const hasHeading = (helpers.isPropDefined(heading) && heading !== "") ||
            helpers.isSlotUsed(this.el, "heading");
        if (type === "completed") {
            ariaLabel = `. ${icI18n.completed}`;
        }
        else if (type === "disabled") {
            ariaLabel = `. ${icI18n.notRequired}`;
        }
        else if (status === "required") {
            ariaLabel = `. ${icI18n.required}`;
        }
        else if (status === "optional") {
            ariaLabel = `. ${icI18n.optional}`;
        }
        // STEP STATUS
        let stepStatus;
        if (status && helpers.isPropDefined(status)) {
            stepStatus = status[0].toUpperCase() + status.slice(1);
        }
        // STEP TYPE
        let stepType;
        if (type === "disabled" || compactStepStyling === "disabled") {
            stepType = icI18n.notRequired;
        }
        else if (compactStepStyling === "completed") {
            stepType = icI18n.completed;
        }
        // STATUS ICON FOR COMPACT STEP
        let statusIcon;
        if (type === "completed" || compactStepStyling === "completed") {
            statusIcon = (index.h("span", { key: '3e6a788d03556019e87781e4e58306d0081da72a', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon.Check }));
        }
        else if (type === "disabled" || compactStepStyling === "disabled") {
            statusIcon = (index.h("span", { key: 'd3df77790e474794ac3a74cc99c98ec73a51530a', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
        }
        // COMPACT STEP COMPONENT
        const compactStep = (index.h("div", { key: '58e72e89eb93fd00ea4a76704c3744050eed25d2', class: {
                ["step"]: true,
                ["current"]: !!current,
                [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
            } }, index.h("ic-loading-indicator", { key: 'c7a6e8e70fe3e3a485a5b0c9353b6a7eaf5888d0', class: {
                "compact-step-progress-indicator": true,
                "not-required": type === "disabled" || compactStepStyling === "disabled",
            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), index.h("div", { key: '13209e08fa212f80ee2b6b2f04dd65cd3a36f461', class: "heading-area" }, helpers.isSlotUsed(this.el, "heading") ? (index.h("slot", { name: "heading" })) : (index.h("ic-typography", { variant: "h4", class: "heading" }, heading)), index.h("div", { key: '7c71fc4f8ce1b59c792c60f2d18cc464ebfc3b0f', class: "info-line" }, index.h("ic-typography", { key: '942f6be75ff898fccda479f36003b80dcdcad9ed', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, index.h("span", { key: 'a3ced0ecff13af724c007fa1ca32f7396f114612', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
            type === "completed" ||
            type === "disabled" ||
            (this.variant === "compact" &&
                !!compactStepStyling &&
                compactStepStyling !== "active") ||
            !!status) && (index.h("div", { key: '04bb305951a0de96241c64e478b26e12afcd838a', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (index.h("ic-typography", { key: '3487444c46756faf3f1a88ce4cebd129cbd14d87', variant: "caption" }, subheading !== null && helpers.isPropDefined(subheading)
            ? subheading
            : type === "disabled" ||
                (variant === "compact" &&
                    compactStepStyling === "disabled") ||
                type === "completed" ||
                (variant === "compact" &&
                    compactStepStyling === "completed")
                ? stepType
                : status && stepStatus))))), lastStep ? (index.h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.lastStep)) : (helpers.isPropDefined(nextStepHeading) && (index.h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.next, index.h("span", { class: "visually-hidden" }, " ", icI18n.step), ":", " ", this.nextStepHeading))))));
        // ICON FOR DEFAULT STEP
        let icon;
        if (type !== "completed") {
            icon = (index.h("ic-typography", { key: 'e25e3e2da7abbf17fcf8ede4dde3ce26010f68e0', variant: "subtitle-small" }, index.h("span", { key: 'ae4b4e77475d060dc7ce62796118fd03a0cbdb1f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
        }
        else {
            icon = (index.h("div", { key: '86b31c3ca79c025e185a5461c210be965b42dc2a', class: "step-icon-inner", "aria-hidden": "true" }, index.h("span", { key: '9854c6981f84ed0984fb98666a123de0c2a32048', class: "check-icon", innerHTML: checkIcon.Check })));
        }
        // STEP CONNECT FOR DEFAULT STEP
        const partialBar = type === "current" && (index.h("div", { key: 'af4367f38115d9ee7f0e2112ab62ae7fdfe5b801', class: "step-connect-inner" }));
        const finalStep = !lastStep && (index.h("div", { key: '979da51621c8e026ab2b2d59d7ad83764e0330a7', 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: 'd91c5752a70b8062c91c7a2563229968ed832a2f', class: {
                ["step"]: true,
                [`${type}`]: true,
            } }, index.h("div", { key: 'df780502b324c87db8eb701d9b4c43e12e6d6b32', class: "step-top" }, index.h("div", { key: '7e2b4c244ecfe20c71f53d8f825938af39b62f71', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (index.h("div", { key: 'e645cb62ca795ee554a1b580e6fdae6555bc410c', class: "heading-area" }, helpers.isSlotUsed(this.el, "heading") ? (index.h("slot", { name: "heading" })) : (index.h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (index.h("ic-typography", { key: '8498b50dd12915ac9e39ad329e35b0a585c77f46', variant: "caption", class: "subheading" }, subheading !== null && helpers.isPropDefined(subheading)
            ? subheading
            : stepStatus))))));
        return (index.h(index.Host, { key: '356617f292b301db2b92d8c1d111fa32831705c1', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || 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-${variant}`]: true,
                [`ic-theme-${theme}`]: this.theme !== "inherit",
            } }, 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