@melodicdev/components 1.2.3 → 1.3.0

package/lib/components/forms/file-upload/file-upload-item.component.d.ts

@@ -0,0 +1,17 @@
+import type { IElementRef } from '@melodicdev/core';
+import type { FileUploadStatus } from './file-upload.types.js';
+export declare class FileUploadItemComponent implements IElementRef {
+    elementRef: HTMLElement;
+    name: string;
+    size: string;
+    status: FileUploadStatus;
+    progress: number;
+    error: string;
+    file: File | null;
+    get extension(): string;
+    get displayProgress(): string;
+    get progressWidth(): number;
+    handleRemove: () => void;
+    handleRetry: () => void;
+}
+//# sourceMappingURL=file-upload-item.component.d.ts.map

package/lib/components/forms/file-upload/file-upload-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,qBAMa,uBAAwB,YAAW,WAAW;IAC1D,UAAU,EAAG,WAAW,CAAC;IAEzB,IAAI,SAAM;IACV,IAAI,SAAM;IACV,MAAM,EAAE,gBAAgB,CAAU;IAClC,QAAQ,SAAK;IACb,KAAK,SAAM;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEzB,IAAI,SAAS,IAAI,MAAM,CAGtB;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,YAAY,QAAO,IAAI,CAQrB;IAEF,WAAW,QAAO,IAAI,CAQpB;CACF"}

package/lib/components/forms/file-upload/file-upload-item.component.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { fileUploadItemTemplate } from './file-upload-item.template.js';
+import { fileUploadItemStyles } from './file-upload-item.styles.js';
+let FileUploadItemComponent = class FileUploadItemComponent {
+    constructor() {
+        this.name = '';
+        this.size = '';
+        this.status = 'idle';
+        this.progress = 0;
+        this.error = '';
+        this.file = null;
+        this.handleRemove = () => {
+            this.elementRef.dispatchEvent(new CustomEvent('ml:remove', {
+                bubbles: true,
+                composed: true,
+                detail: { name: this.name, file: this.file }
+            }));
+        };
+        this.handleRetry = () => {
+            this.elementRef.dispatchEvent(new CustomEvent('ml:retry', {
+                bubbles: true,
+                composed: true,
+                detail: { name: this.name, file: this.file }
+            }));
+        };
+    }
+    get extension() {
+        const parts = this.name.split('.');
+        return parts.length > 1 ? parts.pop() : '';
+    }
+    get displayProgress() {
+        return `${Math.round(Math.min(Math.max(this.progress, 0), 100))}%`;
+    }
+    get progressWidth() {
+        return Math.min(Math.max(this.progress, 0), 100);
+    }
+};
+FileUploadItemComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-file-upload-item',
+        template: fileUploadItemTemplate,
+        styles: fileUploadItemStyles,
+        attributes: ['name', 'size', 'status', 'progress', 'error']
+    })
+], FileUploadItemComponent);
+export { FileUploadItemComponent };

package/lib/components/forms/file-upload/file-upload-item.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploadItemStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=file-upload-item.styles.d.ts.map

package/lib/components/forms/file-upload/file-upload-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDA0KhC,CAAC"}

package/lib/components/forms/file-upload/file-upload-item.styles.js

@@ -0,0 +1,172 @@
+import { css } from '@melodicdev/core';
+export const fileUploadItemStyles = () => css `
+	:host {
+		display: block;
+		width: 100%;
+	}
+
+	.ml-file-item {
+		display: flex;
+		gap: var(--ml-space-3);
+		padding: var(--ml-space-4);
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius-md);
+		background-color: var(--ml-color-surface);
+		transition: border-color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-file-item__icon {
+		flex-shrink: 0;
+		display: flex;
+		align-items: flex-start;
+		padding-top: var(--ml-space-0-5);
+	}
+
+	.ml-file-item__content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-2);
+	}
+
+	.ml-file-item__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--ml-space-2);
+	}
+
+	.ml-file-item__info {
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-0-5);
+	}
+
+	.ml-file-item__name {
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text);
+		line-height: var(--ml-leading-tight);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ml-file-item__size {
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-text-muted);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-file-item__remove {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		border: none;
+		border-radius: var(--ml-radius);
+		background: transparent;
+		color: var(--ml-color-text-muted);
+		cursor: pointer;
+		transition:
+			color var(--ml-duration-150) var(--ml-ease-in-out),
+			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-file-item__remove:hover {
+		color: var(--ml-color-danger);
+		background-color: var(--ml-color-surface-sunken);
+	}
+
+	.ml-file-item__remove:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	/* Progress */
+	.ml-file-item__progress {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-3);
+	}
+
+	.ml-file-item__progress-track {
+		flex: 1;
+		height: 6px;
+		background-color: var(--ml-color-surface-sunken);
+		border-radius: var(--ml-radius-full);
+		overflow: hidden;
+	}
+
+	.ml-file-item__progress-fill {
+		height: 100%;
+		background-color: var(--ml-color-primary);
+		border-radius: var(--ml-radius-full);
+		transition: width var(--ml-duration-300) var(--ml-ease-out);
+	}
+
+	.ml-file-item__progress-text {
+		flex-shrink: 0;
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text-secondary);
+		min-width: 32px;
+		text-align: right;
+	}
+
+	/* Status row */
+	.ml-file-item__status-row {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-1-5);
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-success);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-file-item__status-row--error {
+		color: var(--ml-color-danger);
+	}
+
+	.ml-file-item__error-text {
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-danger);
+	}
+
+	.ml-file-item__retry {
+		padding: 0;
+		border: none;
+		background: transparent;
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-primary);
+		cursor: pointer;
+		text-decoration: underline;
+		font-family: var(--ml-font-sans);
+	}
+
+	.ml-file-item__retry:hover {
+		color: var(--ml-color-primary-hover);
+	}
+
+	.ml-file-item__retry:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-shadow-focus-ring);
+		border-radius: var(--ml-radius-xs);
+	}
+
+	/* Error state */
+	.ml-file-item--error {
+		border-color: var(--ml-color-danger);
+	}
+
+	/* Complete state */
+	.ml-file-item--complete {
+		border-color: var(--ml-color-success);
+	}
+`;

package/lib/components/forms/file-upload/file-upload-item.template.d.ts

@@ -0,0 +1,3 @@
+import type { FileUploadItemComponent } from './file-upload-item.component.js';
+export declare function fileUploadItemTemplate(c: FileUploadItemComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=file-upload-item.template.d.ts.map

package/lib/components/forms/file-upload/file-upload-item.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload-item.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE/E,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,uBAAuB,6CAqDhE"}

package/lib/components/forms/file-upload/file-upload-item.template.js

@@ -0,0 +1,55 @@
+import { html, classMap, styleMap, when } from '@melodicdev/core';
+export function fileUploadItemTemplate(c) {
+    return html `
+		<div class=${classMap({
+        'ml-file-item': true,
+        [`ml-file-item--${c.status}`]: true
+    })}>
+			<div class="ml-file-item__icon">
+				<ml-file-icon extension=${c.extension} size="md"></ml-file-icon>
+			</div>
+
+			<div class="ml-file-item__content">
+				<div class="ml-file-item__header">
+					<div class="ml-file-item__info">
+						<span class="ml-file-item__name">${c.name}</span>
+						${when(!!c.size, () => html `
+							<span class="ml-file-item__size">${c.size}</span>
+						`)}
+					</div>
+					<button
+						class="ml-file-item__remove"
+						type="button"
+						aria-label="Remove file"
+						@click=${c.handleRemove}
+					>
+						<ml-icon icon="trash" size="sm"></ml-icon>
+					</button>
+				</div>
+
+				${when(c.status === 'uploading', () => html `
+					<div class="ml-file-item__progress">
+						<div class="ml-file-item__progress-track">
+							<div class="ml-file-item__progress-fill" style=${styleMap({ width: `${c.progressWidth}%` })}></div>
+						</div>
+						<span class="ml-file-item__progress-text">${c.displayProgress}</span>
+					</div>
+				`)}
+
+				${when(c.status === 'complete', () => html `
+					<div class="ml-file-item__status-row">
+						<ml-icon icon="check-circle" size="sm"></ml-icon>
+						<span>Complete</span>
+					</div>
+				`)}
+
+				${when(c.status === 'error', () => html `
+					<div class="ml-file-item__status-row ml-file-item__status-row--error">
+						<span class="ml-file-item__error-text">${c.error || 'Upload failed'}</span>
+						<button class="ml-file-item__retry" type="button" @click=${c.handleRetry}>Try again</button>
+					</div>
+				`)}
+			</div>
+		</div>
+	`;
+}

package/lib/components/forms/file-upload/file-upload.component.d.ts

@@ -0,0 +1,24 @@
+import type { IElementRef } from '@melodicdev/core';
+export declare class FileUploadComponent implements IElementRef {
+    elementRef: HTMLElement;
+    accept: string;
+    multiple: boolean;
+    maxSize: number;
+    maxFiles: number;
+    disabled: boolean;
+    label: string;
+    sublabel: string;
+    hint: string;
+    error: string;
+    icon: string;
+    dragOver: boolean;
+    _dragCounter: number;
+    handleClick: () => void;
+    handleFileInput: (event: Event) => void;
+    handleDragEnter: (event: DragEvent) => void;
+    handleDragOver: (event: DragEvent) => void;
+    handleDragLeave: (event: DragEvent) => void;
+    handleDrop: (event: DragEvent) => void;
+    _processFiles(files: File[]): void;
+}
+//# sourceMappingURL=file-upload.component.d.ts.map

package/lib/components/forms/file-upload/file-upload.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKpD,qBAMa,mBAAoB,YAAW,WAAW;IACtD,UAAU,EAAG,WAAW,CAAC;IAEzB,MAAM,SAAM;IACZ,QAAQ,UAAS;IACjB,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,QAAQ,UAAS;IACjB,KAAK,SAAqB;IAC1B,QAAQ,SAAsB;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAoB;IAExB,QAAQ,UAAS;IACjB,YAAY,SAAK;IAEjB,WAAW,QAAO,IAAI,CAIpB;IAEF,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAKpC;IAEF,eAAe,GAAI,OAAO,SAAS,KAAG,IAAI,CAQxC;IAEF,cAAc,GAAI,OAAO,SAAS,KAAG,IAAI,CAGvC;IAEF,eAAe,GAAI,OAAO,SAAS,KAAG,IAAI,CAOxC;IAEF,UAAU,GAAI,OAAO,SAAS,KAAG,IAAI,CASnC;IAEF,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;CAwDlC"}

package/lib/components/forms/file-upload/file-upload.component.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { fileUploadTemplate } from './file-upload.template.js';
+import { fileUploadStyles } from './file-upload.styles.js';
+let FileUploadComponent = class FileUploadComponent {
+    constructor() {
+        this.accept = '';
+        this.multiple = false;
+        this.maxSize = 0;
+        this.maxFiles = 0;
+        this.disabled = false;
+        this.label = 'Click to upload';
+        this.sublabel = 'or drag and drop';
+        this.hint = '';
+        this.error = '';
+        this.icon = 'cloud-arrow-up';
+        this.dragOver = false;
+        this._dragCounter = 0;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            const input = this.elementRef.shadowRoot?.querySelector('input[type="file"]');
+            input?.click();
+        };
+        this.handleFileInput = (event) => {
+            const input = event.target;
+            if (!input.files?.length)
+                return;
+            this._processFiles(Array.from(input.files));
+            input.value = '';
+        };
+        this.handleDragEnter = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this._dragCounter++;
+            if (this._dragCounter === 1) {
+                this.dragOver = true;
+            }
+        };
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this._dragCounter--;
+            if (this._dragCounter === 0) {
+                this.dragOver = false;
+            }
+        };
+        this.handleDrop = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this._dragCounter = 0;
+            this.dragOver = false;
+            if (this.disabled)
+                return;
+            const files = event.dataTransfer?.files;
+            if (!files?.length)
+                return;
+            this._processFiles(Array.from(files));
+        };
+    }
+    _processFiles(files) {
+        const errors = [];
+        let validFiles = files;
+        if (this.accept) {
+            const acceptedTypes = this.accept.split(',').map(t => t.trim().toLowerCase());
+            validFiles = validFiles.filter(file => {
+                const ext = '.' + file.name.split('.').pop()?.toLowerCase();
+                const mime = file.type.toLowerCase();
+                const matches = acceptedTypes.some(type => {
+                    if (type.startsWith('.'))
+                        return ext === type;
+                    if (type.endsWith('/*'))
+                        return mime.startsWith(type.replace('/*', '/'));
+                    return mime === type;
+                });
+                if (!matches) {
+                    errors.push({ type: 'accept', file, message: `${file.name} is not an accepted file type` });
+                }
+                return matches;
+            });
+        }
+        if (this.maxSize > 0) {
+            validFiles = validFiles.filter(file => {
+                if (file.size > this.maxSize) {
+                    errors.push({ type: 'max-size', file, message: `${file.name} exceeds maximum size` });
+                    return false;
+                }
+                return true;
+            });
+        }
+        if (this.maxFiles > 0 && validFiles.length > this.maxFiles) {
+            errors.push({ type: 'max-files', message: `Maximum ${this.maxFiles} files allowed` });
+            validFiles = validFiles.slice(0, this.maxFiles);
+        }
+        if (errors.length > 0) {
+            this.elementRef.dispatchEvent(new CustomEvent('ml:error', {
+                bubbles: true,
+                composed: true,
+                detail: { errors }
+            }));
+        }
+        if (validFiles.length > 0) {
+            this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+                bubbles: true,
+                composed: true,
+                detail: { files: validFiles }
+            }));
+        }
+    }
+};
+FileUploadComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-file-upload',
+        template: fileUploadTemplate,
+        styles: fileUploadStyles,
+        attributes: ['accept', 'multiple', 'max-size', 'max-files', 'disabled', 'label', 'sublabel', 'hint', 'error', 'icon']
+    })
+], FileUploadComponent);
+export { FileUploadComponent };

package/lib/components/forms/file-upload/file-upload.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploadStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=file-upload.styles.d.ts.map

package/lib/components/forms/file-upload/file-upload.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA2H5B,CAAC"}

package/lib/components/forms/file-upload/file-upload.styles.js

@@ -0,0 +1,125 @@
+import { css } from '@melodicdev/core';
+export const fileUploadStyles = () => css `
+	:host {
+		display: block;
+		width: 100%;
+	}
+
+	.ml-file-upload {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-1-5);
+	}
+
+	.ml-file-upload__dropzone {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--ml-space-3);
+		padding: var(--ml-space-6) var(--ml-space-6);
+		border: 2px dashed var(--ml-color-border);
+		border-radius: var(--ml-radius-md);
+		background-color: var(--ml-color-surface);
+		cursor: pointer;
+		transition:
+			border-color var(--ml-duration-150) var(--ml-ease-in-out),
+			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-file-upload__dropzone:hover {
+		border-color: var(--ml-color-primary);
+		background-color: var(--ml-color-surface-sunken);
+	}
+
+	.ml-file-upload__dropzone:focus-visible {
+		outline: none;
+		border-color: var(--ml-color-primary);
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	.ml-file-upload__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		border-radius: var(--ml-radius-full);
+		background-color: var(--ml-color-surface-sunken);
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-file-upload__text {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--ml-space-1);
+		text-align: center;
+	}
+
+	.ml-file-upload__label {
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-semibold);
+		color: var(--ml-color-primary);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-file-upload__sublabel {
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-text-muted);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-file-upload__input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.ml-file-upload__hint {
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-text-muted);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-file-upload__error {
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-danger);
+		line-height: var(--ml-leading-tight);
+	}
+
+	/* Drag over state */
+	.ml-file-upload--drag-over .ml-file-upload__dropzone {
+		border-color: var(--ml-color-primary);
+		background-color: var(--ml-color-surface-sunken);
+	}
+
+	.ml-file-upload--drag-over .ml-file-upload__icon {
+		color: var(--ml-color-primary);
+		background-color: var(--ml-color-primary-subtle, rgba(59, 130, 246, 0.1));
+	}
+
+	/* Error state */
+	.ml-file-upload--error .ml-file-upload__dropzone {
+		border-color: var(--ml-color-danger);
+	}
+
+	/* Disabled state */
+	.ml-file-upload--disabled .ml-file-upload__dropzone {
+		background-color: var(--ml-color-input-disabled-bg);
+		border-color: var(--ml-color-border);
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.ml-file-upload--disabled .ml-file-upload__dropzone:hover {
+		border-color: var(--ml-color-border);
+		background-color: var(--ml-color-input-disabled-bg);
+	}
+`;

package/lib/components/forms/file-upload/file-upload.template.d.ts

@@ -0,0 +1,3 @@
+import type { FileUploadComponent } from './file-upload.component.js';
+export declare function fileUploadTemplate(c: FileUploadComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=file-upload.template.d.ts.map

package/lib/components/forms/file-upload/file-upload.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CAkDxD"}

package/lib/components/forms/file-upload/file-upload.template.js

@@ -0,0 +1,51 @@
+import { html, classMap, when } from '@melodicdev/core';
+export function fileUploadTemplate(c) {
+    return html `
+		<div class=${classMap({
+        'ml-file-upload': true,
+        'ml-file-upload--disabled': c.disabled,
+        'ml-file-upload--error': !!c.error,
+        'ml-file-upload--drag-over': c.dragOver
+    })}>
+			<div
+				class="ml-file-upload__dropzone"
+				role="button"
+				tabindex=${c.disabled ? '-1' : '0'}
+				aria-label="Upload file"
+				aria-disabled=${c.disabled ? 'true' : 'false'}
+				@click=${c.handleClick}
+				@keydown=${(e) => { if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        c.handleClick();
+    } }}
+				@dragenter=${c.handleDragEnter}
+				@dragover=${c.handleDragOver}
+				@dragleave=${c.handleDragLeave}
+				@drop=${c.handleDrop}
+			>
+				<div class="ml-file-upload__icon">
+					<ml-icon icon=${c.icon} size="lg"></ml-icon>
+				</div>
+				<div class="ml-file-upload__text">
+					<span class="ml-file-upload__label">${c.label}</span>
+					${when(!!c.sublabel, () => html `
+						<span class="ml-file-upload__sublabel">${c.sublabel}</span>
+					`)}
+				</div>
+			</div>
+
+			<input
+				type="file"
+				class="ml-file-upload__input"
+				accept=${c.accept}
+				?multiple=${c.multiple}
+				?disabled=${c.disabled}
+				@change=${c.handleFileInput}
+				tabindex="-1"
+				aria-hidden="true"
+			/>
+
+			${when(!!c.error, () => html `<span class="ml-file-upload__error">${c.error}</span>`, () => html `${when(!!c.hint, () => html `<span class="ml-file-upload__hint">${c.hint}</span>`)}`)}
+		</div>
+	`;
+}

package/lib/components/forms/file-upload/file-upload.types.d.ts

@@ -0,0 +1,9 @@
+export type FileUploadStatus = 'idle' | 'uploading' | 'complete' | 'error';
+export type FileIconColor = 'red' | 'green' | 'blue' | 'purple' | 'amber' | 'gray';
+export interface FileValidationError {
+    type: 'accept' | 'max-size' | 'max-files';
+    file?: File;
+    message: string;
+}
+export declare function getColorForExtension(ext: string): FileIconColor;
+//# sourceMappingURL=file-upload.types.d.ts.map