@hashicorp/design-system-components 4.21.0 → 4.21.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/fieldset/index.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 { getElementId } from '../../../../utils/hds-get-element-id.ts';\nimport {\n  ariaDescribedBy,\n  registerAriaDescriptionElement,\n  unregisterAriaDescriptionElement,\n} from '../../../../utils/hds-aria-described-by.ts';\nimport { HdsFormFieldsetLayoutValues } from './types.ts';\nimport HdsFormLegendComponent from '../legend/index.ts';\nimport HdsFormHelperTextComponent from '../helper-text/index.ts';\nimport HdsFormErrorComponent from '../error/index.ts';\n\nimport type { ComponentLike, WithBoundArgs } from '@glint/template';\nimport type { HdsFormFieldsetLayouts } from './types.ts';\nimport type { HdsYieldSignature } from '../../yield/index.ts';\nimport type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';\n\nexport interface HdsFormFieldsetSignature {\n  Args: {\n    extraAriaDescribedBy?: string;\n    isOptional?: boolean;\n    isRequired?: boolean;\n    layout?: HdsFormFieldsetLayouts;\n  };\n  Blocks: {\n    default: [\n      {\n        Legend?: WithBoundArgs<\n          typeof HdsFormLegendComponent,\n          'contextualClass' | 'isRequired' | 'isOptional'\n        >;\n        HelperText?: WithBoundArgs<\n          typeof HdsFormHelperTextComponent,\n          'contextualClass' | 'controlId' | 'onInsert'\n        >;\n        Control?: ComponentLike<HdsYieldSignature>;\n        Error?: WithBoundArgs<\n          typeof HdsFormErrorComponent,\n          'contextualClass' | 'controlId' | 'onInsert' | 'onRemove'\n        >;\n        id?: string;\n        ariaDescribedBy?: string;\n      },\n    ];\n  };\n  Element: HTMLElement;\n}\n\n// @ts-expect-error: decorator function return type 'ClassOf<AriaDescribedByComponent>' is not assignable to 'typeof HdsFormFieldComponent'\n@ariaDescribedBy\nexport default class HdsFormFieldset extends Component<HdsFormFieldsetSignature> {\n  /**\n   * Sets the layout of the group\n   *\n   * @param layout\n   * @type {enum}\n   * @default 'vertical'\n   */\n  get layout(): HdsFormFieldsetLayouts {\n    return this.args.layout ?? HdsFormFieldsetLayoutValues.Vertical;\n  }\n\n  /**\n   * Calculates the unique ID to assign to the fieldset\n   */\n  get id(): string {\n    return getElementId(this);\n  }\n\n  /**\n   * @param isRequired\n   * @type {boolean}\n   * @default false\n   */\n  get isRequired(): boolean {\n    return this.args.isRequired || false;\n  }\n\n  /**\n   * @param isOptional\n   * @type {boolean}\n   * @default false\n   */\n  get isOptional(): boolean {\n    return this.args.isOptional || false;\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    // we just need a class for the layout\n    const classes = ['hds-form-group'];\n\n    // add a class based on the @layout argument\n    classes.push(`hds-form-group--layout-${this.layout}`);\n\n    return classes.join(' ');\n  }\n\n  @action\n  appendDescriptor(element: HTMLElement): void {\n    registerAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n\n  @action removeDescriptor(element: HTMLElement): void {\n    unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n}\n"],"names":["HdsFormFieldset","c","Component","layout","args","HdsFormFieldsetLayoutValues","Vertical","id","getElementId","isRequired","isOptional","classNames","classes","push","join","appendDescriptor","element","registerAriaDescriptionElement","n","prototype","action","removeDescriptor","unregisterAriaDescriptionElement","ariaDescribedBy","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;;AAasD,MAwCjCA,eAAe,GAAAC,CAAA,OAAfD,eAAe,SAASE,SAAS,CAA2B;AAC/E;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,MAAMA,GAA2B;IACnC,OAAO,IAAI,CAACC,IAAI,CAACD,MAAM,IAAIE,2BAA2B,CAACC,QAAQ;AACjE;;AAEA;AACF;AACA;EACE,IAAIC,EAAEA,GAAW;IACf,OAAOC,YAAY,CAAC,IAAI,CAAC;AAC3B;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAY;AACxB,IAAA,OAAO,IAAI,CAACL,IAAI,CAACK,UAAU,IAAI,KAAK;AACtC;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAY;AACxB,IAAA,OAAO,IAAI,CAACN,IAAI,CAACM,UAAU,IAAI,KAAK;AACtC;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB;AACA,IAAA,MAAMC,OAAO,GAAG,CAAC,gBAAgB,CAAC;;AAElC;IACAA,OAAO,CAACC,IAAI,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAACV,MAAM,EAAE,CAAC;AAErD,IAAA,OAAOS,OAAO,CAACE,IAAI,CAAC,GAAG,CAAC;AAC1B;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;EAKCC,gBAAgBA,CAACL,OAAoB,EAAQ;AACnDM,IAAAA,gCAAgC,CAAC,IAAI,EAA8BN,OAAO,CAAC;AAC7E;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CAFAC,MAAM,CAAA,CAAA;AAAA;AAGT,CAAC,GA7DAG,eAAe,CAAA;AACoBC,oBAAA,CAAAC,QAAA,EAAfzB,eAAe,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/form/fieldset/index.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 { getElementId } from '../../../../utils/hds-get-element-id.ts';\nimport {\n  ariaDescribedBy,\n  registerAriaDescriptionElement,\n  unregisterAriaDescriptionElement,\n} from '../../../../utils/hds-aria-described-by.ts';\nimport { HdsFormFieldsetLayoutValues } from './types.ts';\nimport HdsFormLegendComponent from '../legend/index.ts';\nimport HdsFormHelperTextComponent from '../helper-text/index.ts';\nimport HdsFormErrorComponent from '../error/index.ts';\n\nimport type { ComponentLike, WithBoundArgs } from '@glint/template';\nimport type { HdsFormFieldsetLayouts } from './types.ts';\nimport type { HdsYieldSignature } from '../../yield/index.ts';\nimport type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';\n\nexport const LAYOUT_TYPES: HdsFormFieldsetLayouts[] = Object.values(\n  HdsFormFieldsetLayoutValues\n);\n\nexport interface HdsFormFieldsetSignature {\n  Args: {\n    extraAriaDescribedBy?: string;\n    isOptional?: boolean;\n    isRequired?: boolean;\n    layout?: HdsFormFieldsetLayouts;\n  };\n  Blocks: {\n    default: [\n      {\n        Legend?: WithBoundArgs<\n          typeof HdsFormLegendComponent,\n          'contextualClass' | 'isRequired' | 'isOptional'\n        >;\n        HelperText?: WithBoundArgs<\n          typeof HdsFormHelperTextComponent,\n          'contextualClass' | 'controlId' | 'onInsert'\n        >;\n        Control?: ComponentLike<HdsYieldSignature>;\n        Error?: WithBoundArgs<\n          typeof HdsFormErrorComponent,\n          'contextualClass' | 'controlId' | 'onInsert' | 'onRemove'\n        >;\n        id?: string;\n        ariaDescribedBy?: string;\n      },\n    ];\n  };\n  Element: HTMLElement;\n}\n\n// @ts-expect-error: decorator function return type 'ClassOf<AriaDescribedByComponent>' is not assignable to 'typeof HdsFormFieldComponent'\n@ariaDescribedBy\nexport default class HdsFormFieldset extends Component<HdsFormFieldsetSignature> {\n  /**\n   * Sets the layout of the group\n   *\n   * @param layout\n   * @type {enum}\n   * @default 'vertical'\n   */\n  get layout(): HdsFormFieldsetLayouts {\n    return this.args.layout ?? HdsFormFieldsetLayoutValues.Vertical;\n  }\n\n  /**\n   * Calculates the unique ID to assign to the fieldset\n   */\n  get id(): string {\n    return getElementId(this);\n  }\n\n  /**\n   * @param isRequired\n   * @type {boolean}\n   * @default false\n   */\n  get isRequired(): boolean {\n    return this.args.isRequired || false;\n  }\n\n  /**\n   * @param isOptional\n   * @type {boolean}\n   * @default false\n   */\n  get isOptional(): boolean {\n    return this.args.isOptional || false;\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    // we just need a class for the layout\n    const classes = ['hds-form-group'];\n\n    // add a class based on the @layout argument\n    classes.push(`hds-form-group--layout-${this.layout}`);\n\n    return classes.join(' ');\n  }\n\n  @action\n  appendDescriptor(element: HTMLElement): void {\n    registerAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n\n  @action removeDescriptor(element: HTMLElement): void {\n    unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element);\n  }\n}\n"],"names":["LAYOUT_TYPES","Object","values","HdsFormFieldsetLayoutValues","HdsFormFieldset","c","Component","layout","args","Vertical","id","getElementId","isRequired","isOptional","classNames","classes","push","join","appendDescriptor","element","registerAriaDescriptionElement","n","prototype","action","removeDescriptor","unregisterAriaDescriptionElement","ariaDescribedBy","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;;AAoBO,MAAMA,YAAsC,GAAGC,MAAM,CAACC,MAAM,CACjEC,2BACF;AAAE,MAmCmBC,eAAe,GAAAC,CAAA,OAAfD,eAAe,SAASE,SAAS,CAA2B;AAC/E;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,MAAMA,GAA2B;IACnC,OAAO,IAAI,CAACC,IAAI,CAACD,MAAM,IAAIJ,2BAA2B,CAACM,QAAQ;AACjE;;AAEA;AACF;AACA;EACE,IAAIC,EAAEA,GAAW;IACf,OAAOC,YAAY,CAAC,IAAI,CAAC;AAC3B;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAY;AACxB,IAAA,OAAO,IAAI,CAACJ,IAAI,CAACI,UAAU,IAAI,KAAK;AACtC;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAY;AACxB,IAAA,OAAO,IAAI,CAACL,IAAI,CAACK,UAAU,IAAI,KAAK;AACtC;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB;AACA,IAAA,MAAMC,OAAO,GAAG,CAAC,gBAAgB,CAAC;;AAElC;IACAA,OAAO,CAACC,IAAI,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAACT,MAAM,EAAE,CAAC;AAErD,IAAA,OAAOQ,OAAO,CAACE,IAAI,CAAC,GAAG,CAAC;AAC1B;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;EAKCC,gBAAgBA,CAACL,OAAoB,EAAQ;AACnDM,IAAAA,gCAAgC,CAAC,IAAI,EAA8BN,OAAO,CAAC;AAC7E;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CAFAC,MAAM,CAAA,CAAA;AAAA;AAGT,CAAC,GA7DAG,eAAe,CAAA;AACoBC,oBAAA,CAAAC,QAAA,EAAfxB,eAAe,CAAA;;;;"}

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

@@ -14,13 +14,13 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
 
 const DEFAULT_SIZE = HdsTextSizeValues.FourHundred;
 const DEFAULT_TAG = HdsFormHeaderTitleTagValues.Div;
-const AVAILABLE_TAGS = Object.values(HdsFormHeaderTitleTagValues);
+const 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));
+    assert(`@tag for "Hds::Form::Header::Title" must be one of the following: ${TAGS.join(', ')}; received: ${tag}`, TAGS.includes(tag));
     return tag;
   }
   get size() {
@@ -29,5 +29,5 @@ class HdsFormHeaderTitle extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsFormHeaderTitle);
 
-export { AVAILABLE_TAGS, DEFAULT_SIZE, DEFAULT_TAG, HdsFormHeaderTitle as default };
+export { DEFAULT_SIZE, DEFAULT_TAG, TAGS, HdsFormHeaderTitle as default };
 //# sourceMappingURL=title.js.map

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

@@ -1 +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;;;;"}
+{"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 TAGS: HdsFormHeaderTitleTags[] = 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: ${TAGS.join(\n        ', '\n      )}; received: ${tag}`,\n      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","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,IAA8B,GAAGC,MAAM,CAACC,MAAM,CACzDJ,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,IAAI,CAACQ,IAAI,CAC5E,IACF,CAAC,CAAA,YAAA,EAAeH,GAAG,CAAA,CAAE,EACrBL,IAAI,CAACS,QAAQ,CAACJ,GAAG,CACnB,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/key-value-inputs/generic.js

@@ -3,7 +3,7 @@ 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>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div class=\"hds-form-key-value-inputs__generic-container\" {{this._onInsert}} ...attributes>\n  {{yield}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

package/dist/components/hds/form/super-select/multiple/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{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.styles}}>\n  <PowerSelectMultiple\n    @afterOptionsComponent={{if\n      this.showAfterOptions\n      (or\n        @afterOptionsComponent\n        (component\n          \"hds/form/super-select/after-options\"\n          content=@afterOptionsContent\n          resultCountMessage=this.resultCountMessage\n          showNoSelectedMessage=this._showNoSelectedMessage\n          showOnlySelected=this._showOnlySelected\n          showSelected=this.showSelected\n          showAll=this.showAll\n          clearSelected=this.clearSelected\n          selectedCount=this.selectedCount\n        )\n      )\n    }}\n    @ariaDescribedBy={{@ariaDescribedBy}}\n    @ariaInvalid={{@ariaInvalid}}\n    @ariaLabel={{@ariaLabel}}\n    @ariaLabelledBy={{@ariaLabelledBy}}\n    @beforeOptionsComponent={{@beforeOptionsComponent}}\n    @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n    @closeOnSelect={{false}}\n    @disabled={{@disabled}}\n    @dropdownClass={{@dropdownClass}}\n    @extra={{@extra}}\n    @groupComponent={{component \"hds/form/super-select/option-group\"}}\n    @horizontalPosition={{@horizontalPosition}}\n    @initiallyOpened={{@initiallyOpened}}\n    @labelText={{@labelText}}\n    @loadingMessage={{@loadingMessage}}\n    @matcher={{@matcher}}\n    @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n    @noMatchesMessage={{@noMatchesMessage}}\n    @onBlur={{@onBlur}}\n    @onChange={{@onChange}}\n    @onClose={{@onClose}}\n    @onFocus={{@onFocus}}\n    @onInput={{@onInput}}\n    @onKeydown={{@onKeydown}}\n    @onOpen={{@onOpen}}\n    @options={{@options}}\n    @optionsComponent={{@optionsComponent}}\n    @placeholder={{@placeholder}}\n    @placeholderComponent={{@placeholderComponent}}\n    @preventScroll={{@preventScroll}}\n    @registerAPI={{this.setPowerSelectAPI}}\n    @renderInPlace={{true}}\n    @resultCountMessage={{@resultCountMessage}}\n    @scrollTo={{@scrollTo}}\n    @search={{@search}}\n    @searchEnabled={{@searchEnabled}}\n    @searchField={{@searchField}}\n    @searchFieldPosition=\"before-options\"\n    @searchMessage={{@searchMessage}}\n    @searchPlaceholder={{this.searchPlaceholder}}\n    @selected={{@selected}}\n    @selectedItemComponent={{@selectedItemComponent}}\n    @tabindex={{@tabindex}}\n    @triggerClass={{@triggerClass}}\n    @triggerComponent={{@triggerComponent}}\n    @triggerId={{@triggerId}}\n    @triggerRole={{@triggerRole}}\n    @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n    @verticalPosition={{@verticalPosition}}\n    ...attributes\n    as |option select|\n  >\n    {{! even if technically what is yielded here are _a list_ of options, we\'ve decided to keep the `option` name for consistency with the existing `PowerSelect` API }}\n    {{yield option select}}\n  </PowerSelectMultiple>\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.styles}}>\n  <PowerSelectMultiple\n    @afterOptionsComponent={{if\n      this.showAfterOptions\n      (or\n        @afterOptionsComponent\n        (component\n          \"hds/form/super-select/after-options\"\n          content=@afterOptionsContent\n          resultCountMessage=this.resultCountMessageText\n          showNoSelectedMessage=this._showNoSelectedMessage\n          showOnlySelected=this._showOnlySelected\n          showSelected=this.showSelected\n          showAll=this.showAll\n          clearSelected=this.clearSelected\n          selectedCount=this.selectedCount\n        )\n      )\n    }}\n    @ariaDescribedBy={{@ariaDescribedBy}}\n    @ariaInvalid={{@ariaInvalid}}\n    @ariaLabel={{@ariaLabel}}\n    @ariaLabelledBy={{@ariaLabelledBy}}\n    @beforeOptionsComponent={{@beforeOptionsComponent}}\n    @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n    @closeOnSelect={{false}}\n    @disabled={{@disabled}}\n    @dropdownClass={{@dropdownClass}}\n    @extra={{@extra}}\n    @groupComponent={{component \"hds/form/super-select/option-group\"}}\n    @horizontalPosition={{@horizontalPosition}}\n    @initiallyOpened={{@initiallyOpened}}\n    @labelText={{@labelText}}\n    @loadingMessage={{@loadingMessage}}\n    @matcher={{@matcher}}\n    @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n    @noMatchesMessage={{@noMatchesMessage}}\n    @onBlur={{@onBlur}}\n    @onChange={{@onChange}}\n    @onClose={{@onClose}}\n    @onFocus={{@onFocus}}\n    @onInput={{@onInput}}\n    @onKeydown={{@onKeydown}}\n    @onOpen={{@onOpen}}\n    @options={{@options}}\n    @optionsComponent={{@optionsComponent}}\n    @placeholder={{@placeholder}}\n    @placeholderComponent={{@placeholderComponent}}\n    @preventScroll={{@preventScroll}}\n    @registerAPI={{this.setPowerSelectAPI}}\n    @renderInPlace={{true}}\n    @resultCountMessage={{this.resultCountMessageFunction}}\n    @scrollTo={{@scrollTo}}\n    @search={{@search}}\n    @searchEnabled={{@searchEnabled}}\n    @searchField={{@searchField}}\n    @searchFieldPosition=\"before-options\"\n    @searchMessage={{@searchMessage}}\n    @searchPlaceholder={{this.searchPlaceholder}}\n    @selected={{@selected}}\n    @selectedItemComponent={{@selectedItemComponent}}\n    @tabindex={{@tabindex}}\n    @triggerClass={{@triggerClass}}\n    @triggerComponent={{@triggerComponent}}\n    @triggerId={{@triggerId}}\n    @triggerRole={{@triggerRole}}\n    @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n    @verticalPosition={{@verticalPosition}}\n    ...attributes\n    as |option select|\n  >\n    {{! even if technically what is yielded here are _a list_ of options, we\'ve decided to keep the `option` name for consistency with the existing `PowerSelect` API }}\n    {{yield option select}}\n  </PowerSelectMultiple>\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -46,8 +46,17 @@ class HdsFormSuperSelectMultipleBase extends Component {
   get optionsCount() {
     return this._powerSelectAPI?.resultsCount.toString() || '0';
   }
-  get resultCountMessage() {
-    return this.args.resultCountMessage || `${this.optionsCount} total`;
+  get resultCountMessageText() {
+    if (typeof this.args.resultCountMessage === 'string') {
+      return this.args.resultCountMessage;
+    }
+    return `${this.optionsCount} total`;
+  }
+  get resultCountMessageFunction() {
+    if (typeof this.args.resultCountMessage === 'function') {
+      return this.args.resultCountMessage;
+    }
+    return undefined;
   }
   calculatePosition(trigger, content) {
     // use `hds-anchored-position` to calculate and set position

package/dist/components/hds/form/super-select/multiple/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../src/components/hds/form/super-select/multiple/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport anchoredPositionModifier from '../../../../../modifiers/hds-anchored-position.ts';\n\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport {\n  HdsFormSuperSelectHorizontalPositionValues,\n  HdsFormSuperSelectHorizontalPositionToPlacementValues,\n} from '../types.ts';\n\nimport type { PowerSelectSignature } from 'ember-power-select/components/power-select';\nimport type { Select as PowerSelect } from 'ember-power-select/components/power-select';\nimport type { CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position';\nimport type { HdsFormSuperSelectHorizontalPositions } from '../types.ts';\n\nexport const DEFAULT_HORIZONTAL_POSITION: string =\n  HdsFormSuperSelectHorizontalPositionValues.Left;\nexport const HORIZONTAL_POSITION_MAPPING =\n  HdsFormSuperSelectHorizontalPositionToPlacementValues;\n\nexport interface HdsFormSuperSelectMultipleBaseSignature {\n  Args: PowerSelectSignature['Args'] & {\n    showAfterOptions?: boolean;\n    afterOptionsContent?: string;\n    resultCountMessage?: string;\n    dropdownMaxWidth?: string;\n    matchTriggerWidth?: boolean;\n    isInvalid?: boolean;\n  };\n  Blocks: PowerSelectSignature['Blocks'];\n  Element: PowerSelectSignature['Element'];\n}\n\nexport default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSuperSelectMultipleBaseSignature> {\n  @tracked private _powerSelectAPI?: PowerSelect;\n  @tracked private _showOnlySelected = false;\n  @tracked private _showNoSelectedMessage = false;\n\n  get horizontalPosition(): HdsFormSuperSelectHorizontalPositions {\n    const { horizontalPosition = DEFAULT_HORIZONTAL_POSITION } = this.args;\n    return horizontalPosition as HdsFormSuperSelectHorizontalPositions;\n  }\n\n  get selectedCount(): string {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access\n    return this._powerSelectAPI?.selected?.length || '0';\n  }\n\n  get optionsCount(): string {\n    return this._powerSelectAPI?.resultsCount.toString() || '0';\n  }\n\n  get resultCountMessage(): string {\n    return this.args.resultCountMessage || `${this.optionsCount} total`;\n  }\n\n  @action calculatePosition(\n    trigger: Element,\n    content: HTMLElement\n  ): CalculatePositionResult {\n    // use `hds-anchored-position` to calculate and set position\n    // @ts-expect-error: known issue with type of invocation\n    anchoredPositionModifier(content, [trigger], {\n      placement: HORIZONTAL_POSITION_MAPPING[this.horizontalPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: true,\n    });\n    // prevent PowerSelect from setting position\n    return {\n      horizontalPosition: 'auto',\n      verticalPosition: 'auto',\n      style: {},\n    };\n  }\n\n  /**\n   * This action sets the powerSelectAPI property and optionally calls a registerAPI function.\n   *\n   * @param {Object} powerSelectAPI - The API object for the PowerSelect component.\n   *\n   * If a `registerAPI` function is passed in through the component's arguments,\n   * this function will be called with the `powerSelectAPI` as its argument.\n   * This allows parent components or controllers to have access to the PowerSelect API.\n   *\n   * The `powerSelectAPI` is also stored on the component instance and used in `clearSelected`\n   */\n  @action\n  setPowerSelectAPI(powerSelectAPI: PowerSelect): void {\n    if (typeof this.args.registerAPI === 'function') {\n      this.args.registerAPI(powerSelectAPI);\n    }\n    this._powerSelectAPI = powerSelectAPI;\n  }\n\n  @action showSelected(): void {\n    this._showNoSelectedMessage = this.selectedCount === '0';\n    this._showOnlySelected = true;\n  }\n\n  @action showAll(): void {\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  @action clearSelected(): void {\n    this._powerSelectAPI?.actions.select(null);\n    // show all options after clearing all selection\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  get showAfterOptions(): boolean {\n    return this.args.showAfterOptions ?? true;\n  }\n\n  // NOTE: The searchPlaceholder doesn't currently work for the multiple select\n  get searchPlaceholder(): string {\n    return this.args.searchPlaceholder ?? 'Search';\n  }\n\n  get styles(): Record<string, string> {\n    const styles: { [key: string]: string } = {};\n\n    if (this.args.dropdownMaxWidth) {\n      styles['--hds-form-super-select-dropdown-max-width'] =\n        this.args.dropdownMaxWidth;\n    }\n\n    if (this.selectedCount === '0') {\n      styles['--hds-form-super-select-selected-text-display'] = 'none';\n    } else {\n      styles['--hds-form-super-select-selected-text-display'] = 'flex';\n    }\n\n    styles['--hds-form-super-select-selected-text'] =\n      `'${this.selectedCount} selected'`;\n\n    return styles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-form-super-select', 'hds-form-super-select-multiple'];\n\n    // add a class based on the @matchTriggerWidth argument or whether dropdownMaxWidth is set\n    if (this.args.matchTriggerWidth === false || this.args.dropdownMaxWidth) {\n      classes.push('hds-form-super-select--dropdown-content-auto-width');\n    }\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-super-select--is-invalid`);\n    }\n\n    // add a class based on the showOnlySelected\n    if (this._showOnlySelected) {\n      classes.push(`hds-form-super-select--show-only-selected`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_HORIZONTAL_POSITION","HdsFormSuperSelectHorizontalPositionValues","Left","HORIZONTAL_POSITION_MAPPING","HdsFormSuperSelectHorizontalPositionToPlacementValues","HdsFormSuperSelectMultipleBase","Component","g","prototype","tracked","i","void 0","horizontalPosition","args","selectedCount","_powerSelectAPI","selected","length","optionsCount","resultsCount","toString","resultCountMessage","calculatePosition","trigger","content","anchoredPositionModifier","placement","offsetOptions","enableCollisionDetection","verticalPosition","style","n","action","setPowerSelectAPI","powerSelectAPI","registerAPI","showSelected","_showNoSelectedMessage","_showOnlySelected","showAll","clearSelected","actions","select","showAfterOptions","searchPlaceholder","styles","dropdownMaxWidth","classNames","classes","matchTriggerWidth","push","isInvalid","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"base.js","sources":["../../../../../../src/components/hds/form/super-select/multiple/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport anchoredPositionModifier from '../../../../../modifiers/hds-anchored-position.ts';\n\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport {\n  HdsFormSuperSelectHorizontalPositionValues,\n  HdsFormSuperSelectHorizontalPositionToPlacementValues,\n} from '../types.ts';\n\nimport type { PowerSelectSignature } from 'ember-power-select/components/power-select';\nimport type { Select as PowerSelect } from 'ember-power-select/components/power-select';\nimport type { CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position';\nimport type { HdsFormSuperSelectHorizontalPositions } from '../types.ts';\n\nexport const DEFAULT_HORIZONTAL_POSITION: string =\n  HdsFormSuperSelectHorizontalPositionValues.Left;\nexport const HORIZONTAL_POSITION_MAPPING =\n  HdsFormSuperSelectHorizontalPositionToPlacementValues;\n\nexport interface HdsFormSuperSelectMultipleBaseSignature {\n  Args: Omit<PowerSelectSignature['Args'], 'resultCountMessage'> & {\n    showAfterOptions?: boolean;\n    afterOptionsContent?: string;\n    resultCountMessage?:\n      | string\n      | PowerSelectSignature['Args']['resultCountMessage'];\n    dropdownMaxWidth?: string;\n    matchTriggerWidth?: boolean;\n    isInvalid?: boolean;\n  };\n  Blocks: PowerSelectSignature['Blocks'];\n  Element: PowerSelectSignature['Element'];\n}\n\nexport default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSuperSelectMultipleBaseSignature> {\n  @tracked private _powerSelectAPI?: PowerSelect;\n  @tracked private _showOnlySelected = false;\n  @tracked private _showNoSelectedMessage = false;\n\n  get horizontalPosition(): HdsFormSuperSelectHorizontalPositions {\n    const { horizontalPosition = DEFAULT_HORIZONTAL_POSITION } = this.args;\n    return horizontalPosition as HdsFormSuperSelectHorizontalPositions;\n  }\n\n  get selectedCount(): string {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access\n    return this._powerSelectAPI?.selected?.length || '0';\n  }\n\n  get optionsCount(): string {\n    return this._powerSelectAPI?.resultsCount.toString() || '0';\n  }\n\n  get resultCountMessageText(): string {\n    if (typeof this.args.resultCountMessage === 'string') {\n      return this.args.resultCountMessage;\n    }\n\n    return `${this.optionsCount} total`;\n  }\n\n  get resultCountMessageFunction(): PowerSelectSignature['Args']['resultCountMessage'] {\n    if (typeof this.args.resultCountMessage === 'function') {\n      return this.args.resultCountMessage;\n    }\n\n    return undefined;\n  }\n\n  @action calculatePosition(\n    trigger: Element,\n    content: HTMLElement\n  ): CalculatePositionResult {\n    // use `hds-anchored-position` to calculate and set position\n    // @ts-expect-error: known issue with type of invocation\n    anchoredPositionModifier(content, [trigger], {\n      placement: HORIZONTAL_POSITION_MAPPING[this.horizontalPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: true,\n    });\n    // prevent PowerSelect from setting position\n    return {\n      horizontalPosition: 'auto',\n      verticalPosition: 'auto',\n      style: {},\n    };\n  }\n\n  /**\n   * This action sets the powerSelectAPI property and optionally calls a registerAPI function.\n   *\n   * @param {Object} powerSelectAPI - The API object for the PowerSelect component.\n   *\n   * If a `registerAPI` function is passed in through the component's arguments,\n   * this function will be called with the `powerSelectAPI` as its argument.\n   * This allows parent components or controllers to have access to the PowerSelect API.\n   *\n   * The `powerSelectAPI` is also stored on the component instance and used in `clearSelected`\n   */\n  @action\n  setPowerSelectAPI(powerSelectAPI: PowerSelect): void {\n    if (typeof this.args.registerAPI === 'function') {\n      this.args.registerAPI(powerSelectAPI);\n    }\n    this._powerSelectAPI = powerSelectAPI;\n  }\n\n  @action showSelected(): void {\n    this._showNoSelectedMessage = this.selectedCount === '0';\n    this._showOnlySelected = true;\n  }\n\n  @action showAll(): void {\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  @action clearSelected(): void {\n    this._powerSelectAPI?.actions.select(null);\n    // show all options after clearing all selection\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  get showAfterOptions(): boolean {\n    return this.args.showAfterOptions ?? true;\n  }\n\n  // NOTE: The searchPlaceholder doesn't currently work for the multiple select\n  get searchPlaceholder(): string {\n    return this.args.searchPlaceholder ?? 'Search';\n  }\n\n  get styles(): Record<string, string> {\n    const styles: { [key: string]: string } = {};\n\n    if (this.args.dropdownMaxWidth) {\n      styles['--hds-form-super-select-dropdown-max-width'] =\n        this.args.dropdownMaxWidth;\n    }\n\n    if (this.selectedCount === '0') {\n      styles['--hds-form-super-select-selected-text-display'] = 'none';\n    } else {\n      styles['--hds-form-super-select-selected-text-display'] = 'flex';\n    }\n\n    styles['--hds-form-super-select-selected-text'] =\n      `'${this.selectedCount} selected'`;\n\n    return styles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-form-super-select', 'hds-form-super-select-multiple'];\n\n    // add a class based on the @matchTriggerWidth argument or whether dropdownMaxWidth is set\n    if (this.args.matchTriggerWidth === false || this.args.dropdownMaxWidth) {\n      classes.push('hds-form-super-select--dropdown-content-auto-width');\n    }\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-super-select--is-invalid`);\n    }\n\n    // add a class based on the showOnlySelected\n    if (this._showOnlySelected) {\n      classes.push(`hds-form-super-select--show-only-selected`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_HORIZONTAL_POSITION","HdsFormSuperSelectHorizontalPositionValues","Left","HORIZONTAL_POSITION_MAPPING","HdsFormSuperSelectHorizontalPositionToPlacementValues","HdsFormSuperSelectMultipleBase","Component","g","prototype","tracked","i","void 0","horizontalPosition","args","selectedCount","_powerSelectAPI","selected","length","optionsCount","resultsCount","toString","resultCountMessageText","resultCountMessage","resultCountMessageFunction","undefined","calculatePosition","trigger","content","anchoredPositionModifier","placement","offsetOptions","enableCollisionDetection","verticalPosition","style","n","action","setPowerSelectAPI","powerSelectAPI","registerAPI","showSelected","_showNoSelectedMessage","_showOnlySelected","showAll","clearSelected","actions","select","showAfterOptions","searchPlaceholder","styles","dropdownMaxWidth","classNames","classes","matchTriggerWidth","push","isInvalid","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/form/super-select/single/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{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.dropdownMaxWidthStyle}}>\n  <PowerSelect\n    @afterOptionsComponent={{if\n      this.showAfterOptions\n      (or\n        @afterOptionsComponent\n        (component\n          \"hds/form/super-select/after-options\" content=@afterOptionsContent resultCountMessage=this.resultCountMessage\n        )\n      )\n    }}\n    @ariaDescribedBy={{@ariaDescribedBy}}\n    @ariaInvalid={{@ariaInvalid}}\n    @ariaLabel={{@ariaLabel}}\n    @ariaLabelledBy={{@ariaLabelledBy}}\n    @beforeOptionsComponent={{@beforeOptionsComponent}}\n    @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n    @closeOnSelect={{@closeOnSelect}}\n    @disabled={{@disabled}}\n    @dropdownClass={{@dropdownClass}}\n    @extra={{@extra}}\n    @groupComponent={{component \"hds/form/super-select/option-group\"}}\n    @horizontalPosition={{@horizontalPosition}}\n    @initiallyOpened={{@initiallyOpened}}\n    @labelText={{@labelText}}\n    @loadingMessage={{@loadingMessage}}\n    @matcher={{@matcher}}\n    @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n    @noMatchesMessage={{@noMatchesMessage}}\n    @onBlur={{@onBlur}}\n    @onChange={{@onChange}}\n    @onClose={{@onClose}}\n    @onFocus={{@onFocus}}\n    @onInput={{@onInput}}\n    @onKeydown={{@onKeydown}}\n    @onOpen={{@onOpen}}\n    @options={{@options}}\n    @optionsComponent={{@optionsComponent}}\n    @placeholder={{@placeholder}}\n    @placeholderComponent={{component \"hds/form/super-select/placeholder\"}}\n    @preventScroll={{@preventScroll}}\n    @registerAPI={{this.setPowerSelectAPI}}\n    @renderInPlace={{true}}\n    @resultCountMessage={{@resultCountMessage}}\n    @scrollTo={{@scrollTo}}\n    @search={{@search}}\n    @searchEnabled={{@searchEnabled}}\n    @searchField={{@searchField}}\n    @searchFieldPosition=\"before-options\"\n    @searchMessage={{@searchMessage}}\n    @searchPlaceholder={{this.searchPlaceholder}}\n    @selected={{@selected}}\n    @selectedItemComponent={{@selectedItemComponent}}\n    @tabindex={{@tabindex}}\n    @triggerClass={{@triggerClass}}\n    @triggerComponent={{@triggerComponent}}\n    @triggerId={{@triggerId}}\n    @triggerRole={{@triggerRole}}\n    @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n    @verticalPosition={{@verticalPosition}}\n    ...attributes\n    as |option select|\n  >\n    <Hds::Text::Body>{{yield option select}}</Hds::Text::Body>\n  </PowerSelect>\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.dropdownMaxWidthStyle}}>\n  <PowerSelect\n    @afterOptionsComponent={{if\n      this.showAfterOptions\n      (or\n        @afterOptionsComponent\n        (component\n          \"hds/form/super-select/after-options\"\n          content=@afterOptionsContent\n          resultCountMessage=this.resultCountMessageText\n        )\n      )\n    }}\n    @ariaDescribedBy={{@ariaDescribedBy}}\n    @ariaInvalid={{@ariaInvalid}}\n    @ariaLabel={{@ariaLabel}}\n    @ariaLabelledBy={{@ariaLabelledBy}}\n    @beforeOptionsComponent={{@beforeOptionsComponent}}\n    @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n    @closeOnSelect={{@closeOnSelect}}\n    @disabled={{@disabled}}\n    @dropdownClass={{@dropdownClass}}\n    @extra={{@extra}}\n    @groupComponent={{component \"hds/form/super-select/option-group\"}}\n    @horizontalPosition={{@horizontalPosition}}\n    @initiallyOpened={{@initiallyOpened}}\n    @labelText={{@labelText}}\n    @loadingMessage={{@loadingMessage}}\n    @matcher={{@matcher}}\n    @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n    @noMatchesMessage={{@noMatchesMessage}}\n    @onBlur={{@onBlur}}\n    @onChange={{@onChange}}\n    @onClose={{@onClose}}\n    @onFocus={{@onFocus}}\n    @onInput={{@onInput}}\n    @onKeydown={{@onKeydown}}\n    @onOpen={{@onOpen}}\n    @options={{@options}}\n    @optionsComponent={{@optionsComponent}}\n    @placeholder={{@placeholder}}\n    @placeholderComponent={{component \"hds/form/super-select/placeholder\"}}\n    @preventScroll={{@preventScroll}}\n    @registerAPI={{this.setPowerSelectAPI}}\n    @renderInPlace={{true}}\n    @resultCountMessage={{this.resultCountMessageFunction}}\n    @scrollTo={{@scrollTo}}\n    @search={{@search}}\n    @searchEnabled={{@searchEnabled}}\n    @searchField={{@searchField}}\n    @searchFieldPosition=\"before-options\"\n    @searchMessage={{@searchMessage}}\n    @searchPlaceholder={{this.searchPlaceholder}}\n    @selected={{@selected}}\n    @selectedItemComponent={{@selectedItemComponent}}\n    @tabindex={{@tabindex}}\n    @triggerClass={{@triggerClass}}\n    @triggerComponent={{@triggerComponent}}\n    @triggerId={{@triggerId}}\n    @triggerRole={{@triggerRole}}\n    @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n    @verticalPosition={{@verticalPosition}}\n    ...attributes\n    as |option select|\n  >\n    <Hds::Text::Body>{{yield option select}}</Hds::Text::Body>\n  </PowerSelect>\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -27,9 +27,18 @@ class HdsFormSuperSelectSingleBase extends Component {
     } = this.args;
     return horizontalPosition;
   }
-  get resultCountMessage() {
+  get resultCountMessageText() {
+    if (typeof this.args.resultCountMessage === 'string') {
+      return this.args.resultCountMessage;
+    }
     return `${this.powerSelectAPI?.resultsCount || 0} total`;
   }
+  get resultCountMessageFunction() {
+    if (typeof this.args.resultCountMessage === 'function') {
+      return this.args.resultCountMessage;
+    }
+    return undefined;
+  }
 
   /**
    * This action sets the powerSelectAPI property and optionally calls a registerAPI function.

package/dist/components/hds/form/super-select/single/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../src/components/hds/form/super-select/single/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport anchoredPositionModifier from '../../../../../modifiers/hds-anchored-position.ts';\n\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport {\n  HdsFormSuperSelectHorizontalPositionValues,\n  HdsFormSuperSelectHorizontalPositionToPlacementValues,\n} from '../types.ts';\n\nimport type { PowerSelectSignature } from 'ember-power-select/components/power-select';\nimport type { Select as PowerSelect } from 'ember-power-select/components/power-select';\nimport type { CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position';\nimport type { HdsFormSuperSelectHorizontalPositions } from '../types.ts';\n\nexport const DEFAULT_HORIZONTAL_POSITION: string =\n  HdsFormSuperSelectHorizontalPositionValues.Left;\nexport const HORIZONTAL_POSITION_MAPPING =\n  HdsFormSuperSelectHorizontalPositionToPlacementValues;\n\nexport interface HdsFormSuperSelectSingleBaseSignature {\n  Args: PowerSelectSignature['Args'] & {\n    showAfterOptions?: boolean;\n    afterOptionsContent?: string;\n    resultCountMessage?: string;\n    dropdownMaxWidth?: string;\n    matchTriggerWidth?: boolean;\n    isInvalid?: boolean;\n  };\n  Blocks: PowerSelectSignature['Blocks'];\n  Element: PowerSelectSignature['Element'];\n}\n\nexport default class HdsFormSuperSelectSingleBase extends Component<HdsFormSuperSelectSingleBaseSignature> {\n  @tracked powerSelectAPI?: PowerSelect;\n\n  get horizontalPosition(): HdsFormSuperSelectHorizontalPositions {\n    const { horizontalPosition = DEFAULT_HORIZONTAL_POSITION } = this.args;\n    return horizontalPosition as HdsFormSuperSelectHorizontalPositions;\n  }\n\n  get resultCountMessage(): string {\n    return `${this.powerSelectAPI?.resultsCount || 0} total`;\n  }\n\n  /**\n   * This action sets the powerSelectAPI property and optionally calls a registerAPI function.\n   *\n   * @param {Object} powerSelectAPI - The API object for the PowerSelect component.\n   *\n   * If a `registerAPI` function is passed in through the component's arguments,\n   * this function will be called with the `powerSelectAPI` as its argument.\n   * This allows parent components or controllers to have access to the PowerSelect API.\n   *\n   * The `powerSelectAPI` is also stored on the component instance and used in `clearSelected`\n   */\n  @action\n  setPowerSelectAPI(powerSelectAPI: PowerSelect): void {\n    if (typeof this.args.registerAPI === 'function') {\n      this.args.registerAPI(powerSelectAPI);\n    }\n    this.powerSelectAPI = powerSelectAPI;\n  }\n\n  @action calculatePosition(\n    trigger: Element,\n    content: HTMLElement\n  ): CalculatePositionResult {\n    // use `hds-anchored-position` to calculate and set position\n    // @ts-expect-error: known issue with type of invocation\n    anchoredPositionModifier(content, [trigger], {\n      placement: HORIZONTAL_POSITION_MAPPING[this.horizontalPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: true,\n    });\n    // prevent PowerSelect from setting position\n    return {\n      horizontalPosition: 'auto',\n      verticalPosition: 'auto',\n      style: {},\n    };\n  }\n\n  /**\n   * Determine if `@afterOptionsComponent` gets displayed\n   * @param showAfterOptions\n   * @type {boolean}\n   * @default false\n   */\n  get showAfterOptions(): boolean | string {\n    return this.args.showAfterOptions ?? this.args.afterOptionsContent ?? false;\n  }\n\n  /**\n   * Get the search placeholder text\n   * @param searchPlaceholder\n   * @type {string}\n   * @default 'Search'\n   */\n  get searchPlaceholder(): string {\n    return this.args.searchPlaceholder ?? 'Search';\n  }\n\n  /**\n   * Get the maxWidth to apply to the dropdown\n   * @param dropdownMaxWidth\n   * @type {string}\n   * @default 'none'\n   */\n  get dropdownMaxWidthStyle(): Record<string, string> {\n    const maxWidthStyle: { [key: string]: string } = {};\n    if (this.args.dropdownMaxWidth) {\n      maxWidthStyle['--hds-form-super-select-dropdown-max-width'] =\n        this.args.dropdownMaxWidth;\n    }\n    return maxWidthStyle;\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-super-select', 'hds-form-super-select-single'];\n\n    // add a class based on the @matchTriggerWidth argument or whether dropdownMaxWidth is set\n    if (this.args.matchTriggerWidth === false || this.args.dropdownMaxWidth) {\n      classes.push('hds-form-super-select--dropdown-content-auto-width');\n    }\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-super-select--is-invalid`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_HORIZONTAL_POSITION","HdsFormSuperSelectHorizontalPositionValues","Left","HORIZONTAL_POSITION_MAPPING","HdsFormSuperSelectHorizontalPositionToPlacementValues","HdsFormSuperSelectSingleBase","Component","g","prototype","tracked","i","void 0","horizontalPosition","args","resultCountMessage","powerSelectAPI","resultsCount","setPowerSelectAPI","registerAPI","n","action","calculatePosition","trigger","content","anchoredPositionModifier","placement","offsetOptions","enableCollisionDetection","verticalPosition","style","showAfterOptions","afterOptionsContent","searchPlaceholder","dropdownMaxWidthStyle","maxWidthStyle","dropdownMaxWidth","classNames","classes","matchTriggerWidth","push","isInvalid","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"base.js","sources":["../../../../../../src/components/hds/form/super-select/single/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport anchoredPositionModifier from '../../../../../modifiers/hds-anchored-position.ts';\n\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport {\n  HdsFormSuperSelectHorizontalPositionValues,\n  HdsFormSuperSelectHorizontalPositionToPlacementValues,\n} from '../types.ts';\n\nimport type { PowerSelectSignature } from 'ember-power-select/components/power-select';\nimport type { Select as PowerSelect } from 'ember-power-select/components/power-select';\nimport type { CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position';\nimport type { HdsFormSuperSelectHorizontalPositions } from '../types.ts';\n\nexport const DEFAULT_HORIZONTAL_POSITION: string =\n  HdsFormSuperSelectHorizontalPositionValues.Left;\nexport const HORIZONTAL_POSITION_MAPPING =\n  HdsFormSuperSelectHorizontalPositionToPlacementValues;\n\nexport interface HdsFormSuperSelectSingleBaseSignature {\n  Args: Omit<PowerSelectSignature['Args'], 'resultCountMessage'> & {\n    showAfterOptions?: boolean;\n    afterOptionsContent?: string;\n    resultCountMessage?:\n      | string\n      | PowerSelectSignature['Args']['resultCountMessage'];\n    dropdownMaxWidth?: string;\n    matchTriggerWidth?: boolean;\n    isInvalid?: boolean;\n  };\n  Blocks: PowerSelectSignature['Blocks'];\n  Element: PowerSelectSignature['Element'];\n}\n\nexport default class HdsFormSuperSelectSingleBase extends Component<HdsFormSuperSelectSingleBaseSignature> {\n  @tracked powerSelectAPI?: PowerSelect;\n\n  get horizontalPosition(): HdsFormSuperSelectHorizontalPositions {\n    const { horizontalPosition = DEFAULT_HORIZONTAL_POSITION } = this.args;\n    return horizontalPosition as HdsFormSuperSelectHorizontalPositions;\n  }\n\n  get resultCountMessageText(): string {\n    if (typeof this.args.resultCountMessage === 'string') {\n      return this.args.resultCountMessage;\n    }\n\n    return `${this.powerSelectAPI?.resultsCount || 0} total`;\n  }\n\n  get resultCountMessageFunction(): PowerSelectSignature['Args']['resultCountMessage'] {\n    if (typeof this.args.resultCountMessage === 'function') {\n      return this.args.resultCountMessage;\n    }\n\n    return undefined;\n  }\n\n  /**\n   * This action sets the powerSelectAPI property and optionally calls a registerAPI function.\n   *\n   * @param {Object} powerSelectAPI - The API object for the PowerSelect component.\n   *\n   * If a `registerAPI` function is passed in through the component's arguments,\n   * this function will be called with the `powerSelectAPI` as its argument.\n   * This allows parent components or controllers to have access to the PowerSelect API.\n   *\n   * The `powerSelectAPI` is also stored on the component instance and used in `clearSelected`\n   */\n  @action\n  setPowerSelectAPI(powerSelectAPI: PowerSelect): void {\n    if (typeof this.args.registerAPI === 'function') {\n      this.args.registerAPI(powerSelectAPI);\n    }\n    this.powerSelectAPI = powerSelectAPI;\n  }\n\n  @action calculatePosition(\n    trigger: Element,\n    content: HTMLElement\n  ): CalculatePositionResult {\n    // use `hds-anchored-position` to calculate and set position\n    // @ts-expect-error: known issue with type of invocation\n    anchoredPositionModifier(content, [trigger], {\n      placement: HORIZONTAL_POSITION_MAPPING[this.horizontalPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: true,\n    });\n    // prevent PowerSelect from setting position\n    return {\n      horizontalPosition: 'auto',\n      verticalPosition: 'auto',\n      style: {},\n    };\n  }\n\n  /**\n   * Determine if `@afterOptionsComponent` gets displayed\n   * @param showAfterOptions\n   * @type {boolean}\n   * @default false\n   */\n  get showAfterOptions(): boolean | string {\n    return this.args.showAfterOptions ?? this.args.afterOptionsContent ?? false;\n  }\n\n  /**\n   * Get the search placeholder text\n   * @param searchPlaceholder\n   * @type {string}\n   * @default 'Search'\n   */\n  get searchPlaceholder(): string {\n    return this.args.searchPlaceholder ?? 'Search';\n  }\n\n  /**\n   * Get the maxWidth to apply to the dropdown\n   * @param dropdownMaxWidth\n   * @type {string}\n   * @default 'none'\n   */\n  get dropdownMaxWidthStyle(): Record<string, string> {\n    const maxWidthStyle: { [key: string]: string } = {};\n    if (this.args.dropdownMaxWidth) {\n      maxWidthStyle['--hds-form-super-select-dropdown-max-width'] =\n        this.args.dropdownMaxWidth;\n    }\n    return maxWidthStyle;\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-super-select', 'hds-form-super-select-single'];\n\n    // add a class based on the @matchTriggerWidth argument or whether dropdownMaxWidth is set\n    if (this.args.matchTriggerWidth === false || this.args.dropdownMaxWidth) {\n      classes.push('hds-form-super-select--dropdown-content-auto-width');\n    }\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-super-select--is-invalid`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_HORIZONTAL_POSITION","HdsFormSuperSelectHorizontalPositionValues","Left","HORIZONTAL_POSITION_MAPPING","HdsFormSuperSelectHorizontalPositionToPlacementValues","HdsFormSuperSelectSingleBase","Component","g","prototype","tracked","i","void 0","horizontalPosition","args","resultCountMessageText","resultCountMessage","powerSelectAPI","resultsCount","resultCountMessageFunction","undefined","setPowerSelectAPI","registerAPI","n","action","calculatePosition","trigger","content","anchoredPositionModifier","placement","offsetOptions","enableCollisionDetection","verticalPosition","style","showAfterOptions","afterOptionsContent","searchPlaceholder","dropdownMaxWidthStyle","maxWidthStyle","dropdownMaxWidth","classNames","classes","matchTriggerWidth","push","isInvalid","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/hds/form/text-input/base.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';\n\nimport { HdsFormTextInputTypeValues } from './types.ts';\nimport type { HdsFormTextInputTypes } from './types.ts';\n\n// notice: we don't support all the possible HTML types, only a subset\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\nexport const DEFAULT_TYPE = HdsFormTextInputTypeValues.Text;\nexport const TYPES: string[] = Object.values(HdsFormTextInputTypeValues);\n\nexport interface HdsFormTextInputBaseSignature {\n  Args: {\n    hasVisibilityToggle?: boolean;\n    isInvalid?: boolean;\n    isLoading?: boolean;\n    type?: HdsFormTextInputTypes;\n    value?: string;\n    width?: string;\n    id?: string;\n    ariaDescribedBy?: string;\n  };\n  Element: HTMLInputElement;\n}\n\nexport default class HdsFormTextInputBase extends Component<HdsFormTextInputBaseSignature> {\n  /**\n   * Sets the type of input\n   *\n   * @param type\n   * @type {string}\n   * @default 'text'\n   */\n  get type(): HdsFormTextInputTypes {\n    const { type = DEFAULT_TYPE } = this.args;\n\n    assert(\n      `@type for \"Hds::Form::TextInput\" must be one of the following: ${TYPES.join(\n        ', '\n      )}; received: ${type}`,\n      TYPES.includes(type)\n    );\n\n    return type;\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-text-input'];\n\n    // add typographic classes\n    classes.push('hds-typography-body-200', 'hds-font-weight-regular');\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-text-input--is-invalid`);\n    }\n\n    // add a class based on the @hasVisibilityToggle argument\n    if (this.args.hasVisibilityToggle) {\n      classes.push(`hds-form-text-input--has-visibility-toggle`);\n    }\n\n    // add a class based on the @isLoading argument\n    if (this.args.isLoading) {\n      classes.push(`hds-form-text-input--is-loading`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_TYPE","HdsFormTextInputTypeValues","Text","TYPES","Object","values","HdsFormTextInputBase","Component","type","args","assert","join","includes","classNames","classes","push","isInvalid","hasVisibilityToggle","isLoading","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAQA;AACA;AACaA,MAAAA,YAAY,GAAGC,0BAA0B,CAACC;AAChD,MAAMC,KAAe,GAAGC,MAAM,CAACC,MAAM,CAACJ,0BAA0B;AAgBxD,MAAMK,oBAAoB,SAASC,SAAS,CAAgC;AACzF;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,IAAIA,GAA0B;IAChC,MAAM;AAAEA,MAAAA,IAAI,GAAGR;KAAc,GAAG,IAAI,CAACS,IAAI;AAEzCC,IAAAA,MAAM,CACJ,CAAkEP,+DAAAA,EAAAA,KAAK,CAACQ,IAAI,CAC1E,IACF,CAAC,CAAA,YAAA,EAAeH,IAAI,CAAA,CAAE,EACtBL,KAAK,CAACS,QAAQ,CAACJ,IAAI,CACrB,CAAC;AAED,IAAA,OAAOA,IAAI;AACb;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIK,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,qBAAqB,CAAC;;AAEvC;AACAA,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAE,yBAAyB,CAAC;;AAElE;AACA,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,SAAS,EAAE;AACvBF,MAAAA,OAAO,CAACC,IAAI,CAAC,CAAA,+BAAA,CAAiC,CAAC;AACjD;;AAEA;AACA,IAAA,IAAI,IAAI,CAACN,IAAI,CAACQ,mBAAmB,EAAE;AACjCH,MAAAA,OAAO,CAACC,IAAI,CAAC,CAAA,0CAAA,CAA4C,CAAC;AAC5D;;AAEA;AACA,IAAA,IAAI,IAAI,CAACN,IAAI,CAACS,SAAS,EAAE;AACvBJ,MAAAA,OAAO,CAACC,IAAI,CAAC,CAAA,+BAAA,CAAiC,CAAC;AACjD;AAEA,IAAA,OAAOD,OAAO,CAACH,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACQ,oBAAA,CAAAC,QAAA,EAjDoBd,oBAAoB,CAAA;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../src/components/hds/form/text-input/base.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';\n\nimport { HdsFormTextInputTypeValues } from './types.ts';\nimport type { HdsFormTextInputTypes } from './types.ts';\n\n// notice: we don't support all the possible HTML types, only a subset\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\nexport const DEFAULT_TYPE = HdsFormTextInputTypeValues.Text;\nexport const TYPES: HdsFormTextInputTypes[] = Object.values(\n  HdsFormTextInputTypeValues\n);\n\nexport interface HdsFormTextInputBaseSignature {\n  Args: {\n    hasVisibilityToggle?: boolean;\n    isInvalid?: boolean;\n    isLoading?: boolean;\n    type?: HdsFormTextInputTypes;\n    value?: string;\n    width?: string;\n    id?: string;\n    ariaDescribedBy?: string;\n  };\n  Element: HTMLInputElement;\n}\n\nexport default class HdsFormTextInputBase extends Component<HdsFormTextInputBaseSignature> {\n  /**\n   * Sets the type of input\n   *\n   * @param type\n   * @type {string}\n   * @default 'text'\n   */\n  get type(): HdsFormTextInputTypes {\n    const { type = DEFAULT_TYPE } = this.args;\n\n    assert(\n      `@type for \"Hds::Form::TextInput\" must be one of the following: ${TYPES.join(\n        ', '\n      )}; received: ${type}`,\n      TYPES.includes(type)\n    );\n\n    return type;\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-text-input'];\n\n    // add typographic classes\n    classes.push('hds-typography-body-200', 'hds-font-weight-regular');\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-text-input--is-invalid`);\n    }\n\n    // add a class based on the @hasVisibilityToggle argument\n    if (this.args.hasVisibilityToggle) {\n      classes.push(`hds-form-text-input--has-visibility-toggle`);\n    }\n\n    // add a class based on the @isLoading argument\n    if (this.args.isLoading) {\n      classes.push(`hds-form-text-input--is-loading`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_TYPE","HdsFormTextInputTypeValues","Text","TYPES","Object","values","HdsFormTextInputBase","Component","type","args","assert","join","includes","classNames","classes","push","isInvalid","hasVisibilityToggle","isLoading","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAQA;AACA;AACaA,MAAAA,YAAY,GAAGC,0BAA0B,CAACC;AAChD,MAAMC,KAA8B,GAAGC,MAAM,CAACC,MAAM,CACzDJ,0BACF;AAgBe,MAAMK,oBAAoB,SAASC,SAAS,CAAgC;AACzF;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,IAAIA,GAA0B;IAChC,MAAM;AAAEA,MAAAA,IAAI,GAAGR;KAAc,GAAG,IAAI,CAACS,IAAI;AAEzCC,IAAAA,MAAM,CACJ,CAAkEP,+DAAAA,EAAAA,KAAK,CAACQ,IAAI,CAC1E,IACF,CAAC,CAAA,YAAA,EAAeH,IAAI,CAAA,CAAE,EACtBL,KAAK,CAACS,QAAQ,CAACJ,IAAI,CACrB,CAAC;AAED,IAAA,OAAOA,IAAI;AACb;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIK,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,qBAAqB,CAAC;;AAEvC;AACAA,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAE,yBAAyB,CAAC;;AAElE;AACA,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,SAAS,EAAE;AACvBF,MAAAA,OAAO,CAACC,IAAI,CAAC,CAAA,+BAAA,CAAiC,CAAC;AACjD;;AAEA;AACA,IAAA,IAAI,IAAI,CAACN,IAAI,CAACQ,mBAAmB,EAAE;AACjCH,MAAAA,OAAO,CAACC,IAAI,CAAC,CAAA,0CAAA,CAA4C,CAAC;AAC5D;;AAEA;AACA,IAAA,IAAI,IAAI,CAACN,IAAI,CAACS,SAAS,EAAE;AACvBJ,MAAAA,OAAO,CAACC,IAAI,CAAC,CAAA,+BAAA,CAAiC,CAAC;AACjD;AAEA,IAAA,OAAOD,OAAO,CAACH,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACQ,oBAAA,CAAAC,QAAA,EAjDoBd,oBAAoB,CAAA;;;;"}

package/dist/components/hds/layout/flex/index.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { HdsLayoutFlexDirectionValues, HdsLayoutFlexJustifyValues, HdsLayoutFlexAlignValues, HdsLayoutFlexGapValues } from './types.js';
+import { HdsLayoutFlexDirectionValues, HdsLayoutFlexGapValues, HdsLayoutFlexJustifyValues, HdsLayoutFlexAlignValues } from './types.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -15,6 +15,7 @@ const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;
 const DIRECTIONS = Object.values(HdsLayoutFlexDirectionValues);
 const JUSTIFYS = Object.values(HdsLayoutFlexJustifyValues);
 const ALIGNS = Object.values(HdsLayoutFlexAlignValues);
+const DEFAULT_GAP = HdsLayoutFlexGapValues.Zero;
 const GAPS = Object.values(HdsLayoutFlexGapValues);
 class HdsLayoutFlex extends Component {
   get componentTag() {
@@ -47,7 +48,7 @@ class HdsLayoutFlex extends Component {
   }
   get gap() {
     const {
-      gap
+      gap = DEFAULT_GAP
     } = this.args;
     if (gap) {
       assert(`@gap for "Hds::Layout::Flex" must be a single value or an array of two values of one of the following: ${GAPS.join(', '
@@ -99,5 +100,5 @@ class HdsLayoutFlex extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsLayoutFlex);
 
-export { ALIGNS, DEFAULT_DIRECTION, DIRECTIONS, GAPS, JUSTIFYS, HdsLayoutFlex as default };
+export { ALIGNS, DEFAULT_DIRECTION, DEFAULT_GAP, DIRECTIONS, GAPS, JUSTIFYS, HdsLayoutFlex as default };
 //# sourceMappingURL=index.js.map

package/dist/components/hds/layout/flex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/flex/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';\n\nimport type { ComponentLike } from '@glint/template';\n\nimport type { HdsLayoutFlexItemSignature } from './item.ts';\n\nimport {\n  HdsLayoutFlexDirectionValues,\n  HdsLayoutFlexJustifyValues,\n  HdsLayoutFlexAlignValues,\n  HdsLayoutFlexGapValues,\n} from './types.ts';\n\nimport type {\n  HdsLayoutFlexDirections,\n  HdsLayoutFlexJustifys,\n  HdsLayoutFlexAligns,\n  HdsLayoutFlexGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;\nexport const DIRECTIONS: string[] = Object.values(HdsLayoutFlexDirectionValues);\nexport const JUSTIFYS: string[] = Object.values(HdsLayoutFlexJustifyValues);\nexport const ALIGNS: string[] = Object.values(HdsLayoutFlexAlignValues);\nexport const GAPS: string[] = Object.values(HdsLayoutFlexGapValues);\n\nexport interface HdsLayoutFlexSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    direction?: HdsLayoutFlexDirections;\n    justify?: HdsLayoutFlexJustifys;\n    align?: HdsLayoutFlexAligns;\n    wrap?: boolean;\n    gap?: HdsLayoutFlexGaps | [HdsLayoutFlexGaps, HdsLayoutFlexGaps];\n    isInline?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutFlexItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get direction(): HdsLayoutFlexDirections {\n    const { direction = DEFAULT_DIRECTION } = this.args;\n\n    assert(\n      `@direction for \"Hds::Layout::Flex\" must be one of the following: ${DIRECTIONS.join(\n        ', '\n      )}; received: ${direction}`,\n      DIRECTIONS.includes(direction)\n    );\n\n    return direction;\n  }\n\n  get justify(): HdsLayoutFlexJustifys | undefined {\n    const { justify } = this.args;\n\n    if (justify) {\n      assert(\n        `@justify for \"Hds::Layout::Flex\" must be one of the following: ${JUSTIFYS.join(\n          ', '\n        )}; received: ${justify}`,\n        JUSTIFYS.includes(justify)\n      );\n    }\n\n    return justify;\n  }\n\n  get align(): HdsLayoutFlexAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Flex\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutFlexGaps]\n    | [HdsLayoutFlexGaps, HdsLayoutFlexGaps]\n    | undefined {\n    const { gap } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Flex\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  get classNames() {\n    const classes = ['hds-layout-flex'];\n\n    // add a class based on the @direction argument\n    classes.push(`hds-layout-flex--direction-${this.direction}`);\n\n    // add a class based on the @justify argument\n    if (this.justify) {\n      classes.push(`hds-layout-flex--justify-content-${this.justify}`);\n    }\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-flex--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    // add a class based on the @wrap argument\n    if (this.args.wrap) {\n      classes.push('hds-layout-flex--has-wrapping');\n    }\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-layout-flex--is-inline');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_DIRECTION","HdsLayoutFlexDirectionValues","Row","DIRECTIONS","Object","values","JUSTIFYS","HdsLayoutFlexJustifyValues","ALIGNS","HdsLayoutFlexAlignValues","GAPS","HdsLayoutFlexGapValues","HdsLayoutFlex","Component","componentTag","args","tag","direction","assert","join","includes","justify","align","gap","Array","isArray","length","undefined","classNames","classes","push","wrap","isInline","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/flex/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';\n\nimport type { ComponentLike } from '@glint/template';\n\nimport type { HdsLayoutFlexItemSignature } from './item.ts';\n\nimport {\n  HdsLayoutFlexDirectionValues,\n  HdsLayoutFlexJustifyValues,\n  HdsLayoutFlexAlignValues,\n  HdsLayoutFlexGapValues,\n} from './types.ts';\n\nimport type {\n  HdsLayoutFlexDirections,\n  HdsLayoutFlexJustifys,\n  HdsLayoutFlexAligns,\n  HdsLayoutFlexGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;\nexport const DIRECTIONS: HdsLayoutFlexDirections[] = Object.values(\n  HdsLayoutFlexDirectionValues\n);\nexport const JUSTIFYS: HdsLayoutFlexJustifys[] = Object.values(\n  HdsLayoutFlexJustifyValues\n);\nexport const ALIGNS: HdsLayoutFlexAligns[] = Object.values(\n  HdsLayoutFlexAlignValues\n);\nexport const DEFAULT_GAP = HdsLayoutFlexGapValues.Zero;\nexport const GAPS: HdsLayoutFlexGaps[] = Object.values(HdsLayoutFlexGapValues);\n\nexport interface HdsLayoutFlexSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    direction?: HdsLayoutFlexDirections;\n    justify?: HdsLayoutFlexJustifys;\n    align?: HdsLayoutFlexAligns;\n    wrap?: boolean;\n    gap?: HdsLayoutFlexGaps | [HdsLayoutFlexGaps, HdsLayoutFlexGaps];\n    isInline?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutFlexItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get direction(): HdsLayoutFlexDirections {\n    const { direction = DEFAULT_DIRECTION } = this.args;\n\n    assert(\n      `@direction for \"Hds::Layout::Flex\" must be one of the following: ${DIRECTIONS.join(\n        ', '\n      )}; received: ${direction}`,\n      DIRECTIONS.includes(direction)\n    );\n\n    return direction;\n  }\n\n  get justify(): HdsLayoutFlexJustifys | undefined {\n    const { justify } = this.args;\n\n    if (justify) {\n      assert(\n        `@justify for \"Hds::Layout::Flex\" must be one of the following: ${JUSTIFYS.join(\n          ', '\n        )}; received: ${justify}`,\n        JUSTIFYS.includes(justify)\n      );\n    }\n\n    return justify;\n  }\n\n  get align(): HdsLayoutFlexAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Flex\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutFlexGaps]\n    | [HdsLayoutFlexGaps, HdsLayoutFlexGaps]\n    | undefined {\n    const { gap = DEFAULT_GAP } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Flex\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  get classNames(): string {\n    const classes = ['hds-layout-flex'];\n\n    // add a class based on the @direction argument\n    classes.push(`hds-layout-flex--direction-${this.direction}`);\n\n    // add a class based on the @justify argument\n    if (this.justify) {\n      classes.push(`hds-layout-flex--justify-content-${this.justify}`);\n    }\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-flex--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    // add a class based on the @wrap argument\n    if (this.args.wrap) {\n      classes.push('hds-layout-flex--has-wrapping');\n    }\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-layout-flex--is-inline');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_DIRECTION","HdsLayoutFlexDirectionValues","Row","DIRECTIONS","Object","values","JUSTIFYS","HdsLayoutFlexJustifyValues","ALIGNS","HdsLayoutFlexAlignValues","DEFAULT_GAP","HdsLayoutFlexGapValues","Zero","GAPS","HdsLayoutFlex","Component","componentTag","args","tag","direction","assert","join","includes","justify","align","gap","Array","isArray","length","undefined","classNames","classes","push","wrap","isInline","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/layout/flex/types.js

@@ -25,6 +25,7 @@ let HdsLayoutFlexAlignValues = /*#__PURE__*/function (HdsLayoutFlexAlignValues)
   return HdsLayoutFlexAlignValues;
 }({});
 let HdsLayoutFlexGapValues = /*#__PURE__*/function (HdsLayoutFlexGapValues) {
+  HdsLayoutFlexGapValues["Zero"] = "0";
   HdsLayoutFlexGapValues["Four"] = "4";
   HdsLayoutFlexGapValues["Eight"] = "8";
   HdsLayoutFlexGapValues["Twelve"] = "12";

package/dist/components/hds/layout/flex/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/flex/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutFlexDirectionValues {\n  Row = 'row',\n  Column = 'column',\n}\n\nexport type HdsLayoutFlexDirections = `${HdsLayoutFlexDirectionValues}`;\n\nexport enum HdsLayoutFlexJustifyValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  SpaceBetween = 'space-between',\n  SpaceAround = 'space-around',\n  SpaceEvenly = 'space-evenly',\n}\n\nexport type HdsLayoutFlexJustifys = `${HdsLayoutFlexJustifyValues}`;\n\nexport enum HdsLayoutFlexAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutFlexAligns = `${HdsLayoutFlexAlignValues}`;\n\nexport enum HdsLayoutFlexGapValues {\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutFlexGaps = `${HdsLayoutFlexGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutFlexDirectionValues","HdsLayoutFlexJustifyValues","HdsLayoutFlexAlignValues","HdsLayoutFlexGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AAO5BC,IAAAA,0BAA0B,0BAA1BA,0BAA0B,EAAA;EAA1BA,0BAA0B,CAAA,OAAA,CAAA,GAAA,OAAA;EAA1BA,0BAA0B,CAAA,QAAA,CAAA,GAAA,QAAA;EAA1BA,0BAA0B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;AAAA,EAAA,OAA1BA,0BAA0B;AAAA,CAAA,CAAA,EAAA;AAW1BC,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAYlC;;AAEA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/flex/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutFlexDirectionValues {\n  Row = 'row',\n  Column = 'column',\n}\n\nexport type HdsLayoutFlexDirections = `${HdsLayoutFlexDirectionValues}`;\n\nexport enum HdsLayoutFlexJustifyValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  SpaceBetween = 'space-between',\n  SpaceAround = 'space-around',\n  SpaceEvenly = 'space-evenly',\n}\n\nexport type HdsLayoutFlexJustifys = `${HdsLayoutFlexJustifyValues}`;\n\nexport enum HdsLayoutFlexAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutFlexAligns = `${HdsLayoutFlexAlignValues}`;\n\nexport enum HdsLayoutFlexGapValues {\n  'Zero' = '0',\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutFlexGaps = `${HdsLayoutFlexGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutFlexDirectionValues","HdsLayoutFlexJustifyValues","HdsLayoutFlexAlignValues","HdsLayoutFlexGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AAO5BC,IAAAA,0BAA0B,0BAA1BA,0BAA0B,EAAA;EAA1BA,0BAA0B,CAAA,OAAA,CAAA,GAAA,OAAA;EAA1BA,0BAA0B,CAAA,QAAA,CAAA,GAAA,QAAA;EAA1BA,0BAA0B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;AAAA,EAAA,OAA1BA,0BAA0B;AAAA,CAAA,CAAA,EAAA;AAW1BC,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAalC;;AAEA;;;;"}

package/dist/components/hds/layout/grid/index.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.js';
+import { HdsLayoutGridGapValues, HdsLayoutGridAlignValues } from './types.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -12,6 +12,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  */
 
 const ALIGNS = Object.values(HdsLayoutGridAlignValues);
+const DEFAULT_GAP = HdsLayoutGridGapValues.Zero;
 const GAPS = Object.values(HdsLayoutGridGapValues);
 class HdsLayoutGrid extends Component {
   get componentTag() {
@@ -28,7 +29,7 @@ class HdsLayoutGrid extends Component {
   }
   get gap() {
     const {
-      gap
+      gap = DEFAULT_GAP
     } = this.args;
     if (gap) {
       assert(`@gap for "Hds::Layout::Grid" must be a single value or an array of two values of one of the following: ${GAPS.join(', '
@@ -87,5 +88,5 @@ class HdsLayoutGrid extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsLayoutGrid);
 
-export { ALIGNS, GAPS, HdsLayoutGrid as default };
+export { ALIGNS, DEFAULT_GAP, GAPS, HdsLayoutGrid as default };
 //# sourceMappingURL=index.js.map

package/dist/components/hds/layout/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/grid/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';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsLayoutGridItemSignature } from '../grid/item.ts';\n\nimport { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';\n\nimport type {\n  HdsLayoutGridAligns,\n  HdsLayoutGridGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);\nexport const GAPS: string[] = Object.values(HdsLayoutGridGapValues);\n\nexport interface HdsLayoutGridSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    columnMinWidth?: string;\n    columnWidth?: string;\n    align?: HdsLayoutGridAligns;\n    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutGridItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get align(): HdsLayoutGridAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Grid\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutGridGaps]\n    | [HdsLayoutGridGaps, HdsLayoutGridGaps]\n    | undefined {\n    const { gap } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Grid\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  /*\n    LOGIC:\n\n    If columnMinWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) We use the fallback value of \"auto-fit\" for --hds-layout-grid-column-fill-type (reults in a more fluid layout)\n\n    If columnWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) we set --hds-layout-grid-column-fill-type to \"auto-fill\" (results in a more fixed layout)\n\n    If both columnMinWidth & columnWidth are passed in:\n    1) We throw an error, as it doesn't make sense in the context of a CSS grid layout (too complex to determine which to use & desired behavior)\n  */\n  get inlineStyles(): Record<string, unknown> {\n    const inlineStyles: {\n      '--hds-layout-grid-column-min-width'?: string;\n      '--hds-layout-grid-column-fill-type'?: string;\n    } = {};\n\n    // if both columnMinWidth and columnWidth are passed in, we throw an error\n    assert(\n      `@columnMinWidth and @columnWidth for \"Hds::Layout::Grid\" cannot be used together`,\n      !(this.args.columnMinWidth && this.args.columnWidth)\n    );\n\n    if (this.args.columnMinWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnMinWidth;\n    } else if (this.args.columnWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnWidth;\n      inlineStyles['--hds-layout-grid-column-fill-type'] = 'auto-fill';\n    }\n\n    return inlineStyles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-layout-grid'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-grid--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNS","Object","values","HdsLayoutGridAlignValues","GAPS","HdsLayoutGridGapValues","HdsLayoutGrid","Component","componentTag","args","tag","align","assert","join","includes","gap","Array","isArray","length","undefined","inlineStyles","columnMinWidth","columnWidth","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/grid/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';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsLayoutGridItemSignature } from '../grid/item.ts';\n\nimport { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';\n\nimport type {\n  HdsLayoutGridAligns,\n  HdsLayoutGridGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const ALIGNS: HdsLayoutGridAligns[] = Object.values(\n  HdsLayoutGridAlignValues\n);\nexport const DEFAULT_GAP = HdsLayoutGridGapValues.Zero;\nexport const GAPS: HdsLayoutGridGaps[] = Object.values(HdsLayoutGridGapValues);\n\nexport interface HdsLayoutGridSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    columnMinWidth?: string;\n    columnWidth?: string;\n    align?: HdsLayoutGridAligns;\n    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutGridItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get align(): HdsLayoutGridAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Grid\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutGridGaps]\n    | [HdsLayoutGridGaps, HdsLayoutGridGaps]\n    | undefined {\n    const { gap = DEFAULT_GAP } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Grid\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  /*\n    LOGIC:\n\n    If columnMinWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) We use the fallback value of \"auto-fit\" for --hds-layout-grid-column-fill-type (reults in a more fluid layout)\n\n    If columnWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) we set --hds-layout-grid-column-fill-type to \"auto-fill\" (results in a more fixed layout)\n\n    If both columnMinWidth & columnWidth are passed in:\n    1) We throw an error, as it doesn't make sense in the context of a CSS grid layout (too complex to determine which to use & desired behavior)\n  */\n  get inlineStyles(): Record<string, unknown> {\n    const inlineStyles: {\n      '--hds-layout-grid-column-min-width'?: string;\n      '--hds-layout-grid-column-fill-type'?: string;\n    } = {};\n\n    // if both columnMinWidth and columnWidth are passed in, we throw an error\n    assert(\n      `@columnMinWidth and @columnWidth for \"Hds::Layout::Grid\" cannot be used together`,\n      !(this.args.columnMinWidth && this.args.columnWidth)\n    );\n\n    if (this.args.columnMinWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnMinWidth;\n    } else if (this.args.columnWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnWidth;\n      inlineStyles['--hds-layout-grid-column-fill-type'] = 'auto-fill';\n    }\n\n    return inlineStyles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-layout-grid'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-grid--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNS","Object","values","HdsLayoutGridAlignValues","DEFAULT_GAP","HdsLayoutGridGapValues","Zero","GAPS","HdsLayoutGrid","Component","componentTag","args","tag","align","assert","join","includes","gap","Array","isArray","length","undefined","inlineStyles","columnMinWidth","columnWidth","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/layout/grid/types.js

@@ -11,6 +11,7 @@ let HdsLayoutGridAlignValues = /*#__PURE__*/function (HdsLayoutGridAlignValues)
   return HdsLayoutGridAlignValues;
 }({});
 let HdsLayoutGridGapValues = /*#__PURE__*/function (HdsLayoutGridGapValues) {
+  HdsLayoutGridGapValues["Zero"] = "0";
   HdsLayoutGridGapValues["Four"] = "4";
   HdsLayoutGridGapValues["Eight"] = "8";
   HdsLayoutGridGapValues["Twelve"] = "12";

package/dist/components/hds/layout/grid/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/grid/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutGridAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;\n\nexport enum HdsLayoutGridGapValues {\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutGridGaps = `${HdsLayoutGridGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutGridAlignValues","HdsLayoutGridGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAYlC;;AAEA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/grid/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutGridAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;\n\nexport enum HdsLayoutGridGapValues {\n  'Zero' = '0',\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutGridGaps = `${HdsLayoutGridGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutGridAlignValues","HdsLayoutGridGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAalC;;AAEA;;;;"}

package/dist/components/hds/link/inline.js

@@ -11,9 +11,9 @@ var TEMPLATE = precompileTemplate("{{! IMPORTANT: we removed the newlines before
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const DEFAULT_ICONPOSITION = HdsLinkIconPositionValues.Trailing;
+const DEFAULT_ICON_POSITION = HdsLinkIconPositionValues.Trailing;
 const DEFAULT_COLOR = HdsLinkColorValues.Primary;
-const ICONPOSITIONS = Object.values(HdsLinkIconPositionValues);
+const ICON_POSITIONS = Object.values(HdsLinkIconPositionValues);
 const COLORS = Object.values(HdsLinkColorValues);
 class HdsLinkInline extends Component {
   constructor(owner, args) {
@@ -45,9 +45,9 @@ class HdsLinkInline extends Component {
    */
   get iconPosition() {
     const {
-      iconPosition = DEFAULT_ICONPOSITION
+      iconPosition = DEFAULT_ICON_POSITION
     } = this.args;
-    assert(`@iconPosition for "Hds::Link::Inline" must be one of the following: ${ICONPOSITIONS.join(', ')}; received: ${iconPosition}`, ICONPOSITIONS.includes(iconPosition));
+    assert(`@iconPosition for "Hds::Link::Inline" must be one of the following: ${ICON_POSITIONS.join(', ')}; received: ${iconPosition}`, ICON_POSITIONS.includes(iconPosition));
     return iconPosition;
   }
 
@@ -69,5 +69,5 @@ class HdsLinkInline extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsLinkInline);
 
-export { COLORS, DEFAULT_COLOR, DEFAULT_ICONPOSITION, ICONPOSITIONS, HdsLinkInline as default };
+export { COLORS, DEFAULT_COLOR, DEFAULT_ICON_POSITION, ICON_POSITIONS, HdsLinkInline as default };
 //# sourceMappingURL=inline.js.map

package/dist/components/hds/link/inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline.js","sources":["../../../../src/components/hds/link/inline.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 { HdsLinkColorValues, HdsLinkIconPositionValues } from './types.ts';\n\nimport type { HdsInteractiveSignature } from '../interactive/';\nimport type { HdsLinkColors, HdsLinkIconPositions } from './types.ts';\nimport type { HdsIconSignature } from '../icon';\nimport type Owner from '@ember/owner';\n\nexport const DEFAULT_ICONPOSITION = HdsLinkIconPositionValues.Trailing;\nexport const DEFAULT_COLOR = HdsLinkColorValues.Primary;\nexport const ICONPOSITIONS: string[] = Object.values(HdsLinkIconPositionValues);\nexport const COLORS: string[] = Object.values(HdsLinkColorValues);\n\nexport interface HdsLinkInlineSignature {\n  Args: HdsInteractiveSignature['Args'] & {\n    color?: HdsLinkColors;\n    icon?: HdsIconSignature['Args']['name'];\n    iconPosition?: HdsLinkIconPositions;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HdsInteractiveSignature['Element'];\n}\n\nexport default class HdsLinkInline extends Component<HdsLinkInlineSignature> {\n  constructor(owner: Owner, args: HdsLinkInlineSignature['Args']) {\n    super(owner, args);\n    if (!(this.args.href || this.args.route)) {\n      assert('@href or @route must be defined for <Hds::Link::Inline>');\n    }\n  }\n\n  /**\n   * @param color\n   * @type {string}\n   * @default primary\n   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`\n   */\n  get color(): HdsLinkColors {\n    const { color = DEFAULT_COLOR } = this.args;\n\n    assert(\n      `@color for \"Hds::Link::Inline\" must be one of the following: ${COLORS.join(\n        ', '\n      )}; received: ${color}`,\n      COLORS.includes(color)\n    );\n\n    return color;\n  }\n\n  /**\n   * @param iconPosition\n   * @type {HdsLinkIconPositions}\n   * @default leading\n   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`\n   */\n  get iconPosition(): HdsLinkIconPositions {\n    const { iconPosition = DEFAULT_ICONPOSITION } = this.args;\n\n    assert(\n      `@iconPosition for \"Hds::Link::Inline\" must be one of the following: ${ICONPOSITIONS.join(\n        ', '\n      )}; received: ${iconPosition}`,\n      ICONPOSITIONS.includes(iconPosition)\n    );\n\n    return iconPosition;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method LinkInline#classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-link-inline'];\n\n    // add a class based on the @color argument\n    classes.push(`hds-link-inline--color-${this.color}`);\n\n    // add a class based on the @iconPosition argument\n    classes.push(`hds-link-inline--icon-${this.iconPosition}`);\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_ICONPOSITION","HdsLinkIconPositionValues","Trailing","DEFAULT_COLOR","HdsLinkColorValues","Primary","ICONPOSITIONS","Object","values","COLORS","HdsLinkInline","Component","constructor","owner","args","href","route","assert","color","join","includes","iconPosition","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAWaA,MAAAA,oBAAoB,GAAGC,yBAAyB,CAACC;AACjDC,MAAAA,aAAa,GAAGC,kBAAkB,CAACC;AACzC,MAAMC,aAAuB,GAAGC,MAAM,CAACC,MAAM,CAACP,yBAAyB;AACvE,MAAMQ,MAAgB,GAAGF,MAAM,CAACC,MAAM,CAACJ,kBAAkB;AAcjD,MAAMM,aAAa,SAASC,SAAS,CAAyB;AAC3EC,EAAAA,WAAWA,CAACC,KAAY,EAAEC,IAAoC,EAAE;AAC9D,IAAA,KAAK,CAACD,KAAK,EAAEC,IAAI,CAAC;AAClB,IAAA,IAAI,EAAE,IAAI,CAACA,IAAI,CAACC,IAAI,IAAI,IAAI,CAACD,IAAI,CAACE,KAAK,CAAC,EAAE;MACxCC,MAAM,CAAC,yDAAyD,CAAC;AACnE;AACF;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,KAAKA,GAAkB;IACzB,MAAM;AAAEA,MAAAA,KAAK,GAAGf;KAAe,GAAG,IAAI,CAACW,IAAI;AAE3CG,IAAAA,MAAM,CACJ,CAAgER,6DAAAA,EAAAA,MAAM,CAACU,IAAI,CACzE,IACF,CAAC,CAAA,YAAA,EAAeD,KAAK,CAAA,CAAE,EACvBT,MAAM,CAACW,QAAQ,CAACF,KAAK,CACvB,CAAC;AAED,IAAA,OAAOA,KAAK;AACd;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIG,YAAYA,GAAyB;IACvC,MAAM;AAAEA,MAAAA,YAAY,GAAGrB;KAAsB,GAAG,IAAI,CAACc,IAAI;AAEzDG,IAAAA,MAAM,CACJ,CAAuEX,oEAAAA,EAAAA,aAAa,CAACa,IAAI,CACvF,IACF,CAAC,CAAA,YAAA,EAAeE,YAAY,CAAA,CAAE,EAC9Bf,aAAa,CAACc,QAAQ,CAACC,YAAY,CACrC,CAAC;AAED,IAAA,OAAOA,YAAY;AACrB;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,iBAAiB,CAAC;;AAEnC;IACAA,OAAO,CAACC,IAAI,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAACN,KAAK,EAAE,CAAC;;AAEpD;IACAK,OAAO,CAACC,IAAI,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAACH,YAAY,EAAE,CAAC;AAE1D,IAAA,OAAOE,OAAO,CAACJ,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACM,oBAAA,CAAAC,QAAA,EA9DoBhB,aAAa,CAAA;;;;"}
+{"version":3,"file":"inline.js","sources":["../../../../src/components/hds/link/inline.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 { HdsLinkColorValues, HdsLinkIconPositionValues } from './types.ts';\n\nimport type { HdsInteractiveSignature } from '../interactive/';\nimport type { HdsLinkColors, HdsLinkIconPositions } from './types.ts';\nimport type { HdsIconSignature } from '../icon';\nimport type Owner from '@ember/owner';\n\nexport const DEFAULT_ICON_POSITION = HdsLinkIconPositionValues.Trailing;\nexport const DEFAULT_COLOR = HdsLinkColorValues.Primary;\nexport const ICON_POSITIONS: HdsLinkIconPositions[] = Object.values(\n  HdsLinkIconPositionValues\n);\nexport const COLORS: HdsLinkColors[] = Object.values(HdsLinkColorValues);\n\nexport interface HdsLinkInlineSignature {\n  Args: HdsInteractiveSignature['Args'] & {\n    color?: HdsLinkColors;\n    icon?: HdsIconSignature['Args']['name'];\n    iconPosition?: HdsLinkIconPositions;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HdsInteractiveSignature['Element'];\n}\n\nexport default class HdsLinkInline extends Component<HdsLinkInlineSignature> {\n  constructor(owner: Owner, args: HdsLinkInlineSignature['Args']) {\n    super(owner, args);\n    if (!(this.args.href || this.args.route)) {\n      assert('@href or @route must be defined for <Hds::Link::Inline>');\n    }\n  }\n\n  /**\n   * @param color\n   * @type {string}\n   * @default primary\n   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`\n   */\n  get color(): HdsLinkColors {\n    const { color = DEFAULT_COLOR } = this.args;\n\n    assert(\n      `@color for \"Hds::Link::Inline\" must be one of the following: ${COLORS.join(\n        ', '\n      )}; received: ${color}`,\n      COLORS.includes(color)\n    );\n\n    return color;\n  }\n\n  /**\n   * @param iconPosition\n   * @type {HdsLinkIconPositions}\n   * @default leading\n   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`\n   */\n  get iconPosition(): HdsLinkIconPositions {\n    const { iconPosition = DEFAULT_ICON_POSITION } = this.args;\n\n    assert(\n      `@iconPosition for \"Hds::Link::Inline\" must be one of the following: ${ICON_POSITIONS.join(\n        ', '\n      )}; received: ${iconPosition}`,\n      ICON_POSITIONS.includes(iconPosition)\n    );\n\n    return iconPosition;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method LinkInline#classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-link-inline'];\n\n    // add a class based on the @color argument\n    classes.push(`hds-link-inline--color-${this.color}`);\n\n    // add a class based on the @iconPosition argument\n    classes.push(`hds-link-inline--icon-${this.iconPosition}`);\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_ICON_POSITION","HdsLinkIconPositionValues","Trailing","DEFAULT_COLOR","HdsLinkColorValues","Primary","ICON_POSITIONS","Object","values","COLORS","HdsLinkInline","Component","constructor","owner","args","href","route","assert","color","join","includes","iconPosition","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAWaA,MAAAA,qBAAqB,GAAGC,yBAAyB,CAACC;AAClDC,MAAAA,aAAa,GAAGC,kBAAkB,CAACC;AACzC,MAAMC,cAAsC,GAAGC,MAAM,CAACC,MAAM,CACjEP,yBACF;AACO,MAAMQ,MAAuB,GAAGF,MAAM,CAACC,MAAM,CAACJ,kBAAkB;AAcxD,MAAMM,aAAa,SAASC,SAAS,CAAyB;AAC3EC,EAAAA,WAAWA,CAACC,KAAY,EAAEC,IAAoC,EAAE;AAC9D,IAAA,KAAK,CAACD,KAAK,EAAEC,IAAI,CAAC;AAClB,IAAA,IAAI,EAAE,IAAI,CAACA,IAAI,CAACC,IAAI,IAAI,IAAI,CAACD,IAAI,CAACE,KAAK,CAAC,EAAE;MACxCC,MAAM,CAAC,yDAAyD,CAAC;AACnE;AACF;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,KAAKA,GAAkB;IACzB,MAAM;AAAEA,MAAAA,KAAK,GAAGf;KAAe,GAAG,IAAI,CAACW,IAAI;AAE3CG,IAAAA,MAAM,CACJ,CAAgER,6DAAAA,EAAAA,MAAM,CAACU,IAAI,CACzE,IACF,CAAC,CAAA,YAAA,EAAeD,KAAK,CAAA,CAAE,EACvBT,MAAM,CAACW,QAAQ,CAACF,KAAK,CACvB,CAAC;AAED,IAAA,OAAOA,KAAK;AACd;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIG,YAAYA,GAAyB;IACvC,MAAM;AAAEA,MAAAA,YAAY,GAAGrB;KAAuB,GAAG,IAAI,CAACc,IAAI;AAE1DG,IAAAA,MAAM,CACJ,CAAuEX,oEAAAA,EAAAA,cAAc,CAACa,IAAI,CACxF,IACF,CAAC,CAAA,YAAA,EAAeE,YAAY,CAAA,CAAE,EAC9Bf,cAAc,CAACc,QAAQ,CAACC,YAAY,CACtC,CAAC;AAED,IAAA,OAAOA,YAAY;AACrB;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,iBAAiB,CAAC;;AAEnC;IACAA,OAAO,CAACC,IAAI,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAACN,KAAK,EAAE,CAAC;;AAEpD;IACAK,OAAO,CAACC,IAAI,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAACH,YAAY,EAAE,CAAC;AAE1D,IAAA,OAAOE,OAAO,CAACJ,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACM,oBAAA,CAAAC,QAAA,EA9DoBhB,aAAa,CAAA;;;;"}

package/dist/components/hds/link/standalone.js

@@ -11,10 +11,10 @@ var TEMPLATE = precompileTemplate("<Hds::Interactive\n  class={{this.classNames}
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const DEFAULT_ICONPOSITION = HdsLinkIconPositionValues.Leading;
+const DEFAULT_ICON_POSITION = HdsLinkIconPositionValues.Leading;
 const DEFAULT_COLOR = HdsLinkColorValues.Primary;
 const DEFAULT_SIZE = HdsLinkStandaloneSizeValues.Medium;
-const ICONPOSITIONS = Object.values(HdsLinkIconPositionValues);
+const ICON_POSITIONS = Object.values(HdsLinkIconPositionValues);
 const COLORS = Object.values(HdsLinkColorValues);
 const SIZES = Object.values(HdsLinkStandaloneSizeValues);
 class HdsLinkStandalone extends Component {
@@ -74,9 +74,9 @@ class HdsLinkStandalone extends Component {
    */
   get iconPosition() {
     const {
-      iconPosition = DEFAULT_ICONPOSITION
+      iconPosition = DEFAULT_ICON_POSITION
     } = this.args;
-    assert(`@iconPosition for "Hds::Link::Standalone" must be one of the following: ${ICONPOSITIONS.join(', ')}; received: ${iconPosition}`, ICONPOSITIONS.includes(iconPosition));
+    assert(`@iconPosition for "Hds::Link::Standalone" must be one of the following: ${ICON_POSITIONS.join(', ')}; received: ${iconPosition}`, ICON_POSITIONS.includes(iconPosition));
     return iconPosition;
   }
 
@@ -129,5 +129,5 @@ class HdsLinkStandalone extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsLinkStandalone);
 
-export { COLORS, DEFAULT_COLOR, DEFAULT_ICONPOSITION, DEFAULT_SIZE, ICONPOSITIONS, SIZES, HdsLinkStandalone as default };
+export { COLORS, DEFAULT_COLOR, DEFAULT_ICON_POSITION, DEFAULT_SIZE, ICON_POSITIONS, SIZES, HdsLinkStandalone as default };
 //# sourceMappingURL=standalone.js.map