@kelvininc/ui-components
Version:
Kelvin UI Components
72 lines (62 loc) • 7 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
const DEFAULT_LABEL = 'Progress:';
const stepBarCss = "@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{--step-label-color:var(--text-surface-neutral-secondary);--step-counter-color:var(--text-surface-neutral-secondary)}.label-container .label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:0;color:var(--step-label-color)}.label-container .step-counter{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--step-counter-color);margin-left:var(--spacing-xs)}.progress-bar-container{margin-top:var(--spacing-xs)}.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}}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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.indicatorClicked = index.createEvent(this, "indicatorClicked", 7);
this.onIndicatorClick = (event) => {
if (this.enabled) {
this.indicatorClicked.emit(event);
}
};
}
render() {
return (index.h(index.Host, { key: '9a68db4b4bed9ff56af4d61a9f0065bc8690393c' }, index.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 && index.h("kv-icon", { key: '351555a981d525036492a0dacdd18bbeadbd1cdf', name: this.hasError ? wizard_types.EIconName.Error : wizard_types.EIconName.Success }))));
}
};
KvStepIndicator.style = stepIndicatorCss;
const stepProgressBarCss = "@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{--progress-bar-height:2px;--progress-height:14px;--progress-bar-background-color:var(--border-persistent-wizard-default);--progress-bar-filler-success-color:var(--border-persistent-wizard-selected);--progress-bar-filler-error-color:var(--color-red-500)}.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}";
const KvStepProgressBar = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { key: 'd9797b78ada7db2c19a1c94793d0ea59ddc10d28' }, index.h("div", { key: 'ad7f943999d0e2cee1670dcd5eb0d112fa038ccb', class: "step-progress-bar-container" }, index.h("div", { key: '39d8465be709626b705b6a4ae11827517d7fc7de', class: "progress-bar" }), index.h("div", { key: '3b00d8f177653a017e0b3ae622d458af1b980c38', class: {
'progress-bar-filler': true,
'error': this.hasError
}, style: { width: this.progressPercentage + '%' } }), index.h("div", { key: 'c81b0fcf249100e04ad191262b9648594f0897bf', class: "steps-container" }, index.h("slot", { key: '57d0e8ee84afe427ae1b9b7d165a45621da5e052' })))));
}
};
KvStepProgressBar.style = stepProgressBarCss;
exports.kv_step_bar = KvStepBar;
exports.kv_step_indicator = KvStepIndicator;
exports.kv_step_progress_bar = KvStepProgressBar;