@waaelg/dga-design-system 0.4.3 → 0.4.5

package/dist/index.js

@@ -1,49 +1,49 @@
 class d {
-  constructor(e) {
-    this.root = e, this.handleClick = this.handleClick.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.init();
+  constructor(t) {
+    this.root = t, this.handleClick = this.handleClick.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.init();
   }
   init() {
     this.root.addEventListener("click", this.handleClick), this.root.addEventListener("keydown", this.handleKeydown);
   }
-  handleClick(e) {
-    const t = e.target.closest(".dga-acc-header");
-    t && this.root.contains(t) && this.toggle(t);
+  handleClick(t) {
+    const e = t.target.closest(".dga-acc-header");
+    e && this.root.contains(e) && this.toggle(e);
   }
-  handleKeydown(e) {
-    const t = e.target.closest(".dga-acc-header");
-    !t || !this.root.contains(t) || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggle(t));
+  handleKeydown(t) {
+    const e = t.target.closest(".dga-acc-header");
+    !e || !this.root.contains(e) || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggle(e));
   }
-  toggle(e) {
-    const t = e.parentElement;
-    t && (t.classList.contains("dga-acc-item--active") ? this.close(t) : this.open(t));
+  toggle(t) {
+    const e = t.parentElement;
+    e && (e.classList.contains("dga-acc-item--active") ? this.close(e) : this.open(e));
   }
-  open(e) {
-    e.classList.add("dga-acc-item--active"), e.querySelector(".dga-acc-header")?.setAttribute("aria-expanded", "true");
+  open(t) {
+    t.classList.add("dga-acc-item--active"), t.querySelector(".dga-acc-header")?.setAttribute("aria-expanded", "true");
   }
-  close(e) {
-    e.classList.remove("dga-acc-item--active"), e.querySelector(".dga-acc-header")?.setAttribute("aria-expanded", "false");
+  close(t) {
+    t.classList.remove("dga-acc-item--active"), t.querySelector(".dga-acc-header")?.setAttribute("aria-expanded", "false");
   }
   closeAll() {
-    this.root.querySelectorAll(".dga-acc-item").forEach((e) => {
-      this.close(e);
+    this.root.querySelectorAll(".dga-acc-item").forEach((t) => {
+      this.close(t);
     });
   }
   destroy() {
     this.root.removeEventListener("click", this.handleClick), this.root.removeEventListener("keydown", this.handleKeydown);
   }
 }
-class m {
-  constructor(e) {
-    this.accordion = e, this.controller = new d(e);
+class w {
+  constructor(t) {
+    this.accordion = t, this.controller = new d(t);
   }
-  toggle(e) {
-    this.controller.toggle(e);
+  toggle(t) {
+    this.controller.toggle(t);
   }
-  open(e) {
-    this.controller.open(e);
+  open(t) {
+    this.controller.open(t);
   }
-  close(e) {
-    this.controller.close(e);
+  close(t) {
+    this.controller.close(t);
   }
   closeAll() {
     this.controller.closeAll();
@@ -52,101 +52,114 @@ class m {
     this.controller.destroy();
   }
 }
-class b {
-  constructor(e = document) {
-    this.root = e, this.handleCloseClick = this.handleCloseClick.bind(this), this.init();
+class E {
+  constructor(t = document) {
+    this.root = t, this.handleCloseClick = this.handleCloseClick.bind(this), this.init();
   }
   init() {
     this.root.addEventListener("click", this.handleCloseClick);
   }
-  handleCloseClick(e) {
-    const t = e.target.closest("[data-alert-close]");
-    if (!t)
+  handleCloseClick(t) {
+    const e = t.target.closest("[data-alert-close]");
+    if (!e)
       return;
-    const i = t.closest(".dga-alert");
+    const i = e.closest(".dga-alert");
     i && (i.style.display = "none");
   }
   destroy() {
     this.root.removeEventListener("click", this.handleCloseClick);
   }
 }
-function a(s) {
+function c(s) {
   return s.startsWith("#") || s.startsWith("var(") ? s : `var(--${s})`;
 }
-function r(s = []) {
+function h(s = []) {
   return `conic-gradient(${s.map(
-    (t) => `${a(t.color)} ${t.from} ${t.to}`
+    (e) => `${c(e.color)} ${e.from} ${e.to}`
   ).join(", ")})`;
 }
-function l(s = []) {
+function u(s = []) {
   return `<div class="dga-pie-chart__labels">${s.map(
-    (t) => `<span class="dga-pie-chart__label"><span class="dga-pie-chart__circle" style="background-color: ${a(
-      t.color
-    )}"></span>${t.label}</span>`
+    (e) => `<span class="dga-pie-chart__label"><span class="dga-pie-chart__circle" style="background-color: ${c(
+      e.color
+    )}"></span>${e.label}</span>`
   ).join("")}</div>`;
 }
-function h(s, e = [], { hole: t = !1 } = {}) {
-  s && (s.classList.add("dga-pie-chart"), s.setAttribute("data-hole", t ? "true" : "false"), s.style.background = r(e), s.innerHTML = l(e));
+function v(s) {
+  if (!s) return [];
+  try {
+    const t = JSON.parse(s);
+    return Array.isArray(t) ? t : [];
+  } catch {
+    return console.warn("dga-pie-chart: invalid data attribute JSON"), [];
+  }
+}
+function g(s, t = [], { hole: e = !1 } = {}) {
+  s && (s.classList.add("dga-pie-chart"), s.setAttribute("data-hole", e ? "true" : "false"), s.style.background = h(t), s.innerHTML = u(t));
 }
-class v {
-  constructor(e, t = []) {
-    this.chart = e, this.data = t, this.init();
+class x {
+  constructor(t, e = []) {
+    this.chart = t, this.data = e, this.init();
   }
   init() {
-    const e = this.chart.getAttribute("data-hole") === "true";
-    h(this.chart, this.data, { hole: e });
+    const t = this.chart.getAttribute("data-hole") === "true";
+    g(this.chart, this.data, { hole: t });
   }
   generateGradient() {
-    return r(this.data);
+    return h(this.data);
   }
   generateLabels() {
-    return l(this.data);
+    return u(this.data);
   }
 }
-async function u(s) {
+async function p(s) {
   try {
     if (navigator.clipboard?.writeText)
       return await navigator.clipboard.writeText(s), !0;
   } catch {
   }
-  const e = document.createElement("textarea");
-  e.value = s, e.setAttribute("readonly", ""), e.style.position = "absolute", e.style.left = "-9999px", document.body.appendChild(e), e.select();
-  const t = document.execCommand("copy");
-  return document.body.removeChild(e), t;
+  const t = document.createElement("textarea");
+  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;
 }
-async function p(s, e = 1200) {
-  const t = s.getAttribute("aria-label") || "Copy code";
+const l = `<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 b(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", t), s.setAttribute("data-copied", "false");
-  }, e);
+    s.setAttribute("aria-label", e), s.setAttribute("data-copied", "false");
+  }, t);
 }
-class y {
-  constructor(e = document) {
-    this.root = e, this.handleCopyClick = this.handleCopyClick.bind(this), this.init();
+class D {
+  constructor(t = document) {
+    this.root = t, this.handleCopyClick = this.handleCopyClick.bind(this), this.init();
   }
   init() {
     this.root.addEventListener("click", this.handleCopyClick);
   }
-  async handleCopyClick(e) {
-    const t = e.target.closest(
+  async handleCopyClick(t) {
+    const e = t.target.closest(
       ".dga-code-snippet-inline__copy, .dga-code-snippet-multiline__copy"
     );
-    if (!t) return;
-    const i = t.closest(".dga-code-snippet-inline"), n = t.closest(".dga-code-snippet-multiline");
-    let o = "";
-    i ? o = i.querySelector(
+    if (!e) return;
+    const i = e.closest(".dga-code-snippet-inline"), n = e.closest(".dga-code-snippet-multiline");
+    let a = "";
+    i ? a = i.querySelector(
       ".dga-code-snippet-inline__content"
-    )?.textContent?.trim() || "" : n && (o = n.querySelector(
+    )?.textContent?.trim() || "" : n && (a = n.querySelector(
       ".dga-code-snippet-multiline__code code"
-    )?.textContent || ""), !(!o || !await u(o)) && await p(t);
+    )?.textContent || ""), !(!a || !await p(a)) && await b(e);
   }
   destroy() {
     this.root.removeEventListener("click", this.handleCopyClick);
   }
 }
-class f {
-  constructor(e = {}) {
-    if (this.navbar = e.navbar || document.querySelector(".dga-navbar"), this.verifyBar = e.verifyBar || null, !this.navbar) {
+class T {
+  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");
       return;
     }
@@ -154,7 +167,7 @@ class f {
       console.warn("DGA Menu element not found");
       return;
     }
-    this.boundToggleDropdown = (t) => this.toggleDropdown(t), this.boundToggleMobileMenu = (t) => this.toggleMobileMenu(t), this.boundCloseAllDropdowns = (t) => this.closeAllDropdowns(t), this.boundHandleResize = () => this.handleResize(), this.boundHandleKeyboard = (t) => this.handleKeyboard(t), this.init();
+    this.boundToggleDropdown = (e) => this.toggleDropdown(e), this.boundToggleMobileMenu = (e) => this.toggleMobileMenu(e), this.boundCloseAllDropdowns = (e) => this.closeAllDropdowns(e), this.boundHandleResize = () => this.handleResize(), this.boundHandleKeyboard = (e) => this.handleKeyboard(e), this.init();
   }
   get isActive() {
     return this.isMobileMenuOpen() || this.isNormalDropdownOpen();
@@ -163,31 +176,31 @@ class f {
     this.handleResize(), this.bindEvents();
   }
   bindEvents() {
-    this.menuItems.forEach((e) => {
-      e.addEventListener("click", this.boundToggleDropdown);
-    }), this.toggler?.addEventListener("click", this.boundToggleMobileMenu), document.addEventListener("click", this.boundCloseAllDropdowns), window.addEventListener("resize", this.boundHandleResize), this.menuItems.forEach((e) => {
-      e.addEventListener("keydown", this.boundHandleKeyboard);
+    this.menuItems.forEach((t) => {
+      t.addEventListener("click", this.boundToggleDropdown);
+    }), this.toggler?.addEventListener("click", this.boundToggleMobileMenu), document.addEventListener("click", this.boundCloseAllDropdowns), window.addEventListener("resize", this.boundHandleResize), this.menuItems.forEach((t) => {
+      t.addEventListener("keydown", this.boundHandleKeyboard);
     });
   }
-  toggleDropdown(e) {
-    e.preventDefault(), e.stopPropagation(), this.verifyBar && this.verifyBar.isOpen && this.verifyBar.closePanel();
-    const t = e.currentTarget, i = t.parentElement, n = i.classList.contains("active");
-    this.closeAllDropdowns(), n || (i.classList.add("active"), t.classList.add("dga-menu-item-selected"), t.setAttribute("aria-expanded", "true"), i.querySelector(".dga-dropdown").style.top = `${this.navbarHeight + this.navbarTop}px`);
+  toggleDropdown(t) {
+    t.preventDefault(), t.stopPropagation(), this.verifyBar && this.verifyBar.isOpen && this.verifyBar.closePanel();
+    const e = t.currentTarget, i = e.parentElement, n = i.classList.contains("active");
+    this.closeAllDropdowns(), n || (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(e) {
-    e.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`;
-    const t = this.menu.classList.contains("dga-menu-open");
-    this.toggler.setAttribute("aria-expanded", t), this.toggler.setAttribute(
+  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`;
+    const e = this.menu.classList.contains("dga-menu-open");
+    this.toggler.setAttribute("aria-expanded", e), this.toggler.setAttribute(
       "aria-label",
-      t ? "Close menu" : "Open menu"
+      e ? "Close menu" : "Open menu"
     );
   }
   // Public method to close menu programmatically (without event)
   closeMenu() {
     this.closeAllDropdowns(), this.isMobileMenuOpen() && (this.menu.classList.remove("dga-menu-open"), document.body.classList.remove("no-scroll"), this.menu.style.height = "0px", this.toggler.setAttribute("aria-expanded", "false"), this.toggler.setAttribute("aria-label", "Open menu"));
   }
-  closeAllDropdowns(e) {
-    if (e && e.target.closest(".dga-dropdown-content"))
+  closeAllDropdowns(t) {
+    if (t && t.target.closest(".dga-dropdown-content"))
       return;
     this.navbar.querySelectorAll(".dga-menu > li.active").forEach((i) => {
       i.classList.remove("active");
@@ -195,21 +208,21 @@ class f {
       n?.classList.remove("dga-menu-item-selected"), n?.setAttribute("aria-expanded", "false");
     });
   }
-  handleKeyboard(e) {
-    e.key === "Escape" && (this.closeAllDropdowns(), e.currentTarget.focus()), (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleDropdown(e));
+  handleKeyboard(t) {
+    t.key === "Escape" && (this.closeAllDropdowns(), t.currentTarget.focus()), (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleDropdown(t));
   }
   handleResize() {
-    const e = window.innerWidth;
+    const t = window.innerWidth;
     document.body.classList.remove(
       "size_desktop",
       "size_tablet",
       "size_mobile"
-    ), e > 769 ? (document.body.classList.add("size_desktop"), this.closeAllDropdowns(), this.menu.classList.remove("dga-menu-open"), document.body.classList.remove("no-scroll")) : e <= 769 && e > 375 ? document.body.classList.add("size_tablet") : document.body.classList.add("size_mobile");
+    ), t > 769 ? (document.body.classList.add("size_desktop"), this.closeAllDropdowns(), this.menu.classList.remove("dga-menu-open"), document.body.classList.remove("no-scroll")) : t <= 769 && t > 375 ? document.body.classList.add("size_tablet") : document.body.classList.add("size_mobile");
   }
   // Public method to destroy the component
   destroy() {
-    this.menuItems.forEach((e) => {
-      e.removeEventListener("click", this.boundToggleDropdown), e.removeEventListener("keydown", this.boundHandleKeyboard);
+    this.menuItems.forEach((t) => {
+      t.removeEventListener("click", this.boundToggleDropdown), t.removeEventListener("keydown", this.boundHandleKeyboard);
     }), this.toggler?.removeEventListener("click", this.boundToggleMobileMenu), document.removeEventListener("click", this.boundCloseAllDropdowns), window.removeEventListener("resize", this.boundHandleResize);
   }
   isMobileMenuOpen() {
@@ -219,9 +232,9 @@ class f {
     return this.navbar.querySelectorAll(".dga-menu > li.active").length > 0;
   }
 }
-class w {
-  constructor(e = {}) {
-    if (this.isOpen = !1, this.verifyBar = document.getElementById("dga-verify-bar"), this.menu = e.menu || null, this.btn = document.getElementById("dga-verifyBtn"), this.content = document.getElementById("dga-verify-bar_content"), this.boundToggle = () => {
+class M {
+  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();
     }, !this.verifyBar || !this.btn || !this.content) {
       console.warn("DGA Verify Bar elements not found");
@@ -242,12 +255,266 @@ class w {
     this.btn?.removeEventListener("click", this.boundToggle);
   }
 }
+function o(s = "") {
+  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const y = "info-color";
+class f extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "title", "dismissible"];
+  }
+  constructor() {
+    super(), 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);
+  }
+  disconnectedCallback() {
+    this._closeButton?.removeEventListener("click", this._boundDismiss);
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  _render() {
+    const t = this.getAttribute("variant") || y, e = this.getAttribute("title") || "", i = this.hasAttribute("dismissible"), n = this._bodyContent || "";
+    this.className = "dga-alert", this.setAttribute("data-variant", t);
+    const a = e ? `<h4 class="dga-alert-title">${o(e)}</h4>` : "", r = 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">
+        ${a}
+        <div class="dga-alert-body">${n}</div>
+      </div>
+      ${r}
+    `, this._closeButton = this.querySelector("[data-alert-close]"), this._closeButton?.removeEventListener("click", this._boundDismiss), this._closeButton?.addEventListener("click", this._boundDismiss);
+  }
+  _handleDismiss() {
+    this.style.display = "none", this.dispatchEvent(
+      new CustomEvent("dga-alert-dismiss", { bubbles: !0, composed: !0 })
+    );
+  }
+}
+customElements.define("dga-alert", f);
+class _ extends HTMLElement {
+  static get observedAttributes() {
+    return ["title", "size", "open"];
+  }
+  connectedCallback() {
+    this._bodyContent || (this._bodyContent = this.innerHTML.trim()), this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  _render() {
+    const t = this.getAttribute("title") || "", e = this.getAttribute("size") || "md", i = this.hasAttribute("open"), n = this._bodyContent || "";
+    this.innerHTML = `
+      <div class="dga-acc-item${i ? " dga-acc-item--active" : ""}">
+        <button class="dga-acc-header" data-size="${o(e)}" aria-expanded="${i ? "true" : "false"}">
+          <span>${o(t)}</span>
+        </button>
+        <div class="dga-acc-content">
+          <div class="dga-acc-body">${n}</div>
+        </div>
+      </div>
+    `;
+  }
+}
+class C extends HTMLElement {
+  constructor() {
+    super(), this._controller = null;
+  }
+  connectedCallback() {
+    this.classList.add("dga-acc"), this._controller?.destroy(), this._controller = new d(this);
+  }
+  disconnectedCallback() {
+    this._controller?.destroy(), this._controller = null;
+  }
+}
+customElements.define("dga-accordion-item", _);
+customElements.define("dga-accordion", C);
+class A extends HTMLElement {
+  static get observedAttributes() {
+    return ["code", "multiline"];
+  }
+  constructor() {
+    super(), this._boundCopy = this._handleCopy.bind(this);
+  }
+  connectedCallback() {
+    this._codeContent || (this._codeContent = this.getAttribute("code")?.trim() || this.textContent?.trim() || ""), this._render();
+  }
+  disconnectedCallback() {
+    this._copyButton?.removeEventListener("click", this._boundCopy);
+  }
+  attributeChangedCallback() {
+    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>${o(e)}</code></pre>
+            <button type="button" class="dga-code-snippet-multiline__copy" aria-label="Copy code" data-copied="false">
+              ${l}
+            </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">${o(e)}</div>
+          <button type="button" class="dga-code-snippet-inline__copy" aria-label="Copy code" data-copied="false">
+            ${l}
+          </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 p(t) || (await b(this._copyButton), this.dispatchEvent(
+      new CustomEvent("dga-code-copy", { bubbles: !0, composed: !0 })
+    ));
+  }
+}
+customElements.define("dga-code-snippet", A);
+class k extends HTMLElement {
+  static get observedAttributes() {
+    return ["data", "hole"];
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  _render() {
+    const t = v(this.getAttribute("data")), e = this.hasAttribute("hole") && this.getAttribute("hole") !== "false";
+    g(this, t, { hole: e });
+  }
+}
+customElements.define("dga-pie-chart", k);
+class L extends HTMLElement {
+  static get observedAttributes() {
+    return ["registration-number", "registration-link", "domain"];
+  }
+  constructor() {
+    super(), this.isOpen = !1, this._btn = null, this._content = null, this._wrapper = null, this._boundToggle = () => this.isOpen ? this._close() : this._open();
+  }
+  connectedCallback() {
+    this._render();
+  }
+  disconnectedCallback() {
+    this._btn?.removeEventListener("click", this._boundToggle);
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  _render() {
+    const t = this.getAttribute("registration-number") || "20250105758", e = this.getAttribute("registration-link") || "https://raqmi.dga.gov.sa/platforms/platforms/9ebc5e60-9081-4653-bfb9-08dd2a2f8633/platform-license", i = this._normalizeLink(e), n = this.getAttribute("domain") || ".edu.sa";
+    this.innerHTML = `
+      <div id="dga-verify-bar" 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="${this._assetUrl("saudiFlag.svg")}" alt="علم المملكة العربية السعودية" /></span>
+              <span class="dga-text-sm">موقع حكومي رسمي تابع لحكومة المملكة العربية السعودية</span>
+              <span>
+                <button id="dga-verifyBtn" class="dga-btn dga-btn-subtle dga-text-primary-500" data-verify-toggle aria-expanded="false">
+                  كيف تتحقق
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <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="${this._assetUrl("link-icon.svg")}" alt="" /></div>
+              <div class="dga-w-full dga-d-flex dga-flex-col dga-gap-2">
+                <h3 class="dga-text-xl dga-fw-bold">
+                  روابط المواقع الالكترونية الرسمية السعودية تنتهي بـ
+                  <span class="dga-text-primary-500">${n}</span>
+                </h3>
+                <p>
+                  جميع روابط المواقع الرسمية التابعة للجهات الحكومية في المملكة
+                  العربية السعودية تنتهي بـ ${n}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="dga-col-md-6 dga-pb-8">
+            <div class="dga-d-flex dga-gap-4">
+              <div><img src="${this._assetUrl("square-lock-password.svg")}" alt="" /></div>
+              <div class="dga-w-full dga-d-flex dga-flex-col dga-gap-2">
+                <h3 class="dga-text-xl dga-fw-bold">
+                  المواقع الالكترونية الحكومية تستخدم بروتوكول
+                  <span class="dga-text-primary-500">HTTPS</span> للتشفير و الأمان.
+                </h3>
+                <p>
+                  المواقع الالكترونية الآمنة في المملكة العربية السعودية تستخدم
+                  بروتوكول HTTPS للتشفير.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <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="${this._assetUrl("DGA-logo-icon.svg")}" alt="شعار هيئة الحكومة الرقمية" />
+              مسجل لدى هيئة الحكومة الرقمية برقم :
+              <a href="${i}" class="dga-link">${t}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      </div>
+    `, this._btn?.removeEventListener("click", this._boundToggle), this._wrapper = this.querySelector("#dga-verify-bar"), this._btn = this.querySelector("[data-verify-toggle]"), this._content = this.querySelector("[data-verify-content]"), this._btn?.addEventListener("click", this._boundToggle);
+  }
+  _open() {
+    this._content.style.display = "flex", this.isOpen = !0, this._btn?.setAttribute("aria-expanded", "true"), this._wrapper?.classList.replace("closed", "opend");
+  }
+  _close() {
+    this._content.style.display = "none", this.isOpen = !1, this._btn?.setAttribute("aria-expanded", "false"), this._wrapper?.classList.replace("opend", "closed");
+  }
+  _assetUrl(t) {
+    return {
+      // TODO: replace with the official Saudi flag asset once added to public/.
+      "saudiFlag.svg": "/marker.svg",
+      "link-icon.svg": "/link-icon.svg",
+      "square-lock-password.svg": "/square-lock-password.svg",
+      "DGA-logo-icon.svg": "/DGA-logo-icon.svg"
+    }[t] || `/${t}`;
+  }
+  _normalizeLink(t) {
+    try {
+      return new URL(t, window.location.href).href;
+    } catch {
+      return "#";
+    }
+  }
+}
+customElements.define("dga-verify-bar", L);
+const B = !0;
 export {
-  m as DGAAccordion,
-  b as DGAAlert,
-  v as DGAChart,
-  y as DGACodeSnippet,
-  f as DGAMenuDropDown,
-  w as DGAVerifyBar
+  w as DGAAccordion,
+  E as DGAAlert,
+  x as DGAChart,
+  D as DGACodeSnippet,
+  T as DGAMenuDropDown,
+  M as DGAVerifyBar,
+  B as DGA_WEB_COMPONENTS_REGISTERED
 };
 //# sourceMappingURL=index.js.map