@rei/cedar 13.5.3 → 14.0.0-beta.0

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 o, createElementVNode as n, 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/rei-dot-com/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-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(a, {
+    emit: V
+  }) {
+    const i = a, 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(o(P)(o(s), Ce, a.opened ? "" : "cdr-modal--closed")),
+      ref_key: "wrapperEl",
+      ref: v
+    }, [n("div", {
+      class: r([o(s)["cdr-modal__outerWrap"], a.wrapperClass])
+    }, [n("div", {
+      "aria-hidden": "true",
+      onClick: C,
+      class: r([o(s)["cdr-modal__overlay"], a.overlayClass])
+    }, null, 2), n("div", {
+      tabIndex: a.opened ? "0" : void 0
+    }, null, 8, ge), n("div", ce({
+      ref_key: "modalEl",
+      ref: u,
+      class: o(P)(o(s), "cdr-modal__contentWrap", "cdr-modal__dialog"),
+      tabIndex: "-1",
+      role: a.role,
+      "aria-modal": "true",
+      "aria-label": a.label
+    }, G.value), [E(e.$slots, "modal", {}, () => [n("div", {
+      class: r([o(s)["cdr-modal__innerWrap"], a.contentClass]),
+      style: z(g.value ? {
+        display: "none"
+      } : void 0)
+    }, [n("section", null, [n("div", {
+      class: r(o(s)["cdr-modal__content"])
+    }, [n("div", {
+      class: r(o(s)["cdr-modal__header"]),
+      ref_key: "headerEl",
+      ref: B
+    }, [n("div", {
+      class: r(o(s)["cdr-modal__title"])
+    }, [a.showTitle ? E(e.$slots, "title", {
+      key: 0
+    }, () => [n("h1", null, ie(a.label), 1)]) : ue("", !0)], 2), O(ye, {
+      class: r(o(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), n("div", {
+      class: r(o(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), n("div", {
+      tabIndex: a.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-3",
-  "cdr-modal__overlay": "cdr-modal__overlay_13-5-3",
-  "cdr-modal__outerWrap": "cdr-modal__outerWrap_13-5-3",
-  "cdr-modal__contentWrap": "cdr-modal__contentWrap_13-5-3",
-  "cdr-modal__innerWrap": "cdr-modal__innerWrap_13-5-3",
-  "cdr-modal__dialog": "cdr-modal__dialog_13-5-3",
-  "cdr-modal__content": "cdr-modal__content_13-5-3",
-  "cdr-modal__header": "cdr-modal__header_13-5-3",
-  "cdr-modal__title": "cdr-modal__title_13-5-3",
-  "cdr-modal__close-button": "cdr-modal__close-button_13-5-3",
-  "cdr-modal__text-content": "cdr-modal__text-content_13-5-3",
-  "cdr-modal--closed": "cdr-modal--closed_13-5-3"
+  "cdr-modal": "cdr-modal_14-0-0-beta-0",
+  "cdr-modal__overlay": "cdr-modal__overlay_14-0-0-beta-0",
+  "cdr-modal__outerWrap": "cdr-modal__outerWrap_14-0-0-beta-0",
+  "cdr-modal__contentWrap": "cdr-modal__contentWrap_14-0-0-beta-0",
+  "cdr-modal__innerWrap": "cdr-modal__innerWrap_14-0-0-beta-0",
+  "cdr-modal__dialog": "cdr-modal__dialog_14-0-0-beta-0",
+  "cdr-modal__content": "cdr-modal__content_14-0-0-beta-0",
+  "cdr-modal__header": "cdr-modal__header_14-0-0-beta-0",
+  "cdr-modal__title": "cdr-modal__title_14-0-0-beta-0",
+  "cdr-modal__close-button": "cdr-modal__close-button_14-0-0-beta-0",
+  "cdr-modal__text-content": "cdr-modal__text-content_14-0-0-beta-0",
+  "cdr-modal--closed": "cdr-modal--closed_14-0-0-beta-0"
 };
 export {
   d as default

package/dist/src/components/pagination/CdrPagination.vue.mjs

@@ -1,228 +1,9 @@
-import "core-js/modules/es.array.push.js";
-import "core-js/modules/es.array.unshift.js";
-import { defineComponent as B, ref as q, computed as d, onMounted as G, watch as R, useCssModule as U, resolveComponent as $, openBlock as i, createElementBlock as u, createElementVNode as k, normalizeClass as r, createBlock as D, resolveDynamicComponent as T, withCtx as h, createVNode as f, createTextVNode as m, Fragment as N, renderList as w, toDisplayString as I, withModifiers as E, nextTick as H } from "vue";
-import z from "../../utils/mapClasses.mjs";
-import A from "../../utils/propValidator.mjs";
-import F from "../icon/comps/caret-left.vue.mjs";
-import W from "../icon/comps/caret-right.vue.mjs";
-import J from "../select/CdrSelect.vue.mjs";
-import K from "../../utils/uid.mjs";
-import Q from "./styles/CdrPagination.module.scss.mjs";
-import X from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const Y = B({
-  name: "CdrPagination",
-  components: {
-    IconCaretLeft: F,
-    IconCaretRight: W,
-    CdrSelect: J
-  },
-  props: {
-    /**
-     * Define a custom slug for the generated breadcrumb item IDs. Slug is randomly generated if no ID provided.
-     * @demoIgnore true
-     */
-    id: {
-      type: String
-    },
-    /**
-     * Sets the total number of pages for displaying "Page x of <totalPages>".
-     * Sometimes the total number of pages is different than total page data objects in the pages array.
-     * For example, if only the next and previous pages are provided.
-     */
-    totalPages: {
-      type: Number,
-      default: null
-    },
-    /**
-     * Array of objects containing pagination data.
-     * Objects must have structure of `{ page: number, url: string }`
-     */
-    pages: {
-      type: Array,
-      required: !0,
-      validator: (e) => e.every((l) => !Object.prototype.hasOwnProperty.call(l, "page") || typeof l.page != "number" ? (console.error('Property "page" is missing or is not a number', l), !1) : !Object.prototype.hasOwnProperty.call(l, "url") || typeof l.url != "string" ? (console.error('Property "url" is missing or is not a string', l), !1) : !0)
-    },
-    /**
-     * Sets which tag type is used to render pagination elements
-     * @values a, button
-     */
-    linkTag: {
-      type: String,
-      default: "a",
-      validator: (e) => A(e, ["a", "button"])
-    },
-    /**
-     * Used to customize the aria-label for the root pagination element.
-     * For page-level pagination (i.e, pagination that updates the entire page content and changes the URL)
-     * this property should be omitted.
-     * For intra-page navigation this property should describe the element being paginated, for example:
-     * `Pagination for sub-content`
-     */
-    forLabel: {
-      type: String,
-      default: ""
-    },
-    /** @ignore used for binding v-model, represents the current page */
-    modelValue: {
-      type: Number
-    }
-  },
-  emits: {
-    /**
-     * Event emitted by v-model on the select <input> element to indicate current page.
-     * Only used on small devices
-     * @param modelValue
-     */
-    "update:modelValue": null,
-    /**
-     * $emit event fired when page changes based on user interaction by clicking a link
-     * or selecting an option from the select on mobile.
-     * `event.preventDefault()` can be used to override the default link navigation behavior.
-     */
-    navigate: null
-  },
-  setup(e, s) {
-    const l = q(0), C = q([]), _ = e.id ? e.id : K(), y = (n) => {
-      l.value = e.pages.map((t) => t.page).indexOf(n);
-    }, p = d({
-      get: () => e.modelValue,
-      set: (n) => {
-        y(n), s.emit("update:modelValue", n);
-      }
-    }), P = d(() => e.pages[l.value].url), v = (n, t) => {
-      const g = t.target.offsetWidth > 0 && t.target.offsetHeight > 0;
-      if (n === p.value && g) {
-        t.preventDefault();
-        return;
-      }
-      p.value = n, s.emit("navigate", n, P.value, t), H(() => {
-        try {
-          (t.currentTarget || t.target).blur();
-        } catch (o) {
-          console.error(o);
-        }
-      });
-    }, a = (n) => {
-      C.value.find((g) => (g == null ? void 0 : g.innerHTML) === n.target.value).click();
-    }, b = d(() => e.forLabel || "Pagination"), c = d(() => e.pages[l.value - 1]), O = d(() => e.pages[l.value + 1]), S = d(() => {
-      const n = e.pages.length, t = p.value, g = 1;
-      let o = [], L = !0, M = !0;
-      if (n <= 7)
-        return e.pages;
-      if (t < 5)
-        L = !1, o = e.pages.slice(1, 5);
-      else if (n - t < 4)
-        M = !1, o = e.pages.slice(-5, -1);
-      else
-        for (let V = Math.max(2, t - g); V <= Math.min(n - 1, t + g); V += 1)
-          o.push(e.pages[V - 1]);
-      return t - g > 2 && L && o.unshift("&hellip;"), t + g < n - 1 && M && o.push("&hellip;"), o.unshift(e.pages[0]), o.push(e.pages[n - 1]), o;
-    });
-    return G(() => y(p.value)), R(() => e.pages, () => y(p.value)), {
-      style: U(),
-      mapClasses: z,
-      uniqueId: _,
-      linkRefs: C,
-      navigate: v,
-      select: a,
-      ariaLabel: b,
-      prevPageData: c,
-      nextPageData: O,
-      paginationData: S,
-      innerValue: p,
-      currentIdx: l
-    };
-  }
-}), Z = ["aria-label"], j = {
-  key: 0
-}, x = {
-  key: 1,
-  "aria-hidden": "true"
-}, ee = ["value"], ae = {
-  key: 2
-}, ne = {
-  key: 3,
-  "aria-hidden": "true"
-};
-function te(e, s, l, C, _, y) {
-  const p = $("icon-caret-left"), P = $("cdr-select"), v = $("icon-caret-right");
-  return i(), u("nav", {
-    "aria-label": e.ariaLabel
-  }, [k("ol", {
-    class: r(e.style["cdr-pagination"])
-  }, [e.innerValue > e.pages[0].page ? (i(), u("li", j, [(i(), D(T(e.linkTag), {
-    "aria-label": "Go to previous page",
-    href: e.linkTag === "a" && e.prevPageData && e.prevPageData.url || void 0,
-    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__prev")),
-    onClick: s[0] || (s[0] = (a) => e.navigate(e.prevPageData.page, a))
-  }, {
-    default: h(() => [f(p, {
-      class: r(e.style["cdr-pagination_caret--prev"])
-    }, null, 8, ["class"]), m(" Prev ")]),
-    _: 1
-  }, 8, ["href", "class"]))])) : (i(), u("li", x, [k("span", {
-    "aria-disabled": "true",
-    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__prev", "cdr-pagination__link--disabled"))
-  }, [f(p, {
-    class: r(e.style["cdr-pagination_caret--prev"]),
-    "inherit-color": ""
-  }, null, 8, ["class"]), m(" Prev ")], 2)])), (i(!0), u(N, null, w(e.paginationData, (a, b) => (i(), u("li", {
-    key: `pagination-${e.uniqueId}-li-${a.page}`,
-    class: r(e.style["cdr-pagination__li--links"])
-  }, [a.page ? (i(), D(T(e.linkTag), {
-    key: 0,
-    id: `pagination-${e.uniqueId}-link-${a.page}`,
-    class: r(e.mapClasses(e.style, "cdr-pagination__link", a.page === e.innerValue && "cdr-pagination__link--current")),
-    "aria-label": a.page === e.innerValue ? `Current page, page ${a.page}` : `Go to page ${a.page}`,
-    "aria-current": a.page === e.innerValue ? "page" : null,
-    href: e.linkTag === "a" && a.url || void 0,
-    ref_for: !0,
-    ref: (c) => {
-      e.linkRefs[b] = c;
-    },
-    onClick: (c) => e.navigate(a.page, c)
-  }, {
-    default: h(() => [m(I(a.page), 1)]),
-    _: 2
-  }, 1032, ["id", "class", "aria-label", "aria-current", "href", "onClick"])) : (i(), u("span", {
-    key: 1,
-    class: r(e.style["cdr-pagination__ellipse"])
-  }, " … ", 2))], 2))), 128)), k("li", {
-    class: r(e.style["cdr-pagination__li--select"])
-  }, [f(P, {
-    id: `pagination-select-${e.uniqueId}`,
-    modelValue: e.innerValue,
-    "onUpdate:modelValue": s[1] || (s[1] = (a) => e.innerValue = a),
-    label: "Navigate to page",
-    "hide-label": "",
-    onChange: s[2] || (s[2] = E((a) => e.select(a), ["prevent"]))
-  }, {
-    default: h(() => [(i(!0), u(N, null, w(e.paginationData.filter((a) => a.page), (a) => (i(), u("option", {
-      key: `pagination-${e.uniqueId}-select-${a.page}`,
-      value: a.page
-    }, " Page " + I(a.page) + I(e.totalPages === null ? "" : ` of ${e.totalPages}`), 9, ee))), 128))]),
-    _: 1
-  }, 8, ["id", "modelValue"])], 2), e.innerValue < e.pages[e.pages.length - 1].page ? (i(), u("li", ae, [(i(), D(T(e.linkTag), {
-    "aria-label": "Go to next page",
-    href: e.linkTag === "a" && e.nextPageData && e.nextPageData.url || void 0,
-    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__next")),
-    onClick: s[3] || (s[3] = (a) => e.navigate(e.nextPageData.page, a))
-  }, {
-    default: h(() => [m(" Next "), f(v, {
-      class: r(e.style["cdr-pagination_caret--next"])
-    }, null, 8, ["class"])]),
-    _: 1
-  }, 8, ["href", "class"]))])) : (i(), u("li", ne, [k("span", {
-    "aria-disabled": "true",
-    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__next", "cdr-pagination__link--disabled"))
-  }, [m(" Next "), f(v, {
-    class: r(e.style["cdr-pagination_caret--next"]),
-    "inherit-color": ""
-  }, null, 8, ["class"])], 2)]))], 2)], 8, Z);
-}
-const le = {
-  $style: Q
-}, ye = /* @__PURE__ */ X(Y, [["render", te], ["__cssModules", le]]);
+import o from "./CdrPagination.vue2.mjs";
+import s from "./styles/CdrPagination.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
 export {
-  ye as default
+  f as default
 };