@diplodoc/transform 4.32.2 → 4.34.2-beta1

package/dist/js/yfm.js

@@ -108,55 +108,62 @@
 
   // node_modules/@diplodoc/tabs-extension/build/runtime/index.js
   (() => {
-    var X = "yfm-tabs", V = "yfm-tabs-vertical", Q = "yfm-tab-list", R = "yfm-tab", f = "yfm-tab-panel", G = "active";
-    var h = "data-diplodoc-radio-forced", y = "data-diplodoc-group", L = "data-diplodoc-key", S = "data-diplodoc-id";
-    var v = "defaultTabsGroup-";
-    var x = Symbol.for("diplodocTabs");
-    var u = (r) => {
-      let t = r.composedPath();
-      return Array.isArray(t) && t.length > 0 ? t[0] : r.target;
-    }, O = (r) => {
-      let t = u(r);
+    var v = "yfm-tabs", W = "yfm-tab", O = "yfm-tab-panel", Q = "yfm-tab-list", m = "active";
+    var G = "data-diplodoc-group", T = "data-diplodoc-key", y = "data-diplodoc-variant", H = "data-diplodoc-id", L = "defaultTabsGroup-";
+    var X = "data-diplodoc-forced";
+    var U = "yfm-tabs-dropdown-select";
+    var N = "yfm-tabs-vertical";
+    var h = Symbol.for("diplodocTabs");
+    var f = (d) => {
+      let t = d.composedPath();
+      return Array.isArray(t) && t.length > 0 ? t[0] : d.target;
+    }, Z = (d) => {
+      let t = f(d);
       return !t || !t.matches;
-    }, E = (r) => Math.abs(r.scrollHeight - r.clientHeight) > 1 ? r : r.parentElement ? E(r.parentElement) : void 0, F = (r, t) => {
-      let e = r.getBoundingClientRect(), i = t.getBoundingClientRect();
-      return { top: e.top - i.top, left: e.left - i.left, scrollTop: t.scrollTop, scrollLeft: t.scrollLeft };
+    }, F = (d) => Math.abs(d.scrollHeight - d.clientHeight) > 1 ? d : d.parentElement ? F(d.parentElement) : void 0, R = (d, t) => {
+      let e = d.getBoundingClientRect(), g = t.getBoundingClientRect();
+      return { top: e.top - g.top, left: e.left - g.left, scrollTop: t.scrollTop, scrollLeft: t.scrollLeft };
     };
-    var s = { TABS: `.${X}`, TAB_LIST: `.${Q}`, TAB: `.${R}`, TAB_PANEL: `.${f}`, VERTICAL_TABS: `.${V}` }, T = class {
+    var C = { TABS: `.${v}`, TAB_LIST: `.${Q}`, TAB: `.${W}`, TAB_PANEL: `.${O}`, VERTICAL_TABS: `.${N}` }, x = class {
       constructor(t) {
         this._onSelectTabHandlers = /* @__PURE__ */ new Set();
         this._document = t, this._document.addEventListener("click", (e) => {
-          let i = u(e), o = this.areTabsVertical(i);
-          if (O(e) || !(this.isValidTabElement(i) || o)) return;
-          let c = this.getTabDataFromHTMLElement(i);
-          c && this._selectTab(c, i);
+          let g = f(e);
+          if (e.target && this.hideAllDropdown(e.target), Z(e)) return;
+          if (this.isElementDropdownSelect(g)) {
+            g.classList.toggle(m);
+            return;
+          }
+          if (!this.isValidTabElement(g)) return;
+          let I = this.getTabDataFromHTMLElement(g);
+          I && this._selectTab(I, g);
         }), this._document.addEventListener("keydown", (e) => {
-          let i = null;
+          let g = null;
           switch (e.key) {
             case "ArrowLeft": {
-              i = "left";
+              g = "left";
               break;
             }
             case "ArrowRight": {
-              i = "right";
+              g = "right";
               break;
             }
             case "ArrowUp": {
-              i = "left";
+              g = "left";
               break;
             }
             case "ArrowDown": {
-              i = "right";
+              g = "right";
               break;
             }
           }
-          if (!i) return;
-          let o = u(e);
-          if (O(e) || !this.isValidTabElement(o)) return;
-          let { tabs: c, nodes: a } = this.getTabs(o), l = this.getTabDataFromHTMLElement(o), n = c.findIndex(({ key: d }) => (l == null ? void 0 : l.key) && d === l.key);
-          if (!l || c.length <= 1 || n === -1) return;
-          let g = (n + (i === "left" ? -1 : 1) + c.length) % c.length;
-          this.selectTab(c[g]), a[g].focus();
+          if (!g) return;
+          let I = f(e);
+          if (Z(e) || !this.isValidTabElement(I)) return;
+          let { tabs: A, nodes: l } = this.getTabs(I), o = this.getTabDataFromHTMLElement(I), i = A.findIndex(({ key: n }) => (o == null ? void 0 : o.key) && n === o.key);
+          if (!o || A.length <= 1 || i === -1) return;
+          let c = (i + (g === "left" ? -1 : 1) + A.length) % A.length;
+          this.selectTab(A[c]), l[c].focus();
         });
       }
       onSelectTab(t) {
@@ -165,100 +172,155 @@
         };
       }
       selectTabById(t, e) {
-        let i = this._document.querySelector(`${s.TAB}[${S}="${t}"]`);
-        if (!i || !this.isValidTabElement(i)) return;
-        let o = this.getTabDataFromHTMLElement(i);
-        o && this._selectTab(o, i), e != null && e.scrollToElement && i.scrollIntoView();
+        let g = this._document.querySelector(`${C.TAB}[${H}="${t}"]`);
+        if (!g || !this.isValidTabElement(g)) return;
+        let I = this.getTabDataFromHTMLElement(g);
+        I && this._selectTab(I, g), e != null && e.scrollToElement && g.scrollIntoView();
       }
       selectTab(t) {
         this._selectTab(t);
       }
       _selectTab(t, e) {
-        let { group: i, key: o, align: c } = t;
-        if (!i) return;
-        let a = e && E(e), l = a && F(e, a);
-        this.updateHTML({ group: i, key: o, align: c }, e, c) > 0 && (this.fireSelectTabEvent({ group: i, key: o, align: c }, e == null ? void 0 : e.dataset.diplodocId), l && this.resetScroll(e, a, l));
+        let { group: g, key: I, variant: A } = t;
+        if (!g) return;
+        let l = e && F(e), o = l && R(e, l);
+        this.updateHTML({ group: g, key: I, variant: A }, e, A) > 0 && (this.fireSelectTabEvent({ group: g, key: I, variant: A }, e == null ? void 0 : e.dataset.diplodocId), o && this.resetScroll(e, l, o));
       }
-      updateHTML(t, e, i) {
-        switch (i) {
+      updateHTML(t, e, g) {
+        switch (g) {
           case "radio":
-            return this.updateHTMLVertical(t, e);
-          case "horizontal":
-            return this.updateHTMLHorizontal(t);
+            return this.updateHTMLRadio(t, e);
+          case "accordion":
+            return this.updateHTMLAccordion(t, e);
+          case "regular":
+            return this.updateHTMLRegular(t);
+          case "dropdown":
+            return this.updateHTMLDropdown(t);
         }
         return 0;
       }
-      updateHTMLVertical(t, e) {
-        let { group: i, key: o } = t, { isForced: c, root: a } = this.didTabOpenForce(e), l = c ? `.yfm-vertical-tab[${h}="true"]` : "", n = this._document.querySelectorAll(`${s.TABS}[${y}="${i}"] ${s.TAB}[${L}="${o}"]${l}`);
-        c && (a == null || a.removeAttribute(h));
-        let g = 0;
-        return n.forEach((d) => {
-          let p = d.parentNode.children;
-          for (let C = 0; C < p.length; C += 2) {
-            let [A, I] = [p.item(C), p.item(C + 1)], b = A.children.item(0);
-            if (A === d) {
-              b.checked ? (A.classList.remove("active"), I == null || I.classList.remove("active"), b.removeAttribute("checked")) : (A.classList.add("active"), I == null || I.classList.add("active"), b.setAttribute("checked", "true"));
+      updateHTMLRadio(t, e) {
+        let { group: g, key: I } = t, { isForced: A, root: l } = this.didTabOpenForce(e), o = A ? `.yfm-vertical-tab[${X}="true"]` : "", i = this._document.querySelectorAll(`${C.TABS}[${G}="${g}"] ${C.TAB}[${T}="${I}"]${o}`);
+        A && (l == null || l.removeAttribute(X));
+        let c = 0;
+        return i.forEach((n) => {
+          let r = n.parentNode.children;
+          for (let p = 0; p < r.length; p += 2) {
+            let [s, b] = [r.item(p), r.item(p + 1)], u = s.children.item(0);
+            if (s === n) {
+              u.checked ? (s.classList.remove("active"), b == null || b.classList.remove("active"), u.removeAttribute("checked")) : (s.classList.add("active"), b == null || b.classList.add("active"), u.setAttribute("checked", "true"));
               continue;
             }
-            b.hasAttribute("checked") && (A.classList.remove("active"), I == null || I.classList.remove("active"), b.removeAttribute("checked")), g++;
+            u.hasAttribute("checked") && (s.classList.remove("active"), b == null || b.classList.remove("active"), u.removeAttribute("checked")), c++;
           }
-        }), g;
-      }
-      updateHTMLHorizontal(t) {
-        let { group: e, key: i } = t, o = this._document.querySelectorAll(`${s.TABS}[${y}="${e}"] ${s.TAB}[${L}="${i}"]`), c = 0;
-        return o.forEach((a) => {
-          let l = a;
-          if (!this.isValidTabElement(l) || l.dataset.diplodocIsActive === "true") return;
-          c++;
-          let n = a, g = n.parentNode, d = g == null ? void 0 : g.parentNode, B = Array.from((g == null ? void 0 : g.querySelectorAll(s.TAB)) || []), p = Array.from((d == null ? void 0 : d.children) || []).filter((A) => A.classList.contains(f)), C = B.indexOf(n);
-          B.forEach((A, I) => {
-            let b = p[I], m = I === C, H = A;
-            H.dataset.diplodocIsActive = m ? "true" : "false", A.classList.toggle(G, m), A.setAttribute("aria-selected", m.toString()), A.setAttribute("tabindex", m ? "0" : "-1"), b.classList.toggle(G, m);
-          });
         }), c;
       }
-      resetScroll(t, e, i) {
-        let o = F(t, e), c = o.top - i.top, a = o.left - i.left, l = o.scrollTop - i.scrollTop, n = o.scrollLeft - i.scrollLeft;
-        e.scrollTo(e.scrollLeft + a - n, e.scrollTop + c - l);
+      updateHTMLRegular(t) {
+        let { group: e, key: g } = t, I = this._document.querySelectorAll(`${C.TABS}[${G}="${e}"] ${C.TAB}[${T}="${g}"]`), A = 0;
+        return I.forEach((l) => {
+          let o = l;
+          if (!this.isValidTabElement(o) || o.dataset.diplodocIsActive === "true") return;
+          A++;
+          let i = l, c = i.parentNode, n = c == null ? void 0 : c.parentNode, a = Array.from((c == null ? void 0 : c.querySelectorAll(C.TAB)) || []), r = Array.from((n == null ? void 0 : n.children) || []).filter((s) => s.classList.contains(O)), p = a.indexOf(i);
+          a.forEach((s, b) => {
+            let u = r[b], B = b === p, D = s;
+            D.dataset.diplodocIsActive = B ? "true" : "false", s.classList.toggle(m, B), s.setAttribute("aria-selected", B.toString()), s.setAttribute("tabindex", B ? "0" : "-1"), u.classList.toggle(m, B);
+          });
+        }), A;
+      }
+      updateHTMLDropdown(t) {
+        let { group: e, key: g } = t, I = this._document.querySelectorAll(`${C.TABS}[${G}="${e}"] ${C.TAB}[${T}="${g}"]`), A = 0;
+        return I.forEach((l) => {
+          let o = l.closest(`[${y}=dropdown]`);
+          if (!(o != null && o.children)) return;
+          let i = o.children.item(0), c = o.children.item(1);
+          i == null || i.classList.remove(m);
+          let n = Array.from((c == null ? void 0 : c.children) || []).indexOf(l) + 2;
+          for (let a = 2; a < o.children.length; a++) {
+            let r = o.children.item(a), p = c == null ? void 0 : c.children.item(a - 2);
+            if (A++, n === a) {
+              r == null || r.classList.add(m), i.innerHTML = l.innerHTML, p.style.fontWeight = "700";
+              continue;
+            }
+            p.style.fontWeight = "500", r == null || r.classList.remove(m);
+          }
+        }), A;
+      }
+      updateHTMLAccordion(t, e) {
+        let { group: g, key: I } = t, A = this._document.querySelectorAll(`${C.TABS}[${G}="${g}"] ${C.TAB}[${T}="${I}"]`), l = 0;
+        return A.forEach((o) => {
+          let i = o.closest(`[${y}=accordion]`);
+          if (i != null && i.children) for (let c = 0; c < i.children.length; c += 2) {
+            let n = i.children.item(c), a = i.children.item(c + 1);
+            if (l++, o === n) {
+              n == null || n.classList.toggle(m), a == null || a.classList.toggle(m);
+              continue;
+            }
+            n == null || n.classList.remove(m), a == null || a.classList.remove(m);
+          }
+        }), e && !this.checkVisible(e) && setTimeout(() => {
+          e.scrollIntoView({ block: "nearest" });
+        }), l;
+      }
+      checkVisible(t) {
+        let e = t.getBoundingClientRect(), g = Math.max(document.documentElement.clientHeight, window.innerHeight);
+        return !(e.bottom < 0 || e.top - g >= 0);
+      }
+      hideAllDropdown(t) {
+        this._document.querySelectorAll(".yfm-tabs-dropdown-select.active").forEach((g) => {
+          g.contains(t) || g.classList.remove(m);
+        });
+      }
+      resetScroll(t, e, g) {
+        let I = R(t, e), A = I.top - g.top, l = I.left - g.left, o = I.scrollTop - g.scrollTop, i = I.scrollLeft - g.scrollLeft;
+        e.scrollTo(e.scrollLeft + l - i, e.scrollTop + A - o);
       }
       didTabOpenForce(t) {
         if (!t) return {};
-        let e = t.dataset.diplodocVerticalTab ? t : t.parentElement, i = typeof (e == null ? void 0 : e.dataset.diplodocRadioForced) != "undefined";
-        return { root: e, isForced: i };
+        if (t.dataset.diplodocForced) return { root: t, isForced: true };
+        let e = t.dataset.diplodocVerticalTab ? t : t.parentElement, g = typeof (e == null ? void 0 : e.dataset.diplodocForced) != "undefined";
+        return { root: e, isForced: g };
       }
       fireSelectTabEvent(t, e) {
-        let { group: i, key: o, align: c } = t, a = i.startsWith(v) ? { key: o, align: c } : t;
-        this._onSelectTabHandlers.forEach((l) => {
-          l({ tab: a, currentTabId: e });
+        let { group: g, key: I, variant: A } = t, l = g.startsWith(L) ? { key: I, variant: A } : t;
+        this._onSelectTabHandlers.forEach((o) => {
+          o({ tab: l, currentTabId: e });
         });
       }
+      getTabsType(t) {
+        let e = t.closest(`[${y}]`);
+        if (e) return e.dataset.diplodocVariant;
+      }
       isValidTabElement(t) {
-        let e = t.matches(s.TAB) && t.dataset.diplodocId ? t.closest(s.TAB_LIST) : null;
-        return e == null ? void 0 : e.closest(s.TABS);
+        return !!this.getTabsType(t);
       }
-      areTabsVertical(t) {
-        let e = t.parentElement;
-        return t.dataset.diplodocVerticalTab || !!(e != null && e.dataset.diplodocVerticalTab);
+      isElementDropdownSelect(t) {
+        return t.classList.contains(U);
       }
       getTabDataFromHTMLElement(t) {
-        var o, c;
-        if (this.areTabsVertical(t)) {
-          let a = t.dataset.diplodocVerticalTab ? t : t.parentElement, l = a.dataset.diplodocKey, n = (o = a.closest(s.TABS)) == null ? void 0 : o.dataset.diplodocGroup;
-          return l && n ? { group: n, key: l, align: "radio" } : null;
+        var A, l, o;
+        let e = this.getTabsType(t);
+        if (e === "radio") {
+          let i = t.dataset.diplodocVerticalTab ? t : t.parentElement, c = i.dataset.diplodocKey, n = (A = i.closest(C.TABS)) == null ? void 0 : A.dataset.diplodocGroup;
+          return c && n ? { group: n, key: c, variant: "radio" } : null;
+        }
+        if (e === "dropdown" || e === "accordion") {
+          let i = t.dataset.diplodocKey, c = (l = t.closest(C.TABS)) == null ? void 0 : l.dataset.diplodocGroup;
+          return i && c ? { group: c, key: i, variant: e } : null;
         }
-        let e = t.dataset.diplodocKey, i = (c = t.closest(s.TABS)) == null ? void 0 : c.dataset.diplodocGroup;
-        return e && i ? { group: i, key: e, align: "horizontal" } : null;
+        let g = t.dataset.diplodocKey, I = (o = t.closest(C.TABS)) == null ? void 0 : o.dataset.diplodocGroup;
+        return g && I ? { group: I, key: g, variant: "regular" } : null;
       }
       getTabs(t) {
-        var c, a;
-        let e = (c = t.closest(s.TABS)) == null ? void 0 : c.dataset.diplodocGroup, i = (a = t.closest(s.TAB_LIST)) == null ? void 0 : a.querySelectorAll(s.TAB), o = [];
-        return i.forEach((l) => {
-          let n = l == null ? void 0 : l.dataset.diplodocKey;
-          n && o.push({ group: e, key: n, align: "horizontal" });
-        }), { tabs: o, nodes: i };
+        var A, l;
+        let e = (A = t.closest(C.TABS)) == null ? void 0 : A.dataset.diplodocGroup, g = (l = t.closest(C.TAB_LIST)) == null ? void 0 : l.querySelectorAll(C.TAB), I = [];
+        return g.forEach((o) => {
+          let i = o == null ? void 0 : o.dataset.diplodocKey;
+          i && I.push({ group: e, key: i, variant: "regular" });
+        }), { tabs: I, nodes: g };
       }
     };
-    typeof window != "undefined" && typeof document != "undefined" && !window[x] && (window[x] = new T(document));
+    typeof window != "undefined" && typeof document != "undefined" && !window[h] && (window[h] = new x(document));
   })();
 
   // src/js/polyfill.js