npm - @coveo/atomic - Versions diffs - 3.35.0-pre.e38c46e295 → 3.35.0-pre.e757e0d8ec - Mend

@coveo/atomic 3.35.0-pre.e38c46e295 → 3.35.0-pre.e757e0d8ec

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

package/dist/atomic/components/atomic-result-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-list.js","mappings":"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","names":["AtomicResultList"],"sources":["src/components/common/item-list/stencil-display-table.tsx","src/components/common/tabs/tab-guard.tsx","src/components/search/result-lists/atomic-result-list/atomic-result-list.pcss?tag=atomic-result-list&encapsulation=shadow","src/components/search/result-lists/atomic-result-list/atomic-result-list.tsx"],"sourcesContent":["// The Lit equivalent of this file is table-layout.ts\nimport {FunctionalComponent, VNode, h} from '@stencil/core';\nimport {tableElementTagName} from '../../search/atomic-table-result/table-element-utils.js';\nimport {AnyItem} from './unfolded-item.js';\nimport {ItemRenderingFunction} from './stencil-item-list-common.js';\n\ninterface TableColumnsProps {\n templateContentForFirstItem: DocumentFragment;\n firstItem: AnyItem;\n itemRenderingFunction?: ItemRenderingFunction;\n}\n\nexport interface DisplayTableProps extends TableColumnsProps {\n logger: Pick<Console, 'error'>;\n host: HTMLElement;\n listClasses: string;\n}\n\nexport interface TableDataProps extends TableColumnsProps {\n key: string;\n}\n\nexport interface DisplayTableRowProps {\n key: string;\n rowIndex: number;\n setRef: (element?: HTMLElement) => void;\n}\n\nconst getFieldTableColumns = (props: TableColumnsProps) => {\n if (props.itemRenderingFunction) {\n return getFieldTableColumnsFromRenderingFunction(props);\n }\n return getFieldTableColumnsFromHTMLTemplate(props);\n};\n\nconst getFieldTableColumnsFromRenderingFunction = (\n props: Pick<TableColumnsProps, 'itemRenderingFunction' \| 'firstItem'>\n): HTMLAtomicTableElementElement[] => {\n const contentOfRenderingFunction = document.createElement('div');\n\n const contentOfRenderingFunctionAsString = props.itemRenderingFunction!(\n props.firstItem,\n document.createElement('div')\n );\n contentOfRenderingFunction.innerHTML = contentOfRenderingFunctionAsString;\n\n return Array.from(\n contentOfRenderingFunction.querySelectorAll(tableElementTagName)\n );\n};\n\nconst getFieldTableColumnsFromHTMLTemplate = (\n props: Pick<DisplayTableProps, 'templateContentForFirstItem'>\n): HTMLAtomicTableElementElement[] =>\n Array.from(\n props.templateContentForFirstItem.querySelectorAll(tableElementTagName)\n );\n\nexport const DisplayTable: FunctionalComponent<DisplayTableProps> = (\n props,\n children\n) => {\n const fieldColumns = getFieldTableColumns(props);\n\n if (!fieldColumns.length) {\n props.logger.error(\n 'atomic-table-element elements missing in the template to display columns.',\n props.host\n );\n }\n\n return (\n <table class={`list-root ${props.listClasses}`} part=\"result-table\">\n <thead part=\"result-table-heading\">\n <tr part=\"result-table-heading-row\">\n {fieldColumns.map((column) => (\n <th part=\"result-table-heading-cell\">\n <atomic-text value={column.getAttribute('label')!}></atomic-text>\n </th>\n ))}\n </tr>\n </thead>\n <tbody part=\"result-table-body\">{...children}</tbody>\n </table>\n );\n};\n\nexport const DisplayTableRow: FunctionalComponent<DisplayTableRowProps> = (\n {key, rowIndex, setRef},\n children\n) => {\n return (\n <tr\n key={key}\n part={\n 'result-table-row ' +\n (rowIndex % 2 === 1 ? 'result-table-row-even' : 'result-table-row-odd')\n }\n ref={(element) => setRef(element)}\n >\n {...children}\n </tr>\n );\n};\n\nexport const DisplayTableData: FunctionalComponent<\n TableDataProps & {\n renderItem: (content: HTMLAtomicTableElementElement) => VNode;\n }\n> = (props) => {\n const fieldColumns = getFieldTableColumns(props);\n\n return fieldColumns.map((column) => {\n const key = column.getAttribute('label')! + props.key;\n return (\n <td key={key} part=\"result-table-cell\">\n {props.renderItem(column)}\n </td>\n );\n });\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {Hidden} from '../stencil-hidden';\n\ninterface TabGuardProps {\n tabsIncluded: string \| string[];\n tabsExcluded: string \| string[];\n activeTab: string;\n}\n\nexport const TabGuard: FunctionalComponent<TabGuardProps> = (\n {tabsIncluded, tabsExcluded, activeTab},\n children\n) => {\n if (\n !shouldDisplayOnCurrentTab([...tabsIncluded], [...tabsExcluded], activeTab)\n ) {\n return <Hidden></Hidden>;\n }\n return <Fragment>{...children}</Fragment>;\n};\n","@import '../../../../global/global.pcss';\n@import '../../../common/item-list/styles/placeholders.pcss';\n@import '../../../common/item-list/styles/table-display.pcss';\n@import '../../../common/item-list/styles/list-display.pcss';\n@import '../../../common/item-list/styles/grid-display.pcss';\n\natomic-result:not(.hydrated) {\n visibility: hidden;\n}\n","import {\n ResultList,\n ResultListState,\n buildResultList,\n ResultsPerPageState,\n ResultsPerPage,\n buildResultsPerPage,\n buildInteractiveResult,\n Result,\n TabManager,\n TabManagerState,\n buildTabManager,\n} from '@coveo/headless';\nimport {Component, Element, State, Prop, Method, h, Watch} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp} from '../../../../utils/props-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/item-display-guard';\nimport {ItemListGuard} from '../../../common/item-list/item-list-guard';\nimport {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';\nimport {DisplayGrid} from '../../../common/item-list/stencil-display-grid';\nimport {\n DisplayTableData,\n DisplayTable,\n DisplayTableRow,\n} from '../../../common/item-list/stencil-display-table';\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 ItemDisplayLayout,\n getItemListDisplayClasses,\n} from '../../../common/layout/display-options';\nimport {TabGuard} from '../../../common/tabs/tab-guard';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/*\n The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.\n \n @slot default - The default slot where the result templates are inserted.\n * @part result-list - The element containing every result of a result list\n * @part outline - The element displaying an outline or a divider around a result\n * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it, when results are displayed as a grid\n * @part result-list-grid-clickable - The clickable link encompassing the result when results are displayed as a grid\n * @part result-table - The element of the result table containing a heading and a body\n * @part result-table-heading - The element containing the row of cells in the result table's heading\n * @part result-table-heading-row - The element containing cells of the result table's heading\n * @part result-table-heading-cell - The element representing a cell of the result table's heading\n * @part result-table-body - The element containing the rows of the result table's body\n * @part result-table-row - The element containing the cells of a row in the result table's body\n * @part result-table-row-odd - The element containing the cells of an odd row in the result table's body\n * @part result-table-row-even - The element containing the cells of an even row in the result table's body\n * @part result-table-cell - The element representing a cell of the result table's body\n /\n@Component({\n tag: 'atomic-result-list',\n styleUrl: 'atomic-result-list.pcss',\n shadow: true,\n})\nexport class AtomicResultList implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public resultList!: ResultList;\n public resultsPerPage!: ResultsPerPage;\n private loadingFlag = randomID('firstResultLoaded-');\n private itemRenderingFunction: ItemRenderingFunction;\n private nextNewResultTarget?: FocusTargetController;\n private itemTemplateProvider!: ItemTemplateProvider;\n private resultListCommon!: ItemListCommon;\n\n @Element() public host!: HTMLDivElement;\n\n @BindStateToController('resultList')\n @State()\n private resultListState!: ResultListState;\n @BindStateToController('resultsPerPage')\n @State()\n private resultsPerPageState!: ResultsPerPageState;\n public tabManager!: TabManager;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @State() private resultTemplateRegistered = false;\n @State() public error!: Error;\n @State() private isAppLoaded = false;\n\n @State() private templateHasError = false;\n\n /\n The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.\n /\n @Prop({reflect: true}) public display: ItemDisplayLayout = '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 /\n The expected size of the image displayed in the results.\n /\n @Prop({reflect: true, mutable: true})\n public imageSize: ItemDisplayImageSize = 'icon';\n\n /\n The tabs on which the result list 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-result-list tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-result-list snippet>\n * ```\n * If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list 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 result list 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-result-list tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-result-list>\n * ```\n * If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list 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 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 public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n public initialize() {\n if (this.host.innerHTML.includes('<atomic-result-children')) {\n console.warn(\n 'Folded results will not render any children for the \"atomic-result-list\". Please use \"atomic-folded-result-list\" instead.'\n );\n }\n this.tabManager = buildTabManager(this.bindings.engine);\n this.resultList = buildResultList(this.bindings.engine);\n this.resultsPerPage = buildResultsPerPage(this.bindings.engine);\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-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.resultListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () => this.resultListState.results.length,\n getIsLoading: () => this.resultListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n @Watch('tabManagerState')\n watchTabManagerState(\n newValue: {activeTab: string},\n oldValue: {activeTab: string}\n ) {\n if (newValue?.activeTab !== oldValue?.activeTab) {\n this.bindings.store.unsetLoadingFlag(this.loadingFlag);\n }\n }\n\n public render() {\n this.resultListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n return (\n <TabGuard\n tabsIncluded={this.tabsIncluded}\n tabsExcluded={this.tabsExcluded}\n activeTab={this.tabManagerState.activeTab}\n >\n <ItemListGuard\n hasError={this.resultListState.hasError}\n hasTemplate={this.resultTemplateRegistered}\n templateHasError={this.itemTemplateProvider.hasError}\n firstRequestExecuted={this.resultListState.firstSearchExecuted}\n hasItems={this.resultListState.hasResults}\n >\n <DisplayWrapper display={this.display} listClasses={listClasses}>\n <ResultsPlaceholdersGuard\n density={this.density}\n display={this.display}\n imageSize={this.imageSize}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={this.resultsPerPageState.numberOfResults}\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard\n firstRequestExecuted={this.resultListState.firstSearchExecuted}\n hasItems={this.resultListState.hasResults}\n >\n {this.display === 'table'\n ? this.renderAsTable()\n : this.display === 'grid'\n ? this.renderAsGrid()\n : this.renderAsList()}\n </ItemDisplayGuard>\n </DisplayWrapper>\n </ItemListGuard>\n </TabGuard>\n );\n }\n\n private getPropsForAtomicResult(result: Result) {\n return {\n interactiveResult: buildInteractiveResult(this.bindings.engine, {\n options: {result},\n }),\n result,\n renderingFunction: this.itemRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.resultListCommon.getResultId(\n result.uniqueId,\n this.resultListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(result),\n linkContent:\n this.display === 'grid'\n ? this.itemTemplateProvider.getLinkTemplateContent(result)\n : this.itemTemplateProvider.getEmptyLinkTemplateContent(),\n store: this.bindings.store,\n density: this.density,\n imageSize: this.imageSize,\n display: this.display,\n };\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n this.display,\n this.density,\n this.imageSize,\n this.resultListState.firstSearchExecuted &&\n this.resultListState.isLoading,\n displayPlaceholders\n );\n }\n\n private renderAsGrid() {\n return this.resultListState.results.map((result, i) => {\n const propsForAtomicResult = this.getPropsForAtomicResult(result);\n return (\n <DisplayGrid\n selectorForItem=\"atomic-result\"\n item={result}\n {...propsForAtomicResult.interactiveResult}\n setRef={(element) =>\n element && this.resultListCommon.setNewResultRef(element, i)\n }\n >\n <atomic-result {...this} {...propsForAtomicResult}></atomic-result>\n </DisplayGrid>\n );\n });\n }\n\n private renderAsTable() {\n if (!this.resultListState.hasResults) {\n return;\n }\n const listClasses = this.computeListDisplayClasses();\n const firstItem = this.resultListState.results[0];\n\n const propsForTableColumns = {\n firstItem,\n templateContentForFirstItem:\n this.itemTemplateProvider.getTemplateContent(firstItem),\n };\n\n return (\n <DisplayTable\n {...propsForTableColumns}\n listClasses={listClasses}\n logger={this.bindings.engine.logger}\n itemRenderingFunction={this.itemRenderingFunction}\n host={this.host}\n >\n {this.resultListState.results.map((result, i) => {\n const propsForAtomicResult = this.getPropsForAtomicResult(result);\n return (\n <DisplayTableRow\n {...propsForAtomicResult}\n rowIndex={i}\n setRef={(element) =>\n element && this.resultListCommon.setNewResultRef(element, i)\n }\n >\n <DisplayTableData\n {...propsForTableColumns}\n {...propsForAtomicResult}\n renderItem={(content) => {\n return (\n <atomic-result\n {...propsForAtomicResult}\n content={content}\n ></atomic-result>\n );\n }}\n ></DisplayTableData>\n </DisplayTableRow>\n );\n })}\n </DisplayTable>\n );\n }\n\n private renderAsList() {\n return this.resultListState.results.map((result, i) => {\n const propsForAtomicResult = this.getPropsForAtomicResult(result);\n return (\n <atomic-result\n {...propsForAtomicResult}\n ref={(element) =>\n element && this.resultListCommon.setNewResultRef(element, i)\n }\n part=\"outline\"\n ></atomic-result>\n );\n });\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-list.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AA4BA,MAAM,oBAAoB,GAAG,CAAC,KAAwB;IACpD,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,OAAO,yCAAyC,CAAC,KAAK,CAAC,CAAC;KACzD;IACD,OAAO,oCAAoC,CAAC,KAAK,CAAC,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,yCAAyC,GAAG,CAChD,KAAqE;IAErE,MAAM,0BAA0B,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEjE,MAAM,kCAAkC,GAAG,KAAK,CAAC,qBAAsB,CACrE,KAAK,CAAC,SAAS,EACf,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAC9B,CAAC;IACF,0BAA0B,CAAC,SAAS,GAAG,kCAAkC,CAAC;IAE1E,OAAO,KAAK,CAAC,IAAI,CACf,0BAA0B,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oCAAoC,GAAG,CAC3C,KAA6D,KAE7D,KAAK,CAAC,IAAI,CACR,KAAK,CAAC,2BAA2B,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACxE,CAAC;AAEJ;;;AAGO,MAAM,YAAY,GAA2C,CAClE,KAAK,EACL,QAAQ;IAER,MAAM,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEjD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QACxB,KAAK,CAAC,MAAM,CAAC,KAAK,CAChB,2EAA2E,EAC3E,KAAK,CAAC,IAAI,CACX,CAAC;KACH;IAED,QACE,aAAO,KAAK,EAAE,aAAa,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,cAAc;QACjE,aAAO,IAAI,EAAC,sBAAsB;YAChC,UAAI,IAAI,EAAC,0BAA0B,IAChC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,UAAI,IAAI,EAAC,2BAA2B;gBAClC,mBAAa,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAE,GAAgB,CAC9D,CACN,CAAC,CACC,CACC;QACR,aAAO,IAAI,EAAC,mBAAmB,OAAK,QAAQ,CAAS,CAC/C,EACR;AACJ,CAAC,CAAC;AAEF;;;AAGO,MAAM,eAAe,GAA8C,CACxE,EAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAC,EACvB,QAAQ;IAER,QACE,UACE,GAAG,EAAE,GAAG,EACR,IAAI,EACF,mBAAmB;aAClB,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,uBAAuB,GAAG,sBAAsB,CAAC,EAEzE,GAAG,EAAE,CAAC,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC,OAE7B,QAAQ,CACT,EACL;AACJ,CAAC,CAAC;AAEF;;;AAGO,MAAM,gBAAgB,GAIzB,CAAC,KAAK;IACR,MAAM,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEjD,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM;QAC7B,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAE,GAAG,KAAK,CAAC,GAAG,CAAC;QACtD,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,mBAAmB,IACnC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CACtB,EACL;KACH,CAAC,CAAC;AACL,CAAC;;ACvHD;;;AAGO,MAAM,QAAQ,GAAuC,CAC1D,EAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,EACvC,QAAQ;IAER,IACE,CAAC,yBAAyB,CAAC,CAAC,GAAG,YAAY,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,EAAE,SAAS,CAAC,EAC3E;QACA,OAAO,EAAC,MAAM,OAAU,CAAC;KAC1B;IACD,OAAO,EAAC,QAAQ,WAAK,QAAQ,CAAY,CAAC;AAC5C,CAAC;;ACvBD,MAAM,mBAAmB,GAAG,u8jMAAu8jM,CAAC;AACp+jM,+BAAe,mBAAmB;;;;;;;;;;;;MCqErBA,kBAAgB;;;;;QAInB,gBAAW,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QAkBpC,6BAAwB,GAAG,KAAK,CAAC;QAEjC,gBAAW,GAAG,KAAK,CAAC;QAEpB,qBAAgB,GAAG,KAAK,CAAC;;;;QAKZ,YAAO,GAAsB,MAAM,CAAC;;;;QAIpC,YAAO,GAAuB,QAAQ,CAAC;;;;QAM9D,cAAS,GAAyB,MAAM,CAAC;;;;;;;;;;QAazC,iBAAY,GAAsB,IAAI,CAAC;;;;;;;;;;QAavC,iBAAY,GAAsB,IAAI,CAAC;;;;wCA7CF,KAAK;;2BAElB,KAAK;gCAEA,KAAK;uBAKkB,MAAM;uBAIL,QAAQ;yBAM3B,MAAM;4BAaN,IAAI;4BAaJ,IAAI;;;;;;;;;;IAU5B,MAAM,iBAAiB,CACtC,uBAA8C;QAE9C,IAAI,CAAC,qBAAqB,GAAG,uBAAuB,CAAC;KACtD;IAED,IAAW,WAAW;QACpB,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,IAAI,CAAC,mBAAmB,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;SAC5D;QACD,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IAEM,UAAU;QACf,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EAAE;YAC3D,OAAO,CAAC,IAAI,CACV,2HAA2H,CAC5H,CAAC;SACH;QACD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxD,IAAI,CAAC,cAAc,GAAG,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC;YACnD,sBAAsB,EAAE,IAAI;YAC5B,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAC1B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACrD;YACD,2BAA2B,EAAE,MAAM,IAAI,CAAC,wBAAwB;YAChE,mBAAmB,EAAE,MAAM,IAAI,CAAC,gBAAgB;YAChD,2BAA2B,EAAE,CAAC,KAAc;gBAC1C,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;aACvC;YACD,mBAAmB,EAAE,CAAC,KAAc;gBAClC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;aAC/B;YACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,GAAG,IAAI,cAAc,CAAC;YACzC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS;YAC/C,uBAAuB,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM;YAClE,YAAY,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS;YAClD,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;SAC3B,CAAC,CAAC;QACH,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,WAAW;YACvD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;SAChC,CAAC,CAAC;KACJ;IAGD,oBAAoB,CAClB,QAA6B,EAC7B,QAA6B;QAE7B,IAAI,QAAQ,EAAE,SAAS,KAAK,QAAQ,EAAE,SAAS,EAAE;YAC/C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACxD;KACF;IAEM,MAAM;QACX,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAErD,QACE,EAAC,QAAQ,qDACP,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,SAAS,IAEzC,EAAC,aAAa,qDACZ,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,EACvC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAC1C,gBAAgB,EAAE,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EACpD,oBAAoB,EAAE,IAAI,CAAC,eAAe,CAAC,mBAAmB,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,UAAU,IAEzC,EAAC,cAAc,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,IAC7D,EAAC,wBAAwB,qDACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,mBAAmB,EAAE,CAAC,IAAI,CAAC,WAAW,EACtC,oBAAoB,EAAE,IAAI,CAAC,mBAAmB,CAAC,eAAe,GACpC,EAC5B,EAAC,gBAAgB,qDACf,oBAAoB,EAAE,IAAI,CAAC,eAAe,CAAC,mBAAmB,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,UAAU,IAExC,IAAI,CAAC,OAAO,KAAK,OAAO;cACrB,IAAI,CAAC,aAAa,EAAE;cACpB,IAAI,CAAC,OAAO,KAAK,MAAM;kBACrB,IAAI,CAAC,YAAY,EAAE;kBACnB,IAAI,CAAC,YAAY,EAAE,CACR,CACJ,CACH,CACP,EACX;KACH;IAEO,uBAAuB,CAAC,MAAc;QAC5C,OAAO;YACL,iBAAiB,EAAE,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBAC9D,OAAO,EAAE,EAAC,MAAM,EAAC;aAClB,CAAC;YACF,MAAM;YACN,iBAAiB,EAAE,IAAI,CAAC,qBAAqB;YAC7C,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,GAAG,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CACpC,MAAM,CAAC,QAAQ,EACf,IAAI,CAAC,eAAe,CAAC,gBAAgB,EACrC,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,SAAS,CACf;YACD,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,MAAM,CAAC;YAC7D,WAAW,EACT,IAAI,CAAC,OAAO,KAAK,MAAM;kBACnB,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,MAAM,CAAC;kBACxD,IAAI,CAAC,oBAAoB,CAAC,2BAA2B,EAAE;YAC7D,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;YAC1B,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;KACH;IAEO,yBAAyB;QAC/B,MAAM,mBAAmB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;QAE9C,OAAO,yBAAyB,CAC9B,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,eAAe,CAAC,mBAAmB;YACtC,IAAI,CAAC,eAAe,CAAC,SAAS,EAChC,mBAAmB,CACpB,CAAC;KACH;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YAChD,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;YAClE,QACE,EAAC,WAAW,IACV,eAAe,EAAC,eAAe,EAC/B,IAAI,EAAE,MAAM,KACR,oBAAoB,CAAC,iBAAiB,EAC1C,MAAM,EAAE,CAAC,OAAO,KACd,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC,IAG9D,wBAAmB,IAAI,KAAM,oBAAoB,GAAkB,CACvD,EACd;SACH,CAAC,CAAC;KACJ;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE;YACpC,OAAO;SACR;QACD,MAAM,WAAW,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACrD,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAElD,MAAM,oBAAoB,GAAG;YAC3B,SAAS;YACT,2BAA2B,EACzB,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,SAAS,CAAC;SAC1D,CAAC;QAEF,QACE,EAAC,YAAY,OACP,oBAAoB,EACxB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EACnC,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YAC1C,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;YAClE,QACE,EAAC,eAAe,OACV,oBAAoB,EACxB,QAAQ,EAAE,CAAC,EACX,MAAM,EAAE,CAAC,OAAO,KACd,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC,IAG9D,EAAC,gBAAgB,OACX,oBAAoB,KACpB,oBAAoB,EACxB,UAAU,EAAE,CAAC,OAAO;oBAClB,QACE,wBACM,oBAAoB,EACxB,OAAO,EAAE,OAAO,GACD,EACjB;iBACH,GACiB,CACJ,EAClB;SACH,CAAC,CACW,EACf;KACH;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YAChD,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;YAClE,QACE,wBACM,oBAAoB,EACxB,GAAG,EAAE,CAAC,OAAO,KACX,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC,EAE9D,IAAI,EAAC,SAAS,GACC,EACjB;SACH,CAAC,CAAC;KACJ;;;;;;;;;;;;;;;;;;;;;;;AA3S4B;IAA5B,kBAAkB,EAAE;oDAA4B;AAazC;IAFP,qBAAqB,CAAC,YAAY,CAAC;2DAEM;AAGlC;IAFP,qBAAqB,CAAC,gBAAgB,CAAC;+DAEU;AAI3C;IAFN,qBAAqB,CAAC,YAAY,CAAC;2DAEK;AAiClC;IAFN,SAAS,EAAE;wDAEkC;AAavC;IAFN,SAAS,EAAE;wDAEkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultList"],"sources":["src/components/common/item-list/stencil-display-table.tsx","src/components/common/tabs/tab-guard.tsx","src/components/search/result-lists/atomic-result-list/atomic-result-list.pcss?tag=atomic-result-list&encapsulation=shadow","src/components/search/result-lists/atomic-result-list/atomic-result-list.tsx"],"sourcesContent":["// The Lit equivalent of this file is table-layout.ts\nimport {FunctionalComponent, VNode, h} from '@stencil/core';\nimport {tableElementTagName} from '../../search/atomic-table-result/table-element-utils.js';\nimport {AnyItem} from './unfolded-item.js';\nimport {ItemRenderingFunction} from './stencil-item-list-common.js';\n\ninterface TableColumnsProps {\n templateContentForFirstItem: DocumentFragment;\n firstItem: AnyItem;\n itemRenderingFunction?: ItemRenderingFunction;\n}\n\ninterface DisplayTableProps extends TableColumnsProps {\n logger: Pick<Console, 'error'>;\n host: HTMLElement;\n listClasses: string;\n}\n\ninterface TableDataProps extends TableColumnsProps {\n key: string;\n}\n\ninterface DisplayTableRowProps {\n key: string;\n rowIndex: number;\n setRef: (element?: HTMLElement) => void;\n}\n\nconst getFieldTableColumns = (props: TableColumnsProps) => {\n if (props.itemRenderingFunction) {\n return getFieldTableColumnsFromRenderingFunction(props);\n }\n return getFieldTableColumnsFromHTMLTemplate(props);\n};\n\nconst getFieldTableColumnsFromRenderingFunction = (\n props: Pick<TableColumnsProps, 'itemRenderingFunction' \| 'firstItem'>\n): HTMLAtomicTableElementElement[] => {\n const contentOfRenderingFunction = document.createElement('div');\n\n const contentOfRenderingFunctionAsString = props.itemRenderingFunction!(\n props.firstItem,\n document.createElement('div')\n );\n contentOfRenderingFunction.innerHTML = contentOfRenderingFunctionAsString;\n\n return Array.from(\n contentOfRenderingFunction.querySelectorAll(tableElementTagName)\n );\n};\n\nconst getFieldTableColumnsFromHTMLTemplate = (\n props: Pick<DisplayTableProps, 'templateContentForFirstItem'>\n): HTMLAtomicTableElementElement[] =>\n Array.from(\n props.templateContentForFirstItem.querySelectorAll(tableElementTagName)\n );\n\n/*\n @deprecated should only be used for Stencil components.\n /\nexport const DisplayTable: FunctionalComponent<DisplayTableProps> = (\n props,\n children\n) => {\n const fieldColumns = getFieldTableColumns(props);\n\n if (!fieldColumns.length) {\n props.logger.error(\n 'atomic-table-element elements missing in the template to display columns.',\n props.host\n );\n }\n\n return (\n <table class={`list-root ${props.listClasses}`} part=\"result-table\">\n <thead part=\"result-table-heading\">\n <tr part=\"result-table-heading-row\">\n {fieldColumns.map((column) => (\n <th part=\"result-table-heading-cell\">\n <atomic-text value={column.getAttribute('label')!}></atomic-text>\n </th>\n ))}\n </tr>\n </thead>\n <tbody part=\"result-table-body\">{...children}</tbody>\n </table>\n );\n};\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const DisplayTableRow: FunctionalComponent<DisplayTableRowProps> = (\n {key, rowIndex, setRef},\n children\n) => {\n return (\n <tr\n key={key}\n part={\n 'result-table-row ' +\n (rowIndex % 2 === 1 ? 'result-table-row-even' : 'result-table-row-odd')\n }\n ref={(element) => setRef(element)}\n >\n {...children}\n </tr>\n );\n};\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const DisplayTableData: FunctionalComponent<\n TableDataProps & {\n renderItem: (content: HTMLAtomicTableElementElement) => VNode;\n }\n> = (props) => {\n const fieldColumns = getFieldTableColumns(props);\n\n return fieldColumns.map((column) => {\n const key = column.getAttribute('label')! + props.key;\n return (\n <td key={key} part=\"result-table-cell\">\n {props.renderItem(column)}\n </td>\n );\n });\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {Hidden} from '../stencil-hidden';\n\ninterface TabGuardProps {\n tabsIncluded: string \| string[];\n tabsExcluded: string \| string[];\n activeTab: string;\n}\n\n/\n @deprecated should only be used for Stencil components.\n /\nexport const TabGuard: FunctionalComponent<TabGuardProps> = (\n {tabsIncluded, tabsExcluded, activeTab},\n children\n) => {\n if (\n !shouldDisplayOnCurrentTab([...tabsIncluded], [...tabsExcluded], activeTab)\n ) {\n return <Hidden></Hidden>;\n }\n return <Fragment>{...children}</Fragment>;\n};\n","@import '../../../../global/global.pcss';\n@import '../../../common/item-list/styles/placeholders.pcss';\n@import '../../../common/item-list/styles/table-display.pcss';\n@import '../../../common/item-list/styles/list-display.pcss';\n@import '../../../common/item-list/styles/grid-display.pcss';\n\natomic-result:not(.hydrated) {\n visibility: hidden;\n}\n","import {\n ResultList,\n ResultListState,\n buildResultList,\n ResultsPerPageState,\n ResultsPerPage,\n buildResultsPerPage,\n buildInteractiveResult,\n Result,\n TabManager,\n TabManagerState,\n buildTabManager,\n} from '@coveo/headless';\nimport {Component, Element, State, Prop, Method, h, Watch} from '@stencil/core';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp} from '../../../../utils/props-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/item-display-guard';\nimport {ItemListGuard} from '../../../common/item-list/item-list-guard';\nimport {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';\nimport {DisplayGrid} from '../../../common/item-list/stencil-display-grid';\nimport {\n DisplayTableData,\n DisplayTable,\n DisplayTableRow,\n} from '../../../common/item-list/stencil-display-table';\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 ItemDisplayLayout,\n getItemListDisplayClasses,\n} from '../../../common/layout/display-options';\nimport {TabGuard} from '../../../common/tabs/tab-guard';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/\n The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.\n \n @slot default - The default slot where the result templates are inserted.\n * @part result-list - The element containing every result of a result list\n * @part outline - The element displaying an outline or a divider around a result\n * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it, when results are displayed as a grid\n * @part result-list-grid-clickable - The clickable link encompassing the result when results are displayed as a grid\n * @part result-table - The element of the result table containing a heading and a body\n * @part result-table-heading - The element containing the row of cells in the result table's heading\n * @part result-table-heading-row - The element containing cells of the result table's heading\n * @part result-table-heading-cell - The element representing a cell of the result table's heading\n * @part result-table-body - The element containing the rows of the result table's body\n * @part result-table-row - The element containing the cells of a row in the result table's body\n * @part result-table-row-odd - The element containing the cells of an odd row in the result table's body\n * @part result-table-row-even - The element containing the cells of an even row in the result table's body\n * @part result-table-cell - The element representing a cell of the result table's body\n /\n@Component({\n tag: 'atomic-result-list',\n styleUrl: 'atomic-result-list.pcss',\n shadow: true,\n})\nexport class AtomicResultList implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n public resultList!: ResultList;\n public resultsPerPage!: ResultsPerPage;\n private loadingFlag = randomID('firstResultLoaded-');\n private itemRenderingFunction: ItemRenderingFunction;\n private nextNewResultTarget?: FocusTargetController;\n private itemTemplateProvider!: ItemTemplateProvider;\n private resultListCommon!: ItemListCommon;\n\n @Element() public host!: HTMLDivElement;\n\n @BindStateToController('resultList')\n @State()\n private resultListState!: ResultListState;\n @BindStateToController('resultsPerPage')\n @State()\n private resultsPerPageState!: ResultsPerPageState;\n public tabManager!: TabManager;\n @BindStateToController('tabManager')\n @State()\n public tabManagerState!: TabManagerState;\n @State() private resultTemplateRegistered = false;\n @State() public error!: Error;\n @State() private isAppLoaded = false;\n\n @State() private templateHasError = false;\n\n /\n The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.\n /\n @Prop({reflect: true}) public display: ItemDisplayLayout = '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 /\n The expected size of the image displayed in the results.\n /\n @Prop({reflect: true, mutable: true})\n public imageSize: ItemDisplayImageSize = 'icon';\n\n /\n The tabs on which the result list 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-result-list tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-result-list snippet>\n * ```\n * If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list 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 result list 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-result-list tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-result-list>\n * ```\n * If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list 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 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 public get focusTarget() {\n if (!this.nextNewResultTarget) {\n this.nextNewResultTarget = new FocusTargetController(this);\n }\n return this.nextNewResultTarget;\n }\n\n public initialize() {\n if (this.host.innerHTML.includes('<atomic-result-children')) {\n console.warn(\n 'Folded results will not render any children for the \"atomic-result-list\". Please use \"atomic-folded-result-list\" instead.'\n );\n }\n this.tabManager = buildTabManager(this.bindings.engine);\n this.resultList = buildResultList(this.bindings.engine);\n this.resultsPerPage = buildResultsPerPage(this.bindings.engine);\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-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.resultListCommon = new ItemListCommon({\n engineSubscribe: this.bindings.engine.subscribe,\n getCurrentNumberOfItems: () => this.resultListState.results.length,\n getIsLoading: () => this.resultListState.isLoading,\n host: this.host,\n loadingFlag: this.loadingFlag,\n nextNewItemTarget: this.focusTarget,\n store: this.bindings.store,\n });\n createAppLoadedListener(this.bindings.store, (isAppLoaded) => {\n this.isAppLoaded = isAppLoaded;\n });\n }\n\n @Watch('tabManagerState')\n watchTabManagerState(\n newValue: {activeTab: string},\n oldValue: {activeTab: string}\n ) {\n if (newValue?.activeTab !== oldValue?.activeTab) {\n this.bindings.store.unsetLoadingFlag(this.loadingFlag);\n }\n }\n\n public render() {\n this.resultListCommon.updateBreakpoints();\n const listClasses = this.computeListDisplayClasses();\n\n return (\n <TabGuard\n tabsIncluded={this.tabsIncluded}\n tabsExcluded={this.tabsExcluded}\n activeTab={this.tabManagerState.activeTab}\n >\n <ItemListGuard\n hasError={this.resultListState.hasError}\n hasTemplate={this.resultTemplateRegistered}\n templateHasError={this.itemTemplateProvider.hasError}\n firstRequestExecuted={this.resultListState.firstSearchExecuted}\n hasItems={this.resultListState.hasResults}\n >\n <DisplayWrapper display={this.display} listClasses={listClasses}>\n <ResultsPlaceholdersGuard\n density={this.density}\n display={this.display}\n imageSize={this.imageSize}\n displayPlaceholders={!this.isAppLoaded}\n numberOfPlaceholders={this.resultsPerPageState.numberOfResults}\n ></ResultsPlaceholdersGuard>\n <ItemDisplayGuard\n firstRequestExecuted={this.resultListState.firstSearchExecuted}\n hasItems={this.resultListState.hasResults}\n >\n {this.display === 'table'\n ? this.renderAsTable()\n : this.display === 'grid'\n ? this.renderAsGrid()\n : this.renderAsList()}\n </ItemDisplayGuard>\n </DisplayWrapper>\n </ItemListGuard>\n </TabGuard>\n );\n }\n\n private getPropsForAtomicResult(result: Result) {\n return {\n interactiveResult: buildInteractiveResult(this.bindings.engine, {\n options: {result},\n }),\n result,\n renderingFunction: this.itemRenderingFunction,\n loadingFlag: this.loadingFlag,\n key: this.resultListCommon.getResultId(\n result.uniqueId,\n this.resultListState.searchResponseId,\n this.density,\n this.imageSize\n ),\n content: this.itemTemplateProvider.getTemplateContent(result),\n linkContent:\n this.display === 'grid'\n ? this.itemTemplateProvider.getLinkTemplateContent(result)\n : this.itemTemplateProvider.getEmptyLinkTemplateContent(),\n store: this.bindings.store,\n density: this.density,\n imageSize: this.imageSize,\n display: this.display,\n };\n }\n\n private computeListDisplayClasses() {\n const displayPlaceholders = !this.isAppLoaded;\n\n return getItemListDisplayClasses(\n this.display,\n this.density,\n this.imageSize,\n this.resultListState.firstSearchExecuted &&\n this.resultListState.isLoading,\n displayPlaceholders\n );\n }\n\n private renderAsGrid() {\n return this.resultListState.results.map((result, i) => {\n const propsForAtomicResult = this.getPropsForAtomicResult(result);\n return (\n <DisplayGrid\n selectorForItem=\"atomic-result\"\n item={result}\n {...propsForAtomicResult.interactiveResult}\n setRef={(element) =>\n element && this.resultListCommon.setNewResultRef(element, i)\n }\n >\n <atomic-result {...this} {...propsForAtomicResult}></atomic-result>\n </DisplayGrid>\n );\n });\n }\n\n private renderAsTable() {\n if (!this.resultListState.hasResults) {\n return;\n }\n const listClasses = this.computeListDisplayClasses();\n const firstItem = this.resultListState.results[0];\n\n const propsForTableColumns = {\n firstItem,\n templateContentForFirstItem:\n this.itemTemplateProvider.getTemplateContent(firstItem),\n };\n\n return (\n <DisplayTable\n {...propsForTableColumns}\n listClasses={listClasses}\n logger={this.bindings.engine.logger}\n itemRenderingFunction={this.itemRenderingFunction}\n host={this.host}\n >\n {this.resultListState.results.map((result, i) => {\n const propsForAtomicResult = this.getPropsForAtomicResult(result);\n return (\n <DisplayTableRow\n {...propsForAtomicResult}\n rowIndex={i}\n setRef={(element) =>\n element && this.resultListCommon.setNewResultRef(element, i)\n }\n >\n <DisplayTableData\n {...propsForTableColumns}\n {...propsForAtomicResult}\n renderItem={(content) => {\n return (\n <atomic-result\n {...propsForAtomicResult}\n content={content}\n ></atomic-result>\n );\n }}\n ></DisplayTableData>\n </DisplayTableRow>\n );\n })}\n </DisplayTable>\n );\n }\n\n private renderAsList() {\n return this.resultListState.results.map((result, i) => {\n const propsForAtomicResult = this.getPropsForAtomicResult(result);\n return (\n <atomic-result\n {...propsForAtomicResult}\n ref={(element) =>\n element && this.resultListCommon.setNewResultRef(element, i)\n }\n part=\"outline\"\n ></atomic-result>\n );\n });\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-localized-text.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { isNullOrUndefined } from '@coveo/bueno';
 import { ResultTemplatesHelpers } from '@coveo/headless';
+import { R as ResultContext } from './stencil-result-template-decorators.js';
 import { I as InitializeBindings } from './initialization-utils.js';
 import { M as MapProp } from './props-utils.js';
-import { R as ResultContext } from './result-template-decorators.js';
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/atomic/components/atomic-result-localized-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-localized-text.js","mappings":";;;;;;;;;;;;;;;;;MA+BaA,2BAAyB;;;;;;;QAYjB,UAAK,GAA2B,EAAE,CAAC;;;qBAAH,EAAE;;;IAMrD,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;YAC1C,GAAG,IAAI,CAAC,gBAAgB,EAAE;YAC1B,GAAG,IAAI,CAAC,eAAe,EAAE;SAC1B,CAAC,CAAC;KACJ;IAEO,gBAAgB;QACtB,MAAM,GAAG,GAA4B,EAAE,CAAC;QACxC,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;YACxC,OAAO,GAAG,CAAC;SACZ;QACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC;YAC5D,MAAM,aAAa,GAAG,sBAAsB,CAAC,iBAAiB,CAC5D,IAAI,CAAC,MAAM,EACX,SAAS,CACV,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE;gBACrC,GAAG,CAAC,aAAa,CAAC,GAAG,aAAa,CAAC;aACpC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;KACZ;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,EAAE,CAAC;SACX;QACD,OAAO;YACL,KAAK,EACF,sBAAsB,CAAC,iBAAiB,CACvC,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,UAAW,CACN,IAAI,CAAC;SACpB,CAAC;KACH;;;;;;;AArD4B;IAA5B,kBAAkB,EAAE;6DAA4B;AAGxB;IAAxB,aAAa,EAAE;2DAAyB;AAQtB;IAAV,OAAO,EAAE;0DAAoC;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultLocalizedText"],"sources":["src/components/search/result-template-components/atomic-result-localized-text/atomic-result-localized-text.ts"],"sourcesContent":["import {isNullOrUndefined} from '@coveo/bueno';\nimport {type Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Prop, State} from '@stencil/core';\nimport {\n type InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {MapProp} from '../../../../utils/props-utils';\nimport type {Bindings} from '../../atomic-search-interface/atomic-search-interface';\~~nimport {ResultContext} from '../result-template-decorators';\~~n\n/*\n The `atomic-result-localized-text` component renders a target i18n localized string using the values of a target field.\n \n Given this i18n configuration:\n * ```\n * searchInterface.i18n.addResourceBundle('en', 'translation', {\n * classic_book_advert: 'Classic book from {{name}}',\n * });\n * ```\n \n The component could be configured in such a way to replace `{{name}}` with the `author` field value from the result item:\n * ```\n * <atomic-result-localized-text locale-key=\"classic_book_advert\" field-author=\"name\"></atomic-result-localized-text>\n * ```\n \n @MapProp name: field;attr: field;docs: The field from which to extract the target string and the variable used to map it to the target i18n parameter. For example, the following configuration extracts the value of `author` from a result, and assign it to the i18n parameter `name`: `field-author=\"name\"`;type: Record<string, string> ;default: {}\n /\n@Component({\n tag: 'atomic-result-localized-text',\n})\nexport class AtomicResultLocalizedText implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n @State() public error!: Error;\n\n @ResultContext() private result!: Result;\n /\n The i18n translation key.\n /\n @Prop() localeKey!: string;\n /\n The field value to dynamically evaluate.\n /\n @Prop() @MapProp() field: Record<string, string> = {};\n /\n The numerical field value used to determine whether to use the singular or plural value of a translation.\n * */\n @Prop() fieldCount?: string;\n\n render() {\n return this.bindings.i18n.t(this.localeKey, {\n ...this.parseFieldValues(),\n ...this.parseFieldCount(),\n });\n }\n\n private parseFieldValues() {\n const ret: Record<string, unknown> = {};\n if (Object.keys(this.field).length === 0) {\n return ret;\n }\n Object.entries(this.field).forEach(([fieldName, i18nParameter]) => {\n const fieldValueRaw = ResultTemplatesHelpers.getResultProperty(\n this.result,\n fieldName\n );\n if (!isNullOrUndefined(fieldValueRaw)) {\n ret[i18nParameter] = fieldValueRaw;\n }\n });\n\n return ret;\n }\n\n private parseFieldCount() {\n if (!this.fieldCount) {\n return {};\n }\n return {\n count:\n (ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.fieldCount!\n ) as number) ?? 1,\n };\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-localized-text.js","mappings":";;;;;;;;;;;;;;;;;MA+BaA,2BAAyB;;;;;;;QAYjB,UAAK,GAA2B,EAAE,CAAC;;;qBAAH,EAAE;;;IAMrD,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;YAC1C,GAAG,IAAI,CAAC,gBAAgB,EAAE;YAC1B,GAAG,IAAI,CAAC,eAAe,EAAE;SAC1B,CAAC,CAAC;KACJ;IAEO,gBAAgB;QACtB,MAAM,GAAG,GAA4B,EAAE,CAAC;QACxC,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;YACxC,OAAO,GAAG,CAAC;SACZ;QACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC;YAC5D,MAAM,aAAa,GAAG,sBAAsB,CAAC,iBAAiB,CAC5D,IAAI,CAAC,MAAM,EACX,SAAS,CACV,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE;gBACrC,GAAG,CAAC,aAAa,CAAC,GAAG,aAAa,CAAC;aACpC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;KACZ;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,EAAE,CAAC;SACX;QACD,OAAO;YACL,KAAK,EACF,sBAAsB,CAAC,iBAAiB,CACvC,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,UAAW,CACN,IAAI,CAAC;SACpB,CAAC;KACH;;;;;;;AArD4B;IAA5B,kBAAkB,EAAE;6DAA4B;AAGxB;IAAxB,aAAa,EAAE;2DAAyB;AAQtB;IAAV,OAAO,EAAE;0DAAoC;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultLocalizedText"],"sources":["src/components/search/result-template-components/atomic-result-localized-text/atomic-result-localized-text.ts"],"sourcesContent":["import {isNullOrUndefined} from '@coveo/bueno';\nimport {type Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Prop, State} from '@stencil/core';\nimport {ResultContext} from '@/src/components/search/result-template-component-utils/context/stencil-result-template-decorators';\nimport {\n type InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {MapProp} from '../../../../utils/props-utils';\nimport type {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/*\n The `atomic-result-localized-text` component renders a target i18n localized string using the values of a target field.\n \n Given this i18n configuration:\n * ```\n * searchInterface.i18n.addResourceBundle('en', 'translation', {\n * classic_book_advert: 'Classic book from {{name}}',\n * });\n * ```\n \n The component could be configured in such a way to replace `{{name}}` with the `author` field value from the result item:\n * ```\n * <atomic-result-localized-text locale-key=\"classic_book_advert\" field-author=\"name\"></atomic-result-localized-text>\n * ```\n \n @MapProp name: field;attr: field;docs: The field from which to extract the target string and the variable used to map it to the target i18n parameter. For example, the following configuration extracts the value of `author` from a result, and assign it to the i18n parameter `name`: `field-author=\"name\"`;type: Record<string, string> ;default: {}\n /\n@Component({\n tag: 'atomic-result-localized-text',\n})\nexport class AtomicResultLocalizedText implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n @State() public error!: Error;\n\n @ResultContext() private result!: Result;\n /\n The i18n translation key.\n /\n @Prop() localeKey!: string;\n /\n The field value to dynamically evaluate.\n /\n @Prop() @MapProp() field: Record<string, string> = {};\n /\n The numerical field value used to determine whether to use the singular or plural value of a translation.\n * */\n @Prop() fieldCount?: string;\n\n render() {\n return this.bindings.i18n.t(this.localeKey, {\n ...this.parseFieldValues(),\n ...this.parseFieldCount(),\n });\n }\n\n private parseFieldValues() {\n const ret: Record<string, unknown> = {};\n if (Object.keys(this.field).length === 0) {\n return ret;\n }\n Object.entries(this.field).forEach(([fieldName, i18nParameter]) => {\n const fieldValueRaw = ResultTemplatesHelpers.getResultProperty(\n this.result,\n fieldName\n );\n if (!isNullOrUndefined(fieldValueRaw)) {\n ret[i18nParameter] = fieldValueRaw;\n }\n });\n\n return ret;\n }\n\n private parseFieldCount() {\n if (!this.fieldCount) {\n return {};\n }\n return {\n count:\n (ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.fieldCount!\n ) as number) ?? 1,\n };\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-multi-value-text.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { buildBreadcrumbManager, ResultTemplatesHelpers } from '@coveo/headless'
 import { g as getFieldValueCaption } from './field-utils.js';
 import { I as InitializeBindings } from './initialization-utils.js';
 import { t as titleToKebab } from './utils.js';
-import { R as ResultContext } from './result-template-decorators.js';
+import { R as ResultContext } from './stencil-result-template-decorators.js';
 const atomicResultMultiValueTextCss = ":host>ul{display:flex;list-style:none;margin:0;padding:0}:host>ul li{display:inline-block}.separator::before{display:inline;content:',\\00a0'}";
 const AtomicResultMultiValueTextStyle0 = atomicResultMultiValueTextCss;

package/dist/atomic/components/atomic-result-multi-value-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-multi-value-text.js","mappings":"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","names":["AtomicResultMultiValueText"],"sources":["src/components/search/result-template-components/atomic-result-multi-value-text/atomic-result-multi-value-text.pcss?tag=atomic-result-multi-value-text&encapsulation=shadow","src/components/search/result-template-components/atomic-result-multi-value-text/atomic-result-multi-value-text.tsx"],"sourcesContent":[":host {\n > ul {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n\n li {\n display: inline-block;\n }\n }\n}\n\n.separator {\n &::before {\n display: inline;\n content: ',\\00a0';\n }\n}\n","import {\n BreadcrumbManager,\n buildBreadcrumbManager,\n Result,\n ResultTemplatesHelpers,\n} from '@coveo/headless';\nimport {Component, Element, Prop, h, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {titleToKebab} from '../../../../utils/utils';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '../result-template-decorators';\n\n/*\n The `atomic-result-multi-value-text` component renders the values of a multi-value string field.\n * @part result-multi-value-text-list - The list of field values.\n * @part result-multi-value-text-separator - The separator to display between each of the field values.\n * @part result-multi-value-text-value - A field value.\n * @part result-multi-value-text-value-more - A label indicating some values were omitted.\n * @slot result-multi-value-text-value-* - A custom caption value that's specified for a given part of a multi-text field value. For example, if you want to use `Off-Campus Resident` as a caption value for `Off-campus apartment` in `Off-campus apartment;On-campus apartment`, you'd use `<span slot=\"result-multi-value-text-value-off-campus-apartment\">Off-Campus Resident</span>`). The suffix of this slot corresponds with the field value, written in kebab case.\n /\n@Component({\n tag: 'atomic-result-multi-value-text',\n styleUrl: 'atomic-result-multi-value-text.pcss',\n shadow: true,\n})\nexport class AtomicResultMultiValueText {\n public breadcrumbManager!: BreadcrumbManager;\n\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n\n @Element() host!: HTMLElement;\n\n @State() public error!: Error;\n\n /\n The field that the component should use.\n * The component will try to find this field in the `Result.raw` object unless it finds it in the `Result` object first.\n * Make sure this field is present in the `fieldsToInclude` property of the `atomic-search-interface` component.\n /\n @Prop({reflect: true}) public field!: string;\n\n /\n The maximum number of field values to display.\n * If there are _n_ more values than the specified maximum, the last displayed value will be \"_n_ more...\".\n /\n @Prop({reflect: true}) public maxValuesToDisplay = 3;\n\n /\n The delimiter used to separate values when the field isn't indexed as a multi value field.\n */\n @Prop({reflect: true}) public delimiter: string \| null = null;\n\n private sortedValues: string[] \| null = null;\n\n public initialize() {\n this.breadcrumbManager = buildBreadcrumbManager(this.bindings.engine);\n }\n\n private get resultValues() {\n const value = ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.field\n );\n\n if (value === null) {\n return null;\n }\n\n if (Array.isArray(value)) {\n return value.map((v) => `${v}`.trim());\n }\n\n if (typeof value !== 'string' \|\| value.trim() === '') {\n this.error = new Error(\n `Could not parse \"${value}\" from field \"${this.field}\" as a string array.`\n );\n return null;\n }\n\n return this.delimiter\n ? value.split(this.delimiter).map((value) => value.trim())\n : [value];\n }\n\n private get facetSelectedValues() {\n return this.breadcrumbManager.state.facetBreadcrumbs\n .filter((facet) => facet.field === this.field)\n .reduce(\n (values, facet) => [\n ...values,\n ...facet.values.map(({value}) => value.value),\n ],\n [] as string[]\n );\n }\n\n private updateSortedValues() {\n const allValues = this.resultValues;\n if (allValues === null) {\n this.sortedValues = null;\n return;\n }\n const allValuesSet = new Set(allValues);\n const firstValues = this.facetSelectedValues.filter((value) =>\n allValuesSet.has(value)\n );\n this.sortedValues = Array.from(\n allValues.reduce((set, value) => set.add(value), new Set(firstValues))\n );\n }\n\n private getShouldDisplayLabel(values: string[]) {\n return (\n this.maxValuesToDisplay > 0 && values.length > this.maxValuesToDisplay\n );\n }\n\n private getNumberOfValuesToDisplay(values: string[]) {\n return Math.min(values.length, this.maxValuesToDisplay);\n }\n\n private renderValue(value: string) {\n const label = getFieldValueCaption(this.field, value, this.bindings.i18n);\n const kebabValue = titleToKebab(value);\n return (\n <li key={value} part=\"result-multi-value-text-value\">\n <slot name={`result-multi-value-text-value-${kebabValue}`}>\n {label}\n </slot>\n </li>\n );\n }\n\n private renderSeparator(beforeValue: string, afterValue: string) {\n return (\n <li\n aria-hidden=\"true\"\n part=\"result-multi-value-text-separator\"\n key={`${beforeValue}~${afterValue}`}\n class=\"separator\"\n ></li>\n );\n }\n\n private renderMoreLabel(value: number) {\n return (\n <li key=\"more-field-values\" part=\"result-multi-value-text-value-more\">\n {this.bindings.i18n.t('n-more', {value})}\n </li>\n );\n }\n\n private renderListItems(values: string[]) {\n const numberOfValuesToDisplay = this.getNumberOfValuesToDisplay(values);\n\n const nodes: VNode[] = [];\n for (let i = 0; i < numberOfValuesToDisplay; i++) {\n if (i > 0) {\n nodes.push(this.renderSeparator(values[i - 1], values[i]));\n }\n nodes.push(this.renderValue(values[i]));\n }\n if (this.getShouldDisplayLabel(values)) {\n nodes.push(\n this.renderSeparator(\n values[numberOfValuesToDisplay - 1],\n 'more-field-values'\n )\n );\n nodes.push(this.renderMoreLabel(values.length - numberOfValuesToDisplay));\n }\n return nodes;\n }\n\n public componentWillRender() {\n this.updateSortedValues();\n }\n\n public render() {\n if (this.sortedValues === null) {\n this.host.remove();\n return;\n }\n return (\n <ul part=\"result-multi-value-text-list\">\n {...this.renderListItems(this.sortedValues)}\n </ul>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-multi-value-text.js","mappings":"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","names":["AtomicResultMultiValueText"],"sources":["src/components/search/result-template-components/atomic-result-multi-value-text/atomic-result-multi-value-text.pcss?tag=atomic-result-multi-value-text&encapsulation=shadow","src/components/search/result-template-components/atomic-result-multi-value-text/atomic-result-multi-value-text.tsx"],"sourcesContent":[":host {\n > ul {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n\n li {\n display: inline-block;\n }\n }\n}\n\n.separator {\n &::before {\n display: inline;\n content: ',\\00a0';\n }\n}\n","import {\n BreadcrumbManager,\n buildBreadcrumbManager,\n Result,\n ResultTemplatesHelpers,\n} from '@coveo/headless';\nimport {Component, Element, Prop, h, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {titleToKebab} from '../../../../utils/utils';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '@/src/components/search/result-template-component-utils/context/stencil-result-template-decorators';\n\n/*\n The `atomic-result-multi-value-text` component renders the values of a multi-value string field.\n * @part result-multi-value-text-list - The list of field values.\n * @part result-multi-value-text-separator - The separator to display between each of the field values.\n * @part result-multi-value-text-value - A field value.\n * @part result-multi-value-text-value-more - A label indicating some values were omitted.\n * @slot result-multi-value-text-value-* - A custom caption value that's specified for a given part of a multi-text field value. For example, if you want to use `Off-Campus Resident` as a caption value for `Off-campus apartment` in `Off-campus apartment;On-campus apartment`, you'd use `<span slot=\"result-multi-value-text-value-off-campus-apartment\">Off-Campus Resident</span>`). The suffix of this slot corresponds with the field value, written in kebab case.\n /\n@Component({\n tag: 'atomic-result-multi-value-text',\n styleUrl: 'atomic-result-multi-value-text.pcss',\n shadow: true,\n})\nexport class AtomicResultMultiValueText {\n public breadcrumbManager!: BreadcrumbManager;\n\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n\n @Element() host!: HTMLElement;\n\n @State() public error!: Error;\n\n /\n The field that the component should use.\n * The component will try to find this field in the `Result.raw` object unless it finds it in the `Result` object first.\n * Make sure this field is present in the `fieldsToInclude` property of the `atomic-search-interface` component.\n /\n @Prop({reflect: true}) public field!: string;\n\n /\n The maximum number of field values to display.\n * If there are _n_ more values than the specified maximum, the last displayed value will be \"_n_ more...\".\n /\n @Prop({reflect: true}) public maxValuesToDisplay = 3;\n\n /\n The delimiter used to separate values when the field isn't indexed as a multi value field.\n */\n @Prop({reflect: true}) public delimiter: string \| null = null;\n\n private sortedValues: string[] \| null = null;\n\n public initialize() {\n this.breadcrumbManager = buildBreadcrumbManager(this.bindings.engine);\n }\n\n private get resultValues() {\n const value = ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.field\n );\n\n if (value === null) {\n return null;\n }\n\n if (Array.isArray(value)) {\n return value.map((v) => `${v}`.trim());\n }\n\n if (typeof value !== 'string' \|\| value.trim() === '') {\n this.error = new Error(\n `Could not parse \"${value}\" from field \"${this.field}\" as a string array.`\n );\n return null;\n }\n\n return this.delimiter\n ? value.split(this.delimiter).map((value) => value.trim())\n : [value];\n }\n\n private get facetSelectedValues() {\n return this.breadcrumbManager.state.facetBreadcrumbs\n .filter((facet) => facet.field === this.field)\n .reduce(\n (values, facet) => [\n ...values,\n ...facet.values.map(({value}) => value.value),\n ],\n [] as string[]\n );\n }\n\n private updateSortedValues() {\n const allValues = this.resultValues;\n if (allValues === null) {\n this.sortedValues = null;\n return;\n }\n const allValuesSet = new Set(allValues);\n const firstValues = this.facetSelectedValues.filter((value) =>\n allValuesSet.has(value)\n );\n this.sortedValues = Array.from(\n allValues.reduce((set, value) => set.add(value), new Set(firstValues))\n );\n }\n\n private getShouldDisplayLabel(values: string[]) {\n return (\n this.maxValuesToDisplay > 0 && values.length > this.maxValuesToDisplay\n );\n }\n\n private getNumberOfValuesToDisplay(values: string[]) {\n return Math.min(values.length, this.maxValuesToDisplay);\n }\n\n private renderValue(value: string) {\n const label = getFieldValueCaption(this.field, value, this.bindings.i18n);\n const kebabValue = titleToKebab(value);\n return (\n <li key={value} part=\"result-multi-value-text-value\">\n <slot name={`result-multi-value-text-value-${kebabValue}`}>\n {label}\n </slot>\n </li>\n );\n }\n\n private renderSeparator(beforeValue: string, afterValue: string) {\n return (\n <li\n aria-hidden=\"true\"\n part=\"result-multi-value-text-separator\"\n key={`${beforeValue}~${afterValue}`}\n class=\"separator\"\n ></li>\n );\n }\n\n private renderMoreLabel(value: number) {\n return (\n <li key=\"more-field-values\" part=\"result-multi-value-text-value-more\">\n {this.bindings.i18n.t('n-more', {value})}\n </li>\n );\n }\n\n private renderListItems(values: string[]) {\n const numberOfValuesToDisplay = this.getNumberOfValuesToDisplay(values);\n\n const nodes: VNode[] = [];\n for (let i = 0; i < numberOfValuesToDisplay; i++) {\n if (i > 0) {\n nodes.push(this.renderSeparator(values[i - 1], values[i]));\n }\n nodes.push(this.renderValue(values[i]));\n }\n if (this.getShouldDisplayLabel(values)) {\n nodes.push(\n this.renderSeparator(\n values[numberOfValuesToDisplay - 1],\n 'more-field-values'\n )\n );\n nodes.push(this.renderMoreLabel(values.length - numberOfValuesToDisplay));\n }\n return nodes;\n }\n\n public componentWillRender() {\n this.updateSortedValues();\n }\n\n public render() {\n if (this.sortedValues === null) {\n this.host.remove();\n return;\n }\n return (\n <ul part=\"result-multi-value-text-list\">\n {...this.renderListItems(this.sortedValues)}\n </ul>\n );\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-number.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { ResultTemplatesHelpers } from '@coveo/headless';
 import { I as InitializeBindings } from './initialization-utils.js';
 import { b as defaultNumberFormatter } from './format-common.js';
-import { R as ResultContext } from './result-template-decorators.js';
+import { R as ResultContext } from './stencil-result-template-decorators.js';
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/atomic/components/atomic-result-number.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-number.js","mappings":";;;;;;;;;;;;;;;;MAmBaA,oBAAkB;;;;QAepB,cAAS,GAAoB,sBAAsB,CAAC;QAEpD,mBAAc,GAAkB,IAAI,CAAC;;;yBAFR,sBAAsB;8BAEnB,IAAI;;IAGtC,SAAS,CAAC,KAAmC;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;KAC/B;IAEO,UAAU;QAChB,MAAM,KAAK,GAAG,sBAAsB,CAAC,iBAAiB,CACpD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK,CACX,CAAC;QACF,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QACD,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;QAC7C,IAAI,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CACpB,oBAAoB,KAAK,iBAAiB,IAAI,CAAC,KAAK,gBAAgB,CACrE,CAAC;YACF,OAAO,IAAI,CAAC;SACb;QACD,OAAO,aAAa,CAAC;KACtB;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI;YACF,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAqB,CAAC,CAAC;SACxE;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;SACzB;KACF;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC/C;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;;;;;;;;AArE4B;IAA5B,kBAAkB,EAAE;sDAA4B;AACxB;IAAxB,aAAa,EAAE;oDAAyB;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultNumber"],"sources":["src/components/search/result-template-components/atomic-result-number/atomic-result-number.tsx"],"sourcesContent":["import {Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Prop, Element, State, Listen} from '@stencil/core';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {\n defaultNumberFormatter,\n NumberFormatter,\n} from '../../../common/formats/format-common';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '~~../~~result-template-decorators';\n\n/*\n The `atomic-result-number` component renders the value of a number result field.\n \n @slot default - The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.\n /\n@Component({\n tag: 'atomic-result-number',\n shadow: false,\n})\nexport class AtomicResultNumber {\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n\n @Element() host!: HTMLElement;\n\n @State() public error!: Error;\n\n /\n The field that the component should use.\n * The component will try to find this field in the `Result.raw` object unless it finds it in the `Result` object first.\n * Make sure this field is present in the `fieldsToInclude` property of the `atomic-search-interface` component.\n */\n @Prop({reflect: true}) field!: string;\n\n @State() formatter: NumberFormatter = defaultNumberFormatter;\n\n @State() valueToDisplay: string \| null = null;\n\n @Listen('atomic/numberFormat')\n public setFormat(event: CustomEvent<NumberFormatter>) {\n event.preventDefault();\n event.stopPropagation();\n this.formatter = event.detail;\n }\n\n private parseValue() {\n const value = ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.field\n );\n if (value === null) {\n return null;\n }\n const valueAsNumber = parseFloat(`${value}`);\n if (Number.isNaN(valueAsNumber)) {\n this.error = new Error(\n `Could not parse \"${value}\" from field \"${this.field}\" as a number.`\n );\n return null;\n }\n return valueAsNumber;\n }\n\n private formatValue(value: number) {\n try {\n return this.formatter(value, this.bindings.i18n.languages as string[]);\n } catch (error) {\n this.error = error as Error;\n return value.toString();\n }\n }\n\n private updateValueToDisplay() {\n const value = this.parseValue();\n if (value !== null) {\n this.valueToDisplay = this.formatValue(value);\n }\n }\n\n componentWillRender() {\n this.updateValueToDisplay();\n }\n\n public render() {\n if (this.valueToDisplay === null) {\n this.host.remove();\n return;\n }\n return this.valueToDisplay;\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-number.js","mappings":";;;;;;;;;;;;;;;;MAmBaA,oBAAkB;;;;QAepB,cAAS,GAAoB,sBAAsB,CAAC;QAEpD,mBAAc,GAAkB,IAAI,CAAC;;;yBAFR,sBAAsB;8BAEnB,IAAI;;IAGtC,SAAS,CAAC,KAAmC;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;KAC/B;IAEO,UAAU;QAChB,MAAM,KAAK,GAAG,sBAAsB,CAAC,iBAAiB,CACpD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK,CACX,CAAC;QACF,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QACD,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;QAC7C,IAAI,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CACpB,oBAAoB,KAAK,iBAAiB,IAAI,CAAC,KAAK,gBAAgB,CACrE,CAAC;YACF,OAAO,IAAI,CAAC;SACb;QACD,OAAO,aAAa,CAAC;KACtB;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI;YACF,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAqB,CAAC,CAAC;SACxE;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;YAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;SACzB;KACF;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC/C;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;;;;;;;;AArE4B;IAA5B,kBAAkB,EAAE;sDAA4B;AACxB;IAAxB,aAAa,EAAE;oDAAyB;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultNumber"],"sources":["src/components/search/result-template-components/atomic-result-number/atomic-result-number.tsx"],"sourcesContent":["import {Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Prop, Element, State, Listen} from '@stencil/core';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {\n defaultNumberFormatter,\n NumberFormatter,\n} from '../../../common/formats/format-common';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '@/src/components/search/result-template-component-utils/context/stencil-result-template-decorators';\n\n/*\n The `atomic-result-number` component renders the value of a number result field.\n \n @slot default - The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.\n /\n@Component({\n tag: 'atomic-result-number',\n shadow: false,\n})\nexport class AtomicResultNumber {\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n\n @Element() host!: HTMLElement;\n\n @State() public error!: Error;\n\n /\n The field that the component should use.\n * The component will try to find this field in the `Result.raw` object unless it finds it in the `Result` object first.\n * Make sure this field is present in the `fieldsToInclude` property of the `atomic-search-interface` component.\n */\n @Prop({reflect: true}) field!: string;\n\n @State() formatter: NumberFormatter = defaultNumberFormatter;\n\n @State() valueToDisplay: string \| null = null;\n\n @Listen('atomic/numberFormat')\n public setFormat(event: CustomEvent<NumberFormatter>) {\n event.preventDefault();\n event.stopPropagation();\n this.formatter = event.detail;\n }\n\n private parseValue() {\n const value = ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.field\n );\n if (value === null) {\n return null;\n }\n const valueAsNumber = parseFloat(`${value}`);\n if (Number.isNaN(valueAsNumber)) {\n this.error = new Error(\n `Could not parse \"${value}\" from field \"${this.field}\" as a number.`\n );\n return null;\n }\n return valueAsNumber;\n }\n\n private formatValue(value: number) {\n try {\n return this.formatter(value, this.bindings.i18n.languages as string[]);\n } catch (error) {\n this.error = error as Error;\n return value.toString();\n }\n }\n\n private updateValueToDisplay() {\n const value = this.parseValue();\n if (value !== null) {\n this.valueToDisplay = this.formatValue(value);\n }\n }\n\n componentWillRender() {\n this.updateValueToDisplay();\n }\n\n public render() {\n if (this.valueToDisplay === null) {\n this.host.remove();\n return;\n }\n return this.valueToDisplay;\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-printable-uri.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { F as FocusTargetController } from './stencil-accessibility-utils.js';
 import { p as parseXML } from './utils.js';
 import { g as getAttributesFromLinkSlot } from './attributes-slot.js';
 import { L as LinkWithItemAnalytics } from './stencil-item-link.js';
-import { R as ResultContext } from './result-template-decorators.js';
+import { R as ResultContext } from './stencil-result-template-decorators.js';
 import { d as defineCustomElement$3 } from './atomic-result-text2.js';
 import { d as defineCustomElement$2 } from './atomic-text2.js';

package/dist/atomic/components/atomic-result-printable-uri.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-printable-uri.js","mappings":"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","names":["AtomicResultPrintableUri","Arrow"],"sources":["src/components/search/result-template-components/atomic-result-printable-uri/atomic-result-printable-uri.pcss?tag=atomic-result-printable-uri","src/components/search/result-template-components/atomic-result-printable-uri/atomic-result-printable-uri.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n\natomic-result-printable-uri {\n max-width: 100%;\n word-break: break-word;\n\n a,\n button {\n @apply text-primary;\n\n &:hover,\n &:focus-visible {\n text-decoration: underline;\n @apply text-primary;\n }\n\n &:focus {\n outline: none;\n }\n\n &:visited {\n @apply text-visited;\n }\n }\n\n ul {\n display: flex;\n flex-wrap: wrap;\n }\n\n li {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n\n a {\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n white-space: nowrap;\n &:last-child {\n white-space: normal;\n\n &::after {\n content: none;\n }\n }\n\n .result-printable-uri-separator {\n display: inline-block;\n margin: 0 0.5rem;\n vertical-align: middle;\n width: 0.75rem;\n height: 0.75rem;\n @apply text-neutral-dark;\n }\n }\n}\n","import {Schema, NumberValue} from '@coveo/bueno';\nimport {\n buildInteractiveResult,\n InteractiveResult,\n Result,\n} from '@coveo/headless';\nimport {Component, Element, h, Prop, State, VNode} from '@stencil/core';\nimport Arrow from '../../../../images/arrow-right.svg';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {parseXML} from '../../../../utils/utils';\nimport {getAttributesFromLinkSlot} from '../../../common/item-link/attributes-slot';\nimport {LinkWithItemAnalytics} from '../../../common/item-link/stencil-item-link';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '../result-template-decorators';\n\n/*\n The `atomic-result-printable-uri` component displays the URI, or path, to access a result.\n \n @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.\n * To be used exclusively in anchor elements, such as: `<a slot=\"attributes\" target=\"_blank\" download></a>`.\n /\n@Component({\n tag: 'atomic-result-printable-uri',\n styleUrl: 'atomic-result-printable-uri.pcss',\n shadow: false,\n})\nexport class AtomicResultPrintableUri {\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n @Element() public host!: HTMLElement;\n\n @State() listExpanded = false;\n @State() error!: Error;\n\n /\n The maximum number of Uri parts to display. This has to be over the minimum of `3` in order to be effective. Putting `Infinity` will disable the ellipsis.\n */\n @Prop({reflect: true}) maxNumberOfParts = 5;\n\n private expandedPartFocus?: FocusTargetController;\n\n private interactiveResult!: InteractiveResult;\n private linkAttributes?: Attr[];\n\n private get focusTarget() {\n if (!this.expandedPartFocus) {\n this.expandedPartFocus = new FocusTargetController(this);\n }\n return this.expandedPartFocus;\n }\n\n public connectedCallback() {\n try {\n new Schema({\n maxNumberOfParts: new NumberValue({min: 3}),\n }).validate({maxNumberOfParts: this.maxNumberOfParts});\n } catch (error) {\n this.error = error as Error;\n }\n const slotName = 'attributes';\n this.linkAttributes = getAttributesFromLinkSlot(this.host, slotName);\n }\n\n public initialize() {\n this.interactiveResult = buildInteractiveResult(this.bindings.engine, {\n options: {result: this.result},\n });\n }\n\n private getIndexOfEllipsis(parentsCount: number) {\n const valuesToHide = Math.max(2, parentsCount - this.maxNumberOfParts);\n const valuesToShowBeforeEllipsis = parentsCount - valuesToHide - 1;\n return valuesToShowBeforeEllipsis;\n }\n\n private renderEllipsis() {\n return (\n <li>\n <button\n aria-label={this.bindings.i18n.t('collapsed-uri-parts')}\n onClick={(e) => {\n e.stopPropagation();\n this.focusTarget.focusOnNextTarget();\n this.listExpanded = true;\n }}\n >\n ...\n </button>\n {this.renderSeparator()}\n </li>\n );\n }\n\n private get allParents() {\n const parentsXml = parseXML(`${this.result.raw.parents}`);\n const parents = Array.from(parentsXml.getElementsByTagName('parent'));\n const ellipsisIndex = this.getIndexOfEllipsis(parents.length);\n return parents.map((parent, i) => {\n const name = parent.getAttribute('name');\n const uri = parent.getAttribute('uri')!;\n return (\n <li>\n {this.renderLink(name, uri, i === ellipsisIndex)}\n {i === parents.length - 1 ? null : this.renderSeparator()}\n </li>\n );\n });\n }\n\n private renderSeparator() {\n return (\n <atomic-icon\n class=\"result-printable-uri-separator\"\n icon={Arrow}\n role=\"separator\"\n ></atomic-icon>\n );\n }\n\n private renderParents() {\n const parents = this.allParents;\n if (this.listExpanded \|\| parents.length <= this.maxNumberOfParts) {\n return parents;\n }\n\n return [\n parents.slice(0, this.getIndexOfEllipsis(parents.length)),\n this.renderEllipsis(),\n parents.slice(-1),\n ];\n }\n\n private renderLink(\n content: VNode \| string \| null,\n uri: string,\n shouldSetTarget: boolean\n ) {\n return (\n <LinkWithItemAnalytics\n href={uri}\n title={typeof content === 'string' ? content : undefined}\n onSelect={() => this.interactiveResult.select()}\n onBeginDelayedSelect={() => this.interactiveResult.beginDelayedSelect()}\n onCancelPendingSelect={() =>\n this.interactiveResult.cancelPendingSelect()\n }\n attributes={this.linkAttributes}\n ref={\n shouldSetTarget\n ? (el?: HTMLAnchorElement) => this.focusTarget.setTarget(el)\n : undefined\n }\n >\n {content}\n </LinkWithItemAnalytics>\n );\n }\n\n public render() {\n const parents = this.renderParents();\n if (parents.length) {\n return (\n <ul aria-label={this.bindings.i18n.t('printable-uri')}>{parents}</ul>\n );\n }\n\n return this.renderLink(\n <atomic-result-text field=\"printableUri\"></atomic-result-text>,\n this.result.clickUri,\n false\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-printable-uri.js","mappings":"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","names":["AtomicResultPrintableUri","Arrow"],"sources":["src/components/search/result-template-components/atomic-result-printable-uri/atomic-result-printable-uri.pcss?tag=atomic-result-printable-uri","src/components/search/result-template-components/atomic-result-printable-uri/atomic-result-printable-uri.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n\natomic-result-printable-uri {\n max-width: 100%;\n word-break: break-word;\n\n a,\n button {\n @apply text-primary;\n\n &:hover,\n &:focus-visible {\n text-decoration: underline;\n @apply text-primary;\n }\n\n &:focus {\n outline: none;\n }\n\n &:visited {\n @apply text-visited;\n }\n }\n\n ul {\n display: flex;\n flex-wrap: wrap;\n }\n\n li {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n\n a {\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n white-space: nowrap;\n &:last-child {\n white-space: normal;\n\n &::after {\n content: none;\n }\n }\n\n .result-printable-uri-separator {\n display: inline-block;\n margin: 0 0.5rem;\n vertical-align: middle;\n width: 0.75rem;\n height: 0.75rem;\n @apply text-neutral-dark;\n }\n }\n}\n","import {Schema, NumberValue} from '@coveo/bueno';\nimport {\n buildInteractiveResult,\n InteractiveResult,\n Result,\n} from '@coveo/headless';\nimport {Component, Element, h, Prop, State, VNode} from '@stencil/core';\nimport Arrow from '../../../../images/arrow-right.svg';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';\nimport {parseXML} from '../../../../utils/utils';\nimport {getAttributesFromLinkSlot} from '../../../common/item-link/attributes-slot';\nimport {LinkWithItemAnalytics} from '../../../common/item-link/stencil-item-link';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '@/src/components/search/result-template-component-utils/context/stencil-result-template-decorators';\n\n/*\n The `atomic-result-printable-uri` component displays the URI, or path, to access a result.\n \n @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.\n * To be used exclusively in anchor elements, such as: `<a slot=\"attributes\" target=\"_blank\" download></a>`.\n /\n@Component({\n tag: 'atomic-result-printable-uri',\n styleUrl: 'atomic-result-printable-uri.pcss',\n shadow: false,\n})\nexport class AtomicResultPrintableUri {\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n @Element() public host!: HTMLElement;\n\n @State() listExpanded = false;\n @State() error!: Error;\n\n /\n The maximum number of Uri parts to display. This has to be over the minimum of `3` in order to be effective. Putting `Infinity` will disable the ellipsis.\n */\n @Prop({reflect: true}) maxNumberOfParts = 5;\n\n private expandedPartFocus?: FocusTargetController;\n\n private interactiveResult!: InteractiveResult;\n private linkAttributes?: Attr[];\n\n private get focusTarget() {\n if (!this.expandedPartFocus) {\n this.expandedPartFocus = new FocusTargetController(this);\n }\n return this.expandedPartFocus;\n }\n\n public connectedCallback() {\n try {\n new Schema({\n maxNumberOfParts: new NumberValue({min: 3}),\n }).validate({maxNumberOfParts: this.maxNumberOfParts});\n } catch (error) {\n this.error = error as Error;\n }\n const slotName = 'attributes';\n this.linkAttributes = getAttributesFromLinkSlot(this.host, slotName);\n }\n\n public initialize() {\n this.interactiveResult = buildInteractiveResult(this.bindings.engine, {\n options: {result: this.result},\n });\n }\n\n private getIndexOfEllipsis(parentsCount: number) {\n const valuesToHide = Math.max(2, parentsCount - this.maxNumberOfParts);\n const valuesToShowBeforeEllipsis = parentsCount - valuesToHide - 1;\n return valuesToShowBeforeEllipsis;\n }\n\n private renderEllipsis() {\n return (\n <li>\n <button\n aria-label={this.bindings.i18n.t('collapsed-uri-parts')}\n onClick={(e) => {\n e.stopPropagation();\n this.focusTarget.focusOnNextTarget();\n this.listExpanded = true;\n }}\n >\n ...\n </button>\n {this.renderSeparator()}\n </li>\n );\n }\n\n private get allParents() {\n const parentsXml = parseXML(`${this.result.raw.parents}`);\n const parents = Array.from(parentsXml.getElementsByTagName('parent'));\n const ellipsisIndex = this.getIndexOfEllipsis(parents.length);\n return parents.map((parent, i) => {\n const name = parent.getAttribute('name');\n const uri = parent.getAttribute('uri')!;\n return (\n <li>\n {this.renderLink(name, uri, i === ellipsisIndex)}\n {i === parents.length - 1 ? null : this.renderSeparator()}\n </li>\n );\n });\n }\n\n private renderSeparator() {\n return (\n <atomic-icon\n class=\"result-printable-uri-separator\"\n icon={Arrow}\n role=\"separator\"\n ></atomic-icon>\n );\n }\n\n private renderParents() {\n const parents = this.allParents;\n if (this.listExpanded \|\| parents.length <= this.maxNumberOfParts) {\n return parents;\n }\n\n return [\n parents.slice(0, this.getIndexOfEllipsis(parents.length)),\n this.renderEllipsis(),\n parents.slice(-1),\n ];\n }\n\n private renderLink(\n content: VNode \| string \| null,\n uri: string,\n shouldSetTarget: boolean\n ) {\n return (\n <LinkWithItemAnalytics\n href={uri}\n title={typeof content === 'string' ? content : undefined}\n onSelect={() => this.interactiveResult.select()}\n onBeginDelayedSelect={() => this.interactiveResult.beginDelayedSelect()}\n onCancelPendingSelect={() =>\n this.interactiveResult.cancelPendingSelect()\n }\n attributes={this.linkAttributes}\n ref={\n shouldSetTarget\n ? (el?: HTMLAnchorElement) => this.focusTarget.setTarget(el)\n : undefined\n }\n >\n {content}\n </LinkWithItemAnalytics>\n );\n }\n\n public render() {\n const parents = this.renderParents();\n if (parents.length) {\n return (\n <ul aria-label={this.bindings.i18n.t('printable-uri')}>{parents}</ul>\n );\n }\n\n return this.renderLink(\n <atomic-result-text field=\"printableUri\"></atomic-result-text>,\n this.result.clickUri,\n false\n );\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-rating.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { ResultTemplatesHelpers } from '@coveo/headless';
 import { S as Star, c as computeNumberOfStars, R as Rating } from './stencil-rating.js';
 import { I as InitializeBindings } from './initialization-utils.js';
-import { R as ResultContext } from './result-template-decorators.js';
+import { R as ResultContext } from './stencil-result-template-decorators.js';
 const atomicResultRatingCss = "/*! 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  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(0.25rem * 0);\n  }\n  .-top-2 {\n    top: calc(0.25rem * -2);\n  }\n  .-top-4 {\n    top: calc(0.25rem * -4);\n  }\n  .top-0 {\n    top: calc(0.25rem * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-6 {\n    top: calc(0.25rem * 6);\n  }\n  .top-\\[4px\\] {\n    top: 4px;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .top-px {\n    top: 1px;\n  }\n  .-right-2 {\n    right: calc(0.25rem * -2);\n  }\n  .right-0 {\n    right: calc(0.25rem * 0);\n  }\n  .right-2 {\n    right: calc(0.25rem * 2);\n  }\n  .right-6 {\n    right: calc(0.25rem * 6);\n  }\n  .right-12 {\n    right: calc(0.25rem * 12);\n  }\n  .right-20 {\n    right: calc(0.25rem * 20);\n  }\n  .right-px {\n    right: 1px;\n  }\n  .bottom-0 {\n    bottom: calc(0.25rem * 0);\n  }\n  .bottom-1 {\n    bottom: calc(0.25rem * 1);\n  }\n  .bottom-2 {\n    bottom: calc(0.25rem * 2);\n  }\n  .bottom-px {\n    bottom: 1px;\n  }\n  .left-0 {\n    left: calc(0.25rem * 0);\n  }\n  .left-1 {\n    left: calc(0.25rem * 1);\n  }\n  .left-2 {\n    left: calc(0.25rem * 2);\n  }\n  .left-\\[15px\\] {\n    left: 15px;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .order-last {\n    order: 9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .container {\n    width: 100%;\n  }\n  @media (width >= 1024px) {\n    .container {\n      max-width: 1024px;\n    }\n  }\n  @media (width >= 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n  @media (width >= 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n  @media (width >= 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n  @media (width >= 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n  @media (width >= 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(0.25rem * 0);\n  }\n  .m-2 {\n    margin: calc(0.25rem * 2);\n  }\n  .mx-0 {\n    margin-inline: calc(0.25rem * 0);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(0.25rem * 0.5);\n  }\n  .mx-1 {\n    margin-inline: calc(0.25rem * 1);\n  }\n  .mx-6 {\n    margin-inline: calc(0.25rem * 6);\n  }\n  .mx-16 {\n    margin-inline: calc(0.25rem * 16);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-2 {\n    margin-block: calc(0.25rem * 2);\n  }\n  .my-3 {\n    margin-block: calc(0.25rem * 3);\n  }\n  .my-4 {\n    margin-block: calc(0.25rem * 4);\n  }\n  .my-6 {\n    margin-block: calc(0.25rem * 6);\n  }\n  .my-auto {\n    margin-block: auto;\n  }\n  .mt-0 {\n    margin-top: calc(0.25rem * 0);\n  }\n  .mt-1 {\n    margin-top: calc(0.25rem * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(0.25rem * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(0.25rem * 2);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(0.25rem * 2.5);\n  }\n  .mt-3 {\n    margin-top: calc(0.25rem * 3);\n  }\n  .mt-4 {\n    margin-top: calc(0.25rem * 4);\n  }\n  .mt-6 {\n    margin-top: calc(0.25rem * 6);\n  }\n  .mt-7 {\n    margin-top: calc(0.25rem * 7);\n  }\n  .mt-8 {\n    margin-top: calc(0.25rem * 8);\n  }\n  .mt-10 {\n    margin-top: calc(0.25rem * 10);\n  }\n  .mt-px {\n    margin-top: 1px;\n  }\n  .mr-0 {\n    margin-right: calc(0.25rem * 0);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(0.25rem * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(0.25rem * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(0.25rem * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(0.25rem * 2);\n  }\n  .mr-3 {\n    margin-right: calc(0.25rem * 3);\n  }\n  .mr-6 {\n    margin-right: calc(0.25rem * 6);\n  }\n  .mb-0 {\n    margin-bottom: calc(0.25rem * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(0.25rem * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(0.25rem * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(0.25rem * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(0.25rem * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(0.25rem * 6);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(0.25rem * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(0.25rem * 1);\n  }\n  .ml-2 {\n    margin-left: calc(0.25rem * 2);\n  }\n  .ml-4 {\n    margin-left: calc(0.25rem * 4);\n  }\n  .ml-6 {\n    margin-left: calc(0.25rem * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 4;\n  }\n  .line-clamp-none {\n    overflow: visible;\n    display: block;\n    -webkit-box-orient: horizontal;\n    -webkit-line-clamp: unset;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-\\[27px\\] {\n    width: 27px;\n    height: 27px;\n  }\n  .h-1 {\n    height: calc(0.25rem * 1);\n  }\n  .h-2 {\n    height: calc(0.25rem * 2);\n  }\n  .h-2\\.5 {\n    height: calc(0.25rem * 2.5);\n  }\n  .h-3 {\n    height: calc(0.25rem * 3);\n  }\n  .h-4 {\n    height: calc(0.25rem * 4);\n  }\n  .h-5 {\n    height: calc(0.25rem * 5);\n  }\n  .h-5\\/6 {\n    height: calc(5/6 * 100%);\n  }\n  .h-6 {\n    height: calc(0.25rem * 6);\n  }\n  .h-7 {\n    height: calc(0.25rem * 7);\n  }\n  .h-8 {\n    height: calc(0.25rem * 8);\n  }\n  .h-9 {\n    height: calc(0.25rem * 9);\n  }\n  .h-10 {\n    height: calc(0.25rem * 10);\n  }\n  .h-12 {\n    height: calc(0.25rem * 12);\n  }\n  .h-\\[2\\.6rem\\] {\n    height: 2.6rem;\n  }\n  .h-\\[9px\\] {\n    height: 9px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-96 {\n    max-height: calc(0.25rem * 96);\n  }\n  .min-h-10 {\n    min-height: calc(0.25rem * 10);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .w-0\\.5 {\n    width: calc(0.25rem * 0.5);\n  }\n  .w-1 {\n    width: calc(0.25rem * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1/2 * 100%);\n  }\n  .w-2 {\n    width: calc(0.25rem * 2);\n  }\n  .w-2\\.5 {\n    width: calc(0.25rem * 2.5);\n  }\n  .w-3 {\n    width: calc(0.25rem * 3);\n  }\n  .w-3\\.5 {\n    width: calc(0.25rem * 3.5);\n  }\n  .w-3\\/5 {\n    width: calc(3/5 * 100%);\n  }\n  .w-4 {\n    width: calc(0.25rem * 4);\n  }\n  .w-5 {\n    width: calc(0.25rem * 5);\n  }\n  .w-5\\/6 {\n    width: calc(5/6 * 100%);\n  }\n  .w-6 {\n    width: calc(0.25rem * 6);\n  }\n  .w-7 {\n    width: calc(0.25rem * 7);\n  }\n  .w-8 {\n    width: calc(0.25rem * 8);\n  }\n  .w-9 {\n    width: calc(0.25rem * 9);\n  }\n  .w-10 {\n    width: calc(0.25rem * 10);\n  }\n  .w-12 {\n    width: calc(0.25rem * 12);\n  }\n  .w-20 {\n    width: calc(0.25rem * 20);\n  }\n  .w-26 {\n    width: calc(0.25rem * 26);\n  }\n  .w-28 {\n    width: calc(0.25rem * 28);\n  }\n  .w-32 {\n    width: calc(0.25rem * 32);\n  }\n  .w-36 {\n    width: calc(0.25rem * 36);\n  }\n  .w-44 {\n    width: calc(0.25rem * 44);\n  }\n  .w-48 {\n    width: calc(0.25rem * 48);\n  }\n  .w-60 {\n    width: calc(0.25rem * 60);\n  }\n  .w-64 {\n    width: calc(0.25rem * 64);\n  }\n  .w-72 {\n    width: calc(0.25rem * 72);\n  }\n  .w-100 {\n    width: calc(0.25rem * 100);\n  }\n  .w-\\[2\\.6rem\\] {\n    width: 2.6rem;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-max {\n    width: max-content;\n  }\n  .max-w-4\\/5 {\n    max-width: calc(4/5 * 100%);\n  }\n  .max-w-60 {\n    max-width: calc(0.25rem * 60);\n  }\n  .max-w-\\[30ch\\] {\n    max-width: 30ch;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: 32rem;\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-0 {\n    min-width: calc(0.25rem * 0);\n  }\n  .min-w-10 {\n    min-width: calc(0.25rem * 10);\n  }\n  .min-w-20 {\n    min-width: calc(0.25rem * 20);\n  }\n  .min-w-24 {\n    min-width: calc(0.25rem * 24);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .basis-1\\/2 {\n    flex-basis: calc(1/2 * 100%);\n  }\n  .basis-8 {\n    flex-basis: calc(0.25rem * 8);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1/2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n  .cursor-\\[inherit\\] {\n    cursor: inherit;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .list-outside {\n    list-style-position: outside;\n  }\n  .list-decimal {\n    list-style-type: decimal;\n  }\n  .list-disc {\n    list-style-type: disc;\n  }\n  .list-none {\n    list-style-type: none;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-\\[min-content_1fr\\] {\n    grid-template-columns: min-content 1fr;\n  }\n  .grid-cols-\\[min-content_auto\\] {\n    grid-template-columns: min-content auto;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(0.25rem * 0.5);\n  }\n  .gap-1 {\n    gap: calc(0.25rem * 1);\n  }\n  .gap-2 {\n    gap: calc(0.25rem * 2);\n  }\n  .gap-3 {\n    gap: calc(0.25rem * 3);\n  }\n  .gap-4 {\n    gap: calc(0.25rem * 4);\n  }\n  .gap-8 {\n    gap: calc(0.25rem * 8);\n  }\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(0.25rem * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(0.25rem * 2);\n  }\n  .gap-x-4 {\n    column-gap: calc(0.25rem * 4);\n  }\n  :where(.space-x-1\\.5 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(0.25rem * 0.5);\n  }\n  :where(.divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n  :where(.divide-neutral > :not(:last-child)) {\n    border-color: var(--atomic-neutral);\n  }\n  .self-center {\n    align-self: center;\n  }\n  .self-start {\n    align-self: flex-start;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-clip {\n    overflow-x: clip;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overflow-y-visible {\n    overflow-y: visible;\n  }\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  .rounded {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--atomic-border-radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--atomic-border-radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-sm {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-xl {\n    border-radius: var(--atomic-border-radius-xl);\n  }\n  .rounded-tl-none {\n    border-top-left-radius: 0;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-gray-200 {\n    border-color: oklch(0.928 0.006 264.531);\n  }\n  .border-neutral {\n    border-color: var(--atomic-neutral);\n  }\n  .border-neutral-dark {\n    border-color: var(--atomic-neutral-dark);\n  }\n  .border-neutral-dim {\n    border-color: var(--atomic-neutral-dim);\n  }\n  .border-primary {\n    border-color: var(--atomic-primary);\n  }\n  .border-primary-light {\n    border-color: var(--atomic-primary-light);\n  }\n  .border-t-neutral {\n    border-top-color: var(--atomic-neutral);\n  }\n  .border-b-neutral {\n    border-bottom-color: var(--atomic-neutral);\n  }\n  .border-b-neutral-dim {\n    border-bottom-color: var(--atomic-neutral-dim);\n  }\n  .border-l-neutral {\n    border-left-color: var(--atomic-neutral);\n  }\n  .border-l-neutral-dim {\n    border-left-color: var(--atomic-neutral-dim);\n  }\n  .bg-\\[\\#F1F2FF\\] {\n    background-color: #F1F2FF;\n  }\n  .bg-\\[rgba\\(40\\,40\\,40\\,0\\.8\\)\\] {\n    background-color: rgba(40,40,40,0.8);\n  }\n  .bg-background {\n    background-color: var(--atomic-background);\n  }\n  .bg-error {\n    background-color: var(--atomic-error);\n  }\n  .bg-gray-50 {\n    background-color: oklch(0.985 0.002 247.839);\n  }\n  .bg-neutral {\n    background-color: var(--atomic-neutral);\n  }\n  .bg-neutral-dark {\n    background-color: var(--atomic-neutral-dark);\n  }\n  .bg-neutral-light {\n    background-color: var(--atomic-neutral-light);\n  }\n  .bg-primary {\n    background-color: var(--atomic-primary);\n  }\n  .bg-primary-background {\n    background-color: var(--atomic-primary-background);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: #fff;\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-l {\n      --tw-gradient-position: to left in oklab;\n    }\n  }\n  .bg-linear-to-l {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-linear-to-r {\n    --tw-gradient-position: to right;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-r {\n      --tw-gradient-position: to right in oklab;\n    }\n  }\n  .bg-linear-to-r {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-background\\/60 {\n    --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n  }\n  @supports (color: color-mix(in lab, red, red)) {\n    .from-background\\/60 {\n      --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n    }\n  }\n  .from-background\\/60 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .from-more-results-progress-bar-color-from {\n    --tw-gradient-from: var(\n    --atomic-more-results-progress-bar-color-from,\n    var(--atomic-primary-dark)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-more-results-progress-bar-color-to {\n    --tw-gradient-to: var(\n    --atomic-more-results-progress-bar-color-to,\n    var(--atomic-primary-light)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .stroke-\\[1\\.25\\] {\n    stroke-width: 1.25;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(0.25rem * 0);\n  }\n  .p-1 {\n    padding: calc(0.25rem * 1);\n  }\n  .p-2 {\n    padding: calc(0.25rem * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(0.25rem * 2.5);\n  }\n  .p-3 {\n    padding: calc(0.25rem * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(0.25rem * 3.5);\n  }\n  .p-4 {\n    padding: calc(0.25rem * 4);\n  }\n  .p-6 {\n    padding: calc(0.25rem * 6);\n  }\n  .p-7 {\n    padding: calc(0.25rem * 7);\n  }\n  .p-8 {\n    padding: calc(0.25rem * 8);\n  }\n  .px-1 {\n    padding-inline: calc(0.25rem * 1);\n  }\n  .px-2 {\n    padding-inline: calc(0.25rem * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(0.25rem * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(0.25rem * 3);\n  }\n  .px-4 {\n    padding-inline: calc(0.25rem * 4);\n  }\n  .px-6 {\n    padding-inline: calc(0.25rem * 6);\n  }\n  .px-9 {\n    padding-inline: calc(0.25rem * 9);\n  }\n  .py-0\\.5 {\n    padding-block: calc(0.25rem * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(0.25rem * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(0.25rem * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(0.25rem * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(0.25rem * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(0.25rem * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(0.25rem * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(0.25rem * 4);\n  }\n  .py-4\\.5 {\n    padding-block: calc(0.25rem * 4.5);\n  }\n  .py-5 {\n    padding-block: calc(0.25rem * 5);\n  }\n  .py-6 {\n    padding-block: calc(0.25rem * 6);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(0.25rem * 0.5);\n  }\n  .pt-8 {\n    padding-top: calc(0.25rem * 8);\n  }\n  .pr-2 {\n    padding-right: calc(0.25rem * 2);\n  }\n  .pr-6 {\n    padding-right: calc(0.25rem * 6);\n  }\n  .pr-24 {\n    padding-right: calc(0.25rem * 24);\n  }\n  .pb-1 {\n    padding-bottom: calc(0.25rem * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(0.25rem * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(0.25rem * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(0.25rem * 5);\n  }\n  .pb-6 {\n    padding-bottom: calc(0.25rem * 6);\n  }\n  .pl-0 {\n    padding-left: calc(0.25rem * 0);\n  }\n  .pl-1 {\n    padding-left: calc(0.25rem * 1);\n  }\n  .pl-3 {\n    padding-left: calc(0.25rem * 3);\n  }\n  .pl-7 {\n    padding-left: calc(0.25rem * 7);\n  }\n  .pl-9 {\n    padding-left: calc(0.25rem * 9);\n  }\n  .pl-10 {\n    padding-left: calc(0.25rem * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-baseline {\n    vertical-align: baseline;\n  }\n  .align-bottom {\n    vertical-align: bottom;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .font-sans {\n    font-family: var(--atomic-font-family);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .text-2xl {\n    font-size: var(--atomic-text-2xl);\n    line-height: var(--tw-leading, calc(2 / 1.5));\n  }\n  .text-base {\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n  }\n  .text-lg {\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  .text-sm {\n    font-size: var(--atomic-text-sm);\n    line-height: var(--tw-leading, calc(1.25 / 0.875));\n  }\n  .text-xl {\n    font-size: var(--atomic-text-xl);\n    line-height: var(--tw-leading, calc(1.75 / 1.25));\n  }\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: var(--tw-leading, calc(1 / 0.75));\n  }\n  .text-xs\\/\\[1rem\\] {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .leading-4 {\n    --tw-leading: calc(0.25rem * 4);\n    line-height: calc(0.25rem * 4);\n  }\n  .leading-5 {\n    --tw-leading: calc(0.25rem * 5);\n    line-height: calc(0.25rem * 5);\n  }\n  .leading-6 {\n    --tw-leading: calc(0.25rem * 6);\n    line-height: calc(0.25rem * 6);\n  }\n  .leading-8 {\n    --tw-leading: calc(0.25rem * 8);\n    line-height: calc(0.25rem * 8);\n  }\n  .leading-10 {\n    --tw-leading: calc(0.25rem * 10);\n    line-height: calc(0.25rem * 10);\n  }\n  .leading-\\[1\\.5\\] {\n    --tw-leading: 1.5;\n    line-height: 1.5;\n  }\n  .leading-\\[calc\\(1\\/\\.75\\)\\] {\n    --tw-leading: calc(1 / .75);\n    line-height: calc(1 / .75);\n  }\n  .leading-\\[var\\(--line-height\\)\\] {\n    --tw-leading: var(--line-height);\n    line-height: var(--line-height);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n  .font-light {\n    --tw-font-weight: 300;\n    font-weight: 300;\n  }\n  .font-medium {\n    --tw-font-weight: 500;\n    font-weight: 500;\n  }\n  .font-normal {\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: 600;\n    font-weight: 600;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .break-keep {\n    word-break: keep-all;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-normal {\n    white-space: normal;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#54698D\\] {\n    color: #54698D;\n  }\n  .text-\\[inherit\\] {\n    color: inherit;\n  }\n  .text-black {\n    color: #000;\n  }\n  .text-error {\n    color: var(--atomic-error);\n  }\n  .text-gray-500 {\n    color: oklch(0.551 0.027 264.364);\n  }\n  .text-gray-600 {\n    color: oklch(0.446 0.03 256.802);\n  }\n  .text-gray-700 {\n    color: oklch(0.373 0.034 259.733);\n  }\n  .text-gray-900 {\n    color: oklch(0.21 0.034 264.665);\n  }\n  .text-green-600 {\n    color: oklch(0.627 0.194 149.214);\n  }\n  .text-inline-code {\n    color: var(--atomic-inline-code);\n  }\n  .text-neutral {\n    color: var(--atomic-neutral);\n  }\n  .text-neutral-dark {\n    color: var(--atomic-neutral-dark);\n  }\n  .text-on-background {\n    color: var(--atomic-on-background);\n  }\n  .text-on-primary {\n    color: var(--atomic-on-primary);\n  }\n  .text-primary {\n    color: var(--atomic-primary);\n  }\n  .text-primary-light {\n    color: var(--atomic-primary-light);\n  }\n  .text-rating-icon-active {\n    color: var(--atomic-rating-icon-active-color, #f6ce3c);\n  }\n  .text-rating-icon-inactive {\n    color: var(\n    --atomic-rating-icon-inactive-color,\n    var(--atomic-neutral)\n  );\n  }\n  .text-success {\n    color: var(--atomic-success);\n  }\n  .text-transparent {\n    color: transparent;\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .placeholder-neutral-dark::placeholder {\n    color: var(--atomic-neutral-dark);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-80 {\n    opacity: 80%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-inner-primary {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-t-lg {\n    --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-3 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-primary {\n    --tw-ring-color: var(--atomic-primary);\n  }\n  .ring-primary-light {\n    --tw-ring-color: var(--atomic-primary-light);\n  }\n  .ring-ring-primary {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-error {\n    outline-color: var(--atomic-error);\n  }\n  .outline-neutral {\n    outline-color: var(--atomic-neutral);\n  }\n  .outline-primary {\n    outline-color: var(--atomic-primary);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .grayscale {\n    --tw-grayscale: grayscale(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, 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.icon-active {\n  color: var(--atomic-rating-icon-active-color, #f6ce3c);\n}\n.icon-inactive {\n  color: var(\n    --atomic-rating-icon-inactive-color,\n    var(--atomic-neutral)\n  );\n}\n.icon-active svg path, .icon-inactive svg path {\n  stroke: var(--atomic-rating-icon-outline);\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
 const AtomicResultRatingStyle0 = atomicResultRatingCss;

package/dist/atomic/components/atomic-result-rating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-rating.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,03jEAA03jE,CAAC;AACz5jE,iCAAe,qBAAqB;;;;;;;;;;;;MCwBvBA,oBAAkB;;;;;;;;QAaC,oBAAe,GAAG,CAAC,CAAC;;;;;;;;;;;;;;QAepB,SAAI,GAAG,IAAI,CAAC;QAIjC,kBAAa,GAAkB,IAAI,CAAC;;+BAnBG,CAAC;oBAeZ,IAAI;;6BAID,IAAI;;IAEpC,mBAAmB;QACzB,MAAM,KAAK,GAAG,sBAAsB,CAAC,iBAAiB,CACpD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK,CACX,CAAC;QACF,IAAI;YACF,IAAI,CAAC,aAAa,GAAG,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9D;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAK,YAAY,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,QACE,EAAC,MAAM,IACL,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,kBAAkB,EAAE,IAAI,CAAC,eAAe,EACxC,mBAAmB,EAAE,IAAI,CAAC,aAAa,EACvC,QAAQ,EAAE,KAAK,GACP,EACV;KACH;;;;;;;;;;AAhE4B;IAA5B,kBAAkB,EAAE;sDAA4B;AACxB;IAAxB,aAAa,EAAE;oDAAyB;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultRating"],"sources":["src/components/search/result-template-components/atomic-result-rating/atomic-result-rating.pcss?tag=atomic-result-rating&encapsulation=shadow","src/components/search/result-template-components/atomic-result-rating/atomic-result-rating.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Element, Prop, h, State} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {\n Rating,\n computeNumberOfStars,\n} from '../../../common/atomic-rating/stencil-rating';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '~~../~~result-template-decorators';\n\n/*\n The `atomic-result-rating` element renders a star rating.\n \n @part value-rating - The wrapper that contains the row of inactive stars and the row of active stars.\n * @part value-rating-icon - The individual star icons used in the rating display.\n /\n@Component({\n tag: 'atomic-result-rating',\n styleUrl: 'atomic-result-rating.pcss',\n shadow: true,\n})\nexport class AtomicResultRating implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n @Element() host!: HTMLElement;\n\n /\n The field whose values you want to display as a rating.\n /\n @Prop({reflect: true}) public field!: string;\n\n /\n The maximum value of the field. This value is also used as the number of icons to be displayed.\n /\n @Prop({reflect: true}) public maxValueInIndex = 5;\n\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 @State() public error!: Error;\n\n @State() numberOfStars: number \| null = null;\n\n private updateNumberOfStars() {\n const value = ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.field\n );\n try {\n this.numberOfStars = computeNumberOfStars(value, this.field);\n } catch (error) {\n this.error = error instanceof Error ? error : new Error(`${error}`);\n this.numberOfStars = null;\n }\n }\n\n componentWillRender() {\n this.updateNumberOfStars();\n }\n\n render() {\n if (this.numberOfStars === null) {\n this.host.remove();\n return;\n }\n return (\n <Rating\n i18n={this.bindings.i18n}\n icon={this.icon}\n numberOfTotalIcons={this.maxValueInIndex}\n numberOfActiveIcons={this.numberOfStars}\n iconSize={0.875}\n ></Rating>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-rating.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,03jEAA03jE,CAAC;AACz5jE,iCAAe,qBAAqB;;;;;;;;;;;;MCwBvBA,oBAAkB;;;;;;;;QAaC,oBAAe,GAAG,CAAC,CAAC;;;;;;;;;;;;;;QAepB,SAAI,GAAG,IAAI,CAAC;QAIjC,kBAAa,GAAkB,IAAI,CAAC;;+BAnBG,CAAC;oBAeZ,IAAI;;6BAID,IAAI;;IAEpC,mBAAmB;QACzB,MAAM,KAAK,GAAG,sBAAsB,CAAC,iBAAiB,CACpD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK,CACX,CAAC;QACF,IAAI;YACF,IAAI,CAAC,aAAa,GAAG,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9D;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAK,YAAY,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO;SACR;QACD,QACE,EAAC,MAAM,IACL,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,kBAAkB,EAAE,IAAI,CAAC,eAAe,EACxC,mBAAmB,EAAE,IAAI,CAAC,aAAa,EACvC,QAAQ,EAAE,KAAK,GACP,EACV;KACH;;;;;;;;;;AAhE4B;IAA5B,kBAAkB,EAAE;sDAA4B;AACxB;IAAxB,aAAa,EAAE;oDAAyB;;;;;;;;;;;;;;;;;;;;","names":["AtomicResultRating"],"sources":["src/components/search/result-template-components/atomic-result-rating/atomic-result-rating.pcss?tag=atomic-result-rating&encapsulation=shadow","src/components/search/result-template-components/atomic-result-rating/atomic-result-rating.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../common/atomic-rating/atomic-rating.pcss';\n","import {Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Element, Prop, h, State} from '@stencil/core';\nimport Star from '../../../../images/star.svg';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {\n Rating,\n computeNumberOfStars,\n} from '../../../common/atomic-rating/stencil-rating';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '@/src/components/search/result-template-component-utils/context/stencil-result-template-decorators';\n\n/*\n The `atomic-result-rating` element renders a star rating.\n \n @part value-rating - The wrapper that contains the row of inactive stars and the row of active stars.\n * @part value-rating-icon - The individual star icons used in the rating display.\n /\n@Component({\n tag: 'atomic-result-rating',\n styleUrl: 'atomic-result-rating.pcss',\n shadow: true,\n})\nexport class AtomicResultRating implements InitializableComponent {\n @InitializeBindings() public bindings!: Bindings;\n @ResultContext() private result!: Result;\n @Element() host!: HTMLElement;\n\n /\n The field whose values you want to display as a rating.\n /\n @Prop({reflect: true}) public field!: string;\n\n /\n The maximum value of the field. This value is also used as the number of icons to be displayed.\n /\n @Prop({reflect: true}) public maxValueInIndex = 5;\n\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 @State() public error!: Error;\n\n @State() numberOfStars: number \| null = null;\n\n private updateNumberOfStars() {\n const value = ResultTemplatesHelpers.getResultProperty(\n this.result,\n this.field\n );\n try {\n this.numberOfStars = computeNumberOfStars(value, this.field);\n } catch (error) {\n this.error = error instanceof Error ? error : new Error(`${error}`);\n this.numberOfStars = null;\n }\n }\n\n componentWillRender() {\n this.updateNumberOfStars();\n }\n\n render() {\n if (this.numberOfStars === null) {\n this.host.remove();\n return;\n }\n return (\n <Rating\n i18n={this.bindings.i18n}\n icon={this.icon}\n numberOfTotalIcons={this.maxValueInIndex}\n numberOfActiveIcons={this.numberOfStars}\n iconSize={0.875}\n ></Rating>\n );\n }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-text2.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { g as getFieldValueCaption } from './field-utils.js';
 import { I as InitializeBindings } from './initialization-utils.js';
 import { g as getStringValueFromResultOrNull } from './result-utils.js';
 import { isArray, isUndefined } from '@coveo/bueno';
-import { R as ResultContext } from './result-template-decorators.js';
+import { R as ResultContext } from './stencil-result-template-decorators.js';
 import { d as defineCustomElement$1 } from './atomic-text2.js';
 function possiblyWarnOnBadFieldType(field, itemValueRaw, host, logger) {
@@ -13,6 +13,9 @@ function possiblyWarnOnBadFieldType(field, itemValueRaw, host, logger) {
     }
 }
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const ItemTextFallback = ({ field, host, logger, defaultValue, item, getProperty }, children) => {
     const raw = getProperty(item, field);
     possiblyWarnOnBadFieldType(field, raw, host, logger);
@@ -39,6 +42,9 @@ function renderWithHighlights(value, highlights, highlightString) {
         .replace(new RegExp(closingDelimiter, 'g'), '</b>');
 }
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const ItemTextHighlighted = ({ highlightKeywords, highlightString, onError, textValue }) => {
     try {
         const highlightedValue = renderWithHighlights(textValue, highlightKeywords, highlightString);