@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-file-upload.mjs

@@ -0,0 +1,762 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, booleanAttribute, computed, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+import { HttpEventType } from "@angular/common/http";
+import { catchError, filter, map, of } from "rxjs";
+function formatFileSize(bytes, locale) {
+	const units = [
+		"byte",
+		"kilobyte",
+		"megabyte",
+		"gigabyte"
+	];
+	let value = bytes;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return new Intl.NumberFormat(locale, {
+		style: "unit",
+		unit: units[unit],
+		unitDisplay: "short",
+		maximumFractionDigits: unit === 0 ? 0 : 1
+	}).format(value);
+}
+function fileMatchesAccept(file, accept) {
+	if (!accept.trim()) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return accept.split(",").map((rule) => rule.trim().toLowerCase()).some((rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule);
+}
+var StarFileUpload = class StarFileUpload {
+	text = inject(STAR_UI_TEXT);
+	ids = inject(_IdGenerator);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			for (const url of this.thumbnailUrls.values()) URL.revokeObjectURL(url);
+		});
+	}
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	maxFileSize = input(0, ...ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []);
+	fileLimit = input(0, ...ngDevMode ? [{ debugName: "fileLimit" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	fileStatus = input(null, ...ngDevMode ? [{ debugName: "fileStatus" }] : /* istanbul ignore next */ []);
+	reorderable = input(false, {
+		...ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	thumbnails = input(false, {
+		...ngDevMode ? { debugName: "thumbnails" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	selected = output();
+	rejectedChange = output();
+	inputId = this.ids.getId("star-upload-");
+	hintId = this.ids.getId("star-upload-hint-");
+	dragging = signal(false, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
+	rejected = signal([], ...ngDevMode ? [{ debugName: "rejected" }] : /* istanbul ignore next */ []);
+	dropIndex = signal(null, ...ngDevMode ? [{ debugName: "dropIndex" }] : /* istanbul ignore next */ []);
+	dragIndex = null;
+	canReorder = computed(() => this.reorderable() && !this.disabled() && !this.readonly() && this.value().length > 1, ...ngDevMode ? [{ debugName: "canReorder" }] : /* istanbul ignore next */ []);
+	input = viewChild.required("input", ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	hint = computed(() => {
+		const parts = [];
+		if (this.accept()) parts.push(this.accept().split(",").join(", "));
+		if (this.maxFileSize()) parts.push(this.text.fileMaxSize(formatFileSize(this.maxFileSize(), this.locale())));
+		if (this.fileLimit()) parts.push(this.text.fileUpTo(this.fileLimit()));
+		return parts.join(" · ");
+	}, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	statusOf(file) {
+		return this.fileStatus()?.(file) ?? null;
+	}
+	percent(status) {
+		return Math.round(Math.min(100, Math.max(0, status?.progress ?? 0)));
+	}
+	move(from, to) {
+		const files = [...this.value()];
+		if (from === to || from < 0 || to < 0 || from >= files.length || to >= files.length) return;
+		files.splice(to, 0, ...files.splice(from, 1));
+		this.value.set(files);
+	}
+	onFileDragStart(index, event) {
+		if (!this.canReorder()) return;
+		this.dragIndex = index;
+		event.dataTransfer?.setData("text/plain", String(index));
+		if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+	}
+	onFileDragOver(index, event) {
+		if (this.dragIndex === null || this.dragIndex === index) return;
+		event.preventDefault();
+		this.dropIndex.set(index);
+	}
+	onFileDrop(index, event) {
+		if (this.dragIndex === null) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.move(this.dragIndex, index);
+		this.endFileDrag();
+	}
+	endFileDrag() {
+		this.dragIndex = null;
+		this.dropIndex.set(null);
+	}
+	size(file) {
+		return formatFileSize(file.size, this.locale());
+	}
+	rejectionText(item) {
+		switch (item.reason) {
+			case "type": return this.text.fileTypeNotAllowed(item.file.name);
+			case "size": return this.text.fileTooLarge(item.file.name, formatFileSize(this.maxFileSize(), this.locale()));
+			default: return this.text.fileLimitReached(this.fileLimit());
+		}
+	}
+	onDrag(event, over) {
+		if (this.disabled() || this.readonly()) return;
+		event.preventDefault();
+		this.dragging.set(over);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		this.dragging.set(false);
+		if (this.disabled() || this.readonly() || this.dragIndex !== null) return;
+		this.add([...event.dataTransfer?.files ?? []]);
+	}
+	onPicked(input) {
+		this.add([...input.files ?? []]);
+		input.value = "";
+	}
+	add(files) {
+		const accepted = [];
+		const rejected = [];
+		const current = this.multiple() ? this.value() : [];
+		const limit = this.multiple() ? this.fileLimit() : 1;
+		for (const file of this.multiple() ? files : files.slice(0, 1)) if (!fileMatchesAccept(file, this.accept())) rejected.push({
+			file,
+			reason: "type"
+		});
+		else if (this.maxFileSize() && file.size > this.maxFileSize()) rejected.push({
+			file,
+			reason: "size"
+		});
+		else if (limit && current.length + accepted.length >= limit) rejected.push({
+			file,
+			reason: "limit"
+		});
+		else accepted.push(file);
+		this.rejected.set(rejected);
+		if (rejected.length) this.rejectedChange.emit(rejected);
+		if (accepted.length) {
+			this.value.set([...current, ...accepted]);
+			this.selected.emit(accepted);
+		}
+		this.touch.emit();
+	}
+	remove(file) {
+		this.value.update((files) => files.filter((f) => f !== file));
+		this.rejected.set([]);
+		this.releaseThumbnail(file);
+	}
+	thumbnailUrls = /* @__PURE__ */ new Map();
+	thumbnailOf(file) {
+		if (!this.thumbnails() || !file.type.startsWith("image/")) return null;
+		let url = this.thumbnailUrls.get(file);
+		if (!url && typeof URL.createObjectURL === "function") {
+			url = URL.createObjectURL(file);
+			this.thumbnailUrls.set(file, url);
+		}
+		return url ?? null;
+	}
+	releaseThumbnail(file) {
+		const url = this.thumbnailUrls.get(file);
+		if (!url) return;
+		URL.revokeObjectURL(url);
+		this.thumbnailUrls.delete(file);
+	}
+	onPaste(event) {
+		const files = [...event.clipboardData?.files ?? []];
+		if (!files.length || this.disabled() || this.readonly()) return;
+		event.preventDefault();
+		this.add(files);
+	}
+	focus() {
+		this.input().nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarFileUpload,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarFileUpload,
+		isStandalone: true,
+		selector: "star-file-upload",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxFileSize: {
+				classPropertyName: "maxFileSize",
+				publicName: "maxFileSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fileLimit: {
+				classPropertyName: "fileLimit",
+				publicName: "fileLimit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fileStatus: {
+				classPropertyName: "fileStatus",
+				publicName: "fileStatus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			reorderable: {
+				classPropertyName: "reorderable",
+				publicName: "reorderable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			thumbnails: {
+				classPropertyName: "thumbnails",
+				publicName: "thumbnails",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch",
+			selected: "selected",
+			rejectedChange: "rejectedChange"
+		},
+		host: {
+			listeners: { "paste": "onPaste($event)" },
+			properties: {
+				"class.star-upload--dragging": "dragging()",
+				"class.star-upload--disabled": "disabled()",
+				"class.star-upload--invalid": "invalid() && touched()"
+			},
+			classAttribute: "star-upload"
+		},
+		viewQueries: [{
+			propertyName: "input",
+			first: true,
+			predicate: ["input"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div
+      class="star-upload__zone"
+      (dragenter)="onDrag($event, true)"
+      (dragover)="onDrag($event, true)"
+      (dragleave)="onDrag($event, false)"
+      (drop)="onDrop($event)"
+    >
+      <i class="ph-bold ph-cloud-arrow-up star-upload__icon" aria-hidden="true"></i>
+      <p class="star-upload__lead">{{ text.dropFiles }}</p>
+      <label class="star-btn star-btn--secondary star-btn--sm star-upload__choose" [for]="inputId">
+        {{ text.chooseFiles }}
+      </label>
+      <input
+        #input
+        type="file"
+        class="star-sr-only"
+        [id]="inputId"
+        [attr.accept]="accept() || null"
+        [multiple]="multiple()"
+        [disabled]="disabled() || readonly()"
+        [attr.aria-describedby]="hintId"
+        (change)="onPicked(input)"
+        (blur)="touch.emit()"
+      />
+      @if (hint()) {
+        <p class="star-upload__hint" [id]="hintId">{{ hint() }}</p>
+      }
+    </div>
+
+    @if (value().length) {
+      <ul class="star-upload__list" [attr.aria-label]="text.chooseFiles">
+        @for (file of value(); track file; let i = $index; let first = $first; let last = $last) {
+          @let status = statusOf(file);
+          <li
+            class="star-upload__file"
+            [class.star-upload__file--error]="status?.state === 'error'"
+            [class.star-upload__file--drop]="dropIndex() === i"
+            [attr.draggable]="canReorder() ? 'true' : null"
+            (dragstart)="onFileDragStart(i, $event)"
+            (dragover)="onFileDragOver(i, $event)"
+            (drop)="onFileDrop(i, $event)"
+            (dragend)="endFileDrag()"
+          >
+            @if (status?.state === 'done') {
+              <i class="ph-fill ph-check-circle star-upload__state--done" aria-hidden="true"></i>
+            } @else if (status?.state === 'error') {
+              <i class="ph-fill ph-warning-circle star-upload__state--error" aria-hidden="true"></i>
+            } @else if (thumbnailOf(file); as thumbnail) {
+              <img class="star-upload__thumb" alt="" [src]="thumbnail" />
+            } @else {
+              <i class="ph-bold ph-file star-upload__file-icon" aria-hidden="true"></i>
+            }
+            <span class="star-upload__main">
+              <span class="star-upload__name">{{ file.name }}</span>
+              @if (status?.state === 'uploading') {
+                <span
+                  class="star-upload__progress"
+                  role="progressbar"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  [attr.aria-valuenow]="percent(status)"
+                  [attr.aria-label]="text.uploadingFile(file.name)"
+                >
+                  <span class="star-upload__progress-bar" [style.width.%]="percent(status)"></span>
+                </span>
+              } @else if (status?.state === 'error' && status?.message) {
+                <span class="star-upload__message">{{ status?.message }}</span>
+              } @else if (status?.state === 'done') {
+                <span class="star-sr-only">{{ text.uploaded }}</span>
+              }
+            </span>
+            @if (status?.state === 'uploading') {
+              <span class="star-upload__size">{{ percent(status) }}%</span>
+            } @else {
+              <span class="star-upload__size">{{ size(file) }}</span>
+            }
+            @if (canReorder()) {
+              <button
+                type="button"
+                class="star-select__icon-btn"
+                [disabled]="first"
+                [attr.aria-label]="text.moveUp + ': ' + file.name"
+                (click)="move(i, i - 1)"
+              >
+                <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+              </button>
+              <button
+                type="button"
+                class="star-select__icon-btn"
+                [disabled]="last"
+                [attr.aria-label]="text.moveDown + ': ' + file.name"
+                (click)="move(i, i + 1)"
+              >
+                <i class="ph-bold ph-arrow-down" aria-hidden="true"></i>
+              </button>
+            }
+            @if (!disabled() && !readonly()) {
+              <button
+                type="button"
+                class="star-select__icon-btn"
+                [attr.aria-label]="text.removeItem(file.name)"
+                (click)="remove(file)"
+              >
+                <i class="ph-bold ph-x" aria-hidden="true"></i>
+              </button>
+            }
+          </li>
+        }
+      </ul>
+    }
+
+    @if (rejected().length) {
+      <div role="alert">
+        <ul class="star-upload__errors">
+          @for (item of rejected(); track $index) {
+            <li>{{ rejectionText(item) }}</li>
+          }
+        </ul>
+      </div>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarFileUpload,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-file-upload",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-upload",
+				"[class.star-upload--dragging]": "dragging()",
+				"[class.star-upload--disabled]": "disabled()",
+				"[class.star-upload--invalid]": "invalid() && touched()",
+				"(paste)": "onPaste($event)"
+			},
+			template: `
+    <div
+      class="star-upload__zone"
+      (dragenter)="onDrag($event, true)"
+      (dragover)="onDrag($event, true)"
+      (dragleave)="onDrag($event, false)"
+      (drop)="onDrop($event)"
+    >
+      <i class="ph-bold ph-cloud-arrow-up star-upload__icon" aria-hidden="true"></i>
+      <p class="star-upload__lead">{{ text.dropFiles }}</p>
+      <label class="star-btn star-btn--secondary star-btn--sm star-upload__choose" [for]="inputId">
+        {{ text.chooseFiles }}
+      </label>
+      <input
+        #input
+        type="file"
+        class="star-sr-only"
+        [id]="inputId"
+        [attr.accept]="accept() || null"
+        [multiple]="multiple()"
+        [disabled]="disabled() || readonly()"
+        [attr.aria-describedby]="hintId"
+        (change)="onPicked(input)"
+        (blur)="touch.emit()"
+      />
+      @if (hint()) {
+        <p class="star-upload__hint" [id]="hintId">{{ hint() }}</p>
+      }
+    </div>
+
+    @if (value().length) {
+      <ul class="star-upload__list" [attr.aria-label]="text.chooseFiles">
+        @for (file of value(); track file; let i = $index; let first = $first; let last = $last) {
+          @let status = statusOf(file);
+          <li
+            class="star-upload__file"
+            [class.star-upload__file--error]="status?.state === 'error'"
+            [class.star-upload__file--drop]="dropIndex() === i"
+            [attr.draggable]="canReorder() ? 'true' : null"
+            (dragstart)="onFileDragStart(i, $event)"
+            (dragover)="onFileDragOver(i, $event)"
+            (drop)="onFileDrop(i, $event)"
+            (dragend)="endFileDrag()"
+          >
+            @if (status?.state === 'done') {
+              <i class="ph-fill ph-check-circle star-upload__state--done" aria-hidden="true"></i>
+            } @else if (status?.state === 'error') {
+              <i class="ph-fill ph-warning-circle star-upload__state--error" aria-hidden="true"></i>
+            } @else if (thumbnailOf(file); as thumbnail) {
+              <img class="star-upload__thumb" alt="" [src]="thumbnail" />
+            } @else {
+              <i class="ph-bold ph-file star-upload__file-icon" aria-hidden="true"></i>
+            }
+            <span class="star-upload__main">
+              <span class="star-upload__name">{{ file.name }}</span>
+              @if (status?.state === 'uploading') {
+                <span
+                  class="star-upload__progress"
+                  role="progressbar"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  [attr.aria-valuenow]="percent(status)"
+                  [attr.aria-label]="text.uploadingFile(file.name)"
+                >
+                  <span class="star-upload__progress-bar" [style.width.%]="percent(status)"></span>
+                </span>
+              } @else if (status?.state === 'error' && status?.message) {
+                <span class="star-upload__message">{{ status?.message }}</span>
+              } @else if (status?.state === 'done') {
+                <span class="star-sr-only">{{ text.uploaded }}</span>
+              }
+            </span>
+            @if (status?.state === 'uploading') {
+              <span class="star-upload__size">{{ percent(status) }}%</span>
+            } @else {
+              <span class="star-upload__size">{{ size(file) }}</span>
+            }
+            @if (canReorder()) {
+              <button
+                type="button"
+                class="star-select__icon-btn"
+                [disabled]="first"
+                [attr.aria-label]="text.moveUp + ': ' + file.name"
+                (click)="move(i, i - 1)"
+              >
+                <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+              </button>
+              <button
+                type="button"
+                class="star-select__icon-btn"
+                [disabled]="last"
+                [attr.aria-label]="text.moveDown + ': ' + file.name"
+                (click)="move(i, i + 1)"
+              >
+                <i class="ph-bold ph-arrow-down" aria-hidden="true"></i>
+              </button>
+            }
+            @if (!disabled() && !readonly()) {
+              <button
+                type="button"
+                class="star-select__icon-btn"
+                [attr.aria-label]="text.removeItem(file.name)"
+                (click)="remove(file)"
+              >
+                <i class="ph-bold ph-x" aria-hidden="true"></i>
+              </button>
+            }
+          </li>
+        }
+      </ul>
+    }
+
+    @if (rejected().length) {
+      <div role="alert">
+        <ul class="star-upload__errors">
+          @for (item of rejected(); track $index) {
+            <li>{{ rejectionText(item) }}</li>
+          }
+        </ul>
+      </div>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		maxFileSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFileSize",
+				required: false
+			}]
+		}],
+		fileLimit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fileLimit",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		fileStatus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fileStatus",
+				required: false
+			}]
+		}],
+		reorderable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reorderable",
+				required: false
+			}]
+		}],
+		thumbnails: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "thumbnails",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}],
+		rejectedChange: [{
+			type: i0.Output,
+			args: ["rejectedChange"]
+		}],
+		input: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}]
+	}
+});
+function toUploadStatus(errorMessage = defaultErrorMessage) {
+	return (events) => events.pipe(map((event) => {
+		switch (event.type) {
+			case HttpEventType.Sent: return {
+				state: "uploading",
+				progress: 0
+			};
+			case HttpEventType.UploadProgress: return {
+				state: "uploading",
+				progress: event.total ? 100 * event.loaded / event.total : 0
+			};
+			case HttpEventType.Response: return {
+				state: "done",
+				progress: 100,
+				response: event.body ?? void 0
+			};
+			default: return null;
+		}
+	}), filter((status) => status !== null), catchError((error) => of({
+		state: "error",
+		message: errorMessage(error)
+	})));
+}
+function defaultErrorMessage(error) {
+	const status = error ?? {};
+	if (status.status) return `${status.status} ${status.statusText ?? ""}`.trim();
+	return error instanceof Error ? error.message : String(error);
+}
+export { StarFileUpload, fileMatchesAccept, formatFileSize, toUploadStatus };
+
+//# sourceMappingURL=star-ng-ui-file-upload.mjs.map