@el7ven/cookie-kit 0.2.15

package/src/js/CookieConsent.js

@@ -0,0 +1,618 @@
+import { initCookieKit } from './index.js'
+
+class CookieConsent extends HTMLElement {
+  constructor() {
+    super()
+    this.config = this.parseConfig()
+    this.cookieKit = null
+    this.isVisible = false
+    this.isSettingsMode = false
+    this.currentTab = 'privacy'
+    this.categories = { ...this.config.categories }
+  }
+
+  connectedCallback() {
+    this.cookieKit = initCookieKit(this.config)
+    this.setupEventListeners()
+    this.checkConsentAndRender()
+  }
+
+  parseConfig() {
+    const configAttr = this.getAttribute('config')
+    if (configAttr) {
+      try {
+        return JSON.parse(configAttr)
+      } catch (e) {
+        console.warn('CookieConsent: Invalid config attribute, using defaults')
+      }
+    }
+
+    return {
+      categories: {
+        necessary: { required: true, enabled: true, name: 'Essential Cookies' },
+        analytics: { required: false, enabled: false, name: 'Analytics Cookies' },
+        marketing: { required: false, enabled: false, name: 'Marketing Cookies' }
+      },
+      consentExpireDays: 365,
+      version: '0.2.0',
+      mode: 'gdpr',
+      theme: 'light'
+    }
+  }
+
+  setupEventListeners() {
+    // Listen to consent changes
+    if (this.cookieKit?.on) {
+      this.cookieKit.on('consentChanged', ({ consent }) => {
+        this.isVisible = !consent.hasConsented
+        this.render()
+      })
+    }
+  }
+
+  checkConsentAndRender() {
+    this.isVisible = !this.cookieKit.hasConsent()
+    this.render()
+  }
+
+  showSettings() {
+    this.isSettingsMode = true
+    this.render()
+  }
+
+  hideSettings() {
+    this.isSettingsMode = false
+    this.render()
+  }
+
+  selectTab(tabId) {
+    this.currentTab = tabId
+    this.render()
+  }
+
+  toggleCategory(categoryId) {
+    const category = this.categories[categoryId]
+    if (category) {
+      this.categories[categoryId] = { ...category, enabled: !category.enabled }
+      this.render()
+    }
+  }
+
+  handleAcceptAll() {
+    this.cookieKit.acceptAll()
+  }
+
+  handleRejectAll() {
+    this.cookieKit.rejectAll()
+  }
+
+  handleAcceptSelection() {
+    // Save current category states
+    Object.keys(this.categories).forEach(id => {
+      const isEnabled = this.categories[id]?.enabled
+      if (isEnabled !== undefined) {
+        this.cookieKit.acceptCategory(id, isEnabled)
+      }
+    })
+  }
+
+  getCategoryTitle(categoryId) {
+    return this.categories[categoryId]?.name || categoryId
+  }
+
+  getCategoryDescription(categoryId) {
+    return this.categories[categoryId]?.description || `Description for ${categoryId} cookies.`
+  }
+
+  getEnabledSettingsTabs() {
+    return ['privacy', ...Object.keys(this.categories).filter(id => 
+      this.categories[id]?.enabled
+    )]
+  }
+
+  render() {
+    if (!this.isVisible) {
+      this.innerHTML = ''
+      return
+    }
+
+    const isEssentialBanner = this.config.mode === 'essential'
+    const enabledSettingsTabs = this.getEnabledSettingsTabs()
+    const theme = this.config.theme || this.getAttribute('theme') || 'light'
+
+    this.innerHTML = `
+      <style>
+        ${this.getStyles()}
+      </style>
+      
+      <div class="cookie-consent" data-cookie-kit-theme="${theme}">
+        <!-- Backdrop -->
+        ${!isEssentialBanner ? '<div class="cookie-drawer__backdrop"></div>' : ''}
+        
+        <!-- Drawer -->
+        <div class="cookie-drawer__content-wrapper ${this.isSettingsMode ? 'cookie-drawer__content-wrapper--settings' : 'cookie-drawer__content-wrapper--banner'} cookie-drawer__content-wrapper--bottom">
+          <div class="cookie-drawer__content" role="dialog" aria-modal="true">
+            <!-- Header -->
+            <div class="cookie-drawer__header">
+              <h3 class="cookie-drawer__title">
+                ${this.isSettingsMode
+                  ? 'Cookie Settings'
+                  : (this.config.mode === 'essential'
+                    ? 'Essential Cookies'
+                    : 'Cookie Consent')
+                }
+              </h3>
+              ${!this.isSettingsMode && !isEssentialBanner ? `
+                <div class="cookie-drawer__message">
+                  We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.
+                </div>
+              ` : ''}
+              ${this.isSettingsMode ? `
+                <button class="cookie-drawer__close" aria-label="Close">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6.40013 18.3079L5.69238 17.6001L11.2924 12.0001L5.69238 6.40013L6.40013 5.69238L12.0001 11.2924L17.6001 5.69238L18.3079 6.40013L12.7079 12.0001L18.3079 17.6001L17.6001 18.3079L12.0001 12.7079L6.40013 18.3079Z" fill="#0D0B3D"/>
+                  </svg>
+                </button>
+              ` : ''}
+            </div>
+
+            <!-- Essential Banner -->
+            ${!this.isSettingsMode && isEssentialBanner ? `
+              <div class="cookie-drawer__banner">
+                <div class="cookie-drawer__essential">
+                  <div class="cookie-drawer__message cookie-drawer__message--essential">
+                    We use essential cookies to make our site work. By using our site, you accept our use of essential cookies.
+                  </div>
+                  <div class="cookie-drawer__actions">
+                    <button class="cookie-drawer__button cookie-drawer__button--primary" data-action="accept-all">
+                      Accept
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ` : ''}
+
+            <!-- GDPR Banner/Settings -->
+            ${(!this.isSettingsMode || !isEssentialBanner) ? `
+              <div class="cookie-drawer__body">
+                <!-- Banner Mode -->
+                ${!this.isSettingsMode ? `
+                  <div class="cookie-drawer__banner">
+                    <div class="cookie-drawer__message">
+                      We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.
+                    </div>
+                    <div class="cookie-drawer__actions">
+                      <button class="cookie-drawer__button cookie-drawer__button--secondary" data-action="reject-all">
+                        Reject All
+                      </button>
+                      <button class="cookie-drawer__button cookie-drawer__button--primary" data-action="accept-all">
+                        Accept All
+                      </button>
+                      <button class="cookie-drawer__button cookie-drawer__button--link" data-action="open-settings">
+                        Customize
+                      </button>
+                    </div>
+                  </div>
+                ` : ''}
+
+                <!-- Settings Mode -->
+                ${this.isSettingsMode ? `
+                  <div class="cookie-drawer__settings">
+                    <!-- Tabs -->
+                    ${enabledSettingsTabs.length > 1 ? `
+                      <div class="cookie-drawer__tabs">
+                        ${enabledSettingsTabs.map(tab => `
+                          <button class="cookie-drawer__tab ${this.currentTab === tab ? 'cookie-drawer__tab--active' : ''}" data-tab="${tab}">
+                            ${this.getCategoryTitle(tab)}
+                          </button>
+                        `).join('')}
+                      </div>
+                    ` : ''}
+
+                    <!-- Tab Content -->
+                    <div class="cookie-drawer__tab-content">
+                      ${this.currentTab === 'privacy' ? `
+                        <div class="cookie-drawer__privacy">
+                          <h4>Privacy Policy</h4>
+                          <p>Learn about how we use cookies and protect your privacy.</p>
+                        </div>
+                      ` : `
+                        <div class="cookie-drawer__category">
+                          <div class="cookie-drawer__category-header">
+                            <h4>${this.getCategoryTitle(this.currentTab)}</h4>
+                            <label class="cookie-drawer__toggle">
+                              <input
+                                type="checkbox"
+                                ${this.categories[this.currentTab]?.enabled ? 'checked' : ''}
+                                ${this.categories[this.currentTab]?.required ? 'disabled' : ''}
+                                data-category="${this.currentTab}"
+                              />
+                              <span class="cookie-drawer__toggle-slider"></span>
+                            </label>
+                          </div>
+                          <div class="cookie-drawer__category-description">
+                            ${this.getCategoryDescription(this.currentTab)}
+                          </div>
+                        </div>
+                      `}
+                    </div>
+
+                    <!-- Settings Actions -->
+                    <div class="cookie-drawer__settings-actions">
+                      <button class="cookie-drawer__button cookie-drawer__button--primary" data-action="accept-selection">
+                        Save Preferences
+                      </button>
+                    </div>
+                  </div>
+                ` : ''}
+              </div>
+            ` : ''}
+          </div>
+        </div>
+      </div>
+    `
+
+    this.attachEventHandlers()
+  }
+
+  attachEventHandlers() {
+    // Button handlers
+    this.querySelectorAll('[data-action]').forEach(button => {
+      button.addEventListener('click', (e) => {
+        const action = e.target.getAttribute('data-action')
+        switch (action) {
+          case 'accept-all':
+            this.handleAcceptAll()
+            break
+          case 'reject-all':
+            this.handleRejectAll()
+            break
+          case 'accept-selection':
+            this.handleAcceptSelection()
+            break
+          case 'open-settings':
+            this.showSettings()
+            break
+        }
+      })
+    })
+
+    // Close button
+    this.querySelector('.cookie-drawer__close')?.addEventListener('click', () => {
+      this.hideSettings()
+    })
+
+    // Backdrop click
+    this.querySelector('.cookie-drawer__backdrop')?.addEventListener('click', () => {
+      if (!this.isSettingsMode) {
+        this.hideSettings()
+      }
+    })
+
+    // Tab buttons
+    this.querySelectorAll('[data-tab]').forEach(button => {
+      button.addEventListener('click', (e) => {
+        const tabId = e.target.getAttribute('data-tab')
+        this.selectTab(tabId)
+      })
+    })
+
+    // Category toggles
+    this.querySelectorAll('[data-category]').forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        const categoryId = e.target.getAttribute('data-category')
+        this.toggleCategory(categoryId)
+      })
+    })
+  }
+
+  getStyles() {
+    return `
+      :root {
+        --ck-accent: #0026aa;
+        --ck-accent-hover: #002699;
+        --ck-bg: #ffffff;
+        --ck-bg-muted: #f8f9fa;
+        --ck-text: rgba(13, 11, 61, 1);
+        --ck-text-muted: #666666;
+        --ck-border: #e0e0e0;
+        --ck-backdrop: rgba(0, 0, 0, 0.4);
+        --ck-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+        --ck-link: var(--ck-accent);
+      }
+
+      [data-cookie-kit-theme="dark"] {
+        --ck-accent: #4da3ff;
+        --ck-accent-hover: #2b8aff;
+        --ck-bg: #1e1e2e;
+        --ck-bg-muted: #2a2a3e;
+        --ck-text: #e0e0e0;
+        --ck-text-muted: #a0a0b0;
+        --ck-border: #3a3a4e;
+        --ck-backdrop: rgba(0, 0, 0, 0.6);
+        --ck-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        --ck-link: var(--ck-accent);
+      }
+
+      /* Animations */
+      .cookie-drawer__backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--ck-backdrop);
+        z-index: 9998;
+        animation: fadeIn 0.3s ease;
+      }
+
+      .cookie-drawer__content-wrapper {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding: 24px;
+        animation: slideUp 0.3s ease;
+      }
+
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      @keyframes slideUp {
+        from { transform: translateY(100%); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+
+      /* Layout */
+      .cookie-drawer__content {
+        background: var(--ck-bg);
+        border-radius: 48px;
+        max-width: 900px;
+        width: 100%;
+        max-height: 100%;
+        overflow: hidden;
+        box-shadow: var(--ck-shadow);
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* Header */
+      .cookie-drawer__header {
+        padding: 24px 24px 16px;
+        border-bottom: 1px solid var(--ck-border);
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+
+      .cookie-drawer__title {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--ck-text);
+        line-height: 1.4;
+      }
+
+      .cookie-drawer__message {
+        margin-top: 8px;
+        color: var(--ck-text-muted);
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      .cookie-drawer__close {
+        background: none;
+        border: none;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: background-color 0.2s;
+      }
+
+      .cookie-drawer__close:hover {
+        background-color: var(--ck-bg-muted);
+      }
+
+      /* Banner */
+      .cookie-drawer__banner {
+        padding: 24px;
+      }
+
+      .cookie-drawer__actions {
+        display: flex;
+        gap: 12px;
+        margin-top: 16px;
+        flex-wrap: wrap;
+      }
+
+      .cookie-drawer__button {
+        padding: 12px 24px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+      }
+
+      .cookie-drawer__button--primary {
+        background-color: var(--ck-accent);
+        color: white;
+      }
+
+      .cookie-drawer__button--primary:hover {
+        background-color: var(--ck-accent-hover);
+      }
+
+      .cookie-drawer__button--secondary {
+        background-color: var(--ck-bg-muted);
+        color: var(--ck-text);
+        border: 1px solid var(--ck-border);
+      }
+
+      .cookie-drawer__button--secondary:hover {
+        background-color: #e5e7eb;
+      }
+
+      .cookie-drawer__button--link {
+        background: none;
+        color: var(--ck-link);
+        padding: 8px 16px;
+      }
+
+      .cookie-drawer__button--link:hover {
+        text-decoration: underline;
+      }
+
+      /* Settings */
+      .cookie-drawer__settings {
+        padding: 0 24px 24px;
+      }
+
+      .cookie-drawer__tabs {
+        display: flex;
+        border-bottom: 1px solid var(--ck-border);
+        margin: 0 -24px;
+        padding: 0 24px;
+      }
+
+      .cookie-drawer__tab {
+        background: none;
+        border: none;
+        padding: 16px 20px;
+        cursor: pointer;
+        color: var(--ck-text-muted);
+        font-size: 14px;
+        font-weight: 500;
+        border-bottom: 2px solid transparent;
+        transition: all 0.2s;
+      }
+
+      .cookie-drawer__tab--active {
+        color: var(--ck-accent);
+        border-bottom-color: var(--ck-accent);
+      }
+
+      .cookie-drawer__tab:hover:not(.cookie-drawer__tab--active) {
+        color: var(--ck-text);
+      }
+
+      .cookie-drawer__tab-content {
+        padding: 24px 0;
+      }
+
+      .cookie-drawer__category-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+
+      .cookie-drawer__category-header h4 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--ck-text);
+      }
+
+      .cookie-drawer__toggle {
+        position: relative;
+        display: inline-block;
+        width: 48px;
+        height: 24px;
+      }
+
+      .cookie-drawer__toggle input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .cookie-drawer__toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--ck-border);
+        transition: 0.3s;
+        border-radius: 24px;
+      }
+
+      .cookie-drawer__toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        transition: 0.3s;
+        border-radius: 50%;
+      }
+
+      .cookie-drawer__toggle input:checked + .cookie-drawer__toggle-slider {
+        background-color: var(--ck-accent);
+      }
+
+      .cookie-drawer__toggle input:checked + .cookie-drawer__toggle-slider:before {
+        transform: translateX(24px);
+      }
+
+      .cookie-drawer__toggle input:disabled + .cookie-drawer__toggle-slider {
+        background-color: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .cookie-drawer__category-description {
+        color: var(--ck-text-muted);
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      .cookie-drawer__settings-actions {
+        margin-top: 24px;
+        padding-top: 24px;
+        border-top: 1px solid var(--ck-border);
+      }
+
+      /* Responsive */
+      @media (max-width: 640px) {
+        .cookie-drawer__header {
+          padding: 20px 20px 16px;
+        }
+
+        .cookie-drawer__banner {
+          padding: 20px;
+        }
+
+        .cookie-drawer__settings {
+          padding: 0 20px 20px;
+        }
+
+        .cookie-drawer__actions {
+          flex-direction: column;
+        }
+
+        .cookie-drawer__button {
+          width: 100%;
+          text-align: center;
+        }
+      }
+    `
+  }
+}
+
+// Export for manual registration
+export { CookieConsent }
+
+// Uncomment to enable automatic registration:
+// customElements.define('cookie-consent', CookieConsent)

package/src/js/components/index.js

@@ -0,0 +1 @@
+export { CookieConsent } from '../CookieConsent.js'

package/src/js/index.js

@@ -0,0 +1,53 @@
+import { CookieKitCore, createCookieKit, DEFAULT_CONFIG } from '../core/index.js'
+import { VERSION, getVersion, getVersionInfo, logVersion } from './version.js'
+
+export { CookieKitCore, createCookieKit, DEFAULT_CONFIG }
+export { VERSION, getVersion, getVersionInfo, logVersion }
+
+export function mountCookieConsentGlobal(core, target = globalThis) {
+  if (!target) return null
+
+  target.CookieConsent = {
+    hasConsent: () => core.hasConsent(),
+    hasCategoryConsent: category => core.hasCategoryConsent(category),
+    getConsentData: () => core.getConsent(),
+    acceptAll: () => core.acceptAll('api'),
+    rejectAll: () => core.rejectAll('api'),
+    acceptSelected: categories => core.acceptSelected(categories, 'api'),
+    clearConsent: () => core.clearConsent(),
+    on: (event, cb) => core.on(event, cb),
+    off: (event, cb) => core.off(event, cb),
+    // Version helpers
+    getVersion: () => getVersion(),
+    getVersionInfo: () => getVersionInfo(),
+    logVersion: () => logVersion()
+  }
+
+  return target.CookieConsent
+}
+
+export function initCookieKit(config = {}, options = {}) {
+  const core = createCookieKit(config)
+
+  if (options.mountGlobal !== false) {
+    mountCookieConsentGlobal(core, options.target || globalThis)
+  }
+
+  return core
+}
+
+export function mountCookieConsent(config = {}, targetId = 'cookie-consent-root') {
+  const core = createCookieKit(config)
+  const target = document.getElementById(targetId)
+  
+  if (target) {
+    // Import CookieConsent dynamically
+    import('./CookieConsent.js').then(({ CookieConsent }) => {
+      const element = new CookieConsent()
+      element.setAttribute('config', JSON.stringify(config))
+      target.appendChild(element)
+    })
+  }
+  
+  return core
+}

package/src/js/index.test.js

@@ -0,0 +1,42 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+import { initCookieKit } from './index.js'
+
+function createMemoryStorageAdapter() {
+  const memory = new Map()
+
+  return {
+    getItem: key => memory.get(key) ?? null,
+    setItem: (key, value) => memory.set(key, value),
+    removeItem: key => memory.delete(key),
+    defaultKey: 'cookie_consent'
+  }
+}
+
+test('js adapter: mounts global API and performs consent actions', async () => {
+  const target = {}
+
+  initCookieKit({
+    storageAdapter: createMemoryStorageAdapter(),
+    categories: {
+      necessary: { required: true, enabled: true },
+      analytics: { required: false, enabled: true }
+    }
+  }, {
+    mountGlobal: true,
+    target
+  })
+
+  assert.ok(target.CookieConsent)
+
+  await target.CookieConsent.acceptSelected(['analytics'])
+
+  assert.equal(target.CookieConsent.hasConsent(), true)
+  assert.equal(target.CookieConsent.hasCategoryConsent('necessary'), true)
+  assert.equal(target.CookieConsent.hasCategoryConsent('analytics'), true)
+
+  target.CookieConsent.clearConsent()
+
+  assert.equal(target.CookieConsent.getConsentData(), null)
+})