@hashicorp/design-system-components
Version:
Helios Design System Components
50 lines (47 loc) • 1.8 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { HdsStepperStatusesValues, HdsStepperStatusToIconsValues } from '../types.js';
import HdsIcon from '../../icon/index.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);
const MAPPING_STATUS_TO_ICONS = HdsStepperStatusToIconsValues;
class HdsStepperTaskIndicator extends Component {
get status() {
const {
status = DEFAULT_STATUS
} = this.args;
assert(`@status for "Hds::Stepper::Task::Indicator" must be one of the following: ${STATUSES.join(', ')}; received: ${status}`, STATUSES.includes(status));
return status;
}
get isInteractive() {
return this.args.isInteractive || false;
}
get iconName() {
return MAPPING_STATUS_TO_ICONS[this.status];
}
get classNames() {
const classes = ['hds-stepper-indicator-task'];
// Based on the @status arg
classes.push(`hds-stepper-indicator-task--status-${this.status}`);
if (this.isInteractive) {
classes.push(`hds-stepper-indicator-task--is-interactive`);
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<div class={{this.classNames}} ...attributes>\n <HdsIcon class=\"hds-stepper-indicator-task__icon\" @name={{this.iconName}} @size=\"16\" />\n</div>", {
strictMode: true,
scope: () => ({
HdsIcon
})
}), this);
}
}
export { DEFAULT_STATUS, MAPPING_STATUS_TO_ICONS, STATUSES, HdsStepperTaskIndicator as default };
//# sourceMappingURL=indicator.js.map