@kelvininc/ui-components/components/p-LxF5eaz5.js

Kelvin UI Components

import { H as proxyCustomElement, I as H, J as createEvent, K as h, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$3 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$2 } from './p-BX_WQCNH.js';
import { d as defineCustomElement$1 } from './p-yOkIKVJR.js';

const DEFAULT_LABEL = 'Progress:';

const stepBarCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--step-label-color:var(--text-surface-neutral-secondary);--step-counter-color:var(--text-surface-neutral-secondary)}.label-container .label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:0;color:var(--step-label-color)}.label-container .step-counter{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--step-counter-color);margin-left:var(--spacing-xs)}.progress-bar-container{margin-top:var(--spacing-xs)}.progress-bar-container kv-step-progress-bar{--progress-bar-height:2px;--progress-height:14px}.progress-bar-container kv-step-indicator{--indicator-radius:14px}.progress-bar-container .step-indicator-container{display:flex;align-items:center}";

const KvStepBar = /*@__PURE__*/ proxyCustomElement(class KvStepBar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.stepClicked = createEvent(this, "stepClicked", 7);
        /** @inheritdoc */
        this.label = DEFAULT_LABEL;
        /** @inheritdoc */
        this.hasError = false;
        this.onStepClick = (idx) => {
            this.stepClicked.emit(idx);
        };
    }
    render() {
        if (!this.steps) {
            return;
        }
        return (h(Host, null, h("div", { class: "label-container" }, h("span", { class: "label" }, this.label), h("span", { class: "step-counter" }, this.currentStep + 1, "/", this.steps.length, " Steps")), h("div", { class: "progress-bar-container" }, h("kv-step-progress-bar", { progressPercentage: this.progressPercentage }, this.steps.map(({ active, enabled, hasError, stepKey }, idx) => (h("div", { class: "step-indicator-container" }, h("kv-step-indicator", { class: "step-indicator", key: stepKey, enabled: enabled, active: active, hasError: hasError, isCurrent: idx === this.currentStep, onIndicatorClicked: this.onStepClick.bind(this, idx) }))))))));
    }
    static get style() { return stepBarCss; }
}, [257, "kv-step-bar", {
        "label": [513],
        "steps": [16],
        "currentStep": [514, "current-step"],
        "progressPercentage": [514, "progress-percentage"],
        "hasError": [516, "has-error"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-step-bar", "kv-icon", "kv-step-indicator", "kv-step-progress-bar"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-step-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvStepBar);
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "kv-step-indicator":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "kv-step-progress-bar":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { KvStepBar as K, defineCustomElement as d };