@hashicorp/design-system-components/dist/components/hds/accordion/item/button.js

Helios Design System Components

import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import HdsIcon from '../../icon/index.js';
import { HdsAccordionSizeValues } from '../types.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
class HdsAccordionItemButton extends Component {
  onClick = event => {
    if (this.args.onClickToggle) {
      this.args.onClickToggle(event);
    }
  };
  get iconSize() {
    return this.args.size === HdsAccordionSizeValues.Large ? '24' : '16';
  }
  get classNames() {
    const classes = ['hds-accordion-item__button'];
    // add a class based on the @isOpen argument
    if (this.args.isOpen) {
      classes.push('hds-accordion-item__button--is-open');
    }
    // add a class based on the @size argument
    if (this.args.size) {
      classes.push(`hds-accordion-item__button--size-${this.args.size}`);
    }
    if (this.args.parentContainsInteractive === false) {
      classes.push('hds-accordion-item__button--parent-does-not-contain-interactive');
    } else {
      classes.push('hds-accordion-item__button--parent-contains-interactive');
    }
    return classes.join(' ');
  }
  static {
    setComponentTemplate(precompileTemplate("<button class={{this.classNames}} type=\"button\" {{on \"click\" this.onClick}} aria-controls={{@contentId}} aria-expanded={{if @isOpen \"true\" \"false\"}} aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} ...attributes>\n  <HdsIcon @name=\"chevron-down\" @size={{this.iconSize}} />\n</button>", {
      strictMode: true,
      scope: () => ({
        on,
        HdsIcon
      })
    }), this);
  }
}

export { HdsAccordionItemButton as default };
//# sourceMappingURL=button.js.map