npm - @coveo/atomic - Versions diffs - 3.37.1 → 3.37.2 - Mend

@coveo/atomic 3.37.1 → 3.37.2

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

package/dist/esm/atomic-rating-facet.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-rating-facet.entry.js","mappings":"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","names":[],"sources":["src/components/search/facets/atomic-rating-facet/atomic-rating-facet.pcss?tag=atomic-rating-facet&encapsulation=shadow","src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx"],"sourcesContent":["@import '../../../common/facets/facet-common.pcss';\n@import '../../../common/facets/facet-value-checkbox/facet-value-checkbox.pcss';\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {\n NumericFacet,\n buildNumericFacet,\n NumericFacetState,\n NumericFacetOptions,\n SearchStatus,\n SearchStatusState,\n buildSearchStatus,\n NumericFacetValue,\n NumericRangeRequest,\n buildNumericRange,\n buildFacetConditionsManager,\n FacetConditionsManager,\n FacetValueRequest,\n CategoryFacetValueRequest,\n buildTabManager,\n TabManager,\n TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, VNode, Element} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {Rating} from '../../../common/atomic-rating/stencil-rating';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetInfo} from '../../../common/facets/facet-common-store';\nimport {FacetContainer} from '../../../common/facets/facet-container/stencil-facet-container';\nimport {FacetHeader} from '../../../common/facets/facet-header/stencil-facet-header';\nimport {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-placeholder';\nimport {FacetValueCheckbox} from '../../../common/facets/facet-value-checkbox/stencil-facet-value-checkbox';\nimport {FacetValueLink} from '../../../common/facets/facet-value-link/stencil-facet-value-link';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {initializePopover} from '../../../common/facets/popover/popover-type';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/*\n A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).\n * An `atomic-rating-facet` displays a facet of the results for the current query as ratings.\n * It only supports numeric fields.\n \n @part facet - The wrapper for the entire facet.\n * @part placeholder - The placeholder shown before the first search is executed.\n \n @part label-button - The button that displays the label and toggles to expand or collapse the facet.\n * @part label-button-icon - The label button icon.\n * @part clear-button - The button that resets the actively selected facet values.\n * @part clear-button-icon - The clear button icon.\n \n @part values - The facet values container.\n * @part value-count - The facet value count, common for all displays.\n * @part value-rating - The facet value rating, common for all displays.\n * @part value-rating-icon - The individual star icons used in the rating display.\n \n @part value-checkbox - The facet value checkbox, available when display is 'checkbox'.\n * @part value-checkbox-checked - The checked facet value checkbox, available when display is 'checkbox'.\n * @part value-checkbox-label - The facet value checkbox clickable label, available when display is 'checkbox'.\n * @part value-checkbox-icon - The facet value checkbox icon, available when display is 'checkbox'.\n * @part value-link - The facet value when display is 'link'.\n * @part value-link-selected - The selected facet value when display is 'link'.\n /\n@Component({\n tag: 'atomic-rating-facet',\n styleUrl: 'atomic-rating-facet.pcss',\n shadow: true,\n})\nexport class AtomicRatingFacet implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public facet!: NumericFacet;\n private dependenciesManager?: FacetConditionsManager;\n public searchStatus!: SearchStatus;\n public tabManager!: TabManager;\n @Element() private host!: HTMLElement;\n\n @BindStateToController('facet')\n @State()\n public facetState!: NumericFacetState;\n @BindStateToController('searchStatus')\n @State()\n public searchStatusState!: SearchStatusState;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\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 non-localized label for the facet.\n * Used in the `atomic-breadbox` component through the bindings store.\n /\n @Prop({reflect: true}) public label = 'no-label';\n /\n The field whose values you want to display in the facet.\n /\n @Prop({reflect: true}) public field!: 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 The number of options to display in the facet. If `maxValueInIndex` isn't specified, it will be assumed that this is also the maximum number of rating icons.\n /\n @Prop({reflect: true}) public numberOfIntervals = 5;\n /\n The maximum value in the field's index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as `numberOfIntervals`.\n /\n @Prop({reflect: true}) public maxValueInIndex = this.numberOfIntervals;\n /\n The minimum value of the field.\n /\n @Prop({reflect: true}) public minValueInIndex = 1;\n /\n Whether to display the facet values as checkboxes (multiple selection) or links (single selection).\n * Possible values are 'checkbox' and 'link'.\n /\n @Prop({reflect: true}) public displayValuesAs: 'checkbox' \| 'link' =\n 'checkbox';\n /\n The SVG icon to use to display the rating.\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 When using a custom icon, at least part of your icon should have the color set to `fill=\"currentColor\"`.\n * This part of the SVG will take on the colors set in the following [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n \n - `--atomic-rating-icon-active-color`\n * - `--atomic-rating-icon-inactive-color`\n\n /\n @Prop({reflect: true}) public icon = Star;\n /\n Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.\n /\n @Prop({reflect: true, mutable: true}) public isCollapsed = false;\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\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 /\n @Prop({reflect: true}) public injectionDepth = 1000;\n\n /\n The required facets and values for this facet to be displayed.\n * Examples:\n * ```html\n * <atomic-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-facet>\n \n <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n * <atomic-rating-facet\n * depends-on-abc\n * ...\n * ></atomic-rating-facet>\n \n <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n * <atomic-rating-facet\n * depends-on-abc=\"doc\"\n * ...\n * ></atomic-rating-facet>\n * ```\n /\n @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n\n private headerFocus?: FocusTargetController;\n\n private get focusTarget(): FocusTargetController {\n if (!this.headerFocus) {\n this.headerFocus = new FocusTargetController(this);\n }\n return this.headerFocus;\n }\n private validateProps() {\n new Schema({\n displayValuesAs: new StringValue({constrainTo: ['checkbox', 'link']}),\n }).validate({\n displayValuesAs: this.displayValuesAs,\n });\n }\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.validateProps();\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n this.tabManager = buildTabManager(this.bindings.engine);\n this.initializeFacet();\n this.initializeDependenciesManager();\n }\n\n private initializeFacet() {\n const options: NumericFacetOptions = {\n facetId: this.facetId,\n field: this.field,\n numberOfValues: this.numberOfIntervals,\n currentValues: this.generateCurrentValues(),\n sortCriteria: 'descending',\n generateAutomaticRanges: false,\n filterFacetCount: this.filterFacetCount,\n injectionDepth: this.injectionDepth,\n tabs: {\n included: [...this.tabsIncluded],\n excluded: [...this.tabsExcluded],\n },\n };\n this.facet = buildNumericFacet(this.bindings.engine, {options});\n this.facetId = this.facet.state.facetId;\n const facetInfo: FacetInfo = {\n label: () => this.bindings.i18n.t(this.label),\n facetId: this.facetId!,\n element: this.host,\n isHidden: () => this.isHidden,\n };\n this.bindings.store.registerFacet('numericFacets', {\n ...facetInfo,\n format: (value) => this.formatFacetValue(value),\n content: (value) => this.ratingContent(value),\n });\n initializePopover(this.host, {\n ...facetInfo,\n hasValues: () => !!this.valuesToRender.length,\n numberOfActiveValues: () => this.numberOfSelectedValues,\n });\n }\n\n public disconnectedCallback() {\n if (this.host.isConnected) {\n return;\n }\n this.dependenciesManager?.stopWatching();\n }\n private get isHidden() {\n return (\n this.searchStatusState.hasError \|\|\n !this.facet.state.enabled \|\|\n !this.valuesToRender.length\n );\n }\n\n private get scaleFactor() {\n return this.maxValueInIndex / this.numberOfIntervals;\n }\n\n private get numberOfSelectedValues() {\n return this.facetState.values.filter(({state}) => state === 'selected')\n .length;\n }\n\n private initializeDependenciesManager() {\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 private generateCurrentValues() {\n const currentValues: NumericRangeRequest[] = [];\n for (let i = this.minValueInIndex; i <= this.numberOfIntervals; i++) {\n currentValues.push(\n buildNumericRange({\n start: Math.round(i this.scaleFactor * 100) / 100,\n end: Math.round((i + 1) * this.scaleFactor * 100) / 100,\n endInclusive: false,\n })\n );\n }\n return currentValues;\n }\n\n private formatFacetValue(facetValue: NumericFacetValue) {\n if (facetValue.start === this.maxValueInIndex) {\n return this.bindings.i18n.t('stars-only', {count: facetValue.start});\n }\n return this.bindings.i18n.t('stars', {\n count: facetValue.start,\n max: this.maxValueInIndex,\n });\n }\n\n private ratingContent(facetValue: NumericFacetValue) {\n return (\n <Rating\n i18n={this.bindings.i18n}\n numberOfTotalIcons={this.maxValueInIndex}\n numberOfActiveIcons={facetValue.start}\n icon={this.icon}\n ></Rating>\n );\n }\n\n private renderHeader() {\n return (\n <FacetHeader\n i18n={this.bindings.i18n}\n label={this.label}\n onClearFilters={() => {\n this.focusTarget.focusAfterSearch();\n this.facet.deselectAll();\n }}\n numberOfActiveValues={this.numberOfSelectedValues}\n isCollapsed={this.isCollapsed}\n headingLevel={this.headingLevel}\n onToggleCollapse={() => (this.isCollapsed = !this.isCollapsed)}\n headerRef={(el) => this.focusTarget.setTarget(el)}\n ></FacetHeader>\n );\n }\n\n private renderValue(facetValue: NumericFacetValue, onClick: () => void) {\n const displayValue = this.formatFacetValue(facetValue);\n const isSelected = facetValue.state === 'selected';\n const shouldBeDimmed = this.facetState.hasActiveValues && !isSelected;\n switch (this.displayValuesAs) {\n case 'checkbox':\n return (\n <FacetValueCheckbox\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n >\n {this.ratingContent(facetValue)}\n </FacetValueCheckbox>\n );\n case 'link':\n return (\n <FacetValueLink\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n class={shouldBeDimmed ? 'opacity-80' : undefined}\n >\n {this.ratingContent(facetValue)}\n </FacetValueLink>\n );\n }\n }\n\n private renderValuesContainer(children: VNode[]) {\n return (\n <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n <ul class=\"mt-3\" part=\"values\">\n {children}\n </ul>\n </FacetValuesGroup>\n );\n }\n\n private renderValues() {\n return this.renderValuesContainer(\n this.valuesToRender.map((value) =>\n this.renderValue(value, () =>\n this.displayValuesAs === 'link'\n ? this.facet.toggleSingleSelect(value)\n : this.facet.toggleSelect(value)\n )\n )\n );\n }\n\n private get valuesToRender() {\n return this.facet.state.values.filter(\n (value) => value.numberOfResults \|\| value.state !== 'idle'\n );\n }\n\n public render() {\n if (this.searchStatusState.hasError \|\| !this.facet.state.enabled) {\n return <Hidden></Hidden>;\n }\n\n if (!this.searchStatusState.firstSearchExecuted) {\n return (\n <FacetPlaceholder\n numberOfValues={this.numberOfIntervals}\n isCollapsed={this.isCollapsed}\n ></FacetPlaceholder>\n );\n }\n\n if (!this.valuesToRender.length) {\n return <Hidden></Hidden>;\n }\n\n return (\n <FacetContainer>\n {this.renderHeader()}\n {!this.isCollapsed && this.renderValues()}\n </FacetContainer>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-rating-facet.entry.js","mappings":"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","names":[],"sources":["src/components/search/facets/atomic-rating-facet/atomic-rating-facet.pcss?tag=atomic-rating-facet&encapsulation=shadow","src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx"],"sourcesContent":["@import '../../../common/facets/facet-common.pcss';\n@import '../../../common/facets/facet-value-checkbox/facet-value-checkbox.pcss';\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {\n NumericFacet,\n buildNumericFacet,\n NumericFacetState,\n NumericFacetOptions,\n SearchStatus,\n SearchStatusState,\n buildSearchStatus,\n NumericFacetValue,\n NumericRangeRequest,\n buildNumericRange,\n buildFacetConditionsManager,\n FacetConditionsManager,\n FacetValueRequest,\n CategoryFacetValueRequest,\n buildTabManager,\n TabManager,\n TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, VNode, Element} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {Rating} from '../../../common/atomic-rating/stencil-rating';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetInfo} from '../../../common/facets/facet-common-store';\nimport {FacetContainer} from '../../../common/facets/facet-container/stencil-facet-container';\nimport {FacetHeader} from '../../../common/facets/facet-header/stencil-facet-header';\nimport {FacetPlaceholder} from '../../../common/facets/facet-placeholder/stencil-facet-placeholder';\nimport {FacetValueCheckbox} from '../../../common/facets/facet-value-checkbox/stencil-facet-value-checkbox';\nimport {FacetValueLink} from '../../../common/facets/facet-value-link/stencil-facet-value-link';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {initializePopover} from '../../../common/facets/popover/popover-type';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/*\n A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).\n * An `atomic-rating-facet` displays a facet of the results for the current query as ratings.\n * It only supports numeric fields.\n \n @part facet - The wrapper for the entire facet.\n * @part placeholder - The placeholder shown before the first search is executed.\n \n @part label-button - The button that displays the label and toggles to expand or collapse the facet.\n * @part label-button-icon - The label button icon.\n * @part clear-button - The button that resets the actively selected facet values.\n * @part clear-button-icon - The clear button icon.\n \n @part values - The facet values container.\n * @part value-count - The facet value count, common for all displays.\n * @part value-rating - The facet value rating, common for all displays.\n * @part value-rating-icon - The individual star icons used in the rating display.\n \n @part value-checkbox - The facet value checkbox, available when display is 'checkbox'.\n * @part value-checkbox-checked - The checked facet value checkbox, available when display is 'checkbox'.\n * @part value-checkbox-label - The facet value checkbox clickable label, available when display is 'checkbox'.\n * @part value-checkbox-icon - The facet value checkbox icon, available when display is 'checkbox'.\n * @part value-link - The facet value when display is 'link'.\n * @part value-link-selected - The selected facet value when display is 'link'.\n /\n@Component({\n tag: 'atomic-rating-facet',\n styleUrl: 'atomic-rating-facet.pcss',\n shadow: true,\n})\nexport class AtomicRatingFacet implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public facet!: NumericFacet;\n private dependenciesManager?: FacetConditionsManager;\n public searchStatus!: SearchStatus;\n public tabManager!: TabManager;\n @Element() private host!: HTMLElement;\n\n @BindStateToController('facet')\n @State()\n public facetState!: NumericFacetState;\n @BindStateToController('searchStatus')\n @State()\n public searchStatusState!: SearchStatusState;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\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 non-localized label for the facet.\n * Used in the `atomic-breadbox` component through the bindings store.\n /\n @Prop({reflect: true}) public label = 'no-label';\n /\n The field whose values you want to display in the facet.\n /\n @Prop({reflect: true}) public field!: 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 The number of options to display in the facet. If `maxValueInIndex` isn't specified, it will be assumed that this is also the maximum number of rating icons.\n /\n @Prop({reflect: true}) public numberOfIntervals = 5;\n /\n The maximum value in the field's index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as `numberOfIntervals`.\n /\n @Prop({reflect: true}) public maxValueInIndex = this.numberOfIntervals;\n /\n The minimum value of the field.\n /\n @Prop({reflect: true}) public minValueInIndex = 1;\n /\n Whether to display the facet values as checkboxes (multiple selection) or links (single selection).\n * Possible values are 'checkbox' and 'link'.\n /\n @Prop({reflect: true}) public displayValuesAs: 'checkbox' \| 'link' =\n 'checkbox';\n /\n The SVG icon to use to display the rating.\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 When using a custom icon, at least part of your icon should have the color set to `fill=\"currentColor\"`.\n * This part of the SVG will take on the colors set in the following [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n \n - `--atomic-rating-icon-active-color`\n * - `--atomic-rating-icon-inactive-color`\n\n /\n @Prop({reflect: true}) public icon = Star;\n /\n Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.\n /\n @Prop({reflect: true, mutable: true}) public isCollapsed = false;\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\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 /\n @Prop({reflect: true}) public injectionDepth = 1000;\n\n /\n The required facets and values for this facet to be displayed.\n * Examples:\n * ```html\n * <atomic-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-facet>\n \n <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n * <atomic-rating-facet\n * depends-on-abc\n * ...\n * ></atomic-rating-facet>\n \n <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n * <atomic-rating-facet\n * depends-on-abc=\"doc\"\n * ...\n * ></atomic-rating-facet>\n * ```\n /\n @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n\n private headerFocus?: FocusTargetController;\n\n private get focusTarget(): FocusTargetController {\n if (!this.headerFocus) {\n this.headerFocus = new FocusTargetController(this);\n }\n return this.headerFocus;\n }\n private validateProps() {\n new Schema({\n displayValuesAs: new StringValue({constrainTo: ['checkbox', 'link']}),\n }).validate({\n displayValuesAs: this.displayValuesAs,\n });\n }\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.validateProps();\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n this.tabManager = buildTabManager(this.bindings.engine);\n this.initializeFacet();\n this.initializeDependenciesManager();\n }\n\n private initializeFacet() {\n const options: NumericFacetOptions = {\n facetId: this.facetId,\n field: this.field,\n numberOfValues: this.numberOfIntervals,\n currentValues: this.generateCurrentValues(),\n sortCriteria: 'descending',\n generateAutomaticRanges: false,\n filterFacetCount: this.filterFacetCount,\n injectionDepth: this.injectionDepth,\n tabs: {\n included: [...this.tabsIncluded],\n excluded: [...this.tabsExcluded],\n },\n };\n this.facet = buildNumericFacet(this.bindings.engine, {options});\n this.facetId = this.facet.state.facetId;\n const facetInfo: FacetInfo = {\n label: () => this.bindings.i18n.t(this.label),\n facetId: this.facetId!,\n element: this.host,\n isHidden: () => this.isHidden,\n };\n this.bindings.store.registerFacet('numericFacets', {\n ...facetInfo,\n format: (value) => this.formatFacetValue(value),\n content: (value) => this.ratingContent(value),\n });\n initializePopover(this.host, {\n ...facetInfo,\n hasValues: () => !!this.valuesToRender.length,\n numberOfActiveValues: () => this.numberOfSelectedValues,\n });\n }\n\n public disconnectedCallback() {\n if (this.host.isConnected) {\n return;\n }\n this.dependenciesManager?.stopWatching();\n }\n private get isHidden() {\n return (\n this.searchStatusState.hasError \|\|\n !this.facet.state.enabled \|\|\n !this.valuesToRender.length\n );\n }\n\n private get scaleFactor() {\n return this.maxValueInIndex / this.numberOfIntervals;\n }\n\n private get numberOfSelectedValues() {\n return this.facetState.values.filter(({state}) => state === 'selected')\n .length;\n }\n\n private initializeDependenciesManager() {\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 private generateCurrentValues() {\n const currentValues: NumericRangeRequest[] = [];\n for (let i = this.minValueInIndex; i <= this.numberOfIntervals; i++) {\n currentValues.push(\n buildNumericRange({\n start: Math.round(i this.scaleFactor * 100) / 100,\n end: Math.round((i + 1) * this.scaleFactor * 100) / 100,\n endInclusive: false,\n })\n );\n }\n return currentValues;\n }\n\n private formatFacetValue(facetValue: NumericFacetValue) {\n if (facetValue.start === this.maxValueInIndex) {\n return this.bindings.i18n.t('stars-only', {count: facetValue.start});\n }\n return this.bindings.i18n.t('stars', {\n count: facetValue.start,\n max: this.maxValueInIndex,\n });\n }\n\n private ratingContent(facetValue: NumericFacetValue) {\n return (\n <Rating\n i18n={this.bindings.i18n}\n numberOfTotalIcons={this.maxValueInIndex}\n numberOfActiveIcons={facetValue.start}\n icon={this.icon}\n ></Rating>\n );\n }\n\n private renderHeader() {\n return (\n <FacetHeader\n i18n={this.bindings.i18n}\n label={this.label}\n onClearFilters={() => {\n this.focusTarget.focusAfterSearch();\n this.facet.deselectAll();\n }}\n numberOfActiveValues={this.numberOfSelectedValues}\n isCollapsed={this.isCollapsed}\n headingLevel={this.headingLevel}\n onToggleCollapse={() => (this.isCollapsed = !this.isCollapsed)}\n headerRef={(el) => this.focusTarget.setTarget(el)}\n ></FacetHeader>\n );\n }\n\n private renderValue(facetValue: NumericFacetValue, onClick: () => void) {\n const displayValue = this.formatFacetValue(facetValue);\n const isSelected = facetValue.state === 'selected';\n const shouldBeDimmed = this.facetState.hasActiveValues && !isSelected;\n switch (this.displayValuesAs) {\n case 'checkbox':\n return (\n <FacetValueCheckbox\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n >\n {this.ratingContent(facetValue)}\n </FacetValueCheckbox>\n );\n case 'link':\n return (\n <FacetValueLink\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n class={shouldBeDimmed ? 'opacity-80' : undefined}\n >\n {this.ratingContent(facetValue)}\n </FacetValueLink>\n );\n }\n }\n\n private renderValuesContainer(children: VNode[]) {\n return (\n <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n <ul class=\"mt-3\" part=\"values\">\n {children}\n </ul>\n </FacetValuesGroup>\n );\n }\n\n private renderValues() {\n return this.renderValuesContainer(\n this.valuesToRender.map((value) =>\n this.renderValue(value, () =>\n this.displayValuesAs === 'link'\n ? this.facet.toggleSingleSelect(value)\n : this.facet.toggleSelect(value)\n )\n )\n );\n }\n\n private get valuesToRender() {\n return this.facet.state.values.filter(\n (value) => value.numberOfResults \|\| value.state !== 'idle'\n );\n }\n\n public render() {\n if (this.searchStatusState.hasError \|\| !this.facet.state.enabled) {\n return <Hidden></Hidden>;\n }\n\n if (!this.searchStatusState.firstSearchExecuted) {\n return (\n <FacetPlaceholder\n numberOfValues={this.numberOfIntervals}\n isCollapsed={this.isCollapsed}\n ></FacetPlaceholder>\n );\n }\n\n if (!this.valuesToRender.length) {\n return <Hidden></Hidden>;\n }\n\n return (\n <FacetContainer>\n {this.renderHeader()}\n {!this.isCollapsed && this.renderValues()}\n </FacetContainer>\n );\n }\n}\n"],"version":3}

package/dist/esm/atomic-rating-range-facet.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { I as InitializeBindings, B as BindStateToController, H as Hidden } from
 import { A as ArrayProp, M as MapProp } from './props-utils-abc3c855.js';
 import { F as FocusTargetController } from './stencil-accessibility-utils-29cc6679.js';
 import { p as parseDependsOn } from './depends-on-20dabb86.js';
-import { F as FacetHeader, b as FacetPlaceholder, a as FacetContainer } from './facet-placeholder-7e0836c1.js';
+import { F as FacetHeader, b as FacetPlaceholder, a as FacetContainer } from './stencil-facet-placeholder-8201b5c9.js';
 import { F as FacetValueLink } from './stencil-facet-value-link-5507b3b2.js';
 import { F as FacetValuesGroup } from './stencil-facet-values-group-c33807e6.js';
 import { i as initializePopover } from './popover-type-895c0e24.js';

package/dist/esm/atomic-rating-range-facet.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-rating-range-facet.entry.js","mappings":"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","names":[],"sources":["src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.pcss?tag=atomic-rating-range-facet&encapsulation=shadow","src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx"],"sourcesContent":["@import '../../../common/facets/facet-common.pcss';\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {\n NumericFacet,\n buildNumericFacet,\n NumericFacetState,\n NumericFacetOptions,\n SearchStatus,\n SearchStatusState,\n buildSearchStatus,\n NumericFacetValue,\n NumericRangeRequest,\n buildNumericRange,\n buildFacetConditionsManager,\n FacetConditionsManager,\n FacetValueRequest,\n CategoryFacetValueRequest,\n buildTabManager,\n TabManager,\n TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, VNode, Element} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {Rating} from '../../../common/atomic-rating/stencil-rating';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetInfo} from '../../../common/facets/facet-common-store';\nimport {FacetContainer} from '../../../common/facets/facet-container/stencil-facet-container';\nimport {FacetHeader} from '../../../common/facets/facet-header/stencil-facet-header';\nimport {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-placeholder';\nimport {FacetValueLink} from '../../../common/facets/facet-value-link/stencil-facet-value-link';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {initializePopover} from '../../../common/facets/popover/popover-type';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/*\n A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).\n * An `atomic-rating-range-facet` displays a facet of the results for the current query as ratings.\n * It only supports numeric fields.\n \n @part facet - The wrapper for the entire facet.\n * @part placeholder - The placeholder shown before the first search is executed.\n \n @part label-button - The button that displays the label and toggles to expand or collapse the facet.\n * @part label-button-icon - The label button icon.\n * @part clear-button - The button that resets the actively selected facet values.\n * @part clear-button-icon - The clear button icon.\n \n @part values - The facet values container.\n * @part value-label - The facet value label, common for all displays.\n * @part value-count - The facet value count, common for all displays.\n * @part value-rating - The facet value rating, common for all displays.\n * @part value-rating-icon - The individual star icons used in the rating display.\n \n @part value-link - The facet value when display is 'link'.\n * @part value-link-selected - The selected facet value when display is 'link'.\n * @part value-box - The facet value when display is 'box'.\n * @part value-box-selected - The selected facet value when display is 'box'.\n /\n@Component({\n tag: 'atomic-rating-range-facet',\n styleUrl: 'atomic-rating-range-facet.pcss',\n shadow: true,\n})\nexport class AtomicRatingRangeFacet implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public facet!: NumericFacet;\n private dependenciesManager?: FacetConditionsManager;\n public searchStatus!: SearchStatus;\n public tabManager!: TabManager;\n @Element() private host!: HTMLElement;\n\n @BindStateToController('facet')\n @State()\n public facetState!: NumericFacetState;\n @BindStateToController('searchStatus')\n @State()\n public searchStatusState!: SearchStatusState;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\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 non-localized label for the facet.\n * Used in the `atomic-breadbox` component through the bindings store.\n /\n @Prop({reflect: true}) public label = 'no-label';\n /\n The field whose values you want to display in the facet.\n /\n @Prop({reflect: true}) public field!: 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 The number of options to display in the facet. If `maxValueInIndex` isn't specified, it will be assumed that this is also the maximum number of rating icons.\n /\n @Prop({reflect: true}) public numberOfIntervals = 5;\n /\n The maximum value in the field's index and the number of rating icons to display in the facet. This property will default to the same value as `numberOfIntervals`, if not assigned a value.\n /\n @Prop({reflect: true}) public maxValueInIndex = this.numberOfIntervals;\n /\n The minimum value of the field.\n /\n @Prop({reflect: true}) public minValueInIndex = 1;\n /\n The SVG icon to use to display the rating.\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 When using a custom icon, at least part of your icon should have the color set to `fill=\"currentColor\"`.\n * This part of the SVG will take on the colors set in the following [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n \n - `--atomic-rating-icon-active-color`\n * - `--atomic-rating-icon-inactive-color`\n /\n @Prop({reflect: true}) public icon = Star;\n /\n Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.\n /\n @Prop({reflect: true, mutable: true}) public isCollapsed = false;\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\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({reflect: true}) public injectionDepth = 1000;\n\n /\n The required facets and values for this facet to be displayed.\n * Examples:\n * ```html\n * <atomic-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-facet>\n \n <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n * <atomic-rating-range-facet\n * depends-on-abc\n * ...\n * ></atomic-rating-range-facet>\n \n <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n * <atomic-rating-range-facet\n * depends-on-abc=\"doc\"\n * ...\n * ></atomic-rating-range-facet>\n * ```\n /\n @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n\n private headerFocus?: FocusTargetController;\n\n private get focusTarget() {\n if (!this.headerFocus) {\n this.headerFocus = new FocusTargetController(this);\n }\n return this.headerFocus;\n }\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 this.initializeFacet();\n this.initializeDependenciesManager();\n }\n public disconnectedCallback() {\n if (this.host.isConnected) {\n return;\n }\n this.dependenciesManager?.stopWatching();\n }\n\n private get isHidden() {\n return (\n !this.valuesToRender.length \|\|\n this.searchStatusState.hasError \|\|\n !this.facet.state.enabled\n );\n }\n\n private initializeFacet() {\n const options: NumericFacetOptions = {\n facetId: this.facetId,\n field: this.field,\n numberOfValues: this.numberOfIntervals,\n currentValues: this.generateCurrentValues(),\n sortCriteria: 'descending',\n generateAutomaticRanges: false,\n filterFacetCount: this.filterFacetCount,\n injectionDepth: this.injectionDepth,\n tabs: {\n included: [...this.tabsIncluded],\n excluded: [...this.tabsExcluded],\n },\n };\n this.facet = buildNumericFacet(this.bindings.engine, {options});\n this.facetId = this.facet.state.facetId;\n const facetInfo: FacetInfo = {\n label: () => this.bindings.i18n.t(this.label),\n facetId: this.facetId!,\n element: this.host,\n isHidden: () => this.isHidden,\n };\n this.bindings.store.registerFacet('numericFacets', {\n ...facetInfo,\n format: (value) => this.formatFacetValue(value),\n content: (value) => this.ratingContent(value),\n });\n initializePopover(this.host, {\n ...facetInfo,\n hasValues: () => !!this.valuesToRender.length,\n numberOfActiveValues: () => this.numberOfSelectedValues,\n });\n }\n\n private get scaleFactor() {\n return this.maxValueInIndex / this.numberOfIntervals;\n }\n\n private get numberOfSelectedValues() {\n return this.facetState.values.filter(({state}) => state === 'selected')\n .length;\n }\n\n private initializeDependenciesManager() {\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 private generateCurrentValues() {\n const currentValues: NumericRangeRequest[] = [];\n for (let i = this.minValueInIndex; i <= this.numberOfIntervals; i++) {\n currentValues.push(\n buildNumericRange({\n start: Math.round(i this.scaleFactor * 100) / 100,\n end: Math.round(this.maxValueInIndex * 100) / 100,\n endInclusive: true,\n })\n );\n }\n return currentValues;\n }\n\n private formatFacetValue(facetValue: NumericFacetValue) {\n if (facetValue.start === this.maxValueInIndex) {\n return this.bindings.i18n.t('stars-only', {\n count: facetValue.start,\n });\n }\n return this.bindings.i18n.t('stars-range', {\n value: facetValue.start,\n count: this.maxValueInIndex,\n });\n }\n\n private ratingContent(facetValue: NumericFacetValue) {\n return (\n <div class=\"flex items-center\">\n <Rating\n i18n={this.bindings.i18n}\n numberOfTotalIcons={this.maxValueInIndex}\n numberOfActiveIcons={facetValue.start}\n icon={this.icon}\n ></Rating>\n {this.renderLabelText(facetValue)}\n </div>\n );\n }\n\n private renderHeader() {\n return (\n <FacetHeader\n i18n={this.bindings.i18n}\n label={this.label}\n onClearFilters={() => {\n this.focusTarget.focusAfterSearch();\n this.facet.deselectAll();\n }}\n numberOfActiveValues={this.numberOfSelectedValues}\n isCollapsed={this.isCollapsed}\n headingLevel={this.headingLevel}\n onToggleCollapse={() => (this.isCollapsed = !this.isCollapsed)}\n headerRef={(el) => this.focusTarget.setTarget(el)}\n ></FacetHeader>\n );\n }\n\n private renderLabelText(facetValue: NumericFacetValue) {\n return (\n <span\n part=\"value-label\"\n class={`group-focus:text-primary group-hover:text-primary ml-1 flex items-center truncate ${\n facetValue.state === 'selected' ? 'font-bold' : ''\n }`}\n >\n {facetValue.start === this.maxValueInIndex ? (\n <span>{this.bindings.i18n.t('only')}</span>\n ) : (\n this.bindings.i18n.t('and-up')\n )}\n </span>\n );\n }\n\n private renderValue(facetValue: NumericFacetValue, onClick: () => void) {\n const displayValue = this.formatFacetValue(facetValue);\n const isSelected = facetValue.state === 'selected';\n return (\n <FacetValueLink\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n >\n {this.ratingContent(facetValue)}\n </FacetValueLink>\n );\n }\n\n private renderValuesContainer(children: VNode[]) {\n return (\n <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n <ul class=\"mt-3\" part=\"values\">\n {children}\n </ul>\n </FacetValuesGroup>\n );\n }\n\n private renderValues() {\n return this.renderValuesContainer(\n this.valuesToRender.map((value) =>\n this.renderValue(value, () => this.facet.toggleSingleSelect(value))\n )\n );\n }\n\n private get valuesToRender() {\n return this.facet.state.values.filter(\n (value) => value.numberOfResults \|\| value.state !== 'idle'\n );\n }\n\n public render() {\n if (this.searchStatusState.hasError \|\| !this.facet.state.enabled) {\n return <Hidden></Hidden>;\n }\n\n if (!this.searchStatusState.firstSearchExecuted) {\n return (\n <FacetPlaceholder\n numberOfValues={this.numberOfIntervals}\n isCollapsed={this.isCollapsed}\n ></FacetPlaceholder>\n );\n }\n\n if (!this.valuesToRender.length) {\n return <Hidden></Hidden>;\n }\n\n return (\n <FacetContainer>\n {this.renderHeader()}\n {!this.isCollapsed && this.renderValues()}\n </FacetContainer>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-rating-range-facet.entry.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,iylEAAiylE,CAAC;AACp0lE,qCAAe,yBAAyB;;;;;;;;;;;;MCoE3B,sBAAsB;;;;;;;QA2BH,UAAK,GAAG,UAAU,CAAC;;;;;;;;;;QAgB1C,iBAAY,GAAsB,IAAI,CAAC;;;;;;;;;;QAavC,iBAAY,GAAsB,IAAI,CAAC;;;;QAKhB,sBAAiB,GAAG,CAAC,CAAC;;;;QAItB,oBAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC;;;;QAIzC,oBAAe,GAAG,CAAC,CAAC;;;;;;;;;;;;;;QAcpB,SAAI,GAAG,IAAI,CAAC;;;;QAIG,gBAAW,GAAG,KAAK,CAAC;;;;QAInC,iBAAY,GAAG,CAAC,CAAC;;;;;;;QAOjB,qBAAgB,GAAG,IAAI,CAAC;;;;;;;QAOxB,mBAAc,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;QAqB1B,cAAS,GAA2B,EAAE,CAAC;;;;;;qBAnG3B,UAAU;;4BAgBP,IAAI;4BAaJ,IAAI;iCAKK,CAAC;+BAIH,IAAI,CAAC,iBAAiB;+BAItB,CAAC;oBAcZ,IAAI;2BAIkB,KAAK;4BAInB,CAAC;gCAOG,IAAI;8BAON,IAAI;yBAqBW,EAAE;;IAIhE,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;SACpD;QACD,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAEM,UAAU;QACf,IACE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,CAAC;YACjC,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,CAAC,EACjC;YACA,OAAO,CAAC,IAAI,CACV,qHAAqH,CACtH,CAAC;SACH;QACD,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxD,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IACM,oBAAoB;QACzB,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACzB,OAAO;SACR;QACD,IAAI,CAAC,mBAAmB,EAAE,YAAY,EAAE,CAAC;KAC1C;IAED,IAAY,QAAQ;QAClB,QACE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM;YAC3B,IAAI,CAAC,iBAAiB,CAAC,QAAQ;YAC/B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EACzB;KACH;IAEO,eAAe;QACrB,MAAM,OAAO,GAAwB;YACnC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,cAAc,EAAE,IAAI,CAAC,iBAAiB;YACtC,aAAa,EAAE,IAAI,CAAC,qBAAqB,EAAE;YAC3C,YAAY,EAAE,YAAY;YAC1B,uBAAuB,EAAE,KAAK;YAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,IAAI,EAAE;gBACJ,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC;gBAChC,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC;aACjC;SACF,CAAC;QACF,IAAI,CAAC,KAAK,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAC,OAAO,EAAC,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACxC,MAAM,SAAS,GAAc;YAC3B,KAAK,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;YAC7C,OAAO,EAAE,IAAI,CAAC,OAAQ;YACtB,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,MAAM,IAAI,CAAC,QAAQ;SAC9B,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE;YACjD,GAAG,SAAS;YACZ,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAC/C,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;SAC9C,CAAC,CAAC;QACH,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE;YAC3B,GAAG,SAAS;YACZ,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM;YAC7C,oBAAoB,EAAE,MAAM,IAAI,CAAC,sBAAsB;SACxD,CAAC,CAAC;KACJ;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC;KACtD;IAED,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAC,KAAK,EAAC,KAAK,KAAK,KAAK,UAAU,CAAC;aACpE,MAAM,CAAC;KACX;IAEO,6BAA6B;QACnC,IAAI,CAAC,mBAAmB,GAAG,2BAA2B,CACpD,IAAI,CAAC,QAAQ,CAAC,MAAM,EACpB;YACE,OAAO,EAAE,IAAI,CAAC,OAAQ;YACtB,UAAU,EAAE,cAAc,CAExB,IAAI,CAAC,SAAS,CAAC;SAClB,CACF,CAAC;KACH;IAEO,qBAAqB;QAC3B,MAAM,aAAa,GAA0B,EAAE,CAAC;QAChD,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE,EAAE;YACnE,aAAa,CAAC,IAAI,CAChB,iBAAiB,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,GAAG;gBACnD,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,GAAG;gBACjD,YAAY,EAAE,IAAI;aACnB,CAAC,CACH,CAAC;SACH;QACD,OAAO,aAAa,CAAC;KACtB;IAEO,gBAAgB,CAAC,UAA6B;QACpD,IAAI,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,EAAE;YAC7C,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE;gBACxC,KAAK,EAAE,UAAU,CAAC,KAAK;aACxB,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,EAAE;YACzC,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,KAAK,EAAE,IAAI,CAAC,eAAe;SAC5B,CAAC,CAAC;KACJ;IAEO,aAAa,CAAC,UAA6B;QACjD,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,EAAC,MAAM,IACL,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,kBAAkB,EAAE,IAAI,CAAC,eAAe,EACxC,mBAAmB,EAAE,UAAU,CAAC,KAAK,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,GACP,EACT,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAC7B,EACN;KACH;IAEO,YAAY;QAClB,QACE,EAAC,WAAW,IACV,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE;gBACd,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC;gBACpC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;aAC1B,EACD,oBAAoB,EAAE,IAAI,CAAC,sBAAsB,EACjD,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,gBAAgB,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAC9D,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,GACpC,EACf;KACH;IAEO,eAAe,CAAC,UAA6B;QACnD,QACE,YACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,qFACL,UAAU,CAAC,KAAK,KAAK,UAAU,GAAG,WAAW,GAAG,EAClD,EAAE,IAED,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,IACxC,gBAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAQ,KAE3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC/B,CACI,EACP;KACH;IAEO,WAAW,CAAC,UAA6B,EAAE,OAAmB;QACpE,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACvD,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,KAAK,UAAU,CAAC;QACnD,QACE,EAAC,cAAc,IACb,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,UAAU,CAAC,eAAe,EAC3C,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,OAAO,IAEf,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAChB,EACjB;KACH;IAEO,qBAAqB,CAAC,QAAiB;QAC7C,QACE,EAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAC3D,UAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,IAC3B,QAAQ,CACN,CACY,EACnB;KACH;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,qBAAqB,CAC/B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,KAC5B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CACpE,CACF,CAAC;KACH;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,KAAK,KAAK,MAAM,CAC3D,CAAC;KACH;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,iBAAiB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;YAChE,OAAO,EAAC,MAAM,OAAU,CAAC;SAC1B;QAED,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,EAAE;YAC/C,QACE,EAAC,gBAAgB,IACf,cAAc,EAAE,IAAI,CAAC,iBAAiB,EACtC,WAAW,EAAE,IAAI,CAAC,WAAW,GACX,EACpB;SACH;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;YAC/B,OAAO,EAAC,MAAM,OAAU,CAAC;SAC1B;QAED,QACE,EAAC,cAAc,QACZ,IAAI,CAAC,YAAY,EAAE,EACnB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,EAAE,CAC1B,EACjB;KACH;;;AAxW4B;IAA5B,kBAAkB,EAAE;wDAA4B;AAS1C;IAFN,qBAAqB,CAAC,OAAO,CAAC;0DAEO;AAG/B;IAFN,qBAAqB,CAAC,cAAc,CAAC;iEAEO;AAGtC;IAFN,qBAAqB,CAAC,YAAY,CAAC;+DAEK;AA2BlC;IAFN,SAAS,EAAE;4DAEkC;AAavC;IAFN,SAAS,EAAE;4DAEkC;AAsEpB;IAAzB,OAAO,EAAE;yDAAuD;;;;;","names":[],"sources":["src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.pcss?tag=atomic-rating-range-facet&encapsulation=shadow","src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx"],"sourcesContent":["@import '../../../common/facets/facet-common.pcss';\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {\n NumericFacet,\n buildNumericFacet,\n NumericFacetState,\n NumericFacetOptions,\n SearchStatus,\n SearchStatusState,\n buildSearchStatus,\n NumericFacetValue,\n NumericRangeRequest,\n buildNumericRange,\n buildFacetConditionsManager,\n FacetConditionsManager,\n FacetValueRequest,\n CategoryFacetValueRequest,\n buildTabManager,\n TabManager,\n TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, VNode, Element} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {Rating} from '../../../common/atomic-rating/stencil-rating';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetInfo} from '../../../common/facets/facet-common-store';\nimport {FacetContainer} from '../../../common/facets/facet-container/stencil-facet-container';\nimport {FacetHeader} from '../../../common/facets/facet-header/stencil-facet-header';\nimport {FacetPlaceholder} from '../../../common/facets/facet-placeholder/stencil-facet-placeholder';\nimport {FacetValueLink} from '../../../common/facets/facet-value-link/stencil-facet-value-link';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {initializePopover} from '../../../common/facets/popover/popover-type';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/*\n A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).\n * An `atomic-rating-range-facet` displays a facet of the results for the current query as ratings.\n * It only supports numeric fields.\n \n @part facet - The wrapper for the entire facet.\n * @part placeholder - The placeholder shown before the first search is executed.\n \n @part label-button - The button that displays the label and toggles to expand or collapse the facet.\n * @part label-button-icon - The label button icon.\n * @part clear-button - The button that resets the actively selected facet values.\n * @part clear-button-icon - The clear button icon.\n \n @part values - The facet values container.\n * @part value-label - The facet value label, common for all displays.\n * @part value-count - The facet value count, common for all displays.\n * @part value-rating - The facet value rating, common for all displays.\n * @part value-rating-icon - The individual star icons used in the rating display.\n \n @part value-link - The facet value when display is 'link'.\n * @part value-link-selected - The selected facet value when display is 'link'.\n * @part value-box - The facet value when display is 'box'.\n * @part value-box-selected - The selected facet value when display is 'box'.\n /\n@Component({\n tag: 'atomic-rating-range-facet',\n styleUrl: 'atomic-rating-range-facet.pcss',\n shadow: true,\n})\nexport class AtomicRatingRangeFacet implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public facet!: NumericFacet;\n private dependenciesManager?: FacetConditionsManager;\n public searchStatus!: SearchStatus;\n public tabManager!: TabManager;\n @Element() private host!: HTMLElement;\n\n @BindStateToController('facet')\n @State()\n public facetState!: NumericFacetState;\n @BindStateToController('searchStatus')\n @State()\n public searchStatusState!: SearchStatusState;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\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 non-localized label for the facet.\n * Used in the `atomic-breadbox` component through the bindings store.\n /\n @Prop({reflect: true}) public label = 'no-label';\n /\n The field whose values you want to display in the facet.\n /\n @Prop({reflect: true}) public field!: 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 The number of options to display in the facet. If `maxValueInIndex` isn't specified, it will be assumed that this is also the maximum number of rating icons.\n /\n @Prop({reflect: true}) public numberOfIntervals = 5;\n /\n The maximum value in the field's index and the number of rating icons to display in the facet. This property will default to the same value as `numberOfIntervals`, if not assigned a value.\n /\n @Prop({reflect: true}) public maxValueInIndex = this.numberOfIntervals;\n /\n The minimum value of the field.\n /\n @Prop({reflect: true}) public minValueInIndex = 1;\n /\n The SVG icon to use to display the rating.\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 When using a custom icon, at least part of your icon should have the color set to `fill=\"currentColor\"`.\n * This part of the SVG will take on the colors set in the following [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n \n - `--atomic-rating-icon-active-color`\n * - `--atomic-rating-icon-inactive-color`\n /\n @Prop({reflect: true}) public icon = Star;\n /\n Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.\n /\n @Prop({reflect: true, mutable: true}) public isCollapsed = false;\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\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({reflect: true}) public injectionDepth = 1000;\n\n /\n The required facets and values for this facet to be displayed.\n * Examples:\n * ```html\n * <atomic-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-facet>\n \n <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n * <atomic-rating-range-facet\n * depends-on-abc\n * ...\n * ></atomic-rating-range-facet>\n \n <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n * <atomic-rating-range-facet\n * depends-on-abc=\"doc\"\n * ...\n * ></atomic-rating-range-facet>\n * ```\n /\n @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n\n private headerFocus?: FocusTargetController;\n\n private get focusTarget() {\n if (!this.headerFocus) {\n this.headerFocus = new FocusTargetController(this);\n }\n return this.headerFocus;\n }\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 this.initializeFacet();\n this.initializeDependenciesManager();\n }\n public disconnectedCallback() {\n if (this.host.isConnected) {\n return;\n }\n this.dependenciesManager?.stopWatching();\n }\n\n private get isHidden() {\n return (\n !this.valuesToRender.length \|\|\n this.searchStatusState.hasError \|\|\n !this.facet.state.enabled\n );\n }\n\n private initializeFacet() {\n const options: NumericFacetOptions = {\n facetId: this.facetId,\n field: this.field,\n numberOfValues: this.numberOfIntervals,\n currentValues: this.generateCurrentValues(),\n sortCriteria: 'descending',\n generateAutomaticRanges: false,\n filterFacetCount: this.filterFacetCount,\n injectionDepth: this.injectionDepth,\n tabs: {\n included: [...this.tabsIncluded],\n excluded: [...this.tabsExcluded],\n },\n };\n this.facet = buildNumericFacet(this.bindings.engine, {options});\n this.facetId = this.facet.state.facetId;\n const facetInfo: FacetInfo = {\n label: () => this.bindings.i18n.t(this.label),\n facetId: this.facetId!,\n element: this.host,\n isHidden: () => this.isHidden,\n };\n this.bindings.store.registerFacet('numericFacets', {\n ...facetInfo,\n format: (value) => this.formatFacetValue(value),\n content: (value) => this.ratingContent(value),\n });\n initializePopover(this.host, {\n ...facetInfo,\n hasValues: () => !!this.valuesToRender.length,\n numberOfActiveValues: () => this.numberOfSelectedValues,\n });\n }\n\n private get scaleFactor() {\n return this.maxValueInIndex / this.numberOfIntervals;\n }\n\n private get numberOfSelectedValues() {\n return this.facetState.values.filter(({state}) => state === 'selected')\n .length;\n }\n\n private initializeDependenciesManager() {\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 private generateCurrentValues() {\n const currentValues: NumericRangeRequest[] = [];\n for (let i = this.minValueInIndex; i <= this.numberOfIntervals; i++) {\n currentValues.push(\n buildNumericRange({\n start: Math.round(i this.scaleFactor * 100) / 100,\n end: Math.round(this.maxValueInIndex * 100) / 100,\n endInclusive: true,\n })\n );\n }\n return currentValues;\n }\n\n private formatFacetValue(facetValue: NumericFacetValue) {\n if (facetValue.start === this.maxValueInIndex) {\n return this.bindings.i18n.t('stars-only', {\n count: facetValue.start,\n });\n }\n return this.bindings.i18n.t('stars-range', {\n value: facetValue.start,\n count: this.maxValueInIndex,\n });\n }\n\n private ratingContent(facetValue: NumericFacetValue) {\n return (\n <div class=\"flex items-center\">\n <Rating\n i18n={this.bindings.i18n}\n numberOfTotalIcons={this.maxValueInIndex}\n numberOfActiveIcons={facetValue.start}\n icon={this.icon}\n ></Rating>\n {this.renderLabelText(facetValue)}\n </div>\n );\n }\n\n private renderHeader() {\n return (\n <FacetHeader\n i18n={this.bindings.i18n}\n label={this.label}\n onClearFilters={() => {\n this.focusTarget.focusAfterSearch();\n this.facet.deselectAll();\n }}\n numberOfActiveValues={this.numberOfSelectedValues}\n isCollapsed={this.isCollapsed}\n headingLevel={this.headingLevel}\n onToggleCollapse={() => (this.isCollapsed = !this.isCollapsed)}\n headerRef={(el) => this.focusTarget.setTarget(el)}\n ></FacetHeader>\n );\n }\n\n private renderLabelText(facetValue: NumericFacetValue) {\n return (\n <span\n part=\"value-label\"\n class={`group-focus:text-primary group-hover:text-primary ml-1 flex items-center truncate ${\n facetValue.state === 'selected' ? 'font-bold' : ''\n }`}\n >\n {facetValue.start === this.maxValueInIndex ? (\n <span>{this.bindings.i18n.t('only')}</span>\n ) : (\n this.bindings.i18n.t('and-up')\n )}\n </span>\n );\n }\n\n private renderValue(facetValue: NumericFacetValue, onClick: () => void) {\n const displayValue = this.formatFacetValue(facetValue);\n const isSelected = facetValue.state === 'selected';\n return (\n <FacetValueLink\n displayValue={displayValue}\n numberOfResults={facetValue.numberOfResults}\n isSelected={isSelected}\n i18n={this.bindings.i18n}\n onClick={onClick}\n >\n {this.ratingContent(facetValue)}\n </FacetValueLink>\n );\n }\n\n private renderValuesContainer(children: VNode[]) {\n return (\n <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n <ul class=\"mt-3\" part=\"values\">\n {children}\n </ul>\n </FacetValuesGroup>\n );\n }\n\n private renderValues() {\n return this.renderValuesContainer(\n this.valuesToRender.map((value) =>\n this.renderValue(value, () => this.facet.toggleSingleSelect(value))\n )\n );\n }\n\n private get valuesToRender() {\n return this.facet.state.values.filter(\n (value) => value.numberOfResults \|\| value.state !== 'idle'\n );\n }\n\n public render() {\n if (this.searchStatusState.hasError \|\| !this.facet.state.enabled) {\n return <Hidden></Hidden>;\n }\n\n if (!this.searchStatusState.firstSearchExecuted) {\n return (\n <FacetPlaceholder\n numberOfValues={this.numberOfIntervals}\n isCollapsed={this.isCollapsed}\n ></FacetPlaceholder>\n );\n }\n\n if (!this.valuesToRender.length) {\n return <Hidden></Hidden>;\n }\n\n return (\n <FacetContainer>\n {this.renderHeader()}\n {!this.isCollapsed && this.renderValues()}\n </FacetContainer>\n );\n }\n}\n"],"version":3}

package/dist/esm/atomic-recs-interface.entry.js CHANGED Viewed

@@ -2163,7 +2163,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.37.1",
+        version: "3.37.2",
         headlessVersion,
     };
 }

package/dist/esm/atomic-recs-list.entry.js CHANGED Viewed

@@ -7,10 +7,9 @@ import { r as randomID } from './utils-46078fcb.js';
 import { R as ResultTemplateProvider, a as ResultsPlaceholdersGuard } from './result-template-provider-ce19144a.js';
 import { c as createAppLoadedListener } from './store-fdc0c15c.js';
 import { I as ItemDisplayGuard, D as DisplayWrapper } from './stencil-display-wrapper-ad2cc011.js';
-import { D as DisplayGrid } from './stencil-display-grid-02c4f5d0.js';
+import { D as DisplayGrid, C as Carousel } from './stencil-carousel-a9540851.js';
 import { I as ItemListCommon } from './stencil-item-list-common-c37dac1f.js';
 import { g as getItemListDisplayClasses } from './display-options-b75500ea.js';
-import { C as Carousel } from './stencil-carousel-be6f0bc1.js';
 import { H as Heading } from './stencil-heading-6a4bdf4c.js';
 import './dom-utils-f6086cd3.js';
 import './event-utils-8de63ec3.js';
@@ -18,10 +17,10 @@ import './init-queue-a1970cb1.js';
 import './purify-495a4010.js';
 import './_commonjsHelpers-1789f0cf.js';
 import '@coveo/headless';
-import './replace-breakpoint-utils-13ff9ca5.js';
-import './item-layout-sections-b59d1d64.js';
 import './arrow-right-cb365b01.js';
 import './stencil-button-d6e06ca8.js';
+import './replace-breakpoint-utils-13ff9ca5.js';
+import './item-layout-sections-b59d1d64.js';
 const atomicRecsListCss = "/*! tailwindcss v4.1.13 | 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-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .atomic-grid-clickable-elements [part~='outline'][part~='result-list-grid-clickable-container'] {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1rem;\n    border-radius: 1rem;\n    transition: all 0.12s ease-out;\n  }\n  .atomic-grid-clickable-elements [part~='outline'][part~='result-list-grid-clickable-container']:hover {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    box-shadow: 0px 10px 25px var(--atomic-neutral);\n    cursor: pointer;\n  }\n  .atomic-grid-clickable-elements [part='result-list-grid-clickable']:focus-visible {\n    border-radius: 2px;\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n    border-color: var(--atomic-primary);\n    color: var(--atomic-primary);\n    cursor: pointer;\n    display: inline-block;\n    text-decoration: underline;\n    text-align: center;\n    position: absolute;\n  }\n  .atomic-grid-clickable-elements [part='result-list-grid-clickable']:not(:focus) {\n    clip: rect(1px, 1px, 1px, 1px);\n    overflow: hidden;\n    position: absolute;\n    padding: 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  @media not all and (width >= 1024px) {\n    @media not all and (min-width: 768px) {\n      .atomic-grid-display-mobile .list-root.display-grid.image-large {\n        grid-template-columns: minmax(auto, 35rem);\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large.density-comfortable [part~='outline']::before {\n        margin: 2rem 0;\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large.density-normal [part~='outline']::before {\n        margin: 1.5rem 0;\n      }\n      @media not all and (width >= 1024px) {\n        .atomic-grid-display-mobile .list-root.display-grid.image-large.density-normal [part~='outline']::before {\n          margin: 1.75rem 0;\n        }\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large.density-compact [part~='outline']::before {\n        margin: 1rem 0;\n      }\n      @media not all and (width >= 1024px) {\n        .atomic-grid-display-mobile .list-root.display-grid.image-large.density-compact [part~='outline']::before {\n          margin: 1.5rem 0;\n        }\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large [part~='outline']::before {\n        display: block;\n        content: ' ';\n        height: 1px;\n        background-color: var(--atomic-neutral);\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large [part~='outline']:first-of-type::before {\n        display: none;\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large atomic-result-placeholder::before {\n        background-color: transparent;\n      }\n    }\n    @media (min-width: 768px) {\n      .atomic-grid-display-mobile .list-root.display-grid.image-large {\n        grid-column-gap: 0.5rem;\n        grid-row-gap: 0.5rem;\n        grid-template-columns: 1fr 1fr;\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large [part~='outline'] {\n        border-style: var(--tw-border-style);\n        border-width: 1px;\n        border-color: var(--atomic-neutral);\n        padding: 1rem;\n        border-radius: 1rem;\n      }\n      .atomic-grid-display-mobile .list-root.display-grid.image-large atomic-result-placeholder {\n        border-color: transparent;\n      }\n    }\n    .atomic-grid-display-mobile .list-root.display-grid.image-small [part~='outline'], .atomic-grid-display-mobile .list-root.display-grid.image-icon [part~='outline'], .atomic-grid-display-mobile .list-root.display-grid.image-none [part~='outline'] {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      padding: 1rem;\n      border-radius: 1rem;\n    }\n    .atomic-grid-display-mobile .list-root.display-grid.image-small atomic-result-placeholder, .atomic-grid-display-mobile .list-root.display-grid.image-icon atomic-result-placeholder, .atomic-grid-display-mobile .list-root.display-grid.image-none atomic-result-placeholder {\n      border-color: transparent;\n    }\n    .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n      grid-column-gap: 0.5rem;\n      grid-row-gap: 0.5rem;\n    }\n    @media not all and (min-width: 640px) {\n      .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n        grid-template-columns: minmax(0, 1fr);\n      }\n    }\n    @media (min-width: 768px) {\n      .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n      }\n    }\n    @media (width >= 1024px) {\n      .atomic-grid-display-mobile .list-root.display-grid.image-small, .atomic-grid-display-mobile .list-root.display-grid.image-icon, .atomic-grid-display-mobile .list-root.display-grid.image-none {\n        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n      }\n    }\n  }\n  .atomic-list-with-dividers.density-comfortable [part~='outline']::before {\n    margin: 2rem 0;\n  }\n  .atomic-list-with-dividers.density-normal [part~='outline']::before {\n    margin: 1.5rem 0;\n  }\n  @media not all and (width >= 1024px) {\n    .atomic-list-with-dividers.density-normal [part~='outline']::before {\n      margin: 1.75rem 0;\n    }\n  }\n  .atomic-list-with-dividers.density-compact [part~='outline']::before {\n    margin: 1rem 0;\n  }\n  @media not all and (width >= 1024px) {\n    .atomic-list-with-dividers.density-compact [part~='outline']::before {\n      margin: 1.5rem 0;\n    }\n  }\n  .atomic-list-with-dividers [part~='outline']::before {\n    display: block;\n    content: ' ';\n    height: 1px;\n    background-color: var(--atomic-neutral);\n  }\n  .atomic-list-with-dividers [part~='outline']:first-of-type::before {\n    display: none;\n  }\n  .atomic-list-with-dividers atomic-result-placeholder::before {\n    background-color: transparent;\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  .atomic-grid-display-common .list-wrapper {\n    word-break: break-word;\n  }\n  .atomic-grid-display-common .list-root.display-grid {\n    display: grid;\n    justify-content: space-evenly;\n  }\n  .atomic-grid-display-common .list-root.display-grid .result-component {\n    height: 100%;\n    box-sizing: border-box;\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  .table-column {\n    display: table-column;\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-\\[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-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  .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  .atomic-result-table {\n    min-width: 100%;\n    border-spacing: 0;\n    border-collapse: separate;\n  }\n  .atomic-result-table th, .atomic-result-table td {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    font-family: var(--atomic-font-family);\n    font-size: var(--atomic-text-sm);\n    line-height: var(--tw-leading, calc(1.25 / 0.875));\n    line-height: 1rem;\n    white-space: nowrap;\n  }\n  .atomic-result-table th:not(:first-child), .atomic-result-table td:not(:first-child) {\n    border-left: none;\n  }\n  .atomic-result-table th:first-child, .atomic-result-table td:first-child {\n    min-width: 19rem;\n  }\n  .atomic-result-table th {\n    background-color: var(--atomic-neutral-light);\n    border-bottom: none;\n    font-weight: bold;\n    color: black;\n    padding: 1rem var(--padding);\n    text-align: left;\n  }\n  .atomic-result-table th:first-child {\n    border-top-left-radius: var(--atomic-border-radius-xl);\n  }\n  .atomic-result-table th:last-child {\n    border-top-right-radius: var(--atomic-border-radius-xl);\n  }\n  .atomic-result-table td {\n    color: var(--atomic-neutral-dark);\n    border-top: none;\n    vertical-align: top;\n    padding: var(--padding);\n  }\n  .atomic-result-table.density-comfortable {\n    --padding: 2rem;\n  }\n  .atomic-result-table.density-normal {\n    --padding: 1.5rem;\n  }\n  .atomic-result-table.density-compact {\n    --padding: 1rem;\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  @media (width >= 1024px) {\n    .atomic-grid-display-desktop .list-root.display-grid {\n      grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));\n    }\n    .atomic-grid-display-desktop .list-root.display-grid.density-comfortable {\n      grid-row-gap: 4rem;\n      grid-column-gap: 1.5rem;\n    }\n    .atomic-grid-display-desktop .list-root.display-grid.density-normal, .atomic-grid-display-desktop .list-root.display-grid.density-compact {\n      grid-row-gap: 3rem;\n      grid-column-gap: 1.5rem;\n    }\n    .atomic-grid-display-desktop .list-root.display-grid.image-large {\n      grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));\n    }\n    @media not all and (width >= 1024px) {\n      .atomic-grid-display-desktop .list-root.display-grid.image-small {\n        grid-template-columns: repeat(3, 1fr);\n      }\n    }\n    @media (width >= 1024px) {\n      .atomic-grid-display-desktop .list-root.display-grid.image-small {\n        grid-template-columns: repeat(3, 1fr);\n      }\n    }\n    @media (min-width: 1280px) {\n      .atomic-grid-display-desktop .list-root.display-grid.image-small {\n        grid-template-columns: repeat(4, 1fr);\n      }\n    }\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  .atomic-grid-with-cards [part~='outline'] {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    padding: 1rem;\n    border-radius: 1rem;\n  }\n  .atomic-grid-with-cards atomic-result-placeholder {\n    border-color: transparent;\n  }\n  .atomic-grid-with-cards {\n    grid-column-gap: 0.5rem;\n    grid-row-gap: 0.5rem;\n  }\n  .atomic-list-with-cards [part~='outline'] {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    padding: 1rem;\n    border-radius: 1rem;\n  }\n  .atomic-list-with-cards atomic-result-placeholder {\n    border-color: transparent;\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  .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-red-600 {\n    color: oklch(0.577 0.245 27.325);\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-60 {\n    opacity: 60%;\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, 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    --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    --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.list-wrapper.placeholder .result-component {\n  display: none;\n}\n.list-wrapper.placeholder table.list-root {\n  display: none;\n}\n.list-wrapper:not(.placeholder) atomic-result-placeholder {\n  display: none;\n}\n.list-wrapper:not(.placeholder) atomic-result-table-placeholder {\n  display: none;\n}\n.list-root.loading {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes pulse {\n  0%, 100% {\n    opacity: 0.6;\n  }\n  50% {\n    opacity: 0.2;\n  }\n}\n:host [part~='outline'][part~='result-list-grid-clickable-container'] {\n  position: relative;\n  border: 1px solid transparent;\n  padding: 1rem;\n  border-radius: 1rem;\n  transition: all 0.12s ease-out;\n}\n:host [part~='outline'][part~='result-list-grid-clickable-container']:hover {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n  border-color: var(--atomic-neutral);\n  box-shadow: 0px 10px 25px var(--atomic-neutral);\n  cursor: pointer;\n}\n:host [part='result-list-grid-clickable']:focus-visible {\n  border-radius: 2px;\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n  border-color: var(--atomic-primary);\n  color: var(--atomic-primary);\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n  text-align: center;\n  position: absolute;\n}\n:host [part='result-list-grid-clickable']:not(:focus) {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute;\n  padding: 0;\n}\n:host .list-wrapper {\n  word-break: break-word;\n}\n:host .list-root.display-grid {\n  display: grid;\n  justify-content: space-evenly;\n}\n:host .list-root.display-grid .result-component {\n  height: 100%;\n  box-sizing: border-box;\n}\n:host {\n  display: block;\n}\n:host .list-root [part~='outline'] {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n  border-color: var(--atomic-neutral);\n  padding: 1rem;\n  border-radius: 1rem;\n}\n:host .list-root atomic-result-placeholder {\n  border-color: transparent;\n}\n:host .list-root {\n  grid-column-gap: 0.5rem;\n  grid-row-gap: 0.5rem;\n  grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));\n}\n:host [part='label'] {\n  font-family: var(--atomic-font-family);\n  font-size: var(--atomic-text-2xl);\n  line-height: var(--tw-leading, calc(2 / 1.5));\n  --tw-font-weight: var(--atomic-font-bold);\n  font-weight: var(--atomic-font-bold);\n}\n:host atomic-result:not(.hydrated) {\n  visibility: hidden;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\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-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@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-border-style: solid;\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-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 AtomicRecsListStyle0 = atomicRecsListCss;

package/dist/esm/atomic-recs-list.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-recs-list.entry.js","mappings":"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","names":["buildRecsInteractiveResult"],"sources":["src/components/recommendations/atomic-recs-list/atomic-recs-list.pcss?tag=atomic-recs-list&encapsulation=shadow","src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n@import '../../common/item-list/styles/placeholders.pcss';\n\n:host {\n @apply atomic-grid-clickable-elements;\n @apply atomic-grid-display-common;\n display: block;\n\n /*\n @prop --atomic-recs-number-of-columns: Number of columns for the recommendation list.\n /\n .list-root {\n @apply atomic-grid-with-cards;\n grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));\n }\n\n [part='label'] {\n @apply font-sans text-2xl font-bold;\n }\n\n atomic-result:not(.hydrated) {\n visibility: hidden;\n }\n}\n","import {NumberValue} from '@coveo/bueno';\nimport {\n buildRecommendationList,\n RecommendationList,\n RecommendationListState,\n loadConfigurationActions,\n buildInteractiveResult as buildRecsInteractiveResult,\n Result as RecsResult,\n} from '@coveo/headless/recommendation';\nimport {\n Component,\n State,\n Element,\n Prop,\n Method,\n h,\n Fragment,\n Watch,\n} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {FocusTargetController} from '../../../utils/stencil-accessibility-utils';\nimport {randomID} from '../../../utils/utils';\nimport {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/stencil-placeholders';\nimport {createAppLoadedListener} from '../../common/interface/store';\nimport {ItemDisplayGuard} from '../../common/item-list/stencil-item-display-guard';\nimport {ResultTemplateProvider} from '../../common/item-list/result-template-provider';\nimport {DisplayGrid} from '../../common/item-list/stencil-display-grid';\nimport {DisplayWrapper} from '../../common/item-list/stencil-display-wrapper';\nimport {\n ItemListCommon,\n ItemRenderingFunction,\n} from '../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayBasicLayout,\n getItemListDisplayClasses,\n} from '../../common/layout/display-options';\nimport {Carousel} from '../../common/stencil-carousel';\nimport {Heading} from '../../common/stencil-heading';\nimport {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';\n\n/\n The `atomic-recs-list` component displays recommendations by applying one or more result templates.\n \n @part result-list - The element containing the list of results.\n * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it.\n * @part result-list-grid-clickable - The clickable link encompassing the result.\n * @part label - The label of the result list.\n * @part previous-button - The previous button.\n * @part next-button - The next button.\n * @part indicators - The list of indicators.\n * @part indicator - A single indicator.\n * @part active-indicator - The active indicator.\n * @slot default - The default slot where to insert the template element.\n /\n@Component({\n tag: 'atomic-recs-list',\n styleUrl: 'atomic-recs-list.pcss',\n shadow: true,\n})\nexport class AtomicRecsList implements InitializableComponent<RecsBindings> {\n @InitializeBindings() public bindings!: RecsBindings;\n public recommendationList!: RecommendationList;\n private loadingFlag = randomID('firstRecommendationLoaded-');\n private itemRenderingFunction: ItemRenderingFunction;\n private itemTemplateProvider!: ResultTemplateProvider;\n private nextNewResultTarget?: FocusTargetController;\n private itemListCommon!: ItemListCommon;\n\n @Element() public host!: HTMLDivElement;\n\n @State() public error!: Error;\n @State() private isAppLoaded = false;\n\n @State() private resultTemplateRegistered = false;\n @State() private templateHasError = false;\n @State() private currentPage = 0;\n @BindStateToController('recommendationList')\n @State()\n public recommendationListState!: RecommendationListState;\n\n /\n The Recommendation identifier used by the Coveo platform to retrieve recommended documents.\n * Make sure to set a different value for each atomic-recs-list in your page.\n /\n @Prop({reflect: true}) public recommendation = 'Recommendation';\n\n /\n The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.\n * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public display: ItemDisplayBasicLayout = 'list';\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})\n public imageSize: ItemDisplayImageSize = 'small';\n\n /\n The total number of recommendations to display.\n * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public numberOfRecommendations = 10;\n\n /\n The number of recommendations to display, per page.\n * Setting a value greater than and lower than the numberOfRecommendations value activates the carousel.\n * This does not affect the display of the list itself, only the number of recommendation pages.\n /\n @Prop({reflect: true}) public numberOfRecommendationsPerPage?: number;\n\n /\n The non-localized label for the list of recommendations.\n /\n @Prop({reflect: true}) public label?: string;\n\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\n\n @Watch('numberOfRecommendationsPerPage')\n public async watchNumberOfRecommendationsPerPage() {\n this.currentPage = 0;\n }\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 /\n Moves to the previous page, when the carousel is activated.\n /\n @Method() public async previousPage() {\n this.currentPage =\n this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;\n }\n\n /\n Moves to the next page, when the carousel is activated.\n /\n @Method() public async nextPage() {\n this.currentPage = (this.currentPage + 1) % this.numberOfPages;\n }\n\n public initialize() {\n this.validateNumberOfRecommendationsPerPage();\n this.validateRecommendationIdentifier();\n this.updateOriginLevel2();\n this.recommendationList = buildRecommendationList(this.bindings.engine, {\n options: {\n id: this.recommendation,\n numberOfRecommendations: this.numberOfRecommendations,\n },\n });\n\n this.itemTemplateProvider = new ResultTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-recs-result-template')\n ),\n getResultTemplateRegistered: () => this.resultTemplateRegistered,\n getTemplateHasError: () => this.templateHasError,\n setResultTemplateRegistered: (value: boolean) => {\n this.resultTemplateRegistered = value;\n },\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n this.itemListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () =>\n this.recommendationListState.recommendations.length,\n getIsLoading: () => this.recommendationListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n private get recommendationListStateWithAugment() {\n return {\n ...this.recommendationListState,\n firstRequestExecuted:\n this.recommendationListState.searchResponseId !== '',\n hasError: this.recommendationListState.error !== null,\n hasItems: this.recommendationListState.recommendations.length !== 0,\n results: this.subsetRecommendations,\n };\n }\n\n private validateNumberOfRecommendationsPerPage() {\n const msg = new NumberValue({\n min: 1,\n max: this.numberOfRecommendations - 1,\n }).validate(this.numberOfRecommendationsPerPage!);\n\n if (msg) {\n this.error = new Error(\n `The \"numberOfRecommendationsPerPage\" is invalid: ${msg}`\n );\n }\n }\n\n private validateRecommendationIdentifier() {\n const recListWithRecommendation = document.querySelectorAll(\n `atomic-recs-list[recommendation=\"${this.recommendation}\"]`\n );\n\n if (recListWithRecommendation.length > 1) {\n this.bindings.engine.logger.warn(\n `There are multiple atomic-recs-list in this page with the same recommendation property \"${this.recommendation}\". Make sure to set a different recommendation property for each.`\n );\n }\n }\n\n private updateOriginLevel2() {\n if (this.label) {\n const action = loadConfigurationActions(\n this.bindings.engine\n ).setOriginLevel2({\n originLevel2: this.label,\n });\n\n this.bindings.engine.dispatch(action);\n }\n }\n\n private renderHeading() {\n if (!this.label) {\n return;\n }\n\n if (this.recommendationListStateWithAugment.hasError) {\n return;\n }\n\n if (\n this.recommendationListStateWithAugment.firstRequestExecuted &&\n !this.recommendationListStateWithAugment.hasItems\n ) {\n return;\n }\n\n return (\n <Heading level={this.headingLevel} part=\"label\" class=\"m-0 mb-2\">\n {this.bindings.i18n.t(this.label)}\n </Heading>\n );\n }\n\n private get currentIndex() {\n return Math.abs(\n (this.currentPage this.numberOfRecommendationsPerPage!) %\n this.recommendationListState.recommendations.length\n );\n }\n\n private get subsetRecommendations() {\n if (!this.numberOfRecommendationsPerPage) {\n return this.recommendationListState.recommendations;\n }\n\n return this.recommendationListState.recommendations.slice(\n this.currentIndex,\n this.currentIndex + this.numberOfRecommendationsPerPage\n );\n }\n\n private get numberOfPages() {\n return Math.ceil(\n this.recommendationListState.recommendations.length /\n this.numberOfRecommendationsPerPage!\n );\n }\n\n private get hasPagination() {\n return this.numberOfPages > 1;\n }\n\n private get shouldRenderPagination() {\n return (\n this.hasPagination && this.recommendationListStateWithAugment.hasItems\n );\n }\n\n private getPropsForAtomicRecsResult(recommendation: RecsResult) {\n const linkContent =\n this.itemTemplateProvider.getLinkTemplateContent(recommendation);\n\n return {\n interactiveResult: buildRecsInteractiveResult(this.bindings.engine, {\n options: {result: recommendation},\n }),\n result: recommendation,\n renderingFunction: this.itemRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.itemListCommon.getResultId(\n recommendation.uniqueId,\n this.recommendationListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(recommendation),\n linkContent,\n stopPropagation: !!linkContent,\n store: this.bindings.store,\n density: this.density,\n display: this.display,\n imageSize: this.imageSize,\n };\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n 'grid',\n this.density,\n this.imageSize,\n this.recommendationListState.isLoading,\n displayPlaceholders\n );\n }\n\n private renderAsGrid(recommendation: RecsResult, i: number) {\n const propsForAtomicRecsResult =\n this.getPropsForAtomicRecsResult(recommendation);\n return (\n <DisplayGrid\n selectorForItem=\"atomic-recs-result\"\n item={recommendation}\n {...propsForAtomicRecsResult.interactiveResult}\n setRef={(element) =>\n element && this.itemListCommon.setNewResultRef(element, i)\n }\n >\n <atomic-recs-result {...propsForAtomicRecsResult}></atomic-recs-result>\n </DisplayGrid>\n );\n }\n\n private renderListOfRecommendations() {\n this.itemListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n if (\n !this.resultTemplateRegistered \|\|\n this.itemTemplateProvider.hasError \|\|\n this.error\n ) {\n return;\n }\n\n return (\n <DisplayWrapper listClasses={listClasses} display=\"grid\">\n <ResultsPlaceholdersGuard\n density={this.density}\n display={this.display}\n imageSize={this.imageSize}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={\n this.numberOfRecommendationsPerPage ?? this.numberOfRecommendations\n }\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard {...this.recommendationListStateWithAugment}>\n {this.subsetRecommendations.map((recommendation, i) => {\n return this.renderAsGrid(recommendation, i);\n })}\n </ItemDisplayGuard>\n </DisplayWrapper>\n );\n }\n\n public render() {\n return (\n <Fragment>\n {this.renderHeading()}\n {this.shouldRenderPagination ? (\n <Carousel\n bindings={this.bindings}\n currentPage={this.currentPage}\n nextPage={() => this.nextPage()}\n previousPage={() => this.previousPage()}\n numberOfPages={this.numberOfPages}\n >\n {this.renderListOfRecommendations()}\n </Carousel>\n ) : (\n this.renderListOfRecommendations()\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-recs-list.entry.js","mappings":"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","names":["buildRecsInteractiveResult"],"sources":["src/components/recommendations/atomic-recs-list/atomic-recs-list.pcss?tag=atomic-recs-list&encapsulation=shadow","src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n@import '../../common/item-list/styles/placeholders.pcss';\n\n:host {\n @apply atomic-grid-clickable-elements;\n @apply atomic-grid-display-common;\n display: block;\n\n /*\n @prop --atomic-recs-number-of-columns: Number of columns for the recommendation list.\n /\n .list-root {\n @apply atomic-grid-with-cards;\n grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));\n }\n\n [part='label'] {\n @apply font-sans text-2xl font-bold;\n }\n\n atomic-result:not(.hydrated) {\n visibility: hidden;\n }\n}\n","import {NumberValue} from '@coveo/bueno';\nimport {\n buildRecommendationList,\n RecommendationList,\n RecommendationListState,\n loadConfigurationActions,\n buildInteractiveResult as buildRecsInteractiveResult,\n Result as RecsResult,\n} from '@coveo/headless/recommendation';\nimport {\n Component,\n State,\n Element,\n Prop,\n Method,\n h,\n Fragment,\n Watch,\n} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {FocusTargetController} from '../../../utils/stencil-accessibility-utils';\nimport {randomID} from '../../../utils/utils';\nimport {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/stencil-placeholders';\nimport {createAppLoadedListener} from '../../common/interface/store';\nimport {ItemDisplayGuard} from '../../common/item-list/stencil-item-display-guard';\nimport {ResultTemplateProvider} from '../../common/item-list/result-template-provider';\nimport {DisplayGrid} from '../../common/item-list/stencil-display-grid';\nimport {DisplayWrapper} from '../../common/item-list/stencil-display-wrapper';\nimport {\n ItemListCommon,\n ItemRenderingFunction,\n} from '../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayBasicLayout,\n getItemListDisplayClasses,\n} from '../../common/layout/display-options';\nimport {Carousel} from '../../common/stencil-carousel';\nimport {Heading} from '../../common/stencil-heading';\nimport {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';\n\n/\n The `atomic-recs-list` component displays recommendations by applying one or more result templates.\n \n @part result-list - The element containing the list of results.\n * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it.\n * @part result-list-grid-clickable - The clickable link encompassing the result.\n * @part label - The label of the result list.\n * @part previous-button - The previous button.\n * @part next-button - The next button.\n * @part indicators - The list of indicators.\n * @part indicator - A single indicator.\n * @part active-indicator - The active indicator.\n * @slot default - The default slot where to insert the template element.\n /\n@Component({\n tag: 'atomic-recs-list',\n styleUrl: 'atomic-recs-list.pcss',\n shadow: true,\n})\nexport class AtomicRecsList implements InitializableComponent<RecsBindings> {\n @InitializeBindings() public bindings!: RecsBindings;\n public recommendationList!: RecommendationList;\n private loadingFlag = randomID('firstRecommendationLoaded-');\n private itemRenderingFunction: ItemRenderingFunction;\n private itemTemplateProvider!: ResultTemplateProvider;\n private nextNewResultTarget?: FocusTargetController;\n private itemListCommon!: ItemListCommon;\n\n @Element() public host!: HTMLDivElement;\n\n @State() public error!: Error;\n @State() private isAppLoaded = false;\n\n @State() private resultTemplateRegistered = false;\n @State() private templateHasError = false;\n @State() private currentPage = 0;\n @BindStateToController('recommendationList')\n @State()\n public recommendationListState!: RecommendationListState;\n\n /\n The Recommendation identifier used by the Coveo platform to retrieve recommended documents.\n * Make sure to set a different value for each atomic-recs-list in your page.\n /\n @Prop({reflect: true}) public recommendation = 'Recommendation';\n\n /\n The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.\n * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public display: ItemDisplayBasicLayout = 'list';\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})\n public imageSize: ItemDisplayImageSize = 'small';\n\n /\n The total number of recommendations to display.\n * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.\n /\n @Prop({reflect: true}) public numberOfRecommendations = 10;\n\n /\n The number of recommendations to display, per page.\n * Setting a value greater than and lower than the numberOfRecommendations value activates the carousel.\n * This does not affect the display of the list itself, only the number of recommendation pages.\n /\n @Prop({reflect: true}) public numberOfRecommendationsPerPage?: number;\n\n /\n The non-localized label for the list of recommendations.\n /\n @Prop({reflect: true}) public label?: string;\n\n /\n The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.\n /\n @Prop({reflect: true}) public headingLevel = 0;\n\n @Watch('numberOfRecommendationsPerPage')\n public async watchNumberOfRecommendationsPerPage() {\n this.currentPage = 0;\n }\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 /\n Moves to the previous page, when the carousel is activated.\n /\n @Method() public async previousPage() {\n this.currentPage =\n this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;\n }\n\n /\n Moves to the next page, when the carousel is activated.\n /\n @Method() public async nextPage() {\n this.currentPage = (this.currentPage + 1) % this.numberOfPages;\n }\n\n public initialize() {\n this.validateNumberOfRecommendationsPerPage();\n this.validateRecommendationIdentifier();\n this.updateOriginLevel2();\n this.recommendationList = buildRecommendationList(this.bindings.engine, {\n options: {\n id: this.recommendation,\n numberOfRecommendations: this.numberOfRecommendations,\n },\n });\n\n this.itemTemplateProvider = new ResultTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-recs-result-template')\n ),\n getResultTemplateRegistered: () => this.resultTemplateRegistered,\n getTemplateHasError: () => this.templateHasError,\n setResultTemplateRegistered: (value: boolean) => {\n this.resultTemplateRegistered = value;\n },\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n this.itemListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () =>\n this.recommendationListState.recommendations.length,\n getIsLoading: () => this.recommendationListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n private get recommendationListStateWithAugment() {\n return {\n ...this.recommendationListState,\n firstRequestExecuted:\n this.recommendationListState.searchResponseId !== '',\n hasError: this.recommendationListState.error !== null,\n hasItems: this.recommendationListState.recommendations.length !== 0,\n results: this.subsetRecommendations,\n };\n }\n\n private validateNumberOfRecommendationsPerPage() {\n const msg = new NumberValue({\n min: 1,\n max: this.numberOfRecommendations - 1,\n }).validate(this.numberOfRecommendationsPerPage!);\n\n if (msg) {\n this.error = new Error(\n `The \"numberOfRecommendationsPerPage\" is invalid: ${msg}`\n );\n }\n }\n\n private validateRecommendationIdentifier() {\n const recListWithRecommendation = document.querySelectorAll(\n `atomic-recs-list[recommendation=\"${this.recommendation}\"]`\n );\n\n if (recListWithRecommendation.length > 1) {\n this.bindings.engine.logger.warn(\n `There are multiple atomic-recs-list in this page with the same recommendation property \"${this.recommendation}\". Make sure to set a different recommendation property for each.`\n );\n }\n }\n\n private updateOriginLevel2() {\n if (this.label) {\n const action = loadConfigurationActions(\n this.bindings.engine\n ).setOriginLevel2({\n originLevel2: this.label,\n });\n\n this.bindings.engine.dispatch(action);\n }\n }\n\n private renderHeading() {\n if (!this.label) {\n return;\n }\n\n if (this.recommendationListStateWithAugment.hasError) {\n return;\n }\n\n if (\n this.recommendationListStateWithAugment.firstRequestExecuted &&\n !this.recommendationListStateWithAugment.hasItems\n ) {\n return;\n }\n\n return (\n <Heading level={this.headingLevel} part=\"label\" class=\"m-0 mb-2\">\n {this.bindings.i18n.t(this.label)}\n </Heading>\n );\n }\n\n private get currentIndex() {\n return Math.abs(\n (this.currentPage this.numberOfRecommendationsPerPage!) %\n this.recommendationListState.recommendations.length\n );\n }\n\n private get subsetRecommendations() {\n if (!this.numberOfRecommendationsPerPage) {\n return this.recommendationListState.recommendations;\n }\n\n return this.recommendationListState.recommendations.slice(\n this.currentIndex,\n this.currentIndex + this.numberOfRecommendationsPerPage\n );\n }\n\n private get numberOfPages() {\n return Math.ceil(\n this.recommendationListState.recommendations.length /\n this.numberOfRecommendationsPerPage!\n );\n }\n\n private get hasPagination() {\n return this.numberOfPages > 1;\n }\n\n private get shouldRenderPagination() {\n return (\n this.hasPagination && this.recommendationListStateWithAugment.hasItems\n );\n }\n\n private getPropsForAtomicRecsResult(recommendation: RecsResult) {\n const linkContent =\n this.itemTemplateProvider.getLinkTemplateContent(recommendation);\n\n return {\n interactiveResult: buildRecsInteractiveResult(this.bindings.engine, {\n options: {result: recommendation},\n }),\n result: recommendation,\n renderingFunction: this.itemRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.itemListCommon.getResultId(\n recommendation.uniqueId,\n this.recommendationListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(recommendation),\n linkContent,\n stopPropagation: !!linkContent,\n store: this.bindings.store,\n density: this.density,\n display: this.display,\n imageSize: this.imageSize,\n };\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n 'grid',\n this.density,\n this.imageSize,\n this.recommendationListState.isLoading,\n displayPlaceholders\n );\n }\n\n private renderAsGrid(recommendation: RecsResult, i: number) {\n const propsForAtomicRecsResult =\n this.getPropsForAtomicRecsResult(recommendation);\n return (\n <DisplayGrid\n selectorForItem=\"atomic-recs-result\"\n item={recommendation}\n {...propsForAtomicRecsResult.interactiveResult}\n setRef={(element) =>\n element && this.itemListCommon.setNewResultRef(element, i)\n }\n >\n <atomic-recs-result {...propsForAtomicRecsResult}></atomic-recs-result>\n </DisplayGrid>\n );\n }\n\n private renderListOfRecommendations() {\n this.itemListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n if (\n !this.resultTemplateRegistered \|\|\n this.itemTemplateProvider.hasError \|\|\n this.error\n ) {\n return;\n }\n\n return (\n <DisplayWrapper listClasses={listClasses} display=\"grid\">\n <ResultsPlaceholdersGuard\n density={this.density}\n display={this.display}\n imageSize={this.imageSize}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={\n this.numberOfRecommendationsPerPage ?? this.numberOfRecommendations\n }\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard {...this.recommendationListStateWithAugment}>\n {this.subsetRecommendations.map((recommendation, i) => {\n return this.renderAsGrid(recommendation, i);\n })}\n </ItemDisplayGuard>\n </DisplayWrapper>\n );\n }\n\n public render() {\n return (\n <Fragment>\n {this.renderHeading()}\n {this.shouldRenderPagination ? (\n <Carousel\n bindings={this.bindings}\n currentPage={this.currentPage}\n nextPage={() => this.nextPage()}\n previousPage={() => this.previousPage()}\n numberOfPages={this.numberOfPages}\n >\n {this.renderListOfRecommendations()}\n </Carousel>\n ) : (\n this.renderListOfRecommendations()\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}

package/dist/esm/atomic-recs-result-template.entry.js CHANGED Viewed

@@ -1,12 +1,11 @@
 import { r as registerInstance, g as getElement } from './index-a59c51bd.js';
 import { M as MapProp } from './props-utils-abc3c855.js';
-import { R as ResultTemplateCommon, a as makeDefinedConditions, m as makeMatchConditions } from './stencil-result-template-common-cddca36d.js';
+import { R as ResultTemplateCommon, a as makeDefinedConditions, m as makeMatchConditions } from './stencil-result-template-common-8be1ff35.js';
 import '@coveo/bueno';
 import './utils-46078fcb.js';
 import './purify-495a4010.js';
 import './_commonjsHelpers-1789f0cf.js';
 import '@coveo/headless';
-import './table-element-utils-1dbc5ef6.js';
 import './item-layout-sections-b59d1d64.js';
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {