@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-file-upload.mjs

@@ -0,0 +1,451 @@
+import * as i0 from '@angular/core';
+import { input, Directive, inject, computed, output, ChangeDetectionStrategy, ViewEncapsulation, Component, model, signal, viewChild, ElementRef } 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 { MlvButtonClose, MlvButton } from '@malva-ui/core/button';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { LucideFile, LucideCircleCheck, LucideCircleX, LucideUpload, LucideRefreshCw, LucideTrash2 } from '@lucide/angular';
+import { MLV_FILE_UPLOAD_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvClick } from '@malva-ui/cdk/accessibility';
+
+/**
+ * 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>
+ * ```
+ */
+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 }] }] } });
+
+/**
+ * Renders a single uploaded file row with thumbnail, metadata, progress bar,
+ * status icon, and a remove button.
+ */
+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  <mlv-button-close\n    class=\"mlv-file-upload-item__remove\"\n    mlvDensity=\"compact\"\n    [ariaLabel]=\"_removeLabel()\"\n    (click)=\"remove.emit()\"\n  ></mlv-button-close>\n</div>\n", styles: ["@layer mlv.components{.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-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.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: LucideCircleCheck, selector: "svg[lucideCircleCheck], svg[lucideCheckCircle2]" }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }, { kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }], 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,
+                        LucideCircleCheck,
+                        LucideCircleX,
+                        MlvButtonClose,
+                        MlvClick,
+                    ], 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  <mlv-button-close\n    class=\"mlv-file-upload-item__remove\"\n    mlvDensity=\"compact\"\n    [ariaLabel]=\"_removeLabel()\"\n    (click)=\"remove.emit()\"\n  ></mlv-button-close>\n</div>\n", styles: ["@layer mlv.components{.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-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.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"] }] } });
+
+/**
+ * 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.
+ */
+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: ["@layer mlv.components{.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-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.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:start}.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", "selected"] }, { 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: ["@layer mlv.components{.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-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.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:start}.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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvFileUpload, MlvFileUploadAction, MlvFileUploadItem };
+//# sourceMappingURL=malva-ui-core-file-upload.mjs.map

package/fesm2022/malva-ui-core-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-file-upload.mjs","sources":["../../../../libs/core/file-upload/src/lib/file-upload-action.ts","../../../../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","../../../../libs/core/file-upload/src/lib/file-upload/file-upload.ts","../../../../libs/core/file-upload/src/lib/file-upload/file-upload.html","../../../../libs/core/file-upload/src/malva-ui-core-file-upload.ts"],"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","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 { LucideFile, LucideCircleCheck, LucideCircleX } from '@lucide/angular';\nimport { MLV_FILE_UPLOAD_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport type { MlvUploadedFile } from '../file-upload/file-upload.types';\nimport { MlvButtonClose } from '@malva-ui/core/button';\nimport { MlvClick } from '@malva-ui/cdk/accessibility';\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: [\n    MlvLoader,\n    LucideFile,\n    LucideCircleCheck,\n    LucideCircleX,\n    MlvButtonClose,\n    MlvClick,\n  ],\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  <mlv-button-close\n    class=\"mlv-file-upload-item__remove\"\n    mlvDensity=\"compact\"\n    [ariaLabel]=\"_removeLabel()\"\n    (click)=\"remove.emit()\"\n  ></mlv-button-close>\n</div>\n","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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}