@waaelg/dga-design-system 0.5.4 → 0.7.0

package/dist/index.js

@@ -1,4 +1,4 @@
-class c {
+class W {
   constructor(t) {
     this.root = t, this.handleClick = this.handleClick.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.init();
   }
@@ -32,9 +32,9 @@ class c {
     this.root.removeEventListener("click", this.handleClick), this.root.removeEventListener("keydown", this.handleKeydown);
   }
 }
-class $ {
+class Tt {
   constructor(t) {
-    this.accordion = t, this.controller = new c(t);
+    this.accordion = t, this.controller = new W(t);
   }
   toggle(t) {
     this.controller.toggle(t);
@@ -52,7 +52,7 @@ class $ {
     this.controller.destroy();
   }
 }
-class B {
+class Dt {
   constructor(t = document) {
     this.root = t, this.handleCloseClick = this.handleCloseClick.bind(this), this.init();
   }
@@ -63,77 +63,328 @@ class B {
     const e = t.target.closest("[data-alert-close]");
     if (!e)
       return;
-    const s = e.closest(".dga-alert");
-    s && (s.style.display = "none");
+    const i = e.closest(".dga-alert");
+    i && (i.style.display = "none");
   }
   destroy() {
     this.root.removeEventListener("click", this.handleCloseClick);
   }
 }
-function h(i) {
-  return i.startsWith("#") || i.startsWith("var(") ? i : `var(--${i})`;
+function N(s) {
+  return s.startsWith("#") || s.startsWith("var(") ? s : `var(--${s})`;
 }
-function u(i = []) {
-  return `conic-gradient(${i.map(
-    (e) => `${h(e.color)} ${e.from} ${e.to}`
+const dt = [
+  "dga-primary-700",
+  "dga-primary-600",
+  "dga-primary-500",
+  "dga-primary-400",
+  "dga-primary-300",
+  "dga-primary-200"
+], F = [
+  "dga-gold-500",
+  "dga-primary-300",
+  "dga-warning-500",
+  "dga-info-500",
+  "dga-lavender-500",
+  "dga-error-500"
+];
+function ht(s) {
+  if (s <= 0) return [];
+  const t = dt;
+  return s === 1 ? [t[Math.floor((t.length - 1) / 2)]] : Array.from(
+    { length: s },
+    (e, i) => t[Math.round(i * (t.length - 1) / (s - 1))]
+  );
+}
+function gt(s) {
+  return Array.from(
+    { length: Math.max(s, 0) },
+    (t, e) => F[e % F.length]
+  );
+}
+function ut(s, t) {
+  return s === "color" ? gt(t) : ht(t);
+}
+function U(s = []) {
+  return `conic-gradient(${s.map(
+    (e) => `${N(e.color)} ${e.from} ${e.to}`
   ).join(", ")})`;
 }
-function g(i = []) {
-  return `<div class="dga-pie-chart__labels">${i.map(
-    (e) => `<span class="dga-pie-chart__label"><span class="dga-pie-chart__circle" style="background-color: ${h(
+function Y(s = []) {
+  return `<div class="dga-pie-chart__labels">${s.map(
+    (e) => `<span class="dga-pie-chart__label"><span class="dga-pie-chart__circle" style="background-color: ${N(
       e.color
     )}"></span>${e.label}</span>`
   ).join("")}</div>`;
 }
-function A(i) {
-  if (!i) return [];
+function bt(s) {
+  if (!s) return [];
   try {
-    const t = JSON.parse(i);
+    const t = JSON.parse(s);
     return Array.isArray(t) ? t : [];
   } catch {
     return console.warn("dga-pie-chart: invalid data attribute JSON"), [];
   }
 }
-function p(i, t = [], { hole: e = !1 } = {}) {
-  i && (i.classList.add("dga-pie-chart"), i.setAttribute("data-hole", e ? "true" : "false"), i.style.background = u(t), i.innerHTML = g(t));
+function V(s, t = [], { hole: e = !1, styleColor: i = "brand" } = {}) {
+  if (!s) return;
+  const a = i === "color" ? "color" : "brand", n = ut(a, t.length), o = t.map((h, b) => ({
+    ...h,
+    color: h.color || n[b] || "dga-primary-500"
+  }));
+  s.classList.add("dga-pie-chart"), s.setAttribute("data-hole", e ? "true" : "false"), s.setAttribute("data-style-color", a), s.style.background = "", s.innerHTML = `<span class="dga-pie-chart__disc" style="background: ${U(
+    o
+  )}"></span>${Y(o)}`;
 }
-class H {
+class Bt {
   constructor(t, e = []) {
     this.chart = t, this.data = e, this.init();
   }
   init() {
-    const t = this.chart.getAttribute("data-hole") === "true";
-    p(this.chart, this.data, { hole: t });
+    const t = this.chart.getAttribute("data-hole") === "true", e = this.chart.getAttribute("data-style-color") === "color" ? "color" : "brand";
+    V(this.chart, this.data, { hole: t, styleColor: e });
   }
   generateGradient() {
-    return u(this.data);
+    return U(this.data);
   }
   generateLabels() {
-    return g(this.data);
+    return Y(this.data);
+  }
+}
+function l(s = "") {
+  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const pt = [
+  "dga-primary-700",
+  "dga-primary-400",
+  "dga-gray-200",
+  "dga-primary-500",
+  "dga-primary-300",
+  "dga-gray-400"
+], mt = [
+  "dga-gold-500",
+  "dga-primary-300",
+  "dga-warning-500",
+  "dga-info-500",
+  "dga-lavender-500",
+  "dga-error-500"
+];
+function yt(s, t) {
+  const e = s === "color" ? mt : pt;
+  return Array.from(
+    { length: Math.max(t, 0) },
+    (i, a) => e[a % e.length]
+  );
+}
+function Q(s, t = 8) {
+  const e = s > 0 ? s : 1, i = e / t, a = Math.pow(10, Math.floor(Math.log10(i))), n = i / a;
+  let o;
+  n <= 1 ? o = 1 : n <= 2 ? o = 2 : n <= 2.5 ? o = 2.5 : n <= 5 ? o = 5 : o = 10, o *= a;
+  const h = Math.ceil(e / o) * o;
+  return { step: o, niceMax: h };
+}
+function J(s) {
+  if (!s) return { categories: [], series: [] };
+  try {
+    const t = JSON.parse(s);
+    return {
+      categories: Array.isArray(t.categories) ? t.categories : [],
+      series: Array.isArray(t.series) ? t.series : []
+    };
+  } catch {
+    return console.warn("dga-bar-chart: invalid data attribute JSON"), { categories: [], series: [] };
+  }
+}
+function X(s, t = {}) {
+  if (!s) return;
+  const {
+    categories: e = [],
+    series: i = [],
+    styleColor: a = "brand",
+    max: n = null,
+    showLegend: o = !0,
+    showXLabel: h = !0,
+    showYLabel: b = !0,
+    xLabel: A = "",
+    yLabel: p = ""
+  } = t, m = a === "color" ? "color" : "brand", y = yt(m, i.length), x = i.map(
+    (c, g) => N(c.color || y[g] || "dga-primary-500")
+  ), $ = e.map(
+    (c, g) => i.reduce((f, u) => f + (Number(u.values?.[g]) || 0), 0)
+  ), L = Math.max(1, ...$), { step: w, niceMax: E } = Q(Number(n) > 0 ? Number(n) : L), v = [];
+  for (let c = E; c >= 0; c -= w) v.push(Math.round(c));
+  const M = o ? `<div class="dga-bar-chart__legend">${i.map(
+    (c, g) => `<span class="dga-bar-chart__legend-item"><span class="dga-bar-chart__legend-dot" style="background:${x[g]}"></span>${l(
+      c.label ?? ""
+    )}</span>`
+  ).join("")}</div>` : "", S = `<div class="dga-bar-chart__y-axis">${v.map((c) => `<span class="dga-bar-chart__y-tick">${c}</span>`).join("")}</div>`, H = `<div class="dga-bar-chart__gridlines">${v.map(() => '<span class="dga-bar-chart__gridline"></span>').join("")}</div>`, R = `<div class="dga-bar-chart__bars">${e.map((c, g) => {
+    const f = $[g], u = f / E * 100, T = i.map((D, B) => {
+      const O = Number(D.values?.[g]) || 0;
+      return `<span class="dga-bar-chart__seg" style="height:${f > 0 ? O / f * 100 : 0}%;background:${x[B]}"></span>`;
+    }).join("");
+    return `<div class="dga-bar-chart__col"><div class="dga-bar-chart__bar" style="height:${u}%">${T}</div></div>`;
+  }).join("")}</div>`, q = `<div class="dga-bar-chart__x-axis">${e.map((c) => `<span class="dga-bar-chart__x-tick">${l(c)}</span>`).join("")}</div>`, P = b && p ? `<div class="dga-bar-chart__axis-title dga-bar-chart__axis-title--y">${l(
+    p
+  )}</div>` : "", z = h && A ? `<div class="dga-bar-chart__axis-title dga-bar-chart__axis-title--x">${l(
+    A
+  )}</div>` : "";
+  s.classList.add("dga-bar-chart"), s.setAttribute("data-style-color", m), s.innerHTML = `
+    ${M}
+    <div class="dga-bar-chart__frame">
+      ${P}
+      <div class="dga-bar-chart__plot-wrap">
+        ${S}
+        <div class="dga-bar-chart__plot">
+          ${H}
+          ${R}
+        </div>
+        <span class="dga-bar-chart__spacer"></span>
+        ${q}
+      </div>
+      ${z}
+    </div>
+  `;
+}
+class Ot {
+  constructor(t, e = {}) {
+    this.chart = t, this.config = e, this.render();
+  }
+  render() {
+    X(this.chart, this.config);
+  }
+  update(t = {}) {
+    this.config = { ...this.config, ...t }, this.render();
+  }
+}
+const vt = [
+  "dga-primary-700",
+  "dga-primary-500",
+  "dga-primary-300",
+  "dga-primary-600",
+  "dga-primary-400",
+  "dga-primary-200"
+], ft = [
+  "dga-gold-500",
+  "dga-primary-300",
+  "dga-warning-500",
+  "dga-info-500",
+  "dga-lavender-500",
+  "dga-error-500"
+];
+function _t(s, t) {
+  const e = s === "color" ? ft : vt;
+  return Array.from(
+    { length: Math.max(t, 0) },
+    (i, a) => e[a % e.length]
+  );
+}
+function Z(s, t = {}) {
+  if (!s) return;
+  const {
+    categories: e = [],
+    series: i = [],
+    styleColor: a = "brand",
+    max: n = null,
+    showLegend: o = !0,
+    showXLabel: h = !0,
+    showYLabel: b = !0,
+    showContent: A = !0,
+    xLabel: p = "",
+    yLabel: m = "",
+    rtl: y = !1
+  } = t, x = a === "color" ? "color" : "brand", $ = _t(x, i.length), L = i.map(
+    (r, d) => N(r.color || $[d] || "dga-primary-500")
+  );
+  let w = 1;
+  for (const r of i)
+    for (const d of r.values || []) w = Math.max(w, Number(d) || 0);
+  const { step: E, niceMax: v } = Q(Number(n) > 0 ? Number(n) : w), M = [];
+  for (let r = 0; r <= v; r += E) M.push(Math.round(r));
+  const S = 600, H = 300, R = y ? 16 : 44, q = y ? 44 : 16, P = 12, z = 28, c = R, g = S - q, f = P, u = H - z, T = g - c, D = u - f, B = e.length, O = (r) => {
+    const d = B <= 1 ? 0.5 : r / (B - 1);
+    return y ? g - d * T : c + d * T;
+  }, I = (r) => u - Math.max(0, Number(r) || 0) / v * D, st = M.map((r) => {
+    const d = u - r / v * D, _ = y ? g + 6 : c - 6, G = y ? "start" : "end";
+    return `<line x1="${c}" y1="${d.toFixed(1)}" x2="${g}" y2="${d.toFixed(
+      1
+    )}" class="dga-line-chart__grid"/><text x="${_}" y="${(d + 4).toFixed(
+      1
+    )}" text-anchor="${G}" class="dga-line-chart__tick">${r}</text>`;
+  }).join(""), it = e.map(
+    (r, d) => `<text x="${O(d).toFixed(1)}" y="${(u + 18).toFixed(
+      1
+    )}" text-anchor="middle" class="dga-line-chart__xtick">${l(
+      r
+    )}</text>`
+  ).join(""), at = i.map((r, d) => {
+    const _ = e.map((k, C) => [O(C), I(r.values?.[C])]);
+    if (_.length === 0) return "";
+    const G = _.map((k, C) => `${C === 0 ? "M" : "L"}${k[0].toFixed(1)} ${k[1].toFixed(1)}`).join(" ");
+    let j = "";
+    if (A) {
+      const k = _[0], C = _[_.length - 1];
+      j = `<path d="${G} L${C[0].toFixed(1)} ${u} L${k[0].toFixed(
+        1
+      )} ${u} Z" style="fill:${L[d]};fill-opacity:.12;stroke:none"/>`;
+    }
+    const ct = `<path d="${G}" style="fill:none;stroke:${L[d]};stroke-width:2;stroke-linejoin:round;stroke-linecap:round"/>`;
+    return j + ct;
+  }).join(""), nt = `<svg viewBox="0 0 ${S} ${H}" class="dga-line-chart__svg" preserveAspectRatio="xMidYMid meet" role="img">${st}${at}${it}</svg>`, ot = o ? `<div class="dga-line-chart__legend">${i.map(
+    (r, d) => `<span class="dga-line-chart__legend-item"><span class="dga-line-chart__legend-dot" style="background:${L[d]}"></span>${l(
+      r.label ?? ""
+    )}</span>`
+  ).join("")}</div>` : "", rt = b && m ? `<div class="dga-line-chart__axis-title dga-line-chart__axis-title--y">${l(
+    m
+  )}</div>` : "", lt = h && p ? `<div class="dga-line-chart__axis-title dga-line-chart__axis-title--x">${l(
+    p
+  )}</div>` : "";
+  s.classList.add("dga-line-chart"), s.setAttribute("data-style-color", x), s.innerHTML = `
+    ${ot}
+    <div class="dga-line-chart__frame">
+      ${rt}
+      <div class="dga-line-chart__plot">${nt}</div>
+      ${lt}
+    </div>
+  `;
+}
+class Gt {
+  constructor(t, e = {}) {
+    this.chart = t, this.config = e, this.render();
+  }
+  render() {
+    let t = !1;
+    try {
+      t = getComputedStyle(this.chart).direction === "rtl";
+    } catch {
+    }
+    Z(this.chart, { rtl: t, ...this.config });
+  }
+  update(t = {}) {
+    this.config = { ...this.config, ...t }, this.render();
   }
 }
-async function b(i) {
+async function tt(s) {
   try {
     if (navigator.clipboard?.writeText)
-      return await navigator.clipboard.writeText(i), !0;
+      return await navigator.clipboard.writeText(s), !0;
   } catch {
   }
   const t = document.createElement("textarea");
-  t.value = i, t.setAttribute("readonly", ""), t.style.position = "absolute", t.style.left = "-9999px", document.body.appendChild(t), t.select();
+  t.value = s, t.setAttribute("readonly", ""), t.style.position = "absolute", t.style.left = "-9999px", document.body.appendChild(t), t.select();
   const e = document.execCommand("copy");
   return document.body.removeChild(t), e;
 }
-const d = `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+const K = `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
   <rect x="9" y="9" width="11" height="11" rx="2" stroke-width="1.75"></rect>
   <path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1" stroke-width="1.75" stroke-linecap="round"></path>
 </svg>`;
-async function m(i, t = 1200) {
-  const e = i.getAttribute("aria-label") || "Copy code";
-  i.setAttribute("aria-label", "Copied"), i.setAttribute("data-copied", "true"), window.setTimeout(() => {
-    i.setAttribute("aria-label", e), i.setAttribute("data-copied", "false");
+async function et(s, t = 1200) {
+  const e = s.getAttribute("aria-label") || "Copy code";
+  s.setAttribute("aria-label", "Copied"), s.setAttribute("data-copied", "true"), window.setTimeout(() => {
+    s.setAttribute("aria-label", e), s.setAttribute("data-copied", "false");
   }, t);
 }
-class M {
+class Nt {
   constructor(t = document) {
     this.root = t, this.handleCopyClick = this.handleCopyClick.bind(this), this.init();
   }
@@ -145,19 +396,19 @@ class M {
       ".dga-code-snippet-inline__copy, .dga-code-snippet-multiline__copy"
     );
     if (!e) return;
-    const s = e.closest(".dga-code-snippet-inline"), n = e.closest(".dga-code-snippet-multiline");
-    let o = "";
-    s ? o = s.querySelector(
+    const i = e.closest(".dga-code-snippet-inline"), a = e.closest(".dga-code-snippet-multiline");
+    let n = "";
+    i ? n = i.querySelector(
       ".dga-code-snippet-inline__content"
-    )?.textContent?.trim() || "" : n && (o = n.querySelector(
+    )?.textContent?.trim() || "" : a && (n = a.querySelector(
       ".dga-code-snippet-multiline__code code"
-    )?.textContent || ""), !(!o || !await b(o)) && await m(e);
+    )?.textContent || ""), !(!n || !await tt(n)) && await et(e);
   }
   destroy() {
     this.root.removeEventListener("click", this.handleCopyClick);
   }
 }
-class O {
+class Rt {
   constructor(t = {}) {
     if (this.navbar = t.navbar || document.querySelector(".dga-navbar"), this.verifyBar = t.verifyBar || null, !this.navbar) {
       console.warn("DGA Navbar elements not found");
@@ -184,8 +435,8 @@ class O {
   }
   toggleDropdown(t) {
     t.preventDefault(), t.stopPropagation(), this.verifyBar && this.verifyBar.isOpen && this.verifyBar.closePanel();
-    const e = t.currentTarget, s = e.parentElement, n = s.classList.contains("active");
-    this.closeAllDropdowns(), n || (s.classList.add("active"), e.classList.add("dga-menu-item-selected"), e.setAttribute("aria-expanded", "true"), s.querySelector(".dga-dropdown").style.top = `${this.navbarHeight + this.navbarTop}px`);
+    const e = t.currentTarget, i = e.parentElement, a = i.classList.contains("active");
+    this.closeAllDropdowns(), a || (i.classList.add("active"), e.classList.add("dga-menu-item-selected"), e.setAttribute("aria-expanded", "true"), i.querySelector(".dga-dropdown").style.top = `${this.navbarHeight + this.navbarTop}px`);
   }
   toggleMobileMenu(t) {
     t.stopPropagation(), this.verifyBar && this.verifyBar.isOpen && this.verifyBar.closePanel(), this.menu.classList.toggle("dga-menu-open"), this.menu.classList.contains("dga-menu-open") ? (document.body.classList.add("no-scroll"), this.menu.style.height = `calc(100vh - ${this.navbarHeight}px - ${this.navbarTop}px)`) : (document.body.classList.remove("no-scroll"), this.menu.style.height = "0px"), this.menu.style.top = `${this.navbarTop + this.navbarHeight}px`;
@@ -202,10 +453,10 @@ class O {
   closeAllDropdowns(t) {
     if (t && t.target.closest(".dga-dropdown-content"))
       return;
-    this.navbar.querySelectorAll(".dga-menu > li.active").forEach((s) => {
-      s.classList.remove("active");
-      const n = s.querySelector(".dga-menu-item");
-      n?.classList.remove("dga-menu-item-selected"), n?.setAttribute("aria-expanded", "false");
+    this.navbar.querySelectorAll(".dga-menu > li.active").forEach((i) => {
+      i.classList.remove("active");
+      const a = i.querySelector(".dga-menu-item");
+      a?.classList.remove("dga-menu-item-selected"), a?.setAttribute("aria-expanded", "false");
     });
   }
   handleKeyboard(t) {
@@ -232,7 +483,7 @@ class O {
     return this.navbar.querySelectorAll(".dga-menu > li.active").length > 0;
   }
 }
-class G {
+class qt {
   constructor(t = {}) {
     if (this.isOpen = !1, this.verifyBar = document.getElementById("dga-verify-bar"), this.menu = t.menu || null, this.btn = document.getElementById("dga-verifyBtn"), this.content = document.getElementById("dga-verify-bar_content"), this.boundToggle = () => {
       this.isOpen ? this.closePanel() : this.openPanel();
@@ -255,48 +506,34 @@ class G {
     this.btn?.removeEventListener("click", this.boundToggle);
   }
 }
-function a(i = "") {
-  return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-const C = "info-color";
-class k extends HTMLElement {
+const At = "info-color";
+class Ct extends HTMLElement {
   static get observedAttributes() {
     return ["variant", "title", "dismissible"];
   }
   constructor() {
-    super(), this._boundDismiss = this._handleDismiss.bind(this);
+    super(), this._bodyContent = null, this._boundDismiss = this._handleDismiss.bind(this);
   }
   connectedCallback() {
-    this._scheduleInitialRender();
-  }
-  _scheduleInitialRender() {
-    requestAnimationFrame(() => {
-      this._captureBodyContent(), this._render();
-    });
-  }
-  _captureBodyContent() {
-    if (this._bodyContent || this.querySelector(".dga-alert-content"))
-      return;
-    const t = this.innerHTML.trim();
-    t && (this._bodyContent = t);
+    this._bodyContent == null && (this._bodyContent = this.innerHTML.trim()), this._render();
   }
   disconnectedCallback() {
     this._closeButton?.removeEventListener("click", this._boundDismiss);
   }
   attributeChangedCallback() {
-    this.isConnected && this._render();
+    this._bodyContent != null && this.isConnected && this._render();
   }
   _render() {
-    const t = this.getAttribute("variant") || C, e = this.getAttribute("title") || "", s = this.hasAttribute("dismissible"), n = this._bodyContent || "";
+    const t = this.getAttribute("variant") || At, e = this.getAttribute("title") || "", i = this.hasAttribute("dismissible"), a = this._bodyContent || "";
     this.classList.add("dga-alert"), this.setAttribute("data-variant", t);
-    const o = e ? `<h4 class="dga-alert-title">${a(e)}</h4>` : "", r = s ? '<button class="dga-alert-close" type="button" data-alert-close aria-label="Dismiss alert">×</button>' : "";
+    const n = e ? `<h4 class="dga-alert-title">${l(e)}</h4>` : "", o = i ? '<button class="dga-alert-close" type="button" data-alert-close aria-label="Dismiss alert">×</button>' : "";
     this.innerHTML = `
       <span class="dga-alert-icon" aria-hidden="true"></span>
       <div class="dga-alert-content">
-        ${o}
-        <div class="dga-alert-body">${n}</div>
+        ${n}
+        <div class="dga-alert-body">${a}</div>
       </div>
-      ${r}
+      ${o}
     `, this._closeButton = this.querySelector("[data-alert-close]"), this._closeButton?.removeEventListener("click", this._boundDismiss), this._closeButton?.addEventListener("click", this._boundDismiss);
   }
   _handleDismiss() {
@@ -305,8 +542,8 @@ class k extends HTMLElement {
     );
   }
 }
-customElements.define("dga-alert", k);
-class w extends HTMLElement {
+customElements.define("dga-alert", Ct);
+class xt extends HTMLElement {
   static get observedAttributes() {
     return ["title", "size", "open"];
   }
@@ -320,79 +557,79 @@ class w extends HTMLElement {
     this._bodyContent != null && this.isConnected && this._render();
   }
   _render() {
-    const t = this.getAttribute("title") || "", e = this.getAttribute("size") || "md", s = this.hasAttribute("open"), n = this._bodyContent || "";
+    const t = this.getAttribute("title") || "", e = this.getAttribute("size") || "md", i = this.hasAttribute("open"), a = this._bodyContent || "";
     this.innerHTML = `
-      <div class="dga-acc-item${s ? " dga-acc-item--active" : ""}">
-        <button class="dga-acc-header" data-size="${a(e)}" aria-expanded="${s ? "true" : "false"}">
-          <span>${a(t)}</span>
+      <div class="dga-acc-item${i ? " dga-acc-item--active" : ""}">
+        <button class="dga-acc-header" data-size="${l(e)}" aria-expanded="${i ? "true" : "false"}">
+          <span>${l(t)}</span>
         </button>
         <div class="dga-acc-content">
-          <div class="dga-acc-body">${n}</div>
+          <div class="dga-acc-body">${a}</div>
         </div>
       </div>
     `;
   }
 }
-class L extends HTMLElement {
+class Lt extends HTMLElement {
   constructor() {
     super(), this._controller = null;
   }
   connectedCallback() {
-    this.classList.add("dga-acc"), this._controller?.destroy(), this._controller = new c(this);
+    this.classList.add("dga-acc"), this._controller?.destroy(), this._controller = new W(this);
   }
   disconnectedCallback() {
     this._controller?.destroy(), this._controller = null;
   }
 }
-customElements.define("dga-accordion-item", w);
-customElements.define("dga-accordion", L);
-class E extends HTMLElement {
+customElements.define("dga-accordion-item", xt);
+customElements.define("dga-accordion", Lt);
+class wt extends HTMLElement {
   static get observedAttributes() {
     return ["code", "multiline"];
   }
   constructor() {
-    super(), this._boundCopy = this._handleCopy.bind(this);
+    super(), this._codeContent = null, this._boundCopy = this._handleCopy.bind(this);
   }
   connectedCallback() {
-    this._codeContent || (this._codeContent = this.getAttribute("code")?.trim() || this.textContent?.trim() || ""), this._render();
+    this._codeContent == null && (this._codeContent = this.getAttribute("code")?.trim() || this.textContent?.trim() || ""), this._render();
   }
   disconnectedCallback() {
     this._copyButton?.removeEventListener("click", this._boundCopy);
   }
   attributeChangedCallback() {
-    this.isConnected && this._render();
+    this._codeContent != null && this.isConnected && this._render();
   }
   _render() {
     const t = this.hasAttribute("multiline"), e = this.getAttribute("code")?.trim() || this._codeContent || "";
     t ? (this.innerHTML = `
         <div class="dga-code-snippet-multiline">
           <div class="dga-code-snippet-multiline__body">
-            <pre class="dga-code-snippet-multiline__code"><code>${a(e)}</code></pre>
+            <pre class="dga-code-snippet-multiline__code"><code>${l(e)}</code></pre>
             <button type="button" class="dga-code-snippet-multiline__copy" aria-label="Copy code" data-copied="false">
-              ${d}
+              ${K}
             </button>
           </div>
         </div>
       `, this._copyButton = this.querySelector(".dga-code-snippet-multiline__copy")) : (this.innerHTML = `
         <div class="dga-code-snippet-inline">
-          <div class="dga-code-snippet-inline__content">${a(e)}</div>
+          <div class="dga-code-snippet-inline__content">${l(e)}</div>
           <button type="button" class="dga-code-snippet-inline__copy" aria-label="Copy code" data-copied="false">
-            ${d}
+            ${K}
           </button>
         </div>
       `, this._copyButton = this.querySelector(".dga-code-snippet-inline__copy")), this._copyButton?.removeEventListener("click", this._boundCopy), this._copyButton?.addEventListener("click", this._boundCopy);
   }
   async _handleCopy() {
     const t = this.getAttribute("code")?.trim() || this._codeContent || "";
-    !t || !this._copyButton || !await b(t) || (await m(this._copyButton), this.dispatchEvent(
+    !t || !this._copyButton || !await tt(t) || (await et(this._copyButton), this.dispatchEvent(
       new CustomEvent("dga-code-copy", { bubbles: !0, composed: !0 })
     ));
   }
 }
-customElements.define("dga-code-snippet", E);
-class x extends HTMLElement {
+customElements.define("dga-code-snippet", wt);
+class kt extends HTMLElement {
   static get observedAttributes() {
-    return ["data", "hole"];
+    return ["data", "hole", "style-color"];
   }
   connectedCallback() {
     this._render();
@@ -401,17 +638,103 @@ class x extends HTMLElement {
     this.isConnected && this._render();
   }
   _render() {
-    const t = A(this.getAttribute("data")), e = this.hasAttribute("hole") && this.getAttribute("hole") !== "false";
-    p(this, t, { hole: e });
+    const t = bt(this.getAttribute("data")), e = this.hasAttribute("hole") && this.getAttribute("hole") !== "false", i = this.getAttribute("style-color") === "color" ? "color" : "brand";
+    V(this, t, { hole: e, styleColor: i });
+  }
+}
+customElements.define("dga-pie-chart", kt);
+class $t extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "data",
+      "style-color",
+      "max",
+      "x-label",
+      "y-label",
+      "show-legend",
+      "show-x-label",
+      "show-y-label"
+    ];
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  _bool(t) {
+    const e = this.getAttribute(t);
+    return e === null ? !0 : e !== "false";
+  }
+  _render() {
+    const { categories: t, series: e } = J(this.getAttribute("data"));
+    X(this, {
+      categories: t,
+      series: e,
+      styleColor: this.getAttribute("style-color") === "color" ? "color" : "brand",
+      max: this.getAttribute("max"),
+      xLabel: this.getAttribute("x-label") || "",
+      yLabel: this.getAttribute("y-label") || "",
+      showLegend: this._bool("show-legend"),
+      showXLabel: this._bool("show-x-label"),
+      showYLabel: this._bool("show-y-label")
+    });
+  }
+}
+customElements.define("dga-bar-chart", $t);
+class Et extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "data",
+      "style-color",
+      "max",
+      "x-label",
+      "y-label",
+      "show-legend",
+      "show-x-label",
+      "show-y-label",
+      "show-content"
+    ];
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  _bool(t) {
+    const e = this.getAttribute(t);
+    return e === null ? !0 : e !== "false";
+  }
+  _render() {
+    const { categories: t, series: e } = J(this.getAttribute("data"));
+    let i = !1;
+    try {
+      i = getComputedStyle(this).direction === "rtl";
+    } catch {
+    }
+    Z(this, {
+      categories: t,
+      series: e,
+      rtl: i,
+      styleColor: this.getAttribute("style-color") === "color" ? "color" : "brand",
+      max: this.getAttribute("max"),
+      xLabel: this.getAttribute("x-label") || "",
+      yLabel: this.getAttribute("y-label") || "",
+      showLegend: this._bool("show-legend"),
+      showXLabel: this._bool("show-x-label"),
+      showYLabel: this._bool("show-y-label"),
+      showContent: this._bool("show-content")
+    });
   }
 }
-customElements.define("dga-pie-chart", x);
-const S = {
+customElements.define("dga-line-chart", Et);
+const Mt = {
   "flag-src": "saudiFlag.svg",
   "link-icon-src": "link-icon.svg",
   "lock-icon-src": "square-lock-password.svg",
   "logo-src": "DGA-logo-icon.svg"
-}, D = {
+}, St = {
   ar: {
     flagAlt: "علم المملكة العربية السعودية",
     banner: "موقع حكومي رسمي تابع لحكومة المملكة العربية السعودية",
@@ -437,7 +760,7 @@ const S = {
     registeredWith: "Registered with the Digital Government Authority under number:"
   }
 };
-class T extends HTMLElement {
+class Ht extends HTMLElement {
   static get observedAttributes() {
     return [
       "registration-number",
@@ -464,20 +787,20 @@ class T extends HTMLElement {
     this.isConnected && this._render();
   }
   _render() {
-    const t = this.getAttribute("lang") === "en" ? "en" : "ar", e = t === "en" ? "ltr" : "rtl", s = D[t], n = a(
+    const t = this.getAttribute("lang") === "en" ? "en" : "ar", e = t === "en" ? "ltr" : "rtl", i = St[t], a = l(
       this.getAttribute("registration-number") || "20250105758"
-    ), o = this.getAttribute("registration-link") || "https://raqmi.dga.gov.sa/platforms/platforms/9ebc5e60-9081-4653-bfb9-08dd2a2f8633/platform-license", r = a(this._normalizeLink(o)), l = a(this.getAttribute("domain") || ".edu.sa"), v = a(this._imageSrc("flag-src")), y = a(this._imageSrc("link-icon-src")), f = a(this._imageSrc("lock-icon-src")), _ = a(this._imageSrc("logo-src"));
+    ), n = this.getAttribute("registration-link") || "https://raqmi.dga.gov.sa/platforms/platforms/9ebc5e60-9081-4653-bfb9-08dd2a2f8633/platform-license", o = l(this._normalizeLink(n)), h = l(this.getAttribute("domain") || ".edu.sa"), b = l(this._imageSrc("flag-src")), A = l(this._imageSrc("link-icon-src")), p = l(this._imageSrc("lock-icon-src")), m = l(this._imageSrc("logo-src"));
     this.innerHTML = `
       <div id="dga-verify-bar" dir="${e}" class="dga-bg-gray-100 closed">
       <div class="dga-container dga-py-2">
         <div id="dga-verify-bar_bar" class="dga-row">
           <div class="dga-col">
             <div class="dga-d-flex dga-align-items-center dga-gap-2">
-              <span><img src="${v}" alt="${s.flagAlt}" /></span>
-              <span class="dga-text-sm">${s.banner}</span>
+              <span><img src="${b}" alt="${i.flagAlt}" /></span>
+              <span class="dga-text-sm">${i.banner}</span>
               <span>
                 <button id="dga-verifyBtn" class="dga-btn dga-btn-subtle dga-text-primary-500" data-verify-toggle aria-expanded="false">
-                  ${s.cta}
+                  ${i.cta}
                 </button>
               </span>
             </div>
@@ -487,14 +810,14 @@ class T extends HTMLElement {
         <div id="dga-verify-bar_content" class="dga-row dga-pt-10 dga-pb-8" data-verify-content style="display: ${this.isOpen ? "flex" : "none"};">
           <div class="dga-col-md-6 dga-pb-8">
             <div class="dga-d-flex dga-gap-4">
-              <div><img src="${y}" alt="" /></div>
+              <div><img src="${A}" alt="" /></div>
               <div class="dga-w-full dga-d-flex dga-flex-col dga-gap-2">
                 <h3 class="dga-text-xl dga-fw-bold">
-                  ${s.domainHeading}
-                  <span class="dga-text-primary-500">${l}</span>
+                  ${i.domainHeading}
+                  <span class="dga-text-primary-500">${h}</span>
                 </h3>
                 <p>
-                  ${s.domainBody} ${l}
+                  ${i.domainBody} ${h}
                 </p>
               </div>
             </div>
@@ -502,14 +825,14 @@ class T extends HTMLElement {
 
           <div class="dga-col-md-6 dga-pb-8">
             <div class="dga-d-flex dga-gap-4">
-              <div><img src="${f}" alt="" /></div>
+              <div><img src="${p}" alt="" /></div>
               <div class="dga-w-full dga-d-flex dga-flex-col dga-gap-2">
                 <h3 class="dga-text-xl dga-fw-bold">
-                  ${s.httpsHeading}
-                  <span class="dga-text-primary-500">HTTPS</span> ${s.httpsHeadingSuffix}
+                  ${i.httpsHeading}
+                  <span class="dga-text-primary-500">HTTPS</span> ${i.httpsHeadingSuffix}
                 </h3>
                 <p>
-                  ${s.httpsBody}
+                  ${i.httpsBody}
                 </p>
               </div>
             </div>
@@ -517,9 +840,9 @@ class T extends HTMLElement {
 
           <div class="dga-col-12">
             <div class="dga-d-flex dga-align-items-center dga-gap-3 dga-bg-white dga-text-md dga-rounded-md dga-py-2 dga-px-7">
-              <img src="${_}" alt="${s.logoAlt}" />
-              ${s.registeredWith}
-              <a href="${r}" class="dga-link">${n}</a>
+              <img src="${m}" alt="${i.logoAlt}" />
+              ${i.registeredWith}
+              <a href="${o}" class="dga-link">${a}</a>
             </div>
           </div>
         </div>
@@ -530,8 +853,8 @@ class T extends HTMLElement {
   _imageSrc(t) {
     const e = this.getAttribute(t);
     if (e) return e;
-    const s = S[t], n = this.getAttribute("assets-base") || "/";
-    return `${n.endsWith("/") ? n : `${n}/`}${s}`;
+    const i = Mt[t], a = this.getAttribute("assets-base") || "/";
+    return `${a.endsWith("/") ? a : `${a}/`}${i}`;
   }
   _open() {
     this._content.style.display = "flex", this.isOpen = !0, this._btn?.setAttribute("aria-expanded", "true"), this._wrapper?.classList.replace("closed", "opend");
@@ -547,15 +870,17 @@ class T extends HTMLElement {
     }
   }
 }
-customElements.define("dga-verify-bar", T);
-const q = !0;
+customElements.define("dga-verify-bar", Ht);
+const Pt = !0;
 export {
-  $ as DGAAccordion,
-  B as DGAAlert,
-  H as DGAChart,
-  M as DGACodeSnippet,
-  O as DGAMenuDropDown,
-  G as DGAVerifyBar,
-  q as DGA_WEB_COMPONENTS_REGISTERED
+  Tt as DGAAccordion,
+  Dt as DGAAlert,
+  Ot as DGABarChart,
+  Bt as DGAChart,
+  Nt as DGACodeSnippet,
+  Gt as DGALineChart,
+  Rt as DGAMenuDropDown,
+  qt as DGAVerifyBar,
+  Pt as DGA_WEB_COMPONENTS_REGISTERED
 };
 //# sourceMappingURL=index.js.map