@coveo/atomic 3.33.8-pre.19c9e921f3 → 3.33.8-pre.1c7ce2c966
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.
- package/dist/atomic/_atomic.esm.js +1 -1
- package/dist/atomic/atomic.esm.js.map +1 -1
- package/dist/atomic/components/_index.d.ts +0 -2
- package/dist/atomic/components/_index.js +0 -1
- package/dist/atomic/components/analytics-config.js +1 -1
- package/dist/atomic/components/atomic-category-facet.js +1 -1
- package/dist/atomic/components/atomic-facet.js +1 -1
- package/dist/atomic/components/atomic-format-currency.js +1 -1
- package/dist/atomic/components/atomic-format-number.js +1 -1
- package/dist/atomic/components/atomic-format-unit.js +1 -1
- package/dist/atomic/components/atomic-insight-pager.js +38 -2
- package/dist/atomic/components/atomic-insight-pager.js.map +1 -1
- package/dist/atomic/components/atomic-numeric-facet.js +1 -1
- package/dist/atomic/components/atomic-query-error.js +1 -1
- package/dist/atomic/components/atomic-quickview-modal2.js +1 -1
- package/dist/atomic/components/atomic-quickview.js +1 -1
- package/dist/atomic/components/atomic-refine-modal2.js +1 -1
- package/dist/atomic/components/atomic-refine-toggle.js +1 -1
- package/dist/atomic/components/atomic-relevance-inspector2.js +2 -2
- package/dist/atomic/components/atomic-result-children.js +1 -1
- package/dist/atomic/components/atomic-result-fields-list.js +1 -1
- package/dist/atomic/components/atomic-result-link.js +1 -1
- package/dist/atomic/components/atomic-result-list.js +1 -1
- package/dist/atomic/components/atomic-result-table-placeholder2.js +1 -1
- package/dist/atomic/components/atomic-search-box-query-suggestions2.js +1 -1
- package/dist/atomic/components/atomic-search-box-recent-queries2.js +1 -1
- package/dist/atomic/components/atomic-search-box.js +4 -4
- package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js +2 -2
- package/dist/atomic/components/atomic-sort-dropdown.js +2 -2
- package/dist/atomic/components/atomic-sort-expression.js +1 -1
- package/dist/atomic/components/atomic-tab-manager.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.js +18 -11
- package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js +2 -7
- package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js +19 -10
- package/dist/atomic/components/components/commerce/atomic-commerce-pager/atomic-commerce-pager.js +3 -2
- package/dist/atomic/components/components/common/atomic-modal/atomic-modal.js +2 -0
- package/dist/atomic/components/components/common/layout/layout-styles-controller.js +40 -0
- package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js +26 -0
- package/dist/atomic/components/components/search/atomic-pager/atomic-pager.js +178 -0
- package/dist/atomic/components/components/search/index.js +1 -0
- package/dist/atomic/components/components/search/lazy-index.js +1 -0
- package/dist/atomic/components/global/environment.js +1 -1
- package/dist/atomic/components/index.js.map +1 -1
- package/dist/atomic/{p-ae060711.entry.js → p-00e5bb15.entry.js} +2 -2
- package/dist/atomic/{p-6d3a4d57.entry.js → p-21b4ed5f.entry.js} +2 -2
- package/dist/atomic/{p-330e6e7c.entry.js → p-3af5c567.entry.js} +2 -2
- package/dist/atomic/{p-75e00690.entry.js → p-45c4685e.entry.js} +2 -2
- package/dist/atomic/{p-7a625c7e.entry.js → p-4915faeb.entry.js} +2 -2
- package/dist/atomic/{p-52ba404c.entry.js → p-4c30ca3e.entry.js} +2 -2
- package/dist/atomic/{p-aa2a81fd.entry.js → p-4e9d1f9e.entry.js} +2 -2
- package/dist/atomic/{p-31f1e44e.entry.js → p-516b8165.entry.js} +2 -2
- package/dist/atomic/p-593903ec.entry.js +2 -0
- package/dist/atomic/p-593903ec.entry.js.map +1 -0
- package/dist/atomic/{p-877d35b1.entry.js → p-5adbf098.entry.js} +2 -2
- package/dist/atomic/{p-4b3d253b.entry.js → p-65373475.entry.js} +2 -2
- package/dist/atomic/{p-9ec639b1.entry.js → p-6b3b975e.entry.js} +2 -2
- package/dist/atomic/{p-3c8d109e.entry.js → p-6f988841.entry.js} +2 -2
- package/dist/atomic/{p-b28011e6.entry.js → p-71bb8125.entry.js} +2 -2
- package/dist/atomic/{p-de066001.entry.js → p-757de797.entry.js} +2 -2
- package/dist/atomic/{p-78b70622.entry.js → p-8acb1466.entry.js} +2 -2
- package/dist/atomic/{p-93e29b24.entry.js → p-9883415e.entry.js} +2 -2
- package/dist/atomic/{p-7b899b57.entry.js → p-a02b1209.entry.js} +2 -2
- package/dist/atomic/{p-fc2177ae.js → p-aab5c11d.js} +2 -2
- package/dist/atomic/{p-d00a12e9.entry.js → p-b4ad3036.entry.js} +2 -2
- package/dist/atomic/{p-a760d9f9.entry.js → p-be1b98a6.entry.js} +2 -2
- package/dist/atomic/{p-7dfcd6af.entry.js → p-bf50b64d.entry.js} +2 -2
- package/dist/atomic/{p-c49cfa0c.entry.js → p-d11b2b24.entry.js} +2 -2
- package/dist/atomic/{p-f22bcb8c.entry.js → p-d2d22ab2.entry.js} +2 -2
- package/dist/atomic/{p-6837d94c.entry.js → p-d6969a23.entry.js} +2 -2
- package/dist/atomic/{p-021f01d6.entry.js → p-e8d5e852.entry.js} +2 -2
- package/dist/atomic/{p-7b0b9e9b.entry.js → p-f073a78d.entry.js} +2 -2
- package/dist/atomic/{p-c88a3d2d.entry.js → p-fb7ad34b.entry.js} +2 -2
- package/dist/cjs/_loader.cjs.js +1 -1
- package/dist/cjs/{analytics-config-e5e06c2c.js → analytics-config-d9548c8b.js} +2 -2
- package/dist/cjs/{analytics-config-e5e06c2c.js.map → analytics-config-d9548c8b.js.map} +1 -1
- package/dist/cjs/atomic-category-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-format-currency.cjs.entry.js +1 -1
- package/dist/cjs/atomic-format-number.cjs.entry.js +1 -1
- package/dist/cjs/atomic-format-unit.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-insight-pager.cjs.entry.js +41 -7
- package/dist/cjs/atomic-insight-pager.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-numeric-facet.cjs.entry.js +1 -1
- package/dist/cjs/atomic-query-error.cjs.entry.js +1 -1
- package/dist/cjs/atomic-quickview-modal.cjs.entry.js +1 -1
- package/dist/cjs/atomic-quickview.cjs.entry.js +1 -1
- package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-refine-modal.cjs.entry.js +1 -1
- package/dist/cjs/atomic-refine-toggle.cjs.entry.js +1 -1
- package/dist/cjs/atomic-relevance-inspector.cjs.entry.js +2 -2
- package/dist/cjs/atomic-result-children.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-fields-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-link.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-list.cjs.entry.js +1 -1
- package/dist/cjs/atomic-result-placeholder_8.cjs.entry.js +1 -1
- package/dist/cjs/atomic-search-box-query-suggestions_2.cjs.entry.js +2 -2
- package/dist/cjs/atomic-search-box.cjs.entry.js +4 -4
- package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-smart-snippet-feedback-modal.cjs.entry.js +2 -2
- package/dist/cjs/atomic-sort-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/atomic-sort-expression.cjs.entry.js +1 -1
- package/dist/cjs/atomic-tab-manager.cjs.entry.js +1 -1
- package/dist/cjs/atomic.cjs.js +1 -1
- package/dist/cjs/index-757bc886.js +0 -4
- package/dist/cjs/version.cjs.js +2 -2
- package/dist/esm/_loader.js +1 -1
- package/dist/esm/{analytics-config-984256ab.js → analytics-config-da8447f3.js} +2 -2
- package/dist/esm/{analytics-config-984256ab.js.map → analytics-config-da8447f3.js.map} +1 -1
- package/dist/esm/atomic-category-facet.entry.js +1 -1
- package/dist/esm/atomic-facet.entry.js +1 -1
- package/dist/esm/atomic-format-currency.entry.js +1 -1
- package/dist/esm/atomic-format-number.entry.js +1 -1
- package/dist/esm/atomic-format-unit.entry.js +1 -1
- package/dist/esm/atomic-insight-interface.entry.js +1 -1
- package/dist/esm/atomic-insight-pager.entry.js +38 -4
- package/dist/esm/atomic-insight-pager.entry.js.map +1 -1
- package/dist/esm/atomic-numeric-facet.entry.js +1 -1
- package/dist/esm/atomic-query-error.entry.js +1 -1
- package/dist/esm/atomic-quickview-modal.entry.js +1 -1
- package/dist/esm/atomic-quickview.entry.js +1 -1
- package/dist/esm/atomic-recs-interface.entry.js +1 -1
- package/dist/esm/atomic-refine-modal.entry.js +1 -1
- package/dist/esm/atomic-refine-toggle.entry.js +1 -1
- package/dist/esm/atomic-relevance-inspector.entry.js +2 -2
- package/dist/esm/atomic-result-children.entry.js +1 -1
- package/dist/esm/atomic-result-fields-list.entry.js +1 -1
- package/dist/esm/atomic-result-link.entry.js +1 -1
- package/dist/esm/atomic-result-list.entry.js +1 -1
- package/dist/esm/atomic-result-placeholder_8.entry.js +1 -1
- package/dist/esm/atomic-search-box-query-suggestions_2.entry.js +2 -2
- package/dist/esm/atomic-search-box.entry.js +4 -4
- package/dist/esm/atomic-search-interface.entry.js +1 -1
- package/dist/esm/atomic-smart-snippet-feedback-modal.entry.js +2 -2
- package/dist/esm/atomic-sort-dropdown.entry.js +2 -2
- package/dist/esm/atomic-sort-expression.entry.js +1 -1
- package/dist/esm/atomic-tab-manager.entry.js +1 -1
- package/dist/esm/atomic.js +1 -1
- package/dist/esm/index-3f35faca.js +0 -4
- package/dist/esm/version.js +2 -2
- package/dist/types/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.d.ts +2 -1
- package/dist/types/components/commerce/atomic-commerce-interface/atomic-commerce-interface.d.ts +0 -1
- package/dist/types/components/commerce/atomic-commerce-layout/atomic-commerce-layout.d.ts +3 -3
- package/dist/types/components/common/layout/layout-styles-controller.d.ts +22 -0
- package/dist/types/components/common/layout/mobile-breakpoint-controller.d.ts +18 -0
- package/dist/types/components/search/atomic-pager/atomic-pager.d.ts +26 -16
- package/dist/types/components/search/index.d.ts +1 -0
- package/dist/types/components.d.ts +0 -65
- package/docs/atomic-docs.json +1 -167
- package/package.json +3 -3
- package/dist/atomic/components/atomic-pager.d.ts +0 -11
- package/dist/atomic/components/atomic-pager.js +0 -134
- package/dist/atomic/components/atomic-pager.js.map +0 -1
- package/dist/atomic/components/stencil-pager-navigation.js +0 -42
- package/dist/atomic/components/stencil-pager-navigation.js.map +0 -1
- package/dist/atomic/p-211d7d6a.js +0 -2
- package/dist/atomic/p-211d7d6a.js.map +0 -1
- package/dist/atomic/p-fa8b7c4c.entry.js +0 -2
- package/dist/atomic/p-fa8b7c4c.entry.js.map +0 -1
- package/dist/atomic/p-fcf3f7d7.entry.js +0 -2
- package/dist/atomic/p-fcf3f7d7.entry.js.map +0 -1
- package/dist/cjs/atomic-pager.cjs.entry.js +0 -121
- package/dist/cjs/atomic-pager.cjs.entry.js.map +0 -1
- package/dist/cjs/stencil-pager-navigation-c20b8a95.js +0 -48
- package/dist/cjs/stencil-pager-navigation-c20b8a95.js.map +0 -1
- package/dist/esm/atomic-pager.entry.js +0 -117
- package/dist/esm/atomic-pager.entry.js.map +0 -1
- package/dist/esm/stencil-pager-navigation-7261a834.js +0 -42
- package/dist/esm/stencil-pager-navigation-7261a834.js.map +0 -1
- /package/dist/atomic/{p-ae060711.entry.js.map → p-00e5bb15.entry.js.map} +0 -0
- /package/dist/atomic/{p-6d3a4d57.entry.js.map → p-21b4ed5f.entry.js.map} +0 -0
- /package/dist/atomic/{p-330e6e7c.entry.js.map → p-3af5c567.entry.js.map} +0 -0
- /package/dist/atomic/{p-75e00690.entry.js.map → p-45c4685e.entry.js.map} +0 -0
- /package/dist/atomic/{p-7a625c7e.entry.js.map → p-4915faeb.entry.js.map} +0 -0
- /package/dist/atomic/{p-52ba404c.entry.js.map → p-4c30ca3e.entry.js.map} +0 -0
- /package/dist/atomic/{p-aa2a81fd.entry.js.map → p-4e9d1f9e.entry.js.map} +0 -0
- /package/dist/atomic/{p-31f1e44e.entry.js.map → p-516b8165.entry.js.map} +0 -0
- /package/dist/atomic/{p-877d35b1.entry.js.map → p-5adbf098.entry.js.map} +0 -0
- /package/dist/atomic/{p-4b3d253b.entry.js.map → p-65373475.entry.js.map} +0 -0
- /package/dist/atomic/{p-9ec639b1.entry.js.map → p-6b3b975e.entry.js.map} +0 -0
- /package/dist/atomic/{p-3c8d109e.entry.js.map → p-6f988841.entry.js.map} +0 -0
- /package/dist/atomic/{p-b28011e6.entry.js.map → p-71bb8125.entry.js.map} +0 -0
- /package/dist/atomic/{p-de066001.entry.js.map → p-757de797.entry.js.map} +0 -0
- /package/dist/atomic/{p-78b70622.entry.js.map → p-8acb1466.entry.js.map} +0 -0
- /package/dist/atomic/{p-93e29b24.entry.js.map → p-9883415e.entry.js.map} +0 -0
- /package/dist/atomic/{p-7b899b57.entry.js.map → p-a02b1209.entry.js.map} +0 -0
- /package/dist/atomic/{p-fc2177ae.js.map → p-aab5c11d.js.map} +0 -0
- /package/dist/atomic/{p-d00a12e9.entry.js.map → p-b4ad3036.entry.js.map} +0 -0
- /package/dist/atomic/{p-a760d9f9.entry.js.map → p-be1b98a6.entry.js.map} +0 -0
- /package/dist/atomic/{p-7dfcd6af.entry.js.map → p-bf50b64d.entry.js.map} +0 -0
- /package/dist/atomic/{p-c49cfa0c.entry.js.map → p-d11b2b24.entry.js.map} +0 -0
- /package/dist/atomic/{p-f22bcb8c.entry.js.map → p-d2d22ab2.entry.js.map} +0 -0
- /package/dist/atomic/{p-6837d94c.entry.js.map → p-d6969a23.entry.js.map} +0 -0
- /package/dist/atomic/{p-021f01d6.entry.js.map → p-e8d5e852.entry.js.map} +0 -0
- /package/dist/atomic/{p-7b0b9e9b.entry.js.map → p-f073a78d.entry.js.map} +0 -0
- /package/dist/atomic/{p-c88a3d2d.entry.js.map → p-fb7ad34b.entry.js.map} +0 -0
|
@@ -289,7 +289,7 @@ const AtomicNumericFacet$1 = /*@__PURE__*/ proxyCustomElement(class AtomicNumeri
|
|
|
289
289
|
}
|
|
290
290
|
render() {
|
|
291
291
|
const { searchStatusState: { firstSearchExecuted, hasError }, bindings: { i18n }, } = this;
|
|
292
|
-
return (h(FacetGuard, { key: '
|
|
292
|
+
return (h(FacetGuard, { key: '15b03c400b65ced232766d9ef8a7a9b2fbff9c98', enabled: this.enabled, firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: this.shouldRenderFacet }, firstSearchExecuted ? (h(FacetContainer, null, h(FacetHeader, { i18n: i18n, label: this.label, onClearFilters: () => {
|
|
293
293
|
this.focusTarget.focusAfterSearch();
|
|
294
294
|
if (this.filterState?.range) {
|
|
295
295
|
this.filter?.clear();
|
|
@@ -37,7 +37,7 @@ const AtomicQueryError$1 = /*@__PURE__*/ proxyCustomElement(class AtomicQueryErr
|
|
|
37
37
|
if (hasError) {
|
|
38
38
|
this.ariaMessage = getAriaMessageFromErrorType(i18n, organizationId, url, error?.type);
|
|
39
39
|
}
|
|
40
|
-
return (h(QueryErrorGuard, { key: '
|
|
40
|
+
return (h(QueryErrorGuard, { key: '03bbb522c2940aba7bd608dc2f8c5f3ccfcdc4bb', hasError: hasError }, h(QueryErrorContainer, { key: '527e7454327429302b58c227bdec3b48fbbe4711' }, h(QueryErrorIcon, { key: '6f64bd01c47cbca966c9f579de76a2a0037918b7', errorType: error?.type }), h(QueryErrorTitle, { key: '434d6a8521b4e5684f3d4eef383d7eb202ee3a23', errorType: error?.type, i18n: i18n, organizationId: organizationId }), h(QueryErrorDescription, { key: 'e81443b64f891b0db01403b7962ce3694fc3c4b7', i18n: i18n, organizationId: organizationId, url: url, errorType: error?.type }), h(QueryErrorShowMore, { key: '40b280ffce9d9041425f8955d9ea0b1791d300bb', link: h(QueryErrorLink, { i18n: i18n, errorType: error?.type }), onShowMore: () => (this.showMoreInfo = !this.showMoreInfo), i18n: i18n }), h(QueryErrorDetails, { key: '26091175ee3103ea36f3acbcf3cda528590a376a', error: error, show: this.showMoreInfo }))));
|
|
41
41
|
}
|
|
42
42
|
static get style() { return AtomicQueryErrorStyle0; }
|
|
43
43
|
}, [1, "atomic-query-error", {
|
|
@@ -582,7 +582,7 @@ const AtomicQuickviewModal = /*@__PURE__*/ proxyCustomElement(class AtomicQuickv
|
|
|
582
582
|
});
|
|
583
583
|
}
|
|
584
584
|
render() {
|
|
585
|
-
return (h("atomic-modal", { key: '
|
|
585
|
+
return (h("atomic-modal", { key: '9b31f319fb04a44adb84434f2e09bc211b7cf03a', fullscreen: this.bindings.store.isMobile(), class: 'atomic-quickview-modal', isOpen: this.isOpen, close: () => this.onClose(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, this.renderHeader(), this.renderBody(), this.renderFooter()));
|
|
586
586
|
}
|
|
587
587
|
static get watchers() { return {
|
|
588
588
|
"highlightKeywords": ["watchHighlightKeywords"]
|
|
@@ -106,7 +106,7 @@ const AtomicQuickview$1 = /*@__PURE__*/ proxyCustomElement(class AtomicQuickview
|
|
|
106
106
|
}
|
|
107
107
|
render() {
|
|
108
108
|
if (this.quickviewState.resultHasPreview) {
|
|
109
|
-
return (h(Button, { key: '
|
|
109
|
+
return (h(Button, { key: '923515932e09ccd18ec5060671a55800e5e6e83a', part: "button", title: this.bindings.i18n.t('quickview'), style: "outline-primary", class: "p-2", onClick: (event) => this.onClick(event), ref: this.focusTarget.setTarget }, h("atomic-icon", { key: '375e24610aae279d97f4efa17c6084cea5957008', part: "icon", class: "flex w-5 justify-center", icon: QuickviewIcon })));
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
static get style() { return AtomicQuickviewStyle0; }
|
|
@@ -204,7 +204,7 @@ const AtomicRefineModal = /*@__PURE__*/ proxyCustomElement(class AtomicRefineMod
|
|
|
204
204
|
return (h(RefineModalFiltersSection, { i18n: i18n, withFacets: hasFacetElements, withAutomaticFacets: hasAutomaticFacets }, this.breadcrumbManagerState.hasBreadcrumbs && (h(RefineModalFiltersClearButton, { i18n: i18n, onClick: () => this.breadcrumbManager.deselectAll() }))));
|
|
205
205
|
}
|
|
206
206
|
render() {
|
|
207
|
-
return (h(RefineModal, { key: '
|
|
207
|
+
return (h(RefineModal, { key: 'b24978bc166205334991a7cd364924dcc33a41f6', i18n: this.bindings.i18n, host: this.host, isOpen: this.isOpen, onClose: () => (this.isOpen = false), title: this.bindings.i18n.t('sort-and-filter'), numberOfItems: this.querySummaryState.total, openButton: this.openButton }, h(RefineModalBody, { key: '5ef9af05829d5b359005abc8ee7a584cf5c955d4' }, this.renderSort(), this.renderFilters())));
|
|
208
208
|
}
|
|
209
209
|
componentDidLoad() {
|
|
210
210
|
this.host.style.display = '';
|
|
@@ -68,7 +68,7 @@ const AtomicRefineToggle$1 = /*@__PURE__*/ proxyCustomElement(class AtomicRefine
|
|
|
68
68
|
this.modalRef && (this.modalRef.isOpen = true);
|
|
69
69
|
}
|
|
70
70
|
render() {
|
|
71
|
-
return (h(RefineToggleGuard, { key: '
|
|
71
|
+
return (h(RefineToggleGuard, { key: '312e1ac5b9c66596ae803bd31cc0348232b8f326', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, h(RefineToggleButton, { key: 'a9d05a44b082ccf83b6be5e84a076c0259b27a39', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
|
|
72
72
|
if (!button) {
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
@@ -16,9 +16,9 @@ const AtomicRelevanceInspector = /*@__PURE__*/ proxyCustomElement(class AtomicRe
|
|
|
16
16
|
this.open = false;
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("atomic-modal", { key: '
|
|
19
|
+
return (h("atomic-modal", { key: 'e3ce0d01d697da5adb7e6028692734ce78fe88b5', exportparts: "footer", isOpen: this.open, close: () => {
|
|
20
20
|
this.closeRelevanceInspector?.emit();
|
|
21
|
-
} }, h("p", { key: '
|
|
21
|
+
} }, h("p", { key: 'a9d5de1f5c779b36843f0c4b92352707ed57f59f', slot: "header" }, "Open the relevance inspector"), h("p", { key: 'ded771ba370b30470ead89dd71dcd3d7942de20e', slot: "body" }, "The Relevance Inspector will open in the Coveo Administration Console."), h("div", { key: 'bd7f1afa7457ca17b45c1a913dc82586d72c5bb7', slot: "footer", class: "flex w-full items-center justify-end" }, h(Button, { key: 'ebe15b64f3ebcd37fac4e5d5b1d270a9611df18e', style: "outline-primary", class: "mr-2 p-2", onClick: () => this.closeRelevanceInspector?.emit() }, "Ignore"), h("a", { key: 'f774884a805fbe36c5f5529142a0becf0b200e2d', class: "btn-primary p-2", target: "_blank", href: this.adminHref, onClick: () => this.closeRelevanceInspector?.emit() }, "Open"))));
|
|
22
22
|
}
|
|
23
23
|
get adminHref() {
|
|
24
24
|
const { organizationId, environment } = this.bindings.engine.state.configuration;
|
|
@@ -138,7 +138,7 @@ const AtomicResultChildren$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResu
|
|
|
138
138
|
return (h(ChildrenWrapper, { hasChildren: children.length > 0 }, children.map((child, i) => this.renderChild(child, i === children.length - 1))));
|
|
139
139
|
}
|
|
140
140
|
render() {
|
|
141
|
-
return (h(ResultChildrenGuard, { key: '
|
|
141
|
+
return (h(ResultChildrenGuard, { key: '87e4eb542feb7fd2fe4adafb1a966a77653195e6', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
|
|
142
142
|
}
|
|
143
143
|
get host() { return this; }
|
|
144
144
|
static get style() { return AtomicResultChildrenStyle0; }
|
|
@@ -98,7 +98,7 @@ const AtomicResultFieldsList$1 = /*@__PURE__*/ proxyCustomElement(class AtomicRe
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
render() {
|
|
101
|
-
return h(Host, { key: '
|
|
101
|
+
return h(Host, { key: 'bb78009f1c331adf546e3fb7516413cce13de162' });
|
|
102
102
|
}
|
|
103
103
|
get host() { return this; }
|
|
104
104
|
static get style() { return AtomicResultFieldsListStyle0; }
|
|
@@ -43,7 +43,7 @@ const AtomicResultLink$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResultLi
|
|
|
43
43
|
const href = isUndefined(this.hrefTemplate)
|
|
44
44
|
? this.result.clickUri
|
|
45
45
|
: buildStringTemplateFromResult(this.hrefTemplate, this.result, this.bindings);
|
|
46
|
-
return (h(LinkWithItemAnalytics, { key: '
|
|
46
|
+
return (h(LinkWithItemAnalytics, { key: '161199ea164427d67db5456e43d7c3cb2ebe9d8d', href: href, onSelect: () => this.interactiveResult.select(), onBeginDelayedSelect: () => this.interactiveResult.beginDelayedSelect(), onCancelPendingSelect: () => this.interactiveResult.cancelPendingSelect(), attributes: this.linkAttributes, stopPropagation: this.stopPropagation }, this.hasDefaultSlot ? (h("slot", null)) : (h("atomic-result-text", { field: "title", default: "no-title" }))));
|
|
47
47
|
}
|
|
48
48
|
get host() { return this; }
|
|
49
49
|
static get style() { return AtomicResultLinkStyle0; }
|
|
@@ -194,7 +194,7 @@ const AtomicResultList$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResultLi
|
|
|
194
194
|
render() {
|
|
195
195
|
this.resultListCommon.updateBreakpoints();
|
|
196
196
|
const listClasses = this.computeListDisplayClasses();
|
|
197
|
-
return (h(TabGuard, { key: '
|
|
197
|
+
return (h(TabGuard, { key: '649dedc762f1c1c9dd45851b000ef76ecd07effa', tabsIncluded: this.tabsIncluded, tabsExcluded: this.tabsExcluded, activeTab: this.tabManagerState.activeTab }, h(ItemListGuard, { key: '05afb457fd344b7ccf5cb925d0baf32227f2ddba', hasError: this.resultListState.hasError, hasTemplate: this.resultTemplateRegistered, templateHasError: this.itemTemplateProvider.hasError, firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, h(DisplayWrapper, { key: 'a68a18d3eb5c4fad3949bbc8f11a1610db400346', display: this.display, listClasses: listClasses }, h(ResultsPlaceholdersGuard, { key: '19c2415dc2c2497abc612acd1866f1284cdf2422', density: this.density, display: this.display, imageSize: this.imageSize, displayPlaceholders: !this.isAppLoaded, numberOfPlaceholders: this.resultsPerPageState.numberOfResults }), h(ItemDisplayGuard, { key: '5eadfb9707d35affe14cc9eabfe70a436981cc80', firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, this.display === 'table'
|
|
198
198
|
? this.renderAsTable()
|
|
199
199
|
: this.display === 'grid'
|
|
200
200
|
? this.renderAsGrid()
|
|
@@ -18,7 +18,7 @@ const AtomicResultTablePlaceholder = /*@__PURE__*/ proxyCustomElement(class Atom
|
|
|
18
18
|
return getItemDisplayClasses('table', this.density, this.imageSize);
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (h("table", { key: '
|
|
21
|
+
return (h("table", { key: 'b8c5b9a4cf0bd04dcb9d0cebfe081a30c6758b35', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: '7e8092ecc1348a54780de5b079d92add1c9124a5' }, h("tr", { key: '0f3411ec8bffc6707e9214acdf15d21134fb4554' }, h("th", { key: '5d84b299102a369cf4c59b6df1487cdae303fbf6' }, h("div", { key: 'c10767a6181669697474b5804e29b265f7a8083f', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: '389fed1b7f36142236761962450032ec7739a8a7' }, h("div", { key: 'a1ed8c588b5ffb64de2c2daa234b9e1a88086043', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: '36202380fc0afaf244b5e1e9772c7e17ce2b20ba' }, h("div", { key: '6691745f3a6b867056fef0828077747e1b323a80', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: 'cb2b8cb0f545b97998c80f73c4ac33a2d46cdaaf' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
|
|
22
22
|
}
|
|
23
23
|
static get style() { return AtomicResultTablePlaceholderStyle0; }
|
|
24
24
|
}, [1, "atomic-result-table-placeholder", {
|
|
@@ -60,7 +60,7 @@ const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/ proxyCustomElement(class A
|
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
62
|
if (this.error) {
|
|
63
|
-
return (h("atomic-component-error", { key: '
|
|
63
|
+
return (h("atomic-component-error", { key: 'ee518dd01ee68d5ac1e13c37335888acf7089beb', element: this.host, error: this.error }));
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
get host() { return this; }
|
|
@@ -154,7 +154,7 @@ const AtomicSearchBoxRecentQueries = /*@__PURE__*/ proxyCustomElement(class Atom
|
|
|
154
154
|
}
|
|
155
155
|
render() {
|
|
156
156
|
if (this.error) {
|
|
157
|
-
return (h("atomic-component-error", { key: '
|
|
157
|
+
return (h("atomic-component-error", { key: '577129c08c073b99dbb6b86b77e2ffa7c2ff7f69', element: this.host, error: this.error }));
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
get host() { return this; }
|
|
@@ -425,18 +425,18 @@ const AtomicSearchBox$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBox
|
|
|
425
425
|
if (!this.suggestionManager.suggestions.length) {
|
|
426
426
|
this.registerSearchboxSuggestionEvents();
|
|
427
427
|
}
|
|
428
|
-
return (h(Host, { key: '
|
|
429
|
-
h(SearchBoxWrapper, { key: '
|
|
428
|
+
return (h(Host, { key: 'c6057e947ead5556e40b2cedcf06781a7e9927f0' }, this.renderAbsolutePositionSpacer(), [
|
|
429
|
+
h(SearchBoxWrapper, { key: '628b8bcabcf9612cba7970163b8c2a2f7747de9d', disabled: isDisabled, onFocusout: (event) => {
|
|
430
430
|
if (!isFocusingOut(event)) {
|
|
431
431
|
return;
|
|
432
432
|
}
|
|
433
433
|
this.suggestionManager.clearSuggestions();
|
|
434
434
|
this.isExpanded = false;
|
|
435
|
-
} }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '
|
|
435
|
+
} }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '82b2a7e72b27405c8ea129dee66901dc95ea7510', bindings: this.bindings, disabled: isDisabled, onClick: () => {
|
|
436
436
|
this.searchBox.submit();
|
|
437
437
|
this.suggestionManager.clearSuggestions();
|
|
438
438
|
} }), this.renderSuggestions()),
|
|
439
|
-
!this.suggestionManager.suggestions.length && (h("slot", { key: '
|
|
439
|
+
!this.suggestionManager.suggestions.length && (h("slot", { key: '5d3bfbd30545b9d50afde0ea178121f2157618ae' }, h("atomic-search-box-recent-queries", { key: '0c04feaf3b136bc45532a1a134d0e307bc64131d' }), h("atomic-search-box-query-suggestions", { key: '65c916e94811e1e1a0fae8a6082e8122f34be471' }))),
|
|
440
440
|
]));
|
|
441
441
|
}
|
|
442
442
|
get host() { return this; }
|
|
@@ -43,9 +43,9 @@ const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/ proxyCustomElement(class A
|
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
45
|
updateBreakpoints(this.host);
|
|
46
|
-
return (h("atomic-modal", { key: '
|
|
46
|
+
return (h("atomic-modal", { key: '9915bc71b6329068bc8a3731971a793946762f39', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '385350607264cd3a0dce273b18eec02909220384', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'e1a01e0df35dbaf9da6891c825ad5e5e1e6bc534', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: 'd92a6395c26802cfafbcbd50fb1b2cd86bb907de', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
|
|
47
47
|
this.currentAnswer = correspondingAnswer;
|
|
48
|
-
} })))), h(SmartSnippetFeedbackModalDetails, { key: '
|
|
48
|
+
} })))), h(SmartSnippetFeedbackModalDetails, { key: '6dfe87c931bc44d202d78c5a800936aa733b89de', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '86f51c71ade3a7e360ce5c000e45939e8744ade4', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
|
|
49
49
|
}
|
|
50
50
|
close() {
|
|
51
51
|
this.isOpen = false;
|
|
@@ -117,8 +117,8 @@ const AtomicSortDropdown$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSortDr
|
|
|
117
117
|
const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
|
|
118
118
|
const { bindings: { i18n }, id, } = this;
|
|
119
119
|
return [
|
|
120
|
-
h(SortGuard, { key: '
|
|
121
|
-
h("slot", { key: '
|
|
120
|
+
h(SortGuard, { key: '0669c3a8c7067eef9ba5c178a5f4d12752f8b085', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '6eb9cc11bb18013dfd384b809e6e72d2177cbe60' }, h(SortLabel, { key: '4573530fcd7c614b7ed1d3dbb8f4ad5617477ee3', i18n: i18n, id: id }), h(SortSelect, { key: 'a5ee4b55058679c63fb628337c33d1db192cf481', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
|
|
121
|
+
h("slot", { key: '39a0d6e53adfe877b5f677d4cf9b0ff9177f84e8' }),
|
|
122
122
|
];
|
|
123
123
|
}
|
|
124
124
|
get host() { return this; }
|
|
@@ -47,7 +47,7 @@ const AtomicSortExpression$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSort
|
|
|
47
47
|
const dropdownComponent = 'atomic-sort-dropdown';
|
|
48
48
|
if (!this.host.closest(dropdownComponent)) {
|
|
49
49
|
const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
|
|
50
|
-
return (h("atomic-component-error", { key: '
|
|
50
|
+
return (h("atomic-component-error", { key: '4e946fe770ef49fc6346f0bc247db856fd38ba68', element: this.host, error: error }));
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
get host() { return this; }
|
|
@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
|
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
62
|
+
return (h(Host, { key: 'ea60f4179a268319ba97570f95d6881c379c8b18' }, h("atomic-tab-bar", { key: 'ea83347d794b2f83b70706bdfc4240286c27d71e' }, h("div", { key: '9d9e588d7a4b7012f43419f3edae786b177498cc', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
|
|
63
63
|
defaultValue: tab.label,
|
|
64
64
|
}), select: () => {
|
|
65
65
|
if (!tab.tabController.state.isActive) {
|
|
@@ -115,23 +115,30 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
|
|
|
115
115
|
this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
|
|
116
116
|
this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
|
|
117
117
|
}
|
|
118
|
-
|
|
119
|
-
super.updated(changedProperties);
|
|
118
|
+
willUpdate(changedProperties) {
|
|
120
119
|
if (changedProperties.has('pathLimit')) {
|
|
121
120
|
this.validateProps();
|
|
122
121
|
}
|
|
122
|
+
}
|
|
123
|
+
updated() {
|
|
123
124
|
this.adaptBreadcrumbs();
|
|
124
125
|
}
|
|
125
126
|
validateProps() {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
try {
|
|
128
|
+
new Schema({
|
|
129
|
+
pathLimit: new NumberValue({
|
|
130
|
+
default: 3,
|
|
131
|
+
min: 1,
|
|
132
|
+
required: false,
|
|
133
|
+
}),
|
|
134
|
+
}).validate({
|
|
135
|
+
pathLimit: this.pathLimit,
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
catch (error) {
|
|
139
|
+
this.error = error;
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
135
142
|
}
|
|
136
143
|
disconnectedCallback() {
|
|
137
144
|
this.resizeObserver?.disconnect();
|
|
@@ -9,6 +9,7 @@ import { provide } from '@lit/context';
|
|
|
9
9
|
import i18next from 'i18next';
|
|
10
10
|
import { css, html, LitElement } from 'lit';
|
|
11
11
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
12
|
+
import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
|
|
12
13
|
import { booleanConverter } from "../../../converters/boolean-converter";
|
|
13
14
|
import { errorGuard } from "../../../decorators/error-guard";
|
|
14
15
|
import { watch } from "../../../decorators/watch";
|
|
@@ -85,6 +86,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
|
|
|
85
86
|
this.urlManager.synchronize(this.fragment);
|
|
86
87
|
};
|
|
87
88
|
this.store = createCommerceStore(this.type);
|
|
89
|
+
new MobileBreakpointController(this, this.store);
|
|
88
90
|
const { promise, resolve } = Promise.withResolvers();
|
|
89
91
|
this.i18Initialized = promise;
|
|
90
92
|
this.i18n = i18next.createInstance(undefined, resolve);
|
|
@@ -92,7 +94,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
|
|
|
92
94
|
connectedCallback() {
|
|
93
95
|
super.connectedCallback();
|
|
94
96
|
this.store.setLoadingFlag(FirstRequestExecutedFlag);
|
|
95
|
-
this.updateMobileBreakpoint();
|
|
96
97
|
this.addEventListener('atomic/initializeComponent', this.handleInitialization);
|
|
97
98
|
this.addEventListener('atomic/scrollToTop', this.scrollToTop);
|
|
98
99
|
}
|
|
@@ -285,12 +286,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
|
|
|
285
286
|
history.pushState(null, document.title, `#${newFragment}`);
|
|
286
287
|
this.bindings.engine.logger.info(`History pushState #${newFragment}`);
|
|
287
288
|
}
|
|
288
|
-
updateMobileBreakpoint() {
|
|
289
|
-
const breakpoint = this.querySelector('atomic-commerce-layout')?.mobileBreakpoint;
|
|
290
|
-
if (breakpoint) {
|
|
291
|
-
this.store.state.mobileBreakpoint = breakpoint;
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
289
|
};
|
|
295
290
|
AtomicCommerceInterface.styles = [
|
|
296
291
|
css`:host{display:block;height:inherit;width:inherit;&>slot{height:inherit}}`,
|
package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js
CHANGED
|
@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { LitElement
|
|
7
|
+
import { LitElement } from 'lit';
|
|
8
8
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
|
+
import { LayoutStylesController } from "../../common/layout/layout-styles-controller";
|
|
10
|
+
import { watch } from "../../../decorators/watch";
|
|
9
11
|
import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
|
|
10
12
|
import { LightDomMixin } from "../../../mixins/light-dom";
|
|
11
|
-
import { randomID } from "../../../utils/utils";
|
|
12
13
|
import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint-utils';
|
|
13
14
|
import styles from './atomic-commerce-layout.tw.css';
|
|
14
15
|
import { buildCommerceLayout } from './commerce-layout';
|
|
@@ -18,8 +19,6 @@ import { buildCommerceLayout } from './commerce-layout';
|
|
|
18
19
|
* @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
|
|
19
20
|
* @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
|
|
20
21
|
* @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
|
|
21
|
-
*
|
|
22
|
-
* @slot default - The default slot for the layout content.
|
|
23
22
|
*/
|
|
24
23
|
let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
|
|
25
24
|
constructor() {
|
|
@@ -29,15 +28,22 @@ let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(Chil
|
|
|
29
28
|
* E.g., 800px, 65rem.
|
|
30
29
|
*/
|
|
31
30
|
this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
|
|
32
|
-
|
|
33
|
-
async addStyles() {
|
|
34
|
-
await this.getUpdateComplete();
|
|
35
|
-
this.injectStyles(unsafeCSS(buildCommerceLayout(this, this.mobileBreakpoint)));
|
|
31
|
+
this.layoutStylesController = new LayoutStylesController(this, buildCommerceLayout, 'atomic-commerce-layout-');
|
|
36
32
|
}
|
|
37
33
|
connectedCallback() {
|
|
38
34
|
super.connectedCallback();
|
|
39
|
-
this.
|
|
40
|
-
|
|
35
|
+
this.emitBreakpointChangeEvent();
|
|
36
|
+
}
|
|
37
|
+
emitBreakpointChangeEvent() {
|
|
38
|
+
this.dispatchEvent(new CustomEvent('atomic-layout-breakpoint-change', {
|
|
39
|
+
detail: { breakpoint: this.mobileBreakpoint },
|
|
40
|
+
bubbles: true,
|
|
41
|
+
composed: true,
|
|
42
|
+
}));
|
|
43
|
+
}
|
|
44
|
+
onMobileBreakpointChange() {
|
|
45
|
+
this.layoutStylesController.updateStyles();
|
|
46
|
+
this.emitBreakpointChangeEvent();
|
|
41
47
|
}
|
|
42
48
|
};
|
|
43
49
|
AtomicCommerceLayout.styles = [styles];
|
|
@@ -47,6 +53,9 @@ __decorate([
|
|
|
47
53
|
__decorate([
|
|
48
54
|
property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
|
|
49
55
|
], AtomicCommerceLayout.prototype, "mobileBreakpoint", void 0);
|
|
56
|
+
__decorate([
|
|
57
|
+
watch('mobileBreakpoint')
|
|
58
|
+
], AtomicCommerceLayout.prototype, "onMobileBreakpointChange", null);
|
|
50
59
|
AtomicCommerceLayout = __decorate([
|
|
51
60
|
customElement('atomic-commerce-layout')
|
|
52
61
|
], AtomicCommerceLayout);
|
package/dist/atomic/components/components/commerce/atomic-commerce-pager/atomic-commerce-pager.js
CHANGED
|
@@ -8,6 +8,7 @@ import { NumberValue, Schema } from '@coveo/bueno';
|
|
|
8
8
|
import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
|
|
9
9
|
import { html, LitElement } from 'lit';
|
|
10
10
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
11
|
+
import { keyed } from 'lit/directives/keyed.js';
|
|
11
12
|
import { when } from 'lit/directives/when.js';
|
|
12
13
|
import { bindStateToController } from "../../../decorators/bind-state";
|
|
13
14
|
import { bindingGuard } from "../../../decorators/binding-guard";
|
|
@@ -103,7 +104,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
|
|
|
103
104
|
props: {
|
|
104
105
|
i18n: this.bindings.i18n,
|
|
105
106
|
},
|
|
106
|
-
})(html `${pagesRange.map((pageNumber) => renderPagerPageButton({
|
|
107
|
+
})(html `${pagesRange.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
|
|
107
108
|
props: {
|
|
108
109
|
isSelected: pageNumber === this.pagerState.page,
|
|
109
110
|
ariaLabel: this.bindings.i18n.t('page-number', {
|
|
@@ -117,7 +118,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
|
|
|
117
118
|
groupName: this.radioGroupName,
|
|
118
119
|
text: (pageNumber + 1).toLocaleString(this.bindings.i18n.language),
|
|
119
120
|
},
|
|
120
|
-
}))}`)}
|
|
121
|
+
})))}`)}
|
|
121
122
|
${renderPagerNextButton({
|
|
122
123
|
props: {
|
|
123
124
|
icon: this.nextButtonIcon,
|
|
@@ -9,6 +9,7 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
9
9
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
10
10
|
import { when } from 'lit/directives/when.js';
|
|
11
11
|
import { booleanConverter } from "../../../converters/boolean-converter.js";
|
|
12
|
+
import { bindings } from "../../../decorators/bindings.js";
|
|
12
13
|
import { errorGuard } from "../../../decorators/error-guard";
|
|
13
14
|
import { watch } from "../../../decorators/watch.js";
|
|
14
15
|
import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
|
|
@@ -296,6 +297,7 @@ __decorate([
|
|
|
296
297
|
], AtomicModal.prototype, "watchToggleOpen", null);
|
|
297
298
|
AtomicModal = __decorate([
|
|
298
299
|
customElement('atomic-modal'),
|
|
300
|
+
bindings(),
|
|
299
301
|
withTailwindStyles
|
|
300
302
|
], AtomicModal);
|
|
301
303
|
export { AtomicModal };
|
|
@@ -0,0 +1,40 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
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
|
+
}
|