@themarioga/grid-editor 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/plugins/grideditor.offcanvas.js

@@ -0,0 +1,556 @@
+(() => {
+  // src/js/register.js
+  var GridEditor = window.GridEditor;
+  if (!GridEditor || typeof GridEditor.get !== "function") {
+    throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");
+  }
+
+  // src/js/dom.js
+  function all(root, selector) {
+    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
+  }
+  function children(node, selector) {
+    if (!node) {
+      return [];
+    }
+    return Array.prototype.filter.call(node.children, function(each) {
+      return !selector || each.matches(selector);
+    });
+  }
+  function child(node, selector) {
+    return children(node, selector)[0] || null;
+  }
+  function closest(node, selector, stopAt) {
+    var found = node && node.nodeType === 1 ? node.closest(selector) : null;
+    if (found && stopAt && found !== stopAt && !stopAt.contains(found)) {
+      return null;
+    }
+    return found;
+  }
+  function parse(html) {
+    var template = document.createElement("template");
+    template.innerHTML = html;
+    return Array.prototype.slice.call(template.content.childNodes);
+  }
+  function create(html) {
+    var nodes = parse(html.trim());
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].nodeType === 1) {
+        return nodes[i];
+      }
+    }
+    return null;
+  }
+  function element(tag, attributes, text) {
+    var node = document.createElement(tag);
+    Object.keys(attributes || {}).forEach(function(name) {
+      var value = attributes[name];
+      if (value !== null && value !== void 0 && value !== false) {
+        node.setAttribute(name, value);
+      }
+    });
+    if (text !== void 0 && text !== null) {
+      node.textContent = text;
+    }
+    return node;
+  }
+  function addClass(node, names) {
+    split(names).forEach(function(name) {
+      node.classList.add(name);
+    });
+    return node;
+  }
+  function removeClass(node, names) {
+    split(names).forEach(function(name) {
+      node.classList.remove(name);
+    });
+    return node;
+  }
+  function toggleClass(node, names, state) {
+    split(names).forEach(function(name) {
+      if (state === void 0) {
+        node.classList.toggle(name);
+      } else {
+        node.classList.toggle(name, !!state);
+      }
+    });
+    return node;
+  }
+  function hasClass(node, name) {
+    return !!node && node.nodeType === 1 && node.classList.contains(name);
+  }
+  function split(names) {
+    return String(names || "").split(/\s+/).filter(Boolean);
+  }
+  function dropEmptyClass(node) {
+    if (!node.getAttribute("class")) {
+      node.removeAttribute("class");
+    }
+    return node;
+  }
+  function delegate(root, types, selector, handler, options) {
+    var listener = function(event) {
+      var match = closest(event.target, selector, root);
+      if (match && root.contains(match)) {
+        return handler.call(match, event);
+      }
+      return void 0;
+    };
+    split(types).forEach(function(type) {
+      root.addEventListener(type, listener, options);
+    });
+    return listener;
+  }
+
+  // src/js/triggers/triggers.js
+  function triggersFor(ge, kind, idAttribute, targetAttribute, toggle) {
+    var triggerClass = "ge-" + kind + "-trigger";
+    var orphanClass = "ge-" + kind + "-orphan";
+    var listening = null;
+    function idOf(container) {
+      return container.getAttribute(idAttribute);
+    }
+    function exists(id, root) {
+      return all(root || ge.canvas, "[" + idAttribute + "]").some(function(container) {
+        return idOf(container) === id;
+      });
+    }
+    function wire() {
+      all(ge.canvas, "[" + targetAttribute + "]").forEach(function(trigger) {
+        addClass(trigger, triggerClass);
+        var wanted = trigger.getAttribute(targetAttribute);
+        trigger.removeAttribute("data-bs-toggle");
+        trigger.removeAttribute("data-bs-target");
+        if (exists(wanted)) {
+          removeClass(trigger, orphanClass);
+          return;
+        }
+        var column = trigger.closest(".column");
+        var nearby = column ? all(column, "[" + idAttribute + "]") : [];
+        if (nearby.length === 1) {
+          trigger.setAttribute(targetAttribute, idOf(nearby[0]));
+          removeClass(trigger, orphanClass);
+          return;
+        }
+        addClass(trigger, orphanClass);
+        ge.operate(function() {
+          ge.emit(kind + "-orphan", ge.payloadFor(kind, trigger, {
+            parent: trigger.parentElement,
+            source: "api",
+            missing: wanted
+          }));
+        });
+      });
+    }
+    function write(root) {
+      root = root || ge.canvas;
+      all(root, "[" + targetAttribute + "]").forEach(function(trigger) {
+        var wanted = trigger.getAttribute(targetAttribute);
+        removeClass(trigger, orphanClass);
+        dropEmptyClass(trigger);
+        if (!exists(wanted, root)) {
+          return;
+        }
+        trigger.setAttribute("data-bs-toggle", toggle);
+        trigger.setAttribute("data-bs-target", "#" + wanted);
+      });
+    }
+    return {
+      write,
+      // Triggers are markup the host owns, anywhere in the canvas, so they
+      // are looked at whenever the canvas is initialized rather than only
+      // when a container is touched
+      onInit: function() {
+        wire();
+        if (listening) {
+          listening.abort();
+        }
+        listening = new AbortController();
+        delegate(ge.canvas, "click", "." + triggerClass + ", [" + targetAttribute + "]", function(e) {
+          if (hasClass(ge.canvas, "ge-editing")) {
+            e.preventDefault();
+          }
+        }, { signal: listening.signal });
+      },
+      onDeinit: function() {
+        if (listening) {
+          listening.abort();
+        }
+        listening = null;
+        write();
+      }
+    };
+  }
+
+  // src/js/plugins/grideditor.offcanvas.js
+  Object.assign(GridEditor.locales.en, {
+    "container.add_offcanvas": "Offcanvas",
+    "container.offcanvas_title": "Title",
+    "container.offcanvas_trigger": "Open",
+    "tool.toggle_offcanvas": "Fold this offcanvas away while editing",
+    "container.offcanvas_section": "Offcanvas",
+    "container.offcanvas_placement": "Placement",
+    "container.offcanvas_start": "Start",
+    "container.offcanvas_end": "End",
+    "container.offcanvas_top": "Top",
+    "container.offcanvas_bottom": "Bottom",
+    "container.offcanvas_backdrop": "Backdrop",
+    "container.offcanvas_backdrop_yes": "Yes",
+    "container.offcanvas_backdrop_no": "No",
+    "container.offcanvas_backdrop_static": "Static",
+    "container.offcanvas_scroll": "Allow body scroll",
+    "container.offcanvas_keyboard": "Close with Esc",
+    "container.offcanvas_responsive": "Responsive",
+    "container.offcanvas_responsive_never": "Always offcanvas",
+    "container.offcanvas_responsive_from": "Inline from {breakpoint}",
+    "container.offcanvas_dark": "Dark theme"
+  });
+  var DEFAULTS = {
+    placement: "start",
+    backdrop: true,
+    scroll: false,
+    keyboard: true,
+    responsive: null,
+    dark: false
+  };
+  var KEYS = ["placement", "backdrop", "scroll", "keyboard", "responsive", "dark"];
+  var PLACEMENTS = ["start", "end", "top", "bottom"];
+  var BACKDROPS = [true, false, "static"];
+  var LABELS = {
+    placement: { labelKey: "container.offcanvas_placement" },
+    backdrop: { labelKey: "container.offcanvas_backdrop" },
+    responsive: { labelKey: "container.offcanvas_responsive" },
+    scroll: { labelKey: "container.offcanvas_scroll" },
+    keyboard: { labelKey: "container.offcanvas_keyboard" },
+    dark: { labelKey: "container.offcanvas_dark" }
+  };
+  var PLACEMENT_CHOICES = [
+    { value: "start", labelKey: "container.offcanvas_start" },
+    { value: "end", labelKey: "container.offcanvas_end" },
+    { value: "top", labelKey: "container.offcanvas_top" },
+    { value: "bottom", labelKey: "container.offcanvas_bottom" }
+  ];
+  var BACKDROP_CHOICES = [
+    { value: "true", labelKey: "container.offcanvas_backdrop_yes" },
+    { value: "false", labelKey: "container.offcanvas_backdrop_no" },
+    { value: "static", labelKey: "container.offcanvas_backdrop_static" }
+  ];
+  var fieldCounter = 0;
+  GridEditor.containers.offcanvas = function(ge) {
+    var RESPONSIVE = ge.breakpoints.filter(function(key) {
+      return key !== "xs";
+    });
+    var sections = [];
+    var triggers = triggersFor(ge, "offcanvas", "data-ge-offcanvas-id", "data-ge-offcanvas-target", "offcanvas");
+    var CHECKS = {
+      placement: function(value) {
+        return PLACEMENTS.indexOf(value) !== -1;
+      },
+      backdrop: function(value) {
+        return BACKDROPS.indexOf(value) !== -1;
+      },
+      responsive: function(value) {
+        return value === null || RESPONSIVE.indexOf(value) !== -1;
+      }
+    };
+    function isValid(key, value) {
+      return CHECKS[key] ? CHECKS[key](value) : typeof value === "boolean";
+    }
+    function takes(key) {
+      if (key === "placement") {
+        return JSON.stringify(PLACEMENTS);
+      }
+      if (key === "backdrop") {
+        return JSON.stringify(BACKDROPS);
+      }
+      if (key === "responsive") {
+        return JSON.stringify([null].concat(RESPONSIVE));
+      }
+      return "[true,false]";
+    }
+    function chosen(options, key) {
+      var setting = ge.settings.offcanvas || {};
+      var value = options[key] !== void 0 ? options[key] : setting[key];
+      if (value === void 0) {
+        return DEFAULTS[key];
+      }
+      if (isValid(key, value)) {
+        return value;
+      }
+      ge.warn("offcanvas: " + JSON.stringify(value) + " is not a " + key + ", which takes " + takes(key) + ": " + JSON.stringify(DEFAULTS[key]) + " is used");
+      return DEFAULTS[key];
+    }
+    function isPanelClass(name) {
+      return name === "offcanvas" || /^offcanvas-/.test(name) && RESPONSIVE.indexOf(name.slice(10)) !== -1;
+    }
+    function isPanel(node) {
+      return Array.prototype.some.call(node.classList, isPanelClass);
+    }
+    function panelOf(container) {
+      var id = container.getAttribute("data-ge-offcanvas-id");
+      var own = children(container);
+      return own.filter(function(node) {
+        return id && node.id === id;
+      })[0] || own.filter(isPanel)[0] || null;
+    }
+    function triggerOf(container) {
+      return child(container, "[data-ge-offcanvas-target]");
+    }
+    function dropTriggerMarks(root) {
+      all(root, ".ge-offcanvas-trigger").forEach(function(trigger) {
+        removeClass(trigger, "ge-offcanvas-trigger");
+        dropEmptyClass(trigger);
+      });
+    }
+    function hideClass(responsive) {
+      return "d-" + responsive + "-none";
+    }
+    function read(container) {
+      var panel = panelOf(container);
+      var backdrop = panel.getAttribute("data-bs-backdrop");
+      var responsive = null;
+      Array.prototype.forEach.call(panel.classList, function(name) {
+        if (name !== "offcanvas" && isPanelClass(name)) {
+          responsive = name.slice(10);
+        }
+      });
+      return {
+        placement: PLACEMENTS.filter(function(place) {
+          return hasClass(panel, "offcanvas-" + place);
+        })[0] || "start",
+        backdrop: backdrop === "false" ? false : backdrop === "static" ? "static" : true,
+        scroll: panel.getAttribute("data-bs-scroll") === "true",
+        keyboard: panel.getAttribute("data-bs-keyboard") !== "false",
+        responsive,
+        dark: panel.getAttribute("data-bs-theme") === "dark"
+      };
+    }
+    function setAttribute(panel, name, value) {
+      if (value === null) {
+        panel.removeAttribute(name);
+      } else {
+        panel.setAttribute(name, value);
+      }
+    }
+    function write(container, key, value) {
+      var panel = panelOf(container);
+      if (key === "placement") {
+        PLACEMENTS.forEach(function(place) {
+          removeClass(panel, "offcanvas-" + place);
+        });
+        addClass(panel, "offcanvas-" + value);
+      }
+      if (key === "backdrop") {
+        setAttribute(panel, "data-bs-backdrop", value === true ? null : String(value));
+      }
+      if (key === "scroll") {
+        setAttribute(panel, "data-bs-scroll", value ? "true" : null);
+      }
+      if (key === "keyboard") {
+        setAttribute(panel, "data-bs-keyboard", value ? null : "false");
+      }
+      if (key === "responsive") {
+        var before = read(container).responsive;
+        var trigger = triggerOf(container);
+        var rest = Array.prototype.filter.call(panel.classList, function(name) {
+          return !isPanelClass(name);
+        });
+        panel.className = [value === null ? "offcanvas" : "offcanvas-" + value].concat(rest).join(" ");
+        if (trigger) {
+          if (before !== null) {
+            removeClass(trigger, hideClass(before));
+          }
+          if (value !== null) {
+            addClass(trigger, hideClass(value));
+          }
+          dropEmptyClass(trigger);
+        }
+      }
+      if (key === "dark") {
+        if (value) {
+          panel.setAttribute("data-bs-theme", "dark");
+        } else if (panel.getAttribute("data-bs-theme") === "dark") {
+          panel.removeAttribute("data-bs-theme");
+        }
+      }
+    }
+    function nextId() {
+      return "ge-offcanvas-option-" + ++fieldCounter;
+    }
+    function field(labelKey, control, id) {
+      var box = element("div", { "class": "ge-offcanvas-option mb-2" });
+      box.appendChild(element("label", { "class": "form-label", "for": id }, ge.t(labelKey)));
+      box.appendChild(control);
+      return box;
+    }
+    function checkbox(labelKey, onChange) {
+      var id = nextId();
+      var box = element("div", { "class": "form-check" });
+      var input = box.appendChild(element("input", { "class": "form-check-input", type: "checkbox", id }));
+      box.appendChild(element("label", { "class": "form-check-label", "for": id }, ge.t(labelKey)));
+      input.addEventListener("change", function() {
+        onChange(input.checked);
+      });
+      return { box, input };
+    }
+    function select(choices, onChange) {
+      var id = nextId();
+      var control = element("select", { "class": "form-select form-select-sm", id });
+      choices.forEach(function(choice) {
+        control.appendChild(element("option", { value: choice.value }, choice.label));
+      });
+      control.addEventListener("change", function() {
+        onChange(control.value);
+      });
+      return { id, control };
+    }
+    function createSection(container) {
+      var body = element("div", { "class": "ge-offcanvas-options" });
+      function change(key, value) {
+        write(container, key, value);
+        render();
+      }
+      var translated = function(choice) {
+        return { value: choice.value, label: ge.t(choice.labelKey) };
+      };
+      var selects = {
+        placement: select(PLACEMENT_CHOICES.map(translated), function(value) {
+          change("placement", value);
+        }),
+        backdrop: select(BACKDROP_CHOICES.map(translated), function(value) {
+          change("backdrop", value === "static" ? "static" : value === "true");
+        }),
+        responsive: select([{ value: "", label: ge.t("container.offcanvas_responsive_never") }].concat(
+          RESPONSIVE.map(function(key) {
+            return { value: key, label: ge.t("container.offcanvas_responsive_from", { breakpoint: key }) };
+          })
+        ), function(value) {
+          change("responsive", value === "" ? null : value);
+        })
+      };
+      Object.keys(selects).forEach(function(key) {
+        var box = field(LABELS[key].labelKey, selects[key].control, selects[key].id);
+        box.setAttribute("data-ge-offcanvas-option", key);
+        body.appendChild(box);
+      });
+      var inputs = {};
+      ["scroll", "keyboard", "dark"].forEach(function(key) {
+        var each = checkbox(LABELS[key].labelKey, function(on) {
+          change(key, on);
+        });
+        inputs[key] = each.input;
+        each.box.setAttribute("data-ge-offcanvas-option", key);
+        body.appendChild(each.box);
+      });
+      function render() {
+        var values = read(container);
+        selects.placement.control.value = values.placement;
+        selects.backdrop.control.value = String(values.backdrop);
+        selects.responsive.control.value = values.responsive === null ? "" : values.responsive;
+        Object.keys(inputs).forEach(function(key) {
+          inputs[key].checked = values[key];
+        });
+      }
+      render();
+      sections.push({ node: container, element: body, render });
+      return body;
+    }
+    return {
+      labelKey: "container.add_offcanvas",
+      paneKind: "offcanvas",
+      // The ids a copy of an offcanvas has to rename together
+      references: ["data-ge-offcanvas-id", "data-ge-offcanvas-target"],
+      onInit: triggers.onInit,
+      onDeinit: function() {
+        sections = [];
+        triggers.onDeinit();
+        dropTriggerMarks(ge.canvas);
+      },
+      // What onDeinit and unmark do, on a copy of the canvas
+      cleanMarkup: function(root) {
+        var definition = this;
+        triggers.write(root);
+        dropTriggerMarks(root);
+        all(root, '[data-ge-container="offcanvas"]').forEach(function(container) {
+          definition.unmark(container);
+        });
+      },
+      create: function(options) {
+        options = options || {};
+        var id = ge.containerId("offcanvas");
+        var container = element("div", { "data-ge-container": "offcanvas", "data-ge-offcanvas-id": id });
+        if (options.trigger !== false) {
+          container.appendChild(element("button", {
+            type: "button",
+            "class": "btn btn-primary ge-offcanvas-trigger",
+            "data-ge-offcanvas-target": id
+          }, options.trigger_label || ge.t("container.offcanvas_trigger")));
+        }
+        var panel = container.appendChild(element("div", {
+          "class": "offcanvas",
+          tabindex: "-1",
+          id,
+          "aria-labelledby": id + "-label"
+        }));
+        var header = panel.appendChild(element("div", { "class": "offcanvas-header" }));
+        header.appendChild(element("h5", { "class": "offcanvas-title", id: id + "-label" })).appendChild(element(
+          "span",
+          { "class": "ge-pane-label" },
+          options.title || ge.t("container.offcanvas_title")
+        ));
+        header.appendChild(create('<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>'));
+        panel.appendChild(element("div", { "class": "offcanvas-body" })).appendChild(ge.defaultRegion());
+        KEYS.forEach(function(key) {
+          write(container, key, chosen(options, key));
+        });
+        return container;
+      },
+      mark: function(container) {
+        var header = child(panelOf(container), ".offcanvas-header");
+        all(header, "[data-bs-dismiss]").forEach(function(dismiss) {
+          ge.suspendToggles(dismiss);
+        });
+        all(header, ".offcanvas-title").forEach(function(title) {
+          ge.makeLabelEditable(ge.labelIn(title));
+        });
+      },
+      unmark: function(container) {
+        var header = child(panelOf(container), ".offcanvas-header");
+        if (header) {
+          ge.resumeToggles(header);
+          ge.unwrapLabels(header);
+        }
+        removeClass(container, "ge-offcanvas-collapsed");
+      },
+      /** A page of unfolded panels stays workable if they can be folded away. */
+      tools: function(drawer, container) {
+        ge.createTool(
+          drawer,
+          ge.t("tool.toggle_offcanvas"),
+          "ge-toggle-offcanvas",
+          "bi bi-chevron-bar-contract",
+          function() {
+            toggleClass(container, "ge-offcanvas-collapsed");
+          }
+        );
+      },
+      panelSection: function(node, kind) {
+        if (kind === "offcanvas" && panelOf(node)) {
+          return { labelKey: "container.offcanvas_section", body: createSection(node) };
+        }
+        return null;
+      },
+      // After a view change or a change of classes: the sections follow
+      onRefresh: function(scope) {
+        sections = sections.filter(function(entry) {
+          return entry.element.isConnected;
+        });
+        sections.forEach(function(entry) {
+          if (entry.node === scope || scope.contains(entry.node)) {
+            entry.render();
+          }
+        });
+      }
+    };
+  };
+})();

package/dist/plugins/grideditor.offcanvas.min.js

@@ -0,0 +1 @@
+(()=>{var S=window.GridEditor;if(!S||typeof S.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");function y(n,o){return n?Array.prototype.slice.call(n.querySelectorAll(o)):[]}function P(n,o){return n?Array.prototype.filter.call(n.children,function(f){return!o||f.matches(o)}):[]}function K(n,o){return P(n,o)[0]||null}function Q(n,o,f){var l=n&&n.nodeType===1?n.closest(o):null;return l&&f&&l!==f&&!f.contains(l)?null:l}function Z(n){var o=document.createElement("template");return o.innerHTML=n,Array.prototype.slice.call(o.content.childNodes)}function F(n){for(var o=Z(n.trim()),f=0;f<o.length;f++)if(o[f].nodeType===1)return o[f];return null}function u(n,o,f){var l=document.createElement(n);return Object.keys(o||{}).forEach(function(x){var v=o[x];v!=null&&v!==!1&&l.setAttribute(x,v)}),f!=null&&(l.textContent=f),l}function A(n,o){return N(o).forEach(function(f){n.classList.add(f)}),n}function C(n,o){return N(o).forEach(function(f){n.classList.remove(f)}),n}function M(n,o,f){return N(o).forEach(function(l){f===void 0?n.classList.toggle(l):n.classList.toggle(l,!!f)}),n}function B(n,o){return!!n&&n.nodeType===1&&n.classList.contains(o)}function N(n){return String(n||"").split(/\s+/).filter(Boolean)}function O(n){return n.getAttribute("class")||n.removeAttribute("class"),n}function U(n,o,f,l,x){var v=function(m){var d=Q(m.target,f,n);if(d&&n.contains(d))return l.call(d,m)};return N(o).forEach(function(m){n.addEventListener(m,v,x)}),v}function q(n,o,f,l,x){var v="ge-"+o+"-trigger",m="ge-"+o+"-orphan",d=null;function _(c){return c.getAttribute(f)}function T(c,p){return y(p||n.canvas,"["+f+"]").some(function(g){return _(g)===c})}function E(){y(n.canvas,"["+l+"]").forEach(function(c){A(c,v);var p=c.getAttribute(l);if(c.removeAttribute("data-bs-toggle"),c.removeAttribute("data-bs-target"),T(p)){C(c,m);return}var g=c.closest(".column"),k=g?y(g,"["+f+"]"):[];if(k.length===1){c.setAttribute(l,_(k[0])),C(c,m);return}A(c,m),n.operate(function(){n.emit(o+"-orphan",n.payloadFor(o,c,{parent:c.parentElement,source:"api",missing:p}))})})}function L(c){c=c||n.canvas,y(c,"["+l+"]").forEach(function(p){var g=p.getAttribute(l);C(p,m),O(p),T(g,c)&&(p.setAttribute("data-bs-toggle",x),p.setAttribute("data-bs-target","#"+g))})}return{write:L,onInit:function(){E(),d&&d.abort(),d=new AbortController,U(n.canvas,"click","."+v+", ["+l+"]",function(c){B(n.canvas,"ge-editing")&&c.preventDefault()},{signal:d.signal})},onDeinit:function(){d&&d.abort(),d=null,L()}}}Object.assign(S.locales.en,{"container.add_offcanvas":"Offcanvas","container.offcanvas_title":"Title","container.offcanvas_trigger":"Open","tool.toggle_offcanvas":"Fold this offcanvas away while editing","container.offcanvas_section":"Offcanvas","container.offcanvas_placement":"Placement","container.offcanvas_start":"Start","container.offcanvas_end":"End","container.offcanvas_top":"Top","container.offcanvas_bottom":"Bottom","container.offcanvas_backdrop":"Backdrop","container.offcanvas_backdrop_yes":"Yes","container.offcanvas_backdrop_no":"No","container.offcanvas_backdrop_static":"Static","container.offcanvas_scroll":"Allow body scroll","container.offcanvas_keyboard":"Close with Esc","container.offcanvas_responsive":"Responsive","container.offcanvas_responsive_never":"Always offcanvas","container.offcanvas_responsive_from":"Inline from {breakpoint}","container.offcanvas_dark":"Dark theme"});var j={placement:"start",backdrop:!0,scroll:!1,keyboard:!0,responsive:null,dark:!1},$=["placement","backdrop","scroll","keyboard","responsive","dark"],I=["start","end","top","bottom"],G=[!0,!1,"static"],Y={placement:{labelKey:"container.offcanvas_placement"},backdrop:{labelKey:"container.offcanvas_backdrop"},responsive:{labelKey:"container.offcanvas_responsive"},scroll:{labelKey:"container.offcanvas_scroll"},keyboard:{labelKey:"container.offcanvas_keyboard"},dark:{labelKey:"container.offcanvas_dark"}},ee=[{value:"start",labelKey:"container.offcanvas_start"},{value:"end",labelKey:"container.offcanvas_end"},{value:"top",labelKey:"container.offcanvas_top"},{value:"bottom",labelKey:"container.offcanvas_bottom"}],ne=[{value:"true",labelKey:"container.offcanvas_backdrop_yes"},{value:"false",labelKey:"container.offcanvas_backdrop_no"},{value:"static",labelKey:"container.offcanvas_backdrop_static"}],te=0;S.containers.offcanvas=function(n){var o=n.breakpoints.filter(function(e){return e!=="xs"}),f=[],l=q(n,"offcanvas","data-ge-offcanvas-id","data-ge-offcanvas-target","offcanvas"),x={placement:function(e){return I.indexOf(e)!==-1},backdrop:function(e){return G.indexOf(e)!==-1},responsive:function(e){return e===null||o.indexOf(e)!==-1}};function v(e,t){return x[e]?x[e](t):typeof t=="boolean"}function m(e){return e==="placement"?JSON.stringify(I):e==="backdrop"?JSON.stringify(G):e==="responsive"?JSON.stringify([null].concat(o)):"[true,false]"}function d(e,t){var a=n.settings.offcanvas||{},r=e[t]!==void 0?e[t]:a[t];return r===void 0?j[t]:v(t,r)?r:(n.warn("offcanvas: "+JSON.stringify(r)+" is not a "+t+", which takes "+m(t)+": "+JSON.stringify(j[t])+" is used"),j[t])}function _(e){return e==="offcanvas"||/^offcanvas-/.test(e)&&o.indexOf(e.slice(10))!==-1}function T(e){return Array.prototype.some.call(e.classList,_)}function E(e){var t=e.getAttribute("data-ge-offcanvas-id"),a=P(e);return a.filter(function(r){return t&&r.id===t})[0]||a.filter(T)[0]||null}function L(e){return K(e,"[data-ge-offcanvas-target]")}function c(e){y(e,".ge-offcanvas-trigger").forEach(function(t){C(t,"ge-offcanvas-trigger"),O(t)})}function p(e){return"d-"+e+"-none"}function g(e){var t=E(e),a=t.getAttribute("data-bs-backdrop"),r=null;return Array.prototype.forEach.call(t.classList,function(s){s!=="offcanvas"&&_(s)&&(r=s.slice(10))}),{placement:I.filter(function(s){return B(t,"offcanvas-"+s)})[0]||"start",backdrop:a==="false"?!1:a==="static"?"static":!0,scroll:t.getAttribute("data-bs-scroll")==="true",keyboard:t.getAttribute("data-bs-keyboard")!=="false",responsive:r,dark:t.getAttribute("data-bs-theme")==="dark"}}function k(e,t,a){a===null?e.removeAttribute(t):e.setAttribute(t,a)}function R(e,t,a){var r=E(e);if(t==="placement"&&(I.forEach(function(i){C(r,"offcanvas-"+i)}),A(r,"offcanvas-"+a)),t==="backdrop"&&k(r,"data-bs-backdrop",a===!0?null:String(a)),t==="scroll"&&k(r,"data-bs-scroll",a?"true":null),t==="keyboard"&&k(r,"data-bs-keyboard",a?null:"false"),t==="responsive"){var s=g(e).responsive,b=L(e),w=Array.prototype.filter.call(r.classList,function(i){return!_(i)});r.className=[a===null?"offcanvas":"offcanvas-"+a].concat(w).join(" "),b&&(s!==null&&C(b,p(s)),a!==null&&A(b,p(a)),O(b))}t==="dark"&&(a?r.setAttribute("data-bs-theme","dark"):r.getAttribute("data-bs-theme")==="dark"&&r.removeAttribute("data-bs-theme"))}function H(){return"ge-offcanvas-option-"+ ++te}function V(e,t,a){var r=u("div",{class:"ge-offcanvas-option mb-2"});return r.appendChild(u("label",{class:"form-label",for:a},n.t(e))),r.appendChild(t),r}function W(e,t){var a=H(),r=u("div",{class:"form-check"}),s=r.appendChild(u("input",{class:"form-check-input",type:"checkbox",id:a}));return r.appendChild(u("label",{class:"form-check-label",for:a},n.t(e))),s.addEventListener("change",function(){t(s.checked)}),{box:r,input:s}}function D(e,t){var a=H(),r=u("select",{class:"form-select form-select-sm",id:a});return e.forEach(function(s){r.appendChild(u("option",{value:s.value},s.label))}),r.addEventListener("change",function(){t(r.value)}),{id:a,control:r}}function z(e){var t=u("div",{class:"ge-offcanvas-options"});function a(i,h){R(e,i,h),w()}var r=function(i){return{value:i.value,label:n.t(i.labelKey)}},s={placement:D(ee.map(r),function(i){a("placement",i)}),backdrop:D(ne.map(r),function(i){a("backdrop",i==="static"?"static":i==="true")}),responsive:D([{value:"",label:n.t("container.offcanvas_responsive_never")}].concat(o.map(function(i){return{value:i,label:n.t("container.offcanvas_responsive_from",{breakpoint:i})}})),function(i){a("responsive",i===""?null:i)})};Object.keys(s).forEach(function(i){var h=V(Y[i].labelKey,s[i].control,s[i].id);h.setAttribute("data-ge-offcanvas-option",i),t.appendChild(h)});var b={};["scroll","keyboard","dark"].forEach(function(i){var h=W(Y[i].labelKey,function(X){a(i,X)});b[i]=h.input,h.box.setAttribute("data-ge-offcanvas-option",i),t.appendChild(h.box)});function w(){var i=g(e);s.placement.control.value=i.placement,s.backdrop.control.value=String(i.backdrop),s.responsive.control.value=i.responsive===null?"":i.responsive,Object.keys(b).forEach(function(h){b[h].checked=i[h]})}return w(),f.push({node:e,element:t,render:w}),t}return{labelKey:"container.add_offcanvas",paneKind:"offcanvas",references:["data-ge-offcanvas-id","data-ge-offcanvas-target"],onInit:l.onInit,onDeinit:function(){f=[],l.onDeinit(),c(n.canvas)},cleanMarkup:function(e){var t=this;l.write(e),c(e),y(e,'[data-ge-container="offcanvas"]').forEach(function(a){t.unmark(a)})},create:function(e){e=e||{};var t=n.containerId("offcanvas"),a=u("div",{"data-ge-container":"offcanvas","data-ge-offcanvas-id":t});e.trigger!==!1&&a.appendChild(u("button",{type:"button",class:"btn btn-primary ge-offcanvas-trigger","data-ge-offcanvas-target":t},e.trigger_label||n.t("container.offcanvas_trigger")));var r=a.appendChild(u("div",{class:"offcanvas",tabindex:"-1",id:t,"aria-labelledby":t+"-label"})),s=r.appendChild(u("div",{class:"offcanvas-header"}));return s.appendChild(u("h5",{class:"offcanvas-title",id:t+"-label"})).appendChild(u("span",{class:"ge-pane-label"},e.title||n.t("container.offcanvas_title"))),s.appendChild(F('<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>')),r.appendChild(u("div",{class:"offcanvas-body"})).appendChild(n.defaultRegion()),$.forEach(function(b){R(a,b,d(e,b))}),a},mark:function(e){var t=K(E(e),".offcanvas-header");y(t,"[data-bs-dismiss]").forEach(function(a){n.suspendToggles(a)}),y(t,".offcanvas-title").forEach(function(a){n.makeLabelEditable(n.labelIn(a))})},unmark:function(e){var t=K(E(e),".offcanvas-header");t&&(n.resumeToggles(t),n.unwrapLabels(t)),C(e,"ge-offcanvas-collapsed")},tools:function(e,t){n.createTool(e,n.t("tool.toggle_offcanvas"),"ge-toggle-offcanvas","bi bi-chevron-bar-contract",function(){M(t,"ge-offcanvas-collapsed")})},panelSection:function(e,t){return t==="offcanvas"&&E(e)?{labelKey:"container.offcanvas_section",body:z(e)}:null},onRefresh:function(e){f=f.filter(function(t){return t.element.isConnected}),f.forEach(function(t){(t.node===e||e.contains(t.node))&&t.render()})}}};})();