@modernconsent/widget 0.0.1 → 1.0.0

package/README.md

@@ -0,0 +1,130 @@
+# @modernconsent/widget
+
+Standalone Web Component consent banner and preferences panel. Includes the full [ModernConsent](https://github.com/kschnekenburger/modern-consent) core — just drop a `<script>` tag and you're done.
+
+- **~30 KB** standalone bundle (~8 KB gzip)
+- **Shadow DOM** — styles never leak, never broken by your CSS
+- **i18n** built-in (fr/en) with slot overrides
+- **Themeable** via CSS custom properties
+- **ES2017** target — works in Chrome 63+, Firefox 58+, Safari 11.1+
+- **adoptedStyleSheets** with automatic `<style>` fallback for older browsers
+
+## Install (CDN)
+
+```html
+<!-- 1. Config + vendors (before the script) -->
+<script>
+  window.mcLayer = window.mcLayer || [];
+  window.modernConsent = function () {
+    window.mcLayer.push(arguments);
+  };
+
+  window.modernConsent('config', {
+    cookieName: 'my_consent',
+    consentMode: true,
+  });
+
+  window.modernConsent('vendor', {
+    name: 'google-analytics',
+    config: { measurementId: 'G-XXXXXXXXXX' },
+  });
+</script>
+
+<!-- 2. Load the standalone bundle -->
+<script src="https://unpkg.com/@modernconsent/widget/dist/consent.js" defer></script>
+
+<!-- 3. Place the widget -->
+<mc-consent-widget lang="fr" style="--mc-primary: #2563eb;"> </mc-consent-widget>
+
+<!-- 4. Re-open preferences -->
+<a href="javascript:void(0)" onclick="window.modernConsent.openPanel()"> Cookie settings </a>
+```
+
+> Also available on jsDelivr: `https://cdn.jsdelivr.net/npm/@modernconsent/widget/dist/consent.js`
+
+## Slots
+
+Customize the banner text via named slots. If omitted, built-in i18n defaults are used.
+
+```html
+<!-- With custom text -->
+<mc-consent-widget lang="fr">
+  <span slot="title">We respect your privacy</span>
+  <span slot="body">This site uses cookies to improve your experience.</span>
+</mc-consent-widget>
+
+<!-- With defaults (uses built-in fr/en text) -->
+<mc-consent-widget lang="fr"></mc-consent-widget>
+```
+
+| Slot    | Default (fr)                     | Default (en)              |
+| ------- | -------------------------------- | ------------------------- |
+| `title` | Nous respectons votre vie privée | We respect your privacy   |
+| `body`  | Ce site utilise des cookies...   | This site uses cookies... |
+
+## Theming
+
+Set CSS custom properties on `<mc-consent-widget>` or any ancestor — they pierce the Shadow DOM:
+
+```html
+<mc-consent-widget lang="fr" style="--mc-primary: #2563eb; --mc-radius: 16px;"></mc-consent-widget>
+```
+
+| Variable             | Default          | Description                  |
+| -------------------- | ---------------- | ---------------------------- |
+| `--mc-primary`       | `#111827`        | Primary button background    |
+| `--mc-primary-hover` | auto             | Primary hover (auto-derived) |
+| `--mc-primary-text`  | `#fff`           | Primary button text          |
+| `--mc-radius`        | `12px`           | Modal border radius          |
+| `--mc-font`          | `system-ui, ...` | Font family                  |
+
+## Display Modes
+
+### Vendor mode (default)
+
+Individual toggle per vendor, grouped by category:
+
+```javascript
+window.modernConsent('config', { displayMode: 'vendor' });
+```
+
+### Purpose mode
+
+Toggle per category/purpose (Didomi-style):
+
+```javascript
+window.modernConsent('config', {
+  displayMode: 'purpose',
+  functionalPurpose: true, // mandatory "Site operation" block
+});
+```
+
+## Languages
+
+Set via the `lang` attribute. Ships with `fr` and `en`:
+
+```html
+<mc-consent-widget lang="en"></mc-consent-widget>
+```
+
+## Browser Support
+
+| Browser | Minimum version |
+| ------- | --------------- |
+| Chrome  | 63+             |
+| Firefox | 58+             |
+| Safari  | 11.1+           |
+| Edge    | 79+             |
+
+> Safari < 16.4 uses a `<style>` fallback instead of `adoptedStyleSheets`. No visual difference.
+
+## Related Packages
+
+| Package                                                                          | Description                              |
+| -------------------------------------------------------------------------------- | ---------------------------------------- |
+| [`@modernconsent/core`](https://www.npmjs.com/package/@modernconsent/core)       | Consent engine (included in this bundle) |
+| [`@modernconsent/vendors`](https://www.npmjs.com/package/@modernconsent/vendors) | 24 built-in vendor modules               |
+
+## License
+
+MIT

package/dist/consent.js

@@ -0,0 +1,413 @@
+"use strict";var ModernConsent=(()=>{var E=Object.defineProperty,pe=Object.defineProperties,ue=Object.getOwnPropertyDescriptor,fe=Object.getOwnPropertyDescriptors,ge=Object.getOwnPropertyNames,X=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,me=Object.prototype.propertyIsEnumerable;var P=(n,e,t)=>e in n?E(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,b=(n,e)=>{for(var t in e||(e={}))Z.call(e,t)&&P(n,t,e[t]);if(X)for(var t of X(e))me.call(e,t)&&P(n,t,e[t]);return n},D=(n,e)=>pe(n,fe(e));var ve=(n,e)=>{for(var t in e)E(n,t,{get:e[t],enumerable:!0})},ye=(n,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ge(e))!Z.call(n,o)&&o!==t&&E(n,o,{get:()=>e[o],enumerable:!(s=ue(e,o))||s.enumerable});return n};var be=n=>ye(E({},"__esModule",{value:!0}),n);var p=(n,e,t)=>P(n,typeof e!="symbol"?e+"":e,t);var Ee={};ve(Ee,{McConsentWidget:()=>$});var w=class{constructor(e){p(this,"value");p(this,"subscribers",new Set);this.value=e}get(){return this.value}set(e){this.value!==e&&(this.value=e,this.notify())}update(e){this.set(e(this.value))}subscribe(e){return this.subscribers.add(e),e(this.value),()=>this.subscribers.delete(e)}notify(){this.subscribers.forEach(e=>e(this.value))}};function he(){let n=new Uint8Array(16);crypto.getRandomValues(n),n[6]=n[6]&15|64,n[8]=n[8]&63|128;let e=Array.from(n,t=>t.toString(16).padStart(2,"0")).join("");return[e.slice(0,8),e.slice(8,12),e.slice(12,16),e.slice(16,20),e.slice(20)].join("-")}var M=()=>typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():he();var we="mc_consent_state";function Ce(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}var xe=n=>{if(typeof document=="undefined")return null;let e=document.cookie.match(new RegExp(`(?:^|; )${Ce(n)}=([^;]*)`));return e?decodeURIComponent(e[1]):null},Se=(n,e,t={})=>{if(typeof document=="undefined")return;let{days:s=365,path:o="/",domain:r,sameSite:i="Lax",secure:a=!1}=t,d=new Date;d.setDate(d.getDate()+s);let g=`${n}=${encodeURIComponent(e)};expires=${d.toUTCString()};path=${o};SameSite=${i}`;if(r){let l=typeof window!="undefined"?window.location.hostname:"";l&&!l.endsWith(r.replace(/^\./,""))&&console.warn(`[modern-consent] cookieDomain "${r}" does not match current hostname "${l}". The cookie will be silently rejected by the browser. Remove cookieDomain for local development.`),g+=`;domain=${r}`}(a||i==="None")&&(g+=";Secure"),document.cookie=g},f=new w({}),m=new w(!1),y=new w([]),u=new w(!1),I=()=>u.set(!0),_=[],ee=n=>{let e=(n==null?void 0:n.cookieName)||we,t=n==null?void 0:n.cookieDomain,s=n==null?void 0:n.consentVersion,o={consent:{},answered:!1};if(typeof window!="undefined"){let r=xe(e);if(r)try{o=JSON.parse(r)}catch(i){console.error("[modern-consent] Error parsing consent cookie",i)}}if(f.set(o.consent||{}),m.set(o.answered||!1),o.answered&&s&&o.version!==s&&(m.set(!1),u.set(!0)),typeof window!="undefined"){_.forEach(i=>i()),_=[];let r=()=>{let i={consent:f.get(),answered:m.get(),timestamp:Date.now(),version:s,consentId:M()};Se(e,JSON.stringify(i),{domain:t,secure:window.location.protocol==="https:"})};_.push(f.subscribe(r)),_.push(m.subscribe(r))}};var A=[];function te(n){return A.push(n),()=>{let e=A.indexOf(n);e!==-1&&A.splice(e,1)}}function T(n){for(let e=A.length-1;e>=0;e--){let t=A[e](n);if(t)return t}}var O=new Map,k=new Map,z=new Map;function F(n){var r;let e=k.get(n);if(!(e!=null&&e.artifacts))return;let t=z.get(n),s=typeof e.artifacts=="function"?e.artifacts(t):e.artifacts,o=(r=window._modernConsentConfig)==null?void 0:r.cookieDomain;s.forEach(i=>{document.cookie=`${i}=; max-age=0; path=/`,o&&(document.cookie=`${i}=; max-age=0; path=/; domain=${o}`)})}function H(n){let{id:e,category:t,loader:s,config:o={}}=n;O.has(e)||(O.set(e,s),s().then(r=>{let i=r.default||r;if(k.set(e,i),o!==void 0&&z.set(e,o),i!=null&&i.setup)try{i.setup(o)}catch(a){console.error(`[modern-consent] setup() failed for "${e}":`,a)}i!=null&&i.link&&i.link.length>0&&i.link.forEach(a=>{var g;if(a.condition&&!a.condition({vendorConfig:o,consentConfig:window._modernConsentConfig}))return;let d=T(a.vendor);d?H({id:a.vendor,category:t,config:(g=a.config)!=null?g:{},loader:d}):console.warn(`[modern-consent] Dependency "${a.vendor}" not found for "${e}"`)}),y.update(a=>a.some(d=>d.id===e)?a:[...a,{id:e,name:i.name,description:i.description,category:i.category,purposeLabel:i.purposeLabel,purposeDescription:i.purposeDescription,loaded:!1,requireConsent:i.requireConsent}]),Ae(e)}).catch(r=>{console.error(`[modern-consent] Failed to load vendor "${e}":`,r)}))}function Ae(n){let e=k.get(n);if(e&&!e.requireConsent){L(n);return}let t=f.get();m.get()&&t[n]===void 0&&u.set(!0),t[n]&&L(n)}async function L(n){var r,i;if(typeof window=="undefined")return;let e=k.get(n);if(!e){let a=O.get(n);if(a){let d=await a();e=d.default||d,e&&k.set(n,e)}}if(!e)return;let t=((r=window._modernConsentConfig)==null?void 0:r.consentOnly)===!0,o=y.get().find(a=>a.id===n);!t&&e.init&&o&&!o.loaded&&(e.init(z.get(n)),y.update(a=>a.map(d=>d.id===n?D(b({},d),{loaded:!0}):d)),(i=e.event)==null||i.forEach(a=>{if(a.name==="onAccept")try{a.callback()}catch(d){}})),!t&&e.domSelector&&e.render&&setTimeout(()=>{document.querySelectorAll(e.domSelector).forEach(a=>{let d=a;d.dataset.loaded!=="true"&&(e!=null&&e.render)&&(d.innerHTML=e.render(d.dataset),d.dataset.loaded="true",d.classList.remove("mc-placeholder-pending"))})},50)}var q=class{constructor(){p(this,"listeners",new Map)}on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),()=>{var s;return(s=this.listeners.get(e))==null?void 0:s.delete(t)}}off(e,t){var s;(s=this.listeners.get(e))==null||s.delete(t)}emit(e,t){var s;(s=this.listeners.get(e))==null||s.forEach(o=>{try{o(t)}catch(r){}})}},h=new q;function U(n){var t;if(typeof window=="undefined")return;let e={event:"consent_update",consent_state:n};window.consentLayer=window.consentLayer||[],window.consentLayer.push(e),(t=window._modernConsentConfig)!=null&&t.pushDataLayer&&(window.dataLayer=window.dataLayer||[],window.dataLayer.push(e))}function j(n){var e;h.emit("consent:saved",{consentId:M(),timestamp:Date.now(),version:typeof window!="undefined"?(e=window._modernConsentConfig)==null?void 0:e.consentVersion:void 0,consent:n})}function V(n,e){var o,r,i;let t=(r=(o=y.get().find(a=>a.id===n))==null?void 0:o.loaded)!=null?r:!1;f.update(a=>D(b({},a),{[n]:e})),m.set(!0),h.emit("consent:update",{vendor:n,status:e?"granted":"denied"});let s=f.get();if(U(s),j(s),e){L(n);return}t&&(F(n),!(typeof window!="undefined"&&((i=window._modernConsentConfig)==null?void 0:i.consentOnly)===!0)&&typeof window!="undefined"&&window.location.reload())}function N(){let n=y.get(),e={};n.forEach(t=>{e[t.id]=!0,L(t.id)}),f.set(e),m.set(!0),u.set(!1),n.forEach(t=>{h.emit("consent:update",{vendor:t.id,status:"granted"})}),U(e),j(e)}function K(){var o;let n=y.get(),e={},t=!1;n.forEach(r=>{e[r.id]=!1,F(r.id),r.loaded&&(t=!0)}),f.set(e),m.set(!0),u.set(!1),n.forEach(r=>{h.emit("consent:update",{vendor:r.id,status:"denied"})}),U(e),j(e);let s=typeof window!="undefined"&&((o=window._modernConsentConfig)==null?void 0:o.consentOnly)===!0;t&&!s&&typeof window!="undefined"&&window.location.reload()}var ne=["config","vendor"];function oe(n){let{name:e,label:t,description:s="",category:o="other",config:r={},requireConsent:i=!0,setup:a,init:d,artifacts:g}=n,l;if(d!=null?d:a)l=async()=>({name:t!=null?t:e,description:s,category:o,requireConsent:i,setup:a,init:d,artifacts:g});else{let v=T(e);if(!v){console.warn(`[modern-consent] Unknown vendor "${e}". Provide an init() function to define a custom vendor.`);return}l=v}H({id:e,category:o,config:r,loader:l})}function se(){if(typeof window=="undefined")return;let n=window,e=Array.isArray(n.mcLayer)?[...n.mcLayer]:[];n._modernConsentConfig={},te(s=>async()=>{var a,d;let o=(a=n._modernConsentConfig)==null?void 0:a.cdnBase;if(!o)throw new Error(`[modern-consent] Vendor "${s}" not found. Configure cdnBase to enable CDN loading, or provide an inline init().`);let i=await import(`${o.replace(/\/$/,"")}/${s}.js`);return(d=i.default)!=null?d:i}),e.forEach(s=>{let[o,r]=s;if(!ne.includes(o)){console.warn(`[modern-consent] "${o}" is not a valid command`);return}if(o==="config"){n._modernConsentConfig=b(b({},n._modernConsentConfig),r);return}oe(r)}),ee(n._modernConsentConfig);let t=(...s)=>{let[o,r]=s;if(!ne.includes(o)){console.warn(`[modern-consent] "${o}" is not a valid command`);return}o==="vendor"?oe(r):o==="config"&&(n._modernConsentConfig=b(b({},n._modernConsentConfig),r)),Array.isArray(n.mcLayer)||(n.mcLayer=[]),n.mcLayer.push(s)};n.modernConsent=Object.assign(t,{openPanel:()=>u.set(!0),getConsent:()=>f.get(),on:h.on.bind(h)})}typeof window!="undefined"&&se();var ie={fr:{bannerTitle:"Nous respectons votre vie priv\xE9e",bannerBody:"Ce site utilise des cookies pour am\xE9liorer votre exp\xE9rience, mesurer l\u2019audience et personnaliser les contenus. Votre choix sera conserv\xE9 et modifiable \xE0 tout moment.",bannerAcceptAll:"Tout accepter",bannerDenyAll:"Continuer sans accepter",bannerCustomize:"Personnaliser",detailsTitle:"Personnaliser vos pr\xE9f\xE9rences",detailsSubtitle:"Vous pouvez activer ou d\xE9sactiver chaque service individuellement.",detailsBack:"Retour",detailsAcceptAll:"Tout accepter",detailsDenyAll:"Tout refuser",serviceAccept:"Accepter",serviceDeny:"Refuser",statusAllowed:"Autoris\xE9",statusDenied:"Refus\xE9",statusPending:"En attente",statusAlwaysActive:"Obligatoire",categoryPending:"Services en attente",close:"Fermer",purposeAccept:"Accepter",purposeDeny:"Refuser",purposeStatusAllowed:"Accept\xE9e",purposeStatusDenied:"Refus\xE9e",purposeStatusPending:"En attente",functionalTitle:"Fonctionnement du site",functionalDescription:"Ces cookies et traceurs sont indispensables au fonctionnement du site, pour fournir nos services et nous assurer de leur bon fonctionnement, pour des raisons de s\xE9curit\xE9 et pour s'assurer du suivi de vos pr\xE9f\xE9rences."},en:{bannerTitle:"We respect your privacy",bannerBody:"This site uses cookies to improve your experience, measure audience and personalize content. Your choice will be saved and can be changed at any time.",bannerAcceptAll:"Accept all",bannerDenyAll:"Continue without accepting",bannerCustomize:"Customize",detailsTitle:"Customize your preferences",detailsSubtitle:"You can enable or disable each service individually.",detailsBack:"Back",detailsAcceptAll:"Accept all",detailsDenyAll:"Deny all",serviceAccept:"Accept",serviceDeny:"Deny",statusAllowed:"Allowed",statusDenied:"Denied",statusPending:"Pending",statusAlwaysActive:"Always active",categoryPending:"Pending services",close:"Close",purposeAccept:"Accept",purposeDeny:"Deny",purposeStatusAllowed:"Accepted",purposeStatusDenied:"Denied",purposeStatusPending:"Pending",functionalTitle:"Site operation",functionalDescription:"These cookies and trackers are essential for the site to function, to provide our services, ensure security, and remember your preferences."}};function re(n,e,t){var s,o,r;return n?typeof n=="string"?n:(r=(o=(s=n[e])!=null?s:n.fr)!=null?o:Object.values(n)[0])!=null?r:t:t}function c(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}var ae=`
+  :host {
+    --_primary: var(--mc-primary, #111827);
+    --_primary-hover: var(--mc-primary-hover, color-mix(in srgb, var(--_primary) 85%, black));
+    --_primary-text: var(--mc-primary-text, #fff);
+    --_radius: var(--mc-radius, 12px);
+    --_font: var(--mc-font, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    font-family: var(--_font);
+    pointer-events: none;
+    display: none;
+  }
+
+  :host([open]) {
+    pointer-events: auto;
+    display: block;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: mc-fade-in 0.2s ease;
+  }
+
+  @keyframes mc-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes mc-slide-up {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .modal {
+    background: #ffffff;
+    border-radius: var(--_radius);
+    max-width: 640px;
+    width: calc(100% - 32px);
+    max-height: 90vh;
+    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: mc-slide-up 0.25s ease;
+  }
+
+  .header {
+    padding: 20px 24px 16px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .title {
+    font-size: 17px;
+    font-weight: 700;
+    margin: 0;
+    color: #111827;
+    letter-spacing: -0.01em;
+  }
+
+  .subtitle {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 6px 0 0;
+    line-height: 1.5;
+  }
+
+  .close-btn {
+    flex-shrink: 0;
+    border: none;
+    background: #f3f4f6;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 6px 8px;
+    color: #6b7280;
+    border-radius: 8px;
+    transition: background 0.15s;
+  }
+  .close-btn:hover { background: #e5e7eb; }
+
+  .body {
+    padding: 0 24px 16px;
+    overflow: auto;
+    font-size: 13px;
+    color: #4b5563;
+    line-height: 1.6;
+  }
+
+  .divider {
+    height: 1px;
+    background: #e5e7eb;
+    margin: 0 24px;
+  }
+
+  .footer {
+    padding: 16px 24px;
+    border-top: 1px solid #f3f4f6;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  /* \u2500\u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  .btn {
+    appearance: none;
+    border-radius: 999px;
+    padding: 9px 18px;
+    font-size: 13px;
+    font-weight: 500;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    letter-spacing: 0.01em;
+  }
+
+  .btn:active { transform: translateY(1px); }
+
+  .btn-primary {
+    background: var(--_primary);
+    color: var(--_primary-text);
+    border-color: var(--_primary);
+  }
+  .btn-primary:hover {
+    background: var(--_primary-hover);
+    border-color: var(--_primary-hover);
+  }
+
+  .btn-outline {
+    background: #ffffff;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .btn-outline:hover { background: #f9fafb; border-color: #d1d5db; }
+
+  .btn-allowed-active {
+    background: #059669;
+    border-color: #059669;
+    color: #fff;
+  }
+  .btn-allowed-active:hover { background: #047857; border-color: #047857; }
+
+  .btn-denied-active {
+    background: #dc2626;
+    border-color: #dc2626;
+    color: #fff;
+  }
+  .btn-denied-active:hover { background: #b91c1c; border-color: #b91c1c; }
+
+  .btn-ghost {
+    background: transparent;
+    color: #6b7280;
+  }
+  .btn-ghost:hover { background: #f9fafb; }
+
+  /* \u2500\u2500\u2500 Categories & Services \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  .categories {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .category {
+    border-radius: calc(var(--_radius) - 2px);
+    border: 1px solid #f3f4f6;
+    background: #fafafa;
+    padding: 14px;
+  }
+
+  .category-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  .category-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  .services-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .service {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 0 6px;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .service-main { flex: 1; }
+
+  .service-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: #111827;
+    margin-bottom: 2px;
+  }
+
+  .service-description { font-size: 12px; color: #6b7280; line-height: 1.4; }
+
+  .service-status { font-size: 11px; margin-top: 4px; font-weight: 500; }
+  .service-status.allowed { color: #059669; }
+  .service-status.denied { color: #dc2626; }
+  .service-status.pending { color: #d97706; }
+
+  .service-actions { display: flex; gap: 4px; flex-shrink: 0; }
+
+  .chip {
+    font-size: 11px;
+    padding: 3px 10px;
+    border-radius: 999px;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
+  .chip-active {
+    background: #ecfdf5;
+    border-color: #a7f3d0;
+    color: #059669;
+  }
+
+  /* \u2500\u2500\u2500 Purpose mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  .category-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .category-status {
+    font-size: 11px;
+    font-weight: 500;
+  }
+  .category-status.allowed { color: #059669; }
+  .category-status.denied { color: #dc2626; }
+  .category-status.pending { color: #d97706; }
+
+  .purpose-description {
+    font-size: 12px;
+    color: #6b7280;
+    margin: 0 0 8px;
+    line-height: 1.5;
+  }
+
+  .purpose-service-info {
+    padding: 4px 0;
+    border-top: none;
+  }
+  .purpose-service-info .service-name {
+    font-size: 12px;
+    color: #4b5563;
+    font-weight: 400;
+  }
+  .purpose-service-info .service-description {
+    font-size: 11px;
+    color: #9ca3af;
+  }
+`,R=null,ke=typeof CSSStyleSheet!="undefined"&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;function Le(){return R||(R=new CSSStyleSheet,R.replaceSync(ae)),R}function $e(n){if(n.querySelector("style[data-mc]"))return;let e=document.createElement("style");e.setAttribute("data-mc",""),e.textContent=ae,n.prepend(e)}var $=class extends HTMLElement{constructor(){super();p(this,"shadow");p(this,"mode","banner");p(this,"_unsubscribers",[]);p(this,"_renderScheduled",!1);p(this,"_previouslyFocused",null);p(this,"_keydownHandler",null);p(this,"services",[]);p(this,"consent",{});p(this,"answered",!1);p(this,"panelOpen",!1);p(this,"onAcceptAll",()=>N());p(this,"onDenyAll",()=>K());p(this,"onCustomize",()=>{this.mode="details",this.scheduleRender()});p(this,"onBackToBanner",()=>{this.mode="banner",this.scheduleRender()});this.shadow=this.attachShadow({mode:"open"})}get labels(){var s,o;let t=(s=this.getAttribute("lang"))!=null?s:"fr";return(o=ie[t])!=null?o:ie.fr}scheduleRender(){this._renderScheduled||(this._renderScheduled=!0,queueMicrotask(()=>{this._renderScheduled=!1,this.render()}))}connectedCallback(){ke?this.shadow.adoptedStyleSheets=[Le()]:$e(this.shadow),this._unsubscribers.push(f.subscribe(t=>{this.consent=t,this.scheduleRender()}),m.subscribe(t=>{this.answered=t,this.scheduleRender()}),y.subscribe(t=>{this.services=t,this.ensurePanelOpenIfNeeded(),this.scheduleRender()}),u.subscribe(t=>{let s=this.panelOpen;this.panelOpen=t,t&&!s&&this.answered&&(this.mode="details"),this.scheduleRender()}))}disconnectedCallback(){this._unsubscribers.forEach(t=>t()),this._unsubscribers=[],this.teardownFocusTrap(!1)}attributeChangedCallback(){this.scheduleRender()}ensurePanelOpenIfNeeded(){this.getPendingServices().length>0&&!this.answered&&!this.panelOpen&&I()}getPendingServices(){return this.services.filter(t=>t.requireConsent&&this.consent[t.id]===void 0)}shouldShowPopup(){return this.panelOpen&&this.services.length>0}setupFocusTrap(){let t=this.shadow.querySelector(".modal");if(!t)return;let s=[...t.querySelectorAll('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])')];s.length&&(this._previouslyFocused||(this._previouslyFocused=document.activeElement),requestAnimationFrame(()=>{var o;return(o=s[0])==null?void 0:o.focus()}),this._keydownHandler=o=>{if(o.key==="Escape"){o.preventDefault(),u.set(!1);return}if(o.key!=="Tab")return;let r=this.shadow.activeElement,i=s[0],a=s[s.length-1];o.shiftKey&&r===i?(o.preventDefault(),a.focus()):!o.shiftKey&&r===a&&(o.preventDefault(),i.focus())},document.addEventListener("keydown",this._keydownHandler))}teardownFocusTrap(t=!0){this._keydownHandler&&(document.removeEventListener("keydown",this._keydownHandler),this._keydownHandler=null),t&&this._previouslyFocused&&"focus"in this._previouslyFocused&&(this._previouslyFocused.focus(),this._previouslyFocused=null)}render(){var s,o;if(!this.shouldShowPopup()){this.teardownFocusTrap(!0),this.shadow.innerHTML="",this.removeAttribute("open");return}this.setAttribute("open",""),this.teardownFocusTrap(!1),this.mode==="banner"?this.renderBanner():((o=typeof window!="undefined"?(s=window._modernConsentConfig)==null?void 0:s.displayMode:void 0)!=null?o:"vendor")==="purpose"?this.renderPurposeDetails():this.renderDetails(),this.setupFocusTrap()}onSetConsentForService(t,s){V(t,s),this.getPendingServices().filter(o=>o.id!==t).length===0&&u.set(!1)}onSetConsentForCategory(t,s){this.services.filter(r=>r.category===t&&r.requireConsent).forEach(r=>V(r.id,s)),this.getPendingServices().length===0&&u.set(!1)}getCategoryStatus(t){let s=t.filter(i=>i.requireConsent);return s.length===0||s.every(i=>this.consent[i.id])?"allowed":s.every(i=>!this.consent[i.id])?"denied":"pending"}groupServicesByCategory(){let t={};return this.services.forEach(s=>{let o=s.category||"Autres";t[o]||(t[o]=[]),t[o].push(s)}),t}renderFunctionalBlock(){var o;if(!(typeof window!="undefined"&&((o=window._modernConsentConfig)==null?void 0:o.functionalPurpose)===!0))return"";let s=this.labels;return`
+      <section class="category">
+        <div class="category-header">
+          <div class="category-info">
+            <span class="category-title">${c(s.functionalTitle)}</span>
+          </div>
+          <span class="chip chip-active">${c(s.statusAlwaysActive)}</span>
+        </div>
+        <div class="purpose-description">${c(s.functionalDescription)}</div>
+      </section>
+    `}renderBanner(){let t=this.labels;this.shadow.innerHTML=`
+      <div class="backdrop" role="dialog" aria-modal="true" aria-labelledby="mc-title">
+        <div class="modal">
+          <div class="header">
+            <div>
+              <h2 class="title" id="mc-title"><slot name="title">${c(t.bannerTitle)}</slot></h2>
+            </div>
+            <button class="close-btn" type="button" aria-label="${c(t.close)}" id="mc-close-btn">\u2715</button>
+          </div>
+          <div class="body">
+            <slot name="body">${c(t.bannerBody)}</slot>
+          </div>
+          <div class="footer">
+            <button class="btn btn-ghost" type="button" id="mc-deny-all-btn">${c(t.bannerDenyAll)}</button>
+            <button class="btn btn-outline" type="button" id="mc-customize-btn">${c(t.bannerCustomize)}</button>
+            <button class="btn btn-primary" type="button" id="mc-accept-all-btn">${c(t.bannerAcceptAll)}</button>
+          </div>
+        </div>
+      </div>
+    `,this.shadow.getElementById("mc-accept-all-btn").addEventListener("click",this.onAcceptAll),this.shadow.getElementById("mc-deny-all-btn").addEventListener("click",this.onDenyAll),this.shadow.getElementById("mc-customize-btn").addEventListener("click",this.onCustomize),this.shadow.getElementById("mc-close-btn").addEventListener("click",()=>u.set(!1))}renderDetails(){let t=this.labels,s=this.renderFunctionalBlock(),o=this.groupServicesByCategory(),r=Object.keys(o).sort().map(i=>{let a=o[i],d=a.some(l=>l.requireConsent&&this.consent[l.id]===void 0),g=a.map(l=>{if(!l.requireConsent)return`
+                <div class="service">
+                  <div class="service-main">
+                    <div class="service-name">${c(l.name)}</div>
+                    <div class="service-description">${c(l.description)}</div>
+                  </div>
+                  <span class="chip chip-active">${c(t.statusAlwaysActive)}</span>
+                </div>
+              `;let v=this.consent[l.id],B=v?t.statusAllowed:v?t.statusPending:t.statusDenied,C=v?"allowed":v?"pending":"denied";return`
+              <div class="service">
+                <div class="service-main">
+                  <div class="service-name">${c(l.name)}</div>
+                  <div class="service-description">${c(l.description)}</div>
+                  <div class="service-status ${C}">${c(B)}</div>
+                </div>
+                <div class="service-actions">
+                  <button class="btn btn-outline ${C==="allowed"?"btn-allowed-active":""}" type="button" data-action="allow" data-id="${c(l.id)}">
+                    ${c(t.serviceAccept)}
+                  </button>
+                  <button class="btn btn-outline ${C==="denied"?"btn-denied-active":""}" type="button" data-action="deny" data-id="${c(l.id)}">
+                    ${c(t.serviceDeny)}
+                  </button>
+                </div>
+              </div>
+            `}).join("");return`
+          <section class="category">
+            <div class="category-header">
+              <div class="category-title">${c(i)}</div>
+              ${d?`<span class="chip">${c(t.categoryPending)}</span>`:""}
+            </div>
+            <div class="services-list">${g}</div>
+          </section>
+        `}).join("");this.shadow.innerHTML=`
+      <div class="backdrop" role="dialog" aria-modal="true" aria-labelledby="mc-details-title">
+        <div class="modal">
+          <div class="header">
+            <div>
+              <h2 class="title" id="mc-details-title">${c(t.detailsTitle)}</h2>
+              <p class="subtitle">${c(t.detailsSubtitle)}</p>
+            </div>
+            <button class="close-btn" type="button" aria-label="${c(t.close)}" id="mc-close-btn">\u2715</button>
+          </div>
+          <div class="body">
+            <div class="categories">${s}${r}</div>
+          </div>
+          <div class="footer">
+            <button class="btn btn-ghost" type="button" id="mc-back-btn">${c(t.detailsBack)}</button>
+            <button class="btn btn-outline" type="button" id="mc-deny-all-btn">${c(t.detailsDenyAll)}</button>
+            <button class="btn btn-primary" type="button" id="mc-accept-all-btn">${c(t.detailsAcceptAll)}</button>
+          </div>
+        </div>
+      </div>
+    `,this.shadow.getElementById("mc-accept-all-btn").addEventListener("click",this.onAcceptAll),this.shadow.getElementById("mc-deny-all-btn").addEventListener("click",this.onDenyAll),this.shadow.getElementById("mc-back-btn").addEventListener("click",this.onBackToBanner),this.shadow.getElementById("mc-close-btn").addEventListener("click",()=>u.set(!1)),this.shadow.querySelectorAll("[data-action]").forEach(i=>{i.addEventListener("click",()=>{this.onSetConsentForService(i.dataset.id,i.dataset.action==="allow")})})}renderPurposeDetails(){var d,g;let t=this.labels,s=(d=this.getAttribute("lang"))!=null?d:"fr",o=this.renderFunctionalBlock(),r=this.groupServicesByCategory(),i=typeof window!="undefined"?(g=window._modernConsentConfig)==null?void 0:g.purposes:void 0,a=Object.keys(r).sort().map(l=>{var W,J,G,Q;let v=r[l],B=v.every(S=>!S.requireConsent),C=this.getCategoryStatus(v),x=v.find(S=>S.purposeLabel),ce=re(x==null?void 0:x.purposeLabel,s,(J=(W=i==null?void 0:i[l])==null?void 0:W.label)!=null?J:l),Y=re(x==null?void 0:x.purposeDescription,s,(Q=(G=i==null?void 0:i[l])==null?void 0:G.description)!=null?Q:""),de=B?`<span class="chip chip-active">${c(t.statusAlwaysActive)}</span>`:`
+            <div class="service-actions">
+              <button class="btn btn-outline ${C==="allowed"?"btn-allowed-active":""}" type="button" data-category="${c(l)}" data-cat-action="allow">
+                ${c(t.purposeAccept)}
+              </button>
+              <button class="btn btn-outline ${C==="denied"?"btn-denied-active":""}" type="button" data-category="${c(l)}" data-cat-action="deny">
+                ${c(t.purposeDeny)}
+              </button>
+            </div>
+          `,le=v.map(S=>`
+            <div class="service purpose-service-info">
+              <div class="service-main">
+                <div class="service-name">${c(S.name)}</div>
+                <div class="service-description">${c(S.description)}</div>
+              </div>
+            </div>
+          `).join("");return`
+          <section class="category">
+            <div class="category-header">
+              <div class="category-info">
+                <span class="category-title">${c(ce)}</span>
+              </div>
+              ${de}
+            </div>
+            ${Y?`<div class="purpose-description">${c(Y)}</div>`:""}
+            <div class="services-list">${le}</div>
+          </section>
+        `}).join("");this.shadow.innerHTML=`
+      <div class="backdrop" role="dialog" aria-modal="true" aria-labelledby="mc-details-title">
+        <div class="modal">
+          <div class="header">
+            <div>
+              <h2 class="title" id="mc-details-title">${c(t.detailsTitle)}</h2>
+              <p class="subtitle">${c(t.detailsSubtitle)}</p>
+            </div>
+            <button class="close-btn" type="button" aria-label="${c(t.close)}" id="mc-close-btn">\u2715</button>
+          </div>
+          <div class="body">
+            <div class="categories">${o}${a}</div>
+          </div>
+          <div class="footer">
+            <button class="btn btn-ghost" type="button" id="mc-back-btn">${c(t.detailsBack)}</button>
+            <button class="btn btn-outline" type="button" id="mc-deny-all-btn">${c(t.detailsDenyAll)}</button>
+            <button class="btn btn-primary" type="button" id="mc-accept-all-btn">${c(t.detailsAcceptAll)}</button>
+          </div>
+        </div>
+      </div>
+    `,this.shadow.getElementById("mc-accept-all-btn").addEventListener("click",this.onAcceptAll),this.shadow.getElementById("mc-deny-all-btn").addEventListener("click",this.onDenyAll),this.shadow.getElementById("mc-back-btn").addEventListener("click",this.onBackToBanner),this.shadow.getElementById("mc-close-btn").addEventListener("click",()=>u.set(!1)),this.shadow.querySelectorAll("[data-cat-action]").forEach(l=>{l.addEventListener("click",()=>{this.onSetConsentForCategory(l.dataset.category,l.dataset.catAction==="allow")})})}};p($,"observedAttributes",["lang"]);typeof window!="undefined"&&!customElements.get("mc-consent-widget")&&customElements.define("mc-consent-widget",$);return be(Ee);})();
+//# sourceMappingURL=consent.js.map