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

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { eq } from 'ember-truth-helpers';
import { hash } from '@ember/helper';
import style from 'ember-style-modifier';
import { HdsFormTagValues } from './types.js';
import HdsFormHeaderTitle from './header/title.js';
import HdsFormHeaderDescription from './header/description.js';
import HdsFormSectionHeader from './section/header.js';
import HdsFormSectionMultiFieldGroup from './section/multi-field-group/index.js';
import HdsFormSectionMultiFieldGroupItem from './section/multi-field-group/item.js';
import HdsFormSeparator from './separator/index.js';
import HdsFormFooter from './footer/index.js';
import HdsFormHeader from './header/index.js';
import HdsFormSection from './section/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_TAG = HdsFormTagValues.Form;
const AVAILABLE_TAGS = Object.values(HdsFormTagValues);
class HdsForm extends Component {
  tag;
  constructor(owner, args) {
    super(owner, args);
    this.tag = args.tag ?? DEFAULT_TAG;
    assert(`@tag for "Hds::Form" must be one of the following: ${AVAILABLE_TAGS.join(', ')}; received: ${this.tag}`, AVAILABLE_TAGS.includes(this.tag));
  }
  get sectionMaxWidthStyle() {
    const sectionMaxWidthStyle = {};
    if (this.args.sectionMaxWidth) {
      sectionMaxWidthStyle['--hds-form-section-max-width'] = this.args.sectionMaxWidth;
    }
    return sectionMaxWidthStyle;
  }
  static {
    setComponentTemplate(precompileTemplate("{{#if (eq this.tag \"form\")}}\n  <form class=\"hds-form\" {{style this.sectionMaxWidthStyle}} ...attributes>\n    {{yield (hash Header=HdsFormHeader HeaderTitle=HdsFormHeaderTitle HeaderDescription=HdsFormHeaderDescription Section=HdsFormSection SectionHeader=HdsFormSectionHeader SectionHeaderTitle=(component HdsFormHeaderTitle size=\"300\") SectionHeaderDescription=HdsFormHeaderDescription SectionMultiFieldGroup=HdsFormSectionMultiFieldGroup SectionMultiFieldGroupItem=HdsFormSectionMultiFieldGroupItem Separator=HdsFormSeparator Footer=HdsFormFooter)}}\n  </form>\n{{else}}\n  <div class=\"hds-form\" {{style this.sectionMaxWidthStyle}} ...attributes>\n    {{yield (hash Header=HdsFormHeader HeaderTitle=HdsFormHeaderTitle HeaderDescription=HdsFormHeaderDescription Section=HdsFormSection SectionHeader=HdsFormSectionHeader SectionHeaderTitle=(component HdsFormHeaderTitle size=\"300\") SectionHeaderDescription=HdsFormHeaderDescription SectionMultiFieldGroup=HdsFormSectionMultiFieldGroup SectionMultiFieldGroupItem=HdsFormSectionMultiFieldGroupItem Separator=HdsFormSeparator Footer=HdsFormFooter)}}\n  </div>\n{{/if}}", {
      strictMode: true,
      scope: () => ({
        eq,
        style,
        hash,
        HdsFormHeader,
        HdsFormHeaderTitle,
        HdsFormHeaderDescription,
        HdsFormSection,
        HdsFormSectionHeader,
        HdsFormSectionMultiFieldGroup,
        HdsFormSectionMultiFieldGroupItem,
        HdsFormSeparator,
        HdsFormFooter
      })
    }), this);
  }
}

export { AVAILABLE_TAGS, DEFAULT_TAG, HdsForm as default };
//# sourceMappingURL=index.js.map