@lenne.tech/ng-base 18.1.3 → 22.0.0

package/fesm2022/lenne.tech-ng-base-files-ui.mjs

@@ -0,0 +1,445 @@
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output, signal } from "@angular/core";
+import * as i1 from "@lenne.tech/ng-base/ui";
+import { HlmButtonImports, HlmProgressImports } from "@lenne.tech/ng-base/ui";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { lucideFile, lucidePause, lucidePlay, lucideRefreshCw, lucideTrash2, lucideUpload, lucideX } from "@ng-icons/lucide";
+import { formatLtDuration, formatLtFileSize, injectLtTusUpload } from "@lenne.tech/ng-base/files";
+import { LtI18nService } from "@lenne.tech/ng-base";
+const LT_FILES_MESSAGES = {
+	de: { lt: { "files": {
+		"dropzone": "Dateien hierher ziehen oder auswählen",
+		"select": "Dateien auswählen",
+		"pause": "Pausieren",
+		"resume": "Fortsetzen",
+		"cancel": "Abbrechen",
+		"retry": "Erneut versuchen",
+		"remove": "Entfernen",
+		"completed": "Hochgeladen",
+		"failed": "Fehlgeschlagen",
+		"dropzoneSingle": "Datei hierher ziehen oder auswählen",
+		"selectSingle": "Datei auswählen",
+		"start": "Hochladen",
+		"waiting": "Wartend",
+		"uploading": "Wird hochgeladen",
+		"paused": "Pausiert",
+		"files": "Dateien",
+		"remaining": "noch {time}",
+		"maxFileSize": "Höchstens {max} pro Datei",
+		"tooLarge": "{name} ist zu groß (höchstens {max})",
+		"tooMany": "{name} wurde nicht hinzugefügt: höchstens {max} Dateien",
+		"invalidType": "{name} hat einen nicht erlaubten Dateityp"
+	} } },
+	en: { lt: { "files": {
+		"dropzone": "Drop files here or browse",
+		"select": "Select files",
+		"pause": "Pause",
+		"resume": "Resume",
+		"cancel": "Cancel",
+		"retry": "Retry",
+		"remove": "Remove",
+		"completed": "Uploaded",
+		"failed": "Failed",
+		"dropzoneSingle": "Drop a file here or browse",
+		"selectSingle": "Select file",
+		"start": "Upload",
+		"waiting": "Waiting",
+		"uploading": "Uploading",
+		"paused": "Paused",
+		"files": "Files",
+		"remaining": "{time} left",
+		"maxFileSize": "At most {max} per file",
+		"tooLarge": "{name} is too large (at most {max})",
+		"tooMany": "{name} was not added: at most {max} files",
+		"invalidType": "{name} has a file type that is not allowed"
+	} } }
+};
+function injectLtFilesI18n() {
+	const i18n = inject(LtI18nService);
+	i18n.registerLibraryMessages("files", LT_FILES_MESSAGES);
+	return i18n;
+}
+let nextComponentId = 0;
+var LtTusUploadComponent = class LtTusUploadComponent {
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	autoStart = input(true, ...ngDevMode ? [{ debugName: "autoStart" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	endpoint = input(void 0, ...ngDevMode ? [{ debugName: "endpoint" }] : /* istanbul ignore next */ []);
+	maxFileSize = input(0, ...ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []);
+	maxFiles = input(0, ...ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []);
+	metadata = input({}, ...ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []);
+	multiple = input(false, ...ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []);
+	uploaded = output();
+	failed = output();
+	filesAdded = output();
+	i18n = injectLtFilesI18n();
+	upload = injectLtTusUpload(this.uploadOptions());
+	hintId = `lt-tus-upload-${nextComponentId++}-hint`;
+	dragging = signal(false, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
+	rejections = signal([], ...ngDevMode ? [{ debugName: "rejections" }] : /* istanbul ignore next */ []);
+	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	formatSize = formatLtFileSize;
+	hint = computed(() => {
+		const max = this.maxFileSize();
+		return max > 0 ? this.i18n.t("lt.files.maxFileSize", { max: formatLtFileSize(max) }) : "";
+	}, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	dragDepth = 0;
+	statusLabel(status) {
+		return this.i18n.t({
+			completed: "lt.files.completed",
+			error: "lt.files.failed",
+			idle: "lt.files.waiting",
+			paused: "lt.files.paused",
+			uploading: "lt.files.uploading"
+		}[status]);
+	}
+	progressLabel(item) {
+		const parts = [`${item.progress.percentage} %`];
+		if (item.progress.speed > 0) parts.push(`${formatLtFileSize(item.progress.speed)}/s`);
+		if (item.progress.remainingTime > 0) parts.push(this.i18n.t("lt.files.remaining", { time: formatLtDuration(item.progress.remainingTime) }));
+		return parts.join(" · ");
+	}
+	actionLabel(key, item) {
+		return `${this.i18n.t(key)}: ${item.file.name}`;
+	}
+	progressValue(item) {
+		return Math.min(100, Math.max(0, item.progress.percentage || 0));
+	}
+	openFileDialog(input) {
+		if (!this.disabled()) input.click();
+	}
+	onInputChange(input) {
+		const files = Array.from(input.files ?? []);
+		input.value = "";
+		this.handleFiles(files, false);
+	}
+	onDragEnter(event) {
+		event.preventDefault();
+		if (this.disabled()) return;
+		this.dragDepth++;
+		this.dragging.set(true);
+	}
+	onDragOver(event) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = this.disabled() ? "none" : "copy";
+	}
+	onDragLeave(event) {
+		event.preventDefault();
+		this.dragDepth = Math.max(0, this.dragDepth - 1);
+		if (this.dragDepth === 0) this.dragging.set(false);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		this.dragDepth = 0;
+		this.dragging.set(false);
+		if (this.disabled()) return;
+		this.handleFiles(Array.from(event.dataTransfer?.files ?? []), true);
+	}
+	async handleFiles(files, dropped) {
+		if (files.length === 0) return [];
+		const messages = [];
+		const multiple = this.multiple();
+		const maxFiles = multiple ? this.maxFiles() : 1;
+		const maxFileSize = this.maxFileSize();
+		const existing = multiple ? this.upload.uploads().length : 0;
+		const accepted = [];
+		for (const file of files) if (dropped && !matchesLtAccept(file, this.accept())) messages.push(this.i18n.t("lt.files.invalidType", { name: file.name }));
+		else if (maxFileSize > 0 && file.size > maxFileSize) messages.push(this.i18n.t("lt.files.tooLarge", {
+			max: formatLtFileSize(maxFileSize),
+			name: file.name
+		}));
+		else if (maxFiles > 0 && existing + accepted.length >= maxFiles) messages.push(this.i18n.t("lt.files.tooMany", {
+			max: maxFiles,
+			name: file.name
+		}));
+		else accepted.push(file);
+		this.rejections.set(messages);
+		if (accepted.length === 0) return [];
+		if (!multiple) this.upload.cancelAll();
+		this.filesAdded.emit(accepted);
+		try {
+			await this.upload.addFiles(accepted);
+		} catch (error) {
+			this.rejections.update((current) => [...current, error instanceof Error ? error.message : String(error)]);
+			return [];
+		}
+		return accepted;
+	}
+	uploadOptions() {
+		const options = {
+			onError: (item) => {
+				this.announcement.set(`${item.file.name}: ${this.i18n.t("lt.files.failed")}`);
+				this.failed.emit(item);
+			},
+			onSuccess: (item) => {
+				this.announcement.set(`${item.file.name}: ${this.i18n.t("lt.files.completed")}`);
+				this.uploaded.emit(item);
+			}
+		};
+		Object.defineProperties(options, {
+			autoStart: {
+				enumerable: true,
+				get: () => this.autoStart()
+			},
+			endpoint: {
+				enumerable: true,
+				get: () => this.endpoint() || void 0
+			},
+			metadata: {
+				enumerable: true,
+				get: () => this.metadata()
+			}
+		});
+		return options;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LtTusUploadComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: LtTusUploadComponent,
+		isStandalone: true,
+		selector: "lt-tus-upload",
+		inputs: {
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoStart: {
+				classPropertyName: "autoStart",
+				publicName: "autoStart",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			endpoint: {
+				classPropertyName: "endpoint",
+				publicName: "endpoint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxFileSize: {
+				classPropertyName: "maxFileSize",
+				publicName: "maxFileSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxFiles: {
+				classPropertyName: "maxFiles",
+				publicName: "maxFiles",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			metadata: {
+				classPropertyName: "metadata",
+				publicName: "metadata",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			uploaded: "uploaded",
+			failed: "failed",
+			filesAdded: "filesAdded"
+		},
+		host: {
+			properties: { "attr.data-disabled": "disabled() || null" },
+			classAttribute: "block"
+		},
+		providers: [provideIcons({
+			lucideFile,
+			lucidePause,
+			lucidePlay,
+			lucideRefreshCw,
+			lucideTrash2,
+			lucideUpload,
+			lucideX
+		})],
+		ngImport: i0,
+		template: "<div class=\"flex flex-col gap-3\">\n  <div\n    class=\"border-border flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-6 text-center transition-colors data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5 data-[disabled=true]:opacity-50\"\n    data-slot=\"dropzone\"\n    [attr.data-dragging]=\"dragging() || null\"\n    [attr.data-disabled]=\"disabled() || null\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <ng-icon name=\"lucideUpload\" class=\"text-muted-foreground text-2xl\" aria-hidden=\"true\" />\n    <div [id]=\"hintId\" class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\">{{ i18n.t(multiple() ? 'lt.files.dropzone' : 'lt.files.dropzoneSingle') }}</p>\n      @if (hint()) {\n        <p class=\"text-muted-foreground text-xs\">{{ hint() }}</p>\n      }\n    </div>\n    <button hlmBtn type=\"button\" variant=\"outline\" size=\"sm\" [disabled]=\"disabled()\" [attr.aria-describedby]=\"hintId\" (click)=\"openFileDialog(fileInput)\">\n      {{ i18n.t(multiple() ? 'lt.files.select' : 'lt.files.selectSingle') }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"sr-only\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      data-slot=\"file-input\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [disabled]=\"disabled()\"\n      (change)=\"onInputChange(fileInput)\"\n    />\n  </div>\n\n  @if (rejections().length > 0) {\n    <ul class=\"text-error flex flex-col gap-1 text-sm\" role=\"alert\" data-slot=\"rejections\">\n      @for (message of rejections(); track $index) {\n        <li>{{ message }}</li>\n      }\n    </ul>\n  }\n\n  <p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" data-slot=\"announcement\">{{ announcement() }}</p>\n\n  @if (upload.uploads().length > 0) {\n    <ul class=\"flex flex-col gap-2\" data-slot=\"file-list\" [attr.aria-label]=\"i18n.t('lt.files.files')\">\n      @for (item of upload.uploads(); track item.id) {\n        <li class=\"border-border bg-background flex items-center gap-3 rounded-lg border p-3\" data-slot=\"file\" [attr.data-status]=\"item.status\">\n          <ng-icon name=\"lucideFile\" class=\"text-muted-foreground shrink-0 text-xl\" aria-hidden=\"true\" />\n          <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n            <p class=\"truncate text-sm font-medium\" [id]=\"item.id + '-name'\" [title]=\"item.file.name\">{{ item.file.name }}</p>\n            <p class=\"text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs\">\n              <span>{{ formatSize(item.file.size) }}</span>\n              <span aria-hidden=\"true\">·</span>\n              <span\n                data-slot=\"status\"\n                [class.text-success]=\"item.status === 'completed'\"\n                [class.text-error]=\"item.status === 'error'\"\n                [class.text-warning]=\"item.status === 'paused'\"\n                >{{ statusLabel(item.status) }}</span\n              >\n              @if (item.status === 'uploading') {\n                <span aria-hidden=\"true\">·</span>\n                <span data-slot=\"progress-label\">{{ progressLabel(item) }}</span>\n              }\n            </p>\n            @if (item.status === 'uploading' || item.status === 'paused') {\n              <hlm-progress class=\"mt-1\" [value]=\"progressValue(item)\" [attr.aria-labelledby]=\"item.id + '-name'\">\n                <hlm-progress-indicator />\n              </hlm-progress>\n            }\n          </div>\n          <div class=\"flex shrink-0 gap-0.5\">\n            @switch (item.status) {\n              @case ('uploading') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"pause\"\n                  [attr.aria-label]=\"actionLabel('lt.files.pause', item)\"\n                  (click)=\"upload.pauseUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucidePause\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('paused') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"resume\"\n                  [attr.aria-label]=\"actionLabel('lt.files.resume', item)\"\n                  (click)=\"upload.resumeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucidePlay\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('idle') {\n                @if (!autoStart()) {\n                  <button\n                    hlmBtn\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    data-action=\"start\"\n                    [attr.aria-label]=\"actionLabel('lt.files.start', item)\"\n                    (click)=\"upload.startUpload(item.id)\"\n                  >\n                    <ng-icon name=\"lucideUpload\" aria-hidden=\"true\" />\n                  </button>\n                }\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('error') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"retry\"\n                  [attr.aria-label]=\"actionLabel('lt.files.retry', item)\"\n                  (click)=\"upload.retryUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideRefreshCw\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"remove\"\n                  [attr.aria-label]=\"actionLabel('lt.files.remove', item)\"\n                  (click)=\"upload.removeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideTrash2\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('completed') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"remove\"\n                  [attr.aria-label]=\"actionLabel('lt.files.remove', item)\"\n                  (click)=\"upload.removeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideTrash2\" aria-hidden=\"true\" />\n                </button>\n              }\n            }\n          </div>\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i1.HlmButton,
+				selector: "button[hlmBtn], a[hlmBtn]",
+				inputs: ["variant", "size"],
+				exportAs: ["hlmBtn"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmProgress,
+				selector: "hlm-progress,[hlmProgress]",
+				exportAs: ["hlmProgress"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmProgressIndicator,
+				selector: "[hlmProgressIndicator],hlm-progress-indicator",
+				exportAs: ["hlmProgressIndicator"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LtTusUploadComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lt-tus-upload",
+			imports: [
+				HlmButtonImports,
+				HlmProgressImports,
+				NgIcon
+			],
+			providers: [provideIcons({
+				lucideFile,
+				lucidePause,
+				lucidePlay,
+				lucideRefreshCw,
+				lucideTrash2,
+				lucideUpload,
+				lucideX
+			})],
+			host: {
+				class: "block",
+				"[attr.data-disabled]": "disabled() || null"
+			},
+			template: "<div class=\"flex flex-col gap-3\">\n  <div\n    class=\"border-border flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-6 text-center transition-colors data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5 data-[disabled=true]:opacity-50\"\n    data-slot=\"dropzone\"\n    [attr.data-dragging]=\"dragging() || null\"\n    [attr.data-disabled]=\"disabled() || null\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <ng-icon name=\"lucideUpload\" class=\"text-muted-foreground text-2xl\" aria-hidden=\"true\" />\n    <div [id]=\"hintId\" class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\">{{ i18n.t(multiple() ? 'lt.files.dropzone' : 'lt.files.dropzoneSingle') }}</p>\n      @if (hint()) {\n        <p class=\"text-muted-foreground text-xs\">{{ hint() }}</p>\n      }\n    </div>\n    <button hlmBtn type=\"button\" variant=\"outline\" size=\"sm\" [disabled]=\"disabled()\" [attr.aria-describedby]=\"hintId\" (click)=\"openFileDialog(fileInput)\">\n      {{ i18n.t(multiple() ? 'lt.files.select' : 'lt.files.selectSingle') }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"sr-only\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      data-slot=\"file-input\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [disabled]=\"disabled()\"\n      (change)=\"onInputChange(fileInput)\"\n    />\n  </div>\n\n  @if (rejections().length > 0) {\n    <ul class=\"text-error flex flex-col gap-1 text-sm\" role=\"alert\" data-slot=\"rejections\">\n      @for (message of rejections(); track $index) {\n        <li>{{ message }}</li>\n      }\n    </ul>\n  }\n\n  <p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" data-slot=\"announcement\">{{ announcement() }}</p>\n\n  @if (upload.uploads().length > 0) {\n    <ul class=\"flex flex-col gap-2\" data-slot=\"file-list\" [attr.aria-label]=\"i18n.t('lt.files.files')\">\n      @for (item of upload.uploads(); track item.id) {\n        <li class=\"border-border bg-background flex items-center gap-3 rounded-lg border p-3\" data-slot=\"file\" [attr.data-status]=\"item.status\">\n          <ng-icon name=\"lucideFile\" class=\"text-muted-foreground shrink-0 text-xl\" aria-hidden=\"true\" />\n          <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n            <p class=\"truncate text-sm font-medium\" [id]=\"item.id + '-name'\" [title]=\"item.file.name\">{{ item.file.name }}</p>\n            <p class=\"text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs\">\n              <span>{{ formatSize(item.file.size) }}</span>\n              <span aria-hidden=\"true\">·</span>\n              <span\n                data-slot=\"status\"\n                [class.text-success]=\"item.status === 'completed'\"\n                [class.text-error]=\"item.status === 'error'\"\n                [class.text-warning]=\"item.status === 'paused'\"\n                >{{ statusLabel(item.status) }}</span\n              >\n              @if (item.status === 'uploading') {\n                <span aria-hidden=\"true\">·</span>\n                <span data-slot=\"progress-label\">{{ progressLabel(item) }}</span>\n              }\n            </p>\n            @if (item.status === 'uploading' || item.status === 'paused') {\n              <hlm-progress class=\"mt-1\" [value]=\"progressValue(item)\" [attr.aria-labelledby]=\"item.id + '-name'\">\n                <hlm-progress-indicator />\n              </hlm-progress>\n            }\n          </div>\n          <div class=\"flex shrink-0 gap-0.5\">\n            @switch (item.status) {\n              @case ('uploading') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"pause\"\n                  [attr.aria-label]=\"actionLabel('lt.files.pause', item)\"\n                  (click)=\"upload.pauseUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucidePause\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('paused') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"resume\"\n                  [attr.aria-label]=\"actionLabel('lt.files.resume', item)\"\n                  (click)=\"upload.resumeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucidePlay\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('idle') {\n                @if (!autoStart()) {\n                  <button\n                    hlmBtn\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    data-action=\"start\"\n                    [attr.aria-label]=\"actionLabel('lt.files.start', item)\"\n                    (click)=\"upload.startUpload(item.id)\"\n                  >\n                    <ng-icon name=\"lucideUpload\" aria-hidden=\"true\" />\n                  </button>\n                }\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('error') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"retry\"\n                  [attr.aria-label]=\"actionLabel('lt.files.retry', item)\"\n                  (click)=\"upload.retryUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideRefreshCw\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"remove\"\n                  [attr.aria-label]=\"actionLabel('lt.files.remove', item)\"\n                  (click)=\"upload.removeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideTrash2\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('completed') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"remove\"\n                  [attr.aria-label]=\"actionLabel('lt.files.remove', item)\"\n                  (click)=\"upload.removeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideTrash2\" aria-hidden=\"true\" />\n                </button>\n              }\n            }\n          </div>\n        </li>\n      }\n    </ul>\n  }\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		autoStart: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoStart",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		endpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endpoint",
+				required: false
+			}]
+		}],
+		maxFileSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFileSize",
+				required: false
+			}]
+		}],
+		maxFiles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFiles",
+				required: false
+			}]
+		}],
+		metadata: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "metadata",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		uploaded: [{
+			type: i0.Output,
+			args: ["uploaded"]
+		}],
+		failed: [{
+			type: i0.Output,
+			args: ["failed"]
+		}],
+		filesAdded: [{
+			type: i0.Output,
+			args: ["filesAdded"]
+		}]
+	}
+});
+function matchesLtAccept(file, accept) {
+	const tokens = (accept || "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = (file.type || "").toLowerCase();
+	return tokens.some((token) => {
+		if (token === "*" || token === "*/*") return true;
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+}
+export { LtTusUploadComponent, matchesLtAccept };
+
+//# sourceMappingURL=lenne.tech-ng-base-files-ui.mjs.map

package/fesm2022/lenne.tech-ng-base-files-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lenne.tech-ng-base-files-ui.mjs","names":[],"sources":["../tmp-esm2022/files/ui/lib/i18n/de.json","../tmp-esm2022/files/ui/lib/i18n/en.json","../../../projects/ng-base/files/ui/src/lib/i18n.ts","../../../projects/ng-base/files/ui/src/lib/tus-upload-component.ts","../../../projects/ng-base/files/ui/src/lib/tus-upload-component.html"],"sourcesContent":["","","import { inject } from '@angular/core';\nimport { LtI18nService } from '@lenne.tech/ng-base';\n\nimport de from './i18n/de.json';\nimport en from './i18n/en.json';\n\n/** The `lt.files.*` texts (also shipped as `i18n/files/{de,en}.json`). */\nexport const LT_FILES_MESSAGES = { de, en } as const;\n\n/** `LtI18nService` with the `lt.files.*` texts registered (injection context). */\nexport function injectLtFilesI18n(): LtI18nService {\n  const i18n = inject(LtI18nService);\n  i18n.registerLibraryMessages('files', LT_FILES_MESSAGES);\n  return i18n;\n}\n","import { Component, computed, input, output, signal } from '@angular/core';\nimport { HlmButtonImports, HlmProgressImports } from '@lenne.tech/ng-base/ui';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideFile, lucidePause, lucidePlay, lucideRefreshCw, lucideTrash2, lucideUpload, lucideX } from '@ng-icons/lucide';\n\nimport { formatLtDuration, formatLtFileSize, injectLtTusUpload, type LtUploadItem, type LtUploadOptions, type LtUploadStatus } from '@lenne.tech/ng-base/files';\nimport { injectLtFilesI18n } from './i18n';\n\nlet nextComponentId = 0;\n\n/**\n * Upload UI (drop zone, file list with progress, pause/resume/cancel/retry), the counterpart of the Nuxt starter's\n * `TusFileUpload.vue`. Built on `injectLtTusUpload()` and the `/ui` helm components.\n *\n * Keyboard: the drop zone holds a real button that opens the file dialog; every row action is a labelled button.\n * Validation (`accept` for dropped files, `maxFileSize`, `maxFiles`, single file without `multiple`) rejects files with a\n * message (`role=\"alert\"`); finished and failed uploads are announced in a polite live region. With `multiple` off a new\n * file replaces the previous one. Inputs are read when a file is added or started, so changing them takes effect for\n * the next file.\n *\n * @example <lt-tus-upload accept=\"image/*\" [multiple]=\"true\" (uploaded)=\"onUploaded($event)\" />\n */\n@Component({\n  selector: 'lt-tus-upload',\n  imports: [HlmButtonImports, HlmProgressImports, NgIcon],\n  providers: [provideIcons({ lucideFile, lucidePause, lucidePlay, lucideRefreshCw, lucideTrash2, lucideUpload, lucideX })],\n  templateUrl: './tus-upload-component.html',\n  host: {\n    class: 'block',\n    '[attr.data-disabled]': 'disabled() || null',\n  },\n})\nexport class LtTusUploadComponent {\n  /** `accept` attribute of the file input; dropped files are checked against it as well. */\n  readonly accept = input<string>('');\n  /** Start uploads right after selection (default `true`). */\n  readonly autoStart = input(true);\n  /** Disable the drop zone. */\n  readonly disabled = input(false);\n  /** TUS endpoint (default from `provideLtFiles()`). */\n  readonly endpoint = input<string | undefined>(undefined);\n  /** Maximum file size in bytes (`0` = unlimited); larger files are rejected with a message. */\n  readonly maxFileSize = input(0);\n  /** Maximum number of files (`0` = unlimited). */\n  readonly maxFiles = input(0);\n  /** Extra TUS metadata for every file. */\n  readonly metadata = input<Record<string, string>>({});\n  /** Allow several files. */\n  readonly multiple = input(false);\n\n  /** A file finished uploading (`fileId` from `X-File-Id`). */\n  readonly uploaded = output<LtUploadItem>();\n  /** A file failed. */\n  readonly failed = output<LtUploadItem>();\n  /** Files were selected or dropped (the ones that passed validation and were added to the queue). */\n  readonly filesAdded = output<File[]>();\n\n  protected readonly i18n = injectLtFilesI18n();\n  protected readonly upload = injectLtTusUpload(this.uploadOptions());\n  protected readonly hintId = `lt-tus-upload-${nextComponentId++}-hint`;\n  protected readonly dragging = signal(false);\n  protected readonly rejections = signal<string[]>([]);\n  protected readonly announcement = signal('');\n  protected readonly formatSize = formatLtFileSize;\n  protected readonly hint = computed(() => {\n    const max = this.maxFileSize();\n    return max > 0 ? this.i18n.t('lt.files.maxFileSize', { max: formatLtFileSize(max) }) : '';\n  });\n  private dragDepth = 0;\n\n  /** Status text of an item. */\n  protected statusLabel(status: LtUploadStatus): string {\n    const keys: Record<LtUploadStatus, string> = {\n      completed: 'lt.files.completed',\n      error: 'lt.files.failed',\n      idle: 'lt.files.waiting',\n      paused: 'lt.files.paused',\n      uploading: 'lt.files.uploading',\n    };\n    return this.i18n.t(keys[status]);\n  }\n\n  /** Progress details of an uploading item (`42 % · 1.2 MB/s · noch 5s`). */\n  protected progressLabel(item: LtUploadItem): string {\n    const parts = [`${item.progress.percentage} %`];\n    if (item.progress.speed > 0) {\n      parts.push(`${formatLtFileSize(item.progress.speed)}/s`);\n    }\n    if (item.progress.remainingTime > 0) {\n      parts.push(this.i18n.t('lt.files.remaining', { time: formatLtDuration(item.progress.remainingTime) }));\n    }\n    return parts.join(' · ');\n  }\n\n  /** Accessible label of a row action, naming the file. */\n  protected actionLabel(key: string, item: LtUploadItem): string {\n    return `${this.i18n.t(key)}: ${item.file.name}`;\n  }\n\n  /** Progress value clamped into the range the progress bar accepts. */\n  protected progressValue(item: LtUploadItem): number {\n    return Math.min(100, Math.max(0, item.progress.percentage || 0));\n  }\n\n  protected openFileDialog(input: HTMLInputElement): void {\n    if (!this.disabled()) {\n      input.click();\n    }\n  }\n\n  protected onInputChange(input: HTMLInputElement): void {\n    const files = Array.from(input.files ?? []);\n    // Reset, so selecting the same file again fires `change` again.\n    input.value = '';\n    void this.handleFiles(files, false);\n  }\n\n  protected onDragEnter(event: DragEvent): void {\n    event.preventDefault();\n    if (this.disabled()) {\n      return;\n    }\n    this.dragDepth++;\n    this.dragging.set(true);\n  }\n\n  protected onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    if (event.dataTransfer) {\n      event.dataTransfer.dropEffect = this.disabled() ? 'none' : 'copy';\n    }\n  }\n\n  protected onDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    this.dragDepth = Math.max(0, this.dragDepth - 1);\n    if (this.dragDepth === 0) {\n      this.dragging.set(false);\n    }\n  }\n\n  protected onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.dragDepth = 0;\n    this.dragging.set(false);\n    if (this.disabled()) {\n      return;\n    }\n    void this.handleFiles(Array.from(event.dataTransfer?.files ?? []), true);\n  }\n\n  /** Validate and queue files; returns the accepted ones. */\n  private async handleFiles(files: File[], dropped: boolean): Promise<File[]> {\n    if (files.length === 0) {\n      return [];\n    }\n    const messages: string[] = [];\n    const multiple = this.multiple();\n    const maxFiles = multiple ? this.maxFiles() : 1;\n    const maxFileSize = this.maxFileSize();\n    const existing = multiple ? this.upload.uploads().length : 0;\n    const accepted: File[] = [];\n\n    for (const file of files) {\n      if (dropped && !matchesLtAccept(file, this.accept())) {\n        messages.push(this.i18n.t('lt.files.invalidType', { name: file.name }));\n      } else if (maxFileSize > 0 && file.size > maxFileSize) {\n        messages.push(this.i18n.t('lt.files.tooLarge', { max: formatLtFileSize(maxFileSize), name: file.name }));\n      } else if (maxFiles > 0 && existing + accepted.length >= maxFiles) {\n        messages.push(this.i18n.t('lt.files.tooMany', { max: maxFiles, name: file.name }));\n      } else {\n        accepted.push(file);\n      }\n    }\n    this.rejections.set(messages);\n    if (accepted.length === 0) {\n      return [];\n    }\n    if (!multiple) {\n      this.upload.cancelAll();\n    }\n    this.filesAdded.emit(accepted);\n    try {\n      await this.upload.addFiles(accepted);\n    } catch (error) {\n      this.rejections.update((current) => [...current, error instanceof Error ? error.message : String(error)]);\n      return [];\n    }\n    return accepted;\n  }\n\n  private uploadOptions(): LtUploadOptions {\n    const options: LtUploadOptions = {\n      onError: (item) => {\n        this.announcement.set(`${item.file.name}: ${this.i18n.t('lt.files.failed')}`);\n        this.failed.emit(item);\n      },\n      onSuccess: (item) => {\n        this.announcement.set(`${item.file.name}: ${this.i18n.t('lt.files.completed')}`);\n        this.uploaded.emit(item);\n      },\n    };\n    // Getters over the inputs: the upload queue reads its options whenever a file is added or started.\n    Object.defineProperties(options, {\n      autoStart: { enumerable: true, get: () => this.autoStart() },\n      endpoint: { enumerable: true, get: () => this.endpoint() || undefined },\n      metadata: { enumerable: true, get: () => this.metadata() },\n    });\n    return options;\n  }\n}\n\n/**\n * Whether `file` matches an `accept` attribute value (`image/*`, `application/pdf`, `.png`, comma separated). An empty\n * value and `*` / `*\\/*` accept everything.\n */\nexport function matchesLtAccept(file: File, accept: string): boolean {\n  const tokens = (accept || '')\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) {\n    return true;\n  }\n  const name = file.name.toLowerCase();\n  const type = (file.type || '').toLowerCase();\n  return tokens.some((token) => {\n    if (token === '*' || token === '*/*') {\n      return true;\n    }\n    if (token.startsWith('.')) {\n      return name.endsWith(token);\n    }\n    if (token.endsWith('/*')) {\n      return type.startsWith(token.slice(0, -1));\n    }\n    return type === token;\n  });\n}\n","<div class=\"flex flex-col gap-3\">\n  <div\n    class=\"border-border flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-6 text-center transition-colors data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5 data-[disabled=true]:opacity-50\"\n    data-slot=\"dropzone\"\n    [attr.data-dragging]=\"dragging() || null\"\n    [attr.data-disabled]=\"disabled() || null\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <ng-icon name=\"lucideUpload\" class=\"text-muted-foreground text-2xl\" aria-hidden=\"true\" />\n    <div [id]=\"hintId\" class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\">{{ i18n.t(multiple() ? 'lt.files.dropzone' : 'lt.files.dropzoneSingle') }}</p>\n      @if (hint()) {\n        <p class=\"text-muted-foreground text-xs\">{{ hint() }}</p>\n      }\n    </div>\n    <button hlmBtn type=\"button\" variant=\"outline\" size=\"sm\" [disabled]=\"disabled()\" [attr.aria-describedby]=\"hintId\" (click)=\"openFileDialog(fileInput)\">\n      {{ i18n.t(multiple() ? 'lt.files.select' : 'lt.files.selectSingle') }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"sr-only\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      data-slot=\"file-input\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [disabled]=\"disabled()\"\n      (change)=\"onInputChange(fileInput)\"\n    />\n  </div>\n\n  @if (rejections().length > 0) {\n    <ul class=\"text-error flex flex-col gap-1 text-sm\" role=\"alert\" data-slot=\"rejections\">\n      @for (message of rejections(); track $index) {\n        <li>{{ message }}</li>\n      }\n    </ul>\n  }\n\n  <p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" data-slot=\"announcement\">{{ announcement() }}</p>\n\n  @if (upload.uploads().length > 0) {\n    <ul class=\"flex flex-col gap-2\" data-slot=\"file-list\" [attr.aria-label]=\"i18n.t('lt.files.files')\">\n      @for (item of upload.uploads(); track item.id) {\n        <li class=\"border-border bg-background flex items-center gap-3 rounded-lg border p-3\" data-slot=\"file\" [attr.data-status]=\"item.status\">\n          <ng-icon name=\"lucideFile\" class=\"text-muted-foreground shrink-0 text-xl\" aria-hidden=\"true\" />\n          <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n            <p class=\"truncate text-sm font-medium\" [id]=\"item.id + '-name'\" [title]=\"item.file.name\">{{ item.file.name }}</p>\n            <p class=\"text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs\">\n              <span>{{ formatSize(item.file.size) }}</span>\n              <span aria-hidden=\"true\">·</span>\n              <span\n                data-slot=\"status\"\n                [class.text-success]=\"item.status === 'completed'\"\n                [class.text-error]=\"item.status === 'error'\"\n                [class.text-warning]=\"item.status === 'paused'\"\n                >{{ statusLabel(item.status) }}</span\n              >\n              @if (item.status === 'uploading') {\n                <span aria-hidden=\"true\">·</span>\n                <span data-slot=\"progress-label\">{{ progressLabel(item) }}</span>\n              }\n            </p>\n            @if (item.status === 'uploading' || item.status === 'paused') {\n              <hlm-progress class=\"mt-1\" [value]=\"progressValue(item)\" [attr.aria-labelledby]=\"item.id + '-name'\">\n                <hlm-progress-indicator />\n              </hlm-progress>\n            }\n          </div>\n          <div class=\"flex shrink-0 gap-0.5\">\n            @switch (item.status) {\n              @case ('uploading') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"pause\"\n                  [attr.aria-label]=\"actionLabel('lt.files.pause', item)\"\n                  (click)=\"upload.pauseUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucidePause\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('paused') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"resume\"\n                  [attr.aria-label]=\"actionLabel('lt.files.resume', item)\"\n                  (click)=\"upload.resumeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucidePlay\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('idle') {\n                @if (!autoStart()) {\n                  <button\n                    hlmBtn\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    data-action=\"start\"\n                    [attr.aria-label]=\"actionLabel('lt.files.start', item)\"\n                    (click)=\"upload.startUpload(item.id)\"\n                  >\n                    <ng-icon name=\"lucideUpload\" aria-hidden=\"true\" />\n                  </button>\n                }\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"cancel\"\n                  [attr.aria-label]=\"actionLabel('lt.files.cancel', item)\"\n                  (click)=\"upload.cancelUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('error') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"retry\"\n                  [attr.aria-label]=\"actionLabel('lt.files.retry', item)\"\n                  (click)=\"upload.retryUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideRefreshCw\" aria-hidden=\"true\" />\n                </button>\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"remove\"\n                  [attr.aria-label]=\"actionLabel('lt.files.remove', item)\"\n                  (click)=\"upload.removeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideTrash2\" aria-hidden=\"true\" />\n                </button>\n              }\n              @case ('completed') {\n                <button\n                  hlmBtn\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  data-action=\"remove\"\n                  [attr.aria-label]=\"actionLabel('lt.files.remove', item)\"\n                  (click)=\"upload.removeUpload(item.id)\"\n                >\n                  <ng-icon name=\"lucideTrash2\" aria-hidden=\"true\" />\n                </button>\n              }\n            }\n          </div>\n        </li>\n      }\n    </ul>\n  }\n</div>\n"],"mappings":"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"}