/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { r as registerInstance, c as createEvent, g as getElement, j as forceUpdate, F as Fragment } from './index-BM3Om9WE.js';
import { h } from './renderer-DpNDfhNy.js';

const stepAccordionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}.nano-details{--padding:0;--btn-bg-color--hover:transparent;--btn-bg-color--active:transparent;border:none;margin-block-end:var(--nano-spacing-sm)}.nano-details::part(base){display:grid;grid-template-rows:auto auto;grid-template-columns:auto 1fr;gap:var(--nano-spacing-sm) 1.625rem}.nano-details.step--grid-working::part(base)::before{content:\"\";display:block;grid-column:1;grid-row:2;inline-size:1rem;min-block-size:1rem;border-inline-end:2px solid var(--nano-color-neutral-300)}.nano-details.step--grid-working::part(base)::after{content:\"\";grid-column:1;grid-row:2;inline-size:0.4rem;block-size:0.4rem;place-self:end end;translate:-50% 0;inset-inline-start:calc(50% - 2.5px);position:relative;border-inline-end:2px solid var(--nano-color-neutral-300);border-block-end:2px solid var(--nano-color-neutral-300);rotate:45deg}.nano-details:last-of-type::part(base)::before{min-block-size:0}.nano-details:last-of-type::part(base)::after{display:none}.nano-details::part(header){grid-column:1/-1;grid-row:1;display:inline-flex;gap:var(--nano-spacing-sm)}.nano-details::part(body){grid-column:2;grid-row:2}.nano-details::part(content-wrapper){padding:1px}.nano-details.step--grid-not-working::part(header){padding-block-end:var(--nano-spacing-sm)}.nano-details.step--grid-not-working::part(body){padding:0 0 0 2.5625rem}.step .step-header{display:inline-flex;gap:var(--nano-spacing-sm);align-items:center}.step .step-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-neutral-1400);border:1px solid var(--nano-color-neutral-300)}.step.step--complete .step-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step[open] .step-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step .step-change{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-decoration:underline;color:var(--nano-color-primary-1200)}";

const NanoStepAccordion = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoStepActive = createEvent(this, "nanoStepActive", 7);
    }
    get host() { return getElement(this); }
    nanoDetails;
    gridWorking = true;
    /** The currently active step, zero-based index */
    activeStep = 0;
    handleActiveStepChange(newValue, oldValue) {
        if (!this.steps[newValue]?.enabled)
            this.activeStep = oldValue;
        else {
            const event = this.nanoStepActive.emit({
                index: newValue,
                step: this.steps[newValue],
            });
            if (event.defaultPrevented) {
                this.activeStep = oldValue;
            }
        }
    }
    _steps = [];
    stepProxyHandler = {
        set: (target, prop, value) => {
            target[prop] = value;
            forceUpdate(this.host);
            return true;
        },
    };
    /** An array of steps, each with a title, completion status, and enabled state */
    get steps() {
        return this._steps;
    }
    set steps(value) {
        this._steps = [];
        // improved devX - use a proxy to re-render when step properties change
        value.forEach((step) => {
            const proxyStep = new Proxy(step, this.stepProxyHandler);
            this._steps.push(proxyStep);
        });
    }
    /** Emitted when the active step changes. Prevent default to cancel the change */
    nanoStepActive;
    handleToggle(event) {
        if (event.detail.index === this.activeStep)
            return;
        this.activeStep = event.detail.index;
    }
    // A dirty great hack for Firefox - it doesn't support grid layout in `<details>`
    // so we use this to apply different styles based on whether grid is working or not
    isDetailsGridWorking(detailsEl) {
        // Create a test element with explicit grid placement
        const testEl = document.createElement('div');
        testEl.style.gridColumn = '2';
        testEl.style.height = '1px';
        testEl.style.width = '1px';
        testEl.style.visibility = 'hidden';
        detailsEl.appendChild(testEl);
        const parentX = detailsEl.getBoundingClientRect().x;
        const testX = testEl.getBoundingClientRect().x;
        detailsEl.removeChild(testEl);
        // If testEl moved horizontally, grid is in effect
        return Math.abs(testX - parentX) > 1;
    }
    componentDidLoad() {
        if (!this.nanoDetails)
            return;
        const detailsEl = this.nanoDetails.shadowRoot.querySelector('details');
        if (detailsEl) {
            this.gridWorking = this.isDetailsGridWorking(detailsEl);
        }
    }
    render() {
        return (h("nano-accordion", { key: '1a977444388da596ff3fbf0559ac77a274efce11', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
                step: true,
                'step--active': index === this.activeStep,
                'step--complete': step.complete,
                'step--grid-working': this.gridWorking,
                'step--grid-not-working': !this.gridWorking,
                'step--disabled': !step.enabled,
            }, ref: (el) => (this.nanoDetails = el) }, h("span", { class: "step-icon", slot: "icon-start" }, index + 1), h("div", { class: "step-header", slot: "label" }, h("span", { class: `step-title ${step.complete ? 'complete' : ''}` }, step.title), step.complete && (h(Fragment, null, h("span", null, " - "), h("span", { class: "step-change" }, "Change")))), h("span", { slot: "icon-end" }), h("div", { class: "step-content" }, h("slot", { name: `step-${index}` })))))));
    }
    static get watchers() { return {
        "activeStep": ["handleActiveStepChange"]
    }; }
};
NanoStepAccordion.style = stepAccordionCss;

export { NanoStepAccordion as nano_step_accordion };
