npm - @coveo/atomic - Versions diffs - 3.34.0-pre.da12ea4536 → 3.34.0-pre.db5a030986 - Mend

@coveo/atomic 3.34.0-pre.da12ea4536 → 3.34.0-pre.db5a030986

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

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

	@@ -1 +1 @@
1	- {"file":"atomic-result-list.entry.cjs.js","mappings":"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","names":["tableElementTagName","h","shouldDisplayOnCurrentTab","Hidden","Fragment","randomID","FocusTargetController","buildTabManager","buildResultList","buildResultsPerPage","ItemTemplateProvider","ItemListCommon","createAppLoadedListener","ItemListGuard","DisplayWrapper","ResultsPlaceholdersGuard","ItemDisplayGuard","buildInteractiveResult","getItemListDisplayClasses","DisplayGrid","InitializeBindings","BindStateToController","ArrayProp"],"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.entry.cjs.js","mappings":"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","names":["tableElementTagName","h","shouldDisplayOnCurrentTab","Hidden","Fragment","randomID","FocusTargetController","buildTabManager","buildResultList","buildResultsPerPage","ItemTemplateProvider","ItemListCommon","createAppLoadedListener","ItemListGuard","DisplayWrapper","ResultsPlaceholdersGuard","ItemDisplayGuard","buildInteractiveResult","getItemListDisplayClasses","DisplayGrid","InitializeBindings","BindStateToController","ArrayProp"],"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}

package/dist/cjs/atomic-result-placeholder_8.cjs.entry.js CHANGED Viewed

@@ -28,9 +28,9 @@ const AtomicResultPlaceholder = class {
             } }, index.h("div", { class: placeholderClasses$1, style: { height: 'var(--font-size)' } })));
     }
     render() {
-        return (index.h("div", { key: '9342049a3a13db9db4600419bbd055de8fac4de9', class: `result-root placeholder with-sections animate-pulse ${displayOptions.getItemDisplayClasses(this.display, this.density, this.imageSize)
+        return (index.h("div", { key: '86d4c0d928415a2442d9aa3e0b148597aaa8a36d', class: `result-root placeholder with-sections animate-pulse ${displayOptions.getItemDisplayClasses(this.display, this.density, this.imageSize)
                 .join(' ')
-                .trim()}` }, index.h("atomic-result-section-visual", { key: '3d0e98c133948c19b17e48424dacc54b78b472ef' }, index.h("div", { key: '28cb95fd23905989f67e60234b2187f880b1715e', class: placeholderClasses$1 })), index.h("atomic-result-section-badges", { key: 'e75a8e63ffd720222550cdba1dbcdfbb08aa804c' }, index.h("div", { key: 'ea2a8cf5cf87b2b7ac563b86032198afbf7bcfee', class: `badge ${placeholderClasses$1}` })), index.h("atomic-result-section-actions", { key: '858557d33b7c4ae4e10c09c39d7d159b8b0f7bd4' }, index.h("div", { key: '4e7ab1ba76fe1b97d5228b4add507a71b5232173', class: `action ${placeholderClasses$1}` })), index.h("atomic-result-section-title", { key: '53196431fad741d2e8fd40b2a4dc21b21f75855e' }, index.h("div", { key: '702ced0190c1d21c847fb800c9ce7da97c913e20', class: `title ${placeholderClasses$1}` })), index.h("atomic-result-section-excerpt", { key: 'f906a971e4042bbe2ad19c66f7aff61f29828ec9' }, this.renderExcerptLine('100%'), this.renderExcerptLine('95%'), this.renderExcerptLine('98%')), index.h("atomic-result-section-bottom-metadata", { key: 'e83957d003c70c52350b2bd149b43a1d20bbbce8' }, index.h("div", { key: '17ff7477623b20f36844711b866b7129134b6459', class: "fields-placeholder" }, Array.from({ length: 4 }, () => (index.h("div", { class: `field-value-placeholder ${placeholderClasses$1}` })))))));
+                .trim()}` }, index.h("atomic-result-section-visual", { key: 'bd0aa9efaa1117c777cbdc1e525ad83c182622dd' }, index.h("div", { key: 'fa788a8d8ad21414a839b7a873d09cdb7872ec44', class: placeholderClasses$1 })), index.h("atomic-result-section-badges", { key: '3c0ebd7f133c38c751ee81ea322282bcc6733660' }, index.h("div", { key: '9a75294ccb6b9995a031b17a6a6ccb32a92998fd', class: `badge ${placeholderClasses$1}` })), index.h("atomic-result-section-actions", { key: '898c4e23660935c16b503354f5a4b8039954ca48' }, index.h("div", { key: '02f9940361ed93f31a609fac644abdac0bf0b6b9', class: `action ${placeholderClasses$1}` })), index.h("atomic-result-section-title", { key: '89cfeaf62905be2d999685b9b7afb97af2fe48a7' }, index.h("div", { key: '374bcc0a90f55f55a3f41a83be226f665dfd83b7', class: `title ${placeholderClasses$1}` })), index.h("atomic-result-section-excerpt", { key: '64cfcc1043e6e0a81774e62cfd071a667671b593' }, this.renderExcerptLine('100%'), this.renderExcerptLine('95%'), this.renderExcerptLine('98%')), index.h("atomic-result-section-bottom-metadata", { key: '04613f930538dc5c287c35d2adc9ca45519a2507' }, index.h("div", { key: '3f9839736fbd1838bd8a12cd3ba32810206430a6', class: "fields-placeholder" }, Array.from({ length: 4 }, () => (index.h("div", { class: `field-value-placeholder ${placeholderClasses$1}` })))))));
     }
 };
 AtomicResultPlaceholder.style = AtomicResultPlaceholderStyle0;
@@ -111,7 +111,7 @@ const AtomicResultTablePlaceholder = class {
         return displayOptions.getItemDisplayClasses('table', this.density, this.imageSize);
     }
     render() {
-        return (index.h("table", { key: '28e8ac6c2c9ef447163726e6fa5dc3b3dc1fc3c6', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, index.h("thead", { key: '80ed0a194cda737f880d79eee57093937f363175' }, index.h("tr", { key: 'bf215264e1acde6dcf691a70bc8f01d50175558d' }, index.h("th", { key: '755b5c65992df514b17d5adf811d9bed01475e79' }, index.h("div", { key: '3d6afcc62140e261d5756afd9d2926068e210960', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), index.h("th", { key: '293fd3ea9bc18c457347130fd374922d21d529d9' }, index.h("div", { key: 'b325bbd5009ac32cec42ccda019a14629d66e5f0', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), index.h("th", { key: '4542b651d5aa8c55b051a7e54f9ac70a42b910fa' }, index.h("div", { key: '25b6e793d67e46e4d69e1f99659139daf6ab2bed', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), index.h("tbody", { key: 'd41a27a1379b501009d9ffa6afe0cc3294e47408' }, Array.from({ length: this.rows }, () => (index.h("tr", null, index.h("td", null, index.h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), index.h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), index.h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), index.h("td", null, index.h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), index.h("td", null, index.h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
+        return (index.h("table", { key: 'ed3f575082ec1c2a9927251e2b09d5c0f70d78b5', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, index.h("thead", { key: 'eaed97a7aadc3e76880b6f92b4ea7e99e82bc8db', "aria-hidden": "true" }, index.h("tr", { key: '904e042bc380d1ecad4dae1b19711e325b090f3b' }, index.h("th", { key: 'c6e0f34558ac9f9970b77f200ba2807e1ed77c27' }, index.h("div", { key: '21addd6241b4d0e94acb6593839e147f9b34f505', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), index.h("th", { key: 'cedd03d8b316bab13b74defaa53449c1267a8452' }, index.h("div", { key: '647d298367fdbeda8e5d99edbe186781f7edf724', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), index.h("th", { key: 'ceb12b35d77241c976665dc8842480a3d68e3387' }, index.h("div", { key: '8f2c70bd1f3df58f8361bba309ceca23d88ddae1', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), index.h("tbody", { key: 'fd3055adda17ec8d22cc06374220623e2906e53b' }, Array.from({ length: this.rows }, () => (index.h("tr", null, index.h("td", null, index.h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), index.h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), index.h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), index.h("td", null, index.h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), index.h("td", null, index.h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
     }
 };
 AtomicResultTablePlaceholder.style = AtomicResultTablePlaceholderStyle0;

package/dist/cjs/atomic-result-placeholder_8.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result-placeholder.atomic-result-section-actions.atomic-result-section-badges.atomic-result-section-bottom-metadata.atomic-result-section-excerpt.atomic-result-section-title.atomic-result-section-visual.atomic-result-table-placeholder.entry.cjs.js","mappings":"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","names":["placeholderClasses","h","getItemDisplayClasses","hideEmptySection"],"sources":["src/components/common/atomic-result-placeholder/atomic-result-placeholder.pcss?tag=atomic-result-placeholder&encapsulation=shadow","src/components/common/atomic-result-placeholder/atomic-result-placeholder.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-actions.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-badges.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-bottom-metadata.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-excerpt.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-title.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-visual.tsx","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.pcss?tag=atomic-result-table-placeholder&encapsulation=shadow","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n@import '../template-system/template-system.pcss';\n\n:host {\n @apply atomic-template-system;\n\n .result-root {\n &.display-grid {\n atomic-result-section-actions {\n display: none;\n }\n }\n\n .badge {\n width: 14rem;\n }\n\n .action {\n width: 10rem;\n }\n\n .title {\n display: grid;\n grid-auto-flow: column;\n grid-gap: 0.5rem;\n height: var(--line-height);\n width: 30rem;\n max-width: 100%;\n }\n\n .fields-placeholder {\n display: grid;\n grid-template-columns: repeat(auto-fill, min(11rem, 40%));\n grid-column-gap: 0.5rem;\n\n .field-value-placeholder {\n height: var(--font-size);\n margin: calc((var(--line-height) - var(--font-size)) / 2) 0;\n }\n }\n }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n ItemDisplayLayout,\n ItemDisplayDensity,\n ItemDisplayImageSize,\n getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral w-full h-full rounded';\n\n/*\n The `atomic-result-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n /\n@Component({\n tag: 'atomic-result-placeholder',\n styleUrl: 'atomic-result-placeholder.pcss',\n shadow: true,\n})\nexport class AtomicResultPlaceholder {\n @Prop() display!: ItemDisplayLayout;\n @Prop() density!: ItemDisplayDensity;\n @Prop() imageSize!: ItemDisplayImageSize;\n\n private renderExcerptLine(width: string) {\n return (\n <div\n style={{\n height: 'var(--line-height)',\n width,\n }}\n >\n <div\n class={placeholderClasses}\n style={{height: 'var(--font-size)'}}\n ></div>\n </div>\n );\n }\n\n public render() {\n return (\n <div\n class={`result-root placeholder with-sections animate-pulse ${getItemDisplayClasses(\n this.display,\n this.density,\n this.imageSize\n )\n .join(' ')\n .trim()}`}\n >\n <atomic-result-section-visual>\n <div class={placeholderClasses}></div>\n </atomic-result-section-visual>\n <atomic-result-section-badges>\n <div class={`badge ${placeholderClasses}`}></div>\n </atomic-result-section-badges>\n <atomic-result-section-actions>\n <div class={`action ${placeholderClasses}`}></div>\n </atomic-result-section-actions>\n <atomic-result-section-title>\n <div class={`title ${placeholderClasses}`}></div>\n </atomic-result-section-title>\n <atomic-result-section-excerpt>\n {this.renderExcerptLine('100%')}\n {this.renderExcerptLine('95%')}\n {this.renderExcerptLine('98%')}\n </atomic-result-section-excerpt>\n <atomic-result-section-bottom-metadata>\n <div class=\"fields-placeholder\">\n {Array.from({length: 4}, () => (\n <div\n class={`field-value-placeholder ${placeholderClasses}`}\n ></div>\n ))}\n </div>\n </atomic-result-section-bottom-metadata>\n </div>\n );\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section allows the information seeker to perform an action on an item without having to view its details.\n * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.\n \n Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n /\n@Component({\n tag: 'atomic-result-section-actions',\n shadow: false,\n})\nexport class AtomicResultSectionActions {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section provides badges that highlight special features of the item.\n \n Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n /\n@Component({\n tag: 'atomic-result-section-badges',\n shadow: false,\n})\nexport class AtomicResultSectionBadges {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section displays additional descriptive information about the item.\n \n Behavior:\n * * Has a maximum height of two lines.\n * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.\n * * Exposes the `--line-height` variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n * * Has a font weight.\n /\n@Component({\n tag: 'atomic-result-section-bottom-metadata',\n shadow: false,\n})\nexport class AtomicResultSectionBottomMetadata {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section contains an informative summary of the item's content.\n \n Behavior:\n * * Has a fixed height of one to three lines, depending on the layout and density.\n * * Ellipses overflowing text.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n /\n@Component({\n tag: 'atomic-result-section-excerpt',\n shadow: false,\n})\nexport class AtomicResultSectionExcerpt {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section identifies the item by its name, and its main use is to make the result list scannable.\n * This is usually the page title.\n \n Behavior:\n * * Has a fixed height of two lines on grid layouts.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n /\n@Component({\n tag: 'atomic-result-section-title',\n shadow: false,\n})\nexport class AtomicResultSectionTitle {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component, Prop} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\nimport {ItemDisplayImageSize} from '../../../common/layout/display-options';\n\n/\n This section provides visual information about the item.\n * For example, in Commerce, an image is a great shorthand for a product category.\n * An icon can quickly show the item type, or an avatar can help identify to whom it is related.\n \n Behavior:\n * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.\n * ** When the image size is set to `icon`, this section stays very small.\n * ** You should ensure that elements inside of it take the available space.\n * * Always has a 1:1 aspect ratio.\n /\n@Component({\n tag: 'atomic-result-section-visual',\n shadow: false,\n})\nexport class AtomicResultSectionVisual {\n @Element() private host!: HTMLElement;\n\n /\n How large or small the visual section of results using this template should be.\n /\n @Prop({reflect: true}) public imageSize?: ItemDisplayImageSize;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n\n:host {\n display: grid;\n}\n\n.list-root.display-table {\n @apply atomic-result-table border-neutral rounded-xl border;\n\n thead tr,\n tbody tr:not(:last-child) {\n position: relative;\n\n &::after {\n content: ' ';\n display: block;\n position: absolute;\n height: 1px;\n bottom: 0;\n left: var(--padding);\n right: var(--padding);\n @apply bg-neutral;\n }\n }\n\n th,\n td {\n border-color: transparent;\n border-radius: initial;\n }\n\n th {\n background-color: transparent;\n }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral rounded';\n\n/\n The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n */\n@Component({\n tag: 'atomic-result-table-placeholder',\n styleUrl: 'atomic-result-table-placeholder.pcss',\n shadow: true,\n})\nexport class AtomicResultTablePlaceholder {\n @Prop() density!: ItemDisplayDensity;\n @Prop() imageSize!: ItemDisplayImageSize;\n @Prop() rows!: number;\n\n private getClasses() {\n return getItemDisplayClasses('table', this.density, this.imageSize);\n }\n\n public render() {\n return (\n <table class={`list-root animate-pulse ${this.getClasses().join(' ')}`}>\n <thead>\n <tr>\n <th>\n <div\n class={`mt-2 h-8 ${placeholderClasses}`}\n style={{width: '14.5rem'}}\n ></div>\n </th>\n <th>\n <div\n class={`mt-2 h-8 ${placeholderClasses}`}\n style={{width: '9.75rem'}}\n ></div>\n </th>\n <th>\n <div\n class={`mt-2 h-8 ${placeholderClasses}`}\n style={{width: '6.5rem'}}\n ></div>\n </th>\n </tr>\n </thead>\n <tbody>\n {Array.from({length: this.rows}, () => (\n <tr>\n <td>\n <div\n class={`mb-6 h-8 ${placeholderClasses}`}\n style={{width: '22.875rem'}}\n ></div>\n <div\n class={`mb-2 h-5 ${placeholderClasses}`}\n style={{width: '23.75rem'}}\n ></div>\n <div\n class={`h-5 ${placeholderClasses}`}\n style={{width: '11.5rem'}}\n ></div>\n </td>\n <td>\n <div\n class={`mt-1.5 h-5 ${placeholderClasses}`}\n style={{width: '11rem'}}\n ></div>\n </td>\n <td>\n <div\n class={`mt-1.5 h-5 ${placeholderClasses}`}\n style={{width: '4.875rem'}}\n ></div>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n );\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result-placeholder.atomic-result-section-actions.atomic-result-section-badges.atomic-result-section-bottom-metadata.atomic-result-section-excerpt.atomic-result-section-title.atomic-result-section-visual.atomic-result-table-placeholder.entry.cjs.js","mappings":"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","names":["placeholderClasses","h","getItemDisplayClasses","hideEmptySection"],"sources":["src/components/common/atomic-result-placeholder/atomic-result-placeholder.pcss?tag=atomic-result-placeholder&encapsulation=shadow","src/components/common/atomic-result-placeholder/atomic-result-placeholder.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-actions.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-badges.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-bottom-metadata.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-excerpt.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-title.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-visual.tsx","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.pcss?tag=atomic-result-table-placeholder&encapsulation=shadow","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n@import '../template-system/template-system.pcss';\n\n:host {\n @apply atomic-template-system;\n\n .result-root {\n &.display-grid {\n atomic-result-section-actions {\n display: none;\n }\n }\n\n .badge {\n width: 14rem;\n }\n\n .action {\n width: 10rem;\n }\n\n .title {\n display: grid;\n grid-auto-flow: column;\n grid-gap: 0.5rem;\n height: var(--line-height);\n width: 30rem;\n max-width: 100%;\n }\n\n .fields-placeholder {\n display: grid;\n grid-template-columns: repeat(auto-fill, min(11rem, 40%));\n grid-column-gap: 0.5rem;\n\n .field-value-placeholder {\n height: var(--font-size);\n margin: calc((var(--line-height) - var(--font-size)) / 2) 0;\n }\n }\n }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n ItemDisplayLayout,\n ItemDisplayDensity,\n ItemDisplayImageSize,\n getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral w-full h-full rounded';\n\n/*\n The `atomic-result-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n /\n@Component({\n tag: 'atomic-result-placeholder',\n styleUrl: 'atomic-result-placeholder.pcss',\n shadow: true,\n})\nexport class AtomicResultPlaceholder {\n @Prop() display!: ItemDisplayLayout;\n @Prop() density!: ItemDisplayDensity;\n @Prop() imageSize!: ItemDisplayImageSize;\n\n private renderExcerptLine(width: string) {\n return (\n <div\n style={{\n height: 'var(--line-height)',\n width,\n }}\n >\n <div\n class={placeholderClasses}\n style={{height: 'var(--font-size)'}}\n ></div>\n </div>\n );\n }\n\n public render() {\n return (\n <div\n class={`result-root placeholder with-sections animate-pulse ${getItemDisplayClasses(\n this.display,\n this.density,\n this.imageSize\n )\n .join(' ')\n .trim()}`}\n >\n <atomic-result-section-visual>\n <div class={placeholderClasses}></div>\n </atomic-result-section-visual>\n <atomic-result-section-badges>\n <div class={`badge ${placeholderClasses}`}></div>\n </atomic-result-section-badges>\n <atomic-result-section-actions>\n <div class={`action ${placeholderClasses}`}></div>\n </atomic-result-section-actions>\n <atomic-result-section-title>\n <div class={`title ${placeholderClasses}`}></div>\n </atomic-result-section-title>\n <atomic-result-section-excerpt>\n {this.renderExcerptLine('100%')}\n {this.renderExcerptLine('95%')}\n {this.renderExcerptLine('98%')}\n </atomic-result-section-excerpt>\n <atomic-result-section-bottom-metadata>\n <div class=\"fields-placeholder\">\n {Array.from({length: 4}, () => (\n <div\n class={`field-value-placeholder ${placeholderClasses}`}\n ></div>\n ))}\n </div>\n </atomic-result-section-bottom-metadata>\n </div>\n );\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section allows the information seeker to perform an action on an item without having to view its details.\n * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.\n \n Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n /\n@Component({\n tag: 'atomic-result-section-actions',\n shadow: false,\n})\nexport class AtomicResultSectionActions {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section provides badges that highlight special features of the item.\n \n Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n /\n@Component({\n tag: 'atomic-result-section-badges',\n shadow: false,\n})\nexport class AtomicResultSectionBadges {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section displays additional descriptive information about the item.\n \n Behavior:\n * * Has a maximum height of two lines.\n * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.\n * * Exposes the `--line-height` variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n * * Has a font weight.\n /\n@Component({\n tag: 'atomic-result-section-bottom-metadata',\n shadow: false,\n})\nexport class AtomicResultSectionBottomMetadata {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section contains an informative summary of the item's content.\n \n Behavior:\n * * Has a fixed height of one to three lines, depending on the layout and density.\n * * Ellipses overflowing text.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n /\n@Component({\n tag: 'atomic-result-section-excerpt',\n shadow: false,\n})\nexport class AtomicResultSectionExcerpt {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/\n This section identifies the item by its name, and its main use is to make the result list scannable.\n * This is usually the page title.\n \n Behavior:\n * * Has a fixed height of two lines on grid layouts.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n /\n@Component({\n tag: 'atomic-result-section-title',\n shadow: false,\n})\nexport class AtomicResultSectionTitle {\n @Element() private host!: HTMLElement;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","import {Element, Component, Prop} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\nimport {ItemDisplayImageSize} from '../../../common/layout/display-options';\n\n/\n This section provides visual information about the item.\n * For example, in Commerce, an image is a great shorthand for a product category.\n * An icon can quickly show the item type, or an avatar can help identify to whom it is related.\n \n Behavior:\n * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.\n * ** When the image size is set to `icon`, this section stays very small.\n * ** You should ensure that elements inside of it take the available space.\n * * Always has a 1:1 aspect ratio.\n /\n@Component({\n tag: 'atomic-result-section-visual',\n shadow: false,\n})\nexport class AtomicResultSectionVisual {\n @Element() private host!: HTMLElement;\n\n /\n How large or small the visual section of results using this template should be.\n /\n @Prop({reflect: true}) public imageSize?: ItemDisplayImageSize;\n\n public componentDidRender() {\n hideEmptySection(this.host);\n }\n}\n","@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n\n:host {\n display: grid;\n}\n\n.list-root.display-table {\n @apply atomic-result-table border-neutral rounded-xl border;\n\n thead tr,\n tbody tr:not(:last-child) {\n position: relative;\n\n &::after {\n content: ' ';\n display: block;\n position: absolute;\n height: 1px;\n bottom: 0;\n left: var(--padding);\n right: var(--padding);\n @apply bg-neutral;\n }\n }\n\n th,\n td {\n border-color: transparent;\n border-radius: initial;\n }\n\n th {\n background-color: transparent;\n }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral rounded';\n\n/\n The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n */\n@Component({\n tag: 'atomic-result-table-placeholder',\n styleUrl: 'atomic-result-table-placeholder.pcss',\n shadow: true,\n})\nexport class AtomicResultTablePlaceholder {\n @Prop() density!: ItemDisplayDensity;\n @Prop() imageSize!: ItemDisplayImageSize;\n @Prop() rows!: number;\n\n private getClasses() {\n return getItemDisplayClasses('table', this.density, this.imageSize);\n }\n\n public render() {\n return (\n <table class={`list-root animate-pulse ${this.getClasses().join(' ')}`}>\n <thead aria-hidden=\"true\">\n <tr>\n <th>\n <div\n class={`mt-2 h-8 ${placeholderClasses}`}\n style={{width: '14.5rem'}}\n ></div>\n </th>\n <th>\n <div\n class={`mt-2 h-8 ${placeholderClasses}`}\n style={{width: '9.75rem'}}\n ></div>\n </th>\n <th>\n <div\n class={`mt-2 h-8 ${placeholderClasses}`}\n style={{width: '6.5rem'}}\n ></div>\n </th>\n </tr>\n </thead>\n <tbody>\n {Array.from({length: this.rows}, () => (\n <tr>\n <td>\n <div\n class={`mb-6 h-8 ${placeholderClasses}`}\n style={{width: '22.875rem'}}\n ></div>\n <div\n class={`mb-2 h-5 ${placeholderClasses}`}\n style={{width: '23.75rem'}}\n ></div>\n <div\n class={`h-5 ${placeholderClasses}`}\n style={{width: '11.5rem'}}\n ></div>\n </td>\n <td>\n <div\n class={`mt-1.5 h-5 ${placeholderClasses}`}\n style={{width: '11rem'}}\n ></div>\n </td>\n <td>\n <div\n class={`mt-1.5 h-5 ${placeholderClasses}`}\n style={{width: '4.875rem'}}\n ></div>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n );\n }\n}\n"],"version":3}

package/dist/cjs/atomic-search-box-instant-results.cjs.entry.js ADDED Viewed

@@ -0,0 +1,186 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-757bc886.js');
+const headless = require('@coveo/headless');
+const stringUtils = require('./string-utils-bdf08f8c.js');
+const itemTemplateProvider = require('./item-template-provider-470c1774.js');
+const stencilButtonStyle = require('./stencil-button-style-ba779fe2.js');
+const suggestionsEvents = require('./suggestions-events-63dd0640.js');
+require('./dom-utils-d4790328.js');
+require('./event-utils-9bfcf3c5.js');
+const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
+    return {
+        ariaLabel: i18n.t('instant-results-suggestion-label', {
+            title: itemTitle,
+            interpolation: { escapeValue: false },
+        }),
+        key: `instant-result-${stringUtils.encodeForDomAttribute(itemUniqueId)}`,
+        part: 'instant-results-item',
+    };
+};
+const getPartialInstantItemShowAllElement = (i18n) => {
+    return {
+        key: 'instant-results-show-all-button',
+        part: 'instant-results-show-all',
+        ariaLabel: i18n.t('show-all-results'),
+    };
+};
+const InstantItemShowAllButton = ({ i18n }) => {
+    return (index.h("div", { part: "instant-results-show-all-button", class: stencilButtonStyle.getClassNameForButtonStyle('text-primary') }, i18n.t('show-all-results')));
+};
+const AtomicSearchBoxInstantResults = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.results = [];
+        this.display = 'list';
+        this.templateHasError = false;
+        /**
+         * The maximum number of results to show.
+         */
+        this.maxResultsPerQuery = 4;
+        /**
+         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+         */
+        this.density = 'normal';
+        /**
+         * The expected size of the image displayed in the results.
+         */
+        this.imageSize = 'icon';
+        this.error = undefined;
+        this.templateHasError = false;
+        this.maxResultsPerQuery = 4;
+        this.density = 'normal';
+        this.imageSize = 'icon';
+        this.ariaLabelGenerator = undefined;
+    }
+    /**
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
+     *
+     * Do not use this method if you integrate Atomic in a plain HTML deployment.
+     *
+     * @param resultRenderingFunction
+     */
+    async setRenderFunction(resultRenderingFunction) {
+        this.itemRenderingFunction = resultRenderingFunction;
+    }
+    componentWillLoad() {
+        try {
+            suggestionsEvents.dispatchSearchBoxSuggestionsEvent((bindings) => {
+                this.bindings = bindings;
+                return this.initialize();
+            }, this.host, ['atomic-search-box']);
+        }
+        catch (error) {
+            this.error = error;
+        }
+    }
+    getLink(el) {
+        const atomicResult = el.tagName === 'ATOMIC-RESULT' ? el : el?.querySelector('atomic-result');
+        return (atomicResult?.shadowRoot?.querySelector('atomic-result-link a:not([slot])') || null);
+    }
+    handleLinkClick(el, hasModifier) {
+        const setTarget = (value) => el.setAttribute('target', value);
+        const initialTarget = el.getAttribute('target');
+        hasModifier && setTarget('_blank');
+        el.click();
+        hasModifier && setTarget(initialTarget || '');
+        return true;
+    }
+    renderItems() {
+        if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {
+            return [];
+        }
+        const results = this.instantResults.state.results.length
+            ? this.instantResults.state.results
+            : this.results;
+        const elements = results.map((result) => {
+            const partialItem = getPartialInstantItemElement(this.bindings.i18n, this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
+            return {
+                ...partialItem,
+                content: (index.h("atomic-result", { key: `instant-result-${stringUtils.encodeForDomAttribute(result.uniqueId)}`, part: "outline", result: result, interactiveResult: headless.buildInteractiveInstantResult(this.bindings.engine, {
+                        options: { result },
+                    }), display: this.display, density: this.density, imageSize: this.imageSize, content: this.itemTemplateProvider.getTemplateContent(result), stopPropagation: false, renderingFunction: this.itemRenderingFunction })),
+                onSelect: (e) => {
+                    const link = this.getLink(e.target);
+                    if (!link) {
+                        return;
+                    }
+                    this.handleLinkClick(link, e.ctrlKey || e.metaKey);
+                },
+            };
+        });
+        if (elements.length) {
+            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n);
+            elements.push({
+                ...partialItem,
+                content: index.h(InstantItemShowAllButton, { i18n: this.bindings.i18n }),
+                onSelect: () => {
+                    this.bindings.clearSuggestions();
+                    this.bindings.searchBoxController.updateText(this.instantResults.state.q);
+                    this.bindings.searchBoxController.submit();
+                },
+            });
+        }
+        return elements;
+    }
+    initialize() {
+        this.instantResults = headless.buildInstantResults(this.bindings.engine, {
+            options: {
+                maxResultsPerQuery: this.maxResultsPerQuery,
+            },
+        });
+        this.itemTemplateProvider = new itemTemplateProvider.ItemTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.host.querySelectorAll('atomic-result-template')),
+            getResultTemplateRegistered: () => true,
+            setResultTemplateRegistered: () => { },
+            getTemplateHasError: () => this.templateHasError,
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+        return {
+            position: Array.from(this.host.parentNode.children).indexOf(this.host),
+            panel: 'right',
+            onSuggestedQueryChange: (q) => {
+                this.instantResults.updateQuery(q);
+                return this.onSuggestedQueryChange();
+            },
+            renderItems: () => this.renderItems(),
+        };
+    }
+    onSuggestedQueryChange() {
+        if (!this.bindings.getSuggestionElements().length &&
+            !this.bindings.searchBoxController.state.value) {
+            console.warn("There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-search-box-query-suggestions or atomic-search-box-recent-queries in your search box in order to see some instant results.");
+        }
+        return new Promise((resolve) => {
+            const unsubscribe = this.instantResults.subscribe(() => {
+                const state = this.instantResults.state;
+                if (!state.isLoading) {
+                    if (state.results.length) {
+                        this.results = state.results;
+                    }
+                    unsubscribe();
+                    resolve();
+                }
+            });
+        });
+    }
+    render() {
+        if (this.error) {
+            return (index.h("atomic-component-error", { key: 'c458b821ec8f13321a674f00e6e5f8dfa50d2525', element: this.host, error: this.error }));
+        }
+    }
+    get host() { return index.getElement(this); }
+};
+exports.atomic_search_box_instant_results = AtomicSearchBoxInstantResults;
+//# sourceMappingURL=atomic-search-box-instant-results.cjs.entry.js.map

package/dist/cjs/atomic-search-box-instant-results.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"atomic-search-box-instant-results.entry.cjs.js","mappings":"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","names":["encodeForDomAttribute","h","getClassNameForButtonStyle","dispatchSearchBoxSuggestionsEvent","buildInteractiveInstantResult","buildInstantResults","ItemTemplateProvider"],"sources":["src/components/common/suggestions/stencil-instant-item.tsx","src/components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils';\nimport {getClassNameForButtonStyle} from '../stencil-button-style';\nimport {SearchBoxSuggestionElement} from './suggestions-types';\n\nexport const getPartialInstantItemElement = (\n i18n: i18n,\n itemTitle: string,\n itemUniqueId: string\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'part'> => {\n return {\n ariaLabel: i18n.t('instant-results-suggestion-label', {\n title: itemTitle,\n interpolation: {escapeValue: false},\n }),\n key: `instant-result-${encodeForDomAttribute(itemUniqueId)}`,\n part: 'instant-results-item',\n };\n};\n\nexport const getPartialInstantItemShowAllElement = (\n i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'key' | 'part' | 'ariaLabel'> => {\n return {\n key: 'instant-results-show-all-button',\n part: 'instant-results-show-all',\n ariaLabel: i18n.t('show-all-results'),\n };\n};\n\ninterface InstantItemShowAllButtonProps {\n i18n: i18n;\n}\nexport const InstantItemShowAllButton: FunctionalComponent<\n InstantItemShowAllButtonProps\n> = ({i18n}) => {\n return (\n <div\n part=\"instant-results-show-all-button\"\n class={getClassNameForButtonStyle('text-primary')}\n >\n {i18n.t('show-all-results')}\n </div>\n );\n};\n","import {\n buildInstantResults,\n buildInteractiveInstantResult,\n InstantResults,\n Result,\n SearchBox,\n} from '@coveo/headless';\nimport {Component, Element, State, h, Prop, Method} from '@stencil/core';\nimport {InitializableComponent} from '../../../../utils/initialization-utils';\nimport {encodeForDomAttribute} from '../../../../utils/string-utils';\nimport {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';\nimport {ItemRenderingFunction} from '../../../common/item-list/stencil-item-list-common';\nimport {\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayLayout,\n} from '../../../common/layout/display-options';\nimport {\n getPartialInstantItemElement,\n getPartialInstantItemShowAllElement,\n InstantItemShowAllButton,\n} from '../../../common/suggestions/stencil-instant-item';\nimport {\n dispatchSearchBoxSuggestionsEvent,\n} from '../../../common/suggestions/suggestions-events';\nimport type {\n SearchBoxSuggestionElement,\n SearchBoxSuggestions,\n SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-types';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\nexport type AriaLabelGenerator = (\n bindings: Bindings,\n result: Result\n) => string | undefined;\n\n/**\n * The `atomic-search-box-instant-results` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant results behavior.\n *\n * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).\n *\n * This component is not supported on mobile.\n *\n * @slot default - The default slot where the instant results are rendered.\n */\n@Component({\n tag: 'atomic-search-box-instant-results',\n shadow: true,\n})\nexport class AtomicSearchBoxInstantResults implements InitializableComponent {\n public bindings!: SearchBoxSuggestionsBindings<SearchBox, Bindings>;\n private itemRenderingFunction: ItemRenderingFunction;\n private results: Result[] = [];\n private itemTemplateProvider!: ItemTemplateProvider;\n private instantResults!: InstantResults;\n private display: ItemDisplayLayout = 'list';\n\n @Element() public host!: HTMLElement;\n\n @State() public error!: Error;\n @State() private templateHasError = false;\n\n /**\n * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.\n * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.\n *\n * Do not use this method if you integrate Atomic in a plain HTML deployment.\n *\n * @param resultRenderingFunction\n */\n @Method() public async setRenderFunction(\n resultRenderingFunction: ItemRenderingFunction\n ) {\n this.itemRenderingFunction = resultRenderingFunction;\n }\n /**\n * The maximum number of results to show.\n */\n @Prop({reflect: true}) public maxResultsPerQuery = 4;\n /**\n * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.\n */\n @Prop({reflect: true}) public density: ItemDisplayDensity = 'normal';\n /**\n * The expected size of the image displayed in the results.\n */\n @Prop({reflect: true}) public imageSize: ItemDisplayImageSize = 'icon';\n /**\n * The callback to generate an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for a given result so that accessibility tools can fully describe what's visually rendered by a result.\n *\n * By default, or if an empty string is returned, `result.title` is used.\n */\n @Prop() public ariaLabelGenerator?: AriaLabelGenerator;\n\n public componentWillLoad() {\n try {\n dispatchSearchBoxSuggestionsEvent<SearchBox, Bindings>(\n (bindings) => {\n this.bindings = bindings;\n return this.initialize();\n },\n this.host,\n ['atomic-search-box']\n );\n } catch (error) {\n this.error = error as Error;\n }\n }\n\n private getLink(el: HTMLElement): HTMLElement | null {\n const atomicResult =\n el.tagName === 'ATOMIC-RESULT' ? el : el?.querySelector('atomic-result');\n\n return (\n atomicResult?.shadowRoot?.querySelector(\n 'atomic-result-link a:not([slot])'\n ) || null\n );\n }\n\n private handleLinkClick(el: HTMLElement, hasModifier: boolean) {\n const setTarget = (value: string) => el.setAttribute('target', value);\n const initialTarget = el.getAttribute('target');\n\n hasModifier && setTarget('_blank');\n el.click();\n hasModifier && setTarget(initialTarget || '');\n\n return true;\n }\n\n private renderItems(): SearchBoxSuggestionElement[] {\n if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {\n return [];\n }\n const results = this.instantResults.state.results.length\n ? this.instantResults.state.results\n : this.results;\n\n const elements: SearchBoxSuggestionElement[] = results.map(\n (result: Result) => {\n const partialItem = getPartialInstantItemElement(\n this.bindings.i18n,\n this.ariaLabelGenerator?.(this.bindings, result) || result.title,\n result.uniqueId\n );\n return {\n ...partialItem,\n content: (\n <atomic-result\n key={`instant-result-${encodeForDomAttribute(result.uniqueId)}`}\n part=\"outline\"\n result={result}\n interactiveResult={buildInteractiveInstantResult(\n this.bindings.engine,\n {\n options: {result},\n }\n )}\n display={this.display}\n density={this.density}\n imageSize={this.imageSize}\n content={this.itemTemplateProvider.getTemplateContent(result)}\n stopPropagation={false}\n renderingFunction={this.itemRenderingFunction}\n ></atomic-result>\n ),\n onSelect: (e: MouseEvent) => {\n const link = this.getLink(e.target as HTMLElement);\n\n if (!link) {\n return;\n }\n this.handleLinkClick(link, e.ctrlKey || e.metaKey);\n },\n };\n }\n );\n if (elements.length) {\n const partialItem = getPartialInstantItemShowAllElement(\n this.bindings.i18n\n );\n elements.push({\n ...partialItem,\n content: <InstantItemShowAllButton i18n={this.bindings.i18n} />,\n onSelect: () => {\n this.bindings.clearSuggestions();\n this.bindings.searchBoxController.updateText(\n this.instantResults.state.q\n );\n this.bindings.searchBoxController.submit();\n },\n });\n }\n return elements;\n }\n\n public initialize(): SearchBoxSuggestions {\n this.instantResults = buildInstantResults(this.bindings.engine, {\n options: {\n maxResultsPerQuery: this.maxResultsPerQuery,\n },\n });\n\n this.itemTemplateProvider = new ItemTemplateProvider({\n includeDefaultTemplate: true,\n templateElements: Array.from(\n this.host.querySelectorAll('atomic-result-template')\n ),\n getResultTemplateRegistered: () => true,\n setResultTemplateRegistered: () => {},\n getTemplateHasError: () => this.templateHasError,\n setTemplateHasError: (value: boolean) => {\n this.templateHasError = value;\n },\n bindings: this.bindings,\n });\n\n return {\n position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n panel: 'right',\n onSuggestedQueryChange: (q) => {\n this.instantResults.updateQuery(q);\n return this.onSuggestedQueryChange();\n },\n renderItems: () => this.renderItems(),\n };\n }\n\n private onSuggestedQueryChange() {\n if (\n !this.bindings.getSuggestionElements().length &&\n !this.bindings.searchBoxController.state.value\n ) {\n console.warn(\n \"There doesn't seem to be any query suggestions configured. Make sure to include either an atomic-search-box-query-suggestions or atomic-search-box-recent-queries in your search box in order to see some instant results.\"\n );\n }\n\n return new Promise<void>((resolve) => {\n const unsubscribe = this.instantResults.subscribe(() => {\n const state = this.instantResults.state;\n if (!state.isLoading) {\n if (state.results.length) {\n this.results = state.results;\n }\n unsubscribe();\n resolve();\n }\n });\n });\n }\n\n public render() {\n if (this.error) {\n return (\n <atomic-component-error\n element={this.host}\n error={this.error}\n ></atomic-component-error>\n );\n }\n }\n}\n"],"version":3}

package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js CHANGED Viewed

@@ -65,7 +65,7 @@ const AtomicSearchBoxQuerySuggestions = class {
     }
     render() {
         if (this.error) {
-            return (index.h("atomic-component-error", { key: '978c37aaaef6910704197c5aa1a9e82307428cd2', element: this.host, error: this.error }));
+            return (index.h("atomic-component-error", { key: 'c5e8f0a3254a31cdae54c36868f70432c1673888', element: this.host, error: this.error }));
         }
     }
     get host() { return index.getElement(this); }

package/dist/cjs/atomic-search-box.cjs.entry.js CHANGED Viewed

@@ -11,8 +11,8 @@ const localStorageUtils = require('./local-storage-utils-380ce22b.js');
 const replaceBreakpointUtils = require('./replace-breakpoint-utils-7a084f54.js');
 const stencilAccessibilityUtils = require('./stencil-accessibility-utils-aa4c9f6c.js');
 const utils = require('./utils-7153ae6b.js');
-const stencilSuggestionManager = require('./stencil-suggestion-manager-3e1cf81e.js');
-const stencilButton = require('./stencil-button-a114783e.js');
+const stencilSuggestionManager = require('./stencil-suggestion-manager-2cba6d69.js');
+const stencilButton = require('./stencil-button-94b89acc.js');
 const suggestionsUtils = require('./suggestions-utils-61000808.js');
 const slotUtils = require('./slot-utils-a30cb814.js');
 require('./dom-utils-d4790328.js');
@@ -22,6 +22,7 @@ require('./initialization-lit-stencil-common-utils-730030b0.js');
 require('./purify-85b542e2.js');
 require('./_commonjsHelpers-b3309d7b.js');
 require('./debounce-utils-d26bcad4.js');
+require('./stencil-button-style-ba779fe2.js');
 const SubmitButton = ({ bindings, disabled, onClick, }) => (index.h("div", { part: "submit-button-wrapper", class: "mr-2 flex items-center justify-center py-2" },
     index.h(stencilButton.Button, { style: "text-primary", class: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full", part: "submit-button", ariaLabel: bindings.i18n.t('search'), onClick: () => {
@@ -444,14 +445,14 @@ const AtomicSearchBox = class {
         if (!this.suggestionManager.suggestions.length) {
             this.registerSearchboxSuggestionEvents();
         }
-        return (index.h(index.Host, { key: 'a8b56eedaf9c7d7b3732ef890a738aacac475e4d' }, this.renderAbsolutePositionSpacer(), [
-            index.h(stencilSuggestionManager.SearchBoxWrapper, { key: '415eb5ec3adb9c1a749df77aebdf886b1a9ca76b', disabled: isDisabled, onFocusout: (event) => {
+        return (index.h(index.Host, { key: '6a53ad9feb241283fd9bcb638b8f0f703691937a' }, this.renderAbsolutePositionSpacer(), [
+            index.h(stencilSuggestionManager.SearchBoxWrapper, { key: 'c704424a22aa17ead0ca97f0104e336df2c57475', disabled: isDisabled, onFocusout: (event) => {
                     if (!utils.isFocusingOut(event)) {
                         return;
                     }
                     this.suggestionManager.clearSuggestions();
                     this.isExpanded = false;
-                } }, this.renderTextBox(searchLabel), index.h(SubmitButton, { key: '9b023c250c5f867244d036d572f099983661c48e', bindings: this.bindings, disabled: isDisabled, onClick: () => {
+                } }, this.renderTextBox(searchLabel), index.h(SubmitButton, { key: 'ee7fc79825b31c970bad13d6568e0a91b01ff60e', bindings: this.bindings, disabled: isDisabled, onClick: () => {
                     this.searchBox.submit();
                     this.suggestionManager.clearSuggestions();
                 } }), this.renderSuggestions()),