@hashicorp/design-system-components/dist/components/hds/dialog-primitive/header.js

Helios Design System Components

import Component from '@glimmer/component';
import { concat } from '@ember/helper';
import { on } from '@ember/modifier';
import { element } from 'ember-element-helper';
import { HdsDialogPrimitiveHeaderTitleTagValues } from './types.js';
import HdsIcon from '../icon/index.js';
import HdsTextBody from '../text/body.js';
import HdsTextDisplay from '../text/display.js';
import HdsDismissButton from '../dismiss-button/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const NOOP = () => {};
class HdsDialogPrimitiveHeader extends Component {
  get titleTag() {
    return this.args.titleTag ?? HdsDialogPrimitiveHeaderTitleTagValues.Div;
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  get onDismiss() {
    const {
      onDismiss
    } = this.args;
    // notice: this is a guard used in case the button is used as standalone element (eg. in the showcase)
    // in reality it's always used inside the main components as a yielded component, so the onDismiss handler is always defined
    if (typeof onDismiss === 'function') {
      return onDismiss;
    } else {
      return NOOP;
    }
  }
  static {
    setComponentTemplate(precompileTemplate("<div class=\"hds-dialog-primitive__header\n    {{if @contextualClassPrefix (concat @contextualClassPrefix \"__header\")}}\" ...attributes>\n  {{#if @icon}}\n    <HdsIcon class=\"hds-dialog-primitive__icon\n        {{if @contextualClassPrefix (concat @contextualClassPrefix \"__icon\")}}\" @name={{@icon}} @size=\"24\" />\n  {{/if}}\n\n  {{#let (element this.titleTag) as |Tag|}}<Tag class=\"hds-dialog-primitive__title\n        {{if @contextualClassPrefix (concat @contextualClassPrefix \"__title\")}}\" id={{@id}}>\n      {{#if @tagline}}\n        <HdsTextBody class=\"hds-dialog-primitive__tagline\n            {{if @contextualClassPrefix (concat @contextualClassPrefix \"__tagline\")}}\" @tag=\"div\" @size=\"100\">\n          {{@tagline}}\n        </HdsTextBody>\n      {{/if}}\n\n      <HdsTextDisplay @tag=\"div\" @size=\"300\" @weight=\"semibold\">\n        {{yield}}\n      </HdsTextDisplay>\n    </Tag>\n  {{/let}}\n\n  <HdsDismissButton class=\"hds-dialog-primitive__dismiss\n      {{if @contextualClassPrefix (concat @contextualClassPrefix \"__dismiss\")}}\" {{on \"click\" this.onDismiss}} />\n</div>", {
      strictMode: true,
      scope: () => ({
        concat,
        HdsIcon,
        element,
        HdsTextBody,
        HdsTextDisplay,
        HdsDismissButton,
        on
      })
    }), this);
  }
}

export { HdsDialogPrimitiveHeader as default };
//# sourceMappingURL=header.js.map