@styloviz/file-upload 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# @styloviz/file-upload
+
+> Drag-and-drop file uploader with previews, type/size validation and progress.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/file-upload
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvFileUploadComponent } from '@styloviz/file-upload';
+
+@Component({
+  standalone: true,
+  imports: [SvFileUploadComponent],
+  template: `
+    <sv-file-upload />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `FileUploadVariant` | `'button'` | Trigger style: button or drag-and-drop dropzone. |
+| `size` | `FileUploadSize` | `'md'` | Control size: sm, md or lg. |
+| `accept` | `string` | `''` | Accepted file types (e.g. "image/*,.pdf"). |
+| `multiple` | `boolean` | `true` | Allow selecting multiple files. |
+| `maxFiles` | `number` | `10` | Maximum number of files. |
+| `maxSizeMb` | `number` | `10` | Per-file size limit in MB. |
+| `disabled` | `boolean` | `false` | Disable the uploader. |
+| `autoSimulate` | `boolean` | `false` | Simulate upload progress after a file is added (demo only). |
+| `label` | `string` | `'Upload files'` | Trigger/label text. |
+| `hint` | `string` | `''` | Helper text shown under the trigger. |
+| `customClass` | `string` | `''` | Extra CSS classes for the root. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `filesChange` | `UploadFile[]` | Emitted with the full file list whenever it changes. |
+| `fileAdded` | `UploadFile` | Emitted when a single file is added. |
+| `fileRemoved` | `string` | Emitted with the id of a removed file. |
+| `uploadComplete` | `UploadFile[]` | Emitted when all uploads finish successfully. |
+| `uploadError` | `UploadFile` | Emitted when a file fails validation or upload. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs
+
+## License
+
+MIT

package/fesm2022/styloviz-file-upload.mjs

@@ -0,0 +1,335 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, input, output, signal, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformBrowser, NgClass } from '@angular/common';
+
+const FILE_ICONS = {
+    pdf: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M11 13H9M15 17H9M15 13h-1',
+    doc: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M16 17H8M16 13H8M10 9H8',
+    xls: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M8 13l8 8M16 13l-8 8',
+    zip: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M12 18v-7M9 15l3 3 3-3',
+    img: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
+    vid: 'M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58a2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02l5.5-3.02-5.5-3.02v6.04z',
+    audio: 'M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm12-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z',
+    file: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6',
+};
+const EXT_MAP = {
+    pdf: 'pdf', doc: 'doc', docx: 'doc', xls: 'xls', xlsx: 'xls',
+    zip: 'zip', rar: 'zip', gz: 'zip',
+    mp4: 'vid', mov: 'vid', avi: 'vid', webm: 'vid',
+    mp3: 'audio', wav: 'audio', ogg: 'audio',
+    png: 'img', jpg: 'img', jpeg: 'img', gif: 'img', webp: 'img', svg: 'img',
+};
+const BADGE_COLOR = {
+    pdf: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+    doc: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+    xls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+    zip: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+    img: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+    vid: 'bg-pink-100 text-pink-700 dark:bg-pink-900/40 dark:text-pink-300',
+    audio: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',
+    file: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
+};
+class SvFileUploadComponent {
+    static idCounter = 0;
+    platformId = inject(PLATFORM_ID);
+    uid() {
+        return `uf-${++SvFileUploadComponent.idCounter}-${Math.random().toString(36).slice(2, 7)}`;
+    }
+    // ── Inputs ─────────────────────────────────────────────────────────────────
+    /** Trigger style: button or drag-and-drop dropzone. @default 'button' */
+    variant = input('button', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Control size: sm, md or lg. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Accepted file types (e.g. "image/*,.pdf"). */
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ [])); // e.g. "image/*,.pdf"
+    /** Allow selecting multiple files. @default true */
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Maximum number of files. @default 10 */
+    maxFiles = input(10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    /** Per-file size limit in MB. @default 10 */
+    maxSizeMb = input(10, ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : /* istanbul ignore next */ [])); // per-file max in MB
+    /** Disable the uploader. @default false */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Simulate upload progress after a file is added (demo only). @default false */
+    autoSimulate = input(false, ...(ngDevMode ? [{ debugName: "autoSimulate" }] : /* istanbul ignore next */ [])); // simulate progress after add — opt-in only
+    /** Trigger/label text. @default 'Upload files' */
+    label = input('Upload files', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper text shown under the trigger. */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes for the root. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ────────────────────────────────────────────────────────────────
+    /** Emitted with the full file list whenever it changes. */
+    filesChange = output();
+    /** Emitted when a single file is added. */
+    fileAdded = output();
+    /** Emitted with the id of a removed file. */
+    fileRemoved = output();
+    /** Emitted when all uploads finish successfully. */
+    uploadComplete = output();
+    /** Emitted when a file fails validation or upload. */
+    uploadError = output();
+    // ── Internal state ─────────────────────────────────────────────────────────
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    timers = [];
+    // ── Computed helpers ───────────────────────────────────────────────────────
+    hasFiles = computed(() => this.files().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : /* istanbul ignore next */ []));
+    canAddMore = computed(() => this.files().length < this.maxFiles(), ...(ngDevMode ? [{ debugName: "canAddMore" }] : /* istanbul ignore next */ []));
+    successCount = computed(() => this.files().filter(f => f.status === 'success').length, ...(ngDevMode ? [{ debugName: "successCount" }] : /* istanbul ignore next */ []));
+    errorCount = computed(() => this.files().filter(f => f.status === 'error').length, ...(ngDevMode ? [{ debugName: "errorCount" }] : /* istanbul ignore next */ []));
+    uploadingCount = computed(() => this.files().filter(f => f.status === 'uploading').length, ...(ngDevMode ? [{ debugName: "uploadingCount" }] : /* istanbul ignore next */ []));
+    overallProgress = computed(() => {
+        const all = this.files();
+        if (!all.length)
+            return 0;
+        return Math.round(all.reduce((s, f) => s + f.progress, 0) / all.length);
+    }, ...(ngDevMode ? [{ debugName: "overallProgress" }] : /* istanbul ignore next */ []));
+    /** Screen-reader status summary (announced politely via an aria-live region). */
+    statusMessage = computed(() => {
+        const all = this.files();
+        if (!all.length)
+            return '';
+        const up = this.uploadingCount();
+        if (up > 0)
+            return `Uploading ${up} file${up === 1 ? '' : 's'}, ${this.overallProgress()} percent`;
+        const parts = [`${all.length} file${all.length === 1 ? '' : 's'} selected`];
+        if (this.successCount())
+            parts.push(`${this.successCount()} uploaded`);
+        if (this.errorCount())
+            parts.push(`${this.errorCount()} failed`);
+        return parts.join(', ');
+    }, ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
+    // ── Zone classes ───────────────────────────────────────────────────────────
+    zoneClasses = computed(() => {
+        const drag = this.isDragOver();
+        const dis = this.disabled();
+        const base = [
+            'relative flex flex-col items-center justify-center rounded-xl border-2 border-dashed',
+            'transition-all duration-200 cursor-pointer outline-none',
+            'focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2',
+        ];
+        const sizes = {
+            sm: 'gap-2 px-6 py-8',
+            md: 'gap-3 px-8 py-12',
+            lg: 'gap-4 px-10 py-16',
+        };
+        base.push(sizes[this.size()]);
+        if (dis) {
+            base.push('border-gray-200 bg-gray-50 opacity-60 cursor-not-allowed dark:border-gray-700 dark:bg-gray-800/40');
+        }
+        else if (drag) {
+            base.push('border-primary-400 bg-primary-50/60 dark:border-primary-500 dark:bg-primary-900/20 scale-[1.01]');
+        }
+        else {
+            base.push('border-gray-300 bg-gray-50/50 hover:border-primary-400 hover:bg-primary-50/30 dark:border-gray-700 dark:bg-gray-800/30 dark:hover:border-primary-500 dark:hover:bg-primary-900/10');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "zoneClasses" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => ({ sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' })[this.size()], ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => ({ sm: 'text-sm', md: 'text-base', lg: 'text-lg' })[this.size()], ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    hintClass = computed(() => ({ sm: 'text-xs', md: 'text-sm', lg: 'text-base' })[this.size()], ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
+    // ── Public helpers used in template ───────────────────────────────────────
+    getIcon(file) {
+        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
+        const kind = EXT_MAP[ext] ?? (file.type.startsWith('image/') ? 'img' : 'file');
+        return FILE_ICONS[kind] ?? FILE_ICONS['file'];
+    }
+    getBadgeColor(file) {
+        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
+        const kind = EXT_MAP[ext] ?? (file.type.startsWith('image/') ? 'img' : 'file');
+        return BADGE_COLOR[kind] ?? BADGE_COLOR['file'];
+    }
+    getExtLabel(file) {
+        return (file.name.split('.').pop()?.toUpperCase() ?? 'FILE').slice(0, 5);
+    }
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 ** 2)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+    }
+    isImage(file) {
+        return file.type.startsWith('image/') && !!file.preview;
+    }
+    // ── File input / drag ─────────────────────────────────────────────────────
+    openFilePicker() {
+        if (this.disabled() || !this.canAddMore())
+            return;
+        this.fileInput()?.nativeElement.click();
+    }
+    onFileInputChange(e) {
+        const input = e.target;
+        if (input.files)
+            this.addFiles(Array.from(input.files));
+        input.value = '';
+    }
+    onDragOver(e) {
+        e.preventDefault();
+        if (!this.disabled())
+            this.isDragOver.set(true);
+    }
+    onDragLeave(e) {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            this.isDragOver.set(false);
+        }
+    }
+    onDrop(e) {
+        e.preventDefault();
+        this.isDragOver.set(false);
+        if (this.disabled())
+            return;
+        const dropped = Array.from(e.dataTransfer?.files ?? []);
+        this.addFiles(dropped);
+    }
+    onZoneKeydown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.openFilePicker();
+        }
+    }
+    /** Whether a file matches the `accept` filter (mime, mime/*, or .ext). */
+    isAccepted(file) {
+        const accept = this.accept().trim();
+        if (!accept)
+            return true;
+        const tokens = accept.split(',').map(t => t.trim().toLowerCase()).filter(Boolean);
+        if (!tokens.length)
+            return true;
+        const name = file.name.toLowerCase();
+        const type = file.type.toLowerCase();
+        return tokens.some(tok => {
+            if (tok.startsWith('.'))
+                return name.endsWith(tok);
+            if (tok.endsWith('/*'))
+                return type.startsWith(tok.slice(0, -1));
+            return type === tok;
+        });
+    }
+    // ── Core file logic ────────────────────────────────────────────────────────
+    addFiles(rawFiles) {
+        const remaining = this.maxFiles() - this.files().length;
+        const toAdd = this.multiple() ? rawFiles.slice(0, remaining) : rawFiles.slice(0, 1);
+        const newEntries = [];
+        for (const file of toAdd) {
+            const sizeMb = file.size / 1024 / 1024;
+            const entry = {
+                id: this.uid(),
+                file,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                status: 'pending',
+                progress: 0,
+            };
+            if (sizeMb > this.maxSizeMb()) {
+                entry.status = 'error';
+                entry.errorMsg = `File exceeds ${this.maxSizeMb()} MB limit`;
+                entry.progress = 0;
+                this.uploadError.emit(entry);
+            }
+            else if (!this.isAccepted(file)) {
+                entry.status = 'error';
+                entry.errorMsg = 'File type not allowed';
+                entry.progress = 0;
+                this.uploadError.emit(entry);
+            }
+            // Generate preview for images
+            if (file.type.startsWith('image/') && entry.status !== 'error') {
+                const reader = new FileReader();
+                reader.onload = (ev) => {
+                    this.files.update(list => list.map(f => f.id === entry.id ? { ...f, preview: ev.target?.result } : f));
+                };
+                reader.readAsDataURL(file);
+            }
+            newEntries.push(entry);
+        }
+        this.files.update(list => [...list, ...newEntries]);
+        for (const entry of newEntries) {
+            this.fileAdded.emit(entry);
+            if (entry.status !== 'error' && this.autoSimulate()) {
+                this.simulateUpload(entry.id);
+            }
+        }
+        this.filesChange.emit(this.files());
+    }
+    simulateUpload(id) {
+        // Skip simulation in SSR environments where setTimeout is unreliable.
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.files.update(list => list.map(f => f.id === id ? { ...f, status: 'uploading' } : f));
+        const duration = 1200 + Math.random() * 1800;
+        const interval = 80;
+        const steps = Math.round(duration / interval);
+        let step = 0;
+        const tick = () => {
+            step++;
+            const progress = Math.min(100, Math.round((step / steps) * 100));
+            const isDone = step >= steps;
+            const hasErr = Math.random() < 0.08 && progress > 40 && !isDone; // 8% random error
+            this.files.update(list => list.map(f => {
+                if (f.id !== id)
+                    return f;
+                if (hasErr)
+                    return { ...f, status: 'error', progress, errorMsg: 'Upload failed — server error' };
+                if (isDone)
+                    return { ...f, status: 'success', progress: 100 };
+                return { ...f, progress };
+            }));
+            if (hasErr) {
+                const errFile = this.files().find(f => f.id === id);
+                if (errFile)
+                    this.uploadError.emit(errFile);
+                return;
+            }
+            if (isDone) {
+                const allDone = this.files().every(f => f.status === 'success' || f.status === 'error');
+                if (allDone)
+                    this.uploadComplete.emit(this.files());
+                return;
+            }
+            const t = setTimeout(tick, interval);
+            this.timers.push(t);
+        };
+        const t0 = setTimeout(tick, interval);
+        this.timers.push(t0);
+    }
+    retryFile(id) {
+        if (this.disabled())
+            return;
+        this.files.update(list => list.map(f => f.id === id ? { ...f, status: 'pending', progress: 0, errorMsg: undefined } : f));
+        if (this.autoSimulate())
+            this.simulateUpload(id);
+    }
+    removeFile(id) {
+        if (this.disabled())
+            return;
+        this.files.update(list => list.filter(f => f.id !== id));
+        this.fileRemoved.emit(id);
+        this.filesChange.emit(this.files());
+    }
+    clearAll() {
+        if (this.disabled())
+            return;
+        this.files.set([]);
+        this.filesChange.emit([]);
+    }
+    ngOnDestroy() {
+        this.timers.forEach(t => clearTimeout(t));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvFileUploadComponent, isStandalone: true, selector: "sv-file-upload", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoSimulate: { classPropertyName: "autoSimulate", publicName: "autoSimulate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "filesChange", fileAdded: "fileAdded", fileRemoved: "fileRemoved", uploadComplete: "uploadComplete", uploadError: "uploadError" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Root -->\n<div [ngClass]=\"['flex flex-col gap-4 w-full', customClass()]\">\n\n  <!-- \u2500\u2500 BUTTON trigger (free tier supports the button variant only) \u2500\u2500 -->\n\n    <div class=\"flex items-center gap-3\">\n      <button\n        type=\"button\"\n        [disabled]=\"disabled() || !canAddMore()\"\n        class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium\n               text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none\n               focus-visible:ring-2 focus-visible:ring-primary-400\n               disabled:cursor-not-allowed disabled:opacity-50\n               dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        (click)=\"openFilePicker()\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12\"/>\n        </svg>\n        {{ label() }}\n      </button>\n      @if (hint()) {\n        <span class=\"text-sm text-gray-500 dark:text-gray-400\">{{ hint() }}</span>\n      }\n    </div>\n\n  <!-- Hidden file input -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileInputChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Screen-reader status announcements -->\n  <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</p>\n\n  <!-- \u2500\u2500 Overall progress bar (while uploading) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (uploadingCount() > 0) {\n    <div class=\"space-y-1\">\n      <div class=\"flex items-center justify-between text-xs text-gray-500 dark:text-gray-400\">\n        <span>Uploading {{ uploadingCount() }} file{{ uploadingCount() === 1 ? '' : 's' }}\u2026</span>\n        <span class=\"tabular-nums font-medium\">{{ overallProgress() }}%</span>\n      </div>\n      <div\n        class=\"h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"overallProgress()\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"Overall upload progress\"\n      >\n        <div\n          class=\"h-full rounded-full bg-primary-500 transition-all duration-150 dark:bg-primary-400\"\n          [style.width.%]=\"overallProgress()\"\n        ></div>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 File list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (hasFiles()) {\n    <ul class=\"space-y-2\" role=\"list\" aria-label=\"Uploaded files\">\n\n      @for (file of files(); track file.id) {\n        <li\n          [ngClass]=\"[\n            'group flex items-center gap-3 rounded-xl border p-3 transition-colors',\n            file.status === 'error'\n              ? 'border-red-200 bg-red-50 dark:border-red-800/50 dark:bg-red-900/10'\n              : file.status === 'success'\n                ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-900/10'\n                : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50'\n          ]\"\n        >\n\n          <!-- Thumbnail or type badge -->\n          <div class=\"relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg\"\n               [ngClass]=\"isImage(file)\n                 ? 'border border-gray-200 dark:border-gray-700'\n                 : 'bg-gray-100 dark:bg-gray-800'\">\n            @if (isImage(file)) {\n              <img [src]=\"file.preview\" [alt]=\"file.name\"\n                   class=\"h-full w-full object-cover\" aria-hidden=\"true\"/>\n            } @else {\n              <svg class=\"h-5 w-5 text-gray-500 dark:text-gray-400\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"1.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path [attr.d]=\"getIcon(file)\"/>\n              </svg>\n            }\n          </div>\n\n          <!-- File info -->\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"flex items-center gap-2\">\n              <p class=\"truncate text-sm font-medium text-gray-800 dark:text-gray-100\"\n                 [title]=\"file.name\">{{ file.name }}</p>\n              <span [ngClass]=\"['shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold', getBadgeColor(file)]\">\n                {{ getExtLabel(file) }}\n              </span>\n            </div>\n            <div class=\"mt-0.5 flex items-center gap-2\">\n              <span class=\"text-xs text-gray-500 dark:text-gray-400\">{{ formatSize(file.size) }}</span>\n\n              @if (file.status === 'uploading') {\n                <span class=\"text-xs text-gray-500 dark:text-gray-400 tabular-nums\">{{ file.progress }}%</span>\n              } @else if (file.status === 'success') {\n                <span class=\"flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\">\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                       stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"m20 6-11 11-5-5\"/>\n                  </svg>\n                  Uploaded\n                </span>\n              } @else if (file.status === 'error') {\n                <span class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\">\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                       stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                    <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n                    <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n                  </svg>\n                  {{ file.errorMsg ?? 'Upload failed' }}\n                </span>\n              } @else {\n                <span class=\"text-xs text-gray-500 dark:text-gray-400\">Pending</span>\n              }\n            </div>\n\n            <!-- Progress bar -->\n            @if (file.status === 'uploading' || (file.status === 'pending' && autoSimulate())) {\n              <div\n                class=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"file.progress\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                [attr.aria-label]=\"'Uploading ' + file.name\"\n              >\n                <div\n                  class=\"h-full rounded-full bg-primary-500 transition-all duration-150 dark:bg-primary-400\"\n                  [style.width.%]=\"file.progress\"\n                ></div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions -->\n          <div class=\"flex shrink-0 items-center gap-1\">\n\n            <!-- Retry button (error) -->\n            @if (file.status === 'error') {\n              <button\n                type=\"button\"\n                class=\"flex h-7 w-7 items-center justify-center rounded-lg text-gray-400\n                       transition-colors hover:bg-gray-100 hover:text-primary-600\n                       dark:hover:bg-gray-700 dark:hover:text-primary-400 focus:outline-none\n                       focus-visible:ring-1 focus-visible:ring-primary-400 disabled:opacity-40 disabled:cursor-not-allowed\"\n                [attr.aria-label]=\"'Retry ' + file.name\"\n                [disabled]=\"disabled()\"\n                (click)=\"retryFile(file.id)\"\n              >\n                <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2.5\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polyline points=\"1 4 1 10 7 10\"/>\n                  <path d=\"M3.51 15a9 9 0 1 0 .49-4.3\"/>\n                </svg>\n              </button>\n            }\n\n            <!-- Spinning indicator for uploading -->\n            @if (file.status === 'uploading') {\n              <span class=\"flex h-7 w-7 items-center justify-center text-primary-500 dark:text-primary-400\" aria-hidden=\"true\">\n                <svg class=\"h-4 w-4 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"/>\n                  <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n                </svg>\n              </span>\n            }\n\n            <!-- Remove button -->\n            <button\n              type=\"button\"\n              class=\"flex h-7 w-7 items-center justify-center rounded-lg text-gray-400\n                     transition-colors hover:bg-gray-100 hover:text-red-500\n                     dark:hover:bg-gray-700 dark:hover:text-red-400 focus:outline-none\n                     focus-visible:ring-1 focus-visible:ring-red-400 disabled:opacity-40 disabled:cursor-not-allowed\"\n              [attr.aria-label]=\"'Remove ' + file.name\"\n              [disabled]=\"disabled()\"\n              (click)=\"removeFile(file.id)\"\n            >\n              <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M18 6 6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n\n          </div>\n        </li>\n      }\n\n    </ul>\n\n    <!-- File list footer -->\n    <div class=\"flex items-center justify-between\">\n      <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n        {{ files().length }} file{{ files().length === 1 ? '' : 's' }}\n        @if (successCount() > 0) {\n          &nbsp;&middot;&nbsp;\n          <span class=\"text-emerald-600 dark:text-emerald-400 font-medium\">{{ successCount() }} uploaded</span>\n        }\n        @if (errorCount() > 0) {\n          &nbsp;&middot;&nbsp;\n          <span class=\"text-red-600 dark:text-red-400 font-medium\">{{ errorCount() }} failed</span>\n        }\n      </p>\n      <button\n        type=\"button\"\n        class=\"text-xs text-gray-400 transition-colors hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400\n               focus:outline-none focus-visible:ring-1 focus-visible:ring-red-400 rounded disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"disabled()\"\n        (click)=\"clearAll()\"\n        aria-label=\"Remove all files\"\n      >\n        Clear all\n      </button>\n    </div>\n  }\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-file-upload', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Root -->\n<div [ngClass]=\"['flex flex-col gap-4 w-full', customClass()]\">\n\n  <!-- \u2500\u2500 BUTTON trigger (free tier supports the button variant only) \u2500\u2500 -->\n\n    <div class=\"flex items-center gap-3\">\n      <button\n        type=\"button\"\n        [disabled]=\"disabled() || !canAddMore()\"\n        class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium\n               text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none\n               focus-visible:ring-2 focus-visible:ring-primary-400\n               disabled:cursor-not-allowed disabled:opacity-50\n               dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        (click)=\"openFilePicker()\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12\"/>\n        </svg>\n        {{ label() }}\n      </button>\n      @if (hint()) {\n        <span class=\"text-sm text-gray-500 dark:text-gray-400\">{{ hint() }}</span>\n      }\n    </div>\n\n  <!-- Hidden file input -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileInputChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Screen-reader status announcements -->\n  <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</p>\n\n  <!-- \u2500\u2500 Overall progress bar (while uploading) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (uploadingCount() > 0) {\n    <div class=\"space-y-1\">\n      <div class=\"flex items-center justify-between text-xs text-gray-500 dark:text-gray-400\">\n        <span>Uploading {{ uploadingCount() }} file{{ uploadingCount() === 1 ? '' : 's' }}\u2026</span>\n        <span class=\"tabular-nums font-medium\">{{ overallProgress() }}%</span>\n      </div>\n      <div\n        class=\"h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"overallProgress()\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"Overall upload progress\"\n      >\n        <div\n          class=\"h-full rounded-full bg-primary-500 transition-all duration-150 dark:bg-primary-400\"\n          [style.width.%]=\"overallProgress()\"\n        ></div>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 File list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (hasFiles()) {\n    <ul class=\"space-y-2\" role=\"list\" aria-label=\"Uploaded files\">\n\n      @for (file of files(); track file.id) {\n        <li\n          [ngClass]=\"[\n            'group flex items-center gap-3 rounded-xl border p-3 transition-colors',\n            file.status === 'error'\n              ? 'border-red-200 bg-red-50 dark:border-red-800/50 dark:bg-red-900/10'\n              : file.status === 'success'\n                ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-900/10'\n                : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50'\n          ]\"\n        >\n\n          <!-- Thumbnail or type badge -->\n          <div class=\"relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg\"\n               [ngClass]=\"isImage(file)\n                 ? 'border border-gray-200 dark:border-gray-700'\n                 : 'bg-gray-100 dark:bg-gray-800'\">\n            @if (isImage(file)) {\n              <img [src]=\"file.preview\" [alt]=\"file.name\"\n                   class=\"h-full w-full object-cover\" aria-hidden=\"true\"/>\n            } @else {\n              <svg class=\"h-5 w-5 text-gray-500 dark:text-gray-400\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"1.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path [attr.d]=\"getIcon(file)\"/>\n              </svg>\n            }\n          </div>\n\n          <!-- File info -->\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"flex items-center gap-2\">\n              <p class=\"truncate text-sm font-medium text-gray-800 dark:text-gray-100\"\n                 [title]=\"file.name\">{{ file.name }}</p>\n              <span [ngClass]=\"['shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold', getBadgeColor(file)]\">\n                {{ getExtLabel(file) }}\n              </span>\n            </div>\n            <div class=\"mt-0.5 flex items-center gap-2\">\n              <span class=\"text-xs text-gray-500 dark:text-gray-400\">{{ formatSize(file.size) }}</span>\n\n              @if (file.status === 'uploading') {\n                <span class=\"text-xs text-gray-500 dark:text-gray-400 tabular-nums\">{{ file.progress }}%</span>\n              } @else if (file.status === 'success') {\n                <span class=\"flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\">\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                       stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"m20 6-11 11-5-5\"/>\n                  </svg>\n                  Uploaded\n                </span>\n              } @else if (file.status === 'error') {\n                <span class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\">\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                       stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                    <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n                    <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n                  </svg>\n                  {{ file.errorMsg ?? 'Upload failed' }}\n                </span>\n              } @else {\n                <span class=\"text-xs text-gray-500 dark:text-gray-400\">Pending</span>\n              }\n            </div>\n\n            <!-- Progress bar -->\n            @if (file.status === 'uploading' || (file.status === 'pending' && autoSimulate())) {\n              <div\n                class=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"file.progress\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                [attr.aria-label]=\"'Uploading ' + file.name\"\n              >\n                <div\n                  class=\"h-full rounded-full bg-primary-500 transition-all duration-150 dark:bg-primary-400\"\n                  [style.width.%]=\"file.progress\"\n                ></div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions -->\n          <div class=\"flex shrink-0 items-center gap-1\">\n\n            <!-- Retry button (error) -->\n            @if (file.status === 'error') {\n              <button\n                type=\"button\"\n                class=\"flex h-7 w-7 items-center justify-center rounded-lg text-gray-400\n                       transition-colors hover:bg-gray-100 hover:text-primary-600\n                       dark:hover:bg-gray-700 dark:hover:text-primary-400 focus:outline-none\n                       focus-visible:ring-1 focus-visible:ring-primary-400 disabled:opacity-40 disabled:cursor-not-allowed\"\n                [attr.aria-label]=\"'Retry ' + file.name\"\n                [disabled]=\"disabled()\"\n                (click)=\"retryFile(file.id)\"\n              >\n                <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2.5\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polyline points=\"1 4 1 10 7 10\"/>\n                  <path d=\"M3.51 15a9 9 0 1 0 .49-4.3\"/>\n                </svg>\n              </button>\n            }\n\n            <!-- Spinning indicator for uploading -->\n            @if (file.status === 'uploading') {\n              <span class=\"flex h-7 w-7 items-center justify-center text-primary-500 dark:text-primary-400\" aria-hidden=\"true\">\n                <svg class=\"h-4 w-4 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"/>\n                  <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n                </svg>\n              </span>\n            }\n\n            <!-- Remove button -->\n            <button\n              type=\"button\"\n              class=\"flex h-7 w-7 items-center justify-center rounded-lg text-gray-400\n                     transition-colors hover:bg-gray-100 hover:text-red-500\n                     dark:hover:bg-gray-700 dark:hover:text-red-400 focus:outline-none\n                     focus-visible:ring-1 focus-visible:ring-red-400 disabled:opacity-40 disabled:cursor-not-allowed\"\n              [attr.aria-label]=\"'Remove ' + file.name\"\n              [disabled]=\"disabled()\"\n              (click)=\"removeFile(file.id)\"\n            >\n              <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M18 6 6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n\n          </div>\n        </li>\n      }\n\n    </ul>\n\n    <!-- File list footer -->\n    <div class=\"flex items-center justify-between\">\n      <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n        {{ files().length }} file{{ files().length === 1 ? '' : 's' }}\n        @if (successCount() > 0) {\n          &nbsp;&middot;&nbsp;\n          <span class=\"text-emerald-600 dark:text-emerald-400 font-medium\">{{ successCount() }} uploaded</span>\n        }\n        @if (errorCount() > 0) {\n          &nbsp;&middot;&nbsp;\n          <span class=\"text-red-600 dark:text-red-400 font-medium\">{{ errorCount() }} failed</span>\n        }\n      </p>\n      <button\n        type=\"button\"\n        class=\"text-xs text-gray-400 transition-colors hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400\n               focus:outline-none focus-visible:ring-1 focus-visible:ring-red-400 rounded disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"disabled()\"\n        (click)=\"clearAll()\"\n        aria-label=\"Remove all files\"\n      >\n        Clear all\n      </button>\n    </div>\n  }\n\n</div>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoSimulate: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSimulate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], fileAdded: [{ type: i0.Output, args: ["fileAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], uploadComplete: [{ type: i0.Output, args: ["uploadComplete"] }], uploadError: [{ type: i0.Output, args: ["uploadError"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvFileUploadComponent };
+//# sourceMappingURL=styloviz-file-upload.mjs.map

package/fesm2022/styloviz-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-file-upload.mjs","sources":["../../../../projects/file-upload-free/src/lib/file-upload.component.ts","../../../../projects/file-upload-free/src/lib/file-upload.component.html","../../../../projects/file-upload-free/src/styloviz-file-upload.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  PLATFORM_ID,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { isPlatformBrowser, NgClass } from '@angular/common';\n\nexport type FileUploadVariant = 'button';\nexport type FileUploadSize    = 'sm' | 'md' | 'lg';\nexport type UploadFileStatus  = 'pending' | 'uploading' | 'success' | 'error';\n\nexport interface UploadFile {\n  id: string;\n  file: File;\n  name: string;\n  size: number;\n  type: string;\n  status: UploadFileStatus;\n  progress: number;\n  preview?: string;       // data-url for images\n  errorMsg?: string;\n}\n\nconst FILE_ICONS: Record<string, string> = {\n  pdf:  'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M11 13H9M15 17H9M15 13h-1',\n  doc:  'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M16 17H8M16 13H8M10 9H8',\n  xls:  'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M8 13l8 8M16 13l-8 8',\n  zip:  'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M12 18v-7M9 15l3 3 3-3',\n  img:  'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',\n  vid:  'M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58a2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02l5.5-3.02-5.5-3.02v6.04z',\n  audio:'M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm12-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z',\n  file: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6',\n};\n\nconst EXT_MAP: Record<string, string> = {\n  pdf: 'pdf', doc: 'doc', docx: 'doc', xls: 'xls', xlsx: 'xls',\n  zip: 'zip', rar: 'zip', gz: 'zip',\n  mp4: 'vid', mov: 'vid', avi: 'vid', webm: 'vid',\n  mp3: 'audio', wav: 'audio', ogg: 'audio',\n  png: 'img', jpg: 'img', jpeg: 'img', gif: 'img', webp: 'img', svg: 'img',\n};\n\nconst BADGE_COLOR: Record<string, string> = {\n  pdf:   'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',\n  doc:   'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',\n  xls:   'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',\n  zip:   'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',\n  img:   'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',\n  vid:   'bg-pink-100 text-pink-700 dark:bg-pink-900/40 dark:text-pink-300',\n  audio: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',\n  file:  'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',\n};\n\n@Component({\n  selector: 'sv-file-upload',\n  standalone: true,\n  imports: [NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './file-upload.component.html',\n})\nexport class SvFileUploadComponent implements OnDestroy {\n  private static idCounter = 0;\n  private readonly platformId = inject(PLATFORM_ID);\n\n  private uid(): string {\n    return `uf-${++SvFileUploadComponent.idCounter}-${Math.random().toString(36).slice(2, 7)}`;\n  }\n\n  // ── Inputs ─────────────────────────────────────────────────────────────────\n  /** Trigger style: button or drag-and-drop dropzone. @default 'button' */\n  variant = input<FileUploadVariant>('button');\n  /** Control size: sm, md or lg. @default 'md' */\n  size         = input<FileUploadSize>('md');\n  /** Accepted file types (e.g. \"image/*,.pdf\"). */\n  accept       = input<string>('');          // e.g. \"image/*,.pdf\"\n  /** Allow selecting multiple files. @default true */\n  multiple     = input(true);\n  /** Maximum number of files. @default 10 */\n  maxFiles     = input(10);\n  /** Per-file size limit in MB. @default 10 */\n  maxSizeMb    = input(10);                  // per-file max in MB\n  /** Disable the uploader. @default false */\n  disabled     = input(false);\n  /** Simulate upload progress after a file is added (demo only). @default false */\n  autoSimulate = input(false);              // simulate progress after add — opt-in only\n  /** Trigger/label text. @default 'Upload files' */\n  label        = input('Upload files');\n  /** Helper text shown under the trigger. */\n  hint         = input('');\n  /** Extra CSS classes for the root. */\n  customClass  = input('');\n\n  // ── Outputs ────────────────────────────────────────────────────────────────\n  /** Emitted with the full file list whenever it changes. */\n  filesChange     = output<UploadFile[]>();\n  /** Emitted when a single file is added. */\n  fileAdded       = output<UploadFile>();\n  /** Emitted with the id of a removed file. */\n  fileRemoved     = output<string>();\n  /** Emitted when all uploads finish successfully. */\n  uploadComplete  = output<UploadFile[]>();\n  /** Emitted when a file fails validation or upload. */\n  uploadError     = output<UploadFile>();\n\n  // ── Internal state ─────────────────────────────────────────────────────────\n  files      = signal<UploadFile[]>([]);\n  isDragOver = signal(false);\n\n  private fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n  private timers: number[] = [];\n\n  // ── Computed helpers ───────────────────────────────────────────────────────\n  hasFiles     = computed(() => this.files().length > 0);\n  canAddMore   = computed(() => this.files().length < this.maxFiles());\n  successCount = computed(() => this.files().filter(f => f.status === 'success').length);\n  errorCount   = computed(() => this.files().filter(f => f.status === 'error').length);\n  uploadingCount = computed(() => this.files().filter(f => f.status === 'uploading').length);\n\n  overallProgress = computed(() => {\n    const all = this.files();\n    if (!all.length) return 0;\n    return Math.round(all.reduce((s, f) => s + f.progress, 0) / all.length);\n  });\n\n  /** Screen-reader status summary (announced politely via an aria-live region). */\n  statusMessage = computed<string>(() => {\n    const all = this.files();\n    if (!all.length) return '';\n    const up = this.uploadingCount();\n    if (up > 0) return `Uploading ${up} file${up === 1 ? '' : 's'}, ${this.overallProgress()} percent`;\n    const parts = [`${all.length} file${all.length === 1 ? '' : 's'} selected`];\n    if (this.successCount()) parts.push(`${this.successCount()} uploaded`);\n    if (this.errorCount())   parts.push(`${this.errorCount()} failed`);\n    return parts.join(', ');\n  });\n\n  // ── Zone classes ───────────────────────────────────────────────────────────\n  zoneClasses = computed(() => {\n    const drag = this.isDragOver();\n    const dis  = this.disabled();\n    const base = [\n      'relative flex flex-col items-center justify-center rounded-xl border-2 border-dashed',\n      'transition-all duration-200 cursor-pointer outline-none',\n      'focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2',\n    ];\n    const sizes: Record<FileUploadSize, string> = {\n      sm: 'gap-2 px-6 py-8',\n      md: 'gap-3 px-8 py-12',\n      lg: 'gap-4 px-10 py-16',\n    };\n    base.push(sizes[this.size()]);\n    if (dis) {\n      base.push('border-gray-200 bg-gray-50 opacity-60 cursor-not-allowed dark:border-gray-700 dark:bg-gray-800/40');\n    } else if (drag) {\n      base.push('border-primary-400 bg-primary-50/60 dark:border-primary-500 dark:bg-primary-900/20 scale-[1.01]');\n    } else {\n      base.push('border-gray-300 bg-gray-50/50 hover:border-primary-400 hover:bg-primary-50/30 dark:border-gray-700 dark:bg-gray-800/30 dark:hover:border-primary-500 dark:hover:bg-primary-900/10');\n    }\n    return base.join(' ');\n  });\n\n  iconSize = computed(() => ({ sm: 'h-8 w-8', md: 'h-10 w-10', lg: 'h-12 w-12' })[this.size()]);\n  labelClass = computed(() => ({ sm: 'text-sm', md: 'text-base', lg: 'text-lg' })[this.size()]);\n  hintClass  = computed(() => ({ sm: 'text-xs', md: 'text-sm',  lg: 'text-base' })[this.size()]);\n\n  // ── Public helpers used in template ───────────────────────────────────────\n  getIcon(file: UploadFile): string {\n    const ext = file.name.split('.').pop()?.toLowerCase() ?? '';\n    const kind = EXT_MAP[ext] ?? (file.type.startsWith('image/') ? 'img' : 'file');\n    return FILE_ICONS[kind] ?? FILE_ICONS['file'];\n  }\n\n  getBadgeColor(file: UploadFile): string {\n    const ext = file.name.split('.').pop()?.toLowerCase() ?? '';\n    const kind = EXT_MAP[ext] ?? (file.type.startsWith('image/') ? 'img' : 'file');\n    return BADGE_COLOR[kind] ?? BADGE_COLOR['file'];\n  }\n\n  getExtLabel(file: UploadFile): string {\n    return (file.name.split('.').pop()?.toUpperCase() ?? 'FILE').slice(0, 5);\n  }\n\n  formatSize(bytes: number): string {\n    if (bytes < 1024)       return `${bytes} B`;\n    if (bytes < 1024 ** 2)  return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / 1024 ** 2).toFixed(1)} MB`;\n  }\n\n  isImage(file: UploadFile): boolean {\n    return file.type.startsWith('image/') && !!file.preview;\n  }\n\n  // ── File input / drag ─────────────────────────────────────────────────────\n  openFilePicker(): void {\n    if (this.disabled() || !this.canAddMore()) return;\n    this.fileInput()?.nativeElement.click();\n  }\n\n  onFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (input.files) this.addFiles(Array.from(input.files));\n    input.value = '';\n  }\n\n  onDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (!this.disabled()) this.isDragOver.set(true);\n  }\n\n  onDragLeave(e: DragEvent): void {\n    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {\n      this.isDragOver.set(false);\n    }\n  }\n\n  onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.isDragOver.set(false);\n    if (this.disabled()) return;\n    const dropped = Array.from(e.dataTransfer?.files ?? []);\n    this.addFiles(dropped);\n  }\n\n  onZoneKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.openFilePicker(); }\n  }\n\n  /** Whether a file matches the `accept` filter (mime, mime/*, or .ext). */\n  private isAccepted(file: File): boolean {\n    const accept = this.accept().trim();\n    if (!accept) return true;\n    const tokens = accept.split(',').map(t => t.trim().toLowerCase()).filter(Boolean);\n    if (!tokens.length) return true;\n    const name = file.name.toLowerCase();\n    const type = file.type.toLowerCase();\n    return tokens.some(tok => {\n      if (tok.startsWith('.'))  return name.endsWith(tok);\n      if (tok.endsWith('/*'))   return type.startsWith(tok.slice(0, -1));\n      return type === tok;\n    });\n  }\n\n  // ── Core file logic ────────────────────────────────────────────────────────\n  private addFiles(rawFiles: File[]): void {\n    const remaining = this.maxFiles() - this.files().length;\n    const toAdd = this.multiple() ? rawFiles.slice(0, remaining) : rawFiles.slice(0, 1);\n\n    const newEntries: UploadFile[] = [];\n\n    for (const file of toAdd) {\n      const sizeMb = file.size / 1024 / 1024;\n      const entry: UploadFile = {\n        id:       this.uid(),\n        file,\n        name:     file.name,\n        size:     file.size,\n        type:     file.type,\n        status:   'pending',\n        progress: 0,\n      };\n\n      if (sizeMb > this.maxSizeMb()) {\n        entry.status  = 'error';\n        entry.errorMsg = `File exceeds ${this.maxSizeMb()} MB limit`;\n        entry.progress = 0;\n        this.uploadError.emit(entry);\n      } else if (!this.isAccepted(file)) {\n        entry.status  = 'error';\n        entry.errorMsg = 'File type not allowed';\n        entry.progress = 0;\n        this.uploadError.emit(entry);\n      }\n\n      // Generate preview for images\n      if (file.type.startsWith('image/') && entry.status !== 'error') {\n        const reader = new FileReader();\n        reader.onload = (ev) => {\n          this.files.update(list =>\n            list.map(f => f.id === entry.id ? { ...f, preview: ev.target?.result as string } : f)\n          );\n        };\n        reader.readAsDataURL(file);\n      }\n\n      newEntries.push(entry);\n    }\n\n    this.files.update(list => [...list, ...newEntries]);\n\n    for (const entry of newEntries) {\n      this.fileAdded.emit(entry);\n      if (entry.status !== 'error' && this.autoSimulate()) {\n        this.simulateUpload(entry.id);\n      }\n    }\n\n    this.filesChange.emit(this.files());\n  }\n\n  private simulateUpload(id: string): void {\n    // Skip simulation in SSR environments where setTimeout is unreliable.\n    if (!isPlatformBrowser(this.platformId)) return;\n\n    this.files.update(list =>\n      list.map(f => f.id === id ? { ...f, status: 'uploading' as const } : f)\n    );\n\n    const duration = 1200 + Math.random() * 1800;\n    const interval = 80;\n    const steps    = Math.round(duration / interval);\n    let   step     = 0;\n\n    const tick = () => {\n      step++;\n      const progress = Math.min(100, Math.round((step / steps) * 100));\n      const isDone   = step >= steps;\n      const hasErr   = Math.random() < 0.08 && progress > 40 && !isDone; // 8% random error\n\n      this.files.update(list =>\n        list.map(f => {\n          if (f.id !== id) return f;\n          if (hasErr)  return { ...f, status: 'error'   as const, progress, errorMsg: 'Upload failed — server error' };\n          if (isDone)  return { ...f, status: 'success' as const, progress: 100 };\n          return { ...f, progress };\n        })\n      );\n\n      if (hasErr) {\n        const errFile = this.files().find(f => f.id === id);\n        if (errFile) this.uploadError.emit(errFile);\n        return;\n      }\n\n      if (isDone) {\n        const allDone = this.files().every(f => f.status === 'success' || f.status === 'error');\n        if (allDone) this.uploadComplete.emit(this.files());\n        return;\n      }\n\n      const t = setTimeout(tick, interval);\n      this.timers.push(t);\n    };\n\n    const t0 = setTimeout(tick, interval);\n    this.timers.push(t0);\n  }\n\n  retryFile(id: string): void {\n    if (this.disabled()) return;\n    this.files.update(list =>\n      list.map(f => f.id === id ? { ...f, status: 'pending' as const, progress: 0, errorMsg: undefined } : f)\n    );\n    if (this.autoSimulate()) this.simulateUpload(id);\n  }\n\n  removeFile(id: string): void {\n    if (this.disabled()) return;\n    this.files.update(list => list.filter(f => f.id !== id));\n    this.fileRemoved.emit(id);\n    this.filesChange.emit(this.files());\n  }\n\n  clearAll(): void {\n    if (this.disabled()) return;\n    this.files.set([]);\n    this.filesChange.emit([]);\n  }\n\n  ngOnDestroy(): void {\n    this.timers.forEach(t => clearTimeout(t));\n  }\n}\n","<!-- Root -->\n<div [ngClass]=\"['flex flex-col gap-4 w-full', customClass()]\">\n\n  <!-- ── BUTTON trigger (free tier supports the button variant only) ── -->\n\n    <div class=\"flex items-center gap-3\">\n      <button\n        type=\"button\"\n        [disabled]=\"disabled() || !canAddMore()\"\n        class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium\n               text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none\n               focus-visible:ring-2 focus-visible:ring-primary-400\n               disabled:cursor-not-allowed disabled:opacity-50\n               dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        (click)=\"openFilePicker()\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12\"/>\n        </svg>\n        {{ label() }}\n      </button>\n      @if (hint()) {\n        <span class=\"text-sm text-gray-500 dark:text-gray-400\">{{ hint() }}</span>\n      }\n    </div>\n\n  <!-- Hidden file input -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileInputChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Screen-reader status announcements -->\n  <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</p>\n\n  <!-- ── Overall progress bar (while uploading) ─────────────────────────── -->\n  @if (uploadingCount() > 0) {\n    <div class=\"space-y-1\">\n      <div class=\"flex items-center justify-between text-xs text-gray-500 dark:text-gray-400\">\n        <span>Uploading {{ uploadingCount() }} file{{ uploadingCount() === 1 ? '' : 's' }}…</span>\n        <span class=\"tabular-nums font-medium\">{{ overallProgress() }}%</span>\n      </div>\n      <div\n        class=\"h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"overallProgress()\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"Overall upload progress\"\n      >\n        <div\n          class=\"h-full rounded-full bg-primary-500 transition-all duration-150 dark:bg-primary-400\"\n          [style.width.%]=\"overallProgress()\"\n        ></div>\n      </div>\n    </div>\n  }\n\n  <!-- ── File list ────────────────────────────────────────────────────────── -->\n  @if (hasFiles()) {\n    <ul class=\"space-y-2\" role=\"list\" aria-label=\"Uploaded files\">\n\n      @for (file of files(); track file.id) {\n        <li\n          [ngClass]=\"[\n            'group flex items-center gap-3 rounded-xl border p-3 transition-colors',\n            file.status === 'error'\n              ? 'border-red-200 bg-red-50 dark:border-red-800/50 dark:bg-red-900/10'\n              : file.status === 'success'\n                ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-900/10'\n                : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50'\n          ]\"\n        >\n\n          <!-- Thumbnail or type badge -->\n          <div class=\"relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg\"\n               [ngClass]=\"isImage(file)\n                 ? 'border border-gray-200 dark:border-gray-700'\n                 : 'bg-gray-100 dark:bg-gray-800'\">\n            @if (isImage(file)) {\n              <img [src]=\"file.preview\" [alt]=\"file.name\"\n                   class=\"h-full w-full object-cover\" aria-hidden=\"true\"/>\n            } @else {\n              <svg class=\"h-5 w-5 text-gray-500 dark:text-gray-400\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"1.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path [attr.d]=\"getIcon(file)\"/>\n              </svg>\n            }\n          </div>\n\n          <!-- File info -->\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"flex items-center gap-2\">\n              <p class=\"truncate text-sm font-medium text-gray-800 dark:text-gray-100\"\n                 [title]=\"file.name\">{{ file.name }}</p>\n              <span [ngClass]=\"['shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold', getBadgeColor(file)]\">\n                {{ getExtLabel(file) }}\n              </span>\n            </div>\n            <div class=\"mt-0.5 flex items-center gap-2\">\n              <span class=\"text-xs text-gray-500 dark:text-gray-400\">{{ formatSize(file.size) }}</span>\n\n              @if (file.status === 'uploading') {\n                <span class=\"text-xs text-gray-500 dark:text-gray-400 tabular-nums\">{{ file.progress }}%</span>\n              } @else if (file.status === 'success') {\n                <span class=\"flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\">\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                       stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"m20 6-11 11-5-5\"/>\n                  </svg>\n                  Uploaded\n                </span>\n              } @else if (file.status === 'error') {\n                <span class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\">\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                       stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                    <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n                    <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n                  </svg>\n                  {{ file.errorMsg ?? 'Upload failed' }}\n                </span>\n              } @else {\n                <span class=\"text-xs text-gray-500 dark:text-gray-400\">Pending</span>\n              }\n            </div>\n\n            <!-- Progress bar -->\n            @if (file.status === 'uploading' || (file.status === 'pending' && autoSimulate())) {\n              <div\n                class=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"file.progress\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                [attr.aria-label]=\"'Uploading ' + file.name\"\n              >\n                <div\n                  class=\"h-full rounded-full bg-primary-500 transition-all duration-150 dark:bg-primary-400\"\n                  [style.width.%]=\"file.progress\"\n                ></div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions -->\n          <div class=\"flex shrink-0 items-center gap-1\">\n\n            <!-- Retry button (error) -->\n            @if (file.status === 'error') {\n              <button\n                type=\"button\"\n                class=\"flex h-7 w-7 items-center justify-center rounded-lg text-gray-400\n                       transition-colors hover:bg-gray-100 hover:text-primary-600\n                       dark:hover:bg-gray-700 dark:hover:text-primary-400 focus:outline-none\n                       focus-visible:ring-1 focus-visible:ring-primary-400 disabled:opacity-40 disabled:cursor-not-allowed\"\n                [attr.aria-label]=\"'Retry ' + file.name\"\n                [disabled]=\"disabled()\"\n                (click)=\"retryFile(file.id)\"\n              >\n                <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2.5\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polyline points=\"1 4 1 10 7 10\"/>\n                  <path d=\"M3.51 15a9 9 0 1 0 .49-4.3\"/>\n                </svg>\n              </button>\n            }\n\n            <!-- Spinning indicator for uploading -->\n            @if (file.status === 'uploading') {\n              <span class=\"flex h-7 w-7 items-center justify-center text-primary-500 dark:text-primary-400\" aria-hidden=\"true\">\n                <svg class=\"h-4 w-4 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"/>\n                  <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n                </svg>\n              </span>\n            }\n\n            <!-- Remove button -->\n            <button\n              type=\"button\"\n              class=\"flex h-7 w-7 items-center justify-center rounded-lg text-gray-400\n                     transition-colors hover:bg-gray-100 hover:text-red-500\n                     dark:hover:bg-gray-700 dark:hover:text-red-400 focus:outline-none\n                     focus-visible:ring-1 focus-visible:ring-red-400 disabled:opacity-40 disabled:cursor-not-allowed\"\n              [attr.aria-label]=\"'Remove ' + file.name\"\n              [disabled]=\"disabled()\"\n              (click)=\"removeFile(file.id)\"\n            >\n              <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M18 6 6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n\n          </div>\n        </li>\n      }\n\n    </ul>\n\n    <!-- File list footer -->\n    <div class=\"flex items-center justify-between\">\n      <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n        {{ files().length }} file{{ files().length === 1 ? '' : 's' }}\n        @if (successCount() > 0) {\n          &nbsp;&middot;&nbsp;\n          <span class=\"text-emerald-600 dark:text-emerald-400 font-medium\">{{ successCount() }} uploaded</span>\n        }\n        @if (errorCount() > 0) {\n          &nbsp;&middot;&nbsp;\n          <span class=\"text-red-600 dark:text-red-400 font-medium\">{{ errorCount() }} failed</span>\n        }\n      </p>\n      <button\n        type=\"button\"\n        class=\"text-xs text-gray-400 transition-colors hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400\n               focus:outline-none focus-visible:ring-1 focus-visible:ring-red-400 rounded disabled:opacity-40 disabled:cursor-not-allowed\"\n        [disabled]=\"disabled()\"\n        (click)=\"clearAll()\"\n        aria-label=\"Remove all files\"\n      >\n        Clear all\n      </button>\n    </div>\n  }\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@styloviz/file-upload",
+  "version": "0.1.1",
+  "description": "Drag-and-drop file uploader with previews, type/size validation and progress.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/file-upload-free"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-file-upload.mjs",
+  "typings": "types/styloviz-file-upload.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-file-upload.d.ts",
+      "default": "./fesm2022/styloviz-file-upload.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-file-upload.d.ts

@@ -0,0 +1,94 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+
+type FileUploadVariant = 'button';
+type FileUploadSize = 'sm' | 'md' | 'lg';
+type UploadFileStatus = 'pending' | 'uploading' | 'success' | 'error';
+interface UploadFile {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    status: UploadFileStatus;
+    progress: number;
+    preview?: string;
+    errorMsg?: string;
+}
+declare class SvFileUploadComponent implements OnDestroy {
+    private static idCounter;
+    private readonly platformId;
+    private uid;
+    /** Trigger style: button or drag-and-drop dropzone. @default 'button' */
+    variant: _angular_core.InputSignal<"button">;
+    /** Control size: sm, md or lg. @default 'md' */
+    size: _angular_core.InputSignal<FileUploadSize>;
+    /** Accepted file types (e.g. "image/*,.pdf"). */
+    accept: _angular_core.InputSignal<string>;
+    /** Allow selecting multiple files. @default true */
+    multiple: _angular_core.InputSignal<boolean>;
+    /** Maximum number of files. @default 10 */
+    maxFiles: _angular_core.InputSignal<number>;
+    /** Per-file size limit in MB. @default 10 */
+    maxSizeMb: _angular_core.InputSignal<number>;
+    /** Disable the uploader. @default false */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Simulate upload progress after a file is added (demo only). @default false */
+    autoSimulate: _angular_core.InputSignal<boolean>;
+    /** Trigger/label text. @default 'Upload files' */
+    label: _angular_core.InputSignal<string>;
+    /** Helper text shown under the trigger. */
+    hint: _angular_core.InputSignal<string>;
+    /** Extra CSS classes for the root. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emitted with the full file list whenever it changes. */
+    filesChange: _angular_core.OutputEmitterRef<UploadFile[]>;
+    /** Emitted when a single file is added. */
+    fileAdded: _angular_core.OutputEmitterRef<UploadFile>;
+    /** Emitted with the id of a removed file. */
+    fileRemoved: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when all uploads finish successfully. */
+    uploadComplete: _angular_core.OutputEmitterRef<UploadFile[]>;
+    /** Emitted when a file fails validation or upload. */
+    uploadError: _angular_core.OutputEmitterRef<UploadFile>;
+    files: _angular_core.WritableSignal<UploadFile[]>;
+    isDragOver: _angular_core.WritableSignal<boolean>;
+    private fileInput;
+    private timers;
+    hasFiles: _angular_core.Signal<boolean>;
+    canAddMore: _angular_core.Signal<boolean>;
+    successCount: _angular_core.Signal<number>;
+    errorCount: _angular_core.Signal<number>;
+    uploadingCount: _angular_core.Signal<number>;
+    overallProgress: _angular_core.Signal<number>;
+    /** Screen-reader status summary (announced politely via an aria-live region). */
+    statusMessage: _angular_core.Signal<string>;
+    zoneClasses: _angular_core.Signal<string>;
+    iconSize: _angular_core.Signal<string>;
+    labelClass: _angular_core.Signal<string>;
+    hintClass: _angular_core.Signal<string>;
+    getIcon(file: UploadFile): string;
+    getBadgeColor(file: UploadFile): string;
+    getExtLabel(file: UploadFile): string;
+    formatSize(bytes: number): string;
+    isImage(file: UploadFile): boolean;
+    openFilePicker(): void;
+    onFileInputChange(e: Event): void;
+    onDragOver(e: DragEvent): void;
+    onDragLeave(e: DragEvent): void;
+    onDrop(e: DragEvent): void;
+    onZoneKeydown(e: KeyboardEvent): void;
+    /** Whether a file matches the `accept` filter (mime, mime/*, or .ext). */
+    private isAccepted;
+    private addFiles;
+    private simulateUpload;
+    retryFile(id: string): void;
+    removeFile(id: string): void;
+    clearAll(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvFileUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvFileUploadComponent, "sv-file-upload", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "maxSizeMb": { "alias": "maxSizeMb"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoSimulate": { "alias": "autoSimulate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "filesChange": "filesChange"; "fileAdded": "fileAdded"; "fileRemoved": "fileRemoved"; "uploadComplete": "uploadComplete"; "uploadError": "uploadError"; }, never, never, true, never>;
+}
+
+export { SvFileUploadComponent };
+export type { FileUploadSize, FileUploadVariant, UploadFile, UploadFileStatus };