@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (64 loc) • 3.87 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { d as defineCustomElement$3 } from './p-B41PGLQm.js';
import { d as defineCustomElement$2 } from './p-CN9dVFXT.js';
import { d as defineCustomElement$1 } from './p-GT0Ue4fu.js';
const DEFAULT_LABEL = 'Progress:';
const stepBarCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--step-label-color:var(--kv-neutral-0, #fff);--step-counter-color:var(--kv-neutral-1, #f2f2f6)}.label-container .label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--step-label-color)}.label-container .step-counter{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--step-counter-color);margin-left:var(--kv-spacing, 4px)}.progress-bar-container{margin-top:var(--kv-spacing, 4px)}.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; }
}, [1, "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 };