npm - udp-stencil-component-library - Versions diffs - 1.0.2 → 1.0.3 - Mend

udp-stencil-component-library 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (638) hide show

package/dist/stencil-library/p-2fda98ee.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["fileUploadCss","FileUpload","constructor","hostRef","this","fullWidth","dragAndDropMessage","browseFileMessage","hideDragAndDrop","hideButton","disabled","readonly","files","fileWindowOpen","existingFileReferences","Map","dragCounter","isInitialized","handleDragOver","event","preventDefault","stopPropagation","handleDragEnter","dropArea","currentTarget","classList","add","handleDragLeave","remove","handleDrop","dataTransfer","handleFiles","handleFileInput","input","target","length","value","currentFiles","newValidFiles","i","file","name","trim","isDuplicate","some","existingFile","size","isFileTypeAllowed","push","allowMultiple","emitFileChangeEvents","handleBrowseFiles","hiddenInput","console","error","document","createElement","type","multiple","style","display","addEventListener","body","appendChild","click","handleRemoveFile","index","fileToRemove","has","delete","splice","updateError","errorMessage","initialValueChanged","newValue","log","undefined","clear","Array","isArray","processedFiles","Promise","all","map","processInitialFile","filter","processedFile","updateValueProp","isUdpDriveFile","placeholderFile","createPlaceholderFileFromUdpDriveFile","set","File","udpFile","extension","fileName","placeholderBlob","Blob","getMimeTypeFromExtension","lastModified","Date","now","lastUpdated","getTime","createFileFromUdpDriveFile","downloadUrl","ConfigService","tenantV1ApiUrl","driveFileId","response","axios","method","url","responseType","timeout","headers","blob","data","mimeTypes","pdf","doc","docx","xls","xlsx","ppt","pptx","txt","csv","json","xml","html","css","js","png","jpg","jpeg","gif","svg","zip","rar","toLowerCase","componentWillLoad","allowedFileTypes","disallowedFileTypes","Error","initialValue","processValueProp","item","newFiles","existingFiles","change","emit","fileReferences","forEach","udpDriveFile","get","combinedValue","join","detailValue","toString","valueOf","_a","split","pop","includes","downloadFile","actualFile","URL","createObjectURL","a","href","download","removeChild","revokeObjectURL","disconnectedCallback","render","isError","h","Host","key","class","id","onDragOver","onDrop","onDragEnter","onDragLeave","label","onClick","e","udprecordid","isExistingFile","cursor","textDecoration","fontSize","opacity","showLabel","icon","Close24","selectableListCss","SelectableList","margin","multiSelect","items","displayKey","useCheckbox","valueKey","internalItems","internalValue","handleItemClick","newItems","selectedIndex","findIndex","selectedItem","Object","assign","selected","getValue","updateItemSelection","valueChanged","itemsChanged","initializeItems","selectedValue","selectedItems","filteredSelectedItems","warn","getSelectedItems","itemsToCheck","required","_b","checked","onChange","variant","color","stencilFieldCss","StencilField","registered","finalFormBlur","finalFormChange","finalFormFocus","setFormApi","formApi","state","api","registerField","fieldState","blur","focus","registeredFields","getFieldState","injectPropsIntoSlottedElements","touched","componentDidRender","componentDidUpdate","hasSlottedContent","el","children","from","element","hasAttribute","setAttribute","handleInput","bind","handleChange","handleBlur","handleFocus","debug","CustomEvent","detail","shadowRoot","querySelector","tagName","call","stencilInvalid"],"sources":["src/components/my-component/UI/inputs/file-upload/file-upload.css?tag=file-upload&encapsulation=shadow","src/components/my-component/UI/inputs/file-upload/file-upload.tsx","src/components/my-component/UI/inputs/selectable-list/selectable-list.css?tag=selectable-list&encapsulation=shadow","src/components/my-component/UI/inputs/selectable-list/selectable-list.tsx","src/components/my-component/UI/forms/form/stencil-field.css?tag=stencil-field","src/components/my-component/UI/forms/form/stencil-field.tsx"],"sourcesContent":["/* file-upload.css */\n#drop-area {\n height: 200px;\n border: 2px dashed #ccc;\n border-radius: 5px;\n padding: 20px;\n text-align: center;\n font-family: Arial, sans-serif;\n overflow-y: auto;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n#outer-container {\n padding: 10px 5px;\n\n}\n\n#drop-area.highlight {\n border-color: var(--primary-color);\n}\n\n#error-text {\n color: var(--error-color-main);\n}\n\n#add-button {\n border-radius: 5;\n}\n\n#remove-button {\n width: 10px;\n height: 10px;\n margin-left: 5px;\n border: 'none';\n background: 'none';\n cursor: 'pointer';\n}\n\n.file-container {\n display: flex; \n flex-direction: row;\n align-items: center;\n}\n\n.full-width {\n width: auto\n}\n\n.contained-width {\n width: 300px;\n\n}\n.file-text {\n float: left\n}\n.inner-container {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n.container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n overflow-y: auto;\n}","import { Component, State, h, Host, Prop, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { UdpDriveFile } from '../../../../../global/types';\nimport { ConfigService } from '../../../../../udp-utilities/api-config';\nimport Close24 from '@carbon/icons/es/close/24';\nimport axios from 'axios';\n\n/**\n * A comprehensive file upload component with drag-and-drop support, file type validation,\n * and integration with UDP Drive for existing file management.\n * Supports both new file uploads and existing file management with download capabilities.\n *\n * This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying input element.\n *\n * **File Handling Modes:**\n * - **New Files**: Regular File objects that need to be uploaded\n * - **Existing Files**: UdpDriveFile objects that are already stored on the server\n * - **Mixed Mode**: Combination of new and existing files\n *\n * **Value Patterns:**\n * - `initialValue`: For setting default files (UdpDriveFile[], File[], or mixed)\n * - `value`: For direct file access (always File[] for consistency)\n *\n * @example\n * ```tsx\n * // Basic file upload\n * <file-upload\n * allowMultiple={true}\n * onChange={(e) => console.log('Files:', e.detail.files)}\n * />\n *\n * // With existing UDP Drive files\n * <file-upload\n * initialValue={existingUdpFiles}\n * allowMultiple={true}\n * onChange={(e) => handleFileChange(e.detail)}\n * />\n *\n * // With file type restrictions\n * <file-upload\n * allowedFileTypes={['pdf', 'doc', 'docx']}\n * required={true}\n * error={fileError}\n * onChange={handleDocumentUpload}\n * />\n *\n * // Drag and drop disabled\n * <file-upload\n * hideDragAndDrop={true}\n * browseFileMessage=\"Select Images\"\n * allowedFileTypes={['jpg', 'png', 'gif']}\n * onChange={handleImageUpload}\n * />\n * ```\n */\n@Component({\n tag: 'file-upload',\n styleUrl: 'file-upload.css',\n shadow: true,\n})\nexport class FileUpload {\n /**\n * Whether multiple files can be selected. When false, only one file can be uploaded at a time.\n */\n @Prop() allowMultiple: boolean;\n\n /**\n * Array of allowed file extensions (without dots). When specified, only these file types are accepted.\n * Example: ['pdf', 'doc', 'docx', 'jpg', 'png']\n * Mutually exclusive with disallowedFileTypes.\n */\n @Prop() allowedFileTypes: Array<string>;\n\n /**\n * Array of disallowed file extensions (without dots). When specified, these file types are rejected.\n * Example: ['exe', 'bat', 'scr']\n * Mutually exclusive with allowedFileTypes.\n */\n @Prop() disallowedFileTypes: Array<string>;\n\n /**\n * Whether the component should take the full width of its container.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * Whether file selection is required for form submission. Adds validation behavior.\n */\n @Prop() required: boolean;\n\n /**\n * Error message to display below the component. Shows validation errors or upload issues.\n */\n @Prop() error: string;\n\n /**\n * Message displayed in the drag-and-drop area. Customizes the user guidance text.\n */\n @Prop() dragAndDropMessage: string = 'Drag and drop your files here';\n\n /**\n * Text displayed on the browse files button. Customizes the button label.\n */\n @Prop() browseFileMessage: string = 'Browse Files';\n\n /**\n * Whether to hide the drag-and-drop area. When true, only the browse button is shown.\n */\n @Prop() hideDragAndDrop: boolean = false;\n\n /**\n * Whether to hide the browse files button. When true, only drag-and-drop is available.\n */\n @Prop() hideButton: boolean = false;\n\n /**\n * Unique identifier for the component. Used for form association and accessibility.\n */\n @Prop() id: string;\n\n /**\n * Name attribute for form submission. Used for form data collection.\n */\n @Prop() name: string;\n\n /**\n * Label text displayed above the component. Used for accessibility and user guidance.\n */\n @Prop() label: string;\n\n /**\n * When true, all interactions with the component are disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * When true, the component is in a read-only state. Files can be viewed and downloaded, but not added or removed.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Initial files to display in the component. Supports multiple formats:\n * - UdpDriveFile: Existing files stored on UDP Drive (displayed with \"(saved)\" indicator)\n * - File: New file objects ready for upload\n * - string: Legacy support for file references\n * - Arrays: Multiple files of any supported type\n *\n * UdpDriveFiles are converted to placeholder File objects for consistent handling.\n */\n @Prop() initialValue: UdpDriveFile | UdpDriveFile[] | File | File[] | string;\n\n /**\n * Current files in the component. Always contains File objects for consistent API.\n * When files are added/removed, this prop is updated automatically.\n * For external access to uploaded files, use the change/input events.\n */\n @Prop({ mutable: true }) value: File | File[];\n\n /**\n * Array of currently selected/uploaded files. Managed internally by the component.\n * @internal\n */\n @State() files: File[] = [];\n\n /**\n * Whether the file browser window is currently open. Used for UI state management.\n * @internal\n */\n @State() fileWindowOpen: boolean = false;\n\n /**\n * Internal error message state. Manages display of validation errors.\n * @internal\n */\n @State() errorMessage: string;\n\n /**\n * Map of file names to their original UdpDriveFile references.\n * Tracks which files are existing (saved) vs new (to be uploaded).\n * @internal\n */\n @State() existingFileReferences: Map<string, UdpDriveFile> = new Map();\n\n /**\n * Emitted when files are added, removed, or changed.\n * Provides both string representation and File objects for flexible handling.\n *\n * @event change\n * @param {object} detail - File change details\n * @param {string} detail.value - Comma-separated file references with UDP Drive IDs\n * @param {File[]} detail.files - Array of new File objects that need to be uploaded\n * @param {string} detail.toString() - String representation for form serialization\n *\n * @example\n * ```tsx\n * <file-upload onChange={(e) => {\n * console.log('String value:', e.detail.value);\n * console.log('Files to upload:', e.detail.files);\n * console.log('Form value:', e.detail.toString());\n * }} />\n * ```\n */\n @Event() change: EventEmitter<{\n value: string;\n files: File[];\n toString(): string;\n valueOf(): string;\n }>;\n\n\n\n @Element() el: HTMLElement;\n\n /**\n * Hidden file input element for triggering file browser. Created programmatically.\n * @internal\n */\n private hiddenInput: HTMLInputElement;\n\n /**\n * Counter for drag events to properly handle drag enter/leave. Prevents flickering.\n * @internal\n */\n private dragCounter: number = 0;\n\n /**\n * Flag to track if the component has been initialized to prevent re-processing during lifecycle events.\n * @internal\n */\n private isInitialized: boolean = false;\n /**\n * Updates the error message when the error prop changes.\n * @internal\n */\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /**\n * Watches for changes to initialValue prop and processes the new files.\n * Handles conversion of UdpDriveFile objects to File objects.\n * @param newValue - New initial value containing files to process\n * @internal\n */\n @Watch('initialValue')\n async initialValueChanged(newValue: UdpDriveFile | UdpDriveFile[] | File | File[] | string) {\n // Check if this looks like an event detail object (has value, files, toString, valueOf properties)\n // If so, ignore it since this is from our own event emission, not external initialization\n if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue && 'toString' in newValue) {\n console.log('initialValueChanged received an event detail object, ignoring to prevent circular processing');\n return;\n }\n\n if (newValue === '' || newValue === undefined || newValue === null) {\n this.files = [];\n this.existingFileReferences.clear();\n return;\n }\n\n try {\n // Clear existing references when initialValue changes\n this.existingFileReferences.clear();\n\n if (typeof newValue === 'string') {\n // For backward compatibility - clear files if just a string\n this.files = [];\n } else if (Array.isArray(newValue)) {\n // Handle array of files (UdpDriveFile[] or File[])\n const processedFiles = await Promise.all(\n newValue.map(file => this.processInitialFile(file))\n );\n // Filter out null results after processing\n this.files = processedFiles.filter(file => file !== null);\n } else {\n // Handle single file (UdpDriveFile or File)\n const processedFile = await this.processInitialFile(newValue);\n this.files = processedFile ? [processedFile] : [];\n }\n\n // Update value prop after initialization (but don't emit events)\n this.updateValueProp();\n } catch (error) {\n console.error('Error processing initial files:', error);\n this.files = [];\n this.existingFileReferences.clear();\n }\n }\n\n /**\n * Process an initial file, converting UdpDriveFile to File if needed.\n * Creates placeholder File objects for existing UDP Drive files.\n * @param file - File to process (UdpDriveFile or File)\n * @returns Promise resolving to a File object or null if invalid\n * @internal\n */\n private async processInitialFile(file: UdpDriveFile | File): Promise<File | null> {\n // Handle null/undefined input\n console.log(file)\n if (!file) {\n return null;\n }\n\n if (this.isUdpDriveFile(file)) {\n // For UdpDriveFile, create a placeholder File and track the reference\n try {\n const placeholderFile = this.createPlaceholderFileFromUdpDriveFile(file);\n // Track this as an existing file that doesn't need to be uploaded\n this.existingFileReferences.set(placeholderFile.name, file);\n return placeholderFile;\n } catch (error) {\n console.error('Error creating placeholder file from UdpDriveFile:', error);\n return null;\n }\n } else if (file instanceof File) {\n // Already a File object - this is a new file\n return file;\n } else {\n // Invalid object, return null\n return null;\n }\n }\n\n /**\n * Type guard to check if a file is a UdpDriveFile.\n * @param file - File object to check\n * @returns True if the file is a UdpDriveFile\n * @internal\n */\n private isUdpDriveFile(file: any): file is UdpDriveFile {\n return file && typeof file === 'object' && 'driveFileId' in file;\n }\n\n /**\n * Create a placeholder File object from UdpDriveFile without downloading content.\n * Used for display purposes and consistent File API.\n * @param udpFile - UdpDriveFile to convert\n * @returns Placeholder File object\n * @internal\n */\n private createPlaceholderFileFromUdpDriveFile(udpFile: UdpDriveFile): File {\n // Ensure we have required properties with fallbacks\n const extension = udpFile.extension || 'bin';\n const fileName = udpFile.name || `file.${extension}`;\n\n const placeholderBlob = new Blob([''], { type: this.getMimeTypeFromExtension(extension) });\n\n // Handle lastUpdated as either Date, string, or number\n let lastModified = Date.now();\n if (udpFile.lastUpdated) {\n if (typeof udpFile.lastUpdated === 'string' || typeof udpFile.lastUpdated === 'number') {\n lastModified = new Date(udpFile.lastUpdated).getTime();\n } else if (udpFile.lastUpdated instanceof Date) {\n lastModified = udpFile.lastUpdated.getTime();\n }\n }\n\n const file = new File([placeholderBlob], fileName, {\n type: placeholderBlob.type,\n lastModified: lastModified\n });\n\n return file;\n }\n\n /**\n * Create a File object from UdpDriveFile by downloading the content from the server.\n * Used when downloading existing files for user access.\n * @param udpFile - UdpDriveFile to download and convert\n * @returns Promise resolving to a File object with downloaded content\n * @internal\n */\n private async createFileFromUdpDriveFile(udpFile: UdpDriveFile): Promise<File> {\n try {\n const downloadUrl = `${ConfigService.tenantV1ApiUrl}/UdpDrive/${udpFile.driveFileId}/stream`;\n\n const response = await axios({\n method: 'GET',\n url: downloadUrl,\n responseType: 'blob',\n timeout: 300000, // 5 minutes\n headers: {\n // Add authentication headers if needed\n // 'Authorization': `Bearer ${accessToken}`\n }\n });\n\n const blob = response.data;\n\n // Create a File object with the downloaded content\n // Use the udpFile.name or construct from extension\n const fileName = udpFile.name || `file.${udpFile.extension}`;\n\n return new File([blob], fileName, {\n type: blob.type || this.getMimeTypeFromExtension(udpFile.extension),\n lastModified: udpFile.lastUpdated ? new Date(udpFile.lastUpdated).getTime() : Date.now()\n });\n } catch (error) {\n console.error('Error creating file from UdpDriveFile:', error);\n // Return a placeholder file if download fails\n const fileName = udpFile.name || `file.${udpFile.extension}`;\n return new File([''], fileName, { type: 'application/octet-stream' });\n }\n }\n\n /**\n * Get MIME type from file extension for proper file type handling.\n * @param extension - File extension without dot (e.g., \"pdf\", \"jpg\")\n * @returns MIME type string\n * @internal\n */\n private getMimeTypeFromExtension(extension: string): string {\n // Handle null/undefined extension\n if (!extension) {\n return 'application/octet-stream';\n }\n\n const mimeTypes: { [key: string]: string } = {\n 'pdf': 'application/pdf',\n 'doc': 'application/msword',\n 'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n 'xls': 'application/vnd.ms-excel',\n 'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n 'ppt': 'application/vnd.ms-powerpoint',\n 'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n 'txt': 'text/plain',\n 'csv': 'text/csv',\n 'json': 'application/json',\n 'xml': 'application/xml',\n 'html': 'text/html',\n 'css': 'text/css',\n 'js': 'application/javascript',\n 'png': 'image/png',\n 'jpg': 'image/jpeg',\n 'jpeg': 'image/jpeg',\n 'gif': 'image/gif',\n 'svg': 'image/svg+xml',\n 'zip': 'application/zip',\n 'rar': 'application/x-rar-compressed',\n '7z': 'application/x-7z-compressed'\n };\n\n return mimeTypes[extension.toLowerCase()] || 'application/octet-stream';\n }\n\n /**\n * Component lifecycle method. Initializes the component and sets up file input.\n * @internal\n */\n async componentWillLoad() {\n // Prevent re-initialization if component is already initialized\n if (this.isInitialized) {\n return;\n }\n\n // Initialize hidden file input FIRST before any async operations\n this.dragCounter = 0;\n this.hiddenInput = document.createElement('input');\n this.hiddenInput.type = 'file';\n this.hiddenInput.multiple = this.allowMultiple;\n this.hiddenInput.style.display = 'none';\n this.hiddenInput.addEventListener('change', this.handleFileInput);\n document.body.appendChild(this.hiddenInput);\n\n if (this.allowedFileTypes && this.disallowedFileTypes) {\n throw new Error('allowedFileTypes and disallowedFileTypes are mutually exlusive, you cannot use both props');\n }\n\n if (this.error) {\n this.errorMessage = this.error;\n }\n\n // Now do async operations after hiddenInput is ready\n // Initialize from initialValue (stencil-field usage) or value prop (direct usage)\n // Priority: initialValue > value > empty\n if (this.initialValue !== undefined && this.initialValue !== null && this.initialValue !== '') {\n await this.initialValueChanged(this.initialValue);\n } else if (this.value !== undefined && this.value !== null) {\n await this.processValueProp(this.value);\n }\n\n // Mark as initialized\n this.isInitialized = true;\n }\n\n /**\n * Process the value prop (used during initialization only)\n * @param newValue - Value prop content\n * @internal\n */\n private async processValueProp(newValue: File | File[] | UdpDriveFile | UdpDriveFile[] | null | undefined) {\n if (newValue === null || newValue === undefined) {\n this.files = [];\n return;\n }\n\n // Check if this looks like an event detail object (has value, files, toString, valueOf properties)\n // If so, ignore it since this is from our own updateValueProp, not external initialization\n if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue && 'toString' in newValue) {\n return;\n }\n\n try {\n if (Array.isArray(newValue)) {\n if (newValue.length === 0) {\n this.files = [];\n return;\n }\n\n // Process each item in the array\n const processedFiles: File[] = [];\n for (const item of newValue) {\n // Process the item and filter out nulls from invalid objects\n const processedFile = await this.processInitialFile(item);\n if (processedFile) {\n processedFiles.push(processedFile);\n }\n }\n this.files = processedFiles;\n\n } else {\n // Single value\n const processedFile = await this.processInitialFile(newValue as UdpDriveFile | File);\n if (processedFile) {\n this.files = [processedFile];\n } else {\n this.files = [];\n }\n }\n\n // Update value prop after initialization (but don't emit events)\n this.updateValueProp();\n\n } catch (error) {\n console.error('Error in processValueProp:', error);\n this.files = [];\n }\n }\n\n /**\n * Manually emit events when files change due to user interaction.\n * This replaces the automatic @Watch('files') to avoid circular updates.\n * @internal\n */\n private emitFileChangeEvents() {\n // Update the mutable value prop for non-stencil-field usage\n this.updateValueProp();\n\n // Separate new files (to be uploaded) from existing files (already on server)\n const newFiles = this.files.filter(file => !this.existingFileReferences.has(file.name));\n const existingFiles = this.files.filter(file => this.existingFileReferences.has(file.name));\n\n // If no files at all, emit null instead of empty string\n if (newFiles.length === 0 && existingFiles.length === 0) {\n // Emit null to indicate no files\n this.change.emit(null);\n //this.input.emit(null);\n return;\n }\n\n // Create a structured value that includes both string representation and File objects\n // This allows the form handler to extract the files while maintaining string serialization\n const fileReferences: string[] = [];\n newFiles.forEach(file => {\n // Ensure file has a valid name before adding to references\n if (file.name && file.name.trim() !== '') {\n fileReferences.push(file.name.trim());\n }\n });\n\n existingFiles.forEach(file => {\n if (file.name && file.name.trim() !== '') {\n const udpDriveFile = this.existingFileReferences.get(file.name);\n if (udpDriveFile) {\n fileReferences.push(`${file.name.trim()}|udp:${udpDriveFile.driveFileId}`);\n }\n }\n });\n\n const combinedValue = fileReferences.join(',');\n\n // Create a special value object that contains both the string and the files\n // This allows generic handling while preserving File objects for upload\n const detailValue = {\n toString: () => combinedValue, // For string serialization\n valueOf: () => combinedValue, // For primitive conversion\n value: combinedValue, // Explicit string value\n files: newFiles.filter(file => file.name && file.name.trim() !== '') // Only include files with valid names\n };\n\n // Emit standard events using Stencil's @Event() decorators\n this.change.emit(detailValue);\n }\n\n /**\n * Update the mutable value prop to reflect current files.\n * For direct usage, we want to include all files (new and existing).\n * @internal\n */\n private updateValueProp() {\n try {\n if (this.allowMultiple) {\n this.value = [...this.files];\n } else {\n this.value = this.files.length > 0 ? this.files[0] : null;\n }\n } catch (error) {\n console.error('Error updating value prop:', error);\n }\n }\n\n /**\n * Handles drag over events. Prevents default behavior to allow drop.\n * @param event - Drag event\n * @internal\n */\n private handleDragOver = (event: DragEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n };\n\n /**\n * Handles drag enter events. Adds highlight styling to drop area.\n * @param event - Drag event\n * @internal\n */\n private handleDragEnter = (event: DragEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n const dropArea = event.currentTarget as HTMLElement;\n this.dragCounter++;\n dropArea.classList.add('highlight');\n };\n\n /**\n * Handles drag leave events. Removes highlight styling when drag exits.\n * @param event - Drag event\n * @internal\n */\n private handleDragLeave = (event: DragEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n const dropArea = event.currentTarget as HTMLElement;\n this.dragCounter--;\n if (this.dragCounter === 0) {\n dropArea.classList.remove('highlight');\n }\n };\n\n /**\n * Handles drop events. Processes dropped files and adds them to the component.\n * @param event - Drop event\n * @internal\n */\n private handleDrop = (event: DragEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n const dropArea = event.currentTarget as HTMLElement;\n dropArea.classList.remove('highlight');\n\n const files = event.dataTransfer.files;\n this.handleFiles(files);\n };\n\n /**\n * Handles file input change events from the hidden input element.\n * @param event - Input change event\n * @internal\n */\n private handleFileInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n\n if (input.files && input.files.length > 0) {\n this.handleFiles(input.files);\n }\n\n // Reset the input value so the same file can be selected again\n input.value = '';\n this.fileWindowOpen = false;\n };\n\n /**\n * Processes a FileList and adds valid files to the component.\n * Handles validation and multiple file constraints.\n * @param files - FileList from input or drop event\n * @internal\n */\n private handleFiles = (files: FileList) => {\n if (files.length === 0) return;\n\n const currentFiles = [...this.files];\n const newValidFiles: File[] = [];\n\n for (let i = 0; i < files.length; i++) {\n const file = files[i];\n\n // Validate file name\n if (!file.name || file.name.trim() === '') {\n continue;\n }\n\n // Check for duplicates\n const isDuplicate = currentFiles.some(existingFile =>\n existingFile.name === file.name && existingFile.size === file.size\n );\n\n if (isDuplicate) {\n continue;\n }\n\n // Validate file type if restrictions are set\n if (!this.isFileTypeAllowed(file)) {\n continue;\n }\n\n newValidFiles.push(file);\n\n // If not allowing multiple files, only take the first valid file\n if (!this.allowMultiple) {\n break;\n }\n }\n\n if (newValidFiles.length > 0) {\n if (this.allowMultiple) {\n this.files = [...currentFiles, ...newValidFiles];\n } else {\n // Replace existing files if not allowing multiple\n this.files = [newValidFiles[0]];\n }\n\n // Manually emit events since we're not using @Watch('files') anymore\n this.emitFileChangeEvents();\n }\n }\n\n /**\n * Validates if a file type is allowed based on component configuration.\n * @param file - File to validate\n * @returns True if file type is allowed\n * @internal\n */\n private isFileTypeAllowed(file: File): boolean {\n if (!file.name) {\n return false;\n }\n\n const extension = file.name.split('.').pop()?.toLowerCase();\n\n if (!extension) {\n return false;\n }\n\n // If allowedFileTypes is set, only allow those types\n if (this.allowedFileTypes && this.allowedFileTypes.length > 0) {\n return this.allowedFileTypes.map(type => type.toLowerCase()).includes(extension);\n }\n\n // If disallowedFileTypes is set, reject those types\n if (this.disallowedFileTypes && this.disallowedFileTypes.length > 0) {\n return !this.disallowedFileTypes.map(type => type.toLowerCase()).includes(extension);\n }\n\n // If no restrictions, allow all types\n return true;\n }\n\n /**\n * Handles browse files button click. Opens the file browser dialog.\n * @param event - Click event\n * @internal\n */\n private handleBrowseFiles = (event: Event) => {\n if (this.disabled || this.readonly) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n\n // Ensure hiddenInput is initialized before trying to use it\n if (!this.hiddenInput) {\n console.error('File input not initialized yet, attempting to create it now...');\n // Try to create it on-demand as a fallback\n try {\n this.hiddenInput = document.createElement('input');\n this.hiddenInput.type = 'file';\n this.hiddenInput.multiple = this.allowMultiple;\n this.hiddenInput.style.display = 'none';\n this.hiddenInput.addEventListener('change', this.handleFileInput);\n document.body.appendChild(this.hiddenInput);\n } catch (error) {\n console.error('Failed to create file input:', error);\n return;\n }\n }\n\n this.fileWindowOpen = true;\n this.hiddenInput.click();\n };\n\n /**\n * Removes a file from the component by index. Updates internal state and cleans up references.\n * @param index - Index of file to remove\n * @internal\n */\n private handleRemoveFile = (index: number) => {\n if (this.disabled || this.readonly) {\n return;\n }\n const fileToRemove = this.files[index];\n\n // Clean up existing file reference if it exists\n if (this.existingFileReferences.has(fileToRemove.name)) {\n this.existingFileReferences.delete(fileToRemove.name);\n }\n\n this.files.splice(index, 1);\n this.files = [...this.files];\n\n // Manually emit events since we're not using @Watch('files') anymore\n this.emitFileChangeEvents();\n }\n\n /**\n * Triggers download of a file. Handles both new files and existing UDP Drive files.\n * For UDP Drive files, downloads the content from the server first.\n * @param file - File to download\n * @internal\n */\n async downloadFile(file: File) {\n if (this.disabled) {\n return;\n }\n try {\n // Check if this is a placeholder for a UdpDriveFile\n const udpDriveFile = this.existingFileReferences.get(file.name);\n\n if (udpDriveFile) {\n // Download the actual file content from UdpDrive\n const actualFile = await this.createFileFromUdpDriveFile(udpDriveFile);\n\n // Create a temporary URL for the downloaded file\n const url = URL.createObjectURL(actualFile);\n\n // Create a temporary anchor element to trigger download\n const a = document.createElement('a');\n a.href = url;\n a.download = actualFile.name;\n a.style.display = 'none';\n\n // Add to DOM, click, and remove\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n\n // Clean up the temporary URL\n URL.revokeObjectURL(url);\n } else {\n // Regular file - create download directly\n const url = URL.createObjectURL(file);\n\n // Create a temporary anchor element to trigger download\n const a = document.createElement('a');\n a.href = url;\n a.download = file.name;\n a.style.display = 'none';\n\n // Add to DOM, click, and remove\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n\n // Clean up the temporary URL\n URL.revokeObjectURL(url);\n }\n } catch (error) {\n console.error('Error downloading file:', error);\n }\n }\n\n /**\n * Component lifecycle method. Cleans up the hidden file input.\n * @internal\n */\n disconnectedCallback() {\n if (this.hiddenInput) {\n document.body.removeChild(this.hiddenInput);\n this.hiddenInput = null;\n }\n }\n\n /**\n * Renders the file upload component with drag-and-drop area, browse button, and file list.\n * @returns JSX element or null if not ready\n * @internal\n */\n render() {\n // if (!this.hiddenInput) {\n // return null;\n // }\n const isError = !!this.errorMessage;\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--full-width': this.fullWidth,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n id={!this.hideDragAndDrop ? 'drop-area' : 'outer-container'}\n onDragOver={this.handleDragOver}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n class={!this.hideDragAndDrop ? (this.fullWidth ? 'full-width' : 'contained-width') : ''}\n >\n {!this.hideDragAndDrop ? (\n <unity-typography>\n <p>{this.dragAndDropMessage}</p>\n {!this.hideButton ? <p>or</p> : ''}\n </unity-typography>\n ) : (\n ''\n )}\n\n {!this.hideButton ? (\n <custom-button\n label={this.browseFileMessage}\n onClick={(e) => this.handleBrowseFiles(e)}\n id={'udpRecord-file-upload-' + this.id}\n disabled={this.disabled || this.readonly}\n //@ts-ignore\n udprecordid={'udpRecord-file-upload-' + this.id}\n />\n ) : (\n ''\n )}\n\n {this.files.length > 0 && (\n <div class={!this.hideDragAndDrop ? 'container' : ''}>\n <div class={!this.hideDragAndDrop ? 'inner-container' : ''}>\n {this.files.map((file, index) => {\n const isExistingFile = this.existingFileReferences.has(file.name);\n return (\n <div class={!this.hideDragAndDrop ? 'file-container' : ''} key={index}>\n <div class=\"file-text\" onClick={() => this.downloadFile(file)} style={{ cursor: this.disabled ? 'not-allowed' : 'pointer', textDecoration: 'underline' }}>\n <unity-typography>\n {file.name}\n {isExistingFile && <span style={{ fontSize: '0.8em', opacity: '0.7' }}> (saved)</span>}\n </unity-typography>\n </div>\n <div>\n <stencil-icon-button showLabel={false} icon={Close24} onClick={() => this.handleRemoveFile(index)} disabled={this.disabled || this.readonly} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n )}\n {this.errorMessage ? (\n <div id=\"error-text\">\n <unity-typography>{this.errorMessage}</unity-typography>\n </div>\n ) : (\n ''\n )}\n </div>\n </Host>\n );\n }\n}\n","@import '../inputs.css';\n\n/* selectable-list.css */\n\n:host {\n display: block;\n }\n\n/* Size variants for selectable list items */\n:host(.udp-input--size-small) li {\n padding: var(--spacing-02) var(--spacing-03);\n font-size: var(--caption-font-size, 0.875rem);\n}\n\n:host(.udp-input--size-normal) li {\n padding: var(--spacing-03) var(--spacing-04);\n font-size: var(--body-font-size);\n}\n\n:host(.udp-input--size-large) li {\n padding: var(--spacing-04) var(--spacing-05);\n font-size: var(--body-font-size);\n}\n\n ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n \n li {\n padding: var(--spacing-03) var(--spacing-04); /* Default padding, overridden by density variants */\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n \n li:hover {\n background-color: #f0f0f0;\n color: var(--text-color)\n }\n \n .selected {\n background-color: var(--primary-color);\n color: white\n }\n \n label {\n cursor: pointer\n } \n input {\n cursor: pointer\n }\n .error{\n color: var(--error-color-main)\n }","import {\n Component,\n Prop,\n State,\n h,\n Host,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n/**\n * A standardized selectable list component with single/multi-select support and various display options.\n * Supports both controlled and uncontrolled modes.\n *\n * This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying input element.\n *\n * @example\n * ```tsx\n * // Uncontrolled component with initial selection\n * <selectable-list\n * items={countries}\n * displayKey=\"name\"\n * valueKey=\"id\"\n * initialValue=\"1,2\"\n * multiSelect={true}\n * onChange={(e) => console.log('Selected:', e.detail)}\n * />\n *\n * // Controlled component\n * <selectable-list\n * items={items}\n * displayKey=\"name\"\n * valueKey=\"id\"\n * value={selectedValue}\n * onChange={(e) => setSelectedValue(e.detail)}\n * />\n *\n * // With checkboxes and validation\n * <selectable-list\n * items={options}\n * displayKey=\"label\"\n * valueKey=\"value\"\n * useCheckbox={true}\n * required={true}\n * error={selectionError}\n * value={selectedOptions}\n * onChange={handleSelectionChange}\n * />\n * ```\n */\n@Component({\n tag: 'selectable-list',\n styleUrl: 'selectable-list.css',\n shadow: true,\n})\nexport class SelectableList {\n @Element() el: HTMLElement;\n\n /**\n * Whether the field is disabled. When true, items cannot be selected or deselected.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * When true, the component is in a read-only state. Items can be viewed but not selected or deselected.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Size variant controlling the padding and spacing of the list items.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n */\n @Prop() size: InputSize = 'normal';\n\n /**\n * Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n */\n @Prop() margin: InputMargin = 'normal';\n\n /**\n * Whether multiple items can be selected. When false, only one item can be selected at a time.\n */\n @Prop() multiSelect: boolean = false;\n\n /**\n * Array of items to display in the list. Each item should be an object with properties for display and value.\n */\n @Prop() items: any[] = [];\n\n /**\n * Property name from item objects to use for display text. Required for proper rendering.\n */\n @Prop() displayKey: string = '';\n\n /**\n * Whether to render items with checkboxes/radio buttons instead of plain list items.\n */\n @Prop() useCheckbox: boolean = false;\n\n /**\n * Initial value for the selectable list. Used for uncontrolled components to set the default selection.\n * For multi-select, use comma-separated values (e.g., \"1,2,3\").\n * Only used when `value` prop is not provided.\n */\n @Prop() initialValue: string;\n\n /**\n * Current value of the selectable list. When provided, makes this a controlled component.\n * For multi-select, use comma-separated values (e.g., \"1,2,3\").\n * The component will use this value and update it through events.\n */\n @Prop({ mutable: true }) value: string;\n\n /**\n * Whether the field is required for form submission. Adds validation behavior.\n */\n @Prop() required: boolean;\n\n /**\n * Property name from item objects to use for the actual value. Required for proper functionality.\n */\n @Prop() valueKey: string = '';\n\n /**\n * Error message to display below the list. Shows validation errors or other issues.\n */\n @Prop() error: string = '';\n\n /**\n * Unique identifier for the list element. Used for form association and accessibility.\n */\n @Prop() id: string;\n\n /**\n * Name attribute for form submission. Used for radio button grouping when useCheckbox is true.\n */\n @Prop() name: string;\n\n /**\n * Label text displayed above the list. Used for accessibility and user guidance.\n */\n @Prop() label: string;\n\n /**\n * Internal items state with selection status. Manages item display and selection state.\n * @internal\n */\n @State() internalItems: any[] = [];\n\n /**\n * Internal value state. Manages the current selected value(s) independently of props.\n * @internal\n */\n @State() internalValue: string = '';\n\n /**\n * Internal error message state. Manages display of validation errors.\n * @internal\n */\n @State() errorMessage: string;\n\n /**\n * Emitted when the selection changes (on item click, etc.).\n * Provides the final committed value when user makes a selection.\n *\n * @event change\n * @param {string} value - The current selected value(s), comma-separated for multi-select\n *\n * @example\n * ```tsx\n * <selectable-list onChange={(e) => handleSelectionChange(e.detail)} />\n * ```\n */\n @Event() change: EventEmitter<string>;\n\n\n /**\n * Updates the error message when the error prop changes.\n * @internal\n */\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /**\n * Updates the internal value when initialValue prop changes.\n * Only updates if current value is empty or if this is an uncontrolled component.\n * @internal\n */\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n // Only update if we don't have a value yet or if this is uncontrolled (no value prop)\n if ((this.internalValue === '' || this.internalValue === undefined) || this.value === undefined) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n this.updateItemSelection(newValue);\n }\n }\n }\n\n /**\n * Updates the internal value when value prop changes.\n * For controlled components, the value prop takes precedence.\n * @internal\n */\n @Watch('value')\n valueChanged() {\n // If value prop is provided, this is a controlled component\n if (this.value !== undefined && this.value !== this.internalValue) {\n this.internalValue = this.value;\n this.updateItemSelection(this.value);\n }\n }\n\n /**\n * Re-initializes items when the items prop changes.\n * @internal\n */\n @Watch('items')\n itemsChanged() {\n // Re-initialize when items change\n this.initializeItems();\n }\n /**\n * Component lifecycle method. Initializes error message, internal value, and items.\n * @internal\n */\n componentWillLoad() {\n // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');\n\n if (this.error) {\n this.errorMessage = this.error;\n }\n\n this.initializeItems();\n }\n\n /**\n * Initializes the internal items array with proper selection state.\n * @internal\n */\n private initializeItems() {\n if (!this.valueKey) {\n console.error('valueKey is required');\n this.internalItems = this.items;\n return;\n }\n\n this.updateItemSelection(this.internalValue);\n }\n\n /**\n * Updates the selection state of items based on the provided value.\n * @param selectedValue - Comma-separated string of selected values\n * @internal\n */\n private updateItemSelection(selectedValue: string) {\n if (!selectedValue || !this.valueKey) {\n this.internalItems = [...this.items];\n return;\n }\n\n const selectedItems = this.items.filter(item =>\n selectedValue.split(',').includes(item[this.valueKey])\n );\n\n let filteredSelectedItems = selectedItems;\n if (selectedItems.length > 1 && !this.multiSelect) {\n filteredSelectedItems = [selectedItems[0]];\n console.warn('multiple values are selected, but multiselect is disabled');\n }\n\n const items = this.items.map(item => ({\n ...item,\n selected: filteredSelectedItems.some(selectedItem =>\n selectedItem[this.valueKey] === item[this.valueKey]\n )\n }));\n\n this.internalItems = items;\n }\n /**\n * Gets the currently selected items from the items array.\n * @param items - Optional items array to check, defaults to internal items\n * @returns Array of selected items\n * @internal\n */\n getSelectedItems(items: any[] = null): any[] {\n const itemsToCheck = items ?? this.internalItems;\n return itemsToCheck.filter(item => item.selected) ?? [];\n }\n\n /**\n * Gets the current value as a comma-separated string of selected values.\n * @param items - Optional items array to check, defaults to internal items\n * @returns Comma-separated string of selected values\n * @internal\n */\n getValue(items: any[] = null): string {\n const itemsToCheck = items ?? this.internalItems\n return this.getSelectedItems(itemsToCheck).map(item => item[this.valueKey] ?? item[this.displayKey]).join(',') ?? \"\"\n }\n\n\n /**\n * Handles item click events. Updates selection state and emits events.\n * For controlled components, also updates the value prop.\n * @param item - The clicked item\n * @internal\n */\n private handleItemClick = (item: any) => {\n if (this.disabled || this.readonly) return;\n let newItems = [...this.internalItems];\n const selectedIndex = this.internalItems.findIndex(\n selectedItem => (this.valueKey && selectedItem[this.valueKey] === item[this.valueKey]) || (!this.valueKey && selectedItem === item),\n );\n\n newItems.splice(selectedIndex, 1, {...item, selected: !item.selected});\n if (!this.multiSelect && !item.selected) {\n newItems = newItems.map((item, i) => ({...item, selected: i === selectedIndex}))\n }\n this.internalItems = newItems;\n\n // Update internal value state\n const newValue = this.getValue(newItems);\n this.internalValue = newValue;\n\n // If this is a controlled component (value prop provided), update the value prop\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n // Emit events for real-time and committed updates\n this.change.emit(newValue);\n }\n /**\n * Renders the selectable list component.\n * @returns JSX element or null if valueKey is not provided\n * @internal\n */\n render() {\n if(!this.valueKey)\n return null;\n const isError = !!this.errorMessage;\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n 'udp-input--required': this.required,\n 'udp-input--multi-select': this.multiSelect,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <ul>\n {this.internalItems.map((item, i) => (\n <li\n key={item.id || item[this.displayKey]}\n onClick={() => this.handleItemClick(item)}\n class={item.selected && !this.useCheckbox ? 'selected' : ''}\n id={'udpRecord-selectable-list-input-' + i + '-' + this.id}\n //@ts-ignore\n udprecordid={'udpRecord-selectable-list-input-' + i + '-' + this.id}\n >\n {this.useCheckbox ? (\n <label>\n <input\n type={this.multiSelect ? 'checkbox' : 'radio'}\n name={this.name || ((this.valueKey && item[this.valueKey]) || (item.id ?? item[this.displayKey]))}\n disabled={this.disabled || this.readonly}\n value={(this.valueKey && item[this.valueKey]) || (item.id ?? item[this.displayKey])}\n checked={item.selected}\n onChange={() => this.handleItemClick(item)}\n />\n {item[this.displayKey]}\n </label>\n ) : (\n <div>{item[this.displayKey]}</div>\n )}\n </li>\n ))}\n {this.errorMessage && <unity-typography class=\"error\" variant='caption-text' color=\"error\">{this.errorMessage}</unity-typography>}\n </ul>\n </Host>\n );\n }\n}\n","stencil-field.css\n:host {\n display: block;\n padding: 16px;\n background-color: #f4f4f4; /* A lighter gray typical of Carbon backgrounds */\n }\n \n input[type=\"checkbox\"], input[type=\"radio\"] {\n appearance: none;\n background-color: #fff;\n border: 2px solid #8d8d8d; /* Carbon's default border color */\n width: 20px; /* Typical size for touch targets */\n height: 20px; /* Square dimension for checkbox, circular for radio */\n border-radius: 50%; /* Full circle for radios, adjust for checkbox if needed */\n position: relative;\n cursor: pointer; /* Pointer to indicate clickable */\n transition: all 0.3s ease; /* Smooth transition for visual feedback */\n }\n \n input[type=\"checkbox\"] {\n border-radius: 2px; /* Slightly rounded corners for checkboxes */\n }\n \n input[type=\"radio\"]:checked, input[type=\"checkbox\"]:checked {\n background-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n \n input[type=\"radio\"]:checked::before, input[type=\"radio\"]:checked::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n background-color: white;\n border-radius: 50%; /* Circle inside radio or checkbox */\n }\n\n input[type=\"checkbox\"]:checked::before {\n content: '\\2714'; /* Unicode character for checkmark */\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 14px; /* Adjust size as needed */\n color: white; /* Make sure the color is white */\n}\n\n \n\n .checkbox-container, .radio-container {\n display: flex;\n align-items: center; /* Vertical alignment */\n cursor: pointer;\n}\n\ninput[type=\"checkbox\"], input[type=\"radio\"] {\n margin-right: 8px; /* Space between the checkbox and the label */\n}\n\nlabel {\n margin: 0; /* Remove default margin */\n display: block; /* Optional: ensures the label uses the full height */\n line-height: 1; /* Aligns text properly within the flex container */\n display: flex;\n align-items: center;\n}\n\n","/**\n * StencilField - Form field wrapper component that integrates with Final Form\n *\n * This component acts as a bridge between form input components and Final Form state management.\n * It uses slot-based rendering and property injection to work with any child input component.\n *\n * REQUIREMENTS FOR CHILD COMPONENTS:\n *\n * 1. VALUE HANDLING:\n * - SIMPLE INPUTS: Manage own value state, receive initialValue prop from stencil-field\n * - COMPLEX INPUTS: Same approach - internal value management with initialValue\n * - stencil-field reads values from DOM events or custom events, never directly modifies component value\n *\n * 2. ERROR HANDLING:\n * - Child component should have an @Prop() error: string\n * - Use @Watch('error') to react to validation errors\n *\n * 3. EVENT HANDLERS:\n * - Child component must emit standard DOM events (input, change, blur, focus)\n * - SIMPLE INPUTS: Standard HTML input/textarea that emits native events\n * - COMPLEX INPUTS: Emit CustomEvent with detail containing the value\n *\n * 4. STANDARD FORM PROPS:\n * - @Prop() name: string (for form field identification)\n * - @Prop() id: string (for accessibility)\n * - @Prop() label: string (for field labeling)\n * - @Prop() initialValue: string (for setting initial/default values)\n *\n * EXAMPLE SIMPLE INPUT:\n * ```tsx\n * @Component({ tag: 'simple-input' })\n * export class SimpleInput {\n * @Prop() error: string;\n * @Prop() name: string;\n * @Prop() id: string;\n * @Prop() label: string;\n * @Prop() initialValue: string;\n * @State() value: string;\n *\n * componentWillLoad() {\n * this.value = this.initialValue || '';\n * }\n *\n * private onChange = (e: Event) => {\n * this.value = (e.target as HTMLInputElement).value;\n * }\n *\n * render() {\n * return <input name={this.name} id={this.id} value={this.value} onInput={this.onChange} />;\n * }\n * }\n * ```\n *\n * EXAMPLE COMPLEX INPUT:\n * ```tsx\n * @Component({ tag: 'complex-input' })\n * export class ComplexInput {\n * @Prop() error: string;\n * @Prop() name: string;\n * @Prop() id: string;\n * @Prop() label: string;\n * @Prop() initialValue: string;\n * @State() value: string;\n *\n * componentWillLoad() {\n * this.value = this.initialValue || '';\n * }\n *\n * @Watch('error')\n * updateError() {\n * // Handle error display\n * }\n *\n * private onChange = (newValue: string) => {\n * this.value = newValue; // Update internal state\n * // Emit custom event for stencil-field\n * this.el.dispatchEvent(new CustomEvent('input', {\n * detail: newValue,\n * bubbles: true\n * }));\n * }\n * }\n * ```\n *\n * USAGE:\n * ```tsx\n * \n * <stencil-field name=\"email\" label=\"Email\" required>\n * <simple-input />\n * </stencil-field>\n *\n * \n * <stencil-field name=\"tags\" label=\"Tags\" required>\n * <tag-selector />\n * </stencil-field>\n * ```\n */\nimport { Component, Prop, h, State, Listen, Element, Method } from '@stencil/core';\n\n@Component({\n tag: 'stencil-field',\n styleUrl: 'stencil-field.css',\n shadow: false,\n})\nexport class StencilField {\n @Element() el: HTMLElement;\n @Prop() id: string;\n @Prop() defaultValue: string;\n @Prop() name: string;\n @Prop() label: string;\n @Prop() required: boolean = false;\n @Prop({ mutable: true }) value: string;\n @State() errorMessage: string;\n @State() registered: boolean = false;\n @State() finalFormBlur: (e: Event) => void = () => {};\n @State() finalFormChange: (value: any) => void = () => {};\n @State() finalFormFocus: (e: Event) => void = () => {};\n\n private state: any;\n\n @Method()\n async setFormApi(formApi: any) {\n this.state = formApi;\n this.state.api.registerField(\n this.name,\n fieldState => {\n const { blur, change, focus, value } = fieldState;\n if (!this.state.registeredFields[this.name]) {\n this.state.registeredFields[this.name] = { required: this.required };\n // first time, register event listeners\n\n this.finalFormBlur = () => {\n blur();\n this.errorMessage = this.state.api.getFieldState(this.name)?.error;\n };\n this.finalFormChange = event => {\n change(event);\n // reset the error on change, error state will be re-evaluated when the blur event is triggered\n this.errorMessage = '';\n // Force re-render to inject cleared error into child components\n this.injectPropsIntoSlottedElements();\n };\n this.finalFormFocus = focus;\n this.registered = true;\n }\n\n // update value\n\n this.value = value;\n },\n {\n value: true,\n error: false,\n touched: false,\n },\n );\n }\n\n componentDidRender() {\n this.injectPropsIntoSlottedElements();\n }\n\n componentDidUpdate() {\n this.injectPropsIntoSlottedElements();\n }\n\n private injectPropsIntoSlottedElements() {\n const hasSlottedContent = this.el.children.length > 0;\n\n if (hasSlottedContent) {\n Array.from(this.el.children).forEach((element: any) => {\n // Inject form field props\n // Pass initial value only, don't control the component's value directly\n if (this.value !== undefined && !element.hasAttribute('data-initial-value-set')) {\n element.initialValue = this.value;\n element.setAttribute('data-initial-value-set', 'true');\n }\n\n // Always update error state (including clearing it)\n element.error = this.errorMessage || '';\n\n if (this.name) element.name = this.name;\n if (this.id) element.id = this.id;\n if (this.label) element.label = this.label;\n\n // Set up event handlers if not already bound\n if (!element.hasAttribute('data-field-events-bound')) {\n element.addEventListener('input', this.handleInput.bind(this));\n element.addEventListener('change', this.handleChange.bind(this));\n element.addEventListener('blur', this.handleBlur.bind(this));\n element.addEventListener('focus', this.handleFocus.bind(this));\n element.setAttribute('data-field-events-bound', 'true');\n }\n });\n }\n }\n\n disconnectedCallback() {\n // Clean up the field from the registry when component is unmounted\n if (!this.name) {\n return;\n }\n if (this.state.registeredFields[this.name]) {\n delete this.state.registeredFields[this.name];\n }\n\n // Final Form automatically handles field cleanup when no longer subscribed,\n // but we can also explicitly remove the field value if needed\n try {\n if (this.state.api?.change) {\n this.state.api.change(this.name, undefined);\n }\n } catch (error) {\n // Silently handle any errors during cleanup\n console.debug('Field cleanup warning:', error);\n }\n\n // Reset registration state\n this.registered = false;\n }\n\n @Listen('input')\n handleInput(e: Event) {\n let value;\n\n // Handle custom events from complex components\n if (e instanceof CustomEvent && e.detail !== undefined) {\n value = e.detail;\n } else {\n // Handle standard DOM events - need to find the actual input element\n const target = e.target as HTMLElement;\n\n // If target is a custom component, look for the actual input in its shadow DOM\n if (target.shadowRoot) {\n const input = target.shadowRoot.querySelector('input, textarea, select') as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n if (input) {\n value = input.value;\n }\n }\n // If target is the actual input element\n else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {\n value = (target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value;\n }\n // Fallback: check if the custom component has a value property\n else if ('value' in target) {\n value = (target as any).value;\n }\n }\n\n if (value !== undefined) {\n this.finalFormChange?.(value);\n }\n }\n\n @Listen('change')\n handleChange(e: Event) {\n let value;\n\n // Handle custom events from complex components\n if (e instanceof CustomEvent && e.detail !== undefined) {\n value = e.detail;\n } else {\n // Handle standard DOM events - need to find the actual input element\n const target = e.target as HTMLElement;\n\n // If target is a custom component, look for the actual input in its shadow DOM\n if (target.shadowRoot) {\n const input = target.shadowRoot.querySelector('input, textarea, select') as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n if (input) {\n value = input.value;\n }\n }\n // If target is the actual input element\n else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {\n value = (target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value;\n }\n // Fallback: check if the custom component has a value property\n else if ('value' in target) {\n value = (target as any).value;\n }\n }\n\n if (value !== undefined) {\n this.finalFormChange?.(value);\n // For complex components that emit custom events, also trigger blur validation\n if (e instanceof CustomEvent) {\n this.finalFormBlur?.(e);\n }\n }\n }\n\n @Listen('focus')\n handleFocus(e: FocusEvent) {\n this.finalFormFocus?.(e);\n }\n\n @Listen('blur')\n handleBlur(e: FocusEvent) {\n this.finalFormBlur?.(e);\n }\n\n @Listen('stencilFormInvalidEvent', {target: 'body'})\n stencilInvalid(e){\n this.finalFormBlur(e);\n }\n render() {\n if (!this.registered) {\n return null;\n }\n\n // Always use slot-based rendering\n return <slot />;\n }\n}\n"],"mappings":"kKAAA,MAAMA,EAAgB,iuB,MC6DTC,EAAU,MALvB,WAAAC,CAAAC,G,uCA4BUC,KAASC,UAAY,MAerBD,KAAkBE,mBAAW,gCAK7BF,KAAiBG,kBAAW,eAK5BH,KAAeI,gBAAY,MAK3BJ,KAAUK,WAAY,MAoBtBL,KAAQM,SAAY,MAKpBN,KAAQO,SAAY,MAwBnBP,KAAKQ,MAAW,GAMhBR,KAAcS,eAAY,MAa1BT,KAAAU,uBAAoD,IAAIC,IA0CzDX,KAAWY,YAAW,EAMtBZ,KAAaa,cAAY,MAmYzBb,KAAAc,eAAkBC,IACxB,GAAIf,KAAKM,UAAYN,KAAKO,SAAU,CAClC,M,CAEFQ,EAAMC,iBACND,EAAME,iBAAiB,EAQjBjB,KAAAkB,gBAAmBH,IACzB,GAAIf,KAAKM,UAAYN,KAAKO,SAAU,CAClC,M,CAEFQ,EAAMC,iBACND,EAAME,kBACN,MAAME,EAAWJ,EAAMK,cACvBpB,KAAKY,cACLO,EAASE,UAAUC,IAAI,YAAY,EAQ7BtB,KAAAuB,gBAAmBR,IACzB,GAAIf,KAAKM,UAAYN,KAAKO,SAAU,CAClC,M,CAEFQ,EAAMC,iBACND,EAAME,kBACN,MAAME,EAAWJ,EAAMK,cACvBpB,KAAKY,cACL,GAAIZ,KAAKY,cAAgB,EAAG,CAC1BO,EAASE,UAAUG,OAAO,Y,GAStBxB,KAAAyB,WAAcV,IACpB,GAAIf,KAAKM,UAAYN,KAAKO,SAAU,CAClC,M,CAEFQ,EAAMC,iBACND,EAAME,kBACN,MAAME,EAAWJ,EAAMK,cACvBD,EAASE,UAAUG,OAAO,aAE1B,MAAMhB,EAAQO,EAAMW,aAAalB,MACjCR,KAAK2B,YAAYnB,EAAM,EAQjBR,KAAA4B,gBAAmBb,IACzB,MAAMc,EAAQd,EAAMe,OAEpB,GAAID,EAAMrB,OAASqB,EAAMrB,MAAMuB,OAAS,EAAG,CACzC/B,KAAK2B,YAAYE,EAAMrB,M,CAIzBqB,EAAMG,MAAQ,GACdhC,KAAKS,eAAiB,KAAK,EASrBT,KAAA2B,YAAenB,IACrB,GAAIA,EAAMuB,SAAW,EAAG,OAExB,MAAME,EAAe,IAAIjC,KAAKQ,OAC9B,MAAM0B,EAAwB,GAE9B,IAAK,IAAIC,EAAI,EAAGA,EAAI3B,EAAMuB,OAAQI,IAAK,CACrC,MAAMC,EAAO5B,EAAM2B,GAGnB,IAAKC,EAAKC,MAAQD,EAAKC,KAAKC,SAAW,GAAI,CACzC,Q,CAIF,MAAMC,EAAcN,EAAaO,MAAKC,GACpCA,EAAaJ,OAASD,EAAKC,MAAQI,EAAaC,OAASN,EAAKM,OAGhE,GAAIH,EAAa,CACf,Q,CAIF,IAAKvC,KAAK2C,kBAAkBP,GAAO,CACjC,Q,CAGFF,EAAcU,KAAKR,GAGnB,IAAKpC,KAAK6C,cAAe,CACvB,K,EAIJ,GAAIX,EAAcH,OAAS,EAAG,CAC5B,GAAI/B,KAAK6C,cAAe,CACtB7C,KAAKQ,MAAQ,IAAIyB,KAAiBC,E,KAC7B,CAELlC,KAAKQ,MAAQ,CAAC0B,EAAc,G,CAI9BlC,KAAK8C,sB,GAwCD9C,KAAA+C,kBAAqBhC,IAC3B,GAAIf,KAAKM,UAAYN,KAAKO,SAAU,CAClC,M,CAEFQ,EAAMC,iBACND,EAAME,kBAGN,IAAKjB,KAAKgD,YAAa,CACrBC,QAAQC,MAAM,kEAEd,IACElD,KAAKgD,YAAcG,SAASC,cAAc,SAC1CpD,KAAKgD,YAAYK,KAAO,OACxBrD,KAAKgD,YAAYM,SAAWtD,KAAK6C,cACjC7C,KAAKgD,YAAYO,MAAMC,QAAU,OACjCxD,KAAKgD,YAAYS,iBAAiB,SAAUzD,KAAK4B,iBACjDuB,SAASO,KAAKC,YAAY3D,KAAKgD,Y,CAC/B,MAAOE,GACPD,QAAQC,MAAM,+BAAgCA,GAC9C,M,EAIJlD,KAAKS,eAAiB,KACtBT,KAAKgD,YAAYY,OAAO,EAQlB5D,KAAA6D,iBAAoBC,IAC1B,GAAI9D,KAAKM,UAAYN,KAAKO,SAAU,CAClC,M,CAEF,MAAMwD,EAAe/D,KAAKQ,MAAMsD,GAGhC,GAAI9D,KAAKU,uBAAuBsD,IAAID,EAAa1B,MAAO,CACtDrC,KAAKU,uBAAuBuD,OAAOF,EAAa1B,K,CAGlDrC,KAAKQ,MAAM0D,OAAOJ,EAAO,GACzB9D,KAAKQ,MAAQ,IAAIR,KAAKQ,OAGtBR,KAAK8C,sBAAsB,CA4J9B,CAjvBC,WAAAqB,GACEnE,KAAKoE,aAAepE,KAAKkD,K,CAU3B,yBAAMmB,CAAoBC,GAGxB,GAAIA,UAAmBA,IAAa,UAAY,UAAWA,GAAY,UAAWA,GAAY,aAAcA,EAAU,CACpHrB,QAAQsB,IAAI,gGACZ,M,CAGF,GAAID,IAAa,IAAMA,IAAaE,WAAaF,IAAa,KAAM,CAClEtE,KAAKQ,MAAQ,GACbR,KAAKU,uBAAuB+D,QAC5B,M,CAGF,IAEEzE,KAAKU,uBAAuB+D,QAE5B,UAAWH,IAAa,SAAU,CAEhCtE,KAAKQ,MAAQ,E,MACR,GAAIkE,MAAMC,QAAQL,GAAW,CAElC,MAAMM,QAAuBC,QAAQC,IACnCR,EAASS,KAAI3C,GAAQpC,KAAKgF,mBAAmB5C,MAG/CpC,KAAKQ,MAAQoE,EAAeK,QAAO7C,GAAQA,IAAS,M,KAC/C,CAEL,MAAM8C,QAAsBlF,KAAKgF,mBAAmBV,GACpDtE,KAAKQ,MAAQ0E,EAAgB,CAACA,GAAiB,E,CAIjDlF,KAAKmF,iB,CACL,MAAOjC,GACPD,QAAQC,MAAM,kCAAmCA,GACjDlD,KAAKQ,MAAQ,GACbR,KAAKU,uBAAuB+D,O,EAWxB,wBAAMO,CAAmB5C,GAE/Ba,QAAQsB,IAAInC,GACZ,IAAKA,EAAM,CACT,OAAO,I,CAGT,GAAIpC,KAAKoF,eAAehD,GAAO,CAE7B,IACE,MAAMiD,EAAkBrF,KAAKsF,sCAAsClD,GAEnEpC,KAAKU,uBAAuB6E,IAAIF,EAAgBhD,KAAMD,GACtD,OAAOiD,C,CACP,MAAOnC,GACPD,QAAQC,MAAM,qDAAsDA,GACpE,OAAO,I,OAEJ,GAAId,aAAgBoD,KAAM,CAE/B,OAAOpD,C,KACF,CAEL,OAAO,I,EAUH,cAAAgD,CAAehD,GACrB,OAAOA,UAAeA,IAAS,UAAY,gBAAiBA,C,CAUtD,qCAAAkD,CAAsCG,GAE5C,MAAMC,EAAYD,EAAQC,WAAa,MACvC,MAAMC,EAAWF,EAAQpD,MAAQ,QAAQqD,IAEzC,MAAME,EAAkB,IAAIC,KAAK,CAAC,IAAK,CAAExC,KAAMrD,KAAK8F,yBAAyBJ,KAG7E,IAAIK,EAAeC,KAAKC,MACxB,GAAIR,EAAQS,YAAa,CACvB,UAAWT,EAAQS,cAAgB,iBAAmBT,EAAQS,cAAgB,SAAU,CACtFH,EAAe,IAAIC,KAAKP,EAAQS,aAAaC,S,MACxC,GAAIV,EAAQS,uBAAuBF,KAAM,CAC9CD,EAAeN,EAAQS,YAAYC,S,EAIvC,MAAM/D,EAAO,IAAIoD,KAAK,CAACI,GAAkBD,EAAU,CACjDtC,KAAMuC,EAAgBvC,KACtB0C,aAAcA,IAGhB,OAAO3D,C,CAUD,gCAAMgE,CAA2BX,GACvC,IACE,MAAMY,EAAc,GAAGC,EAAcC,2BAA2Bd,EAAQe,qBAExE,MAAMC,QAAiBC,EAAM,CAC3BC,OAAQ,MACRC,IAAKP,EACLQ,aAAc,OACdC,QAAS,IACTC,QAAS,CAGR,IAGH,MAAMC,EAAOP,EAASQ,KAItB,MAAMtB,EAAWF,EAAQpD,MAAQ,QAAQoD,EAAQC,YAEjD,OAAO,IAAIF,KAAK,CAACwB,GAAOrB,EAAU,CAChCtC,KAAM2D,EAAK3D,MAAQrD,KAAK8F,yBAAyBL,EAAQC,WACzDK,aAAcN,EAAQS,YAAc,IAAIF,KAAKP,EAAQS,aAAaC,UAAYH,KAAKC,O,CAErF,MAAO/C,GACPD,QAAQC,MAAM,yCAA0CA,GAExD,MAAMyC,EAAWF,EAAQpD,MAAQ,QAAQoD,EAAQC,YACjD,OAAO,IAAIF,KAAK,CAAC,IAAKG,EAAU,CAAEtC,KAAM,4B,EAUpC,wBAAAyC,CAAyBJ,GAE/B,IAAKA,EAAW,CACd,MAAO,0B,CAGT,MAAMwB,EAAuC,CAC3CC,IAAO,kBACPC,IAAO,qBACPC,KAAQ,0EACRC,IAAO,2BACPC,KAAQ,oEACRC,IAAO,gCACPC,KAAQ,4EACRC,IAAO,aACPC,IAAO,WACPC,KAAQ,mBACRC,IAAO,kBACPC,KAAQ,YACRC,IAAO,WACPC,GAAM,yBACNC,IAAO,YACPC,IAAO,aACPC,KAAQ,aACRC,IAAO,YACPC,IAAO,gBACPC,IAAO,kBACPC,IAAO,+BACP,KAAM,+BAGR,OAAOrB,EAAUxB,EAAU8C,gBAAkB,0B,CAO/C,uBAAMC,GAEJ,GAAIzI,KAAKa,cAAe,CACtB,M,CAIFb,KAAKY,YAAc,EACnBZ,KAAKgD,YAAcG,SAASC,cAAc,SAC1CpD,KAAKgD,YAAYK,KAAO,OACxBrD,KAAKgD,YAAYM,SAAWtD,KAAK6C,cACjC7C,KAAKgD,YAAYO,MAAMC,QAAU,OACjCxD,KAAKgD,YAAYS,iBAAiB,SAAUzD,KAAK4B,iBACjDuB,SAASO,KAAKC,YAAY3D,KAAKgD,aAE/B,GAAIhD,KAAK0I,kBAAoB1I,KAAK2I,oBAAqB,CACrD,MAAM,IAAIC,MAAM,4F,CAGlB,GAAI5I,KAAKkD,MAAO,CACdlD,KAAKoE,aAAepE,KAAKkD,K,CAM3B,GAAIlD,KAAK6I,eAAiBrE,WAAaxE,KAAK6I,eAAiB,MAAQ7I,KAAK6I,eAAiB,GAAI,OACvF7I,KAAKqE,oBAAoBrE,KAAK6I,a,MAC/B,GAAI7I,KAAKgC,QAAUwC,WAAaxE,KAAKgC,QAAU,KAAM,OACpDhC,KAAK8I,iBAAiB9I,KAAKgC,M,CAInChC,KAAKa,cAAgB,I,CAQf,sBAAMiI,CAAiBxE,GAC7B,GAAIA,IAAa,MAAQA,IAAaE,UAAW,CAC/CxE,KAAKQ,MAAQ,GACb,M,CAKF,GAAI8D,UAAmBA,IAAa,UAAY,UAAWA,GAAY,UAAWA,GAAY,aAAcA,EAAU,CACpH,M,CAGF,IACE,GAAII,MAAMC,QAAQL,GAAW,CAC3B,GAAIA,EAASvC,SAAW,EAAG,CACzB/B,KAAKQ,MAAQ,GACb,M,CAIF,MAAMoE,EAAyB,GAC/B,IAAK,MAAMmE,KAAQzE,EAAU,CAE3B,MAAMY,QAAsBlF,KAAKgF,mBAAmB+D,GACpD,GAAI7D,EAAe,CACjBN,EAAehC,KAAKsC,E,EAGxBlF,KAAKQ,MAAQoE,C,KAER,CAEL,MAAMM,QAAsBlF,KAAKgF,mBAAmBV,GACpD,GAAIY,EAAe,CACjBlF,KAAKQ,MAAQ,CAAC0E,E,KACT,CACLlF,KAAKQ,MAAQ,E,EAKjBR,KAAKmF,iB,CAEL,MAAOjC,GACPD,QAAQC,MAAM,6BAA8BA,GAC5ClD,KAAKQ,MAAQ,E,EAST,oBAAAsC,GAEN9C,KAAKmF,kBAGL,MAAM6D,EAAWhJ,KAAKQ,MAAMyE,QAAO7C,IAASpC,KAAKU,uBAAuBsD,IAAI5B,EAAKC,QACjF,MAAM4G,EAAgBjJ,KAAKQ,MAAMyE,QAAO7C,GAAQpC,KAAKU,uBAAuBsD,IAAI5B,EAAKC,QAGrF,GAAI2G,EAASjH,SAAW,GAAKkH,EAAclH,SAAW,EAAG,CAEvD/B,KAAKkJ,OAAOC,KAAK,MAEjB,M,CAKF,MAAMC,EAA2B,GACjCJ,EAASK,SAAQjH,IAEf,GAAIA,EAAKC,MAAQD,EAAKC,KAAKC,SAAW,GAAI,CACxC8G,EAAexG,KAAKR,EAAKC,KAAKC,O,KAIlC2G,EAAcI,SAAQjH,IACpB,GAAIA,EAAKC,MAAQD,EAAKC,KAAKC,SAAW,GAAI,CACxC,MAAMgH,EAAetJ,KAAKU,uBAAuB6I,IAAInH,EAAKC,MAC1D,GAAIiH,EAAc,CAChBF,EAAexG,KAAK,GAAGR,EAAKC,KAAKC,cAAcgH,EAAa9C,c,MAKlE,MAAMgD,EAAgBJ,EAAeK,KAAK,KAI1C,MAAMC,EAAc,CAClBC,SAAU,IAAMH,EAChBI,QAAS,IAAMJ,EACfxH,MAAOwH,EACPhJ,MAAOwI,EAAS/D,QAAO7C,GAAQA,EAAKC,MAAQD,EAAKC,KAAKC,SAAW,MAInEtC,KAAKkJ,OAAOC,KAAKO,E,CAQX,eAAAvE,GACN,IACE,GAAInF,KAAK6C,cAAe,CACtB7C,KAAKgC,MAAQ,IAAIhC,KAAKQ,M,KACjB,CACLR,KAAKgC,MAAQhC,KAAKQ,MAAMuB,OAAS,EAAI/B,KAAKQ,MAAM,GAAK,I,EAEvD,MAAO0C,GACPD,QAAQC,MAAM,6BAA8BA,E,EAmJxC,iBAAAP,CAAkBP,G,MACxB,IAAKA,EAAKC,KAAM,CACd,OAAO,K,CAGT,MAAMqD,GAAYmE,EAAAzH,EAAKC,KAAKyH,MAAM,KAAKC,SAAO,MAAAF,SAAA,SAAAA,EAAArB,cAE9C,IAAK9C,EAAW,CACd,OAAO,K,CAIT,GAAI1F,KAAK0I,kBAAoB1I,KAAK0I,iBAAiB3G,OAAS,EAAG,CAC7D,OAAO/B,KAAK0I,iBAAiB3D,KAAI1B,GAAQA,EAAKmF,gBAAewB,SAAStE,E,CAIxE,GAAI1F,KAAK2I,qBAAuB3I,KAAK2I,oBAAoB5G,OAAS,EAAG,CACnE,OAAQ/B,KAAK2I,oBAAoB5D,KAAI1B,GAAQA,EAAKmF,gBAAewB,SAAStE,E,CAI5E,OAAO,I,CAiET,kBAAMuE,CAAa7H,GACjB,GAAIpC,KAAKM,SAAU,CACjB,M,CAEF,IAEE,MAAMgJ,EAAetJ,KAAKU,uBAAuB6I,IAAInH,EAAKC,MAE1D,GAAIiH,EAAc,CAEhB,MAAMY,QAAmBlK,KAAKoG,2BAA2BkD,GAGzD,MAAM1C,EAAMuD,IAAIC,gBAAgBF,GAGhC,MAAMG,EAAIlH,SAASC,cAAc,KACjCiH,EAAEC,KAAO1D,EACTyD,EAAEE,SAAWL,EAAW7H,KACxBgI,EAAE9G,MAAMC,QAAU,OAGlBL,SAASO,KAAKC,YAAY0G,GAC1BA,EAAEzG,QACFT,SAASO,KAAK8G,YAAYH,GAG1BF,IAAIM,gBAAgB7D,E,KACf,CAEL,MAAMA,EAAMuD,IAAIC,gBAAgBhI,GAGhC,MAAMiI,EAAIlH,SAASC,cAAc,KACjCiH,EAAEC,KAAO1D,EACTyD,EAAEE,SAAWnI,EAAKC,KAClBgI,EAAE9G,MAAMC,QAAU,OAGlBL,SAASO,KAAKC,YAAY0G,GAC1BA,EAAEzG,QACFT,SAASO,KAAK8G,YAAYH,GAG1BF,IAAIM,gBAAgB7D,E,EAEtB,MAAO1D,GACPD,QAAQC,MAAM,0BAA2BA,E,EAQ7C,oBAAAwH,GACE,GAAI1K,KAAKgD,YAAa,CACpBG,SAASO,KAAK8G,YAAYxK,KAAKgD,aAC/BhD,KAAKgD,YAAc,I,EASvB,MAAA2H,GAIE,MAAMC,IAAY5K,KAAKoE,aACvB,OACEyG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,YAAa,KACb,mBAAoBJ,EACpB,wBAAyB5K,KAAKC,UAC9B,sBAAuBD,KAAKM,SAC5B,sBAAuBN,KAAKO,UAEhB,eAAAqK,EAAU,OAAS,QAAO,gBACzB5K,KAAKM,SAAW,OAAS,SAExCuK,EAAA,OAAAE,IAAA,2CACEE,IAAKjL,KAAKI,gBAAkB,YAAc,kBAC1C8K,WAAYlL,KAAKc,eACjBqK,OAAQnL,KAAKyB,WACb2J,YAAapL,KAAKkB,gBAClBmK,YAAarL,KAAKuB,gBAClByJ,OAAQhL,KAAKI,gBAAmBJ,KAAKC,UAAY,aAAe,kBAAqB,KAEnFD,KAAKI,gBACLyK,EAAA,wBACEA,EAAI,SAAA7K,KAAKE,qBACPF,KAAKK,WAAawK,EAAA,eAAY,IACf,IAKnB7K,KAAKK,WACLwK,EAAA,iBACES,MAAOtL,KAAKG,kBACZoL,QAAUC,GAAMxL,KAAK+C,kBAAkByI,GACvCP,GAAI,yBAA2BjL,KAAKiL,GACpC3K,SAAUN,KAAKM,UAAYN,KAAKO,SAEhCkL,YAAa,yBAA2BzL,KAAKiL,KAC7C,GAKHjL,KAAKQ,MAAMuB,OAAS,GACnB8I,EAAA,OAAAE,IAAA,2CAAKC,OAAQhL,KAAKI,gBAAkB,YAAc,IAChDyK,EAAK,OAAAE,IAAA,2CAAAC,OAAQhL,KAAKI,gBAAkB,kBAAoB,IACrDJ,KAAKQ,MAAMuE,KAAI,CAAC3C,EAAM0B,KACrB,MAAM4H,EAAiB1L,KAAKU,uBAAuBsD,IAAI5B,EAAKC,MAC5D,OACEwI,EAAK,OAAAG,OAAQhL,KAAKI,gBAAkB,iBAAmB,GAAI2K,IAAKjH,GAC9D+G,EAAA,OAAKG,MAAM,YAAYO,QAAS,IAAMvL,KAAKiK,aAAa7H,GAAOmB,MAAO,CAAEoI,OAAQ3L,KAAKM,SAAW,cAAgB,UAAWsL,eAAgB,cACzIf,EAAA,wBACGzI,EAAKC,KACLqJ,GAAkBb,EAAA,QAAMtH,MAAO,CAAEsI,SAAU,QAASC,QAAS,QAAO,cAGzEjB,EAAA,WACEA,EAAA,uBAAqBkB,UAAW,MAAOC,KAAMC,EAASV,QAAS,IAAMvL,KAAK6D,iBAAiBC,GAAQxD,SAAUN,KAAKM,UAAYN,KAAKO,YAEjI,MAMfP,KAAKoE,aACJyG,EAAA,OAAKI,GAAG,cACNJ,EAAA,wBAAmB7K,KAAKoE,eACpB,I,8HCr9BlB,MAAM8H,EAAoB,wtO,MC2DbC,EAAc,MAL3B,WAAArM,CAAAC,G,uCAWUC,KAAQM,SAAY,MAKpBN,KAAQO,SAAY,MAQpBP,KAAI0C,KAAc,SAQlB1C,KAAMoM,OAAgB,SAKtBpM,KAAWqM,YAAY,MAKvBrM,KAAKsM,MAAU,GAKftM,KAAUuM,WAAW,GAKrBvM,KAAWwM,YAAY,MAwBvBxM,KAAQyM,SAAW,GAKnBzM,KAAKkD,MAAW,GAqBflD,KAAa0M,cAAU,GAMvB1M,KAAa2M,cAAW,GA+JzB3M,KAAA4M,gBAAmB7D,IACzB,GAAI/I,KAAKM,UAAYN,KAAKO,SAAU,OACpC,IAAIsM,EAAW,IAAI7M,KAAK0M,eACxB,MAAMI,EAAgB9M,KAAK0M,cAAcK,WACvCC,GAAiBhN,KAAKyM,UAAYO,EAAahN,KAAKyM,YAAc1D,EAAK/I,KAAKyM,YAAgBzM,KAAKyM,UAAYO,IAAiBjE,IAGhI8D,EAAS3I,OAAO4I,EAAe,EAAOG,OAAAC,OAAAD,OAAAC,OAAA,GAAAnE,GAAM,CAAAoE,UAAWpE,EAAKoE,YAC5D,IAAKnN,KAAKqM,cAAgBtD,EAAKoE,SAAU,CACvCN,EAAWA,EAAS9H,KAAI,CAACgE,EAAM5G,IAAW8K,OAAAC,OAAAD,OAAAC,OAAA,GAAAnE,GAAI,CAAEoE,SAAUhL,IAAM2K,K,CAElE9M,KAAK0M,cAAgBG,EAGrB,MAAMvI,EAAWtE,KAAKoN,SAASP,GAC/B7M,KAAK2M,cAAgBrI,EAGrB,GAAItE,KAAKgC,QAAUwC,UAAW,CAC5BxE,KAAKgC,MAAQsC,C,CAIftE,KAAKkJ,OAAOC,KAAK7E,EAAS,CA0D7B,CApNC,WAAAH,GACEnE,KAAKoE,aAAepE,KAAKkD,K,CAS3B,mBAAAmB,CAAoBC,GAElB,GAAKtE,KAAK2M,gBAAkB,IAAM3M,KAAK2M,gBAAkBnI,WAAcxE,KAAKgC,QAAUwC,UAAW,CAC/F,GAAIF,IAAaE,UAAW,CAC1BxE,KAAK2M,cAAgBrI,EACrBtE,KAAKqN,oBAAoB/I,E,GAW/B,YAAAgJ,GAEE,GAAItN,KAAKgC,QAAUwC,WAAaxE,KAAKgC,QAAUhC,KAAK2M,cAAe,CACjE3M,KAAK2M,cAAgB3M,KAAKgC,MAC1BhC,KAAKqN,oBAAoBrN,KAAKgC,M,EASlC,YAAAuL,GAEEvN,KAAKwN,iB,CAMP,iBAAA/E,GAEEzI,KAAK2M,cAAgB3M,KAAKgC,QAAUwC,UAAYxE,KAAKgC,MAAShC,KAAK6I,cAAgB,GAEnF,GAAI7I,KAAKkD,MAAO,CACdlD,KAAKoE,aAAepE,KAAKkD,K,CAG3BlD,KAAKwN,iB,CAOC,eAAAA,GACN,IAAKxN,KAAKyM,SAAU,CAClBxJ,QAAQC,MAAM,wBACdlD,KAAK0M,cAAgB1M,KAAKsM,MAC1B,M,CAGFtM,KAAKqN,oBAAoBrN,KAAK2M,c,CAQxB,mBAAAU,CAAoBI,GAC1B,IAAKA,IAAkBzN,KAAKyM,SAAU,CACpCzM,KAAK0M,cAAgB,IAAI1M,KAAKsM,OAC9B,M,CAGF,MAAMoB,EAAgB1N,KAAKsM,MAAMrH,QAAO8D,GACtC0E,EAAc3D,MAAM,KAAKE,SAASjB,EAAK/I,KAAKyM,aAG9C,IAAIkB,EAAwBD,EAC5B,GAAIA,EAAc3L,OAAS,IAAM/B,KAAKqM,YAAa,CACjDsB,EAAwB,CAACD,EAAc,IACvCzK,QAAQ2K,KAAK,4D,CAGf,MAAMtB,EAAQtM,KAAKsM,MAAMvH,KAAIgE,GACxBkE,OAAAC,OAAAD,OAAAC,OAAA,GAAAnE,GAAI,CACPoE,SAAUQ,EAAsBnL,MAAKwK,GACnCA,EAAahN,KAAKyM,YAAc1D,EAAK/I,KAAKyM,gBAI9CzM,KAAK0M,cAAgBJ,C,CAQvB,gBAAAuB,CAAiBvB,EAAe,M,MAC9B,MAAMwB,EAAexB,IAAA,MAAAA,SAAA,EAAAA,EAAStM,KAAK0M,cACnC,OAAO7C,EAAAiE,EAAa7I,QAAO8D,GAAQA,EAAKoE,cAAS,MAAAtD,SAAA,EAAAA,EAAI,E,CASvD,QAAAuD,CAASd,EAAe,M,MACtB,MAAMwB,EAAexB,IAAA,MAAAA,SAAA,EAAAA,EAAStM,KAAK0M,cACnC,OAAO7C,EAAA7J,KAAK6N,iBAAiBC,GAAc/I,KAAIgE,IAAI,IAAAc,EAAI,OAAAA,EAAAd,EAAK/I,KAAKyM,aAAa,MAAA5C,SAAA,EAAAA,EAAAd,EAAK/I,KAAKuM,WAAW,IAAE9C,KAAK,QAAI,MAAAI,SAAA,EAAAA,EAAI,E,CAwCpH,MAAAc,GACE,IAAI3K,KAAKyM,SACP,OAAO,KACT,MAAM7B,IAAY5K,KAAKoE,aACvB,OACEyG,EAACC,EAAI,CACHE,MAAO,CACL,YAAa,KACb,mBAAoBJ,EACpB,sBAAuB5K,KAAKM,SAC5B,sBAAuBN,KAAKO,SAC5B,sBAAuBP,KAAK+N,SAC5B,0BAA2B/N,KAAKqM,YAChC,CAAC,mBAAmBrM,KAAK0C,QAAS,KAClC,CAAC,qBAAqB1C,KAAKoM,UAAW,MAE1B,eAAAxB,EAAU,OAAS,QAAO,gBACzB5K,KAAK+N,SAAW,OAAS,SAExClD,EAAA,UACG7K,KAAK0M,cAAc3H,KAAI,CAACgE,EAAM5G,K,QAAM,OACnC0I,EACE,MAAAE,IAAKhC,EAAKkC,IAAMlC,EAAK/I,KAAKuM,YAC1BhB,QAAS,IAAMvL,KAAK4M,gBAAgB7D,GACpCiC,MAAOjC,EAAKoE,WAAanN,KAAKwM,YAAc,WAAa,GACzDvB,GAAI,mCAAqC9I,EAAI,IAAMnC,KAAKiL,GAExDQ,YAAa,mCAAqCtJ,EAAI,IAAMnC,KAAKiL,IAEhEjL,KAAKwM,YACJ3B,EAAA,aACEA,EACE,SAAAxH,KAAMrD,KAAKqM,YAAc,WAAa,QACtChK,KAAMrC,KAAKqC,OAAUrC,KAAKyM,UAAY1D,EAAK/I,KAAKyM,aAAe5C,EAAAd,EAAKkC,MAAM,MAAApB,SAAA,EAAAA,EAAAd,EAAK/I,KAAKuM,cACpFjM,SAAUN,KAAKM,UAAYN,KAAKO,SAChCyB,MAAQhC,KAAKyM,UAAY1D,EAAK/I,KAAKyM,aAAeuB,EAAAjF,EAAKkC,MAAE,MAAA+C,SAAA,EAAAA,EAAIjF,EAAK/I,KAAKuM,aACvE0B,QAASlF,EAAKoE,SACde,SAAU,IAAMlO,KAAK4M,gBAAgB7D,KAEtCA,EAAK/I,KAAKuM,aAGb1B,EAAA,WAAM9B,EAAK/I,KAAKuM,aAEf,IAENvM,KAAKoE,cAAgByG,EAAA,oBAAkBG,MAAM,QAAQmD,QAAQ,eAAeC,MAAM,SAASpO,KAAKoE,e,4KC7Y3G,MAAMiK,EAAkB,q/B,MCwGXC,EAAY,MALzB,WAAAxO,CAAAC,G,UAWUC,KAAQ+N,SAAY,MAGnB/N,KAAUuO,WAAY,MACtBvO,KAAAwO,cAAoC,OACpCxO,KAAAyO,gBAAwC,OACxCzO,KAAA0O,eAAqC,MAqM/C,CAhMC,gBAAMC,CAAWC,GACf5O,KAAK6O,MAAQD,EACb5O,KAAK6O,MAAMC,IAAIC,cACb/O,KAAKqC,MACL2M,IACE,MAAMC,KAAEA,EAAI/F,OAAEA,EAAMgG,MAAEA,EAAKlN,MAAEA,GAAUgN,EACvC,IAAKhP,KAAK6O,MAAMM,iBAAiBnP,KAAKqC,MAAO,CAC3CrC,KAAK6O,MAAMM,iBAAiBnP,KAAKqC,MAAQ,CAAE0L,SAAU/N,KAAK+N,UAG1D/N,KAAKwO,cAAgB,K,MACnBS,IACAjP,KAAKoE,cAAeyF,EAAA7J,KAAK6O,MAAMC,IAAIM,cAAcpP,KAAKqC,SAAK,MAAAwH,SAAA,SAAAA,EAAE3G,KAAK,EAEpElD,KAAKyO,gBAAkB1N,IACrBmI,EAAOnI,GAEPf,KAAKoE,aAAe,GAEpBpE,KAAKqP,gCAAgC,EAEvCrP,KAAK0O,eAAiBQ,EACtBlP,KAAKuO,WAAa,I,CAKpBvO,KAAKgC,MAAQA,CAAK,GAEpB,CACEA,MAAO,KACPkB,MAAO,MACPoM,QAAS,O,CAKf,kBAAAC,GACEvP,KAAKqP,gC,CAGP,kBAAAG,GACExP,KAAKqP,gC,CAGC,8BAAAA,GACN,MAAMI,EAAoBzP,KAAK0P,GAAGC,SAAS5N,OAAS,EAEpD,GAAI0N,EAAmB,CACrB/K,MAAMkL,KAAK5P,KAAK0P,GAAGC,UAAUtG,SAASwG,IAGpC,GAAI7P,KAAKgC,QAAUwC,YAAcqL,EAAQC,aAAa,0BAA2B,CAC/ED,EAAQhH,aAAe7I,KAAKgC,MAC5B6N,EAAQE,aAAa,yBAA0B,O,CAIjDF,EAAQ3M,MAAQlD,KAAKoE,cAAgB,GAErC,GAAIpE,KAAKqC,KAAMwN,EAAQxN,KAAOrC,KAAKqC,KACnC,GAAIrC,KAAKiL,GAAI4E,EAAQ5E,GAAKjL,KAAKiL,GAC/B,GAAIjL,KAAKsL,MAAOuE,EAAQvE,MAAQtL,KAAKsL,MAGrC,IAAKuE,EAAQC,aAAa,2BAA4B,CACpDD,EAAQpM,iBAAiB,QAASzD,KAAKgQ,YAAYC,KAAKjQ,OACxD6P,EAAQpM,iBAAiB,SAAUzD,KAAKkQ,aAAaD,KAAKjQ,OAC1D6P,EAAQpM,iBAAiB,OAAQzD,KAAKmQ,WAAWF,KAAKjQ,OACtD6P,EAAQpM,iBAAiB,QAASzD,KAAKoQ,YAAYH,KAAKjQ,OACxD6P,EAAQE,aAAa,0BAA2B,O,MAMxD,oBAAArF,G,MAEE,IAAK1K,KAAKqC,KAAM,CACd,M,CAEF,GAAIrC,KAAK6O,MAAMM,iBAAiBnP,KAAKqC,MAAO,QACnCrC,KAAK6O,MAAMM,iBAAiBnP,KAAKqC,K,CAK1C,IACE,IAAIwH,EAAA7J,KAAK6O,MAAMC,OAAG,MAAAjF,SAAA,SAAAA,EAAEX,OAAQ,CAC1BlJ,KAAK6O,MAAMC,IAAI5F,OAAOlJ,KAAKqC,KAAMmC,U,EAEnC,MAAOtB,GAEPD,QAAQoN,MAAM,yBAA0BnN,E,CAI1ClD,KAAKuO,WAAa,K,CAIpB,WAAAyB,CAAYxE,G,MACV,IAAIxJ,EAGJ,GAAIwJ,aAAa8E,aAAe9E,EAAE+E,SAAW/L,UAAW,CACtDxC,EAAQwJ,EAAE+E,M,KACL,CAEL,MAAMzO,EAAS0J,EAAE1J,OAGjB,GAAIA,EAAO0O,WAAY,CACrB,MAAM3O,EAAQC,EAAO0O,WAAWC,cAAc,2BAC9C,GAAI5O,EAAO,CACTG,EAAQH,EAAMG,K,OAIb,GAAIF,EAAO4O,UAAY,SAAW5O,EAAO4O,UAAY,YAAc5O,EAAO4O,UAAY,SAAU,CACnG1O,EAASF,EAAsEE,K,MAG5E,GAAI,UAAWF,EAAQ,CAC1BE,EAASF,EAAeE,K,EAI5B,GAAIA,IAAUwC,UAAW,EACvBqF,EAAA7J,KAAKyO,mBAAkB,MAAA5E,SAAA,SAAAA,EAAA8G,KAAA3Q,KAAAgC,E,EAK3B,YAAAkO,CAAa1E,G,QACX,IAAIxJ,EAGJ,GAAIwJ,aAAa8E,aAAe9E,EAAE+E,SAAW/L,UAAW,CACtDxC,EAAQwJ,EAAE+E,M,KACL,CAEL,MAAMzO,EAAS0J,EAAE1J,OAGjB,GAAIA,EAAO0O,WAAY,CACrB,MAAM3O,EAAQC,EAAO0O,WAAWC,cAAc,2BAC9C,GAAI5O,EAAO,CACTG,EAAQH,EAAMG,K,OAIb,GAAIF,EAAO4O,UAAY,SAAW5O,EAAO4O,UAAY,YAAc5O,EAAO4O,UAAY,SAAU,CACnG1O,EAASF,EAAsEE,K,MAG5E,GAAI,UAAWF,EAAQ,CAC1BE,EAASF,EAAeE,K,EAI5B,GAAIA,IAAUwC,UAAW,EACvBqF,EAAA7J,KAAKyO,mBAAkB,MAAA5E,SAAA,SAAAA,EAAA8G,KAAA3Q,KAAAgC,GAEvB,GAAIwJ,aAAa8E,YAAa,EAC5BtC,EAAAhO,KAAKwO,iBAAgB,MAAAR,SAAA,SAAAA,EAAA2C,KAAA3Q,KAAAwL,E,GAM3B,WAAA4E,CAAY5E,G,OACV3B,EAAA7J,KAAK0O,kBAAiB,MAAA7E,SAAA,SAAAA,EAAA8G,KAAA3Q,KAAAwL,E,CAIxB,UAAA2E,CAAW3E,G,OACT3B,EAAA7J,KAAKwO,iBAAgB,MAAA3E,SAAA,SAAAA,EAAA8G,KAAA3Q,KAAAwL,E,CAIvB,cAAAoF,CAAepF,GACbxL,KAAKwO,cAAchD,E,CAErB,MAAAb,GACE,IAAK3K,KAAKuO,WAAY,CACpB,OAAO,I,CAIT,OAAO1D,EAAA,Y","ignoreList":[]}

package/dist/stencil-library/p-50f67815.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as i,h as e,H as a,a as s}from"./p-CaIWDYyq.js";import{C as n}from"./p-Cn7PuhQz.js";import o from"axios";import{createForm as r}from"final-form";import l from"lodash.debounce";import{U as p,f as u,o as d}from"./p-vXSpJxEK.js";function c(t){return t&&typeof t==="object"&&"driveFileId"in t}function h(t){const 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"};const e=t.trim().toLowerCase();if(i[e])return i[e];return"application/octet-stream"}async function f(t){try{const i=`${n.tenantV1ApiUrl}/UdpDrive/${t.driveFileId}/stream`;const e=await o({method:"GET",url:i,responseType:"blob",timeout:3e5,headers:{}});const a=e.data;const s=t.name\|\|`file.${t.extension}`;return new File([a],s,{type:a.type\|\|h(t.extension),lastModified:t.lastUpdated?new Date(t.lastUpdated).getTime():Date.now()})}catch(i){console.error("Error creating file from UdpDriveFile:",i);const e=t.name\|\|`file.${t.extension}`;return new File([""],e,{type:"application/octet-stream"})}}const y=':host(.udp-input){display:block;box-sizing:border-box;position:relative}: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(.udp-input--size-small) .signature-canvas{height:150px}:host(.udp-input--size-normal) .signature-canvas{height:200px}:host(.udp-input--size-large) .signature-canvas{height:250px}:host(.udp-input--size-small) .clear-button{padding:var(--spacing-01) var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-normal) .clear-button{padding:var(--spacing-02) var(--spacing-03);font-size:var(--body-font-size);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-large) .clear-button{padding:var(--spacing-03) var(--spacing-04);font-size:var(--body-font-size);top:var(--spacing-03);right:var(--spacing-03)}.signature-pad-container{position:relative;border:1px solid var(--udp-mid-gray-color);border-radius:4px;background-color:var(--udp-light-gray-color)}.signature-canvas{display:block;width:100%;height:200px;}.signature-pad-container.readonly{background-color:var(--udp-disabled-gray-color)}.signature-canvas.readonly{cursor:not-allowed}.clear-button{position:absolute;top:var(--spacing-02);right:var(--spacing-02);background-color:var(--udp-light-gray-color);border:1px solid var(--udp-mid-gray-color);color:var(--udp-primary-color);cursor:pointer;border-radius:4px;padding:var(--spacing-02) var(--spacing-03);}.clear-button:hover{background-color:var(--udp-mid-gray-color)}.clear-button:disabled{cursor:not-allowed;opacity:0.5}';const b=class{constructor(e){t(this,e);this.change=i(this,"change");this.disabled=false;this.readonly=false;this.size="normal";this.margin="normal";this.handleResize=()=>{if(this.resizeTimeout)clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout((()=>{const t=this.canvasEl.getBoundingClientRect();if(!this.lastCanvasRect\|\|t.width!==this.lastCanvasRect.width\|\|t.height!==this.lastCanvasRect.height){let i=this.signaturePad&&!this.signaturePad.isEmpty()?this.signaturePad.toDataURL():null;this.resizeCanvasForDPR();this.initializeSignaturePad();this.lastCanvasRect=t;if(i&&this.signaturePad){this.signaturePad.fromDataURL(i)}}}),200)};this.handleSignatureEnd=async()=>{if(this.signaturePad.isEmpty()){this.value=null;this.change.emit(null)}else{const t=this.signaturePad.toDataURL();const i=await this.urlToFile(t,"signature.png");this.value=i;this.change.emit(i)}};this.clearSignature=()=>{if(this.signaturePad){this.signaturePad.clear();this.handleSignatureEnd()}}}onErrorChange(t){this.internalError=t}async onValueChange(t){await this.loadSignaturePad();if(this.signaturePad){this.signaturePad.clear();if(t){this.loadSignature(t)}}}async onInitialValueChange(t){let i=t;if(i){if(Array.isArray(i)){i=i[0]}if(c(i)){try{const t=await f(i);this.value=t;this.readonly=false}catch(t){console.error("Failed to fetch UdpDriveFile for signature:",t);return}}else if(typeof t==="string"){this.value=await this.urlToFile(t,"initial_signature.png")}else{this.value=t}this.resizeCanvasForDPR();this.initializeSignaturePad()}}async componentWillLoad(){this.internalError=this.error;await this.loadSignaturePad()}async componentDidLoad(){let t=this.initialValue;if(t){if(Array.isArray(t)){t=t[0]}if(c(this.initialValue)){console.log("Loading signature from UdpDriveFile:",this.initialValue);try{const t=await f(this.initialValue);this.value=t;this.readonly=false}catch(t){console.error("Failed to fetch UdpDriveFile for signature:",t);this.value=this.initialValue;this.readonly=true}}else{this.value=await this.urlToFile(this.initialValue,"initial_signature.png")}}this.resizeCanvasForDPR();this.initializeSignaturePad();this.lastCanvasRect=this.canvasEl.getBoundingClientRect();window.addEventListener("resize",this.handleResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize);if(this.resizeTimeout)clearTimeout(this.resizeTimeout)}resizeCanvasForDPR(){if(!this.canvasEl)return;const t=window.devicePixelRatio\|\|1;const i=this.canvasEl.getBoundingClientRect();this.canvasEl.width=i.widtht;this.canvasEl.height=i.heightt;this.canvasEl.getContext("2d").scale(t,t)}async loadSignaturePad(){if(!this.SignaturePadLib){try{const t=await import("signature_pad");this.SignaturePadLib=t.default}catch(t){console.error("Failed to load signature_pad library",t)}}}initializeSignaturePad(){this.resizeCanvasForDPR();if(this.SignaturePadLib&&this.canvasEl){this.signaturePad=new this.SignaturePadLib(this.canvasEl);this.signaturePad.addEventListener("endStroke",this.handleSignatureEnd);this.handleStateChange();if(this.value){this.loadSignature(this.value)}}}handleStateChange(){if(this.signaturePad){if(this.disabled\|\|this.readonly){this.signaturePad.off()}else{this.signaturePad.on()}}}async loadSignature(t){let i;if(typeof t==="string"){i=t}else if(c(t)){try{const e=await f(t);i=URL.createObjectURL(e)}catch(t){console.error("Error loading signature image from UdpDriveFile:",t);return}}else if(t instanceof File){i=URL.createObjectURL(t)}if(i&&this.signaturePad){this.signaturePad.fromDataURL(i,{ratio:window.devicePixelRatio,width:this.canvasEl.width,height:this.canvasEl.height})}}async urlToFile(t,i){const e=await fetch(t);const a=await e.blob();return new File([a],i,{type:a.type})}render(){const t=!!this.internalError;const i={"signature-pad-container":true,readonly:this.readonly,disabled:this.disabled};return e(a,{key:"b56e3aa753999f61e26d33980c728ede6080b413",class:{"udp-input":true,"udp-input--error":t,"udp-input--disabled":this.disabled,"udp-input--required":this.required,"udp-input--readonly":this.readonly,[`udp-input--size-${this.size}`]:true,[`udp-input--margin-${this.margin}`]:true}},e("div",{key:"8166da65f5dc1002d6e5de643331c2c8728bb2ca",class:"bx--form-item"},this.label&&e("unity-typography",{key:"e5811a0937a2b5f59fa8eba6a2abf44931d53c4e",variant:"caption-text"},e("label",{key:"bf44b8563f260bff1db5ff1f1e136c14d8a2f32b",htmlFor:this.id,class:"bx--label"},this.label,this.required&&"")),e("div",{key:"4ebc3753801e79d62da3b61aee8ed09203e22a42",class:i},e("canvas",{key:"43860cbf141d3bb2f45ef62a88f0894697202161",ref:t=>this.canvasEl=t,class:{"signature-canvas":true,readonly:this.readonly\|\|this.disabled},id:this.id}),!this.readonly&&!this.disabled&&e("button",{key:"45d1ed0764057bfe908ee89ea1a22376ecaaf84c",type:"button",class:"clear-button",onClick:this.clearSignature,disabled:this.disabled},"Clear")),t&&e("div",{key:"687f1694c19304cebdca3b03a32765ec177e72e6",class:"error-message"},e("unity-typography",{key:"ba66b72167f4b8165a72cd6f60dfc6a44707360a",variant:"caption-text",color:"error"},this.internalError))))}get el(){return s(this)}static get watchers(){return{error:["onErrorChange"],value:["onValueChange"],initialValue:["onInitialValueChange"],disabled:["handleStateChange"],readonly:["handleStateChange"]}}};b.style=y;const m=class{constructor(e){t(this,e);this.stencilFormInvalidEvent=i(this,"stencilFormInvalidEvent");this.validateOnBlur=true;this.registeredFields={};this.handleSlotChange=()=>{const t=this.el.shadowRoot.querySelector("slot");if(!t)return;t.assignedNodes().forEach((t=>this.processNodeRecursively(t)))};this.submitWithValidation=this.submitWithValidation.bind(this);this.defaultValidation=this.defaultValidation.bind(this);this.submit=this.submit.bind(this);this.onFormChange=this.onFormChange.bind(this)}connectField(t){t.setFormApi({api:this.api,registeredFields:this.registeredFields})}async processNodeRecursively(t){if(t.nodeType!==Node.ELEMENT_NODE){return}const i=t;if(i.localName.includes("-")){await customElements.whenDefined(i.localName)}if(i.matches("stencil-field")){this.connectField(i)}this.connectSubmitButtons(i);if(i.shadowRoot){for(const t of Array.from(i.shadowRoot.childNodes)){await this.processNodeRecursively(t)}}for(const t of Array.from(i.childNodes)){await this.processNodeRecursively(t)}}connectSubmitButtons(t){if(t.nodeType!==Node.ELEMENT_NODE){return}const i=t;if(i.matches('input[type="submit"], button[type="submit"]')){const t=i;if(!t.dataset.stencilFormConnected){t.dataset.stencilFormConnected="true";i.addEventListener("click",(t=>{t.preventDefault();console.log("Submit button clicked, triggering form submit");this.submit(t)}))}}const e=i.querySelectorAll('input[type="submit"], button[type="submit"]');e.forEach((t=>{const i=t;if(!i.dataset.stencilFormConnected){i.dataset.stencilFormConnected="true";t.addEventListener("click",(t=>{t.preventDefault();console.log("Submit button clicked, triggering form submit");this.submit(t)}))}}))}componentWillLoad(){this.api=r({onSubmit:this.submitWithValidation,initialValues:this.initialValues,validate:this.defaultValidation,validateOnBlur:this.validateOnBlur});if(this.handleFormChange){this.api.subscribe(this.onFormChange,{values:true})}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("slot");if(t){this.handleSlotChange();t.addEventListener("slotchange",this.handleSlotChange)}}disconnectedCallback(){var t;this.api=null;this.registeredFields={};const i=(t=this.el.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector("slot");if(i){i.removeEventListener("slotchange",this.handleSlotChange)}}onFormChange(t){if(this.handleFormChange&&t.values){this.handleFormChange(t.values)}}async submitWithValidation(t){console.log("Submitting form with values:",t);const i=this.defaultValidation(t);if(Object.keys(i).length===0){this.handleSubmit(t)}else{this.stencilFormInvalidEvent.emit(i)}}defaultValidation(t){var i;const{registeredFields:e}=this;const a={};console.log(e);Object.keys(e).forEach((i=>{var s;if(e[i].required&&(!t[i]\|\|((s=t[i])===null\|\|s===void 0?void 0:s.length)===0)){a[i]="Required"}}));if(this===null\|\|this===void 0?void 0:this.validate)return(i=this.validate)===null\|\|i===void 0?void 0:i.call(this,t,a);return a}getValues(){const t={};this.api.getRegisteredFields().forEach((i=>{t[i]=this.api.getFieldState(i).value}));return t}async getApi(){if(!this.api){console.error("❌ Form API not initialized yet.");return null}return this.api}submit(t){var i;console.log("Submitting form");(i=t===null\|\|t===void 0?void 0:t.preventDefault)===null\|\|i===void 0?void 0:i.call(t);const e=()=>{var t;const i=this.defaultValidation(this.getValues());if(Object.keys(i).length){this.stencilFormInvalidEvent.emit(i);return}(t=this.api)===null\|\|t===void 0?void 0:t.submit()};l(e,1e3,{leading:true,trailing:false})()}render(){return e("form",{key:"f87005b56d8889878fefed08e1ff84c77867e935",onSubmit:this.submit},e("slot",{key:"742c816b3720a11e78d8825e87364b1dd8ed3b37"}))}get el(){return s(this)}};const v=":host{display:block;width:100%}.tally-container{display:flex;flex-direction:column;gap:var(--spacing-02, 8px)}.tally-label{font-weight:600;margin-bottom:var(--spacing-02, 8px)}.tally-loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-04, 16px);color:var(--text-secondary, #6b7280)}.tally-content{display:flex;flex-direction:column;gap:var(--spacing-03, 12px)}.tally-stats{display:flex;gap:var(--spacing-04, 16px);flex-wrap:wrap}.tally-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-03, 12px) var(--spacing-04, 16px);border-radius:var(--border-radius-01, 4px);border:1px solid var(--border-subtle, #e5e7eb);background-color:var(--layer-01, #ffffff);min-width:80px;flex:1;max-width:120px}.tally-item.tally-yes{border-color:var(--support-success, #42be65);background-color:var(--support-success-hover, #f6f8ff)}.tally-item.tally-no{border-color:var(--support-error, #da1e28);background-color:var(--support-error-hover, #fff1f1)}.tally-item.tally-unanswered{border-color:var(--support-warning, #f1c21b);background-color:var(--support-warning-hover, #fcf4d6)}.tally-count{font-weight:700;line-height:1.2;margin-bottom:var(--spacing-01, 4px)}.tally-yes .tally-count{color:var(--support-success, #42be65)}.tally-no .tally-count{color:var(--support-error, #da1e28)}.tally-unanswered .tally-count{color:var(--support-warning, #f1c21b)}.tally-item .tally-label{margin:0;font-weight:500;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.02em}.tally-summary{padding:var(--spacing-02, 8px) 0;border-top:1px solid var(--border-subtle, #e5e7eb);text-align:center}.error-message{margin-top:var(--spacing-02, 8px);padding:var(--spacing-02, 8px);border-radius:var(--border-radius-01, 4px);background-color:var(--support-error-hover, #fff1f1);border:1px solid var(--support-error, #da1e28)}:host(.udp-input--size-small) .tally-item{padding:var(--spacing-02, 8px) var(--spacing-03, 12px);min-width:60px;max-width:90px}:host(.udp-input--size-small) .tally-count{font-size:1.25rem}:host(.udp-input--size-large) .tally-item{padding:var(--spacing-04, 16px) var(--spacing-05, 20px);min-width:100px;max-width:150px}:host(.udp-input--size-large) .tally-count{font-size:2rem}:host(.udp-input--margin-none) .tally-container{gap:0}:host(.udp-input--margin-dense) .tally-container{gap:var(--spacing-01, 4px)}:host(.udp-input--margin-comfortable) .tally-container{gap:var(--spacing-04, 16px)}:host(.udp-input--disabled) .tally-item{opacity:0.5;pointer-events:none}:host(.udp-input--readonly) .tally-item{background-color:var(--field-01, #f4f4f4)}@media (max-width: 480px){.tally-stats{flex-direction:column}.tally-item{max-width:none;flex:none}}";const g=class{constructor(i){t(this,i);this.label="Response Tally";this.yesCount=0;this.noCount=0;this.naCount=0;this.totalFields=0;this.disabled=false;this.readonly=false;this.size="normal";this.margin="normal"}render(){const t=!!this.error;const i=this.yesCount+this.noCount+this.naCount;const s=this.totalFields-i;return e(a,{key:"5c6939381517962ec502c5b791892b352b8cfec3",class:{"udp-input":true,"udp-input--error":t,"udp-input--disabled":this.disabled,"udp-input--readonly":this.readonly,[`udp-input--size-${this.size}`]:true,[`udp-input--margin-${this.margin}`]:true}},e("div",{key:"03e9e1319a9014ddff1f4f9664d4a84992a48112",class:"tally-container"},this.label&&e("unity-typography",{key:"343651c518a44fbc79fde58152a0216416b7a7fd",variant:"caption-text"},e("label",{key:"f5b9c1491ff19f7340e8072227556014c637f75f",htmlFor:this.id,class:"tally-label"},this.label)),e("div",{key:"287e848fb535d892f6592bcec6d66e5f05a751c5",class:"tally-content",id:this.id},e("div",{key:"5fdbadd48ffd431f58f522e9452b1183c3014b12",class:"tally-stats"},e("div",{key:"43f04d18cc2ff6b9287e398d25484928e4ea3325",class:"tally-item tally-yes"},e("unity-typography",{key:"75bfeb985b1f7f70ecaabec2b8ae699794c6de50",variant:"h4",class:"tally-count"},this.yesCount),e("unity-typography",{key:"ddbacb84823d5663879ef218fc023186b78ed87c",variant:"caption-text",class:"tally-label"},"Yes")),e("div",{key:"573543db8b4ca95596a3fd6cc0d256802529c778",class:"tally-item tally-no"},e("unity-typography",{key:"6124af32f94311cff91a051c46eda6fe7c956939",variant:"h4",class:"tally-count"},this.noCount),e("unity-typography",{key:"37ccb28fb096bc09c9c51b5b050b5b58f69773d9",variant:"caption-text",class:"tally-label"},"No")),e("div",{key:"3aabef56d09f22886f410677cb57ddbc17fa5b45",class:"tally-item tally-na"},e("unity-typography",{key:"ad92cae631bf923f2aeda0ac003129fa8d470e02",variant:"h4",class:"tally-count"},this.naCount),e("unity-typography",{key:"43ed5d1f7380084c22872477f5ccd0dfd74cd008",variant:"caption-text",class:"tally-label"},"Not Applicable")),s>0&&e("div",{key:"069a7bc3a1dcf19d9c0f5ca0d4b00facdb07ecc4",class:"tally-item tally-unanswered"},e("unity-typography",{key:"04469b55f4dcdae1e08f1eacdc1bce83ca86f214",variant:"h4",class:"tally-count"},s),e("unity-typography",{key:"a3bd672ee1edcfc3df5a37587675fc96257020a1",variant:"caption-text",class:"tally-label"},"Unanswered"))),e("div",{key:"fcfdaf22626dd9776a6596baed5b8ee0257b2ba1",class:"tally-summary"},e("unity-typography",{key:"234c4f194d2fca829d4f6c21190af688eedcbfe7",variant:"caption-text"},"Total Questions: ",this.totalFields))),t&&e("div",{key:"5ab59a32c6eac7ec4c52588880c72f39af322162",class:"error-message"},e("unity-typography",{key:"bba2f644f283270436ce30b21dceffd62bdad546",variant:"caption-text",color:"error"},this.error))))}};g.style=v;async function x(t){let i=t;let e=null;while(i){const t=i.closest("stencil-form");if(t){e=t;break}const a=i.getRootNode();if(a instanceof ShadowRoot){i=a.host}else{break}}if(!e){return null}if(typeof e.getApi!=="function"){return null}const a=await e.getApi();if(!a){return null}return a}const w=".hidden{display:none}";const z=class{constructor(i){t(this,i);this.disabled=false;this.readonly=false;this.tallyData={yesCount:0,noCount:0,naCount:0,totalFields:0};this.formApi=null}propChanged(){this.updateFieldComponent()}async componentWillLoad(){this.updateFieldComponent();if(this.question.fieldTypeId===p.Tally){await this.initializeFormApiForTally()}}async initializeFormApiForTally(){try{this.formApi=await x(this.el);if(this.formApi){const t=this.formApi.subscribe((()=>{this.calculateTally()}),{active:true,dirty:true,values:true});this.unsubscribeFormApi=t;this.calculateTally()}}catch(t){console.error("Failed to initialize form API for tally:",t)}}calculateTally(){if(!this.formApi\|\|this.question.fieldTypeId!==p.Tally){return}try{const t=this.formApi.getState().values;const i=this.el.closest("stencil-form");if(!i){return}const e=i.querySelectorAll("udp-question");const a=[];e.forEach((t=>{if(t.question&&t.question.fieldTypeId===p.YesNo){const i=t.question.name;if(i){const t=this.shouldIncludeFieldInTally(i);if(t){a.push(i)}}}}));let s=0;let n=0;let o=0;a.forEach((i=>{const e=t[i];if(e==="true"\|\|e===true){s++}else if(e==="false"\|\|e===false){n++}else if(e==="na"){o++}}));this.tallyData={yesCount:s,noCount:n,naCount:o,totalFields:a.length};this.updateFieldComponent()}catch(t){console.error("Error calculating tally:",t)}}shouldIncludeFieldInTally(t){const i=this.question.fieldProperties;if((i===null\|\|i===void 0?void 0:i.includeFields)&&i.includeFields.length>0){return i.includeFields.includes(t)}if((i===null\|\|i===void 0?void 0:i.excludeFields)&&i.excludeFields.length>0){return!i.excludeFields.includes(t)}return true}updateFieldComponent(){this._fieldComponent=this.getFieldComponent()}getFieldComponent(){var t,i,a,s,n;const o={name:(t=this.question.name)!==null&&t!==void 0?t:`question-${this.questionNumber}`,required:this.question.required};const r=Object.assign(Object.assign({},this.question.fieldProperties),{id:this.questionNumber,disabled:this.disabled,readonly:this.readonly});switch(this.question.fieldTypeId){case p.SingleLineText:return e("stencil-field",Object.assign({},o),e("text-field",Object.assign({},r)));case p.MultiLineText:return e("stencil-field",Object.assign({},o),e("text-area",Object.assign({fullWidth:true},r)));case p.Checkbox:return e("stencil-field",Object.assign({},o),e("selectable-list",Object.assign({valueKey:"value",displayKey:"display",multiSelect:true,useCheckbox:true},r)));case p.RadioButton:return e("stencil-field",Object.assign({},o),e("selectable-list",Object.assign({valueKey:"value",displayKey:"display",useCheckbox:true},r)));case p.DropdownSingleSelect:case p.DropdownMultipleSelect:let t=(a=(i=r===null\|\|r===void 0?void 0:r.items)===null\|\|i===void 0?void 0:i.map)===null\|\|a===void 0?void 0:a.call(i,(t=>Object.assign({label:t.display,value:t.value},r)));return e("stencil-field",Object.assign({},o),e("udp-selector",Object.assign({options:t!==null&&t!==void 0?t:[],multiSelect:this.question.fieldTypeId===p.DropdownMultipleSelect},r)));case p.YesNo:return e("stencil-field",Object.assign({},o),e("selectable-list",Object.assign({valueKey:"value",displayKey:"display",useCheckbox:true,multiSelect:false,items:[{value:"true",display:"Yes"},{value:"false",display:"No"},{value:"na",display:"Not Applicable"}]},r)));case p.ListMultiSelect:return e("stencil-field",Object.assign({},o),e("selectable-list",Object.assign({valueKey:"value",displayKey:"display",multiSelect:true},r)));case p.DateSelector:return e("stencil-field",Object.assign({},o),e("udp-date-selector",Object.assign({min:r===null\|\|r===void 0?void 0:r.minDate,max:r===null\|\|r===void 0?void 0:r.maxDate},r)));case p.TimeSelector:return e("stencil-field",Object.assign({},o),e("udp-time-selector",Object.assign({min:r===null\|\|r===void 0?void 0:r.minTime,max:r===null\|\|r===void 0?void 0:r.maxTime},r)));case p.DateTimeSelector:return e("stencil-field",Object.assign({},o),e("udp-datetime-selector",Object.assign({max:r===null\|\|r===void 0?void 0:r.maxDateTime,min:r===null\|\|r===void 0?void 0:r.minDateTime},r)));case p.FileUpload:return e("stencil-field",Object.assign({},o),e("file-upload",Object.assign({fullWidth:true,allowMultiple:false},r)));case p.Signature:return e("stencil-field",Object.assign({},o),e("signature-input",Object.assign({},r,{value:this.value})));case p.Paragraph:return this.value?e("unity-typography",{id:`paragraphText${this.question.name}`,variant:((n=(s=this.styleOverrides)===null\|\|s===void 0?void 0:s.paragraphText)===null\|\|n===void 0?void 0:n.variant)\|\|"body"},this.value):e("div",null);case p.Number:return e("stencil-field",Object.assign({},o),e("numeric-field",Object.assign({},r)));case p.Tally:return e("tally-display",Object.assign({id:this.questionNumber,label:this.question.questionText\|\|"Response Tally",yesCount:this.tallyData.yesCount,noCount:this.tallyData.noCount,naCount:this.tallyData.naCount,totalFields:this.tallyData.totalFields},r,{required:false}));case p.Hidden:default:return e("div",null)}}async componentDidLoad(){var t,i,e,a;if(this.question.fieldTypeId===p.Tally&&!this.formApi){await this.initializeFormApiForTally()}const s=[];for(const n in this.styleOverrides){s.push({id:n+this.question.name,fontOverride:(i=(t=this.styleOverrides)===null\|\|t===void 0?void 0:t[n])===null\|\|i===void 0?void 0:i.fontFamily,variant:(a=(e=this.styleOverrides)===null\|\|e===void 0?void 0:e[n])===null\|\|a===void 0?void 0:a.variant})}s.forEach((t=>{var i,e,a;if(!u[t===null\|\|t===void 0?void 0:t.fontOverride]\|\|!this.el\|\|!this.el.shadowRoot)return;d((a=(e=(i=this.el)===null\|\|i===void 0?void 0:i.shadowRoot)===null\|\|e===void 0?void 0:e.getElementById)===null\|\|a===void 0?void 0:a.call(e,t.id),u[t===null\|\|t===void 0?void 0:t.fontOverride])}))}render(){var t,i,a,s;const n=this._fieldComponent;const o=`${this.question.fieldTypeId===p.Paragraph?"":`${this.questionNumber}.`} ${this.question.questionText} ${this.question.required&&this.question.fieldTypeId!==p.Paragraph?"":""}`;if(!n)return null;return e("div",{class:this.question.fieldTypeId===p.Hidden?"hidden":""},this.question.questionText?e("unity-typography",{id:`questionText${this.question.name}`,variant:((i=(t=this.styleOverrides)===null\|\|t===void 0?void 0:t.questionText)===null\|\|i===void 0?void 0:i.variant)\|\|"h3"},o):"",n,e("unity-typography",{id:`helperText${this.question.name}`,variant:((s=(a=this.styleOverrides)===null\|\|a===void 0?void 0:a.helperText)===null\|\|s===void 0?void 0:s.variant)\|\|"caption-text"},this.question.helperText))}get el(){return s(this)}static get watchers(){return{question:["propChanged"],questionNumber:["propChanged"],value:["propChanged"],disabled:["propChanged"],readonly:["propChanged"],styleOverrides:["propChanged"]}}};z.style=w;export{b as signature_input,m as stencil_form,g as tally_display,z as udp_question};
2	- //# sourceMappingURL=p-50f67815.entry.js.map

package/dist/stencil-library/p-50f67815.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["isUdpDriveFile","file","getMimeTypeFromExtension","extension","mimeTypes","pdf","doc","docx","xls","xlsx","ppt","pptx","txt","csv","json","xml","html","css","js","png","jpg","jpeg","gif","svg","zip","rar","ext","trim","toLowerCase","async","downloadFileFromUdpDriveFile","udpFile","downloadUrl","ConfigService","tenantV1ApiUrl","driveFileId","response","axios","method","url","responseType","timeout","headers","blob","data","fileName","name","File","type","lastModified","lastUpdated","Date","getTime","now","error","console","signatureInputCss","SignatureInput","constructor","hostRef","this","disabled","readonly","size","margin","handleResize","resizeTimeout","clearTimeout","setTimeout","rect","canvasEl","getBoundingClientRect","lastCanvasRect","width","height","dataURL","signaturePad","isEmpty","toDataURL","resizeCanvasForDPR","initializeSignaturePad","fromDataURL","handleSignatureEnd","value","change","emit","signatureFile","urlToFile","clearSignature","clear","onErrorChange","newValue","internalError","onValueChange","loadSignaturePad","loadSignature","onInitialValueChange","Array","isArray","loadedFile","err","componentWillLoad","componentDidLoad","initialValue","log","window","addEventListener","disconnectedCallback","removeEventListener","ratio","devicePixelRatio","getContext","scale","SignaturePadLib","module","import","default","e","handleStateChange","off","on","signatureValue","imageUrl","URL","createObjectURL","filename","res","fetch","render","isError","containerClasses","h","Host","key","class","required","label","variant","htmlFor","id","ref","el","onClick","color","StencilForm","validateOnBlur","registeredFields","handleSlotChange","slot","shadowRoot","querySelector","assignedNodes","forEach","node","processNodeRecursively","submitWithValidation","bind","defaultValidation","submit","onFormChange","connectField","field","setFormApi","api","nodeType","Node","ELEMENT_NODE","element","localName","includes","customElements","whenDefined","matches","connectSubmitButtons","child","from","childNodes","htmlElement","dataset","stencilFormConnected","preventDefault","submitButtons","querySelectorAll","button","htmlButton","createForm","onSubmit","initialValues","validate","handleFormChange","subscribe","values","_a","formState","errors","Object","keys","length","handleSubmit","stencilFormInvalidEvent","call","getValues","getRegisteredFields","fieldName","getFieldState","getApi","submitFunction","debounce","leading","trailing","tallyCss","TallyDisplay","yesCount","noCount","naCount","totalFields","answeredCount","unansweredCount","useFormApi","current","form","foundForm","closest","root","getRootNode","ShadowRoot","host","formApi","udpQuestionCss","UdpQuestion","tallyData","propChanged","updateFieldComponent","question","fieldTypeId","UdpFormsFieldTypeEnum","Tally","initializeFormApiForTally","unsubscribe","calculateTally","active","dirty","unsubscribeFormApi","formValues","getState","formElement","questionElements","yesNoFields","questionEl","YesNo","shouldInclude","shouldIncludeFieldInTally","push","fieldProps","fieldProperties","includeFields","excludeFields","_fieldComponent","getFieldComponent","props","questionNumber","assign","SingleLineText","MultiLineText","fullWidth","Checkbox","valueKey","displayKey","multiSelect","useCheckbox","RadioButton","DropdownSingleSelect","DropdownMultipleSelect","options","_c","_b","items","map","display","ListMultiSelect","DateSelector","min","minDate","max","maxDate","TimeSelector","minTime","maxTime","DateTimeSelector","maxDateTime","minDateTime","FileUpload","allowMultiple","Signature","Paragraph","_e","_d","styleOverrides","paragraphText","Number","questionText","Hidden","variantsAndOverrides","override","fontOverride","fontFamily","fontOverrideMapping","overrideFont","getElementById","component","titleText","helperText"],"sources":["src/components/my-component/UI/inputs/file-upload/udp-drive-utils.ts","src/components/my-component/UI/inputs/signature-input/signature-input.css?tag=signature-input&encapsulation=shadow","src/components/my-component/UI/inputs/signature-input/signature-input.tsx","src/components/my-component/UI/forms/form/stencil-form.tsx","src/components/my-component/UI/inputs/tally/tally.css?tag=tally-display&encapsulation=shadow","src/components/my-component/UI/inputs/tally/tally.tsx","src/components/my-component/UI/forms/form/useFormApi.ts","src/components/my-component/UI/forms/udp-forms/udp-question/udp-question.css?tag=udp-question&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-question/udp-question.tsx"],"sourcesContent":["import { UdpDriveFile } from '../../../../../global/types';\nimport { ConfigService } from '../../../../../udp-utilities/api-config';\nimport axios from 'axios';\n\nexport function isUdpDriveFile(file: any): file is UdpDriveFile {\n return file && typeof file === 'object' && 'driveFileId' in file;\n}\n\nexport function getMimeTypeFromExtension(extension: string): string {\n // Use a static map for common types, fallback to browser's lookup if available\n const mimeTypes: Record<string, string> = {\n pdf: 'application/pdf',\n doc: 'application/msword',\n docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n xls: 'application/vnd.ms-excel',\n xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n ppt: 'application/vnd.ms-powerpoint',\n pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n txt: 'text/plain',\n csv: 'text/csv',\n json: 'application/json',\n xml: 'application/xml',\n html: 'text/html',\n css: 'text/css',\n js: 'application/javascript',\n png: 'image/png',\n jpg: 'image/jpeg',\n jpeg: 'image/jpeg',\n gif: 'image/gif',\n svg: 'image/svg+xml',\n zip: 'application/zip',\n rar: 'application/x-rar-compressed',\n '7z': 'application/x-7z-compressed'\n };\n\n const ext = extension.trim().toLowerCase();\n if (mimeTypes[ext]) return mimeTypes[ext];\n\n // Try browser lookup if available\n if (typeof window !== 'undefined' && window.navigator.mimeTypes) {\n // This is not reliable, but included for completeness\n // Most browsers do not expose a direct lookup\n }\n\n return 'application/octet-stream';\n}\n\nexport function createPlaceholderFileFromUdpDriveFile(udpFile: UdpDriveFile): File {\n const fileName = udpFile.name || `file.${udpFile.extension}`;\n const placeholderBlob = new Blob([''], { type: getMimeTypeFromExtension(udpFile.extension) });\n return new File([placeholderBlob], fileName, {\n type: placeholderBlob.type,\n lastModified: udpFile.lastUpdated ? new Date(udpFile.lastUpdated).getTime() : Date.now()\n });\n}\n\nexport async function downloadFileFromUdpDriveFile(udpFile: UdpDriveFile): Promise<File> {\n try {\n const downloadUrl = `${ConfigService.tenantV1ApiUrl}/UdpDrive/${udpFile.driveFileId}/stream`;\n const response = await axios({\n method: 'GET',\n url: downloadUrl,\n responseType: 'blob',\n timeout: 300000,\n headers: {}\n });\n const blob = response.data;\n const fileName = udpFile.name || `file.${udpFile.extension}`;\n return new File([blob], fileName, {\n type: blob.type || getMimeTypeFromExtension(udpFile.extension),\n lastModified: udpFile.lastUpdated ? new Date(udpFile.lastUpdated).getTime() : Date.now()\n });\n } catch (error) {\n console.error('Error creating file from UdpDriveFile:', error);\n const fileName = udpFile.name || `file.${udpFile.extension}`;\n return new File([''], fileName, { type: 'application/octet-stream' });\n }\n}\n","@import '../inputs.css';\n\n/* Size variants for canvas sizing */\n:host(.udp-input--size-small) .signature-canvas {\n height: 150px;\n}\n\n:host(.udp-input--size-normal) .signature-canvas {\n height: 200px;\n}\n\n:host(.udp-input--size-large) .signature-canvas {\n height: 250px;\n}\n\n/* Size variants for clear button */\n:host(.udp-input--size-small) .clear-button {\n padding: var(--spacing-01) var(--spacing-02);\n font-size: var(--caption-font-size, 0.875rem);\n top: var(--spacing-02);\n right: var(--spacing-02);\n}\n\n:host(.udp-input--size-normal) .clear-button {\n padding: var(--spacing-02) var(--spacing-03);\n font-size: var(--body-font-size);\n top: var(--spacing-02);\n right: var(--spacing-02);\n}\n\n:host(.udp-input--size-large) .clear-button {\n padding: var(--spacing-03) var(--spacing-04);\n font-size: var(--body-font-size);\n top: var(--spacing-03);\n right: var(--spacing-03);\n}\n\n.signature-pad-container {\n position: relative;\n border: 1px solid var(--udp-mid-gray-color);\n border-radius: 4px;\n background-color: var(--udp-light-gray-color);\n}\n\n.signature-canvas {\n display: block;\n width: 100%;\n height: 200px; /* Default height, overridden by density variants */\n}\n\n.signature-pad-container.readonly {\n background-color: var(--udp-disabled-gray-color);\n}\n\n.signature-canvas.readonly {\n cursor: not-allowed;\n}\n\n.clear-button {\n position: absolute;\n top: var(--spacing-02); /* Default, overridden by density variants */\n right: var(--spacing-02); /* Default, overridden by density variants */\n background-color: var(--udp-light-gray-color);\n border: 1px solid var(--udp-mid-gray-color);\n color: var(--udp-primary-color);\n cursor: pointer;\n border-radius: 4px;\n padding: var(--spacing-02) var(--spacing-03); /* Default, overridden by density variants */\n}\n\n.clear-button:hover {\n background-color: var(--udp-mid-gray-color);\n}\n\n.clear-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n","import { Component, Prop, h, State, Watch, Event, EventEmitter, Element, Host } from '@stencil/core';\nimport type SignaturePad from 'signature_pad';\nimport { UdpDriveFile } from '../../../../../global/types';\nimport { InputSize, InputMargin } from '../input-types';\nimport {\n isUdpDriveFile,\n downloadFileFromUdpDriveFile\n} from '../file-upload/udp-drive-utils';\n\n@Component({\n tag: 'signature-input',\n styleUrl: 'signature-input.css',\n shadow: true,\n})\nexport class SignatureInput {\n @Element() el: HTMLElement;\n\n /**\n * Label for the input field.\n */\n @Prop() label: string;\n\n /**\n * Unique identifier for the input.\n */\n @Prop() id: string;\n\n /**\n * Whether the field is required.\n */\n @Prop() required: boolean;\n\n /**\n * Whether the field is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the field is read-only.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Error message to display.\n */\n @Prop() error: string;\n\n /**\n * Size variant for the signature input.\n * - 'small': Compact signature area\n * - 'normal': Standard signature area (default)\n * - 'large': Generous signature area\n */\n @Prop() size: InputSize = 'normal';\n\n /**\n * Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n */\n @Prop() margin: InputMargin = 'normal';\n\n /**\n * The current value of the signature, can be a File or UdpDriveFile.\n */\n @Prop({ mutable: true }) value: File | UdpDriveFile;\n\n /**\n * The initial value, used if `value` is not provided.\n */\n @Prop() initialValue: File | UdpDriveFile | string;\n\n /**\n * Emitted when the signature changes.\n */\n @Event() change: EventEmitter<File | null>;\n\n @State() private internalError: string;\n @State() private signaturePad: SignaturePad;\n\n private canvasEl: HTMLCanvasElement;\n private SignaturePadLib: typeof SignaturePad;\n\n private lastCanvasRect: DOMRect;\n private resizeTimeout: any;\n\n @Watch('error')\n onErrorChange(newValue: string) {\n this.internalError = newValue;\n }\n\n @Watch('value')\n async onValueChange(newValue: File | UdpDriveFile) {\n await this.loadSignaturePad();\n if (this.signaturePad) {\n this.signaturePad.clear();\n if (newValue) {\n this.loadSignature(newValue);\n }\n }\n }\n\n @Watch('initialValue')\n async onInitialValueChange(newValue: File | UdpDriveFile | string) {\n let file = newValue;\n if (file) {\n if(Array.isArray(file)) {\n file = file[0]; // Handle case where initialValue is an array\n }\n if (isUdpDriveFile(file)) {\n try {\n const loadedFile = await downloadFileFromUdpDriveFile(file as UdpDriveFile);\n this.value = loadedFile;\n this.readonly = false;\n } catch (err) {\n console.error('Failed to fetch UdpDriveFile for signature:', err);\n return;\n }\n } else if (typeof newValue === 'string') {\n this.value = await this.urlToFile(newValue as string, 'initial_signature.png');\n } else {\n this.value = newValue;\n }\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n }\n }\n\n async componentWillLoad() {\n this.internalError = this.error;\n await this.loadSignaturePad();\n }\n\n async componentDidLoad() {\n let file = this.initialValue;\n if (file) {\n if(Array.isArray(file)) {\n file = file[0]; // Handle case where initialValue is an array\n }\n if (isUdpDriveFile(this.initialValue)) {\n // Try to fetch the file from UdpDriveFile\n console.log('Loading signature from UdpDriveFile:', this.initialValue);\n try {\n const file = await downloadFileFromUdpDriveFile(this.initialValue as UdpDriveFile);\n this.value = file;\n this.readonly = false; // Try editable first\n } catch (err) {\n console.error('Failed to fetch UdpDriveFile for signature:', err);\n this.value = this.initialValue;\n this.readonly = true; // Fallback to readonly if not editable\n }\n } else {\n this.value = await this.urlToFile(this.initialValue as string, 'initial_signature.png');\n }\n }\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n this.lastCanvasRect = this.canvasEl.getBoundingClientRect();\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n }\n\n private handleResize = () => {\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n this.resizeTimeout = setTimeout(() => {\n const rect = this.canvasEl.getBoundingClientRect();\n if (!this.lastCanvasRect || rect.width !== this.lastCanvasRect.width || rect.height !== this.lastCanvasRect.height) {\n // Save current signature as dataURL\n let dataURL = this.signaturePad && !this.signaturePad.isEmpty() ? this.signaturePad.toDataURL() : null;\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n this.lastCanvasRect = rect;\n // Restore signature if it existed\n if (dataURL && this.signaturePad) {\n this.signaturePad.fromDataURL(dataURL);\n }\n }\n }, 200);\n }\n\n private resizeCanvasForDPR() {\n if (!this.canvasEl) return;\n const ratio = window.devicePixelRatio || 1;\n // Get the CSS size\n const rect = this.canvasEl.getBoundingClientRect();\n this.canvasEl.width = rect.width * ratio;\n this.canvasEl.height = rect.height * ratio;\n this.canvasEl.getContext('2d').scale(ratio, ratio);\n }\n\n private async loadSignaturePad() {\n if (!this.SignaturePadLib) {\n try {\n const module = await import('signature_pad');\n this.SignaturePadLib = module.default;\n } catch (e) {\n console.error('Failed to load signature_pad library', e);\n }\n }\n }\n\n private initializeSignaturePad() {\n this.resizeCanvasForDPR();\n if (this.SignaturePadLib && this.canvasEl) {\n this.signaturePad = new this.SignaturePadLib(this.canvasEl);\n this.signaturePad.addEventListener(\"endStroke\", this.handleSignatureEnd);\n this.handleStateChange();\n if (this.value) {\n this.loadSignature(this.value);\n }\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n handleStateChange() {\n if (this.signaturePad) {\n if (this.disabled || this.readonly) {\n this.signaturePad.off();\n } else {\n this.signaturePad.on();\n }\n }\n }\n\n private handleSignatureEnd = async () => {\n if (this.signaturePad.isEmpty()) {\n this.value = null;\n this.change.emit(null);\n } else {\n const dataURL = this.signaturePad.toDataURL();\n const signatureFile = await this.urlToFile(dataURL, 'signature.png');\n this.value = signatureFile;\n this.change.emit(signatureFile);\n }\n };\n\n private async loadSignature(signatureValue: File | UdpDriveFile | string) {\n let imageUrl: string;\n if (typeof signatureValue === 'string') {\n imageUrl = signatureValue;\n } else if (isUdpDriveFile(signatureValue)) {\n try {\n const file = await downloadFileFromUdpDriveFile(signatureValue as UdpDriveFile);\n imageUrl = URL.createObjectURL(file);\n } catch (error) {\n console.error('Error loading signature image from UdpDriveFile:', error);\n return;\n }\n } else if (signatureValue instanceof File) {\n imageUrl = URL.createObjectURL(signatureValue);\n }\n\n if (imageUrl && this.signaturePad) {\n this.signaturePad.fromDataURL(imageUrl, {\n ratio: window.devicePixelRatio,\n width: this.canvasEl.width,\n height: this.canvasEl.height,\n });\n }\n }\n\n private async urlToFile(url: string, filename: string): Promise<File> {\n const res = await fetch(url);\n const blob = await res.blob();\n return new File([blob], filename, { type: blob.type });\n }\n\n private clearSignature = () => {\n if (this.signaturePad) {\n this.signaturePad.clear();\n this.handleSignatureEnd(); // to emit the change\n }\n };\n\n render() {\n const isError = !!this.internalError;\n const containerClasses = {\n 'signature-pad-container': true,\n 'readonly': this.readonly,\n 'disabled': this.disabled,\n };\n\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--required': this.required,\n 'udp-input--readonly': this.readonly,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n >\n <div class=\"bx--form-item\">\n {this.label && (\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required && '*'}\n </label>\n </unity-typography>\n )}\n <div class={containerClasses}>\n <canvas\n ref={el => (this.canvasEl = el as HTMLCanvasElement)}\n class={{ 'signature-canvas': true, 'readonly': this.readonly || this.disabled }}\n id={this.id}\n ></canvas>\n {!this.readonly && !this.disabled && (\n <button\n type=\"button\"\n class=\"clear-button\"\n onClick={this.clearSignature}\n disabled={this.disabled}\n >\n Clear\n </button>\n )}\n </div>\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.internalError}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","import { Component, h, Prop, Event as StencilEvent, EventEmitter, State, Element, Method } from '@stencil/core';\nimport { createForm, FormApi } from 'final-form';\nimport debounce from 'lodash.debounce';\n\n@Component({\n tag: 'stencil-form',\n shadow: true,\n})\nexport class StencilForm {\n @Element() el: HTMLElement;\n @Prop() handleSubmit: (values: Object) => void;\n @Prop() initialValues: Object;\n @Prop() validate: (values: Object, errors: Object) => Object;\n @Prop() validateOnBlur: boolean = true;\n @Prop() handleFormChange: (values: Object) => void;\n @StencilEvent() stencilFormInvalidEvent: EventEmitter<Object>;\n\n @State() api: FormApi;\n @State() registeredFields: { [key: string]: { required: boolean } } = {};\n\n constructor() {\n this.submitWithValidation = this.submitWithValidation.bind(this);\n this.defaultValidation = this.defaultValidation.bind(this);\n this.submit = this.submit.bind(this);\n this.onFormChange = this.onFormChange.bind(this);\n }\n\n /**\n * Connects a field to the form API.\n */\n private connectField(field: HTMLStencilFieldElement) {\n field.setFormApi({\n api: this.api,\n registeredFields: this.registeredFields,\n });\n }\n\n /**\n * Asynchronously and recursively traverses a node and all of its light DOM\n * and shadow DOM descendants, connecting any stencil-fields it finds.\n */\n private async processNodeRecursively(node: Node) {\n // 1. Skip anything that isn't an element\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return;\n }\n const element = node as Element;\n\n // 2. If the element is a custom component, wait for it to be defined.\n // This ensures its shadowRoot is available if it has one.\n if (element.localName.includes('-')) {\n await customElements.whenDefined(element.localName);\n }\n\n // 3. Process the element itself\n if (element.matches('stencil-field')) {\n this.connectField(element as HTMLStencilFieldElement);\n }\n\n // 4. Connect submit buttons\n this.connectSubmitButtons(element);\n\n // 5. If the element has a shadowRoot, recursively process its children\n if (element.shadowRoot) {\n for (const child of Array.from(element.shadowRoot.childNodes)) {\n await this.processNodeRecursively(child);\n }\n }\n\n // 6. Recursively process all light DOM children\n for (const child of Array.from(element.childNodes)) {\n await this.processNodeRecursively(child);\n }\n }\n\n /**\n * The event handler for slot changes. It kicks off the recursive processing.\n */\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n if (!slot) return;\n\n // Process every node assigned to the slot\n slot.assignedNodes().forEach(node => this.processNodeRecursively(node));\n };\n\n /**\n * Connect submit buttons in slotted content to this form\n */\n private connectSubmitButtons(node: Node) {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return;\n }\n const element = node as Element;\n\n // Check if the element itself is a submit button\n if (element.matches('input[type=\"submit\"], button[type=\"submit\"]')) {\n const htmlElement = element as HTMLElement;\n // Avoid duplicate event listeners\n if (!htmlElement.dataset.stencilFormConnected) {\n htmlElement.dataset.stencilFormConnected = 'true';\n element.addEventListener('click', (e) => {\n e.preventDefault();\n console.log('Submit button clicked, triggering form submit');\n this.submit(e);\n });\n }\n }\n\n // Find submit buttons in descendants and connect them\n const submitButtons = element.querySelectorAll('input[type=\"submit\"], button[type=\"submit\"]');\n submitButtons.forEach((button: Element) => {\n const htmlButton = button as HTMLElement;\n // Avoid duplicate event listeners\n if (!htmlButton.dataset.stencilFormConnected) {\n htmlButton.dataset.stencilFormConnected = 'true';\n button.addEventListener('click', (e) => {\n e.preventDefault();\n console.log('Submit button clicked, triggering form submit');\n this.submit(e);\n });\n }\n });\n }\n\n componentWillLoad() {\n this.api = createForm({\n onSubmit: this.submitWithValidation,\n initialValues: this.initialValues,\n validate: this.defaultValidation,\n validateOnBlur: this.validateOnBlur,\n });\n\n if (this.handleFormChange) {\n this.api.subscribe(this.onFormChange, { values: true });\n }\n }\n\n componentDidLoad() {\n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n this.handleSlotChange(); // Run once for initial content\n slot.addEventListener('slotchange', this.handleSlotChange);\n }\n }\n\n disconnectedCallback() {\n this.api = null;\n this.registeredFields = {};\n\n const slot = this.el.shadowRoot?.querySelector('slot');\n if (slot) {\n slot.removeEventListener('slotchange', this.handleSlotChange);\n }\n }\n\n onFormChange(formState: any): void {\n if (this.handleFormChange && formState.values) {\n this.handleFormChange(formState.values);\n }\n }\n\n async submitWithValidation(values: { [key: string]: any }): Promise<void> {\n console.log('Submitting form with values:', values);\n const errors = this.defaultValidation(values);\n if (Object.keys(errors).length === 0) {\n this.handleSubmit(values);\n } else {\n this.stencilFormInvalidEvent.emit(errors);\n }\n }\n\n defaultValidation(values: Object): Object {\n const { registeredFields } = this;\n const errors = {};\n console.log(registeredFields);\n\n Object.keys(registeredFields).forEach(field => {\n if (registeredFields[field].required && (!values[field] || values[field]?.length === 0)) {\n errors[field] = 'Required';\n }\n });\n if (this?.validate) return this.validate?.(values, errors);\n\n return errors;\n }\n\n getValues() {\n const values = {};\n this.api.getRegisteredFields().forEach((fieldName: string) => {\n values[fieldName] = this.api.getFieldState(fieldName).value;\n });\n return values;\n }\n @Method()\n async getApi(): Promise<FormApi> {\n if (!this.api) {\n console.error('❌ Form API not initialized yet.');\n return null;\n }\n return this.api;\n }\n submit(e) {\n console.log('Submitting form');\n e?.preventDefault?.();\n const submitFunction = () => {\n const errors = this.defaultValidation(this.getValues());\n if (Object.keys(errors).length) {\n this.stencilFormInvalidEvent.emit(errors);\n return;\n }\n this.api?.submit();\n };\n debounce(submitFunction, 1000, { leading: true, trailing: false })();\n }\n\n render() {\n return (\n <form onSubmit={this.submit}>\n <slot />\n </form>\n );\n }\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n.tally-container {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-02, 8px);\n}\n\n.tally-label {\n font-weight: 600;\n margin-bottom: var(--spacing-02, 8px);\n}\n\n.tally-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-04, 16px);\n color: var(--text-secondary, #6b7280);\n}\n\n.tally-content {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-03, 12px);\n}\n\n.tally-stats {\n display: flex;\n gap: var(--spacing-04, 16px);\n flex-wrap: wrap;\n}\n\n.tally-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--spacing-03, 12px) var(--spacing-04, 16px);\n border-radius: var(--border-radius-01, 4px);\n border: 1px solid var(--border-subtle, #e5e7eb);\n background-color: var(--layer-01, #ffffff);\n min-width: 80px;\n flex: 1;\n max-width: 120px;\n}\n\n.tally-item.tally-yes {\n border-color: var(--support-success, #42be65);\n background-color: var(--support-success-hover, #f6f8ff);\n}\n\n.tally-item.tally-no {\n border-color: var(--support-error, #da1e28);\n background-color: var(--support-error-hover, #fff1f1);\n}\n\n.tally-item.tally-unanswered {\n border-color: var(--support-warning, #f1c21b);\n background-color: var(--support-warning-hover, #fcf4d6);\n}\n\n.tally-count {\n font-weight: 700;\n line-height: 1.2;\n margin-bottom: var(--spacing-01, 4px);\n}\n\n.tally-yes .tally-count {\n color: var(--support-success, #42be65);\n}\n\n.tally-no .tally-count {\n color: var(--support-error, #da1e28);\n}\n\n.tally-unanswered .tally-count {\n color: var(--support-warning, #f1c21b);\n}\n\n.tally-item .tally-label {\n margin: 0;\n font-weight: 500;\n text-transform: uppercase;\n font-size: 0.75rem;\n letter-spacing: 0.02em;\n}\n\n.tally-summary {\n padding: var(--spacing-02, 8px) 0;\n border-top: 1px solid var(--border-subtle, #e5e7eb);\n text-align: center;\n}\n\n.error-message {\n margin-top: var(--spacing-02, 8px);\n padding: var(--spacing-02, 8px);\n border-radius: var(--border-radius-01, 4px);\n background-color: var(--support-error-hover, #fff1f1);\n border: 1px solid var(--support-error, #da1e28);\n}\n\n/* Size variants */\n:host(.udp-input--size-small) .tally-item {\n padding: var(--spacing-02, 8px) var(--spacing-03, 12px);\n min-width: 60px;\n max-width: 90px;\n}\n\n:host(.udp-input--size-small) .tally-count {\n font-size: 1.25rem;\n}\n\n:host(.udp-input--size-large) .tally-item {\n padding: var(--spacing-04, 16px) var(--spacing-05, 20px);\n min-width: 100px;\n max-width: 150px;\n}\n\n:host(.udp-input--size-large) .tally-count {\n font-size: 2rem;\n}\n\n/* Margin variants */\n:host(.udp-input--margin-none) .tally-container {\n gap: 0;\n}\n\n:host(.udp-input--margin-dense) .tally-container {\n gap: var(--spacing-01, 4px);\n}\n\n:host(.udp-input--margin-comfortable) .tally-container {\n gap: var(--spacing-04, 16px);\n}\n\n/* Disabled state */\n:host(.udp-input--disabled) .tally-item {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Read-only state */\n:host(.udp-input--readonly) .tally-item {\n background-color: var(--field-01, #f4f4f4);\n}\n\n/* Responsive design */\n@media (max-width: 480px) {\n .tally-stats {\n flex-direction: column;\n }\n \n .tally-item {\n max-width: none;\n flex: none;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/**\n * A tally component that displays counts of Yes/No responses.\n * This is a pure display component that receives tally data as props.\n */\n@Component({\n tag: 'tally-display',\n styleUrl: 'tally.css',\n shadow: true,\n})\nexport class TallyDisplay {\n\n /**\n * Label for the tally display.\n */\n @Prop() label: string = 'Response Tally';\n\n /**\n * Unique identifier for the tally.\n */\n @Prop() id: string;\n\n /**\n * Number of Yes responses.\n */\n @Prop() yesCount: number = 0;\n\n /**\n * Number of No responses.\n */\n @Prop() noCount: number = 0;\n\n /**\n * Number of Not Applicable responses.\n */\n @Prop() naCount: number = 0;\n\n /**\n * Total number of fields being tallied.\n */\n @Prop() totalFields: number = 0;\n\n /**\n * Whether the component is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the component is read-only.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Error message to display.\n */\n @Prop() error: string;\n\n /**\n * Size variant for the tally display.\n */\n @Prop() size: InputSize = 'normal';\n\n /**\n * Margin variant for the component spacing.\n */\n @Prop() margin: InputMargin = 'normal';\n\n render() {\n const isError = !!this.error;\n const answeredCount = this.yesCount + this.noCount + this.naCount;\n const unansweredCount = this.totalFields - answeredCount;\n \n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n >\n <div class=\"tally-container\">\n {this.label && (\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"tally-label\">\n {this.label}\n </label>\n </unity-typography>\n )}\n <div class=\"tally-content\" id={this.id}>\n <div class=\"tally-stats\">\n <div class=\"tally-item tally-yes\">\n <unity-typography variant=\"h4\" class=\"tally-count\">\n {this.yesCount}\n </unity-typography>\n <unity-typography variant=\"caption-text\" class=\"tally-label\">\n Yes\n </unity-typography>\n </div>\n <div class=\"tally-item tally-no\">\n <unity-typography variant=\"h4\" class=\"tally-count\">\n {this.noCount}\n </unity-typography>\n <unity-typography variant=\"caption-text\" class=\"tally-label\">\n No\n </unity-typography>\n </div>\n <div class=\"tally-item tally-na\">\n <unity-typography variant=\"h4\" class=\"tally-count\">\n {this.naCount}\n </unity-typography>\n <unity-typography variant=\"caption-text\" class=\"tally-label\">\n Not Applicable\n </unity-typography>\n </div>\n {unansweredCount > 0 && (\n <div class=\"tally-item tally-unanswered\">\n <unity-typography variant=\"h4\" class=\"tally-count\">\n {unansweredCount}\n </unity-typography>\n <unity-typography variant=\"caption-text\" class=\"tally-label\">\n Unanswered\n </unity-typography>\n </div>\n )}\n </div>\n <div class=\"tally-summary\">\n <unity-typography variant=\"caption-text\">\n Total Questions: {this.totalFields}\n </unity-typography>\n </div>\n </div>\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">\n {this.error}\n </unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","/**\n * Finds the parent stencil-form and returns its Final Form API.\n * This function correctly traverses up through nested Shadow DOM boundaries.\n *\n * @param element The host element of the component calling this function.\n * @returns A promise that resolves with the FormApi instance, or null if not found.\n */\nexport async function useFormApi(element: HTMLElement): Promise<any | null> {\n let current: HTMLElement | null = element;\n let form: HTMLElement | null = null;\n\n // Walk up the DOM tree, escaping shadow roots as we go.\n while (current) {\n // Look for the form in the current scope\n const foundForm = current.closest('stencil-form');\n if (foundForm) {\n form = foundForm;\n break; // Found it!\n }\n\n // If not found, we might be in a shadow root.\n // Let's try to escape it.\n const root = current.getRootNode();\n if (root instanceof ShadowRoot) {\n current = root.host as HTMLElement;\n } else {\n // We're in the main document and didn't find it.\n break;\n }\n }\n\n if (!form) {\n return null;\n }\n\n // Check if getApi method exists\n if (typeof (form as any).getApi !== 'function') {\n return null;\n }\n\n const formApi = await (form as any).getApi();\n \n if (!formApi) {\n return null;\n }\n \n return formApi;\n}\n","\n.hidden {\n display: none;\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { UdpFormQuestion } from '../types';\nimport { UdpFormsFieldTypeEnum } from '../enums';\nimport { FontOverrides } from '../types';\nimport { fontOverrideMapping, overrideFont } from '../utils';\nimport { useFormApi } from '../../form/useFormApi';\n\n@Component({\n tag: 'udp-question',\n styleUrl: 'udp-question.css',\n shadow: true,\n})\nexport class UdpQuestion {\n @Prop() question: UdpFormQuestion;\n @Prop() questionNumber: number;\n @Prop({ mutable: true }) value: string; // only used for Paragraph type (UdpFormsFieldTypeEnum.Paragraph)\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop() styleOverrides: {\n helperText: FontOverrides;\n questionText: FontOverrides;\n paragraphText: FontOverrides;\n };\n\n @State() private _fieldComponent: ComponentInterface;\n @State() private tallyData: {\n yesCount: number;\n noCount: number;\n naCount: number;\n totalFields: number;\n } = { yesCount: 0, noCount: 0, naCount: 0, totalFields: 0 };\n @State() private formApi: any = null;\n\n @Element() el: HTMLElement;\n\n @Watch('question')\n @Watch('questionNumber')\n @Watch('value')\n @Watch('disabled')\n @Watch('readonly')\n @Watch('styleOverrides')\n protected propChanged() {\n this.updateFieldComponent();\n }\n\n async componentWillLoad() {\n this.updateFieldComponent();\n if (this.question.fieldTypeId === UdpFormsFieldTypeEnum.Tally) {\n await this.initializeFormApiForTally();\n }\n }\n\n private async initializeFormApiForTally() {\n try {\n this.formApi = await useFormApi(this.el);\n\n if (this.formApi) {\n // Subscribe to form changes to update tally in real-time\n const unsubscribe = this.formApi.subscribe(\n () => {\n this.calculateTally();\n },\n { active: true, dirty: true, values: true }\n );\n\n // Store unsubscribe function for cleanup if needed\n (this as any).unsubscribeFormApi = unsubscribe;\n\n // Initial calculation\n this.calculateTally();\n }\n } catch (error) {\n console.error('Failed to initialize form API for tally:', error);\n }\n }\n\n private calculateTally() {\n if (!this.formApi || this.question.fieldTypeId !== UdpFormsFieldTypeEnum.Tally) {\n return;\n }\n\n try {\n const formValues = this.formApi.getState().values;\n\n const formElement = this.el.closest('stencil-form');\n if (!formElement) {\n return;\n }\n\n // Get all udp-question elements in the form\n const questionElements = formElement.querySelectorAll('udp-question');\n const yesNoFields: string[] = [];\n\n // Identify YesNo field types\n questionElements.forEach((questionEl: any) => {\n if (questionEl.question && questionEl.question.fieldTypeId === UdpFormsFieldTypeEnum.YesNo) {\n const fieldName = questionEl.question.name;\n if (fieldName) {\n const shouldInclude = this.shouldIncludeFieldInTally(fieldName);\n if (shouldInclude) {\n yesNoFields.push(fieldName);\n }\n }\n }\n });\n\n // Count Yes/No/NA responses\n let yesCount = 0;\n let noCount = 0;\n let naCount = 0;\n\n yesNoFields.forEach(fieldName => {\n const value = formValues[fieldName];\n\n if (value === 'true' || value === true) {\n yesCount++;\n } else if (value === 'false' || value === false) {\n noCount++;\n } else if (value === 'na') {\n naCount++;\n }\n });\n\n this.tallyData = {\n yesCount,\n noCount,\n naCount,\n totalFields: yesNoFields.length,\n };\n\n // Force a re-render to update the component\n this.updateFieldComponent();\n\n } catch (error) {\n console.error('Error calculating tally:', error);\n }\n }\n\n private shouldIncludeFieldInTally(fieldName: string): boolean {\n const fieldProps = this.question.fieldProperties;\n\n // If includeFields is specified, only include those fields\n if (fieldProps?.includeFields && fieldProps.includeFields.length > 0) {\n return fieldProps.includeFields.includes(fieldName);\n }\n\n // If excludeFields is specified, exclude those fields\n if (fieldProps?.excludeFields && fieldProps.excludeFields.length > 0) {\n return !fieldProps.excludeFields.includes(fieldName);\n }\n\n // Include all fields by default\n return true;\n }\n\n private updateFieldComponent() {\n this._fieldComponent = this.getFieldComponent();\n }\n\n private getFieldComponent(): ComponentInterface {\n const props = {\n name: this.question.name ?? `question-${this.questionNumber}`,\n required: this.question.required,\n };\n const fieldProps = { ...this.question.fieldProperties, id: this.questionNumber, disabled: this.disabled, readonly: this.readonly };\n switch (this.question.fieldTypeId) {\n case UdpFormsFieldTypeEnum.SingleLineText:\n return (\n <stencil-field {...props}>\n <text-field {...fieldProps} />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.MultiLineText:\n return (\n <stencil-field {...props}>\n <text-area fullWidth={true} {...fieldProps} />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.Checkbox:\n return (\n <stencil-field {...props}>\n <selectable-list\n valueKey=\"value\"\n displayKey=\"display\"\n multiSelect={true}\n useCheckbox={true}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.RadioButton:\n return (\n <stencil-field {...props}>\n <selectable-list\n valueKey=\"value\"\n displayKey=\"display\"\n useCheckbox={true}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.DropdownSingleSelect:\n case UdpFormsFieldTypeEnum.DropdownMultipleSelect:\n let options: { label: string; value: string } = fieldProps?.items?.map?.(items => ({ label: items.display, value: items.value, ...fieldProps }));\n return (\n <stencil-field {...props}>\n <udp-selector\n options={options ?? []}\n multiSelect={this.question.fieldTypeId === UdpFormsFieldTypeEnum.DropdownMultipleSelect}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.YesNo:\n return (\n <stencil-field {...props}>\n <selectable-list\n valueKey=\"value\"\n displayKey=\"display\"\n useCheckbox={true} // Use radio buttons\n multiSelect={false}\n items={[\n { value: 'true', display: 'Yes' },\n { value: 'false', display: 'No' },\n { value: 'na', display: 'Not Applicable' },\n ]}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.ListMultiSelect:\n return (\n <stencil-field {...props}>\n <selectable-list\n valueKey=\"value\"\n displayKey=\"display\"\n multiSelect={true}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.DateSelector:\n return (\n <stencil-field {...props}>\n <udp-date-selector\n min={fieldProps?.minDate}\n max={fieldProps?.maxDate}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.TimeSelector:\n return (\n <stencil-field {...props}>\n <udp-time-selector\n min={fieldProps?.minTime}\n max={fieldProps?.maxTime}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.DateTimeSelector:\n return (\n <stencil-field {...props}>\n <udp-datetime-selector\n max={fieldProps?.maxDateTime}\n min={fieldProps?.minDateTime}\n {...fieldProps}\n />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.FileUpload:\n return (\n <stencil-field {...props}>\n <file-upload fullWidth={true} allowMultiple={false} {...fieldProps} />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.Signature:\n return (\n <stencil-field {...props}>\n <signature-input {...fieldProps} value={this.value} />\n </stencil-field>\n );\n case UdpFormsFieldTypeEnum.Paragraph:\n return this.value ? <unity-typography id={`paragraphText${this.question.name}`} variant={this.styleOverrides?.paragraphText?.variant || 'body'} >{this.value}</unity-typography> : <div />;\n case UdpFormsFieldTypeEnum.Number:\n return (\n <stencil-field {...props}>\n <numeric-field {...fieldProps} />\n </stencil-field>\n );\n\n case UdpFormsFieldTypeEnum.Tally:\n return (\n <tally-display\n id={this.questionNumber}\n label={this.question.questionText || 'Response Tally'}\n yesCount={this.tallyData.yesCount}\n noCount={this.tallyData.noCount}\n naCount={this.tallyData.naCount}\n totalFields={this.tallyData.totalFields}\n {...fieldProps}\n required={false}\n />\n );\n case UdpFormsFieldTypeEnum.Hidden:\n default:\n return <div />;\n }\n }\n async componentDidLoad() {\n // If form API wasn't available during componentWillLoad, try again\n if (this.question.fieldTypeId === UdpFormsFieldTypeEnum.Tally && !this.formApi) {\n await this.initializeFormApiForTally();\n }\n\n // override the fonts based on style overrides\n const variantsAndOverrides = [];\n for (const override in this.styleOverrides) {\n variantsAndOverrides.push({\n id: override + this.question.name,\n fontOverride: this.styleOverrides?.[override]?.fontFamily,\n variant: this.styleOverrides?.[override]?.variant\n }\n )\n }\n variantsAndOverrides.forEach(override => {\n if(!fontOverrideMapping[override?.fontOverride] || !this.el || !this.el.shadowRoot) return;\n overrideFont(this.el?.shadowRoot?.getElementById?.(override.id),fontOverrideMapping[override?.fontOverride])\n\n })\n }\n render() {\n\n const component = this._fieldComponent;\n const titleText = `${this.question.fieldTypeId === UdpFormsFieldTypeEnum.Paragraph ? '' : `${this.questionNumber}.`} ${this.question.questionText} ${\n this.question.required && this.question.fieldTypeId !== UdpFormsFieldTypeEnum.Paragraph ? '*' : ''\n }`;\n if (!component) return null;\n return (\n <div class={this.question.fieldTypeId === UdpFormsFieldTypeEnum.Hidden ? 'hidden' : ''}>\n {this.question.questionText ? <unity-typography id={`questionText${this.question.name}`} variant={this.styleOverrides?.questionText?.variant || 'h3'} >{titleText}</unity-typography> : ''}\n {component}\n\n <unity-typography id={`helperText${this.question.name}`} variant={this.styleOverrides?.helperText?.variant || 'caption-text'} >{this.question.helperText}</unity-typography>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/stencil-library/p-584552e6.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as r,a as i}from"./p-CaIWDYyq.js";import{ModuleRegistry as s,ClientSideRowModelModule as a,ValidationModule as d,PaginationModule as o,AllCommunityModule as c,themeQuartz as h,createGrid as n}from"ag-grid-community-v33";s.registerModules([a,d,o,c]);const b=h.withParams({backgroundColor:"#FFE8E0",foregroundColor:"#361008CC",browserColorScheme:"light"},"light-red");const l=class{constructor(r){e(this,r);this.gridReady=t(this,"gridReady");this.headerConfig={};this.gridHeight="40vh";this.onGridReady=e=>{this.gridApi=e.api;this.gridReady.emit(this.gridApi)}}componentDidLoad(){const e=Object.assign({onGridReady:this.onGridReady,theme:b,pagination:true,defaultColDef:{sortable:true,filter:true}},this.gridConfig);n(this.el.querySelector("#myNewGrid"),e)}disconnectedCallback(){var e;(e=this.gridApi)===null\|\|e===void 0?void 0:e.destroy()}async getGridApi(){return this.gridApi}render(){return r("div",{key:"b238a00d298f68a70183b1b919bac8ead632198d"},r("grid-header",{key:"eb29a176d36b8902b8f716aeaaff41bf69b8c2d5",headerConfig:this.headerConfig}),r("div",{key:"308b5401a3094b1060993496471d4c7403f60e26",id:"myNewGrid",style:{height:this.gridHeight}}))}get el(){return i(this)}};const f=class{constructor(t){e(this,t)}render(){const e=this.headerConfig;return r("div",{key:"5863877ae14c82b56c309ccf1cac013d10c419e1",class:"auto-header"},e.title&&r("h3",{key:"47f16658d43e66c323c69d57fbc94118fa72400a"},e.title))}};export{l as ag_grid_base,f as grid_header};
2	- //# sourceMappingURL=p-584552e6.entry.js.map

package/dist/stencil-library/p-5e96c57a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as a}from"./p-CaIWDYyq.js";const c=":host{display:block;font-family:var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);line-height:1.6;color:var(--text-color, #333);max-width:1200px;margin:0 auto;padding:2rem}h1{font-size:2.5rem;font-weight:700;margin-bottom:2rem;color:var(--primary-color, #007acc);text-align:center;border-bottom:3px solid var(--primary-color, #007acc);padding-bottom:1rem}.example-section{margin-bottom:4rem;padding:2rem;background:var(--section-background, #f8f9fa);border-radius:12px;border:1px solid var(--border-color, #e9ecef)}.example-section h2{font-size:1.8rem;font-weight:600;margin-bottom:1rem;color:var(--secondary-color, #495057);display:flex;align-items:center;gap:0.5rem}.example-section h2::before{content:'';width:4px;height:1.5rem;background:var(--primary-color, #007acc);border-radius:2px}.example-section p{margin-bottom:1.5rem;color:var(--text-muted, #6c757d);font-size:1.1rem}.input-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-bottom:2rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-bottom:2rem}.input-example{background:var(--input-example-background, #ffffff);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color, #e9ecef);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:transform 0.2s ease, box-shadow 0.2s ease}.input-example:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15)}.input-example h3{font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:var(--heading-color, #343a40);border-bottom:2px solid var(--accent-color, #dee2e6);padding-bottom:0.5rem}.value-display{margin-top:1rem;padding:0.75rem;background:var(--value-display-background, #e7f3ff);border-radius:6px;font-family:'Courier New', monospace;font-size:0.9rem;color:var(--value-display-color, #0066cc);border-left:4px solid var(--primary-color, #007acc)}.form-actions{display:flex;justify-content:center;margin-top:2rem;padding-top:2rem;border-top:2px solid var(--border-color, #e9ecef)}.submit-button{background:var(--primary-color, #007acc);color:white;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background-color 0.2s ease, transform 0.2s ease;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}.submit-button:hover{background:var(--primary-color-hover, #0056b3);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15)}.submit-button:active{transform:translateY(0)}.form-values{margin-top:2rem;padding:1.5rem;background:var(--code-background, #f8f9fa);border-radius:8px;border:1px solid var(--border-color, #e9ecef)}.form-values h3{margin-bottom:1rem;color:var(--heading-color, #343a40);font-size:1.2rem}.form-values pre{background:var(--pre-background, #ffffff);padding:1rem;border-radius:6px;border:1px solid var(--border-color, #e9ecef);font-size:0.9rem;overflow-x:auto;color:var(--code-color, #495057);white-space:pre-wrap;word-wrap:break-word}.disabled-examples{display:flex;flex-direction:column;gap:1rem}@media (max-width: 768px){:host{padding:1rem}h1{font-size:2rem}.input-grid,.form-grid{grid-template-columns:1fr;gap:1rem}.input-example{padding:1rem}.example-section{padding:1rem}}@media (prefers-color-scheme: dark){:host{--text-color:#f8f9fa;--section-background:#2d3748;--input-example-background:#4a5568;--border-color:#4a5568;--heading-color:#e2e8f0;--text-muted:#a0aec0;--value-display-background:#2c5282;--value-display-color:#90cdf4;--code-background:#2d3748;--pre-background:#4a5568;--code-color:#e2e8f0}}*{transition:color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease}.submit-button:focus{outline:2px solid var(--primary-color, #007acc);outline-offset:2px}@media print{:host{padding:0}.input-example{break-inside:avoid;box-shadow:none;border:1px solid #ccc}.submit-button{display:none}}";const d=class{constructor(a){e(this,a);this.controlledTextValue="";this.controlledNumericValue="";this.controlledTextAreaValue="";this.controlledCheckboxValue=false;this.controlledToggleValue=false;this.controlledDateValue="";this.controlledTimeValue="";this.controlledDateTimeValue="";this.controlledSelectorValue="";this.controlledFileValue=[];this.formValues={};this.selectorOptions=[{value:"option1",label:"Option 1"},{value:"option2",label:"Option 2"},{value:"option3",label:"Option 3"},{value:"option4",label:"Option 4"}];this.handleControlledNumericChange=e=>{this.controlledNumericValue=e.detail};this.handleControlledCheckboxChange=e=>{this.controlledCheckboxValue=e.detail==="true"};this.handleControlledToggleChange=e=>{this.controlledToggleValue=e.detail==="true"};this.handleControlledDateChange=e=>{console.log(e);this.controlledDateValue=e.detail};this.handleControlledTimeChange=e=>{this.controlledTimeValue=e.detail};this.handleControlledDateTimeChange=e=>{this.controlledDateTimeValue=e.detail};this.handleControlledSelectorChange=e=>{this.controlledSelectorValue=e.detail};this.handleControlledFileChange=e=>{this.controlledFileValue=e.detail.files\|\|[]};this.handleFormSubmit=e=>{console.log("Form submitted with values:",e);alert("Form submitted! Check console for values.")};this.handleFormChange=e=>{this.formValues=Object.assign({},e)};this.validateForm=e=>{const a={};if(!e.formTextField){a.formTextField="This field is required"}if(!e.formNumericField\|\|parseFloat(e.formNumericField)<0){a.formNumericField="Must be a positive number"}if(!e.formTextArea){a.formTextArea="Description is required"}if(!e.formCheckbox){a.formCheckbox="You must accept the terms"}if(!e.formDate){a.formDate="Please select a date"}if(!e.formSelector){a.formSelector="Please make a selection"}return a}}render(){return a("div",{key:"c1752ee849c28d15226e52f89e54effc0124096d",class:"inputs-example"},a("h1",{key:"f206efe282b4e4be1e72e080c658b5281b62677b"},"Input Components Examples"),a("section",{key:"dc2ccaa0c26a7828d645edf914afff039ab614cb",class:"example-section"},a("h2",{key:"a964de5f12691c8b8b376bc60ca555eaed0bab73"},"Controlled Components"),a("p",{key:"c78e0fbf5bd4af735ea24fc3f1321be657651920"},"Parent component manages state and passes values to child components."),a("div",{key:"3c727d4852fb20550f7beb3293693f3c3b75f1d6",class:"input-grid"},a("div",{key:"55813c68ff4a15b36c2c6ec4f5a3a2350ba99894",class:"input-example"},a("h3",{key:"7fe73653ce6e01047cba3c5e895ceb7360a61c8f"},"Text Field"),a("text-field",{key:"b157bb01cd1d40475c93afff82753507dd1c0bf5",label:"Controlled Text Input",placeholder:"Enter text...",value:this.controlledTextValue}),a("p",{key:"2292267101a88a7edbcc35b4c844c54cfb35670c",class:"value-display"},"Value: ",this.controlledTextValue)),a("div",{key:"b826cb6aa6811bae0aa6c58d079dadc41b834512",class:"input-example"},a("h3",{key:"75bfe5eaddeee9b8925e542b998f2aa04b6d54e3"},"Numeric Field"),a("numeric-field",{key:"36e0566646ed0fae60c500d3228de73f5ab456d9",label:"Controlled Numeric Input",placeholder:"Enter number...",value:this.controlledNumericValue,min:"0",max:"100",step:"1",onChange:this.handleControlledNumericChange}),a("p",{key:"46d9774aa39950df990807c90877d8eb07f89291",class:"value-display"},"Value: ",this.controlledNumericValue)),a("div",{key:"c30ab6ae34d3c90eb0d9ecda39f4455e16d560cc",class:"input-example"},a("h3",{key:"47b490cd16b75baeba29dd91ba9f10f9ab6fdceb"},"Text Area"),a("text-area",{key:"78a9810cd541b29414158722af7b911a3c55d369",label:"Controlled Text Area",placeholder:"Enter description...",value:this.controlledTextAreaValue,minRows:3,maxRows:6}),a("p",{key:"35531b57b6dd4535df39f252c0d89aaccb83077c",class:"value-display"},"Value: ",this.controlledTextAreaValue)),a("div",{key:"b3c0cf99402b280d615eedcfdd1ef0277772126a",class:"input-example"},a("h3",{key:"294edc98458189a11728c365deaff0630f607ab9"},"Checkbox"),a("check-box",{key:"cbe8c1c145e6a81051b864e4714462a67aed9298",label:"Controlled Checkbox",checked:this.controlledCheckboxValue,onChange:this.handleControlledCheckboxChange}),a("p",{key:"19ffa361b1b479d271fb2f8a90e2b6d341c44ec7",class:"value-display"},"Checked: ",this.controlledCheckboxValue.toString())),a("div",{key:"950be8a45351637658fb1e5c13f2a8b1ad2c3c06",class:"input-example"},a("h3",{key:"5b3e513f3890dd35d62fa03eda5c0dd4f3e2f0ab"},"Toggle"),a("stencil-toggle",{key:"16d125f201dc933e6a80345ca61850268e1b0bae",label:"Controlled Toggle",checked:this.controlledToggleValue,onChange:this.handleControlledToggleChange}),a("p",{key:"0a840d6e95d0fd3cacbbadc0f1b0f03082dd0b4c",class:"value-display"},"Toggled: ",this.controlledToggleValue.toString())),a("div",{key:"4786b440e6c3cd22327ad8894bd2cbc1e2a28d43",class:"input-example"},a("h3",{key:"43466d4f854f8fd5b8ebc8448aa20c8dc8fcb5b6"},"Date Selector"),a("udp-date-selector",{key:"84be9acf1c48dff9cbeb19588fe8cf3338b16308",label:"Controlled Date",value:this.controlledDateValue,onChange:this.handleControlledDateChange}),a("p",{key:"ab8531b319529f652fbfeba9d038c157739ab78f",class:"value-display"},"Date: ",this.controlledDateValue)),a("div",{key:"26a293d9425f560f29973aee493757b3f836cae6",class:"input-example"},a("h3",{key:"cee79570db45935defc57c0b59abaccb72d292cd"},"DateTime Selector"),a("udp-datetime-selector",{key:"7f9efe03d0c622e336742675efb6a029e5a816fb",label:"Controlled DateTime",value:this.controlledDateTimeValue,onChange:this.handleControlledDateTimeChange}),a("p",{key:"24a736902871a9b3687b9194c0e934bf231c314e",class:"value-display"},"DateTime: ",this.controlledDateTimeValue)),a("div",{key:"0bef5920951558ee4a1a041930ecb72eea4cb220",class:"input-example"},a("h3",{key:"8e0e2790bb4e50e5702f0500bf125081aa79d9ba"},"Time Selector"),a("udp-time-selector",{key:"6b053bdeb1f685f864345e5af0fa8c841dc9db06",label:"Controlled Time",value:this.controlledTimeValue,onChange:this.handleControlledTimeChange}),a("p",{key:"af9036e1b6c332d1963dfee819d024dc2e11c09c",class:"value-display"},"Time: ",this.controlledTimeValue)),a("div",{key:"3566f7fac6a857d3117dbf0f799b73f1a67fddda",class:"input-example"},a("h3",{key:"0f729058ce3067b744a4e557522d45ad850a09e9"},"UDP Selector"),a("udp-selector",{key:"bbde5d04caa4a7fdbb0aeccf97f3f2439b0a376a",label:"Controlled Selector",options:this.selectorOptions,value:this.controlledSelectorValue,onChange:this.handleControlledSelectorChange}),a("p",{key:"b8b1cd7d4f6959c4b7574e996d597a629f09e0d9",class:"value-display"},"Selected: ",this.controlledSelectorValue)),a("div",{key:"1dcc15135ed2997d99e867163b8e4bb3482e729f",class:"input-example"},a("h3",{key:"8c35665c76e439b213391def276e3edb5fe8a4ca"},"File Upload"),a("file-upload",{key:"13023732062341ac3f849eb9dd80a7ab3c988709",label:"Controlled File Upload",allowMultiple:true,onChange:this.handleControlledFileChange}),a("p",{key:"a8863fd87d271b8e437169ff858b8727ef20b177",class:"value-display"},"Files: ",this.controlledFileValue.length," selected")))),a("section",{key:"4df5360723d0adfb5e88e47cf8ad67ebbb3f0cf5",class:"example-section"},a("h2",{key:"e2b35a91d8af9470830cd59a9c4860fff9b45ced"},"Uncontrolled Components"),a("p",{key:"ee4972c9404597fe6a1d9166693ed58d6177302a"},"Components manage their own state with initial values."),a("div",{key:"2831fa2114801cb847a5a7be320113c0b0b57e04",class:"input-grid"},a("div",{key:"fbeb85dc62183315fb224ac174129a28f0b82918",class:"input-example"},a("h3",{key:"aad3807977d2fa303612c4e4c8fa4b3f10e895c9"},"Text Field"),a("text-field",{key:"a4758b4b116c8c68481688ea373e2550fe55f72b",label:"Uncontrolled Text Input",placeholder:"Enter text...",initialValue:"Initial text value",onChange:e=>console.log("Text changed:",e.detail)})),a("div",{key:"4a9abaeefc01f435954b8484b99c2cccf2a98b92",class:"input-example"},a("h3",{key:"9316641218224158a182aa0432f32171f0bf8147"},"Numeric Field"),a("numeric-field",{key:"54c980e988f9864066ff5ab74d0919e9d9a821a1",label:"Uncontrolled Numeric Input",placeholder:"Enter number...",initialValue:"42",min:"0",max:"100",onChange:e=>console.log("Number changed:",e.detail)})),a("div",{key:"c9bd3bdb4c4fe5bb8706d8550b1753d714ea05c9",class:"input-example"},a("h3",{key:"7cc6d984f27655cabd977065a295b7b03a209760"},"Text Area"),a("text-area",{key:"ab416779159eef26c884b8c7c8108b1a85a27278",label:"Uncontrolled Text Area",placeholder:"Enter description...",initialValue:"Initial description text",minRows:3,onChange:e=>console.log("Text area changed:",e.detail)})),a("div",{key:"9bd567cecdd5c50a588640bb9192256298af0d85",class:"input-example"},a("h3",{key:"7dc7065799e49d44cd20409cad45a23cebe35b05"},"Checkbox"),a("check-box",{key:"ce576e8595ef205619a26b1b1cf338af6c6dfb1c",label:"Uncontrolled Checkbox",initialValue:"true",onChange:e=>console.log("Checkbox changed:",e.detail)})),a("div",{key:"7bd2f4c5c57691c8e02bbd8b1031e1b8bd863b19",class:"input-example"},a("h3",{key:"27134fa9a4cdc8bf433802b92be292c0236f1f57"},"Toggle"),a("stencil-toggle",{key:"4bb158343211ec80ba11c054b4d9bea27f4bb871",label:"Uncontrolled Toggle",initialValue:"false",onChange:e=>console.log("Toggle changed:",e.detail)})),a("div",{key:"e54426c4dd6f29ea88a67f48543e074f221d722e",class:"input-example"},a("h3",{key:"ef430abc90d5937765f564640a3ba8b990a6d899"},"Date Selector"),a("udp-date-selector",{key:"78e2ad0e5f46ee01aff4c0b48e1004e9119d8244",label:"Uncontrolled Date",initialValue:"2024-01-15",onChange:e=>console.log("Date changed:",e.detail)})),a("div",{key:"05f5e5f00dda67616dc74e65dc32f5919d1b1f07",class:"input-example"},a("h3",{key:"41eaf71ed50ee3188392a677ca5a3130516bcfa0"},"Time Selector"),a("udp-time-selector",{key:"da6aa8cac663d1307a3bff2c18532f2dcc68293f",label:"Uncontrolled Time",initialValue:"14:30",onChange:e=>console.log("Time changed:",e.detail)})),a("div",{key:"1d7dd74a78f454cf360e83d39463f67e14759a02",class:"input-example"},a("h3",{key:"faa5e888eb8d1e08ed69e85ca529228119b54412"},"DateTime Selector"),a("udp-datetime-selector",{key:"880b518fd32e80fcf305dbad31b37835755a76b0",label:"Uncontrolled DateTime",initialValue:"2024-01-15T14:30",onChange:e=>console.log("DateTime changed:",e.detail)})),a("div",{key:"b2e4f0549e0b87c0052cf277914cbdc876c66800",class:"input-example"},a("h3",{key:"e5d0b009429f4c75dca407d0501179e09aec6ca4"},"UDP Selector"),a("udp-selector",{key:"2f015c435e8fadbd867a0f640feb9e92625cc91c",label:"Uncontrolled Selector",options:this.selectorOptions,initialValue:"option2",onChange:e=>console.log("Selector changed:",e.detail)})))),a("section",{key:"81215b51a88570bedfe8c87b1f0f2b0ac34a270f",class:"example-section"},a("h2",{key:"72ded636a7a45e1b32592a6a3bf863e170c2cf17"},"Form-wrapped Components"),a("p",{key:"b8364004cf77adf4a3988a080cbb11108a746688"},"Components integrated with stencil-form and stencil-field for validation and state management."),a("stencil-form",{key:"362040b4f61388149bb9485950b23ee2325b857f",handleSubmit:this.handleFormSubmit,handleFormChange:this.handleFormChange,validate:this.validateForm,initialValues:{formTextField:"Initial form text",formNumericField:"25",formTextArea:"Initial form description",formCheckbox:"false",formToggle:"true",formDate:"2024-02-01",formTime:"09:00",formSelector:"option1"}},a("div",{key:"da246cd0f737d4cc24a9e1aab2d642f46f0dd5b9",class:"form-grid"},a("stencil-field",{key:"fca403e3e4b22b9697a28fa0a72c539b19209c5e",name:"formTextField"},a("text-field",{key:"6fcc84433366bbe7f2ad107e3f62f5086a5bca68",label:"Form Text Field",placeholder:"Enter text...",required:true})),a("stencil-field",{key:"02e8e022962ac70fc3922134195d2789a1ff1150",name:"formNumericField"},a("numeric-field",{key:"c11c278c51a87671babf4aa9d56b6186c675a23b",label:"Form Numeric Field",placeholder:"Enter number...",min:"0",max:"100",required:true})),a("stencil-field",{key:"5dab6572842cc9eac5da936d8885772ef79cd316",name:"formTextArea"},a("text-area",{key:"11bfbfd5088ce2394f3afff18e32d2116a32aef5",label:"Form Text Area",placeholder:"Enter description...",required:true,minRows:3})),a("stencil-field",{key:"ecea25b318eed0547c13e59a027b654c4be9fcd0",name:"formCheckbox"},a("check-box",{key:"78f127f9f7bcca6a0f6e481afb818b3db6d949fe",label:"Accept Terms and Conditions",required:true})),a("stencil-field",{key:"77cbe4ff4e53e767d3eb8d6373019b9b4a50735d",name:"formToggle"},a("stencil-toggle",{key:"1fbd8fcc5decfed9f42b7cc779c52c1094e16865",label:"Enable Notifications"})),a("stencil-field",{key:"a63a863e35dfa120d868c686dd05d904789191b9",name:"formDate"},a("udp-date-selector",{key:"d28a405f02c4782c4cab90ddfd05f37a98027f3d",label:"Form Date",required:true})),a("stencil-field",{key:"0f845e170698ed8278c30c049cb1959ca9014670",name:"formTime"},a("udp-time-selector",{key:"29fcc81c4e71aa1e92ce9912fe65da1b3ef80076",label:"Form Time"})),a("stencil-field",{key:"635a13e8e4df968a2e2570752beee6cddd26237d",name:"formSelector"},a("udp-selector",{key:"1b073b08193591c209fbc952d5d2611c640d335c",label:"Form Selector",options:this.selectorOptions,required:true})),a("stencil-field",{key:"8edf845e1abc0a0e1e3a6301f4c791c0cb9a4d32",name:"formFiles"},a("file-upload",{key:"232a216103e25969d6e2cccd7accffc1453e7cc8",label:"Form File Upload",allowMultiple:true}))),a("div",{key:"d0f7e7ffcba8cac4a659dc309f5b6a34781cc72b",class:"form-actions"},a("button",{key:"9afaea75673848a0c5f7edd31a12fc4b7073cb57",type:"submit",class:"submit-button"},"Submit Form"))),a("div",{key:"e85b39d39068141392939d10baa9d99b39e3679e",class:"form-values"},a("h3",{key:"eafdd2ef93a23b27d2cff21ba16eb6c196ffae7b"},"Current Form Values:"),a("pre",{key:"2db8a367e6a482522522bc88b2c13d9c9bb5e2d7"},JSON.stringify(this.formValues,null,2)))),a("section",{key:"7b4214782208e8f6a3b51ec98cf921fc2ace3ef1",class:"example-section"},a("h2",{key:"499581121cdd03f92d778365a878fcb54a5d8e47"},"Additional Examples"),a("p",{key:"31154dcc4ff09bdf22e48990b5b8a4ae99b6efe6"},"More complex configurations and specialized use cases."),a("div",{key:"74cd3c0d4165e6abd032dbc93bfd45170634beae",class:"input-grid"},a("div",{key:"50de9539f73cb00ceadeba9042055319b486abcf",class:"input-example"},a("h3",{key:"3dc9837aeeed3d87ab64ecec3c4402a7c6bd0f22"},"Multi-Select UDP Selector"),a("udp-selector",{key:"972ce6287b9c1adb73f2dbc2e48c5d5252044530",label:"Multi-Select Selector",options:this.selectorOptions,multiSelect:true,initialValue:"option1,option3",onChange:e=>console.log("Multi-select changed:",e.detail)})),a("div",{key:"1f3747ee36e54941587f842fc8b78524b738196b",class:"input-example"},a("h3",{key:"3ad60a99c76032da10f00c2b65cea29c003a8044"},"Large UDP Selector"),a("udp-selector",{key:"a552b021960e894caaf347164a777d87cd10c39a",label:"Large Selector",options:this.selectorOptions,large:true,initialValue:"option2",onChange:e=>console.log("Large selector changed:",e.detail)})),a("div",{key:"41181b3cdff1a6576042a41b94c164aea0c8af24",class:"input-example"},a("h3",{key:"7126db87670d76fd6c7d4b9f2a4c34cf474c5eb5"},"File Upload with Type Restrictions"),a("file-upload",{key:"86fc2356ae21a9a74e12b9819c2d3a0413d39503",label:"Image Upload Only",allowedFileTypes:["jpg","jpeg","png","gif"],allowMultiple:false,browseFileMessage:"Select an Image",onChange:e=>console.log("Image upload changed:",e.detail)})),a("div",{key:"bdf0de911e1e15902e722f1dad923ecd0aafef7e",class:"input-example"},a("h3",{key:"359bcf5229b0620c5949970c323f32f63ff1c55b"},"Disabled Components"),a("div",{key:"bfc2fb3b2b9167228311066b837c146e4d786cb2",class:"disabled-examples"},a("text-field",{key:"032af6447b2942306ca4aa232f583e5e3faf4488",label:"Disabled Text Field",value:"Cannot edit this",disabled:true}),a("check-box",{key:"725fed37e0a7d52e9b734591dbf5ede47011bc31",label:"Disabled Checkbox",checked:true,disabled:true}),a("udp-selector",{key:"8ff9c64f074c7105b8b9eb682b46c55af42b787f",label:"Disabled Selector",options:this.selectorOptions,value:"option1",disabled:true}))))))}};d.style=c;export{d as inputs_example};
2	- //# sourceMappingURL=p-5e96c57a.entry.js.map