@hashicorp/design-system-components
Version:
Helios Design System Components
59 lines (56 loc) • 2.51 kB
JavaScript
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { assert } from '@ember/debug';
import style from 'ember-style-modifier';
import { HdsTableThSortOrderLabelValues, HdsTableThSortOrderValues, HdsTableHorizontalAlignmentValues } from './types.js';
import HdsTableThButtonTooltip from './th-button-tooltip.js';
import HdsTableThButtonSort from './th-button-sort.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const ALIGNMENTS = Object.values(HdsTableHorizontalAlignmentValues);
const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
class HdsTableThSort extends Component {
_labelId = guidFor(this);
get ariaSort() {
switch (this.args.sortOrder) {
case HdsTableThSortOrderValues.Asc:
return HdsTableThSortOrderLabelValues.Asc;
case HdsTableThSortOrderValues.Desc:
return HdsTableThSortOrderLabelValues.Desc;
default:
// none is the default per the spec.
return HdsTableThSortOrderLabelValues.None;
}
}
get align() {
const {
align = DEFAULT_ALIGN
} = this.args;
assert(`@align for "Hds::Table" must be one of the following: ${ALIGNMENTS.join(', ')}; received: ${align}`, ALIGNMENTS.includes(align));
return align;
}
get classNames() {
const classes = ['hds-table__th', 'hds-table__th--sort'];
// add a class based on the @align argument
if (this.align) {
classes.push(`hds-table__th--align-${this.align}`);
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<th class={{this.classNames}} aria-sort={{this.ariaSort}} {{style width=@width minWidth=@width}} ...attributes scope=\"col\">\n <div class=\"hds-table__th-content\">\n <span id={{this._labelId}} class=\"hds-typography-body-200 hds-font-weight-semibold\">{{yield}}</span>\n {{#if @tooltip}}\n <HdsTableThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n {{/if}}\n <HdsTableThButtonSort @sortOrder={{@sortOrder}} @onClick={{@onClickSort}} @labelId={{this._labelId}} />\n </div>\n</th>", {
strictMode: true,
scope: () => ({
style,
HdsTableThButtonTooltip,
HdsTableThButtonSort
})
}), this);
}
}
export { ALIGNMENTS, DEFAULT_ALIGN, HdsTableThSort as default };
//# sourceMappingURL=th-sort.js.map