@iamproperty/components 3.1.0 → 3.2.0

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v3.1.0
+  * Bootstrap v3.2.0
   * Copyright 2011-2022 [object Object]
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -8,29 +8,27 @@
   factory();
 })((function () { 'use strict';
 
-  /** 
-   * Global helper functions to help maintain and enhance framework elements.
-   * @module Helpers 
+  /** 
+   * Global helper functions to help maintain and enhance framework elements.
+   * @module Helpers 
    */
 
-  /**
-   * Add global classes used by the CSS and later JavaScript.
-   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+  /**
+   * Add global classes used by the CSS and later JavaScript.
+   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
    */
   var addBodyClasses = body => {
     body.classList.add("js-enabled");
-
     if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
       body.classList.add("ie");
     }
-
     return null;
   };
-  /**
-   * Add global events.
-   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
-   */
 
+  /**
+   * Add global events.
+   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+   */
   var addGlobalEvents = body => {
     window.addEventListener('hashchange', function () {
       var hash = location.hash.replace('#', '');
@@ -40,11 +38,11 @@
     }, false);
     return null;
   };
-  /**
-   * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function. 
-   * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
-   */
 
+  /**
+   * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function. 
+   * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
+   */
   var checkElements = element => {
     // Tables
     Array.from(element.querySelectorAll('table')).forEach((table, index) => {
@@ -52,22 +50,22 @@
       tableWrap(table);
     });
   };
-  /**
-   * Wrap tables with a table wrapper div to help maintain its responsive design.
-   * @param {HTMLElement} table Dom table element
-   */
 
+  /**
+   * Wrap tables with a table wrapper div to help maintain its responsive design.
+   * @param {HTMLElement} table Dom table element
+   */
   var tableWrap = table => {
     if (!table.parentNode.classList.contains('table__wrapper')) {
       var tableHTML = table.outerHTML;
       table.outerHTML = "<div class=\"table__wrapper\">".concat(tableHTML, "</div>");
     }
   };
-  /**
-   * Creates data attributes to be used by the CSS for mobile views.
-   * @param {HTMLElement} table Dom table element
-   */
 
+  /**
+   * Creates data attributes to be used by the CSS for mobile views.
+   * @param {HTMLElement} table Dom table element
+   */
   var tableStacked = table => {
     var colHeadings = Array.from(table.querySelectorAll('thead th'));
     var colRows = Array.from(table.querySelectorAll('tbody tr'));
@@ -75,7 +73,6 @@
       var cells = Array.from(row.querySelectorAll('th, td'));
       cells.forEach((cell, cellIndex) => {
         var heading = colHeadings[cellIndex];
-
         if (typeof heading != "undefined") {
           var tempDiv = document.createElement("div");
           tempDiv.innerHTML = heading.innerHTML;
@@ -87,10 +84,11 @@
   };
   var isNumeric = function isNumeric(str) {
     if (typeof str != "string") return false; // we only process strings!  
-
-    return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+    return !isNaN(str) &&
+    // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
     !isNaN(parseFloat(str)); // ...and ensure strings of whitespace fail
   };
+
   var zeroPad = (num, places) => String(num).padStart(places, '0');
 
   var navbar = element => {
@@ -102,7 +100,6 @@
         if (window.matchMedia('(min-width: 62em)').matches) detail.removeAttribute('open');
       }, false);
     });
-
     if ('IntersectionObserver' in window) {
       var observer = new IntersectionObserver(_ref => {
         var [e] = _ref;
@@ -123,10 +120,10 @@
     var filteredEvent = new Event('filtered');
     var reorderedEvent = new Event('reordered');
     var randID = 'table_' + Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
-
     var draggedRow;
-    tableElement.setAttribute('id', randID); // #region Sortable
+    tableElement.setAttribute('id', randID);
 
+    // #region Sortable
     var sortTable = function sortTable(sortBy, sort) {
       // Create an array from the table rows, the index created is then used to sort the array
       var tableArr = [];
@@ -138,37 +135,45 @@
           row: tableRow
         };
         tableArr.push(dataRow);
-      }); // Sort array
+      });
 
-      tableArr.sort((a, b) => a.index > b.index ? 1 : -1); // Reverse if descending
+      // Sort array
+      tableArr.sort((a, b) => a.index > b.index ? 1 : -1);
 
-      if (sort == "descending") tableArr = tableArr.reverse(); // Create a string to return and populate the tbody
+      // Reverse if descending
+      if (sort == "descending") tableArr = tableArr.reverse();
 
+      // Create a string to return and populate the tbody
       var strTbody = '';
       tableArr.forEach((tableRow, index) => {
         strTbody += tableRow.row.outerHTML;
       });
-      tbody.innerHTML = strTbody; // Dispatch the sortable event
+      tbody.innerHTML = strTbody;
 
+      // Dispatch the sortable event
       tableElement.dispatchEvent(sortedEvent);
-    }; // Declare event handlers
-
+    };
 
+    // Declare event handlers
     tableElement.addEventListener('click', function (e) {
       for (var target = e.target; target && target != this; target = target.parentNode) {
         if (target.matches('[data-sortable]')) {
           // Get current sort order
-          var sort = target.getAttribute('aria-sort') == "ascending" ? "descending" : "ascending"; // unset sort attributes
+          var sort = target.getAttribute('aria-sort') == "ascending" ? "descending" : "ascending";
 
+          // unset sort attributes
           Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
             col.setAttribute('aria-sort', 'none');
-          }); // Set the sort order attribute
+          });
 
-          target.setAttribute('aria-sort', sort); // Save the sort options on the table element so that it can be re-sorted later
+          // Set the sort order attribute
+          target.setAttribute('aria-sort', sort);
 
+          // Save the sort options on the table element so that it can be re-sorted later
           tableElement.setAttribute('data-sort', sort);
-          tableElement.setAttribute('data-sortBy', target.textContent); // Sort the table
+          tableElement.setAttribute('data-sortBy', target.textContent);
 
+          // Sort the table
           sortTable(target.textContent, sort);
           Array.from(tableElement.querySelectorAll('tr[draggable]')).forEach((tableRow, index) => {
             tableRow.removeAttribute('draggable');
@@ -176,8 +181,9 @@
           break;
         }
       }
-    }, false); // On page load check if the table should be pre-sorted, if so trigger a click
+    }, false);
 
+    // On page load check if the table should be pre-sorted, if so trigger a click
     if (tableElement.getAttribute('data-sortBy')) {
       var sort = tableElement.getAttribute('data-sort') == "ascending" ? "descending" : "ascending";
       Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
@@ -186,36 +192,39 @@
           col.click();
         }
       });
-    } // #endregion Sortable
-    // #region Filters
+    }
 
+    // #endregion Sortable
 
+    // #region Filters
     var createFilterForm = function createFilterForm(count) {
       // Create wrapper div
       var form = document.createElement("div");
       form.classList.add('table__filters');
       form.classList.add('row');
       form.classList.add('pt-1');
-      form.classList.add('pb-3'); // Create the filter options array
+      form.classList.add('pb-3');
 
-      var filterColumns = Array.from(tableElement.querySelectorAll('th[data-filterable]')); // Populate a list of searchable terms from the cells of the columns that could be used as a filter
+      // Create the filter options array
+      var filterColumns = Array.from(tableElement.querySelectorAll('th[data-filterable]'));
 
+      // Populate a list of searchable terms from the cells of the columns that could be used as a filter
       var searchableTerms = {};
       filterColumns.forEach((columnHeading, index) => {
         Array.from(tableElement.querySelectorAll('td[data-label="' + columnHeading.textContent + '"]')).forEach((label, index) => {
           searchableTerms[label.textContent] = label.textContent;
         });
-      }); // Create the form
+      });
 
+      // Create the form
       var filterTitle = filterColumns.length == 1 ? "Filter by " + filterColumns[0].textContent : "Filter"; // Update title if only one filter is chosen
-
       var checkboxClass = filterColumns.length == 1 ? "d-none" : "d-sm-flex"; // Hide controls when only one filter is chosen
 
-      form.innerHTML = "<div class=\"col-sm-6 col-md-4 pb-3\">\n  <div class=\"form-control__wrapper form-control-inline mb-0\">\n    <label for=\"".concat(randID, "_filter\" class=\"form-label\">").concat(filterTitle, ":</label>\n    <input type=\"search\" name=\"").concat(randID, "_filter\" id=\"").concat(randID, "_filter\" class=\"form-control form-control-sm\" placeholder=\"\" list=\"").concat(randID, "_list\" />\n  </div>\n  <datalist id=\"").concat(randID, "_list\">\n    ").concat(Object.keys(searchableTerms).map(term => "<option value=\"".concat(term, "\"></option>")).join(""), "\n  </datalist>\n</div>\n<div class=\"col-md-8 align-items-center pb-3 ").concat(checkboxClass, "\">\n  ").concat("<span class=\"pe-3 text-nowrap h5 mb-0\">Filter by: </span>" + filterColumns.map(column => "<div class=\"form-check pe-3 mt-0 mb-0\"><input class=\"form-check-input\" type=\"checkbox\" id=\"".concat(randID, "_").concat(column.textContent.replace(' ', '_').toLowerCase(), "\" checked=\"checked\" /><label class=\"form-check-label text-nowrap\" for=\"").concat(randID, "_").concat(column.textContent.replace(' ', '_').toLowerCase(), "\">").concat(column.textContent, "</label></div>")).join(""), "\n</div>"); // Add before the actual table
+      form.innerHTML = "<div class=\"col-sm-6 col-md-4 pb-3\">\n  <div class=\"form-control__wrapper form-control-inline mb-0\">\n    <label for=\"".concat(randID, "_filter\" class=\"form-label\">").concat(filterTitle, ":</label>\n    <input type=\"search\" name=\"").concat(randID, "_filter\" id=\"").concat(randID, "_filter\" class=\"form-control form-control-sm\" placeholder=\"\" list=\"").concat(randID, "_list\" />\n  </div>\n  <datalist id=\"").concat(randID, "_list\">\n    ").concat(Object.keys(searchableTerms).map(term => "<option value=\"".concat(term, "\"></option>")).join(""), "\n  </datalist>\n</div>\n<div class=\"col-md-8 align-items-center pb-3 ").concat(checkboxClass, "\">\n  ").concat("<span class=\"pe-3 text-nowrap h5 mb-0\">Filter by: </span>" + filterColumns.map(column => "<div class=\"form-check pe-3 mt-0 mb-0\"><input class=\"form-check-input\" type=\"checkbox\" id=\"".concat(randID, "_").concat(column.textContent.replace(' ', '_').toLowerCase(), "\" checked=\"checked\" /><label class=\"form-check-label text-nowrap\" for=\"").concat(randID, "_").concat(column.textContent.replace(' ', '_').toLowerCase(), "\">").concat(column.textContent, "</label></div>")).join(""), "\n</div>");
 
+      // Add before the actual table
       tableElement.prepend(form);
     };
-
     var filterTable = function filterTable(searchTerm) {
       // Create an array of rows that match the search term
       var tableArr = [];
@@ -224,48 +233,53 @@
         var rowSearchString = '';
         Array.from(tableElement.querySelectorAll('[type="checkbox"]:checked + label')).forEach((label, index) => {
           rowSearchString += tableRow.querySelector('td[data-label="' + label.textContent + '"]').textContent + ' | ';
-        }); // Check if the table row search string contains the search term
+        });
 
+        // Check if the table row search string contains the search term
         if (rowSearchString.indexOf(searchTerm) >= 0) {
           var dataRow = {
             row: tableRow
           };
           tableArr.push(dataRow);
         }
-      }); // Create a string to return and populate the tbody
+      });
 
+      // Create a string to return and populate the tbody
       var strTbody = '';
       tableArr.forEach((tableRow, index) => {
         strTbody += tableRow.row.outerHTML;
       });
-      tbody.innerHTML = strTbody; // Dispatch the filter event.
+      tbody.innerHTML = strTbody;
 
+      // Dispatch the filter event.
       tableElement.dispatchEvent(filteredEvent);
     };
-
     var createFilterList = function createFilterList() {
       // Check which options are checked
       var filterOptions = [];
       Array.from(tableElement.querySelectorAll('[type="checkbox"]:checked + label')).forEach((label, index) => {
         filterOptions.push(label.textContent);
-      }); // Build up the list of searchable terms
+      });
 
+      // Build up the list of searchable terms
       var searchableTerms = [];
       filterOptions.forEach((option, index) => {
         Array.from(tableElement.querySelectorAll('td[data-label="' + option + '"]')).forEach((label, index) => {
           searchableTerms[label.textContent] = label.textContent;
         });
-      }); // Rebuild the list
+      });
 
+      // Rebuild the list
       var dataList = tableElement.querySelector('datalist');
       dataList.innerHTML = Object.keys(searchableTerms).map(term => "<option value=\"".concat(term, "\"></option>")).join("");
-    }; // On page load check if filters are needed
-
+    };
 
+    // On page load check if filters are needed
     if (Array.from(tableElement.querySelectorAll('[data-filterable]')).length) {
       // Create the filter options
-      createFilterForm(tableElement, Array.from(tableElement.querySelectorAll('[data-filterable]')).length); // Add event handlers for the filter options
+      createFilterForm(tableElement, Array.from(tableElement.querySelectorAll('[data-filterable]')).length);
 
+      // Add event handlers for the filter options
       tableElement.addEventListener('keyup', function (e) {
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('input[type="search"]')) {
@@ -291,31 +305,28 @@
           }
         }
       });
-    } // #endregion Filters
-    // #region Pagination
-
+    }
+    // #endregion Filters
 
+    // #region Pagination
     var paginateRows = function paginateRows(show, page) {
       // Create some inline CSS to control what is viewed on the table, unline the filters we are just hiding the rable rows not removing them from the DOM.
       var style = document.getElementById(randID + '_style');
-
       if (style == null) {
         style = document.createElement("style");
         style.setAttribute('id', randID + '_style');
       }
-
       var startShowing = show * (page - 1) + 1;
       var stopShowing = show * page;
       style.innerHTML = "\n    #".concat(randID, " tbody tr {\n      display: none;\n    }\n    #").concat(randID, " tbody tr:nth-child(").concat(startShowing, "),\n    #").concat(randID, " tbody tr:nth-child(").concat(startShowing, ") ~ tr{\n      display: block;\n    }\n    @media screen and (min-width: 36em) {\n      #").concat(randID, " tbody tr:nth-child(").concat(startShowing, "),\n      #").concat(randID, " tbody tr:nth-child(").concat(startShowing, ") ~ tr{\n        display: table-row;\n      }\n    }\n    #").concat(randID, " tbody tr:nth-child(").concat(stopShowing, ") ~ tr{\n      display: none;\n    }\n    ");
       tableElement.append(style);
-    }; // On page load check if the table should be paginated
-
+    };
 
+    // On page load check if the table should be paginated
     if (tableElement.getAttribute('data-show')) {
       var show = parseInt(tableElement.getAttribute('data-show'));
       var page = parseInt(tableElement.getAttribute('data-page')) ? parseInt(tableElement.getAttribute('data-page')) : 1;
       var totalRows = tableElement.querySelectorAll('tbody tr').length;
-
       if (show < totalRows) {
         paginateRows(show, page);
         createPaginationForm(randID, tableElement, show, page, totalRows);
@@ -346,18 +357,18 @@
           }
         });
       }
-    } // #endregion Pagination
+    }
+    // #endregion Pagination
+
     // #region Reorderable
     // Set the row thats being dragged and copy the row
-
-
     function setDraggedRow(e) {
       e.dataTransfer.setData("text/plain", e.target.id);
       draggedRow = e.target;
       e.target.classList.add('tr--dragging');
-    } // Create the order column and event handler for rows
-
+    }
 
+    // Create the order column and event handler for rows
     var setReorderRows = function setReorderRows() {
       Array.from(tbody.querySelectorAll('tr')).forEach((tableRow, index) => {
         // Create column if not already created
@@ -366,16 +377,15 @@
           orderColumn.innerHTML = index + 1;
           orderColumn.setAttribute('data-label', 'Order');
           tableRow.prepend(orderColumn);
-        } // Make draggable
-
+        }
 
+        // Make draggable
         tableRow.setAttribute('id', randID + '_row_' + (index + 1));
         tableRow.setAttribute('data-order', index + 1);
         tableRow.setAttribute('draggable', 'true');
         tableRow.addEventListener("dragstart", setDraggedRow);
       });
     };
-
     if (tableElement.getAttribute('data-reorder') && tableElement.getAttribute('data-reorder') != "false") {
       // Add column heading
       var orderHeading = document.createElement('th');
@@ -383,19 +393,22 @@
       orderHeading.title = 'Click here to enable re-ordering via drag and drop';
       orderHeading.classList.add('table-order-reset');
       thead.querySelector('tr').prepend(orderHeading);
-      setReorderRows(); // Reset order button
+      setReorderRows();
 
+      // Reset order button
       tableElement.addEventListener('click', function (e) {
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('.table-order-reset')) {
             // unset sort attributes
             Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
               col.setAttribute('aria-sort', 'none');
-            }); // Save the sort options on the table element so that it can be re-sorted later
+            });
 
+            // Save the sort options on the table element so that it can be re-sorted later
             tableElement.removeAttribute('data-sort');
-            tableElement.removeAttribute('data-sortBy'); // Sort the table
+            tableElement.removeAttribute('data-sortBy');
 
+            // Sort the table
             sortTable('Order', 'ascending');
             Array.from(tableElement.querySelectorAll('tbody tr')).forEach((tableRow, index) => {
               tableRow.setAttribute('draggable', 'true');
@@ -412,7 +425,6 @@
         // prevent default to allow drop
         e.preventDefault();
         e.dataTransfer.dropEffect = "move";
-
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('[data-reorder] tbody tr')) {
             target.classList.add('tr--dropable');
@@ -422,7 +434,6 @@
       document.addEventListener("dragleave", function (e) {
         // prevent default to allow drop
         e.preventDefault();
-
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('[data-reorder] tbody tr')) {
             target.classList.remove('tr--dropable');
@@ -431,13 +442,13 @@
       }, false);
       document.addEventListener("drop", function (e) {
         e.preventDefault();
-
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('[data-reorder] tbody tr')) {
             if (target.parentNode != null && draggedRow.parentNode != null && target != draggedRow) {
               draggedRow.parentNode.removeChild(draggedRow);
-              if (draggedRow.getAttribute('data-order') > target.getAttribute('data-order')) target.parentNode.insertBefore(draggedRow, target);else target.parentNode.insertBefore(draggedRow, target.nextElementSibling); // Re label the rows
+              if (draggedRow.getAttribute('data-order') > target.getAttribute('data-order')) target.parentNode.insertBefore(draggedRow, target);else target.parentNode.insertBefore(draggedRow, target.nextElementSibling);
 
+              // Re label the rows
               Array.from(tbody.querySelectorAll('tr')).forEach((tableRowOrder, index) => {
                 tableRowOrder.classList.remove('tr--dragging');
                 tableRowOrder.classList.remove('tr--dropable');
@@ -446,32 +457,27 @@
               });
               tableElement.dispatchEvent(reorderedEvent);
             }
-
             break;
           }
         }
       }, false);
-    } // #endregion Reorderable
-    // Watch for the filterable event and re-sort the tbody
-
+    }
+    // #endregion Reorderable
 
+    // Watch for the filterable event and re-sort the tbody
     tableElement.addEventListener('filtered', function (e) {
       if (tableElement.getAttribute('data-sortBy') && tableElement.getAttribute('data-sort')) sortTable(tableElement.getAttribute('data-sortBy'), tableElement.getAttribute('data-sort'));
-
       if (tableElement.getAttribute('data-show')) {
         var _show = parseInt(tableElement.getAttribute('data-show'));
-
         var _totalRows = tableElement.querySelectorAll('tbody tr').length;
         var tablePagination = tableElement.querySelector('.table__pagination');
         if (tablePagination != null) tablePagination.remove();
-
         if (_show < _totalRows) {
           paginateRows(_show, 1);
           createPaginationForm(randID, tableElement, _show, 1, _totalRows);
           createPaginationButttons(randID, tableElement, _show, 1, _totalRows);
         }
       }
-
       if (tableElement.getAttribute('data-reorder')) {
         setReorderRows();
       }
@@ -491,43 +497,41 @@
       table(newTable);
     }, false);
   }
-
   var createPaginationForm = function createPaginationForm(randID, tableElement, show, page, totalRows) {
     var form = document.createElement("div");
     form.classList.add('table__pagination');
     form.classList.add('row');
     form.classList.add('pt-3');
-    form.classList.add('pb-3'); // Create the form and create a container div to hold the pagination buttons
+    form.classList.add('pb-3');
 
-    form.innerHTML = "<div class=\"col mw-fit-content mb-3\">\n<div class=\"form-control__wrapper form-control-inline mb-0\">\n  <label for=\"".concat(randID, "_showing\" class=\"form-label\">Showing:</label>\n  <input type=\"number\" name=\"").concat(randID, "_showing\" id=\"").concat(randID, "_showing\" class=\"form-control form-control-sm showing-input-field\" placeholder=\"\" list=\"").concat(randID, "_pagination\" value=\"").concat(show, "\" min=\"1\" max=\"").concat(totalRows, "\" />\n</div>\n<datalist id=\"").concat(randID, "_pagination\">\n<option value=\"5\">5</option>\n").concat(totalRows > 10 ? "<option value=\"10\">10</option>" : '', "\n").concat(totalRows > 20 ? "<option value=\"20\">20</option>" : '', "\n<option value=\"").concat(totalRows, "\">").concat(totalRows, "</option>\n</datalist>\n</div>\n<div class=\"col mw-fit-content me-auto d-flex align-items-center mb-3\"><span class=\"label\">per page</span></div>\n<div class=\"col mw-fit-content d-sm-flex justify-content-end align-items-center\" id=\"").concat(randID, "_paginationBtns\"></div>"); // Add after the actual table
+    // Create the form and create a container div to hold the pagination buttons
+    form.innerHTML = "<div class=\"col mw-fit-content mb-3\">\n<div class=\"form-control__wrapper form-control-inline mb-0\">\n  <label for=\"".concat(randID, "_showing\" class=\"form-label\">Showing:</label>\n  <input type=\"number\" name=\"").concat(randID, "_showing\" id=\"").concat(randID, "_showing\" class=\"form-control form-control-sm showing-input-field\" placeholder=\"\" list=\"").concat(randID, "_pagination\" value=\"").concat(show, "\" min=\"1\" max=\"").concat(totalRows, "\" />\n</div>\n<datalist id=\"").concat(randID, "_pagination\">\n<option value=\"5\">5</option>\n").concat(totalRows > 10 ? "<option value=\"10\">10</option>" : '', "\n").concat(totalRows > 20 ? "<option value=\"20\">20</option>" : '', "\n<option value=\"").concat(totalRows, "\">").concat(totalRows, "</option>\n</datalist>\n</div>\n<div class=\"col mw-fit-content me-auto d-flex align-items-center mb-3\"><span class=\"label\">per page</span></div>\n<div class=\"col mw-fit-content d-sm-flex justify-content-end align-items-center\" id=\"").concat(randID, "_paginationBtns\"></div>");
 
+    // Add after the actual table
     tableElement.append(form);
   };
   var createPaginationButttons = function createPaginationButttons(randID, tableElement, show, page, totalRows) {
     var paginationButtonsWrapper = document.getElementById(randID + '_paginationBtns');
     if (paginationButtonsWrapper == null) return false;
     var numberPages = Math.ceil(totalRows / show);
-
     if (numberPages == 1) {
       // Remore the buttons or dont display any if we dont need them
       paginationButtonsWrapper.innerHTML = '';
     } else if (numberPages < 5) {
       // If less than 5 pages (which fits comfortably on mobile) we display buttons
-      var strButtons = '';
 
+      var strButtons = '';
       for (var i = 1; i <= numberPages; i++) {
         if (i == page) strButtons += "<li class=\"page-item active\" aria-current=\"page\"><span class=\"page-link\">".concat(i, "</span></li>");else strButtons += "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(i, "\">").concat(i, "</button></li>");
       }
-
       paginationButtonsWrapper.innerHTML = "<span class=\"pe-2 mb-3\">Page: </span><ul class=\"pagination mb-3\">\n      ".concat(page == 1 ? "<li class=\"page-item disabled\"><span class=\"page-link\">Previous</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) - 1, "\">Previous</button></li>"), "\n      ").concat(strButtons, "\n      ").concat(page == numberPages ? "<li class=\"page-item disabled\"><span class=\"page-link\">Next</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) + 1, "\">Next</button></li>"), "\n    </ul>");
     } else {
       // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
-      var strOptions = '';
 
+      var strOptions = '';
       for (var _i = 1; _i <= numberPages; _i++) {
         if (_i == page) strOptions += "<option value=\"".concat(_i, "\" selected>Page ").concat(_i, "</option>");else strOptions += "<option value=\"".concat(_i, "\">Page ").concat(_i, "</option>");
       }
-
       paginationButtonsWrapper.innerHTML = "\n<div class=\"form-control__wrapper page-number mb-2\">\n<select class=\"form-select\">\n".concat(strOptions, "\n</select>\n</div>\n    ");
     }
   };
@@ -535,8 +539,8 @@
   function accordion(accordionElement) {
     // Fetch all the details element.
     if (!accordionElement.classList.contains('accordion--keep-open')) {
-      var details = accordionElement.querySelectorAll(":scope > details"); // Add the onclick listeners.
-
+      var details = accordionElement.querySelectorAll(":scope > details");
+      // Add the onclick listeners.
       details.forEach(targetDetail => {
         targetDetail.addEventListener("click", () => {
           // Close all the details that are not targetDetail.
@@ -548,19 +552,15 @@
         });
       });
     }
-
     if (window.location.hash && document.querySelector(window.location.hash + ':not([open]) summary')) {
       var detail = document.querySelector(window.location.hash + ' summary');
-
       if (detail instanceof HTMLElement) {
         detail.click();
       }
     }
-
     window.addEventListener('hashchange', function () {
       if (window.location.hash && document.querySelector(window.location.hash + ' summary')) {
         var _detail = document.querySelector(window.location.hash + ' summary');
-
         if (_detail instanceof HTMLElement) {
           _detail.click();
         }
@@ -571,14 +571,15 @@
   function testimonial(testimonialElement) {
     var scrollTimeout;
     var imagesCarousel = testimonialElement.querySelector('.testimonial__images');
-    var itemCount = imagesCarousel.querySelectorAll('img').length; // If we only have 1 item lets not bother doing anything else
+    var itemCount = imagesCarousel.querySelectorAll('img').length;
 
+    // If we only have 1 item lets not bother doing anything else
     if (itemCount == 1) {
       return false;
     }
+    testimonialElement.classList.add('testimonial--multi');
 
-    testimonialElement.classList.add('testimonial--multi'); // Set where the buttons go to
-
+    // Set where the buttons go to
     var setButtons = function setButtons(scrollTo) {
       var nextButton = testimonialElement.querySelector('.btn-next');
       var prevButton = testimonialElement.querySelector('.btn-prev');
@@ -587,9 +588,9 @@
       nextButton.removeAttribute('disabled');
       prevButton.removeAttribute('disabled');
       if (scrollTo == 1) prevButton.setAttribute('disabled', true);else if (scrollTo == itemCount) nextButton.setAttribute('disabled', true);
-    }; // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-
+    };
 
+    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
     imagesCarousel.addEventListener('scroll', function (e) {
       clearTimeout(scrollTimeout);
       scrollTimeout = setTimeout(function () {
@@ -597,14 +598,16 @@
         var scrollHeight = imagesCarousel.scrollHeight;
         var scrollLeft = imagesCarousel.scrollLeft;
         var scrollDown = imagesCarousel.scrollTop;
-        var scrollTo = Math.round(scrollLeft / scrollWidth * itemCount) + 1; // Change in scroll direction
+        var scrollTo = Math.round(scrollLeft / scrollWidth * itemCount) + 1;
 
+        // Change in scroll direction
         if (scrollLeft == 0 && scrollDown != 0) scrollTo = Math.round(scrollDown / scrollHeight * itemCount) + 1;
         testimonialElement.setAttribute('data-show', scrollTo);
         setButtons(scrollTo);
       }, 300);
-    }, false); // when the buttons are used we need to make sure the carousel scrolls to the correct place
+    }, false);
 
+    // when the buttons are used we need to make sure the carousel scrolls to the correct place
     testimonialElement.addEventListener('click', function (e) {
       for (var target = e.target; target && target != this; target = target.parentNode) {
         if (target.matches('[data-go]')) {
@@ -613,8 +616,9 @@
           var scrollLeft = 0;
           var scrollWidth = imagesCarousel.scrollWidth;
           var scrollHeight = imagesCarousel.scrollHeight;
-          if (scrollWidth > scrollHeight) scrollLeft = Math.floor(scrollWidth * ((scrollTo - 1) / itemCount));else scrollDown = Math.floor(scrollHeight * ((scrollTo - 1) / itemCount)); // Trigger the scroll
+          if (scrollWidth > scrollHeight) scrollLeft = Math.floor(scrollWidth * ((scrollTo - 1) / itemCount));else scrollDown = Math.floor(scrollHeight * ((scrollTo - 1) / itemCount));
 
+          // Trigger the scroll
           imagesCarousel.scroll({
             top: scrollDown,
             left: scrollLeft,
@@ -633,8 +637,9 @@
     carouselElement.getAttribute('data-cols');
     var smCols = carouselElement.getAttribute('data-sm-cols');
     var mdCols = carouselElement.getAttribute('data-md-cols');
-    carouselElement.querySelector('.carousel__controls a').classList.add('active'); // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
+    carouselElement.querySelector('.carousel__controls a').classList.add('active');
 
+    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
     carouselInner.addEventListener('scroll', function (e) {
       clearTimeout(scrollTimeout);
       scrollTimeout = setTimeout(function () {
@@ -646,14 +651,17 @@
         Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
           link.classList.remove('active');
         });
-        carouselElement.querySelector('.control-' + targetSlide).classList.add('active'); // Disable the previous button
+        carouselElement.querySelector('.control-' + targetSlide).classList.add('active');
 
-        if (targetSlide == 1) carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');else carouselElement.querySelector('.btn-prev').removeAttribute('disabled'); // Disable the next button if the last item is in view
+        // Disable the previous button
+        if (targetSlide == 1) carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');else carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
+        // Disable the next button if the last item is in view
         if (carouselInner.scrollLeft + scrollArea > lastItemOffset) carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');else carouselElement.querySelector('.btn-next').removeAttribute('disabled');
       }, 100);
-    }, false); // when the buttons are used we need to make sure the carousel scrolls to the correct place
+    }, false);
 
+    // when the buttons are used we need to make sure the carousel scrolls to the correct place
     carouselElement.addEventListener('click', function (e) {
       for (var target = e.target; target && target != this; target = target.parentNode) {
         if (target.matches('.carousel__controls a')) {
@@ -685,8 +693,9 @@
           break;
         }
       }
-    }, false); // Add responsive hide button classes
+    }, false);
 
+    // Add responsive hide button classes
     if (itemCount == 1) carouselElement.classList.add('hide-btns');
     if (smCols >= itemCount) carouselElement.classList.add('hide-sm-btns');
     if (mdCols >= itemCount) carouselElement.classList.add('hide-md-btns');
@@ -697,15 +706,17 @@
   function inputRange(inputWrapper) {
     inputWrapper.addEventListener('change', function (e) {
       var min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
-      var max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value); // Set attributes for input fields
+      var max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
 
+      // Set attributes for input fields
       Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input, index) => {
         input.setAttribute('max', max);
       });
       Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input, index) => {
         input.setAttribute('min', min);
-      }); // Hide select options if they are higher or lower than the min and max values
+      });
 
+      // Hide select options if they are higher or lower than the min and max values
       Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option, index) => {
         if (parseInt(option.getAttribute('value')) > max) option.classList.add('d-none');else option.classList.remove('d-none');
       });
@@ -714,7 +725,6 @@
       });
     }, false);
   }
-
   function inputRedirect(inputWrapper) {
     inputWrapper.addEventListener('change', function (e) {
       if (inputWrapper.matches('[data-value-if]')) {
@@ -725,9 +735,9 @@
         if (typeof inputWrapper.value != "undefined") document.location.href = inputWrapper.value;
       }
     }, false);
-  } //
-
+  }
 
+  //
   function multipleFileUploads(wrapper) {
     var fileTenplate = wrapper.querySelector('.row');
     var clone = fileTenplate.cloneNode(true);
@@ -736,14 +746,15 @@
       for (var target = e.target; target && target != this; target = target.parentNode) {
         if (target.matches('[data-add]')) {
           // Add a new row upload file input fields
+
           var tempClone = clone.cloneNode(true);
           wrapper.insertBefore(tempClone, target);
           if (addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles) addButton.setAttribute('disabled', 'disabled');
           break;
         }
-
         if (target.matches('[data-delete]')) {
           // Delete the current row
+
           var row = target.closest('.row');
           row.remove();
           if (addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles) addButton.removeAttribute('disabled');
@@ -751,9 +762,9 @@
         }
       }
     }, false);
-  } // Acts as an overall initialise function to trigger other functions.
-
+  }
 
+  // Acts as an overall initialise function to trigger other functions.
   function form(formElement) {
     // Check for input range groups
     Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement, index) => {
@@ -764,23 +775,23 @@
     });
     Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement, index) => {
       multipleFileUploads(arrayElement);
-    }); // Check the file size of a file when uploaded in case it exceeds the max file size set
+    });
 
+    // Check the file size of a file when uploaded in case it exceeds the max file size set
     formElement.addEventListener('change', function (e) {
       for (var target = e.target; target && target != this; target = target.parentNode) {
         if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
           var maxAllowedSize = target.dataset.filesize;
-
           if (target.files[0].size > maxAllowedSize) {
             target.value = '';
             alert('File too large');
           }
-
           break;
         }
       }
-    }, false); // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
+    }, false);
 
+    // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
     formElement.addEventListener('change', function (e) {
       // Remove disabled attribute when a pre-selected input field equals a certain value
       Array.from(formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')).forEach((arrayElement, index) => {
@@ -788,15 +799,15 @@
         var selector = arrayElement.dataset.activeif;
         var value = arrayElement.dataset.equals;
         var testElement = group.querySelector("select[data-id=\"".concat(selector, "\"],input[data-id=\"").concat(selector, "\"]"));
-
         if (testElement.value == value) {
           arrayElement.removeAttribute('disabled');
         } else {
           arrayElement.setAttribute('disabled', 'disabled');
           arrayElement.value = '';
         }
-      }); // Show this input wrapper when a pre-selected input field equals a certain value
+      });
 
+      // Show this input wrapper when a pre-selected input field equals a certain value
       Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach((arrayElement, index) => {
         var group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
         var selector = arrayElement.dataset.activeif;
@@ -807,14 +818,15 @@
     }, false);
   }
 
-  /**
-   * Integrate YouTube videos as a way of hosting videos without the overhead and worry surrounding hosting vides. i.e. file sizes, performance and accessibility.
+  /**
+   * Integrate YouTube videos as a way of hosting videos without the overhead and worry surrounding hosting vides. i.e. file sizes, performance and accessibility.
    */
   class youtubeVideo {
     /** @param {Element} embed dom element */
     constructor(embed) {
-      var createEmbed = this.createEmbed; // If the scripts is already loaded then lets just create the embed
+      var createEmbed = this.createEmbed;
 
+      // If the scripts is already loaded then lets just create the embed
       if (document.body.classList.contains('youtubeLoaded')) {
         embed.addEventListener('click', function (e) {
           // loop parent nodes from the target to the delegation node
@@ -830,17 +842,15 @@
         this.loadScripts(embed, this.createEmbed);
       }
     }
-    /**
-     * Load the YouTube scripts before trying to create the embed
-     * @param {HTMLElement} embed dom element
-     * @param {Function} createEmbed function to create the embed after script loaded.
-     */
-
 
+    /**
+     * Load the YouTube scripts before trying to create the embed
+     * @param {HTMLElement} embed dom element
+     * @param {Function} createEmbed function to create the embed after script loaded.
+     */
     loadScripts(embed, createEmbed) {
       return new Promise((resolve, reject) => {
         var image = new Image();
-
         image.onload = function () {
           // This code loads the IFrame Player API code asynchronously.
           var tag = document.createElement('script');
@@ -848,8 +858,9 @@
           var firstScriptTag = document.getElementsByTagName('script')[0];
           firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
           document.body.classList.add('youtubeLoaded');
-          resolve(true); // script has loaded, you can now use it safely
+          resolve(true);
 
+          // script has loaded, you can now use it safely
           tag.onload = () => {
             embed.addEventListener('click', function (e) {
               // loop parent nodes from the target to the delegation node
@@ -863,33 +874,31 @@
             }, false);
           };
         };
-
         image.onerror = function () {
           reject(false);
         };
-
         image.src = "https://youtube.com/favicon.ico";
       });
     }
-    /**
-     * Create the YouTube embed after the user has clicked on it.
-     * @param {HTMLElement} embed dom element
-     */
-
 
+    /**
+     * Create the YouTube embed after the user has clicked on it.
+     * @param {HTMLElement} embed dom element
+     */
     createEmbed(embed, target) {
       // If there is more than one video lets make sure there is only one playing at a time.
       if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function") window.player.pauseVideo();
       var video_id = target.getAttribute('data-id');
-      var link_id = target.getAttribute('id'); // create an id to pass t the script if one isn't present
+      var link_id = target.getAttribute('id');
 
+      // create an id to pass t the script if one isn't present
       if (typeof link_id == 'undefined' || link_id == null) {
         var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
         link_id = randLetter + Date.now();
         target.setAttribute('id', link_id);
-      } // This function creates an <iframe> (and YouTube player) after the API code downloads.
-
+      }
 
+      // This function creates an <iframe> (and YouTube player) after the API code downloads.
       function onYouTubeIframeAPIReady() {
         window.player = new YT.Player(link_id, {
           height: '100%',
@@ -907,18 +916,17 @@
           }
         });
       }
+      onYouTubeIframeAPIReady();
 
-      onYouTubeIframeAPIReady(); // The API will call this function when the video player is ready.
-
+      // The API will call this function when the video player is ready.
       function onPlayerReady(event) {
         // Play the video straight away
         event.target.playVideo();
-      } // The API calls this function when the player's state changes.
-      // The function indicates that when playing a video (state=1)
-
+      }
 
+      // The API calls this function when the player's state changes.
+      // The function indicates that when playing a video (state=1)
       var done = false;
-
       function onPlayerStateChange(event) {
         if (event.data == YT.PlayerState.PLAYING && !done) {
           var link = document.getElementById(link_id);
@@ -927,7 +935,6 @@
         }
       }
     }
-
   }
 
   var modal = element => {
@@ -935,17 +942,17 @@
     var firstLink = links[0];
     var lastLink = links[links.length - 1];
     var modalID = element.getAttribute('id');
-
     var closeModal = function closeModal() {
       var button = document.querySelector('[href="' + window.location.hash + '"]');
       button.focus();
       window.location.hash = "close";
-      history.replaceState("", document.title, window.location.pathname + window.location.search); // If there is more than one video lets make sure there is only one playing at a time.
+      history.replaceState("", document.title, window.location.pathname + window.location.search);
 
+      // If there is more than one video lets make sure there is only one playing at a time.
       if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function") window.player.pauseVideo();
-    }; // Trap the tab focus inside
-
+    };
 
+    // Trap the tab focus inside
     element.addEventListener('keydown', function (e) {
       if (e.key === "Tab" && e.shiftKey && document.activeElement == firstLink) {
         e.preventDefault();
@@ -954,8 +961,9 @@
         e.preventDefault();
         firstLink.focus();
       }
-    }); // ESC will close the open modal
+    });
 
+    // ESC will close the open modal
     document.addEventListener("keydown", function (e) {
       if (e.key === "Escape" && document.querySelector('.modal:target')) closeModal();
     });
@@ -966,7 +974,8 @@
           e.preventDefault();
           closeModal();
           break;
-        } // Dock the modal to the right or left to make the content behind readable
+        }
+        // Dock the modal to the right or left to make the content behind readable
         else if (target.matches('.modal__dock--right')) {
           e.preventDefault();
           if (!element.classList.contains('modal--left')) element.classList.add('modal--right');
@@ -980,68 +989,65 @@
         }
       }
     });
-
     function locationHashChanged() {
       if (location.hash === '#' + modalID) {
         console.log("Modal is now open");
         var videoButton = document.querySelector('.modal:target .modal__inner > .youtube-embed:first-child:last-child a');
         console.log(videoButton);
-
         if (videoButton) {
           videoButton.click();
         }
       }
     }
-
     window.onhashchange = locationHashChanged;
   };
 
-  // @ts-nocheck
-  // Attach classes to dom elements
-  document.addEventListener("DOMContentLoaded", function () {
-      addBodyClasses(document.body);
-      addGlobalEvents();
-      checkElements(document.body);
-      console.log('test.js');
-      // ANav
-      Array.from(document.querySelectorAll('.nav')).forEach(function (arrayElement) {
-          navbar(arrayElement);
-      });
-      // Advanced tables
-      Array.from(document.querySelectorAll('.table__wrapper')).forEach(function (arrayElement) {
-          table(arrayElement);
-      });
-      // Accordions
-      Array.from(document.querySelectorAll('.accordion')).forEach(function (arrayElement) {
-          accordion(arrayElement);
-      });
-      // Testimonial
-      Array.from(document.querySelectorAll('.testimonial')).forEach(function (arrayElement) {
-          testimonial(arrayElement);
-      });
-      // Carousel
-      Array.from(document.querySelectorAll('.carousel')).forEach(function (arrayElement) {
-          carousel(arrayElement);
-      });
-      // Form
-      Array.from(document.querySelectorAll('form')).forEach(function (arrayElement) {
-          form(arrayElement);
-      });
-      // Modal
-      Array.from(document.querySelectorAll('.modal')).forEach(function (arrayElement) {
-          modal(arrayElement);
-      });
-      // YouTube videos
-      Array.from(document.querySelectorAll('.youtube-embed')).forEach(function (arrayElement) {
-          new youtubeVideo(arrayElement);
-      });
-      window.addEventListener('hashchange', function () {
-          var hash = location.hash.replace('#', '');
-          var label = document.querySelector("label[for=\"".concat(hash, "\"]"));
-          if (label instanceof HTMLElement) {
-              label.click();
-          }
-      }, false);
+  // @ts-nocheck
+  // Attach classes to dom elements
+  document.addEventListener("DOMContentLoaded", function () {
+      addBodyClasses(document.body);
+      addGlobalEvents();
+      checkElements(document.body);
+      console.log('test.js');
+      // ANav
+      Array.from(document.querySelectorAll('.nav')).forEach(function (arrayElement) {
+          navbar(arrayElement);
+      });
+      // Advanced tables
+      Array.from(document.querySelectorAll('.table__wrapper')).forEach(function (arrayElement) {
+          table(arrayElement);
+      });
+      // Accordions
+      Array.from(document.querySelectorAll('.accordion')).forEach(function (arrayElement) {
+          accordion(arrayElement);
+      });
+      // Testimonial
+      Array.from(document.querySelectorAll('.testimonial')).forEach(function (arrayElement) {
+          testimonial(arrayElement);
+      });
+      // Carousel
+      Array.from(document.querySelectorAll('.carousel')).forEach(function (arrayElement) {
+          carousel(arrayElement);
+      });
+      // Form
+      Array.from(document.querySelectorAll('form')).forEach(function (arrayElement) {
+          form(arrayElement);
+      });
+      // Modal
+      Array.from(document.querySelectorAll('.modal')).forEach(function (arrayElement) {
+          modal(arrayElement);
+      });
+      // YouTube videos
+      Array.from(document.querySelectorAll('.youtube-embed')).forEach(function (arrayElement) {
+          new youtubeVideo(arrayElement);
+      });
+      window.addEventListener('hashchange', function () {
+          var hash = location.hash.replace('#', '');
+          var label = document.querySelector("label[for=\"".concat(hash, "\"]"));
+          if (label instanceof HTMLElement) {
+              label.click();
+          }
+      }, false);
   });
 
 }));