@blukavantui/community 0.0.0-stage → 1.0.1

package/src/runtime/media-card.js

@@ -0,0 +1,189 @@
+// ../blu-grid/docs/scripts/modules/qr-encoder.js
+import { global } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/common.js
+import { global as global2, runtime, state, register } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/rich.js
+import { global as global3, runtime as runtime2, state as state2, register as register2 } from "./kernel.js";
+var shared = /* @__PURE__ */ state2("rich", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+function el(tag, cls, value) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (value !== void 0) n.textContent = value;
+  return n;
+}
+function attr(n, k, v) {
+  n.setAttribute(k, String(v));
+  return n;
+}
+function num(v, d, min, max) {
+  v = v === void 0 ? d : Number(v);
+  return Number.isFinite(v) ? Math.min(max, Math.max(min, v)) : d;
+}
+function choice(v, values, d) {
+  return values.indexOf(v) >= 0 ? v : d;
+}
+function url(v) {
+  if (!v) return "";
+  var u = new URL(String(v), document.baseURI);
+  if (!/^https?:$/.test(u.protocol) && u.protocol !== "blob:") throw Error("Use an HTTP(S), relative or blob URL.");
+  return u.href;
+}
+function ratio(v) {
+  return /^\s*\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?\s*$/.test(v || "") ? v : "4 / 3";
+}
+function position(v) {
+  return /^\s*\d+(\.\d+)?%\s+\d+(\.\d+)?%\s*$/.test(v || "") ? v : "50% 50%";
+}
+function report(s, e) {
+  var message = e ? e.message || String(e) : "";
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && message !== s.lastError) {
+    s.lastError = message;
+    if (s.events.Error) try {
+      s.events.Error(message);
+    } catch (_) {
+    }
+  }
+}
+function imageSource(n, raw) {
+  var source = url(raw);
+  if (source) {
+    if (n.getAttribute("src") !== source) n.src = source;
+    n.hidden = false;
+  } else {
+    n.removeAttribute("src");
+    n.hidden = true;
+  }
+}
+function image(src, alt, eager) {
+  var n = el("img");
+  n.alt = alt || "";
+  n.loading = eager ? "eager" : "lazy";
+  n.decoding = "async";
+  if (src) n.src = url(src);
+  return n;
+}
+function heading(parent, title, level, cls) {
+  var n = el("h" + num(level, 2, 1, 6), cls, title || "");
+  n.hidden = !title;
+  parent.append(n);
+  return n;
+}
+function slot(s, name, target) {
+  var n = s.slots[name];
+  if (n && n.parentElement !== target) target.append(n);
+  return n;
+}
+function copy(parent, o) {
+  if (o.Eyebrow) parent.append(el("p", "blu-rich-eyebrow", o.Eyebrow));
+  heading(parent, o.Title, o.HeadingLevel, "blu-rich-title");
+  if (o.Description) parent.append(el("p", "blu-rich-description", o.Description));
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s || s.destroying) return;
+  s.destroying = true;
+  if (s.beforeDestroy) s.beforeDestroy();
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.pause) s.pause();
+  if (s.modal) runtime2.Modal.destroy(s.uid + "-modal");
+  if (s.observer) s.observer.disconnect();
+  if (s.resize) s.resize.disconnect();
+  if (s.frame) cancelAnimationFrame(s.frame);
+  Object.keys(s.slots).forEach(function(k) {
+    s.host.append(s.slots[k]);
+  });
+  s.root.remove();
+  if (s.modal) s.modal.remove();
+  if (s.host._bluRichOwner === key) delete s.host._bluRichOwner;
+  shared.instances.delete(key);
+}
+function define(kind, slug, init, update) {
+  return { sync: function(id, options, events, key) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    key = key || id;
+    var s = shared.instances.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      destroy(key);
+      s = null;
+    }
+    if (host._bluRichOwner && host._bluRichOwner !== key) destroy(host._bluRichOwner);
+    if (!s) {
+      s = { host, key, kind, uid: "blu-rich-" + ++shared.serial, cleanup: [], slots: {}, events: {}, options: {} };
+      Array.from(host.children).forEach(function(n) {
+        var match = n.className && String(n.className).match(/blu-common-slot--(\w+)/);
+        if (match) s.slots[match[1]] = n;
+      });
+      s.root = el("div", "blu-rich blu-" + slug);
+      s.body = el("div", "blu-rich-body");
+      s.error = attr(el("p", "blu-rich-error"), "role", "alert");
+      s.error.hidden = true;
+      s.root.append(s.body, s.error);
+      host.append(s.root);
+      shared.instances.set(key, s);
+      s.fresh = true;
+    }
+    host._bluRichOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    if (s.options.AccessibleLabel) {
+      attr(s.root, "aria-label", s.options.AccessibleLabel);
+      attr(s.root, "role", "group");
+    } else {
+      s.root.removeAttribute("aria-label");
+      s.root.removeAttribute("role");
+    }
+    try {
+      if (s.fresh) {
+        init(s);
+        s.fresh = false;
+      }
+      update(s);
+      report(s, null);
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function installMediaCard() {
+  return register2("MediaCard", () => define("MediaCard", "media-card", function(s) {
+    s.img = image("", "");
+    s.frameNode = el("div", "blu-media-card__image");
+    s.frameNode.append(s.img);
+    s.copy = el("div", "blu-media-card__copy");
+    s.article = el("article");
+    s.article.append(s.frameNode, s.copy);
+    s.body.append(s.article);
+  }, function(s) {
+    var o = s.options;
+    imageSource(s.img, o.ImageUrl);
+    s.img.alt = o.ImageDescription || "";
+    s.img.style.objectPosition = position(o.FocalPoint);
+    s.frameNode.style.aspectRatio = ratio(o.AspectRatio);
+    attr(s.root, "data-variant", choice(o.Variant, ["Below", "Overlay"], "Below").toLowerCase());
+    s.root.classList.toggle("blu-rich-zoom", o.EnableZoom !== false);
+    s.copy.replaceChildren();
+    copy(s.copy, o);
+    slot(s, "content", s.copy);
+    if (o.Url) {
+      var a = el("a", "blu-rich-link", o.ActionLabel || "Explore");
+      a.href = url(o.Url);
+      attr(a, "aria-label", (o.ActionLabel || "Explore") + " " + (o.Title || ""));
+      s.copy.append(a);
+    }
+  }));
+}
+export {
+  installMediaCard
+};

package/src/runtime/media-image.d.ts

@@ -0,0 +1 @@
+export function installMediaImage(): any;

package/src/runtime/media-image.js

@@ -0,0 +1,480 @@
+// ../blu-grid/docs/scripts/modules/qr-encoder.js
+import { global } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/common.js
+import { global as global2, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("common", () => ({ instances: /* @__PURE__ */ new Map(), hosts: /* @__PURE__ */ new Map(), serial: 0, overlays: [], inertState: /* @__PURE__ */ new Map(), oldOverflow: void 0 }));
+function el(tag, cls, text) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function at(n, key, value) {
+  n.setAttribute(key, String(value));
+  return n;
+}
+function clear(n) {
+  while (n.firstChild) n.removeChild(n.firstChild);
+}
+function listen(s, n, event, fn, options) {
+  n.addEventListener(event, fn, options);
+  s.cleanup.push(function() {
+    n.removeEventListener(event, fn, options);
+  });
+}
+function btn(text, fn, primary) {
+  var n = el("button", "blu-common-button" + (primary ? " blu-common-button--primary" : ""), text);
+  n.type = "button";
+  n.addEventListener("click", fn);
+  return n;
+}
+function choice(v, values, fallback) {
+  v = v || fallback;
+  if (values.indexOf(v) < 0) throw Error("Expected one of: " + values.join(", ") + ".");
+  return v;
+}
+function emit(s, name) {
+  if (s.dead || s.host._bluCommonOwner !== s.key || !s.events[name]) return;
+  var args = Array.prototype.slice.call(arguments, 2);
+  try {
+    Promise.resolve(s.events[name].apply(null, args)).catch(function(e) {
+      if (name !== "Error") error(s, e.message || String(e));
+    });
+  } catch (e) {
+    if (name !== "Error") error(s, e.message || String(e));
+  }
+}
+function error(s, message) {
+  if (!s.error) {
+    s.error = at(el("p", "blu-common-error"), "role", "alert");
+    s.host.append(s.error);
+  }
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && message !== s.lastError) emit(s, "Error", message);
+  s.lastError = message;
+}
+function begin(id, options, events, key, kind) {
+  var host = document.getElementById(id);
+  if (!host) return null;
+  key = key || id;
+  var s = shared.instances.get(key);
+  if (s && s.host !== host) {
+    destroy(key);
+    s = null;
+  }
+  if (host._bluCommonOwner && host._bluCommonOwner !== key) destroy(host._bluCommonOwner);
+  if (!s) {
+    s = { host, key, kind, uid: "blu-common-" + ++shared.serial, cleanup: [], events: {}, options: {} };
+    shared.instances.set(key, s);
+  }
+  host._bluCommonOwner = key;
+  s.options = options || {};
+  s.events = events || {};
+  at(host, "data-blu-ready", "true");
+  return s;
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s) return;
+  s.dead = true;
+  closeOverlay(s);
+  if (s.dispose) s.dispose();
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.host._bluCommonOwner === key) {
+    delete s.host._bluCommonOwner;
+    s.host.removeAttribute("data-blu-ready");
+    if (!s.preserve) clear(s.host);
+  }
+  shared.instances.delete(key);
+}
+function focusables(n) {
+  return Array.from(n.querySelectorAll('button,a[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(function(x) {
+    return !x.disabled && !x.closest("[hidden],[inert]") && x.getClientRects().length;
+  });
+}
+function refreshInert() {
+  shared.inertState.forEach(function(v, n) {
+    n.inert = v;
+  });
+  shared.inertState.clear();
+  var top = shared.overlays[shared.overlays.length - 1];
+  if (!top) {
+    if (shared.oldOverflow !== void 0) document.body.style.overflow = shared.oldOverflow;
+    shared.oldOverflow = void 0;
+    return;
+  }
+  if (shared.oldOverflow === void 0) shared.oldOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  var node = top.layer;
+  while (node && node.parentElement) {
+    Array.from(node.parentElement.children).forEach(function(sibling) {
+      if (sibling !== node && sibling instanceof HTMLElement) {
+        shared.inertState.set(sibling, sibling.inert);
+        sibling.inert = true;
+      }
+    });
+    node = node.parentElement;
+    if (node === document.body) break;
+  }
+}
+function openOverlay(s, layer, panel, onEscape) {
+  if (s.overlayOpen) return;
+  s.overlayOpen = true;
+  s.layer = layer;
+  s.panel = panel;
+  s.returnFocus = document.activeElement;
+  layer.hidden = false;
+  at(layer, "popover", "manual");
+  if (layer.showPopover) {
+    try {
+      layer.showPopover();
+    } catch (_) {
+    }
+  }
+  shared.overlays.push(s);
+  refreshInert();
+  panel.tabIndex = -1;
+  s.overlayKey = function(e) {
+    if (shared.overlays[shared.overlays.length - 1] !== s) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      onEscape();
+    } else if (e.key === "Tab") {
+      var nodes = focusables(panel), first = nodes[0] || panel, last = nodes[nodes.length - 1] || panel;
+      if (e.shiftKey && (document.activeElement === first || !panel.contains(document.activeElement))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (document.activeElement === last || !panel.contains(document.activeElement))) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  s.overlayFocus = function(e) {
+    if (shared.overlays[shared.overlays.length - 1] === s && !panel.contains(e.target)) (focusables(panel)[0] || panel).focus();
+  };
+  document.addEventListener("keydown", s.overlayKey, true);
+  document.addEventListener("focusin", s.overlayFocus, true);
+  (focusables(panel)[0] || panel).focus();
+}
+function closeOverlay(s) {
+  if (s.stopTracking) s.stopTracking();
+  if (!s.overlayOpen) return;
+  s.overlayOpen = false;
+  var wasTop = shared.overlays[shared.overlays.length - 1] === s;
+  shared.overlays = shared.overlays.filter(function(x) {
+    return x !== s;
+  });
+  document.removeEventListener("keydown", s.overlayKey, true);
+  document.removeEventListener("focusin", s.overlayFocus, true);
+  if (s.layer.hidePopover) {
+    try {
+      s.layer.hidePopover();
+    } catch (_) {
+    }
+  }
+  s.layer.hidden = true;
+  refreshInert();
+  if (wasTop && s.returnFocus && s.returnFocus.isConnected && !s.returnFocus.closest("[inert],[hidden]")) s.returnFocus.focus();
+}
+function nativeSlot(s, name) {
+  return s.host.querySelector('[data-blu-slot="' + name + '"],.blu-common-slot--' + name.toLowerCase());
+}
+function syncOverlay(s) {
+  var o = s.options, size = choice(o.Size, ["Small", "Medium", "Large"], "Medium"), placement = choice(o.Placement, ["Left", "Right", "Bottom"], "Right");
+  s.preserve = true;
+  if (!s.layer) {
+    var content = nativeSlot(s, "Content"), footer = nativeSlot(s, "Footer");
+    s.layer = s.host;
+    s.layer.classList.add("blu-overlay");
+    s.layer.classList.add("blu-overlay--" + s.kind.toLowerCase());
+    s.panel = at(el("section", "blu-overlay__panel"), "role", "dialog");
+    at(s.panel, "aria-modal", "true");
+    s.heading = el("h2");
+    s.heading.id = s.uid + "-title";
+    s.description = el("p", "blu-overlay__description");
+    s.description.id = s.uid + "-description";
+    s.close = btn("\xD7", function() {
+      requestClose(s, "CloseButton");
+    });
+    at(s.close, "aria-label", "Close dialog");
+    s.close.classList.add("blu-overlay__close");
+    var header = el("header", "blu-overlay__header");
+    header.append(s.heading, s.description, s.close);
+    s.content = content || el("div", "blu-common-slot--content");
+    s.content.classList.add("blu-overlay__content");
+    s.footer = el("footer", "blu-overlay__footer");
+    s.customFooter = footer || el("div");
+    s.actions = el("div", "blu-overlay__actions");
+    s.cancel = btn("Cancel", function() {
+      requestClose(s, "Cancel");
+    });
+    s.confirm = btn("Confirm", function() {
+      if (!s.options.IsBusy) emit(s, "Confirm", s.options.InstanceKey || "");
+    }, true);
+    s.actions.append(s.cancel, s.confirm);
+    s.footer.append(s.customFooter, s.actions);
+    s.panel.append(header, s.content, s.footer);
+    s.layer.append(s.panel);
+    listen(s, s.layer, "click", function(e) {
+      if (e.target === s.layer && s.options.CloseOnBackdrop !== false) requestClose(s, "Backdrop");
+    });
+    s.dispose = function() {
+      if (content) s.host.append(content);
+      if (footer) s.host.append(footer);
+      s.panel.remove();
+    };
+  }
+  at(s.layer, "data-size", size.toLowerCase());
+  at(s.layer, "data-placement", placement.toLowerCase());
+  s.heading.textContent = o.Title || "Details";
+  s.description.textContent = o.Description || "";
+  s.description.hidden = !o.Description;
+  at(s.panel, "aria-labelledby", s.heading.id);
+  if (o.Description) at(s.panel, "aria-describedby", s.description.id);
+  else s.panel.removeAttribute("aria-describedby");
+  at(s.panel, "aria-busy", !!o.IsBusy);
+  s.close.disabled = s.cancel.disabled = false;
+  s.confirm.disabled = !!o.IsBusy;
+  s.cancel.textContent = o.CancelLabel || "Cancel";
+  s.confirm.textContent = o.IsBusy ? "Working\u2026" : o.ConfirmLabel || "Confirm";
+  s.footer.hidden = o.ShowFooter === false;
+  s.actions.hidden = o.ShowDefaultActions === false;
+  if (o.IsOpen) openOverlay(s, s.layer, s.panel, function() {
+    if (s.options.CloseOnEscape !== false) requestClose(s, "Escape");
+  });
+  else {
+    closeOverlay(s);
+    s.layer.hidden = true;
+  }
+}
+function requestClose(s, reason) {
+  s.options.IsOpen = false;
+  closeOverlay(s);
+  emit(s, "OpenChanged", false, reason);
+}
+function api(kind, render, cached) {
+  return { sync: function(id, options, events, key) {
+    var s = begin(id, options, events, key, kind);
+    if (!s) return;
+    try {
+      var signature = cached ? JSON.stringify(s.options) : null;
+      if (!cached || s.renderSignature !== signature) {
+        render(s);
+        s.renderSignature = signature;
+      }
+      error(s, "");
+      return "";
+    } catch (e) {
+      s.renderSignature = void 0;
+      s.cascaderSignature = null;
+      closeOverlay(s);
+      error(s, e.message || String(e));
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function installModal() {
+  return register("Modal", () => api("Modal", syncOverlay, false));
+}
+
+// ../blu-grid/docs/scripts/modules/rich.js
+import { global as global3, runtime as runtime2, state as state2, register as register2 } from "./kernel.js";
+var shared2 = /* @__PURE__ */ state2("rich", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+function el2(tag, cls, value) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (value !== void 0) n.textContent = value;
+  return n;
+}
+function attr(n, k, v) {
+  n.setAttribute(k, String(v));
+  return n;
+}
+function url(v) {
+  if (!v) return "";
+  var u = new URL(String(v), document.baseURI);
+  if (!/^https?:$/.test(u.protocol) && u.protocol !== "blob:") throw Error("Use an HTTP(S), relative or blob URL.");
+  return u.href;
+}
+function ratio(v) {
+  return /^\s*\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?\s*$/.test(v || "") ? v : "4 / 3";
+}
+function position(v) {
+  return /^\s*\d+(\.\d+)?%\s+\d+(\.\d+)?%\s*$/.test(v || "") ? v : "50% 50%";
+}
+function emit2(s, name) {
+  if (s.dead || !s.events[name]) return;
+  try {
+    Promise.resolve(s.events[name].apply(null, Array.prototype.slice.call(arguments, 2))).catch(function(e) {
+      report(s, e);
+    });
+  } catch (e) {
+    report(s, e);
+  }
+}
+function report(s, e) {
+  var message = e ? e.message || String(e) : "";
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && message !== s.lastError) {
+    s.lastError = message;
+    if (s.events.Error) try {
+      s.events.Error(message);
+    } catch (_) {
+    }
+  }
+}
+function button(label, fn, cls) {
+  var n = el2("button", "blu-rich-button " + (cls || ""), label);
+  n.type = "button";
+  n.addEventListener("click", fn);
+  return n;
+}
+function imageSource(n, raw) {
+  var source = url(raw);
+  if (source) {
+    if (n.getAttribute("src") !== source) n.src = source;
+    n.hidden = false;
+  } else {
+    n.removeAttribute("src");
+    n.hidden = true;
+  }
+}
+function image(src, alt, eager) {
+  var n = el2("img");
+  n.alt = alt || "";
+  n.loading = eager ? "eager" : "lazy";
+  n.decoding = "async";
+  if (src) n.src = url(src);
+  return n;
+}
+function modal(s, title, content) {
+  if (!s.modal) {
+    s.modal = el2("div", s.kind === "VideoLightbox" || s.kind === "MediaImage" ? "blu-media-lightbox" : s.kind === "ProfileCard" ? "blu-profile-lightbox" : "");
+    s.modal.id = s.uid + "-modal";
+    s.modalSlot = el2("div", "blu-common-slot--content");
+    s.modal.append(s.modalSlot);
+    s.host.append(s.modal);
+  }
+  if (content && content.parentElement !== s.modalSlot) s.modalSlot.replaceChildren(content);
+  runtime2.Modal.sync(s.modal.id, { Title: title, IsOpen: true, Size: "Large", ShowFooter: false, CloseOnEscape: true, CloseOnBackdrop: true }, { OpenChanged: function() {
+    if (s.pause) s.pause();
+    if (s.kind === "VideoLightbox") {
+      s.options.IsOpen = false;
+      emit2(s, "OpenChanged", false);
+    }
+  } }, s.uid + "-modal");
+}
+function destroy2(key) {
+  var s = shared2.instances.get(key);
+  if (!s || s.destroying) return;
+  s.destroying = true;
+  if (s.beforeDestroy) s.beforeDestroy();
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.pause) s.pause();
+  if (s.modal) runtime2.Modal.destroy(s.uid + "-modal");
+  if (s.observer) s.observer.disconnect();
+  if (s.resize) s.resize.disconnect();
+  if (s.frame) cancelAnimationFrame(s.frame);
+  Object.keys(s.slots).forEach(function(k) {
+    s.host.append(s.slots[k]);
+  });
+  s.root.remove();
+  if (s.modal) s.modal.remove();
+  if (s.host._bluRichOwner === key) delete s.host._bluRichOwner;
+  shared2.instances.delete(key);
+}
+function define(kind, slug, init, update) {
+  return { sync: function(id, options, events, key) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    key = key || id;
+    var s = shared2.instances.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      destroy2(key);
+      s = null;
+    }
+    if (host._bluRichOwner && host._bluRichOwner !== key) destroy2(host._bluRichOwner);
+    if (!s) {
+      s = { host, key, kind, uid: "blu-rich-" + ++shared2.serial, cleanup: [], slots: {}, events: {}, options: {} };
+      Array.from(host.children).forEach(function(n) {
+        var match = n.className && String(n.className).match(/blu-common-slot--(\w+)/);
+        if (match) s.slots[match[1]] = n;
+      });
+      s.root = el2("div", "blu-rich blu-" + slug);
+      s.body = el2("div", "blu-rich-body");
+      s.error = attr(el2("p", "blu-rich-error"), "role", "alert");
+      s.error.hidden = true;
+      s.root.append(s.body, s.error);
+      host.append(s.root);
+      shared2.instances.set(key, s);
+      s.fresh = true;
+    }
+    host._bluRichOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    if (s.options.AccessibleLabel) {
+      attr(s.root, "aria-label", s.options.AccessibleLabel);
+      attr(s.root, "role", "group");
+    } else {
+      s.root.removeAttribute("aria-label");
+      s.root.removeAttribute("role");
+    }
+    try {
+      if (s.fresh) {
+        init(s);
+        s.fresh = false;
+      }
+      update(s);
+      report(s, null);
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy: destroy2 };
+}
+function installMediaImage() {
+  installModal();
+  return register2("MediaImage", () => define("MediaImage", "media-image", function(s) {
+    s.figure = el2("figure");
+    s.frameNode = el2("div", "blu-media-image__frame");
+    s.img = image("", "");
+    s.frameNode.append(s.img);
+    s.caption = el2("figcaption");
+    s.enlarge = button("Enlarge image", function() {
+      var n = image(s.options.ImageUrl, s.options.ImageDescription, true);
+      n.className = "blu-rich-enlarged";
+      modal(s, s.options.Caption || s.options.ImageDescription || "Image", n);
+    }, "blu-media-image__enlarge");
+    s.frameNode.append(s.enlarge);
+    s.figure.append(s.frameNode, s.caption);
+    s.body.append(s.figure);
+  }, function(s) {
+    var o = s.options;
+    imageSource(s.img, o.ImageUrl);
+    s.img.alt = o.ImageDescription || "";
+    s.img.loading = o.IsEager ? "eager" : "lazy";
+    s.img.style.objectPosition = position(o.FocalPoint);
+    s.frameNode.style.aspectRatio = ratio(o.AspectRatio);
+    s.root.classList.toggle("blu-rich-zoom", o.EnableZoom !== false);
+    s.enlarge.hidden = !o.AllowEnlarge;
+    attr(s.enlarge, "aria-haspopup", "dialog");
+    s.caption.textContent = o.Caption || "";
+    s.caption.hidden = !o.Caption;
+  }));
+}
+export {
+  installMediaImage
+};

package/src/runtime/modal.d.ts

@@ -0,0 +1 @@
+export function installModal(): any;