@wpmoo/ui 2.1.1 → 2.3.0

package/dist/js/moo-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI moo-ui.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -364,9 +364,9 @@ var Combobox = class _Combobox {
     const needle = normalize(this._input.value);
     let count = 0;
     this._options.forEach((option) => {
-      const matches = !needle || normalize(option.textContent).includes(needle);
-      option.hidden = !matches;
-      count += matches ? 1 : 0;
+      const matches2 = !needle || normalize(option.textContent).includes(needle);
+      option.hidden = !matches2;
+      count += matches2 ? 1 : 0;
     });
     this._syncGroupVisibility();
     this._empty.hidden = count !== 0;
@@ -4597,6 +4597,559 @@ var FloatingPanel = class _FloatingPanel {
   }
 };
 
+// src/js/components/image-gallery.js
+var instances9 = /* @__PURE__ */ new WeakMap();
+var SLIDESHOW_INTERVAL = 5e3;
+var RESIZE_DURATION = 250;
+var ImageGallery = class _ImageGallery {
+  static getInstance(element) {
+    return element?.nodeType === 1 ? instances9.get(element) || null : null;
+  }
+  static getOrCreateInstance(element) {
+    return _ImageGallery.getInstance(element) || new _ImageGallery(element);
+  }
+  constructor(element) {
+    if (element?.nodeType !== 1 || !element.matches("[data-image-gallery]")) {
+      throw new TypeError("ImageGallery requires a [data-image-gallery] root element.");
+    }
+    const existing = instances9.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._window = element.ownerDocument.defaultView;
+    this._dialog = element.querySelector(".modal");
+    this._carousel = this._dialog?.querySelector(".carousel");
+    if (!this._dialog || !this._carousel) {
+      throw new TypeError("ImageGallery requires a lightbox Dialog with a Carousel.");
+    }
+    this._slides = Array.from(this._carousel.querySelectorAll(".carousel-item"));
+    this._counter = this._dialog.querySelector("[data-gallery-counter]");
+    this._caption = this._dialog.querySelector("[data-gallery-caption]");
+    this._credit = this._dialog.querySelector("[data-gallery-credit]");
+    this._stage = this._dialog.querySelector("[data-gallery-stage]");
+    this._frame = this._dialog.querySelector(".modal-dialog");
+    this._progress = this._dialog.querySelector(".progress");
+    this._progressBar = this._progress?.querySelector(".progress-bar");
+    this._progress?.setAttribute("aria-hidden", "true");
+    const controls = (suffix) => this._dialog.id ? element.ownerDocument.getElementById(`${this._dialog.id}-${suffix}`) : null;
+    this._enterButton = controls("fullscreen");
+    this._exitButton = controls("windowed");
+    this._playButton = controls("play");
+    this._pauseButton = controls("pause");
+    this._listeners = [];
+    this._listen(this._dialog, "show.bs.modal", (event) => this._onShow(event));
+    this._listen(this._window, "resize", () => this._layoutStage());
+    this._listen(this._dialog, "shown.bs.modal", () => this._carouselInstance());
+    this._listen(this._carousel, "slide.bs.carousel", (event) => this.show(event.to, false));
+    this._listen(this._carousel, "slid.bs.carousel", () => this._restartTimer());
+    this._listen(this._dialog, "keydown", (event) => this._onKeydown(event));
+    this._listen(this._dialog, "hidden.bs.modal", () => {
+      this.play(false);
+      this.fullscreen(false);
+    });
+    const actions = [
+      [controls("previous"), () => this._step(false)],
+      [controls("next"), () => this._step(true)],
+      [this._playButton, () => this.play(true, true)],
+      [this._pauseButton, () => this.play(false, true)],
+      [this._enterButton, () => this.fullscreen(true, true)],
+      [this._exitButton, () => this.fullscreen(false, true)]
+    ];
+    for (const [button, action] of actions) {
+      if (button) this._listen(button, "click", action);
+    }
+    instances9.set(element, this);
+  }
+  get index() {
+    const active = this._slides.findIndex((slide) => slide.classList.contains("active"));
+    return Math.max(active, 0);
+  }
+  /** Marks photo `index` current, loads it and its neighbours. */
+  show(index, activate = true) {
+    const count = this._slides.length;
+    if (!count) return this;
+    const current = (Number(index) % count + count) % count;
+    if (activate) {
+      this._slides.forEach((slide2, position) => {
+        slide2.classList.toggle("active", position === current);
+      });
+    }
+    for (const offset of [0, 1, -1]) {
+      this._load(this._slides[(current + offset + count) % count]);
+    }
+    const slide = this._slides[current];
+    if (this._caption) {
+      this._caption.textContent = slide.getAttribute("data-gallery-slide-title") || slide.querySelector("img")?.alt || "";
+    }
+    if (this._credit) {
+      const credit = slide.getAttribute("data-gallery-slide-credit") || "";
+      this._credit.textContent = credit;
+      this._credit.classList.toggle("d-none", !credit);
+    }
+    if (this._counter) {
+      const template = this._counter.getAttribute("data-gallery-counter") || "{current} / {total}";
+      this._counter.textContent = template.replaceAll("{current}", String(current + 1)).replaceAll("{total}", String(count));
+    }
+    return this;
+  }
+  /** Starts or stops the slideshow. */
+  play(on = true, moveFocus = false) {
+    this._playing = Boolean(on) && Boolean(this._carouselInstance());
+    this._progress?.classList.toggle("d-none", !this._playing);
+    this._restartTimer();
+    this._playButton?.classList.toggle("d-none", this._playing);
+    this._pauseButton?.classList.toggle("d-none", !this._playing);
+    this._counter?.setAttribute("aria-live", this._playing ? "off" : "polite");
+    if (moveFocus) (this._playing ? this._pauseButton : this._playButton)?.focus();
+    return this;
+  }
+  get isFullscreen() {
+    return Boolean(this._frame?.classList.contains("modal-fullscreen"));
+  }
+  /** Switches between the large dialog and full screen. */
+  fullscreen(on = true, moveFocus = false) {
+    if (!this._frame) return this;
+    const value = Boolean(on);
+    this._resize(() => {
+      this._frame.classList.toggle("modal-fullscreen", value);
+      this._layoutStage();
+    });
+    if (moveFocus) (value ? this._exitButton : this._enterButton)?.focus();
+    return this;
+  }
+  dispose() {
+    this._stopTimer();
+    for (const [target, type, listener] of this._listeners) {
+      target.removeEventListener(type, listener);
+    }
+    this._listeners = [];
+    instances9.delete(this._element);
+  }
+  _listen(target, type, listener) {
+    target.addEventListener(type, listener);
+    this._listeners.push([target, type, listener]);
+  }
+  // The dialog fills the screen after the full-screen button, or below the
+  // breakpoint of Bootstrap's .modal-fullscreen-{breakpoint}-down.
+  _fillsScreen() {
+    if (this.isFullscreen) return true;
+    const breakpoint = this._frame?.className.match(/\bmodal-fullscreen-(\w+)-down\b/)?.[1];
+    if (!breakpoint) return false;
+    const width = Number.parseFloat(this._window.getComputedStyle(this._element.ownerDocument.documentElement).getPropertyValue(`--bs-breakpoint-${breakpoint}`));
+    return Number.isFinite(width) && this._window.matchMedia(`(max-width: ${width - 0.02}px)`).matches;
+  }
+  // Runs one photo's time on the Progress bar, then shows the next photo.
+  _restartTimer() {
+    this._stopTimer();
+    if (!this._playing) return;
+    const advance = () => {
+      if (this._playing) this._step(true);
+    };
+    if (typeof this._progressBar?.animate === "function") {
+      const timer = this._progressBar.animate(
+        [{ width: "0%" }, { width: "100%" }],
+        { duration: SLIDESHOW_INTERVAL, easing: "linear", fill: "forwards" }
+      );
+      timer.addEventListener("finish", () => {
+        if (this._timer === timer) advance();
+      });
+      this._timer = timer;
+    } else {
+      this._timeout = this._window.setTimeout(advance, SLIDESHOW_INTERVAL);
+    }
+  }
+  _stopTimer() {
+    this._timer?.cancel();
+    this._timer = null;
+    this._window.clearTimeout(this._timeout);
+  }
+  // Animates the dialog from its old box to the new one: the content keeps
+  // its final layout and starts scaled to where it was (first, last, invert,
+  // play). Without motion the change applies at once.
+  _resize(change) {
+    const content = this._frame.querySelector(".modal-content");
+    const reduced = this._window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!content || typeof content.animate !== "function" || reduced || !this._dialog.classList.contains("show")) {
+      change();
+      return;
+    }
+    this._resizing?.cancel();
+    const first = content.getBoundingClientRect();
+    change();
+    const last = content.getBoundingClientRect();
+    if (!first.width || !first.height || !last.width || !last.height) return;
+    this._resizing = content.animate([
+      {
+        transformOrigin: "0 0",
+        transform: `translate(${first.left - last.left}px, ${first.top - last.top}px) scale(${first.width / last.width}, ${first.height / last.height})`
+      },
+      { transformOrigin: "0 0", transform: "none" }
+    ], { duration: RESIZE_DURATION, easing: "cubic-bezier(0.2, 0, 0, 1)" });
+  }
+  _layoutStage() {
+    const fill = this._fillsScreen();
+    this._stage?.classList.toggle("gallery-stage", !fill);
+    this._enterButton?.classList.toggle("d-none", fill);
+    this._exitButton?.classList.toggle("d-none", !this.isFullscreen);
+  }
+  _onShow(event) {
+    this._layoutStage();
+    const trigger = event.relatedTarget;
+    const value = trigger?.closest?.("[data-gallery-index]")?.getAttribute("data-gallery-index");
+    this.show(value === null || value === void 0 ? 0 : Number.parseInt(value, 10) || 0);
+  }
+  _onKeydown(event) {
+    if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    if (this._carousel.contains(event.target)) return;
+    event.preventDefault();
+    const rtl = this._element.ownerDocument.documentElement.dir === "rtl";
+    this._step(event.key === "ArrowRight" !== rtl);
+  }
+  _step(forward) {
+    const carousel = this._carouselInstance();
+    if (!carousel) return;
+    if (forward) carousel.next();
+    else carousel.prev();
+  }
+  _carouselInstance(create = true) {
+    const Carousel = this._window.bootstrap?.Carousel;
+    if (!Carousel) return null;
+    if (!create) return Carousel.getInstance(this._carousel);
+    return Carousel.getOrCreateInstance(this._carousel, {
+      interval: false,
+      pause: false,
+      ride: false,
+      keyboard: true,
+      touch: true,
+      wrap: true
+    });
+  }
+  _load(slide) {
+    const image = slide?.querySelector("img[data-gallery-src]");
+    if (!image || image.hasAttribute("src")) return;
+    const srcset = image.getAttribute("data-gallery-srcset");
+    if (srcset) image.setAttribute("srcset", srcset);
+    image.setAttribute("src", image.getAttribute("data-gallery-src"));
+  }
+};
+
+// src/js/components/consent.js
+var instances10 = /* @__PURE__ */ new WeakMap();
+var documents = /* @__PURE__ */ new WeakMap();
+var RECORD_VERSION = 1;
+var DAY_SECONDS = 86400;
+var FOCUSABLE = "button, a[href], input:not([type='hidden']), select, textarea, [tabindex]:not([tabindex='-1'])";
+function webSource(value, base) {
+  if (!value) return "";
+  try {
+    const url = new URL(value, base);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : "";
+  } catch {
+    return "";
+  }
+}
+function matches(pattern, name) {
+  return pattern.endsWith("*") ? name.startsWith(pattern.slice(0, -1)) : name === pattern;
+}
+var ConsentManager = class _ConsentManager {
+  /** The manager bound to a [data-consent] element or to a document. */
+  static getInstance(target) {
+    if (target?.nodeType === 9) return documents.get(target) || null;
+    return target?.nodeType === 1 ? instances10.get(target) || null : null;
+  }
+  static getOrCreateInstance(element, options) {
+    return _ConsentManager.getInstance(element) || new _ConsentManager(element, options);
+  }
+  constructor(element, { reload } = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-consent]") || !element.id) {
+      throw new TypeError("ConsentManager requires a named [data-consent] element.");
+    }
+    const existing = instances10.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._document = element.ownerDocument;
+    if (documents.has(this._document)) {
+      throw new TypeError("ConsentManager allows one consent card per document.");
+    }
+    this._window = this._document.defaultView;
+    const source = element.querySelector("script[data-consent-config]");
+    if (!source) throw new TypeError("ConsentManager requires a [data-consent-config] script.");
+    this._config = JSON.parse(source.textContent);
+    this._cookie = { name: "moo_consent", days: 365, ...this._config.cookie || {} };
+    this._categories = this._config.categories || [];
+    this._optional = this._categories.filter((category) => !category.required).map((category) => category.id);
+    this._reload = reload || (() => this._window.location.reload());
+    this._waiting = /* @__PURE__ */ new Map();
+    this._listeners = [];
+    this._trapping = false;
+    this._returnFocus = null;
+    const record = this._read();
+    this._valid = Boolean(record);
+    this._choices = this._normalize(record ? record.c : {});
+    const control = (suffix) => this._document.getElementById(`${element.id}-${suffix}`);
+    const actions = [
+      [control("accept"), () => this.acceptAll()],
+      [control("decline"), () => this.declineAll()],
+      [control("save"), () => this.save(this._switchChoices(), "save")]
+    ];
+    for (const [button, action] of actions) {
+      if (button) this._listen(button, "click", action);
+    }
+    this._listen(this._document, "click", (event) => this._onDocumentClick(event));
+    this._listen(element, "keydown", (event) => this._onKeydown(event));
+    instances10.set(element, this);
+    documents.set(this._document, this);
+    this.activate(this._document);
+    if (!this._valid) this._show();
+    this.ready = Promise.resolve(this);
+    queueMicrotask(() => this._emit("ready", { choices: this.choices, valid: this._valid, revision: this.revision }));
+  }
+  get revision() {
+    return String(this._config.revision);
+  }
+  get valid() {
+    return this._valid;
+  }
+  get choices() {
+    return { ...this._choices };
+  }
+  get isOpen() {
+    return !this._element.hidden;
+  }
+  granted(id) {
+    const category = this._categories.find((entry) => entry.id === id);
+    if (!category) return false;
+    return category.required ? true : this._valid && this._choices[id] === true;
+  }
+  /** Runs callback now if granted, otherwise on grant. Returns an unsubscribe function. */
+  whenGranted(id, callback) {
+    if (this.granted(id)) {
+      this._run(callback);
+      return () => {
+      };
+    }
+    if (!this._waiting.has(id)) this._waiting.set(id, /* @__PURE__ */ new Set());
+    this._waiting.get(id).add(callback);
+    return () => this._waiting.get(id)?.delete(callback);
+  }
+  acceptAll() {
+    return this.save(Object.fromEntries(this._optional.map((id) => [id, true])), "accept-all");
+  }
+  declineAll() {
+    return this.save({}, "decline");
+  }
+  grant(id) {
+    return this.save({ ...this._choices, [id]: true }, "grant");
+  }
+  deny(id) {
+    return this.save({ ...this._choices, [id]: false }, "deny");
+  }
+  /** Stores the choice; optional categories not named become false. */
+  save(choices, source = "save") {
+    const previous = this._valid ? this.choices : this._normalize({});
+    const wasValid = this._valid;
+    const next = this._normalize(choices);
+    this._write(next);
+    this._valid = true;
+    this._choices = next;
+    const granted = this._optional.filter((id) => next[id] && !previous[id]);
+    const revoked = wasValid ? this._optional.filter((id) => previous[id] && !next[id]) : [];
+    this.close();
+    this.activate(this._document);
+    for (const id of granted) {
+      const waiting = this._waiting.get(id);
+      this._waiting.delete(id);
+      waiting?.forEach((callback) => this._run(callback));
+    }
+    this._emit("change", { choices: this.choices, previous, granted, revoked, source });
+    if (revoked.length) {
+      revoked.forEach((id) => this._forget(id));
+      this._reload();
+    }
+    return this.choices;
+  }
+  /** Opens the card with the stored choices; traps focus until closed. */
+  open(trigger = null) {
+    this._returnFocus = trigger;
+    this._trapping = true;
+    this._show();
+    this._document.getElementById(`${this._element.id}-title`)?.focus({ preventScroll: true });
+    this._emit("open", {});
+  }
+  /** Hides the card; it stays open while no valid choice exists. */
+  close() {
+    if (!this._valid) return false;
+    const wasOpen = this.isOpen;
+    const returnFocus = this._trapping ? this._returnFocus : null;
+    this._element.hidden = true;
+    this._trapping = false;
+    this._returnFocus = null;
+    if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
+    if (wasOpen) this._emit("close", {});
+    return true;
+  }
+  /** Activates gated elements under root whose category is granted. */
+  activate(root = this._document) {
+    this._activateWhere(root, (id) => this.granted(id));
+  }
+  dispose() {
+    if (instances10.get(this._element) !== this) return;
+    this._listeners.forEach(([target, type, handler]) => target.removeEventListener(type, handler));
+    this._listeners = [];
+    this._waiting.clear();
+    instances10.delete(this._element);
+    documents.delete(this._document);
+  }
+  // A failing site callback must not stop the rest of a save, such as the
+  // cleanup and reload after a withdrawal; the error is still reported.
+  _run(callback) {
+    try {
+      callback(this);
+    } catch (error) {
+      if (typeof this._window.reportError === "function") this._window.reportError(error);
+      else this._window.console?.error(error);
+    }
+  }
+  _activateWhere(root, allowed) {
+    for (const element of root.querySelectorAll("[data-consent-category]")) {
+      if (allowed(element.getAttribute("data-consent-category"))) this._activateElement(element);
+    }
+    for (const placeholder of root.querySelectorAll("[data-consent-placeholder]")) {
+      if (allowed(placeholder.getAttribute("data-consent-placeholder"))) placeholder.hidden = true;
+    }
+  }
+  _listen(target, type, handler) {
+    target.addEventListener(type, handler);
+    this._listeners.push([target, type, handler]);
+  }
+  _emit(name, detail) {
+    this._document.dispatchEvent(new this._window.CustomEvent(`moo:consent:${name}`, { bubbles: true, detail }));
+  }
+  _normalize(choices) {
+    return Object.fromEntries(this._optional.map((id) => [id, choices?.[id] === true || choices?.[id] === 1]));
+  }
+  _switch(id) {
+    return this._document.getElementById(`${this._element.id}-category-${id}`);
+  }
+  _switchChoices() {
+    return Object.fromEntries(this._optional.map((id) => [id, Boolean(this._switch(id)?.checked)]));
+  }
+  _show() {
+    for (const id of this._optional) {
+      const input = this._switch(id);
+      if (input) input.checked = this.granted(id);
+    }
+    this._element.hidden = false;
+  }
+  _read() {
+    const prefix = `${this._cookie.name}=`;
+    const raw = this._document.cookie.split("; ").find((part) => part.startsWith(prefix));
+    if (!raw) return null;
+    try {
+      const record = JSON.parse(decodeURIComponent(raw.slice(prefix.length)));
+      const age = Date.now() / 1e3 - Number(record.t);
+      if (record.v !== RECORD_VERSION || record.r !== this.revision) return null;
+      if (!(age >= 0 && age < this._cookie.days * DAY_SECONDS)) return null;
+      return record;
+    } catch {
+      return null;
+    }
+  }
+  _write(choices) {
+    const record = {
+      v: RECORD_VERSION,
+      r: this.revision,
+      t: Math.floor(Date.now() / 1e3),
+      c: Object.fromEntries(Object.entries(choices).map(([id, value]) => [id, value ? 1 : 0]))
+    };
+    const secure = this._window.location.protocol === "https:" ? "; Secure" : "";
+    this._document.cookie = `${this._cookie.name}=${encodeURIComponent(JSON.stringify(record))}; Path=/; Max-Age=${this._cookie.days * DAY_SECONDS}; SameSite=Lax${secure}`;
+  }
+  _forget(id) {
+    const category = this._categories.find((entry) => entry.id === id);
+    const host = this._window.location.hostname;
+    const parts = host.split(".");
+    const domains = [""];
+    for (let index = 0; index < parts.length - 1; index += 1) domains.push(`; Domain=${parts.slice(index).join(".")}`);
+    const cookieNames = this._document.cookie.split("; ").map((part) => part.split("=")[0]).filter(Boolean);
+    for (const item of category?.storage || []) {
+      if (item.type === "cookie") {
+        for (const name of cookieNames.filter((candidate) => matches(item.name, candidate))) {
+          for (const domain of domains) this._document.cookie = `${name}=; Path=/; Max-Age=0${domain}`;
+        }
+      } else {
+        try {
+          const storage = item.type === "local" ? this._window.localStorage : this._window.sessionStorage;
+          Object.keys(storage).filter((key) => matches(item.name, key)).forEach((key) => storage.removeItem(key));
+        } catch {
+        }
+      }
+    }
+  }
+  _activateElement(element) {
+    if (element.hasAttribute("data-consent-active")) return;
+    const declared = element.getAttribute("data-consent-src");
+    const src = webSource(declared, this._document.baseURI);
+    if (declared && !src) return;
+    if (element.localName === "script") {
+      const script = this._document.createElement("script");
+      for (const { name, value } of element.attributes) {
+        if (name !== "type" && !name.startsWith("data-consent-")) script.setAttribute(name, value);
+      }
+      const type = element.getAttribute("data-consent-type");
+      if (type) script.type = type;
+      if (src) script.src = src;
+      else script.textContent = element.textContent;
+      script.setAttribute("data-consent-category", element.getAttribute("data-consent-category"));
+      script.setAttribute("data-consent-active", "");
+      element.replaceWith(script);
+      return;
+    }
+    element.setAttribute("data-consent-active", "");
+    if (src) element.setAttribute("src", src);
+    element.hidden = false;
+  }
+  _onDocumentClick(event) {
+    const control = event.target.closest?.("[data-consent-open], [data-consent-grant]");
+    if (!control || control.matches(":disabled")) return;
+    if (control.hasAttribute("data-consent-open")) {
+      if (control.getAttribute("data-consent-open") !== this._element.id) return;
+      event.preventDefault();
+      this.open(control);
+      return;
+    }
+    const id = control.getAttribute("data-consent-grant");
+    if (!this._categories.some((category) => category.id === id)) return;
+    event.preventDefault();
+    const placeholder = control.closest("[data-consent-placeholder]");
+    const scope = control.closest("[data-consent-embed]") || placeholder?.parentElement;
+    if (placeholder?.querySelector("[data-consent-remember]")?.checked || !scope) {
+      this.grant(id);
+    } else {
+      this._activateWhere(scope, (category) => category === id);
+    }
+  }
+  _onKeydown(event) {
+    if (!this._trapping) return;
+    if (event.key === "Escape") {
+      if (this.close()) event.preventDefault();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(this._element.querySelectorAll(FOCUSABLE)).filter((control) => !control.matches(":disabled") && control.getClientRects().length > 0);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = this._document.activeElement;
+    if (event.shiftKey && (active === first || !this._element.contains(active) || active.id === `${this._element.id}-title`)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+};
+
 // src/js/moo-ui.js
 import PasswordRequirements from "./password-requirements.js";
 async function loadChart() {
@@ -4606,6 +5159,8 @@ async function loadChart() {
 var MooUI = {
   PasswordRequirements,
   FloatingPanel,
+  ImageGallery,
+  ConsentManager,
   loadChart,
   Combobox,
   ContextMenu,
@@ -4622,10 +5177,12 @@ var MooUI = {
 var moo_ui_default = MooUI;
 export {
   Combobox,
+  ConsentManager,
   ContextMenu,
   DataTable,
   MooDatepicker as Datepicker,
   FloatingPanel,
+  ImageGallery,
   MooCalendar,
   MooDateRangePicker,
   OverlayScrollbar,