@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/sass/templates/form.scss

@@ -1,79 +1,88 @@
-@use '../_func' as *;
+@use 'sass:map';
+@use 'sass:math';
 
-body:has(.template--form) {
-  @include light-mode() {
-    background-color: #e9f9fd;
-  }
-}
+@use '../_func' as *;
 
-.template--form {
-  --input-max-width: #{rem(450)};
-  --select-max-width: #{rem(500)};
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  @supports selector(:has(*)) {
-    label:has(> :is(.suffix, .prefix)) {
-      --input-max-width: #{rem(500)};
-      max-width: var(--input-max-width);
-    }
-    div:has(> :is(.suffix, .prefix)) {
-      --input-max-width: #{rem(500)};
-      max-width: var(--input-max-width);
+@include layer('templates', $layers) {
+  body:has(.template--form) {
+    @include light-mode($darkMode) {
+      background-color: #e9f9fd;
     }
   }
 
-  // Make H2's look like H3's
-  :is(h2, .h2) {
-    font-size: rem(map-get($heading-sizes, 'h3_fs'));
-    line-height: rem(map-get($heading-sizes, 'h3_lh'));
-    padding-bottom: rem(map-get($heading-sizes, 'h3_pb'));
-    max-width: var(--content-max-width);
+  .template--form {
+    --input-max-width: #{rem(450)};
+    --select-max-width: #{rem(500)};
 
-    @include media-breakpoint-up(sm) {
-      font-size: rem(map-get($heading-sizes, 'h3_fs_sm'));
-      line-height: rem(map-get($heading-sizes, 'h3_lh_sm'));
-      padding-bottom: rem(map-get($heading-sizes, 'h3_pb_sm'));
+    @supports selector(:has(*)) {
+      label:has(> :is(.suffix, .prefix)) {
+        --input-max-width: #{rem(500)};
+        max-width: var(--input-max-width);
+      }
+      div:has(> :is(.suffix, .prefix)) {
+        --input-max-width: #{rem(500)};
+        max-width: var(--input-max-width);
+      }
     }
-  }
-
-  @include light-mode() {
-    background-color: #e9f9fd;
-  }
 
-  .form-panel {
-    display: block;
-    padding: 2rem;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-    background-color: var(--colour-canvas-2);
-    margin-bottom: 1.5rem;
-    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-    width: 100%;
+    // Make H2's look like H3's
+    :is(h2, .h2) {
+      font-size: rem(map.get($heading-sizes, 'h3_fs'));
+      line-height: rem(map.get($heading-sizes, 'h3_lh'));
+      padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+      max-width: var(--content-max-width);
 
-    @include media-breakpoint-up(sm) {
-      max-width: calc(100% - 5rem); // Guess
-      margin-inline: auto;
+      @include media-breakpoint-up(sm, $mobileOnly) {
+        font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
+        line-height: rem(map.get($heading-sizes, 'h3_lh_sm'));
+        padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
+      }
     }
 
-    @include media-breakpoint-up(md) {
-      max-width: rem(924); // Guess
-      border-radius: 0.5rem;
-      padding-inline: rem(94);
-      padding-block: rem(40);
-      margin-bottom: rem(32);
+    @include light-mode($darkMode) {
+      background-color: #e9f9fd;
     }
 
-    > *:last-child {
-      margin-bottom: 0 !important;
+    .form-panel {
+      display: block;
+      padding: 2rem;
+      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+      background-color: var(--colour-canvas-2);
+      margin-bottom: 1.5rem;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+      width: 100%;
+
+      @include media-breakpoint-up(sm, $mobileOnly) {
+        max-width: calc(100% - 5rem); // Guess
+        margin-inline: auto;
+      }
+
+      @include media-breakpoint-up(md, $mobileOnly) {
+        max-width: rem(924); // Guess
+        border-radius: 0.5rem;
+        padding-inline: rem(94);
+        padding-block: rem(40);
+        margin-bottom: rem(32);
+      }
+
+      > *:last-child {
+        margin-bottom: 0 !important;
+      }
     }
-  }
 
-  @include media-breakpoint-up(md) {
-    .container--form {
-      padding-inline: 0;
-      max-width: rem(924) !important;
+    @include media-breakpoint-up(md, $mobileOnly) {
+      .container--form {
+        padding-inline: 0;
+        max-width: rem(924) !important;
+      }
     }
-  }
 
-  [data-loading] {
-    opacity: 0.5;
+    [data-loading] {
+      opacity: 0.5;
+    }
   }
 }

package/assets/ts/components/_global.ts

@@ -1,5 +1,4 @@
-// @ts-nocheck
-export const trackComponentRegistered = (componentName: string) => {
+export const trackComponentRegistered = (componentName: string): void => {
   // Data layer Web component created
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
@@ -8,7 +7,7 @@ export const trackComponentRegistered = (componentName: string) => {
   });
 };
 
-export const trackComponent = (component: any, componentName: string, trackEvents: any) => {
+export const trackComponent = (component: any, componentName: string, trackEvents: any): boolean => {
   // Data layer Web component created
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -43,7 +43,7 @@ class iamActionbar extends HTMLElement {
     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/actionbar.css";`;
+    const loadCSS = `@import "${assetLocation}/css/components/actionbar.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/actionbar.global.css";`;
 
     const template = document.createElement('template');
@@ -68,6 +68,18 @@ class iamActionbar extends HTMLElement {
                 <slot name="menu"></slot>
               </dialog>
             </div>
+
+
+            <div class="dialog__wrapper dialog__wrapper--right filter-columns">
+              <button class="btn btn-secondary btn-compact btn-sm mb-0 me-0 fa-regular fa-table-columns" title="Select colums">Filter</button>
+              <dialog class="dialog--list">
+                <div class="pb-0 mb-0 checklists">
+                  
+                </div>
+                <div class="text-right checklist-btns"><button id="cancelColumns" class="btn btn-action">Cancel</button><button id="saveColumns" class="btn btn-action btn-secondary">Save</button></div>
+              </dialog>
+            </div>
+
             <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
           </div>
         </div>
@@ -85,6 +97,7 @@ class iamActionbar extends HTMLElement {
           </div>
         </div>
       </div>
+
       <div class="actionbar--search">
         <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
 
@@ -106,6 +119,7 @@ class iamActionbar extends HTMLElement {
 
   connectedCallback(): void {
     const actionbarWrapper = this.shadowRoot?.querySelector('.actionbar__wrapper');
+    const checklistHolder = this.shadowRoot?.querySelector('.checklists');
 
     // #region select all
     if (this.hasAttribute('data-selectall')) {
@@ -235,7 +249,7 @@ class iamActionbar extends HTMLElement {
     // #endregion
 
     // Make sure dialogs created in the shadow dom work
-    Array.from(this.shadowRoot.querySelectorAll('.body')).forEach((element, index) => {
+    Array.from(this.shadowRoot.querySelectorAll('.body')).forEach((element) => {
       extendDialogs(element);
     });
 
@@ -387,6 +401,84 @@ class iamActionbar extends HTMLElement {
     hideButtons();
     new ResizeObserver(hideButtons).observe(actionbarWrapper);
     // #endregion
+
+    // #region cloumn filters
+
+    const setColumnFilters = (): void => {
+      let columnsHidden = '';
+      Array.from(checklistHolder?.querySelectorAll('label input')).forEach((element, index) => {
+        columnsHidden += this.hasAttribute(`data-hide-col${index + 1}`) ? `${index + 1},` : '';
+      });
+
+      const dispatchedEvent = new CustomEvent('columm-filters-set', {
+        detail: {
+          columnsHidden: columnsHidden.slice(0, -1),
+        },
+      });
+
+      this.dispatchEvent(dispatchedEvent);
+    };
+
+    if (this.hasAttribute('data-filter-columns') || this.hasAttribute('data-filter-columns-save')) {
+      const columns = this.closest('iam-table').querySelectorAll('thead th');
+
+      Array.from(columns).forEach((element, index) => {
+        if (element.textContent) {
+          checklistHolder?.insertAdjacentHTML(
+            'beforeend',
+            `<label class="m-0" title="Change the display of "><input name="hideCol${index + 1}" value="${index + 1}" type="checkbox" ${this.hasAttribute('data-hide-col' + (index + 1)) ? '' : 'checked'} /> ${element.textContent}</label>`
+          );
+        }
+      });
+    }
+
+    if (this.hasAttribute('data-filter-columns') && !this.hasAttribute('data-filter-columns-save')) {
+      checklistHolder?.addEventListener('change', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('input')) {
+          const checkbox = event.target.closest('input');
+
+          if (checkbox?.checked == false) {
+            this.setAttribute('data-hide-col' + checkbox?.value, 'true');
+          } else {
+            this.removeAttribute('data-hide-col' + checkbox?.value);
+          }
+
+          setColumnFilters();
+        }
+      });
+    }
+
+    if (this.hasAttribute('data-filter-columns-save')) {
+      const checklistHolder = this.shadowRoot?.querySelector('.checklists');
+      const checklistSave = this.shadowRoot?.querySelector('#saveColumns');
+      const checklistCancel = this.shadowRoot?.querySelector('#cancelColumns');
+
+      checklistSave?.addEventListener('click', (event) => {
+        Array.from(checklistHolder?.querySelectorAll('label input')).forEach((checkbox) => {
+          if (checkbox?.checked == false) {
+            this.setAttribute('data-hide-col' + checkbox?.value, 'true');
+          } else {
+            this.removeAttribute('data-hide-col' + checkbox?.value);
+          }
+        });
+
+        setColumnFilters();
+        checklistSave.closest('dialog')?.close();
+      });
+
+      // Revert back to what was previously saved
+      checklistCancel?.addEventListener('click', (event) => {
+        const checklistHolder = this.shadowRoot?.querySelector('.checklists');
+
+        Array.from(checklistHolder?.querySelectorAll('label input')).forEach((element, index) => {
+          element.checked = this.hasAttribute(`data-hide-col${index + 1}`) ? false : true;
+        });
+
+        setColumnFilters();
+        checklistSave.closest('dialog')?.close();
+      });
+    }
+    // #endregion
   }
 
   static get observedAttributes(): Array<string> {

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -65,9 +65,7 @@ class iamAddressLookup extends HTMLElement {
     this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
-  async connectedCallback() {
-    const component = this;
-    const wrapper = this.shadowRoot.querySelector('.wrapper');
+  async connectedCallback(): void {
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
     const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
     const manualWrapper = this.shadowRoot.querySelector('.manual-address');
@@ -77,19 +75,20 @@ class iamAddressLookup extends HTMLElement {
     const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
     const title = this.hasAttribute('data-title') ? this.getAttribute('data-title') : 'Property address';
     const preFilledAddressBtn = this.shadowRoot.querySelector('.pre-filled-address + button');
+    const dataDisplayText = this.hasAttribute('data-display-text');
 
-    Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement, index) => {
+    Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement) => {
       titleElement.innerHTML = title;
     });
 
-    function checkFilled(component) {
+    function checkFilled(component): void {
       const preFilledAddress = component.shadowRoot.querySelector('.pre-filled-address');
       let preFilled = true;
       preFilledAddress.innerHTML = '';
 
       Array.from(
         component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')
-      ).forEach((input, index) => {
+      ).forEach((input) => {
         const value = input.value;
 
         if (!value) preFilled = false;
@@ -106,7 +105,7 @@ class iamAddressLookup extends HTMLElement {
     }
     checkFilled(this);
 
-    this.addEventListener('filled', (event) => {
+    this.addEventListener('filled', () => {
       checkFilled(this);
     });
 
@@ -126,7 +125,7 @@ class iamAddressLookup extends HTMLElement {
 
             const values = JSON.parse(this.getAttribute('data-use'));
 
-            Object.keys(values).forEach((key, index) => {
+            Object.keys(values).forEach((key) => {
               const value = values[key];
               if (this.querySelector(`[data-name="${key}"]`)) this.querySelector(`[data-name="${key}"]`).value = value;
               else if (this.querySelector(`[name="${key}"]`)) this.querySelector(`[name="${key}"]`).value = value;
@@ -140,41 +139,41 @@ class iamAddressLookup extends HTMLElement {
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
-      Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input, index) => {
+      Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input) => {
         input.setAttribute('required', 'true');
       });
     }
 
-    function openManualWrapper() {
+    function openManualWrapper(): void {
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
-      Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input, index) => {
+      Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input) => {
         input.setAttribute('required', 'true');
       });
 
       manualWrapper.scrollIntoView();
     }
 
-    preFilledAddressBtn.addEventListener('click', (event) => {
+    preFilledAddressBtn.addEventListener('click', () => {
       preFilledWrapper.classList.add('js-hide');
       openManualWrapper();
     });
-    switchManualBtn.addEventListener('click', (event) => {
+    switchManualBtn.addEventListener('click', () => {
       openManualWrapper();
     });
-    switchLookupBtn.addEventListener('click', (event) => {
+    switchLookupBtn.addEventListener('click', () => {
       lookupWrapper.classList.remove('js-hide');
       manualWrapper.classList.add('js-hide');
 
       lookupWrapper.scrollIntoView();
     });
 
-    lookup.addEventListener('keyup', (event) => {
+    lookup.addEventListener('keyup', () => {
       if (lookup.value.length >= 3) search(lookup.value);
     });
 
-    lookup.addEventListener('change', (event) => {
+    lookup.addEventListener('change', () => {
       if (lookup.value.length >= 3) {
         search(lookup.value);
 
@@ -184,7 +183,7 @@ class iamAddressLookup extends HTMLElement {
 
           const values = JSON.parse(list.querySelector(`[value="${lookup.value}"]`).getAttribute('data-values'));
 
-          Object.keys(values).forEach((key, index) => {
+          Object.keys(values).forEach((key) => {
             const value = values[key];
             if (this.querySelector(`[data-name="${key}"]`) && value != '')
               this.querySelector(`[data-name="${key}"]`).value = value;
@@ -200,7 +199,7 @@ class iamAddressLookup extends HTMLElement {
           // Focus on first input
           this.querySelector('[name]').focus();
 
-          Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
+          Array.from(this.querySelectorAll('[data-required]')).forEach((input) => {
             input.setAttribute('required', 'true');
           });
           lookup.removeAttribute('required');
@@ -211,7 +210,7 @@ class iamAddressLookup extends HTMLElement {
       }
     });
 
-    const search = async (postcode) => {
+    const search = async (postcode): any => {
       let ajaxURL = this.getAttribute('data-url');
       ajaxURL += `${encodeURI(postcode)}`;
 
@@ -241,7 +240,7 @@ class iamAddressLookup extends HTMLElement {
           .then((response) => {
             // populate datalist
             let listString = '';
-            response.forEach((address, index) => {
+            response.forEach((address) => {
               // Deal with agent platform response
               if (typeof address.value == 'object') {
                 const values = JSON.stringify(address.value);
@@ -249,8 +248,8 @@ class iamAddressLookup extends HTMLElement {
               } else {
                 const values = JSON.stringify(address);
 
-                if (component.hasAttribute('data-display-text')) {
-                  listString += `<option value="${address[component.getAttribute('data-display-text')]}, ${postcode}" data-values='${values}'></option>`;
+                if (dataDisplayText) {
+                  listString += `<option value="${address[dataDisplayText]}, ${postcode}" data-values='${values}'></option>`;
                 } else {
                   let itemString = '';
                   for (const [key, value] of Object.entries(address)) {

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import createAppliedFilters from '../../modules/applied-filters';
 
 // Data layer Web component created
@@ -35,7 +34,7 @@ class iamAppliedFilters extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     createAppliedFilters(this, this.shadowRoot.querySelector('.applied-filters'));
   }
 }

package/assets/ts/components/barchart/barchart.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   addClasses,
   setupChart,
@@ -43,9 +42,10 @@ class iamBarChart extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const chartComponent = this;
-    const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
+    //const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
     const orginalTable = this.querySelector('table');
     const clonedTable = orginalTable.cloneNode(true);
     const chart = this.shadowRoot.querySelector('.chart');
@@ -72,8 +72,6 @@ class iamBarChart extends HTMLElement {
 
     trackComponent(chartComponent, 'iam-barchart', ['view-change']);
   }
-
-  attributeChangedCallback(attrName, oldVal, newVal) {}
 }
 
 export default iamBarChart;

package/assets/ts/components/bento-grid/README.md

@@ -0,0 +1,31 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/accordion/accordion.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-accordion`))
+    window.customElements.define(`iam-accordion`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-accordion class="container">
+  <details id="question1" class="accordion-item">
+    <summary class="accordion-header accordion-button h4">Question 1</summary>
+    <p>Answer </p>
+  </details>
+  <details class="accordion-item">
+    <summary class="accordion-header accordion-button h4">Question 2</summary>
+    <p>Answer </p>
+  </details>
+</iam-accordion>
+```
+
+### Class modifiers
+
+- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.

package/assets/ts/components/bento-grid/bento-grid.component.ts

@@ -0,0 +1,67 @@
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'accordion',
+});
+
+class iamAccordion 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/bento-grid.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    this.classList.add('loaded');
+
+    const arrDetails = this.querySelectorAll('details');
+
+    Array.from(arrDetails).forEach((details: HTMLDetailsElement) => {
+      details.classList.add('bg-primary');
+      const summary = details.querySelector('summary');
+
+      summary?.classList.add('h3');
+
+      if (!summary?.querySelector('[role="presentation"]'))
+        summary?.insertAdjacentHTML('beforeend', ` <span role="presentation">Find out more</span>`);
+    });
+
+    this.addEventListener('click', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('details summary')) {
+        const summary = event.target.closest('details summary');
+        const details = summary?.closest('details');
+
+        details?.classList.add('animating');
+
+        setTimeout(() => {
+          details?.classList.remove('animating');
+        }, 1100);
+      }
+    });
+  }
+}
+
+export default iamAccordion;