@iamproperty/components 3.4.6 → 3.5.0

package/assets/ts/components/header/header.component.ts

@@ -1,4 +1,12 @@
 // @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "header"
+});
+
 class iamHeader extends HTMLElement {
 
   constructor(){

package/assets/ts/components/pagination/README.md

@@ -0,0 +1,11 @@
+```
+<iam-pagination data-total="12"></iam-pagination>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-total | int | 0 | The total amount is needed to work out how many pagination buttons are needed |
+| data-page | int | 1 | Override the current page value |
+| data-show | int | 15 | Update how many items can be shown per page |

package/assets/ts/components/pagination/pagination.component.ts

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import createPaginationButttons from "../../modules/pagination";
+
+class iamPagination extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    </style>
+    <div class="pagination__wrapper d-none">
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // Set default attributes
+    const params = new URLSearchParams(window.location.search);
+
+    if(!this.hasAttribute('data-total'))
+      this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+
+    if(!this.hasAttribute('data-page'))
+      this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+
+    if(!this.hasAttribute('data-show'))
+      this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
+
+    if(!this.hasAttribute('data-increment'))
+        this.setAttribute('data-increment', 15);
+
+    this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
+    createPaginationButttons(this,this.shadowRoot.querySelector('.pagination__wrapper'));
+  }
+
+	connectedCallback() {
+    this.shadowRoot.querySelector('.pagination__wrapper').classList.remove('d-none');
+  }
+}
+
+export default iamPagination;

package/assets/ts/components/table/README.md

@@ -0,0 +1,23 @@
+```
+<iam-table class="container">
+  <table>
+    <thead>....</thead>
+    <tbody>...</tbody>
+  </table>
+</iam-tabs>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-show | int | 15 | Update how many rows can be shown per page |
+| data-filterby | string (form ID) | | Give an optional form ID to connect a form to the table and make it act like a filtering system |
+
+
+**Class modifiers**
+
+- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop). 
+- Adding a class of **.table--export** to the table component will create a button at the bottom of the table to export its contents out as a CSV file.
+- Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
+- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.

package/assets/ts/components/table/table.component.ts

@@ -0,0 +1,133 @@
+// @ts-nocheck
+import * as tableModule from "../../modules/table";
+import createPaginationButttons from "../../modules/pagination";
+
+class iamTable extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+
+    const isCTA = this.classList.contains('table--cta');
+    const isExportable = this.classList.contains('table--export');
+    
+    let classList = this.classList.toString();
+
+    classList = classList.replace('table--cta','');
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    </style>
+    ${isCTA ? '<div class="table--cta">' : ''}
+    <div class="table__wrapper ${classList}">
+      <slot></slot>
+    </div>
+    ${isCTA ? '</div>' : ''}
+    ${isExportable ? '<button class="link" type="button" data-export>Export table as CSV</button>' : ''}
+    <div class="table__pagination"></div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    const params = new URLSearchParams(window.location.search)
+    // Set default attributes
+    if(!this.hasAttribute('data-total'))
+      this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+
+    if(!this.hasAttribute('data-page'))
+      this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+
+    if(!this.hasAttribute('data-show'))
+      this.setAttribute('data-show', 15);
+
+    this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
+  }
+
+	connectedCallback() {
+
+    this.table = this.querySelector('table');
+    this.savedTableBody = this.querySelector('tbody').cloneNode(true);
+    this.pagination = this.shadowRoot.querySelector('.table__pagination');
+
+    // Set events on the filter table
+    this.form = document.createElement('form');
+    if(this.hasAttribute('data-filterby')){
+
+      this.form = document.querySelector(`#${this.getAttribute('data-filterby')}`);
+
+      // Create a data list if a search input is present
+      tableModule.createSearchDataList(this.table, this.form);
+
+      if(!this.form.querySelector('[data-page]')){
+        this.form.innerHTML += `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
+      }
+      if(!this.form.querySelector('[data-show]')){
+        this.form.innerHTML += `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
+      }
+    }
+
+
+    // Event listeners
+    tableModule.addTableEventListeners(this.table);
+    tableModule.addFilterEventListeners(this.table, this.form, this.pagination, this, this.savedTableBody);
+    tableModule.addPaginationEventListeners(this.table, this.form, this.pagination, this);
+    tableModule.addExportEventListeners(this.shadowRoot.querySelector('[data-export]'), this.table);
+
+    if(this.form.getAttribute('data-ajax')){
+      tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
+    }
+    else {
+      tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
+      tableModule.filterTable(this.table, this.form,this);
+      createPaginationButttons(this,this.pagination);
+    }
+
+    this.shadowRoot.querySelector('.table__wrapper').addEventListener("scroll", (event) => {
+
+      if(this.table.querySelector('dialog[open]'))
+        this.table.querySelector('dialog[open]').close();
+    });
+  }
+
+
+  static get observedAttributes() {
+    return ["data-total","data-pages","data-page","data-show"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    /*
+    switch (attrName) {
+      case "data-total": {
+        this.setAttribute('data-pages', Math.ceil(newVal / this.getAttribute('data-show')));
+        break;
+      }
+      case "data-show": {
+        this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / newVal));
+        break;
+      }
+      case "data-pages": {
+        console.log('create pagination');
+
+        tableModule.filterTable(this.table, this.form);
+        createPaginationButttons(this,this.pagination);
+
+        break;
+      }
+      case "data-page": {
+
+        let paginationInput = this.form.querySelector('[data-pagination]');
+
+        paginationInput.value = newVal;
+        
+        //tableModule.filterTable(this.table, this.form);
+
+        break;
+      }
+    }
+    */
+  }
+}
+
+export default iamTable;

package/assets/ts/components/tabs/tabs.component.ts

@@ -1,6 +1,13 @@
 // @ts-nocheck
 import tabs from "../../modules/tabs";
 
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "tabs"
+});
+
 class iamTabs extends HTMLElement {
 
   constructor(){

package/assets/ts/dynamic.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 // Modules
 import * as helpers from '../js/modules/helpers'
+import createDataLayer from '../js/modules/data-layer'
 import nav from '../js/modules/nav'
 import table from '../js/modules/table'
 //import accordion from './modules/accordion'
@@ -8,9 +9,8 @@ import testimonial from '../js/modules/testimonial'
 import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'
 import youtubeVideo from '../js/modules/youtubevideo'
-import modal from '../js/modules/modal'
 
-const components = ['accordion','header','tabs'];
+const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters'];
 const prefix = "iam"
 const options = {
   rootMargin: '50px',
@@ -21,6 +21,8 @@ const componentExt = ".component.js";
 // Load components - Each component will load once the first of its type has been loaded
 components.forEach((component) => {
 
+  console.log(component)
+  
   if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
     return;
 
@@ -28,6 +30,8 @@ components.forEach((component) => {
     entries.forEach((entry:any) => {
       
       if(entry.intersectionRatio > 0){
+
+        console.log(component)
         
         import(`./components/${component}/${component}${componentExt}`).then(module => {
           if (!window.customElements.get(`${prefix}-${component}`))
@@ -49,28 +53,18 @@ components.forEach((component) => {
 // Attach classes to dom elements
 document.addEventListener("DOMContentLoaded", function() {
 
+  createDataLayer();
+  
   // Global stuff
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
-  helpers.checkElements(document.body);
+  //helpers.checkElements(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
     nav(arrayElement);
   });
 
-  // Advanced tables
-  Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement) => {
-    table(arrayElement);
-  });
-
-  // Accordions
-  /*
-  Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement) => {
-    accordion(arrayElement);
-  });
-*/
-
   // Testimonial
   Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
     testimonial(arrayElement);
@@ -83,12 +77,11 @@ document.addEventListener("DOMContentLoaded", function() {
   Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
     form(arrayElement);
   });
-  // Modal
-  Array.from(document.querySelectorAll('.modal')).forEach((arrayElement) => {
-    modal(arrayElement);
-  });
   // YouTube videos
   Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
+
+    console.log(arrayElement)
+
     new youtubeVideo(arrayElement);
   });
 

package/assets/ts/flat-components.ts

@@ -1,23 +1,27 @@
 // @ts-nocheck
 // Modules
 import * as helpers from '../js/modules/helpers'
+import createDataLayer from '../js/modules/data-layer'
 import nav from '../js/modules/nav'
-import table from '../js/modules/table'
+import * as tableModule from './modules/table'
 import accordion from './modules/accordion'
 import testimonial from '../js/modules/testimonial'
 import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'
 import youtubeVideo from '../js/modules/youtubevideo'
-import modal from '../js/modules/modal'
 import tabs from '../js/modules/tabs'
+import filterlist from '../js/modules/filterlist'
+import createPaginationButttons from '../js/modules/pagination'
 
 // Attach classes to dom elements
 document.addEventListener("DOMContentLoaded", function() {
 
+  createDataLayer();
+
   // Global stuff
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
-  helpers.checkElements(document.body);
+  //helpers.checkElements(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
@@ -25,8 +29,18 @@ document.addEventListener("DOMContentLoaded", function() {
   });
 
   // Advanced tables
-  Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement) => {
-    table(arrayElement);
+  Array.from(document.querySelectorAll('table')).forEach((arrayElement) => {
+
+    tableModule.addTableEventListeners(arrayElement);
+    tableModule.createMobileButton(arrayElement);
+    tableModule.addDataAttributes(arrayElement);
+
+
+    if(arrayElement.closest('.table--cta')){
+
+      const largestWidth = tableModule.getLargestLastColWidth(arrayElement);
+      arrayElement.closest('.table--cta').style.setProperty("--cta-width", `${largestWidth}rem`);
+    }
   });
 
   // Accordions
@@ -46,10 +60,6 @@ document.addEventListener("DOMContentLoaded", function() {
   Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
     form(arrayElement);
   });
-  // Modal
-  Array.from(document.querySelectorAll('.modal')).forEach((arrayElement) => {
-    modal(arrayElement);
-  });
   // YouTube videos
   Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
     new youtubeVideo(arrayElement);
@@ -59,6 +69,24 @@ document.addEventListener("DOMContentLoaded", function() {
     tabs(arrayElement);
   });
 
+  // filterlist
+  Array.from(document.querySelectorAll('.iam-filterlist')).forEach((arrayElement) => {
+    if(arrayElement.hasAttribute('data-input') && document.querySelector(arrayElement.getAttribute('data-input')))
+      filterlist(arrayElement.querySelector('ul'),document.querySelector(arrayElement.getAttribute('data-input')));
+  });
+  
+  Array.from(document.querySelectorAll('.pagination__wrapper')).forEach((arrayElement) => {
+
+
+    const params = new URLSearchParams(window.location.search);
+    arrayElement.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+    arrayElement.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
+    arrayElement.setAttribute('data-increment', 15);
+    arrayElement.setAttribute('data-pages', Math.ceil(arrayElement.getAttribute('data-total') / arrayElement.getAttribute('data-show')));
+
+    createPaginationButttons(arrayElement,arrayElement);
+  });
+
 
   window.addEventListener('hashchange', function() {
 

package/assets/ts/modules/applied-filters.ts

@@ -0,0 +1,146 @@
+// @ts-nocheck
+function createAppliedFilters(container,filters) {
+
+
+  function addFilterButton (filters, input){
+    let shouldRemoveFilter = false;
+    let inputName = input.getAttribute('name');
+    
+    if(inputName.includes('[]'))
+      inputName = inputName.replace('[]',`[${input.value}]`);
+
+    let filter = filters.querySelector(`[data-name="${inputName}"]`);
+
+    if(filter && input.getAttribute('type') == 'checkbox')
+      shouldRemoveFilter = true;
+
+    let filterText = input.getAttribute('data-filter-text');
+    
+    if(!filter) {
+      filter = document.createElement('button');
+      filters.appendChild(filter);
+    }
+    
+    filter.setAttribute('type','button')
+    filter.classList.add('filter');
+    filter.setAttribute('data-name',inputName);
+
+    filter.innerHTML = filterText.replace('$value', input.value);
+
+    // If the value
+    if(!input.value || shouldRemoveFilter)
+      filter.remove();
+
+
+
+    // If input has an ancestor with data-filter and all of inputs in that parent have been filled in then we need to transform the filter
+    if(input.parentNode.closest('[data-filter-text]')){
+      let parent = input.parentNode.closest('[data-filter-text]');
+      let allValuesSet = true;
+      inputName = "";
+
+      parent.querySelectorAll('input').forEach((element,index) => {
+
+        let name = element.getAttribute('name');
+
+        // create a joined inputname for the parent filter
+        inputName += `${index!=0?',':''}${name}`;
+
+        if(filters.querySelector(`[data-name="${name}"]`))
+          filters.querySelector(`[data-name="${name}"]`).remove();
+
+        if(element.value){
+
+          let childFilter = document.createElement('button');
+          childFilter.setAttribute('type','button')
+          childFilter.classList.add('filter');
+          childFilter.setAttribute('data-name',name);
+          childFilter.innerHTML = filterText.replace('$value', element.value);
+          filters.appendChild(childFilter);
+        }
+        else
+          allValuesSet = false;
+      });
+
+      if(filters.querySelector(`[data-name="${inputName}"]`))
+        filters.querySelector(`[data-name="${inputName}"]`).remove();
+
+      if(allValuesSet){
+
+        let newFilterText = parent.getAttribute('data-filter-text');
+        parent.querySelectorAll('input').forEach((element,index) => {
+          
+          let name = element.getAttribute('name');
+
+          // Remove all the child filter tags
+          if(filters.querySelector(`[data-name="${name}"]`))
+            filters.querySelector(`[data-name="${name}"]`).remove();
+
+          newFilterText = newFilterText.replace(`$${index+1}`,element.value);
+        });
+
+        let parentFilter = document.createElement('button');
+        parentFilter.setAttribute('type','button')
+        parentFilter.classList.add('filter');
+        parentFilter.setAttribute('data-name',inputName);
+        parentFilter.innerHTML = newFilterText;
+        filters.appendChild(parentFilter);
+      }
+
+
+    }
+
+  }
+
+  // check for inputs on load
+  Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
+    addFilterButton(filters, input)
+  });
+  
+  container.addEventListener('change', function(event){
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
+
+      let input = event.target.closest('input[data-filter-text]');
+
+      addFilterButton (filters, input)
+    };
+    
+  }, false);
+
+  filters.addEventListener('click', function(event){
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('.filter')){
+      let filter = event.target.closest('.filter');
+      let names = filter.getAttribute('data-name').split(',')
+
+      for(var t=0;t<names.length;t++){
+        let name = names[t];
+        let selector = `[name="${name}"]`;
+
+        if(name.match(/\[(.*)\]/)){
+          let newName = name.replace(/\[(.*)\]/,`[]`);
+          let value = name.replace(/.*\[(.*)\]/,`$1`);
+          selector = `[name="${newName}"][value="${value}"]`;
+        }
+
+        let inputs = container.querySelectorAll(selector);
+        for(var i=0;i<inputs.length;i++){
+          let input = inputs[i];
+
+          if(input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')
+            inputs[i].value = "";
+
+          inputs[i].checked = false;
+        }
+      }
+
+      filter.remove();
+    }
+
+  }, false);
+
+
+}
+
+export default createAppliedFilters;

package/assets/ts/modules/data-layer.ts

@@ -0,0 +1,58 @@
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[];
+};
+
+declare const window: WindowWithDataLayer;
+
+function createDataLayer () {
+
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "event": "Pageview",
+    "pageTitle": document.title
+  });
+  
+  // Global events to track
+  document.addEventListener('click', (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('[open] summary')){
+      window.dataLayer.push({
+        "event": "closeDetails",
+        // @ts-ignore: Object is possibly 'null'.
+        "detailsTitle": event.target.closest('summary').textContent
+      });
+    }
+    else if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
+        
+      window.dataLayer.push({
+        "event": "openDetails",
+        // @ts-ignore: Object is possibly 'null'.
+        "detailsTitle": event.target.closest('summary').textContent
+      });
+    }
+  
+    if (event && event.target instanceof HTMLElement && event.target.closest('a')){
+      window.dataLayer.push({
+        "event": "linkClicked",
+        // @ts-ignore: Object is possibly 'null'.
+        "linkText": event.target.closest('a').hasAttribute('title') ? event.target.closest('a').getAttribute('title') : event.target.closest('a').textContent,
+        // @ts-ignore: Object is possibly 'null'.
+        "class": (event.target.closest('a').hasAttribute('class') ? event.target.closest('a').getAttribute('class') : ''),
+        // @ts-ignore: Object is possibly 'null'.
+        "href": event.target.closest('a').getAttribute('href')
+      });
+    }
+    if (event && event.target instanceof HTMLElement && event.target.closest('button')){
+      window.dataLayer.push({
+        "event": "buttonClicked",
+        // @ts-ignore: Object is possibly 'null'.
+        "buttonText": event.target.closest('button').textContent,
+        // @ts-ignore: Object is possibly 'null'.
+        "class": (event.target.closest('button').hasAttribute('class') ? event.target.closest('button').getAttribute('class') : '')
+      });
+    }
+
+  });
+}
+
+export default createDataLayer;

package/assets/ts/modules/filterlist.ts

@@ -0,0 +1,46 @@
+// @ts-nocheck
+function filterlist(list: Element, input:Element) {
+
+  addFilterlistEventListeners(list,input);
+}
+
+function addFilterlistEventListeners(list: Element, input:Element) {
+
+  var timer;
+
+  input.addEventListener('keyup', (event) => {
+
+    clearTimeout(timer);
+      timer = setTimeout(function(){
+        filterTheList(list,input.value);
+      }, 500);
+  });
+
+  input.addEventListener('change', (event) => {
+
+    clearTimeout(timer);
+    
+    filterTheList(list, input.value);
+  });
+}
+
+export const filterTheList =  function (list: Element, searchTerm){
+
+  Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {
+    let content = item.textContent.toLowerCase();
+
+    item.classList.add('d-none');
+
+    if(content.includes(searchTerm.toLowerCase()))
+      item.classList.remove('d-none');
+  });
+
+  // Data layer Web component created
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "event": "Filtered list",
+    "value": searchTerm
+  });
+}
+
+export default filterlist;