@hashicorp/design-system-components
Version:
Helios Design System Components
50 lines (47 loc) • 2.61 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { eq } from 'ember-truth-helpers';
import { HdsStepperStatusesValues } from '../types.js';
import HdsIcon from '../../icon/index.js';
import HdsTextBody from '../../text/body.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
const STATUSES = Object.values(HdsStepperStatusesValues);
class HdsStepperStepIndicator extends Component {
get status() {
const {
status = DEFAULT_STATUS
} = this.args;
assert(` for "Hds::Stepper::Step::Indicator" must be one of the following: ${STATUSES.join(', ')}; received: ${status}`, STATUSES.includes(status));
return status;
}
get isInteractive() {
return this.args.isInteractive || false;
}
get classNames() {
const classes = ['hds-stepper-indicator-step'];
// Based on the @status arg
classes.push(`hds-stepper-indicator-step--status-${this.status}`);
if (this.isInteractive) {
classes.push(`hds-stepper-indicator-step--is-interactive`);
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<div class={{this.classNames}} ...attributes>\n <div class=\"hds-stepper-indicator-step__svg-hexagon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"m3.664 6.264 6.99-4.42a2.5 2.5 0 0 1 2.67-.002l7.01 4.422A2.5 2.5 0 0 1 21.5 8.38v7.242a2.5 2.5 0 0 1-1.166 2.115l-7.01 4.422a2.5 2.5 0 0 1-2.67-.002l-6.99-4.42A2.5 2.5 0 0 1 2.5 15.623V8.377a2.5 2.5 0 0 1 1.164-2.113Z\" stroke-width=\"1\"></path>\n </svg>\n </div>\n <div class=\"hds-stepper-indicator-step__status\">\n {{#if (eq @status \"processing\")}}\n <HdsIcon class=\"hds-stepper-indicator-step__icon\" @name=\"loading\" @size=\"16\" />\n {{else if (eq @status \"complete\")}}\n <HdsIcon class=\"hds-stepper-indicator-step__icon\" @name=\"check\" @size=\"16\" />\n {{else}}\n <HdsTextBody class=\"hds-stepper-indicator-step__text\" @tag=\"span\" @size=\"100\" @weight=\"medium\">{{@text}}</HdsTextBody>\n {{/if}}\n </div>\n</div>", {
strictMode: true,
scope: () => ({
eq,
HdsIcon,
HdsTextBody
})
}), this);
}
}
export { DEFAULT_STATUS, STATUSES, HdsStepperStepIndicator as default };
//# sourceMappingURL=indicator.js.map