@coveo/atomic 3.33.8-pre.52109a8c79 → 3.33.8-pre.5b06866794

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (209) hide show
  1. package/dist/atomic/_atomic.esm.js +1 -1
  2. package/dist/atomic/atomic.esm.js.map +1 -1
  3. package/dist/atomic/components/_index.d.ts +2 -2
  4. package/dist/atomic/components/_index.js +3 -2
  5. package/dist/atomic/components/analytics-config.js +1 -1
  6. package/dist/atomic/components/atomic-insight-history-toggle.js +2 -2
  7. package/dist/atomic/components/atomic-insight-history-toggle.js.map +1 -1
  8. package/dist/atomic/components/atomic-insight-search-box.js +5 -33
  9. package/dist/atomic/components/atomic-insight-search-box.js.map +1 -1
  10. package/dist/atomic/components/atomic-insight-user-actions-toggle.js +2 -2
  11. package/dist/atomic/components/atomic-insight-user-actions-toggle.js.map +1 -1
  12. package/dist/atomic/components/atomic-search-box-instant-results.js +2 -2
  13. package/dist/atomic/components/atomic-search-box-instant-results.js.map +1 -1
  14. package/dist/atomic/components/atomic-search-box-query-suggestions.d.ts +11 -0
  15. package/dist/atomic/components/atomic-search-box-query-suggestions.js +8 -0
  16. package/dist/atomic/components/atomic-search-box-query-suggestions.js.map +1 -0
  17. package/dist/atomic/components/atomic-search-box-query-suggestions2.js +89 -0
  18. package/dist/atomic/components/atomic-search-box-query-suggestions2.js.map +1 -0
  19. package/dist/atomic/components/atomic-search-box.js +8 -9
  20. package/dist/atomic/components/atomic-search-box.js.map +1 -1
  21. package/dist/atomic/components/atomic-suggestion-renderer2.js +1 -1
  22. package/dist/atomic/components/atomic-suggestion-renderer2.js.map +1 -1
  23. package/dist/atomic/components/clock.js +2 -2
  24. package/dist/atomic/components/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.js +18 -11
  25. package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js +2 -7
  26. package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js +19 -10
  27. package/dist/atomic/components/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js +1 -1
  28. package/dist/atomic/components/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js +1 -1
  29. package/dist/atomic/components/components/commerce/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js +1 -1
  30. package/dist/atomic/components/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.js +1 -1
  31. package/dist/atomic/components/components/common/layout/layout-styles-controller.js +40 -0
  32. package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js +26 -0
  33. package/dist/atomic/components/components/common/suggestions/suggestion-manager.js +1 -1
  34. package/dist/atomic/components/components/common/suggestions/{suggestions-common.js → suggestions-events.js} +16 -18
  35. package/dist/atomic/components/components/common/suggestions/suggestions-types.js +1 -0
  36. package/dist/atomic/components/components/common/suggestions/suggestions-utils.js +18 -0
  37. package/dist/atomic/components/components/search/atomic-search-box-recent-queries/atomic-search-box-recent-queries.js +137 -0
  38. package/dist/atomic/components/components/search/index.js +1 -1
  39. package/dist/atomic/components/components/search/lazy-index.js +1 -1
  40. package/dist/atomic/components/global/environment.js +1 -1
  41. package/dist/atomic/components/index.js.map +1 -1
  42. package/dist/atomic/components/stencil-query-suggestions.js +33 -0
  43. package/dist/atomic/components/stencil-query-suggestions.js.map +1 -0
  44. package/dist/atomic/components/stencil-suggestion-manager.js +20 -2
  45. package/dist/atomic/components/stencil-suggestion-manager.js.map +1 -1
  46. package/dist/atomic/components/{suggestions-common.js → suggestions-events.js} +18 -20
  47. package/dist/atomic/components/suggestions-events.js.map +1 -0
  48. package/dist/atomic/index.esm.js +1 -1
  49. package/dist/atomic/index.esm.js.map +1 -1
  50. package/dist/atomic/{p-ab7c83d8.entry.js → p-03addf89.entry.js} +2 -2
  51. package/dist/atomic/p-0a051b8d.js +2 -0
  52. package/dist/atomic/p-0a051b8d.js.map +1 -0
  53. package/dist/atomic/p-16f4ce98.js +2 -0
  54. package/dist/atomic/p-16f4ce98.js.map +1 -0
  55. package/dist/atomic/p-26a51a77.entry.js +2 -0
  56. package/dist/atomic/p-26a51a77.entry.js.map +1 -0
  57. package/dist/atomic/p-2e9db4ca.entry.js +2 -0
  58. package/dist/atomic/p-2e9db4ca.entry.js.map +1 -0
  59. package/dist/atomic/{p-6b3c4d63.entry.js → p-3213157f.entry.js} +2 -2
  60. package/dist/atomic/p-4b7a19db.js +2 -0
  61. package/dist/atomic/p-4b7a19db.js.map +1 -0
  62. package/dist/atomic/{p-b5dd6399.entry.js → p-5210f9a9.entry.js} +2 -2
  63. package/dist/atomic/{p-6e6d686e.entry.js → p-7383fd32.entry.js} +2 -2
  64. package/dist/atomic/{p-3a53ad44.js → p-a2a9c37a.js} +2 -2
  65. package/dist/atomic/p-af93b44c.js +2 -0
  66. package/dist/atomic/p-af93b44c.js.map +1 -0
  67. package/dist/atomic/{p-6329ff94.entry.js → p-ba4bf29f.entry.js} +2 -2
  68. package/dist/atomic/{p-3d847e45.entry.js → p-c88a3d2d.entry.js} +2 -2
  69. package/dist/atomic/p-c88a3d2d.entry.js.map +1 -0
  70. package/dist/atomic/{p-36e71b99.entry.js → p-d0f47b33.entry.js} +2 -2
  71. package/dist/atomic/p-d0f47b33.entry.js.map +1 -0
  72. package/dist/atomic/{p-c280cd05.js → p-e1cc5150.js} +1 -1
  73. package/dist/atomic/{p-aa4224ea.entry.js → p-fbfe913d.entry.js} +2 -2
  74. package/dist/atomic/p-fbfe913d.entry.js.map +1 -0
  75. package/dist/cjs/_index.cjs.js +5 -2
  76. package/dist/cjs/_loader.cjs.js +1 -1
  77. package/dist/cjs/{analytics-config-41fc74af.js → analytics-config-9b1760f9.js} +2 -2
  78. package/dist/cjs/{analytics-config-41fc74af.js.map → analytics-config-9b1760f9.js.map} +1 -1
  79. package/dist/cjs/atomic-insight-history-toggle.cjs.entry.js +2 -2
  80. package/dist/cjs/atomic-insight-history-toggle.cjs.entry.js.map +1 -1
  81. package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
  82. package/dist/cjs/atomic-insight-search-box.cjs.entry.js +9 -35
  83. package/dist/cjs/atomic-insight-search-box.cjs.entry.js.map +1 -1
  84. package/dist/cjs/atomic-insight-user-actions-toggle.cjs.entry.js +2 -2
  85. package/dist/cjs/atomic-insight-user-actions-toggle.cjs.entry.js.map +1 -1
  86. package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
  87. package/dist/cjs/atomic-search-box-instant-results.cjs.entry.js +3 -3
  88. package/dist/cjs/atomic-search-box-instant-results.cjs.entry.js.map +1 -1
  89. package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js +76 -0
  90. package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js.map +1 -0
  91. package/dist/cjs/atomic-search-box.cjs.entry.js +7 -7
  92. package/dist/cjs/atomic-search-box.cjs.entry.js.map +1 -1
  93. package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
  94. package/dist/cjs/atomic-suggestion-renderer.cjs.entry.js +1 -1
  95. package/dist/cjs/atomic-suggestion-renderer.cjs.entry.js.map +1 -1
  96. package/dist/cjs/atomic.cjs.js +1 -1
  97. package/dist/cjs/clock-7aeb19d0.js +7 -0
  98. package/dist/cjs/clock-7aeb19d0.js.map +1 -0
  99. package/dist/cjs/index-757bc886.js +2 -2
  100. package/dist/cjs/index.cjs.js.map +1 -1
  101. package/dist/cjs/stencil-query-suggestions-03268ecc.js +38 -0
  102. package/dist/cjs/stencil-query-suggestions-03268ecc.js.map +1 -0
  103. package/dist/cjs/{stencil-suggestion-manager-c0878ef2.js → stencil-suggestion-manager-2cba6d69.js} +4 -4
  104. package/dist/cjs/{stencil-suggestion-manager-c0878ef2.js.map → stencil-suggestion-manager-2cba6d69.js.map} +1 -1
  105. package/dist/cjs/{suggestions-common-5097a362.js → suggestions-events-63dd0640.js} +17 -21
  106. package/dist/cjs/suggestions-events-63dd0640.js.map +1 -0
  107. package/dist/cjs/suggestions-utils-61000808.js +25 -0
  108. package/dist/cjs/suggestions-utils-61000808.js.map +1 -0
  109. package/dist/cjs/version.cjs.js +2 -2
  110. package/dist/esm/_index.js +2 -1
  111. package/dist/esm/_loader.js +1 -1
  112. package/dist/esm/{analytics-config-c1cef549.js → analytics-config-43504b5c.js} +2 -2
  113. package/dist/esm/{analytics-config-c1cef549.js.map → analytics-config-43504b5c.js.map} +1 -1
  114. package/dist/esm/atomic-insight-history-toggle.entry.js +2 -2
  115. package/dist/esm/atomic-insight-history-toggle.entry.js.map +1 -1
  116. package/dist/esm/atomic-insight-interface.entry.js +1 -1
  117. package/dist/esm/atomic-insight-search-box.entry.js +7 -33
  118. package/dist/esm/atomic-insight-search-box.entry.js.map +1 -1
  119. package/dist/esm/atomic-insight-user-actions-toggle.entry.js +2 -2
  120. package/dist/esm/atomic-insight-user-actions-toggle.entry.js.map +1 -1
  121. package/dist/esm/atomic-recs-interface.entry.js +1 -1
  122. package/dist/esm/atomic-search-box-instant-results.entry.js +2 -2
  123. package/dist/esm/atomic-search-box-instant-results.entry.js.map +1 -1
  124. package/dist/esm/atomic-search-box-query-suggestions.entry.js +72 -0
  125. package/dist/esm/atomic-search-box-query-suggestions.entry.js.map +1 -0
  126. package/dist/esm/atomic-search-box.entry.js +6 -6
  127. package/dist/esm/atomic-search-box.entry.js.map +1 -1
  128. package/dist/esm/atomic-search-interface.entry.js +1 -1
  129. package/dist/esm/atomic-suggestion-renderer.entry.js +1 -1
  130. package/dist/esm/atomic-suggestion-renderer.entry.js.map +1 -1
  131. package/dist/esm/atomic.js +1 -1
  132. package/dist/esm/clock-b1f5d7f7.js +5 -0
  133. package/dist/esm/clock-b1f5d7f7.js.map +1 -0
  134. package/dist/esm/index-3f35faca.js +2 -2
  135. package/dist/esm/index.js.map +1 -1
  136. package/dist/esm/stencil-query-suggestions-5d6a46d7.js +33 -0
  137. package/dist/esm/stencil-query-suggestions-5d6a46d7.js.map +1 -0
  138. package/dist/esm/{stencil-suggestion-manager-486094dd.js → stencil-suggestion-manager-376f83e8.js} +2 -2
  139. package/dist/esm/{stencil-suggestion-manager-486094dd.js.map → stencil-suggestion-manager-376f83e8.js.map} +1 -1
  140. package/dist/esm/{suggestions-common-2b20db26.js → suggestions-events-b7a6f007.js} +18 -20
  141. package/dist/esm/suggestions-events-b7a6f007.js.map +1 -0
  142. package/dist/esm/suggestions-utils-591559a0.js +22 -0
  143. package/dist/esm/suggestions-utils-591559a0.js.map +1 -0
  144. package/dist/esm/version.js +2 -2
  145. package/dist/types/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.d.ts +2 -1
  146. package/dist/types/components/commerce/atomic-commerce-interface/atomic-commerce-interface.d.ts +0 -1
  147. package/dist/types/components/commerce/atomic-commerce-layout/atomic-commerce-layout.d.ts +3 -3
  148. package/dist/types/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.d.ts +1 -1
  149. package/dist/types/components/commerce/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.d.ts +1 -1
  150. package/dist/types/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.d.ts +1 -1
  151. package/dist/types/components/common/atomic-suggestion-renderer/atomic-suggestion-renderer.d.ts +1 -1
  152. package/dist/types/components/common/layout/layout-styles-controller.d.ts +22 -0
  153. package/dist/types/components/common/layout/mobile-breakpoint-controller.d.ts +18 -0
  154. package/dist/types/components/common/suggestions/instant-item.d.ts +1 -1
  155. package/dist/types/components/common/suggestions/query-suggestions.d.ts +1 -1
  156. package/dist/types/components/common/suggestions/recent-queries.d.ts +1 -1
  157. package/dist/types/components/common/suggestions/stencil-instant-item.d.ts +1 -1
  158. package/dist/types/components/common/suggestions/stencil-query-suggestions.d.ts +1 -1
  159. package/dist/types/components/common/suggestions/stencil-recent-queries.d.ts +1 -1
  160. package/dist/types/components/common/suggestions/stencil-suggestion-manager.d.ts +1 -1
  161. package/dist/types/components/common/suggestions/suggestion-manager.d.ts +1 -1
  162. package/dist/types/components/common/suggestions/suggestions-events.d.ts +14 -0
  163. package/dist/types/components/common/suggestions/{suggestions-common.d.ts → suggestions-types.d.ts} +6 -16
  164. package/dist/types/components/common/suggestions/suggestions-utils.d.ts +15 -0
  165. package/dist/types/components/search/atomic-search-box/atomic-search-box.d.ts +1 -1
  166. package/dist/types/components/search/{atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.d.ts → atomic-search-box-recent-queries/atomic-search-box-recent-queries.d.ts} +15 -8
  167. package/dist/types/components/search/index.d.ts +1 -1
  168. package/dist/types/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.d.ts +1 -1
  169. package/dist/types/components/search/search-box-suggestions/{atomic-search-box-recent-queries/atomic-search-box-recent-queries.d.ts → atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.d.ts} +3 -11
  170. package/dist/types/components.d.ts +16 -16
  171. package/dist/types/decorators/types.d.ts +1 -1
  172. package/dist/types/index.d.ts +3 -1
  173. package/docs/atomic-docs.json +15 -13
  174. package/package.json +3 -3
  175. package/dist/atomic/components/atomic-search-box-recent-queries.d.ts +0 -11
  176. package/dist/atomic/components/atomic-search-box-recent-queries.js +0 -8
  177. package/dist/atomic/components/atomic-search-box-recent-queries.js.map +0 -1
  178. package/dist/atomic/components/atomic-search-box-recent-queries2.js +0 -183
  179. package/dist/atomic/components/atomic-search-box-recent-queries2.js.map +0 -1
  180. package/dist/atomic/components/components/search/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js +0 -118
  181. package/dist/atomic/components/suggestions-common.js.map +0 -1
  182. package/dist/atomic/p-29fd6768.js +0 -2
  183. package/dist/atomic/p-29fd6768.js.map +0 -1
  184. package/dist/atomic/p-36e71b99.entry.js.map +0 -1
  185. package/dist/atomic/p-3d847e45.entry.js.map +0 -1
  186. package/dist/atomic/p-7601c3de.js +0 -2
  187. package/dist/atomic/p-7601c3de.js.map +0 -1
  188. package/dist/atomic/p-a1333787.entry.js +0 -2
  189. package/dist/atomic/p-a1333787.entry.js.map +0 -1
  190. package/dist/atomic/p-a468ba8e.entry.js +0 -2
  191. package/dist/atomic/p-a468ba8e.entry.js.map +0 -1
  192. package/dist/atomic/p-aa4224ea.entry.js.map +0 -1
  193. package/dist/cjs/atomic-search-box-recent-queries.cjs.entry.js +0 -171
  194. package/dist/cjs/atomic-search-box-recent-queries.cjs.entry.js.map +0 -1
  195. package/dist/cjs/clock-f03ff827.js +0 -7
  196. package/dist/cjs/clock-f03ff827.js.map +0 -1
  197. package/dist/cjs/suggestions-common-5097a362.js.map +0 -1
  198. package/dist/esm/atomic-search-box-recent-queries.entry.js +0 -167
  199. package/dist/esm/atomic-search-box-recent-queries.entry.js.map +0 -1
  200. package/dist/esm/clock-add3e9a5.js +0 -5
  201. package/dist/esm/clock-add3e9a5.js.map +0 -1
  202. package/dist/esm/suggestions-common-2b20db26.js.map +0 -1
  203. /package/dist/atomic/{p-ab7c83d8.entry.js.map → p-03addf89.entry.js.map} +0 -0
  204. /package/dist/atomic/{p-6b3c4d63.entry.js.map → p-3213157f.entry.js.map} +0 -0
  205. /package/dist/atomic/{p-b5dd6399.entry.js.map → p-5210f9a9.entry.js.map} +0 -0
  206. /package/dist/atomic/{p-6e6d686e.entry.js.map → p-7383fd32.entry.js.map} +0 -0
  207. /package/dist/atomic/{p-3a53ad44.js.map → p-a2a9c37a.js.map} +0 -0
  208. /package/dist/atomic/{p-6329ff94.entry.js.map → p-ba4bf29f.entry.js.map} +0 -0
  209. /package/dist/atomic/{p-c280cd05.js.map → p-e1cc5150.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"names":["SubmitButton","bindings","disabled","onClick","h","part","class","Button","style","ariaLabel","i18n","t","icon","SearchSlimIcon","atomicSearchBoxCss","AtomicSearchBoxStyle0","AtomicSearchBox","this","searchBoxSuggestionEventsQueue","isExpanded","numberOfQueries","suggestionTimeout","suggestionDelay","disableSearch","minimumQueryLength","clearFilters","enableQuerySyntax","disconnectedCallback","updateBreakpoints","once","host","renderTextBox","searchLabel","props","loading","searchBoxState","isLoading","value","title","onFocus","onInput","e","target","onKeyDown","onClear","searchBox","clear","suggestionManager","clearSuggestions","popup","id","activeDescendant","expanded","hasSuggestions","SearchTextArea","textAreaRef","ref","el","triggerTextAreaChange","isStandaloneSearchBox","initialize","randomID","initializeSearchboxController","initializeSuggestionManager","updateRedirectionUrl","redirectionUrl","updateRedirectUrl","registerNewSearchBoxController","buildStandaloneSearchBox","engine","options","searchBoxOptions","overwrite","buildSearchBox","componentWillUpdate","redirectTo","analytics","data","storage","SafeStorage","setJSON","StorageItems","STANDALONE_SEARCH_BOX_DATA","afterRedirection","event","redirect","emit","defaultPrevented","window","location","href","registerSuggestions","push","registerSuggestionsFromEvent","suggestionBindings","registerSearchboxSuggestionEvents","forEach","evt","watchRedirectionUrl","SuggestionManager","getNumberOfSuggestionsToDisplay","updateQuery","query","updateText","getSearchBoxValue","getSuggestionTimeout","getSuggestionDelay","getHost","getLogger","logger","initializeSuggestions","spreadProperties","partialSuggestionBindings","Object","defineProperties","get","enumerable","searchBoxController","isStandalone","numberOfSuggestions","highlightOptions","notMatchDelimiters","open","close","correctionDelimiters","isSearchDisabledForEndUser","triggerSuggestions","announceNewSuggestionsToScreenReader","onSubmit","keyboardActiveDescendant","submit","key","preventDefault","focusNextValue","announceNewActiveSuggestionToScreenReader","focusPreviousValue","hasActiveDescendant","state","focusPanel","updateKeyboardActiveDescendant","dispatchEvent","Event","renderSuggestion","item","index","lastIndex","side","isSelected","hideIfLast","suggestion","isDoubleList","onSuggestionClick","onMouseOver","onSuggestionMouseOver","renderPanel","elements","setRef","getRef","length","onMouseDown","map","shouldShowSuggestions","renderSuggestions","role","leftSuggestionElements","leftPanel","rightSuggestionElements","rightPanel","renderAbsolutePositionSpacer","rows","queryValue","isNullOrUndefined","trim","getSearchInputLabel","isMacOS","hasKeyboard","activeDescendantElement","suggestionsAriaMessage","elsLength","allSuggestionElements","filter","elementHasQuery","searchBoxAriaMessage","count","render","isDisabled","suggestions","Host","SearchBoxWrapper","onFocusout","isFocusingOut","__decorate","InitializeBindings","BindStateToController","AriaLiveRegion"],"sources":["src/components/common/search-box/stencil-submit-button.tsx","src/components/search/atomic-search-box/atomic-search-box.pcss?tag=atomic-search-box&encapsulation=shadow","src/components/search/atomic-search-box/atomic-search-box.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport SearchSlimIcon from '../../../images/search-slim.svg';\nimport {AnyBindings} from '../interface/bindings';\nimport {Button} from '../stencil-button';\n\ninterface Props {\n bindings: AnyBindings;\n disabled: boolean;\n onClick: () => void;\n}\n\nexport const SubmitButton: FunctionalComponent<Props> = ({\n bindings,\n disabled,\n onClick,\n}) => (\n <div\n part=\"submit-button-wrapper\"\n class=\"mr-2 flex items-center justify-center py-2\"\n >\n <Button\n style=\"text-primary\"\n class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full\"\n part=\"submit-button\"\n ariaLabel={bindings.i18n.t('search')}\n onClick={() => {\n onClick?.();\n }}\n disabled={disabled}\n >\n <atomic-icon\n part=\"submit-icon\"\n icon={SearchSlimIcon}\n class=\"h-4 w-4\"\n ></atomic-icon>\n </Button>\n </div>\n);\n","@import '../../../global/global.pcss';\n@import '../../common/search-box/search-box.pcss';\n\n[part~='instant-results-item'] {\n @apply p-3;\n}\n\n[part~='instant-results-show-all'] {\n @apply border-t-neutral justify-center border-t py-1;\n margin-top: auto;\n box-sizing: content-box;\n button {\n background-color: transparent;\n }\n}\n\n[part~='suggestions-left'] + [part~='suggestions-right'] {\n @apply border-l-neutral border-l;\n}\n\n[part~='suggestions-wrapper'] {\n flex-direction: column;\n @media (width >= theme(--breakpoint-desktop)) {\n flex-direction: row;\n }\n}\n\n:host {\n @apply relative z-10;\n}\n","import {isNullOrUndefined} from '@coveo/bueno';\nimport {\n SearchBox,\n SearchBoxState,\n buildSearchBox,\n StandaloneSearchBox,\n StandaloneSearchBoxState,\n buildStandaloneSearchBox,\n SearchBoxOptions,\n} from '@coveo/headless';\nimport {\n Component,\n h,\n State,\n Prop,\n Listen,\n Watch,\n Element,\n Event,\n EventEmitter,\n Host,\n} from '@stencil/core';\nimport {hasKeyboard, isMacOS} from '../../../utils/device-utils';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {\n SafeStorage,\n StandaloneSearchBoxData,\n StorageItems,\n} from '../../../utils/local-storage-utils';\nimport {updateBreakpoints} from '../../../utils/replace-breakpoint-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {\n isFocusingOut,\n once,\n randomID,\n spreadProperties,\n} from '../../../utils/utils';\nimport {RedirectionPayload} from '../../common/search-box/redirection-payload';\nimport {SearchBoxWrapper} from '../../common/search-box/stencil-search-box-wrapper';\nimport {SearchTextArea} from '../../common/search-box/stencil-search-text-area';\nimport {SubmitButton} from '../../common/search-box/stencil-submit-button';\nimport {SuggestionManager} from '../../common/suggestions/stencil-suggestion-manager';\nimport {\n SearchBoxSuggestionElement,\n SearchBoxSuggestionsBindings,\n SearchBoxSuggestionsEvent,\n elementHasQuery,\n} from '../../common/suggestions/suggestions-common';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-search-box` component creates a search box with built-in support for suggestions.\n *\n * @slot default - The default slot where you can add child components to the search box.\n *\n * @part wrapper - The search box wrapper.\n * @part input - The search box input.\n * @part loading - The search box loading animation.\n * @part clear-button - The button to clear the search box of input.\n * @part clear-icon - The clear button's icon.\n * @part submit-button - The search box submit button.\n * @part submit-icon - The search box submit button's icon.\n * @part suggestions - A list of suggested query corrections on each panel.\n * @part suggestions-left - A list of suggested query corrections on the left panel.\n * @part suggestions-right - A list of suggested query corrections on the right panel.\n * @part suggestions-wrapper - The wrapper that contains suggestion panels.\n * @part suggestions-single-list - The wrapper that contains 1 suggestion list.\n * @part suggestions-double-list - The wrapper that contains 2 suggestion lists.\n * @part suggestion - A suggested query correction.\n * @part active-suggestion - The currently active suggestion.\n * @part suggestion-divider - An item in the list that separates groups of suggestions.\n * @part suggestion-with-query - An item in the list that will update the search box query.\n *\n * @part query-suggestion-item - A suggestion from the `atomic-search-box-query-suggestions` component.\n * @part query-suggestion-content - The contents of a suggestion from the `atomic-search-box-query-suggestions` component.\n * @part query-suggestion-icon - The icon of a suggestion from the `atomic-search-box-query-suggestions` component.\n * @part query-suggestion-text - The text of a suggestion from the `atomic-search-box-query-suggestions` component.\n *\n * @part recent-query-item - A suggestion from the `atomic-search-box-recent-queries` component.\n * @part recent-query-content - The contents of a suggestion from the `atomic-search-box-recent-queries` component.\n * @part recent-query-icon - The icon of a suggestion from the `atomic-search-box-recent-queries` component.\n * @part recent-query-text - The text of a suggestion from the `atomic-search-box-recent-queries` component.\n * @part recent-query-text-highlight - The highlighted portion of the text of a suggestion from the `atomic-search-box-recent-queries` component.\n * @part recent-query-title-item - The clear button above suggestions from the `atomic-search-box-recent-queries` component.\n * @part recent-query-title-content - The contents of the clear button above suggestions from the `atomic-search-box-recent-queries` component.\n * @part recent-query-title - The \"recent searches\" text of the clear button above suggestions from the `atomic-search-box-recent-queries` component.\n * @part recent-query-clear - The \"clear\" text of the clear button above suggestions from the `atomic-search-box-recent-queries` component.\n *\n * @part instant-results-item - An instant result rendered by an `atomic-search-box-instant-results` component.\n * @part instant-results-show-all - The clickable suggestion to show all items for the current instant results search rendered by an `atomic-search-box-instant-results` component.\n * @part instant-results-show-all-button - The button inside the clickable suggestion from the `atomic-search-box-instant-results` component.\n */\n@Component({\n tag: 'atomic-search-box',\n styleUrl: 'atomic-search-box.pcss',\n shadow: true,\n})\nexport class AtomicSearchBox implements InitializableComponent<Bindings> {\n @InitializeBindings() public bindings!: Bindings;\n private searchBox!: SearchBox | StandaloneSearchBox;\n private searchBoxSuggestionEventsQueue: CustomEvent<\n SearchBoxSuggestionsEvent<SearchBox | StandaloneSearchBox>\n >[] = [];\n private id!: string;\n private textAreaRef!: HTMLTextAreaElement;\n private suggestionManager!: SuggestionManager<\n SearchBox | StandaloneSearchBox\n >;\n\n @Element() private host!: HTMLElement;\n\n @BindStateToController('searchBox')\n @State()\n private searchBoxState!: SearchBoxState | StandaloneSearchBoxState;\n @State() public error!: Error;\n @State() private isExpanded = false;\n\n /**\n * The amount of queries displayed when the user interacts with the search box.\n * By default, a mix of query suggestions and recent queries will be shown.\n * You can configure those settings using the following components as children:\n * - atomic-search-box-query-suggestions\n * - atomic-search-box-recent-queries\n */\n @Prop({reflect: true}) public numberOfQueries = 8;\n\n /**\n * Defining this option makes the search box standalone (see [Use a\n * Standalone Search Box](https://docs.coveo.com/en/atomic/latest/usage/ssb/)).\n *\n * This option defines the default URL the user should be redirected to, when a query is submitted.\n * If a query pipeline redirect is triggered, it will redirect to that URL instead\n * (see [query pipeline triggers](https://docs.coveo.com/en/1458)).\n */\n @Prop({reflect: true}) public redirectionUrl?: string;\n\n /**\n * The timeout for suggestion queries, in milliseconds.\n * If a suggestion query times out, the suggestions from that particular query won't be shown.\n */\n @Prop() public suggestionTimeout = 400;\n\n /**\n * The delay for suggestion queries on input, in milliseconds.\n *\n * The suggestion request will be delayed until the end user stops typing for at least the specified amount of time.\n *\n * This delay is used to avoid sending too many requests to the Coveo Platform when the user is typing, as well as reducing potential input lag on low end devices.\n * A higher delay will reduce input lag, at the cost of suggestions freshness.\n */\n @Prop() public suggestionDelay = 0;\n\n /**\n * Whether to prevent the user from triggering searches and query suggestions from the component.\n * Perfect for use cases where you need to disable the search conditionally.\n * For the specific case when you need to disable the search based on the length of the query, refer to {@link minimumQueryLength}.\n */\n @Prop({reflect: true}) public disableSearch = false;\n\n /**\n * The minimum query length required to enable search.\n * For example, to disable the search for empty queries, set this to `1`.\n */\n @Prop({reflect: true}) public minimumQueryLength = 0;\n\n /**\n * Whether to clear all active query filters when the end user submits a new query from the search box.\n * Setting this option to \"false\" is not recommended & can lead to an increasing number of queries returning no results.\n */\n @Prop({reflect: true}) public clearFilters = true;\n\n /**\n * Whether to interpret advanced [Coveo Cloud query syntax](https://docs.coveo.com/en/1814/) in the query.\n * You should only enable query syntax in the search box if you have good reasons to do so, as it\n * requires end users to be familiar with Coveo Cloud query syntax, otherwise they will likely be surprised\n * by the search box behaviour.\n *\n * When the `redirection-url` property is set and redirects to a page with more `atomic-search-box` components, all `atomic-search-box` components need to have the same `enable-query-syntax` value.\n */\n @Prop({reflect: true}) public enableQuerySyntax = false;\n\n /**\n * Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.\n *\n * Example:\n * ```html\n * <script>\n * document.querySelector('atomic-search-box').addEventListener((e) => {\n * e.preventDefault();\n * // handle redirection\n * });\n * </script>\n * ...\n * <atomic-search-box redirection-url=\"/search\"></atomic-search-box>\n * ```\n */\n @Event({\n eventName: 'redirect',\n })\n public redirect!: EventEmitter<RedirectionPayload>;\n\n @AriaLiveRegion('search-box')\n protected searchBoxAriaMessage!: string;\n\n @AriaLiveRegion('search-suggestions', true)\n protected suggestionsAriaMessage!: string;\n\n private isStandaloneSearchBox(\n searchBox: SearchBox | StandaloneSearchBox\n ): searchBox is StandaloneSearchBox {\n return 'redirectTo' in searchBox;\n }\n\n public initialize() {\n this.id ||= randomID('atomic-search-box-');\n\n this.initializeSearchboxController();\n this.initializeSuggestionManager();\n }\n\n private updateRedirectionUrl() {\n if (this.isStandaloneSearchBox(this.searchBox) && this.redirectionUrl) {\n this.searchBox.updateRedirectUrl(this.redirectionUrl);\n } else {\n this.registerNewSearchBoxController();\n }\n }\n\n private registerNewSearchBoxController() {\n this.disconnectedCallback();\n this.initialize();\n }\n\n private initializeSearchboxController() {\n this.searchBox = this.redirectionUrl\n ? buildStandaloneSearchBox(this.bindings.engine, {\n options: {\n ...this.searchBoxOptions,\n redirectionUrl: this.redirectionUrl,\n overwrite: true,\n },\n })\n : buildSearchBox(this.bindings.engine, {\n options: this.searchBoxOptions,\n });\n }\n\n public componentWillUpdate() {\n if (\n !('redirectTo' in this.searchBoxState) ||\n !('afterRedirection' in this.searchBox)\n ) {\n return;\n }\n\n const {redirectTo, value, analytics} = this.searchBoxState;\n\n if (redirectTo === '') {\n return;\n }\n const data: StandaloneSearchBoxData = {\n value,\n enableQuerySyntax: this.enableQuerySyntax,\n analytics,\n };\n const storage = new SafeStorage();\n storage.setJSON(StorageItems.STANDALONE_SEARCH_BOX_DATA, data);\n\n this.searchBox.afterRedirection();\n const event = this.redirect.emit({redirectTo, value});\n if (!event.defaultPrevented) {\n window.location.href = redirectTo;\n }\n }\n\n public disconnectedCallback = () => {};\n\n @Listen('atomic/searchBoxSuggestion/register')\n public registerSuggestions(\n event: CustomEvent<\n SearchBoxSuggestionsEvent<SearchBox | StandaloneSearchBox>\n >\n ) {\n if (!this.bindings) {\n this.searchBoxSuggestionEventsQueue.push(event);\n } else {\n this.suggestionManager.registerSuggestionsFromEvent(\n event,\n this.suggestionBindings\n );\n }\n }\n\n private registerSearchboxSuggestionEvents() {\n this.searchBoxSuggestionEventsQueue.forEach((evt) => {\n this.suggestionManager.registerSuggestionsFromEvent(\n evt,\n this.suggestionBindings\n );\n });\n this.searchBoxSuggestionEventsQueue = [];\n }\n\n @Watch('redirectionUrl')\n watchRedirectionUrl() {\n this.updateRedirectionUrl();\n }\n\n private initializeSuggestionManager() {\n if (this.suggestionManager) {\n return;\n }\n\n this.suggestionManager = new SuggestionManager({\n getNumberOfSuggestionsToDisplay: () => this.numberOfQueries,\n updateQuery: (query) => this.searchBox.updateText(query),\n getSearchBoxValue: () => this.searchBoxState.value,\n getSuggestionTimeout: () => this.suggestionTimeout,\n getSuggestionDelay: () => this.suggestionDelay,\n getHost: () => this.host,\n getLogger: () => this.bindings.engine.logger,\n });\n this.suggestionManager.initializeSuggestions(this.suggestionBindings);\n }\n\n private get suggestionBindings(): SearchBoxSuggestionsBindings<\n SearchBox | StandaloneSearchBox\n > {\n return spreadProperties(\n this.bindings,\n this.suggestionManager.partialSuggestionBindings,\n this.partialSuggestionBindings\n );\n }\n\n private get partialSuggestionBindings(): Pick<\n SearchBoxSuggestionsBindings<SearchBox | StandaloneSearchBox>,\n | 'id'\n | 'isStandalone'\n | 'searchBoxController'\n | 'numberOfQueries'\n | 'clearFilters'\n > {\n return Object.defineProperties(\n {...this.bindings},\n {\n id: {\n get: () => this.id,\n enumerable: true,\n },\n searchBoxController: {\n get: () => this.searchBox,\n enumerable: true,\n },\n isStandalone: {\n get: () => !!this.redirectionUrl,\n enumerable: true,\n },\n numberOfQueries: {\n get: () => this.numberOfQueries,\n enumerable: true,\n },\n clearFilters: {\n get: () => this.clearFilters,\n enumerable: true,\n },\n }\n ) as unknown as Pick<\n SearchBoxSuggestionsBindings<SearchBox | StandaloneSearchBox>,\n | 'id'\n | 'isStandalone'\n | 'searchBoxController'\n | 'numberOfQueries'\n | 'clearFilters'\n >;\n }\n\n private get searchBoxOptions(): SearchBoxOptions {\n return {\n id: this.id,\n numberOfSuggestions: 0,\n highlightOptions: {\n notMatchDelimiters: {\n open: '<span class=\"font-bold\">',\n close: '</span>',\n },\n correctionDelimiters: {\n open: '<span class=\"font-normal\">',\n close: '</span>',\n },\n },\n clearFilters: this.clearFilters,\n enableQuerySyntax: this.enableQuerySyntax,\n };\n }\n\n private updateBreakpoints = once(() => updateBreakpoints(this.host));\n\n private async onInput(value: string) {\n this.searchBox.updateText(value);\n\n if (this.isSearchDisabledForEndUser(value)) {\n this.suggestionManager.clearSuggestions();\n return;\n }\n this.isExpanded = true;\n await this.suggestionManager.triggerSuggestions();\n this.announceNewSuggestionsToScreenReader();\n }\n\n private async onFocus() {\n if (this.isExpanded) {\n return;\n }\n this.isExpanded = true;\n await this.suggestionManager.triggerSuggestions();\n this.announceNewSuggestionsToScreenReader();\n }\n\n private onSubmit() {\n this.isExpanded = false;\n if (this.suggestionManager.keyboardActiveDescendant) {\n this.suggestionManager.onSubmit();\n return;\n }\n\n this.searchBox.submit();\n }\n\n private async onKeyDown(e: KeyboardEvent) {\n if (this.isSearchDisabledForEndUser(this.searchBoxState.value)) {\n return;\n }\n\n switch (e.key) {\n case 'Enter':\n this.onSubmit();\n break;\n case 'Escape':\n this.suggestionManager.clearSuggestions();\n break;\n case 'ArrowDown':\n e.preventDefault();\n await this.suggestionManager.focusNextValue();\n this.announceNewActiveSuggestionToScreenReader();\n break;\n case 'ArrowUp':\n e.preventDefault();\n await this.suggestionManager.focusPreviousValue();\n this.announceNewActiveSuggestionToScreenReader();\n break;\n case 'ArrowRight':\n if (\n this.suggestionManager.hasActiveDescendant ||\n !this.searchBox.state.value\n ) {\n e.preventDefault();\n this.suggestionManager.focusPanel('right');\n this.announceNewActiveSuggestionToScreenReader();\n }\n break;\n case 'ArrowLeft':\n if (\n this.suggestionManager.hasActiveDescendant ||\n !this.searchBox.state.value\n ) {\n e.preventDefault();\n this.suggestionManager.focusPanel('left');\n this.announceNewActiveSuggestionToScreenReader();\n }\n break;\n case 'Tab':\n this.suggestionManager.clearSuggestions();\n break;\n default:\n if (this.suggestionManager.keyboardActiveDescendant) {\n this.suggestionManager.updateKeyboardActiveDescendant();\n }\n break;\n }\n }\n\n private triggerTextAreaChange(value: string) {\n this.textAreaRef.value = value;\n this.textAreaRef.dispatchEvent(new window.Event('change'));\n }\n\n private renderSuggestion(\n item: SearchBoxSuggestionElement,\n index: number,\n lastIndex: number,\n side: 'left' | 'right'\n ) {\n const id = `${this.id}-${side}-suggestion-${item.key}`;\n\n const isSelected = id === this.suggestionManager.activeDescendant;\n\n if (index === lastIndex && item.hideIfLast) {\n return null;\n }\n\n return (\n <atomic-suggestion-renderer\n i18n={this.bindings.i18n}\n id={id}\n suggestion={item}\n isSelected={isSelected}\n side={side}\n index={index}\n lastIndex={lastIndex}\n isDoubleList={this.suggestionManager.isDoubleList}\n onClick={(e: Event) => {\n this.suggestionManager.onSuggestionClick(item, e);\n if (item.key === 'recent-query-clear') {\n return;\n }\n\n this.isExpanded = false;\n }}\n onMouseOver={() => {\n this.suggestionManager.onSuggestionMouseOver(item, side, id);\n }}\n ></atomic-suggestion-renderer>\n );\n }\n\n private renderPanel(\n side: 'left' | 'right',\n elements: SearchBoxSuggestionElement[],\n setRef: (el: HTMLElement | undefined) => void,\n getRef: () => HTMLElement | undefined\n ) {\n if (!elements.length) {\n return null;\n }\n\n return (\n <div\n part={`suggestions suggestions-${side}`}\n ref={setRef}\n class=\"flex grow basis-1/2 flex-col\"\n onMouseDown={(e) => {\n if (e.target === getRef()) {\n e.preventDefault();\n }\n }}\n >\n {elements.map((suggestion, index) =>\n this.renderSuggestion(suggestion, index, elements.length - 1, side)\n )}\n </div>\n );\n }\n\n private get shouldShowSuggestions() {\n return (\n this.suggestionManager.hasSuggestions &&\n this.isExpanded &&\n !this.isSearchDisabledForEndUser(this.searchBoxState.value)\n );\n }\n\n private renderSuggestions() {\n return (\n <div\n id={`${this.id}-popup`}\n part={`suggestions-wrapper ${\n this.suggestionManager.isDoubleList\n ? 'suggestions-double-list'\n : 'suggestions-single-list'\n }`}\n class={`bg-background border-neutral absolute top-full left-0 z-10 flex w-full rounded-md border ${\n this.shouldShowSuggestions ? '' : 'hidden'\n }`}\n role=\"application\"\n aria-label={this.bindings.i18n.t(\n this.suggestionManager.isDoubleList\n ? 'search-suggestions-double-list'\n : 'search-suggestions-single-list'\n )}\n {...(this.suggestionManager.activeDescendant && {\n 'aria-activedescendant': this.suggestionManager.activeDescendant,\n })}\n >\n {this.renderPanel(\n 'left',\n this.suggestionManager.leftSuggestionElements,\n (el) => (this.suggestionManager.leftPanel = el),\n () => this.suggestionManager.leftPanel\n )}\n {this.renderPanel(\n 'right',\n this.suggestionManager.rightSuggestionElements,\n (el) => (this.suggestionManager.rightPanel = el),\n () => this.suggestionManager.rightPanel\n )}\n </div>\n );\n }\n\n private renderTextBox = (searchLabel: string) => {\n const props = {\n loading: this.searchBoxState.isLoading,\n bindings: this.bindings,\n value: this.searchBoxState.value,\n title: searchLabel,\n ariaLabel: searchLabel,\n onFocus: () => this.onFocus(),\n onInput: (e: Event) =>\n this.onInput(\n (e.target as HTMLInputElement | HTMLTextAreaElement).value\n ),\n onKeyDown: (e: KeyboardEvent) => this.onKeyDown(e),\n onClear: () => {\n this.searchBox.clear();\n this.suggestionManager.clearSuggestions();\n },\n popup: {\n id: `${this.id}-popup`,\n activeDescendant: this.suggestionManager.activeDescendant,\n expanded: this.isExpanded,\n hasSuggestions: this.suggestionManager.hasSuggestions,\n },\n };\n\n return (\n <SearchTextArea\n textAreaRef={this.textAreaRef}\n ref={(el) => (this.textAreaRef = el as HTMLTextAreaElement)}\n {...props}\n onClear={() => {\n props.onClear();\n this.triggerTextAreaChange('');\n }}\n />\n );\n };\n\n private renderAbsolutePositionSpacer() {\n return (\n <textarea\n aria-hidden\n part=\"textarea-spacer\"\n class=\"invisible w-full px-4 py-3.5 text-lg\"\n rows={1}\n ></textarea>\n );\n }\n\n private isSearchDisabledForEndUser(queryValue?: string) {\n if (isNullOrUndefined(queryValue)) {\n return this.disableSearch;\n }\n\n if (queryValue.trim().length < this.minimumQueryLength) {\n return true;\n }\n\n return this.disableSearch;\n }\n\n private getSearchInputLabel(minimumQueryLength = 0) {\n if (this.isSearchDisabledForEndUser(this.searchBoxState.value)) {\n return this.bindings.i18n.t('search-disabled', {\n length: minimumQueryLength,\n });\n }\n\n if (isMacOS()) {\n return this.bindings.i18n.t('search-box-with-suggestions-macos');\n }\n if (!hasKeyboard()) {\n return this.bindings.i18n.t('search-box-with-suggestions-keyboardless');\n }\n return this.bindings.i18n.t('search-box-with-suggestions');\n }\n\n private announceNewActiveSuggestionToScreenReader() {\n const ariaLabel = this.suggestionManager.activeDescendantElement?.ariaLabel;\n if (isMacOS() && ariaLabel) {\n this.suggestionsAriaMessage = ariaLabel;\n }\n }\n\n private announceNewSuggestionsToScreenReader() {\n const elsLength =\n this.suggestionManager.allSuggestionElements.filter(\n elementHasQuery\n ).length;\n this.searchBoxAriaMessage = elsLength\n ? this.bindings.i18n.t(\n this.searchBoxState.value\n ? 'query-suggestions-available'\n : 'query-suggestions-available-no-query',\n {\n count: elsLength,\n query: this.searchBoxState.value,\n }\n )\n : this.bindings.i18n.t('query-suggestions-unavailable');\n }\n\n public render() {\n this.updateBreakpoints();\n\n const searchLabel = this.getSearchInputLabel(this.minimumQueryLength);\n const isDisabled = this.isSearchDisabledForEndUser(\n this.searchBoxState.value\n );\n if (!this.suggestionManager.suggestions.length) {\n this.registerSearchboxSuggestionEvents();\n }\n\n return (\n <Host>\n {this.renderAbsolutePositionSpacer()}\n {[\n <SearchBoxWrapper\n disabled={isDisabled}\n onFocusout={(event) => {\n if (!isFocusingOut(event)) {\n return;\n }\n this.suggestionManager.clearSuggestions();\n this.isExpanded = false;\n }}\n >\n {this.renderTextBox(searchLabel)}\n <SubmitButton\n bindings={this.bindings}\n disabled={isDisabled}\n onClick={() => {\n this.searchBox.submit();\n this.suggestionManager.clearSuggestions();\n }}\n />\n {this.renderSuggestions()}\n </SearchBoxWrapper>,\n !this.suggestionManager.suggestions.length && (\n <slot>\n <atomic-search-box-recent-queries></atomic-search-box-recent-queries>\n <atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>\n </slot>\n ),\n ]}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{c as o}from"./p-c9074946.js";import{b as t}from"./p-1580513b.js";const e=["atomic-search-box","atomic-insight-search-box","atomic-commerce-search-box"];const n=o=>"updateComplete"in o&&o.updateComplete instanceof Promise;const s=async(o,e,s)=>{await customElements.whenDefined(o.nodeName.toLowerCase());if(n(o)){await o.updateComplete}else if("componentOnReady"in o){await o.componentOnReady()}e.dispatchEvent(t("atomic/searchBoxSuggestion/register",s))};const a=(t,n,a=e)=>{const i=o(n,e.join(", "));if(!i){throw new Error(`The "${n.nodeName.toLowerCase()}" component was not handled, as it is not a child of the following elements: ${a.join(", ")}`)}void s(i,n,t)};function i(o){return!o.query||o.query.trim()===""}function c(o){return!!o.query&&o.query.trim()!==""}export{i as a,a as d,c as e};
2
- //# sourceMappingURL=p-7601c3de.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["searchBoxElements","isLitElementLoosely","candidate","updateComplete","Promise","dispatchSearchBoxSuggestionsEventEventually","async","interfaceElement","element","event","customElements","whenDefined","nodeName","toLowerCase","componentOnReady","dispatchEvent","buildCustomEvent","dispatchSearchBoxSuggestionsEvent","allowedSearchBoxElements","closest","join","Error","elementHasNoQuery","el","query","trim","elementHasQuery"],"sources":["src/components/common/suggestions/suggestions-common.ts"],"sourcesContent":["import type {VNode} from '@stencil/core';\nimport type {HTMLStencilElement} from '@stencil/core/internal';\nimport type {LitElement} from 'lit';\nimport {closest} from '../../../utils/dom-utils';\nimport {buildCustomEvent} from '../../../utils/event-utils';\nimport type {AnyBindings} from '../interface/bindings';\n\n/**\n * Element which will be rendered in the list of suggestions.\n */\nexport interface SearchBoxSuggestionElement {\n /**\n * Stable identity which enables Stencil to reuse DOM elements for better performance.\n * The best way to pick a key is to use a string that uniquely identifies that list item among its siblings (often your data will already have IDs).\n */\n key: string;\n /**\n * Rendered content of the element.\n *\n * @remarks\n * The `VNode` type will be deprecated in v4 as we are detaching from Stencil.\n */\n content: Element | VNode;\n /**\n * Hook called when the selection is selected.\n * @param e DOM event.\n */\n onSelect?(e: Event): void;\n /**\n * The query associated with the suggestion which will replace the query in the search box if the suggestion is selected.\n */\n query?: string;\n /**\n * For improved accessibility, provide this property with additional information.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n */\n ariaLabel?: string;\n /**\n * Adds a specific shadow part attribute that can be selected with the CSS ::part pseudo-element.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/::part\n */\n part?: string;\n /**\n * Hide the suggestion if it's the last in the list.\n */\n hideIfLast?: boolean;\n}\n\n/**\n * List of suggestions that will be displayed along other lists (e.g recent queries) when the search box's input is selected.\n */\nexport interface SearchBoxSuggestions {\n /**\n * The search box will sort the position of suggestions using this value. The lowest value being first.\n * By default, the DOM position will be used.\n */\n position: number;\n /**\n * Whether the suggestions should be listed in the right or left panel. By default, the suggestions are listed in the right panel.\n */\n panel?: 'left' | 'right';\n /**\n * Method that returns the list of elements which will be rendered in the list of suggestions.\n */\n renderItems(): SearchBoxSuggestionElement[];\n /**\n * Hook called when the user changes the search box's input value. This can lead to all the query suggestions being updated.\n */\n onInput?(): Promise<unknown>;\n /**\n * Hook called when the suggested query changes as a user traverses through the list of suggestions.\n * This is used for instant results, which are rendered based on the current suggested query.\n * @param q The new suggested query.\n */\n onSuggestedQueryChange?(q: string): Promise<unknown>;\n}\n\n/**\n * Event sent from the registered query suggestions to the parent search box.\n */\nexport type SearchBoxSuggestionsEvent<\n SearchBoxController,\n Bindings = AnyBindings,\n> = (\n /**\n * The bindings passed from the search box to the suggestions.\n */\n bindings: SearchBoxSuggestionsBindings<SearchBoxController, Bindings>\n) => SearchBoxSuggestions;\n\nconst searchBoxElements = [\n 'atomic-search-box',\n 'atomic-insight-search-box',\n 'atomic-commerce-search-box',\n] as const;\n\n/**\n * The bindings passed from the search box to the suggestions.\n */\nexport type SearchBoxSuggestionsBindings<\n SearchBoxController,\n Bindings = AnyBindings,\n> = Bindings & {\n /**\n * The unique id of the search box.\n */\n id: string;\n /**\n * Whether the search box is [standalone](https://docs.coveo.com/en/atomic/latest/usage/ssb/).\n */\n isStandalone: boolean;\n /**\n * The search box headless controller.\n */\n searchBoxController: SearchBoxController;\n /**\n * The number of queries to display when the user interacts with the search box.\n */\n numberOfQueries: number;\n /**\n * Whether to clear all active query filters when the end user submits a new query from the search box.\n */\n clearFilters: boolean;\n /**\n * Retrieves the suggested query, meaning the query that would be sent if the search is executed.\n * The suggested query changes as a user traverses through the list of suggestions.\n */\n suggestedQuery(): string;\n /**\n * Removes the current suggestions.\n */\n clearSuggestions(): void;\n /**\n * Triggers update & retrieval of all suggestions.\n */\n triggerSuggestions(): void;\n /**\n * Retrieves the current suggestions.\n */\n getSuggestions(): SearchBoxSuggestions[];\n /**\n * Retrieves the current suggestions elements.\n */\n getSuggestionElements(): SearchBoxSuggestionElement[];\n};\n\nconst isLitElementLoosely = (candidate: unknown): candidate is LitElement =>\n 'updateComplete' in (candidate as LitElement) &&\n (candidate as LitElement).updateComplete instanceof Promise;\n\nconst dispatchSearchBoxSuggestionsEventEventually = async <\n SearchBoxController,\n Bindings = AnyBindings,\n>(\n interfaceElement: Element,\n element: HTMLElement,\n event: SearchBoxSuggestionsEvent<SearchBoxController, Bindings>\n) => {\n await customElements.whenDefined(interfaceElement.nodeName.toLowerCase());\n if (isLitElementLoosely(interfaceElement)) {\n await interfaceElement.updateComplete;\n } else if ('componentOnReady' in interfaceElement) {\n await (interfaceElement as HTMLStencilElement).componentOnReady();\n }\n element.dispatchEvent(\n buildCustomEvent('atomic/searchBoxSuggestion/register', event)\n );\n};\n\n/**\n * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.\n * @param event Event sent from the registered query suggestions to the parent search box.\n * @param element Element on which to dispatch the event, which must be the child of a configured search box.\n */\nexport const dispatchSearchBoxSuggestionsEvent = <\n SearchBoxController,\n Bindings = AnyBindings,\n>(\n event: SearchBoxSuggestionsEvent<SearchBoxController, Bindings>,\n element: HTMLElement,\n allowedSearchBoxElements: readonly (typeof searchBoxElements)[number][] = searchBoxElements\n) => {\n const interfaceElement = closest(element, searchBoxElements.join(', '));\n if (!interfaceElement) {\n throw new Error(\n `The \"${element.nodeName.toLowerCase()}\" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(\n ', '\n )}`\n );\n }\n void dispatchSearchBoxSuggestionsEventEventually(\n interfaceElement,\n element,\n event\n );\n};\n\nexport function elementHasNoQuery(el: SearchBoxSuggestionElement) {\n return !el.query || el.query.trim() === '';\n}\n\nexport function elementHasQuery(el: SearchBoxSuggestionElement) {\n return !!el.query && el.query.trim() !== '';\n}\n"],"mappings":"wEA0FA,MAAMA,EAAoB,CACxB,oBACA,4BACA,8BAqDF,MAAMC,EAAuBC,GAC3B,mBAAqBA,GACpBA,EAAyBC,0BAA0BC,QAEtD,MAAMC,EAA8CC,MAIlDC,EACAC,EACAC,WAEMC,eAAeC,YAAYJ,EAAiBK,SAASC,eAC3D,GAAIZ,EAAoBM,GAAmB,OACnCA,EAAiBJ,c,MAClB,GAAI,qBAAsBI,EAAkB,OAC1CA,EAAwCO,kB,CAEjDN,EAAQO,cACNC,EAAiB,sCAAuCP,GACzD,E,MAQUQ,EAAoC,CAI/CR,EACAD,EACAU,EAA0ElB,KAE1E,MAAMO,EAAmBY,EAAQX,EAASR,EAAkBoB,KAAK,OACjE,IAAKb,EAAkB,CACrB,MAAM,IAAIc,MACR,QAAQb,EAAQI,SAASC,6FAA6FK,EAAyBE,KAC7I,Q,MAIDf,EACHE,EACAC,EACAC,EACD,E,SAGaa,EAAkBC,GAChC,OAAQA,EAAGC,OAASD,EAAGC,MAAMC,SAAW,EAC1C,C,SAEgBC,EAAgBH,GAC9B,QAASA,EAAGC,OAASD,EAAGC,MAAMC,SAAW,EAC3C,Q","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{h as e,r as t,g as r}from"./p-dc3df5ce.js";import{HighlightUtils as s,buildRecentQueriesList as i}from"@coveo/headless";import{C as n}from"./p-c280cd05.js";import{S as a,a as c}from"./p-946fe85f.js";import{o}from"./p-a12e1c59.js";import{e as h}from"./p-8f5830b4.js";import{d as l}from"./p-7601c3de.js";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-c9074946.js";import"./p-1580513b.js";const u=(e,t)=>({part:"recent-query-item",query:e,key:`recent-${h(e)}`,ariaLabel:t.t("recent-query-suggestion-label",{query:e,interpolation:{escapeValue:false}})});const p=e=>({key:"recent-query-clear",ariaLabel:e.t("clear-recent-searches",{interpolation:{escapeValue:false}}),part:"recent-query-title-item suggestion-divider",hideIfLast:true});const m=(t,r)=>e("div",{part:"recent-query-content",class:"flex items-center text-left break-all"},r);const f=({icon:t})=>e("atomic-icon",{part:"recent-query-icon",icon:t,class:"mr-2 h-4 w-4 shrink-0"});const d=({query:t,value:r})=>{if(t===""){return e("span",{part:"recent-query-text",class:"line-clamp-2 break-all"},r)}return e("span",{part:"recent-query-text",class:"line-clamp-2 break-all",innerHTML:s.highlightString({content:r,openingDelimiter:'<span part="recent-query-text-highlight" class="font-bold">',closingDelimiter:"</span>",highlights:[{offset:t.length,length:r.length-t.length}]})})};const y=({i18n:t})=>e("div",{part:"recent-query-title-content",class:"flex w-full justify-between"},e("span",{class:"font-bold",part:"recent-query-title"},t.t("recent-searches")),e("span",{part:"recent-query-clear"},t.t("clear")));const q=class{constructor(e){t(this,e);this.maxWithQuery=3;this.warnUser=o((()=>this.bindings.engine.logger.warn("Because analytics are disabled, the recent queries feature is deactivated.")));this.error=undefined;this.icon=undefined;this.maxWithQuery=3;this.maxWithoutQuery=undefined}componentWillLoad(){try{l((e=>{this.bindings=e;return this.initialize()}),this.host,["atomic-search-box"])}catch(e){this.error=e}}renderIcon(){return this.icon||n}initialize(){this.storage=new a;this.recentQueriesList=i(this.bindings.engine,{initialState:{queries:this.retrieveLocalStorage()},options:{maxLength:1e3,clearFilters:this.bindings.clearFilters}});this.recentQueriesList.subscribe((()=>this.updateLocalStorage()));return{position:Array.from(this.host.parentNode.children).indexOf(this.host),renderItems:()=>this.renderItems()}}retrieveLocalStorage(){return this.storage.getParsedJSON(c.RECENT_QUERIES,[])}updateLocalStorage(){if(!this.recentQueriesList.state.analyticsEnabled){return this.disableFeature()}return this.storage.setJSON(c.RECENT_QUERIES,this.recentQueriesList.state.queries)}disableFeature(){this.warnUser();this.storage.removeItem(c.RECENT_QUERIES)}renderItems(){if(!this.recentQueriesList.state.analyticsEnabled){return[]}const e=this.bindings.searchBoxController.state.value;const t=e!=="";const r=t?this.maxWithQuery:this.maxWithoutQuery;const s=this.recentQueriesList.state.queries.filter((t=>t.toLowerCase().startsWith(e.toLowerCase()))).slice(0,r);const i=s.map((e=>this.renderItem(e)));if(i.length){i.unshift(this.renderClear())}return i}renderClear(){const t=p(this.bindings.i18n);return{...t,content:e(y,{i18n:this.bindings.i18n}),onSelect:()=>{this.recentQueriesList.clear();this.bindings.triggerSuggestions()}}}renderItem(t){const r=this.bindings.searchBoxController.state.value;const s=u(t,this.bindings.i18n);return{...s,content:e(m,null,e(f,{icon:this.renderIcon()}),e(d,{query:r,value:t})),onSelect:()=>{if(this.bindings.isStandalone){this.bindings.searchBoxController.updateText(t);this.bindings.searchBoxController.submit();return}this.recentQueriesList.executeRecentQuery(this.recentQueriesList.state.queries.indexOf(t))}}}render(){if(this.error){return e("atomic-component-error",{key:"bc7e0d617164709b3ce19c39d4cd75e465afa3b9",element:this.host,error:this.error})}}get host(){return r(this)}};export{q as atomic_search_box_recent_queries};
2
- //# sourceMappingURL=p-a1333787.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["getPartialRecentQueryElement","value","i18n","part","query","key","encodeForDomAttribute","ariaLabel","t","interpolation","escapeValue","getPartialRecentQueryClearElement","hideIfLast","RecentQueriesContainer","_","children","h","class","RecentQueryIcon","icon","RecentQueryText","innerHTML","HighlightUtils","highlightString","content","openingDelimiter","closingDelimiter","highlights","offset","length","RecentQueryClear","AtomicSearchBoxRecentQueries","this","maxWithQuery","warnUser","once","bindings","engine","logger","warn","componentWillLoad","dispatchSearchBoxSuggestionsEvent","initialize","host","error","renderIcon","Clock","storage","SafeStorage","recentQueriesList","buildRecentQueriesList","initialState","queries","retrieveLocalStorage","options","maxLength","clearFilters","subscribe","updateLocalStorage","position","Array","from","parentNode","indexOf","renderItems","getParsedJSON","StorageItems","RECENT_QUERIES","state","analyticsEnabled","disableFeature","setJSON","removeItem","searchBoxController","hasQuery","max","maxWithoutQuery","filteredQueries","filter","recentQuery","toLowerCase","startsWith","slice","suggestionElements","map","renderItem","unshift","renderClear","partialItem","onSelect","clear","triggerSuggestions","isStandalone","updateText","submit","executeRecentQuery","render","element"],"sources":["src/components/common/suggestions/stencil-recent-queries.tsx","src/components/search/search-box-suggestions/atomic-search-box-recent-queries/atomic-search-box-recent-queries.tsx"],"sourcesContent":["import {HighlightUtils} from '@coveo/headless';\nimport {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils';\nimport {SearchBoxSuggestionElement} from './suggestions-common';\n\nexport const getPartialRecentQueryElement = (\n value: string,\n i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'query' | 'part'> => {\n return {\n part: 'recent-query-item',\n query: value,\n key: `recent-${encodeForDomAttribute(value)}`,\n ariaLabel: i18n.t('recent-query-suggestion-label', {\n query: value,\n interpolation: {escapeValue: false},\n }),\n };\n};\n\nexport const getPartialRecentQueryClearElement = (\n i18n: i18n\n): Pick<\n SearchBoxSuggestionElement,\n 'ariaLabel' | 'key' | 'part' | 'hideIfLast'\n> => {\n return {\n key: 'recent-query-clear',\n ariaLabel: i18n.t('clear-recent-searches', {\n interpolation: {escapeValue: false},\n }),\n part: 'recent-query-title-item suggestion-divider',\n hideIfLast: true,\n };\n};\n\nexport const RecentQueriesContainer: FunctionalComponent = (_, children) => {\n return (\n <div\n part=\"recent-query-content\"\n class=\"flex items-center text-left break-all\"\n >\n {children}\n </div>\n );\n};\n\ninterface RecentQueryIconProps {\n icon: string;\n}\n\nexport const RecentQueryIcon: FunctionalComponent<RecentQueryIconProps> = ({\n icon,\n}) => {\n return (\n <atomic-icon\n part=\"recent-query-icon\"\n icon={icon}\n class=\"mr-2 h-4 w-4 shrink-0\"\n ></atomic-icon>\n );\n};\n\ninterface RecentQueryTextProps {\n query: string;\n value: string;\n}\n\nexport const RecentQueryText: FunctionalComponent<RecentQueryTextProps> = ({\n query,\n value,\n}) => {\n if (query === '') {\n return (\n <span part=\"recent-query-text\" class=\"line-clamp-2 break-all\">\n {value}\n </span>\n );\n }\n return (\n <span\n part=\"recent-query-text\"\n class=\"line-clamp-2 break-all\"\n innerHTML={HighlightUtils.highlightString({\n content: value,\n openingDelimiter:\n '<span part=\"recent-query-text-highlight\" class=\"font-bold\">',\n closingDelimiter: '</span>',\n highlights: [\n {\n offset: query.length,\n length: value.length - query.length,\n },\n ],\n })}\n ></span>\n );\n};\n\ninterface RecentQueryClearProps {\n i18n: i18n;\n}\n\nexport const RecentQueryClear: FunctionalComponent<RecentQueryClearProps> = ({\n i18n,\n}) => {\n return (\n <div part=\"recent-query-title-content\" class=\"flex w-full justify-between\">\n <span class=\"font-bold\" part=\"recent-query-title\">\n {i18n.t('recent-searches')}\n </span>\n <span part=\"recent-query-clear\">{i18n.t('clear')}</span>\n </div>\n );\n};\n","import {\n buildRecentQueriesList,\n RecentQueriesList,\n SearchBox,\n} from '@coveo/headless';\nimport {Component, Element, Prop, State, h} from '@stencil/core';\nimport Clock from '../../../../images/clock.svg';\nimport {SafeStorage, StorageItems} from '../../../../utils/local-storage-utils';\nimport {once} from '../../../../utils/utils';\nimport {\n getPartialRecentQueryClearElement,\n getPartialRecentQueryElement,\n RecentQueriesContainer,\n RecentQueryClear,\n RecentQueryIcon,\n RecentQueryText,\n} from '../../../common/suggestions/stencil-recent-queries';\nimport {\n dispatchSearchBoxSuggestionsEvent,\n SearchBoxSuggestionElement,\n SearchBoxSuggestions,\n SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-common';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.\n */\n@Component({\n tag: 'atomic-search-box-recent-queries',\n shadow: true,\n})\nexport class AtomicSearchBoxRecentQueries {\n private bindings!: SearchBoxSuggestionsBindings<SearchBox, Bindings>;\n private recentQueriesList!: RecentQueriesList;\n private storage!: SafeStorage;\n\n @Element() private host!: HTMLElement;\n\n @State() public error!: Error;\n\n /**\n * The SVG icon to display.\n *\n * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n * - Use a value that starts with `assets://`, to display an icon from the Atomic package.\n * - Use a stringified SVG to display it directly.\n */\n @Prop() public icon?: string;\n\n /**\n * The maximum number of suggestions that will be displayed if the user has typed something into the input field.\n */\n @Prop({reflect: true}) public maxWithQuery = 3;\n /**\n * The maximum number of suggestions that will be displayed initially when the input field is empty.\n */\n @Prop({reflect: true}) public maxWithoutQuery?: number;\n\n componentWillLoad() {\n try {\n dispatchSearchBoxSuggestionsEvent<SearchBox, Bindings>(\n (bindings) => {\n this.bindings = bindings;\n return this.initialize();\n },\n this.host,\n ['atomic-search-box']\n );\n } catch (error) {\n this.error = error as Error;\n }\n }\n\n private renderIcon() {\n return this.icon || Clock;\n }\n\n private initialize(): SearchBoxSuggestions {\n this.storage = new SafeStorage();\n this.recentQueriesList = buildRecentQueriesList(this.bindings.engine, {\n initialState: {queries: this.retrieveLocalStorage()},\n options: {maxLength: 1000, clearFilters: this.bindings.clearFilters},\n });\n\n this.recentQueriesList.subscribe(() => this.updateLocalStorage());\n\n return {\n position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n renderItems: () => this.renderItems(),\n };\n }\n\n private retrieveLocalStorage() {\n return this.storage.getParsedJSON(StorageItems.RECENT_QUERIES, []);\n }\n\n private updateLocalStorage() {\n if (!this.recentQueriesList.state.analyticsEnabled) {\n return this.disableFeature();\n }\n\n return this.storage.setJSON(\n StorageItems.RECENT_QUERIES,\n this.recentQueriesList.state.queries\n );\n }\n\n private warnUser = once(() =>\n this.bindings.engine.logger.warn(\n 'Because analytics are disabled, the recent queries feature is deactivated.'\n )\n );\n\n private disableFeature() {\n this.warnUser();\n this.storage.removeItem(StorageItems.RECENT_QUERIES);\n }\n\n private renderItems(): SearchBoxSuggestionElement[] {\n if (!this.recentQueriesList.state.analyticsEnabled) {\n return [];\n }\n\n const query = this.bindings.searchBoxController.state.value;\n const hasQuery = query !== '';\n const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;\n const filteredQueries = this.recentQueriesList.state.queries\n .filter((recentQuery) =>\n recentQuery.toLowerCase().startsWith(query.toLowerCase())\n )\n .slice(0, max);\n\n const suggestionElements: SearchBoxSuggestionElement[] =\n filteredQueries.map((value) => this.renderItem(value));\n if (suggestionElements.length) {\n suggestionElements.unshift(this.renderClear());\n }\n\n return suggestionElements;\n }\n\n private renderClear(): SearchBoxSuggestionElement {\n const partialItem = getPartialRecentQueryClearElement(this.bindings.i18n);\n\n return {\n ...partialItem,\n content: <RecentQueryClear i18n={this.bindings.i18n} />,\n onSelect: () => {\n this.recentQueriesList.clear();\n this.bindings.triggerSuggestions();\n },\n };\n }\n\n private renderItem(value: string): SearchBoxSuggestionElement {\n const query = this.bindings.searchBoxController.state.value;\n const partialItem = getPartialRecentQueryElement(value, this.bindings.i18n);\n return {\n ...partialItem,\n content: (\n <RecentQueriesContainer>\n <RecentQueryIcon icon={this.renderIcon()} />\n <RecentQueryText query={query} value={value} />\n </RecentQueriesContainer>\n ),\n\n onSelect: () => {\n if (this.bindings.isStandalone) {\n this.bindings.searchBoxController.updateText(value);\n this.bindings.searchBoxController.submit();\n return;\n }\n\n this.recentQueriesList.executeRecentQuery(\n this.recentQueriesList.state.queries.indexOf(value)\n );\n },\n };\n }\n\n public render() {\n if (this.error) {\n return (\n <atomic-component-error\n element={this.host}\n error={this.error}\n ></atomic-component-error>\n );\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{h as n,r,g as t}from"./p-dc3df5ce.js";import{loadInsightSearchActions as e,buildSearchBox as i}from"@coveo/headless/insight";import{S as a,a as o,b as l,c as s}from"./p-29fd6768.js";import{i as c,h as d}from"./p-6292386d.js";import{I as w,B as h}from"./p-ff2d324d.js";import{A as p}from"./p-31a13850.js";import{r as m,h as g}from"./p-a12e1c59.js";import{e as b}from"./p-8f5830b4.js";import{e as v}from"./p-7601c3de.js";import"./p-b93ccff9.js";import"./p-1580513b.js";import"./p-21ab6f55.js";import"@coveo/bueno";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-01c91b69.js";import"./p-c9074946.js";import"./p-05de7ca3.js";import"./p-cae02339.js";const u=(n,r)=>({part:"query-suggestion-item",key:`qs-${b(n.rawValue)}`,query:n.rawValue,ariaLabel:r.t("query-suggestion-label",{query:n.rawValue,interpolation:{escapeValue:false}})});const f=(r,t)=>n("div",{part:"query-suggestion-content",class:"flex items-center"},t);const y=({icon:r,hasSuggestion:t})=>{if(!t){return}return n("atomic-icon",{part:"query-suggestion-icon",icon:r,class:"mr-2 h-4 w-4 shrink-0"})};const x=({suggestion:r,hasQuery:t})=>{if(t){return n("span",{part:"query-suggestion-text",class:"line-clamp-2 break-all",innerHTML:r.highlightedValue})}return n("span",{part:"query-suggestion-text",class:"line-clamp-2 break-all"},r.rawValue)};const k='/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer properties {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-x-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: "";\n }\n}\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n }\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container {\n container-type: inline-size;\n }\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .collapse {\n visibility: collapse;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .inset-0 {\n inset: calc(0.25rem * 0);\n }\n .-top-2 {\n top: calc(0.25rem * -2);\n }\n .-top-4 {\n top: calc(0.25rem * -4);\n }\n .top-0 {\n top: calc(0.25rem * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-6 {\n top: calc(0.25rem * 6);\n }\n .top-\\[4px\\] {\n top: 4px;\n }\n .top-full {\n top: 100%;\n }\n .top-px {\n top: 1px;\n }\n .-right-2 {\n right: calc(0.25rem * -2);\n }\n .right-0 {\n right: calc(0.25rem * 0);\n }\n .right-2 {\n right: calc(0.25rem * 2);\n }\n .right-6 {\n right: calc(0.25rem * 6);\n }\n .right-12 {\n right: calc(0.25rem * 12);\n }\n .right-20 {\n right: calc(0.25rem * 20);\n }\n .right-px {\n right: 1px;\n }\n .bottom-0 {\n bottom: calc(0.25rem * 0);\n }\n .bottom-1 {\n bottom: calc(0.25rem * 1);\n }\n .bottom-2 {\n bottom: calc(0.25rem * 2);\n }\n .bottom-px {\n bottom: 1px;\n }\n .left-0 {\n left: calc(0.25rem * 0);\n }\n .left-1 {\n left: calc(0.25rem * 1);\n }\n .left-2 {\n left: calc(0.25rem * 2);\n }\n .left-\\[15px\\] {\n left: 15px;\n }\n .isolate {\n isolation: isolate;\n }\n .z-0 {\n z-index: 0;\n }\n .z-1 {\n z-index: 1;\n }\n .z-10 {\n z-index: 10;\n }\n .z-9998 {\n z-index: 9998;\n }\n .z-9999 {\n z-index: 9999;\n }\n .order-last {\n order: 9999;\n }\n .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .container {\n width: 100%;\n }\n @media (width >= 1024px) {\n .container {\n max-width: 1024px;\n }\n }\n @media (width >= 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n @media (width >= 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n @media (width >= 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n @media (width >= 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n @media (width >= 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(0.25rem * 0);\n }\n .m-2 {\n margin: calc(0.25rem * 2);\n }\n .mx-0 {\n margin-inline: calc(0.25rem * 0);\n }\n .mx-0\\.5 {\n margin-inline: calc(0.25rem * 0.5);\n }\n .mx-1 {\n margin-inline: calc(0.25rem * 1);\n }\n .mx-6 {\n margin-inline: calc(0.25rem * 6);\n }\n .mx-16 {\n margin-inline: calc(0.25rem * 16);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-2 {\n margin-block: calc(0.25rem * 2);\n }\n .my-3 {\n margin-block: calc(0.25rem * 3);\n }\n .my-4 {\n margin-block: calc(0.25rem * 4);\n }\n .my-6 {\n margin-block: calc(0.25rem * 6);\n }\n .my-auto {\n margin-block: auto;\n }\n .mt-0 {\n margin-top: calc(0.25rem * 0);\n }\n .mt-1 {\n margin-top: calc(0.25rem * 1);\n }\n .mt-1\\.5 {\n margin-top: calc(0.25rem * 1.5);\n }\n .mt-2 {\n margin-top: calc(0.25rem * 2);\n }\n .mt-2\\.5 {\n margin-top: calc(0.25rem * 2.5);\n }\n .mt-3 {\n margin-top: calc(0.25rem * 3);\n }\n .mt-4 {\n margin-top: calc(0.25rem * 4);\n }\n .mt-6 {\n margin-top: calc(0.25rem * 6);\n }\n .mt-7 {\n margin-top: calc(0.25rem * 7);\n }\n .mt-8 {\n margin-top: calc(0.25rem * 8);\n }\n .mt-10 {\n margin-top: calc(0.25rem * 10);\n }\n .mt-px {\n margin-top: 1px;\n }\n .mr-0 {\n margin-right: calc(0.25rem * 0);\n }\n .mr-0\\.5 {\n margin-right: calc(0.25rem * 0.5);\n }\n .mr-1 {\n margin-right: calc(0.25rem * 1);\n }\n .mr-1\\.5 {\n margin-right: calc(0.25rem * 1.5);\n }\n .mr-2 {\n margin-right: calc(0.25rem * 2);\n }\n .mr-3 {\n margin-right: calc(0.25rem * 3);\n }\n .mr-6 {\n margin-right: calc(0.25rem * 6);\n }\n .mb-0 {\n margin-bottom: calc(0.25rem * 0);\n }\n .mb-1 {\n margin-bottom: calc(0.25rem * 1);\n }\n .mb-2 {\n margin-bottom: calc(0.25rem * 2);\n }\n .mb-3 {\n margin-bottom: calc(0.25rem * 3);\n }\n .mb-4 {\n margin-bottom: calc(0.25rem * 4);\n }\n .mb-6 {\n margin-bottom: calc(0.25rem * 6);\n }\n .ml-0\\.5 {\n margin-left: calc(0.25rem * 0.5);\n }\n .ml-1 {\n margin-left: calc(0.25rem * 1);\n }\n .ml-2 {\n margin-left: calc(0.25rem * 2);\n }\n .ml-4 {\n margin-left: calc(0.25rem * 4);\n }\n .ml-6 {\n margin-left: calc(0.25rem * 6);\n }\n .ml-auto {\n margin-left: auto;\n }\n .box-border {\n box-sizing: border-box;\n }\n .box-content {\n box-sizing: content-box;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n }\n .line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n }\n .line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n }\n .line-clamp-none {\n overflow: visible;\n display: block;\n -webkit-box-orient: horizontal;\n -webkit-line-clamp: unset;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-square-\\[auto\\] {\n aspect-ratio: 1 / 1;\n height: auto;\n }\n @supports not (aspect-ratio: 1 / 1) {\n .aspect-square-\\[auto\\] {\n height: auto;\n }\n }\n .aspect-square-\\[auto\\] {\n aspect-ratio: 1 / 1;\n height: auto;\n }\n @supports not (aspect-ratio: 1 / 1) {\n .aspect-square-\\[auto\\] {\n height: auto;\n }\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .size-\\[27px\\] {\n width: 27px;\n height: 27px;\n }\n .h-1 {\n height: calc(0.25rem * 1);\n }\n .h-2 {\n height: calc(0.25rem * 2);\n }\n .h-2\\.5 {\n height: calc(0.25rem * 2.5);\n }\n .h-3 {\n height: calc(0.25rem * 3);\n }\n .h-4 {\n height: calc(0.25rem * 4);\n }\n .h-5 {\n height: calc(0.25rem * 5);\n }\n .h-5\\/6 {\n height: calc(5/6 * 100%);\n }\n .h-6 {\n height: calc(0.25rem * 6);\n }\n .h-7 {\n height: calc(0.25rem * 7);\n }\n .h-8 {\n height: calc(0.25rem * 8);\n }\n .h-9 {\n height: calc(0.25rem * 9);\n }\n .h-10 {\n height: calc(0.25rem * 10);\n }\n .h-12 {\n height: calc(0.25rem * 12);\n }\n .h-\\[2\\.6rem\\] {\n height: 2.6rem;\n }\n .h-\\[9px\\] {\n height: 9px;\n }\n .h-auto {\n height: auto;\n }\n .h-full {\n height: 100%;\n }\n .max-h-96 {\n max-height: calc(0.25rem * 96);\n }\n .min-h-10 {\n min-height: calc(0.25rem * 10);\n }\n .min-lines-2 {\n min-height: calc(var(--line-height) * 2);\n }\n .min-lines-2 {\n min-height: calc(var(--line-height) * 2);\n }\n .min-lines-3 {\n min-height: calc(var(--line-height) * 3);\n }\n .min-lines-3 {\n min-height: calc(var(--line-height) * 3);\n }\n .w-0\\.5 {\n width: calc(0.25rem * 0.5);\n }\n .w-1 {\n width: calc(0.25rem * 1);\n }\n .w-1\\/2 {\n width: calc(1/2 * 100%);\n }\n .w-2 {\n width: calc(0.25rem * 2);\n }\n .w-2\\.5 {\n width: calc(0.25rem * 2.5);\n }\n .w-3 {\n width: calc(0.25rem * 3);\n }\n .w-3\\.5 {\n width: calc(0.25rem * 3.5);\n }\n .w-3\\/5 {\n width: calc(3/5 * 100%);\n }\n .w-4 {\n width: calc(0.25rem * 4);\n }\n .w-5 {\n width: calc(0.25rem * 5);\n }\n .w-5\\/6 {\n width: calc(5/6 * 100%);\n }\n .w-6 {\n width: calc(0.25rem * 6);\n }\n .w-7 {\n width: calc(0.25rem * 7);\n }\n .w-8 {\n width: calc(0.25rem * 8);\n }\n .w-9 {\n width: calc(0.25rem * 9);\n }\n .w-10 {\n width: calc(0.25rem * 10);\n }\n .w-12 {\n width: calc(0.25rem * 12);\n }\n .w-20 {\n width: calc(0.25rem * 20);\n }\n .w-26 {\n width: calc(0.25rem * 26);\n }\n .w-28 {\n width: calc(0.25rem * 28);\n }\n .w-32 {\n width: calc(0.25rem * 32);\n }\n .w-36 {\n width: calc(0.25rem * 36);\n }\n .w-44 {\n width: calc(0.25rem * 44);\n }\n .w-48 {\n width: calc(0.25rem * 48);\n }\n .w-60 {\n width: calc(0.25rem * 60);\n }\n .w-64 {\n width: calc(0.25rem * 64);\n }\n .w-72 {\n width: calc(0.25rem * 72);\n }\n .w-100 {\n width: calc(0.25rem * 100);\n }\n .w-\\[2\\.6rem\\] {\n width: 2.6rem;\n }\n .w-auto {\n width: auto;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .w-max {\n width: max-content;\n }\n .max-w-4\\/5 {\n max-width: calc(4/5 * 100%);\n }\n .max-w-60 {\n max-width: calc(0.25rem * 60);\n }\n .max-w-\\[30ch\\] {\n max-width: 30ch;\n }\n .max-w-full {\n max-width: 100%;\n }\n .max-w-lg {\n max-width: 32rem;\n }\n .max-w-max {\n max-width: max-content;\n }\n .min-w-0 {\n min-width: calc(0.25rem * 0);\n }\n .min-w-10 {\n min-width: calc(0.25rem * 10);\n }\n .min-w-20 {\n min-width: calc(0.25rem * 20);\n }\n .min-w-24 {\n min-width: calc(0.25rem * 24);\n }\n .min-w-full {\n min-width: 100%;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-none {\n flex: none;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .grow {\n flex-grow: 1;\n }\n .basis-1\\/2 {\n flex-basis: calc(1/2 * 100%);\n }\n .basis-8 {\n flex-basis: calc(0.25rem * 8);\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-1\\/2 {\n --tw-translate-x: calc(1/2 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-75 {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n .cursor-\\[inherit\\] {\n cursor: inherit;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .list-outside {\n list-style-position: outside;\n }\n .list-decimal {\n list-style-type: decimal;\n }\n .list-disc {\n list-style-type: disc;\n }\n .list-none {\n list-style-type: none;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-\\[min-content_1fr\\] {\n grid-template-columns: min-content 1fr;\n }\n .grid-cols-\\[min-content_auto\\] {\n grid-template-columns: min-content auto;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-nowrap {\n flex-wrap: nowrap;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .place-items-center {\n place-items: center;\n }\n .content-center {\n align-content: center;\n }\n .items-baseline {\n align-items: baseline;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0\\.5 {\n gap: calc(0.25rem * 0.5);\n }\n .gap-1 {\n gap: calc(0.25rem * 1);\n }\n .gap-2 {\n gap: calc(0.25rem * 2);\n }\n .gap-3 {\n gap: calc(0.25rem * 3);\n }\n .gap-4 {\n gap: calc(0.25rem * 4);\n }\n .gap-8 {\n gap: calc(0.25rem * 8);\n }\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n .gap-x-1\\.5 {\n column-gap: calc(0.25rem * 1.5);\n }\n .gap-x-2 {\n column-gap: calc(0.25rem * 2);\n }\n .gap-x-4 {\n column-gap: calc(0.25rem * 4);\n }\n :where(.space-x-1\\.5 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n }\n .gap-y-0\\.5 {\n row-gap: calc(0.25rem * 0.5);\n }\n :where(.divide-y > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n :where(.divide-neutral > :not(:last-child)) {\n border-color: var(--atomic-neutral);\n }\n .self-center {\n align-self: center;\n }\n .self-start {\n align-self: flex-start;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-x-clip {\n overflow-x: clip;\n }\n .overflow-x-scroll {\n overflow-x: scroll;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .overflow-y-visible {\n overflow-y: visible;\n }\n .scroll-smooth {\n scroll-behavior: smooth;\n }\n .rounded {\n border-radius: var(--atomic-border-radius);\n }\n .rounded-3xl {\n border-radius: 1.5rem;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--atomic-border-radius-lg);\n }\n .rounded-md {\n border-radius: var(--atomic-border-radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--atomic-border-radius);\n }\n .rounded-xl {\n border-radius: var(--atomic-border-radius-xl);\n }\n .rounded-tl-none {\n border-top-left-radius: 0;\n }\n .rounded-r-none {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n .border-gray-200 {\n border-color: oklch(0.928 0.006 264.531);\n }\n .border-neutral {\n border-color: var(--atomic-neutral);\n }\n .border-neutral-dark {\n border-color: var(--atomic-neutral-dark);\n }\n .border-neutral-dim {\n border-color: var(--atomic-neutral-dim);\n }\n .border-primary {\n border-color: var(--atomic-primary);\n }\n .border-primary-light {\n border-color: var(--atomic-primary-light);\n }\n .border-t-neutral {\n border-top-color: var(--atomic-neutral);\n }\n .border-b-neutral {\n border-bottom-color: var(--atomic-neutral);\n }\n .border-b-neutral-dim {\n border-bottom-color: var(--atomic-neutral-dim);\n }\n .border-l-neutral {\n border-left-color: var(--atomic-neutral);\n }\n .border-l-neutral-dim {\n border-left-color: var(--atomic-neutral-dim);\n }\n .bg-\\[\\#F1F2FF\\] {\n background-color: #F1F2FF;\n }\n .bg-\\[rgba\\(40\\,40\\,40\\,0\\.8\\)\\] {\n background-color: rgba(40,40,40,0.8);\n }\n .bg-background {\n background-color: var(--atomic-background);\n }\n .bg-error {\n background-color: var(--atomic-error);\n }\n .bg-gray-50 {\n background-color: oklch(0.985 0.002 247.839);\n }\n .bg-neutral {\n background-color: var(--atomic-neutral);\n }\n .bg-neutral-dark {\n background-color: var(--atomic-neutral-dark);\n }\n .bg-neutral-light {\n background-color: var(--atomic-neutral-light);\n }\n .bg-primary {\n background-color: var(--atomic-primary);\n }\n .bg-primary-background {\n background-color: var(--atomic-primary-background);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: #fff;\n }\n .bg-linear-to-l {\n --tw-gradient-position: to left;\n }\n @supports (background-image: linear-gradient(in lab, red, red)) {\n .bg-linear-to-l {\n --tw-gradient-position: to left in oklab;\n }\n }\n .bg-linear-to-l {\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .bg-linear-to-r {\n --tw-gradient-position: to right;\n }\n @supports (background-image: linear-gradient(in lab, red, red)) {\n .bg-linear-to-r {\n --tw-gradient-position: to right in oklab;\n }\n }\n .bg-linear-to-r {\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-background\\/60 {\n --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n }\n @supports (color: color-mix(in lab, red, red)) {\n .from-background\\/60 {\n --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n }\n }\n .from-background\\/60 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .from-more-results-progress-bar-color-from {\n --tw-gradient-from: var(\n --atomic-more-results-progress-bar-color-from,\n var(--atomic-primary-dark)\n );\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-more-results-progress-bar-color-to {\n --tw-gradient-to: var(\n --atomic-more-results-progress-bar-color-to,\n var(--atomic-primary-light)\n );\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .fill-current {\n fill: currentcolor;\n }\n .stroke-\\[1\\.25\\] {\n stroke-width: 1.25;\n }\n .object-contain {\n object-fit: contain;\n }\n .p-0 {\n padding: calc(0.25rem * 0);\n }\n .p-1 {\n padding: calc(0.25rem * 1);\n }\n .p-2 {\n padding: calc(0.25rem * 2);\n }\n .p-2\\.5 {\n padding: calc(0.25rem * 2.5);\n }\n .p-3 {\n padding: calc(0.25rem * 3);\n }\n .p-3\\.5 {\n padding: calc(0.25rem * 3.5);\n }\n .p-4 {\n padding: calc(0.25rem * 4);\n }\n .p-6 {\n padding: calc(0.25rem * 6);\n }\n .p-7 {\n padding: calc(0.25rem * 7);\n }\n .p-8 {\n padding: calc(0.25rem * 8);\n }\n .px-1 {\n padding-inline: calc(0.25rem * 1);\n }\n .px-2 {\n padding-inline: calc(0.25rem * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(0.25rem * 2.5);\n }\n .px-3 {\n padding-inline: calc(0.25rem * 3);\n }\n .px-4 {\n padding-inline: calc(0.25rem * 4);\n }\n .px-6 {\n padding-inline: calc(0.25rem * 6);\n }\n .px-9 {\n padding-inline: calc(0.25rem * 9);\n }\n .py-0\\.5 {\n padding-block: calc(0.25rem * 0.5);\n }\n .py-1 {\n padding-block: calc(0.25rem * 1);\n }\n .py-1\\.5 {\n padding-block: calc(0.25rem * 1.5);\n }\n .py-2 {\n padding-block: calc(0.25rem * 2);\n }\n .py-2\\.5 {\n padding-block: calc(0.25rem * 2.5);\n }\n .py-3 {\n padding-block: calc(0.25rem * 3);\n }\n .py-3\\.5 {\n padding-block: calc(0.25rem * 3.5);\n }\n .py-4 {\n padding-block: calc(0.25rem * 4);\n }\n .py-4\\.5 {\n padding-block: calc(0.25rem * 4.5);\n }\n .py-5 {\n padding-block: calc(0.25rem * 5);\n }\n .py-6 {\n padding-block: calc(0.25rem * 6);\n }\n .pt-0\\.5 {\n padding-top: calc(0.25rem * 0.5);\n }\n .pt-8 {\n padding-top: calc(0.25rem * 8);\n }\n .pr-2 {\n padding-right: calc(0.25rem * 2);\n }\n .pr-6 {\n padding-right: calc(0.25rem * 6);\n }\n .pr-24 {\n padding-right: calc(0.25rem * 24);\n }\n .pb-1 {\n padding-bottom: calc(0.25rem * 1);\n }\n .pb-3 {\n padding-bottom: calc(0.25rem * 3);\n }\n .pb-4 {\n padding-bottom: calc(0.25rem * 4);\n }\n .pb-5 {\n padding-bottom: calc(0.25rem * 5);\n }\n .pb-6 {\n padding-bottom: calc(0.25rem * 6);\n }\n .pl-0 {\n padding-left: calc(0.25rem * 0);\n }\n .pl-1 {\n padding-left: calc(0.25rem * 1);\n }\n .pl-3 {\n padding-left: calc(0.25rem * 3);\n }\n .pl-7 {\n padding-left: calc(0.25rem * 7);\n }\n .pl-9 {\n padding-left: calc(0.25rem * 9);\n }\n .pl-10 {\n padding-left: calc(0.25rem * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .align-baseline {\n vertical-align: baseline;\n }\n .align-bottom {\n vertical-align: bottom;\n }\n .align-middle {\n vertical-align: middle;\n }\n .font-sans {\n font-family: var(--atomic-font-family);\n }\n .set-font-size-sm {\n --font-size: var(--atomic-text-sm);\n font-size: var(--font-size);\n --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n line-height: var(--line-height);\n }\n .set-font-size-sm {\n --font-size: var(--atomic-text-sm);\n font-size: var(--font-size);\n --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n line-height: var(--line-height);\n }\n .text-2xl {\n font-size: var(--atomic-text-2xl);\n line-height: var(--tw-leading, calc(2 / 1.5));\n }\n .text-base {\n font-size: var(--atomic-text-base);\n line-height: var(--tw-leading, calc(1.5 / 1));\n }\n .text-lg {\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n }\n .text-sm {\n font-size: var(--atomic-text-sm);\n line-height: var(--tw-leading, calc(1.25 / 0.875));\n }\n .text-xl {\n font-size: var(--atomic-text-xl);\n line-height: var(--tw-leading, calc(1.75 / 1.25));\n }\n .text-xs {\n font-size: 0.75rem;\n line-height: var(--tw-leading, calc(1 / 0.75));\n }\n .text-xs\\/\\[1rem\\] {\n font-size: 0.75rem;\n line-height: 1rem;\n }\n .leading-4 {\n --tw-leading: calc(0.25rem * 4);\n line-height: calc(0.25rem * 4);\n }\n .leading-5 {\n --tw-leading: calc(0.25rem * 5);\n line-height: calc(0.25rem * 5);\n }\n .leading-6 {\n --tw-leading: calc(0.25rem * 6);\n line-height: calc(0.25rem * 6);\n }\n .leading-8 {\n --tw-leading: calc(0.25rem * 8);\n line-height: calc(0.25rem * 8);\n }\n .leading-10 {\n --tw-leading: calc(0.25rem * 10);\n line-height: calc(0.25rem * 10);\n }\n .leading-\\[1\\.5\\] {\n --tw-leading: 1.5;\n line-height: 1.5;\n }\n .leading-\\[calc\\(1\\/\\.75\\)\\] {\n --tw-leading: calc(1 / .75);\n line-height: calc(1 / .75);\n }\n .leading-\\[var\\(--line-height\\)\\] {\n --tw-leading: var(--line-height);\n line-height: var(--line-height);\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-bold {\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n }\n .font-light {\n --tw-font-weight: 300;\n font-weight: 300;\n }\n .font-medium {\n --tw-font-weight: 500;\n font-weight: 500;\n }\n .font-normal {\n --tw-font-weight: var(--atomic-font-normal);\n font-weight: var(--atomic-font-normal);\n }\n .font-semibold {\n --tw-font-weight: 600;\n font-weight: 600;\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .break-all {\n word-break: break-all;\n }\n .break-keep {\n word-break: keep-all;\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-normal {\n white-space: normal;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-\\[\\#54698D\\] {\n color: #54698D;\n }\n .text-\\[inherit\\] {\n color: inherit;\n }\n .text-black {\n color: #000;\n }\n .text-error {\n color: var(--atomic-error);\n }\n .text-gray-500 {\n color: oklch(0.551 0.027 264.364);\n }\n .text-gray-600 {\n color: oklch(0.446 0.03 256.802);\n }\n .text-gray-700 {\n color: oklch(0.373 0.034 259.733);\n }\n .text-gray-900 {\n color: oklch(0.21 0.034 264.665);\n }\n .text-green-600 {\n color: oklch(0.627 0.194 149.214);\n }\n .text-inline-code {\n color: var(--atomic-inline-code);\n }\n .text-neutral {\n color: var(--atomic-neutral);\n }\n .text-neutral-dark {\n color: var(--atomic-neutral-dark);\n }\n .text-on-background {\n color: var(--atomic-on-background);\n }\n .text-on-primary {\n color: var(--atomic-on-primary);\n }\n .text-primary {\n color: var(--atomic-primary);\n }\n .text-primary-light {\n color: var(--atomic-primary-light);\n }\n .text-rating-icon-active {\n color: var(--atomic-rating-icon-active-color, #f6ce3c);\n }\n .text-rating-icon-inactive {\n color: var(\n --atomic-rating-icon-inactive-color,\n var(--atomic-neutral)\n );\n }\n .text-success {\n color: var(--atomic-success);\n }\n .text-transparent {\n color: transparent;\n }\n .capitalize {\n text-transform: capitalize;\n }\n .lowercase {\n text-transform: lowercase;\n }\n .italic {\n font-style: italic;\n }\n .line-through {\n text-decoration-line: line-through;\n }\n .placeholder-neutral-dark::placeholder {\n color: var(--atomic-neutral-dark);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-80 {\n opacity: 80%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-inner-primary {\n --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-t-lg {\n --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-3 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-primary {\n --tw-ring-color: var(--atomic-primary);\n }\n .ring-primary-light {\n --tw-ring-color: var(--atomic-primary-light);\n }\n .ring-ring-primary {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .outline-error {\n outline-color: var(--atomic-error);\n }\n .outline-neutral {\n outline-color: var(--atomic-neutral);\n }\n .outline-primary {\n outline-color: var(--atomic-primary);\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .invert {\n --tw-invert: invert(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-\\[visibility\\] {\n transition-property: visibility;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-500 {\n --tw-duration: 500ms;\n transition-duration: 500ms;\n }\n .ease-in-out {\n --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n }\n .\\[grid-area\\:modal\\] {\n grid-area: modal;\n }\n .\\[scrollbar-gutter\\:stable_both-edges\\] {\n scrollbar-gutter: stable both-edges;\n }\n @media (hover: hover) {\n .group-hover\\:visible:is(:where(.group):hover *) {\n visibility: visible;\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-error:is(:where(.group):hover *) {\n color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-primary:is(:where(.group):hover *) {\n color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n color: var(--atomic-primary-light);\n }\n }\n .group-focus\\:text-primary:is(:where(.group):focus *) {\n color: var(--atomic-primary);\n }\n .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n color: var(--atomic-primary-light);\n }\n .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n color: var(--atomic-error);\n }\n .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n color: var(--atomic-primary);\n }\n .peer-focus-within\\:border-primary-light:is(:where(.peer):focus-within ~ *) {\n border-color: var(--atomic-primary-light);\n }\n .peer-focus-within\\:text-primary-light:is(:where(.peer):focus-within ~ *) {\n color: var(--atomic-primary-light);\n }\n @media (hover: hover) {\n .peer-hover\\:border-primary-light:is(:where(.peer):hover ~ *) {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .peer-hover\\:text-primary-light:is(:where(.peer):hover ~ *) {\n color: var(--atomic-primary-light);\n }\n }\n .before\\:inline::before {\n content: var(--tw-content);\n display: inline;\n }\n .before\\:content-\\[\\\'\\,\\\\00a0\\\'\\]::before {\n content: var(--tw-content);\n --tw-content: \',\\00a0\';\n content: var(--tw-content);\n }\n .after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n }\n .after\\:-bottom-0\\.5::after {\n content: var(--tw-content);\n bottom: calc(0.25rem * -0.5);\n }\n .after\\:block::after {\n content: var(--tw-content);\n display: block;\n }\n .after\\:h-1::after {\n content: var(--tw-content);\n height: calc(0.25rem * 1);\n }\n .after\\:w-full::after {\n content: var(--tw-content);\n width: 100%;\n }\n .after\\:rounded::after {\n content: var(--tw-content);\n border-radius: var(--atomic-border-radius);\n }\n .after\\:bg-primary::after {\n content: var(--tw-content);\n background-color: var(--atomic-primary);\n }\n .focus-within\\:border-disabled:focus-within {\n border-color: var(--atomic-disabled);\n }\n .focus-within\\:border-primary:focus-within {\n border-color: var(--atomic-primary);\n }\n .focus-within\\:ring-3:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .focus-within\\:ring-neutral:focus-within {\n --tw-ring-color: var(--atomic-neutral);\n }\n .focus-within\\:ring-ring-primary:focus-within {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n @media (hover: hover) {\n .hover\\:border:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n @media (hover: hover) {\n .hover\\:border-error:hover {\n border-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .hover\\:border-primary-light:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-error:hover {\n background-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-neutral-light:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-primary-light:hover {\n background-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:bg-transparent:hover {\n background-color: transparent;\n }\n }\n @media (hover: hover) {\n .hover\\:fill-white:hover {\n fill: #fff;\n }\n }\n @media (hover: hover) {\n .hover\\:text-primary-light:hover {\n color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n }\n @media (hover: hover) {\n .hover\\:opacity-100:hover {\n opacity: 100%;\n }\n }\n @media (hover: hover) {\n .hover\\:shadow-sm:hover {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:opacity-100:focus {\n opacity: 100%;\n }\n .focus\\:outline-hidden:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n @media (forced-colors: active) {\n .focus\\:outline-hidden:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .focus-visible\\:border:focus-visible {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .focus-visible\\:border-error:focus-visible {\n border-color: var(--atomic-error);\n }\n .focus-visible\\:border-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .focus-visible\\:border-primary-light:focus-visible {\n border-color: var(--atomic-primary-light);\n }\n .focus-visible\\:bg-error:focus-visible {\n background-color: var(--atomic-error);\n }\n .focus-visible\\:bg-neutral-light:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .focus-visible\\:bg-primary-light:focus-visible {\n background-color: var(--atomic-primary-light);\n }\n .focus-visible\\:text-primary-light:focus-visible {\n color: var(--atomic-primary-light);\n }\n .focus-visible\\:underline:focus-visible {\n text-decoration-line: underline;\n }\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .focus-visible\\:outline-none:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n @media (width >= 40rem) {\n .sm\\:px-6 {\n padding-inline: calc(0.25rem * 6);\n }\n }\n .\\[part\\=\\"breadcrumb-button\\"\\]\\:visible:is(part="breadcrumb-button") {\n visibility: visible;\n }\n}\n@layer theme, base, components, utilities;\n@layer components {\n .input-primary {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n }\n @media (hover: hover) {\n .input-primary:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n .input-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .input-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .input-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .input-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .btn-radio::before {\n content: var(--tw-content);\n --tw-content: attr(value);\n content: var(--tw-content);\n }\n .btn-primary {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-primary);\n color: var(--atomic-on-primary);\n }\n @media (hover: hover) {\n .btn-primary:hover {\n background-color: var(--atomic-primary-light);\n }\n }\n .btn-primary:focus-visible {\n background-color: var(--atomic-primary-light);\n }\n .btn-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-primary:disabled {\n cursor: not-allowed;\n }\n .btn-primary:disabled {\n background-color: var(--atomic-disabled);\n }\n .btn-outline-primary {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .btn-outline-primary:hover {\n border-color: var(--atomic-primary-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-primary:hover {\n color: var(--atomic-primary-light);\n }\n }\n .btn-outline-primary:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-primary:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-primary:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-primary:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-primary:disabled {\n cursor: not-allowed;\n }\n .btn-outline-primary:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-primary:disabled {\n color: var(--atomic-neutral);\n }\n .btn-text-primary {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-background);\n color: var(--atomic-primary);\n }\n @media (hover: hover) {\n .btn-text-primary:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n .btn-text-primary:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-text-primary:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-neutral {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-neutral:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-neutral:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-neutral:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-neutral:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-neutral:disabled {\n cursor: not-allowed;\n }\n .btn-outline-neutral:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-neutral:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-neutral:disabled {\n opacity: 50%;\n }\n .btn-outline-bg-neutral {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-bg-neutral:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-outline-bg-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-bg-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-bg-neutral:disabled {\n cursor: not-allowed;\n }\n .btn-outline-bg-neutral:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-bg-neutral:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-bg-neutral:disabled {\n opacity: 50%;\n }\n .btn-outline-bg-error {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n border-color: var(--atomic-primary);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-outline-bg-error:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-outline-bg-error:focus-visible {\n border-color: var(--atomic-primary);\n }\n .btn-outline-bg-error:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-outline-bg-error:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-bg-error:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-bg-error:disabled {\n cursor: not-allowed;\n }\n .btn-outline-bg-error:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-bg-error:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-bg-error:disabled {\n opacity: 50%;\n }\n .btn-outline-error {\n border-radius: var(--atomic-border-radius);\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-outline-error:hover {\n border-color: var(--atomic-error);\n }\n }\n @media (hover: hover) {\n .btn-outline-error:hover {\n color: var(--atomic-error);\n }\n }\n .btn-outline-error:focus-visible {\n border-color: var(--atomic-error);\n }\n .btn-outline-error:focus-visible {\n color: var(--atomic-error);\n }\n .btn-outline-error:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .btn-outline-error:focus-visible {\n --tw-ring-color: var(--atomic-ring-primary);\n }\n .btn-outline-error:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-outline-error:disabled {\n cursor: not-allowed;\n }\n .btn-outline-error:disabled {\n border-color: var(--atomic-neutral);\n }\n .btn-outline-error:disabled {\n color: var(--atomic-on-background);\n }\n .btn-outline-error:disabled {\n opacity: 50%;\n }\n .btn-text-neutral {\n border-radius: var(--atomic-border-radius);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-text-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n @media (hover: hover) {\n .btn-text-neutral:hover {\n color: var(--atomic-primary);\n }\n }\n .btn-text-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-text-neutral:focus-visible {\n color: var(--atomic-primary);\n }\n .btn-text-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-text-transparent {\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-text-transparent:hover {\n color: var(--atomic-primary-light);\n }\n }\n .btn-text-transparent:focus-visible {\n color: var(--atomic-primary-light);\n }\n .btn-square-neutral {\n border-style: var(--tw-border-style);\n border-width: 1px;\n border-color: var(--atomic-neutral);\n background-color: var(--atomic-background);\n color: var(--atomic-on-background);\n }\n @media (hover: hover) {\n .btn-square-neutral:hover {\n background-color: var(--atomic-neutral-light);\n }\n }\n .btn-square-neutral:focus-visible {\n background-color: var(--atomic-neutral-light);\n }\n .btn-square-neutral:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n .btn-page {\n display: grid;\n height: calc(0.25rem * 10);\n width: calc(0.25rem * 10);\n place-items: center;\n border-style: var(--tw-border-style);\n border-width: 0px;\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n }\n @media (hover: hover) {\n .btn-page:hover {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n .btn-page:focus-visible {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .btn-page.selected {\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--atomic-primary);\n --tw-font-weight: var(--atomic-font-bold);\n font-weight: var(--atomic-font-bold);\n }\n}\n@layer base {\n :host {\n display: block;\n }\n :host, button, input, select {\n font-family: var(--atomic-font-family);\n font-size: var(--atomic-text-base);\n line-height: var(--tw-leading, calc(1.5 / 1));\n --tw-font-weight: var(--atomic-font-normal);\n font-weight: var(--atomic-font-normal);\n }\n button {\n cursor: pointer;\n }\n :host(.atomic-hidden) {\n display: none;\n }\n .ripple {\n position: absolute;\n pointer-events: none;\n transform: scale(0);\n border-radius: 50%;\n animation: ripple var(--animation-duration) linear;\n }\n .ripple-relative {\n position: relative;\n }\n .ripple-parent {\n overflow: hidden;\n }\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n}\n.loading {\n --tw-gradient-from: var(--atomic-primary-dark);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n --tw-gradient-to: var(--atomic-primary-light);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.loading::after {\n content: \'\';\n position: absolute;\n height: calc(5/6 * 100%);\n width: calc(5/6 * 100%);\n border-radius: calc(infinity * 1px);\n background-color: var(--atomic-background);\n}\n[part=\'textarea-expander\']::after {\n content: attr(data-replicated-value) \' \';\n visibility: hidden;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\'] {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\']::-webkit-scrollbar {\n display: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\'] {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\']::-webkit-scrollbar {\n display: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\'] {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\']::-webkit-scrollbar {\n display: none;\n}\n[part=\'textarea-expander\'] > [part=\'textarea\'], [part=\'textarea-expander\']::after {\n z-index: 10;\n height: 100%;\n flex-grow: 1;\n resize: none;\n overflow: hidden;\n background-color: transparent;\n padding-inline: calc(0.25rem * 4);\n padding-block: calc(0.25rem * 3.5);\n font-size: var(--atomic-text-lg);\n line-height: var(--tw-leading, calc(1.75 / 1.125));\n white-space: nowrap;\n color: var(--atomic-neutral-dark);\n --tw-outline-style: none;\n outline-style: none;\n grid-area: 1 / 1 / 2 / 2;\n}\n[part=\'textarea-expander\'].expanded > [part=\'textarea\'], [part=\'textarea-expander\'].expanded::after {\n white-space: pre-wrap;\n overflow-y: auto;\n max-height: 8em;\n}\n[part=\'wrapper\'] {\n z-index: 10;\n}\n:host {\n position: relative;\n}\n[part=\'input\'] {\n padding-top: 0.675rem;\n padding-bottom: 0.675rem;\n}\n[part=\'submit-icon\'] {\n color: var(--atomic-on-background);\n}\n[part=\'submit-button\'] {\n display: flex;\n width: calc(0.25rem * 10);\n align-items: center;\n justify-content: center;\n}\n.loading::after {\n content: \'\';\n position: absolute;\n height: calc(5/6 * 100%);\n width: calc(5/6 * 100%);\n border-radius: calc(infinity * 1px);\n background-color: var(--atomic-background);\n}\n[part=\'clear-button-wrapper\'] {\n margin-right: calc(0.25rem * 2);\n padding-block: calc(0.25rem * 0);\n}\n[part=\'clear-icon\'] {\n height: calc(0.25rem * 3);\n width: calc(0.25rem * 3);\n}\n[part=\'textarea-expander\']::after {\n padding: calc(0.25rem * 2);\n padding-inline: calc(0.25rem * 4);\n}\n[part=\'textarea-expander\'] [part=\'textarea\'] {\n padding: calc(0.25rem * 2);\n padding-inline: calc(0.25rem * 4);\n}\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-x-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "*";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "*";\n inherits: false;\n}\n@property --tw-content {\n syntax: "*";\n initial-value: "";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-space-x-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: "";\n }\n }\n}\n';const z=k;var j=undefined&&undefined.__decorate||function(n,r,t,e){var i=arguments.length,a=i<3?r:e===null?e=Object.getOwnPropertyDescriptor(r,t):e,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(n,r,t,e);else for(var l=n.length-1;l>=0;l--)if(o=n[l])a=(i<3?o(a):i>3?o(r,t,a):o(r,t))||a;return i>3&&a&&Object.defineProperty(r,t,a),a};const S=class{constructor(n){r(this,n);this.isExpanded=false;this.disableSearch=false;this.numberOfSuggestions=5;this.searchBoxState=undefined;this.error=undefined;this.isExpanded=false;this.disableSearch=false;this.numberOfSuggestions=5}initialize(){this.id=m("atomic-search-box-");const n={id:this.id,numberOfSuggestions:0,highlightOptions:{notMatchDelimiters:{open:'<span class="font-bold">',close:"</span>"},correctionDelimiters:{open:'<span class="font-normal">',close:"</span>"}}};const{fetchQuerySuggestions:r,registerQuerySuggest:t}=e(this.bindings.engine);this.searchBox=i(this.bindings.engine,{options:n});this.bindings.engine.dispatch(t({id:this.id,count:this.numberOfSuggestions}));this.suggestionManager=new a({getNumberOfSuggestionsToDisplay:()=>this.numberOfSuggestions,updateQuery:n=>this.searchBox.updateText(n),getSearchBoxValue:()=>this.searchBoxState.value,getSuggestionTimeout:()=>500,getSuggestionDelay:()=>0,getHost:()=>this.host,getLogger:()=>this.bindings.engine.logger});this.suggestionManager.registerSuggestions({position:0,renderItems:()=>this.searchBox.state.suggestions.map((n=>this.renderSuggestionItem(n))),onInput:()=>this.bindings.engine.dispatch(r({id:this.id})),panel:"left"})}onSubmit(){if(this.suggestionManager.activeDescendantElement){this.suggestionManager.clickOnActiveElement();return}this.searchBox.submit();this.suggestionManager.clearSuggestions()}async onKeyDown(n){if(this.disableSearch){return}switch(n.key){case"Enter":this.onSubmit();break;case"Escape":this.suggestionManager.clearSuggestions();break;case"ArrowDown":n.preventDefault();await this.suggestionManager.focusNextValue();this.announceNewActiveSuggestionToScreenReader();break;case"ArrowUp":n.preventDefault();await this.suggestionManager.focusPreviousValue();this.announceNewActiveSuggestionToScreenReader();break;case"Tab":this.suggestionManager.clearSuggestions();break}}triggerTextAreaChange(n){this.textAreaRef.value=n;this.textAreaRef.dispatchEvent(new window.Event("change"))}renderSuggestion(r,t,e){const i=`${this.id}-suggestion-${r.key}`;const a=i===this.suggestionManager.activeDescendant||this.suggestionManager.suggestedQuery===r.query;if(t===e&&r.hideIfLast){return null}return n("atomic-suggestion-renderer",{i18n:this.bindings.i18n,id:i,suggestion:r,isSelected:a,side:"left",index:t,lastIndex:e,isDoubleList:false,onClick:n=>{this.suggestionManager.onSuggestionClick(r,n)},onMouseOver:()=>{this.suggestionManager.onSuggestionMouseOver(r,"left",i)}})}renderSuggestionItem(r){const t=this.searchBox.state.value!=="";const e=u(r,this.bindings.i18n);return{...e,content:n(f,null,n(y,{icon:o,hasSuggestion:this.searchBoxState.suggestions.length>1}),n(x,{suggestion:r,hasQuery:t})),onSelect:()=>{this.searchBox.selectSuggestion(r.rawValue)}}}renderPanel(r,t,e){if(!r.length){return null}return n("div",{part:"suggestions",ref:t,class:"flex grow basis-1/2 flex-col",onMouseDown:n=>{if(n.target===e()){n.preventDefault()}}},r.map(((n,t)=>this.renderSuggestion(n,t,r.length-1))))}renderSuggestions(){if(!this.suggestionManager.hasSuggestions){this.suggestionManager.updateActiveDescendant();return null}return n("div",{id:`${this.id}-popup`,part:"suggestions-wrapper",class:`bg-background border-neutral absolute top-full left-0 z-10 flex w-full rounded-md border ${this.suggestionManager.hasSuggestions&&this.isExpanded?"":"hidden"}`,role:"application","aria-label":this.bindings.i18n.t("search-suggestions-single-list"),...this.suggestionManager.activeDescendant&&{"aria-activedescendant":this.suggestionManager.activeDescendant}},this.renderPanel(this.suggestionManager.allSuggestionElements,(n=>this.suggestionManager.leftPanel=n),(()=>this.suggestionManager.leftPanel)))}getSearchInputLabel(){if(c()){return this.bindings.i18n.t("search-box-with-suggestions-macos")}if(!d()){return this.bindings.i18n.t("search-box-with-suggestions-keyboardless")}return this.bindings.i18n.t("search-box-with-suggestions")}async onFocus(){if(this.isExpanded){return}this.isExpanded=true;await this.suggestionManager.triggerSuggestions();this.announceNewSuggestionsToScreenReader()}async onInput(n){this.searchBox.updateText(n);this.isExpanded=true;await this.suggestionManager.triggerSuggestions();this.announceNewSuggestionsToScreenReader()}announceNewActiveSuggestionToScreenReader(){const n=this.suggestionManager.activeDescendantElement?.ariaLabel;if(c()&&n){this.suggestionsAriaMessage=n}}announceNewSuggestionsToScreenReader(){const n=this.suggestionManager.allSuggestionElements.filter(v).length;this.searchBoxAriaMessage=n?this.bindings.i18n.t(this.searchBoxState.value?"query-suggestions-available":"query-suggestions-available-no-query",{count:n,query:this.searchBoxState.value}):this.bindings.i18n.t("query-suggestions-unavailable")}render(){return n(s,{key:"2d4a5f83585f4675778ebb1953ac7369ab894791",disabled:this.disableSearch,onFocusout:n=>{if(!g(n)){return}this.suggestionManager.clearSuggestions();this.isExpanded=false}},n("atomic-icon",{key:"6e45a95038ed71f7d6993680499df7c9eb55c4a0",part:"submit-icon",icon:o,class:"my-auto mr-0 ml-4 h-4 w-4"}),n(l,{key:"5c500c8435a29d293ce0334ce21fd722627d0e04",textAreaRef:this.textAreaRef,loading:this.searchBoxState.isLoading,ref:n=>n&&(this.textAreaRef=n),bindings:this.bindings,value:this.searchBoxState.value,ariaLabel:this.getSearchInputLabel(),placeholder:this.bindings.i18n.t("search-ellipsis"),onFocus:()=>this.onFocus(),onKeyDown:n=>this.onKeyDown(n),onClear:()=>{this.searchBox.clear();this.triggerTextAreaChange("")},onInput:n=>this.onInput(n.target.value)}),this.renderSuggestions())}get host(){return t(this)}};j([w()],S.prototype,"bindings",void 0);j([h("searchBox")],S.prototype,"searchBoxState",void 0);j([p("search-box")],S.prototype,"searchBoxAriaMessage",void 0);j([p("search-suggestions",true)],S.prototype,"suggestionsAriaMessage",void 0);S.style=z;export{S as atomic_insight_search_box};
2
- //# sourceMappingURL=p-a468ba8e.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["getPartialSearchBoxSuggestionElement","suggestion","i18n","part","key","encodeForDomAttribute","rawValue","query","ariaLabel","t","interpolation","escapeValue","QuerySuggestionContainer","_","children","h","class","QuerySuggestionIcon","icon","hasSuggestion","QuerySuggestionText","hasQuery","innerHTML","highlightedValue","atomicInsightSearchBoxCss","AtomicInsightSearchBoxStyle0","AtomicInsightSearchBox","this","isExpanded","disableSearch","numberOfSuggestions","initialize","id","randomID","searchBoxOptions","highlightOptions","notMatchDelimiters","open","close","correctionDelimiters","fetchQuerySuggestions","registerQuerySuggest","loadInsightSearchActions","bindings","engine","searchBox","buildInsightSearchBox","options","dispatch","count","suggestionManager","SuggestionManager","getNumberOfSuggestionsToDisplay","updateQuery","updateText","getSearchBoxValue","searchBoxState","value","getSuggestionTimeout","getSuggestionDelay","getHost","host","getLogger","logger","registerSuggestions","position","renderItems","state","suggestions","map","renderSuggestionItem","onInput","panel","onSubmit","activeDescendantElement","clickOnActiveElement","submit","clearSuggestions","onKeyDown","e","preventDefault","focusNextValue","announceNewActiveSuggestionToScreenReader","focusPreviousValue","triggerTextAreaChange","textAreaRef","dispatchEvent","window","Event","renderSuggestion","item","index","lastIndex","isSelected","activeDescendant","suggestedQuery","hideIfLast","side","isDoubleList","onClick","onSuggestionClick","onMouseOver","onSuggestionMouseOver","partialItem","content","SearchSlimIcon","length","onSelect","selectSuggestion","renderPanel","elements","setRef","getRef","ref","onMouseDown","target","renderSuggestions","hasSuggestions","updateActiveDescendant","role","allSuggestionElements","el","leftPanel","getSearchInputLabel","isMacOS","hasKeyboard","onFocus","triggerSuggestions","announceNewSuggestionsToScreenReader","suggestionsAriaMessage","numberOfSuggestionsToAnnounce","filter","elementHasQuery","searchBoxAriaMessage","render","SearchBoxWrapper","disabled","onFocusout","event","isFocusingOut","SearchTextArea","loading","isLoading","placeholder","onClear","clear","__decorate","InitializeBindings","BindStateToController","AriaLiveRegion"],"sources":["src/components/common/suggestions/stencil-query-suggestions.tsx","src/components/insight/atomic-insight-search-box/atomic-insight-search-box.pcss?tag=atomic-insight-search-box&encapsulation=shadow","src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils.js';\nimport {SearchBoxSuggestionElement} from './suggestions-common.js';\n\ninterface Suggestion {\n highlightedValue: string;\n rawValue: string;\n}\n\nexport const getPartialSearchBoxSuggestionElement = (\n suggestion: Suggestion,\n i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'query' | 'part'> => {\n return {\n part: 'query-suggestion-item',\n key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,\n query: suggestion.rawValue,\n ariaLabel: i18n.t('query-suggestion-label', {\n query: suggestion.rawValue,\n interpolation: {escapeValue: false},\n }),\n };\n};\n\nexport const QuerySuggestionContainer: FunctionalComponent = (_, children) => {\n return (\n <div part=\"query-suggestion-content\" class=\"flex items-center\">\n {children}\n </div>\n );\n};\n\ninterface QuerySuggestionIconProps {\n icon: string;\n hasSuggestion: boolean;\n}\n\nexport const QuerySuggestionIcon: FunctionalComponent<\n QuerySuggestionIconProps\n> = ({icon, hasSuggestion}) => {\n if (!hasSuggestion) {\n return;\n }\n\n return (\n <atomic-icon\n part=\"query-suggestion-icon\"\n icon={icon}\n class=\"mr-2 h-4 w-4 shrink-0\"\n ></atomic-icon>\n );\n};\n\ninterface QuerySuggestionTextProps {\n suggestion: Suggestion;\n hasQuery: boolean;\n}\n\nexport const QuerySuggestionText: FunctionalComponent<\n QuerySuggestionTextProps\n> = ({suggestion, hasQuery}) => {\n if (hasQuery) {\n return (\n <span\n part=\"query-suggestion-text\"\n class=\"line-clamp-2 break-all\"\n innerHTML={suggestion.highlightedValue}\n ></span>\n );\n }\n\n return (\n <span part=\"query-suggestion-text\" class=\"line-clamp-2 break-all\">\n {suggestion.rawValue}\n </span>\n );\n};\n","@import '../../../global/global.pcss';\n@import '../../common/search-box/search-box.pcss';\n\n[part='wrapper'] {\n @apply z-10;\n}\n\n:host {\n position: relative;\n}\n\n[part='input'] {\n padding-top: 0.675rem;\n padding-bottom: 0.675rem;\n}\n\n[part='submit-icon'] {\n @apply text-on-background;\n}\n\n[part='submit-button'] {\n @apply flex w-10 items-center justify-center;\n}\n\n.loading::after {\n content: '';\n @apply bg-background absolute h-5/6 w-5/6 rounded-full;\n}\n\n[part='clear-button-wrapper'] {\n @apply mr-2 py-0;\n}\n\n[part='clear-icon'] {\n @apply h-3 w-3;\n}\n\n[part='textarea-expander'] {\n &::after {\n @apply p-2 px-4;\n }\n}\n\n[part='textarea-expander'] {\n [part='textarea'] {\n @apply p-2 px-4;\n }\n}\n","import {loadInsightSearchActions} from '@coveo/headless/insight';\nimport {\n buildSearchBox as buildInsightSearchBox,\n SearchBox as InsightSearchBox,\n SearchBoxState as InsightSearchBoxState,\n Suggestion as InsightSuggestion,\n} from '@coveo/headless/insight';\nimport {Component, Element, h, Prop, State} from '@stencil/core';\nimport SearchSlimIcon from '../../../images/search-slim.svg';\nimport {hasKeyboard, isMacOS} from '../../../utils/device-utils';\nimport {\n BindStateToController,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {isFocusingOut, randomID} from '../../../utils/utils';\nimport {SearchBoxWrapper} from '../../common/search-box/stencil-search-box-wrapper';\nimport {SearchTextArea} from '../../common/search-box/stencil-search-text-area';\nimport {\n getPartialSearchBoxSuggestionElement,\n QuerySuggestionContainer,\n QuerySuggestionIcon,\n QuerySuggestionText,\n} from '../../common/suggestions/stencil-query-suggestions';\nimport {SuggestionManager} from '../../common/suggestions/stencil-suggestion-manager';\nimport {\n elementHasQuery,\n SearchBoxSuggestionElement,\n} from '../../common/suggestions/suggestions-common';\nimport {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-insight-search-box',\n styleUrl: 'atomic-insight-search-box.pcss',\n shadow: true,\n})\nexport class AtomicInsightSearchBox {\n @InitializeBindings() public bindings!: InsightBindings;\n\n private searchBox!: InsightSearchBox;\n private id!: string;\n private textAreaRef!: HTMLTextAreaElement;\n private suggestionManager!: SuggestionManager<InsightSearchBox>;\n\n @Element() private host!: HTMLElement;\n\n @BindStateToController('searchBox')\n @State()\n private searchBoxState!: InsightSearchBoxState;\n @State() public error!: Error;\n @State() private isExpanded = false;\n\n /**\n * Whether to prevent the user from triggering a search from the component.\n * Perfect for use cases where you need to disable the search conditionally, like when the input is empty.\n */\n @Prop({reflect: true}) public disableSearch = false;\n /**\n * The number of query suggestions to display when interacting with the search box.\n */\n @Prop({reflect: true}) public numberOfSuggestions = 5;\n\n @AriaLiveRegion('search-box')\n protected searchBoxAriaMessage!: string;\n\n @AriaLiveRegion('search-suggestions', true)\n protected suggestionsAriaMessage!: string;\n\n public initialize() {\n this.id = randomID('atomic-search-box-');\n\n const searchBoxOptions = {\n id: this.id,\n numberOfSuggestions: 0,\n highlightOptions: {\n notMatchDelimiters: {\n open: '<span class=\"font-bold\">',\n close: '</span>',\n },\n correctionDelimiters: {\n open: '<span class=\"font-normal\">',\n close: '</span>',\n },\n },\n };\n\n const {fetchQuerySuggestions, registerQuerySuggest} =\n loadInsightSearchActions(this.bindings.engine);\n\n this.searchBox = buildInsightSearchBox(this.bindings.engine, {\n options: searchBoxOptions,\n });\n\n this.bindings.engine.dispatch(\n registerQuerySuggest({id: this.id, count: this.numberOfSuggestions})\n );\n\n this.suggestionManager = new SuggestionManager({\n getNumberOfSuggestionsToDisplay: () => this.numberOfSuggestions,\n updateQuery: (query) => this.searchBox.updateText(query),\n getSearchBoxValue: () => this.searchBoxState.value,\n getSuggestionTimeout: () => 500,\n getSuggestionDelay: () => 0,\n getHost: () => this.host,\n getLogger: () => this.bindings.engine.logger,\n });\n\n this.suggestionManager.registerSuggestions({\n position: 0,\n renderItems: () =>\n this.searchBox.state.suggestions.map((suggestion) =>\n this.renderSuggestionItem(suggestion)\n ),\n onInput: () => this.bindings.engine.dispatch(fetchQuerySuggestions({id: this.id})),\n panel: 'left',\n });\n }\n\n private onSubmit() {\n if (this.suggestionManager.activeDescendantElement) {\n this.suggestionManager.clickOnActiveElement();\n return;\n }\n\n this.searchBox.submit();\n this.suggestionManager.clearSuggestions();\n }\n\n private async onKeyDown(e: KeyboardEvent) {\n if (this.disableSearch) {\n return;\n }\n\n switch (e.key) {\n case 'Enter':\n this.onSubmit();\n break;\n case 'Escape':\n this.suggestionManager.clearSuggestions();\n break;\n case 'ArrowDown':\n e.preventDefault();\n await this.suggestionManager.focusNextValue();\n this.announceNewActiveSuggestionToScreenReader();\n break;\n case 'ArrowUp':\n e.preventDefault();\n await this.suggestionManager.focusPreviousValue();\n this.announceNewActiveSuggestionToScreenReader();\n break;\n case 'Tab':\n this.suggestionManager.clearSuggestions();\n break;\n }\n }\n\n private triggerTextAreaChange(value: string) {\n this.textAreaRef.value = value;\n this.textAreaRef.dispatchEvent(new window.Event('change'));\n }\n\n private renderSuggestion(\n item: SearchBoxSuggestionElement,\n index: number,\n lastIndex: number\n ) {\n const id = `${this.id}-suggestion-${item.key}`;\n\n const isSelected =\n id === this.suggestionManager.activeDescendant ||\n this.suggestionManager.suggestedQuery === item.query;\n\n if (index === lastIndex && item.hideIfLast) {\n return null;\n }\n\n return (\n <atomic-suggestion-renderer\n i18n={this.bindings.i18n}\n id={id}\n suggestion={item}\n isSelected={isSelected}\n side={'left'}\n index={index}\n lastIndex={lastIndex}\n isDoubleList={false}\n onClick={(e: Event) => {\n this.suggestionManager.onSuggestionClick(item, e);\n }}\n onMouseOver={() => {\n this.suggestionManager.onSuggestionMouseOver(item, 'left', id);\n }}\n ></atomic-suggestion-renderer>\n );\n }\n\n private renderSuggestionItem(\n suggestion: InsightSuggestion\n ): SearchBoxSuggestionElement {\n const hasQuery = this.searchBox.state.value !== '';\n const partialItem = getPartialSearchBoxSuggestionElement(\n suggestion,\n this.bindings.i18n\n );\n\n return {\n ...partialItem,\n content: (\n <QuerySuggestionContainer>\n <QuerySuggestionIcon\n icon={SearchSlimIcon}\n hasSuggestion={this.searchBoxState.suggestions.length > 1}\n />\n\n <QuerySuggestionText suggestion={suggestion} hasQuery={hasQuery} />\n </QuerySuggestionContainer>\n ),\n onSelect: () => {\n this.searchBox.selectSuggestion(suggestion.rawValue);\n },\n };\n }\n\n private renderPanel(\n elements: SearchBoxSuggestionElement[],\n setRef: (el: HTMLElement | undefined) => void,\n getRef: () => HTMLElement | undefined\n ) {\n if (!elements.length) {\n return null;\n }\n\n return (\n <div\n part={'suggestions'}\n ref={setRef}\n class=\"flex grow basis-1/2 flex-col\"\n onMouseDown={(e) => {\n if (e.target === getRef()) {\n e.preventDefault();\n }\n }}\n >\n {elements.map((suggestion, index) =>\n this.renderSuggestion(suggestion, index, elements.length - 1)\n )}\n </div>\n );\n }\n\n private renderSuggestions() {\n if (!this.suggestionManager.hasSuggestions) {\n this.suggestionManager.updateActiveDescendant();\n return null;\n }\n\n return (\n <div\n id={`${this.id}-popup`}\n part=\"suggestions-wrapper\"\n class={`bg-background border-neutral absolute top-full left-0 z-10 flex w-full rounded-md border ${\n this.suggestionManager.hasSuggestions && this.isExpanded\n ? ''\n : 'hidden'\n }`}\n role=\"application\"\n aria-label={this.bindings.i18n.t('search-suggestions-single-list')}\n {...(this.suggestionManager.activeDescendant && {\n 'aria-activedescendant': this.suggestionManager.activeDescendant,\n })}\n >\n {this.renderPanel(\n this.suggestionManager.allSuggestionElements,\n (el) => (this.suggestionManager.leftPanel = el),\n () => this.suggestionManager.leftPanel\n )}\n </div>\n );\n }\n\n private getSearchInputLabel() {\n if (isMacOS()) {\n return this.bindings.i18n.t('search-box-with-suggestions-macos');\n }\n if (!hasKeyboard()) {\n return this.bindings.i18n.t('search-box-with-suggestions-keyboardless');\n }\n return this.bindings.i18n.t('search-box-with-suggestions');\n }\n\n private async onFocus() {\n if (this.isExpanded) {\n return;\n }\n this.isExpanded = true;\n await this.suggestionManager.triggerSuggestions();\n this.announceNewSuggestionsToScreenReader();\n }\n\n private async onInput(value: string) {\n this.searchBox.updateText(value);\n this.isExpanded = true;\n await this.suggestionManager.triggerSuggestions();\n this.announceNewSuggestionsToScreenReader();\n }\n\n private announceNewActiveSuggestionToScreenReader() {\n const ariaLabel = this.suggestionManager.activeDescendantElement?.ariaLabel;\n if (isMacOS() && ariaLabel) {\n this.suggestionsAriaMessage = ariaLabel;\n }\n }\n\n private announceNewSuggestionsToScreenReader() {\n const numberOfSuggestionsToAnnounce =\n this.suggestionManager.allSuggestionElements.filter(\n elementHasQuery\n ).length;\n this.searchBoxAriaMessage = numberOfSuggestionsToAnnounce\n ? this.bindings.i18n.t(\n this.searchBoxState.value\n ? 'query-suggestions-available'\n : 'query-suggestions-available-no-query',\n {\n count: numberOfSuggestionsToAnnounce,\n query: this.searchBoxState.value,\n }\n )\n : this.bindings.i18n.t('query-suggestions-unavailable');\n }\n\n public render() {\n return (\n <SearchBoxWrapper\n disabled={this.disableSearch}\n onFocusout={(event) => {\n if (!isFocusingOut(event)) {\n return;\n }\n this.suggestionManager.clearSuggestions();\n this.isExpanded = false;\n }}\n >\n <atomic-icon\n part=\"submit-icon\"\n icon={SearchSlimIcon}\n class=\"my-auto mr-0 ml-4 h-4 w-4\"\n />\n <SearchTextArea\n textAreaRef={this.textAreaRef}\n loading={this.searchBoxState.isLoading}\n ref={(el) => el && (this.textAreaRef = el)}\n bindings={this.bindings}\n value={this.searchBoxState.value}\n ariaLabel={this.getSearchInputLabel()}\n placeholder={this.bindings.i18n.t('search-ellipsis')}\n onFocus={() => this.onFocus()}\n onKeyDown={(e) => this.onKeyDown(e)}\n onClear={() => {\n this.searchBox.clear();\n this.triggerTextAreaChange('');\n }}\n onInput={(e) => this.onInput((e.target as HTMLInputElement).value)}\n />\n {this.renderSuggestions()}\n </SearchBoxWrapper>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["getPartialInstantItemElement","i18n","itemTitle","itemUniqueId","ariaLabel","t","title","interpolation","escapeValue","key","encodeForDomAttribute","part","getPartialInstantItemShowAllElement","InstantItemShowAllButton","h","class","getClassNameForButtonStyle","AtomicSearchBoxInstantResults","this","results","display","templateHasError","maxResultsPerQuery","density","imageSize","setRenderFunction","resultRenderingFunction","itemRenderingFunction","componentWillLoad","dispatchSearchBoxSuggestionsEvent","bindings","initialize","host","error","getLink","el","atomicResult","tagName","querySelector","shadowRoot","handleLinkClick","hasModifier","setTarget","value","setAttribute","initialTarget","getAttribute","click","renderItems","suggestedQuery","store","isMobile","instantResults","state","length","elements","map","result","partialItem","ariaLabelGenerator","uniqueId","content","interactiveResult","buildInteractiveInstantResult","engine","options","itemTemplateProvider","getTemplateContent","stopPropagation","renderingFunction","onSelect","e","link","target","ctrlKey","metaKey","push","clearSuggestions","searchBoxController","updateText","q","submit","buildInstantResults","ItemTemplateProvider","includeDefaultTemplate","templateElements","Array","from","querySelectorAll","getResultTemplateRegistered","setResultTemplateRegistered","getTemplateHasError","setTemplateHasError","position","parentNode","children","indexOf","panel","onSuggestedQueryChange","updateQuery","getSuggestionElements","console","warn","Promise","resolve","unsubscribe","subscribe","isLoading","render","element"],"sources":["src/components/common/suggestions/stencil-instant-item.tsx","src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils';\nimport {getClassNameForButtonStyle} from '../stencil-button-style';\nimport {SearchBoxSuggestionElement} from './suggestions-common';\n\nexport const getPartialInstantItemElement = (\n i18n: i18n,\n itemTitle: string,\n itemUniqueId: string\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'part'> => {\n return {\n ariaLabel: i18n.t('instant-results-suggestion-label', {\n title: itemTitle,\n interpolation: {escapeValue: false},\n }),\n key: `instant-result-${encodeForDomAttribute(itemUniqueId)}`,\n part: 'instant-results-item',\n };\n};\n\nexport const getPartialInstantItemShowAllElement = (\n i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'key' | 'part' | 'ariaLabel'> => {\n return {\n key: 'instant-results-show-all-button',\n part: 'instant-results-show-all',\n ariaLabel: i18n.t('show-all-results'),\n };\n};\n\ninterface InstantItemShowAllButtonProps {\n i18n: i18n;\n}\nexport const InstantItemShowAllButton: FunctionalComponent<\n InstantItemShowAllButtonProps\n> = ({i18n}) => {\n return (\n <div\n part=\"instant-results-show-all-button\"\n class={getClassNameForButtonStyle('text-primary')}\n >\n {i18n.t('show-all-results')}\n </div>\n );\n};\n","import {\n buildInstantResults,\n buildInteractiveInstantResult,\n InstantResults,\n Result,\n SearchBox,\n} from '@coveo/headless';\nimport {Component, Element, State, h, Prop, Method} from '@stencil/core';\nimport {InitializableComponent} from '../../../../utils/initialization-utils';\nimport {encodeForDomAttribute} from '../../../../utils/string-utils';\nimport {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';\nimport {ItemRenderingFunction} from '../../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayLayout,\n} from '../../../common/layout/display-options';\nimport {\n getPartialInstantItemElement,\n getPartialInstantItemShowAllElement,\n InstantItemShowAllButton,\n} from '../../../common/suggestions/stencil-instant-item';\nimport {\n dispatchSearchBoxSuggestionsEvent,\n SearchBoxSuggestionElement,\n SearchBoxSuggestions,\n SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-common';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\nexport type AriaLabelGenerator = (\n bindings: Bindings,\n result: Result\n) => string | undefined;\n\n/**\n * 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.\n *\n * 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).\n *\n * This component is not supported on mobile.\n *\n * @slot default - The default slot where the instant results are rendered.\n */\n@Component({\n tag: 'atomic-search-box-instant-results',\n shadow: true,\n})\nexport class AtomicSearchBoxInstantResults implements InitializableComponent {\n public bindings!: SearchBoxSuggestionsBindings<SearchBox, Bindings>;\n private itemRenderingFunction: ItemRenderingFunction;\n private results: Result[] = [];\n private itemTemplateProvider!: ItemTemplateProvider;\n private instantResults!: InstantResults;\n private display: ItemDisplayLayout = 'list';\n\n @Element() public host!: HTMLElement;\n\n @State() public error!: Error;\n @State() private templateHasError = false;\n\n /**\n * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.\n * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.\n *\n * Do not use this method if you integrate Atomic in a plain HTML deployment.\n *\n * @param resultRenderingFunction\n */\n @Method() public async setRenderFunction(\n resultRenderingFunction: ItemRenderingFunction\n ) {\n this.itemRenderingFunction = resultRenderingFunction;\n }\n /**\n * The maximum number of results to show.\n */\n @Prop({reflect: true}) public maxResultsPerQuery = 4;\n /**\n * 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.\n */\n @Prop({reflect: true}) public density: ItemDisplayDensity = 'normal';\n /**\n * The expected size of the image displayed in the results.\n */\n @Prop({reflect: true}) public imageSize: ItemDisplayImageSize = 'icon';\n /**\n * The callback to generate an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for a given result so that accessibility tools can fully describe what's visually rendered by a result.\n *\n * By default, or if an empty string is returned, `result.title` is used.\n */\n @Prop() public ariaLabelGenerator?: AriaLabelGenerator;\n\n public componentWillLoad() {\n try {\n dispatchSearchBoxSuggestionsEvent<SearchBox, Bindings>(\n (bindings) => {\n this.bindings = bindings;\n return this.initialize();\n },\n this.host,\n ['atomic-search-box']\n );\n } catch (error) {\n this.error = error as Error;\n }\n }\n\n private getLink(el: HTMLElement): HTMLElement | null {\n const atomicResult =\n el.tagName === 'ATOMIC-RESULT' ? el : el?.querySelector('atomic-result');\n\n return (\n atomicResult?.shadowRoot?.querySelector(\n 'atomic-result-link a:not([slot])'\n ) || null\n );\n }\n\n private handleLinkClick(el: HTMLElement, hasModifier: boolean) {\n const setTarget = (value: string) => el.setAttribute('target', value);\n const initialTarget = el.getAttribute('target');\n\n hasModifier && setTarget('_blank');\n el.click();\n hasModifier && setTarget(initialTarget || '');\n\n return true;\n }\n\n private renderItems(): SearchBoxSuggestionElement[] {\n if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {\n return [];\n }\n const results = this.instantResults.state.results.length\n ? this.instantResults.state.results\n : this.results;\n\n const elements: SearchBoxSuggestionElement[] = results.map(\n (result: Result) => {\n const partialItem = getPartialInstantItemElement(\n this.bindings.i18n,\n this.ariaLabelGenerator?.(this.bindings, result) || result.title,\n result.uniqueId\n );\n return {\n ...partialItem,\n content: (\n <atomic-result\n key={`instant-result-${encodeForDomAttribute(result.uniqueId)}`}\n part=\"outline\"\n result={result}\n interactiveResult={buildInteractiveInstantResult(\n this.bindings.engine,\n {\n options: {result},\n }\n )}\n display={this.display}\n density={this.density}\n imageSize={this.imageSize}\n content={this.itemTemplateProvider.getTemplateContent(result)}\n stopPropagation={false}\n renderingFunction={this.itemRenderingFunction}\n ></atomic-result>\n ),\n onSelect: (e: MouseEvent) => {\n const link = this.getLink(e.target as HTMLElement);\n\n if (!link) {\n return;\n }\n this.handleLinkClick(link, e.ctrlKey || e.metaKey);\n },\n };\n }\n );\n if (elements.length) {\n const partialItem = getPartialInstantItemShowAllElement(\n this.bindings.i18n\n );\n elements.push({\n ...partialItem,\n content: <InstantItemShowAllButton i18n={this.bindings.i18n} />,\n onSelect: () => {\n this.bindings.clearSuggestions();\n this.bindings.searchBoxController.updateText(\n this.instantResults.state.q\n );\n this.bindings.searchBoxController.submit();\n },\n });\n }\n return elements;\n }\n\n public initialize(): SearchBoxSuggestions {\n this.instantResults = buildInstantResults(this.bindings.engine, {\n options: {\n maxResultsPerQuery: this.maxResultsPerQuery,\n },\n });\n\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-result-template')\n ),\n getResultTemplateRegistered: () => true,\n setResultTemplateRegistered: () => {},\n getTemplateHasError: () => this.templateHasError,\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n return {\n position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n panel: 'right',\n onSuggestedQueryChange: (q) => {\n this.instantResults.updateQuery(q);\n return this.onSuggestedQueryChange();\n },\n renderItems: () => this.renderItems(),\n };\n }\n\n private onSuggestedQueryChange() {\n if (\n !this.bindings.getSuggestionElements().length &&\n !this.bindings.searchBoxController.state.value\n ) {\n console.warn(\n \"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.\"\n );\n }\n\n return new Promise<void>((resolve) => {\n const unsubscribe = this.instantResults.subscribe(() => {\n const state = this.instantResults.state;\n if (!state.isLoading) {\n if (state.results.length) {\n this.results = state.results;\n }\n unsubscribe();\n resolve();\n }\n });\n });\n }\n\n public render() {\n if (this.error) {\n return (\n <atomic-component-error\n element={this.host}\n error={this.error}\n ></atomic-component-error>\n );\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}