@hashicorp/design-system-components
Version:
Helios Design System Components
141 lines (138 loc) • 7.38 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { modifier } from 'ember-modifier';
import { eq } from 'ember-truth-helpers';
import { on } from '@ember/modifier';
import { service } from '@ember/service';
import { HdsStepperNavStatusToSrOnlyText, HdsStepperTitleTagValues, HdsStepperNavStatusesValues, HdsStepperNavStatusToIndicatorStatus } from '../types.js';
import HdsStepperStepIndicator from '../step/indicator.js';
import HdsTextBody from '../../text/body.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const MAPPING_STATUS_TO_INDICATOR_STATUS = HdsStepperNavStatusToIndicatorStatus;
class HdsStepperNavStep extends Component {
static {
g(this.prototype, "hdsIntl", [service]);
}
#hdsIntl = (i(this, "hdsIntl"), void 0);
_statusSrOnlyTextMap;
_stepId = 'step-' + guidFor(this);
_elementId;
_setUpStep = modifier((element, [insertCallbackFunction, destroyCallbackFunction]) => {
if (typeof insertCallbackFunction === 'function') {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
insertCallbackFunction(element);
}
return () => {
if (typeof destroyCallbackFunction === 'function') {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
destroyCallbackFunction(element);
}
};
});
constructor(owner, args) {
super(owner, args);
this._statusSrOnlyTextMap = HdsStepperNavStatusToSrOnlyText(this.hdsIntl);
}
get titleTag() {
return this.args.titleTag ?? HdsStepperTitleTagValues.Div;
}
get isNavInteractive() {
return this.args.isNavInteractive != undefined ? this.args.isNavInteractive : true;
}
get nodeIndex() {
return this.args.stepIds?.indexOf(this._stepId);
}
get stepNumber() {
return this.args.stepIds ? this.args.stepIds.indexOf(this._stepId) + 1 : undefined;
}
get coupledPanelId() {
return this.nodeIndex !== undefined ? this.args.panelIds?.[this.nodeIndex] : undefined;
}
get status() {
if (this.nodeIndex != undefined && this.nodeIndex >= 0) {
if (this.nodeIndex === this.args.currentStep) {
return HdsStepperNavStatusesValues.Active;
} else if (this.nodeIndex < this.args.currentStep) {
return HdsStepperNavStatusesValues.Complete;
} else {
return HdsStepperNavStatusesValues.Incomplete;
}
} else {
return HdsStepperNavStatusesValues.Incomplete;
}
}
get stepIndicatorStatus() {
return MAPPING_STATUS_TO_INDICATOR_STATUS[this.status];
}
get statusSrOnlyText() {
return this._statusSrOnlyTextMap[this.status];
}
get isInteractive() {
return this.isNavInteractive && this.status === HdsStepperNavStatusesValues.Complete;
}
didInsertNode = element => {
const {
didInsertNode
} = this.args;
if (typeof didInsertNode === 'function') {
this._elementId = element.id;
didInsertNode();
}
};
willDestroyNode = element => {
const {
willDestroyNode
} = this.args;
if (typeof willDestroyNode === 'function') {
willDestroyNode(element);
}
};
onStepChange = event => {
const {
onStepChange
} = this.args;
if (this.isInteractive && this.nodeIndex !== undefined && typeof onStepChange === 'function') {
onStepChange(event, this.nodeIndex);
} else {
return false;
}
};
onKeyUp = event => {
const {
onKeyUp
} = this.args;
if (!(this.status === HdsStepperNavStatusesValues.Incomplete) && this.nodeIndex !== undefined && typeof onKeyUp === 'function') {
onKeyUp(this.nodeIndex, event);
}
};
get classNames() {
const classes = ['hds-stepper-nav__step'];
classes.push(`hds-stepper-nav__step--${this.status}`);
if (this.isInteractive) {
classes.push('hds-stepper-nav__step--interactive');
}
if (this.isNavInteractive) {
classes.push('hds-stepper-nav__step--nav-interactive');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("{{!-- template-lint-disable require-context-role no-invalid-role --}}\n{{!-- template-lint-disable require-presentational-children --}}\n{{#if this.isNavInteractive}}\n <li class={{this.classNames}} ...attributes role={{if this.isNavInteractive \"presentation\"}}>\n <button class=\"hds-stepper-nav__step-content hds-stepper-nav__step-button\" id={{this._stepId}} tabindex={{unless (eq this.status \"active\") \"-1\"}} type=\"button\" role=\"tab\" aria-controls={{this.coupledPanelId}} aria-selected={{if (eq this.status \"active\") \"true\" \"false\"}} aria-disabled={{if (eq this.status \"incomplete\") \"true\" \"false\"}} {{on \"click\" this.onStepChange}} {{on \"keyup\" this.onKeyUp}} {{this._setUpStep this.didInsertNode this.willDestroyNode}}>\n <div class=\"hds-stepper-nav__step-progress\">\n <HdsStepperStepIndicator @text=\"{{this.stepNumber}}\" @status={{this.stepIndicatorStatus}} @isInteractive={{true}} class=\"hds-stepper-nav__step-indicator\" />\n </div>\n <div class=\"hds-stepper-nav__step-text\">\n <HdsTextBody class=\"hds-stepper-nav__step-title\" @tag={{this.titleTag}} @size=\"200\" @weight=\"semibold\">\n {{yield to=\"title\"}}\n <span class=\"sr-only\">{{this.statusSrOnlyText}}</span>\n </HdsTextBody>\n {{#if (has-block \"description\")}}\n <HdsTextBody class=\"hds-stepper-nav__step-description\" @tag=\"div\" @size=\"100\" @weight=\"regular\">\n {{yield to=\"description\"}}\n </HdsTextBody>\n {{/if}}\n </div>\n </button>\n </li>\n{{else}}\n <li class={{this.classNames}} ...attributes role={{if this.isNavInteractive \"presentation\"}} aria-current={{if (eq this.status \"active\") \"step\" \"false\"}}>\n <div class=\"hds-stepper-nav__step-content\" id={{this._stepId}} {{this._setUpStep this.didInsertNode this.willDestroyNode}}>\n <div class=\"hds-stepper-nav__step-progress\">\n <HdsStepperStepIndicator @text=\"{{this.stepNumber}}\" @status={{this.stepIndicatorStatus}} @isInteractive={{false}} aria-hidden=\"true\" class=\"hds-stepper-nav__step-indicator\" />\n </div>\n <div class=\"hds-stepper-nav__step-text\">\n <HdsTextBody class=\"hds-stepper-nav__step-title\" @tag={{this.titleTag}} @size=\"200\" @weight=\"semibold\">\n {{yield to=\"title\"}}\n <span class=\"sr-only\">{{this.statusSrOnlyText}}</span>\n </HdsTextBody>\n {{#if (has-block \"description\")}}\n <HdsTextBody class=\"hds-stepper-nav__step-description\" @tag=\"div\" @size=\"100\" @weight=\"regular\">\n {{yield to=\"description\"}}\n </HdsTextBody>\n {{/if}}\n </div>\n </div>\n </li>\n{{/if}}\n{{!-- template-lint-enable require-presentational-children --}}\n{{!-- template-lint-enable require-context-role no-invalid-role --}}", {
strictMode: true,
scope: () => ({
eq,
on,
HdsStepperStepIndicator,
HdsTextBody
})
}), this);
}
}
export { MAPPING_STATUS_TO_INDICATOR_STATUS, HdsStepperNavStep as default };
//# sourceMappingURL=step.js.map