@hashicorp/design-system-components/dist/components/hds/table/th-selectable.js

Helios Design System Components

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import willDestroy from '@ember/render-modifiers/modifiers/will-destroy';
import { service } from '@ember/service';
import { HdsTableThSortOrderLabelValues, HdsTableThSortOrderValues } from './types.js';
import HdsFormCheckboxBase from '../form/checkbox/base.js';
import HdsTableThButtonSort from './th-button-sort.js';
import HdsTableTh from './th.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
class HdsTableThSelectable extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  static {
    g(this.prototype, "isSelected", [tracked]);
  }
  #isSelected = (i(this, "isSelected"), void 0);
  _guid = guidFor(this);
  _checkboxId = `checkbox-${this._guid}`;
  _labelId = `label-${this._guid}`;
  constructor(owner, args) {
    super(owner, args);
    this.isSelected = this.args.isSelected ?? false;
  }
  get isSortable() {
    return this.args.onClickSortBySelected !== undefined;
  }
  get ariaLabel() {
    const {
      selectionAriaLabelSuffix = 'row'
    } = this.args;
    const defaultString = `Select ${selectionAriaLabelSuffix}`;
    return this.hdsIntl.t('hds.components.table.th-selectable.aria-label', {
      default: defaultString,
      suffix: selectionAriaLabelSuffix
    });
  }
  get ariaSort() {
    switch (this.args.sortBySelectedOrder) {
      case HdsTableThSortOrderValues.Asc:
        return HdsTableThSortOrderLabelValues.Asc;
      case HdsTableThSortOrderValues.Desc:
        return HdsTableThSortOrderLabelValues.Desc;
      default:
        // none is the default per the spec.
        return HdsTableThSortOrderLabelValues.None;
    }
  }
  didInsert = checkbox => {
    const {
      didInsert
    } = this.args;
    if (typeof didInsert === 'function') {
      didInsert(checkbox, this.args.selectionKey);
    }
  };
  willDestroyNode = () => {
    super.willDestroy();
    const {
      willDestroy
    } = this.args;
    if (typeof willDestroy === 'function') {
      willDestroy(this.args.selectionKey);
    }
  };
  onSelectionChange = event => {
    // Assert event.target as HdsFormCheckboxBaseSignature['Element'] to access the 'checked' property
    const target = event.target;
    this.isSelected = target.checked;
    const {
      onSelectionChange
    } = this.args;
    if (typeof onSelectionChange === 'function') {
      onSelectionChange(target, this.args.selectionKey);
    }
  };
  static {
    setComponentTemplate(precompileTemplate("<HdsTableTh class=\"hds-table__th--is-selectable\" aria-sort={{if this.isSortable this.ariaSort}} @scope={{@selectionScope}} ...attributes>\n  <div class=\"hds-table__th-content\">\n    <HdsFormCheckboxBase id={{this._checkboxId}} class=\"hds-table__checkbox\" checked={{@isSelected}} aria-label={{this.ariaLabel}} {{didInsert this.didInsert}} {{willDestroy this.willDestroyNode}} {{on \"change\" this.onSelectionChange}} />\n    {{#if this.isSortable}}\n      <HdsTableThButtonSort @sortOrder={{@sortBySelectedOrder}} @onClick={{@onClickSortBySelected}} @labelId={{this._labelId}} />\n    {{/if}}\n  </div>\n</HdsTableTh>", {
      strictMode: true,
      scope: () => ({
        HdsTableTh,
        HdsFormCheckboxBase,
        didInsert,
        willDestroy,
        on,
        HdsTableThButtonSort
      })
    }), this);
  }
}

export { HdsTableThSelectable as default };
//# sourceMappingURL=th-selectable.js.map