@melodicdev/components 1.0.9 → 1.0.11

package/assets/melodic-components.min.js

@@ -211,18 +211,18 @@ var Xr = async () => {
   if (e.length !== 0)
     for (const t of e) {
       if (t instanceof HTMLStyleElement) {
-        je(t.textContent ?? "");
+        Fe(t.textContent ?? "");
         continue;
       }
       t instanceof HTMLLinkElement && (t.sheet || await new Promise((r) => {
         t.addEventListener("load", () => r(), { once: !0 });
-      }), je(Array.from(t.sheet?.cssRules ?? []).map((r) => r.cssText).join(`
+      }), Fe(Array.from(t.sheet?.cssRules ?? []).map((r) => r.cssText).join(`
 `)));
     }
 }, Ve = (e) => {
   const t = e.adoptedStyleSheets ?? [], r = Te.filter((l) => !t.includes(l));
   r.length > 0 && (e.adoptedStyleSheets = [...t, ...r]);
-}, je = (e) => {
+}, Fe = (e) => {
   const t = e.trim();
   if (t.length > 0) {
     const r = new CSSStyleSheet();
@@ -379,7 +379,7 @@ var ze = class $r extends Error {
   constructor(t, r, l) {
     super(t), this.config = r, this.code = l, this.name = "HttpBaseError", Object.setPrototypeOf(this, $r.prototype);
   }
-}, Fe = class Cr extends ze {
+}, je = class Cr extends ze {
   constructor(t, r, l) {
     super(t, l, `HTTP_${r.status}`), this.response = r, this.name = "HttpError", Object.setPrototypeOf(this, Cr.prototype);
   }
@@ -535,10 +535,10 @@ var ze = class $r extends Error {
         headers: r.headers,
         config: e
       };
-      if (!r.ok) throw new Fe(`HTTP Error: ${r.status} ${r.statusText}`, l, e);
+      if (!r.ok) throw new je(`HTTP Error: ${r.status} ${r.statusText}`, l, e);
       return l;
     }).catch((r) => {
-      throw r instanceof Fe ? r : r instanceof Error && r.name === "AbortError" ? new ll("Request aborted", e) : new rl((r instanceof Error ? r.message : "Network error") || "Network error", e);
+      throw r instanceof je ? r : r instanceof Error && r.name === "AbortError" ? new ll("Request aborted", e) : new rl((r instanceof Error ? r.message : "Network error") || "Network error", e);
     });
     return e.deduplicate === !0 && this._requestManager.addPendingRequest(e, t), await t;
   }
@@ -853,7 +853,7 @@ var ye = class {
   }
 };
 ye = g([Z()], ye);
-function j(e, t) {
+function F(e, t) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }
 var Ae = (e, t, r, l) => new PopStateEvent("History", { state: {
@@ -1100,7 +1100,7 @@ var V = class {
     };
   }
 };
-V = g([Z(), j("design:paramtypes", [])], V);
+V = g([Z(), F("design:paramtypes", [])], V);
 var W = /* @__PURE__ */ new Map(), Tr = (e) => {
   if (W.has(e)) return W.get(e);
   const t = e.toLowerCase();
@@ -1789,7 +1789,7 @@ var We, Ge = "melodic:outlet-register", xe = class {
     t?.component ? await this.renderComponent(t.component) : this._depth === 0 && this._router.navigate("/404", { replace: !0 });
   }
 };
-g([H(V), j("design:type", typeof (We = typeof V < "u" && V) == "function" ? We : Object)], xe.prototype, "_router", void 0);
+g([H(V), F("design:type", typeof (We = typeof V < "u" && V) == "function" ? We : Object)], xe.prototype, "_router", void 0);
 xe = g([_({
   selector: "router-outlet",
   template: () => i`<slot></slot>`
@@ -1851,7 +1851,7 @@ var Ue, we = class {
     this.exactMatch ? o = l === a : o = l === a || l.startsWith(a + "/"), o ? (this.elementRef.classList.add(this.activeClass), this._anchorElement?.setAttribute("aria-current", "page")) : (this.elementRef.classList.remove(this.activeClass), this._anchorElement?.removeAttribute("aria-current"));
   }
 };
-g([H(V), j("design:type", typeof (Ue = typeof V < "u" && V) == "function" ? Ue : Object)], we.prototype, "_router", void 0);
+g([H(V), F("design:type", typeof (Ue = typeof V < "u" && V) == "function" ? Ue : Object)], we.prototype, "_router", void 0);
 we = g([_({
   selector: "router-link",
   template: () => i`<a part="link"><slot></slot></a>`,
@@ -2035,7 +2035,7 @@ var pl = class {
       });
     });
   }
-}, F = class {
+}, j = class {
   constructor() {
     this._debug && console.info("RX State Debugging: Enabled");
   }
@@ -2113,14 +2113,14 @@ var pl = class {
     return Object.keys(this._state).reduce((t, r) => (t[r] = this._state[r](), t), {});
   }
 };
-g([H(ke), j("design:type", Object)], F.prototype, "_state", void 0);
-g([H($e), j("design:type", Object)], F.prototype, "_reducerMap", void 0);
-g([H(Ce), 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);
+g([H(ke), F("design:type", Object)], j.prototype, "_state", void 0);
+g([H($e), F("design:type", Object)], j.prototype, "_reducerMap", void 0);
+g([H(Ce), F("design:type", Object)], j.prototype, "_effectMap", void 0);
+g([H(Ir), F("design:type", Boolean)], j.prototype, "_debug", void 0);
+j = g([Z(), F("design:paramtypes", [])], j);
 function Vs(e, t, r, l = !1) {
   return (a) => {
-    a.bindValue(ke, e), a.bindValue($e, t), a.bindValue(Ce, r), a.bindValue(Ir, l), a.bind(F, F, { dependencies: [
+    a.bindValue(ke, e), a.bindValue($e, t), a.bindValue(Ce, r), a.bindValue(Ir, l), a.bind(j, j, { dependencies: [
       ke,
       $e,
       Ce
@@ -2371,7 +2371,7 @@ function xl(e) {
     a[s] = o, o = t[o];
   return a;
 }
-function js(e, t, r) {
+function Fs(e, t, r) {
   return U((l, a) => {
     if (!a) {
       const o = l.parentNode;
@@ -2508,7 +2508,7 @@ function G(e) {
     return a;
   });
 }
-function Fs(e) {
+function js(e) {
   return U((t, r) => {
     if (!r) {
       const l = t.parentNode;
@@ -3255,7 +3255,7 @@ const Dl = {
   lg: 1024,
   xl: 1280,
   "2xl": 1536
-}, jl = {
+}, Fl = {
   ...Dl,
   ...Il,
   ...Ml,
@@ -3265,7 +3265,7 @@ const Dl = {
   ...Ll,
   ...Vl
 };
-function Fl(e) {
+function jl(e) {
   return Object.entries(e).map(([t, r]) => `${t}: ${r};`).join(`
 	`);
 }
@@ -3372,7 +3372,7 @@ const ql = {
 		color-scheme: dark;
 	}
 }`, Js = `:root {
-	${Fl(jl)}
+	${jl(Fl)}
 
 	/* Default to light color scheme */
 	color-scheme: light;
@@ -3956,7 +3956,7 @@ function pn(e, t) {
     document.removeEventListener("click", r, !0);
   };
 }
-var jr = class {
+var Fr = class {
   constructor() {
     this._viewport = null, this._resizeObserver = null, this._options = null, this._handleScroll = () => {
       this._compute(this._viewport.clientHeight);
@@ -7709,7 +7709,7 @@ function Va(e) {
 		</div>
 	`;
 }
-const ja = () => y`
+const Fa = () => y`
 	:host {
 		display: block;
 	}
@@ -7861,7 +7861,7 @@ const ja = () => y`
 		color: var(--ml-color-danger);
 	}
 `;
-var Fa = [
+var ja = [
   "Jan",
   "Feb",
   "Mar",
@@ -7880,7 +7880,7 @@ function qa(e) {
   const t = e.split("-");
   if (t.length !== 3) return e;
   const r = parseInt(t[1], 10) - 1, l = parseInt(t[2], 10), a = parseInt(t[0], 10);
-  return `${Fa[r]} ${l}, ${a}`;
+  return `${ja[r]} ${l}, ${a}`;
 }
 var xt = class {
   constructor() {
@@ -7952,7 +7952,7 @@ var xt = class {
 xt = g([_({
   selector: "ml-date-picker",
   template: Va,
-  styles: ja,
+  styles: Fa,
   attributes: [
     "value",
     "placeholder",
@@ -10707,7 +10707,7 @@ const Eo = () => y`
 `;
 var Vt = class {
   constructor() {
-    this.hasFooter = !1, this.hasHeaderActions = !1, this.selectable = !1, this.striped = !1, this.hoverable = !0, this.stickyHeader = !1, this.size = "md", this.tableTitle = "", this.description = "", this.virtual = !1, this.columns = [], this.rows = [], this.sortKey = "", this.sortDirection = "asc", this.selectedIndices = [], this.startIndex = 0, this.endIndex = 50, this._scroller = new jr(), this._viewport = null, this.isRowSelected = (t) => this.selectedIndices.includes(t), this.handleSort = (t) => {
+    this.hasFooter = !1, this.hasHeaderActions = !1, this.selectable = !1, this.striped = !1, this.hoverable = !0, this.stickyHeader = !1, this.size = "md", this.tableTitle = "", this.description = "", this.virtual = !1, this.columns = [], this.rows = [], this.sortKey = "", this.sortDirection = "asc", this.selectedIndices = [], this.startIndex = 0, this.endIndex = 50, this._scroller = new Fr(), this._viewport = null, this.isRowSelected = (t) => this.selectedIndices.includes(t), this.handleSort = (t) => {
       t.sortable && (this.sortKey === t.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = t.key, this.sortDirection = "asc"), this.selectedIndices = [], this._scroller.invalidate(), this.elementRef.dispatchEvent(new CustomEvent("ml:sort", {
         bubbles: !0,
         composed: !0,
@@ -11522,9 +11522,9 @@ const zo = () => y`
 		cursor: not-allowed;
 	}
 `;
-var jt = class {
+var Ft = class {
   constructor() {
-    this.selectable = !1, this.striped = !1, this.hoverable = !0, this.size = "md", this.gridTitle = "", this.description = "", this.serverSide = !1, this.pageSize = 50, this.virtual = !0, this.showFilterRow = !1, this.columns = [], this.rows = [], this.sortKey = "", this.sortDirection = "asc", this.filters = {}, this.selectedIndices = [], this.currentPage = 1, this.startIndex = 0, this.endIndex = 50, this.colWidths = {}, this.colOrder = [], this.resizingKey = null, this.draggingKey = null, this.dragOverKey = null, this._scroller = new jr(), this._viewport = null, this._resizeStartX = 0, this._resizeStartWidth = 0, this.isRowSelected = (t) => this.selectedIndices.includes(t), this.handleSort = (t) => {
+    this.selectable = !1, this.striped = !1, this.hoverable = !0, this.size = "md", this.gridTitle = "", this.description = "", this.serverSide = !1, this.pageSize = 50, this.virtual = !0, this.showFilterRow = !1, this.columns = [], this.rows = [], this.sortKey = "", this.sortDirection = "asc", this.filters = {}, this.selectedIndices = [], this.currentPage = 1, this.startIndex = 0, this.endIndex = 50, this.colWidths = {}, this.colOrder = [], this.resizingKey = null, this.draggingKey = null, this.dragOverKey = null, this._scroller = new Fr(), this._viewport = null, this._resizeStartX = 0, this._resizeStartWidth = 0, this.isRowSelected = (t) => this.selectedIndices.includes(t), this.handleSort = (t) => {
       t.sortable && (this.sortKey === t.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = t.key, this.sortDirection = "asc"), this.currentPage = 1, this._scroller.invalidate(), this.elementRef.dispatchEvent(new CustomEvent("ml:sort", {
         bubbles: !0,
         composed: !0,
@@ -11729,7 +11729,7 @@ var jt = class {
     }));
   }
 };
-jt = g([_({
+Ft = g([_({
   selector: "ml-data-grid",
   template: To,
   styles: zo,
@@ -11745,7 +11745,7 @@ jt = g([_({
     "virtual",
     "show-filter-row"
   ]
-})], jt);
+})], Ft);
 var Ao = [
   "January",
   "February",
@@ -11772,7 +11772,7 @@ var Ao = [
   "Oct",
   "Nov",
   "Dec"
-], Fr = [
+], jr = [
   "Sunday",
   "Monday",
   "Tuesday",
@@ -11792,7 +11792,7 @@ var Ao = [
 function N(e, t, r) {
   return `${e}-${String(t + 1).padStart(2, "0")}-${String(r).padStart(2, "0")}`;
 }
-function Ft(e) {
+function jt(e) {
   const [t, r, l] = e.split("T")[0].split("-").map(Number);
   return new Date(t, r - 1, l);
 }
@@ -11881,7 +11881,7 @@ function Kt(e = 0) {
     const l = (e + r) % 7;
     return {
       short: Pe[l],
-      full: Fr[l]
+      full: jr[l]
     };
   });
 }
@@ -11892,7 +11892,7 @@ function Oo(e) {
   return Ee[e.getMonth()];
 }
 function No(e) {
-  return Fr[e.getDay()];
+  return jr[e.getDay()];
 }
 function M(e) {
   const t = new Date(e);
@@ -11968,7 +11968,7 @@ function Vo(e, t, r) {
     };
   });
 }
-function jo(e, t) {
+function Fo(e, t) {
   const r = N(e.getFullYear(), e.getMonth(), e.getDate()), l = ue(t, r).filter((a) => !a.allDay);
   return {
     date: r,
@@ -11978,7 +11978,7 @@ function jo(e, t) {
     events: Hr(l)
   };
 }
-function Fo(e, t, r) {
+function jo(e, t, r) {
   const l = /* @__PURE__ */ new Set(), a = new Date(e, t + 1, 0).getDate();
   for (let o = 1; o <= a; o++) {
     const s = N(e, t, o);
@@ -13203,7 +13203,7 @@ var Gt = class {
     }, this.miniCalNextMonth = () => {
       this._miniCalMonth === 11 ? (this._miniCalMonth = 0, this._miniCalYear++) : this._miniCalMonth++;
     }, this.handleMiniCalSelect = (t) => {
-      this.setDate(Ft(t));
+      this.setDate(jt(t));
     };
   }
   /** Check if header-left slot has consumer content */
@@ -13215,7 +13215,7 @@ var Gt = class {
     return this.elementRef?.querySelector('[slot="header-actions"]') !== null;
   }
   get _currentDate() {
-    return this.date ? Ft(this.date) : /* @__PURE__ */ new Date();
+    return this.date ? jt(this.date) : /* @__PURE__ */ new Date();
   }
   onCreate() {
     if (!this.date) {
@@ -13281,7 +13281,7 @@ var Gt = class {
     return Lo();
   }
   get dayColumn() {
-    return jo(this._currentDate, this.events);
+    return Fo(this._currentDate, this.events);
   }
   get dayEvents() {
     return ue(this.events, this.currentIsoDate);
@@ -13303,7 +13303,7 @@ var Gt = class {
     return Ht(this._miniCalYear, this._miniCalMonth, this.weekStartsOn);
   }
   get miniCalendarDots() {
-    return Fo(this._miniCalYear, this._miniCalMonth, this.events);
+    return jo(this._miniCalYear, this._miniCalMonth, this.events);
   }
   setDate(t) {
     this.date = N(t.getFullYear(), t.getMonth(), t.getDate()), this._miniCalYear = t.getFullYear(), this._miniCalMonth = t.getMonth(), this.elementRef.dispatchEvent(new CustomEvent("ml:date-change", {
@@ -16490,7 +16490,7 @@ function Vi(e) {
 		</div>
 	`;
 }
-const ji = () => y`
+const Fi = () => y`
 	:host {
 		display: block;
 	}
@@ -16511,10 +16511,10 @@ var sr = class {
 sr = g([_({
   selector: "ml-step-panel",
   template: Vi,
-  styles: ji,
+  styles: Fi,
   attributes: ["value"]
 })], sr);
-const Fi = () => i`<dialog class="ml-dialog">
+const ji = () => i`<dialog class="ml-dialog">
 		<div class="ml-dialog-header">
 			<slot name="dialog-header"></slot>
 		</div>
@@ -16766,8 +16766,34 @@ var Bi = class {
       const o = this.mountDialog(t);
       l = ((o.shadowRoot?.querySelector("ml-dialog")).shadowRoot?.querySelector("dialog")).id, a = this._dialogs.get(l), a.dialogComponent = o, r && a.dialogRef.applyConfig(r), o.component.onDialogRefSet?.(a.dialogRef);
     }
+    if (!a) {
+      const o = this.findDialogElement(l);
+      if (o && (o.open(), a = this._dialogs.get(l)), !a) throw new Error(`Dialog "${l}" not found. Ensure an <ml-dialog #${l}> exists in the DOM.`);
+      return a.dialogRef;
+    }
     return a.dialogRef.open(), a.dialogRef;
   }
+  findDialogElement(t) {
+    const r = document.querySelectorAll("ml-dialog");
+    for (const l of r) if (l.hasAttribute(`#${t}`)) return l;
+    return this.deepFindDialog(document.body, t);
+  }
+  deepFindDialog(t, r) {
+    const l = t.shadowRoot;
+    if (l) {
+      const a = l.querySelector(`ml-dialog[\\#${r}]`);
+      if (a) return a;
+      for (const o of l.querySelectorAll("*")) {
+        const s = this.deepFindDialog(o, r);
+        if (s) return s;
+      }
+    }
+    for (const a of t.querySelectorAll("*")) if (a.shadowRoot) {
+      const o = this.deepFindDialog(a, r);
+      if (o) return o;
+    }
+    return null;
+  }
   close(t, r) {
     this._dialogs.has(t) && this._dialogs.get(t).dialogRef.close(r);
   }
@@ -16787,12 +16813,6 @@ var nr, Re = class {
   constructor() {
     this._dialogID = Zl(), this._registered = !1;
   }
-  onCreate() {
-    this.registerDialog();
-  }
-  onRender() {
-    this.registerDialog();
-  }
   registerDialog() {
     if (this._registered) return;
     const t = this.elementRef.shadowRoot?.querySelector("dialog");
@@ -16802,7 +16822,7 @@ var nr, Re = class {
     this._dialogService.removeDialog(this._dialogID);
   }
   open() {
-    this._dialogRef.open();
+    this.registerDialog(), this._dialogRef.open();
   }
   close(t) {
     this._dialogRef.close(t);
@@ -16811,10 +16831,10 @@ var nr, Re = 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)], Re.prototype, "_dialogService", void 0);
+g([H(Q), F("design:type", typeof (nr = typeof Q < "u" && Q) == "function" ? nr : Object)], Re.prototype, "_dialogService", void 0);
 Re = g([_({
   selector: "ml-dialog",
-  template: Fi,
+  template: ji,
   styles: qi,
   attributes: []
 })], Re);
@@ -19244,7 +19264,7 @@ export {
   br as HeroSectionComponent,
   ze as HttpBaseError,
   qe as HttpClient,
-  Fe as HttpError,
+  je as HttpError,
   Ut as IconComponent,
   gs as Inject,
   Z as Injectable,
@@ -19282,7 +19302,7 @@ export {
   rr as SidebarGroupComponent,
   lr as SidebarItemComponent,
   Dr as SignalEffect,
-  F as SignalStoreService,
+  j as SignalStoreService,
   yr as SignupPageComponent,
   bt as SliderComponent,
   at as SpinnerComponent,
@@ -19303,12 +19323,12 @@ export {
   vt as ToggleComponent,
   pr as TooltipComponent,
   Ks as Validators,
-  jr as VirtualScroller,
+  Fr as VirtualScroller,
   $o as activityFeedItemStyles,
   ko as activityFeedItemTemplate,
   wo as activityFeedStyles,
   xo as activityFeedTemplate,
-  jl as allTokens,
+  Fl as allTokens,
   dn as announce,
   os as appShellStyles,
   as as appShellTemplate,
@@ -19424,7 +19444,7 @@ export {
   he as registerAttributeDirective,
   Ne as render,
   $ as repeat,
-  js as repeatRaw,
+  Fs as repeatRaw,
   mn as resetStyles,
   hl as routerLinkDirective,
   za as selectStyles,
@@ -19444,7 +19464,7 @@ export {
   Da as sliderStyles,
   Aa as sliderTemplate,
   Ml as spacingTokens,
-  ji as stepPanelStyles,
+  Fi as stepPanelStyles,
   Vi as stepPanelTemplate,
   Li as stepStyles,
   Ai as stepTemplate,
@@ -19464,12 +19484,12 @@ export {
   Wa as toastStyles,
   Ka as toastTemplate,
   en as toggleTheme,
-  Fl as tokensToCss,
+  jl as tokensToCss,
   ta as tooltipDirective,
   Ll as transitionTokens,
   Pl as typographyTokens,
   Rs as unregisterAttributeDirective,
-  Fs as unsafeHTML,
+  js as unsafeHTML,
   un as visuallyHiddenStyles,
   d as when
 };

package/lib/components/overlays/dialog/dialog.component.d.ts

@@ -1,13 +1,11 @@
-import type { OnCreate, OnDestroy, OnRender, IElementRef } from '@melodicdev/core';
-export declare class DialogComponent implements IElementRef, OnCreate, OnDestroy, OnRender {
+import type { OnDestroy, IElementRef } from '@melodicdev/core';
+export declare class DialogComponent implements IElementRef, OnDestroy {
     elementRef: HTMLElement;
     private readonly _dialogService;
     private _dialogID;
     private _dialogEl;
     private _dialogRef;
     private _registered;
-    onCreate(): void;
-    onRender(): void;
     private registerDialog;
     onDestroy(): void;
     open(): void;

package/lib/components/overlays/dialog/dialog.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.component.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKnF,qBAMa,eAAgB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC1E,UAAU,EAAG,WAAW,CAAC;IAGhC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEhD,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAS;IAE5B,QAAQ,IAAI,IAAI;IAIhB,QAAQ,IAAI,IAAI;IAIhB,OAAO,CAAC,cAAc;IAatB,SAAS,IAAI,IAAI;IAIjB,IAAI,IAAI,IAAI;IAIZ,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI;IAIpC,OAAO,CAAC,cAAc;CAQtB"}
+{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.component.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/D,qBAMa,eAAgB,YAAW,WAAW,EAAE,SAAS;IACtD,UAAU,EAAG,WAAW,CAAC;IAGhC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEhD,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,cAAc;IAatB,SAAS,IAAI,IAAI;IAIjB,IAAI,IAAI,IAAI;IAKZ,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI;IAIpC,OAAO,CAAC,cAAc;CAQtB"}

package/lib/components/overlays/dialog/dialog.component.js

@@ -17,12 +17,6 @@ let DialogComponent = class DialogComponent {
         this._dialogID = newID();
         this._registered = false;
     }
-    onCreate() {
-        this.registerDialog();
-    }
-    onRender() {
-        this.registerDialog();
-    }
     registerDialog() {
         if (this._registered)
             return;
@@ -39,6 +33,7 @@ let DialogComponent = class DialogComponent {
         this._dialogService.removeDialog(this._dialogID);
     }
     open() {
+        this.registerDialog();
         this._dialogRef.open();
     }
     close(result) {

package/lib/components/overlays/dialog/dialog.service.d.ts

@@ -7,6 +7,8 @@ export declare class DialogService {
     removeDialog(dialogID: UniqueID): void;
     open<TResult = unknown, TData = unknown>(dialogComponent: new (...args: any[]) => any, config?: IDialogConfig<TData>): DialogRef<TResult, TData>;
     open<TResult = unknown, TData = unknown>(dialogID: UniqueID): DialogRef<TResult, TData>;
+    private findDialogElement;
+    private deepFindDialog;
     close<T = unknown>(dialogID: UniqueID, result?: T): void;
     private cleanUpDialog;
     private mountDialog;

package/lib/components/overlays/dialog/dialog.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.service.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAW/D,qBACa,aAAa;IACzB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAwC;IAEjE,SAAS,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,GAAG,SAAS;IAerE,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAItC,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,eAAe,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,MAAM,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC;IAChJ,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC;IA2BvF,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI;IAOxD,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;CAGrB"}
+{"version":3,"file":"dialog.service.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAW/D,qBACa,aAAa;IACzB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAwC;IAEjE,SAAS,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,GAAG,SAAS;IAerE,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAItC,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,eAAe,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,MAAM,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC;IAChJ,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC;IA4CvF,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,cAAc;IAuBtB,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI;IAOxD,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;CAGrB"}

package/lib/components/overlays/dialog/dialog.service.js

@@ -40,9 +40,54 @@ let DialogService = class DialogService {
             }
             dialogComponent.component.onDialogRefSet?.(dialogElements.dialogRef);
         }
+        // Lazy resolution: if the dialog wasn't registered during lifecycle hooks
+        // (e.g. nested router-outlet), find it in the DOM and trigger registration.
+        if (!dialogElements) {
+            const mlDialog = this.findDialogElement(dialogID);
+            if (mlDialog) {
+                mlDialog.open();
+                dialogElements = this._dialogs.get(dialogID);
+            }
+            if (!dialogElements) {
+                throw new Error(`Dialog "${dialogID}" not found. Ensure an <ml-dialog #${dialogID}> exists in the DOM.`);
+            }
+            return dialogElements.dialogRef;
+        }
         dialogElements.dialogRef.open();
         return dialogElements.dialogRef;
     }
+    findDialogElement(dialogID) {
+        // Search through all shadow roots for the ml-dialog with the matching # attribute
+        const allDialogs = document.querySelectorAll('ml-dialog');
+        for (const dialog of allDialogs) {
+            if (dialog.hasAttribute(`#${dialogID}`)) {
+                return dialog;
+            }
+        }
+        // Deep search through shadow roots
+        return this.deepFindDialog(document.body, dialogID);
+    }
+    deepFindDialog(root, dialogID) {
+        const shadowRoot = root.shadowRoot;
+        if (shadowRoot) {
+            const match = shadowRoot.querySelector(`ml-dialog[\\#${dialogID}]`);
+            if (match)
+                return match;
+            for (const child of shadowRoot.querySelectorAll('*')) {
+                const result = this.deepFindDialog(child, dialogID);
+                if (result)
+                    return result;
+            }
+        }
+        for (const child of root.querySelectorAll('*')) {
+            if (child.shadowRoot) {
+                const result = this.deepFindDialog(child, dialogID);
+                if (result)
+                    return result;
+            }
+        }
+        return null;
+    }
     close(dialogID, result) {
         if (this._dialogs.has(dialogID)) {
             const dialogElements = this._dialogs.get(dialogID);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.0.9",
+	"version": "1.0.11",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",