@coveo/atomic 3.62.0 → 3.63.0

package/custom-elements.json

@@ -998,6 +998,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/locale-utils.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/memoize.ts",
@@ -2994,6 +3000,18 @@
               "attribute": "language",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "localizeWithCountry",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.\n\nWhen Atomic has translations for the regional locale (for example `pt-BR` or `zh-TW`), the\ninterface uses them instead of those of the language. To customize strings for such an\ninterface, register them under the regional locale.",
+              "attribute": "localize-with-country",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "engine",
@@ -3131,7 +3149,7 @@
                   "description": "(Optional) The ISO-4217 currency code (for example, `USD`)."
                 }
               ],
-              "description": "Updates the locale settings for the commerce interface and headless commerce\nengine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing."
+              "description": "Updates the locale settings for the commerce interface and headless commerce\nengine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing.\n\nWith `localize-with-country`, the country also drives the number, currency, and\ndate formatting of the interface."
             },
             {
               "kind": "method",
@@ -3143,6 +3161,11 @@
               "name": "updateLanguage",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "toggleLocalizeWithCountry",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "updateIconAssetsPath",
@@ -3197,6 +3220,26 @@
               "name": "initLanguage",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "getLocale",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "language",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "country",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "initRequestStatus",
@@ -3318,6 +3361,15 @@
               "deprecated": "- This property will be removed in the next major version of\nAtomic (v4). Rather than using this property, set the initial language\nthrough the engine configuration when calling `initializeWithEngine`, and\nupdate the language as needed using the `updateLocale` method.",
               "fieldName": "language"
             },
+            {
+              "name": "localize-with-country",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.\n\nWhen Atomic has translations for the regional locale (for example `pt-BR` or `zh-TW`), the\ninterface uses them instead of those of the language. To customize strings for such an\ninterface, register them under the regional locale.",
+              "fieldName": "localizeWithCountry"
+            },
             {
               "name": "reflect-state-in-url",
               "type": {
@@ -4300,6 +4352,12 @@
               "privacy": "protected",
               "default": "new AriaLiveRegionController(this, 'atomic-pager')"
             },
+            {
+              "kind": "field",
+              "name": "pagerFit",
+              "privacy": "private",
+              "default": "new PagerFitController(this)"
+            },
             {
               "kind": "field",
               "name": "previousButton",
@@ -5369,6 +5427,17 @@
               "attribute": "language",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "localizeWithCountry",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.",
+              "attribute": "localize-with-country",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "analytics",
@@ -5438,7 +5507,7 @@
                   "description": "(Optional) The ISO-4217 currency code (for example, `USD`)."
                 }
               ],
-              "description": "Updates the locale settings for the commerce recommendation interface and\nheadless commerce engine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing."
+              "description": "Updates the locale settings for the commerce recommendation interface and\nheadless commerce engine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing.\n\nWith `localize-with-country`, the country also drives the number, currency, and\ndate formatting of the interface."
             },
             {
               "kind": "method",
@@ -5450,6 +5519,11 @@
               "name": "updateIconAssetsPath",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "toggleLocalizeWithCountry",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "updateLanguage",
@@ -5498,6 +5572,26 @@
               "name": "initLanguage",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "getLocale",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "language",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "country",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "isNewLocale",
@@ -5577,6 +5671,15 @@
               "deprecated": "- This property will be removed in the next major version of\nAtomic (v4). Rather than using this property, set the initial language\nthrough the engine configuration when calling `initializeWithEngine`, and\nupdate the language as needed using the `updateLocale` method.",
               "fieldName": "language"
             },
+            {
+              "name": "localize-with-country",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.",
+              "fieldName": "localizeWithCountry"
+            },
             {
               "name": "analytics",
               "type": {
@@ -14762,6 +14865,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/common/pager/pager-fit-controller.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/common/pager/pager-navigation.ts",
@@ -17095,7 +17204,7 @@
               },
               "privacy": "public",
               "default": "'en'",
-              "description": "The service insight interface language.",
+              "description": "The service insight interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "attribute": "language",
               "reflects": true
             },
@@ -17314,7 +17423,7 @@
                 "text": "string"
               },
               "default": "'en'",
-              "description": "The service insight interface language.",
+              "description": "The service insight interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "fieldName": "language"
             },
             {
@@ -18517,6 +18626,12 @@
               "privacy": "protected",
               "default": "new AriaLiveRegionController(this, 'atomic-insight-pager')"
             },
+            {
+              "kind": "field",
+              "name": "pagerFit",
+              "privacy": "private",
+              "default": "new PagerFitController(this)"
+            },
             {
               "kind": "field",
               "name": "previousButton",
@@ -25873,7 +25988,7 @@
               },
               "privacy": "public",
               "default": "'en'",
-              "description": "The recommendation interface language.",
+              "description": "The recommendation interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "attribute": "language",
               "reflects": true
             },
@@ -26091,7 +26206,7 @@
                 "text": "string"
               },
               "default": "'en'",
-              "description": "The recommendation interface language.",
+              "description": "The recommendation interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "fieldName": "language"
             },
             {
@@ -34384,6 +34499,12 @@
               "privacy": "protected",
               "default": "new AriaLiveRegionController(this, 'atomic-pager')"
             },
+            {
+              "kind": "field",
+              "name": "pagerFit",
+              "privacy": "private",
+              "default": "new PagerFitController(this)"
+            },
             {
               "kind": "field",
               "name": "previousButton",
@@ -38308,7 +38429,7 @@
               },
               "privacy": "public",
               "default": "'D/M/YYYY'",
-              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format",
+              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format\n\n[Localized formats](https://day.js.org/docs/en/display/format#localized-formats) such as `L`, `LL`, or `LLL`\nfollow the interface `language`: with `format=\"L\"`, `en-US` renders `09/30/2026` and `en-CA` renders `2026-09-30`.",
               "attribute": "format",
               "reflects": true
             },
@@ -38431,7 +38552,7 @@
                 "text": "string"
               },
               "default": "'D/M/YYYY'",
-              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format",
+              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format\n\n[Localized formats](https://day.js.org/docs/en/display/format#localized-formats) such as `L`, `LL`, or `LLL`\nfollow the interface `language`: with `format=\"L\"`, `en-US` renders `09/30/2026` and `en-CA` renders `2026-09-30`.",
               "fieldName": "format"
             },
             {
@@ -44497,7 +44618,7 @@
               },
               "privacy": "public",
               "default": "'en'",
-              "description": "The search interface language.",
+              "description": "The search interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "attribute": "language",
               "reflects": true
             },
@@ -44854,7 +44975,7 @@
                 "text": "string"
               },
               "default": "'en'",
-              "description": "The search interface language.",
+              "description": "The search interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "fieldName": "language"
             },
             {

package/dist/cjs/components/commerce/atomic-commerce-interface/atomic-commerce-interface.cjs

@@ -58,6 +58,7 @@ const children_update_complete_mixin_cjs_namespaceObject = require("../../../mix
 const init_queue_cjs_namespaceObject = require("../../../utils/init-queue.cjs");
 const initialization_common_utils_cjs_namespaceObject = require("../../../utils/initialization-common-utils.cjs");
 const local_storage_utils_cjs_namespaceObject = require("../../../utils/local-storage-utils.cjs");
+const locale_utils_cjs_namespaceObject = require("../../../utils/locale-utils.cjs");
 const external_analytics_config_cjs_namespaceObject = require("./analytics-config.cjs");
 const external_store_cjs_namespaceObject = require("./store.cjs");
 function _ts_decorate(decorators, target, key, desc) {
@@ -114,7 +115,7 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
     }
     updateLocale(language, country, currency) {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.context) return;
-        language && this.interfaceController.onLanguageChange(language);
+        if (language || country && this.localizeWithCountry) this.interfaceController.onLanguageChange(this.getLocale(language || this.context.state.language, country || this.context.state.country));
         if (this.isNewLocale(language, country, currency)) {
             const { setContext } = (0, commerce_namespaceObject.loadContextActions)(this.engine);
             this.engine.dispatch(setContext({
@@ -139,7 +140,11 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.language || !this.context) return;
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initialize` or `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.interfaceController.onLanguageChange(this.getLocale(this.language, this.context.state.country));
+    }
+    toggleLocalizeWithCountry() {
+        if (!this.context) return;
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
     }
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
@@ -180,7 +185,10 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
     }
     initLanguage() {
         if (!this.context || this.language) return;
-        this.interfaceController.onLanguageChange(this.context.state.language);
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
+    getLocale(language, country) {
+        return this.localizeWithCountry ? (0, locale_utils_cjs_namespaceObject.withCountry)(language, country) : language;
     }
     initRequestStatus() {
         this.searchOrListing = 'product-listing' === this.type ? (0, commerce_namespaceObject.buildProductListing)(this.engine) : (0, commerce_namespaceObject.buildSearch)(this.engine);
@@ -244,7 +252,7 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
     constructor(){
-        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new interface_controller_cjs_namespaceObject.InterfaceController(this, 'CoveoAtomic', commerce_namespaceObject.VERSION), this.type = 'search', this.analytics = true, this.reflectStateInUrl = true, this.disableStateReflectionInUrl = false, this.scrollContainer = 'atomic-commerce-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.handleInitialization = (event)=>{
+        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new interface_controller_cjs_namespaceObject.InterfaceController(this, 'CoveoAtomic', commerce_namespaceObject.VERSION), this.type = 'search', this.analytics = true, this.localizeWithCountry = false, this.reflectStateInUrl = true, this.disableStateReflectionInUrl = false, this.scrollContainer = 'atomic-commerce-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.handleInitialization = (event)=>{
             this.interfaceController.onComponentInitializing(event);
         }, this.onHashChange = ()=>{
             this.urlManager.synchronize(this.fragment);
@@ -314,6 +322,13 @@ _ts_decorate([
     }),
     _ts_metadata("design:type", String)
 ], AtomicCommerceInterface.prototype, "language", void 0);
+_ts_decorate([
+    (0, decorators_js_namespaceObject.property)({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceInterface.prototype, "localizeWithCountry", void 0);
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({
         type: Object,
@@ -369,6 +384,12 @@ _ts_decorate([
     _ts_metadata("design:paramtypes", []),
     _ts_metadata("design:returntype", void 0)
 ], AtomicCommerceInterface.prototype, "updateLanguage", null);
+_ts_decorate([
+    (0, watch_cjs_namespaceObject.watch)('localizeWithCountry'),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicCommerceInterface.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate([
     (0, watch_cjs_namespaceObject.watch)('iconAssetsPath'),
     _ts_metadata("design:type", Function),

package/dist/cjs/components/commerce/atomic-commerce-pager/atomic-commerce-pager.cjs

@@ -48,6 +48,7 @@ const when_js_namespaceObject = require("lit/directives/when.js");
 const store_cjs_namespaceObject = require("../../common/interface/store.cjs");
 const pager_buttons_cjs_namespaceObject = require("../../common/pager/pager-buttons.cjs");
 const pager_navigation_cjs_namespaceObject = require("../../common/pager/pager-navigation.cjs");
+const pager_fit_controller_cjs_namespaceObject = require("../../common/pager/pager-fit-controller.cjs");
 const pager_utils_cjs_namespaceObject = require("../../common/pager/pager-utils.cjs");
 const validate_props_controller_cjs_namespaceObject = require("../../common/validate-props-controller/validate-props-controller.cjs");
 const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
@@ -81,7 +82,7 @@ class AtomicCommercePager extends external_lit_namespaceObject.LitElement {
         });
     }
     render() {
-        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
+        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.page, this.pagerFit.getNumberOfPagesToDisplay(this.numberOfPages), this.pagerState.totalPages - 1);
         return (0, external_lit_namespaceObject.html)`
       ${(0, when_js_namespaceObject.when)(this.pagerState.totalPages > 1 && this.isAppLoaded, ()=>(0, external_lit_namespaceObject.html)`
           ${(0, pager_navigation_cjs_namespaceObject.renderPagerNavigation)({
@@ -152,7 +153,7 @@ class AtomicCommercePager extends external_lit_namespaceObject.LitElement {
         });
     }
     constructor(){
-        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded_cjs_default(), this.nextButtonIcon = arrow_right_rounded_cjs_default(), this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'atomic-pager');
+        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded_cjs_default(), this.nextButtonIcon = arrow_right_rounded_cjs_default(), this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'atomic-pager'), this.pagerFit = new pager_fit_controller_cjs_namespaceObject.PagerFitController(this);
         new validate_props_controller_cjs_namespaceObject.ValidatePropsController(this, ()=>({
                 numberOfPages: this.numberOfPages
             }), AtomicCommercePager.propsSchema);

package/dist/cjs/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.cjs

@@ -80,7 +80,7 @@ class AtomicCommerceProductsPerPage extends external_lit_namespaceObject.LitElem
     render() {
         return (0, external_lit_namespaceObject.html)`
       ${(0, when_js_namespaceObject.when)(!this.summaryState.hasError && this.summaryState.hasProducts && this.isAppLoaded, ()=>(0, external_lit_namespaceObject.html)`
-          <div class="flex items-center">
+          <div class="flex flex-wrap items-center">
             ${(0, label_cjs_namespaceObject.renderLabel)()((0, external_lit_namespaceObject.html)`${this.label}`)}
             ${(0, fieldset_group_cjs_namespaceObject.renderFieldsetGroup)({
                 props: {

package/dist/cjs/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.cjs

@@ -52,6 +52,7 @@ const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/wi
 const children_update_complete_mixin_cjs_namespaceObject = require("../../../mixins/children-update-complete-mixin.cjs");
 const init_queue_cjs_namespaceObject = require("../../../utils/init-queue.cjs");
 const initialization_common_utils_cjs_namespaceObject = require("../../../utils/initialization-common-utils.cjs");
+const locale_utils_cjs_namespaceObject = require("../../../utils/locale-utils.cjs");
 const bindings_context_cjs_namespaceObject = require("../../common/context/bindings-context.cjs");
 const analytics_config_cjs_namespaceObject = require("../../common/interface/analytics-config.cjs");
 const interface_controller_cjs_namespaceObject = require("../../common/interface/interface-controller.cjs");
@@ -82,7 +83,7 @@ class AtomicCommerceRecommendationInterface extends (0, children_update_complete
     }
     updateLocale(language, country, currency) {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.context) return;
-        language && this.interfaceController.onLanguageChange(language);
+        if (language || country && this.localizeWithCountry) this.interfaceController.onLanguageChange(this.getLocale(language || this.context.state.language, country || this.context.state.country));
         if (this.isNewLocale(language, country, currency)) {
             const { setContext } = (0, commerce_namespaceObject.loadContextActions)(this.engine);
             this.engine.dispatch(setContext({
@@ -105,11 +106,15 @@ class AtomicCommerceRecommendationInterface extends (0, children_update_complete
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
+    toggleLocalizeWithCountry() {
+        if (!this.context) return;
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
     async updateLanguage() {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.language || !this.context) return;
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.interfaceController.onLanguageChange(this.getLocale(this.language, this.context.state.country));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -150,14 +155,17 @@ class AtomicCommerceRecommendationInterface extends (0, children_update_complete
     }
     initLanguage() {
         if (!this.context || this.language) return;
-        this.interfaceController.onLanguageChange(this.context.state.language);
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
+    getLocale(language, country) {
+        return this.localizeWithCountry ? (0, locale_utils_cjs_namespaceObject.withCountry)(language, country) : language;
     }
     isNewLocale(language, country, currency) {
         if (!this.context) return false;
         return language && language !== this.context.state.language || country && country !== this.context.state.country || currency && currency !== this.context.state.currency;
     }
     constructor(){
-        super(), this.bindings = {}, this.interfaceController = new interface_controller_cjs_namespaceObject.InterfaceController(this, 'CoveoAtomic', commerce_namespaceObject.VERSION), this.scrollContainer = 'atomic-commerce-recommendation-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.analytics = true, this.handleInitialization = (event)=>{
+        super(), this.bindings = {}, this.interfaceController = new interface_controller_cjs_namespaceObject.InterfaceController(this, 'CoveoAtomic', commerce_namespaceObject.VERSION), this.scrollContainer = 'atomic-commerce-recommendation-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.localizeWithCountry = false, this.analytics = true, this.handleInitialization = (event)=>{
             this.interfaceController.onComponentInitializing(event);
         };
         this.store = (0, external_store_cjs_namespaceObject.createCommerceRecommendationStore)();
@@ -234,6 +242,13 @@ _ts_decorate([
     }),
     _ts_metadata("design:type", String)
 ], AtomicCommerceRecommendationInterface.prototype, "language", void 0);
+_ts_decorate([
+    (0, decorators_js_namespaceObject.property)({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceRecommendationInterface.prototype, "localizeWithCountry", void 0);
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({
         type: Boolean,
@@ -254,6 +269,12 @@ _ts_decorate([
     _ts_metadata("design:paramtypes", []),
     _ts_metadata("design:returntype", void 0)
 ], AtomicCommerceRecommendationInterface.prototype, "updateIconAssetsPath", null);
+_ts_decorate([
+    (0, watch_cjs_namespaceObject.watch)('localizeWithCountry'),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicCommerceRecommendationInterface.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate([
     (0, watch_cjs_namespaceObject.watch)('language'),
     _ts_metadata("design:type", Function),

package/dist/cjs/components/common/interface/i18n.cjs

@@ -76,9 +76,13 @@ function i18nBackendOptions(atomicInterface) {
         }
     };
 }
-function loadTranslations(atomicInterface, language) {
+async function loadTranslations(atomicInterface, language) {
+    const { languageUtils } = atomicInterface.i18n.services;
+    const languages = languageUtils.toResolveHierarchy(languageUtils.formatLanguageCode(language), false);
+    await Promise.all(languages.filter(isI18nLocaleAvailable).map((lng)=>loadTranslationBundle(atomicInterface, lng)));
+}
+function loadTranslationBundle(atomicInterface, lng) {
     const { i18n } = atomicInterface;
-    const lng = language.split('-')[0];
     return new Promise((resolve)=>{
         new (external_i18next_http_backend_default())(i18n.services, i18nBackendOptions(atomicInterface)).read(lng, i18nTranslationNamespace, (_error, data)=>{
             if (data) i18n.addResourceBundle(lng, i18nTranslationNamespace, data, true, false);

package/dist/cjs/components/common/interface/interface-controller.cjs

@@ -53,8 +53,10 @@ class InterfaceController {
         this.host.updateIconAssetsPath();
         initEngine();
         if (this.host.registerFieldsToInclude) this.host.registerFieldsToInclude();
-        (0, dayjs_locales_cjs_namespaceObject.loadDayjsLocale)(this.host.language || 'en');
-        await this.i18nPromise;
+        await Promise.all([
+            this.i18nPromise,
+            (0, dayjs_locales_cjs_namespaceObject.loadDayjsLocale)(this.host.language || 'en')
+        ]);
         this.initComponents();
     }
     onAnalyticsChange() {
@@ -67,8 +69,10 @@ class InterfaceController {
         const language = newLanguage ?? this.host.language;
         const languageWithFallback = language ?? 'en';
         const { i18n } = this.host;
-        (0, dayjs_locales_cjs_namespaceObject.loadDayjsLocale)(languageWithFallback);
-        (0, external_i18n_cjs_namespaceObject.loadTranslations)(this.host, languageWithFallback).then(()=>{
+        Promise.all([
+            (0, dayjs_locales_cjs_namespaceObject.loadDayjsLocale)(languageWithFallback),
+            (0, external_i18n_cjs_namespaceObject.loadTranslations)(this.host, languageWithFallback)
+        ]).then(()=>{
             i18n.changeLanguage(language);
         });
     }

package/dist/cjs/components/common/pager/pager-fit-controller.cjs

@@ -0,0 +1,72 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+class PagerFitController {
+    hostConnected() {
+        this.resizeObserver = new ResizeObserver(()=>requestAnimationFrame(()=>this.reset()));
+        this.resizeObserver.observe(document.documentElement);
+        if (this.host.parentElement) this.resizeObserver.observe(this.host.parentElement);
+    }
+    hostDisconnected() {
+        this.resizeObserver?.disconnect();
+    }
+    hostUpdated() {
+        const root = this.host.shadowRoot;
+        const previousButton = root?.querySelector('[part="previous-button"]');
+        const nextButton = root?.querySelector('[part="next-button"]');
+        const pageButtonCount = root?.querySelectorAll('[part~="page-button"]').length ?? 0;
+        const isWrapping = !!previousButton && !!nextButton && nextButton.offsetTop > previousButton.offsetTop;
+        if (isWrapping && pageButtonCount > 1) {
+            this.maxPages = pageButtonCount - 1;
+            queueMicrotask(()=>this.host.requestUpdate());
+        }
+    }
+    getNumberOfPagesToDisplay(numberOfPages) {
+        return Math.min(numberOfPages, this.maxPages);
+    }
+    reset() {
+        this.maxPages = 1 / 0;
+        this.host.requestUpdate();
+    }
+    constructor(host){
+        this.host = host;
+        this.maxPages = 1 / 0;
+        host.addController(this);
+    }
+}
+__webpack_require__.d(__webpack_exports__, {
+    PagerFitController: ()=>PagerFitController
+});
+exports.PagerFitController = __webpack_exports__.PagerFitController;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PagerFitController"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/insight/atomic-insight-pager/atomic-insight-pager.cjs

@@ -47,6 +47,7 @@ const keyed_js_namespaceObject = require("lit/directives/keyed.js");
 const when_js_namespaceObject = require("lit/directives/when.js");
 const pager_buttons_cjs_namespaceObject = require("../../common/pager/pager-buttons.cjs");
 const pager_navigation_cjs_namespaceObject = require("../../common/pager/pager-navigation.cjs");
+const pager_fit_controller_cjs_namespaceObject = require("../../common/pager/pager-fit-controller.cjs");
 const pager_utils_cjs_namespaceObject = require("../../common/pager/pager-utils.cjs");
 const validate_props_controller_cjs_namespaceObject = require("../../common/validate-props-controller/validate-props-controller.cjs");
 const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
@@ -80,7 +81,7 @@ class AtomicInsightPager extends external_lit_namespaceObject.LitElement {
         });
     }
     render() {
-        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.currentPage - 1, this.numberOfPages, this.pagerState.maxPage);
+        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.currentPage - 1, this.pagerFit.getNumberOfPagesToDisplay(this.numberOfPages), this.pagerState.maxPage);
         return (0, external_lit_namespaceObject.html)`${(0, when_js_namespaceObject.when)(this.pagerState.maxPage > 1, ()=>(0, external_lit_namespaceObject.html)`
         ${(0, pager_navigation_cjs_namespaceObject.renderPagerNavigation)({
                 props: {
@@ -149,7 +150,7 @@ class AtomicInsightPager extends external_lit_namespaceObject.LitElement {
         });
     }
     constructor(){
-        super(), this.numberOfPages = 5, this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'atomic-insight-pager');
+        super(), this.numberOfPages = 5, this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'atomic-insight-pager'), this.pagerFit = new pager_fit_controller_cjs_namespaceObject.PagerFitController(this);
         new validate_props_controller_cjs_namespaceObject.ValidatePropsController(this, ()=>({
                 numberOfPages: this.numberOfPages
             }), AtomicInsightPager.propsSchema);