fix(icons): update icon usage across components

- Replace .iconName property with .icon for dees-icon component
- Fix incorrect lucide icon names to use proper prefix and kebab-case
- Replace deprecated .iconFA property with .icon
- Add loading animation to dees-input-fileupload button
- Maintain compatibility with external interfaces expecting iconName

ts_web/elements/dees-input-fileupload.ts

@@ -37,6 +37,9 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   @property()
   public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
 
+  @property({ type: Boolean })
+  private isLoading: boolean = false;
+
   @property({
     type: String,
   })
@@ -317,6 +320,53 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         margin-top: 6px;
         line-height: 1.5;
       }
+
+      /* Loading state styles */
+      .uploadButton.loading {
+        pointer-events: none;
+        opacity: 0.8;
+      }
+
+      .uploadButton .button-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+
+      .loading-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        border-top-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        50% {
+          transform: scale(1.02);
+          opacity: 0.9;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .uploadButton.loading {
+        animation: pulse 1s ease-in-out infinite;
+      }
     `,
   ];
 
@@ -353,7 +403,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
                       ${isImage && this.canShowPreview(fileArg) ? html`
                         <img class="image-preview" src="${URL.createObjectURL(fileArg)}" alt="${fileArg.name}">
                       ` : html`
-                        <dees-icon .iconName=${this.getFileIcon(fileArg)}></dees-icon>
+                        <dees-icon .icon=${this.getFileIcon(fileArg)}></dees-icon>
                       `}
                     </div>
                     <div class="info">
@@ -366,7 +416,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
                         @click=${() => this.removeFile(fileArg)}
                         title="Remove file"
                       >
-                        <dees-icon .iconName=${'lucide:x'}></dees-icon>
+                        <dees-icon .icon=${'lucide:x'}></dees-icon>
                       </button>
                     </div>
                   </div>
@@ -375,13 +425,20 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
             </div>
           ` : html`
             <div class="drop-hint">
-              <dees-icon .iconName=${'lucide:cloud-upload'}></dees-icon>
+              <dees-icon .icon=${'lucide:cloud-upload'}></dees-icon>
               <div>Drag files here or click to browse</div>
             </div>
           `}
-          <div class="uploadButton" @click=${this.openFileSelector}>
-            <dees-icon .iconName=${'lucide:upload'}></dees-icon>
-            ${this.buttonText}
+          <div class="uploadButton ${this.isLoading ? 'loading' : ''}" @click=${this.openFileSelector}>
+            <div class="button-content">
+              ${this.isLoading ? html`
+                <div class="loading-spinner"></div>
+                <span>Opening...</span>
+              ` : html`
+                <dees-icon .icon=${'lucide:upload'}></dees-icon>
+                ${this.buttonText}
+              `}
+            </div>
           </div>
         </div>
         ${this.description ? html`
@@ -482,8 +539,25 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   }
 
   public async openFileSelector() {
-    if (this.disabled) return;
+    if (this.disabled || this.isLoading) return;
+    
+    // Set loading state
+    this.isLoading = true;
+    
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
+    
+    // Set up a focus handler to detect when the dialog is closed without selection
+    const handleFocus = () => {
+      setTimeout(() => {
+        // Check if no file was selected
+        if (!inputFile.files || inputFile.files.length === 0) {
+          this.isLoading = false;
+        }
+        window.removeEventListener('focus', handleFocus);
+      }, 300);
+    };
+    
+    window.addEventListener('focus', handleFocus);
     inputFile.click();
   }
 
@@ -516,6 +590,10 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
     inputFile.addEventListener('change', async (event: Event) => {
       const target = event.target as HTMLInputElement;
       const newFiles = Array.from(target.files);
+      
+      // Always reset loading state when file dialog interaction completes
+      this.isLoading = false;
+      
       await this.addFiles(newFiles);
       // Reset the input value to allow selecting the same file again if needed
       target.value = '';