@hashicorp/design-system-components
Version:
Helios Design System Components
61 lines (58 loc) • 2.73 kB
JavaScript
import Component from '@glimmer/component';
import { hash } from '@ember/helper';
import { getElementId } from '../../../../utils/hds-get-element-id.js';
import { registerAriaDescriptionElement, unregisterAriaDescriptionElement, ariaDescribedBy } from '../../../../utils/hds-aria-described-by.js';
import { HdsFormFieldsetLayoutValues } from './types.js';
import HdsFormLegend from '../legend/index.js';
import HdsFormHelperText from '../helper-text/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(HdsFormFieldsetLayoutValues);
const HdsFormFieldset = c(class HdsFormFieldset extends Component {
get layout() {
return this.args.layout ?? HdsFormFieldsetLayoutValues.Vertical;
}
get id() {
return getElementId(this);
}
get isRequired() {
return this.args.isRequired || false;
}
get isOptional() {
return this.args.isOptional || false;
}
get classNames() {
// we just need a class for the layout
const classes = ['hds-form-group'];
// add a class based on the @layout argument
classes.push(`hds-form-group--layout-${this.layout}`);
return classes.join(' ');
}
appendDescriptor = element => {
registerAriaDescriptionElement(this, element);
};
removeDescriptor = element => {
unregisterAriaDescriptionElement(this, element);
};
static {
setComponentTemplate(precompileTemplate("<fieldset class={{this.classNames}} id={{this.id}} ...attributes>\n {{yield (hash Legend=(component HdsFormLegend isRequired=this.isRequired isOptional=this.isOptional contextualClass=\"hds-form-group__legend\"))}}\n {{yield (hash HelperText=(component HdsFormHelperText controlId=this.id onInsert=this.appendDescriptor contextualClass=\"hds-form-group__helper-text\"))}}\n <div class=\"hds-form-group__control-fields-wrapper\">\n {{!-- @glint-expect-error --}}\n {{yield (hash Control=HdsYield ariaDescribedBy=this.ariaDescribedBy)}}\n </div>\n {{yield (hash Error=(component HdsFormError controlId=this.id onInsert=this.appendDescriptor onRemove=this.removeDescriptor contextualClass=\"hds-form-group__error\"))}}\n</fieldset>", {
strictMode: true,
scope: () => ({
hash,
HdsFormLegend,
HdsFormHelperText,
HdsYield,
HdsFormError
})
}), this);
}
}, [ariaDescribedBy]);
export { LAYOUT_TYPES, HdsFormFieldset as default };
//# sourceMappingURL=index.js.map