udp-stencil-component-library 25.18.2-beta.9 → 25.18.3-beta.1

package/dist/components/file-upload2.js

@@ -1,991 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './index2.js';
-import Close24 from '@carbon/icons/es/close/24';
-import axios from 'axios';
-import { i as isFileReference, p as parseFileReferences, g as getMimeTypeFromExtension } from './udp-drive-utils.js';
-import { d as defineCustomElement$5 } from './custom-button2.js';
-import { d as defineCustomElement$4 } from './stencil-icon-button2.js';
-import { d as defineCustomElement$3 } from './udp-ambient-tool-tip2.js';
-import { d as defineCustomElement$2 } from './udp-badge2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-import { C as ConfigService } from './configService.js';
-
-const fileUploadCss = "#drop-area{min-height:200px;height:auto;border:2px dashed #ccc;border-radius:5px;padding:20px;text-align:center;font-family:Arial, sans-serif;overflow:hidden;margin-top:10px;margin-bottom:10px}#outer-container{padding:10px 5px;display:flex;justify-content:center}#drop-area.highlight{border-color:var(--primary-color)}#error-text{color:var(--error-color-main)}#add-button{border-radius:5}#remove-button{width:10px;height:10px;margin-left:5px;border:'none';background:'none';cursor:'pointer'}.file-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.full-width{width:auto}.contained-width{width:300px}.file-text{float:none}.file-list{display:flex;flex-direction:column;align-items:center;gap:6px}.inner-container{display:flex;justify-content:center;flex-direction:row}.container{display:flex;flex-direction:row;justify-content:center;overflow-y:auto}.image-preview-container{position:relative;width:100%;min-height:200px;height:240px;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;margin-top:12px}.image-remove-button{background-color:white}.image-preview-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.image-preview{max-width:100%;max-height:100%;object-fit:contain;display:block}.image-preview-actions{position:absolute;top:8px;right:8px;display:flex;gap:8px}.image-modal-backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);display:flex;align-items:center;justify-content:center;z-index:9999}.image-modal-content{position:relative;max-width:90vw;max-height:90vh;background:#000;border-radius:8px;overflow:hidden}.image-modal-content img{display:block;max-width:90vw;max-height:90vh;object-fit:contain}.image-modal-close{position:absolute;top:8px;right:8px}";
-
-const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.change = createEvent(this, "change");
-        /**
-         * Whether the component should take the full width of its container.
-         */
-        this.fullWidth = false;
-        /**
-         * Message displayed in the drag-and-drop area. Customizes the user guidance text.
-         */
-        this.dragAndDropMessage = 'Drag and drop your files here';
-        /**
-         * Text displayed on the browse files button. Customizes the button label.
-         */
-        this.browseFileMessage = 'Browse Files';
-        /**
-         * Whether to hide the drag-and-drop area. When true, only the browse button is shown.
-         */
-        this.hideDragAndDrop = false;
-        /**
-         * Whether to hide the browse files button. When true, only drag-and-drop is available.
-         */
-        this.hideButton = false;
-        /**
-         * When true, all interactions with the component are disabled.
-         */
-        this.disabled = false;
-        /**
-         * When true, the component is in a read-only state. Files can be viewed and downloaded, but not added or removed.
-         */
-        this.readonly = false;
-        /**
-         * If true, and if the file is a renderable type (e.g., an image), a preview will be displayed.
-         * This is only applicable when `allowMultiple` is false.
-         */
-        this.renderImage = false;
-        /**
-         * Array of currently selected/uploaded files. Managed internally by the component.
-         * @internal
-         */
-        this.files = [];
-        /**
-         * Whether the file browser window is currently open. Used for UI state management.
-         * @internal
-         */
-        this.fileWindowOpen = false;
-        /**
-         * Map of file names to their original UdpDriveFile references.
-         * Tracks which files are existing (saved) vs new (to be uploaded).
-         * @internal
-         */
-        this.existingFileReferences = new Map();
-        /**
-         * URL for the image preview, if applicable.
-         * @internal
-         */
-        this.imagePreviewUrl = null;
-        /**
-         * Controls visibility of the full-size image modal when previewing images.
-         * @internal
-         */
-        this.isImageModalOpen = false;
-        /**
-         * Tracks whether the component has been initialized to prevent re-running setup logic.
-         * @internal
-         */
-        this.isInitialized = false;
-        /**
-         * Counter for drag events to properly handle drag enter/leave. Prevents flickering.
-         * @internal
-         */
-        this.dragCounter = 0;
-        /**
-         * Handles drag over events. Prevents default behavior to allow drop.
-         * @param event - Drag event
-         * @internal
-         */
-        this.handleDragOver = (event) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-        };
-        /**
-         * Handles drag enter events. Adds highlight styling to drop area.
-         * @param event - Drag event
-         * @internal
-         */
-        this.handleDragEnter = (event) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            const dropArea = event.currentTarget;
-            this.dragCounter++;
-            dropArea.classList.add('highlight');
-        };
-        /**
-         * Handles drag leave events. Removes highlight styling when drag exits.
-         * @param event - Drag event
-         * @internal
-         */
-        this.handleDragLeave = (event) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            const dropArea = event.currentTarget;
-            this.dragCounter--;
-            if (this.dragCounter === 0) {
-                dropArea.classList.remove('highlight');
-            }
-        };
-        /**
-         * Handles drop events. Processes dropped files and adds them to the component.
-         * @param event - Drop event
-         * @internal
-         */
-        this.handleDrop = (event) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            const dropArea = event.currentTarget;
-            dropArea.classList.remove('highlight');
-            const files = event.dataTransfer.files;
-            this.handleFiles(files);
-        };
-        /**
-         * Handles file input change events from the hidden input element.
-         * @param event - Input change event
-         * @internal
-         */
-        this.handleFileInput = (event) => {
-            const input = event.target;
-            if (input.files && input.files.length > 0) {
-                this.handleFiles(input.files);
-            }
-            // Reset the input value so the same file can be selected again
-            input.value = '';
-            this.fileWindowOpen = false;
-        };
-        /**
-         * Processes a FileList and adds valid files to the component.
-         * Handles validation and multiple file constraints.
-         * @param files - FileList from input or drop event
-         * @internal
-         */
-        this.handleFiles = (files) => {
-            if (files.length === 0)
-                return;
-            const currentFiles = [...this.files];
-            const newValidFiles = [];
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
-                // Validate file name
-                if (!file.name || file.name.trim() === '') {
-                    continue;
-                }
-                // Check for duplicates
-                const isDuplicate = currentFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
-                if (isDuplicate) {
-                    continue;
-                }
-                // Validate file type if restrictions are set
-                if (!this.isFileTypeAllowed(file)) {
-                    continue;
-                }
-                newValidFiles.push(file);
-                // If not allowing multiple files, only take the first valid file
-                if (!this.allowMultiple) {
-                    break;
-                }
-            }
-            if (newValidFiles.length > 0) {
-                if (this.allowMultiple) {
-                    this.files = [...currentFiles, ...newValidFiles];
-                }
-                else {
-                    // Replace existing files if not allowing multiple
-                    this.files = [newValidFiles[0]];
-                }
-                this.updateImagePreview();
-                // Manually emit events since we're not using @Watch('files') anymore
-                this.emitFileChangeEvents();
-            }
-        };
-        /**
-         * Handles browse files button click. Opens the file browser dialog.
-         * @param event - Click event
-         * @internal
-         */
-        this.handleBrowseFiles = (event) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            // Ensure hiddenInput is initialized before trying to use it
-            if (!this.hiddenInput) {
-                console.error('File input not initialized yet, attempting to create it now...');
-                // Try to create it on-demand as a fallback
-                try {
-                    this.hiddenInput = document.createElement('input');
-                    this.hiddenInput.type = 'file';
-                    this.hiddenInput.multiple = this.allowMultiple;
-                    this.hiddenInput.style.display = 'none';
-                    this.hiddenInput.addEventListener('change', this.handleFileInput);
-                    document.body.appendChild(this.hiddenInput);
-                }
-                catch (error) {
-                    console.error('Failed to create file input:', error);
-                    return;
-                }
-            }
-            this.fileWindowOpen = true;
-            this.hiddenInput.click();
-        };
-        /**
-         * Removes a file from the component by index. Updates internal state and cleans up references.
-         * @param index - Index of file to remove
-         * @internal
-         */
-        this.handleRemoveFile = (index) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            const fileToRemove = this.files[index];
-            // Clean up existing file reference if it exists
-            if (this.existingFileReferences.has(fileToRemove.name)) {
-                this.existingFileReferences.delete(fileToRemove.name);
-            }
-            this.files.splice(index, 1);
-            this.files = [...this.files];
-            this.updateImagePreview();
-            // If the preview image was removed, ensure any open modal is closed
-            if (!this.files.length) {
-                this.isImageModalOpen = false;
-            }
-            // Manually emit events since we're not using @Watch('files') anymore
-            this.emitFileChangeEvents();
-        };
-        /**
-         * Opens the full-screen image modal if a preview is available.
-         * @internal
-         */
-        this.openImageModal = () => {
-            if (this.imagePreviewUrl && !this.disabled) {
-                this.isImageModalOpen = true;
-            }
-        };
-        /**
-         * Closes the full-screen image modal.
-         * @internal
-         */
-        this.closeImageModal = (e) => {
-            if (e) {
-                e.stopPropagation();
-                e.preventDefault();
-            }
-            this.isImageModalOpen = false;
-        };
-    }
-    /**
-     * Updates the error message when the error prop changes.
-     * @internal
-     */
-    updateError() {
-        this.errorMessage = this.error;
-    }
-    /**
-     * Watches for changes to initialValue prop and processes the new files.
-     * Handles conversion of UdpDriveFile objects to File objects.
-     * @param newValue - New initial value containing files to process
-     * @internal
-     */
-    async initialValueChanged(newValue) {
-        var _a, _b, _c, _d, _e;
-        // Ignore event detail objects from self-emission to prevent cycles
-        if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue) {
-            return;
-        }
-        // Handle empty or null values by clearing the component
-        if (!newValue) {
-            this.files = [];
-            this.updateImagePreview();
-            this.existingFileReferences.clear();
-            return;
-        }
-        try {
-            this.existingFileReferences.clear();
-            let processedFiles = [];
-            // Case 1: The value is a special reference string
-            if (typeof newValue === 'string' && isFileReference(newValue)) {
-                // Parse references into placeholder File objects enriched with UDP metadata when present
-                const parsed = await parseFileReferences(newValue);
-                const singleMode = !this.allowMultiple;
-                const shouldEager = this.renderImage && singleMode && parsed.length > 0;
-                if (shouldEager) {
-                    // If image-like and UDP info present, eagerly download first for preview
-                    const first = parsed[0];
-                    const guessedMime = (first === null || first === void 0 ? void 0 : first.type) || this.getMimeTypeFromExtension((first === null || first === void 0 ? void 0 : first.extension) || ((_b = (_a = first === null || first === void 0 ? void 0 : first.name) === null || _a === void 0 ? void 0 : _a.split('.')) === null || _b === void 0 ? void 0 : _b.pop()) || '');
-                    const looksImage = this.isRenderableImageFromNameOrMime(first === null || first === void 0 ? void 0 : first.name, guessedMime);
-                    if (looksImage && (first === null || first === void 0 ? void 0 : first.driveFileId)) {
-                        try {
-                            const udpMeta = {
-                                driveFileId: first.driveFileId,
-                                name: first.name,
-                                extension: first.extension || (((_d = (_c = first.name) === null || _c === void 0 ? void 0 : _c.split('.')) === null || _d === void 0 ? void 0 : _d.pop()) || ''),
-                            };
-                            const fetched = await this.createFileFromUdpDriveFile(udpMeta);
-                            this.existingFileReferences.set(fetched.name, udpMeta);
-                            processedFiles = [fetched];
-                        }
-                        catch (e) {
-                            console.warn('Eager image fetch from reference failed, using placeholders:', e);
-                        }
-                    }
-                }
-                if (!processedFiles || processedFiles.length === 0) {
-                    processedFiles = parsed;
-                    // Populate existing references map
-                    for (const file of processedFiles) {
-                        if (file.driveFileId) {
-                            const udpFile = {
-                                driveFileId: file.driveFileId,
-                                name: file.name,
-                                extension: file.extension || ((_e = file.name.split('.')) === null || _e === void 0 ? void 0 : _e.pop()) || '',
-                                tenantId: null,
-                                productId: 0,
-                                path: '',
-                            };
-                            this.existingFileReferences.set(file.name, udpFile);
-                        }
-                    }
-                }
-            }
-            // Case 2: The value is an array of File or UdpDriveFile objects
-            else if (Array.isArray(newValue)) {
-                const files = await Promise.all(newValue.map(file => this.processInitialFile(file)));
-                processedFiles = files.filter(file => file !== null);
-            }
-            // Case 3: The value is a single File or UdpDriveFile object
-            else if (typeof newValue === 'object') {
-                const file = await this.processInitialFile(newValue);
-                processedFiles = file ? [file] : [];
-            }
-            this.files = processedFiles;
-            this.updateImagePreview();
-            this.updateValueProp();
-        }
-        catch (error) {
-            console.error('Error processing initial files:', error);
-            this.files = [];
-            this.updateImagePreview();
-            this.existingFileReferences.clear();
-        }
-    }
-    /**
-     * Process an initial file, converting UdpDriveFile to File if needed.
-     * Creates placeholder File objects for existing UDP Drive files.
-     * @param file - File to process (UdpDriveFile or File)
-     * @returns Promise resolving to a File object or null if invalid
-     * @internal
-     */
-    async processInitialFile(file) {
-        // Handle null/undefined input
-        console.log(file);
-        if (!file) {
-            return null;
-        }
-        if (this.isUdpDriveFile(file)) {
-            // If we need to render an image (single-image mode), eagerly fetch actual file content
-            const guessedMime = this.getMimeTypeFromExtension(file.extension);
-            const shouldEagerFetch = this.renderImage && !this.allowMultiple && this.isRenderableImageFromNameOrMime(file.name, guessedMime);
-            if (shouldEagerFetch) {
-                try {
-                    const actualFile = await this.createFileFromUdpDriveFile(file);
-                    this.existingFileReferences.set(actualFile.name, file);
-                    return actualFile;
-                }
-                catch (error) {
-                    console.warn('Eager fetch failed, using placeholder:', error);
-                    // Fall through to placeholder creation
-                }
-            }
-            // Otherwise create a lightweight placeholder and track reference
-            try {
-                const placeholderFile = this.createPlaceholderFileFromUdpDriveFile(file);
-                this.existingFileReferences.set(placeholderFile.name, file);
-                return placeholderFile;
-            }
-            catch (error) {
-                console.error('Error creating placeholder file from UdpDriveFile:', error);
-                return null;
-            }
-        }
-        else if (file instanceof File) {
-            // Already a File object - this is a new file
-            return file;
-        }
-        else {
-            // Invalid object, return null
-            return null;
-        }
-    }
-    /**
-     * Type guard to check if a file is a UdpDriveFile.
-     * @param file - File object to check
-     * @returns True if the file is a UdpDriveFile
-     * @internal
-     */
-    isUdpDriveFile(file) {
-        return file && typeof file === 'object' && 'driveFileId' in file;
-    }
-    /**
-     * Create a placeholder File object from UdpDriveFile without downloading content.
-     * Used for display purposes and consistent File API.
-     * @param udpFile - UdpDriveFile to convert
-     * @returns Placeholder File object
-     * @internal
-     */
-    createPlaceholderFileFromUdpDriveFile(udpFile) {
-        // Ensure we have required properties with fallbacks
-        const extension = udpFile.extension || 'bin';
-        const fileName = udpFile.name || `file.${extension}`;
-        const placeholderBlob = new Blob([''], { type: this.getMimeTypeFromExtension(extension) });
-        // Handle lastUpdated as either Date, string, or number
-        let lastModified = Date.now();
-        if (udpFile.lastUpdated) {
-            if (typeof udpFile.lastUpdated === 'string' || typeof udpFile.lastUpdated === 'number') {
-                lastModified = new Date(udpFile.lastUpdated).getTime();
-            }
-            else if (udpFile.lastUpdated instanceof Date) {
-                lastModified = udpFile.lastUpdated.getTime();
-            }
-        }
-        const file = new File([placeholderBlob], fileName, {
-            type: placeholderBlob.type,
-            lastModified: lastModified
-        });
-        return file;
-    }
-    /**
-     * Create a File object from UdpDriveFile by downloading the content from the server.
-     * Used when downloading existing files for user access.
-     * @param udpFile - UdpDriveFile to download and convert
-     * @returns Promise resolving to a File object with downloaded content
-     * @internal
-     */
-    async createFileFromUdpDriveFile(udpFile) {
-        try {
-            const downloadUrl = `${ConfigService.tenantV1ApiUrl}/UdpDrive/${udpFile.driveFileId}/stream`;
-            const response = await axios({
-                method: 'GET',
-                url: downloadUrl,
-                responseType: 'blob',
-                timeout: 300000, // 5 minutes
-                headers: {
-                // Add authentication headers if needed
-                // 'Authorization': `Bearer ${accessToken}`
-                }
-            });
-            const blob = response.data;
-            // Create a File object with the downloaded content
-            // Use the udpFile.name or construct from extension
-            const fileName = udpFile.name || `file.${udpFile.extension}`;
-            return new File([blob], fileName, {
-                type: blob.type || this.getMimeTypeFromExtension(udpFile.extension),
-                lastModified: udpFile.lastUpdated ? new Date(udpFile.lastUpdated).getTime() : Date.now()
-            });
-        }
-        catch (error) {
-            console.error('Error creating file from UdpDriveFile:', error);
-            // Return a placeholder file if download fails
-            const fileName = udpFile.name || `file.${udpFile.extension}`;
-            return new File([''], fileName, { type: 'application/octet-stream' });
-        }
-    }
-    async updateImagePreview() {
-        if (this.renderImage && !this.allowMultiple && this.files.length > 0) {
-            const file = this.files[0];
-            if (this.isImageFile(file)) {
-                // Revoke any prior URL to prevent memory leaks
-                if (this.imagePreviewUrl) {
-                    try {
-                        URL.revokeObjectURL(this.imagePreviewUrl);
-                    }
-                    catch (_a) { }
-                }
-                // Create a URL for the image preview
-                this.imagePreviewUrl = URL.createObjectURL(file);
-            }
-            else {
-                this.imagePreviewUrl = null;
-            }
-        }
-        else {
-            this.imagePreviewUrl = null;
-        }
-    }
-    /**
-     * Checks if a file is an image based on its MIME type.
-     * @param file - The file to check.
-     * @returns True if the file is an image, false otherwise.
-     * @internal
-     */
-    isImageFile(file) {
-        return !!file && file.type.startsWith('image/') && file.size > 0;
-    }
-    /**
-     * Get MIME type from file extension for proper file type handling.
-     * @param extension - File extension without dot (e.g., "pdf", "jpg")
-     * @returns MIME type string
-     * @internal
-     */
-    getMimeTypeFromExtension(extension) {
-        // Handle null/undefined extension
-        if (!extension) {
-            return 'application/octet-stream';
-        }
-        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',
-            'json': 'application/json',
-            'xml': 'application/xml',
-            'html': 'text/html',
-            'css': 'text/css',
-            'js': 'application/javascript',
-            'png': 'image/png',
-            'jpg': 'image/jpeg',
-            'jpeg': 'image/jpeg',
-            'gif': 'image/gif',
-            'svg': 'image/svg+xml',
-            'zip': 'application/zip',
-            'rar': 'application/x-rar-compressed',
-            '7z': 'application/x-7z-compressed'
-        };
-        return mimeTypes[extension.toLowerCase()] || 'application/octet-stream';
-    }
-    /**
-     * Determine if a resource name/mime pair represents a renderable image.
-     * Used when deciding to eagerly fetch UDP Drive images for preview.
-     * @internal
-     */
-    isRenderableImageFromNameOrMime(name, mime) {
-        var _a, _b;
-        if (mime && mime.toLowerCase().startsWith('image/'))
-            return true;
-        const ext = (_b = (_a = name === null || name === void 0 ? void 0 : name.split('.')) === null || _a === void 0 ? void 0 : _a.pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-        if (!ext)
-            return false;
-        const imageExts = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp']);
-        return imageExts.has(ext);
-    }
-    /**
-     * Component lifecycle method. Initializes the component and sets up file input.
-     * @internal
-     */
-    async componentWillLoad() {
-        // Prevent re-initialization if component is already initialized
-        if (this.isInitialized) {
-            return;
-        }
-        // Initialize hidden file input FIRST before any async operations
-        this.dragCounter = 0;
-        this.hiddenInput = document.createElement('input');
-        this.hiddenInput.type = 'file';
-        this.hiddenInput.multiple = this.allowMultiple;
-        this.hiddenInput.style.display = 'none';
-        this.hiddenInput.addEventListener('change', this.handleFileInput);
-        document.body.appendChild(this.hiddenInput);
-        // Validate prop combinations - new MIME type props take precedence
-        if (this.allowedMimeTypes && this.disallowedMimeTypes) {
-            throw new Error('allowedMimeTypes and disallowedMimeTypes are mutually exclusive, you cannot use both props');
-        }
-        // Legacy validation for deprecated props (only if new props aren't used)
-        if (!this.allowedMimeTypes && !this.disallowedMimeTypes) {
-            if (this.allowedFileTypes && this.disallowedFileTypes) {
-                throw new Error('allowedFileTypes and disallowedFileTypes are mutually exclusive, you cannot use both props');
-            }
-        }
-        // Show deprecation warnings if old props are used
-        if (this.allowedFileTypes) {
-            console.warn('allowedFileTypes prop is deprecated. Use allowedMimeTypes for better security and validation.');
-        }
-        if (this.disallowedFileTypes) {
-            console.warn('disallowedFileTypes prop is deprecated. Use disallowedMimeTypes for better security and validation.');
-        }
-        if (this.error) {
-            this.errorMessage = this.error;
-        }
-        // Now do async operations after hiddenInput is ready
-        // Initialize from initialValue (stencil-field usage) or value prop (direct usage)
-        // Priority: initialValue > value > empty
-        if (this.initialValue !== undefined && this.initialValue !== null && this.initialValue !== '') {
-            await this.initialValueChanged(this.initialValue);
-        }
-        else if (this.value !== undefined && this.value !== null) {
-            // When value is passed as a prop, it's an object with a files array
-            if (this.value.files) {
-                await this.processValueProp(this.value.files);
-            }
-        }
-        // Mark as initialized
-        this.isInitialized = true;
-    }
-    /**
-     * Process the value prop (used during initialization only)
-     * @param newValue - Value prop content
-     * @internal
-     */
-    async processValueProp(newValue) {
-        if (newValue === null || newValue === undefined) {
-            this.files = [];
-            return;
-        }
-        // Check if this looks like an event detail object (has value, files, toString, valueOf properties)
-        // If so, ignore it since this is from our own updateValueProp, not external initialization
-        if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue && 'toString' in newValue) {
-            return;
-        }
-        try {
-            if (Array.isArray(newValue)) {
-                if (newValue.length === 0) {
-                    this.files = [];
-                    return;
-                }
-                // Process each item in the array
-                const processedFiles = [];
-                for (const item of newValue) {
-                    // Process the item and filter out nulls from invalid objects
-                    const processedFile = await this.processInitialFile(item);
-                    if (processedFile) {
-                        processedFiles.push(processedFile);
-                    }
-                }
-                this.files = processedFiles;
-            }
-            else {
-                // Single value
-                const processedFile = await this.processInitialFile(newValue);
-                if (processedFile) {
-                    this.files = [processedFile];
-                }
-                else {
-                    this.files = [];
-                }
-            }
-            // Update value prop after initialization (but don't emit events)
-            this.updateValueProp();
-        }
-        catch (error) {
-            console.error('Error in processValueProp:', error);
-            this.files = [];
-        }
-    }
-    /**
-     * Manually emit events when files change due to user interaction.
-     * This replaces the automatic @Watch('files') to avoid circular updates.
-     * @internal
-     */
-    emitFileChangeEvents() {
-        // Update the mutable value prop for non-stencil-field usage
-        this.updateValueProp();
-        // Separate new files (to be uploaded) from existing files (already on server)
-        const newFiles = this.files.filter(file => !this.existingFileReferences.has(file.name));
-        const existingFiles = this.files.filter(file => this.existingFileReferences.has(file.name));
-        // If no files at all, emit null instead of empty string
-        if (newFiles.length === 0 && existingFiles.length === 0) {
-            // Emit null to indicate no files
-            this.change.emit(null);
-            //this.input.emit(null);
-            return;
-        }
-        // Create a structured value that includes both string representation and File objects
-        // This allows the form handler to extract the files while maintaining string serialization
-        const fileReferences = [];
-        newFiles.forEach(file => {
-            // Ensure file has a valid name before adding to references
-            if (file.name && file.name.trim() !== '') {
-                fileReferences.push(file.name.trim());
-            }
-        });
-        existingFiles.forEach(file => {
-            if (file.name && file.name.trim() !== '') {
-                const udpDriveFile = this.existingFileReferences.get(file.name);
-                if (udpDriveFile) {
-                    fileReferences.push(`${file.name.trim()}|udp:${udpDriveFile.driveFileId}`);
-                }
-            }
-        });
-        const combinedValue = fileReferences.join(',');
-        // Create a special value object that contains both the string and the files
-        // This allows generic handling while preserving File objects for upload
-        const detailValue = {
-            toString: () => combinedValue, // For string serialization
-            valueOf: () => combinedValue, // For primitive conversion
-            value: combinedValue, // Explicit string value
-            files: newFiles.filter(file => file.name && file.name.trim() !== '') // Only include files with valid names
-        };
-        // Emit standard events using Stencil's @Event() decorators
-        this.change.emit(detailValue);
-    }
-    /**
-     * Update the mutable value prop to reflect current files.
-     * For direct usage, we want to include all files (new and existing).
-     * @internal
-     */
-    updateValueProp() {
-        // This method is now handled by emitFileChangeEvents to avoid direct prop mutation
-    }
-    /**
-     * Validates if a file type is allowed based on component configuration.
-     * @param file - File to validate
-     * @returns True if file type is allowed
-     * @internal
-     */
-    /**
-     * Validates if a file type is allowed based on component configuration.
-     * Uses MIME types for primary validation with fallback to file extensions.
-     * @param file - File to validate
-     * @returns True if file type is allowed
-     * @internal
-     */
-    isFileTypeAllowed(file) {
-        var _a;
-        if (!file.name) {
-            return false;
-        }
-        const extension = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        const mimeType = file.type || getMimeTypeFromExtension(extension);
-        // Primary validation: Use MIME types if specified (recommended approach)
-        if (this.allowedMimeTypes && this.allowedMimeTypes.length > 0) {
-            return this.allowedMimeTypes.some(allowedType => this.isMimeTypeMatch(mimeType, allowedType));
-        }
-        if (this.disallowedMimeTypes && this.disallowedMimeTypes.length > 0) {
-            return !this.disallowedMimeTypes.some(disallowedType => this.isMimeTypeMatch(mimeType, disallowedType));
-        }
-        // Fallback to legacy extension-based validation (deprecated)
-        if (!extension) {
-            return false;
-        }
-        // If allowedFileTypes is set, only allow those types
-        if (this.allowedFileTypes && this.allowedFileTypes.length > 0) {
-            return this.allowedFileTypes.map(type => type.toLowerCase()).includes(extension);
-        }
-        // If disallowedFileTypes is set, reject those types
-        if (this.disallowedFileTypes && this.disallowedFileTypes.length > 0) {
-            return !this.disallowedFileTypes.map(type => type.toLowerCase()).includes(extension);
-        }
-        // If no restrictions, allow all types
-        return true;
-    }
-    /**
-     * Check if a MIME type matches an allowed/disallowed pattern.
-     * Supports wildcard patterns like "image/*" and exact matches.
-     * @param mimeType - MIME type to check
-     * @param pattern - Pattern to match against
-     * @returns True if MIME type matches pattern
-     * @internal
-     */
-    isMimeTypeMatch(mimeType, pattern) {
-        if (!mimeType || !pattern) {
-            return false;
-        }
-        // Exact match
-        if (mimeType.toLowerCase() === pattern.toLowerCase()) {
-            return true;
-        }
-        // Wildcard pattern (e.g., "image/*", "text/*")
-        if (pattern.endsWith('/*')) {
-            const baseType = pattern.slice(0, -2).toLowerCase();
-            return mimeType.toLowerCase().startsWith(baseType + '/');
-        }
-        return false;
-    }
-    /**
-     * Triggers download of a file. Handles both new files and existing UDP Drive files.
-     * For UDP Drive files, downloads the content from the server first.
-     * @param file - File to download
-     * @internal
-     */
-    async downloadFile(file) {
-        if (this.disabled) {
-            return;
-        }
-        try {
-            // Check if this is a placeholder for a UdpDriveFile
-            const udpDriveFile = this.existingFileReferences.get(file.name);
-            if (udpDriveFile) {
-                // Download the actual file content from UdpDrive
-                const actualFile = await this.createFileFromUdpDriveFile(udpDriveFile);
-                // Create a temporary URL for the downloaded file
-                const url = URL.createObjectURL(actualFile);
-                // Create a temporary anchor element to trigger download
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = actualFile.name;
-                a.style.display = 'none';
-                // Add to DOM, click, and remove
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                // Clean up the temporary URL
-                URL.revokeObjectURL(url);
-            }
-            else {
-                // Regular file - create download directly
-                const url = URL.createObjectURL(file);
-                // Create a temporary anchor element to trigger download
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = file.name;
-                a.style.display = 'none';
-                // Add to DOM, click, and remove
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                // Clean up the temporary URL
-                URL.revokeObjectURL(url);
-            }
-        }
-        catch (error) {
-            console.error('Error downloading file:', error);
-        }
-    }
-    /**
-     * Component lifecycle method. Cleans up the hidden file input.
-     * @internal
-     */
-    disconnectedCallback() {
-        if (this.hiddenInput) {
-            document.body.removeChild(this.hiddenInput);
-            this.hiddenInput = null;
-        }
-        // Clean up any object URLs
-        if (this.imagePreviewUrl) {
-            try {
-                URL.revokeObjectURL(this.imagePreviewUrl);
-            }
-            catch (_a) { }
-            this.imagePreviewUrl = null;
-        }
-    }
-    /**
-     * Renders the file upload component with drag-and-drop area, browse button, and file list.
-     * @returns JSX element or null if not ready
-     * @internal
-     */
-    render() {
-        // if (!this.hiddenInput) {
-        //   return null;
-        // }
-        const isError = !!this.errorMessage;
-        const showImageOnly = this.renderImage && !this.allowMultiple && !!this.imagePreviewUrl;
-        // Image-only mode: render minimal DOM
-        if (showImageOnly) {
-            return (h(Host, { class: {
-                    'udp-input': true,
-                    'udp-input--error': isError,
-                    'udp-input--full-width': this.fullWidth,
-                    'udp-input--disabled': this.disabled,
-                    'udp-input--readonly': this.readonly,
-                }, "aria-invalid": isError ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { class: "image-preview-container", onClick: this.openImageModal }, h("div", { class: "image-preview-inner" }, h("img", { src: this.imagePreviewUrl, alt: "Image preview", class: "image-preview" })), h("div", { class: "image-preview-actions", onClick: (e) => e.stopPropagation() }, h("stencil-icon-button", { showLabel: false, icon: Close24, onClick: () => this.handleRemoveFile(0), disabled: this.disabled || this.readonly }))), this.isImageModalOpen && this.imagePreviewUrl && (h("div", { class: "image-modal-backdrop", onClick: this.closeImageModal }, h("div", { class: "image-modal-content", onClick: (e) => e.stopPropagation() }, h("img", { src: this.imagePreviewUrl, alt: "Full image" }), h("div", { class: "image-modal-close" }, h("stencil-icon-button", { showLabel: false, icon: Close24, onClick: this.closeImageModal }))))), this.errorMessage && !this.fileWindowOpen ? (h("div", { id: "error-text" }, h("unity-typography", { color: "error" }, this.errorMessage))) : ('')));
-        }
-        // Default mode
-        const outerContainerId = !this.hideDragAndDrop ? 'drop-area' : 'outer-container';
-        return (h(Host, { class: {
-                'udp-input': true,
-                'udp-input--error': isError,
-                'udp-input--full-width': this.fullWidth,
-                'udp-input--disabled': this.disabled,
-                'udp-input--readonly': this.readonly,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { id: outerContainerId, onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, class: !this.hideDragAndDrop ? (this.fullWidth ? 'full-width' : 'contained-width') : '' }, !this.hideDragAndDrop ? (h("unity-typography", null, h("p", null, this.dragAndDropMessage), !this.hideButton ? h("p", null, "or") : '')) : (''), !this.hideButton ? (h("custom-button", { label: this.browseFileMessage, onClick: (e) => this.handleBrowseFiles(e), id: 'udpRecord-file-upload-' + this.id, disabled: this.disabled || this.readonly,
-            //@ts-ignore
-            udprecordid: 'udpRecord-file-upload-' + this.id })) : (''), this.files.length > 0 && (h("div", { class: "file-list" }, this.files.map((file, index) => {
-            const isExistingFile = this.existingFileReferences.has(file.name);
-            return (h("div", { class: "file-container", key: index }, h("div", { class: "file-text", onClick: () => this.downloadFile(file), style: { cursor: this.disabled ? 'not-allowed' : 'pointer', textDecoration: 'underline' } }, h("unity-typography", null, file.name, isExistingFile && h("span", { style: { fontSize: '0.8em', opacity: '0.7' } }, " (saved)"))), h("div", null, h("stencil-icon-button", { showLabel: false, icon: Close24, onClick: () => this.handleRemoveFile(index), disabled: this.disabled || this.readonly }))));
-        }))), this.errorMessage && !this.fileWindowOpen ? (h("div", { id: "error-text" }, h("unity-typography", { color: "error" }, this.errorMessage))) : (''))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"]
-    }; }
-    static get style() { return fileUploadCss; }
-}, [257, "file-upload", {
-        "allowMultiple": [4, "allow-multiple"],
-        "allowedFileTypes": [16],
-        "disallowedFileTypes": [16],
-        "allowedMimeTypes": [16],
-        "disallowedMimeTypes": [16],
-        "fullWidth": [4, "full-width"],
-        "required": [4],
-        "error": [1],
-        "dragAndDropMessage": [1, "drag-and-drop-message"],
-        "browseFileMessage": [1, "browse-file-message"],
-        "hideDragAndDrop": [4, "hide-drag-and-drop"],
-        "hideButton": [4, "hide-button"],
-        "id": [1],
-        "name": [1],
-        "label": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "initialValue": [1, "initial-value"],
-        "renderImage": [4, "render-image"],
-        "value": [1040],
-        "files": [32],
-        "fileWindowOpen": [32],
-        "errorMessage": [32],
-        "existingFileReferences": [32],
-        "imagePreviewUrl": [32],
-        "isImageModalOpen": [32],
-        "isInitialized": [32]
-    }, undefined, {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["file-upload", "custom-button", "stencil-icon-button", "udp-ambient-tool-tip", "udp-badge", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "file-upload":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FileUpload);
-            }
-            break;
-        case "custom-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "stencil-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "udp-ambient-tool-tip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "udp-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { FileUpload as F, defineCustomElement as d };
-//# sourceMappingURL=file-upload2.js.map
-
-//# sourceMappingURL=file-upload2.js.map
+import{p as i,H as t,c as e,h as s,d as o,t as n}from"./index2.js";import a from"@carbon/icons/es/close/24";import r from"axios";import{i as l,p as h,g as d}from"./udp-drive-utils.js";import{d as c}from"./custom-button2.js";import{d as p}from"./stencil-icon-button2.js";import{d as u}from"./udp-ambient-tool-tip2.js";import{d as m}from"./udp-badge2.js";import{d as f}from"./unity-typography2.js";import{C as g}from"./configService.js";const v=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.change=e(this,"change"),this.fullWidth=!1,this.dragAndDropMessage="Drag and drop your files here",this.browseFileMessage="Browse Files",this.hideDragAndDrop=!1,this.hideButton=!1,this.disabled=!1,this.readonly=!1,this.renderImage=!1,this.files=[],this.fileWindowOpen=!1,this.existingFileReferences=new Map,this.imagePreviewUrl=null,this.isImageModalOpen=!1,this.isInitialized=!1,this.dragCounter=0,this.handleDragOver=i=>{this.disabled||this.readonly||(i.preventDefault(),i.stopPropagation())},this.handleDragEnter=i=>{if(this.disabled||this.readonly)return;i.preventDefault(),i.stopPropagation();const t=i.currentTarget;this.dragCounter++,t.classList.add("highlight")},this.handleDragLeave=i=>{if(this.disabled||this.readonly)return;i.preventDefault(),i.stopPropagation();const t=i.currentTarget;this.dragCounter--,0===this.dragCounter&&t.classList.remove("highlight")},this.handleDrop=i=>{this.disabled||this.readonly||(i.preventDefault(),i.stopPropagation(),i.currentTarget.classList.remove("highlight"),this.handleFiles(i.dataTransfer.files))},this.handleFileInput=i=>{const t=i.target;t.files&&t.files.length>0&&this.handleFiles(t.files),t.value="",this.fileWindowOpen=!1},this.handleFiles=i=>{if(0===i.length)return;const t=[...this.files],e=[];for(let s=0;s<i.length;s++){const o=i[s];if(o.name&&""!==o.name.trim()&&(!t.some((i=>i.name===o.name&&i.size===o.size))&&this.isFileTypeAllowed(o)&&(e.push(o),!this.allowMultiple)))break}e.length>0&&(this.files=this.allowMultiple?[...t,...e]:[e[0]],this.updateImagePreview(),this.emitFileChangeEvents())},this.handleBrowseFiles=i=>{if(!this.disabled&&!this.readonly){if(i.preventDefault(),i.stopPropagation(),!this.hiddenInput){console.error("File input not initialized yet, attempting to create it now...");try{this.hiddenInput=document.createElement("input"),this.hiddenInput.type="file",this.hiddenInput.multiple=this.allowMultiple,this.hiddenInput.style.display="none",this.hiddenInput.addEventListener("change",this.handleFileInput),document.body.appendChild(this.hiddenInput)}catch(i){return void console.error("Failed to create file input:",i)}}this.fileWindowOpen=!0,this.hiddenInput.click()}},this.handleRemoveFile=i=>{if(this.disabled||this.readonly)return;const t=this.files[i];this.existingFileReferences.has(t.name)&&this.existingFileReferences.delete(t.name),this.files.splice(i,1),this.files=[...this.files],this.updateImagePreview(),this.files.length||(this.isImageModalOpen=!1),this.emitFileChangeEvents()},this.openImageModal=()=>{this.imagePreviewUrl&&!this.disabled&&(this.isImageModalOpen=!0)},this.closeImageModal=i=>{i&&(i.stopPropagation(),i.preventDefault()),this.isImageModalOpen=!1}}updateError(){this.errorMessage=this.error}async initialValueChanged(i){var t,e,s,o,n;if(!(i&&"object"==typeof i&&"value"in i&&"files"in i)){if(!i)return this.files=[],this.updateImagePreview(),void this.existingFileReferences.clear();try{this.existingFileReferences.clear();let a=[];if("string"==typeof i&&l(i)){const r=await h(i);if(this.renderImage&&!this.allowMultiple&&r.length>0){const i=r[0],n=(null==i?void 0:i.type)||this.getMimeTypeFromExtension((null==i?void 0:i.extension)||(null===(e=null===(t=null==i?void 0:i.name)||void 0===t?void 0:t.split("."))||void 0===e?void 0:e.pop())||"");if(this.isRenderableImageFromNameOrMime(null==i?void 0:i.name,n)&&(null==i?void 0:i.driveFileId))try{const t={driveFileId:i.driveFileId,name:i.name,extension:i.extension||(null===(o=null===(s=i.name)||void 0===s?void 0:s.split("."))||void 0===o?void 0:o.pop())||""},e=await this.createFileFromUdpDriveFile(t);this.existingFileReferences.set(e.name,t),a=[e]}catch(i){console.warn("Eager image fetch from reference failed, using placeholders:",i)}}if(!a||0===a.length){a=r;for(const i of a)if(i.driveFileId){const t={driveFileId:i.driveFileId,name:i.name,extension:i.extension||(null===(n=i.name.split("."))||void 0===n?void 0:n.pop())||"",tenantId:null,productId:0,path:""};this.existingFileReferences.set(i.name,t)}}}else if(Array.isArray(i))a=(await Promise.all(i.map((i=>this.processInitialFile(i))))).filter((i=>null!==i));else if("object"==typeof i){const t=await this.processInitialFile(i);a=t?[t]:[]}this.files=a,this.updateImagePreview(),this.updateValueProp()}catch(i){console.error("Error processing initial files:",i),this.files=[],this.updateImagePreview(),this.existingFileReferences.clear()}}}async processInitialFile(i){if(console.log(i),!i)return null;if(!this.isUdpDriveFile(i))return i instanceof File?i:null;{const t=this.getMimeTypeFromExtension(i.extension);if(this.renderImage&&!this.allowMultiple&&this.isRenderableImageFromNameOrMime(i.name,t))try{const t=await this.createFileFromUdpDriveFile(i);return this.existingFileReferences.set(t.name,i),t}catch(i){console.warn("Eager fetch failed, using placeholder:",i)}try{const t=this.createPlaceholderFileFromUdpDriveFile(i);return this.existingFileReferences.set(t.name,i),t}catch(i){return console.error("Error creating placeholder file from UdpDriveFile:",i),null}}}isUdpDriveFile(i){return i&&"object"==typeof i&&"driveFileId"in i}createPlaceholderFileFromUdpDriveFile(i){const t=i.extension||"bin",e=i.name||`file.${t}`,s=new Blob([""],{type:this.getMimeTypeFromExtension(t)});let o=Date.now();return i.lastUpdated&&("string"==typeof i.lastUpdated||"number"==typeof i.lastUpdated?o=new Date(i.lastUpdated).getTime():i.lastUpdated instanceof Date&&(o=i.lastUpdated.getTime())),new File([s],e,{type:s.type,lastModified:o})}async createFileFromUdpDriveFile(i){try{const t=`${g.tenantV1ApiUrl}/UdpDrive/${i.driveFileId}/stream`,e=(await r({method:"GET",url:t,responseType:"blob",timeout:3e5,headers:{}})).data,s=i.name||`file.${i.extension}`;return new File([e],s,{type:e.type||this.getMimeTypeFromExtension(i.extension),lastModified:i.lastUpdated?new Date(i.lastUpdated).getTime():Date.now()})}catch(t){return console.error("Error creating file from UdpDriveFile:",t),new File([""],i.name||`file.${i.extension}`,{type:"application/octet-stream"})}}async updateImagePreview(){if(this.renderImage&&!this.allowMultiple&&this.files.length>0){const i=this.files[0];if(this.isImageFile(i)){if(this.imagePreviewUrl)try{URL.revokeObjectURL(this.imagePreviewUrl)}catch(i){}this.imagePreviewUrl=URL.createObjectURL(i)}else this.imagePreviewUrl=null}else this.imagePreviewUrl=null}isImageFile(i){return!!i&&i.type.startsWith("image/")&&i.size>0}getMimeTypeFromExtension(i){return i&&{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",json:"application/json",xml:"application/xml",html:"text/html",css:"text/css",js:"application/javascript",png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",gif:"image/gif",svg:"image/svg+xml",zip:"application/zip",rar:"application/x-rar-compressed","7z":"application/x-7z-compressed"}[i.toLowerCase()]||"application/octet-stream"}isRenderableImageFromNameOrMime(i,t){var e,s;if(t&&t.toLowerCase().startsWith("image/"))return!0;const o=null===(s=null===(e=null==i?void 0:i.split("."))||void 0===e?void 0:e.pop())||void 0===s?void 0:s.toLowerCase();return!!o&&new Set(["png","jpg","jpeg","gif","svg","webp","bmp"]).has(o)}async componentWillLoad(){if(!this.isInitialized){if(this.dragCounter=0,this.hiddenInput=document.createElement("input"),this.hiddenInput.type="file",this.hiddenInput.multiple=this.allowMultiple,this.hiddenInput.style.display="none",this.hiddenInput.addEventListener("change",this.handleFileInput),document.body.appendChild(this.hiddenInput),this.allowedMimeTypes&&this.disallowedMimeTypes)throw new Error("allowedMimeTypes and disallowedMimeTypes are mutually exclusive, you cannot use both props");if(!this.allowedMimeTypes&&!this.disallowedMimeTypes&&this.allowedFileTypes&&this.disallowedFileTypes)throw new Error("allowedFileTypes and disallowedFileTypes are mutually exclusive, you cannot use both props");this.allowedFileTypes&&console.warn("allowedFileTypes prop is deprecated. Use allowedMimeTypes for better security and validation."),this.disallowedFileTypes&&console.warn("disallowedFileTypes prop is deprecated. Use disallowedMimeTypes for better security and validation."),this.error&&(this.errorMessage=this.error),null!=this.initialValue&&""!==this.initialValue?await this.initialValueChanged(this.initialValue):null!=this.value&&this.value.files&&await this.processValueProp(this.value.files),this.isInitialized=!0}}async processValueProp(i){if(null!=i){if(!(i&&"object"==typeof i&&"value"in i&&"files"in i&&"toString"in i))try{if(Array.isArray(i)){if(0===i.length)return void(this.files=[]);const t=[];for(const e of i){const i=await this.processInitialFile(e);i&&t.push(i)}this.files=t}else{const t=await this.processInitialFile(i);this.files=t?[t]:[]}this.updateValueProp()}catch(i){console.error("Error in processValueProp:",i),this.files=[]}}else this.files=[]}emitFileChangeEvents(){this.updateValueProp();const i=this.files.filter((i=>!this.existingFileReferences.has(i.name))),t=this.files.filter((i=>this.existingFileReferences.has(i.name)));if(0===i.length&&0===t.length)return void this.change.emit(null);const e=[];i.forEach((i=>{i.name&&""!==i.name.trim()&&e.push(i.name.trim())})),t.forEach((i=>{if(i.name&&""!==i.name.trim()){const t=this.existingFileReferences.get(i.name);t&&e.push(`${i.name.trim()}|udp:${t.driveFileId}`)}}));const s=e.join(","),o={toString:()=>s,valueOf:()=>s,value:s,files:i.filter((i=>i.name&&""!==i.name.trim()))};this.change.emit(o)}updateValueProp(){}isFileTypeAllowed(i){var t;if(!i.name)return!1;const e=null===(t=i.name.split(".").pop())||void 0===t?void 0:t.toLowerCase(),s=i.type||d(e);return this.allowedMimeTypes&&this.allowedMimeTypes.length>0?this.allowedMimeTypes.some((i=>this.isMimeTypeMatch(s,i))):this.disallowedMimeTypes&&this.disallowedMimeTypes.length>0?!this.disallowedMimeTypes.some((i=>this.isMimeTypeMatch(s,i))):!!e&&(this.allowedFileTypes&&this.allowedFileTypes.length>0?this.allowedFileTypes.map((i=>i.toLowerCase())).includes(e):!(this.disallowedFileTypes&&this.disallowedFileTypes.length>0&&this.disallowedFileTypes.map((i=>i.toLowerCase())).includes(e)))}isMimeTypeMatch(i,t){if(!i||!t)return!1;if(i.toLowerCase()===t.toLowerCase())return!0;if(t.endsWith("/*")){const e=t.slice(0,-2).toLowerCase();return i.toLowerCase().startsWith(e+"/")}return!1}async downloadFile(i){if(!this.disabled)try{const t=this.existingFileReferences.get(i.name);if(t){const i=await this.createFileFromUdpDriveFile(t),e=URL.createObjectURL(i),s=document.createElement("a");s.href=e,s.download=i.name,s.style.display="none",document.body.appendChild(s),s.click(),document.body.removeChild(s),URL.revokeObjectURL(e)}else{const t=URL.createObjectURL(i),e=document.createElement("a");e.href=t,e.download=i.name,e.style.display="none",document.body.appendChild(e),e.click(),document.body.removeChild(e),URL.revokeObjectURL(t)}}catch(i){console.error("Error downloading file:",i)}}disconnectedCallback(){if(this.hiddenInput&&(document.body.removeChild(this.hiddenInput),this.hiddenInput=null),this.imagePreviewUrl){try{URL.revokeObjectURL(this.imagePreviewUrl)}catch(i){}this.imagePreviewUrl=null}}render(){const i=!!this.errorMessage;return this.renderImage&&!this.allowMultiple&&this.imagePreviewUrl?s(o,{class:{"udp-input":!0,"udp-input--error":i,"udp-input--full-width":this.fullWidth,"udp-input--disabled":this.disabled,"udp-input--readonly":this.readonly},"aria-invalid":i?"true":"false","aria-disabled":this.disabled?"true":"false"},s("div",{class:"image-preview-container",onClick:this.openImageModal},s("div",{class:"image-preview-inner"},s("img",{src:this.imagePreviewUrl,alt:"Image preview",class:"image-preview"})),s("div",{class:"image-preview-actions",onClick:i=>i.stopPropagation()},s("stencil-icon-button",{showLabel:!1,icon:a,onClick:()=>this.handleRemoveFile(0),disabled:this.disabled||this.readonly}))),this.isImageModalOpen&&this.imagePreviewUrl&&s("div",{class:"image-modal-backdrop",onClick:this.closeImageModal},s("div",{class:"image-modal-content",onClick:i=>i.stopPropagation()},s("img",{src:this.imagePreviewUrl,alt:"Full image"}),s("div",{class:"image-modal-close"},s("stencil-icon-button",{showLabel:!1,icon:a,onClick:this.closeImageModal})))),this.errorMessage&&!this.fileWindowOpen?s("div",{id:"error-text"},s("unity-typography",{color:"error"},this.errorMessage)):""):s(o,{class:{"udp-input":!0,"udp-input--error":i,"udp-input--full-width":this.fullWidth,"udp-input--disabled":this.disabled,"udp-input--readonly":this.readonly},"aria-invalid":i?"true":"false","aria-disabled":this.disabled?"true":"false"},s("div",{id:this.hideDragAndDrop?"outer-container":"drop-area",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragEnter:this.handleDragEnter,onDragLeave:this.handleDragLeave,class:this.hideDragAndDrop?"":this.fullWidth?"full-width":"contained-width"},this.hideDragAndDrop?"":s("unity-typography",null,s("p",null,this.dragAndDropMessage),this.hideButton?"":s("p",null,"or")),this.hideButton?"":s("custom-button",{label:this.browseFileMessage,onClick:i=>this.handleBrowseFiles(i),id:"udpRecord-file-upload-"+this.id,disabled:this.disabled||this.readonly,udprecordid:"udpRecord-file-upload-"+this.id}),this.files.length>0&&s("div",{class:"file-list"},this.files.map(((i,t)=>{const e=this.existingFileReferences.has(i.name);return s("div",{class:"file-container",key:t},s("div",{class:"file-text",onClick:()=>this.downloadFile(i),style:{cursor:this.disabled?"not-allowed":"pointer",textDecoration:"underline"}},s("unity-typography",null,i.name,e&&s("span",{style:{fontSize:"0.8em",opacity:"0.7"}}," (saved)"))),s("div",null,s("stencil-icon-button",{showLabel:!1,icon:a,onClick:()=>this.handleRemoveFile(t),disabled:this.disabled||this.readonly})))}))),this.errorMessage&&!this.fileWindowOpen?s("div",{id:"error-text"},s("unity-typography",{color:"error"},this.errorMessage)):""))}get el(){return this}static get watchers(){return{error:[{updateError:0}],initialValue:[{initialValueChanged:0}]}}static get style(){return"#drop-area{min-height:200px;height:auto;border:2px dashed #ccc;border-radius:5px;padding:20px;text-align:center;font-family:Arial, sans-serif;overflow:hidden;margin-top:10px;margin-bottom:10px}#outer-container{padding:10px 5px;display:flex;justify-content:center}#drop-area.highlight{border-color:var(--primary-color)}#error-text{color:var(--error-color-main)}#add-button{border-radius:5}#remove-button{width:10px;height:10px;margin-left:5px;border:'none';background:'none';cursor:'pointer'}.file-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.full-width{width:auto}.contained-width{width:300px}.file-text{float:none}.file-list{display:flex;flex-direction:column;align-items:center;gap:6px}.inner-container{display:flex;justify-content:center;flex-direction:row}.container{display:flex;flex-direction:row;justify-content:center;overflow-y:auto}.image-preview-container{position:relative;width:100%;min-height:200px;height:240px;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;margin-top:12px}.image-remove-button{background-color:white}.image-preview-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.image-preview{max-width:100%;max-height:100%;object-fit:contain;display:block}.image-preview-actions{position:absolute;top:8px;right:8px;display:flex;gap:8px}.image-modal-backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);display:flex;align-items:center;justify-content:center;z-index:9999}.image-modal-content{position:relative;max-width:90vw;max-height:90vh;background:#000;border-radius:8px;overflow:hidden}.image-modal-content img{display:block;max-width:90vw;max-height:90vh;object-fit:contain}.image-modal-close{position:absolute;top:8px;right:8px}"}},[1,"file-upload",{allowMultiple:[4,"allow-multiple"],allowedFileTypes:[16],disallowedFileTypes:[16],allowedMimeTypes:[16],disallowedMimeTypes:[16],fullWidth:[4,"full-width"],required:[4],error:[1],dragAndDropMessage:[1,"drag-and-drop-message"],browseFileMessage:[1,"browse-file-message"],hideDragAndDrop:[4,"hide-drag-and-drop"],hideButton:[4,"hide-button"],id:[1],name:[1],label:[1],disabled:[4],readonly:[4],initialValue:[1,"initial-value"],renderImage:[4,"render-image"],value:[1040],files:[32],fileWindowOpen:[32],errorMessage:[32],existingFileReferences:[32],imagePreviewUrl:[32],isImageModalOpen:[32],isInitialized:[32]},void 0,{error:[{updateError:0}],initialValue:[{initialValueChanged:0}]}]);function y(){"undefined"!=typeof customElements&&["file-upload","custom-button","stencil-icon-button","udp-ambient-tool-tip","udp-badge","unity-typography"].forEach((i=>{switch(i){case"file-upload":customElements.get(n(i))||customElements.define(n(i),v);break;case"custom-button":customElements.get(n(i))||c();break;case"stencil-icon-button":customElements.get(n(i))||p();break;case"udp-ambient-tool-tip":customElements.get(n(i))||u();break;case"udp-badge":customElements.get(n(i))||m();break;case"unity-typography":customElements.get(n(i))||f()}}))}export{v as F,y as d}