@hashicorp/design-system-components/dist/components/hds/pagination/nav/arrow.js

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { on } from '@ember/modifier';
import { service } from '@ember/service';
import { HdsPaginationDirectionValues, getHdsPaginationDirectionAriaLabel, getHdsPaginationDirectionLabel } from '../types.js';
import HdsInteractive from '../../interactive/index.js';
import HdsIcon from '../../icon/index.js';
import HdsTextBody from '../../text/body.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
 */
const DIRECTIONS = [HdsPaginationDirectionValues.Prev, HdsPaginationDirectionValues.Next];
class HdsPaginationControlArrow extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  get content() {
    const {
      direction
    } = this.args;
    assert(`@direction for "Pagination::Nav::Arrow" must be one of the following: ${DIRECTIONS.join(', ')}; received: ${direction}`, DIRECTIONS.includes(direction));
    const hdsPaginationNavArrowContentDirectionMap = {
      [HdsPaginationDirectionValues.Prev]: {
        label: getHdsPaginationDirectionLabel(HdsPaginationDirectionValues.Prev, this.hdsIntl),
        icon: 'chevron-left',
        ariaLabel: getHdsPaginationDirectionAriaLabel(HdsPaginationDirectionValues.Prev, this.hdsIntl)
      },
      [HdsPaginationDirectionValues.Next]: {
        label: getHdsPaginationDirectionLabel(HdsPaginationDirectionValues.Next, this.hdsIntl),
        icon: 'chevron-right',
        ariaLabel: getHdsPaginationDirectionAriaLabel(HdsPaginationDirectionValues.Next, this.hdsIntl)
      }
    };
    return hdsPaginationNavArrowContentDirectionMap[direction];
  }
  get showLabel() {
    const {
      showLabel = true
    } = this.args;
    return showLabel;
  }
  get classNames() {
    const classes = ['hds-pagination-nav__control', 'hds-pagination-nav__arrow', `hds-pagination-nav__arrow--direction-${this.args.direction}`];
    return classes.join(' ');
  }
  onClick = () => {
    const {
      onClick
    } = this.args;
    if (typeof onClick === 'function') {
      onClick(this.args.direction);
    }
  };
  static {
    setComponentTemplate(precompileTemplate("{{#if @disabled}}\n  <HdsInteractive class={{this.classNames}} aria-label={{this.content.ariaLabel}} disabled={{true}} ...attributes>\n    <HdsIcon @name={{this.content.icon}} />\n    {{#if this.showLabel}}\n      <HdsTextBody class=\"hds-pagination-nav__arrow-label\" @tag=\"span\" @size=\"100\" @weight=\"medium\" aria-hidden=\"true\">\n        {{this.content.label}}\n      </HdsTextBody>\n    {{/if}}\n  </HdsInteractive>\n{{else}}\n  <HdsInteractive class={{this.classNames}} @route={{@route}} @query={{@query}} @model={{@model}} @models={{@models}} @replace={{@replace}} {{on \"click\" this.onClick}} aria-label={{this.content.ariaLabel}} ...attributes>\n    <HdsIcon @name={{this.content.icon}} />\n    {{#if this.showLabel}}\n      <HdsTextBody class=\"hds-pagination-nav__arrow-label\" @tag=\"span\" @size=\"100\" @weight=\"medium\" aria-hidden=\"true\">\n        {{this.content.label}}\n      </HdsTextBody>\n    {{/if}}\n  </HdsInteractive>\n{{/if}}", {
      strictMode: true,
      scope: () => ({
        HdsInteractive,
        HdsIcon,
        HdsTextBody,
        on
      })
    }), this);
  }
}

export { DIRECTIONS, HdsPaginationControlArrow as default };
//# sourceMappingURL=arrow.js.map