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

Kelvin UI Components

import { H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';

const stepProgressBarCss = "@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{--progress-bar-height:2px;--progress-height:14px;--progress-bar-background-color:var(--border-persistent-wizard-default);--progress-bar-filler-success-color:var(--border-persistent-wizard-selected);--progress-bar-filler-error-color:var(--color-red-500)}.step-progress-bar-container{display:flex;height:var(--progress-height);position:relative;align-items:center;justify-content:space-between}.step-progress-bar-container .progress-bar{width:100%;height:var(--progress-bar-height);border-radius:calc(var(--progress-bar-height) / 2);background-color:var(--progress-bar-background-color);padding:0 calc(var(--progress-bar-height) / 2)}.step-progress-bar-container .progress-bar-filler{position:absolute;height:var(--progress-bar-height);background-color:var(--progress-bar-filler-success-color);border-radius:calc(var(--progress-bar-height) / 2)}.step-progress-bar-container .progress-bar-filler.error{background-color:var(--progress-bar-filler-error-color)}.step-progress-bar-container .steps-container{position:absolute;left:0;width:100%;display:flex;justify-content:space-between;align-items:center}";

const KvStepProgressBar = /*@__PURE__*/ proxyCustomElement(class KvStepProgressBar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    render() {
        return (h(Host, { key: 'd9797b78ada7db2c19a1c94793d0ea59ddc10d28' }, h("div", { key: 'ad7f943999d0e2cee1670dcd5eb0d112fa038ccb', class: "step-progress-bar-container" }, h("div", { key: '39d8465be709626b705b6a4ae11827517d7fc7de', class: "progress-bar" }), h("div", { key: '3b00d8f177653a017e0b3ae622d458af1b980c38', class: {
                'progress-bar-filler': true,
                'error': this.hasError
            }, style: { width: this.progressPercentage + '%' } }), h("div", { key: 'c81b0fcf249100e04ad191262b9648594f0897bf', class: "steps-container" }, h("slot", { key: '57d0e8ee84afe427ae1b9b7d165a45621da5e052' })))));
    }
    static get style() { return stepProgressBarCss; }
}, [257, "kv-step-progress-bar", {
        "progressPercentage": [514, "progress-percentage"],
        "hasError": [516, "has-error"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-step-progress-bar"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-step-progress-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvStepProgressBar);
            }
            break;
    } });
}
defineCustomElement();

export { KvStepProgressBar as K, defineCustomElement as d };