cloud-ide-element 1.1.163 → 1.1.166

package/fesm2022/cloud-ide-element.mjs

@@ -503,7 +503,7 @@ class CideInputComponent {
     /** @description minlength for control */
     minlength = 0;
     /** @description is control is required or not input type is true | false */
-    required = false;
+    required = undefined;
     /** @description Auto capatalization for the value and applicable to word or to complete sentance */
     autocapitalize = "off";
     /** @description auto complete type to help reader what is the type of value */
@@ -518,11 +518,11 @@ class CideInputComponent {
     ngModel = '';
     option = ["anksuh", "bhure"];
     /** @description min value for number type control or min date for date type control */
-    min = 0;
+    min = undefined;
     /** @description max value for number type control or max date for date type control */
-    max = 0;
+    max = undefined;
     /** @description step value for number type control */
-    step = 1;
+    step = undefined;
     /**
      * @description
      * Holds the size of the component like Small, Extra small, Large
@@ -1149,7 +1149,10 @@ class CideInputComponent {
             this.label = cide_element_data?.sype_label;
             this.labelPlacement = (cide_element_data?.sype_label_placement || 'floating');
             this.type = (cide_element_data?.sype_type || 'text');
-            this.required = (cide_element_data?.sype_required || false);
+            // Only set required from DB if not explicitly set (still undefined)
+            if (this.required === undefined) {
+                this.required = (cide_element_data?.sype_required || false);
+            }
             this.size = (cide_element_data?.sype_size || 'md');
             this.helperTextCollapse = (cide_element_data?.sype_helper_text_collapse || false);
             this.maxlength = (cide_element_data?.sype_max_length);
@@ -4461,6 +4464,7 @@ class CideEleFileInputComponent {
     files = signal(null, ...(ngDevMode ? [{ debugName: "files" }] : []));
     fileNames = signal([], ...(ngDevMode ? [{ debugName: "fileNames" }] : []));
     previewUrls = signal([], ...(ngDevMode ? [{ debugName: "previewUrls" }] : []));
+    downloadUrls = signal([], ...(ngDevMode ? [{ debugName: "downloadUrls" }] : []));
     uploadNotificationId = signal(null, ...(ngDevMode ? [{ debugName: "uploadNotificationId" }] : []));
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
     groupId = signal(null, ...(ngDevMode ? [{ debugName: "groupId" }] : [])); // Group ID for multiple file uploads
@@ -4613,6 +4617,7 @@ class CideEleFileInputComponent {
         this.files.set(null);
         this.fileNames.set([]);
         this.clearPreviews();
+        this.downloadUrls.set([]);
         this.uploadStatus.set('idle');
         this.failedFile.set(null); // Clear failed file when clearing files
         console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
@@ -4972,20 +4977,24 @@ class CideEleFileInputComponent {
                         this.fileNames.set([fileData.cyfm_name]);
                         console.log('📝 [FileInput] File name set:', fileData.cyfm_name);
                     }
-                    // If it's an image and we have base64 data, set preview
-                    if (this.showPreviewSignal() && fileData.cyfm_file_base64) {
-                        // Check if it's an image file based on file name or type
-                        const isImage = this.isImageFileFromName(fileData.cyfm_name || '') ||
-                            this.isImageFileFromType(fileData.cyfm_type || '');
-                        if (isImage) {
-                            // Add data URL prefix if not already present
-                            let base64Data = fileData.cyfm_file_base64;
-                            if (!base64Data.startsWith('data:')) {
-                                const mimeType = fileData.cyfm_type || 'image/jpeg';
-                                base64Data = `data:${mimeType};base64,${base64Data}`;
+                    // Process base64 data for download and preview
+                    if (fileData.cyfm_file_base64) {
+                        const mimeType = fileData.cyfm_type || 'application/octet-stream';
+                        let base64Data = fileData.cyfm_file_base64;
+                        if (!base64Data.startsWith('data:')) {
+                            base64Data = `data:${mimeType};base64,${base64Data}`;
+                        }
+                        // Set download URL for all files
+                        this.downloadUrls.set([base64Data]);
+                        // If it's an image, set preview
+                        if (this.showPreviewSignal()) {
+                            // Check if it's an image file based on file name or type
+                            const isImage = this.isImageFileFromName(fileData.cyfm_name || '') ||
+                                this.isImageFileFromType(fileData.cyfm_type || '');
+                            if (isImage) {
+                                this.previewUrls.set([base64Data]);
+                                console.log('🖼️ [FileInput] Preview set from base64 data');
                             }
-                            this.previewUrls.set([base64Data]);
-                            console.log('🖼️ [FileInput] Preview set from base64 data');
                         }
                     }
                 }
@@ -5047,6 +5056,19 @@ class CideEleFileInputComponent {
             return false;
         return fileType.startsWith('image/');
     }
+    downloadFile(index = 0) {
+        const urls = this.downloadUrls();
+        const names = this.fileNames();
+        if (urls.length > index) {
+            const link = document.createElement('a');
+            link.href = urls[index];
+            link.download = names[index] || 'download';
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
     removePreview(index) {
         const currentFiles = this.files();
         const currentUrls = this.previewUrls();
@@ -5464,7 +5486,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n          @if (isInErrorState() && failedFile()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n              (click)=\"retryUpload(); $event.stopPropagation()\"\n              [disabled]=\"isUploading() || disabledSignal()\"\n              title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry Upload\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n      <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n        <button type=\"button\" \n                class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                (click)=\"retryUpload()\"\n                [disabled]=\"isUploading() || disabledSignal()\">\n          <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (isInErrorState() && failedFile()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                    (click)=\"retryUpload(); $event.stopPropagation()\"\n                    [disabled]=\"isUploading() || disabledSignal()\"\n                    title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry\n            </button>\n          }\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n    <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\" \n              class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n              (click)=\"retryUpload()\"\n              [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n  <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\"\n    [attr.for]=\"'cide-file-input-' + id()\">\n    {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n  </label>\n  }\n\n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n  <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\" />\n\n    <!-- Preview Box -->\n    <div\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\" [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n\n      <!-- No Image State -->\n      @if (!hasImages()) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n        <div class=\"tw-mb-2\">\n          <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' :\n            placeholderIconSignal() }}</cide-ele-icon>\n        </div>\n        <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n          {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n        </div>\n      </div>\n      }\n\n      <!-- Image Preview State -->\n      @if (hasImages()) {\n      <div class=\"tw-relative tw-w-full tw-h-full\">\n        <img [src]=\"previewUrls()[0]\" [alt]=\"fileNames()[0] || 'Preview image'\"\n          class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n        <div\n          class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n          <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">\n            Click to change</div>\n        </div>\n        @if (!disabledSignal()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Remove image\">\n          \u00D7\n        </button>\n        }\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n    <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n      {{ fileNames()[0] }}\n    </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n    <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\"\n        class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n        (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n  <!-- Hidden file input -->\n  <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n    [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n    class=\"tw-hidden\" />\n\n  <!-- Modern Drag and Drop Zone -->\n  <div\n    class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n    [class]=\"getDragDropZoneClasses()\" (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\"\n    (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n      <!-- Icon and Text -->\n      <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n        <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" [class]=\"getIconClasses()\"\n          size=\"sm\">\n          {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n        </cide-ele-icon>\n\n        <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n          @if (isDragOver()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop\n            files here</span>\n          } @else if (hasFiles()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            @if (multipleSignal() && fileNames().length > 1) {\n            {{ fileNames().length }} files selected\n            } @else {\n            {{ fileNames()[0] }}\n            }\n          </span>\n          @if (totalFileSize() > 0) {\n          <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n          }\n          } @else {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n          </span>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n        <!-- Download Button -->\n        @if (hasFiles() && downloadUrls().length > 0) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20 hover:tw-text-blue-700\"\n          (click)=\"downloadFile(0); $event.stopPropagation()\" title=\"Download file\">\n          <cide-ele-icon size=\"xs\">download</cide-ele-icon>\n        </button>\n        }\n\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry\n        </button>\n        }\n        @if (hasFiles()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Clear files\">\n          <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n  <div class=\"tw-mt-3\">\n    <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n    <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n      @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n      <div\n        class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n        [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\">\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n          (click)=\"removePreview(i)\" title=\"Remove image\">\n          \u00D7\n        </button>\n        <img [src]=\"previewUrl\" [alt]=\"fileNames()[i] || 'Preview image'\" class=\"tw-w-full tw-h-full tw-object-cover\"\n          loading=\"lazy\">\n        <div\n          class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">\n          {{ fileNames()[i] }}</div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n  <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n    <div class=\"tw-flex tw-items-center tw-gap-2\">\n      <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n      <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n        @if (hasActiveUploads()) {\n        {{ getActiveUploadCount() }} uploading\n        } @else if (getUploadCount() > 0) {\n        {{ getUploadCount() }} completed\n        } @else if (hasEverUploaded()) {\n        View uploads\n        }\n      </span>\n    </div>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n      (click)=\"showFloatingUploaderDialog()\" title=\"View upload progress and history\">\n      <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n    </button>\n  </div>\n  }\n\n  @if (errorTextSignal()) {\n  <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n  <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n    <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n      (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n      <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n      Retry Upload\n    </button>\n  </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n  <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -5479,7 +5501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: CideEleFileInputComponent,
                             multi: true
                         }
-                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n          @if (isInErrorState() && failedFile()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n              (click)=\"retryUpload(); $event.stopPropagation()\"\n              [disabled]=\"isUploading() || disabledSignal()\"\n              title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry Upload\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n      <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n        <button type=\"button\" \n                class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                (click)=\"retryUpload()\"\n                [disabled]=\"isUploading() || disabledSignal()\">\n          <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (isInErrorState() && failedFile()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                    (click)=\"retryUpload(); $event.stopPropagation()\"\n                    [disabled]=\"isUploading() || disabledSignal()\"\n                    title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry\n            </button>\n          }\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n    <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\" \n              class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n              (click)=\"retryUpload()\"\n              [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> " }]
+                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n  <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\"\n    [attr.for]=\"'cide-file-input-' + id()\">\n    {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n  </label>\n  }\n\n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n  <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\" />\n\n    <!-- Preview Box -->\n    <div\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\" [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n\n      <!-- No Image State -->\n      @if (!hasImages()) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n        <div class=\"tw-mb-2\">\n          <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' :\n            placeholderIconSignal() }}</cide-ele-icon>\n        </div>\n        <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n          {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n        </div>\n      </div>\n      }\n\n      <!-- Image Preview State -->\n      @if (hasImages()) {\n      <div class=\"tw-relative tw-w-full tw-h-full\">\n        <img [src]=\"previewUrls()[0]\" [alt]=\"fileNames()[0] || 'Preview image'\"\n          class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n        <div\n          class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n          <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">\n            Click to change</div>\n        </div>\n        @if (!disabledSignal()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Remove image\">\n          \u00D7\n        </button>\n        }\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n    <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n      {{ fileNames()[0] }}\n    </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n    <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\"\n        class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n        (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n  <!-- Hidden file input -->\n  <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n    [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n    class=\"tw-hidden\" />\n\n  <!-- Modern Drag and Drop Zone -->\n  <div\n    class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n    [class]=\"getDragDropZoneClasses()\" (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\"\n    (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n      <!-- Icon and Text -->\n      <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n        <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" [class]=\"getIconClasses()\"\n          size=\"sm\">\n          {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n        </cide-ele-icon>\n\n        <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n          @if (isDragOver()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop\n            files here</span>\n          } @else if (hasFiles()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            @if (multipleSignal() && fileNames().length > 1) {\n            {{ fileNames().length }} files selected\n            } @else {\n            {{ fileNames()[0] }}\n            }\n          </span>\n          @if (totalFileSize() > 0) {\n          <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n          }\n          } @else {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n          </span>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n        <!-- Download Button -->\n        @if (hasFiles() && downloadUrls().length > 0) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20 hover:tw-text-blue-700\"\n          (click)=\"downloadFile(0); $event.stopPropagation()\" title=\"Download file\">\n          <cide-ele-icon size=\"xs\">download</cide-ele-icon>\n        </button>\n        }\n\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry\n        </button>\n        }\n        @if (hasFiles()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Clear files\">\n          <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n  <div class=\"tw-mt-3\">\n    <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n    <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n      @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n      <div\n        class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n        [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\">\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n          (click)=\"removePreview(i)\" title=\"Remove image\">\n          \u00D7\n        </button>\n        <img [src]=\"previewUrl\" [alt]=\"fileNames()[i] || 'Preview image'\" class=\"tw-w-full tw-h-full tw-object-cover\"\n          loading=\"lazy\">\n        <div\n          class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">\n          {{ fileNames()[i] }}</div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n  <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n    <div class=\"tw-flex tw-items-center tw-gap-2\">\n      <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n      <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n        @if (hasActiveUploads()) {\n        {{ getActiveUploadCount() }} uploading\n        } @else if (getUploadCount() > 0) {\n        {{ getUploadCount() }} completed\n        } @else if (hasEverUploaded()) {\n        View uploads\n        }\n      </span>\n    </div>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n      (click)=\"showFloatingUploaderDialog()\" title=\"View upload progress and history\">\n      <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n    </button>\n  </div>\n  }\n\n  @if (errorTextSignal()) {\n  <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n  <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n    <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n      (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n      <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n      Retry Upload\n    </button>\n  </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n  <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], accept: [{