npm - @coveo/atomic - Versions diffs - 3.35.0-pre.ddf08ff320 → 3.35.0-pre.e1fcbd0b5c - Mend

@coveo/atomic 3.35.0-pre.ddf08ff320 → 3.35.0-pre.e1fcbd0b5c

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 (972) hide show

package/dist/atomic/components/atomic-segmented-facet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-segmented-facet.js","mappings":"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","names":["AtomicSegmentedFacet"],"sources":["src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.pcss?tag=atomic-segmented-facet&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {FacetValueProps} from '../../../common/facets/stencil-facet-common';\nimport {Button} from '../../../common/stencil-button';\n\nexport const FacetSegmentedValue: FunctionalComponent<FacetValueProps> = (\n props\n) => {\n const compactCount = new Intl.NumberFormat(props.i18n.language, {\n notation: 'compact',\n }).format(props.numberOfResults);\n\n const count = props.numberOfResults.toLocaleString(props.i18n.language);\n\n const ariaLabel = props.i18n.t('facet-value', {\n value: props.displayValue,\n count: props.numberOfResults,\n formattedCount: count,\n });\n\n return (\n <li key={props.displayValue}>\n <Button\n style=\"square-neutral\"\n part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}\n onClick={() => props.onClick()}\n class={`value-box group box-border flex h-full items-center p-2 ${\n props.isSelected\n ? 'selected border-primary shadow-inner-primary'\n : 'hover:border-primary-light focus-visible:border-primary-light'\n }`}\n ariaPressed={props.isSelected.toString()}\n ariaLabel={ariaLabel}\n >\n <span\n title={props.displayValue}\n part=\"value-label\"\n class={`value-label truncate ${\n props.isSelected\n ? 'text-primary'\n : 'group-hover:text-primary-light group-focus:text-primary'\n }`}\n >\n {props.displayValue}\n </span>\n <span\n title={count}\n part=\"value-count\"\n class={`value-box-count mt-0 w-auto truncate pl-1 text-sm ${\n props.isSelected\n ? 'text-primary'\n : 'text-neutral-dark group-hover:text-primary-light group-focus:text-primary'\n }`}\n >\n {props.i18n.t('between-parentheses', {\n text: compactCount,\n })}\n </span>\n </Button>\n </li>\n );\n};\n","@import '../../../common/facets/facet-common.pcss';\n@import '../facet-segmented-value/facet-segmented-value.pcss';\n","import {\n buildFacet,\n buildFacetConditionsManager,\n buildSearchStatus,\n CategoryFacetValueRequest,\n Facet,\n FacetConditionsManager,\n FacetOptions,\n FacetSortCriterion,\n FacetState,\n FacetValue,\n FacetValueRequest,\n SearchStatus,\n SearchStatusState,\n buildTabManager,\n TabManager,\n TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {FacetSegmentedValue} from '../facet-segmented-value/facet-segmented-value';\n\n/*\n The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.\n * @part segmented-container - The container that holds the segmented facets.\n * @part label - The facet value label.\n * @part values - The facet values container.\n * @part value-box - The facet value.\n * @part value-box-selected - The selected facet value.\n * @part placeholder - The placeholder displayed when the facet is loading.\n /\n@Component({\n tag: 'atomic-segmented-facet',\n styleUrl: 'atomic-segmented-facet.pcss',\n shadow: true,\n})\nexport class AtomicSegmentedFacet implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public searchStatus!: SearchStatus;\n public tabManager!: TabManager;\n @State()\n public searchStatusState!: SearchStatusState;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @BindStateToController('facet')\n @State()\n public facetState!: FacetState;\n public facet!: Facet;\n @State() public error!: Error;\n\n /\n Specifies a unique identifier for the facet.\n /\n @Prop({mutable: true, reflect: true}) public facetId?: string;\n /\n The field whose values you want to display in the facet.\n /\n @Prop({reflect: true}) public field!: string;\n /\n The non-localized label for the facet.\n * Used in the `atomic-breadbox` component through the bindings store.\n /\n @Prop({reflect: true}) public label?: string;\n /\n The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`.\n \n Set this property as a stringified JSON array, e.g.,\n * ```html\n * <atomic-timeframe-facet tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n * ```\n * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.\n /\n @ArrayProp()\n @Prop({reflect: true, mutable: true})\n public tabsIncluded: string[] \| string = '[]';\n\n /\n The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`.\n \n Set this property as a stringified JSON array, e.g.,\n * ```html\n * <atomic-timeframe-facet tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n * ```\n * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.\n /\n @ArrayProp()\n @Prop({reflect: true, mutable: true})\n public tabsExcluded: string[] \| string = '[]';\n\n /\n Whether to exclude the parents of folded results when estimating the result count for each facet value.\n \n \n * Note: Resulting count is only an estimation, in some cases this value could be incorrect.\n /\n @Prop({reflect: true}) public filterFacetCount = true;\n /\n The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.\n * Note: A high injectionDepth may negatively impact the facet request performance.\n * Minimum: `0`\n * Default: `1000`\n /\n @Prop() public injectionDepth = 1000;\n /\n The number of values to request for this facet.\n * Also determines the number of additional values to request each time more values are shown.\n /\n @Prop({reflect: true}) public numberOfValues = 6;\n /\n The sort criterion to apply to the returned facet values.\n * Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'.\n /\n @Prop({reflect: true}) public sortCriteria: FacetSortCriterion = 'automatic';\n\n /\n The required facets and values for this facet to be displayed.\n * Examples:\n * ```html\n * <atomic-segmented-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-segmented-facet>\n \n <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n * <atomic-segmented-facet\n * depends-on-abc\n * ...\n * ></atomic-segmented-facet>\n \n <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n * <atomic-facet\n * depends-on-abc=\"doc\"\n * ...\n * ></atomic-segmented-facet>\n * ```\n /\n @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n /\n Specifies an explicit list of `allowedValues` in the Search API request. This list is in the form of a JSON string.\n \n If you specify a list of values for this option, the facet only uses these values (if they are available in\n * the current result set).\n \n Example:\n \n The following facet only uses the `Contact`, `Account`, and `File` values of the `objecttype` field. Even if the\n * current result set contains other `objecttype` values, such as `Message` or `Product`, the facet does not use\n * them.\n \n ```html\n * <atomic-segmented-facet field=\"objecttype\" allowed-values='[\"Contact\",\"Account\",\"File\"]'></atomic-segmented-facet>\n * ```\n \n The maximum amount of allowed values is 25.\n \n The default value is `undefined`, and the facet uses all available values for its `field` in the current result set.\n /\n @ArrayProp()\n @Prop({mutable: true})\n public allowedValues: string[] \| string = '[]';\n\n /\n Identifies the facet values that must appear at the top, in this order.\n * This parameter can be used in conjunction with the `sortCriteria` parameter.\n \n Facet values not part of the `customSort` list will be sorted according to the `sortCriteria`.\n \n Example:\n \n The following facet will sort the `Contact`, `Account`, and `File` values at the top of the list for the `objecttype` field.\n \n If there are more than these 3 values available, the rest of the list will be sorted using `occurrences`.\n \n ```html\n * <atomic-segmented-facet field=\"objecttype\" custom-sort='[\"Contact\",\"Account\",\"File\"]' sort-criteria='occurrences'></atomic-segmented-facet>\n * ```\n * The maximum amount of custom sort values is 25.\n \n The default value is `undefined`, and the facet values will be sorted using only the `sortCriteria`.\n */\n @ArrayProp()\n @Prop({mutable: true})\n public customSort: string[] \| string = '[]';\n\n private dependenciesManager!: FacetConditionsManager;\n\n public initialize() {\n if (\n [...this.tabsIncluded].length > 0 &&\n [...this.tabsExcluded].length > 0\n ) {\n console.warn(\n 'Values for both \"tabs-included\" and \"tabs-excluded\" have been provided. This is could lead to unexpected behaviors.'\n );\n }\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n this.tabManager = buildTabManager(this.bindings.engine);\n\n this.facet = buildFacet(this.bindings.engine, {options: this.facetOptions});\n this.facetId = this.facet.state.facetId;\n this.dependenciesManager = buildFacetConditionsManager(\n this.bindings.engine,\n {\n facetId: this.facetId!,\n conditions: parseDependsOn<\n FacetValueRequest \| CategoryFacetValueRequest\n >(this.dependsOn),\n }\n );\n }\n\n disconnectedCallback() {\n this.dependenciesManager.stopWatching();\n }\n\n private renderValuesContainer(children: VNode[]) {\n const classes = 'box-container flex h-10';\n return (\n <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n <ul class={classes} part=\"values\">\n {children}\n </ul>\n </FacetValuesGroup>\n );\n }\n\n private renderValue(facetValue: FacetValue, onClick: () => void) {\n const displayValue = getFieldValueCaption(\n this.field,\n facetValue.value,\n this.bindings.i18n\n );\n const isSelected = facetValue.state !== 'idle';\n\n return (\n <FacetSegmentedValue\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n searchQuery={this.facetState.facetSearch.query}\n ></FacetSegmentedValue>\n );\n }\n\n private renderValues() {\n return this.renderValuesContainer(\n this.facetState.values.map((value) =>\n this.renderValue(value, () => this.facet.toggleSingleSelect(value))\n )\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n return (\n <b class=\"mr-2\" part=\"label\">\n {this.label}:\n </b>\n );\n }\n\n private get facetOptions(): FacetOptions {\n return {\n facetId: this.facetId,\n field: this.field,\n numberOfValues: this.numberOfValues,\n sortCriteria: this.sortCriteria,\n facetSearch: {numberOfValues: this.numberOfValues},\n filterFacetCount: this.filterFacetCount,\n injectionDepth: this.injectionDepth,\n hasBreadcrumbs: false,\n allowedValues: this.allowedValues.length\n ? [...this.allowedValues]\n : undefined,\n customSort: this.customSort.length ? [...this.customSort] : undefined,\n tabs: {\n included: [...this.tabsIncluded],\n excluded: [...this.tabsExcluded],\n },\n };\n }\n\n public render() {\n if (this.searchStatus.state.hasError \|\| !this.facet.state.enabled) {\n return <Hidden></Hidden>;\n }\n\n if (!this.searchStatus.state.firstSearchExecuted) {\n return (\n <div\n part=\"placeholder\"\n aria-hidden\n class=\"bg-neutral h-8 w-48 animate-pulse rounded\"\n ></div>\n );\n }\n\n if (!this.facetState.values.length) {\n return <Hidden></Hidden>;\n }\n\n return (\n <div\n part=\"segmented-container\"\n class=\"mr-2 flex h-10 items-center whitespace-nowrap\"\n >\n {this.renderLabel()}\n {this.renderValues()}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-segmented-facet.js","mappings":"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","names":["AtomicSegmentedFacet"],"sources":["src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.pcss?tag=atomic-segmented-facet&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {FacetValueProps} from '../../../common/facets/stencil-facet-common';\nimport {Button} from '../../../common/stencil-button';\n\n/*\n @deprecated should only be used for Stencil components.\n /\nexport const FacetSegmentedValue: FunctionalComponent<FacetValueProps> = (\n props\n) => {\n const compactCount = new Intl.NumberFormat(props.i18n.language, {\n notation: 'compact',\n }).format(props.numberOfResults);\n\n const count = props.numberOfResults.toLocaleString(props.i18n.language);\n\n const ariaLabel = props.i18n.t('facet-value', {\n value: props.displayValue,\n count: props.numberOfResults,\n formattedCount: count,\n });\n\n return (\n <li key={props.displayValue}>\n <Button\n style=\"square-neutral\"\n part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}\n onClick={() => props.onClick()}\n class={`value-box group box-border flex h-full items-center p-2 ${\n props.isSelected\n ? 'selected border-primary shadow-inner-primary'\n : 'hover:border-primary-light focus-visible:border-primary-light'\n }`}\n ariaPressed={props.isSelected.toString()}\n ariaLabel={ariaLabel}\n >\n <span\n title={props.displayValue}\n part=\"value-label\"\n class={`value-label truncate ${\n props.isSelected\n ? 'text-primary'\n : 'group-hover:text-primary-light group-focus:text-primary'\n }`}\n >\n {props.displayValue}\n </span>\n <span\n title={count}\n part=\"value-count\"\n class={`value-box-count mt-0 w-auto truncate pl-1 text-sm ${\n props.isSelected\n ? 'text-primary'\n : 'text-neutral-dark group-hover:text-primary-light group-focus:text-primary'\n }`}\n >\n {props.i18n.t('between-parentheses', {\n text: compactCount,\n })}\n </span>\n </Button>\n </li>\n );\n};\n","@import '../../../common/facets/facet-common.pcss';\n@import '../facet-segmented-value/facet-segmented-value.pcss';\n","import {\n buildFacet,\n buildFacetConditionsManager,\n buildSearchStatus,\n CategoryFacetValueRequest,\n Facet,\n FacetConditionsManager,\n FacetOptions,\n FacetSortCriterion,\n FacetState,\n FacetValue,\n FacetValueRequest,\n SearchStatus,\n SearchStatusState,\n buildTabManager,\n TabManager,\n TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {FacetSegmentedValue} from '../facet-segmented-value/facet-segmented-value';\n\n/\n The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.\n * @part segmented-container - The container that holds the segmented facets.\n * @part label - The facet value label.\n * @part values - The facet values container.\n * @part value-box - The facet value.\n * @part value-box-selected - The selected facet value.\n * @part placeholder - The placeholder displayed when the facet is loading.\n /\n@Component({\n tag: 'atomic-segmented-facet',\n styleUrl: 'atomic-segmented-facet.pcss',\n shadow: true,\n})\nexport class AtomicSegmentedFacet implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public searchStatus!: SearchStatus;\n public tabManager!: TabManager;\n @State()\n public searchStatusState!: SearchStatusState;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @BindStateToController('facet')\n @State()\n public facetState!: FacetState;\n public facet!: Facet;\n @State() public error!: Error;\n\n /\n Specifies a unique identifier for the facet.\n /\n @Prop({mutable: true, reflect: true}) public facetId?: string;\n /\n The field whose values you want to display in the facet.\n /\n @Prop({reflect: true}) public field!: string;\n /\n The non-localized label for the facet.\n * Used in the `atomic-breadbox` component through the bindings store.\n /\n @Prop({reflect: true}) public label?: string;\n /\n The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`.\n \n Set this property as a stringified JSON array, e.g.,\n * ```html\n * <atomic-timeframe-facet tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n * ```\n * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.\n /\n @ArrayProp()\n @Prop({reflect: true, mutable: true})\n public tabsIncluded: string[] \| string = '[]';\n\n /\n The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`.\n \n Set this property as a stringified JSON array, e.g.,\n * ```html\n * <atomic-timeframe-facet tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n * ```\n * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.\n /\n @ArrayProp()\n @Prop({reflect: true, mutable: true})\n public tabsExcluded: string[] \| string = '[]';\n\n /\n Whether to exclude the parents of folded results when estimating the result count for each facet value.\n \n \n * Note: Resulting count is only an estimation, in some cases this value could be incorrect.\n /\n @Prop({reflect: true}) public filterFacetCount = true;\n /\n The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.\n * Note: A high injectionDepth may negatively impact the facet request performance.\n * Minimum: `0`\n * Default: `1000`\n /\n @Prop() public injectionDepth = 1000;\n /\n The number of values to request for this facet.\n * Also determines the number of additional values to request each time more values are shown.\n /\n @Prop({reflect: true}) public numberOfValues = 6;\n /\n The sort criterion to apply to the returned facet values.\n * Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'.\n /\n @Prop({reflect: true}) public sortCriteria: FacetSortCriterion = 'automatic';\n\n /\n The required facets and values for this facet to be displayed.\n * Examples:\n * ```html\n * <atomic-segmented-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-segmented-facet>\n \n <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n * <atomic-segmented-facet\n * depends-on-abc\n * ...\n * ></atomic-segmented-facet>\n \n <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n * <atomic-facet\n * depends-on-abc=\"doc\"\n * ...\n * ></atomic-segmented-facet>\n * ```\n /\n @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n /\n Specifies an explicit list of `allowedValues` in the Search API request. This list is in the form of a JSON string.\n \n If you specify a list of values for this option, the facet only uses these values (if they are available in\n * the current result set).\n \n Example:\n \n The following facet only uses the `Contact`, `Account`, and `File` values of the `objecttype` field. Even if the\n * current result set contains other `objecttype` values, such as `Message` or `Product`, the facet does not use\n * them.\n \n ```html\n * <atomic-segmented-facet field=\"objecttype\" allowed-values='[\"Contact\",\"Account\",\"File\"]'></atomic-segmented-facet>\n * ```\n \n The maximum amount of allowed values is 25.\n \n The default value is `undefined`, and the facet uses all available values for its `field` in the current result set.\n /\n @ArrayProp()\n @Prop({mutable: true})\n public allowedValues: string[] \| string = '[]';\n\n /\n Identifies the facet values that must appear at the top, in this order.\n * This parameter can be used in conjunction with the `sortCriteria` parameter.\n \n Facet values not part of the `customSort` list will be sorted according to the `sortCriteria`.\n \n Example:\n \n The following facet will sort the `Contact`, `Account`, and `File` values at the top of the list for the `objecttype` field.\n \n If there are more than these 3 values available, the rest of the list will be sorted using `occurrences`.\n \n ```html\n * <atomic-segmented-facet field=\"objecttype\" custom-sort='[\"Contact\",\"Account\",\"File\"]' sort-criteria='occurrences'></atomic-segmented-facet>\n * ```\n * The maximum amount of custom sort values is 25.\n \n The default value is `undefined`, and the facet values will be sorted using only the `sortCriteria`.\n */\n @ArrayProp()\n @Prop({mutable: true})\n public customSort: string[] \| string = '[]';\n\n private dependenciesManager!: FacetConditionsManager;\n\n public initialize() {\n if (\n [...this.tabsIncluded].length > 0 &&\n [...this.tabsExcluded].length > 0\n ) {\n console.warn(\n 'Values for both \"tabs-included\" and \"tabs-excluded\" have been provided. This is could lead to unexpected behaviors.'\n );\n }\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n this.tabManager = buildTabManager(this.bindings.engine);\n\n this.facet = buildFacet(this.bindings.engine, {options: this.facetOptions});\n this.facetId = this.facet.state.facetId;\n this.dependenciesManager = buildFacetConditionsManager(\n this.bindings.engine,\n {\n facetId: this.facetId!,\n conditions: parseDependsOn<\n FacetValueRequest \| CategoryFacetValueRequest\n >(this.dependsOn),\n }\n );\n }\n\n disconnectedCallback() {\n this.dependenciesManager.stopWatching();\n }\n\n private renderValuesContainer(children: VNode[]) {\n const classes = 'box-container flex h-10';\n return (\n <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n <ul class={classes} part=\"values\">\n {children}\n </ul>\n </FacetValuesGroup>\n );\n }\n\n private renderValue(facetValue: FacetValue, onClick: () => void) {\n const displayValue = getFieldValueCaption(\n this.field,\n facetValue.value,\n this.bindings.i18n\n );\n const isSelected = facetValue.state !== 'idle';\n\n return (\n <FacetSegmentedValue\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n searchQuery={this.facetState.facetSearch.query}\n ></FacetSegmentedValue>\n );\n }\n\n private renderValues() {\n return this.renderValuesContainer(\n this.facetState.values.map((value) =>\n this.renderValue(value, () => this.facet.toggleSingleSelect(value))\n )\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n return (\n <b class=\"mr-2\" part=\"label\">\n {this.label}:\n </b>\n );\n }\n\n private get facetOptions(): FacetOptions {\n return {\n facetId: this.facetId,\n field: this.field,\n numberOfValues: this.numberOfValues,\n sortCriteria: this.sortCriteria,\n facetSearch: {numberOfValues: this.numberOfValues},\n filterFacetCount: this.filterFacetCount,\n injectionDepth: this.injectionDepth,\n hasBreadcrumbs: false,\n allowedValues: this.allowedValues.length\n ? [...this.allowedValues]\n : undefined,\n customSort: this.customSort.length ? [...this.customSort] : undefined,\n tabs: {\n included: [...this.tabsIncluded],\n excluded: [...this.tabsExcluded],\n },\n };\n }\n\n public render() {\n if (this.searchStatus.state.hasError \|\| !this.facet.state.enabled) {\n return <Hidden></Hidden>;\n }\n\n if (!this.searchStatus.state.firstSearchExecuted) {\n return (\n <div\n part=\"placeholder\"\n aria-hidden\n class=\"bg-neutral h-8 w-48 animate-pulse rounded\"\n ></div>\n );\n }\n\n if (!this.facetState.values.length) {\n return <Hidden></Hidden>;\n }\n\n return (\n <div\n part=\"segmented-container\"\n class=\"mr-2 flex h-10 items-center whitespace-nowrap\"\n >\n {this.renderLabel()}\n {this.renderValues()}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js CHANGED Viewed

@@ -43,9 +43,9 @@ const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         updateBreakpoints(this.host);
-        return (h("atomic-modal", { key: '0ff06e629ecde723679117ea736d20e81acf4d79', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '8edd7c00f5c17294da616e054fda8026388b411e', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '48b08a1c1bb62763f4b00a4c0eb61bcb9fd24ba6', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '89f7bc92f38b53cdf7243e547f17fc933b052ab0', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
+        return (h("atomic-modal", { key: '7632699011d0e2965a07e123b0992daaa86ad399', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '012680182a0320466803cbd2904bc2361f3ecb31', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'a7aec5fa2a262d48a9a3498a6cd01a67e11d7c89', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '9c9b1c0cda2d144d163917701d50f022e41ecec8', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
                 this.currentAnswer = correspondingAnswer;
-            } })))), h(SmartSnippetFeedbackModalDetails, { key: '52590220abd5d03b776ef56deb5b85add0adee6b', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '92c8766bf0fd0becd4bce8256e7cf379b1f1c075', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
+            } })))), h(SmartSnippetFeedbackModalDetails, { key: '94c02829d22579cdc5a5689fb799ce6bb094f761', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: 'a36ed0580623fa0f4f8c2acc918cfdd84ea86991', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
     }
     close() {
         this.isOpen = false;

package/dist/atomic/components/atomic-sort-dropdown.js CHANGED Viewed

@@ -6,10 +6,16 @@ import { s as shouldDisplayOnCurrentTab } from './tab-utils.js';
 import { r as randomID } from './utils.js';
 import { A as ArrowBottomIcon } from './arrow-bottom-rounded.js';
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortContainer = (_, children) => {
     return (h("div", { class: "text-on-background flex flex-wrap items-center" }, children));
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortGuard = ({ hasError, firstSearchExecuted, hasResults }, children) => {
     if (hasError) {
         return;
@@ -23,16 +29,25 @@ const SortGuard = ({ hasError, firstSearchExecuted, hasResults }, children) => {
     return h(Fragment, null, children);
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortLabel = ({ id, i18n }) => {
     return (h("label", { class: "m-2 cursor-pointer text-sm font-bold", part: "label", htmlFor: id }, i18n.t('with-colon', {
         text: i18n.t('sort-by'),
     })));
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortOption = ({ value, selected, i18n, label, }) => {
     return (h("option", { value: value, selected: selected }, i18n.t(label)));
 };
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortSelect = ({ i18n, id, onSelect }, children) => {
     return (h("div", { class: "relative", part: "select-parent" },
         h("select", { id: id, class: "btn-outline-neutral h-10 grow cursor-pointer appearance-none pr-24 pl-3", part: "select", "aria-label": i18n.t('sort-by'), onChange: (option) => onSelect(option) }, children),

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

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

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

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

package/dist/atomic/components/components/common/suggestions/query-suggestions.js CHANGED Viewed

@@ -13,24 +13,19 @@ export const getPartialSearchBoxSuggestionElement = (suggestion, i18n) => {
 };
 export const renderQuerySuggestion = ({ icon, hasQuery, suggestion, hasMultipleKindOfSuggestions, }) => {
     const template = html `
-    <div part="query-suggestion-content" class="flex items-center">
-      ${hasMultipleKindOfSuggestions
+    <div part="query-suggestion-content" class="flex items-center">${hasMultipleKindOfSuggestions
         ? html `<atomic-icon
-            part="query-suggestion-icon"
-            icon=${icon}
-            class="mr-2 h-4 w-4 shrink-0"
-          ></atomic-icon>`
-        : nothing}
-      ${hasQuery
+          part="query-suggestion-icon"
+          icon=${icon}
+          class="mr-2 h-4 w-4 shrink-0"
+        ></atomic-icon>`
+        : nothing}${hasQuery
         ? html `<span
-            part="query-suggestion-text"
-            class="line-clamp-2 break-all"
-            .innerHTML=${suggestion.highlightedValue}
-          ></span>`
-        : html `<span part="query-suggestion-text" class="line-clamp-2 break-all"
-            >${suggestion.rawValue}</span
-          >`}
-    </div>
+          part="query-suggestion-text"
+          class="line-clamp-2 break-all"
+          .innerHTML=${suggestion.highlightedValue}
+        ></span>`
+        : html `<span part="query-suggestion-text" class="line-clamp-2 break-all">${suggestion.rawValue}</span>`}</div>
   `;
     const container = document.createElement('div');
     render(template, container);

package/dist/atomic/components/components/search/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js ADDED Viewed

@@ -0,0 +1,104 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { loadQuerySuggestActions, } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { getPartialSearchBoxSuggestionElement, renderQuerySuggestion, } from "../../common/suggestions/query-suggestions";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
+import { errorGuard } from "../../../decorators/error-guard";
+const SearchIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z\"/></svg>";
+/**
+ * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
+ */
+let AtomicSearchBoxQuerySuggestions = class AtomicSearchBoxQuerySuggestions extends LitElement {
+    connectedCallback() {
+        try {
+            super.connectedCallback();
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
+        try {
+            dispatchSearchBoxSuggestionsEvent((bindings) => {
+                this.bindings = bindings;
+                return this.initialize();
+            }, this, ['atomic-search-box']);
+        }
+        catch (error) {
+            this.error = error;
+        }
+    }
+    initialize() {
+        const engine = this.bindings.engine;
+        const { registerQuerySuggest, fetchQuerySuggestions } = loadQuerySuggestActions(engine);
+        const numberOfQueries = this.bindings.numberOfQueries;
+        const maxWithQuery = this.maxWithQuery;
+        if (maxWithQuery !== undefined && numberOfQueries < maxWithQuery) {
+            const logger = this.bindings.engine.logger;
+            logger.warn(`Query suggestions config mismatch: number-of-queries (${numberOfQueries}) < max-with-query (${maxWithQuery}). Update one to match the other.`);
+        }
+        engine.dispatch(registerQuerySuggest({
+            id: this.bindings.id,
+            count: this.bindings.numberOfQueries,
+        }));
+        return {
+            position: Array.from(this.parentNode.children).indexOf(this),
+            onInput: () => engine.dispatch(fetchQuerySuggestions({
+                id: this.bindings.id,
+            })),
+            renderItems: () => this.renderItems(),
+        };
+    }
+    renderItems() {
+        const hasQuery = this.bindings.searchBoxController.state.value !== '';
+        const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
+        return this.bindings.searchBoxController.state.suggestions
+            .slice(0, max)
+            .map((suggestion) => this.renderItem(suggestion));
+    }
+    renderItem(suggestion) {
+        const partialItem = getPartialSearchBoxSuggestionElement(suggestion, this.bindings.i18n);
+        const icon = this.icon ? this.icon : SearchIcon;
+        const hasQuery = this.bindings.searchBoxController.state.value !== '';
+        const hasMultipleKindOfSuggestions = this.bindings.getSuggestions().length > 1;
+        return {
+            ...partialItem,
+            content: renderQuerySuggestion({
+                icon,
+                hasQuery,
+                suggestion,
+                hasMultipleKindOfSuggestions,
+            }),
+            onSelect: () => {
+                this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);
+            },
+        };
+    }
+    render() {
+        return html `${nothing}`;
+    }
+};
+__decorate([
+    state()
+], AtomicSearchBoxQuerySuggestions.prototype, "error", void 0);
+__decorate([
+    property()
+], AtomicSearchBoxQuerySuggestions.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-with-query', reflect: true })
+], AtomicSearchBoxQuerySuggestions.prototype, "maxWithQuery", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-without-query', reflect: true })
+], AtomicSearchBoxQuerySuggestions.prototype, "maxWithoutQuery", void 0);
+__decorate([
+    errorGuard()
+], AtomicSearchBoxQuerySuggestions.prototype, "render", null);
+AtomicSearchBoxQuerySuggestions = __decorate([
+    customElement('atomic-search-box-query-suggestions')
+], AtomicSearchBoxQuerySuggestions);
+export { AtomicSearchBoxQuerySuggestions };

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

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

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

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

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

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

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

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

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

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

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

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

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

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