@iamproperty/components 7.2.0 → 7.2.1--beta2

package/assets/sass/components/tabs.config.scss

@@ -0,0 +1,27 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  .tabs__dropdown {
+    display: none;
+  }
+
+  iam-tabs:is(.tabs--dropdown) {
+    .tabs__dropdown {
+      display: block;
+    }
+  }
+
+  @container (min-width: 62em) {
+    iam-tabs:is(.tabs--dropdown-md) {
+      .tabs__dropdown {
+        display: block;
+      }
+    }
+  }
+
+  // #endregion
+}

package/assets/sass/components/tabs.scss

@@ -9,9 +9,38 @@ $darkMode: 'true' !default;
 }
 
 iam-tabs {
+  --colour-tab-underline: var(--colour-info);
+
   details:not([open]) {
     padding-bottom: 0;
   }
+
+  .tabs__dropdown {
+    display: none;
+    width: fit-content;
+  }
+
+  &:is(.tabs--dropdown) {
+    .tabs__dropdown {
+      display: block;
+    }
+
+    &::part(wrapper) {
+      display: none;
+    }
+  }
+
+  @container (min-width: 62em) {
+    &:is(.tabs--dropdown) {
+      .tabs__dropdown {
+        display: none;
+      }
+
+      &::part(wrapper) {
+        display: block;
+      }
+    }
+  }
 }
 
 iam-tabs::part(next-button) {
@@ -26,6 +55,7 @@ iam-tabs.tabs--guided::part(next-button) {
     display: block;
   }
 }
+
 iam-tabs.tabs--guided::part(next-button):not(:hover) {
   background: var(--colour-success);
 }
@@ -112,7 +142,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       height: 3px;
       width: 100%;
       transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
-      background: var(--colour-info);
+      background: var(--colour-tab-underline);
       transition: transform 0.4s;
     }
 
@@ -210,12 +240,14 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     pointer-events: none;
   }
 }
+
 // #endregion
 @include media-breakpoint-up(sm, $mobileOnly) {
   :host(.tabs--inline) .tabs__links {
     margin: 0;
     justify-content: center;
   }
+
   :host(.tabs--inline) .tabs__links__wrapper:after {
     width: 100%;
   }

package/assets/sass/elements/buttons--global.scss

@@ -67,7 +67,8 @@ $darkMode: 'true' !default;
     padding: var(--btn-padding-block) var(--btn-padding-inline);
     border-radius: rem(24);
     margin-bottom: var(--btn-margin);
-
+    background: none;
+    
     transition:
       background 0.5s,
       color 0.5s;

package/assets/sass/elements/table.element.scss

@@ -51,6 +51,15 @@ $darkMode: 'true' !default;
     overflow: auto;
   }
 
+  div:has(> table:first-child:last-child) {
+    overflow: auto;
+    margin-bottom: rem(32);
+
+    table {
+      margin-bottom: 0;
+    }
+  }
+
   :is(td, th) {
     padding: rem(12) rem(32) rem(12) 0;
 
@@ -69,13 +78,6 @@ $darkMode: 'true' !default;
     p {
       font-size: inherit;
       padding: 0;
-      @container (width > 23.4375em) {
-        display: -webkit-box;
-        -webkit-line-clamp: 4;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        min-width: rem(300);
-      }
     }
   }
 

package/assets/sass/foundations/root.scss

@@ -122,7 +122,7 @@ $darkMode: 'true' !default;
         --colour-#{$color}: #{$value};
       }
       @include reset-colours();
-      --colour-body: var(--colour-primary);
+      --colour-body: rgb(89, 89, 89);
       color: var(--colour-body);
     }
 

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

@@ -83,6 +83,7 @@ class iamPagination extends HTMLElement {
     // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
     next.addEventListener('click', () => {
       select.value = parseInt(select.value) + 1;
+
       select.dispatchEvent(new Event('change'));
     });
 
@@ -96,8 +97,17 @@ class iamPagination extends HTMLElement {
       this.setAttribute('data-increment', event.target.value);
     });
 
+    // Load more button
+
+    const increment = parseInt(this.getAttribute('data-increment'));
+    const show = parseInt(this.getAttribute('data-show'));
+
+    if (show >= parseInt(this.getAttribute('data-total'))) {
+      loadMore.remove();
+    }
+
     loadMore.addEventListener('click', () => {
-      const newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));
+      const newValue = show + increment;
       this.setAttribute('data-show', newValue);
 
       if (newValue > parseInt(this.getAttribute('data-total'))) {
@@ -167,14 +177,14 @@ class iamPagination extends HTMLElement {
     switch (attrName) {
       case 'data-total': {
         if (oldVal != newVal) {
-          this.setAttribute('data-page', 1);
+          //this.setAttribute('data-page', 1);
           this.setup();
         }
         break;
       }
       case 'data-show': {
         if (oldVal != newVal) {
-          this.setAttribute('data-page', 1);
+          //this.setAttribute('data-page', 1);
           this.setup();
           this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
         }
@@ -183,7 +193,7 @@ class iamPagination extends HTMLElement {
       case 'data-increment': {
         if (oldVal != newVal) {
           this.setAttribute('data-show', newVal);
-          this.setAttribute('data-page', 1);
+          //this.setAttribute('data-page', 1);
           this.setup();
           this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
         }
@@ -192,6 +202,9 @@ class iamPagination extends HTMLElement {
       case 'data-page': {
         if (oldVal && oldVal != newVal) {
           this.setup();
+
+          console.log(newVal);
+
           // Dispact the event for other components to use as triggers
           this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
         }

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

@@ -1,42 +1,43 @@
-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.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,235 +48,40 @@ class iamTable extends HTMLElement {
   }
 
   connectedCallback(): void {
-    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();
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
 
-    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');
-    }
+    const form = findForm(this, table);
 
-    this.table = this.querySelector('table');
-    this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
+    const savedTableBody = 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');
-
-    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);
-    }
-
-    // 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);
-
-    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, this);
-    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') || this.hasAttribute('data-nosubmit')) {
+      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): number {
-        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) => {
-          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) => {
-              input.checked = false;
-            });
-          } else if (event.detail.selected == 'all') {
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
-              input.checked = true;
-            });
-          }
-        });
-      }
-
-      // Make the dialog menus columns fixed
-      let colIndex = -1;
-      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row) => {
-        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);
-        }
+      paginateRows(this);
+      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) => {
-          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', () => {
-      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(): any {
-    return ['data-total', 'data-page', 'data-show'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-    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.