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

Helios Design System Components

import Component from '@glimmer/component';
import { service } from '@ember/service';
import { guidFor } from '@ember/object/internals';
import { HdsTableThSortOrderIconValues, HdsTableThSortOrderValues } from './types.js';
import { precompileTemplate } from '@ember/template-compilation';
import { g, i } from 'decorator-transforms/runtime';
import { setComponentTemplate } from '@ember/component';

var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<button\n  type=\"button\"\n  class={{this.classNames}}\n  {{on \"click\" this.onClick}}\n  aria-labelledby=\"{{this._prefixLabelId}} {{@labelId}} {{this._suffixLabelId}}\"\n  ...attributes\n>\n  <span id={{this._prefixLabelId}} class=\"hds-table__th-button-aria-label-hidden-segment\">\n    {{hds-t \"hds.components.common.sort-by\" default=\"Sort by\"}}\n  </span>\n  <span id={{this._suffixLabelId}} class=\"hds-table__th-button-aria-label-hidden-segment\">\n    {{this.sortOrderLabel}}\n  </span>\n  <Hds::Icon @name={{this.icon}} />\n</button>");

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

const NOOP = () => {};
class HdsTableThButtonSort extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  // 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 HdsTableThSortOrderValues.Asc:
        return HdsTableThSortOrderIconValues.ArrowUp;
      case HdsTableThSortOrderValues.Desc:
        return HdsTableThSortOrderIconValues.ArrowDown;
      default:
        return HdsTableThSortOrderIconValues.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() {
    const {
      sortOrder
    } = this.args;
    const translatedLabel = sortOrder === HdsTableThSortOrderValues.Asc ? this.hdsIntl.t('hds.components.common.descending', {
      default: 'descending'
    }) : this.hdsIntl.t('hds.components.common.ascending', {
      default: 'ascending'
    });
    return translatedLabel;
  }
  get onClick() {
    const {
      onClick
    } = this.args;
    if (typeof onClick === 'function') {
      return onClick;
    } else {
      return NOOP;
    }
  }
  get classNames() {
    const classes = ['hds-table__th-button', 'hds-table__th-button--sort'];

    // add a class based on the @sortOrder argument
    if (this.args.sortOrder === HdsTableThSortOrderValues.Asc || this.args.sortOrder === HdsTableThSortOrderValues.Desc) {
      classes.push(`hds-table__th-button--is-sorted`);
    }
    return classes.join(' ');
  }
}
setComponentTemplate(TEMPLATE, HdsTableThButtonSort);

export { HdsTableThButtonSort as default };
//# sourceMappingURL=th-button-sort.js.map