@iamproperty/components 3.5.0 → 3.7.0

package/assets/js/modules/helpers.js

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo.js";
 /**
  * Global helper functions to help maintain and enhance framework elements.
  * @module Helpers
@@ -35,7 +34,7 @@ export const addGlobalEvents = (body) => {
         checkElements(location.hash);
     window.addEventListener('hashchange', function () { checkElements(location.hash); }, false);
     addEventListener("popstate", (event) => {
-        if (event.state.type == "pagination") {
+        if (event && event.state.type && event.state.type == "pagination") {
             let form = document.querySelector(`#${event.state.form}`);
             let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
             if (pageInput)
@@ -45,88 +44,6 @@ export const addGlobalEvents = (body) => {
             form.dispatchEvent(new Event("submit"));
         }
     });
-    // Dialogs/modals
-    document.addEventListener('click', (event) => {
-        // Modal
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')) {
-            const button = event.target.closest('[data-modal]');
-            const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
-            const dialog = document.querySelector(`dialog#${modalID}`);
-            // Create close button is needed
-            dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
-            let videoButton = dialog.querySelector('.youtube-embed a');
-            if (videoButton) {
-                createEmbed(videoButton);
-            }
-            dialog.showModal();
-            window.dataLayer = window.dataLayer || [];
-            window.dataLayer.push({
-                "event": "openModal",
-                "id": modalID
-            });
-        }
-        ;
-        // Close modal
-        if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')) {
-            const dialog = event.target.closest('dialog[open]');
-            event.preventDefault();
-            dialog.close();
-            window.dataLayer = window.dataLayer || [];
-            window.dataLayer.push({
-                "event": "closeModal",
-                "id": dialog.getAttribute('id')
-            });
-        }
-        if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')) {
-            const dialog = event.target.closest('dialog[open]');
-            const dialogDimensions = dialog.getBoundingClientRect();
-            if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
-                dialog.close();
-                window.dataLayer = window.dataLayer || [];
-                window.dataLayer.push({
-                    "event": "closeModal",
-                    "id": dialog.getAttribute('id')
-                });
-            }
-        }
-        // Popover
-        if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
-            // Close existing open popover
-            let btn = event.target.closest('.dialog__wrapper > button');
-            let parent = event.target.closest('.dialog__wrapper > button').parentNode;
-            let dataEvent = "openPopover";
-            let popover = parent.querySelector(':scope > dialog');
-            if (document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
-                document.querySelector('dialog[open]').close();
-            if (popover.hasAttribute('open')) {
-                popover.close();
-                dataEvent = "closePopover";
-                popover.removeAttribute('style');
-                btn.classList.remove('active');
-            }
-            else {
-                popover.show();
-                btn.classList.add('active');
-                var position = btn.getBoundingClientRect();
-                let topOffset = position.top;
-                let leftOffset = position.left;
-                if (btn.closest('iam-table')) {
-                    let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
-                    topOffset -= container.top;
-                    leftOffset -= container.left;
-                }
-                if (popover.classList.contains('dialog--fix')) {
-                    popover.setAttribute('style', `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`);
-                }
-            }
-            window.dataLayer = window.dataLayer || [];
-            window.dataLayer.push({
-                "event": dataEvent,
-                "id": btn.textContent
-            });
-        }
-        ;
-    });
     return null;
 };
 export const isNumeric = function (str) {

package/assets/js/modules/table.js

@@ -15,8 +15,8 @@ export const addDataAttributes = (table) => {
                 tempDiv.innerHTML = heading.innerHTML;
                 let headingText = tempDiv.textContent || tempDiv.innerText || "";
                 cell.setAttribute('data-label', headingText);
-                if (heading.hasAttribute('class'))
-                    cell.setAttribute('class', heading.getAttribute('class'));
+                if (heading.hasAttribute('data-td-class'))
+                    cell.setAttribute('class', heading.getAttribute('data-td-class'));
                 if (heading.hasAttribute('data-format')) {
                     cell.setAttribute('data-format', heading.getAttribute('data-format'));
                     cell.innerHTML = formatCell('date', cell.textContent.trim()); //Make sure date format is consistent
@@ -46,10 +46,18 @@ export const getLargestLastColWidth = (table) => {
 export const createMobileButton = (table) => {
     if (table.closest('.table--fullwidth'))
         return false;
+    if (table.querySelectorAll('thead tr th').length < 4)
+        return false;
     Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
         let firstCol = row.querySelector(':scope > :is(td,th):first-child');
         let colContent = firstCol.textContent;
-        firstCol.innerHTML = `<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+        if (colContent != "")
+            firstCol.innerHTML = `<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+        else {
+            let secondCol = row.querySelector(':scope > :is(td,th):nth-child(2)');
+            let secondColContent = secondCol.textContent;
+            secondCol.innerHTML = `<span class="td__content">${secondColContent}</span><button type="button" class="d-none">${secondColContent}</button>`;
+        }
     });
 };
 export const addTableEventListeners = (table) => {
@@ -100,6 +108,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         else {
             filterTable(table, form, wrapper);
             createPaginationButttons(wrapper, pagination);
+            populateDataQueries(table, form);
         }
     };
     form.addEventListener('keyup', (event) => {
@@ -121,6 +130,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')) {
             formSubmit();
         }
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')) {
+            formSubmit();
+        }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')) {
             formSubmit();
         }
@@ -153,6 +165,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             event.preventDefault();
         formSubmit();
     });
+    form.addEventListener('force', (event) => {
+        formSubmit();
+    });
 };
 export const sortTable = (table, form, savedTableBody) => {
     if (form.getAttribute('data-ajax')) {
@@ -211,6 +226,13 @@ export const filterTable = (table, form, wrapper) => {
     let matched = 0;
     let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
     let showRows = form.querySelector('[data-show]') ? parseInt(form.querySelector('[data-show]').value) : 15;
+    // Reset
+    Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+        row.classList.remove('filtered');
+        row.classList.remove('filtered--matched');
+        row.classList.remove('filtered--show');
+        row.removeAttribute('data-filtered-by');
+    });
     // Filter
     let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
     filterInputs.forEach((filterInput, index) => {
@@ -249,18 +271,8 @@ export const filterTable = (table, form, wrapper) => {
             element.innerHTML += `(${filters.length})`;
         });
     }
-    // Stop function if no filters identified
-    if (!Object.keys(searches).length && !Object.keys(filters).length)
-        return false;
-    table.classList.add('table--filtered');
-    // Reset
-    Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
-        row.classList.remove('filtered');
-        row.classList.remove('filtered--matched');
-        row.classList.remove('filtered--show');
-        row.removeAttribute('data-filtered-by');
-    });
     // Filter the table
+    table.classList.add('table--filtered');
     for (const [key, filterValue] of Object.entries(filters)) {
         Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
             let isMatched = false;
@@ -341,7 +353,8 @@ export const filterTable = (table, form, wrapper) => {
         matched++;
         row.classList.add('filtered--matched');
         // pagination bit 
-        if (Math.ceil(matched / showRows) == parseInt(page))
+        let matchesPage = Math.ceil(matched / showRows);
+        if (matchesPage == parseInt(page))
             row.classList.add('filtered--show');
     });
     if (wrapper) {
@@ -350,7 +363,6 @@ export const filterTable = (table, form, wrapper) => {
         wrapper.setAttribute('data-total', matched);
         wrapper.setAttribute('data-show', showRows);
     }
-    populateDataQueries(table, form);
 };
 export const populateDataQueries = (table, form) => {
     const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
@@ -358,7 +370,7 @@ export const populateDataQueries = (table, form) => {
         let query = queryElement.getAttribute('data-query');
         let numberOfMatchedRows;
         if (query == 'total') {
-            numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr:not(.filtered)').length : table.querySelectorAll('tbody tr').length;
+            numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr').length : table.querySelectorAll('tbody tr').length;
         }
         else if (!query.includes(' == ') && query.includes(' & ')) {
             let queries = query.split(' & ');
@@ -385,7 +397,7 @@ export const populateDataQueries = (table, form) => {
         }
         else {
             let queryParts = query.split(' == ');
-            numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not([class*="filtered"]) td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function (element) {
+            numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr.filtered--matched td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function (element) {
                 return element.textContent === queryParts[1];
             }).length;
         }
@@ -405,9 +417,11 @@ export const addPaginationEventListeners = function (table, form, pagination, wr
             paginationInput.value = newPage;
             wrapper.setAttribute('data-page', newPage);
             form.dispatchEvent(new Event("submit"));
-            const url = new URL(location);
-            url.searchParams.set("page", newPage);
-            history.pushState({ 'type': 'pagination', 'form': form.getAttribute('id'), 'page': newPage }, "", url);
+            if (table.hasAttribute('data-show-history')) {
+                const url = new URL(location);
+                url.searchParams.set("page", newPage);
+                history.pushState({ 'type': 'pagination', 'form': form.getAttribute('id'), 'page': newPage }, "", url);
+            }
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
             event.preventDefault();

package/assets/js/modules/tabs.js

@@ -32,9 +32,9 @@ export const createTabsLinks = function (tabsElement) {
 export const setTabsEventHandlers = function (tabsElement) {
     let details = tabsElement.querySelectorAll(':scope > details');
     let summaries = tabsElement.querySelectorAll(':scope > details > summary');
-    let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+    let buttons = tabsElement.querySelectorAll(':scope .tabs__links > .link');
     if (tabsElement.shadowRoot)
-        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
     // Set the on click for the tab buttons, these will open the details box it matches too
     buttons.forEach((button) => {
         button.addEventListener("click", (e) => {