@rei/cedar 16.3.0 → 17.0.0-alpha.0

package/dist/components/modal/CdrModal.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,178 @@
+import e from "../../utils/mapClasses.mjs";
+import { debounce as t } from "../../utils/debounce.mjs";
+import n from "../button/CdrButton.vue.mjs";
+import r from "../icon/comps/x-lg.vue.mjs";
+import i from "./onTransitionEnd.mjs";
+import { Teleport as ee, computed as a, createBlock as te, createCommentVNode as ne, createElementVNode as o, createVNode as s, defineComponent as c, mergeProps as re, nextTick as l, normalizeClass as u, normalizeStyle as d, onMounted as ie, onUnmounted as ae, openBlock as f, ref as p, renderSlot as m, toDisplayString as oe, unref as h, useAttrs as g, useCssModule as _, watch as se, withCtx as ce } from "vue";
+import { CdrBreakpointSm as le, CdrSpaceOneX as ue, CdrSpaceTwoX as v } from "@rei/cdr-tokens/tokens";
+import { tabbable as y } from "tabbable";
+//#region src/components/modal/CdrModal.vue?vue&type=script&setup=true&lang.ts
+var de = ["tabIndex"], fe = ["role", "aria-label"], pe = ["tabIndex"], b = "cdr-modal", x = /* @__PURE__ */ c({
+	name: "CdrModal",
+	inheritAttrs: !1,
+	__name: "CdrModal",
+	props: {
+		opened: { type: Boolean },
+		label: {},
+		showTitle: {
+			type: Boolean,
+			default: !0
+		},
+		ariaDescribedby: { default: null },
+		role: { default: "dialog" },
+		id: { default: null },
+		overlayClass: {},
+		wrapperClass: {},
+		contentClass: {},
+		animationDuration: { default: 300 }
+	},
+	emits: { closed: null },
+	setup(c, { emit: x }) {
+		let S = c, me = x, he = g(), C = _(), w, T, E, D = 0, O = !1, k = p(!S.opened), A = p(!1), j = p(!0), M = p({
+			x: void 0,
+			y: void 0
+		}), N = p(0), P = p(0), F = p(0), I = p(0), L = p(0), R = p(0), z = p(!1), B = p(null), V = p(null), H = p(null), U = p(null), W = () => {
+			l(() => {
+				P.value = window.innerHeight, z.value = window.innerWidth < +le, N.value = U.value?.offsetHeight || 0, F.value = H.value?.scrollHeight || 0, I.value = H.value?.offsetHeight || 0, L.value = H.value?.offsetWidth || 0, R.value = H.value?.clientWidth || 0;
+			});
+		}, G = (e) => {
+			me("closed", e);
+		}, K = ({ key: e }) => {
+			switch (e) {
+				case "Escape":
+				case "Esc":
+					G();
+					break;
+				default: break;
+			}
+		}, q = (e) => {
+			let { documentElement: t } = document;
+			if (!B.value || B.value.contains(e.target) || !t) return;
+			let n = y(t), r = y(B.value), i = n.indexOf(e.target) < n.indexOf(r[0]) ? r[r.length - 1] : r[0];
+			i && i.focus();
+		}, J = t(() => {
+			W();
+		}, 300), ge = () => {
+			let { documentElement: e, body: t } = document;
+			M.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 = `-${M.value.y}px`, e.style.left = `-${M.value.x}px`), t && t.classList.add("cdr-modal__noscroll");
+		}, Y = () => {
+			let { 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 = "");
+		}, _e = () => {
+			document.addEventListener("focusin", q, !0), document.addEventListener("keydown", K);
+		}, X = [], Z = !1, ve = () => {
+			document.querySelectorAll([
+				"body > *",
+				":not(script)",
+				":not(style)",
+				":not([aria-hidden=true])"
+			].join("")).forEach((e) => {
+				e !== V.value && getComputedStyle(e).getPropertyValue("display") !== "none" && X.push(e);
+			}), Z = !0;
+		}, ye = () => {
+			Z || ve(), X.forEach((e) => {
+				e.setAttribute("aria-hidden", "true");
+			});
+		}, Q = () => {
+			X.forEach((e) => {
+				e.removeAttribute("aria-hidden");
+			});
+		}, be = () => {
+			ye();
+			let { activeElement: e } = document;
+			ge(), A.value = !0, k.value = !1, T = e, l(() => {
+				B.value && B.value.focus(), W(), _e(), E = setTimeout(() => {
+					V.value && (V.value.scrollTop = 0), W();
+				});
+			});
+		}, xe = () => {
+			D += 1, Q();
+			let { documentElement: e } = document;
+			document.removeEventListener("keydown", K), document.removeEventListener("focusin", q, !0), A.value = !1, w = i(V.value, () => {
+				A.value || (w && w(), Y(), k.value = !0, e && (e.style.scrollBehavior = "auto"), M.value.x !== void 0 && M.value.y !== void 0 && window.scrollTo(M.value.x, M.value.y), e && (e.style.scrollBehavior = ""), T && T.focus());
+			}, S.animationDuration + 16);
+		}, $ = async () => {
+			let e = ++D;
+			if (!j.value && V.value?.parentElement !== document.body) {
+				let t = Date.now();
+				for (let n = 0; n < 20 && Date.now() - t < 150; n += 1) {
+					if (await l(), e !== D || !S.opened || O) return;
+					if (V.value?.parentElement === document.body) break;
+				}
+			}
+			e !== D || !S.opened || O || be();
+		}, Se = a(() => ({
+			...he,
+			"aria-describedby": S.ariaDescribedby || void 0,
+			id: S.id || void 0
+		})), Ce = a(() => {
+			let e = Number(v), t = Number(v) + Number(ue);
+			return z.value ? e : t + e;
+		}), we = a(() => P.value - N.value - Ce.value), Te = a(() => {
+			let e = F.value > I.value, t = L.value - R.value > 0;
+			return e && t ? 4 : e ? 12 : 0;
+		}), Ee = a(() => ({
+			maxHeight: `${we.value}px`,
+			paddingRight: `${Te.value}px`
+		}));
+		return se(() => S.opened, (e, t) => {
+			!!e != !!t && (e ? $() : xe());
+		}), ie(() => {
+			O = !1, j.value = !1, window.addEventListener("resize", J), S.opened && $();
+		}), ae(() => {
+			O = !0, D += 1, window.removeEventListener("resize", J), E !== void 0 && clearTimeout(E), w?.(), w = void 0, Q(), Y(), document.removeEventListener("focusin", q, !0), document.removeEventListener("keydown", K);
+		}), (t, i) => (f(), te(ee, {
+			to: "body",
+			disabled: j.value
+		}, [o("div", {
+			class: u(h(e)(h(C), b, c.opened ? "" : "cdr-modal--closed")),
+			ref_key: "wrapperEl",
+			ref: V
+		}, [o("div", { class: u([h(C)["cdr-modal__outerWrap"], c.wrapperClass]) }, [
+			o("div", {
+				"aria-hidden": "true",
+				onClick: G,
+				class: u([h(C)["cdr-modal__overlay"], c.overlayClass])
+			}, null, 2),
+			o("div", { tabIndex: c.opened ? "0" : void 0 }, null, 8, de),
+			o("div", re({
+				ref_key: "modalEl",
+				ref: B,
+				class: h(e)(h(C), "cdr-modal__contentWrap", "cdr-modal__dialog"),
+				tabIndex: "-1",
+				role: c.role,
+				"aria-modal": "true",
+				"aria-label": c.label
+			}, Se.value), [m(t.$slots, "modal", {}, () => [o("div", {
+				class: u([h(C)["cdr-modal__innerWrap"], c.contentClass]),
+				style: d(k.value ? { display: "none" } : void 0)
+			}, [o("section", null, [o("div", { class: u(h(C)["cdr-modal__content"]) }, [o("div", {
+				class: u(h(C)["cdr-modal__header"]),
+				ref_key: "headerEl",
+				ref: U
+			}, [o("div", { class: u(h(C)["cdr-modal__title"]) }, [c.showTitle ? m(t.$slots, "title", { key: 0 }, () => [o("h1", null, oe(c.label), 1)]) : ne("", !0)], 2), s(n, {
+				class: u(h(C)["cdr-modal__close-button"]),
+				"icon-only": "",
+				"with-background": !0,
+				onClick: G,
+				"aria-label": "Close"
+			}, {
+				icon: ce(() => [s(r, { "inherit-color": "" })]),
+				_: 1
+			}, 8, ["class"])], 2), o("div", {
+				class: u(h(C)["cdr-modal__text-content"]),
+				style: d(Ee.value),
+				role: "document",
+				ref_key: "contentEl",
+				ref: H,
+				tabindex: "0"
+			}, [m(t.$slots, "default")], 6)], 2)])], 6)])], 16, fe),
+			o("div", { tabIndex: c.opened ? "0" : void 0 }, null, 8, pe)
+		], 2)], 2)], 8, ["disabled"]));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/modal/onTransitionEnd.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (element: HTMLDivElement | null, callback: () => void, timeout: number) => (() => void) | undefined;
+export default _default;

package/dist/components/modal/onTransitionEnd.mjs

@@ -1,30 +1,26 @@
-const r = {
-  transition: "transitionend",
-  WebkitTransition: "webkitTransitionEnd",
-  MozTransition: "transitionend",
-  OTransition: "oTransitionEnd otransitionend"
-};
-let o;
+//#region src/components/modal/onTransitionEnd.ts
+var e = {
+	transition: "transitionend",
+	WebkitTransition: "webkitTransitionEnd",
+	MozTransition: "transitionend",
+	OTransition: "oTransitionEnd otransitionend"
+}, t;
 if (typeof document < "u") {
-  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 = r[e];
-      break;
-    }
+	let { style: n } = document.createElement("div"), r = Object.keys(e);
+	for (let i = 0, a = r[i]; i < r.length; i += 1, a = r[i]) if (a in n) {
+		t = e[a];
+		break;
+	}
 }
-const s = (i, n, t) => {
-  if (!i) return;
-  i.addEventListener(o, n);
-  let e;
-  return t && (e = setTimeout(() => {
-    i.removeEventListener(o, n), n();
-  }, t)), () => {
-    clearTimeout(e), i.removeEventListener(o, n);
-  };
-};
-export {
-  s as default
+var n = (e, n, r) => {
+	if (!e) return;
+	e.addEventListener(t, n);
+	let i;
+	return r && (i = setTimeout(() => {
+		e.removeEventListener(t, n), n();
+	}, r)), () => {
+		clearTimeout(i), e.removeEventListener(t, n);
+	};
 };
+//#endregion
+export { n as default };

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

@@ -0,0 +1,17 @@
+//#region src/components/modal/styles/CdrModal.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-modal": "cdr-modal_17-0-0-alpha-0",
+	"cdr-modal__overlay": "cdr-modal__overlay_17-0-0-alpha-0",
+	"cdr-modal__outerWrap": "cdr-modal__outerWrap_17-0-0-alpha-0",
+	"cdr-modal__contentWrap": "cdr-modal__contentWrap_17-0-0-alpha-0",
+	"cdr-modal__innerWrap": "cdr-modal__innerWrap_17-0-0-alpha-0",
+	"cdr-modal__dialog": "cdr-modal__dialog_17-0-0-alpha-0",
+	"cdr-modal__content": "cdr-modal__content_17-0-0-alpha-0",
+	"cdr-modal__header": "cdr-modal__header_17-0-0-alpha-0",
+	"cdr-modal__title": "cdr-modal__title_17-0-0-alpha-0",
+	"cdr-modal__close-button": "cdr-modal__close-button_17-0-0-alpha-0",
+	"cdr-modal__text-content": "cdr-modal__text-content_17-0-0-alpha-0",
+	"cdr-modal--closed": "cdr-modal--closed_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

package/dist/components/modal/types.d.ts

@@ -0,0 +1,26 @@
+import { ModalRole } from '../../types/componentOptions';
+/**
+ * CdrModal component properties
+ */
+export type CdrModalProps = {
+    /** Toggles the state of the modal */
+    opened: boolean;
+    /** Sets `aria-label` and modal title text. Can also use title slot to set title. */
+    label: string;
+    /** Toggles the modal title text, which comes from `label` prop or `title` slot. */
+    showTitle?: boolean;
+    /** Text for aria-describedby attribute. Applied to modal content element */
+    ariaDescribedby?: string | null;
+    /** Sets the `role` attribute on the modal content element */
+    role?: ModalRole;
+    /** Sets unique `id` for modal */
+    id?: string | 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?: number;
+};

package/dist/components/objectOverlay/CdrObjectOverlay.vue.d.ts

@@ -0,0 +1,37 @@
+import { CdrObjectOverlayProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Container content that the overlay will be positioned relative to */
+        container(props: Record<string, never>): any;
+        /** Content to be positioned */
+        content(props: Record<string, never>): any;
+    }> & {
+        /** Container content that the overlay will be positioned relative to */
+        container(props: Record<string, never>): any;
+        /** Content to be positioned */
+        content(props: Record<string, never>): any;
+    };
+    refs: {
+        overlayRef: unknown;
+        containerRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrObjectOverlayProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CdrObjectOverlayProps> & Readonly<{}>, {
+    tag: string;
+    position: import('./types').ResponsivePosition | import('./types').ObjectPosition;
+    gradientTheme: "dark" | "light";
+    margin: import('../../lib').ResponsiveSpace | import('../../lib').Spacing;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    overlayRef: unknown;
+    containerRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/objectOverlay/CdrObjectOverlay.vue.mjs

@@ -1,9 +1,6 @@
-import s from "./CdrObjectOverlay.vue2.mjs";
-import o from "./styles/CdrObjectOverlay.module.scss.mjs";
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: o
-}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrObjectOverlay.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrObjectOverlay.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
+export { r as default };

package/dist/components/objectOverlay/CdrObjectOverlay.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,98 @@
+import { computed as e, createBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, nextTick as a, normalizeClass as o, onMounted as s, onUnmounted as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, unref as p, useCssModule as m, withCtx as h } from "vue";
+//#region src/components/objectOverlay/CdrObjectOverlay.vue?vue&type=script&setup=true&lang.ts
+var g = /* @__PURE__ */ r({
+	name: "CdrObjectOverlay",
+	__name: "CdrObjectOverlay",
+	props: {
+		withGradient: { type: Boolean },
+		gradientTheme: { default: "dark" },
+		position: { default: "center-center" },
+		margin: { default: "zero" },
+		padding: {},
+		tag: { default: "div" }
+	},
+	setup(r) {
+		let g = r, _ = u(null), v = u(null), y = (e) => e === "center-center" ? null : [
+			"left-top",
+			"center-top",
+			"right-top"
+		].includes(e) ? "to-bottom" : e === "left-center" ? "to-right" : e === "right-center" ? "to-left" : [
+			"left-bottom",
+			"center-bottom",
+			"right-bottom"
+		].includes(e) ? "to-top" : null, b = (e, t) => {
+			let n = {};
+			try {
+				typeof t == "string" ? n[`data-${e}`] = t : typeof t == "object" && t && Object.entries(t).forEach(([t, r]) => {
+					t === "xs" ? n[`data-${e}`] = String(r) : n[`data-${e}-${t}`] = String(r);
+				});
+			} catch (t) {
+				console.error(`Error processing ${e}:`, t);
+			}
+			return n;
+		}, x = (e) => `var(--cdr-space-${e})`, S = (e, t, n = {}) => {
+			let r = { ...n };
+			try {
+				typeof t == "string" ? r[`--${e}`] = x(t) : Array.isArray(t) ? r[`--${e}`] = t.map(x).join(" ") : typeof t == "object" && t && Object.entries(t).forEach(([t, n]) => {
+					let i = typeof n == "string" ? x(n) : n.map(x).join(" ");
+					r[`--${e}-${t}`] = i;
+				});
+			} catch (t) {
+				console.error(`Error processing ${e}:`, t);
+			}
+			return r;
+		}, C = e(() => {
+			let e = {}, t = { style: {} };
+			if (g.position && Object.assign(e, b("position", g.position)), g.withGradient) if (g.gradientTheme && (e["data-gradient-theme"] = g.gradientTheme), typeof g.position == "object") Object.entries(g.position).forEach(([t, n]) => {
+				let r = y(n);
+				r && (t === "xs" ? e["data-gradient"] = r : e[`data-gradient-${t}`] = r);
+			});
+			else {
+				let t = y(g.position);
+				t && (e["data-gradient"] = t);
+			}
+			return ["margin", "padding"].forEach((e) => {
+				let n = g[e];
+				n && (t.style = S(e, n, t.style));
+			}), {
+				component: e,
+				content: t
+			};
+		}), w = () => {
+			if (!_.value || !v.value) return;
+			let e = _.value.firstElementChild;
+			e && requestAnimationFrame(() => {
+				let t = window.getComputedStyle(e), n = t.borderRadius;
+				if (v.value) if (n && n !== "0px") v.value.style.borderRadius = n;
+				else {
+					let e = t.borderTopLeftRadius, n = t.borderTopRightRadius, r = t.borderBottomLeftRadius, i = t.borderBottomRightRadius;
+					(e !== "0px" || n !== "0px" || r !== "0px" || i !== "0px") && (v.value.style.borderTopLeftRadius = e, v.value.style.borderTopRightRadius = n, v.value.style.borderBottomLeftRadius = r, v.value.style.borderBottomRightRadius = i);
+				}
+			});
+		}, T;
+		s(() => {
+			a(w), _.value && (T = new MutationObserver(w), T.observe(_.value, {
+				childList: !0,
+				subtree: !0,
+				attributes: !0,
+				attributeFilter: ["style", "class"]
+			}));
+		}), c(() => {
+			T?.disconnect();
+		});
+		let E = m();
+		return (e, a) => (l(), t(f(r.tag), i({ class: p(E)["cdr-object-overlay"] }, C.value.component, {
+			ref_key: "overlayRef",
+			ref: v
+		}), {
+			default: h(() => [n("div", {
+				class: o(p(E)["cdr-object-overlay__container"]),
+				ref_key: "containerRef",
+				ref: _
+			}, [d(e.$slots, "container")], 2), n("div", i({ class: p(E)["cdr-object-overlay__content"] }, C.value.content), [d(e.$slots, "content")], 16)]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/objectOverlay/styles/CdrObjectOverlay.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,8 @@
+//#region src/components/objectOverlay/styles/CdrObjectOverlay.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-object-overlay": "cdr-object-overlay_17-0-0-alpha-0",
+	"cdr-object-overlay__container": "cdr-object-overlay__container_17-0-0-alpha-0",
+	"cdr-object-overlay__content": "cdr-object-overlay__content_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

package/dist/components/objectOverlay/types.d.ts

@@ -0,0 +1,32 @@
+import { ResponsiveSpace, Spacing } from '../../types/componentOptions';
+/**
+ * Object position values for positioning content within a container
+ */
+export type ObjectPosition = 'left-top' | 'center-top' | 'right-top' | 'left-center' | 'center-center' | 'right-center' | 'left-bottom' | 'center-bottom' | 'right-bottom';
+/**
+ * Responsive object position values mapped to Cedar breakpoints
+ */
+export type ResponsivePosition = {
+    xs?: ObjectPosition;
+    sm?: ObjectPosition;
+    md?: ObjectPosition;
+    lg?: ObjectPosition;
+};
+/**
+ * CdrObjectOverlay component properties
+ * Component for positioning content in 9 different positions relative to a container
+ */
+export type CdrObjectOverlayProps = {
+    /** Determines if the container will have a gradient based on position */
+    withGradient?: boolean;
+    /** Theme for the gradient (dark or light) */
+    gradientTheme?: 'dark' | 'light';
+    /** Position of the content relative to the container */
+    position?: ResponsivePosition | ObjectPosition;
+    /** Margin space around the positioned content */
+    margin?: ResponsiveSpace | Spacing;
+    /** Padding space around the positioned content */
+    padding?: ResponsiveSpace | Spacing;
+    /** Sets the HTML tag for the container element */
+    tag?: string;
+};

package/dist/components/pagination/CdrPagination.vue.d.ts

@@ -0,0 +1,13 @@
+import { CdrPaginationProps } from './types';
+declare const _default: import('vue').DefineComponent<CdrPaginationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    navigate: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<CdrPaginationProps> & Readonly<{
+    onNavigate?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    totalPages: number | null;
+    linkTag: import('../../lib').LinkTag;
+    forLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

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

@@ -1,9 +1,6 @@
-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 {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrPagination.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrPagination.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
+export { r as default };

package/dist/components/pagination/CdrPagination.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,149 @@
+import e from "../../utils/mapClasses.mjs";
+import t from "../../utils/uid.mjs";
+import n from "../icon/comps/caret-left.vue.mjs";
+import r from "../icon/comps/caret-right.vue.mjs";
+import i from "../select/CdrSelect.vue.mjs";
+import { Fragment as a, computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, onMounted as h, openBlock as g, ref as _, renderList as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useCssModule as S, watch as C, withCtx as w, withModifiers as T } from "vue";
+//#region src/components/pagination/CdrPagination.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-label"], D = { key: 0 }, O = {
+	key: 1,
+	"aria-hidden": "true"
+}, k = ["value"], A = { key: 2 }, j = {
+	key: 3,
+	"aria-hidden": "true"
+}, M = /* @__PURE__ */ f({
+	name: "CdrPagination",
+	__name: "CdrPagination",
+	props: {
+		id: {},
+		totalPages: { default: null },
+		pages: {},
+		linkTag: { default: "a" },
+		forLabel: { default: "" },
+		modelValue: {}
+	},
+	emits: {
+		"update:modelValue": null,
+		navigate: null
+	},
+	setup(f, { emit: M }) {
+		let N = f, P = M, F = S(), I = _(0), L = _([]), R = N.id ? N.id : t(), z = (e) => {
+			I.value = N.pages.map((e) => e.page).indexOf(e);
+		}, B = o({
+			get: () => N.modelValue,
+			set: (e) => {
+				z(e), P("update:modelValue", e);
+			}
+		}), V = o(() => N.pages[I.value]?.url), H = (e, t) => {
+			let n = t.target?.offsetWidth > 0 && t.target?.offsetHeight > 0;
+			if (e === B.value && n) {
+				t.preventDefault();
+				return;
+			}
+			B.value = e, P("navigate", e, V.value, t), p(() => {
+				try {
+					(t.currentTarget || t.target)?.blur();
+				} catch (e) {
+					console.error(e);
+				}
+			});
+		}, U = (e) => {
+			let t = L.value.find((t) => t?.innerHTML === e.target?.value);
+			t && t.click();
+		}, W = o(() => N.forLabel || "Pagination"), G = o(() => N.pages[I.value - 1]), K = o(() => N.pages[I.value + 1]), q = o(() => {
+			let e = N.pages.length, t = B.value, n = [], r = !0, i = !0;
+			if (e <= 7) return N.pages;
+			if (t) {
+				if (t < 5) r = !1, n = N.pages.slice(1, 5);
+				else if (e - t < 4) i = !1, n = N.pages.slice(-5, -1);
+				else for (let r = Math.max(2, t - 1); r <= Math.min(e - 1, t + 1); r += 1) n.push(N.pages[r - 1]);
+				return t - 1 > 2 && r && n.unshift({
+					page: 0,
+					url: "",
+					ellip: !0
+				}), t + 1 < e - 1 && i && n.push({
+					page: 0,
+					url: "",
+					ellip: !0
+				}), n.unshift(N.pages[0]), n.push(N.pages[e - 1]), n;
+			}
+		});
+		return h(() => z(B.value)), C(() => N.pages, () => z(B.value)), (t, o) => (g(), c("nav", { "aria-label": W.value }, [l("ol", { class: m(x(F)["cdr-pagination"]) }, [
+			B.value && B.value > f.pages[0].page ? (g(), c("li", D, [(g(), s(y(f.linkTag), {
+				"aria-label": "Go to previous page",
+				href: f.linkTag === "a" && G.value && G.value.url || void 0,
+				class: m(x(e)(x(F), "cdr-pagination__link", "cdr-pagination__prev")),
+				onClick: o[0] ||= (e) => H(G.value.page, e)
+			}, {
+				default: w(() => [d(n, { class: m(x(F)["cdr-pagination_caret--prev"]) }, null, 8, ["class"]), o[4] ||= u(" Prev ", -1)]),
+				_: 1
+			}, 8, ["href", "class"]))])) : (g(), c("li", O, [l("span", {
+				"aria-disabled": "true",
+				class: m(x(e)(x(F), "cdr-pagination__link", "cdr-pagination__prev", "cdr-pagination__link--disabled"))
+			}, [d(n, {
+				class: m(x(F)["cdr-pagination_caret--prev"]),
+				"inherit-color": ""
+			}, null, 8, ["class"]), o[5] ||= u(" Prev ", -1)], 2)])),
+			(g(!0), c(a, null, v(q.value, (t, n) => (g(), c("li", {
+				key: `pagination-${x(R)}-li-${t.page}`,
+				class: m(x(F)["cdr-pagination__li--links"])
+			}, [t.ellip ? (g(), c("span", {
+				key: 1,
+				class: m(x(F)["cdr-pagination__ellipse"])
+			}, " … ", 2)) : (g(), s(y(f.linkTag), {
+				key: 0,
+				id: `pagination-${x(R)}-link-${t.page}`,
+				class: m(x(e)(x(F), "cdr-pagination__link", t.page === B.value ? "cdr-pagination__link--current" : "")),
+				"aria-label": t.page === B.value ? `Current page, page ${t.page}` : `Go to page ${t.page}`,
+				"aria-current": t.page === B.value ? "page" : null,
+				href: f.linkTag === "a" && t.url || void 0,
+				ref_for: !0,
+				ref: (e) => {
+					L.value[n] = e;
+				},
+				onClick: (e) => H(t.page, e)
+			}, {
+				default: w(() => [u(b(t.page), 1)]),
+				_: 2
+			}, 1032, [
+				"id",
+				"class",
+				"aria-label",
+				"aria-current",
+				"href",
+				"onClick"
+			]))], 2))), 128)),
+			l("li", { class: m(x(F)["cdr-pagination__li--select"]) }, [d(i, {
+				id: `pagination-select-${x(R)}`,
+				modelValue: B.value,
+				"onUpdate:modelValue": o[1] ||= (e) => B.value = e,
+				label: "Navigate to page",
+				"hide-label": "",
+				onChange: o[2] ||= T((e) => U(e), ["prevent"])
+			}, {
+				default: w(() => [(g(!0), c(a, null, v(q.value?.filter((e) => e.page), (e) => (g(), c("option", {
+					key: `pagination-${x(R)}-select-${e.page}`,
+					value: e.page
+				}, " Page " + b(e.page) + b(f.totalPages === null ? "" : ` of ${f.totalPages}`), 9, k))), 128))]),
+				_: 1
+			}, 8, ["id", "modelValue"])], 2),
+			B.value && B.value < f.pages[f.pages.length - 1].page ? (g(), c("li", A, [(g(), s(y(f.linkTag), {
+				"aria-label": "Go to next page",
+				href: f.linkTag === "a" && K.value && K.value.url || void 0,
+				class: m(x(e)(x(F), "cdr-pagination__link", "cdr-pagination__next")),
+				onClick: o[3] ||= (e) => H(K.value.page, e)
+			}, {
+				default: w(() => [o[6] ||= u(" Next ", -1), d(r, { class: m(x(F)["cdr-pagination_caret--next"]) }, null, 8, ["class"])]),
+				_: 1
+			}, 8, ["href", "class"]))])) : (g(), c("li", j, [l("span", {
+				"aria-disabled": "true",
+				class: m(x(e)(x(F), "cdr-pagination__link", "cdr-pagination__next", "cdr-pagination__link--disabled"))
+			}, [o[7] ||= u(" Next ", -1), d(r, {
+				class: m(x(F)["cdr-pagination_caret--next"]),
+				"inherit-color": ""
+			}, null, 8, ["class"])], 2)]))
+		], 2)], 8, E));
+	}
+});
+//#endregion
+export { M as default };