@rei/cedar 13.5.2 → 14.0.0-ts.0

package/dist/src/components/modal/CdrModal.vue.mjs

@@ -1,241 +1,9 @@
-import { debounce as Q } from "lodash-es";
-import D from "tabbable";
-import { defineComponent as Z, ref as t, computed as g, watch as x, onMounted as ee, onUnmounted as le, useCssModule as oe, resolveComponent as z, openBlock as te, createElementBlock as ne, normalizeClass as s, createElementVNode as n, mergeProps as se, renderSlot as w, normalizeStyle as O, toDisplayString as ae, createCommentVNode as re, createVNode as X, withCtx as de, nextTick as A } from "vue";
-import { CdrBreakpointSm as ie, CdrSpaceTwoX as P, CdrSpaceOneX as ce } from "../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.mjs";
-import ue from "./onTransitionEnd.mjs";
-import me from "../button/CdrButton.vue.mjs";
-import fe from "../icon/comps/x-lg.vue.mjs";
-import ve from "../../utils/mapClasses.mjs";
-import pe from "./styles/CdrModal.module.scss.mjs";
-import ye from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const he = Z({
-  name: "CdrModal",
-  components: {
-    CdrButton: me,
-    IconXLg: fe
-  },
-  props: {
-    /**
-     * Toggles the state of the modal
-     * @demoIgnore true
-     */
-    opened: {
-      type: Boolean,
-      required: !0
-    },
-    /**
-     * Sets `aria-label` and modal title text. Can also use title slot to set title.
-     */
-    label: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Toggles the modal title text, which comes from `label` prop or `title` slot.
-     */
-    showTitle: {
-      type: Boolean,
-      required: !1,
-      default: !0
-    },
-    /**
-     * Text for aria-describedby attribute. Applied to modal content element
-     */
-    ariaDescribedby: {
-      type: String,
-      required: !1,
-      default: null
-    },
-    /**
-     * Sets the `role` attribute on the modal content element
-     * @values dialog, alertDialog
-     */
-    role: {
-      type: String,
-      required: !1,
-      default: "dialog"
-    },
-    /**
-     * Sets unique `id` for modal
-     */
-    id: {
-      type: String,
-      required: !1,
-      default: null
-    },
-    /** Adds custom class to the `cdr-modal__overlay` div */
-    overlayClass: String,
-    /** Adds custom class to the `cdr-modal__outerWrap` div */
-    wrapperClass: String,
-    /** Adds custom class to the `cdr-modal__innerWrap` div */
-    contentClass: String,
-    /** Sets duration for modal's close animation */
-    animationDuration: {
-      type: Number,
-      default: 300
-    }
-  },
-  emits: {
-    /** Fires when modal is closed */
-    closed: null
-  },
-  setup(e, d) {
-    const E = "cdr-modal";
-    let f, v;
-    const p = t(!e.opened), i = t(!1), a = t(null), y = t(0), S = t(0), k = t(0), _ = t(0), L = t(0), H = t(0), $ = t(!1), c = t(null), h = t(null), u = t(null), T = t(null), C = () => {
-      A(() => {
-        var l, o, m, r, b;
-        S.value = window.innerHeight, $.value = window.innerWidth < ie, y.value = (l = T.value) == null ? void 0 : l.offsetHeight, k.value = (o = u.value) == null ? void 0 : o.scrollHeight, _.value = (m = u.value) == null ? void 0 : m.offsetHeight, L.value = (r = u.value) == null ? void 0 : r.offsetWidth, H.value = (b = u.value) == null ? void 0 : b.clientWidth;
-      });
-    }, M = (l) => {
-      d.emit("closed", l);
-    }, N = ({
-      key: l
-    }) => {
-      switch (l) {
-        case "Escape":
-        case "Esc":
-          M();
-          break;
-      }
-    }, B = (l) => {
-      const {
-        documentElement: o
-      } = document;
-      if (c.value.contains(l.target) || !o)
-        return;
-      const m = D(o), r = D(c.value), b = m.indexOf(l.target), J = m.indexOf(r[0]), q = b < J ? r[r.length - 1] : r[0];
-      q && q.focus();
-    }, I = Q(() => {
-      C();
-    }, 300), R = () => {
-      const {
-        documentElement: l,
-        body: o
-      } = document;
-      a.value = {
-        x: window.scrollX || (l || {}).scrollLeft || (o || {}).scrollLeft || 0,
-        y: window.scrollY || (l || {}).scrollTop || (o || {}).scrollTop || 0
-      }, l && (l.classList.add("cdr-modal__noscroll"), l.style.top = `-${a.value.y}px`, l.style.left = `-${a.value.x}px`), o && o.classList.add("cdr-modal__noscroll");
-    }, V = () => {
-      const {
-        documentElement: l,
-        body: o
-      } = document;
-      o && o.classList.remove("cdr-modal__noscroll"), l && (l.classList.remove("cdr-modal__noscroll"), l.style.top = "", l.style.left = "");
-    }, F = () => {
-      document.addEventListener("focusin", B, !0), document.addEventListener("keydown", N);
-    }, W = () => {
-      const {
-        activeElement: l
-      } = document;
-      R(), i.value = !0, p.value = !1, v = l, A(() => {
-        c.value && c.value.focus(), C(), F(), setTimeout(() => {
-          h.value && (h.value.scrollTop = 0), C();
-        });
-      });
-    }, K = () => {
-      const {
-        documentElement: l
-      } = document;
-      document.removeEventListener("keydown", N), document.removeEventListener("focusin", B, !0), i.value = !1, f = ue(h.value, () => {
-        i.value || (f(), V(), f = null, p.value = !0, l && (l.style.scrollBehavior = "auto"), window.scrollTo(a.value.x, a.value.y), l && (l.style.scrollBehavior = ""), v && v.focus());
-      }, e.animationDuration + 16);
-    }, U = g(() => ({
-      ...d.attrs,
-      "aria-describedby": e.ariaDescribedby,
-      "aria-modal": "true",
-      id: e.id
-    })), Y = g(() => {
-      const l = Number(P), o = Number(P) + Number(ce);
-      return $.value ? l : o + l;
-    }), j = g(() => S.value - y.value - Y.value), G = g(() => {
-      const l = k.value > _.value, o = L.value - H.value > 0;
-      return l && o ? 4 : l ? 12 : 0;
-    });
-    return x(() => e.opened, (l, o) => {
-      !!l != !!o && (l ? W() : K());
-    }), ee(() => {
-      e.opened && W(), window.addEventListener("resize", I);
-    }), le(() => {
-      window.removeEventListener("resize", I);
-    }), {
-      style: oe(),
-      mapClasses: ve,
-      baseClass: E,
-      modalClosed: p,
-      modalEl: c,
-      wrapperEl: h,
-      contentEl: u,
-      headerEl: T,
-      scrollMaxHeight: j,
-      scrollPadding: G,
-      onClick: M,
-      dialogAttrs: U
-    };
-  }
-}), be = ["tabIndex"], ge = ["role", "aria-modal", "aria-label"], Ce = ["tabIndex"];
-function we(e, d, E, f, v, p) {
-  const i = z("icon-x-lg"), a = z("cdr-button");
-  return te(), ne("div", {
-    class: s(e.mapClasses(e.style, e.baseClass, !e.opened && "cdr-modal--closed")),
-    ref: "wrapperEl"
-  }, [n("div", {
-    class: s([e.style["cdr-modal__outerWrap"], e.wrapperClass])
-  }, [n("div", {
-    "aria-hidden": "true",
-    onClick: d[0] || (d[0] = (...y) => e.onClick && e.onClick(...y)),
-    class: s([e.style["cdr-modal__overlay"], e.overlayClass])
-  }, null, 2), n("div", {
-    tabIndex: e.opened ? "0" : void 0
-  }, null, 8, be), n("div", se({
-    ref: "modalEl",
-    class: e.mapClasses(e.style, "cdr-modal__contentWrap", "cdr-modal__dialog"),
-    tabIndex: "-1",
-    role: e.role,
-    "aria-modal": !!e.opened,
-    "aria-label": e.label
-  }, e.dialogAttrs), [w(e.$slots, "modal", {}, () => [n("div", {
-    class: s([e.style["cdr-modal__innerWrap"], e.contentClass]),
-    style: O(e.modalClosed ? {
-      display: "none"
-    } : void 0)
-  }, [n("section", null, [n("div", {
-    class: s(e.style["cdr-modal__content"])
-  }, [n("div", {
-    class: s(e.style["cdr-modal__header"]),
-    ref: "headerEl"
-  }, [n("div", {
-    class: s(e.style["cdr-modal__title"])
-  }, [e.showTitle ? w(e.$slots, "title", {
-    key: 0
-  }, () => [n("h1", null, ae(e.label), 1)]) : re("", !0)], 2), X(a, {
-    class: s(e.style["cdr-modal__close-button"]),
-    "icon-only": "",
-    "with-background": !0,
-    onClick: e.onClick,
-    "aria-label": "Close"
-  }, {
-    icon: de(() => [X(i, {
-      "inherit-color": ""
-    })]),
-    _: 1
-  }, 8, ["class", "onClick"])], 2), n("div", {
-    class: s(e.style["cdr-modal__text-content"]),
-    style: O({
-      maxHeight: `${e.scrollMaxHeight}px`,
-      paddingRight: `${e.scrollPadding}px`
-    }),
-    role: "document",
-    ref: "contentEl",
-    tabindex: "0"
-  }, [w(e.$slots, "default")], 6)], 2)])], 6)])], 16, ge), n("div", {
-    tabIndex: e.opened ? "0" : void 0
-  }, null, 8, Ce)], 2)], 2);
-}
-const Ee = {
-  $style: pe
-}, Ie = /* @__PURE__ */ ye(he, [["render", we], ["__cssModules", Ee]]);
+import o from "./CdrModal.vue2.mjs";
+import s from "./styles/CdrModal.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
 export {
-  Ie as default
+  f as default
 };

package/dist/src/components/modal/CdrModal.vue2.mjs

@@ -0,0 +1,225 @@
+import { defineComponent as te, useAttrs as le, useCssModule as oe, ref as l, computed as h, watch as ne, onMounted as ae, onUnmounted as se, openBlock as re, createElementBlock as de, normalizeClass as r, unref as n, createElementVNode as a, mergeProps as ce, renderSlot as E, normalizeStyle as z, toDisplayString as ie, createCommentVNode as ue, createVNode as O, withCtx as me, nextTick as A } from "vue";
+import { debounce as fe } from "../../utils/debounce.mjs";
+import R from "tabbable";
+import { CdrSpaceTwoX as X, CdrSpaceOneX as ve, CdrBreakpointSm as pe } from "../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.mjs";
+import he from "./onTransitionEnd.mjs";
+import ye from "../button/CdrButton.vue.mjs";
+import be from "../icon/comps/x-lg.vue.mjs";
+import P from "../../utils/mapClasses.mjs";
+const ge = ["tabIndex"], we = ["role", "aria-modal", "aria-label"], xe = ["tabIndex"], Ce = "cdr-modal", Be = /* @__PURE__ */ te({
+  name: "CdrModal",
+  __name: "CdrModal",
+  props: {
+    /**
+     * Toggles the state of the modal
+     * @demoIgnore true
+     */
+    opened: {
+      type: Boolean,
+      required: !0
+    },
+    /**
+     * Sets `aria-label` and modal title text. Can also use title slot to set title.
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Toggles the modal title text, which comes from `label` prop or `title` slot.
+     */
+    showTitle: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    /**
+     * Text for aria-describedby attribute. Applied to modal content element
+     */
+    ariaDescribedby: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    /**
+     * Sets the `role` attribute on the modal content element
+     * @values dialog, alertDialog
+     */
+    role: {
+      type: String,
+      required: !1,
+      default: "dialog"
+    },
+    /**
+     * Sets unique `id` for modal
+     */
+    id: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    /** Adds custom class to the `cdr-modal__overlay` div */
+    overlayClass: String,
+    /** Adds custom class to the `cdr-modal__outerWrap` div */
+    wrapperClass: String,
+    /** Adds custom class to the `cdr-modal__innerWrap` div */
+    contentClass: String,
+    /** Sets duration for modal's close animation */
+    animationDuration: {
+      type: Number,
+      default: 300
+    }
+  },
+  emits: {
+    /** Fires when modal is closed */
+    closed: null
+  },
+  setup(o, {
+    emit: V
+  }) {
+    const i = o, F = le(), s = oe();
+    let y, b;
+    const g = l(!i.opened), w = l(!1), d = l({
+      x: void 0,
+      y: void 0
+    }), _ = l(0), S = l(0), k = l(0), L = l(0), H = l(0), T = l(0), N = l(!1), u = l(null), v = l(null), m = l(null), B = l(null), x = () => {
+      A(() => {
+        var e, t, f, c, p;
+        S.value = window.innerHeight, N.value = window.innerWidth < pe, _.value = ((e = B.value) == null ? void 0 : e.offsetHeight) || 0, k.value = ((t = m.value) == null ? void 0 : t.scrollHeight) || 0, L.value = ((f = m.value) == null ? void 0 : f.offsetHeight) || 0, H.value = ((c = m.value) == null ? void 0 : c.offsetWidth) || 0, T.value = ((p = m.value) == null ? void 0 : p.clientWidth) || 0;
+      });
+    }, C = (e) => {
+      V("closed", e);
+    }, W = ({
+      key: e
+    }) => {
+      switch (e) {
+        case "Escape":
+        case "Esc":
+          C();
+          break;
+      }
+    }, $ = (e) => {
+      var M;
+      const {
+        documentElement: t
+      } = document;
+      if ((M = u.value) != null && M.contains(e.target) || !t)
+        return;
+      const f = R(t), c = R(u.value), p = f.indexOf(e.target), ee = f.indexOf(c[0]), D = p < ee ? c[c.length - 1] : c[0];
+      D && D.focus();
+    }, I = fe(() => {
+      x();
+    }, 300), K = () => {
+      const {
+        documentElement: e,
+        body: t
+      } = document;
+      d.value = {
+        x: window.scrollX || (e || {}).scrollLeft || (t || {}).scrollLeft || 0,
+        y: window.scrollY || (e || {}).scrollTop || (t || {}).scrollTop || 0
+      }, e && (e.classList.add("cdr-modal__noscroll"), e.style.top = `-${d.value.y}px`, e.style.left = `-${d.value.x}px`), t && t.classList.add("cdr-modal__noscroll");
+    }, U = () => {
+      const {
+        documentElement: e,
+        body: t
+      } = document;
+      t && t.classList.remove("cdr-modal__noscroll"), e && (e.classList.remove("cdr-modal__noscroll"), e.style.top = "", e.style.left = "");
+    }, Y = () => {
+      document.addEventListener("focusin", $, !0), document.addEventListener("keydown", W);
+    }, q = () => {
+      const {
+        activeElement: e
+      } = document;
+      K(), w.value = !0, g.value = !1, b = e, A(() => {
+        u.value && u.value.focus(), x(), Y(), setTimeout(() => {
+          v.value && (v.value.scrollTop = 0), x();
+        });
+      });
+    }, j = () => {
+      const {
+        documentElement: e
+      } = document;
+      document.removeEventListener("keydown", W), document.removeEventListener("focusin", $, !0), w.value = !1, y = he(v.value, () => {
+        w.value || (y && y(), U(), g.value = !0, e && (e.style.scrollBehavior = "auto"), d.value.x !== void 0 && d.value.y !== void 0 && window.scrollTo(d.value.x, d.value.y), e && (e.style.scrollBehavior = ""), b && b.focus());
+      }, i.animationDuration + 16);
+    }, G = h(() => ({
+      ...F,
+      "aria-describedby": i.ariaDescribedby,
+      id: i.id
+    })), J = h(() => {
+      const e = Number(X), t = Number(X) + Number(ve);
+      return N.value ? e : t + e;
+    }), Q = h(() => S.value - _.value - J.value), Z = h(() => {
+      const e = k.value > L.value, t = H.value - T.value > 0;
+      return e && t ? 4 : e ? 12 : 0;
+    });
+    return ne(() => i.opened, (e, t) => {
+      !!e != !!t && (e ? q() : j());
+    }), ae(() => {
+      i.opened && q(), window.addEventListener("resize", I);
+    }), se(() => {
+      window.removeEventListener("resize", I);
+    }), (e, t) => (re(), de("div", {
+      class: r(n(P)(n(s), Ce, o.opened ? "" : "cdr-modal--closed")),
+      ref_key: "wrapperEl",
+      ref: v
+    }, [a("div", {
+      class: r([n(s)["cdr-modal__outerWrap"], o.wrapperClass])
+    }, [a("div", {
+      "aria-hidden": "true",
+      onClick: C,
+      class: r([n(s)["cdr-modal__overlay"], o.overlayClass])
+    }, null, 2), a("div", {
+      tabIndex: o.opened ? "0" : void 0
+    }, null, 8, ge), a("div", ce({
+      ref_key: "modalEl",
+      ref: u,
+      class: n(P)(n(s), "cdr-modal__contentWrap", "cdr-modal__dialog"),
+      tabIndex: "-1",
+      role: o.role,
+      "aria-modal": !!o.opened,
+      "aria-label": o.label
+    }, G.value), [E(e.$slots, "modal", {}, () => [a("div", {
+      class: r([n(s)["cdr-modal__innerWrap"], o.contentClass]),
+      style: z(g.value ? {
+        display: "none"
+      } : void 0)
+    }, [a("section", null, [a("div", {
+      class: r(n(s)["cdr-modal__content"])
+    }, [a("div", {
+      class: r(n(s)["cdr-modal__header"]),
+      ref_key: "headerEl",
+      ref: B
+    }, [a("div", {
+      class: r(n(s)["cdr-modal__title"])
+    }, [o.showTitle ? E(e.$slots, "title", {
+      key: 0
+    }, () => [a("h1", null, ie(o.label), 1)]) : ue("", !0)], 2), O(ye, {
+      class: r(n(s)["cdr-modal__close-button"]),
+      "icon-only": "",
+      "with-background": !0,
+      onClick: C,
+      "aria-label": "Close"
+    }, {
+      icon: me(() => [O(be, {
+        "inherit-color": ""
+      })]),
+      _: 1
+    }, 8, ["class"])], 2), a("div", {
+      class: r(n(s)["cdr-modal__text-content"]),
+      style: z({
+        maxHeight: `${Q.value}px`,
+        paddingRight: `${Z.value}px`
+      }),
+      role: "document",
+      ref_key: "contentEl",
+      ref: m,
+      tabindex: "0"
+    }, [E(e.$slots, "default")], 6)], 2)])], 6)])], 16, we), a("div", {
+      tabIndex: o.opened ? "0" : void 0
+    }, null, 8, xe)], 2)], 2));
+  }
+});
+export {
+  Be as default
+};

package/dist/src/components/modal/onTransitionEnd.mjs

@@ -1,4 +1,4 @@
-const s = {
+const r = {
   transition: "transitionend",
   WebkitTransition: "webkitTransitionEnd",
   MozTransition: "transitionend",
@@ -6,24 +6,27 @@ const s = {
 };
 let o;
 if (typeof document < "u") {
-  const {
-    style: i
-  } = document.createElement("div"), n = Object.keys(s);
+  const { style: i } = document.createElement("div"), n = Object.keys(r);
   for (let t = 0, e = n[t]; t < n.length; t += 1, e = n[t])
     if (e in i) {
-      o = s[e];
+      o = r[e];
       break;
     }
 }
-const r = (i, n, t) => {
+const s = (i, n, t) => {
+  if (!i)
+    return;
   i.addEventListener(o, n);
   let e;
-  return t && (e = setTimeout(() => {
-    i.removeEventListener(o, n), n();
-  }, t)), () => {
+  return t && (e = setTimeout(
+    () => {
+      i.removeEventListener(o, n), n();
+    },
+    t
+  )), () => {
     clearTimeout(e), i.removeEventListener(o, n);
   };
 };
 export {
-  r as default
+  s as default
 };

package/dist/src/components/modal/styles/CdrModal.module.scss.mjs

@@ -1,16 +1,16 @@
 const d = {
-  "cdr-modal": "cdr-modal_13-5-2",
-  "cdr-modal__overlay": "cdr-modal__overlay_13-5-2",
-  "cdr-modal__outerWrap": "cdr-modal__outerWrap_13-5-2",
-  "cdr-modal__contentWrap": "cdr-modal__contentWrap_13-5-2",
-  "cdr-modal__innerWrap": "cdr-modal__innerWrap_13-5-2",
-  "cdr-modal__dialog": "cdr-modal__dialog_13-5-2",
-  "cdr-modal__content": "cdr-modal__content_13-5-2",
-  "cdr-modal__header": "cdr-modal__header_13-5-2",
-  "cdr-modal__title": "cdr-modal__title_13-5-2",
-  "cdr-modal__close-button": "cdr-modal__close-button_13-5-2",
-  "cdr-modal__text-content": "cdr-modal__text-content_13-5-2",
-  "cdr-modal--closed": "cdr-modal--closed_13-5-2"
+  "cdr-modal": "cdr-modal_14-0-0-ts-0",
+  "cdr-modal__overlay": "cdr-modal__overlay_14-0-0-ts-0",
+  "cdr-modal__outerWrap": "cdr-modal__outerWrap_14-0-0-ts-0",
+  "cdr-modal__contentWrap": "cdr-modal__contentWrap_14-0-0-ts-0",
+  "cdr-modal__innerWrap": "cdr-modal__innerWrap_14-0-0-ts-0",
+  "cdr-modal__dialog": "cdr-modal__dialog_14-0-0-ts-0",
+  "cdr-modal__content": "cdr-modal__content_14-0-0-ts-0",
+  "cdr-modal__header": "cdr-modal__header_14-0-0-ts-0",
+  "cdr-modal__title": "cdr-modal__title_14-0-0-ts-0",
+  "cdr-modal__close-button": "cdr-modal__close-button_14-0-0-ts-0",
+  "cdr-modal__text-content": "cdr-modal__text-content_14-0-0-ts-0",
+  "cdr-modal--closed": "cdr-modal--closed_14-0-0-ts-0"
 };
 export {
   d as default