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

Kelvin UI Components

import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';

const stepProgressBarNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--progress-bar-height:2px;--progress-height:14px}.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}:host{--progress-bar-background-color:var(--kv-neutral-6, #3f3f3f);--progress-bar-filler-success-color:var(--kv-success, #05a357);--progress-bar-filler-error-color:var(--kv-error, #e11900)}";

const KvStepProgressBar = /*@__PURE__*/ proxyCustomElement(class KvStepProgressBar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    render() {
        return (h(Host, { key: 'ca1248bc426c256237986832ba20afbad3c41ce7' }, h("div", { key: 'b8f72823c26cf06bcade80aeb7a09b2c4b611e30', class: "step-progress-bar-container" }, h("div", { key: '2ef5b67f71979fd14f148fae51d000657304a974', class: "progress-bar" }), h("div", { key: '6c8b1989660c2adf21faced6e7dd5d3949ac1130', class: {
                'progress-bar-filler': true,
                'error': this.hasError
            }, style: { width: this.progressPercentage + '%' } }), h("div", { key: '248acdf8385b2f11c46f674a1b02e40bf25fc213', class: "steps-container" }, h("slot", { key: '385e30645a052e9e71df11867540a0124572cb54' })))));
    }
    static get style() { return {
        night: stepProgressBarNightCss
    }; }
}, [33, "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 };