@coveo/atomic 3.33.8-pre.fbe332fd49 → 3.34.0-pre.539f99f7c8

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 (194) hide show
  1. package/dist/atomic/_atomic.esm.js +1 -1
  2. package/dist/atomic/atomic.esm.js.map +1 -1
  3. package/dist/atomic/components/_index.d.ts +2 -0
  4. package/dist/atomic/components/_index.js +1 -0
  5. package/dist/atomic/components/analytics-config.js +1 -1
  6. package/dist/atomic/components/atomic-category-facet.js +1 -1
  7. package/dist/atomic/components/atomic-facet.js +1 -1
  8. package/dist/atomic/components/atomic-format-currency.js +1 -1
  9. package/dist/atomic/components/atomic-format-number.js +1 -1
  10. package/dist/atomic/components/atomic-format-unit.js +1 -1
  11. package/dist/atomic/components/atomic-insight-pager.js +2 -38
  12. package/dist/atomic/components/atomic-insight-pager.js.map +1 -1
  13. package/dist/atomic/components/atomic-numeric-facet.js +1 -1
  14. package/dist/atomic/components/atomic-pager.d.ts +11 -0
  15. package/dist/atomic/components/atomic-pager.js +134 -0
  16. package/dist/atomic/components/atomic-pager.js.map +1 -0
  17. package/dist/atomic/components/atomic-query-error.js +1 -1
  18. package/dist/atomic/components/atomic-quickview-modal2.js +1 -1
  19. package/dist/atomic/components/atomic-quickview.js +1 -1
  20. package/dist/atomic/components/atomic-refine-modal2.js +1 -1
  21. package/dist/atomic/components/atomic-refine-toggle.js +1 -1
  22. package/dist/atomic/components/atomic-relevance-inspector2.js +2 -2
  23. package/dist/atomic/components/atomic-result-children.js +1 -1
  24. package/dist/atomic/components/atomic-result-fields-list.js +1 -1
  25. package/dist/atomic/components/atomic-result-link.js +1 -1
  26. package/dist/atomic/components/atomic-result-list.js +1 -1
  27. package/dist/atomic/components/atomic-result-table-placeholder2.js +1 -1
  28. package/dist/atomic/components/atomic-search-box-query-suggestions2.js +1 -1
  29. package/dist/atomic/components/atomic-search-box-recent-queries2.js +1 -1
  30. package/dist/atomic/components/atomic-search-box.js +4 -4
  31. package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js +2 -2
  32. package/dist/atomic/components/atomic-sort-dropdown.js +2 -2
  33. package/dist/atomic/components/atomic-sort-expression.js +1 -1
  34. package/dist/atomic/components/atomic-tab-manager.js +1 -1
  35. package/dist/atomic/components/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.js +11 -18
  36. package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js +7 -2
  37. package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js +10 -19
  38. package/dist/atomic/components/components/search/index.js +0 -1
  39. package/dist/atomic/components/components/search/lazy-index.js +0 -1
  40. package/dist/atomic/components/global/environment.js +1 -1
  41. package/dist/atomic/components/index.js.map +1 -1
  42. package/dist/atomic/components/stencil-pager-navigation.js +42 -0
  43. package/dist/atomic/components/stencil-pager-navigation.js.map +1 -0
  44. package/dist/atomic/{p-e8d5e852.entry.js → p-021f01d6.entry.js} +2 -2
  45. package/dist/atomic/p-211d7d6a.js +2 -0
  46. package/dist/atomic/p-211d7d6a.js.map +1 -0
  47. package/dist/atomic/{p-516b8165.entry.js → p-31f1e44e.entry.js} +2 -2
  48. package/dist/atomic/{p-3af5c567.entry.js → p-330e6e7c.entry.js} +2 -2
  49. package/dist/atomic/{p-6f988841.entry.js → p-3c8d109e.entry.js} +2 -2
  50. package/dist/atomic/{p-65373475.entry.js → p-4b3d253b.entry.js} +2 -2
  51. package/dist/atomic/{p-4c30ca3e.entry.js → p-52ba404c.entry.js} +2 -2
  52. package/dist/atomic/{p-45c4685e.entry.js → p-75e00690.entry.js} +2 -2
  53. package/dist/atomic/{p-8acb1466.entry.js → p-78b70622.entry.js} +2 -2
  54. package/dist/atomic/{p-4915faeb.entry.js → p-7a625c7e.entry.js} +2 -2
  55. package/dist/atomic/{p-f073a78d.entry.js → p-7b0b9e9b.entry.js} +2 -2
  56. package/dist/atomic/{p-a02b1209.entry.js → p-7b899b57.entry.js} +2 -2
  57. package/dist/atomic/{p-bf50b64d.entry.js → p-7dfcd6af.entry.js} +2 -2
  58. package/dist/atomic/{p-5adbf098.entry.js → p-877d35b1.entry.js} +2 -2
  59. package/dist/atomic/{p-031670fe.js → p-896923ef.js} +2 -2
  60. package/dist/atomic/{p-9883415e.entry.js → p-93e29b24.entry.js} +2 -2
  61. package/dist/atomic/{p-470f88ed.entry.js → p-9ec5f1ed.entry.js} +2 -2
  62. package/dist/atomic/{p-be1b98a6.entry.js → p-a760d9f9.entry.js} +2 -2
  63. package/dist/atomic/{p-4e9d1f9e.entry.js → p-aa2a81fd.entry.js} +2 -2
  64. package/dist/atomic/{p-00e5bb15.entry.js → p-ae060711.entry.js} +2 -2
  65. package/dist/atomic/{p-71bb8125.entry.js → p-b28011e6.entry.js} +2 -2
  66. package/dist/atomic/{p-d11b2b24.entry.js → p-c49cfa0c.entry.js} +2 -2
  67. package/dist/atomic/{p-fb7ad34b.entry.js → p-c88a3d2d.entry.js} +2 -2
  68. package/dist/atomic/{p-b4ad3036.entry.js → p-d00a12e9.entry.js} +2 -2
  69. package/dist/atomic/{p-43c16eeb.entry.js → p-dd7584dc.entry.js} +2 -2
  70. package/dist/atomic/{p-757de797.entry.js → p-de066001.entry.js} +2 -2
  71. package/dist/atomic/{p-e1865f9f.entry.js → p-e94360e4.entry.js} +2 -2
  72. package/dist/atomic/{p-d2d22ab2.entry.js → p-f22bcb8c.entry.js} +2 -2
  73. package/dist/atomic/p-fa8b7c4c.entry.js +2 -0
  74. package/dist/atomic/p-fa8b7c4c.entry.js.map +1 -0
  75. package/dist/atomic/p-fcf3f7d7.entry.js +2 -0
  76. package/dist/atomic/p-fcf3f7d7.entry.js.map +1 -0
  77. package/dist/cjs/_loader.cjs.js +1 -1
  78. package/dist/cjs/{analytics-config-e3890e2c.js → analytics-config-f6ee65cf.js} +2 -2
  79. package/dist/cjs/{analytics-config-e3890e2c.js.map → analytics-config-f6ee65cf.js.map} +1 -1
  80. package/dist/cjs/atomic-category-facet.cjs.entry.js +1 -1
  81. package/dist/cjs/atomic-facet.cjs.entry.js +1 -1
  82. package/dist/cjs/atomic-format-currency.cjs.entry.js +1 -1
  83. package/dist/cjs/atomic-format-number.cjs.entry.js +1 -1
  84. package/dist/cjs/atomic-format-unit.cjs.entry.js +1 -1
  85. package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
  86. package/dist/cjs/atomic-insight-pager.cjs.entry.js +7 -41
  87. package/dist/cjs/atomic-insight-pager.cjs.entry.js.map +1 -1
  88. package/dist/cjs/atomic-numeric-facet.cjs.entry.js +1 -1
  89. package/dist/cjs/atomic-pager.cjs.entry.js +121 -0
  90. package/dist/cjs/atomic-pager.cjs.entry.js.map +1 -0
  91. package/dist/cjs/atomic-query-error.cjs.entry.js +1 -1
  92. package/dist/cjs/atomic-quickview-modal.cjs.entry.js +1 -1
  93. package/dist/cjs/atomic-quickview.cjs.entry.js +1 -1
  94. package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
  95. package/dist/cjs/atomic-refine-modal.cjs.entry.js +1 -1
  96. package/dist/cjs/atomic-refine-toggle.cjs.entry.js +1 -1
  97. package/dist/cjs/atomic-relevance-inspector.cjs.entry.js +2 -2
  98. package/dist/cjs/atomic-result-children.cjs.entry.js +1 -1
  99. package/dist/cjs/atomic-result-fields-list.cjs.entry.js +1 -1
  100. package/dist/cjs/atomic-result-link.cjs.entry.js +1 -1
  101. package/dist/cjs/atomic-result-list.cjs.entry.js +1 -1
  102. package/dist/cjs/atomic-result-placeholder_8.cjs.entry.js +1 -1
  103. package/dist/cjs/atomic-search-box-query-suggestions_2.cjs.entry.js +2 -2
  104. package/dist/cjs/atomic-search-box.cjs.entry.js +4 -4
  105. package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
  106. package/dist/cjs/atomic-smart-snippet-feedback-modal.cjs.entry.js +2 -2
  107. package/dist/cjs/atomic-sort-dropdown.cjs.entry.js +2 -2
  108. package/dist/cjs/atomic-sort-expression.cjs.entry.js +1 -1
  109. package/dist/cjs/atomic-tab-manager.cjs.entry.js +1 -1
  110. package/dist/cjs/atomic.cjs.js +1 -1
  111. package/dist/cjs/index-757bc886.js +4 -0
  112. package/dist/cjs/stencil-pager-navigation-c20b8a95.js +48 -0
  113. package/dist/cjs/stencil-pager-navigation-c20b8a95.js.map +1 -0
  114. package/dist/cjs/version.cjs.js +2 -2
  115. package/dist/esm/_loader.js +1 -1
  116. package/dist/esm/{analytics-config-76f4b38f.js → analytics-config-9ae37b4a.js} +2 -2
  117. package/dist/esm/{analytics-config-76f4b38f.js.map → analytics-config-9ae37b4a.js.map} +1 -1
  118. package/dist/esm/atomic-category-facet.entry.js +1 -1
  119. package/dist/esm/atomic-facet.entry.js +1 -1
  120. package/dist/esm/atomic-format-currency.entry.js +1 -1
  121. package/dist/esm/atomic-format-number.entry.js +1 -1
  122. package/dist/esm/atomic-format-unit.entry.js +1 -1
  123. package/dist/esm/atomic-insight-interface.entry.js +1 -1
  124. package/dist/esm/atomic-insight-pager.entry.js +4 -38
  125. package/dist/esm/atomic-insight-pager.entry.js.map +1 -1
  126. package/dist/esm/atomic-numeric-facet.entry.js +1 -1
  127. package/dist/esm/atomic-pager.entry.js +117 -0
  128. package/dist/esm/atomic-pager.entry.js.map +1 -0
  129. package/dist/esm/atomic-query-error.entry.js +1 -1
  130. package/dist/esm/atomic-quickview-modal.entry.js +1 -1
  131. package/dist/esm/atomic-quickview.entry.js +1 -1
  132. package/dist/esm/atomic-recs-interface.entry.js +1 -1
  133. package/dist/esm/atomic-refine-modal.entry.js +1 -1
  134. package/dist/esm/atomic-refine-toggle.entry.js +1 -1
  135. package/dist/esm/atomic-relevance-inspector.entry.js +2 -2
  136. package/dist/esm/atomic-result-children.entry.js +1 -1
  137. package/dist/esm/atomic-result-fields-list.entry.js +1 -1
  138. package/dist/esm/atomic-result-link.entry.js +1 -1
  139. package/dist/esm/atomic-result-list.entry.js +1 -1
  140. package/dist/esm/atomic-result-placeholder_8.entry.js +1 -1
  141. package/dist/esm/atomic-search-box-query-suggestions_2.entry.js +2 -2
  142. package/dist/esm/atomic-search-box.entry.js +4 -4
  143. package/dist/esm/atomic-search-interface.entry.js +1 -1
  144. package/dist/esm/atomic-smart-snippet-feedback-modal.entry.js +2 -2
  145. package/dist/esm/atomic-sort-dropdown.entry.js +2 -2
  146. package/dist/esm/atomic-sort-expression.entry.js +1 -1
  147. package/dist/esm/atomic-tab-manager.entry.js +1 -1
  148. package/dist/esm/atomic.js +1 -1
  149. package/dist/esm/index-3f35faca.js +4 -0
  150. package/dist/esm/stencil-pager-navigation-7261a834.js +42 -0
  151. package/dist/esm/stencil-pager-navigation-7261a834.js.map +1 -0
  152. package/dist/esm/version.js +2 -2
  153. package/dist/types/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.d.ts +1 -2
  154. package/dist/types/components/commerce/atomic-commerce-interface/atomic-commerce-interface.d.ts +1 -0
  155. package/dist/types/components/commerce/atomic-commerce-layout/atomic-commerce-layout.d.ts +3 -3
  156. package/dist/types/components/search/atomic-pager/atomic-pager.d.ts +16 -26
  157. package/dist/types/components/search/index.d.ts +0 -1
  158. package/dist/types/components.d.ts +65 -0
  159. package/docs/atomic-docs.json +167 -1
  160. package/package.json +5 -5
  161. package/dist/atomic/components/components/common/layout/layout-styles-controller.js +0 -40
  162. package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js +0 -26
  163. package/dist/atomic/components/components/search/atomic-pager/atomic-pager.js +0 -175
  164. package/dist/atomic/p-593903ec.entry.js +0 -2
  165. package/dist/atomic/p-593903ec.entry.js.map +0 -1
  166. package/dist/types/components/common/layout/layout-styles-controller.d.ts +0 -22
  167. package/dist/types/components/common/layout/mobile-breakpoint-controller.d.ts +0 -18
  168. /package/dist/atomic/{p-e8d5e852.entry.js.map → p-021f01d6.entry.js.map} +0 -0
  169. /package/dist/atomic/{p-516b8165.entry.js.map → p-31f1e44e.entry.js.map} +0 -0
  170. /package/dist/atomic/{p-3af5c567.entry.js.map → p-330e6e7c.entry.js.map} +0 -0
  171. /package/dist/atomic/{p-6f988841.entry.js.map → p-3c8d109e.entry.js.map} +0 -0
  172. /package/dist/atomic/{p-65373475.entry.js.map → p-4b3d253b.entry.js.map} +0 -0
  173. /package/dist/atomic/{p-4c30ca3e.entry.js.map → p-52ba404c.entry.js.map} +0 -0
  174. /package/dist/atomic/{p-45c4685e.entry.js.map → p-75e00690.entry.js.map} +0 -0
  175. /package/dist/atomic/{p-8acb1466.entry.js.map → p-78b70622.entry.js.map} +0 -0
  176. /package/dist/atomic/{p-4915faeb.entry.js.map → p-7a625c7e.entry.js.map} +0 -0
  177. /package/dist/atomic/{p-f073a78d.entry.js.map → p-7b0b9e9b.entry.js.map} +0 -0
  178. /package/dist/atomic/{p-a02b1209.entry.js.map → p-7b899b57.entry.js.map} +0 -0
  179. /package/dist/atomic/{p-bf50b64d.entry.js.map → p-7dfcd6af.entry.js.map} +0 -0
  180. /package/dist/atomic/{p-5adbf098.entry.js.map → p-877d35b1.entry.js.map} +0 -0
  181. /package/dist/atomic/{p-031670fe.js.map → p-896923ef.js.map} +0 -0
  182. /package/dist/atomic/{p-9883415e.entry.js.map → p-93e29b24.entry.js.map} +0 -0
  183. /package/dist/atomic/{p-470f88ed.entry.js.map → p-9ec5f1ed.entry.js.map} +0 -0
  184. /package/dist/atomic/{p-be1b98a6.entry.js.map → p-a760d9f9.entry.js.map} +0 -0
  185. /package/dist/atomic/{p-4e9d1f9e.entry.js.map → p-aa2a81fd.entry.js.map} +0 -0
  186. /package/dist/atomic/{p-00e5bb15.entry.js.map → p-ae060711.entry.js.map} +0 -0
  187. /package/dist/atomic/{p-71bb8125.entry.js.map → p-b28011e6.entry.js.map} +0 -0
  188. /package/dist/atomic/{p-d11b2b24.entry.js.map → p-c49cfa0c.entry.js.map} +0 -0
  189. /package/dist/atomic/{p-fb7ad34b.entry.js.map → p-c88a3d2d.entry.js.map} +0 -0
  190. /package/dist/atomic/{p-b4ad3036.entry.js.map → p-d00a12e9.entry.js.map} +0 -0
  191. /package/dist/atomic/{p-43c16eeb.entry.js.map → p-dd7584dc.entry.js.map} +0 -0
  192. /package/dist/atomic/{p-757de797.entry.js.map → p-de066001.entry.js.map} +0 -0
  193. /package/dist/atomic/{p-e1865f9f.entry.js.map → p-e94360e4.entry.js.map} +0 -0
  194. /package/dist/atomic/{p-d2d22ab2.entry.js.map → p-f22bcb8c.entry.js.map} +0 -0
@@ -0,0 +1,42 @@
1
+ import { h } from './index-3f35faca.js';
2
+ import { B as Button } from './stencil-button-1a29a5df.js';
3
+ import { R as RadioButton } from './stencil-radio-button-cae5f40a.js';
4
+
5
+ /**
6
+ * @deprecated use the lit equivalent
7
+ */
8
+ const PagerPreviousButton = (props) => {
9
+ return (h(Button, { ...props, ariaLabel: props.i18n.t('previous'), style: "outline-primary", part: "previous-button", class: "flex min-h-10 min-w-10 items-center justify-center p-1" },
10
+ h("atomic-icon", { icon: props.icon, part: "previous-button-icon", class: "w-5 align-middle" })));
11
+ };
12
+ /**
13
+ * @deprecated use the lit equivalent
14
+ */
15
+ const PagerNextButton = (props) => {
16
+ return (h(Button, { ...props, ariaLabel: props.i18n.t('next'), style: "outline-primary", part: "next-button", class: "flex min-h-10 min-w-10 items-center justify-center p-1" },
17
+ h("atomic-icon", { icon: props.icon, part: "next-button-icon", class: "w-5 align-middle" })));
18
+ };
19
+ /**
20
+ * @deprecated use the lit equivalent
21
+ */
22
+ const PagerPageButton = (props) => {
23
+ return (h(RadioButton, { ...props, selectWhenFocused: false, key: props.page, style: "outline-neutral", checked: props.isSelected, ariaCurrent: props.isSelected ? 'page' : 'false', class: "btn-page focus-visible:bg-neutral-light min-h-10 min-w-10 p-1", part: `page-button${props.isSelected ? ' active-page-button' : ''}` }));
24
+ };
25
+ /**
26
+ * @deprecated use the lit equivalent
27
+ */
28
+ const PagerPageButtons = (props, children) => {
29
+ return (h("div", { part: "page-buttons", role: "radiogroup", "aria-label": props.i18n.t('pagination'), class: "contents" }, ...children));
30
+ };
31
+
32
+ /**
33
+ * @deprecated use the lit equivalent
34
+ */
35
+ const PagerNavigation = (props, children) => {
36
+ return (h("nav", { "aria-label": props.i18n.t('pagination') },
37
+ h("div", { part: "buttons", role: "toolbar", class: "flex flex-wrap gap-2" }, ...children)));
38
+ };
39
+
40
+ export { PagerNavigation as P, PagerPreviousButton as a, PagerPageButtons as b, PagerPageButton as c, PagerNextButton as d };
41
+
42
+ //# sourceMappingURL=stencil-pager-navigation-7261a834.js.map
@@ -0,0 +1 @@
1
+ {"file":"stencil-pager-navigation-7261a834.js","mappings":";;;;AAkCA;;;MAGa,mBAAmB,GAE5B,CAAC,KAAK;IACR,QACE,EAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EACnC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,wDAAwD;QAE9D,mBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,sBAAsB,EAC3B,KAAK,EAAC,kBAAkB,GACX,CACR,EACT;AACJ,EAAE;AAEF;;;MAGa,eAAe,GAExB,CAAC,KAAK;IACR,QACE,EAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAC/B,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,wDAAwD;QAE9D,mBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,GACX,CACR,EACT;AACJ,EAAE;AAEF;;;MAGa,eAAe,GAA8C,CACxE,KAAK;IAEL,QACE,EAAC,WAAW,OACN,KAAK,EACT,iBAAiB,EAAE,KAAK,EACxB,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,KAAK,CAAC,UAAU,EACzB,WAAW,EAAE,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,OAAO,EAChD,KAAK,EAAC,+DAA+D,EACrE,IAAI,EAAE,cAAc,KAAK,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE,EAAE,GACtD,EACf;AACJ,EAAE;AAEF;;;MAGa,gBAAgB,GAA+C,CAC1E,KAAK,EACL,QAAQ;IAER,QACE,WACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,YAAY,gBACL,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,EACtC,KAAK,EAAC,UAAU,OAEZ,QAAQ,CACR,EACN;AACJ;;AC3GA;;;MAGa,eAAe,GAA8C,CACxE,KAAK,EACL,QAAQ;IAER,QACE,yBAAiB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;QACzC,WAAK,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,sBAAsB,OACzD,QAAQ,CACR,CACF,EACN;AACJ;;;;","names":[],"sources":["src/components/common/pager/stencil-pager-buttons.tsx","src/components/common/pager/stencil-pager-navigation.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {Button, StencilButtonProps} from '../stencil-button';\nimport {RadioButton, StencilRadioButtonProps} from '../stencil-radio-button';\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerNavigationButtonProps\n extends Omit<StencilButtonProps, 'style' | 'part' | 'class'> {\n icon: string;\n i18n: i18n;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerPageButtonProps\n extends Omit<\n StencilRadioButtonProps,\n 'part' | 'style' | 'checked' | 'ariaCurrent' | 'key' | 'class' | 'ref'\n > {\n page: number;\n isSelected: boolean;\n text: string;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerPageButtonsProps {\n i18n: i18n;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerPreviousButton: FunctionalComponent<\n PagerNavigationButtonProps\n> = (props) => {\n return (\n <Button\n {...props}\n ariaLabel={props.i18n.t('previous')}\n style=\"outline-primary\"\n part=\"previous-button\"\n class=\"flex min-h-10 min-w-10 items-center justify-center p-1\"\n >\n <atomic-icon\n icon={props.icon}\n part=\"previous-button-icon\"\n class=\"w-5 align-middle\"\n ></atomic-icon>\n </Button>\n );\n};\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerNextButton: FunctionalComponent<\n PagerNavigationButtonProps\n> = (props) => {\n return (\n <Button\n {...props}\n ariaLabel={props.i18n.t('next')}\n style=\"outline-primary\"\n part=\"next-button\"\n class=\"flex min-h-10 min-w-10 items-center justify-center p-1\"\n >\n <atomic-icon\n icon={props.icon}\n part=\"next-button-icon\"\n class=\"w-5 align-middle\"\n ></atomic-icon>\n </Button>\n );\n};\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerPageButton: FunctionalComponent<PagerPageButtonProps> = (\n props\n) => {\n return (\n <RadioButton\n {...props}\n selectWhenFocused={false}\n key={props.page}\n style=\"outline-neutral\"\n checked={props.isSelected}\n ariaCurrent={props.isSelected ? 'page' : 'false'}\n class=\"btn-page focus-visible:bg-neutral-light min-h-10 min-w-10 p-1\"\n part={`page-button${props.isSelected ? ' active-page-button' : ''}`}\n ></RadioButton>\n );\n};\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerPageButtons: FunctionalComponent<PagerPageButtonsProps> = (\n props,\n children\n) => {\n return (\n <div\n part=\"page-buttons\"\n role=\"radiogroup\"\n aria-label={props.i18n.t('pagination')}\n class=\"contents\"\n >\n {...children}\n </div>\n );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerNavigationProps {\n i18n: i18n;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerNavigation: FunctionalComponent<PagerNavigationProps> = (\n props,\n children\n) => {\n return (\n <nav aria-label={props.i18n.t('pagination')}>\n <div part=\"buttons\" role=\"toolbar\" class=\"flex flex-wrap gap-2\">\n {...children}\n </div>\n </nav>\n );\n};\n"],"version":3}
@@ -1,2 +1,2 @@
1
- export const headlessVersion = '3.31.1-pre.fbe332fd49';
2
- export const atomicVersion = '3.33.8-pre.fbe332fd49';
1
+ export const headlessVersion = '3.32.0-pre.539f99f7c8';
2
+ export const atomicVersion = '3.34.0-pre.539f99f7c8';
@@ -52,8 +52,7 @@ export declare class AtomicCommerceBreadbox extends LitElement implements Initia
52
52
  */
53
53
  pathLimit: number;
54
54
  initialize(): void;
55
- willUpdate(changedProperties: Map<string, unknown>): void;
56
- updated(): void;
55
+ updated(changedProperties: Map<string, unknown>): void;
57
56
  private validateProps;
58
57
  disconnectedCallback(): void;
59
58
  private get breadcrumbs();
@@ -118,6 +118,7 @@ export declare class AtomicCommerceInterface extends AtomicCommerceInterface_bas
118
118
  private onHashChange;
119
119
  scrollToTop(): void;
120
120
  private updateHash;
121
+ private updateMobileBreakpoint;
121
122
  }
122
123
  declare global {
123
124
  interface HTMLElementTagNameMap {
@@ -8,19 +8,19 @@ declare const AtomicCommerceLayout_base: import("../../../mixins/mixin-common").
8
8
  * @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
9
9
  * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
10
10
  * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
11
+ *
12
+ * @slot default - The default slot for the layout content.
11
13
  */
12
14
  export declare class AtomicCommerceLayout extends AtomicCommerceLayout_base {
13
15
  static styles: import("lit").CSSResult[];
16
+ private addStyles;
14
17
  error: Error;
15
18
  /**
16
19
  * The viewport width at which the layout goes from desktop to mobile.
17
20
  * E.g., 800px, 65rem.
18
21
  */
19
22
  mobileBreakpoint: string;
20
- private layoutStylesController;
21
23
  connectedCallback(): void;
22
- private emitBreakpointChangeEvent;
23
- onMobileBreakpointChange(): void;
24
24
  }
25
25
  declare global {
26
26
  interface HTMLElementTagNameMap {
@@ -1,36 +1,33 @@
1
- import { type Pager, type PagerState, type SearchStatus, type SearchStatusState } from '@coveo/headless';
2
- import { LitElement } from 'lit';
3
- import type { Bindings } from "../atomic-search-interface/interfaces";
4
- import type { InitializableComponent } from "../../../decorators/types";
5
- declare const AtomicPager_base: typeof LitElement;
1
+ import { Pager, PagerState, SearchStatus, SearchStatusState } from '@coveo/headless';
2
+ import { InitializableComponent } from '../../../utils/initialization-utils';
3
+ import { Bindings } from '../atomic-search-interface/atomic-search-interface';
6
4
  /**
7
5
  * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
8
6
  *
9
7
  * @part buttons - The list of the next/previous buttons and page-buttons.
10
8
  * @part page-buttons - The list of page buttons.
11
- * @part page-button - The individual page buttons.
9
+ * @part page-button - The page button.
12
10
  * @part active-page-button - The active page button.
13
- * @part previous-button - The previous page button.
14
- * @part next-button - The next page button.
15
- * @part previous-button-icon - The icon displayed on the "previous page" button.
16
- * @part next-button-icon - The icon displayed on the "next page" button.
17
- *
18
- * @event atomic/scrollToTop - Emitted when the user clicks any of the buttons rendered by the component.
11
+ * @part previous-button - The previous button.
12
+ * @part next-button - The next button.
13
+ * @part previous-button-icon - Icon of the previous button.
14
+ * @part next-button-icon - Icon of the next button.
19
15
  */
20
- export declare class AtomicPager extends AtomicPager_base implements InitializableComponent<Bindings> {
16
+ export declare class AtomicPager implements InitializableComponent {
21
17
  bindings: Bindings;
22
- error: Error;
23
- private isAppLoaded;
24
18
  pager: Pager;
25
19
  searchStatus: SearchStatus;
26
20
  pagerState: PagerState;
27
21
  searchStatusState: SearchStatusState;
22
+ error: Error;
23
+ private isAppLoaded;
24
+ private scrollToTopEvent;
28
25
  /**
29
- * The maximum number of page buttons to display in the pager.
26
+ * Specifies how many page buttons to display in the pager.
30
27
  */
31
28
  numberOfPages: number;
32
29
  /**
33
- * The SVG icon to render on the "previous page" button.
30
+ * The SVG icon to use to display the Previous button.
34
31
  *
35
32
  * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
36
33
  * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
@@ -38,7 +35,7 @@ export declare class AtomicPager extends AtomicPager_base implements Initializab
38
35
  */
39
36
  previousButtonIcon: string;
40
37
  /**
41
- * The SVG icon to render on the "next page" button.
38
+ * The SVG icon to use to display the Next button.
42
39
  *
43
40
  * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
44
41
  * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
@@ -47,13 +44,6 @@ export declare class AtomicPager extends AtomicPager_base implements Initializab
47
44
  nextButtonIcon: string;
48
45
  private radioGroupName;
49
46
  initialize(): void;
50
- render(): import("lit-html").TemplateResult<1>;
51
- private validateProps;
47
+ render(): any;
52
48
  private focusOnFirstResultAndScrollToTop;
53
49
  }
54
- declare global {
55
- interface HTMLElementTagNameMap {
56
- 'atomic-pager': AtomicPager;
57
- }
58
- }
59
- export {};
@@ -1,4 +1,3 @@
1
- export { AtomicPager } from './atomic-pager/atomic-pager.js';
2
1
  export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
3
2
  export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
4
3
  export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';
@@ -1427,6 +1427,23 @@ export namespace Components {
1427
1427
  */
1428
1428
  "start": number;
1429
1429
  }
1430
+ /**
1431
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
1432
+ */
1433
+ interface AtomicPager {
1434
+ /**
1435
+ * The SVG icon to use to display the Next button. - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
1436
+ */
1437
+ "nextButtonIcon": string;
1438
+ /**
1439
+ * Specifies how many page buttons to display in the pager.
1440
+ */
1441
+ "numberOfPages": number;
1442
+ /**
1443
+ * The SVG icon to use to display the Previous button. - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
1444
+ */
1445
+ "previousButtonIcon": string;
1446
+ }
1430
1447
  /**
1431
1448
  * The `atomic-popover` component displays any facet as a popover menu.
1432
1449
  */
@@ -2922,6 +2939,10 @@ export interface AtomicIpxModalCustomEvent<T> extends CustomEvent<T> {
2922
2939
  detail: T;
2923
2940
  target: HTMLAtomicIpxModalElement;
2924
2941
  }
2942
+ export interface AtomicPagerCustomEvent<T> extends CustomEvent<T> {
2943
+ detail: T;
2944
+ target: HTMLAtomicPagerElement;
2945
+ }
2925
2946
  export interface AtomicQuickviewModalCustomEvent<T> extends CustomEvent<T> {
2926
2947
  detail: T;
2927
2948
  target: HTMLAtomicQuickviewModalElement;
@@ -3598,6 +3619,26 @@ declare global {
3598
3619
  prototype: HTMLAtomicNumericRangeElement;
3599
3620
  new (): HTMLAtomicNumericRangeElement;
3600
3621
  };
3622
+ interface HTMLAtomicPagerElementEventMap {
3623
+ "atomic/scrollToTop": any;
3624
+ }
3625
+ /**
3626
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
3627
+ */
3628
+ interface HTMLAtomicPagerElement extends Components.AtomicPager, HTMLStencilElement {
3629
+ addEventListener<K extends keyof HTMLAtomicPagerElementEventMap>(type: K, listener: (this: HTMLAtomicPagerElement, ev: AtomicPagerCustomEvent<HTMLAtomicPagerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
3630
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
3631
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
3632
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
3633
+ removeEventListener<K extends keyof HTMLAtomicPagerElementEventMap>(type: K, listener: (this: HTMLAtomicPagerElement, ev: AtomicPagerCustomEvent<HTMLAtomicPagerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
3634
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
3635
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
3636
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
3637
+ }
3638
+ var HTMLAtomicPagerElement: {
3639
+ prototype: HTMLAtomicPagerElement;
3640
+ new (): HTMLAtomicPagerElement;
3641
+ };
3601
3642
  /**
3602
3643
  * The `atomic-popover` component displays any facet as a popover menu.
3603
3644
  */
@@ -4527,6 +4568,7 @@ declare global {
4527
4568
  "atomic-notifications": HTMLAtomicNotificationsElement;
4528
4569
  "atomic-numeric-facet": HTMLAtomicNumericFacetElement;
4529
4570
  "atomic-numeric-range": HTMLAtomicNumericRangeElement;
4571
+ "atomic-pager": HTMLAtomicPagerElement;
4530
4572
  "atomic-popover": HTMLAtomicPopoverElement;
4531
4573
  "atomic-query-error": HTMLAtomicQueryErrorElement;
4532
4574
  "atomic-quickview": HTMLAtomicQuickviewElement;
@@ -5918,6 +5960,24 @@ declare namespace LocalJSX {
5918
5960
  */
5919
5961
  "start": number;
5920
5962
  }
5963
+ /**
5964
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
5965
+ */
5966
+ interface AtomicPager {
5967
+ /**
5968
+ * The SVG icon to use to display the Next button. - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
5969
+ */
5970
+ "nextButtonIcon"?: string;
5971
+ /**
5972
+ * Specifies how many page buttons to display in the pager.
5973
+ */
5974
+ "numberOfPages"?: number;
5975
+ "onAtomic/scrollToTop"?: (event: AtomicPagerCustomEvent<any>) => void;
5976
+ /**
5977
+ * The SVG icon to use to display the Previous button. - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
5978
+ */
5979
+ "previousButtonIcon"?: string;
5980
+ }
5921
5981
  /**
5922
5982
  * The `atomic-popover` component displays any facet as a popover menu.
5923
5983
  */
@@ -7380,6 +7440,7 @@ declare namespace LocalJSX {
7380
7440
  "atomic-notifications": AtomicNotifications;
7381
7441
  "atomic-numeric-facet": AtomicNumericFacet;
7382
7442
  "atomic-numeric-range": AtomicNumericRange;
7443
+ "atomic-pager": AtomicPager;
7383
7444
  "atomic-popover": AtomicPopover;
7384
7445
  "atomic-query-error": AtomicQueryError;
7385
7446
  "atomic-quickview": AtomicQuickview;
@@ -7645,6 +7706,10 @@ declare module "@stencil/core" {
7645
7706
  * The `atomic-numeric-range` component defines the range of an `atomic-numeric-facet`, and therefore must be defined within an `atomic-numeric-facet` component.
7646
7707
  */
7647
7708
  "atomic-numeric-range": LocalJSX.AtomicNumericRange & JSXBase.HTMLAttributes<HTMLAtomicNumericRangeElement>;
7709
+ /**
7710
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
7711
+ */
7712
+ "atomic-pager": LocalJSX.AtomicPager & JSXBase.HTMLAttributes<HTMLAtomicPagerElement>;
7648
7713
  /**
7649
7714
  * The `atomic-popover` component displays any facet as a popover menu.
7650
7715
  */
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-09-26T15:57:29",
2
+ "timestamp": "2025-09-25T18:33:56",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.20.0",
@@ -5833,6 +5833,172 @@
5833
5833
  "dependencies": [],
5834
5834
  "dependencyGraph": {}
5835
5835
  },
5836
+ {
5837
+ "filePath": "src/components/search/atomic-pager/atomic-pager.tsx",
5838
+ "encapsulation": "shadow",
5839
+ "tag": "atomic-pager",
5840
+ "docs": "The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.",
5841
+ "docsTags": [
5842
+ {
5843
+ "name": "part",
5844
+ "text": "buttons - The list of the next/previous buttons and page-buttons."
5845
+ },
5846
+ {
5847
+ "name": "part",
5848
+ "text": "page-buttons - The list of page buttons."
5849
+ },
5850
+ {
5851
+ "name": "part",
5852
+ "text": "page-button - The page button."
5853
+ },
5854
+ {
5855
+ "name": "part",
5856
+ "text": "active-page-button - The active page button."
5857
+ },
5858
+ {
5859
+ "name": "part",
5860
+ "text": "previous-button - The previous button."
5861
+ },
5862
+ {
5863
+ "name": "part",
5864
+ "text": "next-button - The next button."
5865
+ },
5866
+ {
5867
+ "name": "part",
5868
+ "text": "previous-button-icon - Icon of the previous button."
5869
+ },
5870
+ {
5871
+ "name": "part",
5872
+ "text": "next-button-icon - Icon of the next button."
5873
+ }
5874
+ ],
5875
+ "usage": {},
5876
+ "props": [
5877
+ {
5878
+ "name": "nextButtonIcon",
5879
+ "type": "string",
5880
+ "complexType": {
5881
+ "original": "string",
5882
+ "resolved": "string",
5883
+ "references": {}
5884
+ },
5885
+ "mutable": false,
5886
+ "attr": "next-button-icon",
5887
+ "reflectToAttr": true,
5888
+ "docs": "The SVG icon to use to display the Next button.\n\n- Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n- Use a value that starts with `assets://`, to display an icon from the Atomic package.\n- Use a stringified SVG to display it directly.",
5889
+ "docsTags": [],
5890
+ "default": "ArrowRightIcon",
5891
+ "values": [
5892
+ {
5893
+ "type": "string"
5894
+ }
5895
+ ],
5896
+ "optional": false,
5897
+ "required": false
5898
+ },
5899
+ {
5900
+ "name": "numberOfPages",
5901
+ "type": "number",
5902
+ "complexType": {
5903
+ "original": "number",
5904
+ "resolved": "number",
5905
+ "references": {}
5906
+ },
5907
+ "mutable": false,
5908
+ "attr": "number-of-pages",
5909
+ "reflectToAttr": true,
5910
+ "docs": "Specifies how many page buttons to display in the pager.",
5911
+ "docsTags": [],
5912
+ "default": "5",
5913
+ "values": [
5914
+ {
5915
+ "type": "number"
5916
+ }
5917
+ ],
5918
+ "optional": false,
5919
+ "required": false
5920
+ },
5921
+ {
5922
+ "name": "previousButtonIcon",
5923
+ "type": "string",
5924
+ "complexType": {
5925
+ "original": "string",
5926
+ "resolved": "string",
5927
+ "references": {}
5928
+ },
5929
+ "mutable": false,
5930
+ "attr": "previous-button-icon",
5931
+ "reflectToAttr": true,
5932
+ "docs": "The SVG icon to use to display the Previous button.\n\n- Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n- Use a value that starts with `assets://`, to display an icon from the Atomic package.\n- Use a stringified SVG to display it directly.",
5933
+ "docsTags": [],
5934
+ "default": "ArrowLeftIcon",
5935
+ "values": [
5936
+ {
5937
+ "type": "string"
5938
+ }
5939
+ ],
5940
+ "optional": false,
5941
+ "required": false
5942
+ }
5943
+ ],
5944
+ "methods": [],
5945
+ "events": [
5946
+ {
5947
+ "event": "atomic/scrollToTop",
5948
+ "detail": "any",
5949
+ "bubbles": true,
5950
+ "complexType": {
5951
+ "original": "any",
5952
+ "resolved": "any",
5953
+ "references": {}
5954
+ },
5955
+ "cancelable": true,
5956
+ "composed": true,
5957
+ "docs": "",
5958
+ "docsTags": []
5959
+ }
5960
+ ],
5961
+ "listeners": [],
5962
+ "styles": [],
5963
+ "slots": [],
5964
+ "parts": [
5965
+ {
5966
+ "name": "active-page-button",
5967
+ "docs": "The active page button."
5968
+ },
5969
+ {
5970
+ "name": "buttons",
5971
+ "docs": "The list of the next/previous buttons and page-buttons."
5972
+ },
5973
+ {
5974
+ "name": "next-button",
5975
+ "docs": "The next button."
5976
+ },
5977
+ {
5978
+ "name": "next-button-icon",
5979
+ "docs": "Icon of the next button."
5980
+ },
5981
+ {
5982
+ "name": "page-button",
5983
+ "docs": "The page button."
5984
+ },
5985
+ {
5986
+ "name": "page-buttons",
5987
+ "docs": "The list of page buttons."
5988
+ },
5989
+ {
5990
+ "name": "previous-button",
5991
+ "docs": "The previous button."
5992
+ },
5993
+ {
5994
+ "name": "previous-button-icon",
5995
+ "docs": "Icon of the previous button."
5996
+ }
5997
+ ],
5998
+ "dependents": [],
5999
+ "dependencies": [],
6000
+ "dependencyGraph": {}
6001
+ },
5836
6002
  {
5837
6003
  "filePath": "src/components/search/facets/atomic-popover/atomic-popover.tsx",
5838
6004
  "encapsulation": "shadow",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coveo/atomic",
3
3
  "type": "module",
4
- "version": "3.33.8-pre.fbe332fd49",
4
+ "version": "3.34.0-pre.539f99f7c8",
5
5
  "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
6
6
  "homepage": "https://docs.coveo.com/en/atomic/latest/",
7
7
  "repository": {
@@ -80,8 +80,8 @@
80
80
  "validate:definitions": "tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts"
81
81
  },
82
82
  "dependencies": {
83
- "@coveo/bueno": "1.1.2",
84
- "@coveo/headless": "3.31.1-pre.fbe332fd49",
83
+ "@coveo/bueno": "1.2.0-pre.539f99f7c8",
84
+ "@coveo/headless": "3.32.0-pre.539f99f7c8",
85
85
  "@lit/context": "1.1.6",
86
86
  "@open-wc/lit-helpers": "0.7.0",
87
87
  "@popperjs/core": "2.11.8",
@@ -152,8 +152,8 @@
152
152
  "wait-on": "8.0.4"
153
153
  },
154
154
  "peerDependencies": {
155
- "@coveo/bueno": "1.1.2",
156
- "@coveo/headless": "3.31.1-pre.fbe332fd49",
155
+ "@coveo/bueno": "1.2.0-pre.539f99f7c8",
156
+ "@coveo/headless": "3.32.0-pre.539f99f7c8",
157
157
  "typescript": ">=5.0.0"
158
158
  },
159
159
  "peerDependenciesMeta": {
@@ -1,40 +0,0 @@
1
- import { randomID } from "../../../utils/utils";
2
- /**
3
- * A reactive controller that manages dynamic layout styles.
4
- */
5
- export class LayoutStylesController {
6
- constructor(host, stylesBuilder, componentPrefix) {
7
- this.dynamicStyleSheet = null;
8
- this.host = host;
9
- this.stylesBuilder = stylesBuilder;
10
- this.componentPrefix = componentPrefix;
11
- this.host.addController(this);
12
- }
13
- hostConnected() {
14
- if (!this.host.id) {
15
- this.host.id = randomID(this.componentPrefix);
16
- }
17
- this.host.updateComplete.then(() => this.updateStyles());
18
- }
19
- /**
20
- * Updates the dynamic styles based on the current mobile breakpoint
21
- */
22
- updateStyles() {
23
- const parent = this.host.getRootNode();
24
- const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
25
- if (!isDocumentOrShadowRoot) {
26
- return;
27
- }
28
- const newStylesCSS = this.stylesBuilder(this.host, this.host.mobileBreakpoint);
29
- if (!this.dynamicStyleSheet) {
30
- this.dynamicStyleSheet = new CSSStyleSheet();
31
- this.dynamicStyleSheet.replaceSync(newStylesCSS);
32
- parent.adoptedStyleSheets = [
33
- ...parent.adoptedStyleSheets,
34
- this.dynamicStyleSheet,
35
- ];
36
- return;
37
- }
38
- this.dynamicStyleSheet.replaceSync(newStylesCSS);
39
- }
40
- }
@@ -1,26 +0,0 @@
1
- /**
2
- * A reactive controller that manages mobile breakpoint changes through event communication.
3
- * This controller listens for 'atomic-layout-breakpoint-change' events and updates a store
4
- * with the new breakpoint value.
5
- */
6
- export class MobileBreakpointController {
7
- constructor(host, store) {
8
- this.host = host;
9
- this.store = store;
10
- this.eventListener = this.handleBreakpointChange.bind(this);
11
- this.host.addController(this);
12
- }
13
- hostConnected() {
14
- this.host.addEventListener('atomic-layout-breakpoint-change', this.eventListener);
15
- }
16
- hostDisconnected() {
17
- this.host.removeEventListener('atomic-layout-breakpoint-change', this.eventListener);
18
- }
19
- handleBreakpointChange(e) {
20
- const customEvent = e;
21
- const newBreakpoint = customEvent.detail?.breakpoint;
22
- if (newBreakpoint && this.store.state.mobileBreakpoint !== newBreakpoint) {
23
- this.store.state.mobileBreakpoint = newBreakpoint;
24
- }
25
- }
26
- }