@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-file-upload.mjs

@@ -0,0 +1,246 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+/**
+ * # FuiFileUploadComponent
+ *
+ * A file upload component with drag-and-drop support, file previews, and validation.
+ *
+ * ## Features
+ * - Drag & drop file upload
+ * - Click to browse
+ * - File type, size, and count validation
+ * - Image preview thumbnails
+ * - Accessible (keyboard, ARIA)
+ *
+ * ## Usage
+ *
+ * ### Basic
+ * ```html
+ * <fui-file-upload
+ *   accept="image/*,.pdf"
+ *   [multiple]="true"
+ *   [maxFileSize]="5242880"
+ *   (filesSelected)="onFiles($event)"
+ * ></fui-file-upload>
+ * ```
+ */
+class FuiFileUploadComponent {
+    // Inputs
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    maxFileSize = input(0, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+    maxFiles = input(0, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showPreview = input(true, { ...(ngDevMode ? { debugName: "showPreview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Outputs
+    filesSelected = output();
+    fileRemoved = output();
+    filesDropped = output();
+    validationErrors = output();
+    // Internal state
+    _files = signal([], ...(ngDevMode ? [{ debugName: "_files" }] : /* istanbul ignore next */ []));
+    _isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "_isDragOver" }] : /* istanbul ignore next */ []));
+    // ViewChild
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    // Public methods
+    browse() {
+        if (this.disabled())
+            return;
+        this.fileInput()?.nativeElement.click();
+    }
+    removeFile(index) {
+        if (this.disabled())
+            return;
+        const files = [...this._files()];
+        const removed = files.splice(index, 1)[0];
+        if (removed) {
+            if (removed.previewUrl) {
+                URL.revokeObjectURL(removed.previewUrl);
+            }
+            this._files.set(files);
+            this.fileRemoved.emit(removed);
+        }
+    }
+    clearAll() {
+        const files = this._files();
+        for (const f of files) {
+            if (f.previewUrl) {
+                URL.revokeObjectURL(f.previewUrl);
+            }
+        }
+        this._files.set([]);
+    }
+    getFiles() {
+        return this._files();
+    }
+    // Template event handlers
+    _onFileInputChange(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this._processFiles(input.files);
+        }
+        // Reset input so the same file can be selected again
+        input.value = '';
+    }
+    _onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this._isDragOver.set(true);
+        }
+    }
+    _onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this._isDragOver.set(true);
+        }
+    }
+    _onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDragOver.set(false);
+    }
+    _onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDragOver.set(false);
+        if (this.disabled())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this._processFiles(files);
+            this.filesDropped.emit(this._files());
+        }
+    }
+    _formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const k = 1024;
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
+        return `${size} ${units[i]}`;
+    }
+    // Private methods
+    _processFiles(fileList) {
+        const newFiles = [];
+        const errors = [];
+        const currentFiles = this._files();
+        const filesToProcess = Array.from(fileList);
+        for (const file of filesToProcess) {
+            // Max files check
+            const maxFiles = this.maxFiles();
+            if (maxFiles > 0 && currentFiles.length + newFiles.length >= maxFiles) {
+                errors.push({
+                    file,
+                    error: 'maxFiles',
+                    message: `Maximum ${maxFiles} file(s) allowed`,
+                });
+                continue;
+            }
+            const validationError = this._validateFile(file);
+            if (validationError) {
+                errors.push(validationError);
+                continue;
+            }
+            const uploadFile = {
+                file,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
+            if (this.showPreview() && this._isImage(file)) {
+                uploadFile.previewUrl = this._generatePreview(file);
+            }
+            newFiles.push(uploadFile);
+        }
+        if (errors.length > 0) {
+            this.validationErrors.emit(errors);
+        }
+        if (newFiles.length > 0) {
+            if (this.multiple()) {
+                this._files.set([...currentFiles, ...newFiles]);
+            }
+            else {
+                // Single mode: replace existing
+                for (const f of currentFiles) {
+                    if (f.previewUrl)
+                        URL.revokeObjectURL(f.previewUrl);
+                }
+                this._files.set([newFiles[0]]);
+            }
+            this.filesSelected.emit(this._files());
+        }
+    }
+    _validateFile(file) {
+        // Type check
+        const accept = this.accept();
+        if (accept && !this._matchesAccept(file, accept)) {
+            return {
+                file,
+                error: 'type',
+                message: `File type "${file.type || file.name.split('.').pop()}" is not allowed`,
+            };
+        }
+        // Size check
+        const maxSize = this.maxFileSize();
+        if (maxSize > 0 && file.size > maxSize) {
+            return {
+                file,
+                error: 'size',
+                message: `File size ${this._formatFileSize(file.size)} exceeds maximum ${this._formatFileSize(maxSize)}`,
+            };
+        }
+        return null;
+    }
+    _matchesAccept(file, accept) {
+        const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());
+        for (const acceptType of acceptTypes) {
+            // Wildcard MIME type (e.g. "image/*")
+            if (acceptType.endsWith('/*')) {
+                const category = acceptType.slice(0, acceptType.indexOf('/'));
+                if (file.type.toLowerCase().startsWith(category + '/')) {
+                    return true;
+                }
+            }
+            // Extension match (e.g. ".pdf")
+            else if (acceptType.startsWith('.')) {
+                if (file.name.toLowerCase().endsWith(acceptType)) {
+                    return true;
+                }
+            }
+            // Exact MIME match
+            else if (file.type.toLowerCase() === acceptType) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _isImage(file) {
+        return file.type.startsWith('image/');
+    }
+    _generatePreview(file) {
+        return URL.createObjectURL(file);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFileUploadComponent, isStandalone: true, selector: "fui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", filesDropped: "filesDropped", validationErrors: "validationErrors" }, host: { properties: { "class.fui-file-upload--disabled": "disabled()", "class.fui-file-upload--drag-over": "_isDragOver()", "class.fui-file-upload--has-files": "_files().length > 0" }, classAttribute: "fui-file-upload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"fui-file-upload__native-input\"\n  [attr.accept]=\"accept()\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [attr.disabled]=\"disabled() ? '' : null\"\n  (change)=\"_onFileInputChange($event)\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n/>\n\n<div\n  class=\"fui-file-upload__dropzone\"\n  (click)=\"browse()\"\n  (dragenter)=\"_onDragEnter($event)\"\n  (dragover)=\"_onDragOver($event)\"\n  (dragleave)=\"_onDragLeave($event)\"\n  (drop)=\"_onDrop($event)\"\n  (keydown.enter)=\"browse()\"\n  (keydown.space)=\"browse(); $event.preventDefault()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Drop files here or click to browse'\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\n  @if (accept()) {\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\n  }\n  @if (maxFileSize() > 0) {\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\n  }\n</div>\n\n@if (_files().length > 0) {\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\n        @if (showPreview() && fileItem.previewUrl) {\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\n        } @else {\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\n        }\n        <div class=\"fui-file-upload__file-info\">\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\n          @if (fileItem.error) {\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"fui-file-upload__remove-btn\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"'Remove ' + fileItem.name\"\n          [disabled]=\"disabled()\"\n        >\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-gap-8);padding:var(--fui-padding-32, 2rem);border:2px dashed var(--fui-border-color);border-radius:var(--fui-border-radius-md);background-color:var(--fui-surface-bg);cursor:pointer;text-align:center;transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary);font-weight:var(--fui-font-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-gap-12, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-gap-4)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);padding:var(--fui-padding-8, .5rem) var(--fui-padding-12, .75rem);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-card, var(--fui-surface-01));transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__file-item--error{border-color:var(--fui-state-error);background-color:var(--fui-danger-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-border-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-state-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-state-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-file-upload', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-file-upload',
+                        '[class.fui-file-upload--disabled]': 'disabled()',
+                        '[class.fui-file-upload--drag-over]': '_isDragOver()',
+                        '[class.fui-file-upload--has-files]': '_files().length > 0',
+                    }, template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"fui-file-upload__native-input\"\n  [attr.accept]=\"accept()\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [attr.disabled]=\"disabled() ? '' : null\"\n  (change)=\"_onFileInputChange($event)\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n/>\n\n<div\n  class=\"fui-file-upload__dropzone\"\n  (click)=\"browse()\"\n  (dragenter)=\"_onDragEnter($event)\"\n  (dragover)=\"_onDragOver($event)\"\n  (dragleave)=\"_onDragLeave($event)\"\n  (drop)=\"_onDrop($event)\"\n  (keydown.enter)=\"browse()\"\n  (keydown.space)=\"browse(); $event.preventDefault()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Drop files here or click to browse'\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\n  @if (accept()) {\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\n  }\n  @if (maxFileSize() > 0) {\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\n  }\n</div>\n\n@if (_files().length > 0) {\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\n        @if (showPreview() && fileItem.previewUrl) {\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\n        } @else {\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\n        }\n        <div class=\"fui-file-upload__file-info\">\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\n          @if (fileItem.error) {\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"fui-file-upload__remove-btn\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"'Remove ' + fileItem.name\"\n          [disabled]=\"disabled()\"\n        >\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-gap-8);padding:var(--fui-padding-32, 2rem);border:2px dashed var(--fui-border-color);border-radius:var(--fui-border-radius-md);background-color:var(--fui-surface-bg);cursor:pointer;text-align:center;transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary);font-weight:var(--fui-font-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-gap-12, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-gap-4)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);padding:var(--fui-padding-8, .5rem) var(--fui-padding-12, .75rem);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-card, var(--fui-surface-01));transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__file-item--error{border-color:var(--fui-state-error);background-color:var(--fui-danger-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-border-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-state-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-state-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], validationErrors: [{ type: i0.Output, args: ["validationErrors"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiFileUploadComponent };
+//# sourceMappingURL=raintonic-formaui-components-file-upload.mjs.map

package/fesm2022/raintonic-formaui-components-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-file-upload.mjs","sources":["../../../lib/components/file-upload/file-upload.component.ts","../../../lib/components/file-upload/file-upload.component.html","../../../lib/components/file-upload/raintonic-formaui-components-file-upload.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  signal,\n  viewChild,\n  ElementRef,\n  WritableSignal,\n  booleanAttribute,\n} from '@angular/core';\n\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { FileUploadFile, FileUploadValidationError } from './file-upload.types';\n\n/**\n * # FuiFileUploadComponent\n *\n * A file upload component with drag-and-drop support, file previews, and validation.\n *\n * ## Features\n * - Drag & drop file upload\n * - Click to browse\n * - File type, size, and count validation\n * - Image preview thumbnails\n * - Accessible (keyboard, ARIA)\n *\n * ## Usage\n *\n * ### Basic\n * ```html\n * <fui-file-upload\n *   accept=\"image/*,.pdf\"\n *   [multiple]=\"true\"\n *   [maxFileSize]=\"5242880\"\n *   (filesSelected)=\"onFiles($event)\"\n * ></fui-file-upload>\n * ```\n */\n@Component({\n  selector: 'fui-file-upload',\n  standalone: true,\n  imports: [FuiIconComponent],\n  templateUrl: './file-upload.component.html',\n  styleUrls: ['./file-upload.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-file-upload',\n    '[class.fui-file-upload--disabled]': 'disabled()',\n    '[class.fui-file-upload--drag-over]': '_isDragOver()',\n    '[class.fui-file-upload--has-files]': '_files().length > 0',\n  },\n})\nexport class FuiFileUploadComponent {\n  // Inputs\n  readonly accept = input('');\n  readonly multiple = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly maxFileSize = input(0);\n  readonly maxFiles = input(0);\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly showPreview = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n  // Outputs\n  readonly filesSelected = output<FileUploadFile[]>();\n  readonly fileRemoved = output<FileUploadFile>();\n  readonly filesDropped = output<FileUploadFile[]>();\n  readonly validationErrors = output<FileUploadValidationError[]>();\n\n  // Internal state\n  readonly _files: WritableSignal<FileUploadFile[]> = signal([]);\n  readonly _isDragOver: WritableSignal<boolean> = signal(false);\n\n  // ViewChild\n  readonly fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n  // Public methods\n  browse(): void {\n    if (this.disabled()) return;\n    this.fileInput()?.nativeElement.click();\n  }\n\n  removeFile(index: number): void {\n    if (this.disabled()) return;\n    const files = [...this._files()];\n    const removed = files.splice(index, 1)[0];\n    if (removed) {\n      if (removed.previewUrl) {\n        URL.revokeObjectURL(removed.previewUrl);\n      }\n      this._files.set(files);\n      this.fileRemoved.emit(removed);\n    }\n  }\n\n  clearAll(): void {\n    const files = this._files();\n    for (const f of files) {\n      if (f.previewUrl) {\n        URL.revokeObjectURL(f.previewUrl);\n      }\n    }\n    this._files.set([]);\n  }\n\n  getFiles(): FileUploadFile[] {\n    return this._files();\n  }\n\n  // Template event handlers\n  _onFileInputChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (input.files && input.files.length > 0) {\n      this._processFiles(input.files);\n    }\n    // Reset input so the same file can be selected again\n    input.value = '';\n  }\n\n  _onDragEnter(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled()) {\n      this._isDragOver.set(true);\n    }\n  }\n\n  _onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled()) {\n      this._isDragOver.set(true);\n    }\n  }\n\n  _onDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this._isDragOver.set(false);\n  }\n\n  _onDrop(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this._isDragOver.set(false);\n\n    if (this.disabled()) return;\n\n    const files = event.dataTransfer?.files;\n    if (files && files.length > 0) {\n      this._processFiles(files);\n      this.filesDropped.emit(this._files());\n    }\n  }\n\n  _formatFileSize(bytes: number): string {\n    if (bytes === 0) return '0 B';\n    const units = ['B', 'KB', 'MB', 'GB'];\n    const k = 1024;\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));\n    return `${size} ${units[i]}`;\n  }\n\n  // Private methods\n  private _processFiles(fileList: FileList): void {\n    const newFiles: FileUploadFile[] = [];\n    const errors: FileUploadValidationError[] = [];\n    const currentFiles = this._files();\n\n    const filesToProcess = Array.from(fileList);\n\n    for (const file of filesToProcess) {\n      // Max files check\n      const maxFiles = this.maxFiles();\n      if (maxFiles > 0 && currentFiles.length + newFiles.length >= maxFiles) {\n        errors.push({\n          file,\n          error: 'maxFiles',\n          message: `Maximum ${maxFiles} file(s) allowed`,\n        });\n        continue;\n      }\n\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        errors.push(validationError);\n        continue;\n      }\n\n      const uploadFile: FileUploadFile = {\n        file,\n        name: file.name,\n        size: file.size,\n        type: file.type,\n      };\n\n      if (this.showPreview() && this._isImage(file)) {\n        uploadFile.previewUrl = this._generatePreview(file);\n      }\n\n      newFiles.push(uploadFile);\n    }\n\n    if (errors.length > 0) {\n      this.validationErrors.emit(errors);\n    }\n\n    if (newFiles.length > 0) {\n      if (this.multiple()) {\n        this._files.set([...currentFiles, ...newFiles]);\n      } else {\n        // Single mode: replace existing\n        for (const f of currentFiles) {\n          if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);\n        }\n        this._files.set([newFiles[0]]);\n      }\n      this.filesSelected.emit(this._files());\n    }\n  }\n\n  private _validateFile(file: File): FileUploadValidationError | null {\n    // Type check\n    const accept = this.accept();\n    if (accept && !this._matchesAccept(file, accept)) {\n      return {\n        file,\n        error: 'type',\n        message: `File type \"${file.type || file.name.split('.').pop()}\" is not allowed`,\n      };\n    }\n\n    // Size check\n    const maxSize = this.maxFileSize();\n    if (maxSize > 0 && file.size > maxSize) {\n      return {\n        file,\n        error: 'size',\n        message: `File size ${this._formatFileSize(file.size)} exceeds maximum ${this._formatFileSize(maxSize)}`,\n      };\n    }\n\n    return null;\n  }\n\n  private _matchesAccept(file: File, accept: string): boolean {\n    const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const acceptType of acceptTypes) {\n      // Wildcard MIME type (e.g. \"image/*\")\n      if (acceptType.endsWith('/*')) {\n        const category = acceptType.slice(0, acceptType.indexOf('/'));\n        if (file.type.toLowerCase().startsWith(category + '/')) {\n          return true;\n        }\n      }\n      // Extension match (e.g. \".pdf\")\n      else if (acceptType.startsWith('.')) {\n        if (file.name.toLowerCase().endsWith(acceptType)) {\n          return true;\n        }\n      }\n      // Exact MIME match\n      else if (file.type.toLowerCase() === acceptType) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  private _isImage(file: File): boolean {\n    return file.type.startsWith('image/');\n  }\n\n  private _generatePreview(file: File): string {\n    return URL.createObjectURL(file);\n  }\n}\n","<input\n  #fileInput\n  type=\"file\"\n  class=\"fui-file-upload__native-input\"\n  [attr.accept]=\"accept()\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [attr.disabled]=\"disabled() ? '' : null\"\n  (change)=\"_onFileInputChange($event)\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n/>\n\n<div\n  class=\"fui-file-upload__dropzone\"\n  (click)=\"browse()\"\n  (dragenter)=\"_onDragEnter($event)\"\n  (dragover)=\"_onDragOver($event)\"\n  (dragleave)=\"_onDragLeave($event)\"\n  (drop)=\"_onDrop($event)\"\n  (keydown.enter)=\"browse()\"\n  (keydown.space)=\"browse(); $event.preventDefault()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Drop files here or click to browse'\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\n  @if (accept()) {\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\n  }\n  @if (maxFileSize() > 0) {\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\n  }\n</div>\n\n@if (_files().length > 0) {\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\n        @if (showPreview() && fileItem.previewUrl) {\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\n        } @else {\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\n        }\n        <div class=\"fui-file-upload__file-info\">\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\n          @if (fileItem.error) {\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"fui-file-upload__remove-btn\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"'Remove ' + fileItem.name\"\n          [disabled]=\"disabled()\"\n        >\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}