/*!
 * Custom elements for Nanopore-Digital Web applications
 */
var __decorate = (this && this.__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 = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
        return Reflect.metadata(k, v);
};
import { forceUpdate, Host, Build, } from "@stencil/core";
import { h } from "../../utils/renderer";
import { ConstructibleStyle } from "../../utils/constructible-style";
import { addGlobalStylesheetToShadow } from "../../utils/style";
/**
 * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
 *
 * @version 8.4.0
 * @status new
 */
export class NanoStepBreadcrumb {
    host;
    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 is() { return "nano-step-breadcrumb"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["step-breadcrumb.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["step-breadcrumb.css"]
        };
    }
    static get properties() {
        return {
            "activeStep": {
                "type": "number",
                "attribute": "active-step",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The currently active step, zero-based index"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "0"
            },
            "steps": {
                "type": "unknown",
                "attribute": "steps",
                "mutable": false,
                "complexType": {
                    "original": "Step[]",
                    "resolved": "Step[]",
                    "references": {
                        "Step": {
                            "location": "global",
                            "id": "global::Step"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "An array of steps, each with a title, completion status, and enabled state"
                },
                "getter": true,
                "setter": true,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "calculatedWidth": {}
        };
    }
    static get events() {
        return [{
                "method": "nanoStepActive",
                "name": "nanoStepActive",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the active step changes. Prevent default to cancel the change"
                },
                "complexType": {
                    "original": "{\n    step: Step;\n    index: number;\n  }",
                    "resolved": "{ step: Step; index: number; }",
                    "references": {
                        "Step": {
                            "location": "global",
                            "id": "global::Step"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "activeStep",
                "methodName": "handleActiveStepChange"
            }, {
                "propName": "steps",
                "methodName": "handleStepsChange"
            }];
    }
}
__decorate([
    ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
    __metadata("design:type", Object)
], NanoStepBreadcrumb.prototype, "styles", void 0);
