cloud-ide-element 1.1.96 → 1.1.99

package/fesm2022/cloud-ide-element.mjs

@@ -5318,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          @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"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n          @if (isInErrorState() && failedFile()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n              (click)=\"retryUpload(); $event.stopPropagation()\"\n              [disabled]=\"isUploading() || disabledSignal()\"\n              title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry Upload\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n      <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n        <button type=\"button\" \n                class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                (click)=\"retryUpload()\"\n                [disabled]=\"isUploading() || disabledSignal()\">\n          <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (isInErrorState() && failedFile()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                    (click)=\"retryUpload(); $event.stopPropagation()\"\n                    [disabled]=\"isUploading() || disabledSignal()\"\n                    title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry\n            </button>\n          }\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n    <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\" \n              class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n              (click)=\"retryUpload()\"\n              [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -5333,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          @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> " }]
+                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n          @if (isInErrorState() && failedFile()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n              (click)=\"retryUpload(); $event.stopPropagation()\"\n              [disabled]=\"isUploading() || disabledSignal()\"\n              title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry Upload\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n      <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n        <button type=\"button\" \n                class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                (click)=\"retryUpload()\"\n                [disabled]=\"isUploading() || disabledSignal()\">\n          <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (isInErrorState() && failedFile()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n                    (click)=\"retryUpload(); $event.stopPropagation()\"\n                    [disabled]=\"isUploading() || disabledSignal()\"\n                    title=\"Retry upload\">\n              <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n              Retry\n            </button>\n          }\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n    <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\" \n              class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\" \n              (click)=\"retryUpload()\"\n              [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> " }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], accept: [{
@@ -6560,6 +6560,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }] });
 
+/**
+ * Default Currency Configuration
+ * Defaults to Indian Rupees (INR)
+ */
+const DEFAULT_CURRENCY_CONFIG = {
+    currencyCode: 'INR',
+    currencySymbol: '₹',
+    displayFormat: 'symbol_before',
+    showSymbol: true,
+    showCode: false,
+    decimalPlaces: 2,
+    thousandSeparator: ',',
+    decimalSeparator: '.',
+    locale: 'en-IN',
+    roundingMethod: 'round',
+    roundingPrecision: 0.01
+};
+
+/**
+ * Currency Service
+ *
+ * Manages global currency configuration with support for:
+ * - Loading from financial config data (app must fetch data first)
+ * - Override capabilities
+ * - App state persistence
+ * - Reactive updates using Angular Signals
+ * - Default currency: Indian Rupees (INR, ₹)
+ *
+ * Note: This service does NOT call APIs. The app must fetch financial config
+ * data and pass it to loadFromFinancialConfigData() method.
+ *
+ * @example
+ * ```typescript
+ * // In app initialization (e.g., after login)
+ * // First, fetch financial config from your app's service
+ * const response = await financialConfigService.getFinancialConfigById(...).toPromise();
+ * if (response?.success && response?.data) {
+ *   currencyService.loadFromFinancialConfigData(response.data);
+ * }
+ *
+ * // In component
+ * const formatted = currencyService.format(1000); // "₹1,000.00"
+ *
+ * // Override for specific use case
+ * const formatted = currencyService.format(1000, { currencySymbol: '$' });
+ * ```
+ */
+class CurrencyService {
+    // Global currency configuration (reactive signal)
+    configSignal = signal({ ...DEFAULT_CURRENCY_CONFIG }, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));
+    // Override configuration (temporary overrides)
+    overrideSignal = signal(null, ...(ngDevMode ? [{ debugName: "overrideSignal" }] : []));
+    // Loading state
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    // Computed: Active configuration (config + override)
+    config = computed(() => {
+        const base = this.configSignal();
+        const override = this.overrideSignal();
+        return override ? { ...base, ...override } : base;
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    // Computed: Currency symbol
+    currencySymbol = computed(() => this.config().currencySymbol || '₹', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : []));
+    // Computed: Currency code
+    currencyCode = computed(() => this.config().currencyCode || 'INR', ...(ngDevMode ? [{ debugName: "currencyCode" }] : []));
+    constructor() {
+        // Load from localStorage on initialization
+        this.loadFromLocalStorage();
+        // Save to localStorage whenever config changes
+        effect(() => {
+            const config = this.configSignal();
+            this.saveToLocalStorage(config);
+        });
+    }
+    /**
+     * Set currency configuration
+     * @param config - Currency configuration to set
+     */
+    setConfig(config) {
+        this.configSignal.set({ ...DEFAULT_CURRENCY_CONFIG, ...config });
+        this.error.set(null);
+    }
+    /**
+     * Update currency configuration (partial update)
+     * @param updates - Partial currency configuration
+     */
+    updateConfig(updates) {
+        this.configSignal.update(current => ({ ...current, ...updates }));
+    }
+    /**
+     * Set temporary override (takes precedence over base config)
+     * @param override - Partial currency configuration to override
+     */
+    setOverride(override) {
+        this.overrideSignal.set(override);
+    }
+    /**
+     * Clear override (revert to base config)
+     */
+    clearOverride() {
+        this.overrideSignal.set(null);
+    }
+    /**
+     * Load currency configuration from financial config data
+     * This method accepts financial config data that should be fetched by the app
+     * The app is responsible for calling the API and passing the data here
+     *
+     * @param financialConfigData - Financial config data object from accounts library
+     * @example
+     * ```typescript
+     * // In your app, fetch financial config first
+     * const financialConfig = await financialConfigService.getFinancialConfigById(...);
+     * // Then pass it to currency service
+     * currencyService.loadFromFinancialConfigData(financialConfig.data);
+     * ```
+     */
+    loadFromFinancialConfigData(financialConfigData) {
+        if (!financialConfigData) {
+            this.error.set('Financial config data is required');
+            return;
+        }
+        this.loading.set(true);
+        this.error.set(null);
+        try {
+            this.mapFinancialConfigToCurrencyConfig(financialConfigData);
+        }
+        catch (error) {
+            console.error('Error loading financial config:', error);
+            this.error.set(error?.message || 'Failed to load financial configuration');
+            // Fallback to default config (INR)
+            this.configSignal.set({ ...DEFAULT_CURRENCY_CONFIG });
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    /**
+     * Map financial config data to currency config
+     * This method expects the financial config data structure from accounts library
+     */
+    mapFinancialConfigToCurrencyConfig(financialConfig) {
+        // Extract currency info from populated currency object
+        let currencyCode = 'INR';
+        let currencySymbol = '₹';
+        if (financialConfig.accfincfg_default_currency_id_sycr) {
+            const currency = financialConfig.accfincfg_default_currency_id_sycr;
+            if (typeof currency === 'object' && currency !== null) {
+                currencyCode = currency.sycr_code || currencyCode;
+                currencySymbol = currency.sycr_symbol || currencySymbol;
+            }
+            else if (typeof currency === 'string') {
+                // If it's just an ID string, use defaults
+                currencyCode = 'INR';
+                currencySymbol = '₹';
+            }
+        }
+        const config = {
+            currencyCode,
+            currencySymbol,
+            displayFormat: financialConfig.accfincfg_currency_display_format || 'symbol_before',
+            showSymbol: financialConfig.accfincfg_show_currency_symbol !== false,
+            showCode: financialConfig.accfincfg_show_currency_code === true,
+            decimalPlaces: financialConfig.accfincfg_currency_decimal_places ?? 2,
+            thousandSeparator: financialConfig.accfincfg_currency_thousand_separator || ',',
+            decimalSeparator: financialConfig.accfincfg_currency_decimal_separator || '.',
+            locale: this.getLocaleFromCurrency(currencyCode),
+            roundingMethod: financialConfig.accfincfg_rounding_method || 'round',
+            roundingPrecision: financialConfig.accfincfg_rounding_precision || 0.01
+        };
+        this.setConfig(config);
+    }
+    /**
+     * Get locale based on currency code
+     */
+    getLocaleFromCurrency(currencyCode) {
+        const localeMap = {
+            'USD': 'en-US',
+            'INR': 'en-IN',
+            'EUR': 'en-GB',
+            'GBP': 'en-GB',
+            'JPY': 'ja-JP',
+            'CNY': 'zh-CN',
+            'AUD': 'en-AU',
+            'CAD': 'en-CA'
+        };
+        return localeMap[currencyCode] || 'en-IN'; // Default to Indian locale
+    }
+    /**
+     * Format a number as currency
+     * @param value - Number to format
+     * @param override - Optional override configuration
+     * @returns Formatted currency string
+     */
+    format(value, override) {
+        if (value === null || value === undefined) {
+            return this.formatNumber(0, override);
+        }
+        const num = typeof value === 'string' ? parseFloat(value) : value;
+        if (isNaN(num)) {
+            return 'N/A';
+        }
+        return this.formatNumber(num, override);
+    }
+    /**
+     * Format number with currency configuration
+     */
+    formatNumber(value, override) {
+        const config = override ? { ...this.config(), ...override } : this.config();
+        // Apply rounding
+        let roundedValue = value;
+        if (config.roundingMethod && config.roundingMethod !== 'none' && config.roundingPrecision) {
+            const precision = config.roundingPrecision;
+            switch (config.roundingMethod) {
+                case 'round':
+                    roundedValue = Math.round(value / precision) * precision;
+                    break;
+                case 'floor':
+                    roundedValue = Math.floor(value / precision) * precision;
+                    break;
+                case 'ceiling':
+                    roundedValue = Math.ceil(value / precision) * precision;
+                    break;
+            }
+        }
+        // Format number with decimal places
+        const decimalPlaces = config.decimalPlaces ?? 2;
+        const formattedNumber = roundedValue.toFixed(decimalPlaces);
+        // Apply custom separators if needed
+        let formatted = formattedNumber;
+        if (config.thousandSeparator || config.decimalSeparator) {
+            const parts = formattedNumber.split('.');
+            const integerPart = parts[0];
+            const decimalPart = parts[1] || '';
+            // Apply thousand separator
+            let formattedInteger = integerPart;
+            if (config.thousandSeparator && config.thousandSeparator !== ',') {
+                formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, config.thousandSeparator);
+            }
+            else {
+                formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            }
+            // Apply decimal separator
+            const separator = config.decimalSeparator || '.';
+            formatted = decimalPart ? `${formattedInteger}${separator}${decimalPart}` : formattedInteger;
+        }
+        // Apply currency symbol/code based on display format
+        const symbol = config.currencySymbol || '₹';
+        const code = config.currencyCode || 'INR';
+        const displayFormat = config.displayFormat || 'symbol_before';
+        let result = formatted;
+        if (config.showCode && config.showSymbol) {
+            // Show both symbol and code
+            switch (displayFormat) {
+                case 'symbol_before':
+                    result = `${symbol}${formatted} (${code})`;
+                    break;
+                case 'symbol_after':
+                    result = `${formatted}${symbol} (${code})`;
+                    break;
+                case 'code_before':
+                    result = `${code} ${formatted} (${symbol})`;
+                    break;
+                case 'code_after':
+                    result = `${formatted} ${code} (${symbol})`;
+                    break;
+            }
+        }
+        else if (config.showSymbol) {
+            // Show symbol only
+            switch (displayFormat) {
+                case 'symbol_before':
+                    result = `${symbol}${formatted}`;
+                    break;
+                case 'symbol_after':
+                    result = `${formatted}${symbol}`;
+                    break;
+                default:
+                    result = `${symbol}${formatted}`;
+            }
+        }
+        else if (config.showCode) {
+            // Show code only
+            switch (displayFormat) {
+                case 'code_before':
+                    result = `${code} ${formatted}`;
+                    break;
+                case 'code_after':
+                    result = `${formatted} ${code}`;
+                    break;
+                default:
+                    result = `${code} ${formatted}`;
+            }
+        }
+        return result;
+    }
+    /**
+     * Load configuration from localStorage
+     */
+    loadFromLocalStorage() {
+        try {
+            const stored = localStorage.getItem('cide_currency_config');
+            if (stored) {
+                const config = JSON.parse(stored);
+                this.configSignal.set({ ...DEFAULT_CURRENCY_CONFIG, ...config });
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load currency config from localStorage:', error);
+        }
+    }
+    /**
+     * Save configuration to localStorage
+     */
+    saveToLocalStorage(config) {
+        try {
+            localStorage.setItem('cide_currency_config', JSON.stringify(config));
+        }
+        catch (error) {
+            console.warn('Failed to save currency config to localStorage:', error);
+        }
+    }
+    /**
+     * Reset to default configuration
+     */
+    reset() {
+        this.configSignal.set({ ...DEFAULT_CURRENCY_CONFIG });
+        this.overrideSignal.set(null);
+        this.error.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrencyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrencyService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrencyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Currency Pipe
+ *
+ * Formats numbers as currency using global currency configuration.
+ * Supports override for specific formatting needs.
+ *
+ * @example
+ * ```html
+ * <!-- Use global config -->
+ * <span>{{ amount | currency }}</span>
+ *
+ * <!-- Override symbol -->
+ * <span>{{ amount | currency: { currencySymbol: '₹' } }}</span>
+ *
+ * <!-- Override decimal places -->
+ * <span>{{ amount | currency: { decimalPlaces: 0 } }}</span>
+ *
+ * <!-- Override display format -->
+ * <span>{{ amount | currency: { displayFormat: 'symbol_after' } }}</span>
+ * ```
+ */
+class CurrencyPipe {
+    currencyService = inject(CurrencyService);
+    /**
+     * Transform number to formatted currency string
+     * @param value - Number to format
+     * @param override - Optional override configuration
+     * @returns Formatted currency string
+     */
+    transform(value, override) {
+        return this.currencyService.format(value, override);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: CurrencyPipe, isStandalone: true, name: "currency" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'currency',
+                    standalone: true,
+                    pure: true // Pure pipe for better performance
+                }]
+        }] });
+
 class TooltipDirective {
     el;
     renderer;
@@ -7719,11 +8102,11 @@ class CideEleThemeToggleComponent {
         }, 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 }] });
+    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\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"] }]
+            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\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"] }]
         }] });
 
 /**
@@ -14331,5 +14714,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, 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 };
+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, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map