@iamproperty/components 3.7.9 → 3.9.0-beta-1

package/assets/ts/components/nav/README.md

@@ -0,0 +1,68 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-nav`))
+    window.customElements.define(`iam-nav`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<nav>
+<iam-nav>
+  <a href="/" class="brand brand--property" slot="logo">
+    <svg>
+      <title>iamproperty</title>
+      <use xlink:href="/svg/logo.svg#logo-property"></use>
+    </svg>
+  </a>
+
+  <a href="/" class="selected">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+
+  <button class="btn btn-primary">Lorem ipsum</button>
+</iam-nav>
+</nav>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-search  | String | - | Optional, displays a search button and form. The value passed through is used for the forms action attribute. |
+| data-list  | String | - | Optional string with an ID of a datalist, note this list needs to be added as an element in the component |
+| data-prevent-search  | String | - | Flag that prevents the search form submitting allowing it to used purely with JavaScript |
+| data-searcd-open  | String | - | Flag that opens the search bar on desktop on page load. |
+
+**Slots**
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Populates the main nav area |
+| logo | - | A place to add the logo to the site |
+| secondary | - | Moves the link upto the top of the navbar on desktop |
+| actions | - | A place to add buttons |
+| dual | - | Plave the link or list to the right of the nav, forcing the default slot to the left. |
+
+**Class modifiers**
+
+- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background. 
+- Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
+- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.
+
+**Dispatched events**
+
+| Event | Dispatched when | Details passed|
+| ------ | ------------- | ----------- |
+| search-keydown | When a user uses the search input field and triggers the keydown event. | { search: $inputValue } |
+| search-keyup | When a user uses the search input field and triggers the keyup event. | { search: $inputValue } |
+| search-change | When a user uses the search input field and triggers the change event. | { search: $inputValue } |
+| search-submit | When a user uses the search form and triggers the submit event. | { search: $inputValue } |

package/assets/ts/components/nav/nav.component.ts

@@ -0,0 +1,370 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "nav"
+});
+
+class iamNav extends HTMLElement {
+
+  constructor(){
+    super();
+    const shadowRoot = 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/nav.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style class="styles">
+    @import "${coreCSS}";
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="container">
+      <slot name="logo"></slot>
+      <div class="buttons-holder"></div>
+      <button class="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
+
+      <div class="menu__outer">
+        <div class="menu closed">
+            
+          <div class="menu__primary">
+            <slot></slot>
+            <slot name="dual"></slot>
+          </div>
+          <div class="dialog__wrapper d-none" id="search-wrapper"></div>
+          <slot name="actions"></slot>
+          <div class="menu__secondary">
+            <div class="container">
+            <slot name="secondary"></slot>
+            </div>
+          </div>
+        </div>
+        <slot name="menus"></slot>
+      </div>      
+    </div>
+    <div class="lists"></div>
+    <div class="backdrop" part="backdrop"></div>
+    `;
+
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    // Load external CSS if needed
+    if(this.hasAttribute('data-css'))
+      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+    
+    const menuButton = this.shadowRoot.querySelector('.btn-menu');
+    const menu = this.shadowRoot.querySelector('.menu');
+    const iamNav = this;
+    const backdrop = this.shadowRoot.querySelector('.backdrop');
+    const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
+
+    // Check the content 
+    this.querySelectorAll(':scope > *').forEach(function(element){
+      let tagname = element.tagName;
+
+      switch(tagname){
+        case "BUTTON":
+          element.setAttribute('slot','actions');
+          menu.classList.add('has-actions')
+          break;
+      }
+
+      // Create menu button
+      if(element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')){
+
+        const title = element.getAttribute('data-title');
+        const iconClass = element.getAttribute('data-icon');
+
+        // Create the menu button that sits seperately to the menu
+        const button = document.createElement('button');
+        button.setAttribute('slot',title);
+        button.classList.add('btn-menu');
+        button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
+        buttonsHolder.insertAdjacentElement('beforeend',button);
+
+        const mdButton = button.querySelector('.btn-primary');
+
+        // Make sure the menu is added to the right part of the component
+        element.setAttribute('slot','menus');
+
+        // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown
+        if(element.classList.contains('open')){
+          button.classList.add('selected');
+          mdButton.classList.toggle('active');
+          iamNav.classList.add('open');
+          backdrop.classList.add('show');
+        }
+        else {
+          element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues
+        }
+
+        // Click event
+        button.addEventListener('click', function(e){
+      
+          e.preventDefault();
+          button.classList.toggle('selected');
+          element.classList.toggle('open');
+          mdButton.classList.toggle('active');
+
+          // Close desktop menus
+          let openMenu = iamNav.querySelector(':scope > details[open]');
+
+          if(openMenu)
+            openMenu.removeAttribute('open')
+
+          // Close the main menu and fix states on the button, iamNav component and backdrop
+          if(element.classList.contains('open')){
+            
+            menu.classList.remove('open');
+            menuButton.classList.remove('selected');
+            setTimeout(function(){ menu.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+            iamNav.classList.add('open');
+            backdrop.classList.add('show');
+            element.classList.remove('closed');
+          }
+          else{
+            iamNav.classList.remove('open');
+            backdrop.classList.remove('show');
+            setTimeout(function(){ element.classList.add('closed') }, 1000);
+          }
+
+          // Close any open menus
+          iamNav.querySelectorAll('.nav--menu.open').forEach(function(openmenu){
+            if(openmenu != element) {
+              openmenu.classList.remove('open');
+            }
+          });
+
+          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(selectedButton){
+
+            if(selectedButton != button){
+
+              selectedButton.classList.remove('selected');
+              let innerBtn = selectedButton.querySelector('.btn-primary');
+              innerBtn.classList.remove('active');
+            }
+          });
+
+        }, false);
+      }
+    });
+    
+    // Has secondary link
+    if(this.querySelector('a[slot="secondary"]')){
+      menu.classList.add('has-secondary');
+    }
+
+    // Create a scroll width variable to help with the sizing of the menu with in the CSS
+    document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');
+
+    // Open and close the menu
+    menuButton.addEventListener('click', function(e){
+      
+      e.preventDefault();
+      menuButton.classList.toggle('selected');
+      menu.classList.toggle('open');
+
+      // Close any other menus
+      iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+        element.classList.remove('open');
+        setTimeout(function(){ element.classList.add('closed') }, 1000);
+      });
+      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(element){
+        element.classList.remove('selected');
+        let innerBtn = element.querySelector('.btn-primary');
+        innerBtn.classList.remove('active');
+      });
+
+      if(menu.classList.contains('open')){
+        iamNav.classList.add('open');
+        menu.classList.remove('closed');
+      }
+      else {
+        iamNav.classList.remove('open');
+        setTimeout(function(){ menu.classList.add('closed') }, 1000);
+      }
+
+    }, false);
+
+    // Allow outside JS to close the menu
+    this.addEventListener("request-close", (event) => {
+
+      menuButton.classList.remove('selected');
+      menu.classList.remove('open');
+      iamNav.classList.remove('open');
+    });
+
+    // Close the menu on the click of the backdrop on desktop
+    backdrop.addEventListener("click", (event) => {
+
+      let openMenu = this.querySelector('details[open] summary');
+
+      if(openMenu)
+        openMenu.click();
+
+      iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+        element.classList.remove('open');
+      });
+      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(element){
+        element.classList.remove('selected');
+        let innerBtn = element.querySelector('.btn-primary');
+        innerBtn.classList.remove('active');
+      });
+
+      backdrop.classList.remove('show');
+    });
+
+    // On desktop close other menu's (details) when one is clicked
+    this.addEventListener("click", (event) => {
+
+      if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
+
+        if(window.innerWidth > 992){
+
+          let summary = event.target.closest('summary');
+          let details = summary.closest('details');
+          let wrapper = details.parentNode;
+
+          if(details.hasAttribute('open'))
+            details.removeAttribute('open');
+          else
+            details.setAttribute('open','true');
+
+          // Close any bespoke menus
+          iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+            element.classList.remove('open');
+            setTimeout(function(){ menu.classList.add('closed') }, 1000);
+          });
+          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(element){
+            element.classList.remove('selected');
+            let innerBtn = element.querySelector('.btn-primary');
+            innerBtn.classList.remove('active');
+          });
+
+          // Close any other dropdowns on the same level
+          Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {
+            
+            if(detailsArrayElement != details)
+              detailsArrayElement.removeAttribute('open')
+          });
+
+          if(this.querySelectorAll(':scope > details[open]').length){
+            backdrop.classList.add('show');
+            iamNav.classList.add('open');
+          }
+          else {
+            backdrop.classList.remove('show');
+            iamNav.classList.remove('open');
+          }
+
+          event.preventDefault();
+        }
+      };
+    });
+
+    // Mega menu title
+    this.querySelectorAll('details').forEach((detailsElement) => {
+
+      let summary = detailsElement.querySelector('summary');
+      let containerDiv = detailsElement.querySelector(':Scope > div');
+
+      containerDiv.setAttribute('data-title', summary.textContent);
+    });
+
+    // Search 
+    if(this.hasAttribute('data-search')){
+      menu.classList.add('has-search');
+      let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
+
+      searchWrapper.classList.remove('d-none');
+      searchWrapper.insertAdjacentHTML('afterbegin',`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button">Open Search field</button>
+      <dialog id="search-dialog">
+      <div class="container">
+        <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
+          <div class="col mb-0 ms-auto col-md-7">
+            <label for="search" class="visually-hidden">Search</label>
+            <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
+            <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
+          </div>
+          <div class="col d-none d-md-block mw-fit-content ms-3">
+            <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close"></button>
+          </div>
+        </form>
+      </div>
+      </dialog>`);
+      
+      let searchButton = this.shadowRoot.querySelector('#search-button');
+      let searchClose = this.shadowRoot.querySelector('#search-close');
+      let searchDialog = this.shadowRoot.querySelector('#search-dialog');
+      let searchInput = this.shadowRoot.querySelector('#search');
+      let searchForm = this.shadowRoot.querySelector('#search-form');
+
+      if(this.hasAttribute('data-search-open')){
+        
+        searchDialog.setAttribute('open','open');
+        this.classList.add('search-open');
+      }
+
+      searchButton.addEventListener("click", (event) => {
+
+        searchDialog.setAttribute('open','open');
+        this.classList.add('search-open');
+      });
+
+      searchClose.addEventListener("click", (event) => {
+
+        searchDialog.removeAttribute('open');
+        this.classList.remove('search-open');
+      });
+
+      // Search events
+      searchInput.addEventListener('keydown', (event) => {
+
+        const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
+        this.dispatchEvent(keyupEvent);
+      });
+
+      searchInput.addEventListener('keyup', (event) => {
+
+        if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list')) 
+          searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
+        else
+          searchInput.removeAttribute("list");
+
+        const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
+        this.dispatchEvent(keyupEvent);
+      });
+  
+      searchInput.addEventListener('change', (event) => {
+  
+        const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
+        this.dispatchEvent(changeEvent);
+      });
+
+      searchForm.addEventListener('submit', (event) => {
+        
+        if(this.hasAttribute('data-prevent-search'))
+          event.preventDefault();
+
+        const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
+        this.dispatchEvent(submitEvent);
+      });
+
+      // Make sure any child lists are available to the search input
+      this.querySelectorAll('datalist').forEach((list) => {
+
+        iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend',list);
+      });
+    }
+  }
+}
+
+export default iamNav;

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

@@ -27,6 +27,7 @@ class iamTable extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
+    <slot name="before"></slot>
     <div class="table--cta">
     <div class="table__wrapper">
       <slot></slot>
@@ -124,6 +125,70 @@ class iamTable extends HTMLElement {
       }
 
     });
+
+
+    // Add in the checkboxes
+
+    if(this.querySelector('iam-actionbar[data-selectall]')){
+      
+      const actionbar = this.querySelector('iam-actionbar[data-selectall]');
+
+      Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
+            
+        row.insertAdjacentHTML(
+          'afterbegin',
+          "<th></th>"
+        );
+      });
+
+      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
+            
+        row.insertAdjacentHTML(
+          'afterbegin',
+          `<td class="selectrow"><input type="checkbox" name="row" id="row${index}"/><label for="row${index}"><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')){
+
+        
+          let count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
+          let countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
+
+          actionbar.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+
+          console.log(countChecked);
+        };
+
+      });
+
+      actionbar.addEventListener('selected', (event) => {
+
+        console.log(event.detail.selected);
+
+
+        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;
+          });
+
+        }
+        
+      });
+
+    }
   }
 
 

package/assets/ts/modules/dialogs.ts

@@ -20,6 +20,9 @@ const extendDialogs = (body) => {
   // Dialogs/modals
   body.addEventListener('click', (event) => {
 
+    if(event.target.tagName == 'IAM-ACTIONBAR')
+      return false;
+
     // Modal
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
 
@@ -77,7 +80,12 @@ const extendDialogs = (body) => {
     
     // Close the modal when clicked on the backdrop
     if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
-      const dialog = event.target.closest('dialog[open]');
+      let dialog = event.target.closest('dialog[open]');
+
+      // Small fix to make sure the dialog isn't a dialog inside of a dialog.
+      var style = window.getComputedStyle(dialog);
+      if(style.display === 'contents')
+        dialog = dialog.parentNode.closest('dialog[open]');
       
       // Dont allow the backdrop to be clicked when transactional
       if(!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')){
@@ -101,13 +109,16 @@ const extendDialogs = (body) => {
     // Popover
     if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
 
+      
+    event.stopPropagation();
+
       let btn = event.target.closest('.dialog__wrapper > button');
       let parent = event.target.closest('.dialog__wrapper > button').parentNode;
       let dataEvent = "openPopover"
       let popover = parent.querySelector(':scope > dialog');
       
-      if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
-        document.querySelector('dialog[open]').close();
+      if(document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover)
+        document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
 
       // Remove active class from exiting active buttons
       Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
@@ -152,8 +163,14 @@ const extendDialogs = (body) => {
       if(popoverBottom > windowPos){
 
         let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style')+' ' : '';
-
         popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
+
+        // Check that the dialog doesn't go over the top of the page
+        boundingRec = popover.getBoundingClientRect();
+        let popoverTop = boundingRec.top - window.scrollY;
+
+        if(popoverTop < 100)
+          popover.removeAttribute('style');
       }
 
       window.dataLayer = window.dataLayer || [];
@@ -199,6 +216,7 @@ export const createDialog = (dialog) => {
     createMultiFormDialog(dialog);
   }
 
+  // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
   if(!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
@@ -218,7 +236,7 @@ export const createDialog = (dialog) => {
 
   // Create close button is needed
   if(!dialog.querySelector(':scope > button:first-child'))
-    dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+    dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 
 }
 
@@ -244,7 +262,7 @@ export const createMultiFormDialog = (dialog) => {
       btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
   });
 
-  dialog.innerHTML = `<div class="steps bg-primary">${buttons}</div>${dialog.innerHTML}`;
+  dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
 
 
   // Open the fieldset with an error inside

package/assets/ts/modules/table.ts

@@ -456,12 +456,23 @@ export const filterTable = (table, form, wrapper) => {
   //Display the filter count
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
+    element.parentNode.classList.remove('hover');
   });
 
-  if(Object.keys(filters).length) {
-      
+  let filterCount = 0;
+  Object.values(filters).forEach((filter, index) => {
+
+    if(typeof filter == "object" && Object.values(filter).length)
+      filterCount += Object.values(filter).length;
+    else
+      filterCount++;
+  });
+
+  if(filterCount) {
+
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${Object.keys(filters).length})`;
+      element.innerHTML += `(${filterCount})`;
+      element.parentNode.classList.add('hover');
     });
   }
   
@@ -829,12 +840,23 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
+    element.parentNode.classList.remove('hover');
   });
 
-  if(Object.keys(filters).length) {
-      
+  let filterCount = 0;
+  Object.values(filters).forEach((filter, index) => {
+
+    if(typeof filter == "object" && Object.values(filter).length)
+      filterCount += Object.values(filter).length;
+    else
+      filterCount++;
+  });
+
+  if(filterCount) {
+
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${Object.keys(filters).length})`;
+      element.innerHTML += `(${filterCount})`;
+      element.parentNode.classList.add('hover');
     });
   }
 
@@ -944,7 +966,7 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
 
         
-        makeTableFunctional(table, form, pagination, wrapper);        
+        makeTableFunctional(table, form, pagination, wrapper);
         createPaginationButttons(wrapper, pagination);
 
         Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement, index) => {