@hashicorp/design-system-components
Version:
Helios Design System Components
66 lines (63 loc) • 2.95 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { on } from '@ember/modifier';
import { HdsAdvancedTableThSortOrderIconValues, HdsAdvancedTableThSortOrderValues, HdsAdvancedTableThSortOrderLabelValues } 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';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const NOOP = () => {};
class HdsAdvancedTableThButtonSort extends Component {
// Generates a unique ID for the (hidden) "label prefix/suffix" <span> elements
_prefixLabelId = 'prefix-' + guidFor(this);
_suffixLabelId = 'suffix-' + guidFor(this);
get icon() {
switch (this.args.sortOrder) {
case HdsAdvancedTableThSortOrderValues.Asc:
return HdsAdvancedTableThSortOrderIconValues.ArrowUp;
case HdsAdvancedTableThSortOrderValues.Desc:
return HdsAdvancedTableThSortOrderIconValues.ArrowDown;
default:
return HdsAdvancedTableThSortOrderIconValues.SwapVertical;
}
}
// Determines the label (suffix) to use in the `aria-labelledby` attribute of the button,
// used to indicate what will happen if the user clicks on the button
get sortOrderLabel() {
return this.args.sortOrder === HdsAdvancedTableThSortOrderValues.Asc ? HdsAdvancedTableThSortOrderLabelValues.Desc : HdsAdvancedTableThSortOrderLabelValues.Asc;
}
get onClick() {
const {
onClick
} = this.args;
if (typeof onClick === 'function') {
return onClick;
} else {
return NOOP;
}
}
get classNames() {
const classes = ['hds-advanced-table__th-button', 'hds-advanced-table__th-button--sort'];
// add a class based on the @sortOrder argument
if (this.args.sortOrder === HdsAdvancedTableThSortOrderValues.Asc || this.args.sortOrder === HdsAdvancedTableThSortOrderValues.Desc) {
classes.push(`hds-advanced-table__th-button--is-sorted`);
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<button type=\"button\" class={{this.classNames}} {{on \"click\" this.onClick}} aria-labelledby=\"{{this._prefixLabelId}} {{@labelId}} {{this._suffixLabelId}}\" ...attributes>\n <span id={{this._prefixLabelId}} class=\"hds-advanced-table__th-button-aria-label-hidden-segment\">\n {{hdsT \"hds.components.common.sort-by\" default=\"Sort by\"}}\n </span>\n <span id={{this._suffixLabelId}} class=\"hds-advanced-table__th-button-aria-label-hidden-segment\">{{this.sortOrderLabel}}</span>\n <HdsIcon @name={{this.icon}} />\n</button>", {
strictMode: true,
scope: () => ({
on,
hdsT: HdsTHelper,
HdsIcon
})
}), this);
}
}
export { HdsAdvancedTableThButtonSort as default };
//# sourceMappingURL=th-button-sort.js.map