@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

package/assets/ts/components/search/search.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import Cookies from 'js-cookie';
 import { safeID, resolvePath, isTraversable } from '../../modules/helpers';
 
@@ -33,6 +32,9 @@ class iamSearch extends HTMLElement {
     }
     .optional-text {
       display: none;
+    } 
+    .js-hide {
+      display: none !important;
     }
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
@@ -41,7 +43,8 @@ class iamSearch extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  async connectedCallback() {
+  async connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const searchWrapper = this;
     const inputField = this.querySelector('input');
     const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';
@@ -49,6 +52,7 @@ class iamSearch extends HTMLElement {
     const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';
     let datalist = this.querySelector('datalist');
     const searched = [];
+    let ajaxURL = this.getAttribute('data-url');
 
     // Clone original input field, re-name and use for display purposes
     const displayInputField = inputField.cloneNode();
@@ -73,7 +77,7 @@ class iamSearch extends HTMLElement {
 
     // Search the endpoint when 3 characters has been added
     if (searchWrapper.hasAttribute('data-url')) {
-      displayInputField.addEventListener('input', (event) => {
+      displayInputField.addEventListener('input', () => {
         if (displayInputField.value.length == 3 && !searched.includes(displayInputField.value)) {
           search(displayInputField.value);
           searched.push(displayInputField.value);
@@ -81,7 +85,7 @@ class iamSearch extends HTMLElement {
       });
     }
 
-    function checkMatch() {
+    function checkMatch(): void {
       const match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
       const subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
@@ -97,12 +101,11 @@ class iamSearch extends HTMLElement {
     }
 
     // on change update oringinal field with the actual value and use displayed input for the nice display text
-    displayInputField.addEventListener('input', (event) => {
+    displayInputField.addEventListener('input', () => {
       checkMatch();
     });
 
-    const search = async (searchterm) => {
-      let ajaxURL = searchWrapper.getAttribute('data-url');
+    const search = async (searchterm): any => {
       ajaxURL += `${encodeURI(searchterm)}`;
 
       // Setup controller vars if not already set
@@ -134,7 +137,7 @@ class iamSearch extends HTMLElement {
             const loopValues = resolvePath(response, loopSchema, '');
 
             if (isTraversable(loopValues) && typeof loopValues.forEach == 'function') {
-              loopValues.forEach((item, index) => {
+              loopValues.forEach((item) => {
                 const actualValue = resolvePath(item, valueSchema, '');
                 const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
 
@@ -146,7 +149,7 @@ class iamSearch extends HTMLElement {
             } else if (typeof loopValues == 'object') {
               for (const [key, value] of Object.entries(loopValues)) {
                 if (isTraversable(value) && typeof value.forEach == 'function') {
-                  value.forEach((item, index) => {
+                  value.forEach((item) => {
                     const actualValue = resolvePath(item, valueSchema, '');
                     const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
 

package/assets/ts/components/slider/slider.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -38,7 +36,8 @@ class iamSlider extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const slider = this;
     const minElement = this.shadowRoot.querySelector('.min');
     const maxElement = this.shadowRoot.querySelector('.max');
@@ -56,7 +55,7 @@ class iamSlider extends HTMLElement {
       stepperStart = 'touchstart';
     }
 
-    const stepperFunction = function (input, eventType) {
+    const stepperFunction = function (input): void {
       const value = input.value;
 
       const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
@@ -118,16 +117,16 @@ class iamSlider extends HTMLElement {
     const sliders = this.shadowRoot.querySelectorAll('input');
 
     Array.from(inputs).forEach((input, index) => {
-      input.addEventListener('keyup', function (event) {
+      input.addEventListener('keyup', function () {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
-      input.addEventListener('keydown', function (event) {
+      input.addEventListener('keydown', function () {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
 
-      input.addEventListener('change', function (event) {
+      input.addEventListener('change', function () {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
@@ -136,7 +135,7 @@ class iamSlider extends HTMLElement {
     Array.from(sliders).forEach((input, index) => {
       stepperFunction(input, 'start');
 
-      input.addEventListener(stepperStart, function (event) {
+      input.addEventListener(stepperStart, function () {
         clearInterval(stepperInterval);
         stepperInterval = setInterval(function () {
           stepperFunction(input, 'drag');
@@ -144,11 +143,11 @@ class iamSlider extends HTMLElement {
         }, 10);
       });
 
-      input.addEventListener(stepperEvent, function (event) {
+      input.addEventListener(stepperEvent, function () {
         clearInterval(stepperInterval);
       });
 
-      input.addEventListener('change', function (event) {
+      input.addEventListener('change', function () {
         clearInterval(stepperInterval);
         stepperFunction(input, 'click');
         inputs[index].value = input.value;

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

@@ -1,43 +1,43 @@
-// @ts-nocheck
-import * as tableModule from '../../modules/table';
-class iamTable extends HTMLElement {
+import {
+  moveAttributesToComponents,
+  findForm,
+  setupBasicTable,
+  setupAdvancedTable,
+  paginateRows,
+  setupNoSubmitTable,
+  setupSubmitTable,
+  setupAjaxTable,
+  loadAjaxTable,
+  paginateTable,
+} from '../../modules/table';
+
+class iamTableBasic extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-    const coreCSS = document.body.hasAttribute('data-core-css')
-      ? document.body.getAttribute('data-core-css')
-      : `${assetLocation}/css/core.min.css`;
-    const loadCSS = `@import "${assetLocation}/css/components/table.css";`;
+
+    const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
 
-    :host(.mh-sm){
-      max-height: none!important;
-    }
-    :host(.mh-md){
-      max-height: none!important;
-    }
-    :host(.mh-lg){
-      max-height: none!important;
-    }
-    
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <slot name="before"></slot>
-    <div class="table--cta">
-    <div class="table__wrapper">
-      <slot></slot>
+    <div class="table__container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ></iam-pagination>
     </div>
-    </div>
-    <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -47,237 +47,40 @@ class iamTable extends HTMLElement {
     }
   }
 
-  connectedCallback() {
-    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', params.has('show') ? params.get('show') : 15);
-    }
-
-    if (!this.hasAttribute('data-increment')) {
-      this.setAttribute('data-increment', this.getAttribute('data-show'));
-    }
-
-    // Update table__wrapper class
-    let classList = this.classList.toString();
-
-    classList = classList.replace('table--cta', '');
-    classList = classList.replace('table--loading', '');
-    //classList = classList.replace('mh-md','');
-    this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
-
-    // set actionbar class if needed
-    if (this.querySelector('.actionbar__sticky')) {
-      this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
-    }
-
-    this.table = this.querySelector('table');
-    this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
-
-    this.pagination = this.shadowRoot.querySelector('iam-pagination');
-    this.pagination.setAttribute('data-total', this.getAttribute('data-total'));
-    this.pagination.setAttribute('data-page', this.getAttribute('data-page'));
-    this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
-    this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
-
-    if (this.hasAttribute('data-page-jump')) {
-      this.pagination.setAttribute('data-page-jump', 'true');
-    }
-    if (this.hasAttribute('data-per-page')) {
-      this.pagination.setAttribute('data-per-page', 'true');
-    }
-    if (this.hasAttribute('data-item-count')) {
-      this.pagination.setAttribute('data-item-count', 'true');
-    }
-    if (this.hasAttribute('data-loading')) {
-      this.pagination.setAttribute('data-loading', 'true');
-    }
-    if (this.classList.contains('table--fullwidth')) {
-      this.pagination.setAttribute('data-minimal', 'true');
-    }
-
-    // Remove table CTA
-    const isCTA = this.classList.contains('table--cta');
+  connectedCallback(): void {
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
 
-    if (!isCTA) this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
-
-    // Set events on the filter table
-    this.form = document.createElement('form');
-    if (this.hasAttribute('data-filterby')) {
-      this.form = document.querySelector(`#${this.getAttribute('data-filterby')}`);
-    } else {
-      this.table.parentNode.insertBefore(this.form, this.table.nextSibling);
-    }
+    const form = findForm(this, table);
 
-    // Set ajax class
-    if (this.form.hasAttribute('data-ajax')) {
-      this.table.classList.add('table--ajax');
-    }
-    // Create a data list if a search input is present
-    tableModule.createSearchDataList(this.table, this.form);
+    const savedTableBody = table.querySelector('tbody').cloneNode(true);
 
-    if (!this.form.querySelector('[data-pagination]')) {
-      this.form.insertAdjacentHTML(
-        'beforeend',
-        `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
-      );
-    }
-    if (!this.form.querySelector('[data-show]')) {
-      this.form.insertAdjacentHTML(
-        'beforeend',
-        `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
-      );
-    }
+    moveAttributesToComponents(this);
 
-    // 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);
+    setupBasicTable(this, table, form, pagination);
+    setupAdvancedTable(this, table, form, pagination);
 
-    if (this.form.getAttribute('data-ajax')) {
-      tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
+    if (this.hasAttribute('data-submit')) {
+      setupSubmitTable(this, table, form, pagination);
+      paginateTable(this, table, form, pagination, () => {
+        form.submit();
+      });
+    } else if (this.hasAttribute('data-no-submit')) {
+      setupNoSubmitTable(this, table, form, pagination, savedTableBody);
+      paginateTable(this, table, form, pagination, () => {
+        paginateRows(this);
+      });
+    } else if (this.hasAttribute('data-ajax')) {
+      setupAjaxTable(this, table, form, pagination);
+      paginateTable(this, table, form, pagination, () => {
+        loadAjaxTable(this, table, form, pagination);
+      });
     } else {
-      function uniqueID(index = 1) {
-        const ID = Math.floor(Math.random() * Date.now() * (index + 1));
-
-        return ID;
-      }
-
-      // Add in the checkboxes
-
-      if (
-        this.querySelector('iam-actionbar[data-selectall]') ||
-        document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)
-      ) {
-        const actionbar = this.querySelector('iam-actionbar[data-selectall]')
-          ? this.querySelector('iam-actionbar[data-selectall]')
-          : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
-
-        Array.from(this.table.querySelectorAll('thead tr')).forEach((row, index) => {
-          row.insertAdjacentHTML('afterbegin', `<th class="th--fixed"></th>`);
-        });
-
-        Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
-
-          if(!row.querySelector('.selectrow')){
-            const rowID = `row${uniqueID(index)}`;
-            row.insertAdjacentHTML(
-              'afterbegin',
-              `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`
-            );            
-          }
-        });
-
-        this.table.addEventListener('change', (event) => {
-          if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')) {
-            const count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
-            const countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
-
-            actionbar.setAttribute('data-selected', count == countChecked ? 'all' : countChecked);
-          }
-        });
-
-        actionbar.addEventListener('selected', (event) => {
-          if (event.detail.selected == '0') {
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
-              input.checked = false;
-            });
-          } else if (event.detail.selected == 'all') {
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
-              input.checked = true;
-            });
-          }
-        });
-      }
-
-      // Make the dialog menus columns fixed
-      let colIndex = -1;
-      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
-        if (row.querySelector(':scope > td > .dialog__wrapper')) {
-          const columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
-
-          columnn.classList.add('td--fixed');
-
-          colIndex = Array.from(columnn.parentNode.children).indexOf(columnn);
-        }
+      paginateTable(this, table, form, pagination, () => {
+        paginateRows(this);
       });
-
-      if (colIndex != -1) {
-        this.table.querySelector(`thead tr th:nth-child(${colIndex + 1})`).classList.add('th--fixed');
-
-        Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`)).forEach((col, index) => {
-          col.classList.add('td--fixed');
-        });
-      }
-
-      tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-
-      if (!this.hasAttribute('data-no-submit')) tableModule.filterTable(this.table, this.form, this);
-
-      tableModule.populateDataQueries(this.table, this.form);
-    }
-
-    this.shadowRoot.querySelector('.table__wrapper').addEventListener('scroll', (event) => {
-      if (this.table.querySelector('dialog[open]')) {
-        this.table.querySelector('dialog[open]').close();
-        this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
-      }
-    });
-
-    // Push up the pagination events
-    this.pagination.addEventListener('update-show', (event) => {
-      const show = event.detail.show;
-
-      const updateEvent = new CustomEvent('update-show', { detail: { show: show } });
-      this.dispatchEvent(updateEvent);
-    });
-
-    this.pagination.addEventListener('update-page', (event) => {
-      const page = event.detail.page;
-
-      const updateEvent = new CustomEvent('update-page', { detail: { page: page } });
-      this.dispatchEvent(updateEvent);
-    });
-  }
-
-  static get observedAttributes() {
-    return ['data-total', 'data-page', 'data-show'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    this.pagination = this.shadowRoot.querySelector('iam-pagination');
-
-    switch (attrName) {
-      case 'data-total': {
-        if (oldVal != newVal) {
-          this.pagination.setAttribute('data-total', newVal);
-        }
-        break;
-      }
-      case 'data-show': {
-        if (oldVal != newVal) {
-          this.pagination.setAttribute('data-show', newVal);
-        }
-        break;
-      }
-      case 'data-page': {
-        if (oldVal != newVal) {
-          this.pagination.setAttribute('data-page', newVal);
-        }
-        break;
-      }
     }
   }
 }
 
-export default iamTable;
+export default iamTableBasic;

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

@@ -0,0 +1,64 @@
+import {
+  setupBasicTable,
+  findForm,
+  setupAdvancedTable,
+  setupAjaxTable,
+  paginateTable,
+  loadAjaxTable,
+} from '../../modules/table';
+
+class iamTableAjax 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/table.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="table__container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (!document.getElementById('tableSingleExtras') && !document.getElementById('tableExtras')) {
+      document.head.insertAdjacentHTML('beforeend', `<style id="tableSingleExtras">${loadExtraCSS}</style>`);
+    }
+  }
+
+  connectedCallback(): void {
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
+
+    const form = findForm(this, table);
+
+    setupBasicTable(this, table, form, pagination);
+
+    setupAdvancedTable(this, table, form, pagination);
+
+    setupAjaxTable(this, table, form, pagination);
+
+    paginateTable(component, table, form, pagination, () => {
+      loadAjaxTable(component, table, form, pagination);
+    });
+  }
+}
+
+export default iamTableAjax;

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

@@ -0,0 +1,40 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/table/table.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-table`))
+    window.customElements.define(`iam-table`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<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 |
+| data-no-scroll  | flag             | -             | Stops the page from scrolling up to the top of the table                                        |
+| data-expandable | flag             | -             | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly     |
+
+_Pagination properties can also be added to the table component so that they can be passed down to the child pagination element._
+
+**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--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-basic/table-basic.component.ts

@@ -0,0 +1,56 @@
+import { setupBasicTable, paginateRows, findForm, paginateTable } from '../../modules/table';
+
+class iamTableBasic 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/table.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table-basic.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="table__container" part="container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper" part="wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (
+      !document.getElementById('tableBasicExtras') &&
+      !document.getElementById('tableSingleExtras') &&
+      !document.getElementById('tableExtras')
+    ) {
+      document.head.insertAdjacentHTML('beforeend', `<style id="tableBasicExtras">${loadExtraCSS}</style>`);
+    }
+  }
+
+  connectedCallback(): void {
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
+    const form = findForm(this, table);
+
+    setupBasicTable(this, table, form, pagination);
+
+    paginateTable(this, table, form, pagination, () => {
+      paginateRows(component);
+    });
+  }
+}
+
+export default iamTableBasic;