@justeattakeaway/pie-cookie-banner 0.26.11 → 1.0.0

package/custom-elements.json

@@ -12,6 +12,22 @@
       "kind": "javascript-module",
       "path": "src/defs.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "Language",
+          "type": {
+            "text": "{\n    BULGARIAN: 'bg',\n    CATALAN: 'ca',\n    DANISH: 'da',\n    DUTCH: 'nl',\n    ENGLISH: 'en',\n    FRENCH: 'fr',\n    GERMAN: 'de',\n    HEBREW: 'he',\n    ITALIAN: 'it',\n    POLISH: 'pl',\n    SLOVAK: 'sk',\n    SPANISH: 'es',\n}"
+          },
+          "default": "{\n    BULGARIAN: 'bg',\n    CATALAN: 'ca',\n    DANISH: 'da',\n    DUTCH: 'nl',\n    ENGLISH: 'en',\n    FRENCH: 'fr',\n    GERMAN: 'de',\n    HEBREW: 'he',\n    ITALIAN: 'it',\n    POLISH: 'pl',\n    SLOVAK: 'sk',\n    SPANISH: 'es',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Country",
+          "type": {
+            "text": "{\n    BULGARIA: 'bg',\n    DENMARK: 'dk',\n    FRANCE: 'fr',\n    GERMANY: 'de',\n    GREAT_BRITAIN: 'gb',\n    ISRAEL: 'il',\n    ITALY: 'it',\n    NETHERLANDS: 'nl',\n    POLAND: 'pl',\n    SLOVAKIA: 'sk',\n    SPAIN: 'es',\n}"
+          },
+          "default": "{\n    BULGARIA: 'bg',\n    DENMARK: 'dk',\n    FRANCE: 'fr',\n    GERMANY: 'de',\n    GREAT_BRITAIN: 'gb',\n    ISRAEL: 'il',\n    ITALY: 'it',\n    NETHERLANDS: 'nl',\n    POLAND: 'pl',\n    SLOVAKIA: 'sk',\n    SPAIN: 'es',\n}"
+        },
         {
           "kind": "variable",
           "name": "ON_COOKIE_BANNER_ACCEPT_ALL",
@@ -62,10 +78,31 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    hasPrimaryActionsOnly: false,\n    defaultPreferences: {},\n    locale: defaultLocale,\n    cookieStatementLink: '',\n    cookieTechnologiesLink: '',\n}"
+          "default": "{\n    hasPrimaryActionsOnly: false,\n    defaultPreferences: {},\n    country: Country.GREAT_BRITAIN,\n    language: Language.ENGLISH,\n    cookieStatementLink: '',\n    cookieTechnologiesLink: '',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultLanguage",
+          "default": "new Map<CountryCode, LanguageCode>([\n    [Country.GREAT_BRITAIN, Language.ENGLISH],\n    [Country.FRANCE, Language.FRENCH],\n    [Country.DENMARK, Language.DANISH],\n    [Country.SPAIN, Language.SPANISH],\n    [Country.ITALY, Language.ITALIAN],\n    [Country.NETHERLANDS, Language.DUTCH],\n    [Country.POLAND, Language.POLISH],\n    [Country.SLOVAKIA, Language.SLOVAK],\n    [Country.BULGARIA, Language.BULGARIAN],\n    [Country.GERMANY, Language.GERMAN],\n    [Country.ISRAEL, Language.HEBREW],\n])"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "Language",
+          "declaration": {
+            "name": "Language",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Country",
+          "declaration": {
+            "name": "Country",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ON_COOKIE_BANNER_ACCEPT_ALL",
@@ -113,6 +150,14 @@
             "name": "defaultProps",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultLanguage",
+          "declaration": {
+            "name": "defaultLanguage",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -143,6 +188,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_locale",
+              "type": {
+                "text": "CookieBannerLocale"
+              },
+              "privacy": "private",
+              "default": "defaultLocale"
+            },
             {
               "kind": "field",
               "name": "hasPrimaryActionsOnly",
@@ -155,15 +209,6 @@
               "privacy": "public",
               "attribute": "defaultPreferences"
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "CookieBannerLocale"
-              },
-              "privacy": "public",
-              "attribute": "locale"
-            },
             {
               "kind": "field",
               "name": "cookieStatementLink",
@@ -176,6 +221,18 @@
               "privacy": "public",
               "attribute": "cookieTechnologiesLink"
             },
+            {
+              "kind": "field",
+              "name": "country",
+              "privacy": "public",
+              "attribute": "country"
+            },
+            {
+              "kind": "field",
+              "name": "language",
+              "privacy": "public",
+              "attribute": "language"
+            },
             {
               "kind": "field",
               "name": "_preferencesNodes",
@@ -183,6 +240,34 @@
                 "text": "NodeListOf<PieSwitch>"
               }
             },
+            {
+              "kind": "method",
+              "name": "_setLocaleBasedOnCountryAndLanguage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "country",
+                  "type": {
+                    "text": "CountryCode"
+                  }
+                },
+                {
+                  "name": "language",
+                  "type": {
+                    "text": "LanguageCode"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "default": "false"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_customTagEnhancers",
@@ -324,13 +409,6 @@
               "name": "defaultPreferences",
               "fieldName": "defaultPreferences"
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "CookieBannerLocale"
-              },
-              "fieldName": "locale"
-            },
             {
               "name": "cookieStatementLink",
               "fieldName": "cookieStatementLink"
@@ -338,6 +416,14 @@
             {
               "name": "cookieTechnologiesLink",
               "fieldName": "cookieTechnologiesLink"
+            },
+            {
+              "name": "country",
+              "fieldName": "country"
+            },
+            {
+              "name": "language",
+              "fieldName": "language"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
+import type { PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit-html';
 import { TemplateResult as TemplateResult_2 } from 'lit';
 
@@ -51,10 +52,6 @@ export declare interface CookieBannerProps {
      * When true, sets the variant to "primary" for the button which accepts necessary cookies only.
      */
     hasPrimaryActionsOnly: boolean;
-    /**
-     * Assigns the data for localising the component strings
-     */
-    locale: CookieBannerLocale;
     /**
      * The URL of the cookie statement page the banner should link to.
      */
@@ -63,6 +60,14 @@ export declare interface CookieBannerProps {
      * The URL for the cookie technology link.
      */
     cookieTechnologiesLink: string;
+    /**
+     * Assigns the country used for dynamically localising the component strings
+     */
+    country: CountryCode;
+    /**
+     * Assigns the language used for dynamically localising the component strings
+     */
+    language: LanguageCode;
     /**
      * Allows consumers to pass in specific preference(s) to the component which will toggle
      * the switch to be on by default (if set to `true`).
@@ -73,14 +78,49 @@ export declare interface CookieBannerProps {
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
 }
 
+export declare const Country: {
+    readonly BULGARIA: "bg";
+    readonly DENMARK: "dk";
+    readonly FRANCE: "fr";
+    readonly GERMANY: "de";
+    readonly GREAT_BRITAIN: "gb";
+    readonly ISRAEL: "il";
+    readonly ITALY: "it";
+    readonly NETHERLANDS: "nl";
+    readonly POLAND: "pl";
+    readonly SLOVAKIA: "sk";
+    readonly SPAIN: "es";
+};
+
+export declare type CountryCode = typeof Country[keyof typeof Country];
+
 export declare interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult_2;
 }
 
+export declare const defaultLanguage: Map<CountryCode, LanguageCode>;
+
 export declare type DefaultProps = ComponentDefaultProps<CookieBannerProps>;
 
 export declare const defaultProps: DefaultProps;
 
+export declare const Language: {
+    readonly BULGARIAN: "bg";
+    readonly CATALAN: "ca";
+    readonly DANISH: "da";
+    readonly DUTCH: "nl";
+    readonly ENGLISH: "en";
+    readonly FRENCH: "fr";
+    readonly GERMAN: "de";
+    readonly HEBREW: "he";
+    readonly ITALIAN: "it";
+    readonly POLISH: "pl";
+    readonly SLOVAK: "sk";
+    readonly SPANISH: "es";
+};
+
+export declare type LanguageCode = typeof Language[keyof typeof Language];
+
 /**
  * Event name for when all cookies are accepted.
  *
@@ -119,12 +159,16 @@ export declare const ON_COOKIE_BANNER_PREFS_SAVED = "pie-cookie-banner-prefs-sav
 export declare class PieCookieBanner extends LitElement implements CookieBannerProps {
     private _isCookieBannerHidden;
     private _isModalOpen;
+    private _locale;
     hasPrimaryActionsOnly: boolean;
     defaultPreferences: Partial<Record<PreferenceIds, boolean>>;
-    locale: CookieBannerLocale;
     cookieStatementLink: string;
     cookieTechnologiesLink: string;
+    country: CountryCode;
+    language: LanguageCode;
     _preferencesNodes: NodeListOf<PieSwitch>;
+    updated(changedProperties: PropertyValues<this>): Promise<void>;
+    private _setLocaleBasedOnCountryAndLanguage;
     private _customTagEnhancers;
     private _localiseText;
     private _localiseRichText;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { LitElement as $, html as s, nothing as m, unsafeCSS as A } from "lit";
-import { state as y, property as f, queryAll as T } from "lit/decorators.js";
+import { LitElement as L, html as d, nothing as A, unsafeCSS as T } from "lit";
+import { state as b, property as u, queryAll as E } from "lit/decorators.js";
 import { repeat as C } from "lit/directives/repeat.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-divider";
@@ -7,47 +7,33 @@ import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-link";
 import "@justeattakeaway/pie-modal";
 import "@justeattakeaway/pie-switch";
-import { dispatchCustomEvent as g, defineCustomElement as O } from "@justeattakeaway/pie-webc-core";
-const S = "*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-l-family);--cb-font-size: calc(var(--dt-font-body-l-size) * 1px);--cb-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--cb-font-weight: var(--dt-font-body-l-weight);--cb-padding-inline: var(--dt-spacing-d);--cb-padding-block: var(--dt-spacing-d);--cb-offset: 0;color-scheme:only dark;background-color:var(--dt-color-background-dark);color:var(--dt-color-content-inverse);font-family:var(--cb-font-family);font-size:var(--cb-font-size);line-height:var(--cb-line-height);font-weight:var(--cb-font-weight);padding-block-start:var(--cb-padding-block);padding-block-end:var(--cb-padding-block);max-height:432px;position:fixed;bottom:var(--cb-offset);left:var(--cb-offset);right:var(--cb-offset);border-top-left-radius:var(--dt-radius-rounded-c);border-top-right-radius:var(--dt-radius-rounded-c);z-index:var(--dt-z-index-cookie-banner)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner{--cb-padding-inline: var(--dt-spacing-f);--cb-offset: var(--dt-spacing-d);max-height:90%;border-bottom-left-radius:var(--dt-radius-rounded-c);border-bottom-right-radius:var(--dt-radius-rounded-c)}}.c-cookieBanner[isCookieBannerHidden]{display:none}@media (prefers-reduced-motion: no-preference){.c-cookieBanner{animation:.5s animate-enter ease-out}@keyframes animate-enter{0%{transform:translate3d(0,75%,0)}to{transform:translateZ(0)}}}.c-cookieBanner-title,.c-cookieBanner-body,.c-cookieBanner-actions{padding-inline-start:var(--cb-padding-inline);padding-inline-end:var(--cb-padding-inline)}.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--narrow);--cb-title-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-title-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-title-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--wide);--cb-title-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-body{--cb-scroll-shadow-color: var(--dt-color-black);margin-block-start:var(--dt-spacing-a);max-height:200px;overflow-y:auto;background:linear-gradient(to bottom,transparent,var(--dt-color-background-dark) 75%) center bottom,linear-gradient(transparent,var(--cb-scroll-shadow-color)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 8px;background-attachment:local,scroll}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-body{max-height:150px}}.c-cookieBanner-actions{--cb-actions-flex-dir: column;margin-block-start:var(--dt-spacing-d);display:flex;gap:var(--dt-spacing-d);flex-direction:var(--cb-actions-flex-dir)}.c-cookieBanner-actions>pie-link{text-align:center;align-self:center}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-actions{--cb-actions-flex-dir: row-reverse;justify-content:flex-start;align-items:center}}.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--narrow);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-subheading-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-subheading-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--wide);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-description{font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px)}.c-cookieBanner-preference{display:flex;gap:var(--dt-spacing-d);justify-content:space-between;margin-block-start:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}", M = {
-  title: "Cookies",
-  description: "We use our own and third party cookies and other tech to enhance and personalise your user experience, optimize analytics, and show ads with third parties (read our <linkStatement>Statement</linkStatement>). Necessary cookies are always set. Click <linkNecessaryOnly>Necessary only</linkNecessaryOnly> to continue without accepting more. Click <linkManagePreferences>Manage preferences</linkManagePreferences> to share your preferences or <linkAcceptAll>Accept all</linkAcceptAll>.",
-  cta: {
-    managePreferences: "Manage preferences",
-    necessaryOnly: "Necessary only",
-    acceptAll: "Accept all"
-  }
-}, N = {
-  title: "Manage your preferences",
-  description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
-  all: {
-    title: "Turn all on"
-  },
-  necessary: {
-    title: "Necessary",
-    description: "These cookies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these cookies."
-  },
-  functional: {
-    title: "Functional",
-    description: "These cookies allow the website to remember the choices you make to give you better functionality and personal features."
-  },
-  analytical: {
-    title: "Analytical",
-    description: "These analytical cookies, including statistics, are used to understand how visitors interact with the website and we can measure and improve the performance of our website."
-  },
-  personalized: {
-    title: "Personalised (targeting and advertising)",
-    description: "These marketing cookies are used to tailor the delivery of information to you based upon your interest and to measure the effectiveness of such advertisements, both on our website and our advertising partners' websites."
-  },
-  cta: {
-    save: {
-      label: "Save",
-      ariaLabel: ""
-    }
-  }
-}, P = {
-  banner: M,
-  preferencesManagement: N
-}, z = "pie-cookie-banner-accept-all", E = "pie-cookie-banner-necessary-only", L = "pie-cookie-banner-manage-prefs", R = "pie-cookie-banner-prefs-saved", H = [
+import { dispatchCustomEvent as k, defineCustomElement as O } from "@justeattakeaway/pie-webc-core";
+const $ = "*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-l-family);--cb-font-size: calc(var(--dt-font-body-l-size) * 1px);--cb-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--cb-font-weight: var(--dt-font-body-l-weight);--cb-padding-inline: var(--dt-spacing-d);--cb-padding-block: var(--dt-spacing-d);--cb-offset: 0;color-scheme:only dark;background-color:var(--dt-color-background-dark);color:var(--dt-color-content-inverse);font-family:var(--cb-font-family);font-size:var(--cb-font-size);line-height:var(--cb-line-height);font-weight:var(--cb-font-weight);padding-block-start:var(--cb-padding-block);padding-block-end:var(--cb-padding-block);max-height:432px;position:fixed;bottom:var(--cb-offset);left:var(--cb-offset);right:var(--cb-offset);border-top-left-radius:var(--dt-radius-rounded-c);border-top-right-radius:var(--dt-radius-rounded-c);z-index:var(--dt-z-index-cookie-banner)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner{--cb-padding-inline: var(--dt-spacing-f);--cb-offset: var(--dt-spacing-d);max-height:90%;border-bottom-left-radius:var(--dt-radius-rounded-c);border-bottom-right-radius:var(--dt-radius-rounded-c)}}.c-cookieBanner[isCookieBannerHidden]{display:none}@media (prefers-reduced-motion: no-preference){.c-cookieBanner{animation:.5s animate-enter ease-out}@keyframes animate-enter{0%{transform:translate3d(0,75%,0)}to{transform:translateZ(0)}}}.c-cookieBanner-title,.c-cookieBanner-body,.c-cookieBanner-actions{padding-inline-start:var(--cb-padding-inline);padding-inline-end:var(--cb-padding-inline)}.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--narrow);--cb-title-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-title-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-title-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--wide);--cb-title-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-body{--cb-scroll-shadow-color: var(--dt-color-black);margin-block-start:var(--dt-spacing-a);max-height:200px;overflow-y:auto;background:linear-gradient(to bottom,transparent,var(--dt-color-background-dark) 75%) center bottom,linear-gradient(transparent,var(--cb-scroll-shadow-color)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 8px;background-attachment:local,scroll}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-body{max-height:150px}}.c-cookieBanner-actions{--cb-actions-flex-dir: column;margin-block-start:var(--dt-spacing-d);display:flex;gap:var(--dt-spacing-d);flex-direction:var(--cb-actions-flex-dir)}.c-cookieBanner-actions>pie-link{text-align:center;align-self:center}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-actions{--cb-actions-flex-dir: row-reverse;justify-content:flex-start;align-items:center}}.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--narrow);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-subheading-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-subheading-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--wide);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-description{font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px)}.c-cookieBanner-preference{display:flex;gap:var(--dt-spacing-d);justify-content:space-between;margin-block-start:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}", c = {
+  BULGARIAN: "bg",
+  CATALAN: "ca",
+  DANISH: "da",
+  DUTCH: "nl",
+  ENGLISH: "en",
+  FRENCH: "fr",
+  GERMAN: "de",
+  HEBREW: "he",
+  ITALIAN: "it",
+  POLISH: "pl",
+  SLOVAK: "sk",
+  SPANISH: "es"
+}, l = {
+  BULGARIA: "bg",
+  DENMARK: "dk",
+  FRANCE: "fr",
+  GERMANY: "de",
+  GREAT_BRITAIN: "gb",
+  ISRAEL: "il",
+  ITALY: "it",
+  NETHERLANDS: "nl",
+  POLAND: "pl",
+  SLOVAKIA: "sk",
+  SPAIN: "es"
+}, R = "pie-cookie-banner-accept-all", M = "pie-cookie-banner-necessary-only", P = "pie-cookie-banner-manage-prefs", I = "pie-cookie-banner-prefs-saved", z = [
   {
     id: "all",
     hasDivider: !0,
@@ -71,89 +57,158 @@ const S = "*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb
     id: "personalized",
     hasDescription: !0
   }
-], h = {
+], g = {
   hasPrimaryActionsOnly: !1,
   defaultPreferences: {},
-  locale: P,
+  country: l.GREAT_BRITAIN,
+  language: c.ENGLISH,
   cookieStatementLink: "",
   cookieTechnologiesLink: ""
-};
-function v(i) {
-  console.error(`[localisation-utils]: ${i}`);
+}, H = /* @__PURE__ */ new Map([
+  [l.GREAT_BRITAIN, c.ENGLISH],
+  [l.FRANCE, c.FRENCH],
+  [l.DENMARK, c.DANISH],
+  [l.SPAIN, c.SPANISH],
+  [l.ITALY, c.ITALIAN],
+  [l.NETHERLANDS, c.DUTCH],
+  [l.POLAND, c.POLISH],
+  [l.SLOVAKIA, c.SLOVAK],
+  [l.BULGARIA, c.BULGARIAN],
+  [l.GERMANY, c.GERMAN],
+  [l.ISRAEL, c.HEBREW]
+]);
+function w(a) {
+  console.error(`[localisation-utils]: ${a}`);
 }
-function j(i, e) {
-  const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((a, r) => a != null && typeof a == "object" ? a[r] : a, i), o = n(/[,[\]]+?/) || n(/[,[\].]+?/);
-  return typeof o != "string" ? "" : o;
+function D(a, e) {
+  const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((o, s) => o != null && typeof o == "object" ? o[s] : o, a), i = n(/[,[\]]+?/) || n(/[,[\].]+?/);
+  return typeof i != "string" ? "" : i;
 }
-function _(i, e) {
-  if (!i) throw new Error('"locale" parameter cannot be empty');
+function N(a, e) {
+  if (!a) throw new Error('"locale" parameter cannot be empty');
   if (!e) throw new Error('"key" parameter cannot be empty');
-  const n = j(i, e);
-  return n || (v(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
+  const n = D(a, e);
+  return n || (w(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
 }
-function K(i) {
-  const n = i.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
+function G(a) {
+  const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
   return new RegExp(n, "igm");
 }
-function D(i, e) {
+function K(a, e) {
   const n = Object.keys(e);
-  if (n.length === 0) return [i];
-  const o = K(n);
-  return i.split(o).filter((t) => !!t).map((t) => {
-    if (!t.match(o)) return t;
-    const r = t.match(/<(.*)>(.*)<\/.*>/);
-    if (!r) return t;
-    const [, p, l] = r;
-    return [p, l];
+  if (n.length === 0) return [a];
+  const i = G(n);
+  return a.split(i).filter((t) => !!t).map((t) => {
+    if (!t.match(i)) return t;
+    const s = t.match(/<(.*)>(.*)<\/.*>/);
+    if (!s) return t;
+    const [, f, p] = s;
+    return [f, p];
   }).map((t) => {
     if (!Array.isArray(t)) return t;
-    const [r, p] = t, l = e[r];
-    return l || typeof l == "function" ? l(p) : (v(`Custom tag "${r}" does not have a matching enhancer function`), p);
+    const [s, f] = t, p = e[s];
+    return p || typeof p == "function" ? p(f) : (w(`Custom tag "${s}" does not have a matching enhancer function`), f);
   });
 }
-function F(i, e, n) {
-  if (!i) throw new Error('"locale" parameter cannot be empty');
+function F(a, e, n) {
+  if (!a) throw new Error('"locale" parameter cannot be empty');
   if (!e) throw new Error('"key" parameter cannot be empty');
   if (!n) throw new Error('"customTagEnhancers" parameter cannot be empty');
-  const o = _(i, e);
-  return D(o, n);
+  const i = N(a, e);
+  return K(i, n);
 }
-var V = Object.defineProperty, d = (i, e, n, o) => {
-  for (var t = void 0, a = i.length - 1, r; a >= 0; a--)
-    (r = i[a]) && (t = r(e, n, t) || t);
-  return t && V(e, n, t), t;
+const j = {
+  title: "Cookies",
+  description: "We use our own and third party cookies and other tech to enhance and personalise your user experience, optimize analytics, and show ads with third parties (read our <linkStatement>Statement</linkStatement>). Necessary cookies are always set. Click <linkNecessaryOnly>Necessary only</linkNecessaryOnly> to continue without accepting more. Click <linkManagePreferences>Manage preferences</linkManagePreferences> to share your preferences or <linkAcceptAll>Accept all</linkAcceptAll>.",
+  cta: {
+    managePreferences: "Manage preferences",
+    necessaryOnly: "Necessary only",
+    acceptAll: "Accept all"
+  }
+}, V = {
+  title: "Manage your preferences",
+  description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
+  all: {
+    title: "Turn all on"
+  },
+  necessary: {
+    title: "Necessary",
+    description: "These cookies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these cookies."
+  },
+  functional: {
+    title: "Functional",
+    description: "These cookies allow the website to remember the choices you make to give you better functionality and personal features."
+  },
+  analytical: {
+    title: "Analytical",
+    description: "These analytical cookies, including statistics, are used to understand how visitors interact with the website and we can measure and improve the performance of our website."
+  },
+  personalized: {
+    title: "Personalised (targeting and advertising)",
+    description: "These marketing cookies are used to tailor the delivery of information to you based upon your interest and to measure the effectiveness of such advertisements, both on our website and our advertising partners' websites."
+  },
+  cta: {
+    save: {
+      label: "Save",
+      ariaLabel: ""
+    }
+  }
+}, _ = {
+  banner: j,
+  preferencesManagement: V
 };
-const I = "pie-cookie-banner", k = class k extends $ {
+var Y = Object.defineProperty, h = (a, e, n, i) => {
+  for (var t = void 0, o = a.length - 1, s; o >= 0; o--)
+    (s = a[o]) && (t = s(e, n, t) || t);
+  return t && Y(e, n, t), t;
+};
+const U = "pie-cookie-banner", m = class m extends L {
   constructor() {
-    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = h.hasPrimaryActionsOnly, this.defaultPreferences = h.defaultPreferences, this.locale = h.locale, this.cookieStatementLink = h.cookieStatementLink, this.cookieTechnologiesLink = h.cookieTechnologiesLink, this._customTagEnhancers = {
-      linkStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
-      linkNecessaryOnly: (e) => s`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
-      linkManagePreferences: (e) => s`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
-      linkAcceptAll: (e) => s`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
-      linkCookieStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
-      linkCookieTechList: (e) => s`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${e}</pie-link>`
+    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this._locale = _, this.hasPrimaryActionsOnly = g.hasPrimaryActionsOnly, this.defaultPreferences = g.defaultPreferences, this.cookieStatementLink = g.cookieStatementLink, this.cookieTechnologiesLink = g.cookieTechnologiesLink, this.country = g.country, this.language = g.language, this._customTagEnhancers = {
+      linkStatement: (e) => d`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
+      linkNecessaryOnly: (e) => d`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
+      linkManagePreferences: (e) => d`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
+      linkAcceptAll: (e) => d`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
+      linkCookieStatement: (e) => d`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
+      linkCookieTechList: (e) => d`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${e}</pie-link>`
     }, this._onNecessaryOnly = () => {
-      g(this, E), this._isCookieBannerHidden = !0;
+      k(this, M), this._isCookieBannerHidden = !0;
     }, this._onAcceptAll = () => {
-      g(this, z), this._isCookieBannerHidden = !0;
+      k(this, R), this._isCookieBannerHidden = !0;
     }, this._openManagePreferencesModal = () => {
-      this._isCookieBannerHidden = !0, g(this, L), this._isModalOpen = !0;
+      this._isCookieBannerHidden = !0, k(this, P), this._isModalOpen = !0;
     }, this._handleSwitchStates = (e) => {
-      const { id: n } = e == null ? void 0 : e.currentTarget, o = [...this._preferencesNodes].find(({ id: t }) => t === "all");
-      if (n === o.id) {
+      const { id: n } = e == null ? void 0 : e.currentTarget, i = [...this._preferencesNodes].find(({ id: t }) => t === "all");
+      if (n === i.id) {
         const { checked: t } = e.target;
-        this._preferencesNodes.forEach((a) => {
-          a.checked = a.disabled ? a.checked : t;
+        this._preferencesNodes.forEach((o) => {
+          o.checked = o.disabled ? o.checked : t;
         });
       } else
-        o.checked = [...this._preferencesNodes].filter(({ id: t }) => t !== "all").every(({ checked: t }) => t);
+        i.checked = [...this._preferencesNodes].filter(({ id: t }) => t !== "all").every(({ checked: t }) => t);
     };
   }
+  async updated(e) {
+    (e.has("country") || e.has("language")) && await this._setLocaleBasedOnCountryAndLanguage(this.country, this.language);
+  }
+  // Dynamically import locale JSON based on country and language
+  async _setLocaleBasedOnCountryAndLanguage(e, n, i = !1) {
+    try {
+      this._locale = (await import(`../locales/${n.toLowerCase()}-${e.toLowerCase()}.json`)).default;
+    } catch {
+      if (i)
+        this._locale = _;
+      else {
+        const t = H.get(e) || g.language;
+        await this._setLocaleBasedOnCountryAndLanguage(e, t, !0);
+      }
+    }
+  }
   _localiseText(e) {
-    return _(this.locale, e);
+    return N(this._locale, e);
   }
   _localiseRichText(e) {
-    return F(this.locale, e, this._customTagEnhancers);
+    return F(this._locale, e, this._customTagEnhancers);
   }
   /**
    * Handles closing the modal and re-displaying the cookie banner
@@ -173,9 +228,9 @@ const I = "pie-cookie-banner", k = class k extends $ {
    */
   _handlePreferencesSaved() {
     let e = {};
-    [...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, checked: o }) => {
-      e = { ...e, [n]: o };
-    }), g(this, R, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
+    [...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, checked: i }) => {
+      e = { ...e, [n]: i };
+    }), k(this, I, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
   }
   /**
    * Renders the content of the preference item.
@@ -184,41 +239,41 @@ const I = "pie-cookie-banner", k = class k extends $ {
   renderPreference({
     id: e,
     checked: n,
-    disabled: o,
+    disabled: i,
     hasDivider: t,
-    hasDescription: a
+    hasDescription: o
   }) {
-    var u;
-    const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = a && this._localiseText(p), w = ["functional", "personalized", "analytical"].every((B) => {
-      var b;
-      return ((b = this.defaultPreferences) == null ? void 0 : b[B]) === !0;
+    var y;
+    const s = this._localiseText(`preferencesManagement.${e}.title`), f = `preferencesManagement.${e}.description`, p = o && this._localiseText(f), B = ["functional", "personalized", "analytical"].every((S) => {
+      var v;
+      return ((v = this.defaultPreferences) == null ? void 0 : v[S]) === !0;
     });
-    return s`
+    return d`
             <div class="c-cookieBanner-preference">
                 <div>
-                    <h3 class="c-cookieBanner-subheading">${r}</h3>
-                     ${l ? s`<p class="c-cookieBanner-description">${l}</p>` : m}
+                    <h3 class="c-cookieBanner-subheading">${s}</h3>
+                     ${p ? d`<p class="c-cookieBanner-description">${p}</p>` : A}
                  </div>
                 <pie-switch
                     id="${e}"
-                    ?checked="${((u = this.defaultPreferences) == null ? void 0 : u[e]) || w || n}"
-                    ?disabled="${o}"
+                    ?checked="${((y = this.defaultPreferences) == null ? void 0 : y[e]) || B || n}"
+                    ?disabled="${i}"
                     @change="${this._handleSwitchStates}">
                 </pie-switch>
             </div>
-            ${t ? s`<pie-divider></pie-divider>` : m}`;
+            ${t ? d`<pie-divider></pie-divider>` : A}`;
   }
   /**
    * Renders the modal content.
    * @private
    */
   renderModalContent() {
-    return s`
+    return d`
             <p class="c-cookieBanner-description" data-test-id="modal-description">
                 ${this._localiseRichText("preferencesManagement.description")}
             </p>
             ${C(
-      H,
+      z,
       ({ id: e }) => e,
       (e) => this.renderPreference(e)
     )}`;
@@ -228,7 +283,7 @@ const I = "pie-cookie-banner", k = class k extends $ {
       text: this._localiseText("preferencesManagement.cta.save.label"),
       ariaLabel: this._localiseText("preferencesManagement.cta.save.label")
     };
-    return s`
+    return d`
         <pie-modal
             .isOpen="${this._isModalOpen}"
             hasBackButton
@@ -275,39 +330,48 @@ const I = "pie-cookie-banner", k = class k extends $ {
         </aside>`;
   }
 };
-k.styles = A(S);
-let c = k;
-d([
-  y()
-], c.prototype, "_isCookieBannerHidden");
-d([
-  y()
-], c.prototype, "_isModalOpen");
-d([
-  f({ type: Boolean })
-], c.prototype, "hasPrimaryActionsOnly");
-d([
-  f({ type: Object })
-], c.prototype, "defaultPreferences");
-d([
-  f({ type: Object })
-], c.prototype, "locale");
-d([
-  f({ type: String })
-], c.prototype, "cookieStatementLink");
-d([
-  f({ type: String })
-], c.prototype, "cookieTechnologiesLink");
-d([
-  T("pie-switch")
-], c.prototype, "_preferencesNodes");
-O(I, c);
+m.styles = T($);
+let r = m;
+h([
+  b()
+], r.prototype, "_isCookieBannerHidden");
+h([
+  b()
+], r.prototype, "_isModalOpen");
+h([
+  b()
+], r.prototype, "_locale");
+h([
+  u({ type: Boolean })
+], r.prototype, "hasPrimaryActionsOnly");
+h([
+  u({ type: Object })
+], r.prototype, "defaultPreferences");
+h([
+  u({ type: String })
+], r.prototype, "cookieStatementLink");
+h([
+  u({ type: String })
+], r.prototype, "cookieTechnologiesLink");
+h([
+  u({ type: String })
+], r.prototype, "country");
+h([
+  u({ type: String })
+], r.prototype, "language");
+h([
+  E("pie-switch")
+], r.prototype, "_preferencesNodes");
+O(U, r);
 export {
-  z as ON_COOKIE_BANNER_ACCEPT_ALL,
-  L as ON_COOKIE_BANNER_MANAGE_PREFS,
-  E as ON_COOKIE_BANNER_NECESSARY_ONLY,
-  R as ON_COOKIE_BANNER_PREFS_SAVED,
-  c as PieCookieBanner,
-  h as defaultProps,
-  H as preferences
+  l as Country,
+  c as Language,
+  R as ON_COOKIE_BANNER_ACCEPT_ALL,
+  P as ON_COOKIE_BANNER_MANAGE_PREFS,
+  M as ON_COOKIE_BANNER_NECESSARY_ONLY,
+  I as ON_COOKIE_BANNER_PREFS_SAVED,
+  r as PieCookieBanner,
+  H as defaultLanguage,
+  g as defaultProps,
+  z as preferences
 };

package/dist/react.d.ts

@@ -2,6 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 import { TemplateResult as TemplateResult_2 } from 'lit';
@@ -52,10 +53,6 @@ export declare interface CookieBannerProps {
      * When true, sets the variant to "primary" for the button which accepts necessary cookies only.
      */
     hasPrimaryActionsOnly: boolean;
-    /**
-     * Assigns the data for localising the component strings
-     */
-    locale: CookieBannerLocale;
     /**
      * The URL of the cookie statement page the banner should link to.
      */
@@ -64,6 +61,14 @@ export declare interface CookieBannerProps {
      * The URL for the cookie technology link.
      */
     cookieTechnologiesLink: string;
+    /**
+     * Assigns the country used for dynamically localising the component strings
+     */
+    country: CountryCode;
+    /**
+     * Assigns the language used for dynamically localising the component strings
+     */
+    language: LanguageCode;
     /**
      * Allows consumers to pass in specific preference(s) to the component which will toggle
      * the switch to be on by default (if set to `true`).
@@ -74,14 +79,49 @@ export declare interface CookieBannerProps {
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
 }
 
+export declare const Country: {
+    readonly BULGARIA: "bg";
+    readonly DENMARK: "dk";
+    readonly FRANCE: "fr";
+    readonly GERMANY: "de";
+    readonly GREAT_BRITAIN: "gb";
+    readonly ISRAEL: "il";
+    readonly ITALY: "it";
+    readonly NETHERLANDS: "nl";
+    readonly POLAND: "pl";
+    readonly SLOVAKIA: "sk";
+    readonly SPAIN: "es";
+};
+
+export declare type CountryCode = typeof Country[keyof typeof Country];
+
 export declare interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult_2;
 }
 
+export declare const defaultLanguage: Map<CountryCode, LanguageCode>;
+
 export declare type DefaultProps = ComponentDefaultProps<CookieBannerProps>;
 
 export declare const defaultProps: DefaultProps;
 
+export declare const Language: {
+    readonly BULGARIAN: "bg";
+    readonly CATALAN: "ca";
+    readonly DANISH: "da";
+    readonly DUTCH: "nl";
+    readonly ENGLISH: "en";
+    readonly FRENCH: "fr";
+    readonly GERMAN: "de";
+    readonly HEBREW: "he";
+    readonly ITALIAN: "it";
+    readonly POLISH: "pl";
+    readonly SLOVAK: "sk";
+    readonly SPANISH: "es";
+};
+
+export declare type LanguageCode = typeof Language[keyof typeof Language];
+
 /**
  * Event name for when all cookies are accepted.
  *
@@ -122,12 +162,16 @@ export declare const PieCookieBanner: React_2.ForwardRefExoticComponent<CookieBa
 declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps {
     private _isCookieBannerHidden;
     private _isModalOpen;
+    private _locale;
     hasPrimaryActionsOnly: boolean;
     defaultPreferences: Partial<Record<PreferenceIds, boolean>>;
-    locale: CookieBannerLocale;
     cookieStatementLink: string;
     cookieTechnologiesLink: string;
+    country: CountryCode;
+    language: LanguageCode;
     _preferencesNodes: NodeListOf<PieSwitch>;
+    updated(changedProperties: PropertyValues<this>): Promise<void>;
+    private _setLocaleBasedOnCountryAndLanguage;
     private _customTagEnhancers;
     private _localiseText;
     private _localiseRichText;

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCookieBanner as n } from "./index.js";
-import { ON_COOKIE_BANNER_ACCEPT_ALL as t, ON_COOKIE_BANNER_MANAGE_PREFS as C, ON_COOKIE_BANNER_NECESSARY_ONLY as N, ON_COOKIE_BANNER_PREFS_SAVED as _, defaultProps as E, preferences as P } from "./index.js";
+import { Country as c, Language as p, ON_COOKIE_BANNER_ACCEPT_ALL as N, ON_COOKIE_BANNER_MANAGE_PREFS as _, ON_COOKIE_BANNER_NECESSARY_ONLY as E, ON_COOKIE_BANNER_PREFS_SAVED as P, defaultLanguage as k, defaultProps as O, preferences as B } from "./index.js";
 const a = o({
   displayName: "PieCookieBanner",
   elementClass: n,
@@ -17,13 +17,16 @@ const a = o({
     onPieCookieBannerPrefsSaved: "pie-cookie-banner-prefs-saved"
     // when a user clicks save preferences.
   }
-}), s = a;
+}), t = a;
 export {
-  t as ON_COOKIE_BANNER_ACCEPT_ALL,
-  C as ON_COOKIE_BANNER_MANAGE_PREFS,
-  N as ON_COOKIE_BANNER_NECESSARY_ONLY,
-  _ as ON_COOKIE_BANNER_PREFS_SAVED,
-  s as PieCookieBanner,
-  E as defaultProps,
-  P as preferences
+  c as Country,
+  p as Language,
+  N as ON_COOKIE_BANNER_ACCEPT_ALL,
+  _ as ON_COOKIE_BANNER_MANAGE_PREFS,
+  E as ON_COOKIE_BANNER_NECESSARY_ONLY,
+  P as ON_COOKIE_BANNER_PREFS_SAVED,
+  t as PieCookieBanner,
+  k as defaultLanguage,
+  O as defaultProps,
+  B as preferences
 };

package/locales/it-it.json

@@ -4,7 +4,7 @@
     "description": "Usiamo cookie nostri e di terze parti e altre tecnologie per migliorare e personalizzare la tua esperienza utente, ottimizzare l’analisi dei dati e mostrare annunci pubblicitari in collaborazione con terze parti (leggi la nostra <linkStatement>Informativa</linkStatement>). I cookie necessari sono sempre attivi. Premi Solo <linkNecessaryOnly>necessari</linkNecessaryOnly> per proseguire senza accettare altri cookie. Apri <linkManagePreferences>Gestisci preferenze</linkManagePreferences> per scegliere quali cookie attivare, oppure premi <linkAcceptAll>Accetta tutti</linkAcceptAll> per attivare tutti i cookie.",
     "cta": {
       "managePreferences": "Gestisci preferenze",
-      "necessaryOnly": " Solo necessari",
+      "necessaryOnly": "Solo necessari",
       "acceptAll": "Accetta tutti"
     }
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "0.26.11",
+  "version": "1.0.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,7 +1,38 @@
 import { type TemplateResult } from 'lit';
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-import defaultLocale from '../locales/en-gb.json' assert { type: 'json' };
+export const Language = {
+    BULGARIAN: 'bg',
+    CATALAN: 'ca',
+    DANISH: 'da',
+    DUTCH: 'nl',
+    ENGLISH: 'en',
+    FRENCH: 'fr',
+    GERMAN: 'de',
+    HEBREW: 'he',
+    ITALIAN: 'it',
+    POLISH: 'pl',
+    SLOVAK: 'sk',
+    SPANISH: 'es',
+} as const;
+
+export const Country = {
+    BULGARIA: 'bg',
+    DENMARK: 'dk',
+    FRANCE: 'fr',
+    GERMANY: 'de',
+    GREAT_BRITAIN: 'gb',
+    ISRAEL: 'il',
+    ITALY: 'it',
+    NETHERLANDS: 'nl',
+    POLAND: 'pl',
+    SLOVAKIA: 'sk',
+    SPAIN: 'es',
+} as const;
+
+export type LanguageCode = typeof Language[keyof typeof Language];
+
+export type CountryCode = typeof Country[keyof typeof Country];
 
 export interface CookieBannerLocale {
     banner: {
@@ -50,11 +81,6 @@ export interface CookieBannerProps {
      */
     hasPrimaryActionsOnly: boolean;
 
-    /**
-     * Assigns the data for localising the component strings
-     */
-    locale: CookieBannerLocale;
-
     /**
      * The URL of the cookie statement page the banner should link to.
      */
@@ -65,6 +91,16 @@ export interface CookieBannerProps {
      */
     cookieTechnologiesLink: string;
 
+    /**
+     * Assigns the country used for dynamically localising the component strings
+     */
+    country: CountryCode;
+
+    /**
+     * Assigns the language used for dynamically localising the component strings
+     */
+    language: LanguageCode;
+
     /**
      * Allows consumers to pass in specific preference(s) to the component which will toggle
      * the switch to be on by default (if set to `true`).
@@ -148,7 +184,22 @@ export type DefaultProps = ComponentDefaultProps<CookieBannerProps>;
 export const defaultProps: DefaultProps = {
     hasPrimaryActionsOnly: false,
     defaultPreferences: {},
-    locale: defaultLocale,
+    country: Country.GREAT_BRITAIN,
+    language: Language.ENGLISH,
     cookieStatementLink: '',
     cookieTechnologiesLink: '',
 };
+
+export const defaultLanguage = new Map<CountryCode, LanguageCode>([
+    [Country.GREAT_BRITAIN, Language.ENGLISH],
+    [Country.FRANCE, Language.FRENCH],
+    [Country.DENMARK, Language.DANISH],
+    [Country.SPAIN, Language.SPANISH],
+    [Country.ITALY, Language.ITALIAN],
+    [Country.NETHERLANDS, Language.DUTCH],
+    [Country.POLAND, Language.POLISH],
+    [Country.SLOVAKIA, Language.SLOVAK],
+    [Country.BULGARIA, Language.BULGARIAN],
+    [Country.GERMANY, Language.GERMAN],
+    [Country.ISRAEL, Language.HEBREW],
+]);

package/src/index.ts

@@ -1,5 +1,9 @@
 import {
-    LitElement, html, unsafeCSS, nothing,
+    LitElement,
+    html,
+    unsafeCSS,
+    nothing,
+    type PropertyValues,
 } from 'lit';
 import { property, state, queryAll } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -26,9 +30,13 @@ import {
     type PreferenceIds,
     type CookieBannerLocale,
     type CustomTagEnhancers,
+    defaultLanguage,
+    type CountryCode,
+    type LanguageCode,
 } from './defs';
 
 import { localiseText, localiseRichText } from './localisation-utils';
+import defaultLocale from '../locales/en-gb.json' assert { type: 'json' };
 
 // Valid values available to consumers
 export * from './defs';
@@ -49,24 +57,52 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     @state()
     private _isModalOpen = false;
 
+    @state()
+    private _locale: CookieBannerLocale = defaultLocale;
+
     @property({ type: Boolean })
     public hasPrimaryActionsOnly = defaultProps.hasPrimaryActionsOnly;
 
     @property({ type: Object })
     public defaultPreferences = defaultProps.defaultPreferences;
 
-    @property({ type: Object })
-    public locale:CookieBannerLocale = defaultProps.locale;
-
     @property({ type: String })
     public cookieStatementLink = defaultProps.cookieStatementLink;
 
     @property({ type: String })
     public cookieTechnologiesLink = defaultProps.cookieTechnologiesLink;
 
+    @property({ type: String })
+    public country = defaultProps.country;
+
+    @property({ type: String })
+    public language = defaultProps.language;
+
     @queryAll('pie-switch')
         _preferencesNodes!: NodeListOf<PieSwitch>;
 
+    async updated (changedProperties: PropertyValues<this>) {
+        // Re-fetch locale when country or language changes
+        if (changedProperties.has('country') || changedProperties.has('language')) {
+            await this._setLocaleBasedOnCountryAndLanguage(this.country, this.language);
+        }
+    }
+
+    // Dynamically import locale JSON based on country and language
+    private async _setLocaleBasedOnCountryAndLanguage (country: CountryCode, language: LanguageCode, fallback = false): Promise<void> {
+        try {
+            this._locale = (await import(`../locales/${language.toLowerCase()}-${country.toLowerCase()}.json`, { assert: { type: 'json' } })).default;
+        } catch {
+            // If loading fails, try using the default language, if that fails fall back to the global default locale
+            if (!fallback) {
+                const fallbackLang = defaultLanguage.get(country) || defaultProps.language;
+                await this._setLocaleBasedOnCountryAndLanguage(country, fallbackLang, true);
+            } else {
+                this._locale = defaultLocale;
+            }
+        }
+    }
+
     private _customTagEnhancers: CustomTagEnhancers = {
         linkStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${tagContent}</pie-link>`,
         linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${tagContent}</pie-link>`,
@@ -77,11 +113,11 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     };
 
     private _localiseText (key: string) {
-        return localiseText(this.locale, key);
+        return localiseText(this._locale, key);
     }
 
     private _localiseRichText (key: string) {
-        return localiseRichText(this.locale, key, this._customTagEnhancers);
+        return localiseRichText(this._locale, key, this._customTagEnhancers);
     }
 
     /**