fokus-styles 2.0.0 → 2.3.0

package/dist/js/fokus.js

@@ -31,21 +31,30 @@ var FokusStyles = (() => {
     Dropdown: () => Dropdown,
     FileDrop: () => FileDrop,
     FileUploadAdvanced: () => FileUploadAdvanced,
+    FormValidation: () => FormValidation,
     Modal: () => Modal,
+    Navbar: () => Navbar,
     NestedMenu: () => NestedMenu,
     NotificationCenter: () => NotificationCenter,
     Offcanvas: () => Offcanvas,
+    Pagination: () => Pagination,
     Popover: () => Popover,
     RangeSlider: () => RangeSlider,
+    Scrollspy: () => Scrollspy,
     Select: () => Select,
+    Spinner: () => Spinner,
     Stepper: () => Stepper,
     Tabs: () => Tabs,
     Tag: () => Tag,
+    Theme: () => Theme,
     Toast: () => Toast,
     Tooltip: () => Tooltip,
     TreeView: () => TreeView,
     confirm: () => confirm,
-    core: () => core_exports
+    core: () => core_exports,
+    createFocusTrap: () => createFocusTrap,
+    getFocusableElements: () => getFocusableElements,
+    onEscapeKey: () => onEscapeKey
   });
 
   // packages/fokus-js/js/core/index.js
@@ -63,7 +72,9 @@ var FokusStyles = (() => {
     onClickOutside: () => onClickOutside,
     onEscapeKey: () => onEscapeKey,
     onTransitionEnd: () => onTransitionEnd,
+    registerOverlay: () => registerOverlay,
     unlockScroll: () => unlockScroll,
+    unregisterOverlay: () => unregisterOverlay,
     watchPosition: () => watchPosition
   });
 
@@ -160,6 +171,14 @@ var FokusStyles = (() => {
   var paddingCompensated = false;
   var previousOverflow = "";
   var previousPaddingRight = "";
+  var activeOverlays = [];
+  function registerOverlay(instance) {
+    if (!activeOverlays.includes(instance)) activeOverlays.push(instance);
+  }
+  function unregisterOverlay(instance) {
+    const index = activeOverlays.lastIndexOf(instance);
+    if (index >= 0) activeOverlays.splice(index, 1);
+  }
   function lockScroll() {
     lockCount += 1;
     if (lockCount > 1) return;
@@ -197,6 +216,23 @@ var FokusStyles = (() => {
     return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null);
   }
   function createFocusTrap(container) {
+    const inertSiblings = [];
+    const setSiblingsInert = (value) => {
+      if (!container.parentElement) return;
+      [...container.parentElement.children].filter((el) => el !== container).forEach((el) => {
+        if (value) {
+          inertSiblings.push({ el, value: el.inert, ariaHidden: el.getAttribute("aria-hidden") });
+          el.inert = true;
+          el.setAttribute("aria-hidden", "true");
+        } else {
+          const previous = inertSiblings.find((item) => item.el === el);
+          if (previous) {
+            el.inert = previous.value;
+            previous.ariaHidden === null ? el.removeAttribute("aria-hidden") : el.setAttribute("aria-hidden", previous.ariaHidden);
+          }
+        }
+      });
+    };
     function handleKeydown(event) {
       if (event.key !== "Tab") return;
       const focusable = getFocusableElements(container);
@@ -217,11 +253,14 @@ var FokusStyles = (() => {
     container.addEventListener("keydown", handleKeydown);
     return {
       activate() {
+        setSiblingsInert(true);
         const focusable = getFocusableElements(container);
         if (focusable.length > 0) focusable[0].focus();
       },
       deactivate() {
         container.removeEventListener("keydown", handleKeydown);
+        setSiblingsInert(false);
+        inertSiblings.length = 0;
       }
     };
   }
@@ -315,23 +354,25 @@ var FokusStyles = (() => {
 
   // packages/fokus-js/js/core/register.js
   function createInstanceRegistry() {
-    const instances25 = /* @__PURE__ */ new WeakMap();
+    const instances31 = /* @__PURE__ */ new WeakMap();
     return {
       get(el) {
-        return instances25.get(el);
+        return instances31.get(el);
       },
       set(el, instance) {
-        instances25.set(el, instance);
+        instances31.set(el, instance);
       },
       delete(el) {
-        instances25.delete(el);
+        instances31.delete(el);
       }
     };
   }
-  function autoInit(name, Ctor) {
+  function autoInit(name, Ctor, options = {}) {
+    var _a;
     if (typeof document === "undefined") return;
+    const selector = (_a = options.selector) != null ? _a : `[data-fs="${name}"]`;
     const init = () => {
-      document.querySelectorAll(`[data-fs="${name}"]`).forEach((el) => {
+      document.querySelectorAll(selector).forEach((el) => {
         if (!Ctor.getInstance(el)) new Ctor(el);
       });
     };
@@ -744,7 +785,7 @@ var FokusStyles = (() => {
 
   // packages/fokus-js/js/modal.js
   var instances4 = createInstanceRegistry();
-  var Modal = class {
+  var Modal = class _Modal {
     constructor(triggerEl, options = {}) {
       var _a, _b;
       const targetSelector = triggerEl.getAttribute("data-fs-target");
@@ -779,6 +820,20 @@ var FokusStyles = (() => {
     static getInstance(el) {
       return instances4.get(el);
     }
+    static getOrCreateInstance(el, options = {}) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Modal(el, options);
+    }
+    static show(el, options = {}) {
+      return this.getOrCreateInstance(el, options).show();
+    }
+    static hide(el) {
+      var _a;
+      return (_a = this.getInstance(el)) == null ? void 0 : _a.hide();
+    }
+    static toggle(el, options = {}) {
+      return this.getOrCreateInstance(el, options).toggle();
+    }
     _handleTriggerClick(event) {
       event.preventDefault();
       this.show();
@@ -790,7 +845,9 @@ var FokusStyles = (() => {
     }
     show() {
       if (this.isOpen) return;
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:show", { bubbles: true }));
       this.isOpen = true;
+      registerOverlay(this);
       this.modalEl.classList.add("is-open");
       this.modalEl.setAttribute("aria-hidden", "false");
       lockScroll();
@@ -799,12 +856,15 @@ var FokusStyles = (() => {
       if (!this.staticBackdrop) {
         this._outsideClickCleanup = onClickOutside(this.dialogEl, () => this.hide());
       }
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
       this.triggerEl.dispatchEvent(new CustomEvent("fs:modal:shown", { bubbles: true }));
     }
     hide() {
       var _a, _b;
       if (!this.isOpen) return;
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:hide", { bubbles: true }));
       this.isOpen = false;
+      unregisterOverlay(this);
       this.modalEl.classList.remove("is-open");
       this.modalEl.setAttribute("aria-hidden", "true");
       unlockScroll();
@@ -813,6 +873,7 @@ var FokusStyles = (() => {
       (_b = this._outsideClickCleanup) == null ? void 0 : _b.call(this);
       this._outsideClickCleanup = null;
       this.triggerEl.focus();
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
       this.triggerEl.dispatchEvent(new CustomEvent("fs:modal:hidden", { bubbles: true }));
     }
     toggle() {
@@ -830,7 +891,7 @@ var FokusStyles = (() => {
       instances4.delete(this.triggerEl);
     }
   };
-  autoInit("modal", Modal);
+  autoInit("modal", Modal, { selector: '[data-fs="modal"], [data-fs-toggle="modal"]' });
 
   // packages/fokus-js/js/confirm.js
   var idCounter3 = 0;
@@ -1007,7 +1068,7 @@ var FokusStyles = (() => {
 
   // packages/fokus-js/js/offcanvas.js
   var instances7 = createInstanceRegistry();
-  var Offcanvas = class {
+  var Offcanvas = class _Offcanvas {
     constructor(triggerEl, options = {}) {
       var _a, _b;
       const targetSelector = triggerEl.getAttribute("data-fs-target");
@@ -1043,6 +1104,20 @@ var FokusStyles = (() => {
     static getInstance(el) {
       return instances7.get(el);
     }
+    static getOrCreateInstance(el, options = {}) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Offcanvas(el, options);
+    }
+    static show(el, options = {}) {
+      return this.getOrCreateInstance(el, options).show();
+    }
+    static hide(el) {
+      var _a;
+      return (_a = this.getInstance(el)) == null ? void 0 : _a.hide();
+    }
+    static toggle(el, options = {}) {
+      return this.getOrCreateInstance(el, options).toggle();
+    }
     _handleTriggerClick(event) {
       event.preventDefault();
       this.show();
@@ -1054,7 +1129,9 @@ var FokusStyles = (() => {
     }
     show() {
       if (this.isOpen) return;
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:show", { bubbles: true }));
       this.isOpen = true;
+      registerOverlay(this);
       if (this.hasBackdrop) {
         this._backdropEl = document.createElement("div");
         this._backdropEl.className = "fs-offcanvas-backdrop";
@@ -1077,12 +1154,15 @@ var FokusStyles = (() => {
           this.hide();
         });
       }
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
       this.triggerEl.dispatchEvent(new CustomEvent("fs:offcanvas:shown", { bubbles: true }));
     }
     hide() {
       var _a, _b, _c;
       if (!this.isOpen) return;
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:hide", { bubbles: true }));
       this.isOpen = false;
+      unregisterOverlay(this);
       this.offcanvasEl.classList.remove("is-open");
       this.offcanvasEl.setAttribute("aria-hidden", "true");
       unlockScroll();
@@ -1093,6 +1173,7 @@ var FokusStyles = (() => {
       (_c = this._outsideClickCleanup) == null ? void 0 : _c.call(this);
       this._outsideClickCleanup = null;
       this.triggerEl.focus();
+      this.triggerEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
       this.triggerEl.dispatchEvent(new CustomEvent("fs:offcanvas:hidden", { bubbles: true }));
     }
     toggle() {
@@ -1110,7 +1191,7 @@ var FokusStyles = (() => {
       instances7.delete(this.triggerEl);
     }
   };
-  autoInit("offcanvas", Offcanvas);
+  autoInit("offcanvas", Offcanvas, { selector: '[data-fs="offcanvas"], [data-fs-toggle="offcanvas"]' });
 
   // packages/fokus-js/js/select.js
   var instances8 = createInstanceRegistry();
@@ -1217,7 +1298,8 @@ var FokusStyles = (() => {
   var Accordion = class {
     constructor(accordionEl) {
       this.accordionEl = accordionEl;
-      this.exclusive = accordionEl.getAttribute("data-multiple") !== "true";
+      this.exclusive = accordionEl.getAttribute("data-multiple") !== "true" && accordionEl.getAttribute("data-fs-always-open") !== "true";
+      this.alwaysOpen = accordionEl.getAttribute("data-fs-always-open") === "true";
       this.items = [];
       const buttons = Array.from(accordionEl.querySelectorAll(".fs-accordion-button"));
       buttons.forEach((button) => {
@@ -1246,6 +1328,7 @@ var FokusStyles = (() => {
     _toggle(entry) {
       const isOpen = entry.button.getAttribute("aria-expanded") === "true";
       if (isOpen) {
+        if (this.alwaysOpen) return;
         this._close(entry);
         return;
       }
@@ -1255,16 +1338,20 @@ var FokusStyles = (() => {
       this._open(entry);
     }
     _open(entry) {
+      entry.button.dispatchEvent(new CustomEvent("fs:show", { bubbles: true }));
       entry.button.setAttribute("aria-expanded", "true");
       entry.panel.hidden = false;
       expand(entry.panel).then(() => {
+        entry.button.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
         entry.button.dispatchEvent(new CustomEvent("fs:accordion:shown", { bubbles: true }));
       });
     }
     _close(entry) {
+      entry.button.dispatchEvent(new CustomEvent("fs:hide", { bubbles: true }));
       entry.button.setAttribute("aria-expanded", "false");
       collapse(entry.panel).then(() => {
         entry.panel.hidden = true;
+        entry.button.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
         entry.button.dispatchEvent(new CustomEvent("fs:accordion:hidden", { bubbles: true }));
       });
     }
@@ -1436,8 +1523,10 @@ var FokusStyles = (() => {
     }
     show() {
       if (this.isOpen) return;
+      this.toastEl.dispatchEvent(new CustomEvent("fs:show", { bubbles: true }));
       this.isOpen = true;
       expand(this.toastEl).then(() => {
+        this.toastEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
         this.toastEl.dispatchEvent(new CustomEvent("fs:toast:shown", { bubbles: true }));
       });
       if (this.autohide) {
@@ -1446,10 +1535,12 @@ var FokusStyles = (() => {
     }
     hide() {
       if (!this.isOpen) return;
+      this.toastEl.dispatchEvent(new CustomEvent("fs:hide", { bubbles: true }));
       this.isOpen = false;
       clearTimeout(this._hideTimer);
       this._hideTimer = null;
       collapse(this.toastEl).then(() => {
+        this.toastEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
         this.toastEl.dispatchEvent(new CustomEvent("fs:toast:hidden", { bubbles: true }));
       });
     }
@@ -3823,6 +3914,250 @@ var FokusStyles = (() => {
     }
   };
   autoInit("file-upload-advanced", FileUploadAdvanced);
+
+  // packages/fokus-js/js/theme.js
+  var instances25 = createInstanceRegistry();
+  var Theme = class _Theme {
+    constructor(root = document.documentElement) {
+      this.root = root;
+      instances25.set(root, this);
+    }
+    static getInstance(root = document.documentElement) {
+      return instances25.get(root);
+    }
+    static getOrCreateInstance(root = document.documentElement) {
+      var _a;
+      return (_a = this.getInstance(root)) != null ? _a : new _Theme(root);
+    }
+    static set(mode, root = document.documentElement) {
+      return this.getOrCreateInstance(root).set(mode);
+    }
+    get() {
+      var _a, _b;
+      return (_b = (_a = this.root.getAttribute("data-fs-theme")) != null ? _a : this.root.getAttribute("data-theme")) != null ? _b : "light";
+    }
+    set(mode) {
+      if (!["light", "dark", "auto"].includes(mode)) throw new TypeError("FokusStyles.Theme: modo inv\xE1lido.");
+      this.root.setAttribute("data-fs-theme", mode);
+      this.root.setAttribute("data-theme", mode === "dark" ? "dark" : "light");
+      this.root.dispatchEvent(new CustomEvent("fs:theme:change", { bubbles: true, detail: { mode } }));
+      return this;
+    }
+    dispose() {
+      instances25.delete(this.root);
+    }
+  };
+
+  // packages/fokus-js/js/navbar.js
+  var instances26 = createInstanceRegistry();
+  var Navbar = class _Navbar {
+    constructor(navbarEl) {
+      var _a;
+      this.navbarEl = navbarEl;
+      this.toggleEl = navbarEl.querySelector('[data-fs-toggle="navbar"]');
+      const target = (_a = this.toggleEl) == null ? void 0 : _a.getAttribute("data-fs-target");
+      this.menuEl = target ? document.querySelector(target) : navbarEl.querySelector(".fs-navbar-collapse");
+      if (!this.toggleEl || !this.menuEl) return;
+      this._toggle = () => this.toggle();
+      this._escape = (event) => {
+        if (event.key === "Escape" && this.isOpen()) this.hide();
+      };
+      this.toggleEl.addEventListener("click", this._toggle);
+      this.menuEl.addEventListener("keydown", this._escape);
+      instances26.set(navbarEl, this);
+    }
+    static getInstance(el) {
+      return instances26.get(el);
+    }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Navbar(el);
+    }
+    isOpen() {
+      var _a;
+      return (_a = this.menuEl) == null ? void 0 : _a.classList.contains("is-open");
+    }
+    show() {
+      this.menuEl.classList.add("is-open");
+      this.menuEl.hidden = false;
+      this.toggleEl.setAttribute("aria-expanded", "true");
+      this.navbarEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
+    }
+    hide() {
+      this.menuEl.classList.remove("is-open");
+      this.menuEl.hidden = true;
+      this.toggleEl.setAttribute("aria-expanded", "false");
+      this.toggleEl.focus();
+      this.navbarEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
+    }
+    toggle() {
+      this.isOpen() ? this.hide() : this.show();
+    }
+    dispose() {
+      var _a, _b;
+      (_a = this.toggleEl) == null ? void 0 : _a.removeEventListener("click", this._toggle);
+      (_b = this.menuEl) == null ? void 0 : _b.removeEventListener("keydown", this._escape);
+      instances26.delete(this.navbarEl);
+    }
+  };
+  autoInit("navbar", Navbar);
+
+  // packages/fokus-js/js/scrollspy.js
+  var instances27 = createInstanceRegistry();
+  var Scrollspy = class _Scrollspy {
+    constructor(navEl) {
+      this.navEl = navEl;
+      this.links = [...navEl.querySelectorAll('a[href^="#"]')];
+      this.sections = this.links.map((link) => document.querySelector(link.getAttribute("href"))).filter(Boolean);
+      this.observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => entries.forEach((entry) => entry.isIntersecting && this.activate(entry.target)), { rootMargin: "-20% 0px -65%" });
+      this.sections.forEach((section) => {
+        var _a;
+        return (_a = this.observer) == null ? void 0 : _a.observe(section);
+      });
+      this._onScroll = () => {
+        if (this.observer) return;
+        const current = this.sections.filter((section) => section.getBoundingClientRect().top <= window.innerHeight * 0.35).at(-1);
+        if (current) this.activate(current);
+      };
+      if (!this.observer) window.addEventListener("scroll", this._onScroll, { passive: true });
+      instances27.set(navEl, this);
+    }
+    static getInstance(el) {
+      return instances27.get(el);
+    }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Scrollspy(el);
+    }
+    activate(section) {
+      this.links.forEach((link) => link.classList.toggle("is-active", link.getAttribute("href") === `#${section.id}`));
+      this.navEl.dispatchEvent(new CustomEvent("fs:scrollspy:activate", { bubbles: true, detail: { section } }));
+    }
+    dispose() {
+      var _a;
+      (_a = this.observer) == null ? void 0 : _a.disconnect();
+      window.removeEventListener("scroll", this._onScroll);
+      instances27.delete(this.navEl);
+    }
+  };
+  autoInit("scrollspy", Scrollspy);
+
+  // packages/fokus-js/js/form-validation.js
+  var instances28 = createInstanceRegistry();
+  var FormValidation = class _FormValidation {
+    constructor(form) {
+      this.form = form;
+      this._submit = (event) => this.validate(event);
+      form.addEventListener("submit", this._submit);
+      instances28.set(form, this);
+    }
+    static getInstance(el) {
+      return instances28.get(el);
+    }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _FormValidation(el);
+    }
+    validate(event) {
+      const valid = this.form.checkValidity();
+      this.form.classList.add("fs-was-validated");
+      this.form.querySelectorAll('[required], [aria-required="true"]').forEach((field) => field.setAttribute("aria-invalid", String(!field.checkValidity())));
+      if (!valid) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      this.form.dispatchEvent(new CustomEvent("fs:form:validated", { bubbles: true, detail: { valid } }));
+      return valid;
+    }
+    dispose() {
+      this.form.removeEventListener("submit", this._submit);
+      instances28.delete(this.form);
+    }
+  };
+  autoInit("form-validation", FormValidation);
+
+  // packages/fokus-js/js/spinner.js
+  var instances29 = createInstanceRegistry();
+  var Spinner = class _Spinner {
+    constructor(element) {
+      this.element = element;
+      this._setLoading(element.hasAttribute("data-fs-loading") && element.getAttribute("data-fs-loading") !== "false");
+      instances29.set(element, this);
+    }
+    static getInstance(el) {
+      return instances29.get(el);
+    }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Spinner(el);
+    }
+    _setLoading(value) {
+      this.loading = value;
+      this.element.toggleAttribute("aria-busy", value);
+      this.element.toggleAttribute("data-fs-loading", value);
+    }
+    start() {
+      this._setLoading(true);
+      this.element.dispatchEvent(new CustomEvent("fs:loading:start", { bubbles: true }));
+    }
+    stop() {
+      this._setLoading(false);
+      this.element.dispatchEvent(new CustomEvent("fs:loading:stop", { bubbles: true }));
+    }
+    toggle() {
+      this.loading ? this.stop() : this.start();
+    }
+    dispose() {
+      instances29.delete(this.element);
+    }
+  };
+  autoInit("spinner", Spinner);
+
+  // packages/fokus-js/js/pagination.js
+  var instances30 = createInstanceRegistry();
+  var Pagination = class _Pagination {
+    constructor(element) {
+      this.element = element;
+      this.current = Number(element.getAttribute("data-fs-page")) || 1;
+      this.total = Number(element.getAttribute("data-fs-pages")) || element.querySelectorAll("[data-fs-page]").length || 1;
+      this._click = (event) => {
+        const button = event.target.closest("[data-fs-page]");
+        if (!button || !this.element.contains(button)) return;
+        event.preventDefault();
+        this.goTo(Number(button.getAttribute("data-fs-page")));
+      };
+      element.addEventListener("click", this._click);
+      instances30.set(element, this);
+      this._render();
+    }
+    static getInstance(el) {
+      return instances30.get(el);
+    }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Pagination(el);
+    }
+    goTo(page) {
+      const next = Math.max(1, Math.min(this.total, page));
+      if (next === this.current) return;
+      this.current = next;
+      this.element.setAttribute("data-fs-page", String(next));
+      this._render();
+      this.element.dispatchEvent(new CustomEvent("fs:pagination:change", { bubbles: true, detail: { page: next, total: this.total } }));
+    }
+    _render() {
+      this.element.querySelectorAll("[data-fs-page]").forEach((item) => {
+        const active = Number(item.getAttribute("data-fs-page")) === this.current;
+        item.classList.toggle("is-active", active);
+        item.setAttribute("aria-current", active ? "page" : "false");
+      });
+    }
+    dispose() {
+      this.element.removeEventListener("click", this._click);
+      instances30.delete(this.element);
+    }
+  };
+  autoInit("pagination", Pagination);
   return __toCommonJS(fokus_exports);
 })();
 //# sourceMappingURL=fokus.js.map