@modernconsent/widget 0.0.1

package/dist/index.js

@@ -0,0 +1,761 @@
+// src/index.ts
+import {
+  consentState,
+  servicesList,
+  hasAnswered,
+  isPanelOpen,
+  openPanel
+} from "@modernconsent/core";
+import { acceptAll, denyAll, setConsent } from "@modernconsent/core";
+var LABELS = {
+  fr: {
+    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: {
+    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 resolveI18n(value, lang, fallback) {
+  if (!value) return fallback;
+  if (typeof value === "string") return value;
+  return value[lang] ?? value["fr"] ?? Object.values(value)[0] ?? fallback;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+var STYLES = `
+  :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;
+  }
+`;
+var _sharedStyleSheet = null;
+function getSharedStyleSheet() {
+  if (!_sharedStyleSheet) {
+    _sharedStyleSheet = new CSSStyleSheet();
+    _sharedStyleSheet.replaceSync(STYLES);
+  }
+  return _sharedStyleSheet;
+}
+var McConsentWidget = class extends HTMLElement {
+  static observedAttributes = ["lang"];
+  shadow;
+  mode = "banner";
+  _unsubscribers = [];
+  _renderScheduled = false;
+  _previouslyFocused = null;
+  _keydownHandler = null;
+  services = [];
+  consent = {};
+  answered = false;
+  panelOpen = false;
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  get labels() {
+    const lang = this.getAttribute("lang") ?? "fr";
+    return LABELS[lang] ?? LABELS["fr"];
+  }
+  scheduleRender() {
+    if (this._renderScheduled) return;
+    this._renderScheduled = true;
+    queueMicrotask(() => {
+      this._renderScheduled = false;
+      this.render();
+    });
+  }
+  connectedCallback() {
+    this.shadow.adoptedStyleSheets = [getSharedStyleSheet()];
+    this._unsubscribers.push(
+      consentState.subscribe((consent) => {
+        this.consent = consent;
+        this.scheduleRender();
+      }),
+      hasAnswered.subscribe((answered) => {
+        this.answered = answered;
+        this.scheduleRender();
+      }),
+      servicesList.subscribe((services) => {
+        this.services = services;
+        this.ensurePanelOpenIfNeeded();
+        this.scheduleRender();
+      }),
+      isPanelOpen.subscribe((open) => {
+        const previous = this.panelOpen;
+        this.panelOpen = open;
+        if (open && !previous && this.answered) {
+          this.mode = "details";
+        }
+        this.scheduleRender();
+      })
+    );
+  }
+  disconnectedCallback() {
+    this._unsubscribers.forEach((unsub) => unsub());
+    this._unsubscribers = [];
+    this.teardownFocusTrap(false);
+  }
+  attributeChangedCallback() {
+    this.scheduleRender();
+  }
+  ensurePanelOpenIfNeeded() {
+    if (this.getPendingServices().length > 0 && !this.answered && !this.panelOpen) {
+      openPanel();
+    }
+  }
+  getPendingServices() {
+    return this.services.filter((s) => s.requireConsent && this.consent[s.id] === void 0);
+  }
+  shouldShowPopup() {
+    return this.panelOpen && this.services.length > 0;
+  }
+  // ─── Focus trap ──────────────────────────────────────────────────────────────
+  setupFocusTrap() {
+    const modal = this.shadow.querySelector(".modal");
+    if (!modal) return;
+    const focusable = [
+      ...modal.querySelectorAll(
+        'button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+      )
+    ];
+    if (!focusable.length) return;
+    if (!this._previouslyFocused) {
+      this._previouslyFocused = document.activeElement;
+    }
+    requestAnimationFrame(() => focusable[0]?.focus());
+    this._keydownHandler = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        isPanelOpen.set(false);
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const active = this.shadow.activeElement;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", this._keydownHandler);
+  }
+  teardownFocusTrap(restoreFocus = true) {
+    if (this._keydownHandler) {
+      document.removeEventListener("keydown", this._keydownHandler);
+      this._keydownHandler = null;
+    }
+    if (restoreFocus && this._previouslyFocused && "focus" in this._previouslyFocused) {
+      this._previouslyFocused.focus();
+      this._previouslyFocused = null;
+    }
+  }
+  // ─── Rendering ───────────────────────────────────────────────────────────────
+  render() {
+    const shouldShow = this.shouldShowPopup();
+    if (!shouldShow) {
+      this.teardownFocusTrap(true);
+      this.shadow.innerHTML = "";
+      this.removeAttribute("open");
+      return;
+    }
+    this.setAttribute("open", "");
+    this.teardownFocusTrap(false);
+    if (this.mode === "banner") {
+      this.renderBanner();
+    } else {
+      const displayMode = (typeof window !== "undefined" ? window._modernConsentConfig?.displayMode : void 0) ?? "vendor";
+      if (displayMode === "purpose") {
+        this.renderPurposeDetails();
+      } else {
+        this.renderDetails();
+      }
+    }
+    this.setupFocusTrap();
+  }
+  onAcceptAll = () => acceptAll();
+  onDenyAll = () => denyAll();
+  onCustomize = () => {
+    this.mode = "details";
+    this.scheduleRender();
+  };
+  onBackToBanner = () => {
+    this.mode = "banner";
+    this.scheduleRender();
+  };
+  onSetConsentForService(id, allowed) {
+    setConsent(id, allowed);
+    if (this.getPendingServices().filter((s) => s.id !== id).length === 0) {
+      isPanelOpen.set(false);
+    }
+  }
+  onSetConsentForCategory(category, allowed) {
+    const servicesInCategory = this.services.filter(
+      (s) => s.category === category && s.requireConsent
+    );
+    servicesInCategory.forEach((s) => setConsent(s.id, allowed));
+    if (this.getPendingServices().length === 0) {
+      isPanelOpen.set(false);
+    }
+  }
+  getCategoryStatus(services) {
+    const consentRequired = services.filter((s) => s.requireConsent);
+    if (consentRequired.length === 0) return "allowed";
+    const allAllowed = consentRequired.every((s) => this.consent[s.id]);
+    if (allAllowed) return "allowed";
+    const allDenied = consentRequired.every((s) => !this.consent[s.id]);
+    if (allDenied) return "denied";
+    return "pending";
+  }
+  groupServicesByCategory() {
+    const groups = {};
+    this.services.forEach((service) => {
+      const cat = service.category || "Autres";
+      if (!groups[cat]) groups[cat] = [];
+      groups[cat].push(service);
+    });
+    return groups;
+  }
+  renderFunctionalBlock() {
+    const show = typeof window !== "undefined" && window._modernConsentConfig?.functionalPurpose === true;
+    if (!show) return "";
+    const l = this.labels;
+    return `
+      <section class="category">
+        <div class="category-header">
+          <div class="category-info">
+            <span class="category-title">${escapeHtml(l.functionalTitle)}</span>
+          </div>
+          <span class="chip chip-active">${escapeHtml(l.statusAlwaysActive)}</span>
+        </div>
+        <div class="purpose-description">${escapeHtml(l.functionalDescription)}</div>
+      </section>
+    `;
+  }
+  renderBanner() {
+    const l = 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"></slot></h2>
+            </div>
+            <button class="close-btn" type="button" aria-label="${escapeHtml(l.close)}" id="mc-close-btn">\u2715</button>
+          </div>
+          <div class="body">
+            <slot name="body"></slot>
+          </div>
+          <div class="footer">
+            <button class="btn btn-ghost" type="button" id="mc-deny-all-btn">${escapeHtml(l.bannerDenyAll)}</button>
+            <button class="btn btn-outline" type="button" id="mc-customize-btn">${escapeHtml(l.bannerCustomize)}</button>
+            <button class="btn btn-primary" type="button" id="mc-accept-all-btn">${escapeHtml(l.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", () => isPanelOpen.set(false));
+  }
+  renderDetails() {
+    const l = this.labels;
+    const functionalHtml = this.renderFunctionalBlock();
+    const groups = this.groupServicesByCategory();
+    const bodyHtml = Object.keys(groups).sort().map((cat) => {
+      const services = groups[cat];
+      const hasPending = services.some((s) => s.requireConsent && this.consent[s.id] === void 0);
+      const servicesHtml = services.map((s) => {
+        if (!s.requireConsent) {
+          return `
+                <div class="service">
+                  <div class="service-main">
+                    <div class="service-name">${escapeHtml(s.name)}</div>
+                    <div class="service-description">${escapeHtml(s.description)}</div>
+                  </div>
+                  <span class="chip chip-active">${escapeHtml(l.statusAlwaysActive)}</span>
+                </div>
+              `;
+        }
+        const consent = this.consent[s.id];
+        const statusLabel = consent ? l.statusAllowed : !consent ? l.statusDenied : l.statusPending;
+        const statusClass = consent ? "allowed" : !consent ? "denied" : "pending";
+        return `
+              <div class="service">
+                <div class="service-main">
+                  <div class="service-name">${escapeHtml(s.name)}</div>
+                  <div class="service-description">${escapeHtml(s.description)}</div>
+                  <div class="service-status ${statusClass}">${escapeHtml(statusLabel)}</div>
+                </div>
+                <div class="service-actions">
+                  <button class="btn btn-outline ${statusClass === "allowed" ? "btn-allowed-active" : ""}" type="button" data-action="allow" data-id="${escapeHtml(s.id)}">
+                    ${escapeHtml(l.serviceAccept)}
+                  </button>
+                  <button class="btn btn-outline ${statusClass === "denied" ? "btn-denied-active" : ""}" type="button" data-action="deny" data-id="${escapeHtml(s.id)}">
+                    ${escapeHtml(l.serviceDeny)}
+                  </button>
+                </div>
+              </div>
+            `;
+      }).join("");
+      return `
+          <section class="category">
+            <div class="category-header">
+              <div class="category-title">${escapeHtml(cat)}</div>
+              ${hasPending ? `<span class="chip">${escapeHtml(l.categoryPending)}</span>` : ""}
+            </div>
+            <div class="services-list">${servicesHtml}</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">${escapeHtml(l.detailsTitle)}</h2>
+              <p class="subtitle">${escapeHtml(l.detailsSubtitle)}</p>
+            </div>
+            <button class="close-btn" type="button" aria-label="${escapeHtml(l.close)}" id="mc-close-btn">\u2715</button>
+          </div>
+          <div class="body">
+            <div class="categories">${functionalHtml}${bodyHtml}</div>
+          </div>
+          <div class="footer">
+            <button class="btn btn-ghost" type="button" id="mc-back-btn">${escapeHtml(l.detailsBack)}</button>
+            <button class="btn btn-outline" type="button" id="mc-deny-all-btn">${escapeHtml(l.detailsDenyAll)}</button>
+            <button class="btn btn-primary" type="button" id="mc-accept-all-btn">${escapeHtml(l.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", () => isPanelOpen.set(false));
+    this.shadow.querySelectorAll("[data-action]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.onSetConsentForService(btn.dataset.id, btn.dataset.action === "allow");
+      });
+    });
+  }
+  renderPurposeDetails() {
+    const l = this.labels;
+    const lang = this.getAttribute("lang") ?? "fr";
+    const functionalHtml = this.renderFunctionalBlock();
+    const groups = this.groupServicesByCategory();
+    const configPurposes = typeof window !== "undefined" ? window._modernConsentConfig?.purposes : void 0;
+    const bodyHtml = Object.keys(groups).sort().map((cat) => {
+      const services = groups[cat];
+      const allNonConsent = services.every((s) => !s.requireConsent);
+      const status = this.getCategoryStatus(services);
+      const vendorWithPurpose = services.find((s) => s.purposeLabel);
+      const purposeLabel = resolveI18n(
+        vendorWithPurpose?.purposeLabel,
+        lang,
+        configPurposes?.[cat]?.label ?? cat
+      );
+      const purposeDescription = resolveI18n(
+        vendorWithPurpose?.purposeDescription,
+        lang,
+        configPurposes?.[cat]?.description ?? ""
+      );
+      const actionsHtml = allNonConsent ? `<span class="chip chip-active">${escapeHtml(l.statusAlwaysActive)}</span>` : `
+            <div class="service-actions">
+              <button class="btn btn-outline ${status === "allowed" ? "btn-allowed-active" : ""}" type="button" data-category="${escapeHtml(cat)}" data-cat-action="allow">
+                ${escapeHtml(l.purposeAccept)}
+              </button>
+              <button class="btn btn-outline ${status === "denied" ? "btn-denied-active" : ""}" type="button" data-category="${escapeHtml(cat)}" data-cat-action="deny">
+                ${escapeHtml(l.purposeDeny)}
+              </button>
+            </div>
+          `;
+      const vendorsHtml = services.map(
+        (s) => `
+            <div class="service purpose-service-info">
+              <div class="service-main">
+                <div class="service-name">${escapeHtml(s.name)}</div>
+                <div class="service-description">${escapeHtml(s.description)}</div>
+              </div>
+            </div>
+          `
+      ).join("");
+      return `
+          <section class="category">
+            <div class="category-header">
+              <div class="category-info">
+                <span class="category-title">${escapeHtml(purposeLabel)}</span>
+              </div>
+              ${actionsHtml}
+            </div>
+            ${purposeDescription ? `<div class="purpose-description">${escapeHtml(purposeDescription)}</div>` : ""}
+            <div class="services-list">${vendorsHtml}</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">${escapeHtml(l.detailsTitle)}</h2>
+              <p class="subtitle">${escapeHtml(l.detailsSubtitle)}</p>
+            </div>
+            <button class="close-btn" type="button" aria-label="${escapeHtml(l.close)}" id="mc-close-btn">\u2715</button>
+          </div>
+          <div class="body">
+            <div class="categories">${functionalHtml}${bodyHtml}</div>
+          </div>
+          <div class="footer">
+            <button class="btn btn-ghost" type="button" id="mc-back-btn">${escapeHtml(l.detailsBack)}</button>
+            <button class="btn btn-outline" type="button" id="mc-deny-all-btn">${escapeHtml(l.detailsDenyAll)}</button>
+            <button class="btn btn-primary" type="button" id="mc-accept-all-btn">${escapeHtml(l.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", () => isPanelOpen.set(false));
+    this.shadow.querySelectorAll("[data-cat-action]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.onSetConsentForCategory(btn.dataset.category, btn.dataset.catAction === "allow");
+      });
+    });
+  }
+};
+if (typeof window !== "undefined" && !customElements.get("mc-consent-widget")) {
+  customElements.define("mc-consent-widget", McConsentWidget);
+}
+export {
+  McConsentWidget
+};
+//# sourceMappingURL=index.js.map