@hashicorp/design-system-components/dist/components/hds/advanced-table/td.js

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { focusable } from 'tabbable';
import style from 'ember-style-modifier';
import HdsAdvancedTableCellModifier from '../../../modifiers/hds-advanced-table-cell.js';
import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
import { hash } from '@ember/helper';
import { HdsAdvancedTableHorizontalAlignmentValues } from './types.js';
import hdsScrollIntoViewOnFocus from '../../../modifiers/hds-scroll-into-view-on-focus.js';
import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i, n } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const ALIGNMENTS = Object.values(HdsAdvancedTableHorizontalAlignmentValues);
const DEFAULT_ALIGN = HdsAdvancedTableHorizontalAlignmentValues.Left;
class HdsAdvancedTableTd extends Component {
  static {
    g(this.prototype, "_shouldTrapFocus", [tracked], function () {
      return false;
    });
  }
  #_shouldTrapFocus = (i(this, "_shouldTrapFocus"), void 0);
  _element;
  // rowspan and colspan have to return 'auto' if not defined because otherwise the style modifier sets grid-area: undefined on the cell, which breaks the grid styles
  get rowspan() {
    if (this.args.rowspan) {
      return `span ${this.args.rowspan}`;
    }
    return 'auto';
  }
  get colspan() {
    if (this.args.colspan) {
      return `span ${this.args.colspan}`;
    }
    return 'auto';
  }
  get align() {
    const {
      align = DEFAULT_ALIGN
    } = this.args;
    assert(`@align for "Hds::AdvancedTable::Td" must be one of the following: ${ALIGNMENTS.join(', ')}; received: ${align}`, ALIGNMENTS.includes(align));
    return align;
  }
  get classNames() {
    const classes = ['hds-advanced-table__td'];
    // add a class based on the @align argument
    if (this.align) {
      classes.push(`hds-advanced-table__td--align-${this.align}`);
    }
    return classes.join(' ');
  }
  onFocusTrapDeactivate() {
    this._shouldTrapFocus = false;
    onFocusTrapDeactivate(this._element);
  }
  static {
    n(this.prototype, "onFocusTrapDeactivate", [action]);
  }
  enableFocusTrap() {
    this._shouldTrapFocus = true;
  }
  static {
    n(this.prototype, "enableFocusTrap", [action]);
  }
  getInitialFocus() {
    const cellFocusableElements = focusable(this._element);
    return cellFocusableElements[0];
  }
  static {
    n(this.prototype, "getInitialFocus", [action]);
  }
  setElement(element) {
    this._element = element;
  }
  static {
    n(this.prototype, "setElement", [action]);
  }
  static {
    setComponentTemplate(precompileTemplate("<div class={{this.classNames}} role=\"gridcell\" aria-rowspan={{@rowspan}} aria-colspan={{@colspan}} {{style grid-row=this.rowspan grid-column=this.colspan}} {{hdsAdvancedTableCell handleEnableFocusTrap=this.enableFocusTrap shouldTrapFocus=this._shouldTrapFocus setCellElement=this.setElement}} {{focusTrap isActive=this._shouldTrapFocus focusTrapOptions=(hash onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true)}} {{@compositeItem disabled=@isCompositeItemDisabled}} {{hdsScrollIntoViewOnFocus options=(hash block=\"center\" inline=\"center\")}} ...attributes>\n  {{yield}}\n</div>", {
      strictMode: true,
      scope: () => ({
        style,
        hdsAdvancedTableCell: HdsAdvancedTableCellModifier,
        focusTrap,
        hash,
        hdsScrollIntoViewOnFocus
      })
    }), this);
  }
}

export { ALIGNMENTS, DEFAULT_ALIGN, HdsAdvancedTableTd as default };
//# sourceMappingURL=td.js.map