@kelvininc/ui-components
Version:
Kelvin UI Components
55 lines (51 loc) • 3.32 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { b as EIconName } from './p-DBphUUgi.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
const stepIndicatorCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--indicator-radius:14px;--indicator-default-color:var(--kv-neutral-6, #3f3f3f);--indicator-default-border-color:var(--kv-neutral-6, #3f3f3f);--indicator-active-color:var(--kv-neutral-3, #ddd);--indicator-active-border-color:var(--kv-success, #05a357);--indicator-error-border-color:var(--kv-error, #e11900)}.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 = () => {
if (this.enabled) {
this.indicatorClicked.emit();
}
};
}
render() {
return (h(Host, { key: 'e4d1e45c0f8adc4dd5cacb6fbd5dad820d023efc' }, h("div", { key: 'd88c63544fef726669c7ffdf987e01763dbc1f5a', 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: '74869c1dab6814c36ed4f4e064416cc8d252274c', name: this.hasError ? EIconName.Error : EIconName.Success }))));
}
static get style() { return stepIndicatorCss; }
}, [1, "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 };