@groundbrick/sveltekit-adapter 0.1.0

package/dist/consent/components/CookieConsent.svelte

@@ -0,0 +1,580 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+    import { ConsentService } from '../services/ConsentService.js';
+    import type { 
+        ConsentState, 
+        ConsentConfig,
+        ConsentPreferences 
+    } from '../interfaces/IConsentService.js';
+    import { DEFAULT_CONSENT_CONFIG } from '../config/consent.config.js';
+
+    interface CookieConsentProps {
+        config?: Partial<ConsentConfig>;
+        onConsentChange?: (state: ConsentState) => void;
+        position?: 'top' | 'bottom';
+        theme?: 'light' | 'dark' | 'auto';
+        className?: string;
+    }
+
+    let {
+        config = {},
+        onConsentChange,
+        position = 'bottom',
+        theme = 'light',
+        className = ''
+    }: CookieConsentProps = $props();
+    
+
+    let showBanner = $state(false);
+    let showPreferences = $state(false);
+    let consentService: ConsentService;
+    let unsubscribe: (() => void) | null = null;
+
+    // Current config with defaults
+    let currentConfig = $state<ConsentConfig>();
+
+    // Preferences state - reactive to config changes
+    let preferences = $state<Record<string, boolean>>({});
+
+    onMount(() => {
+        consentService = ConsentService.getInstance(
+            {
+                ...DEFAULT_CONSENT_CONFIG,
+                ...config
+            });
+        currentConfig = consentService.getConfig();
+        
+        // Initialize preferences with default values
+        initializePreferences();
+        
+        // Check if consent is required
+        if (consentService.isConsentRequired()) {
+            showBanner = true;
+        }
+
+        // Subscribe to consent changes
+        unsubscribe = consentService.onConsentChange(handleConsentChange);
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+
+    function initializePreferences(): void {
+        if (!currentConfig) return;
+        
+        const existingState = consentService.getConsentState();
+        const newPreferences: Record<string, boolean> = {};
+
+        Object.entries(currentConfig.categories).forEach(([category, categoryConfig]) => {
+            if (existingState) {
+                // Use existing state
+                newPreferences[category] = Boolean(existingState[category as keyof ConsentState] ?? categoryConfig.defaultValue ?? false);
+            } else {
+                // Use default values
+                newPreferences[category] = categoryConfig.defaultValue ?? false;
+            }
+        });
+
+        preferences = newPreferences;
+    }
+
+    function handleConsentChange(state: ConsentState): void {
+        console.log('[CookieConsent] Consent changed:', state);
+        onConsentChange?.(state);
+        
+        // Update preferences to match new state
+        Object.keys(preferences).forEach(category => {
+            preferences[category] = Boolean(state[category as keyof ConsentState] ?? false);
+        });
+    }
+
+    async function acceptAll(): Promise<void> {
+        await consentService.acceptAll();
+        closeBanner();
+    }
+
+    async function rejectAll(): Promise<void> {
+        await consentService.rejectAll();
+        closeBanner();
+    }
+
+    async function savePreferences(): Promise<void> {
+        const consentPreferences: ConsentPreferences = {};
+        
+        Object.entries(preferences).forEach(([category, enabled]) => {
+            if (category in currentConfig!.categories) {
+                consentPreferences[category as keyof ConsentPreferences] = enabled;
+            }
+        });
+
+        await consentService.setConsent(consentPreferences);
+        closeBanner();
+    }
+
+    function togglePreferences(): void {
+        showPreferences = !showPreferences;
+    }
+
+    function closeBanner(): void {
+        showBanner = false;
+        showPreferences = false;
+    }
+
+    function updatePreference(category: string, enabled: boolean): void {
+        preferences[category] = enabled;
+    }
+    
+    // Helper function
+    function getBannerClasses() {
+        return [
+            'cookie-consent-banner',
+            `position-${position}`,
+            `theme-${theme}`,
+            showPreferences ? 'show-preferences' : '',
+            className
+        ].filter(Boolean).join(' ');
+    }
+</script>
+
+{#if showBanner && currentConfig}
+    <div class="cookie-consent-overlay">
+        <div class={getBannerClasses()}>
+            {#if !showPreferences}
+                <!-- Basic Banner -->
+                <div class="consent-content">
+                    <div class="consent-header">
+                        <h3 class="consent-title">{currentConfig.banner.title}</h3>
+                        <p class="consent-message">{currentConfig.banner.message}</p>
+                    </div>
+
+                    <div class="consent-actions">
+                        <button type="button" class="btn btn-secondary" onclick={togglePreferences}>
+                            {currentConfig.banner.customizeText}
+                        </button>
+                        <button type="button" class="btn btn-outline" onclick={rejectAll}>
+                            {currentConfig.banner.rejectAllText}
+                        </button>
+                        <button type="button" class="btn btn-primary" onclick={acceptAll}>
+                            {currentConfig.banner.acceptAllText}
+                        </button>
+                    </div>
+                </div>
+            {:else}
+                <!-- Preferences Panel -->
+                <div class="consent-preferences">
+                    <div class="preferences-header">
+                        <h3 class="consent-title">Cookie preferences</h3>
+                        <button type="button" class="btn-close" onclick={togglePreferences} aria-label="Close">
+                            ✕
+                        </button>
+                    </div>
+
+                    <div class="preferences-list">
+                        {#each Object.entries(currentConfig.categories) as [category, categoryConfig]}
+                            <div class="preference-item">
+                                <div class="preference-control">
+                                    <div class="switch-container">
+                                        <input
+                                            type="checkbox"
+                                            id="consent-{category}"
+                                            class="switch-input"
+                                            bind:checked={preferences[category]}
+                                            disabled={categoryConfig.required}
+                                            onchange={(e) => updatePreference(category, e.currentTarget.checked)}
+                                        />
+                                        <label for="consent-{category}" class="switch-label">
+                                            <span class="switch-slider"></span>
+                                        </label>
+                                    </div>
+                                    <div class="preference-info">
+                                        <strong class="preference-name">{categoryConfig.name}</strong>
+                                        {#if categoryConfig.required}
+                                            <span class="required-badge">Requerido</span>
+                                        {/if}
+                                    </div>
+                                </div>
+                                <p class="preference-description">{categoryConfig.description}</p>
+                            </div>
+                        {/each}
+                    </div>
+
+                    <div class="preferences-actions">
+                        <button type="button" class="btn btn-outline" onclick={rejectAll}>
+                            {currentConfig.banner.rejectAllText}
+                        </button>
+                        <button type="button" class="btn btn-primary" onclick={savePreferences}>
+                            {currentConfig.banner.savePreferencesText}
+                        </button>
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .cookie-consent-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        pointer-events: none;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+    }
+
+    .cookie-consent-banner {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+        margin: 20px;
+        max-width: 600px;
+        width: 100%;
+        pointer-events: auto;
+        animation: slideUp 0.3s ease-out;
+        border: 1px solid #e2e8f0;
+    }
+
+    .cookie-consent-banner.position-top {
+        align-self: flex-start;
+        animation: slideDown 0.3s ease-out;
+    }
+
+    .cookie-consent-banner.theme-dark {
+        background: #1a202c;
+        color: white;
+        border-color: #2d3748;
+    }
+
+    .cookie-consent-banner.show-preferences {
+        max-width: 500px;
+    }
+
+    .consent-content {
+        padding: 24px;
+    }
+
+    .consent-preferences {
+        padding: 24px;
+        max-height: 70vh;
+        overflow-y: auto;
+    }
+
+    .consent-header {
+        margin-bottom: 20px;
+    }
+
+    .preferences-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+
+    .consent-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+        color: inherit;
+    }
+
+    .consent-message {
+        font-size: 14px;
+        color: #64748b;
+        margin: 0;
+        line-height: 1.5;
+    }
+
+    .theme-dark .consent-message {
+        color: #a0aec0;
+    }
+
+    .consent-actions {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+
+    .preferences-actions {
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+        margin-top: 24px;
+        padding-top: 20px;
+        border-top: 1px solid #e2e8f0;
+    }
+
+    .theme-dark .preferences-actions {
+        border-top-color: #2d3748;
+    }
+
+    .preferences-list {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .preference-item {
+        padding: 16px;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        background: #f8fafc;
+    }
+
+    .theme-dark .preference-item {
+        background: #2d3748;
+        border-color: #4a5568;
+    }
+
+    .preference-control {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 8px;
+    }
+
+    .preference-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+    }
+
+    .preference-name {
+        font-weight: 500;
+        color: inherit;
+    }
+
+    .required-badge {
+        background: #10b981;
+        color: white;
+        font-size: 10px;
+        font-weight: 500;
+        padding: 2px 6px;
+        border-radius: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .preference-description {
+        font-size: 13px;
+        color: #64748b;
+        margin: 0;
+        line-height: 1.4;
+    }
+
+    .theme-dark .preference-description {
+        color: #a0aec0;
+    }
+
+    /* Switch Styles */
+    .switch-container {
+        position: relative;
+        display: flex;
+    }
+
+    .switch-input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .switch-label {
+        display: inline-block;
+        width: 44px;
+        height: 24px;
+        cursor: pointer;
+    }
+
+    .switch-slider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #cbd5e0;
+        border-radius: 24px;
+        transition: 0.2s;
+        height: 1.5rem;
+    }
+
+    .switch-slider:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        border-radius: 50%;
+        transition: 0.2s;
+    }
+
+    .switch-input:checked + .switch-label .switch-slider {
+        background-color: #3b82f6;
+    }
+
+    .switch-input:checked + .switch-label .switch-slider:before {
+        transform: translateX(20px);
+    }
+
+    .switch-input:disabled + .switch-label {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    /* Button Styles */
+    .btn {
+        padding: 10px 16px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 40px;
+    }
+
+    .btn:hover {
+        transform: translateY(-1px);
+    }
+
+    .btn:active {
+        transform: translateY(0);
+    }
+
+    .btn-primary {
+        background: #3b82f6;
+        color: white;
+        border-color: #3b82f6;
+    }
+
+    .btn-primary:hover {
+        background: #2563eb;
+        border-color: #2563eb;
+    }
+
+    .btn-secondary {
+        background: #64748b;
+        color: white;
+        border-color: #64748b;
+    }
+
+    .btn-secondary:hover {
+        background: #475569;
+        border-color: #475569;
+    }
+
+    .btn-outline {
+        background: transparent;
+        color: #64748b;
+        border-color: #cbd5e0;
+    }
+
+    .btn-outline:hover {
+        background: #f1f5f9;
+        border-color: #94a3b8;
+    }
+
+    .theme-dark .btn-outline {
+        color: #a0aec0;
+        border-color: #4a5568;
+    }
+
+    .theme-dark .btn-outline:hover {
+        background: #2d3748;
+        border-color: #718096;
+    }
+
+    .btn-close {
+        background: none;
+        border: none;
+        font-size: 18px;
+        cursor: pointer;
+        color: #64748b;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+    }
+
+    .btn-close:hover {
+        background: #f1f5f9;
+        color: #374151;
+    }
+
+    .theme-dark .btn-close {
+        color: #a0aec0;
+    }
+
+    .theme-dark .btn-close:hover {
+        background: #374151;
+        color: white;
+    }
+
+    /* Animations */
+    @keyframes slideUp {
+        from {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slideDown {
+        from {
+            transform: translateY(-100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .cookie-consent-banner {
+            margin: 0;
+            border-radius: 0;
+            max-width: none;
+            width: 100%;
+        }
+
+        .consent-actions,
+        .preferences-actions {
+            flex-direction: column;
+        }
+
+        .btn {
+            width: 100%;
+        }
+
+        .preference-control {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+        }
+
+        .switch-container {
+            align-self: flex-start;
+        }
+    }
+</style>

package/dist/consent/config/consent.config.d.ts

@@ -0,0 +1,7 @@
+import type { ConsentConfig } from '../interfaces/IConsentService.js';
+export declare const DEFAULT_CONSENT_CONFIG: ConsentConfig;
+export declare const GDPR_CONFIG: Partial<ConsentConfig>;
+export declare const CCPA_CONFIG: Partial<ConsentConfig>;
+export declare const GENERIC_CONFIG: Partial<ConsentConfig>;
+export declare function getRegionConfig(region?: string): Partial<ConsentConfig>;
+//# sourceMappingURL=consent.config.d.ts.map

package/dist/consent/config/consent.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent.config.d.ts","sourceRoot":"","sources":["../../../src/consent/config/consent.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEtE,eAAO,MAAM,sBAAsB,EAAE,aAmG3B,CAAC;AAGX,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,aAAa,CA6B9C,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,aAAa,CA6B9C,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,aAAa,CAoBjD,CAAC;AAGF,wBAAgB,eAAe,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAcvE"}