@kelvininc/ui-components
Version:
Kelvin UI Components
54 lines (50 loc) • 3.4 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.js';
const stepIndicatorCss = "@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{--indicator-radius:14px;--indicator-default-color:var(--icon-persistent-wizard-default);--indicator-default-border-color:var(--icon-persistent-wizard-default);--indicator-active-color:var(--icon-persistent-wizard-inverse);--indicator-active-border-color:var(--border-persistent-wizard-selected);--indicator-error-border-color:var(--color-red-500)}.indicator{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--indicator-radius);height:var(--indicator-radius);border-radius:50%;background-color:var(--indicator-default-color);border:2px solid var(--indicator-default-border-color);transition:all 0.25s ease}.indicator--state-enabled{cursor:pointer}.indicator--state-active{background-color:var(--indicator-active-color);border-color:var(--indicator-active-border-color)}.indicator--state-active kv-icon{--icon-color:var(--indicator-active-border-color)}.indicator--state-error{border-color:var(--indicator-error-border-color)}.indicator--state-error kv-icon{--icon-color:var(--indicator-error-border-color)}.indicator kv-icon{--icon-width:var(--indicator-radius);--icon-height:var(--indicator-radius)}";
const KvStepIndicator = /*@__PURE__*/ proxyCustomElement(class KvStepIndicator extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.indicatorClicked = createEvent(this, "indicatorClicked", 7);
this.onIndicatorClick = (event) => {
if (this.enabled) {
this.indicatorClicked.emit(event);
}
};
}
render() {
return (h(Host, { key: '9a68db4b4bed9ff56af4d61a9f0065bc8690393c' }, h("div", { key: '4d5f5537380224ff06a1babd51f3c055a0a9237a', class: {
'indicator': true,
'indicator--state-enabled': this.enabled,
'indicator--state-active': this.active,
'indicator--state-error': this.hasError
}, onClick: this.onIndicatorClick }, !this.isCurrent && this.active && h("kv-icon", { key: '351555a981d525036492a0dacdd18bbeadbd1cdf', name: this.hasError ? EIconName.Error : EIconName.Success }))));
}
static get style() { return stepIndicatorCss; }
}, [257, "kv-step-indicator", {
"enabled": [516],
"active": [516],
"hasError": [516, "has-error"],
"isCurrent": [4, "is-current"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-step-indicator", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-step-indicator":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvStepIndicator);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvStepIndicator as K, defineCustomElement as d };