@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-dropzone.mjs

@@ -0,0 +1,176 @@
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, inject, input, numberAttribute, output, signal } from "@angular/core";
+function vdAcceptsFile(file, accept) {
+	const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+	if (!rules.length) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return rules.some((rule) => {
+		if (rule.startsWith(".")) return name.endsWith(rule);
+		if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+		return type === rule;
+	});
+}
+function vdCheckFiles(files, check) {
+	const accepted = [];
+	const rejected = [];
+	for (const file of files) if (check.accept && !vdAcceptsFile(file, check.accept)) rejected.push({
+		file,
+		reason: "type"
+	});
+	else if (check.maxSize !== void 0 && file.size > check.maxSize) rejected.push({
+		file,
+		reason: "size"
+	});
+	else if (check.maxFiles !== void 0 && accepted.length >= check.maxFiles) rejected.push({
+		file,
+		reason: "count"
+	});
+	else accepted.push(file);
+	return {
+		accepted,
+		rejected
+	};
+}
+var VdDropzone = class VdDropzone {
+	maxSize = input(void 0, {
+		...ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	filesSelected = output();
+	filesRejected = output();
+	dragging = signal(false, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
+	el = inject(ElementRef).nativeElement;
+	depth = 0;
+	get control() {
+		return this.el.querySelector("input[type=file]");
+	}
+	onDragEnter(event) {
+		if (!this.acceptsDrag(event)) return;
+		event.preventDefault();
+		this.depth++;
+		this.dragging.set(true);
+	}
+	onDragOver(event) {
+		if (!this.acceptsDrag(event)) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+	}
+	onDragLeave() {
+		this.depth = Math.max(0, this.depth - 1);
+		if (this.depth === 0) this.dragging.set(false);
+	}
+	onDrop(event) {
+		this.depth = 0;
+		this.dragging.set(false);
+		if (!this.acceptsDrag(event)) return;
+		event.preventDefault();
+		const accepted = this.emit(Array.from(event.dataTransfer?.files ?? []));
+		const input = this.control;
+		if (input && typeof DataTransfer !== "undefined") {
+			const transfer = new DataTransfer();
+			accepted.forEach((file) => transfer.items.add(file));
+			input.files = transfer.files;
+		}
+	}
+	onChange(event) {
+		const input = event.target;
+		if (input.type !== "file") return;
+		this.emit(Array.from(input.files ?? []));
+	}
+	emit(files) {
+		const input = this.control;
+		const { accepted, rejected } = vdCheckFiles(files, {
+			accept: input?.accept ?? "",
+			maxSize: this.maxSize(),
+			maxFiles: input?.multiple ? void 0 : 1
+		});
+		if (rejected.length) this.filesRejected.emit(rejected);
+		if (accepted.length) this.filesSelected.emit(accepted);
+		return accepted;
+	}
+	acceptsDrag(event) {
+		const input = this.control;
+		return !!input && !input.disabled && Array.from(event.dataTransfer?.types ?? []).includes("Files");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdDropzone,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdDropzone,
+		isStandalone: true,
+		selector: "label[vdDropzone]",
+		inputs: { maxSize: {
+			classPropertyName: "maxSize",
+			publicName: "maxSize",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: {
+			filesSelected: "filesSelected",
+			filesRejected: "filesRejected"
+		},
+		host: {
+			listeners: {
+				"dragenter": "onDragEnter($event)",
+				"dragover": "onDragOver($event)",
+				"dragleave": "onDragLeave()",
+				"drop": "onDrop($event)",
+				"change": "onChange($event)"
+			},
+			properties: { "attr.data-dragover": "dragging() ? \"\" : null" },
+			classAttribute: "vd-dropzone"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdDropzone,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "label[vdDropzone]",
+			host: {
+				class: "vd-dropzone",
+				"[attr.data-dragover]": "dragging() ? \"\" : null",
+				"(dragenter)": "onDragEnter($event)",
+				"(dragover)": "onDragOver($event)",
+				"(dragleave)": "onDragLeave()",
+				"(drop)": "onDrop($event)",
+				"(change)": "onChange($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		maxSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSize",
+				required: false
+			}]
+		}],
+		filesSelected: [{
+			type: i0.Output,
+			args: ["filesSelected"]
+		}],
+		filesRejected: [{
+			type: i0.Output,
+			args: ["filesRejected"]
+		}]
+	}
+});
+export { VdDropzone, vdAcceptsFile, vdCheckFiles };
+
+//# sourceMappingURL=vadem-ui-dropzone.mjs.map

package/fesm2022/vadem-ui-dropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-dropzone.mjs","names":[],"sources":["../../../projects/ui/dropzone/src/core/accept.ts","../../../projects/ui/dropzone/src/dropzone.ts"],"sourcesContent":["/**\n * Whether a file matches an `accept` attribute value, the way the file picker filters:\n * extensions (\".pdf\"), exact MIME types (\"image/png\") and wildcards (\"image/*\"), comma-separated.\n * An empty `accept` accepts everything. Dropped files bypass the picker, so they are checked here.\n */\nexport function vdAcceptsFile(file: { name: string; type: string }, accept: string): boolean {\n  const rules = accept\n    .split(',')\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean);\n  if (!rules.length) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\nexport interface VdFileCheck {\n  accept?: string;\n  /** Bytes. */\n  maxSize?: number;\n  /** Keep at most this many accepted files (e.g. 1 when `multiple` is off). */\n  maxFiles?: number;\n}\n\nexport type VdFileRejection = 'type' | 'size' | 'count';\n\n/** Splits files into accepted and rejected (with the reason), in their original order. */\nexport function vdCheckFiles<T extends { name: string; type: string; size: number }>(\n  files: readonly T[],\n  check: VdFileCheck,\n): { accepted: T[]; rejected: { file: T; reason: VdFileRejection }[] } {\n  const accepted: T[] = [];\n  const rejected: { file: T; reason: VdFileRejection }[] = [];\n  for (const file of files) {\n    if (check.accept && !vdAcceptsFile(file, check.accept)) rejected.push({ file, reason: 'type' });\n    else if (check.maxSize !== undefined && file.size > check.maxSize)\n      rejected.push({ file, reason: 'size' });\n    else if (check.maxFiles !== undefined && accepted.length >= check.maxFiles)\n      rejected.push({ file, reason: 'count' });\n    else accepted.push(file);\n  }\n  return { accepted, rejected };\n}\n","import {\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  numberAttribute,\n  output,\n  signal,\n} from '@angular/core';\nimport { VdFileRejection, vdCheckFiles } from './core/accept';\n\nexport interface VdRejectedFile {\n  file: File;\n  reason: VdFileRejection;\n}\n\n/**\n * File picker and drop target on a `<label>` that wraps a native `<input type=\"file\">`.\n * The input stays the control (keyboard, `accept`, `multiple`, form submission); the label is\n * the click and drop area. Dropped files are checked against `accept` (the picker does that\n * for chosen files), `maxSize` and `multiple`, and written back to the input.\n * Spec: specs/dropzone.md\n */\n@Directive({\n  selector: 'label[vdDropzone]',\n  host: {\n    class: 'vd-dropzone',\n    '[attr.data-dragover]': 'dragging() ? \"\" : null',\n    '(dragenter)': 'onDragEnter($event)',\n    '(dragover)': 'onDragOver($event)',\n    '(dragleave)': 'onDragLeave()',\n    '(drop)': 'onDrop($event)',\n    '(change)': 'onChange($event)',\n  },\n})\nexport class VdDropzone {\n  /** Largest accepted file in bytes. */\n  readonly maxSize = input(undefined, { transform: numberAttribute });\n  /** Accepted files, after each pick or drop. */\n  readonly filesSelected = output<File[]>();\n  /** Files that didn't pass `accept`, `maxSize` or the single-file limit. */\n  readonly filesRejected = output<VdRejectedFile[]>();\n\n  protected readonly dragging = signal(false);\n  private readonly el: HTMLElement = inject(ElementRef).nativeElement;\n  /** dragenter/leave fire for every child; count to know when the pointer really left. */\n  private depth = 0;\n\n  private get control(): HTMLInputElement | null {\n    return this.el.querySelector('input[type=file]');\n  }\n\n  protected onDragEnter(event: DragEvent): void {\n    if (!this.acceptsDrag(event)) return;\n    event.preventDefault();\n    this.depth++;\n    this.dragging.set(true);\n  }\n\n  protected onDragOver(event: DragEvent): void {\n    if (!this.acceptsDrag(event)) return;\n    // Required for the drop event; also shows the copy cursor.\n    event.preventDefault();\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';\n  }\n\n  protected onDragLeave(): void {\n    this.depth = Math.max(0, this.depth - 1);\n    if (this.depth === 0) this.dragging.set(false);\n  }\n\n  protected onDrop(event: DragEvent): void {\n    this.depth = 0;\n    this.dragging.set(false);\n    if (!this.acceptsDrag(event)) return;\n    event.preventDefault();\n    const accepted = this.emit(Array.from(event.dataTransfer?.files ?? []));\n    // Keep the native input in sync so a plain form submit sends the dropped files.\n    const input = this.control;\n    if (input && typeof DataTransfer !== 'undefined') {\n      const transfer = new DataTransfer();\n      accepted.forEach((file) => transfer.items.add(file));\n      input.files = transfer.files;\n    }\n  }\n\n  protected onChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (input.type !== 'file') return;\n    this.emit(Array.from(input.files ?? []));\n  }\n\n  private emit(files: File[]): File[] {\n    const input = this.control;\n    const { accepted, rejected } = vdCheckFiles(files, {\n      accept: input?.accept ?? '',\n      maxSize: this.maxSize(),\n      maxFiles: input?.multiple ? undefined : 1,\n    });\n    if (rejected.length) this.filesRejected.emit(rejected);\n    if (accepted.length) this.filesSelected.emit(accepted);\n    return accepted;\n  }\n\n  private acceptsDrag(event: DragEvent): boolean {\n    const input = this.control;\n    return (\n      !!input && !input.disabled && Array.from(event.dataTransfer?.types ?? []).includes('Files')\n    );\n  }\n}\n"],"mappings":"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"}