@hashicorp/design-system-components/dist/components/hds/form/key-value-inputs/field.js

Helios Design System Components

import Component from '@glimmer/component';
import { modifier } from 'ember-modifier';
import { concat, hash } from '@ember/helper';
import { registerAriaDescriptionElement, unregisterAriaDescriptionElement, ariaDescribedBy } from '../../../../utils/hds-aria-described-by.js';
import { getElementId } from '../../../../utils/hds-get-element-id.js';
import HdsFormError from '../error/index.js';
import HdsFormFileInputBase from '../file-input/base.js';
import HdsFormHelperText from '../helper-text/index.js';
import HdsFormLabel, { ID_PREFIX } from '../label/index.js';
import HdsFormMaskedInputBase from '../masked-input/base.js';
import HdsFormSelectBase from '../select/base.js';
import HdsFormSuperSelectMultipleBase from '../super-select/multiple/base.js';
import HdsFormSuperSelectSingleBase from '../super-select/single/base.js';
import HdsFormTextareaBase from '../textarea/base.js';
import HdsFormTextInputBase from '../text-input/base.js';
import { service } from '@ember/service';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { c, g, i } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const HdsFormKeyValueInputsField = c(class HdsFormKeyValueInputsField extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  _onInsert = modifier(() => {
    if (this.args.onInsert) {
      this.args.onInsert();
    }
    return () => {
      if (this.args.onRemove) {
        this.args.onRemove();
      }
    };
  });
  get id() {
    return getElementId(this);
  }
  get labelHiddenText() {
    return this.hdsIntl.t('hds.components.form.key-value-inputs.field.label-hidden-text', {
      default: 'row {rowNumber}',
      rowNumber: this.args.rowIndex + 1
    });
  }
  get labelIdPrefix() {
    return ID_PREFIX;
  }
  appendDescriptor = element => {
    registerAriaDescriptionElement(this, element);
  };
  removeDescriptor = element => {
    unregisterAriaDescriptionElement(this, element);
  };
  static {
    setComponentTemplate(precompileTemplate("<div class=\"hds-form-key-value-inputs__field\" data-width={{@width}} ...attributes {{this._onInsert}}>\n  <div class=\"hds-form-key-value-inputs__field-header\">\n    {{yield (hash Label=(component HdsFormLabel contextualClass=\"hds-form-key-value-inputs__field-label\" controlId=this.id hiddenText=this.labelHiddenText isOptional=@isOptional isRequired=@isRequired))}}\n    {{yield (hash HelperText=(component HdsFormHelperText contextualClass=\"hds-form-key-value-inputs__field-helper-text\" controlId=this.id onInsert=this.appendDescriptor))}}\n  </div>\n  <div class=\"hds-form-key-value-inputs__field-control\">\n    {{!-- @glint-expect-error - Glint does not recognize this.ariaDescribedBy as defined when used directly in a multi-line hash passed to yield. Since @glint-expect-error only applies to the line immediately after it and cannot be placed inside a multi-line hash, we use a let to work around this limitation. --}}\n    {{#let this.ariaDescribedBy as |ariaDescribedBy|}}\n      {{yield (hash FileInput=(component HdsFormFileInputBase ariaDescribedBy=ariaDescribedBy id=this.id) MaskedInput=(component HdsFormMaskedInputBase ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid) Select=(component HdsFormSelectBase ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid) SuperSelectSingle=(component HdsFormSuperSelectSingleBase ariaDescribedBy=ariaDescribedBy ariaLabelledBy=(concat this.labelIdPrefix this.id) isInvalid=@isInvalid triggerId=this.id) SuperSelectMultiple=(component HdsFormSuperSelectMultipleBase ariaDescribedBy=ariaDescribedBy ariaLabelledBy=(concat this.labelIdPrefix this.id) isInvalid=@isInvalid triggerId=this.id) TextInput=(component HdsFormTextInputBase ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid) Textarea=(component HdsFormTextareaBase ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid))}}\n    {{/let}}\n\n    {{yield (hash Error=(component HdsFormError contextualClass=\"hds-form-key-value-inputs__field-error\" controlId=this.id onInsert=this.appendDescriptor onRemove=this.removeDescriptor))}}\n  </div>\n</div>", {
      strictMode: true,
      scope: () => ({
        hash,
        HdsFormLabel,
        HdsFormHelperText,
        HdsFormFileInputBase,
        HdsFormMaskedInputBase,
        HdsFormSelectBase,
        HdsFormSuperSelectSingleBase,
        concat,
        HdsFormSuperSelectMultipleBase,
        HdsFormTextInputBase,
        HdsFormTextareaBase,
        HdsFormError
      })
    }), this);
  }
}, [ariaDescribedBy]);

export { HdsFormKeyValueInputsField as default };
//# sourceMappingURL=field.js.map