@iamproperty/components 3.4.5 → 3.4.7

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

@@ -0,0 +1,128 @@
+// @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);
+    }
+
+  }
+
+
+  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/README.md

@@ -0,0 +1,18 @@
+```
+<iam-tabs class="container">
+  <details>
+    <summary>Question 1</summary>
+    <p>Answer </p>
+  </details>
+  <details>
+    <summary>Question 2</summary>
+    <p>Answer</p>
+  </details>
+</iam-tabs>
+```
+
+### Tab Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title  | String | - | Used for the heading of the component |

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

@@ -0,0 +1,41 @@
+// @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(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/tabs.css";`;
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    ${loadCSS}
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="tabs">
+      <div class="tabs__links"></div>
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    tabs(this);
+  }
+}
+
+export default iamTabs;

package/assets/ts/dynamic.ts

@@ -0,0 +1,98 @@
+// @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'
+import testimonial from '../js/modules/testimonial'
+import carousel from '../js/modules/carousel'
+import form from '../js/modules/form'
+import youtubeVideo from '../js/modules/youtubevideo'
+
+const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters'];
+const prefix = "iam"
+const options = {
+  rootMargin: '50px',
+  threshold: 0.1
+}
+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;
+
+  let callback = (entries:any) => {
+    entries.forEach((entry:any) => {
+      
+      if(entry.intersectionRatio > 0){
+
+        console.log(component)
+        
+        import(`./components/${component}/${component}${componentExt}`).then(module => {
+          if (!window.customElements.get(`${prefix}-${component}`))
+            window.customElements.define(`${prefix}-${component}`, module.default);
+        }).catch((err) => {
+          console.log(err.message);
+        });  
+
+        intObserver.unobserve(entry.target);
+      }
+    });
+  };
+
+  const intObserver = new IntersectionObserver(callback, options);
+  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});
+
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  createDataLayer();
+  
+  // Global stuff
+  helpers.addBodyClasses(document.body);
+  helpers.addGlobalEvents(document.body);
+  //helpers.checkElements(document.body);
+
+  // ANav
+  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
+    nav(arrayElement);
+  });
+
+  // Testimonial
+  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
+    testimonial(arrayElement);
+  });
+  // Carousel
+  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
+    carousel(arrayElement);
+  });
+  // Form
+  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
+    form(arrayElement);
+  });
+  // YouTube videos
+  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
+
+    console.log(arrayElement)
+
+    new youtubeVideo(arrayElement);
+  });
+
+
+  window.addEventListener('hashchange', function() {
+
+    const hash = location.hash.replace('#','');
+    const label = document.querySelector(`label[for="${hash}"]`);
+
+    if (label instanceof HTMLElement)
+      label.click();
+
+  }, false);
+});

package/assets/ts/flat-components.ts

@@ -0,0 +1,100 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import createDataLayer from '../js/modules/data-layer'
+import nav from '../js/modules/nav'
+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 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);
+
+  // ANav
+  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
+    nav(arrayElement);
+  });
+
+  // Advanced tables
+  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
+  Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement) => {
+    accordion(arrayElement);
+  });
+
+  // Testimonial
+  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
+    testimonial(arrayElement);
+  });
+  // Carousel
+  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
+    carousel(arrayElement);
+  });
+  // Form
+  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
+    form(arrayElement);
+  });
+  // YouTube videos
+  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
+    new youtubeVideo(arrayElement);
+  });
+  // Tabs
+  Array.from(document.querySelectorAll('.tabs')).forEach((arrayElement) => {
+    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() {
+
+    const hash = location.hash.replace('#','');
+    const label = document.querySelector(`label[for="${hash}"]`);
+
+    if (label instanceof HTMLElement)
+      label.click();
+
+  }, false);
+});

package/assets/ts/html.d.ts

@@ -0,0 +1,4 @@
+declare module '*.html' {
+  const value: string;
+  export default value
+}

package/assets/ts/modules/accordion.ts

@@ -1,6 +1,21 @@
 // @ts-nocheck
 function accordion(accordionElement: Element) {
 
+  // Add classes to help with CSS 
+  let details = accordionElement.querySelectorAll('details');
+  let summaries = accordionElement.querySelectorAll('summary');
+  
+  details.forEach((detail) => {
+    detail.classList.add('accordion-item');
+  });
+
+  summaries.forEach((summary) => {
+    summary.classList.add('accordion-header');
+    summary.classList.add('accordion-button');
+    summary.classList.add('h4');
+  });
+  
+
   // Fetch all the details element.
   if(!accordionElement.classList.contains('accordion--keep-open')){
 
@@ -18,27 +33,6 @@ function accordion(accordionElement: Element) {
       });
     });
   }
-
-
-  if(window.location.hash && document.querySelector(window.location.hash+':not([open]) summary')) {
-
-    const 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')) {
-
-      const detail = document.querySelector(window.location.hash+' summary');
-
-      if (detail instanceof HTMLElement) {
-        detail.click();
-      }
-    }
-  });
 }
 
 export default accordion

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;