@hashicorp/design-system-components
Version:
Helios Design System Components
58 lines (55 loc) • 1.88 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { hash } from '@ember/helper';
import { not } from 'ember-truth-helpers';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import willDestroy from '@ember/render-modifiers/modifiers/will-destroy';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
class HdsTabsPanel extends Component {
_panelId = 'panel-' + guidFor(this);
_elementId;
get nodeIndex() {
return this.args.panelIds ? this.args.panelIds.indexOf(this._panelId) : undefined;
}
get isVisible() {
return this.nodeIndex === this.args.selectedTabIndex;
}
get coupledTabId() {
return this.nodeIndex !== undefined ? this.args.tabIds?.[this.nodeIndex] : undefined;
}
didInsertNode = element => {
const {
didInsertNode
} = this.args;
if (typeof didInsertNode === 'function') {
this._elementId = element.id;
didInsertNode(element, this._elementId);
}
};
willDestroyNode = element => {
const {
willDestroyNode
} = this.args;
if (typeof willDestroyNode === 'function') {
willDestroyNode(element);
}
};
static {
setComponentTemplate(precompileTemplate("<section class=\"hds-tabs__panel\" ...attributes role=\"tabpanel\" id={{this._panelId}} hidden={{not this.isVisible}} aria-labelledby={{this.coupledTabId}} {{didInsert this.didInsertNode}} {{willDestroy this.willDestroyNode}}>\n {{yield (hash isVisible=this.isVisible)}}\n</section>", {
strictMode: true,
scope: () => ({
not,
didInsert,
willDestroy,
hash
})
}), this);
}
}
export { HdsTabsPanel as default };
//# sourceMappingURL=panel.js.map