/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { C as ConstructibleStyle } from './constructible-style.js';
import { a as addGlobalStylesheetToShadow } from './style.js';
import { d as defineCustomElement$5 } from './dropdown.js';
import { d as defineCustomElement$4 } from './icon.js';
import { d as defineCustomElement$3 } from './menu.js';
import { d as defineCustomElement$2 } from './nav-item.js';

const stepBreadcrumbCss = ":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;--background:var(--nano-color-base-0)}.step-wrapper{container-type:inline-size}.step-list.desktop{display:flex;flex-direction:row;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative;z-index:1}.step-list.desktop::before{content:\"\";display:block;flex-grow:1;block-size:1px;background-color:var(--nano-color-neutral-300);position:absolute;inset-block-start:50%;z-index:-1;inset-inline-start:0;inline-size:100%}.step-item-wrapper{flex:0 1 auto;display:inline-flex;align-items:center;cursor:pointer}.step-item-wrapper:last-of-type{flex:0 1 auto}.step-item-wrapper:last-of-type .step-item{padding-inline-end:0}.step-item-wrapper:first-of-type::before{display:none}.step-item-wrapper:first-of-type .step-item{padding-inline-start:0}.step-item-wrapper::before{content:\"\";grid-column:2;grid-row:1;inline-size:0.4rem;block-size:0.4rem;place-self:center end;inset-block-start:0.5px;position:relative;border-inline-end:1px solid var(--nano-color-neutral-300);border-block-end:1px solid var(--nano-color-neutral-300);rotate:-45deg}:dir(rtl) .step-item-wrapper::after{rotate:45deg}.step-item{all:unset;display:inline-flex;align-items:center;gap:var(--nano-spacing-sm);background-color:var(--background);padding:0 var(--nano-spacing-sm);position:relative}.step-item:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.step-item.step-item--disabled{cursor:not-allowed}.step-item.step-item--disabled>*{opacity:0.5}.step-item-icon{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;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-item--complete .step-item-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step-dropdown{inline-size:100%;min-inline-size:300px}.step-trigger{all:unset;display:inline-flex;gap:var(--nano-spacing-md);align-items:center;inline-size:100%;cursor:pointer}.step-trigger-text{display:flex;flex-direction:column}.step-trigger-now{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance;color:var(--nano-color-neutral-1400)}.step-trigger-next{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--nano-color-neutral-1000)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-primary-1000);transition:var(--nano-transition-x-fast) rotate}[open] .step-trigger-icon{rotate:180deg}.step-progress-circle{--size:64px;--thickness:4px;inline-size:var(--size);min-inline-size:var(--size);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative}.step-progress-circle::before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%)}.step-progress-title{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;color:var(--nano-color-neutral-1000)}.step-progress-title strong{color:var(--nano-color-neutral-1400)}";

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (undefined && undefined.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
        return Reflect.metadata(k, v);
};
const NanoStepBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoStepBreadcrumb extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.nanoStepActive = createEvent(this, "nanoStepActive", 7);
    }
    get host() { return this; }
    calculatedWidth;
    cacheKey;
    /** 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;
            }
        }
    }
    /** Emitted when the active step changes. Prevent default to cancel the change */
    nanoStepActive;
    _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);
        });
    }
    handleStepsChange() {
        const numberOfSteps = this._steps.length;
        const charLength = this._steps.reduce((acc, step) => acc + step.title.length, 0);
        this.cacheKey = 'step-breadcrumb-' + numberOfSteps + charLength;
        // text characters + icons (3 x 1.5rem) + arrows (2 x 1.875rem) + gaps (3 * 20px)
        this.calculatedWidth = `calc(${charLength}ch + ${numberOfSteps * 1.5}rem + ${(numberOfSteps - 1) * 1.875}rem + ${numberOfSteps * 10}px)`;
    }
    styles = () => {
        const css = /* css */ `@container (width > ${this.calculatedWidth}) {
      .step-list.mobile.${this.cacheKey} { display: none; }
      .step-list.desktop.${this.cacheKey} { display: flex; }
    }
    @container (width <= ${this.calculatedWidth}) {
      .step-list.mobile.${this.cacheKey} { display: block; }
      .step-list.desktop.${this.cacheKey} { display: none; }
    }`;
        return css;
    };
    componentWillLoad() {
        this.handleStepsChange();
        if (Build.isBrowser)
            addGlobalStylesheetToShadow(this.host.shadowRoot);
    }
    ControlTag = ({ step, index, }) => {
        const Tag = step.enabled ? (step.href ? 'A' : 'BUTTON') : 'SPAN';
        return (h(Tag, { href: step.href || undefined, class: {
                'step-item': true,
                'step-item--active': index === this.activeStep,
                'step-item--complete': step.complete,
                'step-item--disabled': !step.enabled,
            }, onClick: () => {
                if (step.enabled) {
                    this.activeStep = index;
                }
            } }, h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), h("span", { class: "step-item-title" }, step.title)));
    };
    render() {
        const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
        return (h(Host, { key: 'c36aea91ff263fe145d0eebfe5ba34c3fb33c948' }, h(Wrapper, { key: '5399b604512fdc7254f01702b5f58fd1ab5725be', class: "step-wrapper" }, h("ul", { key: '42f2f8adddd37661873ed4b16559b558a4525af4', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: 'ab41697fed0c7d4282913f8492676008cee1ec63', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '73e5bba6d10f193c4e0b6b2ff43919e0b1589bcb', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '7054eb631e22d22ef7fbcb0c8320e77b288b381f', slot: "trigger", class: "step-trigger" }, h("div", { key: '8f0816402f31637a1402d1ee1e66bcd086ef6377', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
                '--value': '' + (this.activeStep + 1),
                '--max': '' + this.steps.length,
            } }, h("span", { key: '1ab7e9e69dc52d2761b2c1a2c7bdb19cc0cdad0f', class: "step-progress-text" }, h("strong", { key: 'e760c2e668e5930694a873448154e3f23bf03018' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: '0afdddcdfa767f2d250986360c5ce52a37adc868', class: "step-trigger-text" }, h("div", { key: '1c200ddd5ca41a6c003c4b4bfa6c6e188a8641ac', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: 'c600fd068470ea8ae187c74dc9616e8efb057c9e', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '053727621ffd9a19c39b9be0766c904391ede136', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '7a578be0c13a7e4edeb40500e30e58d47c917b8e' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
                'step-item-mobile': true,
                'step-item-mobile step-item--active': index === this.activeStep,
                'step-item-mobile step-item--complete': step.complete,
            }, disabled: !step.enabled, key: index, onClick: () => {
                if (step.enabled) {
                    this.activeStep = index;
                }
            }, href: step.href || undefined }, h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), h("span", { class: "step-item-title" }, step.title))))))))));
    }
    static get watchers() { return {
        "activeStep": ["handleActiveStepChange"],
        "steps": ["handleStepsChange"]
    }; }
    static get style() { return stepBreadcrumbCss; }
}, [257, "nano-step-breadcrumb", {
        "activeStep": [1026, "active-step"],
        "steps": [6160],
        "calculatedWidth": [32]
    }, undefined, {
        "activeStep": ["handleActiveStepChange"],
        "steps": ["handleStepsChange"]
    }]);
__decorate([
    ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
    __metadata("design:type", Object)
], NanoStepBreadcrumb$1.prototype, "styles", void 0);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-step-breadcrumb", "nano-dropdown", "nano-icon", "nano-menu", "nano-nav-item"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-step-breadcrumb":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NanoStepBreadcrumb$1);
            }
            break;
        case "nano-dropdown":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "nano-menu":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "nano-nav-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const NanoStepBreadcrumb = NanoStepBreadcrumb$1;
const defineCustomElement = defineCustomElement$1;

export { NanoStepBreadcrumb, defineCustomElement };
