@hashicorp/design-system-components/dist/components/hds/form/radio-card/index.js

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { hash } from '@ember/helper';
import style from 'ember-style-modifier';
import { HdsFormRadioCardControlPositionValues, HdsFormRadioCardAlignmentValues } from './types.js';
import HdsFormRadioBase from '../radio/base.js';
import HdsIcon from '../../icon/index.js';
import HdsBadge from '../../badge/index.js';
import HdsFormRadioCardLabel from './label.js';
import HdsFormRadioCardDescription from './description.js';
import HdsYield from '../../yield/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 DEFAULT_CONTROL_POSITION = HdsFormRadioCardControlPositionValues.Bottom;
const DEFAULT_ALIGNMENT = HdsFormRadioCardAlignmentValues.Left;
const CONTROL_POSITIONS = Object.values(HdsFormRadioCardControlPositionValues);
const ALIGNMENTS = Object.values(HdsFormRadioCardAlignmentValues);
class HdsFormRadioCard extends Component {
  get controlPosition() {
    const {
      controlPosition = DEFAULT_CONTROL_POSITION
    } = this.args;
    assert(`@controlPosition for "Hds::Form::RadioCard" must be one of the following: ${CONTROL_POSITIONS.join(', ')}; received: ${controlPosition}`, CONTROL_POSITIONS.includes(controlPosition));
    return controlPosition;
  }
  get alignment() {
    const {
      alignment = DEFAULT_ALIGNMENT
    } = this.args;
    assert(`@alignment for "Hds::Form::RadioCard" must be one of the following: ${ALIGNMENTS.join(', ')}; received: ${alignment}`, ALIGNMENTS.includes(alignment));
    return alignment;
  }
  get classNames() {
    const classes = ['hds-form-radio-card'];
    if (this.args.checked) {
      classes.push('hds-form-radio-card--checked');
    }
    if (this.args.disabled) {
      classes.push('hds-form-radio-card--disabled');
    }
    if (this.args.maxWidth) {
      classes.push('hds-form-radio-card--has-fixed-width');
    } else {
      classes.push('hds-form-radio-card--has-fluid-width');
    }
    // add a class based on the @controlPosition argument
    classes.push(`hds-form-radio-card--control-${this.controlPosition}`);
    // add a class based on the @alignment argument
    classes.push(`hds-form-radio-card--align-${this.alignment}`);
    return classes.join(' ');
  }
  static {
    setComponentTemplate(precompileTemplate("<label class={{this.classNames}} {{style maxWidth=@maxWidth}}>\n  <span class=\"hds-form-radio-card__content\">\n    {{yield (hash Icon=(component HdsIcon size=\"24\"))}}\n    {{yield (hash Label=HdsFormRadioCardLabel)}}\n    {{yield (hash Badge=HdsBadge)}}\n    {{yield (hash Description=HdsFormRadioCardDescription)}}\n    {{yield (hash Generic=HdsYield)}}\n  </span>\n  <span class=\"hds-form-radio-card__control-wrapper\">\n    <HdsFormRadioBase class=\"hds-form-radio-card__control\" @value={{@value}} name={{@name}} checked={{@checked}} disabled={{@disabled}} aria-describedby={{@extraAriaDescribedBy}} ...attributes />\n  </span>\n</label>", {
      strictMode: true,
      scope: () => ({
        style,
        hash,
        HdsIcon,
        HdsFormRadioCardLabel,
        HdsBadge,
        HdsFormRadioCardDescription,
        HdsYield,
        HdsFormRadioBase
      })
    }), this);
  }
}

export { ALIGNMENTS, CONTROL_POSITIONS, DEFAULT_ALIGNMENT, DEFAULT_CONTROL_POSITION, HdsFormRadioCard as default };
//# sourceMappingURL=index.js.map