@hashicorp/design-system-components/dist/components/hds/interactive/index.js

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { on } from '@ember/modifier';
import { LinkTo } from '@ember/routing';
import { array } from '@ember/helper';
import { getLinkToExternal } from '../../../utils/hds-link-to-external.js';
import { hdsLinkToModels } from '../../../helpers/hds-link-to-models.js';
import { hdsLinkToQuery } from '../../../helpers/hds-link-to-query.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
class HdsInteractive extends Component {
  get linkToExternal() {
    const component = getLinkToExternal();
    if (component === null) {
      assert(`HdsInteractive: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:

import LinkToExternal from 'ember-engines/components/link-to-external';
import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
setLinkToExternal(LinkToExternal);`);
    }
    return component;
  }
  get isHrefExternal() {
    return this.args.isHrefExternal ?? true;
  }
  get isRouteExternal() {
    return this.args.isRouteExternal ?? false;
  }
  onKeyUp = event => {
    if (event.key === ' ' || event.code === 'Space') {
      event.target.click();
    }
  };
  static {
    setComponentTemplate(precompileTemplate("{{!-- IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) --}}\n{{!-- IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control --}}\n{{!-- NOTICE: we can't support the direct use of the \"href\" HTML attribute via ...attributes in the <a> elements, because we need to rely on the \"@href\" Ember argument to differentiate between different types of generated output --}}\n{{~#if @route~}}\n  {{~#if this.isRouteExternal~}}\n    <this.linkToExternal @current-when={{@current-when}} @models={{hdsLinkToModels (array @model @models)}} @query={{hdsLinkToQuery (array @query)}} @replace={{@replace}} @route={{@route}} ...attributes>{{yield}}</this.linkToExternal>\n  {{~else~}}\n    <LinkTo @current-when={{@current-when}} @models={{hdsLinkToModels (array @model @models)}} @query={{hdsLinkToQuery (array @query)}} @replace={{@replace}} @route={{@route}} ...attributes>{{yield}}</LinkTo>\n  {{~/if~}}\n{{~else if @href~}}\n  {{~#if this.isHrefExternal~}}\n    <a target=\"_blank\" rel=\"noopener noreferrer\" ...attributes href={{@href}} {{on \"keyup\" this.onKeyUp}}>{{yield}}</a>\n  {{~else~}}\n    <a ...attributes href={{@href}} {{on \"keyup\" this.onKeyUp}}>{{yield}}</a>\n  {{~/if~}}\n{{~else~}}\n  <button type=\"button\" ...attributes>{{yield}}</button>\n{{~/if~}}", {
      strictMode: true,
      scope: () => ({
        hdsLinkToModels,
        array,
        hdsLinkToQuery,
        LinkTo,
        on
      })
    }), this);
  }
}

export { HdsInteractive as default };
//# sourceMappingURL=index.js.map