codexly-ui 0.3.0 → 0.4.1

package/fesm2022/codexly-ui.mjs

@@ -4850,6 +4850,46 @@ const UPLOAD_SIZE_MAP = {
     md: { zone: 'py-9 px-8 gap-3', icon: 'lg', title: 'text-sm', hint: 'text-xs' },
     lg: { zone: 'py-12 px-10 gap-4', icon: 'xl', title: 'text-base', hint: 'text-sm' },
 };
+const FILE_TYPE_BY_MIME = {
+    'application/pdf': { icon: 'picture_as_pdf', color: 'red' },
+    'application/msword': { icon: 'description', color: 'blue' },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { icon: 'description', color: 'blue' },
+    'application/vnd.ms-excel': { icon: 'table_chart', color: 'green' },
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': { icon: 'table_chart', color: 'green' },
+    'text/csv': { icon: 'table_chart', color: 'green' },
+    'application/vnd.ms-powerpoint': { icon: 'slideshow', color: 'orange' },
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': { icon: 'slideshow', color: 'orange' },
+    'text/plain': { icon: 'article', color: 'slate' },
+    'application/zip': { icon: 'folder_zip', color: 'amber' },
+    'application/x-zip-compressed': { icon: 'folder_zip', color: 'amber' },
+    'application/x-rar-compressed': { icon: 'folder_zip', color: 'amber' },
+    'application/x-7z-compressed': { icon: 'folder_zip', color: 'amber' },
+};
+const FILE_TYPE_BY_EXTENSION = {
+    pdf: { icon: 'picture_as_pdf', color: 'red' },
+    doc: { icon: 'description', color: 'blue' },
+    docx: { icon: 'description', color: 'blue' },
+    xls: { icon: 'table_chart', color: 'green' },
+    xlsx: { icon: 'table_chart', color: 'green' },
+    csv: { icon: 'table_chart', color: 'green' },
+    ppt: { icon: 'slideshow', color: 'orange' },
+    pptx: { icon: 'slideshow', color: 'orange' },
+    txt: { icon: 'article', color: 'slate' },
+    zip: { icon: 'folder_zip', color: 'amber' },
+    rar: { icon: 'folder_zip', color: 'amber' },
+    '7z': { icon: 'folder_zip', color: 'amber' },
+};
+const FILE_TYPE_DEFAULT = { icon: 'draft', color: 'slate' };
+function resolveFileTypeVisual(name, mimeType) {
+    if (mimeType?.startsWith('video/'))
+        return { icon: 'movie', color: 'purple' };
+    if (mimeType?.startsWith('audio/'))
+        return { icon: 'audiotrack', color: 'pink' };
+    if (mimeType && FILE_TYPE_BY_MIME[mimeType])
+        return FILE_TYPE_BY_MIME[mimeType];
+    const ext = name.split('.').pop()?.toLowerCase() ?? '';
+    return FILE_TYPE_BY_EXTENSION[ext] ?? FILE_TYPE_DEFAULT;
+}
 
 class ClxUploadComponent {
     _themeSvc = inject(ClxThemeService);
@@ -4863,13 +4903,20 @@ class ClxUploadComponent {
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Already-persisted files (e.g. previously uploaded to the backend). Rendered in the same
+     *  preview grid as newly-selected local files. The component never deletes these itself —
+     *  removing one only emits `existingFileRemove`, letting the caller decide (e.g. call the API). */
+    existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : /* istanbul ignore next */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     onUploadError = output();
     onUploadSuccess = output();
+    existingFileRemove = output();
     // ── Internal state ─────────────────────────────────────────────────────────
     _files = signal([], ...(ngDevMode ? [{ debugName: "_files" }] : /* istanbul ignore next */ []));
     _isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
     _errorKey = signal(null, ...(ngDevMode ? [{ debugName: "_errorKey" }] : /* istanbul ignore next */ []));
+    /** File → object URL cache, so we don't re-create (and leak) a new URL on every re-render. */
+    _objectUrls = new Map();
     // ── CVA ────────────────────────────────────────────────────────────────────
     _ngControl = inject(NgControl, { optional: true, self: true });
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
@@ -4886,11 +4933,36 @@ class ClxUploadComponent {
     _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => UPLOAD_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _isError = computed(() => this._errorKey() !== null, ...(ngDevMode ? [{ debugName: "_isError" }] : /* istanbul ignore next */ []));
-    _fileItemClass = computed(() => {
-        const t = resolveColor(this._color());
-        return `flex items-center gap-2 rounded-lg border px-3 py-2 transition-colors ${t.borderLight} ${t.bgSubtle}`;
-    }, ...(ngDevMode ? [{ debugName: "_fileItemClass" }] : /* istanbul ignore next */ []));
-    _fileIconClass = computed(() => resolveColor(this._color()).textSubtle, ...(ngDevMode ? [{ debugName: "_fileIconClass" }] : /* istanbul ignore next */ []));
+    _thumbClass = computed(() => `relative group flex flex-col ${resolveRadius(this._themeSvc.config().borderRadius)} overflow-hidden border border-clx-border bg-clx-surface-2`, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
+    _previewItems = computed(() => {
+        const existing = this.existingFiles().map(f => ({
+            kind: 'existing',
+            key: `existing:${f.id}`,
+            name: f.name ?? '',
+            isImage: true,
+            thumbUrl: f.url,
+            fileIcon: '',
+            fileColor: '',
+            status: f.status,
+            existing: f,
+        }));
+        const fresh = this._files().map(file => {
+            const isImage = file.type.startsWith('image/');
+            const visual = isImage ? null : resolveFileTypeVisual(file.name, file.type);
+            return {
+                kind: 'new',
+                key: `new:${file.name}:${file.size}:${file.lastModified}`,
+                name: file.name,
+                size: file.size,
+                isImage,
+                thumbUrl: isImage ? this._getObjectUrl(file) : null,
+                fileIcon: visual?.icon ?? '',
+                fileColor: visual?.color ?? '',
+                file,
+            };
+        });
+        return [...existing, ...fresh];
+    }, ...(ngDevMode ? [{ debugName: "_previewItems" }] : /* istanbul ignore next */ []));
     _zoneClass = computed(() => {
         const base = [
             'flex flex-col items-center justify-center text-center',
@@ -4957,15 +5029,13 @@ class ClxUploadComponent {
     // ── CVA implementation ─────────────────────────────────────────────────────
     writeValue(value) {
         this._cvaConnected = true;
-        if (!value) {
-            this._files.set([]);
-        }
-        else if (Array.isArray(value)) {
-            this._files.set(value);
-        }
-        else {
-            this._files.set([value]);
+        const next = !value ? [] : Array.isArray(value) ? value : [value];
+        const nextSet = new Set(next);
+        for (const file of this._files()) {
+            if (!nextSet.has(file))
+                this._releaseObjectUrl(file);
         }
+        this._files.set(next);
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -5004,13 +5074,39 @@ class ClxUploadComponent {
         if (files?.length)
             this._addFiles(files);
     }
-    _removeFile(file) {
+    _removeItem(item) {
+        if (item.kind === 'existing') {
+            this.existingFileRemove.emit(item.existing.id);
+            return;
+        }
+        const file = item.file;
         this._files.update(current => current.filter(f => f !== file));
+        this._releaseObjectUrl(file);
         this._errorKey.set(null);
         this._ngControl?.control?.setErrors(null);
         this._emit();
         this._onTouched();
     }
+    _getObjectUrl(file) {
+        let url = this._objectUrls.get(file);
+        if (!url) {
+            url = URL.createObjectURL(file);
+            this._objectUrls.set(file, url);
+        }
+        return url;
+    }
+    _releaseObjectUrl(file) {
+        const url = this._objectUrls.get(file);
+        if (url) {
+            URL.revokeObjectURL(url);
+            this._objectUrls.delete(file);
+        }
+    }
+    ngOnDestroy() {
+        for (const url of this._objectUrls.values())
+            URL.revokeObjectURL(url);
+        this._objectUrls.clear();
+    }
     // ── Helpers ────────────────────────────────────────────────────────────────
     _addFiles(rawFiles) {
         const files = Array.from(rawFiles);
@@ -5083,7 +5179,7 @@ class ClxUploadComponent {
         return `${(bytes / 1_048_576).toFixed(1)} MB`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxUploadComponent, isStandalone: true, selector: "clx-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadError: "onUploadError", onUploadSuccess: "onUploadSuccess" }, host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxUploadComponent, isStandalone: true, selector: "clx-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, existingFiles: { classPropertyName: "existingFiles", publicName: "existingFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadError: "onUploadError", onUploadSuccess: "onUploadSuccess", existingFileRemove: "existingFileRemove" }, host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <!-- Hidden file input -->
     <input
       #fileInput
@@ -5127,24 +5223,51 @@ class ClxUploadComponent {
       </div>
     </div>
 
-    <!-- ── File list ─────────────────────────────────────────────────────────── -->
-    @if (_files().length) {
-      <div class="mt-3 space-y-2">
-        @for (file of _files(); track file.name + file.size) {
-          <div [class]="_fileItemClass()">
-            <span clx-icon name="description" size="sm" [class]="_fileIconClass() + ' shrink-0'"></span>
-            <span class="flex-1 text-sm text-clx-text-label font-medium truncate">{{ file.name }}</span>
-            <span class="text-xs text-clx-text-muted shrink-0">{{ _formatSize(file.size) }}</span>
-            <button
-              clx-button
-              variant="ghost"
-              [color]="_color()"
-              shape="circle"
-              size="sm"
-              icon="close"
-              [iconOnly]="true"
-              (click)="_removeFile(file); $event.stopPropagation()">
-            </button>
+    <!-- ── Preview list (existing + new files, images get a real thumbnail) ───── -->
+    @if (_previewItems().length) {
+      <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 gap-2">
+        @for (item of _previewItems(); track item.key) {
+          <div [class]="_thumbClass()">
+            <div class="relative aspect-square w-full overflow-hidden">
+              @if (item.isImage) {
+                <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
+              } @else {
+                <div class="w-full h-full flex items-center justify-center bg-clx-surface-3">
+                  <span clx-icon [name]="item.fileIcon" size="lg" [class]="'text-' + item.fileColor + '-500'"></span>
+                </div>
+              }
+
+              @if (item.status === 'PENDING' || item.status === 'PROCESSING') {
+                <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1">
+                  <span clx-icon name="progress_activity" size="md" class="text-white animate-spin"></span>
+                </div>
+              } @else if (item.status === 'FAILED') {
+                <div class="absolute inset-0 bg-red-500/40 flex items-center justify-center">
+                  <span clx-icon name="error" size="md" class="text-white"></span>
+                </div>
+              }
+
+              <button
+                clx-button
+                type="button"
+                variant="solid"
+                color="red"
+                shape="circle"
+                size="xs"
+                icon="close"
+                [iconOnly]="true"
+                class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shadow-md"
+                [disabled]="_disabled()"
+                (click)="_removeItem(item); $event.stopPropagation()">
+              </button>
+            </div>
+
+            <div class="px-1.5 py-1 w-full min-w-0">
+              <p class="text-[11px] leading-tight text-clx-text-label font-medium truncate" [title]="item.name">{{ item.name }}</p>
+              @if (item.size !== undefined) {
+                <p class="text-[10px] leading-tight text-clx-text-muted">{{ _formatSize(item.size) }}</p>
+              }
+            </div>
           </div>
         }
       </div>
@@ -5157,14 +5280,14 @@ class ClxUploadComponent {
         {{ _errorMessage() }}
       </p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxUploadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-upload',
                     standalone: true,
-                    imports: [ClxButtonComponent, ClxIconComponent],
+                    imports: [ClxIconComponent, ClxButtonComponent],
                     template: `
     <!-- Hidden file input -->
     <input
@@ -5209,24 +5332,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
     </div>
 
-    <!-- ── File list ─────────────────────────────────────────────────────────── -->
-    @if (_files().length) {
-      <div class="mt-3 space-y-2">
-        @for (file of _files(); track file.name + file.size) {
-          <div [class]="_fileItemClass()">
-            <span clx-icon name="description" size="sm" [class]="_fileIconClass() + ' shrink-0'"></span>
-            <span class="flex-1 text-sm text-clx-text-label font-medium truncate">{{ file.name }}</span>
-            <span class="text-xs text-clx-text-muted shrink-0">{{ _formatSize(file.size) }}</span>
-            <button
-              clx-button
-              variant="ghost"
-              [color]="_color()"
-              shape="circle"
-              size="sm"
-              icon="close"
-              [iconOnly]="true"
-              (click)="_removeFile(file); $event.stopPropagation()">
-            </button>
+    <!-- ── Preview list (existing + new files, images get a real thumbnail) ───── -->
+    @if (_previewItems().length) {
+      <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 gap-2">
+        @for (item of _previewItems(); track item.key) {
+          <div [class]="_thumbClass()">
+            <div class="relative aspect-square w-full overflow-hidden">
+              @if (item.isImage) {
+                <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
+              } @else {
+                <div class="w-full h-full flex items-center justify-center bg-clx-surface-3">
+                  <span clx-icon [name]="item.fileIcon" size="lg" [class]="'text-' + item.fileColor + '-500'"></span>
+                </div>
+              }
+
+              @if (item.status === 'PENDING' || item.status === 'PROCESSING') {
+                <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1">
+                  <span clx-icon name="progress_activity" size="md" class="text-white animate-spin"></span>
+                </div>
+              } @else if (item.status === 'FAILED') {
+                <div class="absolute inset-0 bg-red-500/40 flex items-center justify-center">
+                  <span clx-icon name="error" size="md" class="text-white"></span>
+                </div>
+              }
+
+              <button
+                clx-button
+                type="button"
+                variant="solid"
+                color="red"
+                shape="circle"
+                size="xs"
+                icon="close"
+                [iconOnly]="true"
+                class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shadow-md"
+                [disabled]="_disabled()"
+                (click)="_removeItem(item); $event.stopPropagation()">
+              </button>
+            </div>
+
+            <div class="px-1.5 py-1 w-full min-w-0">
+              <p class="text-[11px] leading-tight text-clx-text-label font-medium truncate" [title]="item.name">{{ item.name }}</p>
+              @if (item.size !== undefined) {
+                <p class="text-[10px] leading-tight text-clx-text-muted">{{ _formatSize(item.size) }}</p>
+              }
+            </div>
           </div>
         }
       </div>
@@ -5246,7 +5396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         class: 'block w-full',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onUploadError: [{ type: i0.Output, args: ["onUploadError"] }], onUploadSuccess: [{ type: i0.Output, args: ["onUploadSuccess"] }], _fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], existingFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFiles", required: false }] }], onUploadError: [{ type: i0.Output, args: ["onUploadError"] }], onUploadSuccess: [{ type: i0.Output, args: ["onUploadSuccess"] }], existingFileRemove: [{ type: i0.Output, args: ["existingFileRemove"] }], _fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 const COLOR_PICKER_SIZE_MAP = {
     sm: { minH: 'min-h-8', text: 'text-sm', label: 'text-xs font-medium', hint: 'text-xs', px: 'px-2.5', swatchSz: 'w-4 h-4', btnSize: 'xs' },