@aurodesignsystem-dev/auro-dialog 0.0.0-pr103.0

package/demo/api.min.js

@@ -0,0 +1,219 @@
+import { A as AuroDialog, i as initBasicExample } from './auro-dialog.min.js';
+
+function initAccessibilityExample() {
+  const button = document.querySelector("#openAccessibility");
+  const dialog = document.querySelector("#unformattedMdDialog");
+
+  button.addEventListener("click", () => {
+    if (dialog.hasAttribute("open")) {
+      dialog.removeAttribute("open");
+    } else {
+      dialog.setAttribute("open", true);
+    }
+  });
+}
+
+function initDecoupledExample() {
+  const smLgButtons = [
+    document.querySelector("#openSmLg"),
+    document.querySelector("#closeSmLg"),
+  ];
+  const smLgDialog = document.querySelector("#smLgDialog");
+
+  const mdLgButtons = [
+    document.querySelector("#openMdLg"),
+    document.querySelector("#closeMdLg"),
+  ];
+  const mdLgDialog = document.querySelector("#mdLgDialog");
+
+  smLgButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (smLgDialog.hasAttribute("open")) {
+        smLgDialog.removeAttribute("open");
+      } else {
+        smLgDialog.setAttribute("open", true);
+      }
+    });
+  });
+
+  mdLgButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (mdLgDialog.hasAttribute("open")) {
+        mdLgDialog.removeAttribute("open");
+      } else {
+        mdLgDialog.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+function initEditCloseButtonExample() {
+  const button = document.querySelector("#openEditDialog");
+  const dialog = document.querySelector("#unformattedCustomMdDialog");
+
+  button.addEventListener("click", () => {
+    if (dialog.hasAttribute("open")) {
+      dialog.removeAttribute("open");
+    } else {
+      dialog.setAttribute("open", true);
+    }
+  });
+}
+
+function initModalExample() {
+  const defaultButtons = [
+    document.querySelector("#openDefaultModal"),
+    document.querySelector("#closeDefaultModal"),
+  ];
+  const defaultDialog = document.querySelector("#defaultModalDialog");
+
+  const mediumButtons = [
+    document.querySelector("#openMediumModal"),
+    document.querySelector("#closeMediumModal"),
+  ];
+  const mediumDialog = document.querySelector("#mediumModalDialog");
+
+  const smallButtons = [
+    document.querySelector("#openSmallModal"),
+    document.querySelector("#closeSmallModal"),
+  ];
+  const smallDialog = document.querySelector("#smallModalDialog");
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (defaultDialog.hasAttribute("open")) {
+        defaultDialog.removeAttribute("open");
+      } else {
+        defaultDialog.setAttribute("open", true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (mediumDialog.hasAttribute("open")) {
+        mediumDialog.removeAttribute("open");
+      } else {
+        mediumDialog.setAttribute("open", true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (smallDialog.hasAttribute("open")) {
+        smallDialog.removeAttribute("open");
+      } else {
+        smallDialog.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+function initPopoverAndDropdownExample() {
+  const buttons = [
+    document.querySelector("#openPopAndDrop"),
+    document.querySelector("#closePopAndDrop"),
+  ];
+  const dialog = document.querySelector("#popover-dialog");
+
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (dialog.hasAttribute("open")) {
+        dialog.removeAttribute("open");
+      } else {
+        dialog.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+function initSizeOptionsExample() {
+  const defaultButtons = [
+    document.querySelector("#openDefaultSize"),
+    document.querySelector("#closeDefaultSize"),
+  ];
+  const defaultDialog = document.querySelector("#defaultSizeDialog");
+
+  const mediumButtons = [
+    document.querySelector("#openMediumSize"),
+    document.querySelector("#closeMediumSize"),
+  ];
+  const mediumDialog = document.querySelector("#mediumSizeDialog");
+
+  const smallButtons = [
+    document.querySelector("#openSmallSize"),
+    document.querySelector("#closeSmallSize"),
+  ];
+  const smallDialog = document.querySelector("#smallSizeDialog");
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (defaultDialog.hasAttribute("open")) {
+        defaultDialog.removeAttribute("open");
+      } else {
+        defaultDialog.setAttribute("open", true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (mediumDialog.hasAttribute("open")) {
+        mediumDialog.removeAttribute("open");
+      } else {
+        mediumDialog.setAttribute("open", true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (smallDialog.hasAttribute("open")) {
+        smallDialog.removeAttribute("open");
+      } else {
+        smallDialog.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+function initAriaLabelSlotExample() {
+  const button = document.querySelector("#openAriaLabelSlot");
+  const dialog = document.querySelector("#ariaLabelMdDialog");
+
+  button.addEventListener("click", () => {
+    if (dialog.hasAttribute("open")) {
+      dialog.removeAttribute("open");
+    } else {
+      dialog.setAttribute("open", true);
+    }
+  });
+}
+
+AuroDialog.register();
+
+function initExamples(initCount) {
+  // biome-ignore lint/style/noParameterAssign: legacy error handling
+  initCount = initCount || 0;
+
+  try {
+    initBasicExample();
+    initSizeOptionsExample();
+    initModalExample();
+    initDecoupledExample();
+    initPopoverAndDropdownExample();
+    initEditCloseButtonExample();
+    initAriaLabelSlotExample();
+    initAccessibilityExample();
+  } catch (_err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };