vue-data-ui 3.16.0 → 3.16.2

package/dist/{vue-ui-age-pyramid-QfZ1J5Xx.js → vue-ui-age-pyramid-C67ZVh2l.js}

@@ -1,29 +1,29 @@
-import { defineAsyncComponent as O, computed as h, ref as r, toRefs as Ft, watch as Z, shallowRef as He, onMounted as Dt, onBeforeUnmount as We, watchEffect as Rt, openBlock as i, createElementBlock as v, unref as n, normalizeStyle as ee, normalizeClass as Ke, createElementVNode as c, toDisplayString as T, createBlock as D, createCommentVNode as g, withCtx as f, renderSlot as y, normalizeProps as w, guardReactiveProps as k, createSlots as Xe, createVNode as fe, Fragment as I, renderList as R, resolveDynamicComponent as Mt, mergeProps as Nt, createTextVNode as he, nextTick as ge } from "vue";
-import { j as Et, t as je, o as Ye, q as Bt, K as m, X as Ut, u as pe, v as qe, k as M, l as N, a0 as Vt, a1 as Gt, T as Ht, U as Wt, a3 as Kt } from "./lib-DBptbyyI.js";
-import { t as Je, u as Xt } from "./useResponsive-DfdjqQps.js";
-import { u as jt } from "./useConfig-DO94Aj5s.js";
-import { u as Yt, B as qt } from "./BaseScanner-BhhkKVoj.js";
-import { u as Jt } from "./usePrinter-CEpYU3r5.js";
-import { u as Qt } from "./useSvgExport-ByUukOZt.js";
-import { u as be } from "./useNestedProp-Bf5XFbs8.js";
-import { u as Zt } from "./useThemeCheck-D1ZYXUwG.js";
-import { u as el } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as tl } from "./useChartAccessibility-9icAAmYg.js";
-import { u as ll } from "./useTimeLabelCollider-CIsgDrl9.js";
-import al from "./img-LXxMLmCg.js";
-import ol from "./Title-BeMKE1cj.js";
-import sl from "./vue_ui_age_pyramid-8H8WSL7J.js";
-import { A as il } from "./A11yDataTable-KcVAX2cP.js";
-import { _ as ul } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = ["xmlns", "viewBox", "aria-describedby"], yl = ["x", "y", "width", "height"], cl = ["id"], fl = ["stop-color"], hl = ["stop-color"], gl = ["id"], pl = ["stop-color"], bl = ["stop-color"], ml = ["x", "y", "width", "height", "fill", "rx"], xl = ["x", "y", "width", "height", "fill", "rx"], wl = ["x", "y", "width", "height", "fill", "rx"], kl = ["x", "y", "width", "height", "fill", "rx"], Cl = { key: 0 }, Al = ["x", "y", "fill", "font-size", "font-weight"], Tl = ["x", "y", "fill", "font-size", "font-weight"], $l = { key: 1 }, Ll = ["x", "y", "font-size", "fill", "font-weight"], _l = { key: 2 }, Sl = { key: 0 }, Ol = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], zl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Dl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Rl = ["x", "y", "font-size", "fill", "font-weight"], Ml = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], Nl = {
+import { defineAsyncComponent as I, computed as g, ref as r, toRefs as Mt, watch as ee, shallowRef as We, onMounted as Nt, onBeforeUnmount as Ke, watchEffect as Et, openBlock as u, createElementBlock as v, unref as n, normalizeStyle as te, normalizeClass as Xe, createElementVNode as c, toDisplayString as T, createBlock as R, createCommentVNode as p, withCtx as f, renderSlot as y, normalizeProps as w, guardReactiveProps as k, createSlots as je, createVNode as he, Fragment as O, renderList as M, resolveDynamicComponent as Bt, mergeProps as Ut, createTextVNode as ge, nextTick as pe } from "vue";
+import { j as Vt, t as Ye, o as qe, q as Gt, K as x, X as Ht, u as be, v as Je, k as N, l as E, a0 as Wt, a1 as Kt, T as Xt, U as jt, a3 as Yt } from "./lib-DBptbyyI.js";
+import { t as Qe, u as qt } from "./useResponsive-DfdjqQps.js";
+import { u as Jt } from "./useConfig-DO94Aj5s.js";
+import { u as Qt, B as Zt } from "./BaseScanner-BhhkKVoj.js";
+import { u as el } from "./usePrinter-CEpYU3r5.js";
+import { u as tl } from "./useSvgExport-ByUukOZt.js";
+import { u as me } from "./useNestedProp-Bf5XFbs8.js";
+import { u as ll } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as al } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ol } from "./useChartAccessibility-9icAAmYg.js";
+import { u as sl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import il from "./img-LXxMLmCg.js";
+import ul from "./Title-BeMKE1cj.js";
+import nl from "./vue_ui_age_pyramid-8H8WSL7J.js";
+import { A as rl } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as vl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const dl = ["id"], yl = ["id"], cl = { style: { position: "relative" } }, fl = ["xmlns", "viewBox", "aria-describedby"], hl = ["x", "y", "width", "height"], gl = ["id"], pl = ["stop-color"], bl = ["stop-color"], ml = ["id"], xl = ["stop-color"], wl = ["stop-color"], kl = ["x", "y", "width", "height", "fill", "rx"], Cl = ["x", "y", "width", "height", "fill", "rx"], Al = ["x", "y", "width", "height", "fill", "rx"], Tl = ["x", "y", "width", "height", "fill", "rx"], $l = { key: 0 }, Ll = ["x", "y", "fill", "font-size", "font-weight"], _l = ["x", "y", "fill", "font-size", "font-weight"], Sl = { key: 1 }, Il = ["x", "y", "font-size", "fill", "font-weight"], Ol = { key: 2 }, Pl = { key: 0 }, zl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Rl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ml = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Nl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], El = ["x", "y", "font-size", "fill", "font-weight"], Bl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], Ul = {
   key: 0,
   style: { position: "absolute", top: "100%", left: "0", width: "100%" },
   "data-dom-to-png-ignore": "",
   "aria-hidden": "true"
-}, El = {
+}, Vl = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Bl = {
+}, Gl = {
   __name: "vue-ui-age-pyramid",
   props: {
     config: {
@@ -40,8 +40,8 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
     }
   },
   emits: ["copyAlt"],
-  setup(me, { expose: Qe, emit: Ze }) {
-    const et = O(() => import("./Tooltip-Bf-kM3_A.js")), tt = O(() => import("./BaseIcon-Cb3zzG6s.js")), lt = O(() => import("./vue-ui-accordion-nvggWcGN.js")), at = O(() => import("./DataTable-DT2kIdQ6.js")), ot = O(() => import("./PenAndPaper-DARlvvKW.js")), st = O(() => import("./UserOptions-DWHf8jyO.js")), it = O(() => import("./PackageVersion-IIGK_e2C.js")), ut = O(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_age_pyramid: nt } = jt(), { isThemeValid: rt, warnInvalidTheme: vt } = Zt(), p = me, dt = Ze, xe = h(() => !!p.dataset && p.dataset.length), C = r(Et()), V = r(!1), te = r(""), E = r(null), we = r(0), $ = r(null), ke = r(null), Ce = r(null), Ae = r(null), Te = r(0), $e = r(0), le = r(null), G = r(null), ae = r(null), Y = r(!1), q = r(!1), L = r(null), Le = r({ x: 0, y: 0 }), H = r("pointer"), oe = r(!1), e = r(ue()), W = h(() => e.value.userOptions.useCursorPointer), yt = h(() => je({
+  setup(xe, { expose: Ze, emit: et }) {
+    const tt = I(() => import("./Tooltip-Bf-kM3_A.js")), lt = I(() => import("./BaseIcon-Cb3zzG6s.js")), at = I(() => import("./vue-ui-accordion-nvggWcGN.js")), ot = I(() => import("./DataTable-DT2kIdQ6.js")), st = I(() => import("./PenAndPaper-Ct3qJ4lA.js")), it = I(() => import("./UserOptions-rW2fRf3V.js")), ut = I(() => import("./PackageVersion-C4NWSOC8.js")), nt = I(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_age_pyramid: rt } = Jt(), { isThemeValid: vt, warnInvalidTheme: dt } = ll(), b = xe, yt = et, we = g(() => !!b.dataset && b.dataset.length), C = r(Vt()), V = r(!1), le = r(""), P = r(null), ke = r(0), $ = r(null), Ce = r(null), Ae = r(null), Te = r(null), $e = r(0), Le = r(0), ae = r(null), G = r(null), oe = r(null), q = r(!1), J = r(!1), L = r(null), _e = r({ x: 0, y: 0 }), H = r("pointer"), se = r(!1), e = r(ne()), W = g(() => e.value.userOptions.useCursorPointer), ct = g(() => Ye({
       defaultConfig: {
         userOptions: { show: !1 },
         table: { show: !1 },
@@ -73,11 +73,11 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         }
       },
       userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: _e, FINAL_DATASET: J, manualLoading: se } = Yt({
-      ...Ft(p),
+    })), { loading: Se, FINAL_DATASET: Q, manualLoading: ie } = Qt({
+      ...Mt(b),
       FINAL_CONFIG: e,
-      prepareConfig: ue,
-      skeletonDataset: p.config?.skeletonDataset ?? [
+      prepareConfig: ne,
+      skeletonDataset: b.config?.skeletonDataset ?? [
         ["_", 9, 2, 2],
         ["_", 8, 3, 3],
         ["_", 7, 5, 5],
@@ -89,100 +89,100 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         ["_", 1, 89, 89],
         ["_", 0, 144, 144]
       ],
-      skeletonConfig: je({
+      skeletonConfig: Ye({
         defaultConfig: e.value,
-        userConfig: yt.value
+        userConfig: ct.value
       })
-    }), { userOptionsVisible: ie, setUserOptionsVisibility: Se, keepUserOptionState: Oe } = el({ config: e.value }), { svgRef: P } = tl({ config: e.value.style.title });
-    function ue() {
-      const t = be({
-        userConfig: p.config,
-        defaultConfig: nt
+    }), { userOptionsVisible: ue, setUserOptionsVisibility: Ie, keepUserOptionState: Oe } = al({ config: e.value }), { svgRef: z } = ol({ config: e.value.style.title });
+    function ne() {
+      const t = me({
+        userConfig: b.config,
+        defaultConfig: rt
       }), a = t.theme;
       if (!a) return t;
-      if (!rt.value(t))
-        return vt(t), t;
-      const l = be({
-        userConfig: sl[a] || p.config,
+      if (!vt.value(t))
+        return dt(t), t;
+      const l = me({
+        userConfig: nl[a] || b.config,
         defaultConfig: t
       });
-      return be({
-        userConfig: p.config,
+      return me({
+        userConfig: b.config,
         defaultConfig: l
       });
     }
-    Z(() => p.config, (t) => {
-      _e.value || (e.value = ue()), ie.value = !e.value.userOptions.showOnChartHover, Ie(), Te.value += 1, $e.value += 1, A.value.showTable = e.value.table.show, A.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), Z(() => p.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (se.value = !1);
+    ee(() => b.config, (t) => {
+      Se.value || (e.value = ne()), ue.value = !e.value.userOptions.showOnChartHover, Pe(), $e.value += 1, Le.value += 1, A.value.showTable = e.value.table.show, A.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), ee(() => b.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (ie.value = !1);
     }, { deep: !0 });
-    const _ = He(null), B = He(null);
-    Dt(() => {
-      Ie();
+    const _ = We(null), B = We(null);
+    Nt(() => {
+      Pe();
     });
-    const ct = h(() => !!e.value.debug);
-    function Ie() {
-      if (Ye(p.dataset) && (Bt({
+    const ft = g(() => !!e.value.debug);
+    function Pe() {
+      if (qe(b.dataset) && (Gt({
         componentName: "VueUiAgePyramid",
         type: "dataset",
-        debug: ct.value
-      }), se.value = !0), Ye(p.dataset) || (se.value = e.value.loading), e.value.responsive) {
-        const t = Je(() => {
-          const { width: a, height: l } = Xt({
+        debug: ft.value
+      }), ie.value = !0), qe(b.dataset) || (ie.value = e.value.loading), e.value.responsive) {
+        const t = Qe(() => {
+          const { width: a, height: l } = qt({
             chart: $.value,
-            title: e.value.style.title.text ? ke.value : null,
-            source: Ce.value,
-            noTitle: Ae.value
+            title: e.value.style.title.text ? Ce.value : null,
+            source: Ae.value,
+            noTitle: Te.value
           });
           requestAnimationFrame(() => {
-            b.value.width = a, b.value.height = l;
+            m.value.width = a, m.value.height = l;
           });
         });
         _.value && (B.value && _.value.unobserve(B.value), _.value.disconnect()), _.value = new ResizeObserver(t), B.value = $.value.parentNode, _.value.observe(B.value);
       }
     }
-    We(() => {
+    Ke(() => {
       _.value && (B.value && _.value.unobserve(B.value), _.value.disconnect());
     });
-    const { isPrinting: ne, isImaging: re, generatePdf: Pe, generateImage: ze } = Jt({
+    const { isPrinting: re, isImaging: ve, generatePdf: ze, generateImage: Fe } = el({
       elementId: `vue-ui-age-pyramid_${C.value}`,
       fileName: e.value.style.title.text || "vue-ui-age-pyramid",
       options: e.value.userOptions.print
-    }), ft = h(() => e.value.userOptions.show && !e.value.style.title.text), A = r({
+    }), ht = g(() => e.value.userOptions.show && !e.value.style.title.text), A = r({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     });
-    Z(e, () => {
+    ee(e, () => {
       A.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
     }, { immediate: !0 });
-    const b = r({
+    const m = r({
       height: e.value.style.height,
       width: e.value.style.width
-    }), ht = h(() => b.value.width), gt = h(() => b.value.height), Q = r(0), pt = Je((t) => {
-      Q.value = t;
+    }), gt = g(() => m.value.width), pt = g(() => m.value.height), Z = r(0), bt = Qe((t) => {
+      Z.value = t;
     }, 100);
-    Rt((t) => {
-      const a = le.value;
+    Et((t) => {
+      const a = ae.value;
       if (!a) return;
       const l = new ResizeObserver((o) => {
-        pt(o[0].contentRect.height);
+        bt(o[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
-    }), We(() => {
-      Q.value = 0;
+    }), Ke(() => {
+      Z.value = 0;
     });
-    const s = h(() => {
-      const t = b.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, a = e.value.style.layout.padding.left, l = b.value.width - e.value.style.layout.padding.right;
+    const s = g(() => {
+      const t = m.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, a = e.value.style.layout.padding.left, l = m.value.width - e.value.style.layout.padding.right;
       return {
         top: e.value.style.layout.padding.top + e.value.style.layout.dataLabels.sideTitles.fontSize + e.value.style.layout.dataLabels.sideTitles.offsetY + 12,
         left: a,
         right: l,
-        bottom: b.value.height - e.value.style.layout.padding.bottom - Q.value,
+        bottom: m.value.height - e.value.style.layout.padding.bottom - Z.value,
         width: t,
-        height: b.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - Q.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
+        height: m.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - Z.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
         centerX: e.value.style.layout.padding.left + t / 2,
         leftChart: {
           width: t / 2 - e.value.style.layout.centerSlit.width,
@@ -193,16 +193,16 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           left: a + t / 2 + e.value.style.layout.centerSlit.width
         }
       };
-    }), bt = h(() => J.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), S = h(() => {
-      const t = mt(K.value / 5), a = [], l = [];
+    }), mt = g(() => Q.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), S = g(() => {
+      const t = xt(K.value / 5), a = [], l = [];
       for (let o = 0; o <= 5; o += 1) {
-        const d = t * o, u = t * (o - 5);
+        const d = t * o, i = t * (o - 5);
         a.push({
           value: d,
           x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + d / K.value * s.value.leftChart.width
         }), l.push({
-          value: Math.abs(u),
-          x: s.value.left + s.value.width / 2 + u / K.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
+          value: Math.abs(i),
+          x: s.value.left + s.value.width / 2 + i / K.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
         });
       }
       return {
@@ -210,13 +210,13 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         left: l
       };
     });
-    function mt(t) {
+    function xt(t) {
       if (t === 0) return 0;
       const l = 10 ** Math.floor(Math.log10(Math.abs(t)));
       let o;
       return t < 0, o = Math.round(t / l) * l, o;
     }
-    const K = h(() => Math.max(...J.value.flatMap((t) => t.slice(-2).map((a) => m(a))))), U = h(() => J.value.length), xt = h(() => J.value.map((t) => ({
+    const K = g(() => Math.max(...Q.value.flatMap((t) => t.slice(-2).map((a) => x(a))))), U = g(() => Q.value.length), wt = g(() => Q.value.map((t) => ({
       segment: t[0],
       age: t[1],
       left: {
@@ -227,7 +227,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         value: t[3],
         proportionToMax: t[3] / K.value
       }
-    }))), x = h(() => xt.value.map((t, a) => {
+    }))), h = g(() => wt.value.map((t, a) => {
       const l = s.value.top + s.value.height / U.value * a, o = s.value.height / U.value - e.value.style.layout.bars.gap;
       return {
         segment: t.segment,
@@ -237,7 +237,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           y: l,
           color: e.value.style.layout.bars.left.color,
           x: s.value.leftChart.right - t.left.proportionToMax * s.value.leftChart.width,
-          width: m(t.left.proportionToMax * s.value.leftChart.width),
+          width: x(t.left.proportionToMax * s.value.leftChart.width),
           height: o
         },
         right: {
@@ -245,41 +245,41 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           y: l,
           color: e.value.style.layout.bars.right.color,
           x: s.value.rightChart.left,
-          width: m(t.right.proportionToMax * s.value.rightChart.width),
+          width: x(t.right.proportionToMax * s.value.rightChart.width),
           height: o
         }
       };
-    })), ve = r(null);
-    function de(t) {
+    })), de = r(null);
+    function ye(t) {
       const [a, l, o, d] = t;
       return { segment: a, index: l, left: o, right: d };
     }
-    function Fe(t, a) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: de(a), seriesIndex: t });
+    function De(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: ye(a), seriesIndex: t });
     }
-    function wt(t, a) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: de(a), seriesIndex: t }), !(H.value === "keyboard" && L.value === t) && (E.value = null, V.value = !1);
+    function kt(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ye(a), seriesIndex: t }), !(H.value === "keyboard" && L.value === t) && (P.value = null, V.value = !1);
     }
-    function kt(t) {
-      if (!P.value) return;
-      const a = x.value[t];
+    function Ct(t) {
+      if (!z.value) return;
+      const a = h.value[t];
       if (!a) return;
-      const l = Kt(
+      const l = Yt(
         s.value.left + s.value.width / 2,
         a.left.y + a.left.height / 2,
-        P.value
+        z.value
       );
-      l && (Le.value = l);
+      l && (_e.value = l);
     }
-    function De(t, a, l = "pointer") {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: de(a), seriesIndex: t }), E.value = t, L.value = t, H.value = l, ve.value = {
+    function Re(t, a, l = "pointer") {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: ye(a), seriesIndex: t }), P.value = t, L.value = t, H.value = l, de.value = {
         datapoint: a,
         seriesIndex: t,
-        series: x.value,
+        series: h.value,
         config: e.value
       };
       const o = e.value.style.tooltip.customFormat;
-      if (Ht(o) && Wt(() => o({
+      if (Xt(o) && jt(() => o({
         seriesIndex: t,
         datapoint: {
           segment: a[0],
@@ -287,10 +287,10 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           left: a[2],
           right: a[3]
         },
-        series: x.value,
+        series: h.value,
         config: e.value
       })))
-        te.value = o({
+        le.value = o({
           seriesIndex: t,
           datapoint: {
             segment: a[0],
@@ -298,58 +298,58 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
             left: a[2],
             right: a[3]
           },
-          series: x.value,
+          series: h.value,
           config: e.value
         });
       else {
         let d = "";
-        const u = x.value[t];
-        d += `<div><b>${u.segment}</b></div>`, d += `<div>${e.value.translations.age}: ${M(
+        const i = h.value[t];
+        d += `<div><b>${i.segment}</b></div>`, d += `<div>${e.value.translations.age}: ${N(
           e.value.style.layout.dataLabels.yAxis.formatter,
-          m(u.age),
-          N({ v: m(u.age) }),
+          x(i.age),
+          E({ v: x(i.age) }),
           { datapoint: a, seriesIndex: t }
-        )}</div>`, d += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, d += '<div style="display:flex; flex-direction:row;gap:12px">', d += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${C.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${M(
+        )}</div>`, d += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, d += '<div style="display:flex; flex-direction:row;gap:12px">', d += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${C.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${N(
           e.value.style.layout.dataLabels.xAxis.formatter,
-          m(u.left.value),
-          N({ v: m(u.left.value) }),
+          x(i.left.value),
+          E({ v: x(i.left.value) }),
           { datapoint: a, seriesIndex: t }
-        )}</b></div></div>`, d += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${C.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${M(
+        )}</b></div></div>`, d += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${C.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${N(
           e.value.style.layout.dataLabels.xAxis.formatter,
-          m(u.right.value),
-          N({ v: m(u.right.value) }),
+          x(i.right.value),
+          E({ v: x(i.right.value) }),
           { datapoint: a, seriesIndex: t }
-        )}</b></div></div>`, d += "</div>", d += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}"><div>${e.value.translations.total}</div><div><b>${M(
+        )}</b></div></div>`, d += "</div>", d += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}"><div>${e.value.translations.total}</div><div><b>${N(
           e.value.style.layout.dataLabels.xAxis.formatter,
-          m(u.right.value) + m(u.left.value),
-          N({ v: m(u.right.value) + m(u.left.value) }),
+          x(i.right.value) + x(i.left.value),
+          E({ v: x(i.right.value) + x(i.left.value) }),
           { datapoint: a, seriesIndex: t }
-        )}</b></div></div>`, d += "</div>", te.value = `<div>${d}</div>`;
+        )}</b></div></div>`, d += "</div>", le.value = `<div>${d}</div>`;
       }
-      V.value = !0, l === "keyboard" && ge(() => {
-        kt(t);
+      V.value = !0, l === "keyboard" && pe(() => {
+        Ct(t);
       });
     }
-    function ye(t = null) {
-      ge(() => {
-        const a = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = p.dataset.map((u) => [
-          u[0],
-          u[1],
-          u[2],
-          u[3],
-          u[2] ?? 0 + u[3] ?? 0
-        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), d = Vt(o);
-        t ? t(d) : Gt({ csvContent: d, title: e.value.style.title.text || "vue-ui-heatmap" });
+    function ce(t = null) {
+      pe(() => {
+        const a = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = b.dataset.map((i) => [
+          i[0],
+          i[1],
+          i[2],
+          i[3],
+          i[2] ?? 0 + i[3] ?? 0
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), d = Wt(o);
+        t ? t(d) : Kt({ csvContent: d, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
-    const z = h(() => {
+    const F = g(() => {
       const t = [
         e.value.translations.year,
         e.value.translations.age,
         e.value.translations.female,
         e.value.translations.male,
         e.value.translations.total
-      ], a = p.dataset.map((o) => [
+      ], a = b.dataset.map((o) => [
         o[0],
         o[1],
         o[2] == null ? "" : o[2].toLocaleString(),
@@ -369,57 +369,57 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         breakpoint: e.value.table.responsiveBreakpoint
       };
       return { head: t, body: a, config: l, colNames: t };
-    }), F = r(!1);
-    function Re(t) {
-      F.value = t, we.value += 1;
+    }), D = r(!1);
+    function Me(t) {
+      D.value = t, ke.value += 1;
     }
-    function Me() {
+    function Ne() {
       A.value.showTable = !A.value.showTable;
     }
-    function Ne() {
+    function Ee() {
       A.value.showTooltip = !A.value.showTooltip;
     }
     const X = r(!1);
-    function ce() {
+    function fe() {
       X.value = !X.value;
     }
-    async function Ct({ scale: t = 2 } = {}) {
+    async function At({ scale: t = 2 } = {}) {
       if (!$.value) return;
-      const { width: a, height: l } = $.value.getBoundingClientRect(), o = a / l, { imageUri: d, base64: u } = await al({ domElement: $.value, base64: !0, img: !0, scale: t });
+      const { width: a, height: l } = $.value.getBoundingClientRect(), o = a / l, { imageUri: d, base64: i } = await il({ domElement: $.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: d,
-        base64: u,
+        base64: i,
         title: e.value.style.title.text,
         width: a,
         height: l,
         aspectRatio: o
       };
     }
-    const At = r([]), Tt = r({ start: 0, end: x.value.length });
-    ll({
-      timeLabelsEls: le,
-      timeLabels: At,
-      slicer: Tt,
+    const Tt = r([]), $t = r({ start: 0, end: h.value.length });
+    sl({
+      timeLabelsEls: ae,
+      timeLabels: Tt,
+      slicer: $t,
       configRef: e,
       rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
       autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
       isAutoSize: !1,
-      width: ht,
-      height: gt,
+      width: gt,
+      height: pt,
       targetClass: ".vue-ui-age-pyramid-x-axis-label",
       rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
     });
-    const j = h(() => {
+    const j = g(() => {
       const t = e.value.table.useDialog && !e.value.table.show, a = A.value.showTable;
       return {
-        component: t ? ut : lt,
+        component: t ? nt : at,
         title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: F.value,
+          isFullscreen: D.value,
           fullscreenParent: $.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8),
           isCursorPointer: W.value
@@ -440,121 +440,122 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         }
       };
     });
-    Z(() => A.value.showTable, (t) => {
+    ee(() => A.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && G.value ? G.value.open() : "close" in G.value && G.value.close());
     });
-    function Ee() {
-      A.value.showTable = !1, ae.value && ae.value.setTableIconState(!1);
+    function Be() {
+      A.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
     }
-    const $t = h(() => e.value.style.backgroundColor), Lt = h(() => e.value.style.title), { exportSvg: _t, getSvg: St } = Qt({
-      svg: P,
-      title: Lt,
-      backgroundColor: $t
+    const Lt = g(() => e.value.style.backgroundColor), _t = g(() => e.value.style.title), { exportSvg: St, getSvg: It } = tl({
+      svg: z,
+      title: _t,
+      backgroundColor: Lt
     });
-    async function Be({ isCb: t }) {
-      q.value = !0, await ge();
+    async function Ue({ isCb: t }) {
+      J.value = !0, await pe();
       try {
         if (t) {
-          const { blob: a, url: l, text: o, dataUrl: d } = await St();
+          const { blob: a, url: l, text: o, dataUrl: d } = await It();
           await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: d }));
         } else
-          await Promise.resolve(_t());
+          await Promise.resolve(St());
       } finally {
-        q.value = !1;
+        J.value = !1;
       }
     }
     function Ot(t) {
       if (t?.stage === "start") {
-        Y.value = !0;
+        q.value = !0;
         return;
       }
       if (t?.stage === "end") {
-        Y.value = !1;
+        q.value = !1;
         return;
       }
-      ze();
+      Fe();
     }
-    async function Ue() {
-      if (dt("copyAlt", {
+    async function Ve() {
+      if (yt("copyAlt", {
         config: e.value,
-        dataset: x.value
+        dataset: h.value
       }), !e.value.userOptions.callbacks.altCopy) {
         console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
         return;
       }
       await Promise.resolve(e.value.userOptions.callbacks.altCopy({
         config: e.value,
-        dataset: x.value
+        dataset: h.value
       }));
     }
-    function It() {
-      oe.value = !0;
-    }
     function Pt() {
-      E.value = null, L.value = null, H.value = "pointer", V.value = !1, oe.value = !1;
+      se.value = !0;
+    }
+    function zt() {
+      P.value = null, L.value = null, H.value = "pointer", V.value = !1, se.value = !1;
     }
-    function zt(t) {
-      if (!P.value || X.value || document.activeElement !== P.value || !x.value.length) return;
+    function Ft(t) {
+      if (!z.value || X.value || document.activeElement !== z.value || !h.value.length) return;
       const a = ["ArrowUp", "ArrowLeft"].includes(t.key), l = ["ArrowDown", "ArrowRight"].includes(t.key), o = t.key === "Enter" || t.key === " ", d = t.key === "Escape";
       if (!a && !l && !o && !d) return;
       if (t.preventDefault(), t.stopPropagation(), d) {
-        E.value = null, L.value = null, H.value = "pointer", V.value = !1;
+        P.value = null, L.value = null, H.value = "pointer", V.value = !1;
         return;
       }
       if (o) {
         if (L.value === null) return;
-        const Ge = p.dataset[L.value];
-        if (!Ge) return;
-        Fe(L.value, Ge);
+        const He = b.dataset[L.value];
+        if (!He) return;
+        De(L.value, He);
         return;
       }
-      let u = L.value;
-      u === null ? u = 0 : a ? u = u - 1 < 0 ? x.value.length - 1 : u - 1 : l && (u = u + 1 > x.value.length - 1 ? 0 : u + 1);
-      const Ve = p.dataset[u];
-      Ve && De(u, Ve, "keyboard");
+      let i = L.value;
+      const Y = P.value, Dt = i !== null && i >= 0 && i < h.value.length, Rt = Y !== null && Y >= 0 && Y < h.value.length;
+      Dt ? a ? i = i - 1 < 0 ? h.value.length - 1 : i - 1 : l && (i = i + 1 > h.value.length - 1 ? 0 : i + 1) : Rt ? (i = l ? Y + 1 : Y - 1, i >= h.value.length && (i = 0), i < 0 && (i = h.value.length - 1)) : l ? i = 0 : i = h.value.length - 1;
+      const Ge = b.dataset[i];
+      Ge && Re(i, Ge, "keyboard");
     }
-    return Qe({
-      getImage: Ct,
-      generatePdf: Pe,
-      generateCsv: ye,
-      generateImage: ze,
-      generateSvg: Be,
-      toggleTable: Me,
-      toggleTooltip: Ne,
-      toggleAnnotator: ce,
-      toggleFullscreen: Re,
-      copyAlt: Ue
-    }), (t, a) => (i(), v("div", {
-      class: Ke(`vue-data-ui-component vue-ui-age-pyramid ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+    return Ze({
+      getImage: At,
+      generatePdf: ze,
+      generateCsv: ce,
+      generateImage: Fe,
+      generateSvg: Ue,
+      toggleTable: Ne,
+      toggleTooltip: Ee,
+      toggleAnnotator: fe,
+      toggleFullscreen: Me,
+      copyAlt: Ve
+    }), (t, a) => (u(), v("div", {
+      class: Xe(`vue-data-ui-component vue-ui-age-pyramid ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "agePyramid",
       ref: $,
       id: `vue-ui-age-pyramid_${C.value}`,
-      style: ee(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      onMouseenter: a[1] || (a[1] = () => n(Se)(!0)),
-      onMouseleave: a[2] || (a[2] = () => n(Se)(!1))
+      style: te(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: a[1] || (a[1] = () => n(Ie)(!0)),
+      onMouseleave: a[2] || (a[2] = () => n(Ie)(!1))
     }, [
       c("div", {
         id: `chart-instructions-${C.value}`,
         class: "sr-only"
       }, [
         c("p", null, T(e.value.a11y.translations.keyboardNavigation), 1)
-      ], 8, rl),
-      z.value?.body?.length ? (i(), D(il, {
+      ], 8, yl),
+      F.value?.body?.length ? (u(), R(rl, {
         key: 0,
         uid: C.value,
-        head: z.value.head,
-        body: z.value.body,
+        head: F.value.head,
+        body: F.value.body,
         notice: e.value.a11y.translations.tableAvailable,
         caption: e.value.a11y.translations.tableCaption
-      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : g("", !0),
-      e.value.userOptions.buttons.annotator ? (i(), D(n(ot), {
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : p("", !0),
+      e.value.userOptions.buttons.annotator ? (u(), R(n(st), {
         key: 1,
-        svgRef: n(P),
+        svgRef: n(z),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         active: X.value,
         isCursorPointer: W.value,
-        onClose: ce
+        onClose: fe
       }, {
         "annotator-action-close": f(() => [
           y(t.$slots, "annotator-action-close", {}, void 0, !0)
@@ -575,22 +576,22 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           y(t.$slots, "annotator-action-delete", w(k({ disabled: l })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : g("", !0),
-      ft.value ? (i(), v("div", {
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : p("", !0),
+      ht.value ? (u(), v("div", {
         key: 2,
         ref_key: "noTitle",
-        ref: Ae,
+        ref: Te,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : g("", !0),
-      e.value.style.title.text ? (i(), v("div", {
+      }, null, 512)) : p("", !0),
+      e.value.style.title.text ? (u(), v("div", {
         key: 3,
         ref_key: "chartTitle",
-        ref: ke,
+        ref: Ce,
         style: "width:100%;background:transparent"
       }, [
-        (i(), D(ol, {
-          key: `title_${Te.value}`,
+        (u(), R(ul, {
+          key: `title_${$e.value}`,
           config: {
             title: {
               cy: "pyramid-div-title",
@@ -602,15 +603,15 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : g("", !0),
-      e.value.userOptions.show && xe.value && (n(Oe) || n(ie)) ? (i(), D(n(st), {
+      ], 512)) : p("", !0),
+      e.value.userOptions.show && we.value && (n(Oe) || n(ue)) ? (u(), R(n(it), {
         ref_key: "userOptionsRef",
-        ref: ae,
-        key: `user_options_${we.value}`,
+        ref: oe,
+        key: `user_options_${ke.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        isImaging: n(re),
-        isPrinting: n(ne),
+        isImaging: n(ve),
+        isPrinting: n(re),
         uid: C.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -620,7 +621,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasAltCopy: e.value.userOptions.buttons.altCopy,
-        isFullscreen: F.value,
+        isFullscreen: D.value,
         isTooltip: A.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: $.value,
@@ -631,19 +632,19 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         isCursorPointer: W.value,
-        onToggleFullscreen: Re,
-        onGeneratePdf: n(Pe),
-        onGenerateCsv: ye,
+        onToggleFullscreen: Me,
+        onGeneratePdf: n(ze),
+        onGenerateCsv: ce,
         onGenerateImage: Ot,
-        onGenerateSvg: Be,
-        onToggleTable: Me,
-        onToggleTooltip: Ne,
-        onToggleAnnotator: ce,
-        onCopyAlt: Ue,
-        style: ee({
-          visibility: n(Oe) ? n(ie) ? "visible" : "hidden" : "visible"
+        onGenerateSvg: Ue,
+        onToggleTable: Ne,
+        onToggleTooltip: Ee,
+        onToggleAnnotator: fe,
+        onCopyAlt: Ve,
+        style: te({
+          visibility: n(Oe) ? n(ue) ? "visible" : "hidden" : "visible"
         })
-      }, Xe({ _: 2 }, [
+      }, je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: f(({ isOpen: l, color: o }) => [
@@ -714,23 +715,23 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           ]),
           key: "9"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : g("", !0),
-      c("div", vl, [
-        (i(), v("svg", {
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : p("", !0),
+      c("div", cl, [
+        (u(), v("svg", {
           ref_key: "svgRef",
-          ref: P,
-          xmlns: n(Ut),
-          class: Ke({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
-          viewBox: `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`,
-          style: ee(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`),
+          ref: z,
+          xmlns: n(Ht),
+          class: Xe({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
+          viewBox: `0 0 ${m.value.width <= 0 ? 10 : m.value.width} ${m.value.height <= 0 ? 10 : m.value.height}`,
+          style: te(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`),
           tabindex: "0",
           "aria-describedby": `chart-instructions-${C.value}`,
-          onFocus: It,
-          onBlur: Pt,
-          onKeydown: zt
+          onFocus: Pt,
+          onBlur: zt,
+          onKeydown: Ft
         }, [
-          fe(n(it)),
-          t.$slots["chart-background"] ? (i(), v("foreignObject", {
+          he(n(ut)),
+          t.$slots["chart-background"] ? (u(), v("foreignObject", {
             key: 0,
             x: s.value.left,
             y: s.value.top,
@@ -741,7 +742,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
             }
           }, [
             y(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, yl)) : g("", !0),
+          ], 8, hl)) : p("", !0),
           c("defs", null, [
             c("linearGradient", {
               id: `age_pyramid_left_${C.value}`,
@@ -753,12 +754,12 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
               c("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.bars.left.color
-              }, null, 8, fl),
+              }, null, 8, pl),
               c("stop", {
                 offset: "100%",
-                "stop-color": n(pe)(n(qe)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-              }, null, 8, hl)
-            ], 8, cl),
+                "stop-color": n(be)(n(Je)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+              }, null, 8, bl)
+            ], 8, gl),
             c("linearGradient", {
               id: `age_pyramid_right_${C.value}`,
               x1: "0%",
@@ -768,23 +769,23 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
             }, [
               c("stop", {
                 offset: "0%",
-                "stop-color": n(pe)(n(qe)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-              }, null, 8, pl),
+                "stop-color": n(be)(n(Je)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+              }, null, 8, xl),
               c("stop", {
                 offset: "100%",
                 "stop-color": e.value.style.layout.bars.right.color
-              }, null, 8, bl)
-            ], 8, gl)
+              }, null, 8, wl)
+            ], 8, ml)
           ]),
-          (i(!0), v(I, null, R(x.value, (l, o) => (i(), v("g", null, [
+          (u(!0), v(O, null, M(h.value, (l, o) => (u(), v("g", null, [
             c("rect", {
               x: l.left.x,
               y: l.left.y,
-              width: n(m)(l.left.width <= 0 ? 1e-4 : l.left.width),
+              width: n(x)(l.left.width <= 0 ? 1e-4 : l.left.width),
               height: l.left.height <= 0 ? 1e-4 : l.left.height,
               fill: e.value.style.layout.bars.gradient.underlayer,
               rx: e.value.style.layout.bars.borderRadius
-            }, null, 8, ml),
+            }, null, 8, kl),
             c("rect", {
               x: l.left.x,
               y: l.left.y,
@@ -792,7 +793,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
               height: l.left.height <= 0 ? 1e-4 : l.left.height,
               fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${C.value})` : l.left.color,
               rx: e.value.style.layout.bars.borderRadius
-            }, null, 8, xl),
+            }, null, 8, Cl),
             c("rect", {
               x: l.right.x,
               y: l.right.y,
@@ -800,7 +801,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
               height: l.right.height <= 0 ? 1e-4 : l.right.height,
               fill: e.value.style.layout.bars.gradient.underlayer,
               rx: e.value.style.layout.bars.borderRadius
-            }, null, 8, wl),
+            }, null, 8, Al),
             c("rect", {
               x: l.right.x,
               y: l.right.y,
@@ -808,10 +809,10 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
               height: l.right.height <= 0 ? 1e-4 : l.right.height,
               fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${C.value})` : l.right.color,
               rx: e.value.style.layout.bars.borderRadius
-            }, null, 8, kl)
+            }, null, 8, Tl)
           ]))), 256)),
           c("g", null, [
-            e.value.style.layout.dataLabels.sideTitles.show ? (i(), v("g", Cl, [
+            e.value.style.layout.dataLabels.sideTitles.show ? (u(), v("g", $l, [
               c("text", {
                 x: s.value.left,
                 y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -819,7 +820,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                 "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
                 "text-anchor": "start",
                 "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
-              }, T(e.value.translations.female), 9, Al),
+              }, T(e.value.translations.female), 9, Ll),
               c("text", {
                 x: s.value.right,
                 y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -827,11 +828,11 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                 "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
                 "text-anchor": "end",
                 "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
-              }, T(e.value.translations.male), 9, Tl)
-            ])) : g("", !0),
-            e.value.style.layout.dataLabels.yAxis.show ? (i(), v("g", $l, [
-              (i(!0), v(I, null, R(bt.value, (l, o) => (i(), v(I, null, [
-                o % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), v("text", {
+              }, T(e.value.translations.male), 9, _l)
+            ])) : p("", !0),
+            e.value.style.layout.dataLabels.yAxis.show ? (u(), v("g", Sl, [
+              (u(!0), v(O, null, M(mt.value, (l, o) => (u(), v(O, null, [
+                o % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (u(), v("text", {
                   key: 0,
                   x: s.value.centerX,
                   y: s.value.top + s.value.height / U.value * o + e.value.style.layout.dataLabels.yAxis.fontSize / 3,
@@ -839,16 +840,16 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                   "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
                   fill: e.value.style.layout.dataLabels.yAxis.color,
                   "font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
-                }, T(n(M)(
+                }, T(n(N)(
                   e.value.style.layout.dataLabels.yAxis.formatter,
                   l,
-                  n(N)({ v: l }),
+                  n(E)({ v: l }),
                   { datapoint: l, seriesIndex: o }
-                )), 9, Ll)) : g("", !0)
+                )), 9, Il)) : p("", !0)
               ], 64))), 256))
-            ])) : g("", !0),
-            e.value.style.layout.dataLabels.xAxis.show ? (i(), v("g", _l, [
-              e.value.style.layout.grid.show ? (i(), v("g", Sl, [
+            ])) : p("", !0),
+            e.value.style.layout.dataLabels.xAxis.show ? (u(), v("g", Ol, [
+              e.value.style.layout.grid.show ? (u(), v("g", Pl, [
                 c("line", {
                   x1: S.value.right[0].x,
                   x2: S.value.right.at(-1).x,
@@ -857,7 +858,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                   stroke: e.value.style.layout.grid.stroke,
                   "stroke-width": e.value.style.layout.grid.strokeWidth,
                   "stroke-linecap": "round"
-                }, null, 8, Ol),
+                }, null, 8, zl),
                 c("line", {
                   x1: S.value.left[0].x,
                   x2: S.value.left.at(-1).x,
@@ -866,10 +867,10 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                   stroke: e.value.style.layout.grid.stroke,
                   "stroke-width": e.value.style.layout.grid.strokeWidth,
                   "stroke-linecap": "round"
-                }, null, 8, Il)
-              ])) : g("", !0),
-              (i(!0), v(I, null, R(S.value.right, (l, o) => (i(), v("g", null, [
-                e.value.style.layout.grid.show ? (i(), v("line", {
+                }, null, 8, Fl)
+              ])) : p("", !0),
+              (u(!0), v(O, null, M(S.value.right, (l, o) => (u(), v("g", null, [
+                e.value.style.layout.grid.show ? (u(), v("line", {
                   key: 0,
                   x1: l.x,
                   x2: l.x,
@@ -878,10 +879,10 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                   stroke: e.value.style.layout.grid.stroke,
                   "stroke-width": e.value.style.layout.grid.strokeWidth,
                   "stroke-linecap": "round"
-                }, null, 8, Pl)) : g("", !0)
+                }, null, 8, Dl)) : p("", !0)
               ]))), 256)),
-              (i(!0), v(I, null, R(S.value.left, (l, o) => (i(), v("g", null, [
-                e.value.style.layout.grid.show ? (i(), v("line", {
+              (u(!0), v(O, null, M(S.value.left, (l, o) => (u(), v("g", null, [
+                e.value.style.layout.grid.show ? (u(), v("line", {
                   key: 0,
                   x1: l.x,
                   x2: l.x,
@@ -890,90 +891,90 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
                   stroke: e.value.style.layout.grid.stroke,
                   "stroke-width": e.value.style.layout.grid.strokeWidth,
                   "stroke-linecap": "round"
-                }, null, 8, zl)) : g("", !0)
+                }, null, 8, Rl)) : p("", !0)
               ]))), 256)),
               c("g", {
                 ref_key: "xAxisLabels",
-                ref: le
+                ref: ae
               }, [
-                (i(!0), v(I, null, R(S.value.right, (l, o) => (i(), v("text", {
+                (u(!0), v(O, null, M(S.value.right, (l, o) => (u(), v("text", {
                   class: "vue-ui-age-pyramid-x-axis-label",
                   "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
                   fill: e.value.style.layout.dataLabels.xAxis.color,
                   "text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
                   "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
                   transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
-                }, T(n(M)(
+                }, T(n(N)(
                   e.value.style.layout.dataLabels.xAxis.formatter,
                   l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                  n(N)({
+                  n(E)({
                     v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                   }),
                   { datapoint: l, seriesIndex: o }
-                )), 9, Fl))), 256)),
-                (i(!0), v(I, null, R(S.value.left, (l, o) => (i(), v("text", {
+                )), 9, Ml))), 256)),
+                (u(!0), v(O, null, M(S.value.left, (l, o) => (u(), v("text", {
                   class: "vue-ui-age-pyramid-x-axis-label",
                   "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
                   fill: e.value.style.layout.dataLabels.xAxis.color,
                   "text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
                   "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
                   transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
-                }, T(n(M)(
+                }, T(n(N)(
                   e.value.style.layout.dataLabels.xAxis.formatter,
                   l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                  n(N)({
+                  n(E)({
                     v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                   }),
                   { datapoint: l, seriesIndex: o }
-                )), 9, Dl))), 256))
+                )), 9, Nl))), 256))
               ], 512),
               c("text", {
                 x: s.value.right,
-                y: b.value.height,
+                y: m.value.height,
                 "text-anchor": "end",
                 "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
                 fill: e.value.style.layout.dataLabels.xAxis.color,
                 "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
-              }, T(e.value.style.layout.dataLabels.xAxis.translation), 9, Rl)
-            ])) : g("", !0)
+              }, T(e.value.style.layout.dataLabels.xAxis.translation), 9, El)
+            ])) : p("", !0)
           ]),
-          (i(!0), v(I, null, R(me.dataset, (l, o) => (i(), v("g", null, [
+          (u(!0), v(O, null, M(xe.dataset, (l, o) => (u(), v("g", null, [
             c("rect", {
               x: s.value.left,
               y: s.value.top + s.value.height / U.value * o - e.value.style.layout.bars.gap / 2,
               width: s.value.width <= 0 ? 1e-4 : s.value.width,
               height: s.value.height / U.value <= 0 ? 1e-4 : s.value.height / U.value,
-              fill: E.value !== null && E.value === o ? n(pe)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
-              onMouseover: (d) => De(o, l, "pointer"),
-              onMouseleave: (d) => wt(o, l),
-              onClick: (d) => Fe(o, l)
-            }, null, 40, Ml)
+              fill: P.value !== null && P.value === o ? n(be)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
+              onMouseover: (d) => Re(o, l, "pointer"),
+              onMouseleave: (d) => kt(o, l),
+              onClick: (d) => De(o, l)
+            }, null, 40, Bl)
           ]))), 256)),
           y(t.$slots, "svg", {
             svg: {
-              ...b.value,
-              isPrintingImg: n(ne) | n(re) | Y.value,
-              isPrintingSvg: q.value
+              ...m.value,
+              isPrintingImg: n(re) | n(ve) | q.value,
+              isPrintingSvg: J.value
             }
           }, void 0, !0)
-        ], 46, dl)),
-        t.$slots.hint ? (i(), v("div", Nl, [
-          y(t.$slots, "hint", w(k({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: oe.value })), void 0, !0)
-        ])) : g("", !0)
+        ], 46, fl)),
+        t.$slots.hint ? (u(), v("div", Ul, [
+          y(t.$slots, "hint", w(k({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: se.value })), void 0, !0)
+        ])) : p("", !0)
       ]),
-      t.$slots.watermark ? (i(), v("div", El, [
-        y(t.$slots, "watermark", w(k({ isPrinting: n(ne) || n(re) || Y.value || q.value })), void 0, !0)
-      ])) : g("", !0),
-      y(t.$slots, "legend", { legend: x.value }, void 0, !0),
-      t.$slots.source ? (i(), v("div", {
+      t.$slots.watermark ? (u(), v("div", Vl, [
+        y(t.$slots, "watermark", w(k({ isPrinting: n(re) || n(ve) || q.value || J.value })), void 0, !0)
+      ])) : p("", !0),
+      y(t.$slots, "legend", { legend: h.value }, void 0, !0),
+      t.$slots.source ? (u(), v("div", {
         key: 6,
         ref_key: "source",
-        ref: Ce,
+        ref: Ae,
         dir: "auto"
       }, [
         y(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : g("", !0),
-      fe(n(et), {
+      ], 512)) : p("", !0),
+      he(n(tt), {
         teleportTo: e.value.style.tooltip.teleportTo,
         show: A.value.showTooltip && V.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
@@ -986,46 +987,46 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
         parent: $.value,
-        content: te.value,
-        isFullscreen: F.value,
+        content: le.value,
+        isFullscreen: D.value,
         isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
         smooth: e.value.style.tooltip.smooth,
         backdropFilter: e.value.style.tooltip.backdropFilter,
         smoothForce: e.value.style.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold,
         isA11yMode: H.value === "keyboard",
-        a11yPosition: Le.value
+        a11yPosition: _e.value
       }, {
         "tooltip-before": f(() => [
-          y(t.$slots, "tooltip-before", w(k({ ...ve.value })), void 0, !0)
+          y(t.$slots, "tooltip-before", w(k({ ...de.value })), void 0, !0)
         ]),
         "tooltip-after": f(() => [
-          y(t.$slots, "tooltip-after", w(k({ ...ve.value })), void 0, !0)
+          y(t.$slots, "tooltip-after", w(k({ ...de.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
-      xe.value && e.value.userOptions.buttons.table ? (i(), D(Mt(j.value.component), Nt({ key: 7 }, j.value.props, {
+      we.value && e.value.userOptions.buttons.table ? (u(), R(Bt(j.value.component), Ut({ key: 7 }, j.value.props, {
         ref_key: "tableUnit",
         ref: G,
-        onClose: Ee
-      }), Xe({
+        onClose: Be
+      }), je({
         content: f(() => [
-          (i(), D(n(at), {
-            key: `table_${$e.value}`,
-            colNames: z.value.colNames,
-            head: z.value.head,
-            body: z.value.body,
-            config: z.value.config,
+          (u(), R(n(ot), {
+            key: `table_${Le.value}`,
+            colNames: F.value.colNames,
+            head: F.value.head,
+            body: F.value.body,
+            config: F.value.config,
             title: e.value.table.useDialog ? "" : j.value.title,
             withCloseButton: !e.value.table.useDialog,
             isCursorPointer: W.value,
-            onClose: Ee
+            onClose: Be
           }, {
             th: f(({ th: l }) => [
-              he(T(l), 1)
+              ge(T(l), 1)
             ]),
             td: f(({ td: l }) => [
-              he(T(l), 1)
+              ge(T(l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
@@ -1035,7 +1036,7 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
         e.value.table.useDialog ? {
           name: "title",
           fn: f(() => [
-            he(T(j.value.title), 1)
+            ge(T(j.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1045,10 +1046,10 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
             c("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[0] || (a[0] = (l) => ye(e.value.userOptions.callbacks.csv)),
-              style: ee({ cursor: W.value ? "pointer" : "default" })
+              onClick: a[0] || (a[0] = (l) => ce(e.value.userOptions.callbacks.csv)),
+              style: te({ cursor: W.value ? "pointer" : "default" })
             }, [
-              fe(n(tt), {
+              he(n(lt), {
                 name: "fileCsv",
                 stroke: j.value.props.color
               }, null, 8, ["stroke"])
@@ -1056,13 +1057,13 @@ const nl = ["id"], rl = ["id"], vl = { style: { position: "relative" } }, dl = [
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : g("", !0),
+      ]), 1040)) : p("", !0),
       y(t.$slots, "skeleton", {}, () => [
-        n(_e) ? (i(), D(qt, { key: 0 })) : g("", !0)
+        n(Se) ? (u(), R(Zt, { key: 0 })) : p("", !0)
       ], !0)
-    ], 46, nl));
+    ], 46, dl));
   }
-}, oa = /* @__PURE__ */ ul(Bl, [["__scopeId", "data-v-66c2b0a4"]]);
+}, ua = /* @__PURE__ */ vl(Gl, [["__scopeId", "data-v-b63d06c1"]]);
 export {
-  oa as default
+  ua as default
 };