@hashicorp/design-system-components 4.20.2 → 4.21.0

package/dist/components/hds/form/header/index.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div class={{this.classNames}} ...attributes>\n  {{yield (hash Title=(component \"hds/form/header/title\") Description=(component \"hds/form/header/description\"))}}\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFormHeader extends Component {
+  get classNames() {
+    const classes = ['hds-form__header'];
+
+    // add a class based on the @isFullWidth argument
+    if (this.args.isFullWidth) {
+      classes.push('hds-form-content--is-full-width');
+    }
+    return classes.join(' ');
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFormHeader);
+
+export { HdsFormHeader as default };
+//# sourceMappingURL=index.js.map

package/dist/components/hds/form/header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/header/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsFormHeaderTitleSignature } from './title.ts';\nimport type { HdsFormHeaderDescriptionSignature } from './description.ts';\n\nexport interface HdsFormHeaderSignature {\n  Args: {\n    isFullWidth?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        Title?: ComponentLike<HdsFormHeaderTitleSignature>;\n        Description?: ComponentLike<HdsFormHeaderDescriptionSignature>;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFormHeader extends Component<HdsFormHeaderSignature> {\n  get classNames(): string {\n    const classes = ['hds-form__header'];\n\n    // add a class based on the @isFullWidth argument\n    if (this.args.isFullWidth) {\n      classes.push('hds-form-content--is-full-width');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsFormHeader","Component","classNames","classes","args","isFullWidth","push","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;;AAuBe,MAAMA,aAAa,SAASC,SAAS,CAAyB;EAC3E,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,kBAAkB,CAAC;;AAEpC;AACA,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,WAAW,EAAE;AACzBF,MAAAA,OAAO,CAACG,IAAI,CAAC,iCAAiC,CAAC;AACjD;AAEA,IAAA,OAAOH,OAAO,CAACI,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACC,oBAAA,CAAAC,QAAA,EAXoBT,aAAa,CAAA;;;;"}

package/dist/components/hds/form/header/title.js

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { HdsFormHeaderTitleTagValues } from '../types.js';
+import { HdsTextSizeValues } from '../../text/types.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<Hds::Text::Display class=\"hds-form__header-title\" @tag={{this.tag}} @size={{this.size}} @color=\"strong\" ...attributes>\n  {{yield}}\n</Hds::Text::Display>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const DEFAULT_SIZE = HdsTextSizeValues.FourHundred;
+const DEFAULT_TAG = HdsFormHeaderTitleTagValues.Div;
+const AVAILABLE_TAGS = Object.values(HdsFormHeaderTitleTagValues);
+class HdsFormHeaderTitle extends Component {
+  get tag() {
+    const {
+      tag = DEFAULT_TAG
+    } = this.args;
+    assert(`@tag for "Hds::Form::Header::Title" must be one of the following: ${AVAILABLE_TAGS.join(', ')}; received: ${tag}`, AVAILABLE_TAGS.includes(tag));
+    return tag;
+  }
+  get size() {
+    return this.args.size ?? DEFAULT_SIZE;
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFormHeaderTitle);
+
+export { AVAILABLE_TAGS, DEFAULT_SIZE, DEFAULT_TAG, HdsFormHeaderTitle as default };
+//# sourceMappingURL=title.js.map

package/dist/components/hds/form/header/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../../../src/components/hds/form/header/title.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\nimport type { HdsFormHeaderTitleTags } from '../types.ts';\nimport { HdsFormHeaderTitleTagValues } from '../types.ts';\n\nimport { HdsTextSizeValues } from '../../text/types.ts';\nimport type { HdsTextDisplaySignature } from '../../text/display.ts';\n\nexport const DEFAULT_SIZE = HdsTextSizeValues.FourHundred;\nexport const DEFAULT_TAG = HdsFormHeaderTitleTagValues.Div;\nexport const AVAILABLE_TAGS: string[] = Object.values(\n  HdsFormHeaderTitleTagValues\n);\n\nexport interface HdsFormHeaderTitleSignature {\n  Args: {\n    tag?: HdsFormHeaderTitleTags;\n    size?: HdsTextDisplaySignature['Args']['size'];\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HdsTextDisplaySignature['Element'];\n}\n\nexport default class HdsFormHeaderTitle extends Component<HdsFormHeaderTitleSignature> {\n  get tag(): HdsFormHeaderTitleTags {\n    const { tag = DEFAULT_TAG } = this.args;\n\n    assert(\n      `@tag for \"Hds::Form::Header::Title\" must be one of the following: ${AVAILABLE_TAGS.join(\n        ', '\n      )}; received: ${tag}`,\n      AVAILABLE_TAGS.includes(tag)\n    );\n\n    return tag;\n  }\n\n  get size(): HdsTextDisplaySignature['Args']['size'] {\n    return this.args.size ?? DEFAULT_SIZE;\n  }\n}\n"],"names":["DEFAULT_SIZE","HdsTextSizeValues","FourHundred","DEFAULT_TAG","HdsFormHeaderTitleTagValues","Div","AVAILABLE_TAGS","Object","values","HdsFormHeaderTitle","Component","tag","args","assert","join","includes","size","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AAUaA,MAAAA,YAAY,GAAGC,iBAAiB,CAACC;AACjCC,MAAAA,WAAW,GAAGC,2BAA2B,CAACC;AAChD,MAAMC,cAAwB,GAAGC,MAAM,CAACC,MAAM,CACnDJ,2BACF;AAae,MAAMK,kBAAkB,SAASC,SAAS,CAA8B;EACrF,IAAIC,GAAGA,GAA2B;IAChC,MAAM;AAAEA,MAAAA,GAAG,GAAGR;KAAa,GAAG,IAAI,CAACS,IAAI;AAEvCC,IAAAA,MAAM,CACJ,CAAqEP,kEAAAA,EAAAA,cAAc,CAACQ,IAAI,CACtF,IACF,CAAC,CAAA,YAAA,EAAeH,GAAG,CAAA,CAAE,EACrBL,cAAc,CAACS,QAAQ,CAACJ,GAAG,CAC7B,CAAC;AAED,IAAA,OAAOA,GAAG;AACZ;EAEA,IAAIK,IAAIA,GAA4C;AAClD,IAAA,OAAO,IAAI,CAACJ,IAAI,CAACI,IAAI,IAAIhB,YAAY;AACvC;AACF;AAACiB,oBAAA,CAAAC,QAAA,EAjBoBT,kBAAkB,CAAA;;;;"}

package/dist/components/hds/form/index.js

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import './header/title.js';
+import { HdsFormTagValues } from './types.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n{{#if (eq this.tag \"form\")}}\n  <form class=\"hds-form\" {{style this.sectionMaxWidthStyle}} ...attributes>\n    {{yield\n      (hash\n        Header=(component \"hds/form/header\")\n        HeaderTitle=(component \"hds/form/header/title\")\n        HeaderDescription=(component \"hds/form/header/description\")\n        Section=(component \"hds/form/section\")\n        SectionHeader=(component \"hds/form/section/header\")\n        SectionHeaderTitle=(component \"hds/form/header/title\" size=\"300\")\n        SectionHeaderDescription=(component \"hds/form/header/description\")\n        SectionMultiFieldGroup=(component \"hds/form/section/multi-field-group\")\n        SectionMultiFieldGroupItem=(component \"hds/form/section/multi-field-group/item\")\n        Separator=(component \"hds/form/separator\")\n        Footer=(component \"hds/form/footer\")\n      )\n    }}\n  </form>\n{{else}}\n  <div class=\"hds-form\" {{style this.sectionMaxWidthStyle}} ...attributes>\n    {{yield\n      (hash\n        Header=(component \"hds/form/header\")\n        HeaderTitle=(component \"hds/form/header/title\")\n        HeaderDescription=(component \"hds/form/header/description\")\n        Section=(component \"hds/form/section\")\n        SectionHeader=(component \"hds/form/section/header\")\n        SectionHeaderTitle=(component \"hds/form/header/title\" size=\"300\")\n        SectionHeaderDescription=(component \"hds/form/header/description\")\n        SectionMultiFieldGroup=(component \"hds/form/section/multi-field-group\")\n        SectionMultiFieldGroupItem=(component \"hds/form/section/multi-field-group/item\")\n        Separator=(component \"hds/form/separator\")\n        Footer=(component \"hds/form/footer\")\n      )\n    }}\n  </div>\n{{/if}}");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * 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;
+  }
+}
+setComponentTemplate(TEMPLATE, HdsForm);
+
+export { AVAILABLE_TAGS, DEFAULT_TAG, HdsForm as default };
+//# sourceMappingURL=index.js.map

package/dist/components/hds/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/form/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\nimport HdsFormHeaderTitleComponent from './header/title.ts';\n\nimport { HdsFormTagValues } from './types.ts';\n\nimport type { HdsFormTags } from './types.ts';\nimport type Owner from '@ember/owner';\n\nimport type { ComponentLike, WithBoundArgs } from '@glint/template';\nimport type { HdsFormHeaderSignature } from './header/index.ts';\nimport type { HdsFormHeaderTitleSignature } from './header/title.ts';\nimport type { HdsFormHeaderDescriptionSignature } from './header/description.ts';\nimport type { HdsFormSectionSignature } from './section/index.ts';\nimport type { HdsFormSectionHeaderSignature } from './section/header.ts';\nimport type { HdsFormSectionMultiFieldGroupSignature } from './section/multi-field-group/index.ts';\nimport type { HdsFormSectionMultiFieldGroupItemSignature } from './section/multi-field-group/item.ts';\nimport type { HdsFormSeparatorSignature } from './separator/index.ts';\nimport type { HdsFormFooterSignature } from './footer/index.ts';\n\nexport const DEFAULT_TAG = HdsFormTagValues.Form;\nexport const AVAILABLE_TAGS: string[] = Object.values(HdsFormTagValues);\n\nexport interface HdsFormSignature {\n  Args: {\n    tag?: HdsFormTags;\n    sectionMaxWidth?: string;\n  };\n  Blocks: {\n    default: [\n      {\n        Header?: ComponentLike<HdsFormHeaderSignature>;\n        HeaderTitle?: ComponentLike<HdsFormHeaderTitleSignature>;\n        HeaderDescription?: ComponentLike<HdsFormHeaderDescriptionSignature>;\n        Section?: ComponentLike<HdsFormSectionSignature>;\n        SectionHeader?: ComponentLike<HdsFormSectionHeaderSignature>;\n        SectionHeaderTitle?: WithBoundArgs<\n          typeof HdsFormHeaderTitleComponent,\n          'size'\n        >;\n        SectionHeaderDescription?: ComponentLike<HdsFormHeaderDescriptionSignature>;\n        SectionMultiFieldGroup?: ComponentLike<HdsFormSectionMultiFieldGroupSignature>;\n        SectionMultiFieldGroupItem?: ComponentLike<HdsFormSectionMultiFieldGroupItemSignature>;\n        Separator?: ComponentLike<HdsFormSeparatorSignature>;\n        Footer?: ComponentLike<HdsFormFooterSignature>;\n      },\n    ];\n  };\n  Element: HTMLFormElement | HTMLDivElement;\n}\n\nexport default class HdsForm extends Component<HdsFormSignature> {\n  tag: HdsFormTags;\n\n  constructor(owner: Owner, args: HdsFormSignature['Args']) {\n    super(owner, args);\n    this.tag = args.tag ?? DEFAULT_TAG;\n\n    assert(\n      `@tag for \"Hds::Form\" must be one of the following: ${AVAILABLE_TAGS.join(', ')}; received: ${this.tag}`,\n      AVAILABLE_TAGS.includes(this.tag)\n    );\n  }\n\n  get sectionMaxWidthStyle(): Record<string, string> {\n    const sectionMaxWidthStyle: { [key: string]: string } = {};\n\n    if (this.args.sectionMaxWidth) {\n      sectionMaxWidthStyle['--hds-form-section-max-width'] =\n        this.args.sectionMaxWidth;\n    }\n    return sectionMaxWidthStyle;\n  }\n}\n"],"names":["DEFAULT_TAG","HdsFormTagValues","Form","AVAILABLE_TAGS","Object","values","HdsForm","Component","tag","constructor","owner","args","assert","join","includes","sectionMaxWidthStyle","sectionMaxWidth","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AAsBaA,MAAAA,WAAW,GAAGC,gBAAgB,CAACC;AACrC,MAAMC,cAAwB,GAAGC,MAAM,CAACC,MAAM,CAACJ,gBAAgB;AA8BvD,MAAMK,OAAO,SAASC,SAAS,CAAmB;EAC/DC,GAAG;AAEHC,EAAAA,WAAWA,CAACC,KAAY,EAAEC,IAA8B,EAAE;AACxD,IAAA,KAAK,CAACD,KAAK,EAAEC,IAAI,CAAC;AAClB,IAAA,IAAI,CAACH,GAAG,GAAGG,IAAI,CAACH,GAAG,IAAIR,WAAW;IAElCY,MAAM,CACJ,sDAAsDT,cAAc,CAACU,IAAI,CAAC,IAAI,CAAC,CAAA,YAAA,EAAe,IAAI,CAACL,GAAG,CAAE,CAAA,EACxGL,cAAc,CAACW,QAAQ,CAAC,IAAI,CAACN,GAAG,CAClC,CAAC;AACH;EAEA,IAAIO,oBAAoBA,GAA2B;IACjD,MAAMA,oBAA+C,GAAG,EAAE;AAE1D,IAAA,IAAI,IAAI,CAACJ,IAAI,CAACK,eAAe,EAAE;MAC7BD,oBAAoB,CAAC,8BAA8B,CAAC,GAClD,IAAI,CAACJ,IAAI,CAACK,eAAe;AAC7B;AACA,IAAA,OAAOD,oBAAoB;AAC7B;AACF;AAACE,oBAAA,CAAAC,QAAA,EAtBoBZ,OAAO,CAAA;;;;"}

package/dist/components/hds/form/key-value-inputs/add-row-button.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { precompileTemplate } from '@ember/template-compilation';
+import { n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::Button\n  @text={{this.text}}\n  @size=\"medium\"\n  @color=\"secondary\"\n  @icon=\"plus\"\n  @iconPosition=\"leading\"\n  class=\"hds-form-key-value-inputs__add-row-button\"\n  aria-description=\"Adds a new row of one or more inputs at the end of the form field. Press shift tab to move focus back to the newly added row.\"\n  {{on \"click\" this.onClick}}\n  ...attributes\n/>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+class HdsFormKeyValueInputsAddRowButton extends Component {
+  get text() {
+    return this.args.text ?? 'Add row';
+  }
+  onClick() {
+    const {
+      onClick
+    } = this.args;
+    if (typeof onClick === 'function') {
+      onClick();
+    }
+  }
+  static {
+    n(this.prototype, "onClick", [action]);
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFormKeyValueInputsAddRowButton);
+
+export { HdsFormKeyValueInputsAddRowButton as default };
+//# sourceMappingURL=add-row-button.js.map

package/dist/components/hds/form/key-value-inputs/add-row-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-row-button.js","sources":["../../../../../src/components/hds/form/key-value-inputs/add-row-button.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nimport type { HdsButtonSignature } from '../../button/index.ts';\n\nexport interface HdsFormKeyValueInputsAddRowButtonSignature {\n  Args: {\n    onClick?: () => void;\n    text?: HdsButtonSignature['Args']['text'];\n  };\n  Element: HdsButtonSignature['Element'];\n}\n\nexport default class HdsFormKeyValueInputsAddRowButton extends Component<HdsFormKeyValueInputsAddRowButtonSignature> {\n  get text(): string {\n    return this.args.text ?? 'Add row';\n  }\n\n  @action\n  onClick(): void {\n    const { onClick } = this.args;\n\n    if (typeof onClick === 'function') {\n      onClick();\n    }\n  }\n}\n"],"names":["HdsFormKeyValueInputsAddRowButton","Component","text","args","onClick","n","prototype","action","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAce,MAAMA,iCAAiC,SAASC,SAAS,CAA6C;EACnH,IAAIC,IAAIA,GAAW;AACjB,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,IAAI,IAAI,SAAS;AACpC;AAGAE,EAAAA,OAAOA,GAAS;IACd,MAAM;AAAEA,MAAAA;KAAS,GAAG,IAAI,CAACD,IAAI;AAE7B,IAAA,IAAI,OAAOC,OAAO,KAAK,UAAU,EAAE;AACjCA,MAAAA,OAAO,EAAE;AACX;AACF;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAPAC,MAAM,CAAA,CAAA;AAAA;AAQT;AAACC,oBAAA,CAAAC,QAAA,EAboBT,iCAAiC,CAAA;;;;"}

package/dist/components/hds/form/key-value-inputs/delete-row-button.js

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<span class=\"hds-form-key-value-inputs__delete-row-button-container\" {{this._onInsert}}>\n  <Hds::Button\n    @text={{this.text}}\n    @size=\"medium\"\n    @color=\"secondary\"\n    @icon=\"trash\"\n    @isIconOnly={{true}}\n    class=\"hds-form-key-value-inputs__delete-row-button\"\n    {{on \"click\" this.onClick}}\n    ...attributes\n  />\n</span>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+class HdsFormKeyValueInputsDeleteRowButton extends Component {
+  _onInsert = modifier(() => {
+    if (this.args.onInsert) {
+      this.args.onInsert();
+    }
+    return () => {
+      if (this.args.onRemove) {
+        this.args.onRemove();
+      }
+      const {
+        returnFocusTo
+      } = this.args;
+      if (returnFocusTo && returnFocusTo.isConnected) {
+        returnFocusTo.focus();
+      }
+    };
+  });
+  get text() {
+    return this.args.text ?? `Delete row ${this.args.rowIndex + 1}`;
+  }
+  onClick() {
+    const {
+      onClick
+    } = this.args;
+    if (typeof onClick === 'function') {
+      onClick(this.args.rowData, this.args.rowIndex);
+    }
+  }
+  static {
+    n(this.prototype, "onClick", [action]);
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFormKeyValueInputsDeleteRowButton);
+
+export { HdsFormKeyValueInputsDeleteRowButton as default };
+//# sourceMappingURL=delete-row-button.js.map

package/dist/components/hds/form/key-value-inputs/delete-row-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-row-button.js","sources":["../../../../../src/components/hds/form/key-value-inputs/delete-row-button.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nimport type { HdsButtonSignature } from '../../button/index.ts';\n\nexport interface HdsFormKeyValueInputsDeleteRowButtonSignature {\n  Args: {\n    onClick?: (rowData: unknown, rowIndex: number) => void;\n    onInsert?: () => void;\n    onRemove?: () => void;\n    returnFocusTo?: HTMLFieldSetElement;\n    rowData: unknown;\n    rowIndex: number;\n    text?: HdsButtonSignature['Args']['text'];\n  };\n  Element: HdsButtonSignature['Element'];\n}\n\nexport default class HdsFormKeyValueInputsDeleteRowButton extends Component<HdsFormKeyValueInputsDeleteRowButtonSignature> {\n  private _onInsert = modifier(() => {\n    if (this.args.onInsert) {\n      this.args.onInsert();\n    }\n\n    return () => {\n      if (this.args.onRemove) {\n        this.args.onRemove();\n      }\n\n      const { returnFocusTo } = this.args;\n\n      if (returnFocusTo && returnFocusTo.isConnected) {\n        returnFocusTo.focus();\n      }\n    };\n  });\n\n  get text(): string {\n    return this.args.text ?? `Delete row ${this.args.rowIndex + 1}`;\n  }\n\n  @action\n  onClick(): void {\n    const { onClick } = this.args;\n\n    if (typeof onClick === 'function') {\n      onClick(this.args.rowData, this.args.rowIndex);\n    }\n  }\n}\n"],"names":["HdsFormKeyValueInputsDeleteRowButton","Component","_onInsert","modifier","args","onInsert","onRemove","returnFocusTo","isConnected","focus","text","rowIndex","onClick","rowData","n","prototype","action","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAoBe,MAAMA,oCAAoC,SAASC,SAAS,CAAgD;EACjHC,SAAS,GAAGC,QAAQ,CAAC,MAAM;AACjC,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AACtB,MAAA,IAAI,CAACD,IAAI,CAACC,QAAQ,EAAE;AACtB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,IAAI,CAACD,IAAI,CAACE,QAAQ,EAAE;AACtB,QAAA,IAAI,CAACF,IAAI,CAACE,QAAQ,EAAE;AACtB;MAEA,MAAM;AAAEC,QAAAA;OAAe,GAAG,IAAI,CAACH,IAAI;AAEnC,MAAA,IAAIG,aAAa,IAAIA,aAAa,CAACC,WAAW,EAAE;QAC9CD,aAAa,CAACE,KAAK,EAAE;AACvB;KACD;AACH,GAAC,CAAC;EAEF,IAAIC,IAAIA,GAAW;AACjB,IAAA,OAAO,IAAI,CAACN,IAAI,CAACM,IAAI,IAAI,CAAA,WAAA,EAAc,IAAI,CAACN,IAAI,CAACO,QAAQ,GAAG,CAAC,CAAE,CAAA;AACjE;AAGAC,EAAAA,OAAOA,GAAS;IACd,MAAM;AAAEA,MAAAA;KAAS,GAAG,IAAI,CAACR,IAAI;AAE7B,IAAA,IAAI,OAAOQ,OAAO,KAAK,UAAU,EAAE;AACjCA,MAAAA,OAAO,CAAC,IAAI,CAACR,IAAI,CAACS,OAAO,EAAE,IAAI,CAACT,IAAI,CAACO,QAAQ,CAAC;AAChD;AACF;AAAC,EAAA;IAAAG,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAPAC,MAAM,CAAA,CAAA;AAAA;AAQT;AAACC,oBAAA,CAAAC,QAAA,EA/BoBlB,oCAAoC,CAAA;;;;"}

package/dist/components/hds/form/key-value-inputs/field.js

@@ -0,0 +1,63 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { registerAriaDescriptionElement, unregisterAriaDescriptionElement, ariaDescribedBy } from '../../../../utils/hds-aria-described-by.js';
+import { getElementId } from '../../../../utils/hds-get-element-id.js';
+import '../error/index.js';
+import '../file-input/base.js';
+import '../helper-text/index.js';
+import { ID_PREFIX } from '../label/index.js';
+import '../masked-input/base.js';
+import '../select/base.js';
+import '../super-select/multiple/base.js';
+import '../super-select/single/base.js';
+import '../textarea/base.js';
+import '../text-input/base.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { c, n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<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\n      (hash\n        Label=(component\n          \"hds/form/label\"\n          contextualClass=\"hds-form-key-value-inputs__field-label\"\n          controlId=this.id\n          hiddenText=this.labelHiddenText\n          isOptional=@isOptional\n          isRequired=@isRequired\n        )\n      )\n    }}\n    {{yield\n      (hash\n        HelperText=(component\n          \"hds/form/helper-text\"\n          contextualClass=\"hds-form-key-value-inputs__field-helper-text\"\n          controlId=this.id\n          onInsert=this.appendDescriptor\n        )\n      )\n    }}\n  </div>\n  <div class=\"hds-form-key-value-inputs__field-control\">\n\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\n        (hash\n          FileInput=(component \"hds/form/file-input/base\" ariaDescribedBy=ariaDescribedBy id=this.id)\n          MaskedInput=(component\n            \"hds/form/masked-input/base\" ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid\n          )\n          Select=(component \"hds/form/select/base\" ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid)\n          SuperSelectSingle=(component\n            \"hds/form/super-select/single/base\"\n            ariaDescribedBy=ariaDescribedBy\n            ariaLabelledBy=(concat this.labelIdPrefix this.id)\n            isInvalid=@isInvalid\n            triggerId=this.id\n          )\n          SuperSelectMultiple=(component\n            \"hds/form/super-select/multiple/base\"\n            ariaDescribedBy=ariaDescribedBy\n            ariaLabelledBy=(concat this.labelIdPrefix this.id)\n            isInvalid=@isInvalid\n            triggerId=this.id\n          )\n          TextInput=(component\n            \"hds/form/text-input/base\" ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid\n          )\n          Textarea=(component \"hds/form/textarea/base\" ariaDescribedBy=ariaDescribedBy id=this.id isInvalid=@isInvalid)\n        )\n      }}\n    {{/let}}\n\n    {{yield\n      (hash\n        Error=(component\n          \"hds/form/error\"\n          contextualClass=\"hds-form-key-value-inputs__field-error\"\n          controlId=this.id\n          onInsert=this.appendDescriptor\n          onRemove=this.removeDescriptor\n        )\n      )\n    }}\n  </div>\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsFormKeyValueInputsField = c(class HdsFormKeyValueInputsField extends Component {
+  _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 `row ${this.args.rowIndex + 1}`;
+  }
+  get labelIdPrefix() {
+    return ID_PREFIX;
+  }
+  appendDescriptor(element) {
+    registerAriaDescriptionElement(this, element);
+  }
+  static {
+    n(this.prototype, "appendDescriptor", [action]);
+  }
+  removeDescriptor(element) {
+    unregisterAriaDescriptionElement(this, element);
+  }
+  static {
+    n(this.prototype, "removeDescriptor", [action]);
+  }
+}, [ariaDescribedBy]);
+setComponentTemplate(TEMPLATE, HdsFormKeyValueInputsField);
+
+export { HdsFormKeyValueInputsField as default };
+//# sourceMappingURL=field.js.map

package/dist/components/hds/form/key-value-inputs/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../../../../src/components/hds/form/key-value-inputs/field.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport type { WithBoundArgs } from '@glint/template';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  ariaDescribedBy,\n  registerAriaDescriptionElement,\n  unregisterAriaDescriptionElement,\n} from '../../../../utils/hds-aria-described-by.ts';\nimport { getElementId } from '../../../../utils/hds-get-element-id.ts';\nimport HdsFormErrorComponent from '../error/index.ts';\nimport HdsFormFileInputBaseComponent from '../file-input/base.ts';\nimport HdsFormHelperTextComponent from '../helper-text/index.ts';\nimport HdsFormLabelComponent, {\n  ID_PREFIX as LABEL_ID_PREFIX,\n} from '../label/index.ts';\nimport HdsFormMaskedInputBaseComponent from '../masked-input/base.ts';\nimport HdsFormSelectBaseComponent from '../select/base.ts';\nimport HdsFormSuperSelectMultipleBaseComponent from '../super-select/multiple/base.ts';\nimport HdsFormSuperSelectSingleBaseComponent from '../super-select/single/base.ts';\nimport HdsFormTextareaBaseComponent from '../textarea/base.ts';\nimport HdsFormTextInputBaseComponent from '../text-input/base.ts';\n\nimport type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';\n\nexport interface HdsFormKeyValueInputsFieldSignature {\n  Args: {\n    extraAriaDescribedBy?: string;\n    id?: string;\n    isInvalid?: boolean;\n    isOptional?: boolean;\n    isRequired?: boolean;\n    onInsert?: () => void;\n    onRemove?: () => void;\n    rowIndex: number;\n    width?: string;\n  };\n  Blocks: {\n    default?: [\n      {\n        Label?: WithBoundArgs<\n          typeof HdsFormLabelComponent,\n          | 'contextualClass'\n          | 'controlId'\n          | 'hiddenText'\n          | 'isOptional'\n          | 'isRequired'\n        >;\n        HelperText?: WithBoundArgs<\n          typeof HdsFormHelperTextComponent,\n          'contextualClass' | 'controlId' | 'onInsert'\n        >;\n        FileInput?: WithBoundArgs<\n          typeof HdsFormFileInputBaseComponent,\n          'ariaDescribedBy' | 'id'\n        >;\n        MaskedInput?: WithBoundArgs<\n          typeof HdsFormMaskedInputBaseComponent,\n          'ariaDescribedBy' | 'id' | 'isInvalid'\n        >;\n        Select?: WithBoundArgs<\n          typeof HdsFormSelectBaseComponent,\n          'ariaDescribedBy' | 'id' | 'isInvalid'\n        >;\n        SuperSelectSingle?: WithBoundArgs<\n          typeof HdsFormSuperSelectSingleBaseComponent,\n          'ariaDescribedBy' | 'ariaLabelledBy' | 'isInvalid' | 'triggerId'\n        >;\n        SuperSelectMultiple?: WithBoundArgs<\n          typeof HdsFormSuperSelectMultipleBaseComponent,\n          'ariaDescribedBy' | 'ariaLabelledBy' | 'isInvalid' | 'triggerId'\n        >;\n        TextInput?: WithBoundArgs<\n          typeof HdsFormTextInputBaseComponent,\n          'ariaDescribedBy' | 'id' | 'isInvalid'\n        >;\n        Textarea?: WithBoundArgs<\n          typeof HdsFormTextareaBaseComponent,\n          'ariaDescribedBy' | 'id' | 'isInvalid'\n        >;\n        Error?: WithBoundArgs<\n          typeof HdsFormErrorComponent,\n          'contextualClass' | 'controlId' | 'onInsert' | 'onRemove'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\n// @ts-expect-error: decorator function return type 'ClassOf<AriaDescribedBy>' is not assignable to 'typeof HdsFormField'\n@ariaDescribedBy\nexport default class HdsFormKeyValueInputsField extends Component<HdsFormKeyValueInputsFieldSignature> {\n  private _onInsert = modifier(() => {\n    if (this.args.onInsert) {\n      this.args.onInsert();\n    }\n\n    return () => {\n      if (this.args.onRemove) {\n        this.args.onRemove();\n      }\n    };\n  });\n\n  get id(): string {\n    return getElementId(this);\n  }\n\n  get labelHiddenText(): string {\n    return `row ${this.args.rowIndex + 1}`;\n  }\n\n  get labelIdPrefix(): string {\n    return LABEL_ID_PREFIX;\n  }\n\n  @action\n  appendDescriptor(element: HTMLElement): void {\n    registerAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n\n  @action\n  removeDescriptor(element: HTMLElement): void {\n    unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n}\n"],"names":["HdsFormKeyValueInputsField","c","Component","_onInsert","modifier","args","onInsert","onRemove","id","getElementId","labelHiddenText","rowIndex","labelIdPrefix","LABEL_ID_PREFIX","appendDescriptor","element","registerAriaDescriptionElement","n","prototype","action","removeDescriptor","unregisterAriaDescriptionElement","ariaDescribedBy","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;;AAwBkE,MAuE7CA,0BAA0B,GAAAC,CAAA,OAA1BD,0BAA0B,SAASE,SAAS,CAAsC;EAC7FC,SAAS,GAAGC,QAAQ,CAAC,MAAM;AACjC,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AACtB,MAAA,IAAI,CAACD,IAAI,CAACC,QAAQ,EAAE;AACtB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,IAAI,CAACD,IAAI,CAACE,QAAQ,EAAE;AACtB,QAAA,IAAI,CAACF,IAAI,CAACE,QAAQ,EAAE;AACtB;KACD;AACH,GAAC,CAAC;EAEF,IAAIC,EAAEA,GAAW;IACf,OAAOC,YAAY,CAAC,IAAI,CAAC;AAC3B;EAEA,IAAIC,eAAeA,GAAW;IAC5B,OAAO,CAAA,IAAA,EAAO,IAAI,CAACL,IAAI,CAACM,QAAQ,GAAG,CAAC,CAAE,CAAA;AACxC;EAEA,IAAIC,aAAaA,GAAW;AAC1B,IAAA,OAAOC,SAAe;AACxB;EAGAC,gBAAgBA,CAACC,OAAoB,EAAQ;AAC3CC,IAAAA,8BAA8B,CAAC,IAAI,EAA8BD,OAAO,CAAC;AAC3E;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CAHAC,MAAM,CAAA,CAAA;AAAA;EAMPC,gBAAgBA,CAACL,OAAoB,EAAQ;AAC3CM,IAAAA,gCAAgC,CAAC,IAAI,EAA8BN,OAAO,CAAC;AAC7E;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CAHAC,MAAM,CAAA,CAAA;AAAA;AAIT,CAAC,GAnCAG,eAAe,CAAA;AAC+BC,oBAAA,CAAAC,QAAA,EAA1BxB,0BAA0B,CAAA;;;;"}

package/dist/components/hds/form/key-value-inputs/generic.js

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("<div class=\"hds-form-key-value-inputs__generic-container\" {{this._onInsert}} ...attributes>\n  {{yield}}\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFormKeyValueInputsGeneric extends Component {
+  _onInsert = modifier(() => {
+    if (this.args.onInsert) {
+      this.args.onInsert();
+    }
+    return () => {
+      if (this.args.onRemove) {
+        this.args.onRemove();
+      }
+    };
+  });
+}
+setComponentTemplate(TEMPLATE, HdsFormKeyValueInputsGeneric);
+
+export { HdsFormKeyValueInputsGeneric as default };
+//# sourceMappingURL=generic.js.map

package/dist/components/hds/form/key-value-inputs/generic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generic.js","sources":["../../../../../src/components/hds/form/key-value-inputs/generic.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { modifier } from 'ember-modifier';\n\nexport interface HdsFormKeyValueInputsGenericSignature {\n  Args: {\n    onInsert?: () => void;\n    onRemove?: () => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFormKeyValueInputsGeneric extends Component<HdsFormKeyValueInputsGenericSignature> {\n  private _onInsert = modifier(() => {\n    if (this.args.onInsert) {\n      this.args.onInsert();\n    }\n\n    return () => {\n      if (this.args.onRemove) {\n        this.args.onRemove();\n      }\n    };\n  });\n}\n"],"names":["HdsFormKeyValueInputsGeneric","Component","_onInsert","modifier","args","onInsert","onRemove","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;;AAgBe,MAAMA,4BAA4B,SAASC,SAAS,CAAwC;EACjGC,SAAS,GAAGC,QAAQ,CAAC,MAAM;AACjC,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AACtB,MAAA,IAAI,CAACD,IAAI,CAACC,QAAQ,EAAE;AACtB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,IAAI,CAACD,IAAI,CAACE,QAAQ,EAAE;AACtB,QAAA,IAAI,CAACF,IAAI,CAACE,QAAQ,EAAE;AACtB;KACD;AACH,GAAC,CAAC;AACJ;AAACC,oBAAA,CAAAC,QAAA,EAZoBR,4BAA4B,CAAA;;;;"}

package/dist/components/hds/form/key-value-inputs/index.js

@@ -0,0 +1,124 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import { modifier } from 'ember-modifier';
+import { registerAriaDescriptionElement, unregisterAriaDescriptionElement, ariaDescribedBy } from '../../../../utils/hds-aria-described-by.js';
+import { guidFor } from '@ember/object/internals';
+import '../../alert/index.js';
+import '../error/index.js';
+import '../helper-text/index.js';
+import './delete-row-button.js';
+import './field.js';
+import './generic.js';
+import '../legend/index.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { c, g, i, n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<fieldset\n  class=\"hds-form-key-value-inputs\"\n  ...attributes\n  {{style --hds-key-value-inputs-columns=this._gridTemplateColumns}}\n  {{! need to set aria-labelledby because the legend is not a direct descendant of the fieldset }}\n  aria-labelledby=\"legend-{{this.glueId}}\"\n  {{! @glint-expect-error }}\n  aria-describedby={{this.ariaDescribedBy}}\n  tabindex=\"-1\"\n  {{this._setUpKeyValueInputs}}\n>\n  <div class=\"hds-form-key-value-inputs__header\">\n    {{yield\n      (hash\n        Legend=(component\n          \"hds/form/legend\"\n          contextualClass=\"hds-form-key-value-inputs__legend\"\n          id=(concat \"legend-\" this.glueId)\n          isOptional=@isOptional\n          isRequired=@isRequired\n        )\n        HelperText=(component\n          \"hds/form/helper-text\"\n          contextualClass=\"hds-form-key-value-inputs__helper-text\"\n          controlId=this.glueId\n          onInsert=this.appendDescriptor\n        )\n        Generic=(component \"hds/yield\")\n      )\n      to=\"header\"\n    }}\n  </div>\n\n  {{#if (eq @data.length 0)}}\n    <div class=\"hds-form-key-value-inputs__row hds-form-key-value-inputs__row--first\">\n      {{yield\n        (hash\n          Field=(component\n            \"hds/form/key-value-inputs/field\" onInsert=this._setUpColumn onRemove=this._removeColumn rowIndex=0\n          )\n          Generic=(component \"hds/form/key-value-inputs/generic\" onInsert=this._setUpColumn onRemove=this._removeColumn)\n          rowData=undefined\n          rowIndex=0\n        )\n        to=\"row\"\n      }}\n\n      {{! leaving as a separate yield to keep the delete row button at the end of the row }}\n      {{yield\n        (hash\n          DeleteRowButton=(component\n            \"hds/form/key-value-inputs/delete-row-button\"\n            returnFocusTo=this._element\n            onInsert=this._setUpColumn\n            onRemove=this._removeColumn\n            rowData=undefined\n            rowIndex=0\n          )\n        )\n        to=\"row\"\n      }}\n    </div>\n  {{/if}}\n\n  {{#each @data as |item index|}}\n    <div class=\"hds-form-key-value-inputs__row {{if (eq index 0) \'hds-form-key-value-inputs__row--first\'}}\">\n      {{yield\n        (hash\n          Field=(component\n            \"hds/form/key-value-inputs/field\" onInsert=this._setUpColumn onRemove=this._removeColumn rowIndex=index\n          )\n          Generic=(component \"hds/form/key-value-inputs/generic\" onInsert=this._setUpColumn onRemove=this._removeColumn)\n          rowData=item\n          rowIndex=index\n        )\n        to=\"row\"\n      }}\n\n      {{! leaving as a separate yield to keep the delete row button at the end of the row }}\n      {{yield\n        (hash\n          DeleteRowButton=(component\n            \"hds/form/key-value-inputs/delete-row-button\"\n            onInsert=this._setUpColumn\n            onRemove=this._removeColumn\n            returnFocusTo=this._element\n            rowData=item\n            rowIndex=index\n          )\n          rowData=item\n          rowIndex=index\n        )\n        to=\"row\"\n      }}\n    </div>\n  {{/each}}\n\n  <div class=\"hds-form-key-value-inputs__footer\">\n    {{yield\n      (hash\n        Alert=(component \"hds/alert\" color=\"neutral\" type=\"compact\")\n        AddRowButton=(component \"hds/form/key-value-inputs/add-row-button\")\n        Error=(component\n          \"hds/form/error\"\n          contextualClass=\"hds-form-key-value-inputs__error\"\n          controlId=this.glueId\n          onInsert=this.appendDescriptor\n          onRemove=this.removeDescriptor\n        )\n      )\n      to=\"footer\"\n    }}\n  </div>\n</fieldset>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const KEY_VALUE_INPUTS_FIELD_SELECTOR = '.hds-form-key-value-inputs__field';
+const KEY_VALUE_INPUTS_GENERIC_SELECTOR = '.hds-form-key-value-inputs__generic-container';
+const KEY_VALUE_INPUTS_FIRST_ROW_SELECTOR = '.hds-form-key-value-inputs__row--first';
+const KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR = '.hds-form-key-value-inputs__delete-row-button-container';
+const HdsFormKeyValueInputs = c(class HdsFormKeyValueInputs extends Component {
+  _element;
+  static {
+    g(this.prototype, "_gridTemplateColumns", [tracked], function () {
+      return '';
+    });
+  }
+  #_gridTemplateColumns = (i(this, "_gridTemplateColumns"), void 0);
+  // this is not a specific DOM id, but a value that is used to "glue" together
+  // different fieldsset-related elements (legend, helper text, error) with the fieldset itself
+  get glueId() {
+    return guidFor(this);
+  }
+  _setUpColumn() {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      this._updateColumns();
+    });
+  }
+  static {
+    n(this.prototype, "_setUpColumn", [action]);
+  }
+  _removeColumn() {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      this._updateColumns();
+    });
+  }
+  static {
+    n(this.prototype, "_removeColumn", [action]);
+  }
+  appendDescriptor(element) {
+    registerAriaDescriptionElement(this, element);
+  }
+  static {
+    n(this.prototype, "appendDescriptor", [action]);
+  }
+  removeDescriptor(element) {
+    unregisterAriaDescriptionElement(this, element);
+  }
+  static {
+    n(this.prototype, "removeDescriptor", [action]);
+  }
+  _setUpKeyValueInputs = modifier(element => {
+    this._element = element;
+  });
+
+  // Update the column array based on how they are ordered in the DOM
+  _updateColumns = () => {
+    const columns = this._element.querySelector(KEY_VALUE_INPUTS_FIRST_ROW_SELECTOR)?.querySelectorAll(`${KEY_VALUE_INPUTS_FIELD_SELECTOR}, ${KEY_VALUE_INPUTS_GENERIC_SELECTOR}, ${KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR}`);
+    let updatedGridTemplateColumns = '';
+    columns?.forEach((column, index) => {
+      const columnElement = column;
+
+      // FIELD
+
+      if (
+      // do substring to remove the leading dot from the class selector
+      column.classList.contains(KEY_VALUE_INPUTS_FIELD_SELECTOR.substring(1))) {
+        if (columnElement.dataset['width']) {
+          updatedGridTemplateColumns += `${columnElement.dataset['width']} `;
+        } else {
+          updatedGridTemplateColumns += '1fr ';
+        }
+      }
+
+      // GENERIC
+
+      if (
+      // do substring to remove the leading dot from the class selector
+      column.classList.contains(KEY_VALUE_INPUTS_GENERIC_SELECTOR.substring(1))) {
+        updatedGridTemplateColumns += 'auto ';
+
+        // Set grid-column so generic content appears in the correct column when grid-row is set; otherwise, browsers default it to the first column.
+        columnElement.style.setProperty('--hds-key-value-inputs-column-index', `${index + 1}`);
+      }
+
+      // DELETE BUTTON
+
+      if (column.classList.contains(KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR.substring(1))) {
+        // Set grid-column so generic content appears in the correct column when grid-row is set; otherwise, browsers default it to the first column.
+        columnElement.style.setProperty('--hds-key-value-inputs-column-index', `${index + 1}`);
+      }
+    });
+
+    // we always set aside the space for the delete button (it's always the last element)
+    // even when it's not rendered, to avoid layout shifts when moving to/from an empty state
+    updatedGridTemplateColumns += '2.25rem ';
+    this._gridTemplateColumns = updatedGridTemplateColumns;
+  };
+}, [ariaDescribedBy]);
+setComponentTemplate(TEMPLATE, HdsFormKeyValueInputs);
+
+export { HdsFormKeyValueInputs as default };
+//# sourceMappingURL=index.js.map

package/dist/components/hds/form/key-value-inputs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/key-value-inputs/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport type { ComponentLike, WithBoundArgs } from '@glint/template';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  ariaDescribedBy,\n  registerAriaDescriptionElement,\n  unregisterAriaDescriptionElement,\n} from '../../../../utils/hds-aria-described-by.ts';\nimport { guidFor } from '@ember/object/internals';\n\nimport HdsAlertComponent from '../../alert/index.ts';\nimport HdsFormErrorComponent from '../error/index.ts';\nimport HdsFormHelperTextComponent from '../helper-text/index.ts';\nimport HdsFormKeyValueInputsDeleteRowButtonComponent from './delete-row-button.ts';\nimport HdsFormKeyValueInputsFieldComponent from './field.ts';\nimport HdsFormKeyValueInputsGenericComponent from './generic.ts';\nimport HdsFormLegendComponent from '../legend/index.ts';\n\nimport type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';\nimport type { HdsFormKeyValueInputsAddRowButtonSignature } from './add-row-button.ts';\nimport type { HdsYieldSignature } from '../../yield/index.ts';\n\nconst KEY_VALUE_INPUTS_FIELD_SELECTOR = '.hds-form-key-value-inputs__field';\nconst KEY_VALUE_INPUTS_GENERIC_SELECTOR =\n  '.hds-form-key-value-inputs__generic-container';\nconst KEY_VALUE_INPUTS_FIRST_ROW_SELECTOR =\n  '.hds-form-key-value-inputs__row--first';\nconst KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR =\n  '.hds-form-key-value-inputs__delete-row-button-container';\n\nexport interface HdsFormKeyValueInputsSignature {\n  Args: {\n    data: Array<unknown>;\n    extraAriaDescribedBy?: string;\n    isOptional?: boolean;\n    isRequired?: boolean;\n  };\n  Blocks: {\n    header?: [\n      {\n        Legend?: WithBoundArgs<\n          typeof HdsFormLegendComponent,\n          'contextualClass' | 'id' | 'isOptional' | 'isRequired'\n        >;\n        HelperText?: WithBoundArgs<\n          typeof HdsFormHelperTextComponent,\n          'contextualClass' | 'controlId' | 'onInsert'\n        >;\n        Generic?: ComponentLike<HdsYieldSignature>;\n      },\n    ];\n    row: [\n      {\n        Field?: WithBoundArgs<\n          typeof HdsFormKeyValueInputsFieldComponent,\n          'onInsert' | 'onRemove' | 'rowIndex'\n        >;\n        Generic?: WithBoundArgs<\n          typeof HdsFormKeyValueInputsGenericComponent,\n          'onInsert' | 'onRemove'\n        >;\n        DeleteRowButton?: WithBoundArgs<\n          typeof HdsFormKeyValueInputsDeleteRowButtonComponent,\n          'onInsert' | 'onRemove' | 'returnFocusTo' | 'rowData' | 'rowIndex'\n        >;\n        rowData?: unknown;\n        rowIndex?: number;\n      },\n    ];\n    footer?: [\n      {\n        AddRowButton?: ComponentLike<HdsFormKeyValueInputsAddRowButtonSignature>;\n        Alert?: WithBoundArgs<typeof HdsAlertComponent, 'color' | 'type'>;\n        Error?: WithBoundArgs<\n          typeof HdsFormErrorComponent,\n          'contextualClass' | 'controlId' | 'onInsert' | 'onRemove'\n        >;\n      },\n    ];\n  };\n  Element: HTMLFieldSetElement;\n}\n\n// @ts-expect-error: decorator function return type 'ClassOf<AriaDescribedBy>' is not assignable to 'typeof HdsFormField'\n@ariaDescribedBy\nexport default class HdsFormKeyValueInputs extends Component<HdsFormKeyValueInputsSignature> {\n  private _element!: HTMLFieldSetElement;\n  @tracked _gridTemplateColumns = '';\n\n  // this is not a specific DOM id, but a value that is used to \"glue\" together\n  // different fieldsset-related elements (legend, helper text, error) with the fieldset itself\n  get glueId(): string {\n    return guidFor(this);\n  }\n\n  @action\n  _setUpColumn(): void {\n    // eslint-disable-next-line ember/no-runloop\n    schedule('afterRender', (): void => {\n      this._updateColumns();\n    });\n  }\n\n  @action\n  _removeColumn(): void {\n    // eslint-disable-next-line ember/no-runloop\n    schedule('afterRender', (): void => {\n      this._updateColumns();\n    });\n  }\n\n  @action\n  appendDescriptor(element: HTMLElement): void {\n    registerAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n\n  @action\n  removeDescriptor(element: HTMLElement): void {\n    unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n\n  private _setUpKeyValueInputs = modifier((element: HTMLFieldSetElement) => {\n    this._element = element;\n  });\n\n  // Update the column array based on how they are ordered in the DOM\n  private _updateColumns = () => {\n    const columns = this._element\n      .querySelector(KEY_VALUE_INPUTS_FIRST_ROW_SELECTOR)\n      ?.querySelectorAll(\n        `${KEY_VALUE_INPUTS_FIELD_SELECTOR}, ${KEY_VALUE_INPUTS_GENERIC_SELECTOR}, ${KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR}`\n      );\n\n    let updatedGridTemplateColumns = '';\n\n    columns?.forEach((column, index) => {\n      const columnElement = column as HTMLElement;\n\n      // FIELD\n\n      if (\n        // do substring to remove the leading dot from the class selector\n        column.classList.contains(KEY_VALUE_INPUTS_FIELD_SELECTOR.substring(1))\n      ) {\n        if (columnElement.dataset['width']) {\n          updatedGridTemplateColumns += `${columnElement.dataset['width']} `;\n        } else {\n          updatedGridTemplateColumns += '1fr ';\n        }\n      }\n\n      // GENERIC\n\n      if (\n        // do substring to remove the leading dot from the class selector\n        column.classList.contains(\n          KEY_VALUE_INPUTS_GENERIC_SELECTOR.substring(1)\n        )\n      ) {\n        updatedGridTemplateColumns += 'auto ';\n\n        // Set grid-column so generic content appears in the correct column when grid-row is set; otherwise, browsers default it to the first column.\n        columnElement.style.setProperty(\n          '--hds-key-value-inputs-column-index',\n          `${index + 1}`\n        );\n      }\n\n      // DELETE BUTTON\n\n      if (\n        column.classList.contains(\n          KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR.substring(1)\n        )\n      ) {\n        // Set grid-column so generic content appears in the correct column when grid-row is set; otherwise, browsers default it to the first column.\n        columnElement.style.setProperty(\n          '--hds-key-value-inputs-column-index',\n          `${index + 1}`\n        );\n      }\n    });\n\n    // we always set aside the space for the delete button (it's always the last element)\n    // even when it's not rendered, to avoid layout shifts when moving to/from an empty state\n    updatedGridTemplateColumns += '2.25rem ';\n\n    this._gridTemplateColumns = updatedGridTemplateColumns;\n  };\n}\n"],"names":["KEY_VALUE_INPUTS_FIELD_SELECTOR","KEY_VALUE_INPUTS_GENERIC_SELECTOR","KEY_VALUE_INPUTS_FIRST_ROW_SELECTOR","KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR","HdsFormKeyValueInputs","c","Component","_element","g","prototype","tracked","i","void 0","glueId","guidFor","_setUpColumn","schedule","_updateColumns","n","action","_removeColumn","appendDescriptor","element","registerAriaDescriptionElement","removeDescriptor","unregisterAriaDescriptionElement","_setUpKeyValueInputs","modifier","columns","querySelector","querySelectorAll","updatedGridTemplateColumns","forEach","column","index","columnElement","classList","contains","substring","dataset","style","setProperty","_gridTemplateColumns","ariaDescribedBy","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/form/label/index.js

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<label class={{this.classNames}} for=\"{{@controlId}}\" id={{this.id}} ...attributes>\n  {{yield}}\n  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />\n</label>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<label class={{this.classNames}} for=\"{{@controlId}}\" id={{this.id}} ...attributes>\n  {{yield}}\n  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />\n  {{#if @hiddenText}}\n    <span class=\"sr-only\">\n      {{@hiddenText}}\n    </span>\n  {{/if}}\n</label>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

package/dist/components/hds/form/label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/label/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nexport const ID_PREFIX = 'label-';\n\nimport type { HdsFormIndicatorSignature } from '../indicator';\n\nexport interface HdsFormLabelSignature {\n  Args: {\n    contextualClass?: string;\n    controlId?: string;\n    isOptional?: HdsFormIndicatorSignature['Args']['isOptional'];\n    isRequired?: HdsFormIndicatorSignature['Args']['isRequired'];\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLLabelElement;\n}\n\nexport default class HdsFormLabel extends Component<HdsFormLabelSignature> {\n  /**\n   * Determines the unique ID to assign to the element\n   * @method id\n   * @return {(string|null)} The \"id\" attribute to apply to the element or null, if no controlId is provided\n   */\n  get id(): string | null {\n    const { controlId } = this.args;\n    if (controlId) {\n      return `${ID_PREFIX}${controlId}`;\n    }\n    return null;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-form-label'];\n\n    // add typographic classes\n    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');\n\n    // add a class based on the @contextualClass argument\n    // notice: this will *not* be documented for public use\n    // the reason for this is that the contextual component declarations don't pass attributes to the component\n    if (this.args.contextualClass) {\n      classes.push(this.args.contextualClass);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ID_PREFIX","HdsFormLabel","Component","id","controlId","args","classNames","classes","push","contextualClass","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;;AAGO,MAAMA,SAAS,GAAG;AAiBV,MAAMC,YAAY,SAASC,SAAS,CAAwB;AACzE;AACF;AACA;AACA;AACA;EACE,IAAIC,EAAEA,GAAkB;IACtB,MAAM;AAAEC,MAAAA;KAAW,GAAG,IAAI,CAACC,IAAI;AAC/B,IAAA,IAAID,SAAS,EAAE;AACb,MAAA,OAAO,CAAGJ,EAAAA,SAAS,CAAGI,EAAAA,SAAS,CAAE,CAAA;AACnC;AACA,IAAA,OAAO,IAAI;AACb;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIE,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,gBAAgB,CAAC;;AAElC;AACAA,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAE,0BAA0B,CAAC;;AAEnE;AACA;AACA;AACA,IAAA,IAAI,IAAI,CAACH,IAAI,CAACI,eAAe,EAAE;MAC7BF,OAAO,CAACC,IAAI,CAAC,IAAI,CAACH,IAAI,CAACI,eAAe,CAAC;AACzC;AAEA,IAAA,OAAOF,OAAO,CAACG,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACC,oBAAA,CAAAC,QAAA,EAlCoBX,YAAY,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/label/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nexport const ID_PREFIX = 'label-';\n\nimport type { HdsFormIndicatorSignature } from '../indicator';\n\nexport interface HdsFormLabelSignature {\n  Args: {\n    contextualClass?: string;\n    controlId?: string;\n    isOptional?: HdsFormIndicatorSignature['Args']['isOptional'];\n    isRequired?: HdsFormIndicatorSignature['Args']['isRequired'];\n    hiddenText?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLLabelElement;\n}\n\nexport default class HdsFormLabel extends Component<HdsFormLabelSignature> {\n  /**\n   * Determines the unique ID to assign to the element\n   * @method id\n   * @return {(string|null)} The \"id\" attribute to apply to the element or null, if no controlId is provided\n   */\n  get id(): string | null {\n    const { controlId } = this.args;\n    if (controlId) {\n      return `${ID_PREFIX}${controlId}`;\n    }\n    return null;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-form-label'];\n\n    // add typographic classes\n    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');\n\n    // add a class based on the @contextualClass argument\n    // notice: this will *not* be documented for public use\n    // the reason for this is that the contextual component declarations don't pass attributes to the component\n    if (this.args.contextualClass) {\n      classes.push(this.args.contextualClass);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ID_PREFIX","HdsFormLabel","Component","id","controlId","args","classNames","classes","push","contextualClass","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;;AAGO,MAAMA,SAAS,GAAG;AAkBV,MAAMC,YAAY,SAASC,SAAS,CAAwB;AACzE;AACF;AACA;AACA;AACA;EACE,IAAIC,EAAEA,GAAkB;IACtB,MAAM;AAAEC,MAAAA;KAAW,GAAG,IAAI,CAACC,IAAI;AAC/B,IAAA,IAAID,SAAS,EAAE;AACb,MAAA,OAAO,CAAGJ,EAAAA,SAAS,CAAGI,EAAAA,SAAS,CAAE,CAAA;AACnC;AACA,IAAA,OAAO,IAAI;AACb;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIE,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,gBAAgB,CAAC;;AAElC;AACAA,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAE,0BAA0B,CAAC;;AAEnE;AACA;AACA;AACA,IAAA,IAAI,IAAI,CAACH,IAAI,CAACI,eAAe,EAAE;MAC7BF,OAAO,CAACC,IAAI,CAAC,IAAI,CAACH,IAAI,CAACI,eAAe,CAAC;AACzC;AAEA,IAAA,OAAOF,OAAO,CAACG,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACC,oBAAA,CAAAC,QAAA,EAlCoBX,YAAY,CAAA;;;;"}

package/dist/components/hds/form/legend/index.js

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<legend class={{this.classNames}} ...attributes>\n  {{yield}}\n  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />\n</legend>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<legend class={{this.classNames}} id={{@id}} ...attributes>\n  {{yield}}\n  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />\n</legend>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

package/dist/components/hds/form/legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/legend/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\n\nimport type { HdsFormIndicatorSignature } from '../indicator';\n\nexport interface HdsFormLegendSignature {\n  Args: {\n    contextualClass?: string;\n    isOptional?: HdsFormIndicatorSignature['Args']['isOptional'];\n    isRequired?: HdsFormIndicatorSignature['Args']['isRequired'];\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLLegendElement;\n}\n\nexport default class HdsFormLegend extends Component<HdsFormLegendSignature> {\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-form-legend'];\n\n    // add typographic classes\n    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');\n\n    // add a class based on the @contextualClass argument\n    // notice: this will *not* be documented for public use\n    // the reason for this is that the contextual component declarations don't pass attributes to the component\n    if (this.args.contextualClass) {\n      classes.push(this.args.contextualClass);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsFormLegend","Component","classNames","classes","push","args","contextualClass","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;;AAkBe,MAAMA,aAAa,SAASC,SAAS,CAAyB;AAC3E;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,iBAAiB,CAAC;;AAEnC;AACAA,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAE,0BAA0B,CAAC;;AAEnE;AACA;AACA;AACA,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,eAAe,EAAE;MAC7BH,OAAO,CAACC,IAAI,CAAC,IAAI,CAACC,IAAI,CAACC,eAAe,CAAC;AACzC;AAEA,IAAA,OAAOH,OAAO,CAACI,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACC,oBAAA,CAAAC,QAAA,EArBoBT,aAAa,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/legend/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\n\nimport type { HdsFormIndicatorSignature } from '../indicator/index.ts';\n\nexport interface HdsFormLegendSignature {\n  Args: {\n    contextualClass?: string;\n    isOptional?: HdsFormIndicatorSignature['Args']['isOptional'];\n    isRequired?: HdsFormIndicatorSignature['Args']['isRequired'];\n    id?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLLegendElement;\n}\n\nexport default class HdsFormLegend extends Component<HdsFormLegendSignature> {\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-form-legend'];\n\n    // add typographic classes\n    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');\n\n    // add a class based on the @contextualClass argument\n    // notice: this will *not* be documented for public use\n    // the reason for this is that the contextual component declarations don't pass attributes to the component\n    if (this.args.contextualClass) {\n      classes.push(this.args.contextualClass);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsFormLegend","Component","classNames","classes","push","args","contextualClass","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;;AAmBe,MAAMA,aAAa,SAASC,SAAS,CAAyB;AAC3E;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,iBAAiB,CAAC;;AAEnC;AACAA,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAE,0BAA0B,CAAC;;AAEnE;AACA;AACA;AACA,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,eAAe,EAAE;MAC7BH,OAAO,CAACC,IAAI,CAAC,IAAI,CAACC,IAAI,CAACC,eAAe,CAAC;AACzC;AAEA,IAAA,OAAOH,OAAO,CAACI,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACC,oBAAA,CAAAC,QAAA,EArBoBT,aAAa,CAAA;;;;"}

package/dist/components/hds/form/masked-input/base.js

@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class={{this.classNames}} {{style width=@width}} {{this._manageState}}>\n  {{#if @isMultiline}}\n    <Hds::Form::Textarea::Base\n      class=\"hds-form-masked-input__control\"\n      @value={{@value}}\n      @isInvalid={{@isInvalid}}\n      @height={{@height}}\n      id={{this.id}}\n      ...attributes\n    />\n  {{else}}\n    <Hds::Form::TextInput::Base\n      class=\"hds-form-masked-input__control\"\n      @value={{@value}}\n      @isInvalid={{@isInvalid}}\n      id={{this.id}}\n      ...attributes\n    />\n  {{/if}}\n  <Hds::Form::VisibilityToggle\n    @isVisible={{this.isContentMasked}}\n    @ariaLabel={{this.visibilityToggleAriaLabel}}\n    @ariaMessageText={{this.visibilityToggleAriaMessageText}}\n    aria-controls={{this.id}}\n    class=\"hds-form-masked-input__toggle-button\"\n    {{on \"click\" this.onClickToggleMasking}}\n  />\n  {{#if @hasCopyButton}}\n    <Hds::Copy::Button\n      class=\"hds-form-masked-input__copy-button\"\n      @text={{this.copyButtonText}}\n      @isIconOnly={{true}}\n      @targetToCopy=\"#{{this.id}}\"\n    />\n  {{/if}}\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class={{this.classNames}} {{style width=@width}} {{this._manageState}}>\n  {{#if @isMultiline}}\n    <Hds::Form::Textarea::Base\n      class=\"hds-form-masked-input__control\"\n      @value={{@value}}\n      @isInvalid={{@isInvalid}}\n      @height={{@height}}\n      id={{this.id}}\n      aria-describedby={{@ariaDescribedBy}}\n      ...attributes\n    />\n  {{else}}\n    <Hds::Form::TextInput::Base\n      class=\"hds-form-masked-input__control\"\n      @value={{@value}}\n      @isInvalid={{@isInvalid}}\n      id={{this.id}}\n      aria-describedby={{@ariaDescribedBy}}\n      ...attributes\n    />\n  {{/if}}\n  <Hds::Form::VisibilityToggle\n    @isVisible={{this.isContentMasked}}\n    @ariaLabel={{this.visibilityToggleAriaLabel}}\n    @ariaMessageText={{this.visibilityToggleAriaMessageText}}\n    aria-controls={{this.id}}\n    class=\"hds-form-masked-input__toggle-button\"\n    {{on \"click\" this.onClickToggleMasking}}\n  />\n  {{#if @hasCopyButton}}\n    <Hds::Copy::Button\n      class=\"hds-form-masked-input__copy-button\"\n      @text={{this.copyButtonText}}\n      @isIconOnly={{true}}\n      @targetToCopy=\"#{{this.id}}\"\n    />\n  {{/if}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

package/dist/components/hds/form/masked-input/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/hds/form/masked-input/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport { modifier } from 'ember-modifier';\n\nimport { getElementId } from '../../../../utils/hds-get-element-id.ts';\nimport type { HdsCopyButtonSignature } from '../../copy/button/index.ts';\nimport type { HdsFormVisibilityToggleSignature } from '../visibility-toggle/index.ts';\n\nexport interface HdsFormMaskedInputBaseSignature {\n  Args: {\n    copyButtonText?: HdsCopyButtonSignature['Args']['text'];\n    hasCopyButton?: boolean;\n    isContentMasked?: boolean;\n    isInvalid?: boolean;\n    isMultiline?: boolean;\n    id?: string;\n    value?: string;\n    visibilityToggleAriaLabel?: HdsFormVisibilityToggleSignature['Args']['ariaLabel'];\n    visibilityToggleAriaMessageText?: HdsFormVisibilityToggleSignature['Args']['ariaMessageText'];\n    width?: string;\n    height?: string;\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsFormMaskedInputBase extends Component<HdsFormMaskedInputBaseSignature> {\n  @tracked _isContentMasked = true;\n  @tracked private _isControlled = this.args.isContentMasked !== undefined;\n\n  get isContentMasked(): boolean {\n    if (this._isControlled) {\n      // if the state is controlled from outside, the argument overrides the internal state\n      return this.args.isContentMasked ?? this._isContentMasked;\n    } else {\n      // if the state changes internally, the internal state overrides the argument\n      return this._isContentMasked;\n    }\n  }\n\n  set isContentMasked(value) {\n    this._isContentMasked = value || false;\n  }\n\n  @action\n  onClickToggleMasking(): void {\n    this.isContentMasked = !this.isContentMasked;\n    this._isControlled = false;\n  }\n\n  private _manageState = modifier(() => {\n    if (this.args.isContentMasked !== undefined) {\n      this.isContentMasked = this.args.isContentMasked;\n    }\n    this._isControlled = true;\n\n    return () => {};\n  });\n\n  get id(): string {\n    return getElementId(this);\n  }\n\n  get visibilityToggleAriaLabel(): string {\n    if (this.args.visibilityToggleAriaLabel) {\n      return this.args.visibilityToggleAriaLabel;\n    } else if (this.isContentMasked) {\n      return 'Show masked content';\n    } else {\n      return 'Hide masked content';\n    }\n  }\n\n  get visibilityToggleAriaMessageText(): string {\n    if (this.args.visibilityToggleAriaMessageText) {\n      return this.args.visibilityToggleAriaMessageText;\n    } else if (this.isContentMasked) {\n      return 'Input content is hidden';\n    } else {\n      return 'Input content is visible';\n    }\n  }\n\n  get copyButtonText(): string {\n    if (this.args.copyButtonText) {\n      return this.args.copyButtonText;\n    } else {\n      return 'Copy masked content';\n    }\n  }\n\n  get classNames(): string {\n    const classes = ['hds-form-masked-input'];\n\n    if (this.isContentMasked) {\n      classes.push(`hds-form-masked-input--is-masked`);\n    } else {\n      classes.push(`hds-form-masked-input--is-not-masked`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsFormMaskedInputBase","Component","g","prototype","tracked","i","void 0","args","isContentMasked","undefined","_isControlled","_isContentMasked","value","onClickToggleMasking","n","action","_manageState","modifier","id","getElementId","visibilityToggleAriaLabel","visibilityToggleAriaMessageText","copyButtonText","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"base.js","sources":["../../../../../src/components/hds/form/masked-input/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport { modifier } from 'ember-modifier';\n\nimport { getElementId } from '../../../../utils/hds-get-element-id.ts';\nimport type { HdsCopyButtonSignature } from '../../copy/button/index.ts';\nimport type { HdsFormVisibilityToggleSignature } from '../visibility-toggle/index.ts';\n\nexport interface HdsFormMaskedInputBaseSignature {\n  Args: {\n    copyButtonText?: HdsCopyButtonSignature['Args']['text'];\n    hasCopyButton?: boolean;\n    isContentMasked?: boolean;\n    isInvalid?: boolean;\n    isMultiline?: boolean;\n    id?: string;\n    value?: string;\n    visibilityToggleAriaLabel?: HdsFormVisibilityToggleSignature['Args']['ariaLabel'];\n    visibilityToggleAriaMessageText?: HdsFormVisibilityToggleSignature['Args']['ariaMessageText'];\n    width?: string;\n    height?: string;\n    ariaDescribedBy?: string;\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsFormMaskedInputBase extends Component<HdsFormMaskedInputBaseSignature> {\n  @tracked _isContentMasked = true;\n  @tracked private _isControlled = this.args.isContentMasked !== undefined;\n\n  get isContentMasked(): boolean {\n    if (this._isControlled) {\n      // if the state is controlled from outside, the argument overrides the internal state\n      return this.args.isContentMasked ?? this._isContentMasked;\n    } else {\n      // if the state changes internally, the internal state overrides the argument\n      return this._isContentMasked;\n    }\n  }\n\n  set isContentMasked(value) {\n    this._isContentMasked = value || false;\n  }\n\n  @action\n  onClickToggleMasking(): void {\n    this.isContentMasked = !this.isContentMasked;\n    this._isControlled = false;\n  }\n\n  private _manageState = modifier(() => {\n    if (this.args.isContentMasked !== undefined) {\n      this.isContentMasked = this.args.isContentMasked;\n    }\n    this._isControlled = true;\n\n    return () => {};\n  });\n\n  get id(): string {\n    return getElementId(this);\n  }\n\n  get visibilityToggleAriaLabel(): string {\n    if (this.args.visibilityToggleAriaLabel) {\n      return this.args.visibilityToggleAriaLabel;\n    } else if (this.isContentMasked) {\n      return 'Show masked content';\n    } else {\n      return 'Hide masked content';\n    }\n  }\n\n  get visibilityToggleAriaMessageText(): string {\n    if (this.args.visibilityToggleAriaMessageText) {\n      return this.args.visibilityToggleAriaMessageText;\n    } else if (this.isContentMasked) {\n      return 'Input content is hidden';\n    } else {\n      return 'Input content is visible';\n    }\n  }\n\n  get copyButtonText(): string {\n    if (this.args.copyButtonText) {\n      return this.args.copyButtonText;\n    } else {\n      return 'Copy masked content';\n    }\n  }\n\n  get classNames(): string {\n    const classes = ['hds-form-masked-input'];\n\n    if (this.isContentMasked) {\n      classes.push(`hds-form-masked-input--is-masked`);\n    } else {\n      classes.push(`hds-form-masked-input--is-not-masked`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsFormMaskedInputBase","Component","g","prototype","tracked","i","void 0","args","isContentMasked","undefined","_isControlled","_isContentMasked","value","onClickToggleMasking","n","action","_manageState","modifier","id","getElementId","visibilityToggleAriaLabel","visibilityToggleAriaMessageText","copyButtonText","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}