@hashicorp/design-system-components
Version:
Helios Design System Components
68 lines (65 loc) • 2.27 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { modifier } from 'ember-modifier';
import { not } from 'ember-truth-helpers';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
class HdsStepperNavPanel extends Component {
_panelId = 'panel-' + guidFor(this);
_elementId;
_setUpPanel = 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);
}
};
});
get isNavInteractive() {
return this.args.isNavInteractive != undefined ? this.args.isNavInteractive : true;
}
get nodeIndex() {
return this.args.panelIds?.indexOf(this._panelId);
}
get coupledStepId() {
return this.nodeIndex !== undefined ? this.args.stepIds?.[this.nodeIndex] : undefined;
}
get isVisible() {
return this.nodeIndex === this.args.currentStep;
}
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);
}
};
static {
setComponentTemplate(precompileTemplate("<section class=\"hds-stepper-nav__panel\" ...attributes role={{if this.isNavInteractive \"tabpanel\"}} id={{this._panelId}} hidden={{not this.isVisible}} aria-labelledby={{this.coupledStepId}} {{this._setUpPanel this.didInsertNode this.willDestroyNode}}>\n {{#if this.isVisible}}\n {{yield}}\n {{/if}}\n</section>", {
strictMode: true,
scope: () => ({
not
})
}), this);
}
}
export { HdsStepperNavPanel as default };
//# sourceMappingURL=panel.js.map