@blukavantui/community 0.0.0-stage → 1.0.1

package/src/runtime/content-carousel.js

@@ -0,0 +1,282 @@
+// ../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 on(s, n, e, fn) {
+  n.addEventListener(e, fn);
+  s.cleanup.push(function() {
+    n.removeEventListener(e, fn);
+  });
+}
+function emit(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 = el("button", "blu-rich-button " + (cls || ""), label);
+  n.type = "button";
+  n.addEventListener("click", fn);
+  return n;
+}
+function slot(s, name, target) {
+  var n = s.slots[name];
+  if (n && n.parentElement !== target) target.append(n);
+  return n;
+}
+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 contentItems(root) {
+  var result = [];
+  var only = root.children.length === 1 ? root.firstElementChild : null;
+  if (only && !only.matches(".blu-rich,[data-block],.OSBlockWidget") && (!only.id || root.hasAttribute("data-container") && root.id.endsWith("ContentArea") && only.id === root.id.slice(0, -4)) && only.children.length) {
+    only.classList.add("blu-rich-bridge");
+    root = only;
+  }
+  function visit(n) {
+    Array.from(n.children).forEach(function(c) {
+      if (c.classList.contains("list") || c.classList.contains("list-item") || c.hasAttribute("data-list") || c.hasAttribute("data-container") && c.children.length === 1 && !c.querySelector(".blu-rich")) {
+        c.classList.add("blu-rich-bridge");
+        visit(c);
+      } else if (c.classList.contains("OSBlockWidget") && c.children.length === 1 && c.firstElementChild && c.firstElementChild.hasAttribute("data-list")) {
+        c.classList.add("blu-rich-bridge");
+        visit(c);
+      } else result.push(c);
+    });
+  }
+  visit(root);
+  return result;
+}
+function observeContent(s, draw) {
+  s.content = slot(s, "content", s.body);
+  if (!s.content) throw Error("Content slot is required.");
+  s.observer = new MutationObserver(function(changes) {
+    if (changes.some(function(c) {
+      return c.type === "childList";
+    })) {
+      if (s.frame) cancelAnimationFrame(s.frame);
+      s.frame = requestAnimationFrame(draw);
+    }
+  });
+  s.observer.observe(s.content, { childList: true, subtree: true });
+  s.resize = new ResizeObserver(function() {
+    if (s.frame) cancelAnimationFrame(s.frame);
+    s.frame = requestAnimationFrame(draw);
+  });
+  s.resize.observe(s.content);
+}
+function drawCarousel(s) {
+  var previous = s.items || [];
+  s.items = contentItems(s.content);
+  previous.forEach(function(n) {
+    if (s.items.indexOf(n) < 0) {
+      n.classList.remove("blu-content-carousel__item");
+      n.removeAttribute("role");
+      n.removeAttribute("aria-roledescription");
+      n.removeAttribute("aria-label");
+    }
+  });
+  attr(s.content, "role", "group");
+  attr(s.content, "aria-label", s.options.AccessibleLabel || "Carousel");
+  s.gap = num(s.options.Gap, 24, 0, 64);
+  var width = s.content.clientWidth, visible = Math.min(num(s.options.ItemsVisible, 3, 1, 6), width < 540 ? 1 : width < 850 ? 2 : 6);
+  s.content.style.setProperty("--blu-carousel-visible", visible);
+  s.content.style.setProperty("--blu-carousel-gap", s.gap + "px");
+  s.content.style.setProperty("--blu-carousel-peek", s.options.PeekNext === false ? "0px" : "48px");
+  s.items.forEach(function(n, i) {
+    n.classList.add("blu-content-carousel__item");
+    attr(n, "role", "group");
+    attr(n, "aria-roledescription", "slide");
+    attr(n, "aria-label", (s.options.ItemLabel || "Item") + " " + (i + 1) + " of " + s.items.length);
+  });
+  s.index = s.index || 0;
+  carouselState(s);
+}
+function carouselState(s) {
+  if (!s.tools) return;
+  var end = s.content.scrollLeft >= s.content.scrollWidth - s.content.clientWidth - 3;
+  s.previous.disabled = s.content.scrollLeft < 3;
+  s.next.disabled = end;
+  s.previous.hidden = s.next.hidden = s.options.ShowArrows === false;
+  s.status.hidden = s.progress.hidden = s.options.ShowIndicators === false;
+  s.status.textContent = s.items.length ? Math.min(s.index + 1, s.items.length) + " / " + s.items.length : "No items";
+  s.progress.max = Math.max(1, s.items.length);
+  s.progress.value = s.index + 1;
+}
+function moveCarousel(s, index, instant) {
+  if (!s.items || !s.items.length) return;
+  index = Math.round(num(index, 0, 0, s.items.length - 1));
+  var target = s.items[index];
+  var left = target.getBoundingClientRect().left - s.content.getBoundingClientRect().left + s.content.scrollLeft;
+  s.content.scrollTo({ left, behavior: instant || matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
+}
+function installContentCarousel() {
+  return register2("ContentCarousel", () => define("ContentCarousel", "content-carousel", function(s) {
+    observeContent(s, function() {
+      drawCarousel(s);
+    });
+    s.content.classList.add("blu-content-carousel__track");
+    attr(s.content, "aria-roledescription", "carousel");
+    s.content.tabIndex = 0;
+    s.tools = el("div", "blu-content-carousel__controls");
+    s.previous = button("\u2190", function() {
+      moveCarousel(s, s.index - 1);
+    });
+    s.next = button("\u2192", function() {
+      moveCarousel(s, s.index + 1);
+    });
+    attr(s.previous, "aria-label", "Previous item");
+    attr(s.next, "aria-label", "Next item");
+    s.status = attr(el("span", "blu-content-carousel__status"), "aria-live", "polite");
+    s.progress = el("progress");
+    attr(s.progress, "aria-label", "Carousel position");
+    s.tools.append(s.previous, s.progress, s.status, s.next);
+    s.body.append(s.tools);
+    on(s, s.content, "scroll", function() {
+      if (s.scrollFrame) cancelAnimationFrame(s.scrollFrame);
+      s.scrollFrame = requestAnimationFrame(function() {
+        s.scrollFrame = null;
+        var first = s.items && s.items[0];
+        if (!first) return;
+        var index = Math.round(s.content.scrollLeft / (first.getBoundingClientRect().width + s.gap));
+        if (index !== s.index) {
+          s.index = index;
+          carouselState(s);
+          emit(s, "IndexChanged", index);
+        }
+      });
+    });
+    s.cleanup.push(function() {
+      if (s.scrollFrame) cancelAnimationFrame(s.scrollFrame);
+    });
+    on(s, s.content, "keydown", function(e) {
+      if (e.target !== s.content) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        moveCarousel(s, s.index + (e.key === "ArrowRight" ? 1 : -1));
+      }
+      if (e.key === "Home" || e.key === "End") {
+        e.preventDefault();
+        moveCarousel(s, e.key === "Home" ? 0 : s.items.length - 1);
+      }
+    });
+  }, function(s) {
+    drawCarousel(s);
+    var requested = num(s.options.ActiveIndex, 0, 0, 9999);
+    if (requested !== s.lastRequested) {
+      s.lastRequested = requested;
+      moveCarousel(s, requested, true);
+    }
+  }));
+}
+export {
+  installContentCarousel
+};

package/src/runtime/dashboard-canvas.d.ts

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