@melodicdev/components 1.2.4 → 1.3.0

package/assets/melodic-components.min.js

@@ -4,7 +4,7 @@ function fs(e) {
     t.params || (t.params = []), t.params[l] = { __injectionToken: O(e) };
   };
 }
-function Z(e = {}) {
+function ee(e = {}) {
   return function(t) {
     const r = e.token ?? t, l = e.dependencies?.map((a) => O(a));
     L.bind(r, t, {
@@ -148,7 +148,7 @@ function H(e) {
     });
   };
 }
-function ee(e) {
+function te(e) {
   return Symbol(e);
 }
 async function _s(e = {}) {
@@ -369,7 +369,7 @@ function ys(e) {
   };
   return e.extends ? kr(e.extends, r) : r;
 }
-const rl = ee("APP_CONFIG");
+const rl = te("APP_CONFIG");
 function xs(e) {
   return (t) => {
     t.bindValue(rl, e);
@@ -852,7 +852,7 @@ var xe = class {
     return this._resolvedData.get(t);
   }
 };
-xe = g([Z()], xe);
+xe = g([ee()], xe);
 function j(e, t) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }
@@ -1102,7 +1102,7 @@ var V = class {
     };
   }
 };
-V = g([Z(), j("design:paramtypes", [])], V);
+V = g([ee(), j("design:paramtypes", [])], V);
 var W = /* @__PURE__ */ new Map(), Tr = (e) => {
   if (W.has(e)) return W.get(e);
   const t = e.toLowerCase();
@@ -1123,15 +1123,15 @@ function zs(e) {
 function As() {
   return Array.from(W.keys());
 }
-function oe(e) {
+function Y(e) {
   return typeof e == "object" && e !== null && "__directive" in e;
 }
-var pe = `m${Math.random().toString(36).slice(2, 9)}`, ul = `<!--${pe}-->`, Ie = `__${pe}_`, He = new RegExp(`${Ie}(\\d+)__`, "g"), ie = (e) => `${Ie}${e}__`, Y = /* @__PURE__ */ new Map(), Ke = /* @__PURE__ */ new WeakMap();
+var pe = `m${Math.random().toString(36).slice(2, 9)}`, ul = `<!--${pe}-->`, Ie = `__${pe}_`, He = new RegExp(`${Ie}(\\d+)__`, "g"), ie = (e) => `${Ie}${e}__`, X = /* @__PURE__ */ new Map(), Ke = /* @__PURE__ */ new WeakMap();
 function be(e) {
   let t = Ke.get(e);
   return t === void 0 && (t = e.join(pe), Ke.set(e, t)), t;
 }
-var hl = class X {
+var hl = class J {
   constructor(t, r) {
     this.strings = t, this.values = r;
   }
@@ -1159,7 +1159,7 @@ var hl = class X {
     this.commit(o);
   }
   getTemplate(t) {
-    let r = Y.get(t);
+    let r = X.get(t);
     if (r) return r;
     const l = [];
     let a = this.strings[0];
@@ -1289,11 +1289,11 @@ var hl = class X {
       element: c,
       parts: l,
       partPaths: m
-    }, Y.size >= 500) {
-      const w = Y.keys().next().value;
-      w && Y.delete(w);
+    }, X.size >= 500) {
+      const w = X.keys().next().value;
+      w && X.delete(w);
     }
-    return Y.set(t, r), r;
+    return X.set(t, r), r;
   }
   getAttributePreProcessor(t) {
     return {
@@ -1412,6 +1412,27 @@ var hl = class X {
       t.renderedNodes = [], t.arrayState = void 0, t.nestedContainer = void 0;
     }
   }
+  /**
+  * Clears DOM nodes created by a directive (e.g. repeat, when) when
+  * switching away from a directive to a different renderable type.
+  * Removes all nodes between the directive's markers and restores
+  * part.node into the DOM so non-directive rendering can proceed.
+  */
+  clearDirectiveDOM(t) {
+    const r = t.directiveState;
+    if (!r) return;
+    const l = r.startMarker, a = r.endMarker;
+    if (l && a && l.parentNode) {
+      const o = l.parentNode;
+      let s = l.nextSibling;
+      for (; s && s !== a; ) {
+        const n = s.nextSibling;
+        o.removeChild(s), s = n;
+      }
+      t.node && o.insertBefore(t.node, a), o.removeChild(l), o.removeChild(a);
+    }
+    t.directiveState = void 0;
+  }
   cleanupParts(t) {
     for (const r of t) {
       if (r.actionCleanup) try {
@@ -1498,7 +1519,7 @@ var hl = class X {
     }
     this.clearRenderedNodes(t);
     const o = [];
-    for (const s of r) if (s instanceof X) {
+    for (const s of r) if (s instanceof J) {
       const n = document.createDocumentFragment();
       s.renderInto(n);
       const c = Array.from(n.childNodes);
@@ -1525,7 +1546,7 @@ var hl = class X {
   }
   createArrayItem(t, r, l) {
     const a = document.createDocumentFragment();
-    t instanceof X ? t.renderInto(a) : t instanceof Node ? a.appendChild(t) : t != null && a.appendChild(document.createTextNode(String(t)));
+    t instanceof J ? t.renderInto(a) : t instanceof Node ? a.appendChild(t) : t != null && a.appendChild(document.createTextNode(String(t)));
     const o = Array.from(a.childNodes);
     return r.insertBefore(a, l), {
       container: a,
@@ -1533,7 +1554,7 @@ var hl = class X {
     };
   }
   updateArrayItem(t, r, l, a) {
-    if (r instanceof X) {
+    if (r instanceof J) {
       r.renderInto(t.container), t.value = r, t.nodes = Array.from(t.container.childNodes);
       return;
     }
@@ -1545,15 +1566,18 @@ var hl = class X {
   commit(t) {
     for (const r of t) {
       const l = this.values[r.index], a = r.type === "attribute" && r.attributeIndices && r.attributeStrings;
-      if (!(!a && !oe(l) && r.type !== "action" && r.previousValue === l)) {
+      if (!(!a && !Y(l) && r.type !== "action" && r.previousValue === l)) {
         switch (r.type) {
           case "node":
-            r.node && (oe(l) ? r.directiveState = l.render(r.node, r.directiveState) : l instanceof X ? this.renderNestedTemplate(r, l) : l instanceof Node ? this.renderNode(r, l) : Array.isArray(l) ? this.renderArray(r, l) : (this.clearRenderedNodes(r), r.node.textContent = String(l ?? "")));
+            if (r.node) {
+              const o = Y(r.previousValue), s = Y(l);
+              o && !s && r.directiveState && this.clearDirectiveDOM(r), !o && s && this.clearRenderedNodes(r), s ? r.directiveState = l.render(r.node, r.directiveState) : l instanceof J ? this.renderNestedTemplate(r, l) : l instanceof Node ? this.renderNode(r, l) : Array.isArray(l) ? this.renderArray(r, l) : (this.clearRenderedNodes(r), r.node.textContent = String(l ?? ""));
+            }
             break;
           case "attribute":
             if (r.node && r.name) {
               const o = r.node;
-              if (oe(l)) r.directiveState = l.render(o, r.directiveState);
+              if (Y(l)) r.directiveState = l.render(o, r.directiveState);
               else if (a) {
                 const s = r.attributeStrings, n = r.attributeIndices;
                 let c = s[0] ?? "";
@@ -1574,7 +1598,7 @@ var hl = class X {
             }
             break;
           case "property":
-            r.node && r.name && (oe(l) ? r.directiveState = l.render(r.node, r.directiveState) : r.node[r.name] = l);
+            r.node && r.name && (Y(l) ? r.directiveState = l.render(r.node, r.directiveState) : r.node[r.name] = l);
             break;
           case "event":
             if (r.node && r.name) {
@@ -2006,7 +2030,7 @@ const Ns = (e) => {
 }, Ls = (e, t) => ({
   action: e(),
   reducer: t
-}), $e = ee("RX_INIT_STATE"), Ce = ee("RX_ACTION_PROVIDERS"), Se = ee("RX_EFFECTS_PROVIDERS"), Ir = ee("RX_STATE_DEBUG");
+}), $e = te("RX_INIT_STATE"), Ce = te("RX_ACTION_PROVIDERS"), Se = te("RX_EFFECTS_PROVIDERS"), Ir = te("RX_STATE_DEBUG");
 var vl = class {
   constructor() {
     this._effects = [];
@@ -2133,7 +2157,7 @@ g([H($e), j("design:type", Object)], F.prototype, "_state", void 0);
 g([H(Ce), j("design:type", Object)], F.prototype, "_reducerMap", void 0);
 g([H(Se), j("design:type", Object)], F.prototype, "_effectMap", void 0);
 g([H(Ir), j("design:type", Boolean)], F.prototype, "_debug", void 0);
-F = g([Z(), j("design:paramtypes", [])], F);
+F = g([ee(), j("design:paramtypes", [])], F);
 function Fs(e, t, r, l = !1) {
   return (a) => {
     a.bindValue($e, e), a.bindValue(Ce, t), a.bindValue(Se, r), a.bindValue(Ir, l), a.bind(F, F, { dependencies: [
@@ -3481,7 +3505,7 @@ function Wl(e, t, r) {
     y: s
   };
 }
-function te(e, t, r = {}) {
+function re(e, t, r = {}) {
   const { placement: l = "bottom", middleware: a = [] } = r, o = e.getBoundingClientRect(), s = t.getBoundingClientRect(), { x: n, y: c } = Wl(o, s, l);
   let m = {
     x: n,
@@ -3567,7 +3591,7 @@ function Me(e, t, r, l = {}) {
     c.forEach((m) => m());
   };
 }
-function re(e = 0) {
+function le(e = 0) {
   const t = typeof e == "number" ? e : e.mainAxis ?? 0, r = typeof e == "number" ? 0 : e.crossAxis ?? 0;
   return {
     name: "offset",
@@ -3623,7 +3647,7 @@ function rt(e, t) {
       return !1;
   }
 }
-function le(e = {}) {
+function ae(e = {}) {
   const { padding: t = 0 } = e;
   return {
     name: "flip",
@@ -3686,7 +3710,7 @@ function Yl(e, t, r) {
     y: s
   };
 }
-function ae(e = {}) {
+function oe(e = {}) {
   const { padding: t = 0, mainAxis: r = !0, crossAxis: l = !0 } = e;
   return {
     name: "shift",
@@ -3804,23 +3828,23 @@ function nn(e, t) {
   const r = Ql(e, t);
   return r.activate(), () => r.deactivate();
 }
-var J = !1, lt = !1;
+var Q = !1, lt = !1;
 function Vr() {
   lt || (lt = !0, document.addEventListener("keydown", () => {
-    J = !0;
+    Q = !0;
   }, !0), document.addEventListener("mousedown", () => {
-    J = !1;
+    Q = !1;
   }, !0), document.addEventListener("pointerdown", () => {
-    J = !1;
+    Q = !1;
   }, !0));
 }
 function dn() {
-  return Vr(), J;
+  return Vr(), Q;
 }
 function cn(e, t = "focus-visible") {
   Vr();
   function r() {
-    J && e.classList.add(t);
+    Q && e.classList.add(t);
   }
   function l() {
     e.classList.remove(t);
@@ -6663,12 +6687,12 @@ var gt = class {
     const t = this.elementRef.shadowRoot?.querySelector(".ml-select__trigger"), r = this.getDropdownEl();
     if (!t || !r) return;
     r.style.width = `${t.offsetWidth}px`;
-    const { x: l, y: a } = te(t, r, {
+    const { x: l, y: a } = re(t, r, {
       placement: "bottom-start",
       middleware: [
-        re(4),
-        le(),
-        ae({ padding: 8 })
+        le(4),
+        ae(),
+        oe({ padding: 8 })
       ]
     });
     r.style.left = `${l}px`, r.style.top = `${a}px`;
@@ -7944,12 +7968,12 @@ var xt = class {
     this._cleanupAutoUpdate?.(), this._cleanupAutoUpdate = Me(t, r, l);
   }
   updatePosition(t, r) {
-    const { x: l, y: a } = te(t, r, {
+    const { x: l, y: a } = re(t, r, {
       placement: "bottom-start",
       middleware: [
-        re(4),
-        le(),
-        ae({ padding: 8 })
+        le(4),
+        ae(),
+        oe({ padding: 8 })
       ]
     });
     r.style.left = `${l}px`, r.style.top = `${a}px`;
@@ -8199,7 +8223,7 @@ var kt = class {
     return this._containerEl && document.body.contains(this._containerEl) ? this._containerEl : (this._containerEl = document.createElement("ml-toast-container"), this._containerEl.setAttribute("position", this._position), document.body.appendChild(this._containerEl), this._containerEl);
   }
 };
-kt = g([Z()], kt);
+kt = g([ee()], kt);
 function Wa(e) {
   return i`
 		<div
@@ -16772,7 +16796,7 @@ var Ki = class {
   onBackdropClick(e) {
     e.target === this._dialogEl && !this._disableClose && this.close();
   }
-}, Q = class {
+}, Z = class {
   constructor() {
     this._dialogs = /* @__PURE__ */ new Map();
   }
@@ -16811,7 +16835,7 @@ var Ki = class {
     t.remove();
   }
 };
-Q = g([Z()], Q);
+Z = g([ee()], Z);
 var nr, Te = class {
   constructor() {
     this._dialogID = ea(), this._registered = !1;
@@ -16837,7 +16861,7 @@ var nr, Te = class {
     return this.elementRef.getAttributeNames().find((t) => t.startsWith("#"))?.slice(1) ?? this._dialogID;
   }
 };
-g([H(Q), j("design:type", typeof (nr = typeof Q < "u" && Q) == "function" ? nr : Object)], Te.prototype, "_dialogService", void 0);
+g([H(Z), j("design:type", typeof (nr = typeof Z < "u" && Z) == "function" ? nr : Object)], Te.prototype, "_dialogService", void 0);
 Te = g([_({
   selector: "ml-dialog",
   template: Bi,
@@ -17356,15 +17380,15 @@ var cr = class {
   }
   updatePosition(t, r) {
     const l = this.arrow ? this.elementRef.shadowRoot?.querySelector(".ml-dropdown__arrow") : null, a = [
-      re(this.offset),
-      le(),
-      ae({ padding: 8 })
+      le(this.offset),
+      ae(),
+      oe({ padding: 8 })
     ];
     l && a.push(Nr({
       element: l,
       padding: 8
     }));
-    const { x: o, y: s, placement: n, middlewareData: c } = te(t, r, {
+    const { x: o, y: s, placement: n, middlewareData: c } = re(t, r, {
       placement: this.placement,
       middleware: a
     });
@@ -17668,12 +17692,12 @@ var pr = class {
   updatePosition() {
     const t = this.elementRef.shadowRoot?.querySelector(".ml-tooltip__trigger"), r = this.elementRef.shadowRoot?.querySelector(".ml-tooltip__content"), l = this.elementRef.shadowRoot?.querySelector(".ml-tooltip__arrow");
     if (!t || !r) return;
-    const { x: a, y: o, placement: s } = te(t, r, {
+    const { x: a, y: o, placement: s } = re(t, r, {
       placement: this.placement,
       middleware: [
-        re(8),
-        le(),
-        ae({ padding: 8 })
+        le(8),
+        ae(),
+        oe({ padding: 8 })
       ]
     });
     if (r.style.left = `${a}px`, r.style.top = `${o}px`, r.setAttribute("data-placement", s), l) {
@@ -17824,15 +17848,15 @@ var vr = class {
   }
   updatePosition(t, r) {
     const l = this.arrow ? this.elementRef.shadowRoot?.querySelector(".ml-popover__arrow") : null, a = [
-      re(this.offset),
-      le(),
-      ae({ padding: 8 })
+      le(this.offset),
+      ae(),
+      oe({ padding: 8 })
     ];
     l && a.push(Nr({
       element: l,
       padding: 8
     }));
-    const { x: o, y: s, placement: n, middlewareData: c } = te(t, r, {
+    const { x: o, y: s, placement: n, middlewareData: c } = re(t, r, {
       placement: this.placement,
       middleware: a
     });
@@ -19253,7 +19277,7 @@ export {
   xt as DatePickerComponent,
   Te as DialogComponent,
   Ki as DialogRef,
-  Q as DialogService,
+  Z as DialogService,
   Hs as Directive,
   Rt as DividerComponent,
   dr as DrawerComponent,
@@ -19273,7 +19297,7 @@ export {
   qe as HttpError,
   Ut as IconComponent,
   fs as Inject,
-  Z as Injectable,
+  ee as Injectable,
   Gr as InjectionEngine,
   L as Injector,
   nt as InputComponent,
@@ -19358,7 +19382,7 @@ export {
   gn as clickOutside,
   Ml as colorTokens,
   vn as componentBaseStyles,
-  te as computePosition,
+  re as computePosition,
   z as computed,
   no as containerStyles,
   so as containerTemplate,
@@ -19375,7 +19399,7 @@ export {
   Cs as createResolver,
   Ns as createState,
   Or as createTheme,
-  ee as createToken,
+  te as createToken,
   Us as createValidator,
   y as css,
   et as darkTheme,
@@ -19396,7 +19420,7 @@ export {
   Ui as dropdownTemplate,
   tl as environment,
   sl as findRouteByName,
-  le as flip,
+  ae as flip,
   on as focusFirst,
   sn as focusLast,
   nn as focusTrap,
@@ -19419,7 +19443,7 @@ export {
   ns as heroSectionTemplate,
   i as html,
   ln as injectTheme,
-  oe as isDirective,
+  Y as isDirective,
   dn as isFocusVisible,
   Ur as isSignal,
   Bl as lightTheme,
@@ -19432,7 +19456,7 @@ export {
   us as loginPageTemplate,
   ye as matchRouteTree,
   ea as newID,
-  re as offset,
+  le as offset,
   Ls as onAction,
   tn as onThemeChange,
   ms as pageHeaderStyles,
@@ -19457,7 +19481,7 @@ export {
   Ea as selectTemplate,
   Ye as setActiveEffect,
   Nl as shadowTokens,
-  ae as shift,
+  oe as shift,
   ki as sidebarGroupStyles,
   wi as sidebarGroupTemplate,
   Ci as sidebarItemStyles,

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

@@ -0,0 +1,12 @@
+import type { IElementRef } from '@melodicdev/core';
+import type { Size } from '../../../types/index.js';
+import type { FileIconColor } from './file-upload.types.js';
+export declare class FileIconComponent implements IElementRef {
+    elementRef: HTMLElement;
+    extension: string;
+    color: FileIconColor | '';
+    size: Size;
+    get resolvedColor(): FileIconColor;
+    get displayExtension(): string;
+}
+//# sourceMappingURL=file-icon.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-icon.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-icon.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK5D,qBAMa,iBAAkB,YAAW,WAAW;IACpD,UAAU,EAAG,WAAW,CAAC;IAEzB,SAAS,SAAM;IACf,KAAK,EAAE,aAAa,GAAG,EAAE,CAAM;IAC/B,IAAI,EAAE,IAAI,CAAQ;IAElB,IAAI,aAAa,IAAI,aAAa,CAGjC;IAED,IAAI,gBAAgB,IAAI,MAAM,CAE7B;CACD"}

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

@@ -0,0 +1,34 @@
+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 { getColorForExtension } from './file-upload.types.js';
+import { fileIconTemplate } from './file-icon.template.js';
+import { fileIconStyles } from './file-icon.styles.js';
+let FileIconComponent = class FileIconComponent {
+    constructor() {
+        this.extension = '';
+        this.color = '';
+        this.size = 'md';
+    }
+    get resolvedColor() {
+        if (this.color)
+            return this.color;
+        return this.extension ? getColorForExtension(this.extension) : 'gray';
+    }
+    get displayExtension() {
+        return this.extension.toUpperCase();
+    }
+};
+FileIconComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-file-icon',
+        template: fileIconTemplate,
+        styles: fileIconStyles,
+        attributes: ['extension', 'color', 'size']
+    })
+], FileIconComponent);
+export { FileIconComponent };

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

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

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

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

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

@@ -0,0 +1,124 @@
+import { css } from '@melodicdev/core';
+export const fileIconStyles = () => css `
+	:host {
+		display: inline-flex;
+	}
+
+	.ml-file-icon {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+	}
+
+	.ml-file-icon__svg {
+		display: block;
+	}
+
+	.ml-file-icon__body {
+		fill: var(--ml-color-surface);
+		stroke: var(--ml-color-border);
+		stroke-width: 1;
+	}
+
+	.ml-file-icon__fold {
+		fill: var(--ml-color-border);
+		opacity: 0.6;
+	}
+
+	.ml-file-icon__badge {
+		position: absolute;
+		bottom: 4px;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 8px;
+		font-weight: var(--ml-font-bold, 700);
+		font-family: var(--ml-font-sans);
+		letter-spacing: 0.02em;
+		line-height: 1;
+		padding: 2px 4px;
+		border-radius: var(--ml-radius-xs);
+		color: white;
+		white-space: nowrap;
+	}
+
+	/* Sizes */
+	.ml-file-icon--sm .ml-file-icon__svg {
+		width: 24px;
+		height: 28px;
+	}
+
+	.ml-file-icon--sm .ml-file-icon__badge {
+		font-size: 6px;
+		padding: 1px 3px;
+		bottom: 2px;
+	}
+
+	.ml-file-icon--md .ml-file-icon__svg {
+		width: 32px;
+		height: 38px;
+	}
+
+	.ml-file-icon--md .ml-file-icon__badge {
+		font-size: 7px;
+		padding: 2px 4px;
+		bottom: 3px;
+	}
+
+	.ml-file-icon--lg .ml-file-icon__svg {
+		width: 40px;
+		height: 48px;
+	}
+
+	.ml-file-icon--lg .ml-file-icon__badge {
+		font-size: 8px;
+		padding: 2px 5px;
+		bottom: 4px;
+	}
+
+	.ml-file-icon--xs .ml-file-icon__svg {
+		width: 20px;
+		height: 24px;
+	}
+
+	.ml-file-icon--xs .ml-file-icon__badge {
+		font-size: 5px;
+		padding: 1px 2px;
+		bottom: 2px;
+	}
+
+	.ml-file-icon--xl .ml-file-icon__svg {
+		width: 48px;
+		height: 58px;
+	}
+
+	.ml-file-icon--xl .ml-file-icon__badge {
+		font-size: 10px;
+		padding: 2px 6px;
+		bottom: 6px;
+	}
+
+	/* Color variants */
+	.ml-file-icon--red .ml-file-icon__badge {
+		background-color: var(--ml-color-danger);
+	}
+
+	.ml-file-icon--green .ml-file-icon__badge {
+		background-color: var(--ml-color-success);
+	}
+
+	.ml-file-icon--blue .ml-file-icon__badge {
+		background-color: var(--ml-color-primary);
+	}
+
+	.ml-file-icon--purple .ml-file-icon__badge {
+		background-color: var(--ml-purple-600, #7c3aed);
+	}
+
+	.ml-file-icon--amber .ml-file-icon__badge {
+		background-color: var(--ml-color-warning);
+	}
+
+	.ml-file-icon--gray .ml-file-icon__badge {
+		background-color: var(--ml-color-text-muted);
+	}
+`;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-icon.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-icon.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CAmBpD"}

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

@@ -0,0 +1,18 @@
+import { html, classMap, when } from '@melodicdev/core';
+export function fileIconTemplate(c) {
+    return html `
+		<div class=${classMap({
+        'ml-file-icon': true,
+        [`ml-file-icon--${c.size}`]: true,
+        [`ml-file-icon--${c.resolvedColor}`]: true
+    })}>
+			<svg viewBox="0 0 40 48" fill="none" class="ml-file-icon__svg">
+				<!-- Document body -->
+				<path d="M0 4C0 1.79 1.79 0 4 0H24L40 16V44C40 46.21 38.21 48 36 48H4C1.79 48 0 46.21 0 44V4Z" class="ml-file-icon__body" />
+				<!-- Folded corner -->
+				<path d="M24 0L40 16H28C25.79 16 24 14.21 24 12V0Z" class="ml-file-icon__fold" />
+			</svg>
+			${when(!!c.extension, () => html `<span class="ml-file-icon__badge">${c.displayExtension}</span>`)}
+		</div>
+	`;
+}

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"}