@hashicorp/design-system-components/dist/components/hds/stepper/list/step.js

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { guidFor } from '@ember/object/internals';
import { modifier } from 'ember-modifier';
import { service } from '@ember/service';
import { HdsStepperStatusToSrOnlyText, HdsStepperStatusesValues, HdsStepperTitleTagValues } from '../types.js';
import HdsTextBody from '../../text/body.js';
import HdsStepperStepIndicator from '../step/indicator.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 DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
const STATUSES = Object.values(HdsStepperStatusesValues);
class HdsStepperListStep extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  _statusSrOnlyTextMap;
  _stepId = 'step-' + guidFor(this);
  _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 = HdsStepperStatusToSrOnlyText(this.hdsIntl);
  }
  get stepNumber() {
    return this.args.stepIds ? this.args.stepIds.indexOf(this._stepId) + 1 : undefined;
  }
  get status() {
    const {
      status = DEFAULT_STATUS
    } = this.args;
    assert(`@status for "Hds::Stepper::List::Step" must be one of the following: ${STATUSES.join(', ')}; received: ${status}`, STATUSES.includes(status));
    return status;
  }
  get statusSrOnlyText() {
    return this._statusSrOnlyTextMap[this.status];
  }
  get titleTag() {
    return this.args.titleTag ?? HdsStepperTitleTagValues.Div;
  }
  get classNames() {
    const classes = ['hds-stepper-list__step'];
    classes.push(`hds-stepper-list__step--${this.status}`);
    return classes.join(' ');
  }
  static {
    setComponentTemplate(precompileTemplate("<li class={{this.classNames}} ...attributes id={{this._stepId}} {{this._setUpStep @didInsertNode @willDestroyNode}}>\n  <div class=\"hds-stepper-list__step-progress\">\n    <HdsStepperStepIndicator @text=\"{{this.stepNumber}}\" @status={{this.status}} @isInteractive={{false}} class=\"hds-stepper-list__step-indicator\" />\n  </div>\n  <div class=\"hds-stepper-list__step-text\">\n    <HdsTextBody class=\"hds-stepper-list__step-title\" @tag={{this.titleTag}} @size=\"200\" @weight=\"semibold\" @color=\"strong\">\n      {{yield to=\"title\"}}\n      <span class=\"sr-only\">{{this.statusSrOnlyText}}</span>\n    </HdsTextBody>\n    {{#if (has-block \"description\")}}\n      <HdsTextBody class=\"hds-stepper-list__step-description\" @tag=\"div\" @size=\"100\" @weight=\"regular\" @color=\"primary\">\n        {{yield to=\"description\"}}\n      </HdsTextBody>\n    {{/if}}\n    {{#if (has-block \"content\")}}\n      <div class=\"hds-stepper-list__step-content\">\n        {{yield to=\"content\"}}\n      </div>\n    {{/if}}\n  </div>\n</li>", {
      strictMode: true,
      scope: () => ({
        HdsStepperStepIndicator,
        HdsTextBody
      })
    }), this);
  }
}

export { DEFAULT_STATUS, STATUSES, HdsStepperListStep as default };
//# sourceMappingURL=step.js.map