import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { p as pxToRem, c as checkResizeObserver } from './helpers.js';

const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list{flex:auto}:host(.ic-stepper-compact) ul ::slotted(ic-step){display:none}:host(.ic-stepper-compact) ul ::slotted(ic-step.show){display:flex}:host(.ic-stepper-compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";
const IcStepperStyle0 = icStepperCss;

const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        var _a;
        this.resizeObserver = null;
        this.visuallyHidden = "visually-hidden";
        this.alignedFullWidth = true;
        this.autoSetStepTitles = true;
        this.lastStepWidth = 0;
        this.noOfResizes = 0;
        this.stepperWidth = (_a = document
            .querySelector("ic-stepper")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
        this.stepTypes = [];
        this.variantOverride = this.variant !== "compact";
        /**
         * The alignment of the default stepper within its container.
         */
        this.aligned = "full-width";
        /**
         * The length of the connector between each step in pixels. Minimum length is 100px.
         */
        this.connectorWidth = 100;
        /**
         * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
         */
        this.hideStepInfo = false;
        /**
         * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.
         */
        this.icI18n = {
            next: "Next",
            step: "Step",
            steps: "Steps",
            of: "of",
            lastStep: "Last step",
            completed: "Completed",
            notRequired: "Not required",
            required: "Required",
            optional: "Optional",
        };
        /**
         * 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 variant of the stepper.
         */
        this.variant = "default";
        this.stepHeading = (step, includeAutogeneratedTitles = false) => {
            var _a, _b, _c, _d;
            if (step.hasAttribute("heading") && step.getAttribute("heading") !== "") {
                return step.getAttribute("heading") || undefined;
            }
            const headingSlot = (_a = step.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="heading"]');
            const assignedNodes = ((_b = headingSlot === null || headingSlot === void 0 ? void 0 : headingSlot.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(headingSlot)) || [];
            for (const node of assignedNodes) {
                const text = node.nodeType === Node.TEXT_NODE
                    ? (_c = node.textContent) === null || _c === void 0 ? void 0 : _c.trim()
                    : (_d = node.innerText) === null || _d === void 0 ? void 0 : _d.trim();
                if (text)
                    return text;
            }
            if (includeAutogeneratedTitles && step.heading) {
                return step.heading;
            }
            return undefined;
        };
        // Get all steps currently within this stepper
        this.getChildren = () => {
            this.steps = Array.from(this.el.querySelectorAll("ic-step"));
            this.stepsWithStepTitles = this.steps.filter((step) => !!this.stepHeading(step, false));
        };
        // Inform the user that stepTitles are required on all steps in a compact stepper
        this.checkStepTitles = () => {
            if (this.stepsWithStepTitles.length < this.steps.length &&
                this.variantOverride &&
                this.variant === "compact") {
                this.noOfResizes = this.noOfResizes + 1;
                if (this.noOfResizes === 1) {
                    console.error(`The prop 'heading' is required for all steps of the Stepper component (compact variant)`);
                }
            }
        };
        this.setStepTypes = () => {
            this.getChildren();
            this.stepTypes = [];
            for (let i = 0; i < this.steps.length; i++) {
                this.stepTypes.push("active");
            }
        };
        this.setStepperWidth = () => {
            this.alignedFullWidth =
                this.variant === "default" && this.aligned === "full-width";
            const lastStep = this.steps[this.steps.length - 1];
            lastStep.style.maxWidth = "none";
            if (this.alignedFullWidth) {
                this.stepperWidth = this.el.offsetWidth;
                lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
                this.lastStepWidth = lastStep.offsetWidth;
            }
        };
        this.initialiseStepStates = () => {
            this.steps.forEach((step, index) => {
                var _a, _b, _c;
                // Set language
                if (this.icI18n !== undefined) {
                    step.icI18n = this.icI18n;
                }
                // Set variant
                step.variant = this.variant;
                // Assign stepNum to each step
                step.stepNum = index + 1;
                // Assign lastStep to final step
                step.lastStep = index === this.steps.length - 1;
                step.lastStepNum = this.steps.length;
                if (step.type !== "current") {
                    step.current = false;
                    this.stepTypes[index] = step.type;
                }
                else {
                    step.current = true;
                }
                const stepTitleArea = step.shadowRoot &&
                    step.shadowRoot.querySelector(".step > .heading-area");
                if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
                    if (this.variant === "compact") {
                        this.autoSetStepTitles = true;
                        if (this.autoSetStepTitles) {
                            step.heading = "Step " + step.stepNum;
                            stepTitleArea &&
                                ((_a = stepTitleArea === null || stepTitleArea === void 0 ? void 0 : stepTitleArea.querySelector(".heading")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
                        }
                    }
                    if (this.variant === "default") {
                        this.autoSetStepTitles = false;
                        if (!this.autoSetStepTitles) {
                            step.heading = undefined;
                            stepTitleArea &&
                                ((_b = stepTitleArea === null || stepTitleArea === void 0 ? void 0 : stepTitleArea.querySelector(".heading")) === null || _b === void 0 ? void 0 : _b.removeAttribute("aria-hidden"));
                        }
                    }
                }
                if (this.variant === "compact") {
                    if (step.current === true || step.type === "current") {
                        step.classList.remove("hide");
                        step.classList.add("show");
                    }
                    else if (step.classList.contains("show")) {
                        step.classList.remove("show");
                        step.classList.add("hide");
                    }
                    if (!step.lastStep) {
                        const nextStep = this.steps[index + 1];
                        step.nextStepHeading = this.stepHeading(nextStep, true);
                        step.progress = (step.stepNum / this.steps.length) * 100;
                    }
                    else if (step.lastStep && this.stepTypes[index] !== "completed") {
                        step.progress = 95;
                    }
                    else {
                        step.progress = 100;
                    }
                    if (this.hideStepInfo && stepTitleArea !== null) {
                        stepTitleArea.classList.remove(this.visuallyHidden);
                    }
                    step.compactStepStyling = this.stepTypes[index];
                }
                if (this.variant === "default") {
                    if (!step.lastStep) {
                        if (this.alignedFullWidth && this.stepperWidth !== undefined) {
                            step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
                                (this.steps.length - 1)}px`);
                            step.style.minWidth = pxToRem("148px");
                        }
                    }
                    else if (step.lastStep) {
                        step.classList.add("last-step");
                        if (this.alignedFullWidth) {
                            step.style.maxWidth = `${this.lastStepWidth}px`;
                        }
                        else if (this.connectorWidth) {
                            step.style.maxWidth =
                                this.connectorWidth > 100
                                    ? pxToRem(`${this.connectorWidth + 48}px`)
                                    : pxToRem("148px");
                        }
                    }
                    if (this.aligned === "left" && this.connectorWidth) {
                        step.style.width =
                            this.connectorWidth > 100
                                ? pxToRem(`${this.connectorWidth + 48}px`)
                                : pxToRem("148px");
                        const stepConnect = (_c = step.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(".step > .step-top > .step-connect");
                        if (stepConnect) {
                            stepConnect.style.width =
                                this.connectorWidth > 100
                                    ? pxToRem(`${this.connectorWidth}px`)
                                    : pxToRem("100px");
                        }
                    }
                    if (this.hideStepInfo && stepTitleArea !== null) {
                        stepTitleArea.classList.add(this.visuallyHidden);
                    }
                }
            });
        };
        this.setHideStepInfo = () => {
            this.steps.forEach((step) => {
                var _a, _b, _c;
                const stepTitleArea = (_a = step.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".step > .heading-area");
                if (stepTitleArea) {
                    if (this.hideStepInfo) {
                        (_b = stepTitleArea.classList) === null || _b === void 0 ? void 0 : _b.add(this.visuallyHidden);
                    }
                    else {
                        (_c = stepTitleArea.classList) === null || _c === void 0 ? void 0 : _c.remove(this.visuallyHidden);
                    }
                }
            });
        };
        this.overrideVariant = () => {
            if (this.variantOverride) {
                let minDefaultStepperWidth = 148 * this.steps.length;
                if (this.aligned === "left" &&
                    this.connectorWidth &&
                    this.connectorWidth > 100) {
                    minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;
                }
                if (this.el.clientWidth < minDefaultStepperWidth) {
                    this.variant = "compact";
                }
                else {
                    this.variant = "default";
                }
            }
        };
        this.resizeObserverCallback = () => {
            this.getChildren();
            this.checkStepTitles();
            this.overrideVariant();
            this.setStepperWidth();
            this.initialiseStepStates();
            this.handleThemeChange();
        };
        this.runResizeObserver = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.resizeObserverCallback();
            });
            this.resizeObserver.observe(this.el);
        };
    }
    handleThemeChange() {
        this.getChildren();
        this.steps.forEach((step) => {
            step.theme = this.theme;
        });
    }
    handlePropChange() {
        this.setHideStepInfo();
        this.getChildren();
    }
    disconnectedCallback() {
        if (this.resizeObserver !== null) {
            this.resizeObserver.disconnect();
        }
    }
    componentWillLoad() {
        this.setStepTypes();
        this.handleThemeChange();
        if (this.variant === "compact") {
            this.variantOverride = false;
        }
    }
    componentWillRender() {
        this.initialiseStepStates();
    }
    componentDidLoad() {
        checkResizeObserver(this.runResizeObserver);
    }
    render() {
        return (h(Host, { key: '457ee30e4513044d1160e73ab9e868c796d996e2', class: {
                [`ic-stepper-${this.variant}`]: true,
                ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
            } }, h("ul", { key: '32a6e9ee86bc0a89d9997aa7f74250874f1e466f', class: "step-item-list" }, h("slot", { key: '9571c50056c525a853cd0469d81fa2dead8cec1f' }))));
    }
    get el() { return this; }
    static get watchers() { return {
        "theme": ["handleThemeChange"],
        "hideStepInfo": ["handlePropChange"],
        "variant": ["handlePropChange"]
    }; }
    static get style() { return IcStepperStyle0; }
}, [1, "ic-stepper", {
        "aligned": [1],
        "connectorWidth": [2, "connector-width"],
        "hideStepInfo": [4, "hide-step-info"],
        "icI18n": [16],
        "theme": [1],
        "variant": [1025],
        "alignedFullWidth": [32],
        "autoSetStepTitles": [32],
        "lastStepWidth": [32],
        "noOfResizes": [32],
        "stepperWidth": [32],
        "stepTypes": [32],
        "variantOverride": [32]
    }, undefined, {
        "theme": ["handleThemeChange"],
        "hideStepInfo": ["handlePropChange"],
        "variant": ["handlePropChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-stepper"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-stepper":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Stepper);
            }
            break;
    } });
}

const IcStepper = Stepper;
const defineCustomElement = defineCustomElement$1;

export { IcStepper, defineCustomElement };

//# sourceMappingURL=ic-stepper.js.map