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

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { hash } from '@ember/helper';
import { eq } from 'ember-truth-helpers';
import { getElementId } from '../../../../utils/hds-get-element-id.js';
import { registerAriaDescriptionElement, unregisterAriaDescriptionElement, ariaDescribedBy } from '../../../../utils/hds-aria-described-by.js';
import { HdsFormFieldLayoutValues } from './types.js';
import HdsFormLabel from '../label/index.js';
import HdsFormHelperText from '../helper-text/index.js';
import HdsFormCharacterCount from '../character-count/index.js';
import HdsFormError from '../error/index.js';
import HdsYield from '../../yield/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { c } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const LAYOUT_TYPES = Object.values(HdsFormFieldLayoutValues);
const HdsFormField = c(class HdsFormField extends Component {
  get layout() {
    const {
      layout
    } = this.args;
    assert(`@layout for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(', ')}; received: ${layout}`, LAYOUT_TYPES.includes(layout));
    return layout;
  }
  get id() {
    return getElementId(this);
  }
  get isRequired() {
    return this.args.isRequired || false;
  }
  get isOptional() {
    return this.args.isOptional || false;
  }
  get classNames() {
    const classes = [];
    if (this.args.layout) {
      classes.push(`hds-form-field--layout-${this.layout}`);
    }
    // add a class based on the @contextualClass argument
    // notice: this will *not* be documented for public use
    if (this.args.contextualClass) {
      classes.push(this.args.contextualClass);
    }
    return classes.join(' ');
  }
  appendDescriptor = element => {
    registerAriaDescriptionElement(this, element);
  };
  removeDescriptor = element => {
    unregisterAriaDescriptionElement(this, element);
  };
  static {
    setComponentTemplate(precompileTemplate("<div class={{this.classNames}} ...attributes>\n  {{yield (hash Label=(component HdsFormLabel controlId=this.id isRequired=this.isRequired isOptional=this.isOptional contextualClass=\"hds-form-field__label\"))}}\n  {{#unless (eq @layout \"flag\")}}\n    {{yield (hash HelperText=(component HdsFormHelperText controlId=this.id onInsert=this.appendDescriptor contextualClass=\"hds-form-field__helper-text\"))}}\n  {{/unless}}\n  {{!-- @glint-expect-error --}}\n  {{#let this.ariaDescribedBy as |ariaDescribedBy|}}\n    <div class=\"hds-form-field__control\">\n      {{yield (hash Control=HdsYield id=this.id ariaDescribedBy=ariaDescribedBy)}}\n    </div>\n  {{/let}}\n  {{#if (eq @layout \"flag\")}}\n    {{yield (hash HelperText=(component HdsFormHelperText controlId=this.id onInsert=this.appendDescriptor contextualClass=\"hds-form-field__helper-text\"))}}\n  {{/if}}\n  {{yield (hash CharacterCount=(component HdsFormCharacterCount controlId=this.id onInsert=this.appendDescriptor contextualClass=\"hds-form-field__character-count\"))}}\n  {{yield (hash Error=(component HdsFormError controlId=this.id onInsert=this.appendDescriptor onRemove=this.removeDescriptor contextualClass=\"hds-form-field__error\"))}}\n</div>", {
      strictMode: true,
      scope: () => ({
        hash,
        HdsFormLabel,
        eq,
        HdsFormHelperText,
        HdsYield,
        HdsFormCharacterCount,
        HdsFormError
      })
    }), this);
  }
}, [ariaDescribedBy]);

export { LAYOUT_TYPES, HdsFormField as default };
//# sourceMappingURL=index.js.map