@neural-ui/core 1.3.2 → 1.5.0

package/fesm2022/neural-ui-core-uploader.mjs

@@ -0,0 +1,624 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, output, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NeuButtonComponent } from '@neural-ui/core/button';
+import { NeuProgressBarComponent } from '@neural-ui/core/progress-bar';
+
+let _neuUploaderIdSeq = 0;
+class NeuUploaderComponent {
+    fileInput = viewChild.required('fileInput');
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    placeholder = input('Drag files here or select them from your device.', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    pickerDescription = input('Use the button below to choose files from your device.', ...(ngDevMode ? [{ debugName: "pickerDescription" }] : /* istanbul ignore next */ []));
+    dropzoneLabel = input('Drop files here to add them', ...(ngDevMode ? [{ debugName: "dropzoneLabel" }] : /* istanbul ignore next */ []));
+    chooseLabel = input('Choose files', ...(ngDevMode ? [{ debugName: "chooseLabel" }] : /* istanbul ignore next */ []));
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    progressLabel = input('Upload in progress', ...(ngDevMode ? [{ debugName: "progressLabel" }] : /* istanbul ignore next */ []));
+    showPickerText = input(false, ...(ngDevMode ? [{ debugName: "showPickerText" }] : /* istanbul ignore next */ []));
+    showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : /* istanbul ignore next */ []));
+    listAriaLabel = input('Selected files', ...(ngDevMode ? [{ debugName: "listAriaLabel" }] : /* istanbul ignore next */ []));
+    removeAriaLabel = input('Remove file', ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : /* istanbul ignore next */ []));
+    acceptedTypesLabel = input('Allowed types', ...(ngDevMode ? [{ debugName: "acceptedTypesLabel" }] : /* istanbul ignore next */ []));
+    maxFileSizeTextLabel = input('Max size', ...(ngDevMode ? [{ debugName: "maxFileSizeTextLabel" }] : /* istanbul ignore next */ []));
+    fileCountSingularLabel = input('file', ...(ngDevMode ? [{ debugName: "fileCountSingularLabel" }] : /* istanbul ignore next */ []));
+    fileCountPluralLabel = input('files', ...(ngDevMode ? [{ debugName: "fileCountPluralLabel" }] : /* istanbul ignore next */ []));
+    emptySelectionMessage = input('No file was selected.', ...(ngDevMode ? [{ debugName: "emptySelectionMessage" }] : /* istanbul ignore next */ []));
+    invalidTypeMessage = input('File {{fileName}} does not match the allowed file types.', ...(ngDevMode ? [{ debugName: "invalidTypeMessage" }] : /* istanbul ignore next */ []));
+    maxFileSizeMessage = input('File {{fileName}} exceeds the allowed maximum size.', ...(ngDevMode ? [{ debugName: "maxFileSizeMessage" }] : /* istanbul ignore next */ []));
+    duplicateFileMessage = input('File {{fileName}} has already been selected.', ...(ngDevMode ? [{ debugName: "duplicateFileMessage" }] : /* istanbul ignore next */ []));
+    maxFilesMessage = input('You can only select up to {{maxFiles}} files.', ...(ngDevMode ? [{ debugName: "maxFilesMessage" }] : /* istanbul ignore next */ []));
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    dropzone = input(true, ...(ngDevMode ? [{ debugName: "dropzone" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    maxFiles = input(null, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    maxFileSize = input(null, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+    progress = input(null, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    filesSelected = output();
+    fileRemoved = output();
+    filesRejected = output();
+    cleared = output();
+    inputId = input(`neu-uploader-${++_neuUploaderIdSeq}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    internalErrors = signal([], ...(ngDevMode ? [{ debugName: "internalErrors" }] : /* istanbul ignore next */ []));
+    fileItems = signal([], ...(ngDevMode ? [{ debugName: "fileItems" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabledFinal = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabledFinal" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.displayErrorMessage(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    shouldShowProgress = computed(() => this.showProgress() && this.progress() !== null, ...(ngDevMode ? [{ debugName: "shouldShowProgress" }] : /* istanbul ignore next */ []));
+    pickerButtonAriaLabel = computed(() => this.showPickerText() && this.chooseLabel() ? null : this.chooseLabel(), ...(ngDevMode ? [{ debugName: "pickerButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        if (this.hasError()) {
+            return `${this.inputId()}-error`;
+        }
+        return this.hint() ? `${this.inputId()}-hint` : null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    headlineText = computed(() => this.isDragOver() && this.dropzone() ? this.dropzoneLabel() : this.chooseLabel(), ...(ngDevMode ? [{ debugName: "headlineText" }] : /* istanbul ignore next */ []));
+    descriptionText = computed(() => {
+        const parts = [this.dropzone() ? this.placeholder() : this.pickerDescription()];
+        if (this.accept()) {
+            parts.push(`${this.acceptedTypesLabel()}: ${this.accept()}`);
+        }
+        if (this.maxFileSize() !== null) {
+            parts.push(`${this.maxFileSizeTextLabel()}: ${this.formatBytes(this.maxFileSize() ?? 0)}`);
+        }
+        return parts.join(' · ');
+    }, ...(ngDevMode ? [{ debugName: "descriptionText" }] : /* istanbul ignore next */ []));
+    summaryText = computed(() => {
+        const totalSize = this.fileItems().reduce((acc, item) => acc + item.size, 0);
+        const fileCount = this.fileItems().length;
+        return `${fileCount} ${fileCount === 1 ? this.fileCountSingularLabel() : this.fileCountPluralLabel()} · ${this.formatBytes(totalSize)}`;
+    }, ...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
+    displayErrorMessage = computed(() => {
+        if (this.errorMessage()) {
+            return this.errorMessage();
+        }
+        const [first] = this.internalErrors();
+        return first?.message ?? '';
+    }, ...(ngDevMode ? [{ debugName: "displayErrorMessage" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        if (!value) {
+            this.fileItems.set([]);
+            return;
+        }
+        const files = Array.isArray(value) ? value : [value];
+        this.fileItems.set(files.map((file) => this.toItem(file)));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    openFilePicker() {
+        if (this.isDisabledFinal()) {
+            return;
+        }
+        this.onTouched();
+        this.fileInput().nativeElement.click();
+    }
+    onDropzoneKey(event) {
+        event.preventDefault();
+        this.openFilePicker();
+    }
+    onNativeInputChange(event) {
+        const input = event.target;
+        this.consumeFiles(input.files);
+        input.value = '';
+    }
+    onDragOver(event) {
+        if (!this.dropzone() || this.isDisabledFinal()) {
+            return;
+        }
+        event.preventDefault();
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        if (!this.dropzone()) {
+            return;
+        }
+        event.preventDefault();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        if (!this.dropzone() || this.isDisabledFinal()) {
+            return;
+        }
+        event.preventDefault();
+        this.isDragOver.set(false);
+        this.consumeFiles(event.dataTransfer?.files ?? null);
+    }
+    removeFile(id, event) {
+        event?.stopPropagation();
+        const current = this.fileItems();
+        const match = current.find((item) => item.id === id);
+        if (!match) {
+            return;
+        }
+        const next = current.filter((item) => item.id !== id);
+        this.fileItems.set(next);
+        this.internalErrors.set([]);
+        this.emitValue(next);
+        this.fileRemoved.emit(match.file);
+        this.onTouched();
+    }
+    clearFiles(event) {
+        event?.stopPropagation();
+        this.fileItems.set([]);
+        this.internalErrors.set([]);
+        this.fileInput().nativeElement.value = '';
+        this.emitValue([]);
+        this.cleared.emit();
+        this.onTouched();
+    }
+    formatBytes(bytes) {
+        if (bytes === 0) {
+            return '0 B';
+        }
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const base = 1024;
+        const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(base)), units.length - 1);
+        const size = bytes / Math.pow(base, exponent);
+        return `${size.toFixed(size >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+    }
+    consumeFiles(list) {
+        if (!list || list.length === 0) {
+            this.reportErrors([
+                {
+                    code: 'empty-selection',
+                    message: this.emptySelectionMessage(),
+                },
+            ]);
+            return;
+        }
+        this.onTouched();
+        const incoming = Array.from(list);
+        const current = this.fileItems();
+        const nextItems = this.multiple() ? [...current] : [];
+        const errors = [];
+        const existingIds = new Set(nextItems.map((item) => item.id));
+        for (const file of incoming) {
+            if (!this.isAcceptedType(file)) {
+                errors.push({
+                    code: 'accept',
+                    file,
+                    message: this.interpolate(this.invalidTypeMessage(), { fileName: file.name }),
+                });
+                continue;
+            }
+            if (this.maxFileSize() !== null && file.size > (this.maxFileSize() ?? 0)) {
+                errors.push({
+                    code: 'max-file-size',
+                    file,
+                    message: this.interpolate(this.maxFileSizeMessage(), { fileName: file.name }),
+                });
+                continue;
+            }
+            const item = this.toItem(file);
+            if (existingIds.has(item.id)) {
+                errors.push({
+                    code: 'duplicate',
+                    file,
+                    message: this.interpolate(this.duplicateFileMessage(), { fileName: file.name }),
+                });
+                continue;
+            }
+            if (this.maxFiles() !== null && nextItems.length >= (this.maxFiles() ?? 0)) {
+                errors.push({
+                    code: 'max-files',
+                    file,
+                    message: this.interpolate(this.maxFilesMessage(), {
+                        maxFiles: String(this.maxFiles() ?? 0),
+                    }),
+                });
+                continue;
+            }
+            nextItems.push(item);
+            existingIds.add(item.id);
+            if (!this.multiple()) {
+                break;
+            }
+        }
+        this.fileItems.set(nextItems);
+        this.internalErrors.set(errors);
+        this.emitValue(nextItems);
+        this.filesSelected.emit(nextItems.map((item) => item.file));
+        if (errors.length > 0) {
+            this.filesRejected.emit(errors);
+        }
+    }
+    emitValue(items) {
+        this.onChange(items.map((item) => item.file));
+    }
+    toItem(file) {
+        return {
+            id: this.fileSignature(file),
+            file,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: this.progress(),
+        };
+    }
+    fileSignature(file) {
+        return `${file.name}__${file.size}__${file.lastModified}`;
+    }
+    reportErrors(errors) {
+        this.internalErrors.set(errors);
+        this.filesRejected.emit(errors);
+    }
+    interpolate(template, values) {
+        return Object.entries(values).reduce((result, [key, value]) => result.replaceAll(`{{${key}}}`, value), template);
+    }
+    isAcceptedType(file) {
+        const accept = this.accept().trim();
+        if (!accept) {
+            return true;
+        }
+        const acceptedTypes = accept
+            .split(',')
+            .map((item) => item.trim().toLowerCase())
+            .filter(Boolean);
+        const fileName = file.name.toLowerCase();
+        const mimeType = file.type.toLowerCase();
+        return acceptedTypes.some((rule) => {
+            if (rule.startsWith('.')) {
+                return fileName.endsWith(rule);
+            }
+            if (rule.endsWith('/*')) {
+                const prefix = rule.slice(0, -1);
+                return mimeType.startsWith(prefix);
+            }
+            return mimeType === rule;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuUploaderComponent, isStandalone: true, selector: "neu-uploader", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, pickerDescription: { classPropertyName: "pickerDescription", publicName: "pickerDescription", isSignal: true, isRequired: false, transformFunction: null }, dropzoneLabel: { classPropertyName: "dropzoneLabel", publicName: "dropzoneLabel", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, showPickerText: { classPropertyName: "showPickerText", publicName: "showPickerText", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, listAriaLabel: { classPropertyName: "listAriaLabel", publicName: "listAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptedTypesLabel: { classPropertyName: "acceptedTypesLabel", publicName: "acceptedTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeTextLabel: { classPropertyName: "maxFileSizeTextLabel", publicName: "maxFileSizeTextLabel", isSignal: true, isRequired: false, transformFunction: null }, fileCountSingularLabel: { classPropertyName: "fileCountSingularLabel", publicName: "fileCountSingularLabel", isSignal: true, isRequired: false, transformFunction: null }, fileCountPluralLabel: { classPropertyName: "fileCountPluralLabel", publicName: "fileCountPluralLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: true, isRequired: false, transformFunction: null }, invalidTypeMessage: { classPropertyName: "invalidTypeMessage", publicName: "invalidTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeMessage: { classPropertyName: "maxFileSizeMessage", publicName: "maxFileSizeMessage", isSignal: true, isRequired: false, transformFunction: null }, duplicateFileMessage: { classPropertyName: "duplicateFileMessage", publicName: "duplicateFileMessage", isSignal: true, isRequired: false, transformFunction: null }, maxFilesMessage: { classPropertyName: "maxFilesMessage", publicName: "maxFilesMessage", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dropzone: { classPropertyName: "dropzone", publicName: "dropzone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", filesRejected: "filesRejected", cleared: "cleared" }, host: { properties: { "class.neu-uploader-host--sm": "size() === \"sm\"", "class.neu-uploader-host--lg": "size() === \"lg\"" }, classAttribute: "neu-uploader-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NeuUploaderComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="neu-uploader__label" [for]="inputId()">{{ label() }}</label>
+    }
+
+    <input
+      #fileInput
+      class="neu-uploader__native-input"
+      [id]="inputId()"
+      type="file"
+      [attr.accept]="accept() || null"
+      [attr.multiple]="multiple() ? '' : null"
+      [disabled]="isDisabledFinal()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      (change)="onNativeInputChange($event)"
+    />
+
+    <div
+      class="neu-uploader"
+      [class.neu-uploader--disabled]="isDisabledFinal()"
+      [class.neu-uploader--drag-over]="isDragOver()"
+      [class.neu-uploader--error]="hasError()"
+      [class.neu-uploader--has-files]="fileItems().length > 0"
+      [class.neu-uploader--picker-only]="!dropzone()"
+    >
+      @if (dropzone()) {
+        <div
+          class="neu-uploader__dropzone"
+          [attr.aria-describedby]="describedBy()"
+          (click)="openFilePicker()"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave($event)"
+          (drop)="onDrop($event)"
+        >
+          <div class="neu-uploader__empty-icon" aria-hidden="true">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+          </div>
+
+          <div class="neu-uploader__copy">
+            <p class="neu-uploader__headline">{{ headlineText() }}</p>
+            <p class="neu-uploader__description">{{ descriptionText() }}</p>
+          </div>
+
+          <div class="neu-uploader__actions">
+            <button
+              neu-button
+              type="button"
+              variant="primary"
+              size="sm"
+              (click)="openFilePicker(); $event.stopPropagation()"
+            >
+              {{ chooseLabel() }}
+            </button>
+            @if (fileItems().length > 0) {
+              <button
+                neu-button
+                type="button"
+                variant="outline"
+                size="sm"
+                (click)="clearFiles($event)"
+              >
+                {{ clearLabel() }}
+              </button>
+            }
+          </div>
+        </div>
+      } @else {
+        <button
+          neu-button
+          type="button"
+          variant="primary"
+          size="sm"
+          icon="lucideUpload"
+          class="neu-uploader__picker-trigger"
+          [disabled]="isDisabledFinal()"
+          [attr.aria-label]="pickerButtonAriaLabel()"
+          [attr.aria-describedby]="describedBy()"
+          (click)="openFilePicker()"
+        >
+          @if (showPickerText() && chooseLabel()) {
+            {{ chooseLabel() }}
+          }
+        </button>
+      }
+
+      @if (shouldShowProgress()) {
+        <div class="neu-uploader__progress">
+          <neu-progress-bar
+            [value]="progress() ?? 0"
+            [label]="progressLabel()"
+            [showValue]="true"
+            size="sm"
+          />
+        </div>
+      }
+
+      @if (fileItems().length > 0) {
+        <div class="neu-uploader__summary">
+          <span>{{ summaryText() }}</span>
+          @if (maxFiles() !== null) {
+            <span>{{ fileItems().length }}/{{ maxFiles() }}</span>
+          }
+        </div>
+
+        <ul class="neu-uploader__list" [attr.aria-label]="listAriaLabel()">
+          @for (item of fileItems(); track item.id) {
+            <li class="neu-uploader__item">
+              <div class="neu-uploader__item-main">
+                <span class="neu-uploader__item-name">{{ item.name }}</span>
+                <span class="neu-uploader__item-meta">{{ formatBytes(item.size) }}</span>
+              </div>
+              <button
+                class="neu-uploader__remove"
+                type="button"
+                [disabled]="isDisabledFinal()"
+                [attr.aria-label]="removeAriaLabel() + ' ' + item.name"
+                (click)="removeFile(item.id, $event)"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+
+    @if (hasError()) {
+      <p class="neu-uploader__error" [id]="inputId() + '-error'" role="alert">
+        {{ displayErrorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p class="neu-uploader__hint" [id]="inputId() + '-hint'">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [".neu-uploader-host{display:block}.neu-uploader-host--sm .neu-uploader__dropzone{min-height:144px;padding:var(--neu-space-4)}.neu-uploader-host--sm .neu-uploader__headline{font-size:var(--neu-text-base)}.neu-uploader-host--lg .neu-uploader__dropzone{min-height:208px;padding:var(--neu-space-8)}.neu-uploader-host--lg .neu-uploader__headline{font-size:var(--neu-text-xl)}.neu-uploader__label{display:block;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);margin-bottom:var(--neu-space-2)}.neu-uploader__native-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.neu-uploader{display:grid;gap:var(--neu-space-3)}.neu-uploader--picker-only{gap:var(--neu-space-2)}.neu-uploader--picker-only .neu-uploader__copy{gap:2px;max-width:none}.neu-uploader--picker-only .neu-uploader__progress{padding:var(--neu-space-2) var(--neu-space-3)}.neu-uploader--picker-only .neu-uploader__headline{font-size:var(--neu-text-base)}.neu-uploader--drag-over .neu-uploader__dropzone{border-color:var(--neu-primary);box-shadow:var(--neu-focus-ring-strong);transform:translateY(-1px)}.neu-uploader--error .neu-uploader__dropzone{border-color:var(--neu-error);background:radial-gradient(circle at top right,color-mix(in srgb,var(--neu-error) 6%,transparent),transparent 35%),color-mix(in srgb,var(--neu-error) 5%,var(--neu-surface))}.neu-uploader--disabled .neu-uploader__dropzone{opacity:.7;cursor:not-allowed;background:var(--neu-surface-2)}.neu-uploader__dropzone{position:relative;display:grid;justify-items:center;gap:var(--neu-space-3);min-height:176px;padding:var(--neu-space-6);background:radial-gradient(circle at top right,color-mix(in srgb,var(--neu-primary) 7%,transparent),transparent 35%),color-mix(in srgb,var(--neu-surface) 97%,var(--neu-primary));border:1.5px dashed var(--neu-border-hover);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-sm);cursor:pointer;text-align:center;transition:border-color var(--neu-transition),box-shadow var(--neu-transition),background var(--neu-transition),transform var(--neu-transition)}.neu-uploader__dropzone:hover{border-color:var(--neu-primary);box-shadow:var(--neu-shadow)}.neu-uploader__dropzone:focus-visible{outline:none;box-shadow:var(--neu-focus-ring-strong);border-color:var(--neu-primary)}.neu-uploader__picker-trigger{justify-self:start}.neu-uploader__actions--picker-only{justify-content:flex-end;flex-shrink:0}@media(max-width:640px){.neu-uploader__actions--picker-only{justify-content:flex-start}}.neu-uploader__empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--neu-radius-full);background:color-mix(in srgb,var(--neu-primary) 12%,transparent);color:var(--neu-primary)}.neu-uploader__empty-icon svg{width:24px;height:24px}.neu-uploader__copy{display:grid;gap:var(--neu-space-1);max-width:40rem}.neu-uploader__headline{margin:0;color:var(--neu-text);font-size:var(--neu-text-lg);font-weight:700}.neu-uploader__description{margin:0;color:var(--neu-text-muted);font-size:var(--neu-text-sm);line-height:1.55}.neu-uploader__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--neu-space-2)}.neu-uploader__progress,.neu-uploader__summary,.neu-uploader__list{background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius)}.neu-uploader__progress{padding:var(--neu-space-3)}.neu-uploader__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-3) var(--neu-space-4);font-size:var(--neu-text-sm);color:var(--neu-text-muted)}.neu-uploader__list{list-style:none;margin:0;padding:0;overflow:hidden}.neu-uploader__item{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-3) var(--neu-space-4)}.neu-uploader__item:not(:last-child){border-bottom:1px solid var(--neu-border)}.neu-uploader__item-main{display:grid;gap:2px;min-width:0}.neu-uploader__item-name{font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.neu-uploader__item-meta{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.neu-uploader__remove{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--neu-radius-full);background:transparent;color:var(--neu-text-muted);cursor:pointer;transition:background-color var(--neu-transition),color var(--neu-transition),box-shadow var(--neu-transition)}.neu-uploader__remove:hover:not(:disabled){background:var(--neu-error-bg);color:var(--neu-error)}.neu-uploader__remove:focus-visible{outline:none;box-shadow:var(--neu-focus-ring)}.neu-uploader__remove:disabled{cursor:not-allowed;opacity:.55}.neu-uploader__remove svg{width:1rem;height:1rem}.neu-uploader__error,.neu-uploader__hint{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);line-height:1.45}.neu-uploader__error{color:var(--neu-error-text)}.neu-uploader__hint{color:var(--neu-text-muted)}@media(max-width:399px){.neu-uploader__dropzone{min-height:auto;padding:var(--neu-space-5)}.neu-uploader--picker-only .neu-uploader__dropzone{grid-template-columns:1fr;align-items:start;gap:var(--neu-space-3);padding:var(--neu-space-4)}.neu-uploader--picker-only .neu-uploader__actions{justify-content:flex-start}.neu-uploader__summary,.neu-uploader__item{align-items:flex-start;flex-direction:column}.neu-uploader__remove{align-self:flex-end}}\n"], dependencies: [{ kind: "component", type: NeuButtonComponent, selector: "button[neu-button]", inputs: ["variant", "size", "disabled", "loading", "fullWidth", "icon", "iconPosition", "iconOnly", "ariaLabel"], outputs: ["neuClick"] }, { kind: "component", type: NeuProgressBarComponent, selector: "neu-progress-bar", inputs: ["value", "variant", "label", "showValue", "indeterminate", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-uploader', imports: [NeuButtonComponent, NeuProgressBarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NeuUploaderComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        class: 'neu-uploader-host',
+                        '[class.neu-uploader-host--sm]': 'size() === "sm"',
+                        '[class.neu-uploader-host--lg]': 'size() === "lg"',
+                    }, template: `
+    @if (label()) {
+      <label class="neu-uploader__label" [for]="inputId()">{{ label() }}</label>
+    }
+
+    <input
+      #fileInput
+      class="neu-uploader__native-input"
+      [id]="inputId()"
+      type="file"
+      [attr.accept]="accept() || null"
+      [attr.multiple]="multiple() ? '' : null"
+      [disabled]="isDisabledFinal()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      (change)="onNativeInputChange($event)"
+    />
+
+    <div
+      class="neu-uploader"
+      [class.neu-uploader--disabled]="isDisabledFinal()"
+      [class.neu-uploader--drag-over]="isDragOver()"
+      [class.neu-uploader--error]="hasError()"
+      [class.neu-uploader--has-files]="fileItems().length > 0"
+      [class.neu-uploader--picker-only]="!dropzone()"
+    >
+      @if (dropzone()) {
+        <div
+          class="neu-uploader__dropzone"
+          [attr.aria-describedby]="describedBy()"
+          (click)="openFilePicker()"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave($event)"
+          (drop)="onDrop($event)"
+        >
+          <div class="neu-uploader__empty-icon" aria-hidden="true">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+          </div>
+
+          <div class="neu-uploader__copy">
+            <p class="neu-uploader__headline">{{ headlineText() }}</p>
+            <p class="neu-uploader__description">{{ descriptionText() }}</p>
+          </div>
+
+          <div class="neu-uploader__actions">
+            <button
+              neu-button
+              type="button"
+              variant="primary"
+              size="sm"
+              (click)="openFilePicker(); $event.stopPropagation()"
+            >
+              {{ chooseLabel() }}
+            </button>
+            @if (fileItems().length > 0) {
+              <button
+                neu-button
+                type="button"
+                variant="outline"
+                size="sm"
+                (click)="clearFiles($event)"
+              >
+                {{ clearLabel() }}
+              </button>
+            }
+          </div>
+        </div>
+      } @else {
+        <button
+          neu-button
+          type="button"
+          variant="primary"
+          size="sm"
+          icon="lucideUpload"
+          class="neu-uploader__picker-trigger"
+          [disabled]="isDisabledFinal()"
+          [attr.aria-label]="pickerButtonAriaLabel()"
+          [attr.aria-describedby]="describedBy()"
+          (click)="openFilePicker()"
+        >
+          @if (showPickerText() && chooseLabel()) {
+            {{ chooseLabel() }}
+          }
+        </button>
+      }
+
+      @if (shouldShowProgress()) {
+        <div class="neu-uploader__progress">
+          <neu-progress-bar
+            [value]="progress() ?? 0"
+            [label]="progressLabel()"
+            [showValue]="true"
+            size="sm"
+          />
+        </div>
+      }
+
+      @if (fileItems().length > 0) {
+        <div class="neu-uploader__summary">
+          <span>{{ summaryText() }}</span>
+          @if (maxFiles() !== null) {
+            <span>{{ fileItems().length }}/{{ maxFiles() }}</span>
+          }
+        </div>
+
+        <ul class="neu-uploader__list" [attr.aria-label]="listAriaLabel()">
+          @for (item of fileItems(); track item.id) {
+            <li class="neu-uploader__item">
+              <div class="neu-uploader__item-main">
+                <span class="neu-uploader__item-name">{{ item.name }}</span>
+                <span class="neu-uploader__item-meta">{{ formatBytes(item.size) }}</span>
+              </div>
+              <button
+                class="neu-uploader__remove"
+                type="button"
+                [disabled]="isDisabledFinal()"
+                [attr.aria-label]="removeAriaLabel() + ' ' + item.name"
+                (click)="removeFile(item.id, $event)"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+
+    @if (hasError()) {
+      <p class="neu-uploader__error" [id]="inputId() + '-error'" role="alert">
+        {{ displayErrorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p class="neu-uploader__hint" [id]="inputId() + '-hint'">{{ hint() }}</p>
+    }
+  `, styles: [".neu-uploader-host{display:block}.neu-uploader-host--sm .neu-uploader__dropzone{min-height:144px;padding:var(--neu-space-4)}.neu-uploader-host--sm .neu-uploader__headline{font-size:var(--neu-text-base)}.neu-uploader-host--lg .neu-uploader__dropzone{min-height:208px;padding:var(--neu-space-8)}.neu-uploader-host--lg .neu-uploader__headline{font-size:var(--neu-text-xl)}.neu-uploader__label{display:block;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);margin-bottom:var(--neu-space-2)}.neu-uploader__native-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.neu-uploader{display:grid;gap:var(--neu-space-3)}.neu-uploader--picker-only{gap:var(--neu-space-2)}.neu-uploader--picker-only .neu-uploader__copy{gap:2px;max-width:none}.neu-uploader--picker-only .neu-uploader__progress{padding:var(--neu-space-2) var(--neu-space-3)}.neu-uploader--picker-only .neu-uploader__headline{font-size:var(--neu-text-base)}.neu-uploader--drag-over .neu-uploader__dropzone{border-color:var(--neu-primary);box-shadow:var(--neu-focus-ring-strong);transform:translateY(-1px)}.neu-uploader--error .neu-uploader__dropzone{border-color:var(--neu-error);background:radial-gradient(circle at top right,color-mix(in srgb,var(--neu-error) 6%,transparent),transparent 35%),color-mix(in srgb,var(--neu-error) 5%,var(--neu-surface))}.neu-uploader--disabled .neu-uploader__dropzone{opacity:.7;cursor:not-allowed;background:var(--neu-surface-2)}.neu-uploader__dropzone{position:relative;display:grid;justify-items:center;gap:var(--neu-space-3);min-height:176px;padding:var(--neu-space-6);background:radial-gradient(circle at top right,color-mix(in srgb,var(--neu-primary) 7%,transparent),transparent 35%),color-mix(in srgb,var(--neu-surface) 97%,var(--neu-primary));border:1.5px dashed var(--neu-border-hover);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-sm);cursor:pointer;text-align:center;transition:border-color var(--neu-transition),box-shadow var(--neu-transition),background var(--neu-transition),transform var(--neu-transition)}.neu-uploader__dropzone:hover{border-color:var(--neu-primary);box-shadow:var(--neu-shadow)}.neu-uploader__dropzone:focus-visible{outline:none;box-shadow:var(--neu-focus-ring-strong);border-color:var(--neu-primary)}.neu-uploader__picker-trigger{justify-self:start}.neu-uploader__actions--picker-only{justify-content:flex-end;flex-shrink:0}@media(max-width:640px){.neu-uploader__actions--picker-only{justify-content:flex-start}}.neu-uploader__empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--neu-radius-full);background:color-mix(in srgb,var(--neu-primary) 12%,transparent);color:var(--neu-primary)}.neu-uploader__empty-icon svg{width:24px;height:24px}.neu-uploader__copy{display:grid;gap:var(--neu-space-1);max-width:40rem}.neu-uploader__headline{margin:0;color:var(--neu-text);font-size:var(--neu-text-lg);font-weight:700}.neu-uploader__description{margin:0;color:var(--neu-text-muted);font-size:var(--neu-text-sm);line-height:1.55}.neu-uploader__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--neu-space-2)}.neu-uploader__progress,.neu-uploader__summary,.neu-uploader__list{background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius)}.neu-uploader__progress{padding:var(--neu-space-3)}.neu-uploader__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-3) var(--neu-space-4);font-size:var(--neu-text-sm);color:var(--neu-text-muted)}.neu-uploader__list{list-style:none;margin:0;padding:0;overflow:hidden}.neu-uploader__item{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-3) var(--neu-space-4)}.neu-uploader__item:not(:last-child){border-bottom:1px solid var(--neu-border)}.neu-uploader__item-main{display:grid;gap:2px;min-width:0}.neu-uploader__item-name{font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.neu-uploader__item-meta{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.neu-uploader__remove{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--neu-radius-full);background:transparent;color:var(--neu-text-muted);cursor:pointer;transition:background-color var(--neu-transition),color var(--neu-transition),box-shadow var(--neu-transition)}.neu-uploader__remove:hover:not(:disabled){background:var(--neu-error-bg);color:var(--neu-error)}.neu-uploader__remove:focus-visible{outline:none;box-shadow:var(--neu-focus-ring)}.neu-uploader__remove:disabled{cursor:not-allowed;opacity:.55}.neu-uploader__remove svg{width:1rem;height:1rem}.neu-uploader__error,.neu-uploader__hint{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);line-height:1.45}.neu-uploader__error{color:var(--neu-error-text)}.neu-uploader__hint{color:var(--neu-text-muted)}@media(max-width:399px){.neu-uploader__dropzone{min-height:auto;padding:var(--neu-space-5)}.neu-uploader--picker-only .neu-uploader__dropzone{grid-template-columns:1fr;align-items:start;gap:var(--neu-space-3);padding:var(--neu-space-4)}.neu-uploader--picker-only .neu-uploader__actions{justify-content:flex-start}.neu-uploader__summary,.neu-uploader__item{align-items:flex-start;flex-direction:column}.neu-uploader__remove{align-self:flex-end}}\n"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], pickerDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerDescription", required: false }] }], dropzoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneLabel", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], showPickerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPickerText", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], listAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listAriaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], acceptedTypesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypesLabel", required: false }] }], maxFileSizeTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeTextLabel", required: false }] }], fileCountSingularLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileCountSingularLabel", required: false }] }], fileCountPluralLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileCountPluralLabel", required: false }] }], emptySelectionMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptySelectionMessage", required: false }] }], invalidTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidTypeMessage", required: false }] }], maxFileSizeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeMessage", required: false }] }], duplicateFileMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "duplicateFileMessage", required: false }] }], maxFilesMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFilesMessage", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuUploaderComponent };
+//# sourceMappingURL=neural-ui-core-uploader.mjs.map