@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-file-upload.mjs

@@ -0,0 +1,335 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextId = 0;
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+var FileUpload = class FileUpload {
+	fileInput = viewChild("fileInput", ...ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []);
+	id = input(`gbt-file-upload-${++nextId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	maxSizeMb = input(null, ...ngDevMode ? [{ debugName: "maxSizeMb" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	dropLabel = input("Drag and drop a file here, or click to browse", ...ngDevMode ? [{ debugName: "dropLabel" }] : /* istanbul ignore next */ []);
+	removeLabel = input((name) => `Remove ${name}`, ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	oversizeMessage = input((name, maxSizeMb) => `${name} exceeds ${maxSizeMb} MB and was not added.`, ...ngDevMode ? [{ debugName: "oversizeMessage" }] : /* istanbul ignore next */ []);
+	extraFileMessage = input((name) => `${name} was not added — only one file is allowed.`, ...ngDevMode ? [{ debugName: "extraFileMessage" }] : /* istanbul ignore next */ []);
+	files = signal([], ...ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []);
+	rejections = signal([], ...ngDevMode ? [{ debugName: "rejections" }] : /* istanbul ignore next */ []);
+	dragOver = signal(false, ...ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []);
+	formatFileSize = formatFileSize;
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.files.set(value ?? []);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	openPicker() {
+		if (this.isDisabled()) return;
+		this.fileInput()?.nativeElement.click();
+	}
+	onFilesSelected(event) {
+		const input = event.target;
+		this.addFiles(input.files);
+		input.value = "";
+	}
+	onDragEnter(event) {
+		event.preventDefault();
+		if (!this.isDisabled()) this.dragOver.set(true);
+	}
+	onDragOver(event) {
+		event.preventDefault();
+	}
+	onDragLeave(event) {
+		event.preventDefault();
+		this.dragOver.set(false);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		this.dragOver.set(false);
+		if (this.isDisabled()) return;
+		this.addFiles(event.dataTransfer?.files ?? null);
+	}
+	removeFile(file) {
+		if (this.isDisabled()) return;
+		const next = this.files().filter((f) => f !== file);
+		this.files.set(next);
+		this.onChange(next);
+		this.onTouched();
+	}
+	addFiles(fileList) {
+		if (!fileList || fileList.length === 0) return;
+		const incoming = Array.from(fileList);
+		const maxSizeMb = this.maxSizeMb();
+		const accepted = [];
+		const rejected = [];
+		for (const file of incoming) if (maxSizeMb !== null && file.size > maxSizeMb * 1024 * 1024) rejected.push(this.oversizeMessage()(file.name, maxSizeMb));
+		else accepted.push(file);
+		const extra = this.multiple() ? [] : accepted.slice(1);
+		for (const file of extra) rejected.push(this.extraFileMessage()(file.name));
+		this.rejections.set(rejected);
+		if (accepted.length === 0) return;
+		const next = this.multiple() ? [...this.files(), ...accepted] : accepted.slice(0, 1);
+		this.files.set(next);
+		this.onChange(next);
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FileUpload,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: FileUpload,
+		isStandalone: true,
+		selector: "gbt-file-upload",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSizeMb: {
+				classPropertyName: "maxSizeMb",
+				publicName: "maxSizeMb",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dropLabel: {
+				classPropertyName: "dropLabel",
+				publicName: "dropLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			oversizeMessage: {
+				classPropertyName: "oversizeMessage",
+				publicName: "oversizeMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			extraFileMessage: {
+				classPropertyName: "extraFileMessage",
+				publicName: "extraFileMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => FileUpload),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "fileInput",
+			first: true,
+			predicate: ["fileInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-file-upload\">\n  @if (label()) {\n    <span class=\"gbt-file-upload__label\" [id]=\"id() + '-label'\">{{ label() }}</span>\n  }\n  <button\n    type=\"button\"\n    class=\"gbt-file-upload__dropzone\"\n    [class.gbt-file-upload__dropzone--drag-over]=\"dragOver()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"openPicker()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <gbt-icon name=\"upload\" class=\"gbt-file-upload__icon\" aria-hidden=\"true\" />\n    <span class=\"gbt-file-upload__hint\">{{ dropLabel() }}</span>\n  </button>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"gbt-file-upload__input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() || null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (rejections().length > 0) {\n    <div class=\"gbt-file-upload__rejections\" role=\"alert\">\n      <ul>\n        @for (message of rejections(); track message) {\n          <li>{{ message }}</li>\n        }\n      </ul>\n    </div>\n  }\n  @if (files().length > 0) {\n    <ul class=\"gbt-file-upload__files\">\n      @for (file of files(); track file) {\n        <li class=\"gbt-file-upload__file\">\n          <span class=\"gbt-file-upload__file-name\">{{ file.name }}</span>\n          <span class=\"gbt-file-upload__file-size\">{{ formatFileSize(file.size) }}</span>\n          <button\n            type=\"button\"\n            class=\"gbt-file-upload__file-remove\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-label]=\"removeLabel()(file.name)\"\n            (click)=\"removeFile(file)\"\n          >\n            <gbt-icon name=\"x\" aria-hidden=\"true\" />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-file-upload__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		styles: [".gbt-file-upload{display:flex;flex-direction:column;gap:.5rem}.gbt-file-upload__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-file-upload__dropzone{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:1.5rem 1rem;background:var(--bg-panel);border:1px dashed var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-secondary);cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1)}.gbt-file-upload__dropzone:hover:not(:disabled){border-color:var(--primary)}.gbt-file-upload__dropzone:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-file-upload__dropzone--drag-over{background:color-mix(in srgb,var(--primary) 8%,var(--bg-panel));border-color:var(--primary)}.gbt-file-upload__dropzone:disabled{cursor:not-allowed;opacity:.5}.gbt-file-upload__icon{color:var(--text-discret)}.gbt-file-upload__hint{font-size:13px;text-align:center}.gbt-file-upload__input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.gbt-file-upload__rejections{font-size:.75rem;color:var(--color-error-text)}.gbt-file-upload__rejections ul{margin:0;padding:0;list-style:none}.gbt-file-upload__files{display:flex;flex-direction:column;gap:.375rem;margin:0;padding:0;list-style:none}.gbt-file-upload__file{box-sizing:border-box;display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;background:var(--bg-panel);border-radius:var(--site-border-radius-sm)}.gbt-file-upload__file-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--text-primary)}.gbt-file-upload__file-size{flex-shrink:0;font-size:12px;color:var(--text-secondary)}.gbt-file-upload__file-remove{position:relative;display:inline-flex;flex-shrink:0;background:none;border:none;color:var(--text-secondary);cursor:pointer}.gbt-file-upload__file-remove:hover:not(:disabled){color:var(--text-primary)}.gbt-file-upload__file-remove:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-file-upload__file-remove:disabled{cursor:not-allowed;opacity:.5}.gbt-file-upload__file-remove:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-file-upload__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-file-upload__dropzone{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FileUpload,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-file-upload",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FileUpload),
+				multi: true
+			}],
+			template: "<div class=\"gbt-file-upload\">\n  @if (label()) {\n    <span class=\"gbt-file-upload__label\" [id]=\"id() + '-label'\">{{ label() }}</span>\n  }\n  <button\n    type=\"button\"\n    class=\"gbt-file-upload__dropzone\"\n    [class.gbt-file-upload__dropzone--drag-over]=\"dragOver()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"openPicker()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <gbt-icon name=\"upload\" class=\"gbt-file-upload__icon\" aria-hidden=\"true\" />\n    <span class=\"gbt-file-upload__hint\">{{ dropLabel() }}</span>\n  </button>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"gbt-file-upload__input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() || null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (rejections().length > 0) {\n    <div class=\"gbt-file-upload__rejections\" role=\"alert\">\n      <ul>\n        @for (message of rejections(); track message) {\n          <li>{{ message }}</li>\n        }\n      </ul>\n    </div>\n  }\n  @if (files().length > 0) {\n    <ul class=\"gbt-file-upload__files\">\n      @for (file of files(); track file) {\n        <li class=\"gbt-file-upload__file\">\n          <span class=\"gbt-file-upload__file-name\">{{ file.name }}</span>\n          <span class=\"gbt-file-upload__file-size\">{{ formatFileSize(file.size) }}</span>\n          <button\n            type=\"button\"\n            class=\"gbt-file-upload__file-remove\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-label]=\"removeLabel()(file.name)\"\n            (click)=\"removeFile(file)\"\n          >\n            <gbt-icon name=\"x\" aria-hidden=\"true\" />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-file-upload__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			styles: [".gbt-file-upload{display:flex;flex-direction:column;gap:.5rem}.gbt-file-upload__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-file-upload__dropzone{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:1.5rem 1rem;background:var(--bg-panel);border:1px dashed var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-secondary);cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1)}.gbt-file-upload__dropzone:hover:not(:disabled){border-color:var(--primary)}.gbt-file-upload__dropzone:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-file-upload__dropzone--drag-over{background:color-mix(in srgb,var(--primary) 8%,var(--bg-panel));border-color:var(--primary)}.gbt-file-upload__dropzone:disabled{cursor:not-allowed;opacity:.5}.gbt-file-upload__icon{color:var(--text-discret)}.gbt-file-upload__hint{font-size:13px;text-align:center}.gbt-file-upload__input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.gbt-file-upload__rejections{font-size:.75rem;color:var(--color-error-text)}.gbt-file-upload__rejections ul{margin:0;padding:0;list-style:none}.gbt-file-upload__files{display:flex;flex-direction:column;gap:.375rem;margin:0;padding:0;list-style:none}.gbt-file-upload__file{box-sizing:border-box;display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;background:var(--bg-panel);border-radius:var(--site-border-radius-sm)}.gbt-file-upload__file-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--text-primary)}.gbt-file-upload__file-size{flex-shrink:0;font-size:12px;color:var(--text-secondary)}.gbt-file-upload__file-remove{position:relative;display:inline-flex;flex-shrink:0;background:none;border:none;color:var(--text-secondary);cursor:pointer}.gbt-file-upload__file-remove:hover:not(:disabled){color:var(--text-primary)}.gbt-file-upload__file-remove:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-file-upload__file-remove:disabled{cursor:not-allowed;opacity:.5}.gbt-file-upload__file-remove:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-file-upload__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-file-upload__dropzone{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		fileInput: [{
+			type: i0.ViewChild,
+			args: ["fileInput", { isSignal: true }]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		maxSizeMb: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSizeMb",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		dropLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dropLabel",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		oversizeMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "oversizeMessage",
+				required: false
+			}]
+		}],
+		extraFileMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extraFileMessage",
+				required: false
+			}]
+		}]
+	}
+});
+export { FileUpload };
+
+//# sourceMappingURL=masmarino-gabarit-file-upload.mjs.map

package/fesm2022/masmarino-gabarit-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-file-upload.mjs","names":[],"sources":["../../../projects/gabarit/file-upload/file-upload.ts","../../../projects/gabarit/file-upload/file-upload.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nlet nextId = 0\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`\n  }\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`\n  }\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\n@Component({\n  selector: 'gbt-file-upload',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './file-upload.html',\n  styleUrl: './file-upload.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => FileUpload),\n      multi: true,\n    },\n  ],\n})\nexport class FileUpload implements ControlValueAccessor {\n  private readonly fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput')\n\n  id = input<string>(`gbt-file-upload-${++nextId}`)\n  label = input<string>('')\n  multiple = input(false, { transform: booleanAttribute })\n  accept = input<string>('')\n  maxSizeMb = input<number | null>(null)\n  disabled = input(false, { transform: booleanAttribute })\n  errorMessage = input<string | null>(null)\n  dropLabel = input<string>('Drag and drop a file here, or click to browse')\n  removeLabel = input<(name: string) => string>((name) => `Remove ${name}`)\n  oversizeMessage = input<(name: string, maxSizeMb: number) => string>(\n    (name, maxSizeMb) => `${name} exceeds ${maxSizeMb} MB and was not added.`,\n  )\n  extraFileMessage = input<(name: string) => string>(\n    (name) => `${name} was not added — only one file is allowed.`,\n  )\n\n  protected readonly files = signal<File[]>([])\n  protected readonly rejections = signal<string[]>([])\n  protected readonly dragOver = signal(false)\n\n  protected readonly formatFileSize = formatFileSize\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  private onChange: (value: File[]) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  writeValue(value: File[] | null): void {\n    this.files.set(value ?? [])\n  }\n\n  registerOnChange(fn: (value: File[]) => void): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled)\n  }\n\n  protected openPicker(): void {\n    if (this.isDisabled()) {\n      return\n    }\n    this.fileInput()?.nativeElement.click()\n  }\n\n  protected onFilesSelected(event: Event): void {\n    const input = event.target as HTMLInputElement\n    this.addFiles(input.files)\n    input.value = ''\n  }\n\n  protected onDragEnter(event: DragEvent): void {\n    event.preventDefault()\n    if (!this.isDisabled()) {\n      this.dragOver.set(true)\n    }\n  }\n\n  protected onDragOver(event: DragEvent): void {\n    event.preventDefault()\n  }\n\n  protected onDragLeave(event: DragEvent): void {\n    event.preventDefault()\n    this.dragOver.set(false)\n  }\n\n  protected onDrop(event: DragEvent): void {\n    event.preventDefault()\n    this.dragOver.set(false)\n    if (this.isDisabled()) {\n      return\n    }\n    this.addFiles(event.dataTransfer?.files ?? null)\n  }\n\n  protected removeFile(file: File): void {\n    if (this.isDisabled()) {\n      return\n    }\n    const next = this.files().filter((f) => f !== file)\n    this.files.set(next)\n    this.onChange(next)\n    this.onTouched()\n  }\n\n  private addFiles(fileList: FileList | null): void {\n    if (!fileList || fileList.length === 0) {\n      return\n    }\n    const incoming = Array.from(fileList)\n    const maxSizeMb = this.maxSizeMb()\n    const accepted: File[] = []\n    const rejected: string[] = []\n    for (const file of incoming) {\n      if (maxSizeMb !== null && file.size > maxSizeMb * 1024 * 1024) {\n        rejected.push(this.oversizeMessage()(file.name, maxSizeMb))\n      } else {\n        accepted.push(file)\n      }\n    }\n    const extra = this.multiple() ? [] : accepted.slice(1)\n    for (const file of extra) {\n      rejected.push(this.extraFileMessage()(file.name))\n    }\n    this.rejections.set(rejected)\n    if (accepted.length === 0) {\n      return\n    }\n    const next = this.multiple() ? [...this.files(), ...accepted] : accepted.slice(0, 1)\n    this.files.set(next)\n    this.onChange(next)\n    this.onTouched()\n  }\n}\n","<div class=\"gbt-file-upload\">\n  @if (label()) {\n    <span class=\"gbt-file-upload__label\" [id]=\"id() + '-label'\">{{ label() }}</span>\n  }\n  <button\n    type=\"button\"\n    class=\"gbt-file-upload__dropzone\"\n    [class.gbt-file-upload__dropzone--drag-over]=\"dragOver()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"openPicker()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <gbt-icon name=\"upload\" class=\"gbt-file-upload__icon\" aria-hidden=\"true\" />\n    <span class=\"gbt-file-upload__hint\">{{ dropLabel() }}</span>\n  </button>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"gbt-file-upload__input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() || null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFilesSelected($event)\"\n  />\n  @if (rejections().length > 0) {\n    <div class=\"gbt-file-upload__rejections\" role=\"alert\">\n      <ul>\n        @for (message of rejections(); track message) {\n          <li>{{ message }}</li>\n        }\n      </ul>\n    </div>\n  }\n  @if (files().length > 0) {\n    <ul class=\"gbt-file-upload__files\">\n      @for (file of files(); track file) {\n        <li class=\"gbt-file-upload__file\">\n          <span class=\"gbt-file-upload__file-name\">{{ file.name }}</span>\n          <span class=\"gbt-file-upload__file-size\">{{ formatFileSize(file.size) }}</span>\n          <button\n            type=\"button\"\n            class=\"gbt-file-upload__file-remove\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-label]=\"removeLabel()(file.name)\"\n            (click)=\"removeFile(file)\"\n          >\n            <gbt-icon name=\"x\" aria-hidden=\"true\" />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-file-upload__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-floating-panel.mjs

@@ -0,0 +1,24 @@
+import { DOCUMENT, DestroyRef, inject } from "@angular/core";
+const GAP = 6;
+function floatingPanelAnchor(open, trigger, anchorBottom) {
+	if (!open || !trigger) return null;
+	const rect = trigger.getBoundingClientRect();
+	return {
+		rect,
+		bottom: (anchorBottom ? anchorBottom(rect) : rect.bottom) + GAP,
+		left: rect.left
+	};
+}
+function followPageScroll(follow) {
+	const view = inject(DOCUMENT).defaultView;
+	if (!view) return;
+	const listener = () => follow();
+	view.addEventListener("scroll", listener, {
+		capture: true,
+		passive: true
+	});
+	inject(DestroyRef).onDestroy(() => view.removeEventListener("scroll", listener, { capture: true }));
+}
+export { floatingPanelAnchor, followPageScroll };
+
+//# sourceMappingURL=masmarino-gabarit-floating-panel.mjs.map

package/fesm2022/masmarino-gabarit-floating-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-floating-panel.mjs","names":[],"sources":["../../../projects/gabarit/floating-panel/floating-panel-position.ts"],"sourcesContent":["import { DOCUMENT, DestroyRef, inject } from '@angular/core'\n\nconst GAP = 6\n\nexport interface FloatingPanelAnchor {\n  rect: DOMRect\n  bottom: number\n  left: number\n}\n\n/** Returns `null` (panel closed, or trigger not in the DOM) when the caller should leave `panelStyle` untouched. */\nexport function floatingPanelAnchor(\n  open: boolean,\n  trigger: HTMLElement | null,\n  anchorBottom?: (rect: DOMRect) => number,\n): FloatingPanelAnchor | null {\n  if (!open || !trigger) {\n    return null\n  }\n  const rect = trigger.getBoundingClientRect()\n  return {\n    rect,\n    bottom: (anchorBottom ? anchorBottom(rect) : rect.bottom) + GAP,\n    left: rect.left,\n  }\n}\n\n/**\n * Calls `follow` on every scroll in the page: the window's, and that of any scrolling container — the app shell's\n * `main`, a modal's body — since a panel fixed to the viewport must follow its trigger through all of them. Scroll\n * events don't bubble, so the listener sits on the window's capture phase. Call it in an injection context; it stops\n * with the component.\n */\nexport function followPageScroll(follow: () => void): void {\n  const view = inject(DOCUMENT).defaultView\n  if (!view) {\n    return\n  }\n  const listener = () => follow()\n  view.addEventListener('scroll', listener, { capture: true, passive: true })\n  inject(DestroyRef).onDestroy(() =>\n    view.removeEventListener('scroll', listener, { capture: true }),\n  )\n}\n"],"mappings":";AAEA,MAAM,MAAM;AASZ,SAAgB,oBACd,MACA,SACA,cAAwC;CAExC,IAAI,CAAC,QAAQ,CAAC,SACZ,OAAO;CAET,MAAM,OAAO,QAAQ,sBAAqB;CAC1C,OAAO;EACL;EACA,SAAS,eAAe,aAAa,IAAI,IAAI,KAAK,UAAU;EAC5D,MAAM,KAAK;CACZ;AACH;AAQA,SAAgB,iBAAiB,QAAkB;CACjD,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC;CAC9B,IAAI,CAAC,MACH;CAEF,MAAM,iBAAiB,OAAM;CAC7B,KAAK,iBAAiB,UAAU,UAAU;EAAE,SAAS;EAAM,SAAS;CAAI,CAAE;CAC1E,OAAO,UAAU,CAAC,CAAC,gBACjB,KAAK,oBAAoB,UAAU,UAAU,EAAE,SAAS,KAAI,CAAE,CAAC;AAEnE"}