@malva-ui/core 0.1.12

package/esm2022/file-upload/lib/file-upload/file-upload.js

@@ -0,0 +1,324 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, model, output, signal, viewChild, ElementRef, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvSignalFormControlBase } from '@malva-ui/core/form-utils';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvButton } from '@malva-ui/core/button';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { LucideRefreshCw, LucideTrash2, LucideUpload } from '@lucide/angular';
+import { MLV_FILE_UPLOAD_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvFileUploadItem } from '../file-upload-item/file-upload-item';
+import * as i0 from "@angular/core";
+/**
+ * File upload component providing a drag-and-drop zone, file validation, and
+ * signal, reactive, and template-driven forms integration. Produces an array
+ * of `MlvUploadedFile` values.
+ */
+export class MlvFileUpload extends MlvSignalFormControlBase {
+    /** The uploaded-file list used by all Angular forms APIs. */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @protected Injected i18n translations for the file upload. */
+    _i18n = inject(MLV_FILE_UPLOAD_I18N);
+    /** @private ICU MessageFormat resolver for the parameterised rejection messages. */
+    _resolver = inject(MlvI18nResolverService);
+    /** Comma-separated list of accepted MIME types or file extensions (e.g. `"image/*,.pdf"`). */
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum allowed file size in bytes. `0` means unlimited.
+     */
+    maxSize = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Whether to allow selecting multiple files. */
+    multiple = input(true, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Primary heading text shown in the drop zone. */
+    title = input('Drag & drop files here', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Secondary description text shown below the title. */
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Label text for the browse button. */
+    actionLabel = input('Browse files', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    /** When true, renders a compact single-row drop zone instead of the full zone. */
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * How the zone presents the current selection.
+     *
+     * `'list'` (the default) keeps today's behaviour: the prompt and browse
+     * button always show, and selected files are listed below the zone.
+     *
+     * `'cover'` fills the zone with the selected image and swaps the browse
+     * button for a floating replace/remove toolbar. It only takes effect when
+     * **all** of these hold, and silently falls back to `'list'` otherwise:
+     *
+     * 1. `multiple` is `false`,
+     * 2. exactly one file is selected, and
+     * 3. that file carries a `previewUrl`.
+     *
+     * `previewUrl` is generated automatically for any dropped/picked file whose
+     * MIME type starts with `image/`. For an edit-mode seed, write it yourself —
+     * it accepts a remote `https://…` or a `data:` URL just as happily as the
+     * generated `blob:` one.
+     */
+    previewMode = input('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewMode" }] : /* istanbul ignore next */ []));
+    /** Emits the current file list whenever files are added or removed. */
+    filesChange = output();
+    /** @private List of selected/uploaded files managed by the component. */
+    _files = computed(() => this.value() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_files" }] : /* istanbul ignore next */ []));
+    /** @private Validation errors from the last file selection or drop. */
+    _errors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_errors" }] : /* istanbul ignore next */ []));
+    /** @private Whether the user is currently dragging files over the drop zone. */
+    _isDragOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDragOver" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the hidden file input element. */
+    _fileInput = viewChild('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fileInput" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the host element for dragleave boundary detection. */
+    _elementRef = inject((ElementRef));
+    /** @protected Computed list of files exposed to the template. */
+    _fileList = computed(() => this._files(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fileList" }] : /* istanbul ignore next */ []));
+    // Cover preview ----------------------------------------------------------------
+    /**
+     * @protected The single file rendered as a full-zone cover, or `null` when
+     * the cover preconditions are not met (see `previewMode`) and the zone falls
+     * back to the normal prompt.
+     */
+    _coverFile = computed(() => {
+        if (this.previewMode() !== 'cover' || this.multiple())
+            return null;
+        const files = this._files();
+        if (files.length !== 1)
+            return null;
+        return files[0].previewUrl ? files[0] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_coverFile" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the zone currently renders the cover preview. */
+    _isCover = computed(() => this._coverFile() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isCover" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the covered file is still uploading, which overlays a
+     * determinate progress bar on the image instead of falling back to list mode.
+     */
+    _coverUploading = computed(() => {
+        const file = this._coverFile();
+        return (file !== null && file.state === 'uploading' && (file.progress ?? 0) < 100);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_coverUploading" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Accessible name for the cover toolbar's remove button, with the
+     * covered file's name interpolated into the shared `removeFile` template.
+     */
+    _coverRemoveLabel = computed(() => {
+        const file = this._coverFile();
+        return file ? this._translate('removeFile', { name: file.name }) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_coverRemoveLabel" }] : /* istanbul ignore next */ []));
+    // Forms value ------------------------------------------------------------------
+    /** Whether the control holds a clearable value — At least one file present. */
+    hasValue = computed(() => this._files().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // Public API -------------------------------------------------------------------
+    /**
+     * Programmatically opens the native file picker dialog.
+     */
+    openFilePicker() {
+        if (this.computedDisabled())
+            return;
+        this._fileInput()?.nativeElement.click();
+    }
+    /**
+     * Handles changes from the hidden file input element.
+     * @param event - The native change event from the input.
+     */
+    onFileInputChange(event) {
+        const input = event.target;
+        if (input.files) {
+            this._validateAndAdd(input.files);
+        }
+        // Reset so the same file can be re-selected
+        input.value = '';
+    }
+    /**
+     * Removes a file by its id, revoking the preview URL if present.
+     * @param id - The id of the `MlvUploadedFile` to remove.
+     */
+    removeFile(id) {
+        const target = this._files().find((f) => f.id === id);
+        if (target?.previewUrl) {
+            URL.revokeObjectURL(target.previewUrl);
+        }
+        this.value.update((files) => (files ?? []).filter((file) => file.id !== id));
+        this._emitChange();
+    }
+    // Internal helpers -------------------------------------------------------------
+    /**
+     * @private Handles the dragover event to enable the drag-over state.
+     */
+    _onDragOver(event) {
+        event.preventDefault();
+        if (!this.computedDisabled()) {
+            this._isDragOver.set(true);
+        }
+    }
+    /**
+     * @private Handles the dragleave event to clear drag-over state when leaving the host.
+     */
+    _onDragLeave(event) {
+        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
+            this._isDragOver.set(false);
+        }
+    }
+    /**
+     * @private Handles the drop event, reads dropped files and validates them.
+     */
+    _onDrop(event) {
+        event.preventDefault();
+        this._isDragOver.set(false);
+        if (this.computedDisabled())
+            return;
+        const dt = event.dataTransfer;
+        if (dt?.files) {
+            this._validateAndAdd(dt.files);
+        }
+    }
+    /**
+     * @private Validates a FileList against accept/maxSize constraints and appends valid files.
+     */
+    _validateAndAdd(fileList) {
+        const newErrors = [];
+        const newFiles = [];
+        const acceptedTypes = this._parseAccept();
+        Array.from(fileList).forEach((file) => {
+            // Count check
+            if (!this.multiple() && this._files().length + newFiles.length >= 1) {
+                newErrors.push({
+                    code: 'count',
+                    message: this._i18n().errorSingleFile,
+                });
+                return;
+            }
+            // Type check
+            if (acceptedTypes.length > 0 &&
+                !this._isTypeAccepted(file, acceptedTypes)) {
+                newErrors.push({
+                    code: 'type',
+                    message: this._translate('errorFileType', { name: file.name }),
+                });
+                return;
+            }
+            // Size check
+            const maxBytes = this.maxSize();
+            if (maxBytes > 0 && file.size > maxBytes) {
+                const maxMb = (maxBytes / (1024 * 1024)).toFixed(1);
+                newErrors.push({
+                    code: 'size',
+                    message: this._translate('errorFileSize', {
+                        name: file.name,
+                        size: maxMb,
+                    }),
+                });
+                return;
+            }
+            const isImage = file.type.startsWith('image/');
+            const uploadedFile = {
+                id: mlvNextId('mlv-file'),
+                file,
+                name: file.name,
+                size: file.size,
+                previewUrl: isImage ? URL.createObjectURL(file) : undefined,
+                state: 'pending',
+                progress: 0,
+            };
+            newFiles.push(uploadedFile);
+        });
+        this._errors.set(newErrors);
+        if (newFiles.length > 0) {
+            if (this.multiple()) {
+                this.value.update((previous) => [...(previous ?? []), ...newFiles]);
+            }
+            else {
+                // Replace previous file when multiple is false
+                const previous = this._files();
+                previous.forEach((f) => {
+                    if (f.previewUrl)
+                        URL.revokeObjectURL(f.previewUrl);
+                });
+                this.value.set(newFiles);
+            }
+            this._emitChange();
+        }
+    }
+    /**
+     * @private Resolves one of the component's ICU rejection templates with the
+     * offending file's details. Keeps every user-facing validation string in the
+     * language pack instead of hard-coded English.
+     */
+    _translate(key, params) {
+        return this._resolver.resolve(this._i18n(), key, params);
+    }
+    /**
+     * @private Parses the accept input into a list of accepted MIME prefixes and extensions.
+     */
+    _parseAccept() {
+        const raw = this.accept().trim();
+        if (!raw)
+            return [];
+        return raw.split(',').map((s) => s.trim().toLowerCase());
+    }
+    /**
+     * @private Checks whether a file matches the accepted type list.
+     */
+    _isTypeAccepted(file, accepted) {
+        return accepted.some((pattern) => {
+            if (pattern.startsWith('.')) {
+                return file.name.toLowerCase().endsWith(pattern);
+            }
+            if (pattern.endsWith('/*')) {
+                return file.type.startsWith(pattern.slice(0, -1));
+            }
+            return file.type === pattern;
+        });
+    }
+    /**
+     * @private Emits the current file list through the public change output.
+     */
+    _emitChange() {
+        this.filesChange.emit(this._files());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFileUpload, isStandalone: true, selector: "mlv-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, previewMode: { classPropertyName: "previewMode", publicName: "previewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filesChange: "filesChange" }, host: { listeners: { "dragover": "_onDragOver($event)", "dragleave": "_onDragLeave($event)", "drop": "_onDrop($event)", "focusout": "_markTouched()" }, properties: { "attr.title": "null", "class.mlv-file-upload--cover": "_isCover()", "class.mlv-file-upload--drag-over": "_isDragOver()", "class.mlv-file-upload--disabled": "computedDisabled()", "class.mlv-file-upload--error": "_errors().length > 0", "class.mlv-file-upload--multiple": "multiple()", "class.mlv-file-upload--has-files": "_files().length > 0", "class.mlv-file-upload--compact": "compact()" }, classAttribute: "mlv-file-upload" }, viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #fileInput\n  class=\"mlv-file-upload__input\"\n  type=\"file\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"computedDisabled()\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  (change)=\"onFileInputChange($event)\"\n/>\n\n<!-- Drop zone: visually interactive drag target.\n     The inner <button type=\"button\"> is the sole keyboard/AT entry point. -->\n<div class=\"mlv-file-upload__zone\">\n  @if (_coverFile(); as cover) {\n  <!-- Cover preview: the image fills the zone, which stays the drop target.\n       Plain <img>, not NgOptimizedImage \u2014 the source is a runtime blob:/data:/\n       remote URL of unknown intrinsic size. -->\n  <img\n    class=\"mlv-file-upload__cover-image\"\n    [src]=\"cover.previewUrl\"\n    [alt]=\"cover.name\"\n  />\n\n  @if (_coverUploading()) {\n  <mlv-loader\n    class=\"mlv-file-upload__cover-progress\"\n    variant=\"bar\"\n    [value]=\"cover.progress ?? 0\"\n  />\n  } } @else {\n  <span class=\"mlv-file-upload__zone-icon\" aria-hidden=\"true\">\n    <svg lucideUpload [size]=\"compact() ? 18 : 28\" />\n  </span>\n\n  <!-- Title is always in the DOM to serve as aria-describedby anchor;\n       hidden visually in compact mode via CSS. -->\n  <span\n    [id]=\"id() + '-title'\"\n    class=\"mlv-file-upload__zone-title\"\n    [class.mlv-file-upload__zone-title--hidden]=\"compact()\"\n    >{{ title() }}</span\n  >\n\n  @if (subtitle() && !compact()) {\n  <span [id]=\"id() + '-subtitle'\" class=\"mlv-file-upload__zone-subtitle\"\n    >{{ subtitle() }}</span\n  >\n  } }\n\n  <!-- One actions container, two presentations. It is the inline action row in\n       list mode and the floating toolbar over the cover image. The two\n       <ng-content> slots MUST stay outside the @if branches: Angular assigns a\n       projected node to the first slot whose selector matches, so duplicating\n       a selector across branches leaves the later copy permanently empty.\n       DOM order equals visual order, and `position` is read as a static\n       attribute here, never as a binding. -->\n  <span\n    [class.mlv-file-upload__zone-action]=\"!_isCover()\"\n    [class.mlv-file-upload__toolbar]=\"_isCover()\"\n  >\n    <ng-content select=\"[mlvFileUploadAction]:not([position=end])\" />\n\n    @if (_isCover()) {\n    <button\n      mlvButton\n      type=\"button\"\n      shape=\"square\"\n      variant=\"transparent\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-label]=\"_i18n().replaceFile\"\n      (click)=\"$event.stopPropagation(); openFilePicker()\"\n    >\n      <svg lucideRefreshCw [size]=\"16\" />\n    </button>\n    } @else {\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"secondary\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-describedby]=\"subtitle() && !compact() ? id() + '-title ' + id() + '-subtitle' : id() + '-title'\"\n      (click)=\"$event.stopPropagation(); openFilePicker()\"\n    >\n      {{ actionLabel() }}\n    </button>\n    }\n\n    <ng-content select=\"[mlvFileUploadAction][position=end]\" />\n\n    @if (_coverFile(); as cover) {\n    <button\n      mlvButton\n      type=\"button\"\n      shape=\"square\"\n      variant=\"transparent\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-label]=\"_coverRemoveLabel()\"\n      (click)=\"$event.stopPropagation(); removeFile(cover.id)\"\n    >\n      <svg lucideTrash2 [size]=\"16\" />\n    </button>\n    }\n  </span>\n</div>\n\n@if (_errors().length > 0) {\n<ul class=\"mlv-file-upload__errors\" role=\"alert\" aria-live=\"assertive\">\n  @for (err of _errors(); track err.code + err.message) {\n  <li class=\"mlv-file-upload__error-item\">{{ err.message }}</li>\n  }\n</ul>\n}\n<!-- In cover state the single file's row would only repeat the image and its\n     remove control, both of which the cover toolbar already provides. -->\n@if (_fileList().length > 0 && !_isCover()) {\n<ul\n  class=\"mlv-file-upload__list\"\n  [attr.aria-label]=\"_i18n().selectedFiles\"\n  aria-live=\"polite\"\n>\n  @for (file of _fileList(); track file.id) {\n  <li>\n    <mlv-file-upload-item\n      class=\"mlv-file-upload-item--entering\"\n      [file]=\"file\"\n      (remove)=\"removeFile(file.id)\"\n    />\n  </li>\n  }\n</ul>\n}\n", styles: [".mlv-file-upload{display:flex;flex-direction:column;gap:.75rem;font-family:var(--mlv-typography-family-text)}.mlv-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.mlv-file-upload__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1.5rem;border:var(--mlv-stroke-width-medium) dashed var(--mlv-border-normal);border-radius:var(--mlv-radius-l);background-color:var(--mlv-background-neutral-1);cursor:pointer;text-align:center;transition:border-color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out);outline:none}.mlv-file-upload__zone:hover{border-color:var(--mlv-border-focus);background-color:var(--mlv-background-neutral-2)}.mlv-file-upload__zone:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-file-upload__zone-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--mlv-text-secondary);margin-bottom:.25rem}.mlv-file-upload__zone-title{font-size:var(--mlv-font-size-m);font-weight:600;color:var(--mlv-text-primary)}.mlv-file-upload__zone-title--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.mlv-file-upload__zone-subtitle{font-size:var(--mlv-typography-ui-s-size);color:var(--mlv-text-secondary)}.mlv-file-upload__zone-action{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--mlv-spacing-2);margin-top:.25rem}.mlv-file-upload__action{flex:none}.mlv-file-upload__cover-image{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;border-radius:inherit;pointer-events:none}.mlv-file-upload__cover-progress{position:absolute;inset-inline:var(--mlv-spacing-3);inset-block-start:var(--mlv-spacing-3);pointer-events:none}.mlv-file-upload__toolbar{position:absolute;inset-block-end:var(--mlv-spacing-3);inset-inline-start:50%;transform:translate(-50%);display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--mlv-spacing-1);padding:var(--mlv-spacing-1);border-radius:var(--mlv-radius-l);background-color:var(--mlv-background-raised);box-shadow:var(--mlv-shadow-floating);opacity:0;pointer-events:none;transition:opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-file-upload__errors{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}.mlv-file-upload__error-item{font-size:var(--mlv-typography-ui-s-size);color:var(--mlv-text-negative);padding:.375rem .75rem;border-radius:var(--mlv-radius-s);background-color:var(--mlv-background-danger-1-pale)}.mlv-file-upload__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.mlv-file-upload--drag-over .mlv-file-upload__zone{border-color:var(--mlv-border-focus);background-color:var(--mlv-background-neutral-2)}.mlv-file-upload--disabled{pointer-events:none;opacity:var(--mlv-disabled-opacity)}.mlv-file-upload--disabled .mlv-file-upload__zone{cursor:not-allowed}.mlv-file-upload--error .mlv-file-upload__zone{border-color:var(--mlv-text-negative)}.mlv-file-upload--cover{--mlv-file-upload-cover-min-height: 12rem}.mlv-file-upload--cover .mlv-file-upload__zone{position:relative;flex:1 1 auto;min-block-size:var(--mlv-file-upload-cover-min-height);padding:0;overflow:hidden}.mlv-file-upload--cover .mlv-file-upload__zone:hover .mlv-file-upload__toolbar,.mlv-file-upload--cover .mlv-file-upload__zone:focus-within .mlv-file-upload__toolbar{opacity:1;pointer-events:auto}@media(hover:none){.mlv-file-upload--cover .mlv-file-upload__toolbar{opacity:1;pointer-events:auto}}.mlv-file-upload--compact .mlv-file-upload__zone{flex-direction:row;padding:.75rem 1rem;gap:.75rem;text-align:left}.mlv-file-upload--compact .mlv-file-upload__zone-icon{margin-bottom:0}.mlv-file-upload--compact .mlv-file-upload__zone-action{margin-top:0}@media(prefers-reduced-motion:reduce){.mlv-file-upload,.mlv-file-upload *,.mlv-file-upload:before,.mlv-file-upload:after,[class^=mlv-file-upload__],[class*=\" mlv-file-upload__\"],[class^=mlv-file-upload--],[class*=\" mlv-file-upload--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"], dependencies: [{ kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading"] }, { kind: "component", type: MlvFileUploadItem, selector: "mlv-file-upload-item", inputs: ["file"], outputs: ["remove"] }, { kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideRefreshCw, selector: "svg[lucideRefreshCw]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-file-upload', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MlvButton,
+                        MlvFileUploadItem,
+                        MlvLoader,
+                        LucideUpload,
+                        LucideRefreshCw,
+                        LucideTrash2,
+                    ], host: {
+                        class: 'mlv-file-upload',
+                        // `title` is the zone's heading, not a tooltip. Written as a static
+                        // attribute (`title="Image"`) it also lands in the DOM, which gives the
+                        // whole zone a native browser tooltip repeating the heading — so strip it.
+                        '[attr.title]': 'null',
+                        '[class.mlv-file-upload--cover]': '_isCover()',
+                        '[class.mlv-file-upload--drag-over]': '_isDragOver()',
+                        '[class.mlv-file-upload--disabled]': 'computedDisabled()',
+                        '[class.mlv-file-upload--error]': '_errors().length > 0',
+                        '[class.mlv-file-upload--multiple]': 'multiple()',
+                        '[class.mlv-file-upload--has-files]': '_files().length > 0',
+                        '[class.mlv-file-upload--compact]': 'compact()',
+                        '(dragover)': '_onDragOver($event)',
+                        '(dragleave)': '_onDragLeave($event)',
+                        '(drop)': '_onDrop($event)',
+                        '(focusout)': '_markTouched()',
+                    }, template: "<input\n  #fileInput\n  class=\"mlv-file-upload__input\"\n  type=\"file\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"computedDisabled()\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  (change)=\"onFileInputChange($event)\"\n/>\n\n<!-- Drop zone: visually interactive drag target.\n     The inner <button type=\"button\"> is the sole keyboard/AT entry point. -->\n<div class=\"mlv-file-upload__zone\">\n  @if (_coverFile(); as cover) {\n  <!-- Cover preview: the image fills the zone, which stays the drop target.\n       Plain <img>, not NgOptimizedImage \u2014 the source is a runtime blob:/data:/\n       remote URL of unknown intrinsic size. -->\n  <img\n    class=\"mlv-file-upload__cover-image\"\n    [src]=\"cover.previewUrl\"\n    [alt]=\"cover.name\"\n  />\n\n  @if (_coverUploading()) {\n  <mlv-loader\n    class=\"mlv-file-upload__cover-progress\"\n    variant=\"bar\"\n    [value]=\"cover.progress ?? 0\"\n  />\n  } } @else {\n  <span class=\"mlv-file-upload__zone-icon\" aria-hidden=\"true\">\n    <svg lucideUpload [size]=\"compact() ? 18 : 28\" />\n  </span>\n\n  <!-- Title is always in the DOM to serve as aria-describedby anchor;\n       hidden visually in compact mode via CSS. -->\n  <span\n    [id]=\"id() + '-title'\"\n    class=\"mlv-file-upload__zone-title\"\n    [class.mlv-file-upload__zone-title--hidden]=\"compact()\"\n    >{{ title() }}</span\n  >\n\n  @if (subtitle() && !compact()) {\n  <span [id]=\"id() + '-subtitle'\" class=\"mlv-file-upload__zone-subtitle\"\n    >{{ subtitle() }}</span\n  >\n  } }\n\n  <!-- One actions container, two presentations. It is the inline action row in\n       list mode and the floating toolbar over the cover image. The two\n       <ng-content> slots MUST stay outside the @if branches: Angular assigns a\n       projected node to the first slot whose selector matches, so duplicating\n       a selector across branches leaves the later copy permanently empty.\n       DOM order equals visual order, and `position` is read as a static\n       attribute here, never as a binding. -->\n  <span\n    [class.mlv-file-upload__zone-action]=\"!_isCover()\"\n    [class.mlv-file-upload__toolbar]=\"_isCover()\"\n  >\n    <ng-content select=\"[mlvFileUploadAction]:not([position=end])\" />\n\n    @if (_isCover()) {\n    <button\n      mlvButton\n      type=\"button\"\n      shape=\"square\"\n      variant=\"transparent\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-label]=\"_i18n().replaceFile\"\n      (click)=\"$event.stopPropagation(); openFilePicker()\"\n    >\n      <svg lucideRefreshCw [size]=\"16\" />\n    </button>\n    } @else {\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"secondary\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-describedby]=\"subtitle() && !compact() ? id() + '-title ' + id() + '-subtitle' : id() + '-title'\"\n      (click)=\"$event.stopPropagation(); openFilePicker()\"\n    >\n      {{ actionLabel() }}\n    </button>\n    }\n\n    <ng-content select=\"[mlvFileUploadAction][position=end]\" />\n\n    @if (_coverFile(); as cover) {\n    <button\n      mlvButton\n      type=\"button\"\n      shape=\"square\"\n      variant=\"transparent\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-label]=\"_coverRemoveLabel()\"\n      (click)=\"$event.stopPropagation(); removeFile(cover.id)\"\n    >\n      <svg lucideTrash2 [size]=\"16\" />\n    </button>\n    }\n  </span>\n</div>\n\n@if (_errors().length > 0) {\n<ul class=\"mlv-file-upload__errors\" role=\"alert\" aria-live=\"assertive\">\n  @for (err of _errors(); track err.code + err.message) {\n  <li class=\"mlv-file-upload__error-item\">{{ err.message }}</li>\n  }\n</ul>\n}\n<!-- In cover state the single file's row would only repeat the image and its\n     remove control, both of which the cover toolbar already provides. -->\n@if (_fileList().length > 0 && !_isCover()) {\n<ul\n  class=\"mlv-file-upload__list\"\n  [attr.aria-label]=\"_i18n().selectedFiles\"\n  aria-live=\"polite\"\n>\n  @for (file of _fileList(); track file.id) {\n  <li>\n    <mlv-file-upload-item\n      class=\"mlv-file-upload-item--entering\"\n      [file]=\"file\"\n      (remove)=\"removeFile(file.id)\"\n    />\n  </li>\n  }\n</ul>\n}\n", styles: [".mlv-file-upload{display:flex;flex-direction:column;gap:.75rem;font-family:var(--mlv-typography-family-text)}.mlv-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.mlv-file-upload__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1.5rem;border:var(--mlv-stroke-width-medium) dashed var(--mlv-border-normal);border-radius:var(--mlv-radius-l);background-color:var(--mlv-background-neutral-1);cursor:pointer;text-align:center;transition:border-color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out);outline:none}.mlv-file-upload__zone:hover{border-color:var(--mlv-border-focus);background-color:var(--mlv-background-neutral-2)}.mlv-file-upload__zone:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-file-upload__zone-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--mlv-text-secondary);margin-bottom:.25rem}.mlv-file-upload__zone-title{font-size:var(--mlv-font-size-m);font-weight:600;color:var(--mlv-text-primary)}.mlv-file-upload__zone-title--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.mlv-file-upload__zone-subtitle{font-size:var(--mlv-typography-ui-s-size);color:var(--mlv-text-secondary)}.mlv-file-upload__zone-action{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--mlv-spacing-2);margin-top:.25rem}.mlv-file-upload__action{flex:none}.mlv-file-upload__cover-image{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;border-radius:inherit;pointer-events:none}.mlv-file-upload__cover-progress{position:absolute;inset-inline:var(--mlv-spacing-3);inset-block-start:var(--mlv-spacing-3);pointer-events:none}.mlv-file-upload__toolbar{position:absolute;inset-block-end:var(--mlv-spacing-3);inset-inline-start:50%;transform:translate(-50%);display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--mlv-spacing-1);padding:var(--mlv-spacing-1);border-radius:var(--mlv-radius-l);background-color:var(--mlv-background-raised);box-shadow:var(--mlv-shadow-floating);opacity:0;pointer-events:none;transition:opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-file-upload__errors{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}.mlv-file-upload__error-item{font-size:var(--mlv-typography-ui-s-size);color:var(--mlv-text-negative);padding:.375rem .75rem;border-radius:var(--mlv-radius-s);background-color:var(--mlv-background-danger-1-pale)}.mlv-file-upload__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.mlv-file-upload--drag-over .mlv-file-upload__zone{border-color:var(--mlv-border-focus);background-color:var(--mlv-background-neutral-2)}.mlv-file-upload--disabled{pointer-events:none;opacity:var(--mlv-disabled-opacity)}.mlv-file-upload--disabled .mlv-file-upload__zone{cursor:not-allowed}.mlv-file-upload--error .mlv-file-upload__zone{border-color:var(--mlv-text-negative)}.mlv-file-upload--cover{--mlv-file-upload-cover-min-height: 12rem}.mlv-file-upload--cover .mlv-file-upload__zone{position:relative;flex:1 1 auto;min-block-size:var(--mlv-file-upload-cover-min-height);padding:0;overflow:hidden}.mlv-file-upload--cover .mlv-file-upload__zone:hover .mlv-file-upload__toolbar,.mlv-file-upload--cover .mlv-file-upload__zone:focus-within .mlv-file-upload__toolbar{opacity:1;pointer-events:auto}@media(hover:none){.mlv-file-upload--cover .mlv-file-upload__toolbar{opacity:1;pointer-events:auto}}.mlv-file-upload--compact .mlv-file-upload__zone{flex-direction:row;padding:.75rem 1rem;gap:.75rem;text-align:left}.mlv-file-upload--compact .mlv-file-upload__zone-icon{margin-bottom:0}.mlv-file-upload--compact .mlv-file-upload__zone-action{margin-top:0}@media(prefers-reduced-motion:reduce){.mlv-file-upload,.mlv-file-upload *,.mlv-file-upload:before,.mlv-file-upload:after,[class^=mlv-file-upload__],[class*=\" mlv-file-upload__\"],[class^=mlv-file-upload--],[class*=\" mlv-file-upload--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], previewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewMode", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], _fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+//# sourceMappingURL=file-upload.js.map

package/esm2022/file-upload/lib/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../../../../../../libs/core/file-upload/src/lib/file-upload/file-upload.ts","../../../../../../../libs/core/file-upload/src/lib/file-upload/file-upload.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,UAAU,EACV,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE9E,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;;AAOzE;;;;GAIG;AAkCH,MAAM,OAAO,aAAc,SAAQ,wBAA2C;IAC5E,6DAA6D;IACpD,KAAK,GAAG,KAAK,CAAoB,EAAE;8EAAC,CAAC;IAC9C,iEAAiE;IAC9C,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;IAExD,oFAAoF;IACnE,SAAS,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;IAE5D,8FAA8F;IACrF,MAAM,GAAG,KAAK,CAAS,EAAE;+EAAC,CAAC;IAEpC;;OAEG;IACM,OAAO,GAAG,KAAK,CAAS,CAAC;gFAAC,CAAC;IAEpC,iDAAiD;IACxC,QAAQ,GAAG,KAAK,CAAwB,IAAI,gFACnD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,mDAAmD;IAC1C,KAAK,GAAG,KAAK,CAAS,wBAAwB;8EAAC,CAAC;IAEzD,wDAAwD;IAC/C,QAAQ,GAAG,KAAK,CAAS,EAAE;iFAAC,CAAC;IAEtC,wCAAwC;IAC/B,WAAW,GAAG,KAAK,CAAS,cAAc;oFAAC,CAAC;IAErD,kFAAkF;IACzE,OAAO,GAAG,KAAK,CAAwB,KAAK,+EACnD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;;;;;;;;;;;;;;;OAkBG;IACM,WAAW,GAAG,KAAK,CAA2B,MAAM;oFAAC,CAAC;IAE/D,uEAAuE;IAC9D,WAAW,GAAG,MAAM,EAAqB,CAAC;IAEnD,yEAAyE;IACtD,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;+EAAC,CAAC;IAE/D,uEAAuE;IACpD,OAAO,GAAG,MAAM,CAA2B,EAAE;gFAAC,CAAC;IAElE,gFAAgF;IAC7D,WAAW,GAAG,MAAM,CAAC,KAAK;oFAAC,CAAC;IAE/C,2DAA2D;IAC1C,UAAU,GACzB,SAAS,CAA+B,WAAW;mFAAC,CAAC;IAEvD,+EAA+E;IAC9D,WAAW,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAE/D,iEAAiE;IAC9C,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;kFAAC,CAAC;IAE7D,iFAAiF;IAEjF;;;;OAIG;IACgB,UAAU,GAAG,QAAQ,CAAyB,GAAG,EAAE;QACpE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO,IAAI,CAAC;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC5B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACpC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/C,CAAC;mFAAC,CAAC;IAEH,uEAAuE;IACpD,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;iFAAC,CAAC;IAEzE;;;OAGG;IACgB,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,OAAO,CACL,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,GAAG,CAC1E,CAAC;IACJ,CAAC;wFAAC,CAAC;IAEH;;;OAGG;IACgB,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACxE,CAAC;0FAAC,CAAC;IAEH,iFAAiF;IAEjF,+EAA+E;IACtE,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,CAAC;iFAAC,CAAC;IAE7D,iFAAiF;IAEjF;;OAEG;IACH,cAAc;QACZ,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAAE,OAAO;QACpC,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACH,iBAAiB,CAAC,KAAY;QAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;QACD,4CAA4C;QAC5C,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;IACnB,CAAC;IAED;;;OAGG;IACH,UAAU,CAAC,EAAU;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACtD,IAAI,MAAM,EAAE,UAAU,EAAE,CAAC;YACvB,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACzC,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAC1B,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAC/C,CAAC;QACF,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,iFAAiF;IAEjF;;OAEG;IACO,WAAW,CAAC,KAAgB;QACpC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;OAEG;IACO,YAAY,CAAC,KAAgB;QACrC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE,CAAC;YAC1E,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;OAEG;IACO,OAAO,CAAC,KAAgB;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAAE,OAAO;QACpC,MAAM,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC;QAC9B,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;YACd,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,QAAkB;QACxC,MAAM,SAAS,GAA6B,EAAE,CAAC;QAC/C,MAAM,QAAQ,GAAsB,EAAE,CAAC;QACvC,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAE1C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACpC,cAAc;YACd,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACpE,SAAS,CAAC,IAAI,CAAC;oBACb,IAAI,EAAE,OAAO;oBACb,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,eAAe;iBACtC,CAAC,CAAC;gBACH,OAAO;YACT,CAAC;YAED,aAAa;YACb,IACE,aAAa,CAAC,MAAM,GAAG,CAAC;gBACxB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,aAAa,CAAC,EAC1C,CAAC;gBACD,SAAS,CAAC,IAAI,CAAC;oBACb,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;iBAC/D,CAAC,CAAC;gBACH,OAAO;YACT,CAAC;YAED,aAAa;YACb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,IAAI,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE,CAAC;gBACzC,MAAM,KAAK,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACpD,SAAS,CAAC,IAAI,CAAC;oBACb,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE;wBACxC,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,IAAI,EAAE,KAAK;qBACZ,CAAC;iBACH,CAAC,CAAC;gBACH,OAAO;YACT,CAAC;YAED,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC/C,MAAM,YAAY,GAAoB;gBACpC,EAAE,EAAE,SAAS,CAAC,UAAU,CAAC;gBACzB,IAAI;gBACJ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;gBAC3D,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE,CAAC;aACZ,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAE5B,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACpB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;YACtE,CAAC;iBAAM,CAAC;gBACN,+CAA+C;gBAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;gBAC/B,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;oBACrB,IAAI,CAAC,CAAC,UAAU;wBAAE,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC3B,CAAC;YACD,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,UAAU,CAChB,GAA4B,EAC5B,MAA8B;QAE9B,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAC3B,IAAI,CAAC,KAAK,EAAuC,EACjD,GAAG,EACH,MAAM,CACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG;YAAE,OAAO,EAAE,CAAC;QACpB,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,IAAU,EAAE,QAAkB;QACpD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YAC/B,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACnD,CAAC;YACD,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC3B,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,CAAC;YACD,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACvC,CAAC;uGAxTU,aAAa;2FAAb,aAAa,q/DCnE1B,kqIAqIA,03ID5FI,SAAS,iIACT,iBAAiB,wGACjB,SAAS,oMACT,YAAY,8DACZ,eAAe,iEACf,YAAY;;2FAqBH,aAAa;kBAjCzB,SAAS;+BACE,iBAAiB,iBAGZ,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,WACtC;wBACP,SAAS;wBACT,iBAAiB;wBACjB,SAAS;wBACT,YAAY;wBACZ,eAAe;wBACf,YAAY;qBACb,QACK;wBACJ,KAAK,EAAE,iBAAiB;wBACxB,oEAAoE;wBACpE,wEAAwE;wBACxE,2EAA2E;wBAC3E,cAAc,EAAE,MAAM;wBACtB,gCAAgC,EAAE,YAAY;wBAC9C,oCAAoC,EAAE,eAAe;wBACrD,mCAAmC,EAAE,oBAAoB;wBACzD,gCAAgC,EAAE,sBAAsB;wBACxD,mCAAmC,EAAE,YAAY;wBACjD,oCAAoC,EAAE,qBAAqB;wBAC3D,kCAAkC,EAAE,WAAW;wBAC/C,YAAY,EAAE,qBAAqB;wBACnC,aAAa,EAAE,sBAAsB;wBACrC,QAAQ,EAAE,iBAAiB;wBAC3B,YAAY,EAAE,gBAAgB;qBAC/B;ugCAyEyC,WAAW","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n  ElementRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MlvSignalFormControlBase } from '@malva-ui/core/form-utils';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport { MlvButton } from '@malva-ui/core/button';\nimport { MlvLoader } from '@malva-ui/core/loader';\nimport { LucideRefreshCw, LucideTrash2, LucideUpload } from '@lucide/angular';\nimport type { MlvFileUploadI18n } from '@malva-ui/i18n';\nimport { MLV_FILE_UPLOAD_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport { MlvFileUploadItem } from '../file-upload-item/file-upload-item';\nimport type {\n  MlvFileUploadPreviewMode,\n  MlvFileValidationError,\n  MlvUploadedFile,\n} from './file-upload.types';\n\n/**\n * File upload component providing a drag-and-drop zone, file validation, and\n * signal, reactive, and template-driven forms integration. Produces an array\n * of `MlvUploadedFile` values.\n */\n@Component({\n  selector: 'mlv-file-upload',\n  templateUrl: './file-upload.html',\n  styleUrl: './file-upload.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    MlvButton,\n    MlvFileUploadItem,\n    MlvLoader,\n    LucideUpload,\n    LucideRefreshCw,\n    LucideTrash2,\n  ],\n  host: {\n    class: 'mlv-file-upload',\n    // `title` is the zone's heading, not a tooltip. Written as a static\n    // attribute (`title=\"Image\"`) it also lands in the DOM, which gives the\n    // whole zone a native browser tooltip repeating the heading — so strip it.\n    '[attr.title]': 'null',\n    '[class.mlv-file-upload--cover]': '_isCover()',\n    '[class.mlv-file-upload--drag-over]': '_isDragOver()',\n    '[class.mlv-file-upload--disabled]': 'computedDisabled()',\n    '[class.mlv-file-upload--error]': '_errors().length > 0',\n    '[class.mlv-file-upload--multiple]': 'multiple()',\n    '[class.mlv-file-upload--has-files]': '_files().length > 0',\n    '[class.mlv-file-upload--compact]': 'compact()',\n    '(dragover)': '_onDragOver($event)',\n    '(dragleave)': '_onDragLeave($event)',\n    '(drop)': '_onDrop($event)',\n    '(focusout)': '_markTouched()',\n  },\n})\nexport class MlvFileUpload extends MlvSignalFormControlBase<MlvUploadedFile[]> {\n  /** The uploaded-file list used by all Angular forms APIs. */\n  readonly value = model<MlvUploadedFile[]>([]);\n  /** @protected Injected i18n translations for the file upload. */\n  protected readonly _i18n = inject(MLV_FILE_UPLOAD_I18N);\n\n  /** @private ICU MessageFormat resolver for the parameterised rejection messages. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /** Comma-separated list of accepted MIME types or file extensions (e.g. `\"image/*,.pdf\"`). */\n  readonly accept = input<string>('');\n\n  /**\n   * Maximum allowed file size in bytes. `0` means unlimited.\n   */\n  readonly maxSize = input<number>(0);\n\n  /** Whether to allow selecting multiple files. */\n  readonly multiple = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Primary heading text shown in the drop zone. */\n  readonly title = input<string>('Drag & drop files here');\n\n  /** Secondary description text shown below the title. */\n  readonly subtitle = input<string>('');\n\n  /** Label text for the browse button. */\n  readonly actionLabel = input<string>('Browse files');\n\n  /** When true, renders a compact single-row drop zone instead of the full zone. */\n  readonly compact = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * How the zone presents the current selection.\n   *\n   * `'list'` (the default) keeps today's behaviour: the prompt and browse\n   * button always show, and selected files are listed below the zone.\n   *\n   * `'cover'` fills the zone with the selected image and swaps the browse\n   * button for a floating replace/remove toolbar. It only takes effect when\n   * **all** of these hold, and silently falls back to `'list'` otherwise:\n   *\n   * 1. `multiple` is `false`,\n   * 2. exactly one file is selected, and\n   * 3. that file carries a `previewUrl`.\n   *\n   * `previewUrl` is generated automatically for any dropped/picked file whose\n   * MIME type starts with `image/`. For an edit-mode seed, write it yourself —\n   * it accepts a remote `https://…` or a `data:` URL just as happily as the\n   * generated `blob:` one.\n   */\n  readonly previewMode = input<MlvFileUploadPreviewMode>('list');\n\n  /** Emits the current file list whenever files are added or removed. */\n  readonly filesChange = output<MlvUploadedFile[]>();\n\n  /** @private List of selected/uploaded files managed by the component. */\n  protected readonly _files = computed(() => this.value() ?? []);\n\n  /** @private Validation errors from the last file selection or drop. */\n  protected readonly _errors = signal<MlvFileValidationError[]>([]);\n\n  /** @private Whether the user is currently dragging files over the drop zone. */\n  protected readonly _isDragOver = signal(false);\n\n  /** @private Reference to the hidden file input element. */\n  private readonly _fileInput =\n    viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n  /** @private Reference to the host element for dragleave boundary detection. */\n  private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n  /** @protected Computed list of files exposed to the template. */\n  protected readonly _fileList = computed(() => this._files());\n\n  // Cover preview ----------------------------------------------------------------\n\n  /**\n   * @protected The single file rendered as a full-zone cover, or `null` when\n   * the cover preconditions are not met (see `previewMode`) and the zone falls\n   * back to the normal prompt.\n   */\n  protected readonly _coverFile = computed<MlvUploadedFile | null>(() => {\n    if (this.previewMode() !== 'cover' || this.multiple()) return null;\n    const files = this._files();\n    if (files.length !== 1) return null;\n    return files[0].previewUrl ? files[0] : null;\n  });\n\n  /** @protected Whether the zone currently renders the cover preview. */\n  protected readonly _isCover = computed(() => this._coverFile() !== null);\n\n  /**\n   * @protected Whether the covered file is still uploading, which overlays a\n   * determinate progress bar on the image instead of falling back to list mode.\n   */\n  protected readonly _coverUploading = computed(() => {\n    const file = this._coverFile();\n    return (\n      file !== null && file.state === 'uploading' && (file.progress ?? 0) < 100\n    );\n  });\n\n  /**\n   * @protected Accessible name for the cover toolbar's remove button, with the\n   * covered file's name interpolated into the shared `removeFile` template.\n   */\n  protected readonly _coverRemoveLabel = computed(() => {\n    const file = this._coverFile();\n    return file ? this._translate('removeFile', { name: file.name }) : '';\n  });\n\n  // Forms value ------------------------------------------------------------------\n\n  /** Whether the control holds a clearable value — At least one file present. */\n  readonly hasValue = computed(() => this._files().length > 0);\n\n  // Public API -------------------------------------------------------------------\n\n  /**\n   * Programmatically opens the native file picker dialog.\n   */\n  openFilePicker(): void {\n    if (this.computedDisabled()) return;\n    this._fileInput()?.nativeElement.click();\n  }\n\n  /**\n   * Handles changes from the hidden file input element.\n   * @param event - The native change event from the input.\n   */\n  onFileInputChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (input.files) {\n      this._validateAndAdd(input.files);\n    }\n    // Reset so the same file can be re-selected\n    input.value = '';\n  }\n\n  /**\n   * Removes a file by its id, revoking the preview URL if present.\n   * @param id - The id of the `MlvUploadedFile` to remove.\n   */\n  removeFile(id: string): void {\n    const target = this._files().find((f) => f.id === id);\n    if (target?.previewUrl) {\n      URL.revokeObjectURL(target.previewUrl);\n    }\n    this.value.update((files) =>\n      (files ?? []).filter((file) => file.id !== id),\n    );\n    this._emitChange();\n  }\n\n  // Internal helpers -------------------------------------------------------------\n\n  /**\n   * @private Handles the dragover event to enable the drag-over state.\n   */\n  protected _onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    if (!this.computedDisabled()) {\n      this._isDragOver.set(true);\n    }\n  }\n\n  /**\n   * @private Handles the dragleave event to clear drag-over state when leaving the host.\n   */\n  protected _onDragLeave(event: DragEvent): void {\n    if (!this._elementRef.nativeElement.contains(event.relatedTarget as Node)) {\n      this._isDragOver.set(false);\n    }\n  }\n\n  /**\n   * @private Handles the drop event, reads dropped files and validates them.\n   */\n  protected _onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this._isDragOver.set(false);\n    if (this.computedDisabled()) return;\n    const dt = event.dataTransfer;\n    if (dt?.files) {\n      this._validateAndAdd(dt.files);\n    }\n  }\n\n  /**\n   * @private Validates a FileList against accept/maxSize constraints and appends valid files.\n   */\n  private _validateAndAdd(fileList: FileList): void {\n    const newErrors: MlvFileValidationError[] = [];\n    const newFiles: MlvUploadedFile[] = [];\n    const acceptedTypes = this._parseAccept();\n\n    Array.from(fileList).forEach((file) => {\n      // Count check\n      if (!this.multiple() && this._files().length + newFiles.length >= 1) {\n        newErrors.push({\n          code: 'count',\n          message: this._i18n().errorSingleFile,\n        });\n        return;\n      }\n\n      // Type check\n      if (\n        acceptedTypes.length > 0 &&\n        !this._isTypeAccepted(file, acceptedTypes)\n      ) {\n        newErrors.push({\n          code: 'type',\n          message: this._translate('errorFileType', { name: file.name }),\n        });\n        return;\n      }\n\n      // Size check\n      const maxBytes = this.maxSize();\n      if (maxBytes > 0 && file.size > maxBytes) {\n        const maxMb = (maxBytes / (1024 * 1024)).toFixed(1);\n        newErrors.push({\n          code: 'size',\n          message: this._translate('errorFileSize', {\n            name: file.name,\n            size: maxMb,\n          }),\n        });\n        return;\n      }\n\n      const isImage = file.type.startsWith('image/');\n      const uploadedFile: MlvUploadedFile = {\n        id: mlvNextId('mlv-file'),\n        file,\n        name: file.name,\n        size: file.size,\n        previewUrl: isImage ? URL.createObjectURL(file) : undefined,\n        state: 'pending',\n        progress: 0,\n      };\n      newFiles.push(uploadedFile);\n    });\n\n    this._errors.set(newErrors);\n\n    if (newFiles.length > 0) {\n      if (this.multiple()) {\n        this.value.update((previous) => [...(previous ?? []), ...newFiles]);\n      } else {\n        // Replace previous file when multiple is false\n        const previous = this._files();\n        previous.forEach((f) => {\n          if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);\n        });\n        this.value.set(newFiles);\n      }\n      this._emitChange();\n    }\n  }\n\n  /**\n   * @private Resolves one of the component's ICU rejection templates with the\n   * offending file's details. Keeps every user-facing validation string in the\n   * language pack instead of hard-coded English.\n   */\n  private _translate(\n    key: keyof MlvFileUploadI18n,\n    params: Record<string, string>,\n  ): string {\n    return this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      key,\n      params,\n    );\n  }\n\n  /**\n   * @private Parses the accept input into a list of accepted MIME prefixes and extensions.\n   */\n  private _parseAccept(): string[] {\n    const raw = this.accept().trim();\n    if (!raw) return [];\n    return raw.split(',').map((s) => s.trim().toLowerCase());\n  }\n\n  /**\n   * @private Checks whether a file matches the accepted type list.\n   */\n  private _isTypeAccepted(file: File, accepted: string[]): boolean {\n    return accepted.some((pattern) => {\n      if (pattern.startsWith('.')) {\n        return file.name.toLowerCase().endsWith(pattern);\n      }\n      if (pattern.endsWith('/*')) {\n        return file.type.startsWith(pattern.slice(0, -1));\n      }\n      return file.type === pattern;\n    });\n  }\n\n  /**\n   * @private Emits the current file list through the public change output.\n   */\n  private _emitChange(): void {\n    this.filesChange.emit(this._files());\n  }\n}\n","<input\n  #fileInput\n  class=\"mlv-file-upload__input\"\n  type=\"file\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"computedDisabled()\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  (change)=\"onFileInputChange($event)\"\n/>\n\n<!-- Drop zone: visually interactive drag target.\n     The inner <button type=\"button\"> is the sole keyboard/AT entry point. -->\n<div class=\"mlv-file-upload__zone\">\n  @if (_coverFile(); as cover) {\n  <!-- Cover preview: the image fills the zone, which stays the drop target.\n       Plain <img>, not NgOptimizedImage — the source is a runtime blob:/data:/\n       remote URL of unknown intrinsic size. -->\n  <img\n    class=\"mlv-file-upload__cover-image\"\n    [src]=\"cover.previewUrl\"\n    [alt]=\"cover.name\"\n  />\n\n  @if (_coverUploading()) {\n  <mlv-loader\n    class=\"mlv-file-upload__cover-progress\"\n    variant=\"bar\"\n    [value]=\"cover.progress ?? 0\"\n  />\n  } } @else {\n  <span class=\"mlv-file-upload__zone-icon\" aria-hidden=\"true\">\n    <svg lucideUpload [size]=\"compact() ? 18 : 28\" />\n  </span>\n\n  <!-- Title is always in the DOM to serve as aria-describedby anchor;\n       hidden visually in compact mode via CSS. -->\n  <span\n    [id]=\"id() + '-title'\"\n    class=\"mlv-file-upload__zone-title\"\n    [class.mlv-file-upload__zone-title--hidden]=\"compact()\"\n    >{{ title() }}</span\n  >\n\n  @if (subtitle() && !compact()) {\n  <span [id]=\"id() + '-subtitle'\" class=\"mlv-file-upload__zone-subtitle\"\n    >{{ subtitle() }}</span\n  >\n  } }\n\n  <!-- One actions container, two presentations. It is the inline action row in\n       list mode and the floating toolbar over the cover image. The two\n       <ng-content> slots MUST stay outside the @if branches: Angular assigns a\n       projected node to the first slot whose selector matches, so duplicating\n       a selector across branches leaves the later copy permanently empty.\n       DOM order equals visual order, and `position` is read as a static\n       attribute here, never as a binding. -->\n  <span\n    [class.mlv-file-upload__zone-action]=\"!_isCover()\"\n    [class.mlv-file-upload__toolbar]=\"_isCover()\"\n  >\n    <ng-content select=\"[mlvFileUploadAction]:not([position=end])\" />\n\n    @if (_isCover()) {\n    <button\n      mlvButton\n      type=\"button\"\n      shape=\"square\"\n      variant=\"transparent\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-label]=\"_i18n().replaceFile\"\n      (click)=\"$event.stopPropagation(); openFilePicker()\"\n    >\n      <svg lucideRefreshCw [size]=\"16\" />\n    </button>\n    } @else {\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"secondary\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-describedby]=\"subtitle() && !compact() ? id() + '-title ' + id() + '-subtitle' : id() + '-title'\"\n      (click)=\"$event.stopPropagation(); openFilePicker()\"\n    >\n      {{ actionLabel() }}\n    </button>\n    }\n\n    <ng-content select=\"[mlvFileUploadAction][position=end]\" />\n\n    @if (_coverFile(); as cover) {\n    <button\n      mlvButton\n      type=\"button\"\n      shape=\"square\"\n      variant=\"transparent\"\n      [disabled]=\"computedDisabled()\"\n      [attr.aria-label]=\"_coverRemoveLabel()\"\n      (click)=\"$event.stopPropagation(); removeFile(cover.id)\"\n    >\n      <svg lucideTrash2 [size]=\"16\" />\n    </button>\n    }\n  </span>\n</div>\n\n@if (_errors().length > 0) {\n<ul class=\"mlv-file-upload__errors\" role=\"alert\" aria-live=\"assertive\">\n  @for (err of _errors(); track err.code + err.message) {\n  <li class=\"mlv-file-upload__error-item\">{{ err.message }}</li>\n  }\n</ul>\n}\n<!-- In cover state the single file's row would only repeat the image and its\n     remove control, both of which the cover toolbar already provides. -->\n@if (_fileList().length > 0 && !_isCover()) {\n<ul\n  class=\"mlv-file-upload__list\"\n  [attr.aria-label]=\"_i18n().selectedFiles\"\n  aria-live=\"polite\"\n>\n  @for (file of _fileList(); track file.id) {\n  <li>\n    <mlv-file-upload-item\n      class=\"mlv-file-upload-item--entering\"\n      [file]=\"file\"\n      (remove)=\"removeFile(file.id)\"\n    />\n  </li>\n  }\n</ul>\n}\n"]}

package/esm2022/file-upload/lib/file-upload/file-upload.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=file-upload.types.js.map

package/esm2022/file-upload/lib/file-upload/file-upload.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.types.js","sourceRoot":"","sources":["../../../../../../../libs/core/file-upload/src/lib/file-upload/file-upload.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Represents a file that has been selected or uploaded.\n */\nexport interface MlvUploadedFile {\n  /** Unique identifier for the file entry. */\n  id: string;\n  /** The native File object. */\n  file: File;\n  /** Display name derived from the file. */\n  name: string;\n  /** File size in bytes. */\n  size: number;\n  /** Object URL for image preview — revoked when the file is removed. */\n  previewUrl?: string;\n  /** Current upload state. */\n  state: 'pending' | 'uploading' | 'success' | 'error';\n  /** Upload progress from 0–100 (used when state is `'uploading'`). */\n  progress?: number;\n  /** Validation error set when the file fails accept/size/count checks. */\n  error?: MlvFileValidationError;\n}\n\n/**\n * Describes a file validation failure.\n */\nexport interface MlvFileValidationError {\n  /** Machine-readable reason code. */\n  code: 'size' | 'type' | 'count';\n  /** Human-readable error message. */\n  message: string;\n}\n\n/** Overall state of the drop-zone. */\nexport type MlvFileUploadState = 'idle' | 'dragging' | 'disabled';\n\n/**\n * How the drop zone presents the current selection.\n *\n * - `'list'` — the default. The zone always shows the prompt and browse\n *   button, and selected files are listed below it.\n * - `'cover'` — a single selected image fills the zone, with a floating\n *   replace/remove toolbar. Falls back to `'list'` whenever the cover\n *   preconditions are not met (see `MlvFileUpload.previewMode`).\n */\nexport type MlvFileUploadPreviewMode = 'list' | 'cover';\n"]}

package/esm2022/file-upload/lib/file-upload-action.js

@@ -0,0 +1,65 @@
+import { Directive, input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Marks a projected control as an extra action in the drop zone's action row,
+ * next to the built-in browse button. Typical use is an icon-only button that
+ * offers an alternative to picking a file — "generate with AI", "pick from
+ * library", "use camera".
+ *
+ * `position` is matched by the component's `<ng-content>` selectors, so it must
+ * be written as a **static attribute** (`position="end"`), exactly like the
+ * other Malva UI slot markers. A binding (`[position]="…"`) changes the
+ * directive's signal but cannot move the node between projection slots.
+ * DOM order equals visual order — nothing is reordered with CSS `order` — so
+ * the tab sequence always matches what the user sees.
+ *
+ * Clicks (including Enter/Space activation of a projected `<button>`) stop at
+ * the slot, so an extra action never also triggers the surrounding zone and
+ * opens the native file picker.
+ *
+ * Disabling a projected control is the consumer's job: `mlv-file-upload` only
+ * dims the zone and blocks pointer events while the control itself is
+ * disabled, it does not write `disabled` onto projected content.
+ *
+ * @example
+ * ```html
+ * <mlv-file-upload title="Image" actionLabel="Choose image">
+ *   <button mlvButton mlvFileUploadAction type="button" shape="square"
+ *           aria-label="Generate image with AI">
+ *     <svg lucideSparkles [size]="16" />
+ *   </button>
+ * </mlv-file-upload>
+ *
+ * <mlv-file-upload actionLabel="Choose image">
+ *   <button mlvButton mlvFileUploadAction position="end" type="button"
+ *           variant="transparent">
+ *     Import from URL
+ *   </button>
+ * </mlv-file-upload>
+ * ```
+ */
+export class MlvFileUploadAction {
+    /**
+     * Where the action sits relative to the browse button. `'start'` (the
+     * default) renders it before the button, `'end'` after it.
+     *
+     * Set it as a static attribute — `position="end"` — because the value is
+     * read by the host component's content-projection selector, not at runtime.
+     */
+    position = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFileUploadAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvFileUploadAction, isStandalone: true, selector: "[mlvFileUploadAction]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()" }, properties: { "class.mlv-file-upload__action--end": "position() === 'end'" }, classAttribute: "mlv-file-upload__action" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFileUploadAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvFileUploadAction]',
+                    host: {
+                        class: 'mlv-file-upload__action',
+                        '[class.mlv-file-upload__action--end]': "position() === 'end'",
+                        '(click)': '$event.stopPropagation()',
+                    },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+//# sourceMappingURL=file-upload-action.js.map

package/esm2022/file-upload/lib/file-upload-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-action.js","sourceRoot":"","sources":["../../../../../../libs/core/file-upload/src/lib/file-upload-action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAKjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AASH,MAAM,OAAO,mBAAmB;IAC9B;;;;;;OAMG;IACM,QAAQ,GAAG,KAAK,CAA8B,OAAO;iFAAC,CAAC;uGARrD,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAR/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,IAAI,EAAE;wBACJ,KAAK,EAAE,yBAAyB;wBAChC,sCAAsC,EAAE,sBAAsB;wBAC9D,SAAS,EAAE,0BAA0B;qBACtC;iBACF","sourcesContent":["import { Directive, input } from '@angular/core';\n\n/** Which side of the browse button a `[mlvFileUploadAction]` control renders on. */\nexport type MlvFileUploadActionPosition = 'start' | 'end';\n\n/**\n * Marks a projected control as an extra action in the drop zone's action row,\n * next to the built-in browse button. Typical use is an icon-only button that\n * offers an alternative to picking a file — \"generate with AI\", \"pick from\n * library\", \"use camera\".\n *\n * `position` is matched by the component's `<ng-content>` selectors, so it must\n * be written as a **static attribute** (`position=\"end\"`), exactly like the\n * other Malva UI slot markers. A binding (`[position]=\"…\"`) changes the\n * directive's signal but cannot move the node between projection slots.\n * DOM order equals visual order — nothing is reordered with CSS `order` — so\n * the tab sequence always matches what the user sees.\n *\n * Clicks (including Enter/Space activation of a projected `<button>`) stop at\n * the slot, so an extra action never also triggers the surrounding zone and\n * opens the native file picker.\n *\n * Disabling a projected control is the consumer's job: `mlv-file-upload` only\n * dims the zone and blocks pointer events while the control itself is\n * disabled, it does not write `disabled` onto projected content.\n *\n * @example\n * ```html\n * <mlv-file-upload title=\"Image\" actionLabel=\"Choose image\">\n *   <button mlvButton mlvFileUploadAction type=\"button\" shape=\"square\"\n *           aria-label=\"Generate image with AI\">\n *     <svg lucideSparkles [size]=\"16\" />\n *   </button>\n * </mlv-file-upload>\n *\n * <mlv-file-upload actionLabel=\"Choose image\">\n *   <button mlvButton mlvFileUploadAction position=\"end\" type=\"button\"\n *           variant=\"transparent\">\n *     Import from URL\n *   </button>\n * </mlv-file-upload>\n * ```\n */\n@Directive({\n  selector: '[mlvFileUploadAction]',\n  host: {\n    class: 'mlv-file-upload__action',\n    '[class.mlv-file-upload__action--end]': \"position() === 'end'\",\n    '(click)': '$event.stopPropagation()',\n  },\n})\nexport class MlvFileUploadAction {\n  /**\n   * Where the action sits relative to the browse button. `'start'` (the\n   * default) renders it before the button, `'end'` after it.\n   *\n   * Set it as a static attribute — `position=\"end\"` — because the value is\n   * read by the host component's content-projection selector, not at runtime.\n   */\n  readonly position = input<MlvFileUploadActionPosition>('start');\n}\n"]}

package/esm2022/file-upload/lib/file-upload-item/file-upload-item.js

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, output, ViewEncapsulation, } from '@angular/core';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { LucideFile, LucideX, LucideCircleCheck, LucideCircleX, } from '@lucide/angular';
+import { MLV_FILE_UPLOAD_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+/**
+ * Renders a single uploaded file row with thumbnail, metadata, progress bar,
+ * status icon, and a remove button.
+ */
+export class MlvFileUploadItem {
+    /** @protected Injected i18n translations for the file upload. */
+    _i18n = inject(MLV_FILE_UPLOAD_I18N);
+    /** @private ICU MessageFormat resolver for parameterised i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** The uploaded file descriptor to render. */
+    file = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Accessible label for the remove button, naming the specific file
+     * (e.g. `"Remove report.xlsx"`) so screen-reader users know which file the
+     * button removes. Resolves the `removeFile` ICU template with the file name.
+     */
+    _removeLabel = computed(() => this._resolver.resolve(this._i18n(), 'removeFile', { name: this.file().name }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_removeLabel" }] : /* istanbul ignore next */ []));
+    /** Emits when the user clicks the remove button. */
+    remove = output();
+    /** @protected Human-readable file size string (e.g. "1.2 MB"). */
+    _formattedSize = computed(() => {
+        const bytes = this.file().size;
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formattedSize" }] : /* istanbul ignore next */ []));
+    /** @protected Whether to show the progress bar. */
+    _showProgress = computed(() => this.file().state === 'uploading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showProgress" }] : /* istanbul ignore next */ []));
+    /** @protected Current progress value for the loader bar. */
+    _progress = computed(() => this.file().progress ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFileUploadItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFileUploadItem, isStandalone: true, selector: "mlv-file-upload-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove" }, host: { properties: { "class.mlv-file-upload-item--uploading": "file().state === \"uploading\"", "class.mlv-file-upload-item--success": "file().state === \"success\"", "class.mlv-file-upload-item--error": "file().state === \"error\"" }, classAttribute: "mlv-file-upload-item" }, ngImport: i0, template: "<div class=\"mlv-file-upload-item__thumbnail\">\n  @if (file().previewUrl) {\n  <img\n    [src]=\"file().previewUrl\"\n    [alt]=\"file().name\"\n    class=\"mlv-file-upload-item__thumbnail-img\"\n  />\n  } @else {\n  <svg lucideFile [size]=\"20\" aria-hidden=\"true\" />\n  }\n</div>\n\n<div class=\"mlv-file-upload-item__info\">\n  <span class=\"mlv-file-upload-item__name\" [title]=\"file().name\"\n    >{{ file().name }}</span\n  >\n\n  @if (file().error) {\n  <span class=\"mlv-file-upload-item__meta mlv-file-upload-item__meta--error\">\n    {{ file().error!.message }}\n  </span>\n  } @else {\n  <span class=\"mlv-file-upload-item__meta\">{{ _formattedSize() }}</span>\n  } @if (_showProgress()) {\n  <mlv-loader\n    class=\"mlv-file-upload-item__progress\"\n    variant=\"bar\"\n    [value]=\"_progress()\"\n    [size]=\"3\"\n    [ariaLabel]=\"'Uploading ' + file().name + ', ' + _progress() + '%'\"\n  />\n  }\n</div>\n\n<div class=\"mlv-file-upload-item__actions\">\n  @if (file().state === 'success') {\n  <svg\n    lucideCircleCheck\n    class=\"mlv-file-upload-item__status-icon mlv-file-upload-item__status-icon--success\"\n    [size]=\"18\"\n    [attr.aria-label]=\"_i18n().uploadComplete\"\n    role=\"img\"\n  />\n  } @if (file().state === 'error') {\n  <svg\n    lucideCircleX\n    class=\"mlv-file-upload-item__status-icon mlv-file-upload-item__status-icon--error\"\n    [size]=\"18\"\n    [attr.aria-label]=\"_i18n().uploadFailed\"\n    role=\"img\"\n  />\n  }\n\n  <button\n    type=\"button\"\n    class=\"mlv-file-upload-item__remove\"\n    [attr.aria-label]=\"_removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <svg lucideX [size]=\"16\" aria-hidden=\"true\" />\n  </button>\n</div>\n", styles: [".mlv-file-upload-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:var(--mlv-radius-m);border:var(--mlv-stroke-width) solid var(--mlv-border-normal);background-color:var(--mlv-background-neutral-1);transition:background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-file-upload-item__thumbnail{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:var(--mlv-radius-s);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--mlv-background-neutral-2);color:var(--mlv-text-secondary)}.mlv-file-upload-item__thumbnail-img{width:100%;height:100%;object-fit:cover}.mlv-file-upload-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.mlv-file-upload-item__name{font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-s);color:var(--mlv-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlv-file-upload-item__meta{font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-caption-size);color:var(--mlv-text-secondary)}.mlv-file-upload-item__meta--error{color:var(--mlv-text-negative)}.mlv-file-upload-item__progress{margin-top:.25rem;width:100%}.mlv-file-upload-item__actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.mlv-file-upload-item__status-icon--success{color:var(--mlv-text-positive)}.mlv-file-upload-item__status-icon--error{color:var(--mlv-text-negative)}.mlv-file-upload-item__remove{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:var(--mlv-radius-s);cursor:pointer;color:var(--mlv-text-secondary);transition:color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-file-upload-item__remove:hover{color:var(--mlv-text-primary);background-color:var(--mlv-background-neutral-2)}.mlv-file-upload-item__remove:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-file-upload-item--uploading{border-color:var(--mlv-border-focus)}.mlv-file-upload-item--success{border-color:var(--mlv-text-positive)}.mlv-file-upload-item--error{border-color:var(--mlv-text-negative);background-color:var(--mlv-background-danger-1-pale)}.mlv-file-upload-item--entering{animation:var(--mlv-duration-normal) var(--mlv-ease-out) file-item-enter}.mlv-file-upload-item--leaving{animation:var(--mlv-duration-normal) var(--mlv-ease-in) file-item-leave}@media(prefers-reduced-motion:reduce){.mlv-file-upload-item,.mlv-file-upload-item *,.mlv-file-upload-item:before,.mlv-file-upload-item:after,[class^=mlv-file-upload-item__],[class*=\" mlv-file-upload-item__\"],[class^=mlv-file-upload-item--],[class*=\" mlv-file-upload-item--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes file-item-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes file-item-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.25rem)}}\n"], dependencies: [{ kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: LucideFile, selector: "svg[lucideFile]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideCircleCheck, selector: "svg[lucideCircleCheck], svg[lucideCheckCircle2]" }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFileUploadItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-file-upload-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MlvLoader, LucideFile, LucideX, LucideCircleCheck, LucideCircleX], host: {
+                        class: 'mlv-file-upload-item',
+                        '[class.mlv-file-upload-item--uploading]': 'file().state === "uploading"',
+                        '[class.mlv-file-upload-item--success]': 'file().state === "success"',
+                        '[class.mlv-file-upload-item--error]': 'file().state === "error"',
+                    }, template: "<div class=\"mlv-file-upload-item__thumbnail\">\n  @if (file().previewUrl) {\n  <img\n    [src]=\"file().previewUrl\"\n    [alt]=\"file().name\"\n    class=\"mlv-file-upload-item__thumbnail-img\"\n  />\n  } @else {\n  <svg lucideFile [size]=\"20\" aria-hidden=\"true\" />\n  }\n</div>\n\n<div class=\"mlv-file-upload-item__info\">\n  <span class=\"mlv-file-upload-item__name\" [title]=\"file().name\"\n    >{{ file().name }}</span\n  >\n\n  @if (file().error) {\n  <span class=\"mlv-file-upload-item__meta mlv-file-upload-item__meta--error\">\n    {{ file().error!.message }}\n  </span>\n  } @else {\n  <span class=\"mlv-file-upload-item__meta\">{{ _formattedSize() }}</span>\n  } @if (_showProgress()) {\n  <mlv-loader\n    class=\"mlv-file-upload-item__progress\"\n    variant=\"bar\"\n    [value]=\"_progress()\"\n    [size]=\"3\"\n    [ariaLabel]=\"'Uploading ' + file().name + ', ' + _progress() + '%'\"\n  />\n  }\n</div>\n\n<div class=\"mlv-file-upload-item__actions\">\n  @if (file().state === 'success') {\n  <svg\n    lucideCircleCheck\n    class=\"mlv-file-upload-item__status-icon mlv-file-upload-item__status-icon--success\"\n    [size]=\"18\"\n    [attr.aria-label]=\"_i18n().uploadComplete\"\n    role=\"img\"\n  />\n  } @if (file().state === 'error') {\n  <svg\n    lucideCircleX\n    class=\"mlv-file-upload-item__status-icon mlv-file-upload-item__status-icon--error\"\n    [size]=\"18\"\n    [attr.aria-label]=\"_i18n().uploadFailed\"\n    role=\"img\"\n  />\n  }\n\n  <button\n    type=\"button\"\n    class=\"mlv-file-upload-item__remove\"\n    [attr.aria-label]=\"_removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <svg lucideX [size]=\"16\" aria-hidden=\"true\" />\n  </button>\n</div>\n", styles: [".mlv-file-upload-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:var(--mlv-radius-m);border:var(--mlv-stroke-width) solid var(--mlv-border-normal);background-color:var(--mlv-background-neutral-1);transition:background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-file-upload-item__thumbnail{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:var(--mlv-radius-s);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--mlv-background-neutral-2);color:var(--mlv-text-secondary)}.mlv-file-upload-item__thumbnail-img{width:100%;height:100%;object-fit:cover}.mlv-file-upload-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.mlv-file-upload-item__name{font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-s);color:var(--mlv-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlv-file-upload-item__meta{font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-caption-size);color:var(--mlv-text-secondary)}.mlv-file-upload-item__meta--error{color:var(--mlv-text-negative)}.mlv-file-upload-item__progress{margin-top:.25rem;width:100%}.mlv-file-upload-item__actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.mlv-file-upload-item__status-icon--success{color:var(--mlv-text-positive)}.mlv-file-upload-item__status-icon--error{color:var(--mlv-text-negative)}.mlv-file-upload-item__remove{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:var(--mlv-radius-s);cursor:pointer;color:var(--mlv-text-secondary);transition:color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-file-upload-item__remove:hover{color:var(--mlv-text-primary);background-color:var(--mlv-background-neutral-2)}.mlv-file-upload-item__remove:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-file-upload-item--uploading{border-color:var(--mlv-border-focus)}.mlv-file-upload-item--success{border-color:var(--mlv-text-positive)}.mlv-file-upload-item--error{border-color:var(--mlv-text-negative);background-color:var(--mlv-background-danger-1-pale)}.mlv-file-upload-item--entering{animation:var(--mlv-duration-normal) var(--mlv-ease-out) file-item-enter}.mlv-file-upload-item--leaving{animation:var(--mlv-duration-normal) var(--mlv-ease-in) file-item-leave}@media(prefers-reduced-motion:reduce){.mlv-file-upload-item,.mlv-file-upload-item *,.mlv-file-upload-item:before,.mlv-file-upload-item:after,[class^=mlv-file-upload-item__],[class*=\" mlv-file-upload-item__\"],[class^=mlv-file-upload-item--],[class*=\" mlv-file-upload-item--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes file-item-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes file-item-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.25rem)}}\n"] }]
+        }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+//# sourceMappingURL=file-upload-item.js.map

package/esm2022/file-upload/lib/file-upload-item/file-upload-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item.js","sourceRoot":"","sources":["../../../../../../../libs/core/file-upload/src/lib/file-upload-item/file-upload-item.ts","../../../../../../../libs/core/file-upload/src/lib/file-upload-item/file-upload-item.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EACL,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;;AAG9E;;;GAGG;AAeH,MAAM,OAAO,iBAAiB;IAC5B,iEAAiE;IAC9C,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;IAExD,0EAA0E;IACzD,SAAS,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;IAE5D,8CAA8C;IACrC,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAmB,CAAC;IAElD;;;;OAIG;IACgB,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC9C,IAAI,CAAC,SAAS,CAAC,OAAO,CACpB,IAAI,CAAC,KAAK,EAAuC,EACjD,YAAY,EACZ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAC3B;qFACF,CAAC;IAEF,oDAAoD;IAC3C,MAAM,GAAG,MAAM,EAAQ,CAAC;IAEjC,kEAAkE;IAC/C,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE;QAChD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC;QAC/B,IAAI,KAAK,GAAG,IAAI;YAAE,OAAO,GAAG,KAAK,IAAI,CAAC;QACtC,IAAI,KAAK,GAAG,IAAI,GAAG,IAAI;YAAE,OAAO,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAClE,OAAO,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IACpD,CAAC;uFAAC,CAAC;IAEH,mDAAmD;IAChC,aAAa,GAAG,QAAQ,CACzC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,WAAW;sFACxC,CAAC;IAEF,4DAA4D;IACzC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC;kFAAC,CAAC;uGAxC9D,iBAAiB;2FAAjB,iBAAiB,sgBCrC9B,srDA8DA,0qGDjCY,SAAS,oMAAE,UAAU,4DAAE,OAAO,yDAAE,iBAAiB,4FAAE,aAAa;;2FAQ/D,iBAAiB;kBAd7B,SAAS;+BACE,sBAAsB,iBAGjB,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,WACtC,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,EAAE,aAAa,CAAC,QACrE;wBACJ,KAAK,EAAE,sBAAsB;wBAC7B,yCAAyC,EAAE,8BAA8B;wBACzE,uCAAuC,EAAE,4BAA4B;wBACrE,qCAAqC,EAAE,0BAA0B;qBAClE","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MlvLoader } from '@malva-ui/core/loader';\nimport {\n  LucideFile,\n  LucideX,\n  LucideCircleCheck,\n  LucideCircleX,\n} from '@lucide/angular';\nimport { MLV_FILE_UPLOAD_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport type { MlvUploadedFile } from '../file-upload/file-upload.types';\n\n/**\n * Renders a single uploaded file row with thumbnail, metadata, progress bar,\n * status icon, and a remove button.\n */\n@Component({\n  selector: 'mlv-file-upload-item',\n  templateUrl: './file-upload-item.html',\n  styleUrl: './file-upload-item.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MlvLoader, LucideFile, LucideX, LucideCircleCheck, LucideCircleX],\n  host: {\n    class: 'mlv-file-upload-item',\n    '[class.mlv-file-upload-item--uploading]': 'file().state === \"uploading\"',\n    '[class.mlv-file-upload-item--success]': 'file().state === \"success\"',\n    '[class.mlv-file-upload-item--error]': 'file().state === \"error\"',\n  },\n})\nexport class MlvFileUploadItem {\n  /** @protected Injected i18n translations for the file upload. */\n  protected readonly _i18n = inject(MLV_FILE_UPLOAD_I18N);\n\n  /** @private ICU MessageFormat resolver for parameterised i18n strings. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /** The uploaded file descriptor to render. */\n  readonly file = input.required<MlvUploadedFile>();\n\n  /**\n   * @protected Accessible label for the remove button, naming the specific file\n   * (e.g. `\"Remove report.xlsx\"`) so screen-reader users know which file the\n   * button removes. Resolves the `removeFile` ICU template with the file name.\n   */\n  protected readonly _removeLabel = computed(() =>\n    this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'removeFile',\n      { name: this.file().name },\n    ),\n  );\n\n  /** Emits when the user clicks the remove button. */\n  readonly remove = output<void>();\n\n  /** @protected Human-readable file size string (e.g. \"1.2 MB\"). */\n  protected readonly _formattedSize = computed(() => {\n    const bytes = this.file().size;\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  });\n\n  /** @protected Whether to show the progress bar. */\n  protected readonly _showProgress = computed(\n    () => this.file().state === 'uploading',\n  );\n\n  /** @protected Current progress value for the loader bar. */\n  protected readonly _progress = computed(() => this.file().progress ?? 0);\n}\n","<div class=\"mlv-file-upload-item__thumbnail\">\n  @if (file().previewUrl) {\n  <img\n    [src]=\"file().previewUrl\"\n    [alt]=\"file().name\"\n    class=\"mlv-file-upload-item__thumbnail-img\"\n  />\n  } @else {\n  <svg lucideFile [size]=\"20\" aria-hidden=\"true\" />\n  }\n</div>\n\n<div class=\"mlv-file-upload-item__info\">\n  <span class=\"mlv-file-upload-item__name\" [title]=\"file().name\"\n    >{{ file().name }}</span\n  >\n\n  @if (file().error) {\n  <span class=\"mlv-file-upload-item__meta mlv-file-upload-item__meta--error\">\n    {{ file().error!.message }}\n  </span>\n  } @else {\n  <span class=\"mlv-file-upload-item__meta\">{{ _formattedSize() }}</span>\n  } @if (_showProgress()) {\n  <mlv-loader\n    class=\"mlv-file-upload-item__progress\"\n    variant=\"bar\"\n    [value]=\"_progress()\"\n    [size]=\"3\"\n    [ariaLabel]=\"'Uploading ' + file().name + ', ' + _progress() + '%'\"\n  />\n  }\n</div>\n\n<div class=\"mlv-file-upload-item__actions\">\n  @if (file().state === 'success') {\n  <svg\n    lucideCircleCheck\n    class=\"mlv-file-upload-item__status-icon mlv-file-upload-item__status-icon--success\"\n    [size]=\"18\"\n    [attr.aria-label]=\"_i18n().uploadComplete\"\n    role=\"img\"\n  />\n  } @if (file().state === 'error') {\n  <svg\n    lucideCircleX\n    class=\"mlv-file-upload-item__status-icon mlv-file-upload-item__status-icon--error\"\n    [size]=\"18\"\n    [attr.aria-label]=\"_i18n().uploadFailed\"\n    role=\"img\"\n  />\n  }\n\n  <button\n    type=\"button\"\n    class=\"mlv-file-upload-item__remove\"\n    [attr.aria-label]=\"_removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <svg lucideX [size]=\"16\" aria-hidden=\"true\" />\n  </button>\n</div>\n"]}