secure-ui-components 0.2.2 → 0.2.4

package/dist/components/secure-file-upload/secure-file-upload.js

@@ -30,871 +30,4 @@
  *
  * @module secure-file-upload
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-import { SecurityTier } from '../../core/security-config.js';
-/**
- * Secure File Upload Web Component
- *
- * Provides a security-hardened file upload field with progressive enhancement.
- * The component works as a standard file input without JavaScript and
- * enhances with security features when JavaScript is available.
- *
- * @extends SecureBaseComponent
- */
-export class SecureFileUpload extends SecureBaseComponent {
-    /**
-     * File input element reference
-     * @private
-     */
-    #fileInput = null;
-    /**
-     * Label element reference
-     * @private
-     */
-    #labelElement = null;
-    /**
-     * Error container element reference
-     * @private
-     */
-    #errorContainer = null;
-    /**
-     * File preview container
-     * @private
-     */
-    #previewContainer = null;
-    /**
-     * Drop zone element
-     * @private
-     */
-    #dropZone = null;
-    /**
-     * File name display element
-     * @private
-     */
-    #fileNameDisplay = null;
-    /**
-     * Selected files
-     * @private
-     */
-    #selectedFiles = null;
-    /**
-     * Unique ID for this file upload instance
-     * @private
-     */
-    #instanceId = `secure-file-upload-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Allowed MIME types
-     * @private
-     */
-    #allowedTypes = new Set();
-    /**
-     * Maximum file size in bytes
-     * @private
-     */
-    #maxSize = 5 * 1024 * 1024; // Default 5MB
-    /**
-     * Optional scan hook for server-side file scanning (e.g. malware detection)
-     * @private
-     */
-    #scanHook = null;
-    /**
-     * Whether a scan is currently in progress
-     * @private
-     */
-    #scanning = false;
-    /**
-     * Observed attributes for this component
-     *
-     * @static
-     */
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'name',
-            'label',
-            'accept',
-            'max-size',
-            'multiple',
-            'required',
-            'capture'
-        ];
-    }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super();
-    }
-    /**
-     * Render the file upload component
-     *
-     * Security Note: We use a native <input type="file"> element wrapped in our
-     * web component to ensure progressive enhancement. The native input works
-     * without JavaScript, and we enhance it with security features when JS is available.
-     *
-     * @protected
-     */
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'file-upload-container';
-        container.setAttribute('part', 'container');
-        // Create label
-        const label = this.getAttribute('label');
-        if (label) {
-            this.#labelElement = document.createElement('label');
-            this.#labelElement.htmlFor = this.#instanceId;
-            this.#labelElement.textContent = this.sanitizeValue(label);
-            this.#labelElement.setAttribute('part', 'label');
-            container.appendChild(this.#labelElement);
-        }
-        // Create drop zone
-        this.#dropZone = document.createElement('div');
-        this.#dropZone.className = 'drop-zone';
-        this.#dropZone.setAttribute('part', 'wrapper');
-        // Create the file input element
-        this.#fileInput = document.createElement('input');
-        this.#fileInput.type = 'file';
-        this.#fileInput.id = this.#instanceId;
-        this.#fileInput.className = 'file-input';
-        this.#fileInput.setAttribute('part', 'input');
-        // Apply attributes
-        this.#applyFileInputAttributes();
-        // Set up event listeners
-        this.#attachEventListeners();
-        // Create Bulma-style drop zone content
-        const dropZoneContent = document.createElement('div');
-        dropZoneContent.className = 'drop-zone-content has-name';
-        // Call-to-action button
-        const fileCta = document.createElement('span');
-        fileCta.className = 'file-cta';
-        const dropIcon = document.createElement('span');
-        dropIcon.className = 'drop-icon';
-        // Build SVG programmatically — never use innerHTML (CSP + XSS risk)
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', '16');
-        svg.setAttribute('height', '16');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('stroke', 'currentColor');
-        svg.setAttribute('stroke-width', '2');
-        svg.setAttribute('stroke-linecap', 'round');
-        svg.setAttribute('stroke-linejoin', 'round');
-        svg.setAttribute('aria-hidden', 'true');
-        svg.setAttribute('focusable', 'false');
-        const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        svgPath.setAttribute('d', 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4');
-        const svgPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
-        svgPolyline.setAttribute('points', '17 8 12 3 7 8');
-        const svgLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        svgLine.setAttribute('x1', '12');
-        svgLine.setAttribute('y1', '3');
-        svgLine.setAttribute('x2', '12');
-        svgLine.setAttribute('y2', '15');
-        svg.appendChild(svgPath);
-        svg.appendChild(svgPolyline);
-        svg.appendChild(svgLine);
-        dropIcon.appendChild(svg);
-        fileCta.appendChild(dropIcon);
-        const dropText = document.createElement('span');
-        dropText.className = 'drop-text';
-        dropText.textContent = 'Choose a file\u2026';
-        fileCta.appendChild(dropText);
-        dropZoneContent.appendChild(fileCta);
-        // Filename display area
-        this.#fileNameDisplay = document.createElement('span');
-        this.#fileNameDisplay.className = 'file-name-display';
-        this.#fileNameDisplay.textContent = 'No file selected';
-        dropZoneContent.appendChild(this.#fileNameDisplay);
-        this.#dropZone.appendChild(this.#fileInput);
-        this.#dropZone.appendChild(dropZoneContent);
-        container.appendChild(this.#dropZone);
-        // Accepted types hint (below the input)
-        const dropHint = document.createElement('div');
-        dropHint.className = 'drop-hint';
-        dropHint.textContent = this.#getAcceptHint();
-        container.appendChild(dropHint);
-        // Create preview container
-        this.#previewContainer = document.createElement('div');
-        this.#previewContainer.className = 'preview-container';
-        container.appendChild(this.#previewContainer);
-        // Create error container
-        // role="alert" already implies aria-live="assertive" — do not override with polite
-        this.#errorContainer = document.createElement('div');
-        this.#errorContainer.className = 'error-container hidden';
-        this.#errorContainer.setAttribute('role', 'alert');
-        this.#errorContainer.setAttribute('part', 'error');
-        this.#errorContainer.id = `${this.#instanceId}-error`;
-        container.appendChild(this.#errorContainer);
-        // Link file input to its error container for screen readers
-        this.#fileInput.setAttribute('aria-describedby', `${this.#instanceId}-error`);
-        // Add component styles (CSP-compliant via adoptedStyleSheets)
-        this.addComponentStyles(this.#getComponentStyles());
-        fragment.appendChild(container);
-        return fragment;
-    }
-    /**
-     * Apply attributes to the file input
-     *
-     * @private
-     */
-    #applyFileInputAttributes() {
-        const config = this.config;
-        // Name attribute
-        const name = this.getAttribute('name');
-        if (name) {
-            this.#fileInput.name = this.sanitizeValue(name);
-        }
-        // Accept attribute (file types)
-        const accept = this.getAttribute('accept');
-        if (accept) {
-            this.#fileInput.accept = accept;
-            this.#parseAcceptTypes(accept);
-        }
-        else {
-            // Default safe file types based on tier
-            const defaultAccept = this.#getDefaultAcceptTypes();
-            this.#fileInput.accept = defaultAccept;
-            this.#parseAcceptTypes(defaultAccept);
-        }
-        // Max size
-        const maxSize = this.getAttribute('max-size');
-        if (maxSize) {
-            this.#maxSize = parseInt(maxSize, 10);
-        }
-        else {
-            // Default max size based on tier
-            this.#maxSize = this.#getDefaultMaxSize();
-        }
-        // Multiple files
-        if (this.hasAttribute('multiple')) {
-            this.#fileInput.multiple = true;
-        }
-        // Required
-        if (this.hasAttribute('required') || config.validation.required) {
-            this.#fileInput.required = true;
-        }
-        // Capture (for mobile camera)
-        const capture = this.getAttribute('capture');
-        if (capture) {
-            this.#fileInput.capture = capture;
-        }
-        // Disabled
-        if (this.hasAttribute('disabled')) {
-            this.#fileInput.disabled = true;
-        }
-    }
-    /**
-     * Parse accept attribute to extract MIME types
-     *
-     * @private
-     */
-    #parseAcceptTypes(accept) {
-        this.#allowedTypes.clear();
-        const types = accept.split(',').map(t => t.trim());
-        types.forEach((type) => {
-            if (type.startsWith('.')) {
-                // File extension - convert to MIME type
-                const mimeType = this.#extensionToMimeType(type);
-                if (mimeType) {
-                    this.#allowedTypes.add(mimeType);
-                }
-            }
-            else {
-                // MIME type
-                this.#allowedTypes.add(type);
-            }
-        });
-    }
-    /**
-     * Convert file extension to MIME type
-     *
-     * @private
-     */
-    #extensionToMimeType(extension) {
-        const mimeTypes = {
-            '.pdf': 'application/pdf',
-            '.doc': 'application/msword',
-            '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-            '.xls': 'application/vnd.ms-excel',
-            '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-            '.ppt': 'application/vnd.ms-powerpoint',
-            '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-            '.txt': 'text/plain',
-            '.csv': 'text/csv',
-            '.jpg': 'image/jpeg',
-            '.jpeg': 'image/jpeg',
-            '.png': 'image/png',
-            '.gif': 'image/gif',
-            '.svg': 'image/svg+xml',
-            '.zip': 'application/zip',
-            '.json': 'application/json'
-        };
-        return mimeTypes[extension.toLowerCase()] || null;
-    }
-    /**
-     * Get default accept types based on security tier
-     *
-     * @private
-     */
-    #getDefaultAcceptTypes() {
-        switch (this.securityTier) {
-            case SecurityTier.CRITICAL:
-                // Most restrictive - only documents
-                return '.pdf,.txt';
-            case SecurityTier.SENSITIVE:
-                // Documents and images
-                return '.pdf,.doc,.docx,.txt,.jpg,.jpeg,.png';
-            case SecurityTier.AUTHENTICATED:
-                // Common safe file types
-                return '.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.jpg,.jpeg,.png,.gif';
-            case SecurityTier.PUBLIC:
-            default:
-                // All common file types
-                return '.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.jpg,.jpeg,.png,.gif,.zip';
-        }
-    }
-    /**
-     * Get default max size based on security tier
-     *
-     * @private
-     */
-    #getDefaultMaxSize() {
-        switch (this.securityTier) {
-            case SecurityTier.CRITICAL:
-                return 2 * 1024 * 1024; // 2MB
-            case SecurityTier.SENSITIVE:
-                return 5 * 1024 * 1024; // 5MB
-            case SecurityTier.AUTHENTICATED:
-                return 10 * 1024 * 1024; // 10MB
-            case SecurityTier.PUBLIC:
-            default:
-                return 20 * 1024 * 1024; // 20MB
-        }
-    }
-    /**
-     * Get accept hint text
-     *
-     * @private
-     */
-    #getAcceptHint() {
-        const maxSizeMB = (this.#maxSize / (1024 * 1024)).toFixed(1);
-        const accept = this.#fileInput.accept;
-        return `Accepted: ${accept || 'all files'} (max ${maxSizeMB}MB)`;
-    }
-    /**
-     * Attach event listeners
-     *
-     * @private
-     */
-    #attachEventListeners() {
-        // File input change
-        this.#fileInput.addEventListener('change', (e) => {
-            void this.#handleFileSelect(e);
-        });
-        // Drag and drop events
-        this.#dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.#dropZone.classList.add('drag-over');
-        });
-        this.#dropZone.addEventListener('dragleave', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.#dropZone.classList.remove('drag-over');
-        });
-        this.#dropZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.#dropZone.classList.remove('drag-over');
-            const dragEvent = e;
-            if (!dragEvent.dataTransfer)
-                return;
-            const files = dragEvent.dataTransfer.files;
-            if (files.length > 0) {
-                this.#fileInput.files = files;
-                void this.#handleFileSelect({ target: this.#fileInput });
-            }
-        });
-    }
-    /**
-     * Handle file selection
-     *
-     * Security Note: This is where we perform comprehensive file validation
-     * including type checking, size limits, and content validation.
-     *
-     * @private
-     */
-    async #handleFileSelect(event) {
-        const files = event.target.files;
-        if (!files || files.length === 0) {
-            return;
-        }
-        // Check rate limit
-        const rateLimitCheck = this.checkRateLimit();
-        if (!rateLimitCheck.allowed) {
-            this.#showError(`Too many upload attempts. Please wait ${Math.ceil(rateLimitCheck.retryAfter / 1000)} seconds.`);
-            this.#fileInput.value = '';
-            return;
-        }
-        // Clear previous errors
-        this.#clearErrors();
-        // Validate all files
-        const validation = await this.#validateFiles(files);
-        if (!validation.valid) {
-            this.#showError(validation.errors.join(', '));
-            this.#fileInput.value = '';
-            this.#selectedFiles = null;
-            return;
-        }
-        // Store selected files
-        this.#selectedFiles = files;
-        // Update filename display
-        this.#updateFileNameDisplay(files);
-        // Show preview
-        this.#showPreview(files);
-        // Audit log
-        this.audit('files_selected', {
-            name: this.#fileInput.name,
-            fileCount: files.length,
-            totalSize: Array.from(files).reduce((sum, f) => sum + f.size, 0)
-        });
-        // Dispatch custom event
-        this.dispatchEvent(new CustomEvent('secure-file-upload', {
-            detail: {
-                name: this.#fileInput.name,
-                files: Array.from(files),
-                tier: this.securityTier
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Validate selected files
-     *
-     * Security Note: Multi-layered validation including type, size, and content checks.
-     *
-     * @private
-     */
-    async #validateFiles(files) {
-        const errors = [];
-        // Check file count
-        if (!this.#fileInput.multiple && files.length > 1) {
-            errors.push('Only one file is allowed');
-        }
-        for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-            // Validate file size
-            if (file.size > this.#maxSize) {
-                const maxSizeMB = (this.#maxSize / (1024 * 1024)).toFixed(1);
-                errors.push(`${file.name}: File size exceeds ${maxSizeMB}MB`);
-                continue;
-            }
-            // Validate file type
-            if (this.#allowedTypes.size > 0) {
-                const isAllowed = this.#isFileTypeAllowed(file);
-                if (!isAllowed) {
-                    errors.push(`${file.name}: File type not allowed`);
-                    continue;
-                }
-            }
-            // Validate file name (prevent path traversal)
-            if (this.#isFileNameDangerous(file.name)) {
-                errors.push(`${file.name}: Invalid file name`);
-                continue;
-            }
-            // Content validation for critical tier
-            if (this.securityTier === SecurityTier.CRITICAL) {
-                const contentCheck = await this.#validateFileContent(file);
-                if (!contentCheck.valid) {
-                    errors.push(`${file.name}: ${contentCheck.error}`);
-                    continue;
-                }
-            }
-            // Run scan hook if registered
-            if (this.#scanHook) {
-                const scanResult = await this.#runScanHook(file);
-                if (!scanResult.valid) {
-                    errors.push(`${file.name}: ${scanResult.reason || 'Rejected by scan'}`);
-                    continue;
-                }
-            }
-        }
-        return {
-            valid: errors.length === 0,
-            errors
-        };
-    }
-    /**
-     * Check if file type is allowed
-     *
-     * @private
-     */
-    #isFileTypeAllowed(file) {
-        // Check MIME type
-        if (this.#allowedTypes.has(file.type)) {
-            return true;
-        }
-        // Check wildcard patterns (e.g., image/*)
-        for (const allowedType of this.#allowedTypes) {
-            if (allowedType.endsWith('/*')) {
-                const prefix = allowedType.slice(0, -2);
-                if (file.type.startsWith(prefix)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    /**
-     * Check if file name is dangerous
-     *
-     * Security Note: Prevent path traversal and dangerous file names
-     *
-     * @private
-     */
-    #isFileNameDangerous(fileName) {
-        // Check for path traversal attempts
-        if (fileName.includes('..') || fileName.includes('/') || fileName.includes('\\')) {
-            return true;
-        }
-        // Check for dangerous file names
-        const dangerousNames = ['web.config', '.htaccess', '.env', 'config.php'];
-        if (dangerousNames.includes(fileName.toLowerCase())) {
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Run the registered scan hook on a file.
-     *
-     * Shows a scanning indicator, calls the hook, audits the result, and
-     * handles errors gracefully (a hook that throws rejects the file).
-     *
-     * @private
-     */
-    async #runScanHook(file) {
-        this.#scanning = true;
-        this.#showScanningState(file.name);
-        this.audit('scan_started', {
-            name: this.#fileInput?.name ?? '',
-            fileName: file.name,
-            fileSize: file.size
-        });
-        try {
-            const result = await this.#scanHook(file);
-            this.audit(result.valid ? 'scan_passed' : 'scan_rejected', {
-                name: this.#fileInput?.name ?? '',
-                fileName: file.name,
-                reason: result.reason ?? ''
-            });
-            return result;
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : 'Scan failed';
-            this.audit('scan_error', {
-                name: this.#fileInput?.name ?? '',
-                fileName: file.name,
-                error: message
-            });
-            return { valid: false, reason: `Scan error: ${message}` };
-        }
-        finally {
-            this.#scanning = false;
-            this.#hideScanningState();
-        }
-    }
-    /**
-     * Show a scanning-in-progress indicator on the drop zone
-     *
-     * @private
-     */
-    #showScanningState(fileName) {
-        if (this.#dropZone) {
-            this.#dropZone.classList.add('scanning');
-        }
-        if (this.#fileInput) {
-            this.#fileInput.disabled = true;
-        }
-        if (this.#fileNameDisplay) {
-            this.#fileNameDisplay.textContent = `Scanning ${fileName}\u2026`;
-        }
-    }
-    /**
-     * Remove the scanning indicator
-     *
-     * @private
-     */
-    #hideScanningState() {
-        if (this.#dropZone) {
-            this.#dropZone.classList.remove('scanning');
-        }
-        if (this.#fileInput && !this.hasAttribute('disabled')) {
-            this.#fileInput.disabled = false;
-        }
-    }
-    /**
-     * Validate file content
-     *
-     * Security Note: Basic content validation — checks magic numbers to verify
-     * the file content matches its declared MIME type.
-     *
-     * @private
-     */
-    async #validateFileContent(file) {
-        try {
-            // Read first few bytes to check magic numbers
-            const buffer = await file.slice(0, 4).arrayBuffer();
-            const bytes = new Uint8Array(buffer);
-            // Basic magic number validation for common types
-            const magicNumbers = {
-                'application/pdf': [0x25, 0x50, 0x44, 0x46], // %PDF
-                'image/jpeg': [0xFF, 0xD8, 0xFF],
-                'image/png': [0x89, 0x50, 0x4E, 0x47]
-            };
-            // If we have magic numbers for this type, validate them
-            if (magicNumbers[file.type]) {
-                const expected = magicNumbers[file.type];
-                const matches = expected.every((byte, i) => bytes[i] === byte);
-                if (!matches) {
-                    return {
-                        valid: false,
-                        error: 'File content does not match declared type'
-                    };
-                }
-            }
-            return { valid: true };
-        }
-        catch (_error) {
-            return {
-                valid: false,
-                error: 'Failed to validate file content'
-            };
-        }
-    }
-    /**
-     * Update the filename display area
-     *
-     * @private
-     */
-    #updateFileNameDisplay(files) {
-        if (!this.#fileNameDisplay)
-            return;
-        if (!files || files.length === 0) {
-            this.#fileNameDisplay.textContent = 'No file selected';
-            this.#fileNameDisplay.classList.remove('has-file');
-        }
-        else if (files.length === 1) {
-            this.#fileNameDisplay.textContent = files[0].name;
-            this.#fileNameDisplay.classList.add('has-file');
-        }
-        else {
-            this.#fileNameDisplay.textContent = `${files.length} files selected`;
-            this.#fileNameDisplay.classList.add('has-file');
-        }
-    }
-    /**
-     * Show file preview
-     *
-     * @private
-     */
-    #showPreview(files) {
-        this.#previewContainer.innerHTML = '';
-        Array.from(files).forEach((file) => {
-            const preview = document.createElement('div');
-            preview.className = 'file-preview';
-            const fileName = document.createElement('div');
-            fileName.className = 'file-name';
-            fileName.textContent = file.name;
-            const fileSize = document.createElement('div');
-            fileSize.className = 'file-size';
-            fileSize.textContent = this.#formatFileSize(file.size);
-            const removeBtn = document.createElement('button');
-            removeBtn.className = 'remove-file';
-            removeBtn.textContent = '\u2715';
-            removeBtn.type = 'button';
-            removeBtn.onclick = () => {
-                this.#removeFile();
-            };
-            preview.appendChild(fileName);
-            preview.appendChild(fileSize);
-            preview.appendChild(removeBtn);
-            this.#previewContainer.appendChild(preview);
-        });
-    }
-    /**
-     * Format file size for display
-     *
-     * @private
-     */
-    #formatFileSize(bytes) {
-        if (bytes < 1024)
-            return bytes + ' B';
-        if (bytes < 1024 * 1024)
-            return (bytes / 1024).toFixed(1) + ' KB';
-        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-    }
-    /**
-     * Remove selected file
-     *
-     * @private
-     */
-    #removeFile() {
-        this.#fileInput.value = '';
-        this.#selectedFiles = null;
-        this.#previewContainer.innerHTML = '';
-        this.#updateFileNameDisplay(null);
-        this.#clearErrors();
-        this.audit('file_removed', {
-            name: this.#fileInput.name
-        });
-    }
-    /**
-     * Show error message
-     *
-     * @private
-     */
-    #showError(message) {
-        this.#errorContainer.textContent = message;
-        this.#errorContainer.classList.remove('hidden');
-        this.#dropZone.classList.add('error');
-    }
-    /**
-     * Clear error messages
-     *
-     * @private
-     */
-    #clearErrors() {
-        this.#errorContainer.textContent = '';
-        this.#errorContainer.classList.add('hidden');
-        this.#dropZone.classList.remove('error');
-    }
-    /**
-     * Get component-specific styles
-     *
-     * This returns a placeholder that will be replaced by the css-inliner build script
-     * with the actual CSS from secure-file-upload.css using design tokens.
-     *
-     * @private
-     */
-    #getComponentStyles() {
-        return new URL('./secure-file-upload.css', import.meta.url).href;
-    }
-    /**
-     * Handle attribute changes
-     *
-     * @protected
-     */
-    handleAttributeChange(name, _oldValue, newValue) {
-        if (!this.#fileInput)
-            return;
-        switch (name) {
-            case 'disabled':
-                this.#fileInput.disabled = this.hasAttribute('disabled');
-                break;
-            case 'accept':
-                this.#fileInput.accept = newValue;
-                this.#parseAcceptTypes(newValue);
-                break;
-        }
-    }
-    /**
-     * Get selected files
-     *
-     * @public
-     */
-    get files() {
-        return this.#selectedFiles;
-    }
-    /**
-     * Get the input name
-     *
-     * @public
-     */
-    get name() {
-        return this.#fileInput ? this.#fileInput.name : '';
-    }
-    /**
-     * Check if the upload is valid
-     *
-     * @public
-     */
-    get valid() {
-        const required = this.hasAttribute('required') || this.config.validation.required;
-        if (required && (!this.#selectedFiles || this.#selectedFiles.length === 0)) {
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Clear selected files
-     *
-     * @public
-     */
-    clear() {
-        this.#removeFile();
-    }
-    /**
-     * Register a scan hook function for server-side file scanning.
-     *
-     * The hook receives each selected file and must return a Promise that
-     * resolves to `{ valid: boolean; reason?: string }`. When `valid` is
-     * false the file is rejected and the reason is shown to the user.
-     *
-     * @example
-     * ```js
-     * const upload = document.querySelector('secure-file-upload');
-     * upload.setScanHook(async (file) => {
-     *   const form = new FormData();
-     *   form.append('file', file);
-     *   const res = await fetch('/api/scan', { method: 'POST', body: form });
-     *   const { clean, threat } = await res.json();
-     *   return { valid: clean, reason: threat };
-     * });
-     * ```
-     *
-     * @public
-     */
-    setScanHook(hook) {
-        if (typeof hook !== 'function') {
-            throw new TypeError('setScanHook expects a function');
-        }
-        this.#scanHook = hook;
-        this.audit('scan_hook_registered', {
-            name: this.#fileInput?.name ?? ''
-        });
-    }
-    /**
-     * Check whether a scan hook is registered
-     *
-     * @public
-     */
-    get hasScanHook() {
-        return this.#scanHook !== null;
-    }
-    /**
-     * Check whether a scan is currently in progress
-     *
-     * @public
-     */
-    get scanning() {
-        return this.#scanning;
-    }
-    /**
-     * Cleanup on disconnect
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clear file references
-        this.#selectedFiles = null;
-        if (this.#fileInput) {
-            this.#fileInput.value = '';
-        }
-    }
-}
-// Define the custom element
-customElements.define('secure-file-upload', SecureFileUpload);
-export default SecureFileUpload;
-//# sourceMappingURL=secure-file-upload.js.map
+ */import{SecureBaseComponent as m}from"../../core/base-component.js";import{SecurityTier as o}from"../../core/security-config.js";class p extends m{#e=null;#o=null;#s=null;#a=null;#t=null;#i=null;#n=null;#c=`secure-file-upload-${Math.random().toString(36).substring(2,11)}`;#r=new Set;#l=5*1024*1024;#d=null;#h=!1;static get observedAttributes(){return[...super.observedAttributes,"name","label","accept","max-size","multiple","required","capture"]}constructor(){super()}render(){const e=document.createDocumentFragment(),t=document.createElement("div");t.className="file-upload-container",t.setAttribute("part","container");const i=this.getAttribute("label");i&&(this.#o=document.createElement("label"),this.#o.htmlFor=this.#c,this.#o.textContent=this.sanitizeValue(i),this.#o.setAttribute("part","label"),t.appendChild(this.#o)),this.#t=document.createElement("div"),this.#t.className="drop-zone",this.#t.setAttribute("part","wrapper"),this.#e=document.createElement("input"),this.#e.type="file",this.#e.id=this.#c,this.#e.className="file-input",this.#e.setAttribute("part","input"),this.#x(),this.#y();const s=document.createElement("div");s.className="drop-zone-content has-name";const n=document.createElement("span");n.className="file-cta";const r=document.createElement("span");r.className="drop-icon";const a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("width","16"),a.setAttribute("height","16"),a.setAttribute("viewBox","0 0 24 24"),a.setAttribute("fill","none"),a.setAttribute("stroke","currentColor"),a.setAttribute("stroke-width","2"),a.setAttribute("stroke-linecap","round"),a.setAttribute("stroke-linejoin","round"),a.setAttribute("aria-hidden","true"),a.setAttribute("focusable","false");const c=document.createElementNS("http://www.w3.org/2000/svg","path");c.setAttribute("d","M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4");const u=document.createElementNS("http://www.w3.org/2000/svg","polyline");u.setAttribute("points","17 8 12 3 7 8");const l=document.createElementNS("http://www.w3.org/2000/svg","line");l.setAttribute("x1","12"),l.setAttribute("y1","3"),l.setAttribute("x2","12"),l.setAttribute("y2","15"),a.appendChild(c),a.appendChild(u),a.appendChild(l),r.appendChild(a),n.appendChild(r);const d=document.createElement("span");d.className="drop-text",d.textContent="Choose a file\u2026",n.appendChild(d),s.appendChild(n),this.#i=document.createElement("span"),this.#i.className="file-name-display",this.#i.textContent="No file selected",s.appendChild(this.#i),this.#t.appendChild(this.#e),this.#t.appendChild(s),t.appendChild(this.#t);const h=document.createElement("div");return h.className="drop-hint",h.textContent=this.#w(),t.appendChild(h),this.#a=document.createElement("div"),this.#a.className="preview-container",t.appendChild(this.#a),this.#s=document.createElement("div"),this.#s.className="error-container hidden",this.#s.setAttribute("role","alert"),this.#s.setAttribute("part","error"),this.#s.id=`${this.#c}-error`,t.appendChild(this.#s),this.#e.setAttribute("aria-describedby",`${this.#c}-error`),this.addComponentStyles(this.#k()),e.appendChild(t),e}#x(){const e=this.config,t=this.getAttribute("name");t&&(this.#e.name=this.sanitizeValue(t));const i=this.getAttribute("accept");if(i)this.#e.accept=i,this.#u(i);else{const r=this.#C();this.#e.accept=r,this.#u(r)}const s=this.getAttribute("max-size");s?this.#l=parseInt(s,10):this.#l=this.#A(),this.hasAttribute("multiple")&&(this.#e.multiple=!0),(this.hasAttribute("required")||e.validation.required)&&(this.#e.required=!0);const n=this.getAttribute("capture");n&&(this.#e.capture=n),this.hasAttribute("disabled")&&(this.#e.disabled=!0)}#u(e){this.#r.clear(),e.split(",").map(i=>i.trim()).forEach(i=>{if(i.startsWith(".")){const s=this.#b(i);s&&this.#r.add(s)}else this.#r.add(i)})}#b(e){return{".pdf":"application/pdf",".doc":"application/msword",".docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document",".xls":"application/vnd.ms-excel",".xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",".ppt":"application/vnd.ms-powerpoint",".pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation",".txt":"text/plain",".csv":"text/csv",".jpg":"image/jpeg",".jpeg":"image/jpeg",".png":"image/png",".gif":"image/gif",".svg":"image/svg+xml",".zip":"application/zip",".json":"application/json"}[e.toLowerCase()]||null}#C(){switch(this.securityTier){case o.CRITICAL:return".pdf,.txt";case o.SENSITIVE:return".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png";case o.AUTHENTICATED:return".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.jpg,.jpeg,.png,.gif";case o.PUBLIC:default:return".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.jpg,.jpeg,.png,.gif,.zip"}}#A(){switch(this.securityTier){case o.CRITICAL:return 2*1024*1024;case o.SENSITIVE:return 5*1024*1024;case o.AUTHENTICATED:return 10*1024*1024;case o.PUBLIC:default:return 20*1024*1024}}#w(){const e=(this.#l/1048576).toFixed(1);return`Accepted: ${this.#e.accept||"all files"} (max ${e}MB)`}#y(){this.#e.addEventListener("change",e=>{this.#p(e)}),this.#t.addEventListener("dragover",e=>{e.preventDefault(),e.stopPropagation(),this.#t.classList.add("drag-over")}),this.#t.addEventListener("dragleave",e=>{e.preventDefault(),e.stopPropagation(),this.#t.classList.remove("drag-over")}),this.#t.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.#t.classList.remove("drag-over");const t=e;if(!t.dataTransfer)return;const i=t.dataTransfer.files;i.length>0&&(this.#e.files=i,this.#p({target:this.#e}))})}async#p(e){const t=e.target.files;if(!t||t.length===0)return;const i=this.checkRateLimit();if(!i.allowed){this.#g(`Too many upload attempts. Please wait ${Math.ceil(i.retryAfter/1e3)} seconds.`),this.#e.value="";return}this.#v();const s=await this.#E(t);if(!s.valid){this.#g(s.errors.join(", ")),this.#e.value="",this.#n=null;return}this.#n=t,this.#m(t),this.#I(t),this.audit("files_selected",{name:this.#e.name,fileCount:t.length,totalSize:Array.from(t).reduce((n,r)=>n+r.size,0)}),this.dispatchEvent(new CustomEvent("secure-file-upload",{detail:{name:this.#e.name,files:Array.from(t),tier:this.securityTier},bubbles:!0,composed:!0}))}async#E(e){const t=[];!this.#e.multiple&&e.length>1&&t.push("Only one file is allowed");for(let i=0;i<e.length;i++){const s=e[i];if(s.size>this.#l){const n=(this.#l/1048576).toFixed(1);t.push(`${s.name}: File size exceeds ${n}MB`);continue}if(this.#r.size>0&&!this.#S(s)){t.push(`${s.name}: File type not allowed`);continue}if(this.#T(s.name)){t.push(`${s.name}: Invalid file name`);continue}if(this.securityTier===o.CRITICAL){const n=await this.#F(s);if(!n.valid){t.push(`${s.name}: ${n.error}`);continue}}if(this.#d){const n=await this.#N(s);if(!n.valid){t.push(`${s.name}: ${n.reason||"Rejected by scan"}`);continue}}}return{valid:t.length===0,errors:t}}#S(e){if(this.#r.has(e.type))return!0;for(const t of this.#r)if(t.endsWith("/*")){const i=t.slice(0,-2);if(e.type.startsWith(i))return!0}return!1}#T(e){return!!(e.includes("..")||e.includes("/")||e.includes("\\")||["web.config",".htaccess",".env","config.php"].includes(e.toLowerCase()))}async#N(e){this.#h=!0,this.#L(e.name),this.audit("scan_started",{name:this.#e?.name??"",fileName:e.name,fileSize:e.size});try{const t=await this.#d(e);return this.audit(t.valid?"scan_passed":"scan_rejected",{name:this.#e?.name??"",fileName:e.name,reason:t.reason??""}),t}catch(t){const i=t instanceof Error?t.message:"Scan failed";return this.audit("scan_error",{name:this.#e?.name??"",fileName:e.name,error:i}),{valid:!1,reason:`Scan error: ${i}`}}finally{this.#h=!1,this.#z()}}#L(e){this.#t&&this.#t.classList.add("scanning"),this.#e&&(this.#e.disabled=!0),this.#i&&(this.#i.textContent=`Scanning ${e}\u2026`)}#z(){this.#t&&this.#t.classList.remove("scanning"),this.#e&&!this.hasAttribute("disabled")&&(this.#e.disabled=!1)}async#F(e){try{const t=await e.slice(0,4).arrayBuffer(),i=new Uint8Array(t),s={"application/pdf":[37,80,68,70],"image/jpeg":[255,216,255],"image/png":[137,80,78,71]};return s[e.type]&&!s[e.type].every((a,c)=>i[c]===a)?{valid:!1,error:"File content does not match declared type"}:{valid:!0}}catch{return{valid:!1,error:"Failed to validate file content"}}}#m(e){this.#i&&(!e||e.length===0?(this.#i.textContent="No file selected",this.#i.classList.remove("has-file")):e.length===1?(this.#i.textContent=e[0].name,this.#i.classList.add("has-file")):(this.#i.textContent=`${e.length} files selected`,this.#i.classList.add("has-file")))}#I(e){this.#a.innerHTML="",Array.from(e).forEach(t=>{const i=document.createElement("div");i.className="file-preview";const s=document.createElement("div");s.className="file-name",s.textContent=t.name;const n=document.createElement("div");n.className="file-size",n.textContent=this.#j(t.size);const r=document.createElement("button");r.className="remove-file",r.textContent="\u2715",r.type="button",r.onclick=()=>{this.#f()},i.appendChild(s),i.appendChild(n),i.appendChild(r),this.#a.appendChild(i)})}#j(e){return e<1024?e+" B":e<1024*1024?(e/1024).toFixed(1)+" KB":(e/(1024*1024)).toFixed(1)+" MB"}#f(){this.#e.value="",this.#n=null,this.#a.innerHTML="",this.#m(null),this.#v(),this.audit("file_removed",{name:this.#e.name})}#g(e){this.#s.textContent=e,this.#s.classList.remove("hidden"),this.#t.classList.add("error")}#v(){this.#s.textContent="",this.#s.classList.add("hidden"),this.#t.classList.remove("error")}#k(){return new URL("./secure-file-upload.css",import.meta.url).href}handleAttributeChange(e,t,i){if(this.#e)switch(e){case"disabled":this.#e.disabled=this.hasAttribute("disabled");break;case"accept":this.#e.accept=i,this.#u(i);break}}get files(){return this.#n}get name(){return this.#e?this.#e.name:""}get valid(){return!((this.hasAttribute("required")||this.config.validation.required)&&(!this.#n||this.#n.length===0))}clear(){this.#f()}setScanHook(e){if(typeof e!="function")throw new TypeError("setScanHook expects a function");this.#d=e,this.audit("scan_hook_registered",{name:this.#e?.name??""})}get hasScanHook(){return this.#d!==null}get scanning(){return this.#h}disconnectedCallback(){super.disconnectedCallback(),this.#n=null,this.#e&&(this.#e.value="")}}customElements.define("secure-file-upload",p);var x=p;export{p as SecureFileUpload,x as default};