cookiecraft 1.0.0 → 1.0.3

package/dist/cookiecraft.js

@@ -518,6 +518,35 @@
         return '';
     }
 
+    /**
+     * Adjust a hex color brightness by a percentage
+     * Negative = darker, positive = lighter
+     */
+    function adjustColorBrightness(color, percent) {
+        const hex = color.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const adjust = (value) => {
+            const adjusted = value + (value * percent / 100);
+            return Math.max(0, Math.min(255, Math.round(adjusted)));
+        };
+        const toHex = (value) => {
+            const h = value.toString(16);
+            return h.length === 1 ? '0' + h : h;
+        };
+        return `#${toHex(adjust(r))}${toHex(adjust(g))}${toHex(adjust(b))}`;
+    }
+    /**
+     * Build inline CSS custom properties for a primary color
+     */
+    function buildColorStyle(safeColor) {
+        if (!safeColor)
+            return '';
+        const hover = adjustColorBrightness(safeColor, -15);
+        return `--cc-primary: ${safeColor}; --cc-primary-hover: ${hover};`;
+    }
+
     /**
      * Banner - Cookie consent banner component
      */
@@ -531,24 +560,28 @@
          * Show the banner
          */
         show() {
-            var _a;
-            if (!this.element) {
-                this.element = this.createDOM();
-                document.body.appendChild(this.element);
-                this.attachListeners();
-            }
-            // Trigger animation
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
-            });
-            // Focus first button for accessibility
-            const firstButton = (_a = this.element) === null || _a === void 0 ? void 0 : _a.querySelector('button');
-            firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
-            // Disable page interaction if configured
-            if (this.config.disablePageInteraction) {
-                document.body.style.overflow = 'hidden';
+            const append = () => {
+                if (!this.element) {
+                    this.element = this.createDOM();
+                    document.body.appendChild(this.element);
+                    this.attachListeners();
+                }
+                // Trigger animation
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
+                });
+                // Disable page interaction if configured
+                if (this.config.disablePageInteraction) {
+                    document.body.style.overflow = 'hidden';
+                }
+            };
+            // Wait for body if not yet available
+            if (!document.body) {
+                document.addEventListener('DOMContentLoaded', append);
+                return;
             }
+            append();
         }
         /**
          * Hide the banner
@@ -583,7 +616,7 @@
             const layout = this.config.layout || 'bar';
             const backdropBlur = this.config.backdropBlur !== false;
             const safeColor = this.config.primaryColor ? sanitizeColor(this.config.primaryColor) : '';
-            const colorStyle = safeColor ? `--cc-primary: ${safeColor};` : '';
+            const colorStyle = buildColorStyle(safeColor);
             const template = `
       <div
         class="cc-banner cc-banner--${escapeHtml(position)} cc-banner--${escapeHtml(layout)} ${backdropBlur ? 'cc-backdrop-blur' : ''}"
@@ -603,6 +636,13 @@
             </p>
           </div>
           <div class="cc-banner__actions">
+            <button
+              class="cc-btn cc-btn--ghost"
+              data-action="reject"
+              aria-label="${escapeHtml(translations.rejectAll || 'Uniquement essentiels')}"
+            >
+              ${escapeHtml(translations.rejectAll || 'Uniquement essentiels')}
+            </button>
             <button
               class="cc-btn cc-btn--tertiary"
               data-action="customize"
@@ -610,13 +650,6 @@
             >
               ${escapeHtml(translations.customize || 'Personnaliser')}
             </button>
-            <button
-              class="cc-btn cc-btn--reject"
-              data-action="reject"
-              aria-label="${escapeHtml(translations.rejectAll || 'Tout refuser')}"
-            >
-              ${escapeHtml(translations.rejectAll || 'Tout refuser')}
-            </button>
             <button
               class="cc-btn cc-btn--accept"
               data-action="accept"
@@ -737,15 +770,22 @@
          * Show the preference center
          */
         show() {
-            if (!this.element) {
-                this.element = this.createDOM();
-                document.body.appendChild(this.element);
-                this.attachListeners();
+            const append = () => {
+                if (!this.element) {
+                    this.element = this.createDOM();
+                    document.body.appendChild(this.element);
+                    this.attachListeners();
+                }
+                this.element.classList.add('is-visible');
+                this.trapFocus();
+                // Prevent body scroll
+                document.body.style.overflow = 'hidden';
+            };
+            if (!document.body) {
+                document.addEventListener('DOMContentLoaded', append);
+                return;
             }
-            this.element.classList.add('is-visible');
-            this.trapFocus();
-            // Prevent body scroll
-            document.body.style.overflow = 'hidden';
+            append();
         }
         /**
          * Hide the preference center
@@ -775,9 +815,7 @@
             const theme = this.config.theme || 'light';
             const position = this.config.preferencesPosition || 'center';
             const safeColor = this.config.primaryColor ? sanitizeColor(this.config.primaryColor) : '';
-            const colorStyle = safeColor
-                ? `--cc-primary: ${safeColor}; --cc-primary-hover: ${this.adjustColorBrightness(safeColor, -15)};`
-                : '';
+            const colorStyle = buildColorStyle(safeColor);
             const privacyLinkHtml = translations.privacyPolicyUrl
                 ? (() => {
                     const safeUrl = sanitizeUrl(translations.privacyPolicyUrl);
@@ -975,28 +1013,6 @@
                 }
             });
         }
-        /**
-         * Adjust color brightness for hover effect
-         */
-        adjustColorBrightness(color, percent) {
-            // Remove # if present
-            const hex = color.replace('#', '');
-            // Convert to RGB
-            const r = parseInt(hex.substring(0, 2), 16);
-            const g = parseInt(hex.substring(2, 4), 16);
-            const b = parseInt(hex.substring(4, 6), 16);
-            // Adjust brightness
-            const adjust = (value) => {
-                const adjusted = value + (value * percent / 100);
-                return Math.max(0, Math.min(255, Math.round(adjusted)));
-            };
-            // Convert back to hex
-            const toHex = (value) => {
-                const hex = value.toString(16);
-                return hex.length === 1 ? '0' + hex : hex;
-            };
-            return `#${toHex(adjust(r))}${toHex(adjust(g))}${toHex(adjust(b))}`;
-        }
     }
 
     /**
@@ -1014,17 +1030,24 @@
          * Show the floating widget
          */
         show() {
-            if (!this.element) {
-                this.element = this.createDOM();
-                document.body.appendChild(this.element);
-                this.attachListeners();
+            const append = () => {
+                if (!this.element) {
+                    this.element = this.createDOM();
+                    document.body.appendChild(this.element);
+                    this.attachListeners();
+                }
+                // Delay to allow for transition
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
+                    this.isVisible = true;
+                });
+            };
+            if (!document.body) {
+                document.addEventListener('DOMContentLoaded', append);
+                return;
             }
-            // Delay to allow for transition
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
-                this.isVisible = true;
-            });
+            append();
         }
         /**
          * Hide the floating widget
@@ -1059,7 +1082,7 @@
             const widgetPosition = this.config.widgetPosition || 'bottom-right';
             const widgetStyle = this.config.widgetStyle || 'full';
             const safeColor = this.config.primaryColor ? sanitizeColor(this.config.primaryColor) : '';
-            const colorStyle = safeColor ? `--cc-primary: ${safeColor};` : '';
+            const colorStyle = buildColorStyle(safeColor);
             const template = `
       <div
         class="cc-widget cc-widget--${escapeHtml(widgetPosition)} cc-widget--${escapeHtml(widgetStyle)}"
@@ -1069,13 +1092,17 @@
         data-theme="${escapeHtml(theme)}"
         style="${colorStyle}"
       >
-        <svg class="cc-widget__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-          <circle cx="12" cy="12" r="2"/>
-          <circle cx="7" cy="7" r="1.5"/>
-          <circle cx="17" cy="7" r="1.5"/>
-          <circle cx="7" cy="17" r="1.5"/>
-          <circle cx="17" cy="17" r="1.5"/>
+        <svg class="cc-widget__icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <path id="cc-ck-a" d="M6,9 C5.448,9 5,8.552 5,8 C5,7.448 5.448,7 6,7 C6.552,7 7,7.448 7,8 C7,8.552 6.552,9 6,9 Z M0.5,5 C0.776,5 1,5.224 1,5.5 C1,5.776 0.776,6 0.5,6 C0.224,6 0,5.776 0,5.5 C0,5.224 0.224,5 0.5,5 Z M1.5,0 C1.776,0 2,0.224 2,0.5 C2,0.776 1.776,1 1.5,1 C1.224,1 1,0.776 1,0.5 C1,0.224 1.224,0 1.5,0 Z"/>
+            <path id="cc-ck-c" d="M16.899,14.984 C14.727,14.802 12.991,13.088 12.773,10.927 C10.117,10.808 8,8.617 8,5.932 C8,4.837 8.352,3.824 8.949,3 C5.027,3.515 2,6.87 2,10.932 C2,15.35 5.582,18.932 10,18.932 C12.939,18.932 15.509,17.346 16.899,14.984 Z M18.623,15.998 C16.839,19.029 13.583,20.932 10,20.932 C4.477,20.932 0,16.454 0,10.932 C0,5.897 3.74,1.666 8.689,1.017 C10.429,0.789 11.599,2.753 10.568,4.174 C10.2,4.682 10,5.289 10,5.932 C10,7.537 11.265,8.857 12.862,8.929 C13.854,8.973 14.663,9.738 14.763,10.726 C14.884,11.932 15.857,12.889 17.067,12.991 C18.535,13.114 19.37,14.729 18.623,15.998 Z M10,18 C8.343,18 7,16.657 7,15 C7,13.343 8.343,12 10,12 C11.657,12 13,13.343 13,15 C13,16.657 11.657,18 10,18 Z M10,16 C10.552,16 11,15.552 11,15 C11,14.448 10.552,14 10,14 C9.448,14 9,14.448 9,15 C9,15.552 9.448,16 10,16 Z M4.5,14 C3.672,14 3,13.328 3,12.5 C3,11.672 3.672,11 4.5,11 C5.328,11 6,11.672 6,12.5 C6,13.328 5.328,14 4.5,14 Z M4.5,12 C4.224,12 4,12.224 4,12.5 C4,12.776 4.224,13 4.5,13 C4.776,13 5,12.776 5,12.5 C5,12.224 4.776,12 4.5,12 Z M5.5,9 C4.672,9 4,8.328 4,7.5 C4,6.672 4.672,6 5.5,6 C6.328,6 7,6.672 7,7.5 C7,8.328 6.328,9 5.5,9 Z M5.5,7 C5.224,7 5,7.224 5,7.5 C5,7.776 5.224,8 5.5,8 C5.776,8 6,7.776 6,7.5 C6,7.224 5.776,7 5.5,7 Z"/>
+          </defs>
+          <g fill="currentColor" fill-rule="evenodd" transform="translate(3 1)">
+            <g transform="translate(4 7)">
+              <use href="#cc-ck-a"/>
+            </g>
+            <use href="#cc-ck-c"/>
+          </g>
         </svg>
         <span class="cc-widget__text">
           ${escapeHtml(translations.cookies || 'Cookies')}
@@ -1378,6 +1405,9 @@
                     this.showBanner();
                 }
             }
+            // Store instance globally so it won't be garbage collected
+            // when used without a variable (e.g. new CookieConsent({}).init())
+            window.cookieConsent = this;
             this.eventEmitter.emit('consent:init');
         }
         /**
@@ -1506,7 +1536,7 @@
          * Validate and set default config values
          */
         validateConfig(config) {
-            return Object.assign(Object.assign({}, config), { mode: config.mode || 'opt-in', autoShow: config.autoShow !== undefined ? config.autoShow : true, revision: config.revision || 1, gtmConsentMode: config.gtmConsentMode || false, disablePageInteraction: config.disablePageInteraction || false, theme: config.theme || 'light', position: config.position || 'bottom', layout: config.layout || 'bar', backdropBlur: config.backdropBlur !== false, animationStyle: config.animationStyle || 'smooth', preferencesPosition: config.preferencesPosition || 'center', showWidget: config.showWidget !== undefined ? config.showWidget : true, widgetPosition: config.widgetPosition || 'bottom-right', widgetStyle: config.widgetStyle || 'full' });
+            return Object.assign(Object.assign({}, config), { mode: config.mode || 'opt-in', autoShow: config.autoShow !== undefined ? config.autoShow : true, revision: config.revision || 1, gtmConsentMode: config.gtmConsentMode !== undefined ? config.gtmConsentMode : true, disablePageInteraction: config.disablePageInteraction || false, theme: config.theme || 'light', position: config.position || 'bottom-left', layout: config.layout || 'box', backdropBlur: config.backdropBlur !== false, animationStyle: config.animationStyle || 'smooth', preferencesPosition: config.preferencesPosition || 'center', showWidget: config.showWidget !== undefined ? config.showWidget : true, widgetPosition: config.widgetPosition || 'bottom-left', widgetStyle: config.widgetStyle || 'compact' });
         }
     }