@kelvininc/ui-components
Version:
Kelvin UI Components
74 lines (64 loc) • 7 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var icon_types = require('./icon.types-B8lvUrX_.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.stepClicked = index.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 (index.h(index.Host, null, index.h("div", { class: "label-container" }, index.h("span", { class: "label" }, this.label), index.h("span", { class: "step-counter" }, this.currentStep + 1, " / ", this.steps.length, " Steps")), index.h("div", { class: "progress-bar-container" }, index.h("kv-step-progress-bar", { progressPercentage: this.progressPercentage }, this.steps.map(({ active, enabled, hasError, stepKey }, idx) => (index.h("div", { class: "step-indicator-container" }, index.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) }))))))));
}
};
KvStepBar.style = stepBarCss;
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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.indicatorClicked = index.createEvent(this, "indicatorClicked", 7);
this.onIndicatorClick = () => {
if (this.enabled) {
this.indicatorClicked.emit();
}
};
}
render() {
return (index.h(index.Host, { key: 'e4d1e45c0f8adc4dd5cacb6fbd5dad820d023efc' }, index.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 && index.h("kv-icon", { key: '74869c1dab6814c36ed4f4e064416cc8d252274c', name: this.hasError ? icon_types.EIconName.Error : icon_types.EIconName.Success }))));
}
};
KvStepIndicator.style = stepIndicatorCss;
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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { key: 'ca1248bc426c256237986832ba20afbad3c41ce7' }, index.h("div", { key: 'b8f72823c26cf06bcade80aeb7a09b2c4b611e30', class: "step-progress-bar-container" }, index.h("div", { key: '2ef5b67f71979fd14f148fae51d000657304a974', class: "progress-bar" }), index.h("div", { key: '6c8b1989660c2adf21faced6e7dd5d3949ac1130', class: {
'progress-bar-filler': true,
'error': this.hasError
}, style: { width: this.progressPercentage + '%' } }), index.h("div", { key: '248acdf8385b2f11c46f674a1b02e40bf25fc213', class: "steps-container" }, index.h("slot", { key: '385e30645a052e9e71df11867540a0124572cb54' })))));
}
};
KvStepProgressBar.style = {
night: stepProgressBarNightCss
};
exports.kv_step_bar = KvStepBar;
exports.kv_step_indicator = KvStepIndicator;
exports.kv_step_progress_bar = KvStepProgressBar;