@healthcatalyst/catalyst-docfx-template 1.0.147 → 1.0.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@healthcatalyst/catalyst-docfx-template",
-  "version": "1.0.147",
+  "version": "1.0.148",
   "license": "MIT",
   "description": "A DocFX Template patching the Default template.",
   "publishConfig": {

package/styles/main.css

@@ -2041,3 +2041,61 @@ article .tabGroup > ul > li {
 .poster-btn,.poster{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;background:none;cursor:pointer;}
 .poster img{width:100%;height:100%;object-fit:cover;display:block;}
 .play-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;color:white;font-size:24px;pointer-events:none;}
+
+/* In-topic table search for FAQs, error tables, and other uses */
+
+.table-search-bar-container {
+  position: relative;
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.table-search-input {
+  width: 100%;
+  padding: 12px 40px 12px 40px;
+  font-size: 16px;
+  border: 1px solid #ddd;
+}
+
+.table-search-input.normal {
+  font-size: 16px;
+}
+
+.table-search-input.mobile {
+  font-size: 20px;
+  padding: 14px 45px 14px 45px;
+}
+
+.table-search-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 18px;
+  cursor: pointer;
+  color: #888;
+}
+
+#searchIcon {
+  left: 10px;
+}
+
+.clear {
+  right: 10px;
+  display: none;
+}
+
+#faqTable {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 18px;
+}
+#faqTable th, #faqTable td {
+  text-align: left;
+  padding: 12px;
+}
+#faqTable tr {
+  border-bottom: 1px solid #ddd;
+}
+#faqTable tr.header, #faqTable tr:hover {
+  background-color: #f1f1f1;
+}

package/styles/table-search.js

@@ -0,0 +1,44 @@
+/*Script that allows for filtering/searching content in an faq table in a topic*/
+
+let debounceTimeout;
+const debounceDelay = 100; // milliseconds
+const autoSearch = true;
+const showSearchIcon = true;
+const showClearIcon = true;
+const input = document.getElementById("searchInput");
+const clearIcon = document.getElementById("clearIcon");
+const searchIcon = document.getElementById("searchIcon");
+
+// Apply initial visibility
+searchIcon.style.display = showSearchIcon ? "block" : "none";
+clearIcon.style.display = showClearIcon ? "none" : "none";
+
+// Called on keyup via debounce
+function debouncedSearch() {
+  if (!autoSearch || input.disabled) return;
+
+  clearIcon.style.display = input.value ? "block" : "none";
+
+  clearTimeout(debounceTimeout);
+  debounceTimeout = setTimeout(myFunction, debounceDelay);
+}
+
+function myFunction() {
+  const filter = input.value.toUpperCase();
+  const table = document.getElementById("faqTable");
+  const tr = table.getElementsByTagName("tr");
+
+  for (let i = 1; i < tr.length; i++) {
+    const td = tr[i].getElementsByTagName("td")[0];
+    if (td) {
+      const txtValue = td.textContent || td.innerText;
+      tr[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
+    }
+  }
+}
+
+function clearSearch() {
+  input.value = "";
+  clearIcon.style.display = "none";
+  myFunction();
+}