@hashicorp/design-system-components
Version:
Helios Design System Components
60 lines (57 loc) • 2.74 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { action } from '@ember/object';
import { on } from '@ember/modifier';
import { HdsAdvancedTableThExpandIconValues } from './types.js';
import HdsIcon from '../icon/index.js';
import HdsTHelper from '../../../helpers/hds-t.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { n } from 'decorator-transforms/runtime';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
class HdsAdvancedTableThButtonExpand extends Component {
// Generates a unique ID for the (hidden) "label prefix" <span> element
_prefixLabelId = 'prefix-' + guidFor(this);
get isExpanded() {
const {
isExpanded = false
} = this.args;
return isExpanded;
}
get icon() {
if (this.isExpanded === true) {
return this.args.isExpandAll ? HdsAdvancedTableThExpandIconValues.UnfoldClose : HdsAdvancedTableThExpandIconValues.ChevronUp;
} else {
return this.args.isExpandAll ? HdsAdvancedTableThExpandIconValues.UnfoldOpen : HdsAdvancedTableThExpandIconValues.ChevronDown;
}
}
onClick() {
this.args.onToggle?.();
}
static {
n(this.prototype, "onClick", [action]);
}
get classNames() {
const classes = ['hds-advanced-table__th-button', 'hds-advanced-table__th-button--expand'];
// add a class based on the isExpanded state
if (this.args.isExpanded === true) {
classes.push(`hds-advanced-table__th-button--is-expanded`);
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("{{!-- template-lint-disable no-unsupported-role-attributes --}}\n{{!-- ember template lint doesnt support ARIA 1.3 yet, including aria-description - https://github.com/A11yance/aria-query/pull/557 --}}\n<button type=\"button\" class={{this.classNames}} {{on \"click\" this.onClick}} aria-labelledby=\"{{this._prefixLabelId}} {{@labelId}}\" aria-expanded=\"{{this.isExpanded}}\" aria-description={{hdsT \"hds.components.advanced-table.th-button-expand.aria-description\" default=\"Toggle the visibility of the related rows.\"}} ...attributes>\n {{!-- template-lint-enable no-unsupported-role-attributes--}}\n <span id={{this._prefixLabelId}} class=\"hds-advanced-table__th-button-aria-label-hidden-segment\">\n {{hdsT \"hds.components.common.toggle\" default=\"Toggle\"}}\n </span>\n <HdsIcon @name={{this.icon}} />\n</button>", {
strictMode: true,
scope: () => ({
hdsT: HdsTHelper,
on,
HdsIcon
})
}), this);
}
}
export { HdsAdvancedTableThButtonExpand as default };
//# sourceMappingURL=th-button-expand.js.map