cloud-ide-element 1.1.94 → 1.1.96

package/fesm2022/cloud-ide-element.mjs

@@ -1242,8 +1242,9 @@ class CideInputComponent {
     createDatePickerUsingPortal() {
         // Reset to calendar view when opening
         this.showMonthYearSelector = false;
-        // Get input element
-        const inputElement = document.getElementById(this.id);
+        // Get input element - use idRandom as fallback if id is not provided
+        const elementId = this.id || this.idRandom;
+        const inputElement = document.getElementById(elementId);
         if (!inputElement)
             return;
         // Create template portal configuration
@@ -3526,7 +3527,7 @@ class NotificationService {
         return this.show({
             message,
             type: 'success',
-            icon: 'check_circle',
+            icon: 'done',
             duration: 3000,
             ...options
         });
@@ -3600,7 +3601,7 @@ class NotificationService {
         return this.show({
             message: isComplete ? `${taskName} completed successfully` : `${taskName} in progress...`,
             type: isComplete ? 'success' : 'info',
-            icon: isComplete ? 'check_circle' : 'sync',
+            icon: isComplete ? 'done' : 'sync',
             duration: isComplete ? 3000 : 0, // Don't auto-dismiss for in-progress tasks
             ...options
         });
@@ -3708,7 +3709,7 @@ class NotificationService {
     }
     getDefaultIcon(type) {
         const iconMap = {
-            success: 'check_circle',
+            success: 'done',
             error: 'error',
             warning: 'warning',
             info: 'info'
@@ -4319,11 +4320,13 @@ class CideEleFileInputComponent {
     groupId = signal(null, ...(ngDevMode ? [{ debugName: "groupId" }] : [])); // Group ID for multiple file uploads
     isMultipleUploadMode = signal(false, ...(ngDevMode ? [{ debugName: "isMultipleUploadMode" }] : [])); // Flag to track if we're in multiple upload mode
     hasEverUploaded = signal(false, ...(ngDevMode ? [{ debugName: "hasEverUploaded" }] : [])); // Track if this component has ever uploaded files
+    failedFile = signal(null, ...(ngDevMode ? [{ debugName: "failedFile" }] : [])); // Store failed file for retry
     // Computed signals for better relationships
     hasFiles = computed(() => this.files() !== null && this.files().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
     canUpload = computed(() => this.hasFiles() && !this.isUploading() && !this.disabledSignal(), ...(ngDevMode ? [{ debugName: "canUpload" }] : []));
     isInErrorState = computed(() => this.uploadStatus() === 'error', ...(ngDevMode ? [{ debugName: "isInErrorState" }] : []));
     isInSuccessState = computed(() => this.uploadStatus() === 'success', ...(ngDevMode ? [{ debugName: "isInSuccessState" }] : []));
+    canRetry = computed(() => this.isInErrorState() && this.failedFile() !== null && !this.isUploading() && !this.disabledSignal(), ...(ngDevMode ? [{ debugName: "canRetry" }] : []));
     // Optimized computed values - only calculate when needed
     totalFileSize = computed(() => {
         const files = this.files();
@@ -4465,10 +4468,27 @@ class CideEleFileInputComponent {
         this.fileNames.set([]);
         this.clearPreviews();
         this.uploadStatus.set('idle');
+        this.failedFile.set(null); // Clear failed file when clearing files
         console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
         this.onChange(null);
         this.fileChange.emit(null);
     }
+    /**
+     * Retry uploading the failed file
+     */
+    retryUpload() {
+        const failedFile = this.failedFile();
+        if (!failedFile) {
+            console.warn('⚠️ [FileInput] No failed file to retry');
+            return;
+        }
+        console.log('🔄 [FileInput] Retrying upload for file:', failedFile.name);
+        // Clear the failed file reference (will be set again if retry fails)
+        this.failedFile.set(null);
+        // Reset upload status and retry
+        this.uploadStatus.set('idle');
+        this.uploadFile(failedFile);
+    }
     uploadFile(file) {
         console.log('🚨 [FileInput] uploadFile called for:', file.name, '- SINGLE UPLOAD INITIATED');
         // Angular 20: Use PendingTasks for better loading state management
@@ -4547,6 +4567,8 @@ class CideEleFileInputComponent {
                 const uploadedId = response?.data?.core_file_manager?.[0]?.cyfm_id;
                 if (uploadedId) {
                     console.log('✅ [FileInput] File uploaded successfully with ID:', uploadedId);
+                    // Clear failed file on successful upload
+                    this.failedFile.set(null);
                     // Set the uploaded ID as the form control value
                     this.onChange(uploadedId);
                     console.log('📝 [FileInput] Form control value set to uploaded ID:', uploadedId);
@@ -4571,6 +4593,9 @@ class CideEleFileInputComponent {
                 // Angular 20: Complete the pending task even on error
                 // this.pendingTasks.complete(uploadTask); // TODO: Fix PendingTasks API usage
                 // console.log('❌ [FileInput] Pending task completed for failed upload');
+                // Store the failed file for retry
+                this.failedFile.set(file);
+                console.log('💾 [FileInput] Failed file stored for retry:', file.name);
                 // Set upload status to 'error' and remove upload validation error
                 this.uploadStatus.set('error');
                 console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
@@ -5293,7 +5318,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  @if (labelSignal() && !isPreviewBoxMode()) {\r\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()\">\r\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\r\n    </label>\r\n  }\r\n  \r\n  <!-- Preview Box Mode -->\r\n  @if (isPreviewBoxMode()) {\r\n    <div class=\"tw-relative\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\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\"\r\n      [class]=\"getPreviewBoxClasses()\"\r\n      [style.width]=\"previewWidthSignal()\"\r\n      [style.height]=\"previewHeightSignal()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\r\n      \r\n      <!-- No Image State -->\r\n      @if (!hasImages()) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\r\n          <div class=\"tw-mb-2\">\r\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\r\n          </div>\r\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\r\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\r\n          </div>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Image Preview State -->\r\n      @if (hasImages()) {\r\n        <div class=\"tw-relative tw-w-full tw-h-full\">\r\n          <img \r\n            [src]=\"previewUrls()[0]\" \r\n            [alt]=\"fileNames()[0] || 'Preview image'\"\r\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\r\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\">\r\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>\r\n          </div>\r\n          @if (!disabledSignal()) {\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"clearFiles(); $event.stopPropagation()\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\r\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\r\n        {{ fileNames()[0] }}\r\n      </div>\r\n    }\r\n    </div>\r\n  }\r\n\r\n  <!-- Standard Mode -->\r\n  @if (!isPreviewBoxMode()) {\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Modern Drag and Drop Zone -->\r\n    <div \r\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\"\r\n      [class]=\"getDragDropZoneClasses()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\">\r\n      \r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\r\n        <!-- Icon and Text -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \r\n                         [class]=\"getIconClasses()\" \r\n                         size=\"sm\">\r\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\r\n          </cide-ele-icon>\r\n          \r\n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\r\n            @if (isDragOver()) {\r\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>\r\n            } @else if (hasFiles()) {\r\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\">\r\n                @if (multipleSignal() && fileNames().length > 1) {\r\n                  {{ fileNames().length }} files selected\r\n                } @else {\r\n                  {{ fileNames()[0] }}\r\n                }\r\n              </span>\r\n              @if (totalFileSize() > 0) {\r\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\r\n              }\r\n            } @else {\r\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\">\r\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\r\n          @if (hasFiles()) {\r\n            <button type=\"button\" \r\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\" \r\n                    (click)=\"clearFiles(); $event.stopPropagation()\"\r\n                    title=\"Clear files\">\r\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\r\n    <div class=\"tw-mt-3\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\r\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\r\n          <div \r\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\"\r\n            [style.width]=\"previewWidthSignal()\"\r\n            [style.height]=\"previewHeightSignal()\">\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"removePreview(i)\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n            <img \r\n              [src]=\"previewUrl\" \r\n              [alt]=\"fileNames()[i] || 'Preview image'\"\r\n              class=\"tw-w-full tw-h-full tw-object-cover\"\r\n              loading=\"lazy\">\r\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>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\r\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\r\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\r\n          @if (hasActiveUploads()) {\r\n            {{ getActiveUploadCount() }} uploading\r\n          } @else if (getUploadCount() > 0) {\r\n            {{ getUploadCount() }} completed\r\n          } @else if (hasEverUploaded()) {\r\n            View uploads\r\n          }\r\n        </span>\r\n      </div>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showFloatingUploaderDialog()\"\r\n        title=\"View upload progress and history\">\r\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  \r\n  @if (errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\r\n  }\r\n  @if (helperTextSignal() && !errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\r\n  }\r\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\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  @if (labelSignal() && !isPreviewBoxMode()) {\r\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()\">\r\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\r\n    </label>\r\n  }\r\n  \r\n  <!-- Preview Box Mode -->\r\n  @if (isPreviewBoxMode()) {\r\n    <div class=\"tw-relative\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\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\"\r\n      [class]=\"getPreviewBoxClasses()\"\r\n      [style.width]=\"previewWidthSignal()\"\r\n      [style.height]=\"previewHeightSignal()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\r\n      \r\n      <!-- No Image State -->\r\n      @if (!hasImages()) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\r\n          <div class=\"tw-mb-2\">\r\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\r\n          </div>\r\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\r\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\r\n          </div>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Image Preview State -->\r\n      @if (hasImages()) {\r\n        <div class=\"tw-relative tw-w-full tw-h-full\">\r\n          <img \r\n            [src]=\"previewUrls()[0]\" \r\n            [alt]=\"fileNames()[0] || 'Preview image'\"\r\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\r\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\">\r\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>\r\n          </div>\r\n          @if (!disabledSignal()) {\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"clearFiles(); $event.stopPropagation()\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n          }\r\n          @if (isInErrorState() && failedFile()) {\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"retryUpload(); $event.stopPropagation()\"\r\n              [disabled]=\"isUploading() || disabledSignal()\"\r\n              title=\"Retry upload\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\r\n              Retry Upload\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\r\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\r\n        {{ fileNames()[0] }}\r\n      </div>\r\n    }\r\n    <!-- Error message and retry button for preview box mode -->\r\n    @if (isInErrorState() && failedFile() && !hasImages()) {\r\n      <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n        <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\r\n        <button type=\"button\" \r\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\" \r\n                (click)=\"retryUpload()\"\r\n                [disabled]=\"isUploading() || disabledSignal()\">\r\n          <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          Retry Upload\r\n        </button>\r\n      </div>\r\n    }\r\n    </div>\r\n  }\r\n\r\n  <!-- Standard Mode -->\r\n  @if (!isPreviewBoxMode()) {\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Modern Drag and Drop Zone -->\r\n    <div \r\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\"\r\n      [class]=\"getDragDropZoneClasses()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\">\r\n      \r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\r\n        <!-- Icon and Text -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \r\n                         [class]=\"getIconClasses()\" \r\n                         size=\"sm\">\r\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\r\n          </cide-ele-icon>\r\n          \r\n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\r\n            @if (isDragOver()) {\r\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>\r\n            } @else if (hasFiles()) {\r\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\">\r\n                @if (multipleSignal() && fileNames().length > 1) {\r\n                  {{ fileNames().length }} files selected\r\n                } @else {\r\n                  {{ fileNames()[0] }}\r\n                }\r\n              </span>\r\n              @if (totalFileSize() > 0) {\r\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\r\n              }\r\n            } @else {\r\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\">\r\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\r\n          @if (isInErrorState() && failedFile()) {\r\n            <button type=\"button\" \r\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\" \r\n                    (click)=\"retryUpload(); $event.stopPropagation()\"\r\n                    [disabled]=\"isUploading() || disabledSignal()\"\r\n                    title=\"Retry upload\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\r\n              Retry\r\n            </button>\r\n          }\r\n          @if (hasFiles()) {\r\n            <button type=\"button\" \r\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\" \r\n                    (click)=\"clearFiles(); $event.stopPropagation()\"\r\n                    title=\"Clear files\">\r\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\r\n    <div class=\"tw-mt-3\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\r\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\r\n          <div \r\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\"\r\n            [style.width]=\"previewWidthSignal()\"\r\n            [style.height]=\"previewHeightSignal()\">\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"removePreview(i)\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n            <img \r\n              [src]=\"previewUrl\" \r\n              [alt]=\"fileNames()[i] || 'Preview image'\"\r\n              class=\"tw-w-full tw-h-full tw-object-cover\"\r\n              loading=\"lazy\">\r\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>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\r\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\r\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\r\n          @if (hasActiveUploads()) {\r\n            {{ getActiveUploadCount() }} uploading\r\n          } @else if (getUploadCount() > 0) {\r\n            {{ getUploadCount() }} completed\r\n          } @else if (hasEverUploaded()) {\r\n            View uploads\r\n          }\r\n        </span>\r\n      </div>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showFloatingUploaderDialog()\"\r\n        title=\"View upload progress and history\">\r\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  \r\n  @if (errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\r\n  }\r\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\r\n    <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\r\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\r\n      <button type=\"button\" \r\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\" \r\n              (click)=\"retryUpload()\"\r\n              [disabled]=\"isUploading() || disabledSignal()\">\r\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n        Retry Upload\r\n      </button>\r\n    </div>\r\n  }\r\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\r\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\r\n  }\r\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.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -5308,7 +5333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: CideEleFileInputComponent,
                             multi: true
                         }
-                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  @if (labelSignal() && !isPreviewBoxMode()) {\r\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()\">\r\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\r\n    </label>\r\n  }\r\n  \r\n  <!-- Preview Box Mode -->\r\n  @if (isPreviewBoxMode()) {\r\n    <div class=\"tw-relative\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\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\"\r\n      [class]=\"getPreviewBoxClasses()\"\r\n      [style.width]=\"previewWidthSignal()\"\r\n      [style.height]=\"previewHeightSignal()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\r\n      \r\n      <!-- No Image State -->\r\n      @if (!hasImages()) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\r\n          <div class=\"tw-mb-2\">\r\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\r\n          </div>\r\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\r\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\r\n          </div>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Image Preview State -->\r\n      @if (hasImages()) {\r\n        <div class=\"tw-relative tw-w-full tw-h-full\">\r\n          <img \r\n            [src]=\"previewUrls()[0]\" \r\n            [alt]=\"fileNames()[0] || 'Preview image'\"\r\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\r\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\">\r\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>\r\n          </div>\r\n          @if (!disabledSignal()) {\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"clearFiles(); $event.stopPropagation()\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\r\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\r\n        {{ fileNames()[0] }}\r\n      </div>\r\n    }\r\n    </div>\r\n  }\r\n\r\n  <!-- Standard Mode -->\r\n  @if (!isPreviewBoxMode()) {\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Modern Drag and Drop Zone -->\r\n    <div \r\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\"\r\n      [class]=\"getDragDropZoneClasses()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\">\r\n      \r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\r\n        <!-- Icon and Text -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \r\n                         [class]=\"getIconClasses()\" \r\n                         size=\"sm\">\r\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\r\n          </cide-ele-icon>\r\n          \r\n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\r\n            @if (isDragOver()) {\r\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>\r\n            } @else if (hasFiles()) {\r\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\">\r\n                @if (multipleSignal() && fileNames().length > 1) {\r\n                  {{ fileNames().length }} files selected\r\n                } @else {\r\n                  {{ fileNames()[0] }}\r\n                }\r\n              </span>\r\n              @if (totalFileSize() > 0) {\r\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\r\n              }\r\n            } @else {\r\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\">\r\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\r\n          @if (hasFiles()) {\r\n            <button type=\"button\" \r\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\" \r\n                    (click)=\"clearFiles(); $event.stopPropagation()\"\r\n                    title=\"Clear files\">\r\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\r\n    <div class=\"tw-mt-3\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\r\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\r\n          <div \r\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\"\r\n            [style.width]=\"previewWidthSignal()\"\r\n            [style.height]=\"previewHeightSignal()\">\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"removePreview(i)\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n            <img \r\n              [src]=\"previewUrl\" \r\n              [alt]=\"fileNames()[i] || 'Preview image'\"\r\n              class=\"tw-w-full tw-h-full tw-object-cover\"\r\n              loading=\"lazy\">\r\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>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\r\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\r\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\r\n          @if (hasActiveUploads()) {\r\n            {{ getActiveUploadCount() }} uploading\r\n          } @else if (getUploadCount() > 0) {\r\n            {{ getUploadCount() }} completed\r\n          } @else if (hasEverUploaded()) {\r\n            View uploads\r\n          }\r\n        </span>\r\n      </div>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showFloatingUploaderDialog()\"\r\n        title=\"View upload progress and history\">\r\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  \r\n  @if (errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\r\n  }\r\n  @if (helperTextSignal() && !errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\r\n  }\r\n</div> " }]
+                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  @if (labelSignal() && !isPreviewBoxMode()) {\r\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()\">\r\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\r\n    </label>\r\n  }\r\n  \r\n  <!-- Preview Box Mode -->\r\n  @if (isPreviewBoxMode()) {\r\n    <div class=\"tw-relative\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\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\"\r\n      [class]=\"getPreviewBoxClasses()\"\r\n      [style.width]=\"previewWidthSignal()\"\r\n      [style.height]=\"previewHeightSignal()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\r\n      \r\n      <!-- No Image State -->\r\n      @if (!hasImages()) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\r\n          <div class=\"tw-mb-2\">\r\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\r\n          </div>\r\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\r\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\r\n          </div>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Image Preview State -->\r\n      @if (hasImages()) {\r\n        <div class=\"tw-relative tw-w-full tw-h-full\">\r\n          <img \r\n            [src]=\"previewUrls()[0]\" \r\n            [alt]=\"fileNames()[0] || 'Preview image'\"\r\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\r\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\">\r\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>\r\n          </div>\r\n          @if (!disabledSignal()) {\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"clearFiles(); $event.stopPropagation()\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n          }\r\n          @if (isInErrorState() && failedFile()) {\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"retryUpload(); $event.stopPropagation()\"\r\n              [disabled]=\"isUploading() || disabledSignal()\"\r\n              title=\"Retry upload\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\r\n              Retry Upload\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\r\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\r\n        {{ fileNames()[0] }}\r\n      </div>\r\n    }\r\n    <!-- Error message and retry button for preview box mode -->\r\n    @if (isInErrorState() && failedFile() && !hasImages()) {\r\n      <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n        <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\r\n        <button type=\"button\" \r\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\" \r\n                (click)=\"retryUpload()\"\r\n                [disabled]=\"isUploading() || disabledSignal()\">\r\n          <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          Retry Upload\r\n        </button>\r\n      </div>\r\n    }\r\n    </div>\r\n  }\r\n\r\n  <!-- Standard Mode -->\r\n  @if (!isPreviewBoxMode()) {\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Modern Drag and Drop Zone -->\r\n    <div \r\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\"\r\n      [class]=\"getDragDropZoneClasses()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\">\r\n      \r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\r\n        <!-- Icon and Text -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \r\n                         [class]=\"getIconClasses()\" \r\n                         size=\"sm\">\r\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\r\n          </cide-ele-icon>\r\n          \r\n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\r\n            @if (isDragOver()) {\r\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>\r\n            } @else if (hasFiles()) {\r\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\">\r\n                @if (multipleSignal() && fileNames().length > 1) {\r\n                  {{ fileNames().length }} files selected\r\n                } @else {\r\n                  {{ fileNames()[0] }}\r\n                }\r\n              </span>\r\n              @if (totalFileSize() > 0) {\r\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\r\n              }\r\n            } @else {\r\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\">\r\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\r\n          @if (isInErrorState() && failedFile()) {\r\n            <button type=\"button\" \r\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\" \r\n                    (click)=\"retryUpload(); $event.stopPropagation()\"\r\n                    [disabled]=\"isUploading() || disabledSignal()\"\r\n                    title=\"Retry upload\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\r\n              Retry\r\n            </button>\r\n          }\r\n          @if (hasFiles()) {\r\n            <button type=\"button\" \r\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\" \r\n                    (click)=\"clearFiles(); $event.stopPropagation()\"\r\n                    title=\"Clear files\">\r\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\r\n    <div class=\"tw-mt-3\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\r\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\r\n          <div \r\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\"\r\n            [style.width]=\"previewWidthSignal()\"\r\n            [style.height]=\"previewHeightSignal()\">\r\n            <button \r\n              type=\"button\" \r\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\"\r\n              (click)=\"removePreview(i)\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n            <img \r\n              [src]=\"previewUrl\" \r\n              [alt]=\"fileNames()[i] || 'Preview image'\"\r\n              class=\"tw-w-full tw-h-full tw-object-cover\"\r\n              loading=\"lazy\">\r\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>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\r\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\r\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\r\n          @if (hasActiveUploads()) {\r\n            {{ getActiveUploadCount() }} uploading\r\n          } @else if (getUploadCount() > 0) {\r\n            {{ getUploadCount() }} completed\r\n          } @else if (hasEverUploaded()) {\r\n            View uploads\r\n          }\r\n        </span>\r\n      </div>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showFloatingUploaderDialog()\"\r\n        title=\"View upload progress and history\">\r\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  \r\n  @if (errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\r\n  }\r\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\r\n    <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\r\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\r\n      <button type=\"button\" \r\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\" \r\n              (click)=\"retryUpload()\"\r\n              [disabled]=\"isUploading() || disabledSignal()\">\r\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n        Retry Upload\r\n      </button>\r\n    </div>\r\n  }\r\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\r\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\r\n  }\r\n</div> " }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], accept: [{
@@ -7380,1230 +7405,1287 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }] } });
 
 /**
- * Notification API Service
- * HTTP client for notification API endpoints
+ * CIDE Element Library - Theme Service
+ * Independent theme management for the element library
+ * Can be used standalone without parent application theme dependencies
  */
-class NotificationApiService {
-    http = inject(HttpClient);
-    apiUrl = cidePath.join([
-        hostManagerRoutesUrl.cideSuiteHost,
-        notificationRoutesUrl.module
-    ]);
+class CideThemeService {
+    platformId = inject(PLATFORM_ID);
+    isBrowser;
+    currentTheme$ = new BehaviorSubject('light');
+    effectiveTheme$ = new BehaviorSubject('light');
+    config = {
+        theme: 'light',
+        targetElement: null,
+        persistPreference: true,
+        storageKey: 'cide-theme',
+        useDataAttribute: true,
+        useClassName: true
+    };
+    constructor() {
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        if (this.isBrowser) {
+            this.config.targetElement = document.documentElement;
+        }
+    }
     /**
-     * Get user notifications
+     * Initialize the theme service with configuration
+     * This should be called once in the application, typically in main.ts or app config
      */
-    getNotifications(params) {
-        let httpParams = new HttpParams();
-        if (params) {
-            Object.keys(params).forEach(key => {
-                const value = params[key];
-                if (value !== undefined && value !== null) {
-                    httpParams = httpParams.set(key, value.toString());
-                }
-            });
+    initialize(config) {
+        if (!this.isBrowser) {
+            return;
+        }
+        // Merge configuration
+        if (config) {
+            this.config = {
+                ...this.config,
+                ...config,
+                targetElement: config.targetElement || document.documentElement
+            };
+        }
+        // Load saved theme preference
+        const savedTheme = this.loadThemePreference();
+        const initialTheme = savedTheme || this.config.theme;
+        // Apply initial theme
+        this.setTheme(initialTheme);
+        // Listen for system theme changes if theme is set to 'auto'
+        if (initialTheme === 'auto') {
+            this.listenToSystemTheme();
         }
-        // Debug: Log the URL being used
-        console.log('[NotificationApi] Request URL:', this.apiUrl);
-        console.log('[NotificationApi] Full URL with params:', `${this.apiUrl}?${httpParams.toString()}`);
-        return this.http.get(this.apiUrl, { params: httpParams });
     }
     /**
-     * Get notification by ID
+     * Set the current theme
      */
-    getNotificationById(id) {
-        return this.http.get(`${this.apiUrl}/${id}`);
+    setTheme(theme) {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.currentTheme$.next(theme);
+        // Save preference if persistence is enabled
+        if (this.config.persistPreference) {
+            this.saveThemePreference(theme);
+        }
+        // Determine effective theme
+        let effectiveTheme;
+        if (theme === 'auto') {
+            effectiveTheme = this.getSystemTheme();
+            this.listenToSystemTheme();
+        }
+        else {
+            effectiveTheme = theme;
+        }
+        this.effectiveTheme$.next(effectiveTheme);
+        this.applyTheme(effectiveTheme);
     }
     /**
-     * Get unread count
+     * Get the current theme preference
      */
-    getUnreadCount() {
-        return this.http.get(`${this.apiUrl}/${notificationRoutesUrl.unreadCount}`);
+    getCurrentTheme() {
+        return this.currentTheme$.value;
     }
     /**
-     * Create notification
+     * Get the effective theme (actual theme being displayed)
      */
-    createNotification(payload) {
-        return this.http.post(this.apiUrl, payload);
+    getEffectiveTheme() {
+        return this.effectiveTheme$.value;
     }
     /**
-     * Mark notification as read
+     * Observable for current theme changes
      */
-    markAsRead(id) {
-        const url = `${this.apiUrl}/${id}/read`;
-        console.log('[NotificationApi] Mark as read URL:', url);
-        return this.http.put(url, {});
+    getCurrentTheme$() {
+        return this.currentTheme$.asObservable();
     }
     /**
-     * Mark all notifications as read
+     * Observable for effective theme changes
      */
-    markAllAsRead() {
-        const url = `${this.apiUrl}/read-all`;
-        console.log('[NotificationApi] Mark all as read URL:', url);
-        return this.http.put(url, {});
+    getEffectiveTheme$() {
+        return this.effectiveTheme$.asObservable();
     }
     /**
-     * Archive notification
+     * Toggle between light and dark themes
      */
-    archiveNotification(id) {
-        return this.http.put(`${this.apiUrl}/${id}/archive`, {});
+    toggleTheme() {
+        const currentEffective = this.effectiveTheme$.value;
+        const newTheme = currentEffective === 'light' ? 'dark' : 'light';
+        this.setTheme(newTheme);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * WebSocket Notification Service
- * Socket.IO client for real-time notifications
- */
-class WebSocketNotificationService {
-    socket = null;
-    notificationSubject = new Subject();
-    connectionStatusSubject = new BehaviorSubject({
-        connected: false
-    });
-    // Signals for reactive state
-    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
-    unreadNotifications = signal([], ...(ngDevMode ? [{ debugName: "unreadNotifications" }] : []));
-    // Public observables
-    notification$ = this.notificationSubject.asObservable();
-    connectionStatus$ = this.connectionStatusSubject.asObservable();
-    // Computed signals
-    allNotifications = computed(() => this.notifications(), ...(ngDevMode ? [{ debugName: "allNotifications" }] : []));
-    unreadNotificationsCount = computed(() => this.unreadNotifications().length, ...(ngDevMode ? [{ debugName: "unreadNotificationsCount" }] : []));
-    isConnected = computed(() => this.connectionStatusSubject.value.connected, ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
     /**
-     * Connect to Socket.IO server
+     * Check if dark mode is currently active
      */
-    connect(token, userId) {
-        if (this.socket?.connected) {
-            console.log('Socket already connected');
-            return;
-        }
-        // Resolve actual API URL from placeholder
-        // The placeholder is replaced by host interceptor for HTTP, but WebSocket needs direct resolution
-        // Based on host-manager.json: "__cloud_ide_suite_layout__" -> "http://localhost:3001"
-        const placeholder = hostManagerRoutesUrl.cideSuiteHost;
-        let apiUrl = 'http://localhost:3001'; // Default from host-manager.json
-        // Try to resolve from host-manager.json via fetch (same as HTTP interceptor)
-        if (typeof window !== 'undefined') {
-            // Try to fetch host-manager.json to get the actual URL
-            fetch('/routes/host-manager.json')
-                .then(res => res.json())
-                .then((hostManagerRoutes) => {
-                const hostManagerRoutesEntry = hostManagerRoutes?.hosts?.find((hostRoute) => placeholder?.includes(hostRoute?.url));
-                if (hostManagerRoutesEntry?.replace) {
-                    apiUrl = hostManagerRoutesEntry.replace;
-                }
-                // Remove /api suffix if present (Socket.IO connects to base server)
-                apiUrl = apiUrl.replace(/\/api\/?$/, '');
-                this.connectWithUrl(apiUrl, token, userId);
-            })
-                .catch(() => {
-                // Fallback if fetch fails - use default or try localStorage
-                this.resolveUrlFallback(token, userId);
-            });
-        }
-        else {
-            // Server-side or fallback
-            this.resolveUrlFallback(token, userId);
-        }
+    isDarkMode() {
+        return this.effectiveTheme$.value === 'dark';
     }
     /**
-     * Fallback URL resolution
+     * Apply theme to target element
      */
-    resolveUrlFallback(token, userId) {
-        let apiUrl = 'http://localhost:3001'; // Default from host-manager.json
-        // Try to get from current window location
-        if (typeof window !== 'undefined') {
-            const currentOrigin = window.location.origin;
-            // Check if we're on localhost (development)
-            if (currentOrigin.includes('localhost') || currentOrigin.includes('127.0.0.1')) {
-                // Use localhost:3001 for development (from host-manager.json)
-                apiUrl = 'http://localhost:3001';
+    applyTheme(theme) {
+        if (!this.isBrowser || !this.config.targetElement) {
+            return;
+        }
+        const element = this.config.targetElement;
+        // Apply data-theme attribute
+        if (this.config.useDataAttribute) {
+            element.setAttribute('data-theme', theme);
+        }
+        // Apply class name
+        if (this.config.useClassName) {
+            if (theme === 'dark') {
+                element.classList.add('dark-mode');
+                element.classList.remove('light-mode');
             }
             else {
-                // In production, use the same origin (assuming API is on same domain)
-                apiUrl = currentOrigin || 'http://localhost:3001';
+                element.classList.add('light-mode');
+                element.classList.remove('dark-mode');
             }
-            // Try to get from localStorage (if set by app initialization)
-            const storedApiUrl = localStorage.getItem('api_base_url');
-            if (storedApiUrl) {
-                apiUrl = storedApiUrl.replace(/\/api\/?$/, '');
+        }
+        // Also apply to body for better compatibility
+        if (element === document.documentElement && document.body) {
+            if (this.config.useDataAttribute) {
+                document.body.setAttribute('data-theme', theme);
+            }
+            if (this.config.useClassName) {
+                if (theme === 'dark') {
+                    document.body.classList.add('dark-mode');
+                    document.body.classList.remove('light-mode');
+                }
+                else {
+                    document.body.classList.add('light-mode');
+                    document.body.classList.remove('dark-mode');
+                }
             }
         }
-        this.connectWithUrl(apiUrl, token, userId);
     }
     /**
-     * Connect with resolved URL
+     * Get system theme preference
      */
-    connectWithUrl(apiUrl, token, userId) {
-        console.log('[WebSocket] Connecting to:', apiUrl);
-        this.socket = io(apiUrl, {
-            path: '/notifications-socket',
-            transports: ['websocket', 'polling'],
-            auth: {
-                token: token
-            },
-            reconnection: true,
-            reconnectionDelay: 1000,
-            reconnectionAttempts: 5,
-            reconnectionDelayMax: 5000
-        });
-        this.setupEventHandlers(userId);
+    getSystemTheme() {
+        if (!this.isBrowser) {
+            return 'light';
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
     }
     /**
-     * Setup Socket.IO event handlers
+     * Listen to system theme changes
      */
-    setupEventHandlers(userId) {
-        if (!this.socket)
+    listenToSystemTheme() {
+        if (!this.isBrowser || !window.matchMedia) {
             return;
-        // Connection established
-        this.socket.on('connect', () => {
-            console.log('Socket.IO connected:', this.socket?.id);
-            this.connectionStatusSubject.next({
-                connected: true,
-                socketId: this.socket?.id,
-                userId: userId,
-                timestamp: new Date()
-            });
-        });
-        // Connection confirmation
-        this.socket.on('connected', (data) => {
-            console.log('Notification service connected:', data);
-            this.connectionStatusSubject.next({
-                connected: true,
-                socketId: data.socketId,
-                userId: data.userId,
-                timestamp: data.timestamp
-            });
-        });
-        // Receive notification
-        this.socket.on('notification', (notification) => {
-            console.log('Received notification:', notification);
-            // Add to notifications list
-            this.notifications.update(notifications => [notification, ...notifications]);
-            // Add to unread list
-            this.unreadNotifications.update(unread => [notification, ...unread]);
-            // Emit to subscribers
-            this.notificationSubject.next(notification);
-            // Acknowledge receipt
-            this.acknowledgeNotification(notification.id);
-        });
-        // Disconnect
-        this.socket.on('disconnect', (reason) => {
-            console.log('Socket.IO disconnected:', reason);
-            this.connectionStatusSubject.next({
-                connected: false,
-                timestamp: new Date()
-            });
-        });
-        // Connection error
-        this.socket.on('connect_error', (error) => {
-            console.error('Socket.IO connection error:', error);
-            this.connectionStatusSubject.next({
-                connected: false,
-                timestamp: new Date()
-            });
-        });
-    }
-    /**
-     * Acknowledge notification receipt
-     */
-    acknowledgeNotification(notificationId) {
-        if (this.socket?.connected) {
-            this.socket.emit('notification:ack', { notificationId });
         }
-    }
-    /**
-     * Mark notification as read
-     */
-    markAsRead(notificationId) {
-        if (this.socket?.connected) {
-            this.socket.emit('notification:read', { notificationId });
-            // Remove from unread list
-            this.unreadNotifications.update(unread => unread.filter(n => n.id !== notificationId));
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handler = (e) => {
+            if (this.currentTheme$.value === 'auto') {
+                const effectiveTheme = e.matches ? 'dark' : 'light';
+                this.effectiveTheme$.next(effectiveTheme);
+                this.applyTheme(effectiveTheme);
+            }
+        };
+        // Modern browsers
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handler);
+        }
+        else if (mediaQuery.addListener) {
+            // Legacy browsers
+            mediaQuery.addListener(handler);
         }
     }
     /**
-     * Mark all as read
-     */
-    markAllAsRead() {
-        const unreadIds = this.unreadNotifications().map(n => n.id);
-        unreadIds.forEach(id => this.markAsRead(id));
-    }
-    /**
-     * Disconnect from server
+     * Save theme preference to localStorage
      */
-    disconnect() {
-        if (this.socket) {
-            this.socket.disconnect();
-            this.socket = null;
-            this.connectionStatusSubject.next({
-                connected: false,
-                timestamp: new Date()
-            });
+    saveThemePreference(theme) {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            // Save in new format: 'light', 'dark', or 'auto'
+            localStorage.setItem(this.config.storageKey, theme);
+            // Also update old format for backward compatibility
+            // This allows old code that reads 'true'/'false' to still work
+            if (theme === 'dark') {
+                localStorage.setItem(this.config.storageKey, 'dark');
+            }
+            else if (theme === 'light') {
+                localStorage.setItem(this.config.storageKey, 'light');
+            }
+        }
+        catch (error) {
+            console.warn('Failed to save theme preference to localStorage:', error);
         }
     }
     /**
-     * Clear all notifications
+     * Load theme preference from localStorage
      */
-    clearNotifications() {
-        this.notifications.set([]);
-        this.unreadNotifications.set([]);
+    loadThemePreference() {
+        if (!this.isBrowser) {
+            return null;
+        }
+        try {
+            const saved = localStorage.getItem(this.config.storageKey);
+            // Handle new format: 'light', 'dark', 'auto'
+            if (saved && ['light', 'dark', 'auto'].includes(saved)) {
+                return saved;
+            }
+            // Handle legacy format: 'true' (dark mode) or 'false' (light mode)
+            if (saved === 'true') {
+                // Migrate to new format
+                localStorage.setItem(this.config.storageKey, 'dark');
+                return 'dark';
+            }
+            else if (saved === 'false') {
+                // Migrate to new format
+                localStorage.setItem(this.config.storageKey, 'light');
+                return 'light';
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load theme preference from localStorage:', error);
+        }
+        return null;
     }
     /**
-     * Remove notification from list
+     * Clear saved theme preference
      */
-    removeNotification(notificationId) {
-        this.notifications.update(notifications => notifications.filter(n => n.id !== notificationId));
-        this.unreadNotifications.update(unread => unread.filter(n => n.id !== notificationId));
-    }
-    ngOnDestroy() {
-        this.disconnect();
-        this.notificationSubject.complete();
-        this.connectionStatusSubject.complete();
+    clearThemePreference() {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            localStorage.removeItem(this.config.storageKey);
+        }
+        catch (error) {
+            console.warn('Failed to clear theme preference from localStorage:', error);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class CideCoreFileManagerService {
-    http;
-    apiUrl = `${coreRoutesUrl?.fileManager}`;
-    fileListSubject = new BehaviorSubject([]);
-    fileList$ = this.fileListSubject.asObservable();
-    constructor(http) {
-        this.http = http;
-        console.log('CideCoreFileManagerService initialized - using real API');
+/**
+ * Apple-inspired dark/light mode toggle component
+ *
+ * Features:
+ * - Smooth animated toggle switch
+ * - Apple-style design with rounded corners and shadows
+ * - Works on pages without header/sidebar (dynamic website, login pages, auth project)
+ * - Automatically syncs with system theme preference
+ * - Persists user preference to localStorage
+ */
+class CideEleThemeToggleComponent {
+    themeService = inject(CideThemeService);
+    destroyRef = inject(DestroyRef);
+    // Current theme state
+    isDarkMode = signal(false, ...(ngDevMode ? [{ debugName: "isDarkMode" }] : []));
+    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    // Computed values
+    togglePosition = computed(() => this.isDarkMode() ? 'translate-x-5' : 'translate-x-0', ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
+    toggleBgColor = computed(() => this.isDarkMode()
+        ? 'tw-bg-gradient-to-r tw-from-blue-500 tw-to-indigo-600'
+        : 'tw-bg-gray-200 dark:tw-bg-gray-700', ...(ngDevMode ? [{ debugName: "toggleBgColor" }] : []));
+    ngOnInit() {
+        // Subscribe to theme changes
+        this.themeService.getEffectiveTheme$()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(theme => {
+            this.isDarkMode.set(theme === 'dark');
+        });
+        // Set initial state
+        this.isDarkMode.set(this.themeService.isDarkMode());
     }
-    /**
-     * Get file list from API
-     */
-    getFileList(body) {
-        const query = generateStringFromObject(body);
-        return this.http?.get(cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]))
-            .pipe(tap((response) => {
-            if (response?.success) {
-                this.fileListSubject.next(response?.data || []);
-            }
-        }), catchError$1(error => {
-            console.error('CideCoreFileManagerService API error:', error);
-            return this.handleError(error);
-        }));
+    ngOnDestroy() {
+        // Cleanup handled by takeUntilDestroyed
     }
     /**
-     * Get file list using mock data (deprecated - use getFileList instead)
+     * Toggle between light and dark mode
      */
-    getFileListWithMockData(_body) {
-        console.warn('getFileListWithMockData is deprecated. Use getFileList instead.');
-        return this.getFileList(_body);
+    toggleTheme() {
+        if (this.isAnimating()) {
+            return; // Prevent rapid clicking
+        }
+        this.isAnimating.set(true);
+        // Toggle theme using the service
+        this.themeService.toggleTheme();
+        // Reset animation flag after transition
+        setTimeout(() => {
+            this.isAnimating.set(false);
+        }, 300);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleThemeToggleComponent, isStandalone: true, selector: "cide-ele-theme-toggle", ngImport: i0, template: "<div class=\"cide-theme-toggle-wrapper\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"cide-theme-toggle-button\"\r\n    [class.is-dark]=\"isDarkMode()\"\r\n    [class.is-animating]=\"isAnimating()\"\r\n    (click)=\"toggleTheme()\"\r\n    [attr.aria-label]=\"isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'\"\r\n    [attr.aria-pressed]=\"isDarkMode()\">\r\n    \r\n    <!-- Toggle Track -->\r\n    <span class=\"cide-theme-toggle-track\" [class]=\"toggleBgColor()\">\r\n      <!-- Sun Icon (Light Mode) -->\r\n      <span class=\"cide-theme-toggle-icon sun-icon\" [class.hidden]=\"isDarkMode()\">\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\r\n          <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" \r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n        </svg>\r\n      </span>\r\n      \r\n      <!-- Moon Icon (Dark Mode) -->\r\n      <span class=\"cide-theme-toggle-icon moon-icon\" [class.hidden]=\"!isDarkMode()\">\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" \r\n                stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\r\n        </svg>\r\n      </span>\r\n    </span>\r\n    \r\n    <!-- Toggle Thumb (Slider) -->\r\n    <span class=\"cide-theme-toggle-thumb\" [style.transform]=\"togglePosition()\">\r\n    </span>\r\n  </button>\r\n</div>\r\n\r\n", styles: [".cide-theme-toggle-wrapper{display:inline-flex;align-items:center;justify-content:center}.cide-theme-toggle-button{position:relative;width:52px;height:32px;padding:0;border:none;background:transparent;cursor:pointer;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cide-theme-toggle-button:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px;border-radius:20px}.cide-theme-toggle-track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:space-between;padding:0 4px;box-shadow:inset 0 2px 4px #0000001a,0 1px 2px #0000000d}.is-dark .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #0003,0 1px 2px #0000001a}.cide-theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:1}.cide-theme-toggle-icon.hidden{opacity:0;width:0;transform:scale(0)}.cide-theme-toggle-icon svg{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.cide-theme-toggle-icon.sun-icon{color:#fbbf24}.cide-theme-toggle-icon.moon-icon{color:#e0e7ff}.cide-theme-toggle-thumb{position:absolute;top:2px;left:2px;width:28px;height:28px;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003,0 1px 2px #0000001a;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1;background:linear-gradient(180deg,#fff,#f9fafb)}.is-dark .cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb);box-shadow:0 2px 4px #0000004d,0 1px 2px #00000026}.is-animating .cide-theme-toggle-thumb{transition:transform .3s cubic-bezier(.4,0,.2,1)}.cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #00000040,0 2px 4px #00000026}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #0006,0 2px 4px #0003}.cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000026,0 2px 4px #0000001a}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000040,0 2px 4px #00000026}.cide-theme-toggle-button:active .cide-theme-toggle-thumb{transform:scale(.95)}.cide-theme-toggle-button:disabled{opacity:.5;cursor:not-allowed}.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-thumb,.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-track{box-shadow:none}@media (prefers-color-scheme: dark){.cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-theme-toggle', standalone: true, imports: [CommonModule], template: "<div class=\"cide-theme-toggle-wrapper\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"cide-theme-toggle-button\"\r\n    [class.is-dark]=\"isDarkMode()\"\r\n    [class.is-animating]=\"isAnimating()\"\r\n    (click)=\"toggleTheme()\"\r\n    [attr.aria-label]=\"isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'\"\r\n    [attr.aria-pressed]=\"isDarkMode()\">\r\n    \r\n    <!-- Toggle Track -->\r\n    <span class=\"cide-theme-toggle-track\" [class]=\"toggleBgColor()\">\r\n      <!-- Sun Icon (Light Mode) -->\r\n      <span class=\"cide-theme-toggle-icon sun-icon\" [class.hidden]=\"isDarkMode()\">\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\r\n          <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" \r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n        </svg>\r\n      </span>\r\n      \r\n      <!-- Moon Icon (Dark Mode) -->\r\n      <span class=\"cide-theme-toggle-icon moon-icon\" [class.hidden]=\"!isDarkMode()\">\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" \r\n                stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\r\n        </svg>\r\n      </span>\r\n    </span>\r\n    \r\n    <!-- Toggle Thumb (Slider) -->\r\n    <span class=\"cide-theme-toggle-thumb\" [style.transform]=\"togglePosition()\">\r\n    </span>\r\n  </button>\r\n</div>\r\n\r\n", styles: [".cide-theme-toggle-wrapper{display:inline-flex;align-items:center;justify-content:center}.cide-theme-toggle-button{position:relative;width:52px;height:32px;padding:0;border:none;background:transparent;cursor:pointer;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cide-theme-toggle-button:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px;border-radius:20px}.cide-theme-toggle-track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:space-between;padding:0 4px;box-shadow:inset 0 2px 4px #0000001a,0 1px 2px #0000000d}.is-dark .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #0003,0 1px 2px #0000001a}.cide-theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:1}.cide-theme-toggle-icon.hidden{opacity:0;width:0;transform:scale(0)}.cide-theme-toggle-icon svg{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.cide-theme-toggle-icon.sun-icon{color:#fbbf24}.cide-theme-toggle-icon.moon-icon{color:#e0e7ff}.cide-theme-toggle-thumb{position:absolute;top:2px;left:2px;width:28px;height:28px;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003,0 1px 2px #0000001a;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1;background:linear-gradient(180deg,#fff,#f9fafb)}.is-dark .cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb);box-shadow:0 2px 4px #0000004d,0 1px 2px #00000026}.is-animating .cide-theme-toggle-thumb{transition:transform .3s cubic-bezier(.4,0,.2,1)}.cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #00000040,0 2px 4px #00000026}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #0006,0 2px 4px #0003}.cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000026,0 2px 4px #0000001a}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000040,0 2px 4px #00000026}.cide-theme-toggle-button:active .cide-theme-toggle-thumb{transform:scale(.95)}.cide-theme-toggle-button:disabled{opacity:.5;cursor:not-allowed}.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-thumb,.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-track{box-shadow:none}@media (prefers-color-scheme: dark){.cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb)}}\n"] }]
+        }] });
+
+/**
+ * Notification API Service
+ * HTTP client for notification API endpoints
+ */
+class NotificationApiService {
+    http = inject(HttpClient);
+    apiUrl = cidePath.join([
+        hostManagerRoutesUrl.cideSuiteHost,
+        notificationRoutesUrl.module
+    ]);
     /**
-     * Get file list from cache (if available)
+     * Get user notifications
      */
-    getFileListFromCache() {
-        return this.fileListSubject.value;
+    getNotifications(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        // Debug: Log the URL being used
+        console.log('[NotificationApi] Request URL:', this.apiUrl);
+        console.log('[NotificationApi] Full URL with params:', `${this.apiUrl}?${httpParams.toString()}`);
+        return this.http.get(this.apiUrl, { params: httpParams });
     }
     /**
-     * Upload file with progress tracking
+     * Get notification by ID
      */
-    uploadFile(request) {
-        const formData = new FormData();
-        formData.append('file', request.file);
-        formData.append('altText', request.altText || '');
-        formData.append('tags', JSON.stringify(request.tags || []));
-        formData.append('permissions', JSON.stringify(request.permissions || []));
-        formData.append('userId', request.userId || '');
-        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'upload']);
-        const req = new HttpRequest('POST', url, formData, {
-            reportProgress: true
-        });
-        return this.http.request(req).pipe(catchError$1(this.handleError));
+    getNotificationById(id) {
+        return this.http.get(`${this.apiUrl}/${id}`);
     }
     /**
-     * Upload file with progress tracking (mock version - deprecated)
+     * Get unread count
      */
-    uploadFileWithMockData(request) {
-        console.warn('uploadFileWithMockData is deprecated. Use uploadFile instead.');
-        return this.uploadFile(request);
+    getUnreadCount() {
+        return this.http.get(`${this.apiUrl}/${notificationRoutesUrl.unreadCount}`);
     }
     /**
-     * Update file metadata
+     * Create notification
      */
-    updateFile(request) {
-        console.log('Updating file:', request);
-        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager]);
-        return this.http.post(url, request)
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshFileList();
-            }
-        }), catchError$1(this.handleError));
+    createNotification(payload) {
+        return this.http.post(this.apiUrl, payload);
     }
     /**
-     * Delete file
+     * Mark notification as read
      */
-    deleteFile(id) {
-        const payload = { cyfm_id: id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
-        return this.http.delete(url)
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshFileList();
-            }
-        }), catchError$1(this.handleError));
+    markAsRead(id) {
+        const url = `${this.apiUrl}/${id}/read`;
+        console.log('[NotificationApi] Mark as read URL:', url);
+        return this.http.put(url, {});
     }
     /**
-     * Delete multiple files
+     * Mark all notifications as read
      */
-    deleteMultipleFiles(ids) {
-        console.log('Deleting multiple files:', ids);
-        const payload = { ids };
-        const query = generateStringFromObject(payload);
-        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
-        return this.http.delete(url)
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshFileList();
-            }
-        }), catchError$1(this.handleError));
+    markAllAsRead() {
+        const url = `${this.apiUrl}/read-all`;
+        console.log('[NotificationApi] Mark all as read URL:', url);
+        return this.http.put(url, {});
     }
     /**
-     * Toggle file active status
+     * Archive notification
      */
-    toggleFileStatus(id) {
-        console.log('Toggling file status:', id);
-        const payload = { id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
-        return this.http.put(url, {})
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshFileList();
-            }
-        }), catchError$1(this.handleError));
+    archiveNotification(id) {
+        return this.http.put(`${this.apiUrl}/${id}/archive`, {});
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * WebSocket Notification Service
+ * Socket.IO client for real-time notifications
+ */
+class WebSocketNotificationService {
+    socket = null;
+    notificationSubject = new Subject();
+    connectionStatusSubject = new BehaviorSubject({
+        connected: false
+    });
+    // Signals for reactive state
+    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    unreadNotifications = signal([], ...(ngDevMode ? [{ debugName: "unreadNotifications" }] : []));
+    // Public observables
+    notification$ = this.notificationSubject.asObservable();
+    connectionStatus$ = this.connectionStatusSubject.asObservable();
+    // Computed signals
+    allNotifications = computed(() => this.notifications(), ...(ngDevMode ? [{ debugName: "allNotifications" }] : []));
+    unreadNotificationsCount = computed(() => this.unreadNotifications().length, ...(ngDevMode ? [{ debugName: "unreadNotificationsCount" }] : []));
+    isConnected = computed(() => this.connectionStatusSubject.value.connected, ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
     /**
-     * Get file by ID
+     * Connect to Socket.IO server
      */
-    getFileById(id) {
-        console.log('Getting file by ID:', id);
-        const payload = { cyfm_id: id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'byId', query]);
-        return this.http.get(url)
-            .pipe(catchError$1(this.handleError));
+    connect(token, userId) {
+        if (this.socket?.connected) {
+            console.log('Socket already connected');
+            return;
+        }
+        // Resolve actual API URL from placeholder
+        // The placeholder is replaced by host interceptor for HTTP, but WebSocket needs direct resolution
+        // Based on host-manager.json: "__cloud_ide_suite_layout__" -> "http://localhost:3001"
+        const placeholder = hostManagerRoutesUrl.cideSuiteHost;
+        let apiUrl = 'http://localhost:3001'; // Default from host-manager.json
+        // Try to resolve from host-manager.json via fetch (same as HTTP interceptor)
+        if (typeof window !== 'undefined') {
+            // Try to fetch host-manager.json to get the actual URL
+            fetch('/routes/host-manager.json')
+                .then(res => res.json())
+                .then((hostManagerRoutes) => {
+                const hostManagerRoutesEntry = hostManagerRoutes?.hosts?.find((hostRoute) => placeholder?.includes(hostRoute?.url));
+                if (hostManagerRoutesEntry?.replace) {
+                    apiUrl = hostManagerRoutesEntry.replace;
+                }
+                // Remove /api suffix if present (Socket.IO connects to base server)
+                apiUrl = apiUrl.replace(/\/api\/?$/, '');
+                this.connectWithUrl(apiUrl, token, userId);
+            })
+                .catch(() => {
+                // Fallback if fetch fails - use default or try localStorage
+                this.resolveUrlFallback(token, userId);
+            });
+        }
+        else {
+            // Server-side or fallback
+            this.resolveUrlFallback(token, userId);
+        }
     }
     /**
-     * Find file by ID
+     * Fallback URL resolution
      */
-    findFileById(id, items = this.fileListSubject.value) {
-        for (const item of items) {
-            if (item._id === id) {
-                return item;
+    resolveUrlFallback(token, userId) {
+        let apiUrl = 'http://localhost:3001'; // Default from host-manager.json
+        // Try to get from current window location
+        if (typeof window !== 'undefined') {
+            const currentOrigin = window.location.origin;
+            // Check if we're on localhost (development)
+            if (currentOrigin.includes('localhost') || currentOrigin.includes('127.0.0.1')) {
+                // Use localhost:3001 for development (from host-manager.json)
+                apiUrl = 'http://localhost:3001';
+            }
+            else {
+                // In production, use the same origin (assuming API is on same domain)
+                apiUrl = currentOrigin || 'http://localhost:3001';
+            }
+            // Try to get from localStorage (if set by app initialization)
+            const storedApiUrl = localStorage.getItem('api_base_url');
+            if (storedApiUrl) {
+                apiUrl = storedApiUrl.replace(/\/api\/?$/, '');
             }
         }
-        return null;
-    }
-    /**
-     * Get file size in human readable format
-     */
-    getFileSizeDisplay(bytes) {
-        if (bytes === 0)
-            return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        this.connectWithUrl(apiUrl, token, userId);
     }
     /**
-     * Get file type icon
+     * Connect with resolved URL
      */
-    getFileTypeIcon(fileType) {
-        const typeMap = {
-            'image/jpeg': 'image',
-            'image/png': 'image',
-            'image/gif': 'image',
-            'image/svg+xml': 'image',
-            'application/pdf': 'picture_as_pdf',
-            'text/plain': 'description',
-            'text/html': 'code',
-            'application/json': 'code',
-            'application/javascript': 'code',
-            'text/css': 'code',
-            'application/zip': 'folder_zip',
-            'application/x-zip-compressed': 'folder_zip',
-            'application/msword': 'description',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'description',
-            'application/vnd.ms-excel': 'table_chart',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'table_chart',
-            'application/vnd.ms-powerpoint': 'slideshow',
-            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'slideshow'
-        };
-        return typeMap[fileType] || 'insert_drive_file';
+    connectWithUrl(apiUrl, token, userId) {
+        console.log('[WebSocket] Connecting to:', apiUrl);
+        this.socket = io(apiUrl, {
+            path: '/notifications-socket',
+            transports: ['websocket', 'polling'],
+            auth: {
+                token: token
+            },
+            reconnection: true,
+            reconnectionDelay: 1000,
+            reconnectionAttempts: 5,
+            reconnectionDelayMax: 5000
+        });
+        this.setupEventHandlers(userId);
     }
     /**
-     * Refresh file list from server
+     * Setup Socket.IO event handlers
      */
-    refreshFileList() {
-        const defaultBody = {
-            pageIndex: 1,
-            pageSize: 10
-        };
-        this.getFileList(defaultBody).subscribe({
-            next: () => {
-                console.log('File list refreshed successfully');
-            },
-            error: (error) => {
-                console.error('Error refreshing file list:', error);
-            }
+    setupEventHandlers(userId) {
+        if (!this.socket)
+            return;
+        // Connection established
+        this.socket.on('connect', () => {
+            console.log('Socket.IO connected:', this.socket?.id);
+            this.connectionStatusSubject.next({
+                connected: true,
+                socketId: this.socket?.id,
+                userId: userId,
+                timestamp: new Date()
+            });
+        });
+        // Connection confirmation
+        this.socket.on('connected', (data) => {
+            console.log('Notification service connected:', data);
+            this.connectionStatusSubject.next({
+                connected: true,
+                socketId: data.socketId,
+                userId: data.userId,
+                timestamp: data.timestamp
+            });
+        });
+        // Receive notification
+        this.socket.on('notification', (notification) => {
+            console.log('Received notification:', notification);
+            // Add to notifications list
+            this.notifications.update(notifications => [notification, ...notifications]);
+            // Add to unread list
+            this.unreadNotifications.update(unread => [notification, ...unread]);
+            // Emit to subscribers
+            this.notificationSubject.next(notification);
+            // Acknowledge receipt
+            this.acknowledgeNotification(notification.id);
+        });
+        // Disconnect
+        this.socket.on('disconnect', (reason) => {
+            console.log('Socket.IO disconnected:', reason);
+            this.connectionStatusSubject.next({
+                connected: false,
+                timestamp: new Date()
+            });
+        });
+        // Connection error
+        this.socket.on('connect_error', (error) => {
+            console.error('Socket.IO connection error:', error);
+            this.connectionStatusSubject.next({
+                connected: false,
+                timestamp: new Date()
+            });
         });
     }
     /**
-     * Handle errors
+     * Acknowledge notification receipt
      */
-    handleError(error) {
-        let errorMessage = 'An error occurred';
-        if (error instanceof Error) {
-            errorMessage = error.message;
-        }
-        else if (typeof error === 'string') {
-            errorMessage = error;
+    acknowledgeNotification(notificationId) {
+        if (this.socket?.connected) {
+            this.socket.emit('notification:ack', { notificationId });
         }
-        console.error('CideCoreFileManagerService Error:', errorMessage);
-        return throwError(() => new Error(errorMessage));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
-
-class DropdownManagerService {
-    activeDropdowns = signal(new Map(), ...(ngDevMode ? [{ debugName: "activeDropdowns" }] : []));
-    documentClickListener;
-    escapeKeyListener;
-    constructor() {
-        this.initializeGlobalListeners();
-    }
-    initializeGlobalListeners() {
-        // Global document click listener
-        this.documentClickListener = (event) => {
-            this.handleDocumentClick(event);
-        };
-        // Global escape key listener
-        this.escapeKeyListener = (event) => {
-            if (event.key === 'Escape') {
-                this.closeAllDropdowns();
-            }
-        };
-        // Add listeners
-        document.addEventListener('click', this.documentClickListener, true);
-        document.addEventListener('keydown', this.escapeKeyListener, true);
-    }
-    registerDropdown(dropdown) {
-        // Close any existing dropdowns before opening a new one
-        this.closeAllDropdowns();
-        this.activeDropdowns.update(map => {
-            const newMap = new Map(map);
-            newMap.set(dropdown.id, dropdown);
-            return newMap;
-        });
     }
-    unregisterDropdown(id) {
-        this.activeDropdowns.update(map => {
-            const newMap = new Map(map);
-            newMap.delete(id);
-            return newMap;
-        });
+    /**
+     * Mark notification as read
+     */
+    markAsRead(notificationId) {
+        if (this.socket?.connected) {
+            this.socket.emit('notification:read', { notificationId });
+            // Remove from unread list
+            this.unreadNotifications.update(unread => unread.filter(n => n.id !== notificationId));
+        }
     }
-    closeAllDropdowns() {
-        const dropdowns = this.activeDropdowns();
-        dropdowns.forEach(dropdown => {
-            dropdown.close();
-        });
-        this.activeDropdowns.set(new Map());
+    /**
+     * Mark all as read
+     */
+    markAllAsRead() {
+        const unreadIds = this.unreadNotifications().map(n => n.id);
+        unreadIds.forEach(id => this.markAsRead(id));
     }
-    closeDropdown(id) {
-        const dropdowns = this.activeDropdowns();
-        const dropdown = dropdowns.get(id);
-        if (dropdown) {
-            dropdown.close();
-            this.unregisterDropdown(id);
+    /**
+     * Disconnect from server
+     */
+    disconnect() {
+        if (this.socket) {
+            this.socket.disconnect();
+            this.socket = null;
+            this.connectionStatusSubject.next({
+                connected: false,
+                timestamp: new Date()
+            });
         }
     }
-    isDropdownOpen(id) {
-        return this.activeDropdowns().has(id);
+    /**
+     * Clear all notifications
+     */
+    clearNotifications() {
+        this.notifications.set([]);
+        this.unreadNotifications.set([]);
     }
-    handleDocumentClick(event) {
-        const dropdowns = this.activeDropdowns();
-        if (dropdowns.size === 0) {
-            return;
-        }
-        // Check if click is inside any open dropdown
-        const target = event.target;
-        let isClickInsideDropdown = false;
-        dropdowns.forEach(dropdown => {
-            if (dropdown.element && dropdown.element.contains(target)) {
-                isClickInsideDropdown = true;
-            }
-        });
-        // If click is outside all dropdowns, close them
-        if (!isClickInsideDropdown) {
-            this.closeAllDropdowns();
-        }
+    /**
+     * Remove notification from list
+     */
+    removeNotification(notificationId) {
+        this.notifications.update(notifications => notifications.filter(n => n.id !== notificationId));
+        this.unreadNotifications.update(unread => unread.filter(n => n.id !== notificationId));
     }
     ngOnDestroy() {
-        // Clean up global listeners
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener, true);
-        }
-        if (this.escapeKeyListener) {
-            document.removeEventListener('keydown', this.escapeKeyListener, true);
-        }
+        this.disconnect();
+        this.notificationSubject.complete();
+        this.connectionStatusSubject.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownManagerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class KeyboardShortcutService {
-    shortcuts = new Map();
-    overrides = new Map();
-    keydownListener;
-    constructor() {
-        this.setupGlobalListener();
-    }
-    ngOnDestroy() {
-        this.removeGlobalListener();
+class CideCoreFileManagerService {
+    http;
+    apiUrl = `${coreRoutesUrl?.fileManager}`;
+    fileListSubject = new BehaviorSubject([]);
+    fileList$ = this.fileListSubject.asObservable();
+    constructor(http) {
+        this.http = http;
+        console.log('CideCoreFileManagerService initialized - using real API');
     }
     /**
-     * Register a new keyboard shortcut
+     * Get file list from API
      */
-    register(shortcut) {
-        this.shortcuts.set(shortcut.id, shortcut);
-        console.log(`⌨️ [KeyboardShortcut] Registered shortcut: ${shortcut.id} (${this.getKeyDescription(shortcut)})`);
+    getFileList(body) {
+        const query = generateStringFromObject(body);
+        return this.http?.get(cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]))
+            .pipe(tap((response) => {
+            if (response?.success) {
+                this.fileListSubject.next(response?.data || []);
+            }
+        }), catchError$1(error => {
+            console.error('CideCoreFileManagerService API error:', error);
+            return this.handleError(error);
+        }));
     }
     /**
-     * Override an existing shortcut with new key combination
+     * Get file list using mock data (deprecated - use getFileList instead)
      */
-    override(shortcutId, newKey, options) {
-        const originalShortcut = this.shortcuts.get(shortcutId);
-        if (!originalShortcut) {
-            console.warn(`⚠️ [KeyboardShortcut] Cannot override shortcut '${shortcutId}' - not found`);
-            return;
-        }
-        const override = {
-            shortcutId,
-            newKey,
-            newCtrlKey: options?.ctrlKey,
-            newAltKey: options?.altKey,
-            newShiftKey: options?.shiftKey,
-            newMetaKey: options?.metaKey
-        };
-        this.overrides.set(shortcutId, override);
-        console.log(`🔄 [KeyboardShortcut] Override registered for '${shortcutId}': ${this.getKeyDescription({ ...originalShortcut, ...options, key: newKey })}`);
+    getFileListWithMockData(_body) {
+        console.warn('getFileListWithMockData is deprecated. Use getFileList instead.');
+        return this.getFileList(_body);
     }
     /**
-     * Remove a shortcut
-     */
-    unregister(shortcutId) {
-        this.shortcuts.delete(shortcutId);
-        this.overrides.delete(shortcutId);
-        console.log(`🗑️ [KeyboardShortcut] Removed shortcut: ${shortcutId}`);
-    }
-    /**
-     * Remove override for a shortcut (restore original key combination)
+     * Get file list from cache (if available)
      */
-    removeOverride(shortcutId) {
-        this.overrides.delete(shortcutId);
-        console.log(`🔄 [KeyboardShortcut] Override removed for: ${shortcutId}`);
+    getFileListFromCache() {
+        return this.fileListSubject.value;
     }
     /**
-     * Get all registered shortcuts
+     * Upload file with progress tracking
      */
-    getAllShortcuts() {
-        return Array.from(this.shortcuts.values());
+    uploadFile(request) {
+        const formData = new FormData();
+        formData.append('file', request.file);
+        formData.append('altText', request.altText || '');
+        formData.append('tags', JSON.stringify(request.tags || []));
+        formData.append('permissions', JSON.stringify(request.permissions || []));
+        formData.append('userId', request.userId || '');
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'upload']);
+        const req = new HttpRequest('POST', url, formData, {
+            reportProgress: true
+        });
+        return this.http.request(req).pipe(catchError$1(this.handleError));
     }
     /**
-     * Get shortcuts by category or filter
+     * Upload file with progress tracking (mock version - deprecated)
      */
-    getShortcuts(filter) {
-        const shortcuts = this.getAllShortcuts();
-        return filter ? shortcuts.filter(filter) : shortcuts;
+    uploadFileWithMockData(request) {
+        console.warn('uploadFileWithMockData is deprecated. Use uploadFile instead.');
+        return this.uploadFile(request);
     }
     /**
-     * Check if a shortcut is registered
+     * Update file metadata
      */
-    hasShortcut(shortcutId) {
-        return this.shortcuts.has(shortcutId);
+    updateFile(request) {
+        console.log('Updating file:', request);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager]);
+        return this.http.post(url, request)
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
     }
     /**
-     * Get shortcut information
+     * Delete file
      */
-    getShortcut(shortcutId) {
-        return this.shortcuts.get(shortcutId);
+    deleteFile(id) {
+        const payload = { cyfm_id: id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        return this.http.delete(url)
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
     }
     /**
-     * Clear all shortcuts
+     * Delete multiple files
      */
-    clearAll() {
-        this.shortcuts.clear();
-        this.overrides.clear();
-        console.log(`🧹 [KeyboardShortcut] All shortcuts cleared`);
+    deleteMultipleFiles(ids) {
+        console.log('Deleting multiple files:', ids);
+        const payload = { ids };
+        const query = generateStringFromObject(payload);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        return this.http.delete(url)
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
     }
     /**
-     * Set up global keyboard listener
+     * Toggle file active status
      */
-    setupGlobalListener() {
-        this.keydownListener = (event) => {
-            this.handleKeydown(event);
-        };
-        document.addEventListener('keydown', this.keydownListener);
-        console.log(`🎧 [KeyboardShortcut] Global keyboard listener attached`);
+    toggleFileStatus(id) {
+        console.log('Toggling file status:', id);
+        const payload = { id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        return this.http.put(url, {})
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
     }
     /**
-     * Remove global keyboard listener
+     * Get file by ID
      */
-    removeGlobalListener() {
-        if (this.keydownListener) {
-            document.removeEventListener('keydown', this.keydownListener);
-            this.keydownListener = undefined;
-            console.log(`🎧 [KeyboardShortcut] Global keyboard listener removed`);
-        }
+    getFileById(id) {
+        console.log('Getting file by ID:', id);
+        const payload = { cyfm_id: id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'byId', query]);
+        return this.http.get(url)
+            .pipe(catchError$1(this.handleError));
     }
     /**
-     * Handle keydown events
+     * Find file by ID
      */
-    handleKeydown(event) {
-        for (const [shortcutId, shortcut] of this.shortcuts) {
-            if (this.matchesShortcut(event, shortcut)) {
-                // Check for override
-                const override = this.overrides.get(shortcutId);
-                if (override && !this.matchesOverride(event, override)) {
-                    continue; // Skip if override doesn't match
-                }
-                if (shortcut.preventDefault !== false) {
-                    event.preventDefault();
-                }
-                if (shortcut.stopPropagation) {
-                    event.stopPropagation();
-                }
-                console.log(`⌨️ [KeyboardShortcut] Executing shortcut: ${shortcutId}`);
-                shortcut.action();
-                break; // Only execute one shortcut per keydown
+    findFileById(id, items = this.fileListSubject.value) {
+        for (const item of items) {
+            if (item._id === id) {
+                return item;
             }
         }
+        return null;
     }
     /**
-     * Check if event matches shortcut
+     * Get file size in human readable format
      */
-    matchesShortcut(event, shortcut) {
-        return event.key === shortcut.key &&
-            (shortcut.ctrlKey === undefined || event.ctrlKey === shortcut.ctrlKey) &&
-            (shortcut.altKey === undefined || event.altKey === shortcut.altKey) &&
-            (shortcut.shiftKey === undefined || event.shiftKey === shortcut.shiftKey) &&
-            (shortcut.metaKey === undefined || event.metaKey === shortcut.metaKey);
+    getFileSizeDisplay(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }
     /**
-     * Check if event matches override
+     * Get file type icon
      */
-    matchesOverride(event, override) {
-        return event.key === override.newKey &&
-            (override.newCtrlKey === undefined || event.ctrlKey === override.newCtrlKey) &&
-            (override.newAltKey === undefined || event.altKey === override.newAltKey) &&
-            (override.newShiftKey === undefined || event.shiftKey === override.newShiftKey) &&
-            (override.newMetaKey === undefined || event.metaKey === override.newMetaKey);
+    getFileTypeIcon(fileType) {
+        const typeMap = {
+            'image/jpeg': 'image',
+            'image/png': 'image',
+            'image/gif': 'image',
+            'image/svg+xml': 'image',
+            'application/pdf': 'picture_as_pdf',
+            'text/plain': 'description',
+            'text/html': 'code',
+            'application/json': 'code',
+            'application/javascript': 'code',
+            'text/css': 'code',
+            'application/zip': 'folder_zip',
+            'application/x-zip-compressed': 'folder_zip',
+            'application/msword': 'description',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'description',
+            'application/vnd.ms-excel': 'table_chart',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'table_chart',
+            'application/vnd.ms-powerpoint': 'slideshow',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'slideshow'
+        };
+        return typeMap[fileType] || 'insert_drive_file';
     }
     /**
-     * Get human-readable key description
+     * Refresh file list from server
      */
-    getKeyDescription(shortcut) {
-        const modifiers = [];
-        if (shortcut.ctrlKey)
-            modifiers.push('Ctrl');
-        if (shortcut.altKey)
-            modifiers.push('Alt');
-        if (shortcut.shiftKey)
-            modifiers.push('Shift');
-        if (shortcut.metaKey)
-            modifiers.push('Meta');
-        return [...modifiers, shortcut.key].join(' + ');
+    refreshFileList() {
+        const defaultBody = {
+            pageIndex: 1,
+            pageSize: 10
+        };
+        this.getFileList(defaultBody).subscribe({
+            next: () => {
+                console.log('File list refreshed successfully');
+            },
+            error: (error) => {
+                console.error('Error refreshing file list:', error);
+            }
+        });
     }
     /**
-     * Get key description for a shortcut ID
+     * Handle errors
      */
-    getKeyDescriptionForShortcut(shortcutId) {
-        const shortcut = this.shortcuts.get(shortcutId);
-        if (!shortcut)
-            return 'Not found';
-        const override = this.overrides.get(shortcutId);
-        if (override) {
-            return this.getKeyDescription({
-                key: override.newKey,
-                ctrlKey: override.newCtrlKey,
-                altKey: override.newAltKey,
-                shiftKey: override.newShiftKey,
-                metaKey: override.newMetaKey
-            });
+    handleError(error) {
+        let errorMessage = 'An error occurred';
+        if (error instanceof Error) {
+            errorMessage = error.message;
         }
-        return this.getKeyDescription(shortcut);
+        else if (typeof error === 'string') {
+            errorMessage = error;
+        }
+        console.error('CideCoreFileManagerService Error:', errorMessage);
+        return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
-class ConfirmationService {
-    // Modern signal-based state management
-    confirmationQueue = signal([], ...(ngDevMode ? [{ debugName: "confirmationQueue" }] : []));
-    currentRequest = signal(null, ...(ngDevMode ? [{ debugName: "currentRequest" }] : []));
-    // Modern computed signals with proper typing
-    hasActiveConfirmation = computed(() => this.currentRequest() !== null, ...(ngDevMode ? [{ debugName: "hasActiveConfirmation" }] : []));
-    queueLength = computed(() => this.confirmationQueue().length, ...(ngDevMode ? [{ debugName: "queueLength" }] : []));
+class DropdownManagerService {
+    activeDropdowns = signal(new Map(), ...(ngDevMode ? [{ debugName: "activeDropdowns" }] : []));
+    documentClickListener;
+    escapeKeyListener;
     constructor() {
-        // Modern service initialization
-    }
-    ngOnDestroy() {
-        // Cleanup if needed
-    }
-    /**
-     * Ask for confirmation with a simple yes/no dialog
-     */
-    ask(options) {
-        console.log('🔔 ConfirmationService.ask called with options:', options);
-        return new Promise((resolve, reject) => {
-            const request = {
-                id: this.generateId(),
-                title: options.title,
-                message: options.message,
-                type: options.type || 'warning',
-                icon: options.icon || this.getDefaultIcon(options.type || 'warning'),
-                confirmText: options.confirmText || 'Confirm',
-                cancelText: options.cancelText || 'Cancel',
-                resolve: (value) => resolve(value),
-                reject
-            };
-            console.log('🔽 Ask for confirmation with a simple yes/no dialog', request);
-            this.addToQueue(request);
-        });
+        this.initializeGlobalListeners();
     }
-    /**
-     * Ask for confirmation with custom template and return custom data
-     */
-    askWithTemplate(options) {
-        return new Promise((resolve, reject) => {
-            const request = {
-                id: this.generateId(),
-                title: options.title,
-                message: options.message,
-                type: options.type || 'info',
-                icon: options.icon || this.getDefaultIcon(options.type || 'info'),
-                confirmText: options.confirmText || 'Confirm',
-                cancelText: options.cancelText || 'Cancel',
-                customTemplate: options.customTemplate,
-                customData: options.customData,
-                resolve: (value) => resolve(value),
-                reject
-            };
-            // Cast to unknown for queue compatibility
-            this.addToQueue(request);
-        });
+    initializeGlobalListeners() {
+        // Global document click listener
+        this.documentClickListener = (event) => {
+            this.handleDocumentClick(event);
+        };
+        // Global escape key listener
+        this.escapeKeyListener = (event) => {
+            if (event.key === 'Escape') {
+                this.closeAllDropdowns();
+            }
+        };
+        // Add listeners
+        document.addEventListener('click', this.documentClickListener, true);
+        document.addEventListener('keydown', this.escapeKeyListener, true);
     }
-    /**
-     * Quick confirmation for dangerous actions
-     */
-    confirmDelete(itemName) {
-        return this.ask({
-            title: 'Confirm Delete',
-            message: itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : 'Are you sure you want to delete this item? This action cannot be undone.',
-            type: 'danger',
-            icon: 'delete_forever',
-            confirmText: 'Delete',
-            cancelText: 'Cancel'
+    registerDropdown(dropdown) {
+        // Close any existing dropdowns before opening a new one
+        this.closeAllDropdowns();
+        this.activeDropdowns.update(map => {
+            const newMap = new Map(map);
+            newMap.set(dropdown.id, dropdown);
+            return newMap;
         });
     }
-    /**
-     * Quick confirmation for permanent actions
-     */
-    confirmPermanentAction(action, itemName) {
-        return this.ask({
-            title: `Confirm ${action}`,
-            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"? This action cannot be undone.` : `Are you sure you want to ${action.toLowerCase()}? This action cannot be undone.`,
-            type: 'danger',
-            icon: 'warning',
-            confirmText: action,
-            cancelText: 'Cancel'
+    unregisterDropdown(id) {
+        this.activeDropdowns.update(map => {
+            const newMap = new Map(map);
+            newMap.delete(id);
+            return newMap;
         });
     }
-    /**
-     * Quick confirmation for safe actions
-     */
-    confirmSafeAction(action, itemName) {
-        return this.ask({
-            title: `Confirm ${action}`,
-            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"?` : `Are you sure you want to ${action.toLowerCase()}?`,
-            type: 'info',
-            icon: 'info',
-            confirmText: action,
-            cancelText: 'Cancel'
+    closeAllDropdowns() {
+        const dropdowns = this.activeDropdowns();
+        dropdowns.forEach(dropdown => {
+            dropdown.close();
         });
+        this.activeDropdowns.set(new Map());
     }
-    // Modern private methods with proper typing
-    addToQueue(request) {
-        this.confirmationQueue.update(queue => [...queue, request]);
-        console.log('🔔 Added request to queue:', request);
-        this.processQueue();
-    }
-    processQueue() {
-        console.log('🔔 Processing queue. Current request:', this.currentRequest(), 'Queue length:', this.confirmationQueue().length);
-        if (this.currentRequest() || this.confirmationQueue().length === 0) {
-            return;
+    closeDropdown(id) {
+        const dropdowns = this.activeDropdowns();
+        const dropdown = dropdowns.get(id);
+        if (dropdown) {
+            dropdown.close();
+            this.unregisterDropdown(id);
         }
-        const nextRequest = this.confirmationQueue()[0];
-        console.log('🔔 Setting current request:', nextRequest);
-        this.currentRequest.set(nextRequest);
     }
-    // Modern public methods with proper typing
-    confirmCurrentRequest(data) {
-        const request = this.currentRequest();
-        if (!request)
-            return;
-        // Always resolve with true for confirmation, unless custom data is explicitly provided
-        const resolvedValue = data !== undefined ? data : true;
-        console.log('🔔 Confirming request with value:', resolvedValue);
-        request.resolve(resolvedValue);
-        this.removeCurrentRequest();
+    isDropdownOpen(id) {
+        return this.activeDropdowns().has(id);
     }
-    cancelCurrentRequest() {
-        const request = this.currentRequest();
-        if (!request)
+    handleDocumentClick(event) {
+        const dropdowns = this.activeDropdowns();
+        if (dropdowns.size === 0) {
             return;
-        request.reject(new Error('User cancelled'));
-        this.removeCurrentRequest();
-    }
-    removeCurrentRequest() {
-        this.confirmationQueue.update(queue => queue.slice(1));
-        this.currentRequest.set(null);
-        // Process next request if any
-        setTimeout(() => this.processQueue(), 100);
-    }
-    generateId() {
-        return `confirmation-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    // Modern private utility method with proper typing
-    getDefaultIcon(type) {
-        const iconMap = {
-            danger: 'error',
-            warning: 'warning',
-            info: 'info',
-            success: 'check_circle'
-        };
-        return iconMap[type];
-    }
-    // Modern public getters with proper typing
-    getCurrentRequest() {
-        return this.currentRequest;
+        }
+        // Check if click is inside any open dropdown
+        const target = event.target;
+        let isClickInsideDropdown = false;
+        dropdowns.forEach(dropdown => {
+            if (dropdown.element && dropdown.element.contains(target)) {
+                isClickInsideDropdown = true;
+            }
+        });
+        // If click is outside all dropdowns, close them
+        if (!isClickInsideDropdown) {
+            this.closeAllDropdowns();
+        }
     }
-    getHasActiveConfirmation() {
-        return this.hasActiveConfirmation;
+    ngOnDestroy() {
+        // Clean up global listeners
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+        }
+        if (this.escapeKeyListener) {
+            document.removeEventListener('keydown', this.escapeKeyListener, true);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownManagerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * CIDE Element Library - Theme Service
- * Independent theme management for the element library
- * Can be used standalone without parent application theme dependencies
- */
-class CideThemeService {
-    platformId = inject(PLATFORM_ID);
-    isBrowser;
-    currentTheme$ = new BehaviorSubject('light');
-    effectiveTheme$ = new BehaviorSubject('light');
-    config = {
-        theme: 'light',
-        targetElement: null,
-        persistPreference: true,
-        storageKey: 'cide-theme',
-        useDataAttribute: true,
-        useClassName: true
-    };
+class KeyboardShortcutService {
+    shortcuts = new Map();
+    overrides = new Map();
+    keydownListener;
     constructor() {
-        this.isBrowser = isPlatformBrowser(this.platformId);
-        if (this.isBrowser) {
-            this.config.targetElement = document.documentElement;
-        }
+        this.setupGlobalListener();
+    }
+    ngOnDestroy() {
+        this.removeGlobalListener();
     }
     /**
-     * Initialize the theme service with configuration
-     * This should be called once in the application, typically in main.ts or app config
+     * Register a new keyboard shortcut
      */
-    initialize(config) {
-        if (!this.isBrowser) {
+    register(shortcut) {
+        this.shortcuts.set(shortcut.id, shortcut);
+        console.log(`⌨️ [KeyboardShortcut] Registered shortcut: ${shortcut.id} (${this.getKeyDescription(shortcut)})`);
+    }
+    /**
+     * Override an existing shortcut with new key combination
+     */
+    override(shortcutId, newKey, options) {
+        const originalShortcut = this.shortcuts.get(shortcutId);
+        if (!originalShortcut) {
+            console.warn(`⚠️ [KeyboardShortcut] Cannot override shortcut '${shortcutId}' - not found`);
             return;
         }
-        // Merge configuration
-        if (config) {
-            this.config = {
-                ...this.config,
-                ...config,
-                targetElement: config.targetElement || document.documentElement
-            };
-        }
-        // Load saved theme preference
-        const savedTheme = this.loadThemePreference();
-        const initialTheme = savedTheme || this.config.theme;
-        // Apply initial theme
-        this.setTheme(initialTheme);
-        // Listen for system theme changes if theme is set to 'auto'
-        if (initialTheme === 'auto') {
-            this.listenToSystemTheme();
-        }
+        const override = {
+            shortcutId,
+            newKey,
+            newCtrlKey: options?.ctrlKey,
+            newAltKey: options?.altKey,
+            newShiftKey: options?.shiftKey,
+            newMetaKey: options?.metaKey
+        };
+        this.overrides.set(shortcutId, override);
+        console.log(`🔄 [KeyboardShortcut] Override registered for '${shortcutId}': ${this.getKeyDescription({ ...originalShortcut, ...options, key: newKey })}`);
     }
     /**
-     * Set the current theme
+     * Remove a shortcut
      */
-    setTheme(theme) {
-        if (!this.isBrowser) {
-            return;
-        }
-        this.currentTheme$.next(theme);
-        // Save preference if persistence is enabled
-        if (this.config.persistPreference) {
-            this.saveThemePreference(theme);
-        }
-        // Determine effective theme
-        let effectiveTheme;
-        if (theme === 'auto') {
-            effectiveTheme = this.getSystemTheme();
-            this.listenToSystemTheme();
-        }
-        else {
-            effectiveTheme = theme;
-        }
-        this.effectiveTheme$.next(effectiveTheme);
-        this.applyTheme(effectiveTheme);
+    unregister(shortcutId) {
+        this.shortcuts.delete(shortcutId);
+        this.overrides.delete(shortcutId);
+        console.log(`🗑️ [KeyboardShortcut] Removed shortcut: ${shortcutId}`);
     }
     /**
-     * Get the current theme preference
+     * Remove override for a shortcut (restore original key combination)
      */
-    getCurrentTheme() {
-        return this.currentTheme$.value;
+    removeOverride(shortcutId) {
+        this.overrides.delete(shortcutId);
+        console.log(`🔄 [KeyboardShortcut] Override removed for: ${shortcutId}`);
     }
     /**
-     * Get the effective theme (actual theme being displayed)
+     * Get all registered shortcuts
      */
-    getEffectiveTheme() {
-        return this.effectiveTheme$.value;
+    getAllShortcuts() {
+        return Array.from(this.shortcuts.values());
     }
     /**
-     * Observable for current theme changes
+     * Get shortcuts by category or filter
      */
-    getCurrentTheme$() {
-        return this.currentTheme$.asObservable();
+    getShortcuts(filter) {
+        const shortcuts = this.getAllShortcuts();
+        return filter ? shortcuts.filter(filter) : shortcuts;
     }
     /**
-     * Observable for effective theme changes
+     * Check if a shortcut is registered
      */
-    getEffectiveTheme$() {
-        return this.effectiveTheme$.asObservable();
+    hasShortcut(shortcutId) {
+        return this.shortcuts.has(shortcutId);
     }
     /**
-     * Toggle between light and dark themes
+     * Get shortcut information
      */
-    toggleTheme() {
-        const currentEffective = this.effectiveTheme$.value;
-        const newTheme = currentEffective === 'light' ? 'dark' : 'light';
-        this.setTheme(newTheme);
+    getShortcut(shortcutId) {
+        return this.shortcuts.get(shortcutId);
     }
     /**
-     * Check if dark mode is currently active
+     * Clear all shortcuts
      */
-    isDarkMode() {
-        return this.effectiveTheme$.value === 'dark';
+    clearAll() {
+        this.shortcuts.clear();
+        this.overrides.clear();
+        console.log(`🧹 [KeyboardShortcut] All shortcuts cleared`);
     }
     /**
-     * Apply theme to target element
+     * Set up global keyboard listener
      */
-    applyTheme(theme) {
-        if (!this.isBrowser || !this.config.targetElement) {
-            return;
-        }
-        const element = this.config.targetElement;
-        // Apply data-theme attribute
-        if (this.config.useDataAttribute) {
-            element.setAttribute('data-theme', theme);
-        }
-        // Apply class name
-        if (this.config.useClassName) {
-            if (theme === 'dark') {
-                element.classList.add('dark-mode');
-                element.classList.remove('light-mode');
-            }
-            else {
-                element.classList.add('light-mode');
-                element.classList.remove('dark-mode');
-            }
+    setupGlobalListener() {
+        this.keydownListener = (event) => {
+            this.handleKeydown(event);
+        };
+        document.addEventListener('keydown', this.keydownListener);
+        console.log(`🎧 [KeyboardShortcut] Global keyboard listener attached`);
+    }
+    /**
+     * Remove global keyboard listener
+     */
+    removeGlobalListener() {
+        if (this.keydownListener) {
+            document.removeEventListener('keydown', this.keydownListener);
+            this.keydownListener = undefined;
+            console.log(`🎧 [KeyboardShortcut] Global keyboard listener removed`);
         }
-        // Also apply to body for better compatibility
-        if (element === document.documentElement && document.body) {
-            if (this.config.useDataAttribute) {
-                document.body.setAttribute('data-theme', theme);
-            }
-            if (this.config.useClassName) {
-                if (theme === 'dark') {
-                    document.body.classList.add('dark-mode');
-                    document.body.classList.remove('light-mode');
+    }
+    /**
+     * Handle keydown events
+     */
+    handleKeydown(event) {
+        for (const [shortcutId, shortcut] of this.shortcuts) {
+            if (this.matchesShortcut(event, shortcut)) {
+                // Check for override
+                const override = this.overrides.get(shortcutId);
+                if (override && !this.matchesOverride(event, override)) {
+                    continue; // Skip if override doesn't match
                 }
-                else {
-                    document.body.classList.add('light-mode');
-                    document.body.classList.remove('dark-mode');
+                if (shortcut.preventDefault !== false) {
+                    event.preventDefault();
                 }
+                if (shortcut.stopPropagation) {
+                    event.stopPropagation();
+                }
+                console.log(`⌨️ [KeyboardShortcut] Executing shortcut: ${shortcutId}`);
+                shortcut.action();
+                break; // Only execute one shortcut per keydown
             }
         }
     }
     /**
-     * Get system theme preference
+     * Check if event matches shortcut
      */
-    getSystemTheme() {
-        if (!this.isBrowser) {
-            return 'light';
-        }
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark';
-        }
-        return 'light';
+    matchesShortcut(event, shortcut) {
+        return event.key === shortcut.key &&
+            (shortcut.ctrlKey === undefined || event.ctrlKey === shortcut.ctrlKey) &&
+            (shortcut.altKey === undefined || event.altKey === shortcut.altKey) &&
+            (shortcut.shiftKey === undefined || event.shiftKey === shortcut.shiftKey) &&
+            (shortcut.metaKey === undefined || event.metaKey === shortcut.metaKey);
     }
     /**
-     * Listen to system theme changes
+     * Check if event matches override
      */
-    listenToSystemTheme() {
-        if (!this.isBrowser || !window.matchMedia) {
-            return;
-        }
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const handler = (e) => {
-            if (this.currentTheme$.value === 'auto') {
-                const effectiveTheme = e.matches ? 'dark' : 'light';
-                this.effectiveTheme$.next(effectiveTheme);
-                this.applyTheme(effectiveTheme);
-            }
-        };
-        // Modern browsers
-        if (mediaQuery.addEventListener) {
-            mediaQuery.addEventListener('change', handler);
-        }
-        else if (mediaQuery.addListener) {
-            // Legacy browsers
-            mediaQuery.addListener(handler);
-        }
+    matchesOverride(event, override) {
+        return event.key === override.newKey &&
+            (override.newCtrlKey === undefined || event.ctrlKey === override.newCtrlKey) &&
+            (override.newAltKey === undefined || event.altKey === override.newAltKey) &&
+            (override.newShiftKey === undefined || event.shiftKey === override.newShiftKey) &&
+            (override.newMetaKey === undefined || event.metaKey === override.newMetaKey);
     }
     /**
-     * Save theme preference to localStorage
+     * Get human-readable key description
      */
-    saveThemePreference(theme) {
-        if (!this.isBrowser) {
-            return;
-        }
-        try {
-            // Save in new format: 'light', 'dark', or 'auto'
-            localStorage.setItem(this.config.storageKey, theme);
-            // Also update old format for backward compatibility
-            // This allows old code that reads 'true'/'false' to still work
-            if (theme === 'dark') {
-                localStorage.setItem(this.config.storageKey, 'dark');
-            }
-            else if (theme === 'light') {
-                localStorage.setItem(this.config.storageKey, 'light');
-            }
-        }
-        catch (error) {
-            console.warn('Failed to save theme preference to localStorage:', error);
-        }
+    getKeyDescription(shortcut) {
+        const modifiers = [];
+        if (shortcut.ctrlKey)
+            modifiers.push('Ctrl');
+        if (shortcut.altKey)
+            modifiers.push('Alt');
+        if (shortcut.shiftKey)
+            modifiers.push('Shift');
+        if (shortcut.metaKey)
+            modifiers.push('Meta');
+        return [...modifiers, shortcut.key].join(' + ');
     }
     /**
-     * Load theme preference from localStorage
+     * Get key description for a shortcut ID
      */
-    loadThemePreference() {
-        if (!this.isBrowser) {
-            return null;
-        }
-        try {
-            const saved = localStorage.getItem(this.config.storageKey);
-            // Handle new format: 'light', 'dark', 'auto'
-            if (saved && ['light', 'dark', 'auto'].includes(saved)) {
-                return saved;
-            }
-            // Handle legacy format: 'true' (dark mode) or 'false' (light mode)
-            if (saved === 'true') {
-                // Migrate to new format
-                localStorage.setItem(this.config.storageKey, 'dark');
-                return 'dark';
-            }
-            else if (saved === 'false') {
-                // Migrate to new format
-                localStorage.setItem(this.config.storageKey, 'light');
-                return 'light';
-            }
-        }
-        catch (error) {
-            console.warn('Failed to load theme preference from localStorage:', error);
+    getKeyDescriptionForShortcut(shortcutId) {
+        const shortcut = this.shortcuts.get(shortcutId);
+        if (!shortcut)
+            return 'Not found';
+        const override = this.overrides.get(shortcutId);
+        if (override) {
+            return this.getKeyDescription({
+                key: override.newKey,
+                ctrlKey: override.newCtrlKey,
+                altKey: override.newAltKey,
+                shiftKey: override.newShiftKey,
+                metaKey: override.newMetaKey
+            });
         }
-        return null;
+        return this.getKeyDescription(shortcut);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ConfirmationService {
+    // Modern signal-based state management
+    confirmationQueue = signal([], ...(ngDevMode ? [{ debugName: "confirmationQueue" }] : []));
+    currentRequest = signal(null, ...(ngDevMode ? [{ debugName: "currentRequest" }] : []));
+    // Modern computed signals with proper typing
+    hasActiveConfirmation = computed(() => this.currentRequest() !== null, ...(ngDevMode ? [{ debugName: "hasActiveConfirmation" }] : []));
+    queueLength = computed(() => this.confirmationQueue().length, ...(ngDevMode ? [{ debugName: "queueLength" }] : []));
+    constructor() {
+        // Modern service initialization
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
     }
     /**
-     * Clear saved theme preference
+     * Ask for confirmation with a simple yes/no dialog
      */
-    clearThemePreference() {
-        if (!this.isBrowser) {
+    ask(options) {
+        console.log('🔔 ConfirmationService.ask called with options:', options);
+        return new Promise((resolve, reject) => {
+            const request = {
+                id: this.generateId(),
+                title: options.title,
+                message: options.message,
+                type: options.type || 'warning',
+                icon: options.icon || this.getDefaultIcon(options.type || 'warning'),
+                confirmText: options.confirmText || 'Confirm',
+                cancelText: options.cancelText || 'Cancel',
+                resolve: (value) => resolve(value),
+                reject
+            };
+            console.log('🔽 Ask for confirmation with a simple yes/no dialog', request);
+            this.addToQueue(request);
+        });
+    }
+    /**
+     * Ask for confirmation with custom template and return custom data
+     */
+    askWithTemplate(options) {
+        return new Promise((resolve, reject) => {
+            const request = {
+                id: this.generateId(),
+                title: options.title,
+                message: options.message,
+                type: options.type || 'info',
+                icon: options.icon || this.getDefaultIcon(options.type || 'info'),
+                confirmText: options.confirmText || 'Confirm',
+                cancelText: options.cancelText || 'Cancel',
+                customTemplate: options.customTemplate,
+                customData: options.customData,
+                resolve: (value) => resolve(value),
+                reject
+            };
+            // Cast to unknown for queue compatibility
+            this.addToQueue(request);
+        });
+    }
+    /**
+     * Quick confirmation for dangerous actions
+     */
+    confirmDelete(itemName) {
+        return this.ask({
+            title: 'Confirm Delete',
+            message: itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : 'Are you sure you want to delete this item? This action cannot be undone.',
+            type: 'danger',
+            icon: 'delete_forever',
+            confirmText: 'Delete',
+            cancelText: 'Cancel'
+        });
+    }
+    /**
+     * Quick confirmation for permanent actions
+     */
+    confirmPermanentAction(action, itemName) {
+        return this.ask({
+            title: `Confirm ${action}`,
+            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"? This action cannot be undone.` : `Are you sure you want to ${action.toLowerCase()}? This action cannot be undone.`,
+            type: 'danger',
+            icon: 'warning',
+            confirmText: action,
+            cancelText: 'Cancel'
+        });
+    }
+    /**
+     * Quick confirmation for safe actions
+     */
+    confirmSafeAction(action, itemName) {
+        return this.ask({
+            title: `Confirm ${action}`,
+            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"?` : `Are you sure you want to ${action.toLowerCase()}?`,
+            type: 'info',
+            icon: 'info',
+            confirmText: action,
+            cancelText: 'Cancel'
+        });
+    }
+    // Modern private methods with proper typing
+    addToQueue(request) {
+        this.confirmationQueue.update(queue => [...queue, request]);
+        console.log('🔔 Added request to queue:', request);
+        this.processQueue();
+    }
+    processQueue() {
+        console.log('🔔 Processing queue. Current request:', this.currentRequest(), 'Queue length:', this.confirmationQueue().length);
+        if (this.currentRequest() || this.confirmationQueue().length === 0) {
             return;
         }
-        try {
-            localStorage.removeItem(this.config.storageKey);
-        }
-        catch (error) {
-            console.warn('Failed to clear theme preference from localStorage:', error);
-        }
+        const nextRequest = this.confirmationQueue()[0];
+        console.log('🔔 Setting current request:', nextRequest);
+        this.currentRequest.set(nextRequest);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, providedIn: 'root' });
+    // Modern public methods with proper typing
+    confirmCurrentRequest(data) {
+        const request = this.currentRequest();
+        if (!request)
+            return;
+        // Always resolve with true for confirmation, unless custom data is explicitly provided
+        const resolvedValue = data !== undefined ? data : true;
+        console.log('🔔 Confirming request with value:', resolvedValue);
+        request.resolve(resolvedValue);
+        this.removeCurrentRequest();
+    }
+    cancelCurrentRequest() {
+        const request = this.currentRequest();
+        if (!request)
+            return;
+        request.reject(new Error('User cancelled'));
+        this.removeCurrentRequest();
+    }
+    removeCurrentRequest() {
+        this.confirmationQueue.update(queue => queue.slice(1));
+        this.currentRequest.set(null);
+        // Process next request if any
+        setTimeout(() => this.processQueue(), 100);
+    }
+    generateId() {
+        return `confirmation-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    // Modern private utility method with proper typing
+    getDefaultIcon(type) {
+        const iconMap = {
+            danger: 'error',
+            warning: 'warning',
+            info: 'info',
+            success: 'done'
+        };
+        return iconMap[type];
+    }
+    // Modern public getters with proper typing
+    getCurrentRequest() {
+        return this.currentRequest;
+    }
+    getHasActiveConfirmation() {
+        return this.hasActiveConfirmation;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -14249,5 +14331,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
+export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map