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

package/assets/ts/modules/tabs.ts

@@ -1,11 +1,9 @@
-// @ts-nocheck
 import { getSwipeDirection } from './helpers';
 
-export const createTabsLinks = function (tabsElement: Element) {
-  const details = tabsElement.querySelectorAll(':scope > details');
+export const createTabsLinks = function (tabsElement: Element): void {
   const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');
-  const summaries = tabsElement.querySelectorAll(':scope > details > summary');
   let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
+  let tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');
 
   if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
     tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');
@@ -21,10 +19,19 @@ export const createTabsLinks = function (tabsElement: Element) {
     tabsElement.prepend(tabLinksWrapper);
   }
 
+  if (!tabDropdown) {
+    tabDropdown = document.createElement('select');
+
+    tabDropdown.classList.add('tabs__dropdown');
+
+    tabsElement.prepend(tabDropdown);
+  }
+
   // Create the tab buttons from the summary titles
   let tabindex = 0;
-  detailsORLinks.forEach((element, index) => {
+  detailsORLinks.forEach((element) => {
     let button = document.createElement('button');
+    const dropdownOpt = document.createElement('option');
 
     if (element.matches('details')) {
       const summary = element.querySelector(':scope > summary');
@@ -41,6 +48,11 @@ export const createTabsLinks = function (tabsElement: Element) {
       button.classList.add('link');
       button.setAttribute('data-index', tabindex);
       button.setAttribute('part', 'tab-link');
+
+      dropdownOpt.innerHTML = `${summary.innerText}`;
+      dropdownOpt.value = summary.innerText.replace(/\s+/g, '-').toLowerCase();
+      dropdownOpt.setAttribute('data-index', tabindex);
+
       element.setAttribute('tabindex', '-1');
 
       if (isDisabled) {
@@ -54,25 +66,28 @@ export const createTabsLinks = function (tabsElement: Element) {
 
     button.classList.add('link');
     tabLinks.appendChild(button);
+
+    tabDropdown.appendChild(dropdownOpt);
   });
 };
 
-export const setTabsEventHandlers = function (tabsElement: Element) {
+export const setTabsEventHandlers = function (tabsElement: Element): void {
   const details = tabsElement.querySelectorAll(':scope > details');
   const summaries = tabsElement.querySelectorAll(':scope > details > summary');
   let buttonWrapper = tabsElement.querySelector(':scope .tabs__links');
   let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');
+  const tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');
 
   let nextButton = tabsElement.querySelector(':scope .tabs__next');
 
-  var scrollTimeout;
+  let scrollTimeout;
   window.isClicked = false;
   window.isScrolling = false;
 
   if (tabsElement.shadowRoot) {
     buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
     buttonWrapper = tabsElement.shadowRoot.querySelector('.tabs__links');
-    nextButton = tabsElement.shadowRoot.querySelector(':scope .tabs__next');
+    nextButton = tabsElement.shadowRoot.querySelector('.tabs__next');
   }
 
   // Set the on click for the tab buttons, these will open the details box it matches too
@@ -95,11 +110,14 @@ export const setTabsEventHandlers = function (tabsElement: Element) {
         behavior: 'smooth',
       });
 
-      details.forEach((detail, detailsIndex) => {
-        const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+      //Handles showing correct content
+      toggleTab(details, button);
 
-        if (detailsOpen) detail.setAttribute('open', detailsOpen);
-        else detail.removeAttribute('open');
+      // Data layer Open Event
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: 'openTab',
+        tabTitle: button.textContent,
       });
 
       if (button.matches(':last-child')) {
@@ -107,17 +125,12 @@ export const setTabsEventHandlers = function (tabsElement: Element) {
       } else {
         nextButton?.removeAttribute('disabled');
       }
-
-      // Data layer Open Event
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        event: 'openTab',
-        tabTitle: button.textContent,
-      });
     });
+
+    dropdownTabSelector(details, tabDropdown);
   });
 
-  buttonWrapper.addEventListener('scrollend', (event) => {
+  buttonWrapper.addEventListener('scrollend', () => {
     clearTimeout(scrollTimeout);
 
     scrollTimeout = setTimeout(function () {
@@ -154,6 +167,7 @@ export const setTabsEventHandlers = function (tabsElement: Element) {
 
     const currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
     const nextTab = currentTab.nextSibling;
+
     if (nextTab) nextTab.click();
   });
 
@@ -195,6 +209,31 @@ export const setTabsEventHandlers = function (tabsElement: Element) {
   }
 };
 
+export const toggleTab = function (details: Array, button: Element): boolean | void {
+  details.forEach((detail, detailsIndex) => {
+    const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+
+    if (detailsOpen) detail.setAttribute('open', detailsOpen);
+    else detail.removeAttribute('open');
+  });
+};
+
+export const dropdownTabSelector = function (details: Array, dropdown: Element): boolean | void {
+  dropdown.addEventListener('change', (e) => {
+    e.preventDefault();
+    const selected = dropdown.options[dropdown.selectedIndex];
+
+    toggleTab(details, selected);
+
+    // Data layer Open Event
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      event: 'openTab',
+      tabTitle: selected.innerText,
+    });
+  });
+};
+
 export const openFirstTab = function (tabsElement: Element): boolean | void {
   if (!tabsElement.querySelector(':scope > details')) return false;
 

package/assets/ts/scripts.ts

@@ -1,10 +1,42 @@
-// @ts-nocheck
 // Modules
-import * as helpers from '../js/modules/helpers';
-import extendDialogs from '../js/modules/dialogs';
-import createDataLayer from '../js/modules/data-layer';
-import extendInputs from '../js/modules/inputs';
-import createDynamicEvents from '../js/modules/dynamicEvents';
+import * as helpers from './modules/helpers';
+import extendDialogs from './modules/dialogs';
+import createDataLayer from './modules/data-layer';
+import extendInputs from './modules/inputs';
+import createDynamicEvents from './modules/dynamicEvents';
+
+const components = [
+  'accordion',
+  'header',
+  'table',
+  'table-basic',
+  'table-no-submit',
+  'tabs',
+  'card',
+  'filter-card',
+  'video-card',
+  'record-card',
+  'filterlist',
+  'applied-filters',
+  'pagination',
+  'notification',
+  'actionbar',
+  'nav',
+  'collapsible-side',
+  'address-lookup',
+  'fileupload',
+  'search',
+  'inline-edit',
+  'multiselect',
+  'multi-step',
+  'menu',
+  'slider',
+  'carousel',
+  'marketing',
+  'barchart',
+  'doughnutchart',
+  'bento-grid',
+];
 
 // Attach classes to dom elements
 document.addEventListener('DOMContentLoaded', function () {
@@ -17,4 +49,38 @@ document.addEventListener('DOMContentLoaded', function () {
 
   extendDialogs(document.body);
   extendInputs(document.body);
+/*
+  const prefix = 'iam';
+  const options = {
+    rootMargin: '50px',
+    threshold: 0.1,
+  };
+  const componentExt = '.component.min.js';
+
+  // Load components - Each component will load once the first of its type has been loaded
+  components.forEach((component) => {
+    if (document.getElementsByTagName(`${prefix}-${component}`).length === 0) return;
+
+    const callback = (entries: any): void => {
+      entries.forEach((entry: any) => {
+        if (entry.intersectionRatio > 0) {
+
+          import(`../js/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]);
+  });
+  */
 });

package/assets/ts/tests/card.spec.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import { getChartData } from '../modules/chart.module';
+import puppeteer from 'puppeteer';
+import 'expect-puppeteer';
+
+import iamCard from '../components/card/card.component';
+
+describe('The card component', () => {
+  if (!window.customElements.get(`iam-card`)) window.customElements.define(`iam-card`, iamCard);
+
+  document.body.innerHTML = `
+<iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>`;
+
+  test('should have the class of card added to it', () => {
+    let component = document.querySelector('iam-card');
+    expect(component.classList).toContain('card');
+  });
+});

package/assets/ts/tests/carousel.spec.ts

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import { getChartData } from '../modules/chart.module';
+import puppeteer from 'puppeteer';
+import 'expect-puppeteer';
+
+import iamCarousel from '../components/carousel/carousel.component';
+import iamCard from '../components/card/card.component';
+
+import { getProgressMax } from '../modules/carousel';
+
+describe('The carousel component', () => {
+  if (!window.customElements.get(`iam-carousel`)) window.customElements.define(`iam-carousel`, iamCarousel);
+  if (!window.customElements.get(`iam-card`)) window.customElements.define(`iam-card`, iamCard);
+
+  document.body.innerHTML = `
+<iam-carousel>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+  <div>
+    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
+  </div>
+</iam-carousel>`;
+
+  test('should have a pip for each item', () => {
+    let component = document.querySelector('iam-carousel');
+    let value = component?.shadowRoot?.querySelectorAll('.carousel__controls button').length;
+
+    expect(value).toEqual(12);
+  });
+
+  test('should set the max value of the range input to the number of items divided by the visible items', () => {
+    expect(getProgressMax(9, 3)).toEqual(7);
+  });
+});

package/assets/ts/tests/chart.spec.ts

@@ -35,18 +35,21 @@ describe('The bar chart component', () => {
 </table>
 </iam-barchart>`;
 
-  test('should create the min attribute as 0', () => {
+  test('should sync HTML changes with the shadow dom', () => {
     let component = document.querySelector('iam-barchart');
-    let { min } = getChartData(component);
+    let domElement = component.querySelector('tr:first-child td:nth-child(2)');
 
-    expect(min).toEqual(0);
+    let shadowElement = component.shadowRoot.querySelector('tr:first-child td:nth-child(2)');
+    let value = shadowElement?.innerHTML;
+
+    expect(value).toEqual('<span data-group="Item 1" part="popover">300</span>');
   });
 
-  test('should equal the largest single value', () => {
+  test('should create the min attribute as 0', () => {
     let component = document.querySelector('iam-barchart');
-    let { max } = getChartData(component);
+    let { min } = getChartData(component);
 
-    expect(max).toEqual(300);
+    expect(min).toEqual(0);
   });
 
   test('should equal the largest single value', () => {

package/assets/ts/tests/fileupload.spec.ts

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import { getChartData } from '../modules/chart.module';
+import puppeteer from 'puppeteer';
+import 'expect-puppeteer';
+
+import iamFileupload from '../components/fileupload/fileupload.component';
+
+describe('The Fileupload component', () => {
+  if (!window.customElements.get(`iam-fileupload`)) window.customElements.define(`iam-fileupload`, iamFileupload);
+
+  document.body.innerHTML = `
+<iam-fileupload>
+  <input type="file" name="files[]" accept=".pdf, .csv, .jpg, .png" multiple="multiple" />
+</iam-fileupload>`;
+
+  test('should have a title in its UI', () => {
+    let component = document.querySelector('iam-fileupload');
+    let title = component?.shadowRoot.querySelector('.file-upload__title');
+
+    expect(title?.innerHTML).toContain('Upload file');
+  });
+
+  test('should have a button in its UI', () => {
+    let component = document.querySelector('iam-fileupload');
+    let button = component?.shadowRoot.querySelector('button');
+
+    expect(button?.innerHTML).toContain('Upload file');
+  });
+});

package/assets/ts/tests/multistep.spec.ts

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import { getChartData } from '../modules/chart.module';
+import puppeteer from 'puppeteer';
+import 'expect-puppeteer';
+
+import iamMultiStep from '../components/multi-step/multi-step.component';
+
+describe('The Multi-step component', () => {
+  if (!window.customElements.get(`iam-multi-step`)) window.customElements.define(`iam-multi-step`, iamMultiStep);
+
+  document.body.innerHTML = `
+<iam-multi-step>
+  <form>
+    <span class="h3">Multi-step modal title</span>
+
+    <fieldset data-title="Personal details">
+      <div>
+        <label for="input1">Name 1</label>
+        <input type="text" id="input1" name="input1" placeholder="Optional placeholder text" required="" />
+        <span class="invalid-feedback">This field is required</span>
+      </div>
+    </fieldset>
+    <fieldset data-title="Property details">
+      <div>
+        <label for="input2">Name 2</label>
+        <input type="text" id="input2" name="input2" placeholder="Optional placeholder text" required="" />
+        <span class="invalid-feedback">This field is required</span>
+      </div>
+    </fieldset>
+    <fieldset data-title="Location">
+      <div>
+        <label for="input3">Name 3</label>
+        <input
+          type="text"
+          id="input3"
+          name="input3"
+          placeholder="Optional placeholder text"
+          required=""
+          class="is-invalid"
+        />
+        <span class="invalid-feedback">This field is required</span>
+      </div>
+    </fieldset>
+    <fieldset data-title="Submit property">
+      <div>
+        <label for="input4">Name 4</label>
+        <input type="text" id="input4" name="input4" placeholder="Optional placeholder text" required="" />
+        <span class="invalid-feedback">This field is required</span>
+      </div>
+    </fieldset>
+    <button class="btn btn-primary colour-success" type="submit">Register</button>
+  </form>
+
+</iam-multi-step>`;
+
+  test('should add the active class to the first fieldset element', () => {
+    let component = document.querySelector('iam-multi-step');
+    let fieldset = component.querySelector('fieldset');
+
+    expect(fieldset.classList).toContain('active');
+  });
+
+  test('should have a next button added to each fieldset element', () => {
+    let component = document.querySelector('iam-multi-step');
+    let fieldset = component.querySelector('fieldset');
+    let button = fieldset.querySelector('.btn--wrapper button[data-next]');
+
+    expect(button?.innerHTML).toContain('Next');
+  });
+
+  test('should have a steps list created using the data-title attributes for content', () => {
+    let component = document.querySelector('iam-multi-step');
+    let button = component?.shadowRoot.querySelector('.steps button');
+
+    expect(button?.innerHTML).toContain('Personal details');
+  });
+});

package/assets/ts/tests/table.spec.ts

@@ -66,30 +66,6 @@ describe('addDataAttributes', () => {
   });
 });
 
-describe('createSearchDataList', () => {
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><input name="search" id="search" type="text" class="form-control" data-search="Heading 1"></div>`;
-
-  tableModule.addDataAttributes(table);
-  tableModule.createSearchDataList(table, form);
-
-  test('should create a datalist populated by the defined columns in the data-search ', () => {
-    expect(form.querySelectorAll('datalist').length).toEqual(1);
-    expect(form.querySelectorAll('datalist option').length).toEqual(2);
-    expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
-    expect(form.querySelector('datalist option:nth-child(2)').value).toEqual('Different Cell 1');
-  });
-
-  test('should set the autocomplete attribute to off', () => {
-    expect(form.querySelectorAll('datalist').length).toEqual(1);
-    expect(form.querySelectorAll('datalist option').length).toEqual(2);
-    expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
-    expect(form.querySelector('input').getAttribute('autocomplete')).toEqual('off');
-  });
-});
-
 describe('sortTable', () => {
   const table = document.createElement('table');
   table.innerHTML = basicTable;
@@ -107,20 +83,6 @@ describe('sortTable', () => {
   });
 });
 
-describe('filterTable', () => {
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><input type="text" name="filter" id="filter" data-filter="Heading 2" value="High" /></div>`;
-
-  tableModule.addDataAttributes(table);
-  tableModule.filterTable(table, form, document.createElement('div'));
-
-  test('should filter the table to only show high values', () => {
-    expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
-  });
-});
-
 describe('formatCell', () => {
   test('should format the text correctly', () => {
     expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');