@coveo/atomic 3.33.0 → 3.33.1-pre.079ffaa71a

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 (69) hide show
  1. package/dist/atomic/_atomic.esm.js +1 -1
  2. package/dist/atomic/components/analytics-config.js +1 -1
  3. package/dist/atomic/components/analytics-config.js.map +1 -1
  4. package/dist/atomic/components/atomic-citation.js.map +1 -1
  5. package/dist/atomic/components/atomic-ipx-result-link.js.map +1 -1
  6. package/dist/atomic/components/atomic-quickview-modal2.js.map +1 -1
  7. package/dist/atomic/components/atomic-result-link.js.map +1 -1
  8. package/dist/atomic/components/atomic-segmented-facet-scrollable.js.map +1 -1
  9. package/dist/atomic/components/atomic-smart-snippet-collapse-wrapper2.js.map +1 -1
  10. package/dist/atomic/components/atomic-smart-snippet-expandable-answer2.js.map +1 -1
  11. package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js +1 -1
  12. package/dist/atomic/components/components/commerce/atomic-product-text/atomic-product-text.js +4 -7
  13. package/dist/atomic/components/decorators/with-tailwind-styles.js +0 -2
  14. package/dist/atomic/components/global/environment.js +1 -1
  15. package/dist/atomic/p-1442d3c3.entry.js.map +1 -1
  16. package/dist/atomic/{p-75b863ea.entry.js → p-17d54df8.entry.js} +2 -2
  17. package/dist/atomic/{p-ca0a32dc.entry.js → p-453572e0.entry.js} +2 -2
  18. package/dist/atomic/p-6083c9be.entry.js.map +1 -1
  19. package/dist/atomic/{p-9da1c516.entry.js → p-735918bb.entry.js} +2 -2
  20. package/dist/atomic/p-8c80991f.entry.js.map +1 -1
  21. package/dist/atomic/{p-ba67a16b.js → p-94c8d5f0.js} +2 -2
  22. package/dist/atomic/{p-ba67a16b.js.map → p-94c8d5f0.js.map} +1 -1
  23. package/dist/atomic/p-d3e1a9aa.entry.js.map +1 -1
  24. package/dist/atomic/p-dc89e560.entry.js.map +1 -1
  25. package/dist/atomic/p-e27e1e46.entry.js.map +1 -1
  26. package/dist/cjs/{analytics-config-f34a68ee.js → analytics-config-b3156ea7.js} +2 -2
  27. package/dist/cjs/analytics-config-b3156ea7.js.map +1 -0
  28. package/dist/cjs/atomic-citation.cjs.entry.js.map +1 -1
  29. package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
  30. package/dist/cjs/atomic-ipx-result-link.cjs.entry.js.map +1 -1
  31. package/dist/cjs/atomic-quickview-modal.cjs.entry.js.map +1 -1
  32. package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
  33. package/dist/cjs/atomic-result-link.cjs.entry.js.map +1 -1
  34. package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
  35. package/dist/cjs/atomic-segmented-facet-scrollable.cjs.entry.js.map +1 -1
  36. package/dist/cjs/atomic-smart-snippet-collapse-wrapper_2.cjs.entry.js.map +1 -1
  37. package/dist/cjs/version.cjs.js +1 -1
  38. package/dist/esm/{analytics-config-672b6eba.js → analytics-config-2ebcf771.js} +2 -2
  39. package/dist/esm/analytics-config-2ebcf771.js.map +1 -0
  40. package/dist/esm/atomic-citation.entry.js.map +1 -1
  41. package/dist/esm/atomic-insight-interface.entry.js +1 -1
  42. package/dist/esm/atomic-ipx-result-link.entry.js.map +1 -1
  43. package/dist/esm/atomic-quickview-modal.entry.js.map +1 -1
  44. package/dist/esm/atomic-recs-interface.entry.js +1 -1
  45. package/dist/esm/atomic-result-link.entry.js.map +1 -1
  46. package/dist/esm/atomic-search-interface.entry.js +1 -1
  47. package/dist/esm/atomic-segmented-facet-scrollable.entry.js.map +1 -1
  48. package/dist/esm/atomic-smart-snippet-collapse-wrapper_2.entry.js.map +1 -1
  49. package/dist/esm/version.js +1 -1
  50. package/dist/types/components/commerce/atomic-commerce-interface/atomic-commerce-interface.d.ts +1 -1
  51. package/dist/types/components/commerce/atomic-product-text/atomic-product-text.d.ts +1 -1
  52. package/docs/atomic-docs.json +1 -1
  53. package/package.json +1 -1
  54. package/dist/atomic/components/global/tailwind.default.css.js +0 -2
  55. package/dist/atomic/components/global/tailwind.properties.css.js +0 -2
  56. package/dist/atomic/components/themes/accessible.css.js +0 -2
  57. package/dist/atomic/components/themes/coveo.css.js +0 -2
  58. package/dist/atomic/components/utils/tailwind-utilities/aspect-square.tw.css.js +0 -2
  59. package/dist/atomic/components/utils/tailwind-utilities/components.tw.css.js +0 -3
  60. package/dist/atomic/components/utils/tailwind-utilities/hide-scrollbar.tw.css.js +0 -2
  61. package/dist/atomic/components/utils/tailwind-utilities/link-style.tw.css.js +0 -3
  62. package/dist/atomic/components/utils/tailwind-utilities/min-lines.tw.css.js +0 -2
  63. package/dist/atomic/components/utils/tailwind-utilities/set-font-size.tw.css.js +0 -2
  64. package/dist/atomic/components/utils/tailwind-utilities/utilities.tw.css.js +0 -3
  65. package/dist/cjs/analytics-config-f34a68ee.js.map +0 -1
  66. package/dist/esm/analytics-config-672b6eba.js.map +0 -1
  67. /package/dist/atomic/{p-75b863ea.entry.js.map → p-17d54df8.entry.js.map} +0 -0
  68. /package/dist/atomic/{p-ca0a32dc.entry.js.map → p-453572e0.entry.js.map} +0 -0
  69. /package/dist/atomic/{p-9da1c516.entry.js.map → p-735918bb.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"file":"atomic-segmented-facet-scrollable.js","mappings":"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","names":["AtomicSegmentedFacetScrollable"],"sources":["src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss?tag=atomic-segmented-facet-scrollable&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../../utils/tailwind-utilities/hide-scrollbar.tw.css';\n\n.wrapper-segmented {\n @apply hide-scrollbar;\n}\n","import {\n buildSearchStatus,\n SearchStatus,\n SearchStatusState,\n} from '@coveo/headless';\nimport {Component, Element, h, Listen, State} from '@stencil/core';\nimport {Bindings} from '../../../..';\nimport ArrowLeftIcon from '../../../../images/arrow-left-rounded.svg';\nimport ArrowRightIcon from '../../../../images/arrow-right-rounded.svg';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {Hidden} from '../../../common/stencil-hidden';\n\ntype ArrowDirection = 'right' | 'left';\n\n/**\n * The 'atomic-segmented-facet-scrollable' component wraps around one or several 'atomic-segmented-facet' to provide horizontal scrolling capabilities.\n *\n * @slot default - One or multiple atomic-segmented-facet components\n *\n * @part scrollable-container - The wrapper for the entire component including the horizontal-scroll container and the arrow buttons.\n * @part horizontal-scroll - The scrollable container for the segmented facets.\n * @part left-arrow-wrapper - The wrapper for the arrow button & fade on the left.\n * @part right-arrow-wrapper - The wrapper for the arrow button & fade on the right.\n * @part left-arrow-button - The arrow button used to scroll on the left.\n * @part right-arrow-button - The arrow button used to scroll on the right.\n * @part left-arrow-icon - The arrow icon on the left.\n * @part right-arrow-icon - The arrow icon on the right.\n * @part left-fade - The white to transparent gradient on the left.\n * @part right-fade - The white to transparent gradient on the right.\n */\n@Component({\n tag: 'atomic-segmented-facet-scrollable',\n styleUrl: 'atomic-segmented-facet-scrollable.pcss',\n shadow: true,\n})\nexport class AtomicSegmentedFacetScrollable implements InitializableComponent {\n @Element() private host!: HTMLElement;\n private horizontalScrollRef?: HTMLElement;\n private arrowRef?: HTMLElement;\n private observer!: ResizeObserver;\n\n @InitializeBindings()\n public bindings!: Bindings;\n public searchStatus!: SearchStatus;\n @BindStateToController('searchStatus')\n @State()\n public searchStatusState!: SearchStatusState;\n @State()\n public error!: Error;\n @State() private hideLeftArrow = true;\n @State() private hideRightArrow = true;\n\n public initialize() {\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n }\n\n public componentDidLoad() {\n this.observer = new ResizeObserver(() => {\n this.handleScroll();\n });\n\n Array.from(this.host.children).forEach((el) => this.observer.observe(el));\n this.observer.observe(this.horizontalScrollRef!);\n }\n\n disconnectedCallback() {\n this.observer.disconnect();\n }\n\n @Listen('wheel')\n @Listen('touchmove')\n @Listen('keydown')\n public handleScroll() {\n if (!this.horizontalScrollRef) {\n return;\n }\n const container = this.horizontalScrollRef;\n const isScrollable = container.clientWidth < container.scrollWidth;\n\n const isLeftEdge = Math.floor(container.scrollLeft) <= 0;\n const isRightEdge =\n Math.ceil(container.scrollLeft) >=\n container.scrollWidth - container.clientWidth;\n\n this.hideLeftArrow = !isScrollable || isLeftEdge;\n this.hideRightArrow = !isScrollable || isRightEdge;\n }\n\n private slideHorizontally(direction: ArrowDirection) {\n const container = this.horizontalScrollRef!;\n const arrowsWidth = this.arrowRef!.clientWidth * 2;\n\n const pixelsToScroll = (container.clientWidth - arrowsWidth) * 0.7;\n\n const isLeftEdge = Math.floor(container.scrollLeft - pixelsToScroll) <= 0;\n const isRightEdge =\n Math.ceil(container.scrollLeft + pixelsToScroll) >=\n container.scrollWidth - container.clientWidth;\n\n this.hideLeftArrow = false;\n this.hideRightArrow = false;\n\n if (direction === 'left') {\n container.scrollLeft -= pixelsToScroll;\n this.hideLeftArrow = isLeftEdge;\n return;\n }\n\n container.scrollLeft += pixelsToScroll;\n this.hideRightArrow = isRightEdge;\n }\n\n private renderArrow(direction: ArrowDirection) {\n const hide =\n (direction === 'left' && this.hideLeftArrow) ||\n (direction === 'right' && this.hideRightArrow);\n const hiddenClass = hide ? 'invisible opacity-0' : '';\n const transitionClass =\n 'transition-opacity transition-[visibility] ease-in-out duration-300';\n\n return (\n <div\n part={`${direction}-arrow-wrapper`}\n class={`${hiddenClass} ${transitionClass}`}\n >\n <Button\n part={`${direction}-arrow-button`}\n style=\"square-neutral\"\n class={`absolute top-0 bottom-0 z-1 flex h-10 w-10 shrink-0 basis-8 items-center justify-center rounded ${\n direction === 'left' ? 'left-0' : 'right-0'\n }`}\n ariaHidden=\"true\"\n tabIndex=\"-1\"\n onClick={() => this.slideHorizontally(direction)}\n ref={(el) => (this.arrowRef = el)}\n >\n <atomic-icon\n part={`${direction}-arrow-icon`}\n class=\"w-3.5\"\n icon={direction === 'left' ? ArrowLeftIcon : ArrowRightIcon}\n ></atomic-icon>\n </Button>\n <div\n part={`${direction}-fade`}\n class={`from-background/60 pointer-events-none absolute top-0 z-0 h-10 w-20 ${\n direction === 'left'\n ? 'left-0 bg-linear-to-r'\n : 'right-0 bg-linear-to-l'\n }`}\n ></div>\n </div>\n );\n }\n\n public render() {\n if (this.searchStatus.state.hasError) {\n return <Hidden></Hidden>;\n }\n\n return (\n <div part=\"scrollable-container\" class=\"relative flex\">\n {this.renderArrow('left')}\n <div\n part=\"horizontal-scroll\"\n class=\"wrapper-segmented flex flex-row overflow-x-scroll scroll-smooth\"\n ref={(el) => (this.horizontalScrollRef = el)}\n >\n <slot></slot>\n </div>\n {this.renderArrow('right')}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"atomic-segmented-facet-scrollable.js","mappings":"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","names":["AtomicSegmentedFacetScrollable"],"sources":["src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss?tag=atomic-segmented-facet-scrollable&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/hide-scrollbar.css';\n\n.wrapper-segmented {\n @apply hide-scrollbar;\n}\n","import {\n buildSearchStatus,\n SearchStatus,\n SearchStatusState,\n} from '@coveo/headless';\nimport {Component, Element, h, Listen, State} from '@stencil/core';\nimport {Bindings} from '../../../..';\nimport ArrowLeftIcon from '../../../../images/arrow-left-rounded.svg';\nimport ArrowRightIcon from '../../../../images/arrow-right-rounded.svg';\nimport {\n BindStateToController,\n InitializableComponent,\n InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {Hidden} from '../../../common/stencil-hidden';\n\ntype ArrowDirection = 'right' | 'left';\n\n/**\n * The 'atomic-segmented-facet-scrollable' component wraps around one or several 'atomic-segmented-facet' to provide horizontal scrolling capabilities.\n *\n * @slot default - One or multiple atomic-segmented-facet components\n *\n * @part scrollable-container - The wrapper for the entire component including the horizontal-scroll container and the arrow buttons.\n * @part horizontal-scroll - The scrollable container for the segmented facets.\n * @part left-arrow-wrapper - The wrapper for the arrow button & fade on the left.\n * @part right-arrow-wrapper - The wrapper for the arrow button & fade on the right.\n * @part left-arrow-button - The arrow button used to scroll on the left.\n * @part right-arrow-button - The arrow button used to scroll on the right.\n * @part left-arrow-icon - The arrow icon on the left.\n * @part right-arrow-icon - The arrow icon on the right.\n * @part left-fade - The white to transparent gradient on the left.\n * @part right-fade - The white to transparent gradient on the right.\n */\n@Component({\n tag: 'atomic-segmented-facet-scrollable',\n styleUrl: 'atomic-segmented-facet-scrollable.pcss',\n shadow: true,\n})\nexport class AtomicSegmentedFacetScrollable implements InitializableComponent {\n @Element() private host!: HTMLElement;\n private horizontalScrollRef?: HTMLElement;\n private arrowRef?: HTMLElement;\n private observer!: ResizeObserver;\n\n @InitializeBindings()\n public bindings!: Bindings;\n public searchStatus!: SearchStatus;\n @BindStateToController('searchStatus')\n @State()\n public searchStatusState!: SearchStatusState;\n @State()\n public error!: Error;\n @State() private hideLeftArrow = true;\n @State() private hideRightArrow = true;\n\n public initialize() {\n this.searchStatus = buildSearchStatus(this.bindings.engine);\n }\n\n public componentDidLoad() {\n this.observer = new ResizeObserver(() => {\n this.handleScroll();\n });\n\n Array.from(this.host.children).forEach((el) => this.observer.observe(el));\n this.observer.observe(this.horizontalScrollRef!);\n }\n\n disconnectedCallback() {\n this.observer.disconnect();\n }\n\n @Listen('wheel')\n @Listen('touchmove')\n @Listen('keydown')\n public handleScroll() {\n if (!this.horizontalScrollRef) {\n return;\n }\n const container = this.horizontalScrollRef;\n const isScrollable = container.clientWidth < container.scrollWidth;\n\n const isLeftEdge = Math.floor(container.scrollLeft) <= 0;\n const isRightEdge =\n Math.ceil(container.scrollLeft) >=\n container.scrollWidth - container.clientWidth;\n\n this.hideLeftArrow = !isScrollable || isLeftEdge;\n this.hideRightArrow = !isScrollable || isRightEdge;\n }\n\n private slideHorizontally(direction: ArrowDirection) {\n const container = this.horizontalScrollRef!;\n const arrowsWidth = this.arrowRef!.clientWidth * 2;\n\n const pixelsToScroll = (container.clientWidth - arrowsWidth) * 0.7;\n\n const isLeftEdge = Math.floor(container.scrollLeft - pixelsToScroll) <= 0;\n const isRightEdge =\n Math.ceil(container.scrollLeft + pixelsToScroll) >=\n container.scrollWidth - container.clientWidth;\n\n this.hideLeftArrow = false;\n this.hideRightArrow = false;\n\n if (direction === 'left') {\n container.scrollLeft -= pixelsToScroll;\n this.hideLeftArrow = isLeftEdge;\n return;\n }\n\n container.scrollLeft += pixelsToScroll;\n this.hideRightArrow = isRightEdge;\n }\n\n private renderArrow(direction: ArrowDirection) {\n const hide =\n (direction === 'left' && this.hideLeftArrow) ||\n (direction === 'right' && this.hideRightArrow);\n const hiddenClass = hide ? 'invisible opacity-0' : '';\n const transitionClass =\n 'transition-opacity transition-[visibility] ease-in-out duration-300';\n\n return (\n <div\n part={`${direction}-arrow-wrapper`}\n class={`${hiddenClass} ${transitionClass}`}\n >\n <Button\n part={`${direction}-arrow-button`}\n style=\"square-neutral\"\n class={`absolute top-0 bottom-0 z-1 flex h-10 w-10 shrink-0 basis-8 items-center justify-center rounded ${\n direction === 'left' ? 'left-0' : 'right-0'\n }`}\n ariaHidden=\"true\"\n tabIndex=\"-1\"\n onClick={() => this.slideHorizontally(direction)}\n ref={(el) => (this.arrowRef = el)}\n >\n <atomic-icon\n part={`${direction}-arrow-icon`}\n class=\"w-3.5\"\n icon={direction === 'left' ? ArrowLeftIcon : ArrowRightIcon}\n ></atomic-icon>\n </Button>\n <div\n part={`${direction}-fade`}\n class={`from-background/60 pointer-events-none absolute top-0 z-0 h-10 w-20 ${\n direction === 'left'\n ? 'left-0 bg-linear-to-r'\n : 'right-0 bg-linear-to-l'\n }`}\n ></div>\n </div>\n );\n }\n\n public render() {\n if (this.searchStatus.state.hasError) {\n return <Hidden></Hidden>;\n }\n\n return (\n <div part=\"scrollable-container\" class=\"relative flex\">\n {this.renderArrow('left')}\n <div\n part=\"horizontal-scroll\"\n class=\"wrapper-segmented flex flex-row overflow-x-scroll scroll-smooth\"\n ref={(el) => (this.horizontalScrollRef = el)}\n >\n <slot></slot>\n </div>\n {this.renderArrow('right')}\n </div>\n );\n }\n}\n"],"version":3}
@@ -1 +1 @@
1
- {"file":"atomic-smart-snippet-collapse-wrapper2.js","mappings":";;;;AAAA,MAAM,oCAAoC,GAAG,66jEAA66jE,CAAC;AAC39jE,gDAAe,oCAAoC;;;;;;;;;;;;MCYtC,iCAAiC;;;;;QAS5B,eAAU,GAAG,IAAI,CAAC;QAElB,eAAU,GAAG,IAAI,CAAC;QAI1B,uBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;;;0BANrB,IAAI;0BAEJ,IAAI;;;IAMzB,aAAa;QACnB,IACE,IAAI,CAAC,aAAa;aACjB,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,EACpE;YACA,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;SACH;KACF;IAEM,UAAU;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEM,kBAAkB;QACvB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC5D,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAEO,oBAAoB;QAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAW,GAAG,IAAI,CAAC,aAAc,CAAC;QACzD,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CACzB,kBAAkB,EAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAC5B,CAAC;KACH;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QACD,QACE,cACE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EACnD,KAAK,EAAC,mCAAmC,EACzC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,kBAAkB,GAAG,kBAAkB,IAE9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC,EAClE,mBACE,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,yBAAyB,GAClB,CACR,EACT;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EACH,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,kBAAkB;kBACvC,IAAI,CAAC,UAAU;sBACb,UAAU;sBACV,EAAE;kBACJ,WAAW,IAGjB,4DACE,IAAI,EAAC,gCAAgC,EACrC,KAAK,EAAC,uBAAuB,IAE7B,8DAAa,CACT,EACL,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,EAAE,CAC1C,EACP;KACH;;;;;;;;;;AAtF4B;IAA5B,kBAAkB,EAAE;mEAA+B;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss?tag=atomic-smart-snippet-collapse-wrapper&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../../utils/tailwind-utilities/set-font-size.tw.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n &::part(smart-snippet-collapse-wrapper) {\n @apply set-font-size-lg;\n\n height: auto;\n max-height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n transition: max-height 2s cubic-bezier(0, 1, 0.16, 1) -1.82s;\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n}\n\n:host(.expanded) {\n &::part(smart-snippet-collapse-wrapper) {\n height: auto;\n max-height: 9999999px;\n transition: max-height 2s cubic-bezier(1, 0, 1, 0) 0s;\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n}\n","import {Component, h, Element, State, Prop, Host} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-collapse-wrapper',\n styleUrl: 'atomic-smart-snippet-collapse-wrapper.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetCollapseWrapper {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) public maximumHeight?: number;\n\n @Prop({reflect: true}) public collapsedHeight?: number;\n\n @State() public isExpanded = true;\n\n @State() public showButton = true;\n\n @State() private fullHeight?: number;\n\n private shouldRenderButton = !!this.maximumHeight;\n\n private validateProps() {\n if (\n this.maximumHeight &&\n (!this.collapsedHeight || this.maximumHeight < this.collapsedHeight)\n ) {\n throw new Error(\n 'snippetMaximumHeight must be equal or greater than snippetCollapsedHeight'\n );\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n public componentDidRender() {\n if (this.fullHeight === undefined && this.shouldRenderButton) {\n this.initializeFullHeight();\n }\n }\n\n private initializeFullHeight() {\n this.fullHeight = this.host.getBoundingClientRect().height;\n this.showButton = this.fullHeight! > this.maximumHeight!;\n this.isExpanded = !this.showButton;\n this.host.style.setProperty(\n '--collapsed-size',\n this.collapsedHeight + 'px'\n );\n }\n\n private renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() => (this.isExpanded = !this.isExpanded)}\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n render() {\n return (\n <Host\n class={\n this.fullHeight || !this.shouldRenderButton\n ? this.isExpanded\n ? 'expanded'\n : ''\n : 'invisible'\n }\n >\n <div\n part=\"smart-snippet-collapse-wrapper\"\n class=\"block overflow-hidden\"\n >\n <slot></slot>\n </div>\n {this.shouldRenderButton && this.renderButton()}\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"atomic-smart-snippet-collapse-wrapper2.js","mappings":";;;;AAAA,MAAM,oCAAoC,GAAG,66jEAA66jE,CAAC;AAC39jE,gDAAe,oCAAoC;;;;;;;;;;;;MCYtC,iCAAiC;;;;;QAS5B,eAAU,GAAG,IAAI,CAAC;QAElB,eAAU,GAAG,IAAI,CAAC;QAI1B,uBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;;;0BANrB,IAAI;0BAEJ,IAAI;;;IAMzB,aAAa;QACnB,IACE,IAAI,CAAC,aAAa;aACjB,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,EACpE;YACA,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;SACH;KACF;IAEM,UAAU;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEM,kBAAkB;QACvB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC5D,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAEO,oBAAoB;QAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAW,GAAG,IAAI,CAAC,aAAc,CAAC;QACzD,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CACzB,kBAAkB,EAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAC5B,CAAC;KACH;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QACD,QACE,cACE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EACnD,KAAK,EAAC,mCAAmC,EACzC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,kBAAkB,GAAG,kBAAkB,IAE9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC,EAClE,mBACE,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,yBAAyB,GAClB,CACR,EACT;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EACH,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,kBAAkB;kBACvC,IAAI,CAAC,UAAU;sBACb,UAAU;sBACV,EAAE;kBACJ,WAAW,IAGjB,4DACE,IAAI,EAAC,gCAAgC,EACrC,KAAK,EAAC,uBAAuB,IAE7B,8DAAa,CACT,EACL,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,EAAE,CAC1C,EACP;KACH;;;;;;;;;;AAtF4B;IAA5B,kBAAkB,EAAE;mEAA+B;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss?tag=atomic-smart-snippet-collapse-wrapper&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/set-font-size.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n &::part(smart-snippet-collapse-wrapper) {\n @apply set-font-size-lg;\n\n height: auto;\n max-height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n transition: max-height 2s cubic-bezier(0, 1, 0.16, 1) -1.82s;\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n}\n\n:host(.expanded) {\n &::part(smart-snippet-collapse-wrapper) {\n height: auto;\n max-height: 9999999px;\n transition: max-height 2s cubic-bezier(1, 0, 1, 0) 0s;\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n}\n","import {Component, h, Element, State, Prop, Host} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-collapse-wrapper',\n styleUrl: 'atomic-smart-snippet-collapse-wrapper.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetCollapseWrapper {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) public maximumHeight?: number;\n\n @Prop({reflect: true}) public collapsedHeight?: number;\n\n @State() public isExpanded = true;\n\n @State() public showButton = true;\n\n @State() private fullHeight?: number;\n\n private shouldRenderButton = !!this.maximumHeight;\n\n private validateProps() {\n if (\n this.maximumHeight &&\n (!this.collapsedHeight || this.maximumHeight < this.collapsedHeight)\n ) {\n throw new Error(\n 'snippetMaximumHeight must be equal or greater than snippetCollapsedHeight'\n );\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n public componentDidRender() {\n if (this.fullHeight === undefined && this.shouldRenderButton) {\n this.initializeFullHeight();\n }\n }\n\n private initializeFullHeight() {\n this.fullHeight = this.host.getBoundingClientRect().height;\n this.showButton = this.fullHeight! > this.maximumHeight!;\n this.isExpanded = !this.showButton;\n this.host.style.setProperty(\n '--collapsed-size',\n this.collapsedHeight + 'px'\n );\n }\n\n private renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() => (this.isExpanded = !this.isExpanded)}\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n render() {\n return (\n <Host\n class={\n this.fullHeight || !this.shouldRenderButton\n ? this.isExpanded\n ? 'expanded'\n : ''\n : 'invisible'\n }\n >\n <div\n part=\"smart-snippet-collapse-wrapper\"\n class=\"block overflow-hidden\"\n >\n <slot></slot>\n </div>\n {this.shouldRenderButton && this.renderButton()}\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1 +1 @@
1
- {"file":"atomic-smart-snippet-expandable-answer2.js","mappings":"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","names":[],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss?tag=atomic-smart-snippet-expandable-answer&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../../utils/tailwind-utilities/set-font-size.tw.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n atomic-smart-snippet-answer {\n @apply set-font-size-lg;\n\n display: block;\n overflow: hidden;\n height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n &.loaded {\n transition: height ease-in-out 0.25s;\n }\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n\n .expanded {\n atomic-smart-snippet-answer {\n height: var(--full-height);\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n }\n}\n","import {InlineLink} from '@coveo/headless';\nimport {\n h,\n Component,\n State,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {listenOnce} from '../../../../utils/event-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-expandable-answer',\n styleUrl: 'atomic-smart-snippet-expandable-answer.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetExpandableAnswer {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) expanded!: boolean;\n @Prop() htmlContent!: string;\n /**\n * The maximum height (in pixels) a snippet can have before the component truncates it and displays a \"show more\" button.\n */\n @Prop({reflect: true}) maximumHeight = 250;\n /**\n * When the answer is partly hidden, how much of its height (in pixels) should be visible.\n */\n @Prop({reflect: true}) collapsedHeight = 180;\n /**\n * Sets the style of the snippet.\n *\n * Example:\n * ```ts\n * expandableAnswer.snippetStyle = `\n * b {\n * color: blue;\n * }\n * `;\n * ```\n */\n @Prop() snippetStyle?: string;\n\n @State() fullHeight?: number;\n\n @Event() expand!: EventEmitter;\n @Event() collapse!: EventEmitter;\n @Event() selectInlineLink!: EventEmitter<InlineLink>;\n @Event() beginDelayedSelectInlineLink!: EventEmitter<InlineLink>;\n @Event() cancelPendingSelectInlineLink!: EventEmitter<InlineLink>;\n\n private validateProps() {\n if (this.maximumHeight < this.collapsedHeight) {\n throw 'maximumHeight must be equal or greater than collapsedHeight';\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n @Watch('fullHeight')\n public fullHeightUpdated() {\n this.host.style.setProperty('--full-height', `${this.fullHeight}px`);\n this.host.style.setProperty(\n '--collapsed-size',\n `${this.showButton ? this.collapsedHeight : this.fullHeight}px`\n );\n }\n\n private establishInitialHeight() {\n const answerElement = document.createElement('atomic-smart-snippet-answer');\n answerElement.htmlContent = this.htmlContent;\n answerElement.innerStyle = this.snippetStyle;\n answerElement.style.visibility = 'hidden';\n answerElement.style.position = 'absolute';\n return new Promise<number>((resolve) => {\n listenOnce(answerElement, 'answerSizeUpdated', (event) => {\n answerElement.remove();\n resolve((event as CustomEvent<{height: number}>).detail.height);\n });\n this.host.parentElement!.appendChild(answerElement);\n });\n }\n\n private get showButton() {\n return this.fullHeight! > this.maximumHeight;\n }\n\n private get isExpanded() {\n return this.expanded || !this.showButton;\n }\n\n public async componentWillLoad() {\n this.fullHeight = await this.establishInitialHeight();\n }\n\n public renderAnswer() {\n return (\n <div part=\"truncated-answer\">\n <atomic-smart-snippet-answer\n exportparts=\"answer\"\n htmlContent={this.htmlContent}\n innerStyle={this.snippetStyle}\n onAnswerSizeUpdated={(e) => (this.fullHeight = e.detail.height)}\n onSelectInlineLink={(e) => this.selectInlineLink.emit(e.detail)}\n onBeginDelayedSelectInlineLink={(e) =>\n this.beginDelayedSelectInlineLink.emit(e.detail)\n }\n onCancelPendingSelectInlineLink={(e) =>\n this.cancelPendingSelectInlineLink.emit(e.detail)\n }\n ></atomic-smart-snippet-answer>\n </div>\n );\n }\n\n public renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() =>\n this.isExpanded ? this.collapse.emit() : this.expand.emit()\n }\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n public render() {\n return (\n <div class={this.isExpanded ? 'expanded' : ''}>\n {this.renderAnswer()}\n {this.renderButton()}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"atomic-smart-snippet-expandable-answer2.js","mappings":"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","names":[],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss?tag=atomic-smart-snippet-expandable-answer&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/set-font-size.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n atomic-smart-snippet-answer {\n @apply set-font-size-lg;\n\n display: block;\n overflow: hidden;\n height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n &.loaded {\n transition: height ease-in-out 0.25s;\n }\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n\n .expanded {\n atomic-smart-snippet-answer {\n height: var(--full-height);\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n }\n}\n","import {InlineLink} from '@coveo/headless';\nimport {\n h,\n Component,\n State,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {listenOnce} from '../../../../utils/event-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-expandable-answer',\n styleUrl: 'atomic-smart-snippet-expandable-answer.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetExpandableAnswer {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) expanded!: boolean;\n @Prop() htmlContent!: string;\n /**\n * The maximum height (in pixels) a snippet can have before the component truncates it and displays a \"show more\" button.\n */\n @Prop({reflect: true}) maximumHeight = 250;\n /**\n * When the answer is partly hidden, how much of its height (in pixels) should be visible.\n */\n @Prop({reflect: true}) collapsedHeight = 180;\n /**\n * Sets the style of the snippet.\n *\n * Example:\n * ```ts\n * expandableAnswer.snippetStyle = `\n * b {\n * color: blue;\n * }\n * `;\n * ```\n */\n @Prop() snippetStyle?: string;\n\n @State() fullHeight?: number;\n\n @Event() expand!: EventEmitter;\n @Event() collapse!: EventEmitter;\n @Event() selectInlineLink!: EventEmitter<InlineLink>;\n @Event() beginDelayedSelectInlineLink!: EventEmitter<InlineLink>;\n @Event() cancelPendingSelectInlineLink!: EventEmitter<InlineLink>;\n\n private validateProps() {\n if (this.maximumHeight < this.collapsedHeight) {\n throw 'maximumHeight must be equal or greater than collapsedHeight';\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n @Watch('fullHeight')\n public fullHeightUpdated() {\n this.host.style.setProperty('--full-height', `${this.fullHeight}px`);\n this.host.style.setProperty(\n '--collapsed-size',\n `${this.showButton ? this.collapsedHeight : this.fullHeight}px`\n );\n }\n\n private establishInitialHeight() {\n const answerElement = document.createElement('atomic-smart-snippet-answer');\n answerElement.htmlContent = this.htmlContent;\n answerElement.innerStyle = this.snippetStyle;\n answerElement.style.visibility = 'hidden';\n answerElement.style.position = 'absolute';\n return new Promise<number>((resolve) => {\n listenOnce(answerElement, 'answerSizeUpdated', (event) => {\n answerElement.remove();\n resolve((event as CustomEvent<{height: number}>).detail.height);\n });\n this.host.parentElement!.appendChild(answerElement);\n });\n }\n\n private get showButton() {\n return this.fullHeight! > this.maximumHeight;\n }\n\n private get isExpanded() {\n return this.expanded || !this.showButton;\n }\n\n public async componentWillLoad() {\n this.fullHeight = await this.establishInitialHeight();\n }\n\n public renderAnswer() {\n return (\n <div part=\"truncated-answer\">\n <atomic-smart-snippet-answer\n exportparts=\"answer\"\n htmlContent={this.htmlContent}\n innerStyle={this.snippetStyle}\n onAnswerSizeUpdated={(e) => (this.fullHeight = e.detail.height)}\n onSelectInlineLink={(e) => this.selectInlineLink.emit(e.detail)}\n onBeginDelayedSelectInlineLink={(e) =>\n this.beginDelayedSelectInlineLink.emit(e.detail)\n }\n onCancelPendingSelectInlineLink={(e) =>\n this.cancelPendingSelectInlineLink.emit(e.detail)\n }\n ></atomic-smart-snippet-answer>\n </div>\n );\n }\n\n public renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() =>\n this.isExpanded ? this.collapse.emit() : this.expand.emit()\n }\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n public render() {\n return (\n <div class={this.isExpanded ? 'expanded' : ''}>\n {this.renderAnswer()}\n {this.renderButton()}\n </div>\n );\n }\n}\n"],"version":3}
@@ -48,7 +48,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
48
48
  this.analytics = true;
49
49
  /**
50
50
  * Whether the state should be reflected in the URL parameters.
51
- * @deprecated - replaced by `disable-state-reflection-in-url`
51
+ * @deprecated - replaced by `disable-state-reflection-in-url` (this defaults to `true`, while the replacement defaults to `false`).
52
52
  */
53
53
  this.reflectStateInUrl = true;
54
54
  /**
@@ -26,7 +26,7 @@ let AtomicProductText = class AtomicProductText extends LitElement {
26
26
  super(...arguments);
27
27
  /**
28
28
  * Whether to highlight the string field value.
29
- * @deprecated - replaced by `no-highlight`
29
+ * @deprecated - replaced by `no-highlight` (this defaults to `true`, while the replacement is the inverse and defaults to `false`).
30
30
  * Only works if the `field` property is set to `excerpt` or `ec_name`.
31
31
  */
32
32
  this.shouldHighlight = true;
@@ -46,12 +46,9 @@ let AtomicProductText = class AtomicProductText extends LitElement {
46
46
  }
47
47
  }
48
48
  get shouldRenderHighlights() {
49
- if (this.disableHighlight) {
50
- return false;
51
- }
52
- else {
53
- return this.shouldHighlight && this.isFieldSupportedForHighlighting();
54
- }
49
+ return (!this.disableHighlight &&
50
+ this.shouldHighlight &&
51
+ this.isFieldSupportedForHighlighting());
55
52
  }
56
53
  isFieldSupportedForHighlighting() {
57
54
  return ['ec_name', 'excerpt'].includes(this.field);
@@ -1,7 +1,6 @@
1
1
  import { unsafeCSS } from 'lit';
2
2
  import theme from "../utils/coveo.tw.css";
3
3
  import styles from "../utils/tailwind.global.tw.css";
4
- import utilities from "../utils/tailwind-utilities/utilities.tw.css";
5
4
  const tailwindPropertiesSheet = typeof window !== 'undefined'
6
5
  ? (() => {
7
6
  const propCss = styles;
@@ -43,7 +42,6 @@ export const withTailwindStyles = (Base) => {
43
42
  const baseStyles = [
44
43
  unsafeCSS(theme),
45
44
  unsafeCSS(styles),
46
- unsafeCSS(utilities),
47
45
  ];
48
46
  const customStyles = Base.styles;
49
47
  if (Array.isArray(customStyles)) {
@@ -3,7 +3,7 @@ function getWindow() {
3
3
  }
4
4
  export function getAtomicEnvironment(headlessVersion) {
5
5
  return {
6
- version: "3.33.0",
6
+ version: "3.33.1-pre.079ffaa71a",
7
7
  headlessVersion,
8
8
  };
9
9
  }
@@ -1 +1 @@
1
- {"version":3,"names":["atomicSmartSnippetCollapseWrapperCss","AtomicSmartSnippetCollapseWrapperStyle0","AtomicSmartSnippetCollapseWrapper","this","isExpanded","showButton","shouldRenderButton","maximumHeight","validateProps","collapsedHeight","Error","initialize","componentDidRender","fullHeight","undefined","initializeFullHeight","host","getBoundingClientRect","height","style","setProperty","renderButton","h","onClick","class","part","bindings","i18n","t","icon","ArrowDown","render","Host","key","__decorate","InitializeBindings","atomicSmartSnippetExpandableAnswerCss","AtomicSmartSnippetExpandableAnswerStyle0","AtomicSmartSnippetExpandableAnswer","fullHeightUpdated","establishInitialHeight","answerElement","document","createElement","htmlContent","innerStyle","snippetStyle","visibility","position","Promise","resolve","listenOnce","event","remove","detail","parentElement","appendChild","expanded","componentWillLoad","renderAnswer","exportparts","onAnswerSizeUpdated","e","onSelectInlineLink","selectInlineLink","emit","onBeginDelayedSelectInlineLink","beginDelayedSelectInlineLink","onCancelPendingSelectInlineLink","cancelPendingSelectInlineLink","collapse","expand"],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss?tag=atomic-smart-snippet-collapse-wrapper&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx","src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss?tag=atomic-smart-snippet-expandable-answer&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@import '../../../../utils/tailwind-utilities/set-font-size.tw.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n &::part(smart-snippet-collapse-wrapper) {\n @apply set-font-size-lg;\n\n height: auto;\n max-height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n transition: max-height 2s cubic-bezier(0, 1, 0.16, 1) -1.82s;\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n}\n\n:host(.expanded) {\n &::part(smart-snippet-collapse-wrapper) {\n height: auto;\n max-height: 9999999px;\n transition: max-height 2s cubic-bezier(1, 0, 1, 0) 0s;\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n}\n","import {Component, h, Element, State, Prop, Host} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-collapse-wrapper',\n styleUrl: 'atomic-smart-snippet-collapse-wrapper.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetCollapseWrapper {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) public maximumHeight?: number;\n\n @Prop({reflect: true}) public collapsedHeight?: number;\n\n @State() public isExpanded = true;\n\n @State() public showButton = true;\n\n @State() private fullHeight?: number;\n\n private shouldRenderButton = !!this.maximumHeight;\n\n private validateProps() {\n if (\n this.maximumHeight &&\n (!this.collapsedHeight || this.maximumHeight < this.collapsedHeight)\n ) {\n throw new Error(\n 'snippetMaximumHeight must be equal or greater than snippetCollapsedHeight'\n );\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n public componentDidRender() {\n if (this.fullHeight === undefined && this.shouldRenderButton) {\n this.initializeFullHeight();\n }\n }\n\n private initializeFullHeight() {\n this.fullHeight = this.host.getBoundingClientRect().height;\n this.showButton = this.fullHeight! > this.maximumHeight!;\n this.isExpanded = !this.showButton;\n this.host.style.setProperty(\n '--collapsed-size',\n this.collapsedHeight + 'px'\n );\n }\n\n private renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() => (this.isExpanded = !this.isExpanded)}\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n render() {\n return (\n <Host\n class={\n this.fullHeight || !this.shouldRenderButton\n ? this.isExpanded\n ? 'expanded'\n : ''\n : 'invisible'\n }\n >\n <div\n part=\"smart-snippet-collapse-wrapper\"\n class=\"block overflow-hidden\"\n >\n <slot></slot>\n </div>\n {this.shouldRenderButton && this.renderButton()}\n </Host>\n );\n }\n}\n","@import '../../../../global/global.pcss';\n@import '../../../../utils/tailwind-utilities/set-font-size.tw.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n atomic-smart-snippet-answer {\n @apply set-font-size-lg;\n\n display: block;\n overflow: hidden;\n height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n &.loaded {\n transition: height ease-in-out 0.25s;\n }\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n\n .expanded {\n atomic-smart-snippet-answer {\n height: var(--full-height);\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n }\n}\n","import {InlineLink} from '@coveo/headless';\nimport {\n h,\n Component,\n State,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {listenOnce} from '../../../../utils/event-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-expandable-answer',\n styleUrl: 'atomic-smart-snippet-expandable-answer.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetExpandableAnswer {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) expanded!: boolean;\n @Prop() htmlContent!: string;\n /**\n * The maximum height (in pixels) a snippet can have before the component truncates it and displays a \"show more\" button.\n */\n @Prop({reflect: true}) maximumHeight = 250;\n /**\n * When the answer is partly hidden, how much of its height (in pixels) should be visible.\n */\n @Prop({reflect: true}) collapsedHeight = 180;\n /**\n * Sets the style of the snippet.\n *\n * Example:\n * ```ts\n * expandableAnswer.snippetStyle = `\n * b {\n * color: blue;\n * }\n * `;\n * ```\n */\n @Prop() snippetStyle?: string;\n\n @State() fullHeight?: number;\n\n @Event() expand!: EventEmitter;\n @Event() collapse!: EventEmitter;\n @Event() selectInlineLink!: EventEmitter<InlineLink>;\n @Event() beginDelayedSelectInlineLink!: EventEmitter<InlineLink>;\n @Event() cancelPendingSelectInlineLink!: EventEmitter<InlineLink>;\n\n private validateProps() {\n if (this.maximumHeight < this.collapsedHeight) {\n throw 'maximumHeight must be equal or greater than collapsedHeight';\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n @Watch('fullHeight')\n public fullHeightUpdated() {\n this.host.style.setProperty('--full-height', `${this.fullHeight}px`);\n this.host.style.setProperty(\n '--collapsed-size',\n `${this.showButton ? this.collapsedHeight : this.fullHeight}px`\n );\n }\n\n private establishInitialHeight() {\n const answerElement = document.createElement('atomic-smart-snippet-answer');\n answerElement.htmlContent = this.htmlContent;\n answerElement.innerStyle = this.snippetStyle;\n answerElement.style.visibility = 'hidden';\n answerElement.style.position = 'absolute';\n return new Promise<number>((resolve) => {\n listenOnce(answerElement, 'answerSizeUpdated', (event) => {\n answerElement.remove();\n resolve((event as CustomEvent<{height: number}>).detail.height);\n });\n this.host.parentElement!.appendChild(answerElement);\n });\n }\n\n private get showButton() {\n return this.fullHeight! > this.maximumHeight;\n }\n\n private get isExpanded() {\n return this.expanded || !this.showButton;\n }\n\n public async componentWillLoad() {\n this.fullHeight = await this.establishInitialHeight();\n }\n\n public renderAnswer() {\n return (\n <div part=\"truncated-answer\">\n <atomic-smart-snippet-answer\n exportparts=\"answer\"\n htmlContent={this.htmlContent}\n innerStyle={this.snippetStyle}\n onAnswerSizeUpdated={(e) => (this.fullHeight = e.detail.height)}\n onSelectInlineLink={(e) => this.selectInlineLink.emit(e.detail)}\n onBeginDelayedSelectInlineLink={(e) =>\n this.beginDelayedSelectInlineLink.emit(e.detail)\n }\n onCancelPendingSelectInlineLink={(e) =>\n this.cancelPendingSelectInlineLink.emit(e.detail)\n }\n ></atomic-smart-snippet-answer>\n </div>\n );\n }\n\n public renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() =>\n this.isExpanded ? this.collapse.emit() : this.expand.emit()\n }\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n public render() {\n return (\n <div class={this.isExpanded ? 'expanded' : ''}>\n {this.renderAnswer()}\n {this.renderButton()}\n </div>\n );\n }\n}\n"],"mappings":"+OAAA,MAAMA,EAAuC,kyjEAC7C,MAAAC,EAAeD,E,iXCYFE,EAAiC,M,yBAS5BC,KAAAC,WAAa,KAEbD,KAAAE,WAAa,KAIrBF,KAAAG,qBAAuBH,KAAKI,c,4EANP,K,gBAEA,K,0BAMrB,aAAAC,GACN,GACEL,KAAKI,iBACHJ,KAAKM,iBAAmBN,KAAKI,cAAgBJ,KAAKM,iBACpD,CACA,MAAM,IAAIC,MACR,4E,EAKC,UAAAC,GACLR,KAAKK,e,CAGA,kBAAAI,GACL,GAAIT,KAAKU,aAAeC,WAAaX,KAAKG,mBAAoB,CAC5DH,KAAKY,sB,EAID,oBAAAA,GACNZ,KAAKU,WAAaV,KAAKa,KAAKC,wBAAwBC,OACpDf,KAAKE,WAAaF,KAAKU,WAAcV,KAAKI,cAC1CJ,KAAKC,YAAcD,KAAKE,WACxBF,KAAKa,KAAKG,MAAMC,YACd,mBACAjB,KAAKM,gBAAkB,K,CAInB,YAAAY,GACN,IAAKlB,KAAKE,WAAY,CACpB,M,CAEF,OACEiB,EAAA,UACEC,QAAS,IAAOpB,KAAKC,YAAcD,KAAKC,WACxCoB,MAAM,oCACNC,KAAMtB,KAAKC,WAAa,mBAAqB,oBAE5CD,KAAKuB,SAASC,KAAKC,EAAEzB,KAAKC,WAAa,YAAc,aACtDkB,EAAA,eACEO,KAAMC,EACNN,MAAM,4B,CAMd,MAAAO,GACE,OACET,EAACU,EAAI,CAAAC,IAAA,2CACHT,MACErB,KAAKU,aAAeV,KAAKG,mBACrBH,KAAKC,WACH,WACA,GACF,aAGNkB,EAAA,OAAAW,IAAA,2CACER,KAAK,iCACLD,MAAM,yBAENF,EAAA,QAAAW,IAAA,8CAED9B,KAAKG,oBAAsBH,KAAKkB,e,6BAnFVa,GAA5BC,K,yCCdH,MAAMC,EAAwC,gvjEAC9C,MAAAC,EAAeD,E,iXCuBFE,EAAkC,M,sSAUtBnC,KAAAI,cAAgB,IAIhBJ,KAAAM,gBAAkB,I,sEAJF,I,qBAIE,I,sDAuBjC,aAAAD,GACN,GAAIL,KAAKI,cAAgBJ,KAAKM,gBAAiB,CAC7C,KAAM,6D,EAIH,UAAAE,GACLR,KAAKK,e,CAIA,iBAAA+B,GACLpC,KAAKa,KAAKG,MAAMC,YAAY,gBAAiB,GAAGjB,KAAKU,gBACrDV,KAAKa,KAAKG,MAAMC,YACd,mBACA,GAAGjB,KAAKE,WAAaF,KAAKM,gBAAkBN,KAAKU,e,CAI7C,sBAAA2B,GACN,MAAMC,EAAgBC,SAASC,cAAc,+BAC7CF,EAAcG,YAAczC,KAAKyC,YACjCH,EAAcI,WAAa1C,KAAK2C,aAChCL,EAActB,MAAM4B,WAAa,SACjCN,EAActB,MAAM6B,SAAW,WAC/B,OAAO,IAAIC,SAAiBC,IAC1BC,EAAWV,EAAe,qBAAsBW,IAC9CX,EAAcY,SACdH,EAASE,EAAwCE,OAAOpC,OAAO,IAEjEf,KAAKa,KAAKuC,cAAeC,YAAYf,EAAc,G,CAIvD,cAAYpC,GACV,OAAOF,KAAKU,WAAcV,KAAKI,a,CAGjC,cAAYH,GACV,OAAOD,KAAKsD,WAAatD,KAAKE,U,CAGzB,uBAAMqD,GACXvD,KAAKU,iBAAmBV,KAAKqC,wB,CAGxB,YAAAmB,GACL,OACErC,EAAA,OAAKG,KAAK,oBACRH,EAAA,+BACEsC,YAAY,SACZhB,YAAazC,KAAKyC,YAClBC,WAAY1C,KAAK2C,aACjBe,oBAAsBC,GAAO3D,KAAKU,WAAaiD,EAAER,OAAOpC,OACxD6C,mBAAqBD,GAAM3D,KAAK6D,iBAAiBC,KAAKH,EAAER,QACxDY,+BAAiCJ,GAC/B3D,KAAKgE,6BAA6BF,KAAKH,EAAER,QAE3Cc,gCAAkCN,GAChC3D,KAAKkE,8BAA8BJ,KAAKH,EAAER,U,CAO7C,YAAAjC,GACL,IAAKlB,KAAKE,WAAY,CACpB,M,CAEF,OACEiB,EAAA,UACEC,QAAS,IACPpB,KAAKC,WAAaD,KAAKmE,SAASL,OAAS9D,KAAKoE,OAAON,OAEvDzC,MAAM,oCACNC,KAAMtB,KAAKC,WAAa,mBAAqB,oBAE5CD,KAAKuB,SAASC,KAAKC,EAAEzB,KAAKC,WAAa,YAAc,aACtDkB,EAAA,eACEO,KAAMC,EACNN,MAAM,4B,CAMP,MAAAO,GACL,OACET,EAAA,OAAAW,IAAA,2CAAKT,MAAOrB,KAAKC,WAAa,WAAa,IACxCD,KAAKwD,eACLxD,KAAKkB,e,4FA/HiBa,EAAA,CAA5BC,K","ignoreList":[]}
1
+ {"version":3,"names":["atomicSmartSnippetCollapseWrapperCss","AtomicSmartSnippetCollapseWrapperStyle0","AtomicSmartSnippetCollapseWrapper","this","isExpanded","showButton","shouldRenderButton","maximumHeight","validateProps","collapsedHeight","Error","initialize","componentDidRender","fullHeight","undefined","initializeFullHeight","host","getBoundingClientRect","height","style","setProperty","renderButton","h","onClick","class","part","bindings","i18n","t","icon","ArrowDown","render","Host","key","__decorate","InitializeBindings","atomicSmartSnippetExpandableAnswerCss","AtomicSmartSnippetExpandableAnswerStyle0","AtomicSmartSnippetExpandableAnswer","fullHeightUpdated","establishInitialHeight","answerElement","document","createElement","htmlContent","innerStyle","snippetStyle","visibility","position","Promise","resolve","listenOnce","event","remove","detail","parentElement","appendChild","expanded","componentWillLoad","renderAnswer","exportparts","onAnswerSizeUpdated","e","onSelectInlineLink","selectInlineLink","emit","onBeginDelayedSelectInlineLink","beginDelayedSelectInlineLink","onCancelPendingSelectInlineLink","cancelPendingSelectInlineLink","collapse","expand"],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss?tag=atomic-smart-snippet-collapse-wrapper&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx","src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss?tag=atomic-smart-snippet-expandable-answer&encapsulation=shadow","src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/set-font-size.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n &::part(smart-snippet-collapse-wrapper) {\n @apply set-font-size-lg;\n\n height: auto;\n max-height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n transition: max-height 2s cubic-bezier(0, 1, 0.16, 1) -1.82s;\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n}\n\n:host(.expanded) {\n &::part(smart-snippet-collapse-wrapper) {\n height: auto;\n max-height: 9999999px;\n transition: max-height 2s cubic-bezier(1, 0, 1, 0) 0s;\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n}\n","import {Component, h, Element, State, Prop, Host} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-collapse-wrapper',\n styleUrl: 'atomic-smart-snippet-collapse-wrapper.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetCollapseWrapper {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) public maximumHeight?: number;\n\n @Prop({reflect: true}) public collapsedHeight?: number;\n\n @State() public isExpanded = true;\n\n @State() public showButton = true;\n\n @State() private fullHeight?: number;\n\n private shouldRenderButton = !!this.maximumHeight;\n\n private validateProps() {\n if (\n this.maximumHeight &&\n (!this.collapsedHeight || this.maximumHeight < this.collapsedHeight)\n ) {\n throw new Error(\n 'snippetMaximumHeight must be equal or greater than snippetCollapsedHeight'\n );\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n public componentDidRender() {\n if (this.fullHeight === undefined && this.shouldRenderButton) {\n this.initializeFullHeight();\n }\n }\n\n private initializeFullHeight() {\n this.fullHeight = this.host.getBoundingClientRect().height;\n this.showButton = this.fullHeight! > this.maximumHeight!;\n this.isExpanded = !this.showButton;\n this.host.style.setProperty(\n '--collapsed-size',\n this.collapsedHeight + 'px'\n );\n }\n\n private renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() => (this.isExpanded = !this.isExpanded)}\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n render() {\n return (\n <Host\n class={\n this.fullHeight || !this.shouldRenderButton\n ? this.isExpanded\n ? 'expanded'\n : ''\n : 'invisible'\n }\n >\n <div\n part=\"smart-snippet-collapse-wrapper\"\n class=\"block overflow-hidden\"\n >\n <slot></slot>\n </div>\n {this.shouldRenderButton && this.renderButton()}\n </Host>\n );\n }\n}\n","@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/set-font-size.css';\n\n/**\n * @prop --atomic-smart-snippet-gradient-start: At which height to start fading out a truncated answer.\n */\n:host {\n atomic-smart-snippet-answer {\n @apply set-font-size-lg;\n\n display: block;\n overflow: hidden;\n height: var(--collapsed-size);\n\n --gradient-start: var(\n --atomic-smart-snippet-gradient-start,\n calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))\n );\n @apply text-on-background;\n mask-image: linear-gradient(black, black var(--gradient-start), transparent 100%);\n\n &.loaded {\n transition: height ease-in-out 0.25s;\n }\n }\n\n button atomic-icon {\n @apply relative top-0.5;\n }\n\n .expanded {\n atomic-smart-snippet-answer {\n height: var(--full-height);\n mask-image: none;\n }\n\n button atomic-icon {\n @apply top-0 -scale-y-100;\n }\n }\n}\n","import {InlineLink} from '@coveo/headless';\nimport {\n h,\n Component,\n State,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport {listenOnce} from '../../../../utils/event-utils';\nimport {InitializeBindings} from '../../../../utils/initialization-utils';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @internal\n */\n@Component({\n tag: 'atomic-smart-snippet-expandable-answer',\n styleUrl: 'atomic-smart-snippet-expandable-answer.pcss',\n shadow: true,\n})\nexport class AtomicSmartSnippetExpandableAnswer {\n @InitializeBindings() public bindings!: AnyBindings;\n public error!: Error;\n @Element() public host!: HTMLElement;\n\n @Prop({reflect: true}) expanded!: boolean;\n @Prop() htmlContent!: string;\n /**\n * The maximum height (in pixels) a snippet can have before the component truncates it and displays a \"show more\" button.\n */\n @Prop({reflect: true}) maximumHeight = 250;\n /**\n * When the answer is partly hidden, how much of its height (in pixels) should be visible.\n */\n @Prop({reflect: true}) collapsedHeight = 180;\n /**\n * Sets the style of the snippet.\n *\n * Example:\n * ```ts\n * expandableAnswer.snippetStyle = `\n * b {\n * color: blue;\n * }\n * `;\n * ```\n */\n @Prop() snippetStyle?: string;\n\n @State() fullHeight?: number;\n\n @Event() expand!: EventEmitter;\n @Event() collapse!: EventEmitter;\n @Event() selectInlineLink!: EventEmitter<InlineLink>;\n @Event() beginDelayedSelectInlineLink!: EventEmitter<InlineLink>;\n @Event() cancelPendingSelectInlineLink!: EventEmitter<InlineLink>;\n\n private validateProps() {\n if (this.maximumHeight < this.collapsedHeight) {\n throw 'maximumHeight must be equal or greater than collapsedHeight';\n }\n }\n\n public initialize() {\n this.validateProps();\n }\n\n @Watch('fullHeight')\n public fullHeightUpdated() {\n this.host.style.setProperty('--full-height', `${this.fullHeight}px`);\n this.host.style.setProperty(\n '--collapsed-size',\n `${this.showButton ? this.collapsedHeight : this.fullHeight}px`\n );\n }\n\n private establishInitialHeight() {\n const answerElement = document.createElement('atomic-smart-snippet-answer');\n answerElement.htmlContent = this.htmlContent;\n answerElement.innerStyle = this.snippetStyle;\n answerElement.style.visibility = 'hidden';\n answerElement.style.position = 'absolute';\n return new Promise<number>((resolve) => {\n listenOnce(answerElement, 'answerSizeUpdated', (event) => {\n answerElement.remove();\n resolve((event as CustomEvent<{height: number}>).detail.height);\n });\n this.host.parentElement!.appendChild(answerElement);\n });\n }\n\n private get showButton() {\n return this.fullHeight! > this.maximumHeight;\n }\n\n private get isExpanded() {\n return this.expanded || !this.showButton;\n }\n\n public async componentWillLoad() {\n this.fullHeight = await this.establishInitialHeight();\n }\n\n public renderAnswer() {\n return (\n <div part=\"truncated-answer\">\n <atomic-smart-snippet-answer\n exportparts=\"answer\"\n htmlContent={this.htmlContent}\n innerStyle={this.snippetStyle}\n onAnswerSizeUpdated={(e) => (this.fullHeight = e.detail.height)}\n onSelectInlineLink={(e) => this.selectInlineLink.emit(e.detail)}\n onBeginDelayedSelectInlineLink={(e) =>\n this.beginDelayedSelectInlineLink.emit(e.detail)\n }\n onCancelPendingSelectInlineLink={(e) =>\n this.cancelPendingSelectInlineLink.emit(e.detail)\n }\n ></atomic-smart-snippet-answer>\n </div>\n );\n }\n\n public renderButton() {\n if (!this.showButton) {\n return;\n }\n return (\n <button\n onClick={() =>\n this.isExpanded ? this.collapse.emit() : this.expand.emit()\n }\n class=\"text-primary mb-4 hover:underline\"\n part={this.isExpanded ? 'show-less-button' : 'show-more-button'}\n >\n {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}\n <atomic-icon\n icon={ArrowDown}\n class=\"ml-2 w-3 align-baseline\"\n ></atomic-icon>\n </button>\n );\n }\n\n public render() {\n return (\n <div class={this.isExpanded ? 'expanded' : ''}>\n {this.renderAnswer()}\n {this.renderButton()}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}