@hashicorp/design-system-components/dist/components/hds/tabs/tab.js

Helios Design System Components

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { on } from '@ember/modifier';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import didUpdate from '@ember/render-modifiers/modifiers/did-update';
import willDestroy from '@ember/render-modifiers/modifiers/will-destroy';
import HdsIcon from '../icon/index.js';
import HdsBadgeCount from '../badge-count/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
class HdsTabsTab extends Component {
  _tabId = 'tab-' + guidFor(this);
  get nodeIndex() {
    return this.args.tabIds?.indexOf(this._tabId);
  }
  get isSelected() {
    return this.nodeIndex !== undefined && this.nodeIndex === this.args.selectedTabIndex;
  }
  get coupledPanelId() {
    return this.nodeIndex !== undefined ? this.args.panelIds?.[this.nodeIndex] : undefined;
  }
  didInsertNode = (element, positional) => {
    const {
      didInsertNode
    } = this.args;
    const isSelected = positional[0];
    if (typeof didInsertNode === 'function') {
      didInsertNode(element, isSelected);
    }
  };
  didUpdateNode = () => {
    const {
      didUpdateNode
    } = this.args;
    if (typeof didUpdateNode === 'function' && this.nodeIndex !== undefined) {
      didUpdateNode(this.nodeIndex, this.args.isSelected);
    }
  };
  willDestroyNode = element => {
    const {
      willDestroyNode
    } = this.args;
    if (typeof willDestroyNode === 'function') {
      willDestroyNode(element);
    }
  };
  onClick = event => {
    const {
      onClick
    } = this.args;
    if (typeof onClick === 'function' && this.nodeIndex !== undefined) {
      onClick(event, this.nodeIndex);
    } else {
      return false;
    }
  };
  onKeyUp = event => {
    const {
      onKeyUp
    } = this.args;
    if (typeof onKeyUp === 'function' && this.nodeIndex !== undefined) {
      onKeyUp(this.nodeIndex, event);
    }
  };
  get classNames() {
    const classes = ['hds-tabs__tab'];
    if (this.isSelected) {
      classes.push(`hds-tabs__tab--is-selected`);
    }
    return classes.join(' ');
  }
  static {
    setComponentTemplate(precompileTemplate("{{!-- template-lint-disable require-context-role no-invalid-role --}}\n<li class={{this.classNames}} ...attributes role=\"presentation\">\n  <button class=\"hds-tabs__tab-button\" role=\"tab\" type=\"button\" id={{this._tabId}} aria-controls={{this.coupledPanelId}} aria-selected={{if this.isSelected \"true\" \"false\"}} tabindex={{unless this.isSelected \"-1\"}} {{didInsert this.didInsertNode @isSelected}} {{didUpdate this.didUpdateNode @count @isSelected}} {{willDestroy this.willDestroyNode}} {{on \"click\" this.onClick}} {{on \"keyup\" this.onKeyUp}}>\n    {{#if @icon}}\n      <HdsIcon @name={{@icon}} class=\"hds-tabs__tab-icon\" role=\"presentation\" />\n    {{/if}}\n\n    {{yield}}\n\n    {{#if @count}}\n      <HdsBadgeCount @text={{@count}} @size=\"small\" class=\"hds-tabs__tab-count\" role=\"presentation\" />\n    {{/if}}\n  </button>\n</li>\n{{!-- template-lint-enable require-context-role no-invalid-role --}}", {
      strictMode: true,
      scope: () => ({
        didInsert,
        didUpdate,
        willDestroy,
        on,
        HdsIcon,
        HdsBadgeCount
      })
    }), this);
  }
}

export { HdsTabsTab as default };
//# sourceMappingURL=tab.js.map