import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DBTJNfo7.js';
import { g as getIconName } from './get-icon-props-CgNJbSP4.js';

const progressFlowItemCss = () => `@charset "UTF-8";.step:before,.step .lock-icon{pointer-events:none;box-sizing:border-box;z-index:var(--limel-progress-flow-step-content)}.step::before{position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step .lock-icon{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before{content:"";width:0.375rem;height:0.375rem;background-color:rgb(var(--contrast-700));opacity:0.7}.lock-icon{margin-left:0.25rem;margin-right:-0.5rem;width:0.75rem;color:currentColor;scale:0.8}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}.flow-item{--step-background:var(       --progress-flow-step-background-color,       rgb(var(--contrast-600))   );--step-background--selected:var(       --progress-flow-step-background-color--selected,       var(--lime-primary-color, var(--limel-theme-primary-color))   );--step-background--passed:var(       --progress-flow-step-background-color--passed,       var(--step-background--selected)   );--step-text:var(       --progress-flow-step-text-color,       rgb(var(--contrast-1200))   );--step-text--selected:var(       --progress-flow-step-text-color--selected,       var(--lime-on-primary-color, var(--limel-theme-on-primary-color))   );--step-text--passed:var(       --progress-flow-step-text-color--passed,       var(--step-text--selected)   );--step-divider-color:var(       --progress-flow-step-divider-color,       rgb(var(--contrast-100))   );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:""}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:var(--limel-theme-default-font-size)}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:var(--limel-progress-flow-divider);right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:var(--limel-progress-flow-step-content)}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:var(--limel-progress-flow-step-content)}`;

const ProgressFlowItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.interact = createEvent(this, "interact");
        /**
         * The flow item that should be rendered
         */
        this.item = null;
        /**
         * True if the flow item should be disabled
         */
        this.disabled = false;
        /**
         * True if the flow item should be readonly
         */
        this.readonly = false;
        /**
         * True for current step
         */
        this.currentStep = false;
        this.handleClick = () => {
            this.interact.emit();
        };
    }
    render() {
        var _a;
        if (!this.item) {
            return;
        }
        return [
            h("button", { tabindex: "0", title: this.getToolTipText(), type: "button", class: {
                    step: true,
                    selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
                    disabled: this.isDisabled(),
                    readonly: this.readonly,
                }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
            this.renderSecondaryText(),
        ];
    }
    isDisabled() {
        var _a;
        return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disabled) || this.readonly || this.disabled;
    }
    getToolTipText() {
        if (!this.item.secondaryText) {
            return this.item.text;
        }
        return [this.item.text, this.item.secondaryText].join(' · ');
    }
    renderSecondaryText() {
        var _a;
        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.secondaryText)) {
            return;
        }
        return h("div", { class: "secondary-text" }, this.item.secondaryText);
    }
    renderIcon() {
        if (!this.item.icon) {
            return;
        }
        const name = getIconName(this.item.icon);
        return h("limel-icon", { name: name, size: "small", class: "icon" });
    }
    renderDivider() {
        if (this.item.isOffProgress) {
            return;
        }
        return h("div", { class: "divider" });
    }
    renderLockIcon() {
        if (!this.isDisabled()) {
            return;
        }
        return h("limel-icon", { name: "lock", class: "lock-icon" });
    }
    get element() { return getElement(this); }
};
ProgressFlowItem.style = progressFlowItemCss();

export { ProgressFlowItem as limel_progress_flow_item };
