udp-stencil-component-library 1.0.0

package/dist/esm/file-upload_3.entry.js

@@ -0,0 +1,1075 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CaIWDYyq.js';
+import { C as ConfigService } from './configService-Cn7PuhQz.js';
+import Close24 from '@carbon/icons/es/close/24';
+import axios from 'axios';
+import { s as state } from './stencil-form-store-CoGvHEIU.js';
+import '@stencil/store';
+
+const fileUploadCss = "#drop-area{height:200px;border:2px dashed #ccc;border-radius:5px;padding:20px;text-align:center;font-family:Arial, sans-serif;overflow-y:auto;margin-top:10px;margin-bottom:10px}#outer-container{padding:10px 5px}#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}.full-width{width:auto}.contained-width{width:300px}.file-text{float:left}.inner-container{display:flex;justify-content:center;flex-direction:row}.container{display:flex;flex-direction:row;justify-content:center;overflow-y:auto}";
+
+const FileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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;
+        /**
+         * 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();
+        /**
+         * Counter for drag events to properly handle drag enter/leave. Prevents flickering.
+         * @internal
+         */
+        this.dragCounter = 0;
+        /**
+         * Flag to track if the component has been initialized to prevent re-processing during lifecycle events.
+         * @internal
+         */
+        this.isInitialized = false;
+        /**
+         * 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]];
+                }
+                // 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();
+            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];
+            // Manually emit events since we're not using @Watch('files') anymore
+            this.emitFileChangeEvents();
+        };
+    }
+    /**
+     * 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) {
+        // 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 event emission, not external initialization
+        if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue && 'toString' in newValue) {
+            console.log('initialValueChanged received an event detail object, ignoring to prevent circular processing');
+            return;
+        }
+        if (newValue === '' || newValue === undefined || newValue === null) {
+            this.files = [];
+            this.existingFileReferences.clear();
+            return;
+        }
+        try {
+            // Clear existing references when initialValue changes
+            this.existingFileReferences.clear();
+            if (typeof newValue === 'string') {
+                // For backward compatibility - clear files if just a string
+                this.files = [];
+            }
+            else if (Array.isArray(newValue)) {
+                // Handle array of files (UdpDriveFile[] or File[])
+                this.files = await Promise.all(newValue
+                    .map(file => this.processInitialFile(file))
+                    .filter(p => p !== null) // Filter out null promises
+                );
+            }
+            else {
+                // Handle single file (UdpDriveFile or File)
+                const processedFile = await this.processInitialFile(newValue);
+                this.files = processedFile ? [processedFile] : [];
+            }
+            // Update value prop after initialization (but don't emit events)
+            this.updateValueProp();
+        }
+        catch (error) {
+            console.error('Error processing initial files:', error);
+            this.files = [];
+            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
+     * @internal
+     */
+    async processInitialFile(file) {
+        if (this.isUdpDriveFile(file)) {
+            // For UdpDriveFile, create a placeholder File and track the reference
+            const placeholderFile = this.createPlaceholderFileFromUdpDriveFile(file);
+            // Track this as an existing file that doesn't need to be uploaded
+            this.existingFileReferences.set(placeholderFile.name, file);
+            return placeholderFile;
+        }
+        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) {
+        const fileName = udpFile.name || `file.${udpFile.extension}`;
+        const placeholderBlob = new Blob([''], { type: this.getMimeTypeFromExtension(udpFile.extension) });
+        const file = new File([placeholderBlob], fileName, {
+            type: placeholderBlob.type,
+            lastModified: udpFile.lastUpdated ? new Date(udpFile.lastUpdated).getTime() : Date.now()
+        });
+        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' });
+        }
+    }
+    /**
+     * 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) {
+        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';
+    }
+    /**
+     * 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;
+        }
+        if (this.allowedFileTypes && this.disallowedFileTypes) {
+            throw new Error('allowedFileTypes and disallowedFileTypes are mutually exlusive, you cannot use both props');
+        }
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+        // 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) {
+            await this.processValueProp(this.value);
+        }
+        this.dragCounter = 0;
+        // initialize hidden file input
+        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);
+        // 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() {
+        try {
+            if (this.allowMultiple) {
+                this.value = [...this.files];
+            }
+            else {
+                this.value = this.files.length > 0 ? this.files[0] : null;
+            }
+        }
+        catch (error) {
+            console.error('Error updating value prop:', error);
+        }
+    }
+    /**
+     * Validates if a file type is allowed based on component configuration.
+     * @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();
+        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;
+    }
+    /**
+     * 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;
+        }
+    }
+    /**
+     * 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;
+        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: !this.hideDragAndDrop ? 'drop-area' : 'outer-container', 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: this.handleBrowseFiles, 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: !this.hideDragAndDrop ? 'container' : '' }, h("div", { class: !this.hideDragAndDrop ? 'inner-container' : '' }, this.files.map((file, index) => {
+            const isExistingFile = this.existingFileReferences.has(file.name);
+            return (h("div", { class: !this.hideDragAndDrop ? '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 ? (h("div", { id: "error-text" }, h("unity-typography", null, this.errorMessage))) : (''))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"]
+    }; }
+};
+FileUpload.style = fileUploadCss;
+
+const selectableListCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-form-item-wrapper){display:block;width:100%;box-sizing:border-box}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}:host{display:block}:host(.udp-input--size-small) li{padding:var(--spacing-02) var(--spacing-03);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) li{padding:var(--spacing-03) var(--spacing-04);font-size:var(--body-font-size)}:host(.udp-input--size-large) li{padding:var(--spacing-04) var(--spacing-05);font-size:var(--body-font-size)}ul{list-style:none;padding:0;margin:0}li{padding:var(--spacing-03) var(--spacing-04);cursor:pointer;transition:background-color 0.3s ease}li:hover{background-color:#f0f0f0;color:var(--text-color)}.selected{background-color:var(--primary-color);color:white}label{cursor:pointer}input{cursor:pointer}.error{color:var(--error-color-main)}";
+
+const SelectableList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        /**
+         * Whether the field is disabled. When true, items cannot be selected or deselected.
+         */
+        this.disabled = false;
+        /**
+         * When true, the component is in a read-only state. Items can be viewed but not selected or deselected.
+         */
+        this.readonly = false;
+        /**
+         * Size variant controlling the padding and spacing of the list items.
+         * - 'small': Compact spacing for data-heavy interfaces
+         * - 'normal': Standard spacing (default)
+         * - 'large': Generous spacing for accessibility
+         */
+        this.size = 'normal';
+        /**
+         * Margin variant for the input spacing.
+         * - 'none': No margin
+         * - 'dense': Minimal margin spacing
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        /**
+         * Whether multiple items can be selected. When false, only one item can be selected at a time.
+         */
+        this.multiSelect = false;
+        /**
+         * Array of items to display in the list. Each item should be an object with properties for display and value.
+         */
+        this.items = [];
+        /**
+         * Property name from item objects to use for display text. Required for proper rendering.
+         */
+        this.displayKey = '';
+        /**
+         * Whether to render items with checkboxes/radio buttons instead of plain list items.
+         */
+        this.useCheckbox = false;
+        /**
+         * Property name from item objects to use for the actual value. Required for proper functionality.
+         */
+        this.valueKey = '';
+        /**
+         * Error message to display below the list. Shows validation errors or other issues.
+         */
+        this.error = '';
+        /**
+         * Internal items state with selection status. Manages item display and selection state.
+         * @internal
+         */
+        this.internalItems = [];
+        /**
+         * Internal value state. Manages the current selected value(s) independently of props.
+         * @internal
+         */
+        this.internalValue = '';
+        /**
+         * Handles item click events. Updates selection state and emits events.
+         * For controlled components, also updates the value prop.
+         * @param item - The clicked item
+         * @internal
+         */
+        this.handleItemClick = (item) => {
+            if (this.disabled || this.readonly)
+                return;
+            let newItems = [...this.internalItems];
+            const selectedIndex = this.internalItems.findIndex(selectedItem => (this.valueKey && selectedItem[this.valueKey] === item[this.valueKey]) || (!this.valueKey && selectedItem === item));
+            newItems.splice(selectedIndex, 1, Object.assign(Object.assign({}, item), { selected: !item.selected }));
+            if (!this.multiSelect && !item.selected) {
+                newItems = newItems.map((item, i) => (Object.assign(Object.assign({}, item), { selected: i === selectedIndex })));
+            }
+            this.internalItems = newItems;
+            // Update internal value state
+            const newValue = this.getValue(newItems);
+            this.internalValue = newValue;
+            // If this is a controlled component (value prop provided), update the value prop
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            // Emit events for real-time and committed updates
+            this.change.emit(newValue);
+        };
+    }
+    /**
+     * Updates the error message when the error prop changes.
+     * @internal
+     */
+    updateError() {
+        this.errorMessage = this.error;
+    }
+    /**
+     * Updates the internal value when initialValue prop changes.
+     * Only updates if current value is empty or if this is an uncontrolled component.
+     * @internal
+     */
+    initialValueChanged(newValue) {
+        // Only update if we don't have a value yet or if this is uncontrolled (no value prop)
+        if ((this.internalValue === '' || this.internalValue === undefined) || this.value === undefined) {
+            if (newValue !== undefined) {
+                this.internalValue = newValue;
+                this.updateItemSelection(newValue);
+            }
+        }
+    }
+    /**
+     * Updates the internal value when value prop changes.
+     * For controlled components, the value prop takes precedence.
+     * @internal
+     */
+    valueChanged() {
+        // If value prop is provided, this is a controlled component
+        if (this.value !== undefined && this.value !== this.internalValue) {
+            this.internalValue = this.value;
+            this.updateItemSelection(this.value);
+        }
+    }
+    /**
+     * Re-initializes items when the items prop changes.
+     * @internal
+     */
+    itemsChanged() {
+        // Re-initialize when items change
+        this.initializeItems();
+    }
+    /**
+     * Component lifecycle method. Initializes error message, internal value, and items.
+     * @internal
+     */
+    componentWillLoad() {
+        // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)
+        this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+        this.initializeItems();
+    }
+    /**
+     * Initializes the internal items array with proper selection state.
+     * @internal
+     */
+    initializeItems() {
+        if (!this.valueKey) {
+            console.error('valueKey is required');
+            this.internalItems = this.items;
+            return;
+        }
+        this.updateItemSelection(this.internalValue);
+    }
+    /**
+     * Updates the selection state of items based on the provided value.
+     * @param selectedValue - Comma-separated string of selected values
+     * @internal
+     */
+    updateItemSelection(selectedValue) {
+        if (!selectedValue || !this.valueKey) {
+            this.internalItems = [...this.items];
+            return;
+        }
+        const selectedItems = this.items.filter(item => selectedValue.split(',').includes(item[this.valueKey]));
+        let filteredSelectedItems = selectedItems;
+        if (selectedItems.length > 1 && !this.multiSelect) {
+            filteredSelectedItems = [selectedItems[0]];
+            console.warn('multiple values are selected, but multiselect is disabled');
+        }
+        const items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: filteredSelectedItems.some(selectedItem => selectedItem[this.valueKey] === item[this.valueKey]) })));
+        this.internalItems = items;
+    }
+    /**
+     * Gets the currently selected items from the items array.
+     * @param items - Optional items array to check, defaults to internal items
+     * @returns Array of selected items
+     * @internal
+     */
+    getSelectedItems(items = null) {
+        var _a;
+        const itemsToCheck = items !== null && items !== void 0 ? items : this.internalItems;
+        return (_a = itemsToCheck.filter(item => item.selected)) !== null && _a !== void 0 ? _a : [];
+    }
+    /**
+     * Gets the current value as a comma-separated string of selected values.
+     * @param items - Optional items array to check, defaults to internal items
+     * @returns Comma-separated string of selected values
+     * @internal
+     */
+    getValue(items = null) {
+        var _a;
+        const itemsToCheck = items !== null && items !== void 0 ? items : this.internalItems;
+        return (_a = this.getSelectedItems(itemsToCheck).map(item => { var _a; return (_a = item[this.valueKey]) !== null && _a !== void 0 ? _a : item[this.displayKey]; }).join(',')) !== null && _a !== void 0 ? _a : "";
+    }
+    /**
+     * Renders the selectable list component.
+     * @returns JSX element or null if valueKey is not provided
+     * @internal
+     */
+    render() {
+        if (!this.valueKey)
+            return null;
+        const isError = !!this.errorMessage;
+        return (h(Host, { class: {
+                'udp-input': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--readonly': this.readonly,
+                'udp-input--required': this.required,
+                'udp-input--multi-select': this.multiSelect,
+                [`udp-input--size-${this.size}`]: true,
+                [`udp-input--margin-${this.margin}`]: true,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("ul", null, this.internalItems.map((item, i) => {
+            var _a, _b;
+            return (h("li", { key: item.id || item[this.displayKey], onClick: () => this.handleItemClick(item), class: item.selected && !this.useCheckbox ? 'selected' : '', id: 'udpRecord-selectable-list-input-' + i + '-' + this.id,
+                //@ts-ignore
+                udprecordid: 'udpRecord-selectable-list-input-' + i + '-' + this.id }, this.useCheckbox ? (h("label", null, h("input", { type: this.multiSelect ? 'checkbox' : 'radio', name: this.name || ((this.valueKey && item[this.valueKey]) || ((_a = item.id) !== null && _a !== void 0 ? _a : item[this.displayKey])), disabled: this.disabled || this.readonly, value: (this.valueKey && item[this.valueKey]) || ((_b = item.id) !== null && _b !== void 0 ? _b : item[this.displayKey]), checked: item.selected, onChange: () => this.handleItemClick(item) }), item[this.displayKey])) : (h("div", null, item[this.displayKey]))));
+        }), this.errorMessage && h("unity-typography", { class: "error", variant: 'caption-text', color: "error" }, this.errorMessage))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"],
+        "value": ["valueChanged"],
+        "items": ["itemsChanged"]
+    }; }
+};
+SelectableList.style = selectableListCss;
+
+const stencilFieldCss = "stencil-field.css :host{display:block;padding:16px;background-color:#f4f4f4;}input[type=\"checkbox\"],input[type=\"radio\"]{appearance:none;background-color:#fff;border:2px solid #8d8d8d;width:20px;height:20px;border-radius:50%;position:relative;cursor:pointer;transition:all 0.3s ease;}input[type=\"checkbox\"]{border-radius:2px;}input[type=\"radio\"]:checked,input[type=\"checkbox\"]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}input[type=\"radio\"]:checked::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:12px;height:12px;background-color:white;border-radius:50%;}input[type=\"checkbox\"]:checked::before{content:'\\2714';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:14px;color:white;}.checkbox-container,.radio-container{display:flex;align-items:center;cursor:pointer}input[type=\"checkbox\"],input[type=\"radio\"]{margin-right:8px;}label{margin:0;display:block;line-height:1;display:flex;align-items:center}";
+
+const StencilField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.required = false;
+        this.registered = false;
+        this.finalFormBlur = () => { };
+        this.finalFormChange = () => { };
+        this.finalFormFocus = () => { };
+    }
+    componentWillLoad() {
+        state.api.registerField(this.name, fieldState => {
+            const { blur, change, focus, value } = fieldState;
+            if (!state.registeredFields[this.name]) {
+                state.registeredFields[this.name] = { required: this.required };
+                // first time, register event listeners
+                this.finalFormBlur = () => {
+                    var _a;
+                    blur();
+                    this.errorMessage = (_a = state.api.getFieldState(this.name)) === null || _a === void 0 ? void 0 : _a.error;
+                };
+                this.finalFormChange = event => {
+                    change(event);
+                    // reset the error on change, error state will be re-evaluated when the blur event is triggered
+                    this.errorMessage = '';
+                    // Force re-render to inject cleared error into child components
+                    this.injectPropsIntoSlottedElements();
+                };
+                this.finalFormFocus = focus;
+                this.registered = true;
+            }
+            // update value
+            this.value = value;
+        }, {
+            value: true,
+            error: false,
+            touched: false,
+        });
+    }
+    componentDidRender() {
+        this.injectPropsIntoSlottedElements();
+    }
+    componentDidUpdate() {
+        this.injectPropsIntoSlottedElements();
+    }
+    injectPropsIntoSlottedElements() {
+        const hasSlottedContent = this.el.children.length > 0;
+        if (hasSlottedContent) {
+            Array.from(this.el.children).forEach((element) => {
+                // Inject form field props
+                // Pass initial value only, don't control the component's value directly
+                if (this.value !== undefined && !element.hasAttribute('data-initial-value-set')) {
+                    element.initialValue = this.value;
+                    element.setAttribute('data-initial-value-set', 'true');
+                }
+                // Always update error state (including clearing it)
+                element.error = this.errorMessage || '';
+                if (this.name)
+                    element.name = this.name;
+                if (this.id)
+                    element.id = this.id;
+                if (this.label)
+                    element.label = this.label;
+                // Set up event handlers if not already bound
+                if (!element.hasAttribute('data-field-events-bound')) {
+                    element.addEventListener('input', this.handleInput.bind(this));
+                    element.addEventListener('change', this.handleChange.bind(this));
+                    element.addEventListener('blur', this.handleBlur.bind(this));
+                    element.addEventListener('focus', this.handleFocus.bind(this));
+                    element.setAttribute('data-field-events-bound', 'true');
+                }
+            });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        // Clean up the field from the registry when component is unmounted
+        if (!this.name) {
+            return;
+        }
+        if (state.registeredFields[this.name]) {
+            delete state.registeredFields[this.name];
+        }
+        // Final Form automatically handles field cleanup when no longer subscribed,
+        // but we can also explicitly remove the field value if needed
+        try {
+            if ((_a = state.api) === null || _a === void 0 ? void 0 : _a.change) {
+                state.api.change(this.name, undefined);
+            }
+        }
+        catch (error) {
+            // Silently handle any errors during cleanup
+            console.debug('Field cleanup warning:', error);
+        }
+        // Reset registration state
+        this.registered = false;
+    }
+    handleInput(e) {
+        var _a;
+        let value;
+        // Handle custom events from complex components
+        if (e instanceof CustomEvent && e.detail !== undefined) {
+            value = e.detail;
+        }
+        else {
+            // Handle standard DOM events - need to find the actual input element
+            const target = e.target;
+            // If target is a custom component, look for the actual input in its shadow DOM
+            if (target.shadowRoot) {
+                const input = target.shadowRoot.querySelector('input, textarea, select');
+                if (input) {
+                    value = input.value;
+                }
+            }
+            // If target is the actual input element
+            else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
+                value = target.value;
+            }
+            // Fallback: check if the custom component has a value property
+            else if ('value' in target) {
+                value = target.value;
+            }
+        }
+        if (value !== undefined) {
+            (_a = this.finalFormChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
+        }
+    }
+    handleChange(e) {
+        var _a, _b;
+        let value;
+        // Handle custom events from complex components
+        if (e instanceof CustomEvent && e.detail !== undefined) {
+            value = e.detail;
+        }
+        else {
+            // Handle standard DOM events - need to find the actual input element
+            const target = e.target;
+            // If target is a custom component, look for the actual input in its shadow DOM
+            if (target.shadowRoot) {
+                const input = target.shadowRoot.querySelector('input, textarea, select');
+                if (input) {
+                    value = input.value;
+                }
+            }
+            // If target is the actual input element
+            else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
+                value = target.value;
+            }
+            // Fallback: check if the custom component has a value property
+            else if ('value' in target) {
+                value = target.value;
+            }
+        }
+        if (value !== undefined) {
+            (_a = this.finalFormChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
+            // For complex components that emit custom events, also trigger blur validation
+            if (e instanceof CustomEvent) {
+                (_b = this.finalFormBlur) === null || _b === void 0 ? void 0 : _b.call(this, e);
+            }
+        }
+    }
+    handleFocus(e) {
+        var _a;
+        (_a = this.finalFormFocus) === null || _a === void 0 ? void 0 : _a.call(this, e);
+    }
+    handleBlur(e) {
+        var _a;
+        (_a = this.finalFormBlur) === null || _a === void 0 ? void 0 : _a.call(this, e);
+    }
+    stencilInvalid(e) {
+        this.finalFormBlur(e);
+    }
+    render() {
+        if (!this.registered) {
+            console.error('field not registered', this.name);
+            return null;
+        }
+        // Always use slot-based rendering
+        return h("slot", null);
+    }
+    get el() { return getElement(this); }
+};
+StencilField.style = stencilFieldCss;
+
+export { FileUpload as file_upload, SelectableList as selectable_list, StencilField as stencil_field };
+//# sourceMappingURL=file-upload.selectable-list.stencil-field.entry.js.map
+
+//# sourceMappingURL=file-upload_3.entry.js.map