@coveo/atomic 3.35.0-pre.c5c77d8c36 → 3.35.0-pre.c951c9bf6f

package/dist/atomic/components/atomic-sort-dropdown.js.map

@@ -1 +1 @@
-{"file":"atomic-sort-dropdown.js","mappings":"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","names":["AtomicSortDropdown"],"sources":["src/components/common/sort/container.tsx","src/components/common/sort/stencil-guard.tsx","src/components/common/sort/stencil-label.tsx","src/components/common/sort/stencil-option.tsx","src/components/common/sort/stencil-select.tsx","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.pcss?tag=atomic-sort-dropdown&encapsulation=shadow","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\nexport const SortContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div class=\"text-on-background flex flex-wrap items-center\">{children}</div>\n  );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface SortGuardProps {\n  hasError: boolean;\n  firstSearchExecuted: boolean;\n  hasResults: boolean;\n}\nexport const SortGuard: FunctionalComponent<SortGuardProps> = (\n  {hasError, firstSearchExecuted, hasResults},\n  children\n) => {\n  if (hasError) {\n    return;\n  }\n\n  if (!firstSearchExecuted) {\n    return (\n      <div\n        part=\"placeholder\"\n        aria-hidden\n        class=\"bg-neutral my-2 h-6 w-44 animate-pulse rounded\"\n      ></div>\n    );\n  }\n\n  if (!hasResults) {\n    return;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\ninterface SortLabelProps {\n  id: string;\n  i18n: i18n;\n}\n\nexport const SortLabel: FunctionalComponent<SortLabelProps> = ({id, i18n}) => {\n  return (\n    <label\n      class=\"m-2 cursor-pointer text-sm font-bold\"\n      part=\"label\"\n      htmlFor={id}\n    >\n      {i18n.t('with-colon', {\n        text: i18n.t('sort-by'),\n      })}\n    </label>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\nexport interface SortOptionProps {\n  value: string;\n  selected: boolean;\n  i18n: i18n;\n  label: string;\n}\nexport const SortOption: FunctionalComponent<SortOptionProps> = ({\n  value,\n  selected,\n  i18n,\n  label,\n}) => {\n  return (\n    <option value={value} selected={selected}>\n      {i18n.t(label)}\n    </option>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg';\n\ninterface SortSelectProps {\n  id: string;\n  i18n: i18n;\n  onSelect: (opt: Event) => void;\n}\nexport const SortSelect: FunctionalComponent<SortSelectProps> = (\n  {i18n, id, onSelect},\n  children\n) => {\n  return (\n    <div class=\"relative\" part=\"select-parent\">\n      <select\n        id={id}\n        class=\"btn-outline-neutral h-10 grow cursor-pointer appearance-none pr-24 pl-3\"\n        part=\"select\"\n        aria-label={i18n.t('sort-by')}\n        onChange={(option) => onSelect(option)}\n      >\n        {children}\n      </select>\n      <div\n        part=\"select-separator\"\n        class=\"border-neutral pointer-events-none absolute top-px right-0 bottom-px flex w-10 items-center justify-center border-l\"\n      >\n        <atomic-icon class=\"w-2.5\" icon={ArrowBottomIcon}></atomic-icon>\n      </div>\n    </div>\n  );\n};\n","@import '../../../global/global.pcss';\n\nselect:hover + div,\nselect:focus-visible + div {\n  @apply border-primary-light text-primary-light;\n}\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {\n  Sort,\n  buildSort,\n  SortState,\n  parseCriterionExpression,\n  buildSearchStatus,\n  SearchStatus,\n  SearchStatusState,\n  TabManager,\n  TabManagerState,\n  buildTabManager,\n  loadSortCriteriaActions,\n} from '@coveo/headless';\nimport {Component, h, State, Element} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {randomID} from '../../../utils/utils';\nimport {SortContainer} from '../../common/sort/container';\nimport {SortGuard} from '../../common/sort/stencil-guard';\nimport {SortLabel} from '../../common/sort/stencil-label';\nimport {SortOption} from '../../common/sort/stencil-option';\nimport {SortSelect} from '../../common/sort/stencil-select';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting query results.\n *\n * @slot default - The `atomic-sort-expression` of the dropdown are slotted in.\n *\n * @part label - The \"Sort by\" label of the `<select>` element.\n * @part select-parent - The `<select>` element parent.\n * @part select - The `<select>` element of the dropdown list.\n * @part select-separator - The element separating the select from the icon.\n * @part placeholder - The dropdown placeholder for while the search interface is initializing.\n */\n@Component({\n  tag: 'atomic-sort-dropdown',\n  styleUrl: 'atomic-sort-dropdown.pcss',\n  shadow: true,\n})\nexport class AtomicSortDropdown implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  private sort!: Sort;\n  public searchStatus!: SearchStatus;\n  private id!: string;\n\n  @Element() host!: HTMLElement;\n\n  @State() @BindStateToController('sort') public sortState!: SortState;\n  @BindStateToController('searchStatus')\n  @State()\n  private searchStatusState!: SearchStatusState;\n  public tabManager!: TabManager;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  @State() public error!: Error;\n\n  connectedCallback(): void {\n    this.id ||= randomID('atomic-sort-dropdown-');\n  }\n\n  public initialize() {\n    this.buildOptions();\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n    this.sort = buildSort(this.bindings.engine, {\n      initialState: {\n        criterion: this.bindings.store.state.sortOptions[0]?.criteria,\n      },\n    });\n    this.tabManager = buildTabManager(this.bindings.engine);\n  }\n\n  private buildOptions() {\n    const sortExpressionElements = Array.from(\n      this.host.querySelectorAll('atomic-sort-expression')\n    );\n\n    if (!sortExpressionElements.length) {\n      this.error = new Error(\n        'The \"atomic-sort-dropdown\" element requires at least one \"atomic-sort-expression\" child.'\n      );\n      return;\n    }\n\n    this.bindings.store.state.sortOptions = sortExpressionElements.map(\n      ({expression, label, tabsIncluded, tabsExcluded}) => {\n        new Schema({\n          label: new StringValue({emptyAllowed: false, required: true}),\n        }).validate({label});\n\n        return {\n          tabs: {\n            included: tabsIncluded,\n            excluded: tabsExcluded,\n          },\n          criteria: parseCriterionExpression(expression),\n          expression,\n          label,\n        };\n      }\n    );\n  }\n\n  private get options() {\n    return this.bindings.store.state.sortOptions.filter(({tabs}) =>\n      shouldDisplayOnCurrentTab(\n        [...tabs.included],\n        [...tabs.excluded],\n        this.tabManagerState?.activeTab\n      )\n    );\n  }\n\n  private select(e: Event) {\n    const select = e.composedPath()[0] as HTMLSelectElement;\n    const option = this.options.find(\n      (option) => option.expression === select.value\n    );\n    option && this.sort.sortBy(option.criteria);\n  }\n\n  public componentShouldUpdate(): void {\n    if (\n      this.options.some(\n        (option) =>\n          option.expression.trim().replace(/\\s*,\\s*/g, ',') ===\n          this.sortState.sortCriteria.replace(/@/g, '')\n      )\n    ) {\n      return;\n    }\n\n    const action = loadSortCriteriaActions(\n      this.bindings.engine\n    ).updateSortCriterion(this.options[0]?.criteria);\n\n    this.bindings.engine.dispatch(action);\n  }\n\n  public render() {\n    const {hasError, hasResults, firstSearchExecuted} = this.searchStatusState;\n    const {\n      bindings: {i18n},\n      id,\n    } = this;\n\n    return [\n      <SortGuard\n        firstSearchExecuted={firstSearchExecuted}\n        hasError={hasError}\n        hasResults={hasResults}\n      >\n        <SortContainer>\n          <SortLabel i18n={i18n} id={id} />\n          <SortSelect i18n={i18n} id={id} onSelect={(evt) => this.select(evt)}>\n            {this.options.map(({label, criteria, expression}) => (\n              <SortOption\n                i18n={i18n}\n                label={label}\n                selected={this.sort.isSortedBy(criteria)}\n                value={expression}\n              />\n            ))}\n          </SortSelect>\n        </SortContainer>\n      </SortGuard>,\n      <slot></slot>,\n    ];\n  }\n}\n"],"version":3}
+{"file":"atomic-sort-dropdown.js","mappings":"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","names":["AtomicSortDropdown"],"sources":["src/components/common/sort/container.tsx","src/components/common/sort/stencil-guard.tsx","src/components/common/sort/stencil-label.tsx","src/components/common/sort/stencil-option.tsx","src/components/common/sort/stencil-select.tsx","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.pcss?tag=atomic-sort-dropdown&encapsulation=shadow","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div class=\"text-on-background flex flex-wrap items-center\">{children}</div>\n  );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface SortGuardProps {\n  hasError: boolean;\n  firstSearchExecuted: boolean;\n  hasResults: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortGuard: FunctionalComponent<SortGuardProps> = (\n  {hasError, firstSearchExecuted, hasResults},\n  children\n) => {\n  if (hasError) {\n    return;\n  }\n\n  if (!firstSearchExecuted) {\n    return (\n      <div\n        part=\"placeholder\"\n        aria-hidden\n        class=\"bg-neutral my-2 h-6 w-44 animate-pulse rounded\"\n      ></div>\n    );\n  }\n\n  if (!hasResults) {\n    return;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\ninterface SortLabelProps {\n  id: string;\n  i18n: i18n;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortLabel: FunctionalComponent<SortLabelProps> = ({id, i18n}) => {\n  return (\n    <label\n      class=\"m-2 cursor-pointer text-sm font-bold\"\n      part=\"label\"\n      htmlFor={id}\n    >\n      {i18n.t('with-colon', {\n        text: i18n.t('sort-by'),\n      })}\n    </label>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\ninterface SortOptionProps {\n  value: string;\n  selected: boolean;\n  i18n: i18n;\n  label: string;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortOption: FunctionalComponent<SortOptionProps> = ({\n  value,\n  selected,\n  i18n,\n  label,\n}) => {\n  return (\n    <option value={value} selected={selected}>\n      {i18n.t(label)}\n    </option>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg';\n\ninterface SortSelectProps {\n  id: string;\n  i18n: i18n;\n  onSelect: (opt: Event) => void;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortSelect: FunctionalComponent<SortSelectProps> = (\n  {i18n, id, onSelect},\n  children\n) => {\n  return (\n    <div class=\"relative\" part=\"select-parent\">\n      <select\n        id={id}\n        class=\"btn-outline-neutral h-10 grow cursor-pointer appearance-none pr-24 pl-3\"\n        part=\"select\"\n        aria-label={i18n.t('sort-by')}\n        onChange={(option) => onSelect(option)}\n      >\n        {children}\n      </select>\n      <div\n        part=\"select-separator\"\n        class=\"border-neutral pointer-events-none absolute top-px right-0 bottom-px flex w-10 items-center justify-center border-l\"\n      >\n        <atomic-icon class=\"w-2.5\" icon={ArrowBottomIcon}></atomic-icon>\n      </div>\n    </div>\n  );\n};\n","@import '../../../global/global.pcss';\n\nselect:hover + div,\nselect:focus-visible + div {\n  @apply border-primary-light text-primary-light;\n}\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {\n  Sort,\n  buildSort,\n  SortState,\n  parseCriterionExpression,\n  buildSearchStatus,\n  SearchStatus,\n  SearchStatusState,\n  TabManager,\n  TabManagerState,\n  buildTabManager,\n  loadSortCriteriaActions,\n} from '@coveo/headless';\nimport {Component, h, State, Element} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {randomID} from '../../../utils/utils';\nimport {SortContainer} from '../../common/sort/container';\nimport {SortGuard} from '../../common/sort/stencil-guard';\nimport {SortLabel} from '../../common/sort/stencil-label';\nimport {SortOption} from '../../common/sort/stencil-option';\nimport {SortSelect} from '../../common/sort/stencil-select';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting query results.\n *\n * @slot default - The `atomic-sort-expression` of the dropdown are slotted in.\n *\n * @part label - The \"Sort by\" label of the `<select>` element.\n * @part select-parent - The `<select>` element parent.\n * @part select - The `<select>` element of the dropdown list.\n * @part select-separator - The element separating the select from the icon.\n * @part placeholder - The dropdown placeholder for while the search interface is initializing.\n */\n@Component({\n  tag: 'atomic-sort-dropdown',\n  styleUrl: 'atomic-sort-dropdown.pcss',\n  shadow: true,\n})\nexport class AtomicSortDropdown implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  private sort!: Sort;\n  public searchStatus!: SearchStatus;\n  private id!: string;\n\n  @Element() host!: HTMLElement;\n\n  @State() @BindStateToController('sort') public sortState!: SortState;\n  @BindStateToController('searchStatus')\n  @State()\n  private searchStatusState!: SearchStatusState;\n  public tabManager!: TabManager;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  @State() public error!: Error;\n\n  connectedCallback(): void {\n    this.id ||= randomID('atomic-sort-dropdown-');\n  }\n\n  public initialize() {\n    this.buildOptions();\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n    this.sort = buildSort(this.bindings.engine, {\n      initialState: {\n        criterion: this.bindings.store.state.sortOptions[0]?.criteria,\n      },\n    });\n    this.tabManager = buildTabManager(this.bindings.engine);\n  }\n\n  private buildOptions() {\n    const sortExpressionElements = Array.from(\n      this.host.querySelectorAll('atomic-sort-expression')\n    );\n\n    if (!sortExpressionElements.length) {\n      this.error = new Error(\n        'The \"atomic-sort-dropdown\" element requires at least one \"atomic-sort-expression\" child.'\n      );\n      return;\n    }\n\n    this.bindings.store.state.sortOptions = sortExpressionElements.map(\n      ({expression, label, tabsIncluded, tabsExcluded}) => {\n        new Schema({\n          label: new StringValue({emptyAllowed: false, required: true}),\n        }).validate({label});\n\n        return {\n          tabs: {\n            included: tabsIncluded,\n            excluded: tabsExcluded,\n          },\n          criteria: parseCriterionExpression(expression),\n          expression,\n          label,\n        };\n      }\n    );\n  }\n\n  private get options() {\n    return this.bindings.store.state.sortOptions.filter(({tabs}) =>\n      shouldDisplayOnCurrentTab(\n        [...tabs.included],\n        [...tabs.excluded],\n        this.tabManagerState?.activeTab\n      )\n    );\n  }\n\n  private select(e: Event) {\n    const select = e.composedPath()[0] as HTMLSelectElement;\n    const option = this.options.find(\n      (option) => option.expression === select.value\n    );\n    option && this.sort.sortBy(option.criteria);\n  }\n\n  public componentShouldUpdate(): void {\n    if (\n      this.options.some(\n        (option) =>\n          option.expression.trim().replace(/\\s*,\\s*/g, ',') ===\n          this.sortState.sortCriteria.replace(/@/g, '')\n      )\n    ) {\n      return;\n    }\n\n    const action = loadSortCriteriaActions(\n      this.bindings.engine\n    ).updateSortCriterion(this.options[0]?.criteria);\n\n    this.bindings.engine.dispatch(action);\n  }\n\n  public render() {\n    const {hasError, hasResults, firstSearchExecuted} = this.searchStatusState;\n    const {\n      bindings: {i18n},\n      id,\n    } = this;\n\n    return [\n      <SortGuard\n        firstSearchExecuted={firstSearchExecuted}\n        hasError={hasError}\n        hasResults={hasResults}\n      >\n        <SortContainer>\n          <SortLabel i18n={i18n} id={id} />\n          <SortSelect i18n={i18n} id={id} onSelect={(evt) => this.select(evt)}>\n            {this.options.map(({label, criteria, expression}) => (\n              <SortOption\n                i18n={i18n}\n                label={label}\n                selected={this.sort.isSortedBy(criteria)}\n                value={expression}\n              />\n            ))}\n          </SortSelect>\n        </SortContainer>\n      </SortGuard>,\n      <slot></slot>,\n    ];\n  }\n}\n"],"version":3}

package/dist/atomic/components/atomic-sort-expression.js

@@ -47,7 +47,7 @@ const AtomicSortExpression$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSort
         const dropdownComponent = 'atomic-sort-dropdown';
         if (!this.host.closest(dropdownComponent)) {
             const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
-            return (h("atomic-component-error", { key: '2e02e5bfb81dbf81e48bf860248f6252d9b611f1', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '6f29f3caf5b093f373f77cd291bc3858ff54dcb2', element: this.host, error: error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-stencil-facet-date-input.js

@@ -66,13 +66,13 @@ const FacetDateInput = /*@__PURE__*/ proxyCustomElement(class FacetDateInput ext
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: 'a6dac71a63ec89c9d2db4a2193c314457e7259e3', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: 'd9fc67d163660a176c24226115d16076ac68b8c8', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '0245d6a038e4c839d6589fdef9605c8d0cd89266', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: 'f1d063272bb432fe5f3d1d0868df4a11f0d9cb5e', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: '0fda92c848f6761d3e49fb4fd16b2f14b4249f1a', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '1f7f66eb3f959a5965d33f9b69ca2e7ac10a76ab', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'e99a0845acd01318f12fab4a0769071ea2cb0a22', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '184d0c3a6517439f943709b5d27936ab8f3fb0f7', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '7ac776c5c63e63a141ab9d89d493ba1d50fec2eb', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: '238abcfe17e443c1a37b4eea867d17a4ba37db13', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'f4f110b74dc1355e01acdc7ec0520e8c9db291e7', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '89097bd85e1d62db77fcf1cd2ba95886870294e4', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 }, [0, "atomic-stencil-facet-date-input", {
         "bindings": [16],

package/dist/atomic/components/atomic-suggestion-renderer2.js

@@ -80,7 +80,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: '7dffaca3c750d3d48a18b9c068cfd0d03b9604f8', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: '83ce9e46bdd66a524a1d8ef0478097fc3dab6e4d', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: 'a0a958d225cab71e38fed9d5495a492c73b7e398' }, h("atomic-tab-bar", { key: '204cde2063d088de318d99e9c0f5bc36d81c3380' }, h("div", { key: '756467f629c22ee87c046abf0ed3354bb35f8144', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: '764278646176508803897fad940d252c5bd67553' }, h("atomic-tab-bar", { key: '2df8b1d1f6cafff2f342671685fe60dd2ef2e566' }, h("div", { key: 'b76121ab590432f5d15e956456af707fc7c20017', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

package/dist/atomic/components/components/common/item-list/item-template-provider.js

@@ -0,0 +1,28 @@
+import { buildResultTemplatesManager, } from '@coveo/headless';
+import { TemplateProvider, } from '../template-provider/template-provider';
+export class ItemTemplateProvider extends TemplateProvider {
+    constructor(props, gridCellLinkTarget) {
+        super(props, () => buildResultTemplatesManager(props.bindings.engine));
+        this.gridCellLinkTarget = gridCellLinkTarget;
+    }
+    // TODO: Add JSX support for default template
+    makeDefaultTemplate() {
+        const content = document.createDocumentFragment();
+        const linkEl = document.createElement('atomic-result-link');
+        content.appendChild(linkEl);
+        const linkContent = document.createDocumentFragment();
+        const linkMarkup = `
+      <atomic-result-link>
+      ${this.gridCellLinkTarget ? `<a slot="attributes" target="${this.gridCellLinkTarget}"></a>` : ''}
+      </atomic-result-link>
+    `;
+        const linkTemplate = document.createElement('template');
+        linkTemplate.innerHTML = linkMarkup.trim();
+        linkContent.appendChild(linkTemplate.content);
+        return {
+            content,
+            linkContent,
+            conditions: [],
+        };
+    }
+}

package/dist/atomic/components/components/search/atomic-search-box-instant-results/atomic-search-box-instant-results.js

@@ -0,0 +1,208 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { buildInstantResults, buildInteractiveInstantResult, } from '@coveo/headless';
+import { html, LitElement, nothing, render } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { ItemTemplateProvider } from "../../common/item-list/item-template-provider";
+import { getPartialInstantItemElement, getPartialInstantItemShowAllElement, renderInstantItemShowAllButton, } from "../../common/suggestions/instant-item";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
+import { errorGuard } from "../../../decorators/error-guard";
+import { encodeForDomAttribute } from "../../../utils/string-utils";
+/**
+ * The `atomic-search-box-instant-results` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant results behavior.
+ *
+ * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).
+ *
+ * This component is not supported on mobile.
+ *
+ * @part instant-results-show-all-button - The 'See all results' button.
+ * @part instant-results-item - The individual instant result items.
+ *
+ * @slot default - The default slot where the instant results are rendered.
+ */
+let AtomicSearchBoxInstantResults = class AtomicSearchBoxInstantResults extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.results = [];
+        this.display = 'list';
+        this.templateHasError = false;
+        /**
+         * The maximum number of results to show.
+         */
+        this.maxResultsPerQuery = 4;
+        /**
+         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+         */
+        this.density = 'normal';
+        /**
+         * The expected size of the image displayed in the results.
+         */
+        this.imageSize = 'icon';
+    }
+    /**
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
+     *
+     * Do not use this method if you integrate Atomic in a plain HTML deployment.
+     *
+     * @param resultRenderingFunction
+     */
+    async setRenderFunction(resultRenderingFunction) {
+        this.itemRenderingFunction = resultRenderingFunction;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        try {
+            dispatchSearchBoxSuggestionsEvent((bindings) => {
+                this.bindings = bindings;
+                return this.initialize();
+            }, this, ['atomic-search-box']);
+        }
+        catch (error) {
+            this.error = error;
+        }
+    }
+    getLink(el) {
+        const atomicResult = el.tagName === 'ATOMIC-RESULT' ? el : el?.querySelector('atomic-result');
+        return (atomicResult?.shadowRoot?.querySelector('atomic-result-link a:not([slot])') || null);
+    }
+    handleLinkClick(el, hasModifier) {
+        const setTarget = (value) => el.setAttribute('target', value);
+        const initialTarget = el.getAttribute('target');
+        hasModifier && setTarget('_blank');
+        el.click();
+        hasModifier && setTarget(initialTarget || '');
+    }
+    renderItems() {
+        if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {
+            return [];
+        }
+        const results = this.instantResults.state.results.length
+            ? this.instantResults.state.results
+            : this.results;
+        const elements = results.map((result) => {
+            const partialItem = getPartialInstantItemElement(this.bindings.i18n, 'instant-results-suggestion-label', this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
+            const key = `instant-result-${encodeForDomAttribute(result.uniqueId)}`;
+            const template = html `${keyed(key, html `<atomic-result
+            part="outline"
+            .result=${result}
+            .interactiveResult=${buildInteractiveInstantResult(this.bindings.engine, {
+                options: { result },
+            })}
+            .display=${this.display}
+            .density=${this.density}
+            .imageSize=${this.imageSize}
+            .content=${this.itemTemplateProvider.getTemplateContent(result)}
+            .renderingFunction=${this.itemRenderingFunction}
+          ></atomic-result>`)}`;
+            const container = document.createElement('div');
+            render(template, container);
+            const resultElement = container.firstElementChild;
+            return {
+                ...partialItem,
+                content: resultElement,
+                onSelect: (e) => {
+                    const link = this.getLink(e.target);
+                    if (!link) {
+                        return;
+                    }
+                    this.handleLinkClick(link, e.ctrlKey || e.metaKey);
+                },
+            };
+        });
+        if (elements.length) {
+            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n, 'show-all-results');
+            elements.push({
+                ...partialItem,
+                content: renderInstantItemShowAllButton({
+                    i18n: this.bindings.i18n,
+                    i18nKey: 'show-all-results',
+                }),
+                onSelect: () => {
+                    this.bindings.clearSuggestions();
+                    this.bindings.searchBoxController.updateText(this.instantResults.state.q);
+                    this.bindings.searchBoxController.submit();
+                },
+            });
+        }
+        return elements;
+    }
+    initialize() {
+        this.instantResults = buildInstantResults(this.bindings.engine, {
+            options: {
+                maxResultsPerQuery: this.maxResultsPerQuery,
+            },
+        });
+        this.itemTemplateProvider = new ItemTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.querySelectorAll('atomic-result-template')),
+            getResultTemplateRegistered: () => true,
+            setResultTemplateRegistered: () => { },
+            getTemplateHasError: () => this.templateHasError,
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+        return {
+            position: Array.from(this.parentNode.children).indexOf(this),
+            panel: 'right',
+            onSuggestedQueryChange: (q) => {
+                this.instantResults.updateQuery(q);
+                return this.onSuggestedQueryChange();
+            },
+            renderItems: () => this.renderItems(),
+        };
+    }
+    onSuggestedQueryChange() {
+        if (!this.bindings.getSuggestionElements().length &&
+            !this.bindings.searchBoxController.state.value) {
+            console.warn("There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-search-box-query-suggestions or atomic-search-box-recent-queries in your search box in order to see some instant results.");
+        }
+        return new Promise((resolve) => {
+            const unsubscribe = this.instantResults.subscribe(() => {
+                const state = this.instantResults.state;
+                if (!state.isLoading) {
+                    if (state.results.length) {
+                        this.results = state.results;
+                    }
+                    unsubscribe();
+                    resolve();
+                }
+            });
+        });
+    }
+    render() {
+        return html `${nothing}`;
+    }
+};
+__decorate([
+    state()
+], AtomicSearchBoxInstantResults.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicSearchBoxInstantResults.prototype, "templateHasError", void 0);
+__decorate([
+    property({ attribute: 'max-results-per-query', reflect: true, type: Number })
+], AtomicSearchBoxInstantResults.prototype, "maxResultsPerQuery", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicSearchBoxInstantResults.prototype, "density", void 0);
+__decorate([
+    property({ attribute: 'image-size', reflect: true })
+], AtomicSearchBoxInstantResults.prototype, "imageSize", void 0);
+__decorate([
+    property({ attribute: 'aria-label-generator' })
+], AtomicSearchBoxInstantResults.prototype, "ariaLabelGenerator", void 0);
+__decorate([
+    errorGuard()
+], AtomicSearchBoxInstantResults.prototype, "render", null);
+AtomicSearchBoxInstantResults = __decorate([
+    customElement('atomic-search-box-instant-results')
+], AtomicSearchBoxInstantResults);
+export { AtomicSearchBoxInstantResults };

package/dist/atomic/components/components/search/index.js

@@ -3,6 +3,7 @@ export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicRelevanceInspector } from './atomic-relevance-inspector/atomic-relevance-inspector.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchBoxInstantResults } from './atomic-search-box-instant-results/atomic-search-box-instant-results.js';
 export { AtomicSearchBoxQuerySuggestions } from './atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js';
 export { AtomicSearchBoxRecentQueries } from './atomic-search-box-recent-queries/atomic-search-box-recent-queries.js';
 export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';

package/dist/atomic/components/components/search/lazy-index.js

@@ -4,6 +4,7 @@ export default {
     'atomic-query-summary': async () => await import('./atomic-query-summary/atomic-query-summary.js'),
     'atomic-relevance-inspector': async () => await import('./atomic-relevance-inspector/atomic-relevance-inspector.js'),
     'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
+    'atomic-search-box-instant-results': async () => await import('./atomic-search-box-instant-results/atomic-search-box-instant-results.js'),
     'atomic-search-box-query-suggestions': async () => await import('./atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js'),
     'atomic-search-box-recent-queries': async () => await import('./atomic-search-box-recent-queries/atomic-search-box-recent-queries.js'),
     'atomic-search-interface': async () => await import('./atomic-search-interface/atomic-search-interface.js'),

package/dist/atomic/components/facet-guard.js

@@ -1,6 +1,9 @@
 import { h, Fragment } from '@stencil/core/internal/client';
 import { H as Hidden } from './initialization-utils.js';
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const FacetGuard = ({ hasError, enabled, firstSearchExecuted, hasResults }, children) => {
     if (hasError || !enabled || (firstSearchExecuted && !hasResults)) {
         return h(Hidden, null);

package/dist/atomic/components/facet-guard.js.map

@@ -1 +1 @@
-{"file":"facet-guard.js","mappings":";;;MASa,UAAU,GAAyC,CAC9D,EAAC,QAAQ,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAC,EACpD,QAAQ;IAER,IAAI,QAAQ,IAAI,CAAC,OAAO,KAAK,mBAAmB,IAAI,CAAC,UAAU,CAAC,EAAE;QAChE,OAAO,EAAC,MAAM,OAAU,CAAC;KAC1B;IAED,OAAO,EAAC,QAAQ,QAAE,QAAQ,CAAY,CAAC;AACzC;;;;","names":[],"sources":["src/components/common/facets/facet-guard.tsx"],"sourcesContent":["import {Fragment, FunctionalComponent, h} from '@stencil/core';\nimport {Hidden} from '../stencil-hidden';\n\ninterface FacetGuardProps {\n  hasError: boolean;\n  enabled: boolean;\n  firstSearchExecuted: boolean;\n  hasResults: boolean;\n}\nexport const FacetGuard: FunctionalComponent<FacetGuardProps> = (\n  {hasError, enabled, firstSearchExecuted, hasResults},\n  children\n) => {\n  if (hasError || !enabled || (firstSearchExecuted && !hasResults)) {\n    return <Hidden></Hidden>;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n"],"version":3}
+{"file":"facet-guard.js","mappings":";;;AAUA;;;MAGa,UAAU,GAAyC,CAC9D,EAAC,QAAQ,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAC,EACpD,QAAQ;IAER,IAAI,QAAQ,IAAI,CAAC,OAAO,KAAK,mBAAmB,IAAI,CAAC,UAAU,CAAC,EAAE;QAChE,OAAO,EAAC,MAAM,OAAU,CAAC;KAC1B;IAED,OAAO,EAAC,QAAQ,QAAE,QAAQ,CAAY,CAAC;AACzC;;;;","names":[],"sources":["src/components/common/facets/facet-guard.tsx"],"sourcesContent":["import {Fragment, FunctionalComponent, h} from '@stencil/core';\nimport {Hidden} from '../stencil-hidden';\n\ninterface FacetGuardProps {\n  hasError: boolean;\n  enabled: boolean;\n  firstSearchExecuted: boolean;\n  hasResults: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetGuard: FunctionalComponent<FacetGuardProps> = (\n  {hasError, enabled, firstSearchExecuted, hasResults},\n  children\n) => {\n  if (hasError || !enabled || (firstSearchExecuted && !hasResults)) {\n    return <Hidden></Hidden>;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n"],"version":3}

package/dist/atomic/components/facet-number-input.js

@@ -42,11 +42,11 @@ const FacetNumberInput = /*@__PURE__*/ proxyCustomElement(class FacetNumberInput
         const inputClasses = 'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';
         const labelClasses = 'text-neutral-dark text-sm';
         const step = this.type === 'integer' ? '1' : 'any';
-        return (h("form", { key: '50b7dee0d6dc358f1ab54f485605f674f4b4f086', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '846b496f2a6dc75cb09eca13b6a722465dcdcfd4', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '1e27929ca1ea2ffe616377bba78c0394028ff3a2', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: 'a179aa5b898e60b38d0eb15977f23cdcf9f7c31d', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: 'd77ef3eaf1ad74999e5793e072037ffc4d35cd89', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '147793a1619dcb567febe7ed1583642e68edcf2b', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '283c333fd999fb87f0080e45182a1c0e5fd7832d', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: 'a4bff3622949dd48082d7dcef6e67b40d1c09dae', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: 'd6b5b15dcc33571f796b9b16c40ed794876f108a', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '1ccdb9f95efd270893f55852139775a4def9b704', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '02fab998b43acc8b2dc05363391133dcd7d5c7e6', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '8ce0b7ee77ed9e4df1f2ebc5295b3e1379cdfa0c', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
     static get style() { return AtomicFacetNumberInputStyle0; }
 }, [0, "atomic-facet-number-input", {

package/dist/atomic/components/facet-placeholder.js

@@ -1,5 +1,8 @@
 import { h } from '@stencil/core/internal/client';
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const FacetPlaceholder = ({ numberOfValues, isCollapsed, }) => {
     const facetValues = [];
     for (let i = 0; i < numberOfValues; i++) {

package/dist/atomic/components/facet-placeholder.js.map

@@ -1 +1 @@
-{"file":"facet-placeholder.js","mappings":";;MAOa,gBAAgB,GAA+C,CAAC,EAC3E,cAAc,EACd,WAAW,GACZ;IACC,MAAM,WAAW,GAAG,EAAE,CAAC;IACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;QACvC,WAAW,CAAC,IAAI,CACd,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAC,GACjC,CACR,CAAC;KACH;IAED,QACE,WACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,uEAAuE,iBACjE,MAAM;QAElB,WAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,GAAQ;QAChE,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,MAAM,IAAE,WAAW,CAAO,CAClD,EACN;AACJ;;;;","names":[],"sources":["src/components/common/facets/facet-placeholder/facet-placeholder.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\nexport interface FacetPlaceholderProps {\n  numberOfValues: number;\n  isCollapsed: boolean;\n}\n\nexport const FacetPlaceholder: FunctionalComponent<FacetPlaceholderProps> = ({\n  numberOfValues,\n  isCollapsed,\n}) => {\n  const facetValues = [];\n  for (let i = 0; i < numberOfValues; i++) {\n    facetValues.push(\n      <div\n        class=\"bg-neutral mt-4 flex h-5\"\n        style={{width: '100%', opacity: '0.5'}}\n      ></div>\n    );\n  }\n\n  return (\n    <div\n      part=\"placeholder\"\n      class=\"bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7\"\n      aria-hidden=\"true\"\n    >\n      <div class=\"bg-neutral h-8 rounded\" style={{width: '75%'}}></div>\n      {!isCollapsed && <div class=\"mt-7\">{facetValues}</div>}\n    </div>\n  );\n};\n"],"version":3}
+{"file":"facet-placeholder.js","mappings":";;AAOA;;;MAGa,gBAAgB,GAA+C,CAAC,EAC3E,cAAc,EACd,WAAW,GACZ;IACC,MAAM,WAAW,GAAG,EAAE,CAAC;IACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;QACvC,WAAW,CAAC,IAAI,CACd,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAC,GACjC,CACR,CAAC;KACH;IAED,QACE,WACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,uEAAuE,iBACjE,MAAM;QAElB,WAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,GAAQ;QAChE,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,MAAM,IAAE,WAAW,CAAO,CAClD,EACN;AACJ;;;;","names":[],"sources":["src/components/common/facets/facet-placeholder/facet-placeholder.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\ninterface FacetPlaceholderProps {\n  numberOfValues: number;\n  isCollapsed: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetPlaceholder: FunctionalComponent<FacetPlaceholderProps> = ({\n  numberOfValues,\n  isCollapsed,\n}) => {\n  const facetValues = [];\n  for (let i = 0; i < numberOfValues; i++) {\n    facetValues.push(\n      <div\n        class=\"bg-neutral mt-4 flex h-5\"\n        style={{width: '100%', opacity: '0.5'}}\n      ></div>\n    );\n  }\n\n  return (\n    <div\n      part=\"placeholder\"\n      class=\"bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7\"\n      aria-hidden=\"true\"\n    >\n      <div class=\"bg-neutral h-8 rounded\" style={{width: '75%'}}></div>\n      {!isCollapsed && <div class=\"mt-7\">{facetValues}</div>}\n    </div>\n  );\n};\n"],"version":3}

package/dist/atomic/components/generated-answer-common.js

@@ -8,6 +8,9 @@ import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { A as ArrowBottomIcon } from './arrow-bottom-rounded.js';
 import { A as ArrowUp } from './arrow-top-rounded.js';
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const Switch = (props) => {
     const attributes = {
         onClick: () => props.onToggle?.(!props.checked),
@@ -50,6 +53,9 @@ const CopyIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xm
 </svg>
 `;
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const CopyButton = (props) => {
     return (h(Button, { title: props.title, part: "copy-button", style: 'text-transparent', class: `rounded-md p-2 ${props.isCopied ? 'copied' : ''} ${props.error ? 'error' : ''}`, onClick: props.onClick },
         h("div", { class: "icon-container text-neutral-dark" },
@@ -74,6 +80,9 @@ const Thumbs = `<svg
 </svg>
 `;
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const FeedbackButton = (props) => {
     return (h(Button, { title: props.title, style: "text-transparent", part: "feedback-button", class: `feedback-button rounded-md p-2 ${props.variant} ${props.active ? 'active' : ''}`, onClick: props.onClick, ariaPressed: `${props.active}` },
         h("atomic-icon", { class: "w-5", icon: Thumbs })));
@@ -2641,31 +2650,49 @@ const transformMarkdownToHtml = (text) => {
     return marked_umd.exports.marked.use({ renderer: customRenderer }).parse(text);
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const GeneratedMarkdownContent = (props) => {
     const answerAsHtml = DOMPurify.sanitize(transformMarkdownToHtml(props.answer ?? ''), { ADD_ATTR: ['part'] });
     return (h("div", { part: "generated-text", class: `text-on-background mb-0 ${props.isStreaming ? 'cursor' : ''}`, innerHTML: answerAsHtml }));
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const GeneratedTextContent = (props) => {
     return (h("p", { part: "generated-text", class: `text-on-background mb-0 whitespace-pre-wrap ${props.isStreaming ? 'cursor' : ''}` }, props.answer));
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const GeneratedContentContainer = (props, children) => {
     return (h("div", { part: "generated-container", class: "mt-6" },
         props.answerContentFormat === 'text/markdown' ? (h(GeneratedMarkdownContent, { answer: props.answer, isStreaming: props.isStreaming })) : (h(GeneratedTextContent, { answer: props.answer, isStreaming: props.isStreaming })),
         h("div", { class: "footer mt-6" }, children)));
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const RetryPrompt = (props) => (h("div", { part: "retry-container", class: "mt-4" },
     h("div", { class: "text-neutral-dark mx-auto text-center" }, props.message),
     h(Button, { class: "mx-auto mt-4 block px-4 py-2", style: "outline-primary", onClick: props.onClick }, props.buttonLabel)));
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const ShowButton = (props) => (h(Button, { style: "text-primary", part: "answer-show-button", class: "hidden items-center hover:bg-transparent", onClick: () => props.onClick() },
     h("div", { class: "text-base font-light" }, props.isCollapsed
         ? props.i18n.t('show-more')
         : props.i18n.t('show-less')),
     h("atomic-icon", { part: "answer-show-icon", class: "ml-2 w-3.5", icon: props.isCollapsed ? ArrowBottomIcon : ArrowUp })));
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SourceCitations = (props, children) => props.isVisible ? (h("div", { class: "source-citations" },
     h("p", { part: "citations-label", class: "text-neutral-dark mb-2 shrink-0" }, props.label),
     h("ol", { class: "citations-container flex list-none flex-wrap items-center gap-2" }, children))) : null;